/* ============================================================ Shockwave CMS - base.css (ENGINE) Replaced wholesale by every engine update. Do not edit this file on a live site: put site rules in site.css, which loads after this one and is never touched by an update. Its job is to turn the CSS custom properties the CMS injects into (from Settings > Branding) into working defaults for every archetype, the nav, the footer, forms, and archives, so a fresh install looks like a deliberate, finished-but-unstyled document rather than raw HTML. Fallbacks are greyscale on purpose. A new install should read as deliberately unfinished rather than wearing another client's brand: if the starter shipped a real palette, every build would begin by undoing it. The moment Settings supplies tokens, these fallbacks stop applying. Conventions: - Everything sizes from --step-* so one change rescales the page. - Spacing uses the --space-* scale; blocks never set their own margins. - Layout responds with clamp() and auto-fit, so there are few breakpoints. - No !important anywhere except the reduced-motion block, which must win. ============================================================ */ /* ---- Tokens ------------------------------------------------------------ */ /* Brand tokens (--color-*, --font-*, heading scales) come from Settings and are injected above this file. Everything below is engine-owned and derived, so a site can override any of it in site.css without touching Branding. */ :root { --ink: var(--color-ink, #FFFFFF); --paper: var(--color-paper, #1A1A1A); --accent: var(--color-accent-pink, #333333); --muted: color-mix(in srgb, var(--paper) 60%, var(--ink)); --hairline: color-mix(in srgb, var(--paper) 18%, var(--ink)); --surface: color-mix(in srgb, var(--paper) 5%, var(--ink)); /* Type scale, fluid. --step-0 is body copy. */ --step--1: clamp(.83rem, .8rem + .15vw, .92rem); --step-0: clamp(1rem, .96rem + .2vw, 1.125rem); --step-1: clamp(1.2rem, 1.1rem + .5vw, 1.5rem); --step-2: clamp(1.45rem, 1.25rem + 1vw, 2.1rem); --step-3: clamp(1.75rem, 1.4rem + 1.8vw, 3rem); --step-4: clamp(2.1rem, 1.5rem + 3vw, 4.2rem); /* Spacing scale. Blocks use --space-block for their own rhythm. */ --space-3xs: .25rem; --space-2xs: .5rem; --space-xs: .75rem; --space-s: 1rem; --space-m: 1.5rem; --space-l: 2.5rem; --space-xl: 4rem; --space-block: clamp(3rem, 7vw, 6rem); --measure: 68ch; --gutter: clamp(1.25rem, 5vw, 4rem); --wrap: 1200px; --radius: .4rem; --radius-lg: .8rem; --border: 1px solid var(--hairline); --transition: 160ms ease; } /* ---- Reset ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; } html:focus-within { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } img, picture, video, canvas, svg { display: block; max-inline-size: 100%; block-size: auto; } input, button, textarea, select { font: inherit; color: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } ul[class], ol[class] { list-style: none; padding: 0; } /* ---- Base -------------------------------------------------------------- */ body { background: var(--ink); color: var(--paper); font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", sans-serif); font-size: var(--step-0); line-height: var(--body-line, 1.6); letter-spacing: var(--body-tracking, normal); font-weight: var(--body-weight, 400); min-block-size: 100vh; display: flex; flex-direction: column; } main { flex: 1 0 auto; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading, inherit); line-height: 1.1; text-wrap: balance; } h1 { font-size: var(--h1-size, var(--step-4)); font-weight: var(--h1-weight, 700); letter-spacing: var(--h1-tracking, -.02em); line-height: var(--h1-line, 1.05); text-transform: var(--h1-transform, none); } h2 { font-size: var(--h2-size, var(--step-3)); font-weight: var(--h2-weight, 700); letter-spacing: var(--h2-tracking, -.015em); line-height: var(--h2-line, 1.1); text-transform: var(--h2-transform, none); } h3 { font-size: var(--h3-size, var(--step-2)); font-weight: var(--h3-weight, 600); letter-spacing: var(--h3-tracking, normal); line-height: var(--h3-line, 1.2); text-transform: var(--h3-transform, none); } h4 { font-size: var(--h4-size, var(--step-1)); font-weight: var(--h4-weight, 600); } h5 { font-size: var(--h5-size, var(--step-0)); font-weight: var(--h5-weight, 600); } h6 { font-size: var(--h6-size, var(--step--1)); font-weight: var(--h6-weight, 600); text-transform: var(--h6-transform, uppercase); letter-spacing: .08em; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; transition: color var(--transition); } a:hover { color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* Long-form copy from the rich text editor. */ .prose > * + * { margin-block-start: var(--space-s); } .prose { max-inline-size: var(--measure); } .prose h2, .prose h3 { margin-block-start: var(--space-l); } .prose ul, .prose ol { padding-inline-start: 1.25rem; } .prose li + li { margin-block-start: var(--space-3xs); } .prose blockquote { margin-inline-start: 0; padding-inline-start: var(--space-s); border-inline-start: 3px solid var(--accent); font-size: var(--step-1); } .prose img { border-radius: var(--radius); margin-block: var(--space-m); } /* ---- Layout primitives -------------------------------------------------- */ .wrap, .block > * { inline-size: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; } /* Every block renders inside section.block. Blocks own vertical rhythm; nothing inside a block sets its own outer margin. */ .block { padding-block: var(--space-block); } .block + .block { padding-block-start: 0; } .block[data-bleed="true"] { padding-inline: 0; } .block[data-bleed="true"] > * { inline-size: 100%; max-inline-size: none; } .block-eyebrow { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .12em; color: var(--accent); margin-block-end: var(--space-2xs); } .block-heading { max-inline-size: 22ch; } .block-subheading { font-size: var(--step-1); color: var(--muted); max-inline-size: var(--measure); margin-block-start: var(--space-xs); } .block-body { max-inline-size: var(--measure); margin-block-start: var(--space-s); } .block-cta-link { display: inline-block; margin-block-start: var(--space-s); } /* ---- Calls to action ---------------------------------------------------- */ .cta--primary, .cta--secondary, .cta--tertiary { display: inline-block; padding: .8em 1.6em; border-radius: var(--radius); font-weight: 600; text-decoration: none; transition: background var(--transition), color var(--transition), border-color var(--transition); } .cta--primary { background: var(--accent); color: var(--ink); } .cta--primary:hover { background: var(--paper); color: var(--ink); } .cta--secondary { border: 1px solid currentColor; color: var(--paper); } .cta--secondary:hover { border-color: var(--accent); color: var(--accent); } .cta--tertiary { padding-inline: 0; text-decoration: underline; } /* ---- Hero --------------------------------------------------------------- */ .hero-inner { display: grid; gap: var(--space-l); align-items: center; } [data-layout="split"] .hero-inner { grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); } [data-layout="split"][data-direction="rtl"] .hero-inner > .hero-media { order: -1; } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-block-start: var(--space-m); } .hero-media img, .hero-media video { inline-size: 100%; border-radius: var(--radius-lg); } .block-bg { position: absolute; inset: 0; z-index: -1; object-fit: cover; inline-size: 100%; block-size: 100%; } .block:has(> .block-bg) { position: relative; isolation: isolate; } /* ---- CTA band ----------------------------------------------------------- */ .cta-band-inner { display: grid; gap: var(--space-m); justify-items: start; padding: var(--space-xl) var(--gutter); background: var(--surface); border-radius: var(--radius-lg); } .block[data-bleed="true"] .cta-band-inner { border-radius: 0; } /* ---- Grids -------------------------------------------------------------- */ .grid { display: grid; gap: clamp(1rem, 3vw, 2rem); margin-block-start: var(--space-l); } [data-layout="grid-2"] .grid { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); } [data-layout="grid-3"] .grid { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); } [data-layout="grid-4"] .grid { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); } /* Carousel: a permitted collection-grid layout. CSS only, on purpose. Scroll-snap gives real swipe on touch and trackpads, keyboard scrolling, and native momentum, with no script to load and nothing to break when JS fails. Items size by viewport rather than count, so one rule serves three cards or thirty. */ [data-layout="carousel"] .grid { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-block-end: var(--space-xs); } [data-layout="carousel"] .grid > * { flex: 0 0 clamp(16rem, 30%, 24rem); scroll-snap-align: start; } @media (max-width: 800px) { [data-layout="carousel"] .grid > * { flex-basis: min(80%, 20rem); } } /* ---- Cards -------------------------------------------------------------- */ .card { display: flex; flex-direction: column; gap: var(--space-2xs); block-size: 100%; background: var(--surface); border: var(--border); border-radius: var(--radius-lg); padding: var(--space-m); } .card-media { margin: calc(var(--space-m) * -1) calc(var(--space-m) * -1) 0; } .card-media img { inline-size: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .card-icon { font-size: var(--step-2); line-height: 1; color: var(--accent); } .card-badge { align-self: flex-start; font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em; background: var(--accent); color: var(--ink); padding: .2em .7em; border-radius: 1em; } .card-title { font-size: var(--step-1); } .card-body { color: var(--muted); } .card-cta { margin-block-start: auto; padding-block-start: var(--space-2xs); } /* ---- List and feature list ---------------------------------------------- */ .stack-list, .feature-list { display: grid; gap: var(--space-m); margin-block-start: var(--space-l); } .list-row, .feature-item { display: grid; grid-template-columns: auto 1fr; gap: var(--space-s); align-items: start; } .list-row:not(:last-child), .feature-item:not(:last-child) { padding-block-end: var(--space-m); border-block-end: var(--border); } .list-media img, .feature-media img { inline-size: clamp(4rem, 12vw, 7rem); border-radius: var(--radius); } .card-icon, .feature-icon { color: var(--accent); font-size: var(--step-2); line-height: 1; } .list-title { font-size: var(--step-1); } .list-body, .feature-body { color: var(--muted); max-inline-size: var(--measure); } .list-cta, .feature-cta { margin-block-start: var(--space-2xs); } /* ---- Gallery ------------------------------------------------------------ */ .gallery-grid { display: grid; gap: var(--space-s); margin-block-start: var(--space-l); } [data-layout="grid-2"] .gallery-grid { grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); } [data-layout="grid-3"] .gallery-grid { grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); } [data-layout="grid-4"] .gallery-grid { grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); } .gallery-item { margin: 0; } .gallery-item img { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: var(--radius); } .gallery-item figcaption { font-size: var(--step--1); color: var(--muted); margin-block-start: var(--space-3xs); } /* ---- Embed -------------------------------------------------------------- */ .block iframe { inline-size: 100%; aspect-ratio: 16 / 9; block-size: auto; border: 0; border-radius: var(--radius); } /* ---- Header and navigation ---------------------------------------------- */ /* Nav markup is structural: nested ul/li, data-depth on every item, the author's own class on the li, and .has-children where a submenu exists. Everything a mega menu needs is already here, so building one is a stylesheet job in site.css and never a schema change. */ .site-header { display: flex; align-items: center; gap: var(--space-m); inline-size: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; padding-block: var(--space-m); } .site-logo { margin-inline-end: auto; } .site-logo img { max-block-size: 2.5rem; inline-size: auto; } .site-header-cta { margin-inline-start: var(--space-s); } .site-nav .nav-list { display: flex; flex-wrap: wrap; gap: var(--space-m); align-items: center; margin: 0; } .nav-item { position: relative; } .nav-item > a, .nav-heading { text-decoration: none; font-weight: 500; } .nav-heading { color: var(--muted); cursor: default; } /* Default submenu: a plain dropdown. Replace wholesale in site.css for a mega menu; the markup already supports it. */ .site-nav .nav-list--sub { display: grid; gap: var(--space-2xs); position: absolute; inset-block-start: 100%; inset-inline-start: 0; min-inline-size: 12rem; padding: var(--space-s); background: var(--surface); border: var(--border); border-radius: var(--radius); opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition); z-index: 20; } .nav-item.has-children:hover > .nav-list--sub, .nav-item.has-children:focus-within > .nav-list--sub { opacity: 1; visibility: visible; } @media (max-width: 800px) { .site-header { flex-wrap: wrap; } .site-nav { inline-size: 100%; } .site-nav .nav-list { gap: var(--space-s); } .site-nav .nav-list--sub { position: static; opacity: 1; visibility: visible; border: 0; padding: var(--space-2xs) 0 0 var(--space-s); background: none; } } /* ---- Footer ------------------------------------------------------------- */ /* Four independent regions so a designer can build a real footer without the engine deciding the layout. */ .site-footer { margin-block-start: var(--space-block); border-block-start: var(--border); } .footer-inner { display: grid; gap: var(--space-l); grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); inline-size: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; padding-block: var(--space-xl); } .footer-logo img, .footer-logo { max-block-size: 2rem; inline-size: auto; } .footer-logo--text { font-size: var(--step-1); font-family: var(--font-heading, inherit); } .footer-blurb { color: var(--muted); max-inline-size: 34ch; margin-block-start: var(--space-2xs); } .footer-nav-heading { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-block-end: var(--space-2xs); } .footer-list { display: grid; gap: var(--space-3xs); } .footer-list--sub { padding-inline-start: var(--space-s); margin-block-start: var(--space-3xs); } .footer-social { display: flex; flex-wrap: wrap; gap: var(--space-s); } .footer-legal { inline-size: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; padding-block: var(--space-m); border-block-start: var(--border); font-size: var(--step--1); color: var(--muted); } /* ---- Forms -------------------------------------------------------------- */ .cms-form { display: grid; gap: var(--space-s); max-inline-size: 34rem; margin-block-start: var(--space-l); } .cms-form .field { display: grid; gap: var(--space-3xs); } .cms-form .field > span { font-size: var(--step--1); color: var(--muted); } .cms-form input, .cms-form textarea, .cms-form select { inline-size: 100%; padding: .7em .9em; background: var(--surface); border: var(--border); border-radius: var(--radius); color: var(--paper); } .cms-form textarea { min-block-size: 8rem; resize: vertical; } .cms-form input:focus, .cms-form textarea:focus, .cms-form select:focus { border-color: var(--accent); outline: none; } .cms-form button { justify-self: start; } /* Consent is a checkbox beside its label, never a labelled input above one. */ .cms-form .field--consent { display: flex; align-items: flex-start; gap: var(--space-2xs); } .cms-form .field--consent input { inline-size: auto; margin-block-start: .25rem; flex: 0 0 auto; } .cms-form .field--consent span { font-size: var(--step--1); } .form-success { padding: var(--space-s); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 15%, transparent); border: 1px solid var(--accent); } .form-error, .form-missing { color: #ff6b6b; font-size: var(--step--1); } .cf-turnstile { margin-block: var(--space-2xs); } /* ---- Single entry ------------------------------------------------------- */ .entry-single { padding-block: var(--space-block); } .entry-hero img { inline-size: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--radius-lg); margin-block: var(--space-m); } .entry-meta { font-size: var(--step--1); color: var(--muted); margin-block-start: var(--space-2xs); } .entry-body { margin-block-start: var(--space-l); } /* ---- Archive ------------------------------------------------------------ */ .archive { padding-block: var(--space-block); } .archive-head { margin-block-end: var(--space-l); } .archive-intro { color: var(--muted); max-inline-size: var(--measure); margin-block-start: var(--space-xs); } .archive-grid, .feed { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); } .feed-item { display: grid; gap: var(--space-2xs); } .feed-thumb img { inline-size: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--radius); } .feed-link { text-decoration: none; } .feed-link:hover { color: var(--accent); } .archive-empty { color: var(--muted); } .pager { display: flex; align-items: center; gap: var(--space-s); margin-block-start: var(--space-xl); } .pager-status { color: var(--muted); font-size: var(--step--1); } .pager-next { margin-inline-start: auto; } .pager-link { text-decoration: none; padding: .5em 1em; border: var(--border); border-radius: var(--radius); } .pager-link:hover { border-color: var(--accent); } .is-disabled { opacity: .4; pointer-events: none; } /* ---- Utility ------------------------------------------------------------ */ .hp { position: absolute; left: -9999px; } /* honeypot, never visible */