/* * gpd/cms — Public site stylesheet ("Editorial Workshop") * -------------------------------------------------------- * Companion to the admin theme + editor stylesheet. Same tokens, same * typography pair, applied to the public-facing site chrome (header, * footer, layout) and the 25 built-in block partials. * * Brand tokens (`--brand-*`, served at /brand.css) remain authoritative * for colour. The editorial layer here adds typography, spacing, * hairline rules, and motion that work on top of any brand palette. * * Light + dark variants ship side-by-side. By default the public site * respects the visitor's `prefers-color-scheme`; consumers can opt out * by setting `data-cms-theme="light"` on , or build their own * toggle and persist via the same `cms:theme` localStorage key the * editor uses. * * Wire-up (in your app.css, after Tailwind): * * @import "tailwindcss"; * @import "../../vendor/gpd/cms/resources/css/cms.css"; * @import "../../vendor/gpd/cms/resources/css/cms-public.css"; * * Layer architecture: * The entire stylesheet is wrapped in @layer base (declared first in * cms.css as `@layer base, tokens, template-overrides, page-overrides`). * Unlayered consumer CSS retains the highest priority. Per-record overrides * emitted by StyleOverrideRenderer into template-overrides / page-overrides * beat base without needing !important. * * @import must appear before any other rules (CSS spec §6.3). The font * import therefore lives outside @layer base; everything else is inside. */ @import url('https://fonts.bunny.net/css?family=fraunces:400,500,600,700,400i,500i,600i|ibm-plex-sans:300,400,500,600|ibm-plex-mono:400,500&display=swap'); @layer base { /* ----------------------------------------------------------------- * 1. Tokens — light (default) and dark (system pref OR data-attr) * ----------------------------------------------------------------- */ :root { /* * Foundational palette and typography derive from brand tokens * (served at /brand.css) when defined, falling back to the package's * "Editorial Workshop" defaults. A site that publishes brand tokens * via the admin overrides these automatically — no edits needed. * * Mapping: * --cms-paper, --cms-paper-2, --cms-paper-3 → --brand-bg, --brand-bg-light, --brand-bg-lighter * --cms-ink, --cms-ink-dim, --cms-ink-muted → --brand-text, --brand-text-light, --brand-text-muted * --cms-rule → --brand-border * --cms-font-display/sans/mono → --brand-font-heading/body/mono */ --cms-paper: var(--brand-bg, #faf8f4); --cms-paper-2: var(--brand-bg-light, #f4f0e7); --cms-paper-3: var(--brand-bg-lighter, #ede8db); --cms-elevated: var(--brand-bg-light, #ffffff); --cms-ink: var(--brand-text, #15171c); --cms-ink-strong: var(--brand-text, #0a0b0e); --cms-ink-dim: var(--brand-text-light, #4f535d); --cms-ink-muted: var(--brand-text-muted, #8b8e98); --cms-ink-faint: var(--brand-text-muted, #b2b3bb); --cms-rule: var(--brand-border, #e8e2d3); --cms-rule-strong: var(--brand-border, #cdc6b3); --cms-accent-public: var(--brand-primary, #2238c2); --cms-on-accent-public: var(--brand-on-primary, #ffffff); /* Scheme-aware text/link tokens — overridable per-Section via the * [data-cms-bg="dark"] selector so dark-background sections get * adapted text/link colors automatically without per-block CSS. */ --cms-text: #15171c; --cms-text-strong: #0a0b0e; --cms-text-muted: #6b7280; --cms-link: var(--brand-primary, #2238c2); --cms-link-hover: var(--brand-primary, #2238c2); /* Shared typography scale. All blocks reference these instead of * hardcoding sizes / spacing — gives a single place to tune, and * lets contexts (Column compact mode, etc.) override the scale * for everything inside without per-block CSS. * * Sizes use clamp() for fluid scaling: smaller floor on mobile, * larger ceiling on desktop. Removes hard breakpoint cliffs in * typography. The vw-based middle term scales linearly between. */ --cms-text-size-xs: clamp(0.6875rem, 0.625rem + 0.25vw, 0.75rem); --cms-text-size-sm: clamp(0.8125rem, 0.75rem + 0.25vw, 0.875rem); --cms-text-size: clamp(0.9375rem, 0.875rem + 0.25vw, 1rem); --cms-text-size-lg: clamp(1rem, 0.9375rem + 0.5vw, 1.125rem); --cms-heading-size-sm: clamp(0.9375rem, 0.875rem + 0.5vw, 1rem); --cms-heading-size: clamp(1rem, 0.875rem + 0.625vw, 1.125rem); --cms-heading-size-lg: clamp(1.25rem, 1rem + 1vw, 1.5rem); --cms-heading-size-xl: clamp(1.5rem, 1rem + 2vw, 2rem); --cms-line-height: 1.5; --cms-line-height-tight: 1.25; --cms-line-height-loose: 1.65; --cms-spacing-y-xs: 0.25rem; --cms-spacing-y-sm: 0.5rem; --cms-spacing-y: 0.75rem; --cms-spacing-y-lg: 1.25rem; --cms-spacing-y-xl: 2rem; --cms-shadow-sm: 0 1px 0 0 rgba(20, 22, 28, .04); --cms-shadow: 0 8px 28px -16px rgba(20, 22, 28, .14); --cms-shadow-lg: 0 24px 56px -32px rgba(20, 22, 28, .22); --cms-ease: cubic-bezier(0.32, 0.72, 0, 1); --cms-dur: 180ms; --cms-dur-long: 320ms; --cms-font-display: var(--brand-font-heading, 'Fraunces', 'Iowan Old Style', 'Georgia', serif); --cms-font-sans: var(--brand-font-body, 'IBM Plex Sans', system-ui, sans-serif); --cms-font-mono: var(--brand-font-mono, 'IBM Plex Mono', 'SF Mono', monospace); --cms-radius-xs: 4px; --cms-radius-sm: 6px; --cms-radius: 10px; --cms-radius-lg: 14px; --cms-radius-xl: 18px; /* Default section width — block partials use these for max-width */ --cms-content-width: 60rem; --cms-content-wide: 72rem; --cms-content-narrow: 42rem; /* Default vertical rhythm */ --cms-section-y: 4.5rem; --cms-section-y-sm: 2.5rem; --cms-section-y-lg: 6.5rem; } /* * Dark-mode overrides — same brand-token-first pattern. When brand tokens * are defined, they win regardless of light/dark mode (a brand identity * is absolute, not mode-conditional). Sites without brand tokens still * get the editorial dark palette as a fallback. Sites that genuinely * need separate light/dark brand palettes can override these rules * directly in their own stylesheet. */ @media (prefers-color-scheme: dark) { :root:not([data-cms-theme="light"]) { --cms-paper: var(--brand-bg, #0c0e12); --cms-paper-2: var(--brand-bg-light, #14171d); --cms-paper-3: var(--brand-bg-lighter, #1a1d24); --cms-elevated: var(--brand-bg-light, #1a1d24); --cms-ink: var(--brand-text, #f0eadc); --cms-ink-strong: var(--brand-text, #ffffff); --cms-ink-dim: var(--brand-text-light, #a0a4ae); --cms-ink-muted: var(--brand-text-muted, #686c76); --cms-ink-faint: var(--brand-text-muted, #45495a); --cms-rule: var(--brand-border, #20242c); --cms-rule-strong: var(--brand-border, #2d323d); --cms-shadow-sm: 0 1px 0 0 rgba(0, 0, 0, .25); --cms-shadow: 0 12px 36px -16px rgba(0, 0, 0, .55); --cms-shadow-lg: 0 32px 72px -32px rgba(0, 0, 0, .8); } } [data-cms-theme="dark"] { --cms-paper: var(--brand-bg, #0c0e12); --cms-paper-2: var(--brand-bg-light, #14171d); --cms-paper-3: var(--brand-bg-lighter, #1a1d24); --cms-elevated: var(--brand-bg-light, #1a1d24); --cms-ink: var(--brand-text, #f0eadc); --cms-ink-strong: var(--brand-text, #ffffff); --cms-ink-dim: var(--brand-text-light, #a0a4ae); --cms-ink-muted: var(--brand-text-muted, #686c76); --cms-ink-faint: var(--brand-text-muted, #45495a); --cms-rule: var(--brand-border, #20242c); --cms-rule-strong: var(--brand-border, #2d323d); --cms-shadow-sm: 0 1px 0 0 rgba(0, 0, 0, .25); --cms-shadow: 0 12px 36px -16px rgba(0, 0, 0, .55); --cms-shadow-lg: 0 32px 72px -32px rgba(0, 0, 0, .8); } /* ----------------------------------------------------------------- * 1.5. WORKAROUND: Re-resolve brand-token-derived vars on a second * :root rule so they pick up the actual brand values from /brand.css. * The original :root rule (above) declares these as * `var(--brand-*, fallback)` — but Chrome appears to lock those to * the fallback when --brand-* isn't present at parse time of THAT * specific :root rule. Re-declaring identically in a SECOND :root * rule resolves correctly because var() lookup happens after both * sheets have contributed to :root. * * Without this block, sites with brand tokens get cms-public.css's * editorial defaults (#15171c text, #faf8f4 paper) instead of their * brand text/bg colors. The ink color cascade is the most painful — * dark-on-dark in any section using brand-bg. * ----------------------------------------------------------------- */ :root { --cms-paper: var(--brand-bg, #faf8f4); --cms-paper-2: var(--brand-bg-light, #f4f0e7); --cms-paper-3: var(--brand-bg-lighter, #ede8db); --cms-elevated: var(--brand-bg-light, #ffffff); --cms-ink: var(--brand-text, #15171c); --cms-ink-strong: var(--brand-text, #0a0b0e); --cms-ink-dim: var(--brand-text-light, #4f535d); --cms-ink-muted: var(--brand-text-muted, #8b8e98); --cms-ink-faint: var(--brand-text-muted, #b2b3bb); --cms-rule: var(--brand-border, #e8e2d3); --cms-rule-strong: var(--brand-border, #cdc6b3); /* Scheme-aware text/link tokens — light scheme defaults. */ --cms-text: var(--brand-text, #15171c); --cms-text-strong: var(--brand-text, #0a0b0e); --cms-text-muted: var(--brand-text-muted, #6b7280); --cms-link: var(--brand-primary, #2238c2); --cms-link-hover: var(--brand-primary, #2238c2); /* Re-declare the typography scale here too so the workaround * block fully replaces the original :root for these tokens. * Fluid sizing via clamp() — see comment above for rationale. */ --cms-text-size-xs: clamp(0.6875rem, 0.625rem + 0.25vw, 0.75rem); --cms-text-size-sm: clamp(0.8125rem, 0.75rem + 0.25vw, 0.875rem); --cms-text-size: clamp(0.9375rem, 0.875rem + 0.25vw, 1rem); --cms-text-size-lg: clamp(1rem, 0.9375rem + 0.5vw, 1.125rem); --cms-heading-size-sm: clamp(0.9375rem, 0.875rem + 0.5vw, 1rem); --cms-heading-size: clamp(1rem, 0.875rem + 0.625vw, 1.125rem); --cms-heading-size-lg: clamp(1.25rem, 1rem + 1vw, 1.5rem); --cms-heading-size-xl: clamp(1.5rem, 1rem + 2vw, 2rem); --cms-line-height: 1.5; --cms-line-height-tight: 1.25; --cms-line-height-loose: 1.65; --cms-spacing-y-xs: 0.25rem; --cms-spacing-y-sm: 0.5rem; --cms-spacing-y: 0.75rem; --cms-spacing-y-lg: 1.25rem; --cms-spacing-y-xl: 2rem; } /* ----------------------------------------------------------------- * 1.7. Density override (data-cms-density="compact") * * Column blocks emit data-cms-density="compact" because columns are * inherently narrower contexts where blog-post-scale typography * (1.0625rem body, 2.25rem h1) feels oversized. Compact mode shrinks * the entire scale uniformly so footer columns, sidebar columns, and * any narrow-context placement get appropriate sizing without * per-block CSS. Everything inside cascades. * ----------------------------------------------------------------- */ [data-cms-density="compact"] { --cms-text-size-xs: clamp(0.625rem, 0.5625rem + 0.25vw, 0.6875rem); --cms-text-size-sm: clamp(0.75rem, 0.6875rem + 0.25vw, 0.8125rem); --cms-text-size: clamp(0.875rem, 0.8125rem + 0.25vw, 0.9375rem); --cms-text-size-lg: clamp(0.9375rem, 0.875rem + 0.25vw, 1rem); --cms-heading-size-sm: clamp(0.875rem, 0.8125rem + 0.25vw, 0.9375rem); --cms-heading-size: clamp(1rem, 0.9375rem + 0.25vw, 1.0625rem); --cms-heading-size-lg: clamp(1.125rem, 1rem + 0.5vw, 1.25rem); --cms-heading-size-xl: clamp(1.25rem, 1rem + 1vw, 1.5rem); --cms-line-height: 1.45; --cms-line-height-loose: 1.55; --cms-spacing-y-xs: 0.1875rem; --cms-spacing-y-sm: 0.375rem; --cms-spacing-y: 0.5rem; --cms-spacing-y-lg: 0.875rem; --cms-spacing-y-xl: 1.5rem; } /* ----------------------------------------------------------------- * 1.8. Container queries — Section establishes context, Row/Nav adapt * * Container queries respond to the parent ELEMENT's width, not the * viewport. This means the same Row works correctly whether it's in * a 1200px section or a 320px sidebar — without per-block media * queries. Baseline-supported across browsers (Chrome 105+, Firefox * 110+, Safari 16+). * * Section establishes the container context. Row stacks columns * when the container is below ~700px (typical "tablet portrait or * smaller"). Navigation switches horizontal→vertical at ~600px. * ----------------------------------------------------------------- */ .cms-block-section { container-type: inline-size; container-name: cms-section; } @container cms-section (max-width: 700px) { /* Stack columns vertically when the section is narrow. The * `mobileStack` field on Row gates this — sites that want a * 4-column layout to stay 4-column on mobile (e.g. logo strip) * can disable mobileStack. * * !important is necessary because Row's blade view emits * flex-direction/flex/max-width as inline `style` attributes, * which beat external CSS rules without !important. The * alternative is moving every Row layout prop to a class * modifier — bigger refactor; revisit when adding more * responsive overrides. */ .cms-block-row.cms-block-row--mobile-stack { flex-direction: column !important; } .cms-block-row.cms-block-row--mobile-stack > .cms-block-column { flex: 1 1 100% !important; max-width: 100% !important; } /* Mobile-reverse-order */ .cms-block-row.cms-block-row--mobile-reverse { flex-direction: column-reverse !important; } } @container cms-section (max-width: 768px) { /* When the section is narrow, hide the inline horizontal nav and * reveal the hamburger toggle. The drawer markup is always in * the DOM (Alpine x-show toggles it) so revealing the toggle is * enough — the drawer panel itself is position:fixed and lives * outside the container query world. * * Vertical-orientation navs keep their inline layout — they're * already a stacked list, no collapse needed. */ .cms-block-nav:not(.cms-block-nav--vertical) .cms-block-nav__inline { display: none; } .cms-block-nav:not(.cms-block-nav--vertical) .cms-block-nav__toggle { display: inline-flex; } /* Hamburger is the universal mobile-nav-on-the-right pattern. * When the nav collapses, override the editor's `align` (which * controls expanded-state alignment) and push the toggle to the * right edge of the section using auto margins. Works whether * or not the optional heading is present (with heading: heading * on left, hamburger on right; without: hamburger on right). */ .cms-block-nav:not(.cms-block-nav--vertical) { align-items: center; padding-block: var(--cms-spacing-y-sm); } .cms-block-nav:not(.cms-block-nav--vertical) .cms-block-nav__toggle { margin-left: auto; } } /* ----------------------------------------------------------------- * 1.9. Section padding scales fluidly with viewport width * * Section's hardcoded padding sizes (8/16/32/64px for sm/md/lg/xl) * felt cramped on mobile and stingy on desktop. Use clamp() with * vw-based middle term so padding shrinks to ~half on phone and * grows to ~150% on wide desktop without any breakpoint cliffs. * Scoped to the Section block so other blocks keep their own * padding scales. * ----------------------------------------------------------------- */ .cms-block-section { --cms-section-pad-sm: clamp(0.375rem, 0.25rem + 0.5vw, 0.5rem); --cms-section-pad-md: clamp(0.75rem, 0.5rem + 1vw, 1rem); --cms-section-pad-lg: clamp(1rem, 0.5rem + 2vw, 2rem); --cms-section-pad-xl: clamp(1.5rem, 0.75rem + 3vw, 4rem); } /* ----------------------------------------------------------------- * 1.6. Section scheme overrides (data-cms-bg="dark" / "light") * * Section blocks emit `data-cms-bg="light"` or `data-cms-bg="dark"` * based on their bgScheme prop (or auto-detected luminance of * bgColor). Descendant prose / nav / company-contact rules read * `--cms-text`, `--cms-text-muted`, `--cms-link` via cascade — so * dark sections automatically invert their child text without * per-block CSS. * * Both selectors explicitly redeclare the scheme tokens so that * a nested section flips the token chain cleanly regardless of its * ancestor's context (e.g. a light section inside a dark section * restores light values; relying on inheritance alone would keep * the dark values active). * * Text tokens use SCHEME-SPECIFIC brand tokens (--brand-text-on-light, * --brand-text-on-dark, etc.) rather than the generic --brand-text. * Reason: a brand whose primary design is dark-mode would set * --brand-text to a light colour, which would then resolve the * [data-cms-bg="light"] override back to a light value — defeating * the scheme flip. Scheme-specific tokens let brands opt-in to * per-scheme overrides without colliding with the generic token. * Fallbacks are hardcoded so out-of-the-box brands get correct * defaults without setting anything. * * The following brand tokens are recognised by the scheme overrides * (all optional — hardcoded fallbacks apply when unset): * --brand-text-on-light, --brand-text-on-dark * --brand-text-strong-on-light, --brand-text-strong-on-dark * --brand-text-muted-on-light, --brand-text-muted-on-dark * --brand-elevated-on-light, --brand-elevated-on-dark * --brand-rule-on-light, --brand-rule-on-dark * --brand-rule-strong-on-light, --brand-rule-strong-on-dark * * Surface tokens (--cms-elevated, --cms-rule, --cms-rule-strong) also flip * with scheme so cards / inputs / borders nested inside a scheme-overridden * section get a surface that contrasts against the section's declared bg * rather than the page-level default. Without this, an input on a light * section embedded in a dark-scheme page would render its dark elevated * surface alongside the section's light bg, with text now flipped dark — * collapsing to dark-on-dark and erasing the input visually. * * The legacy --cms-ink-* chain (ink / ink-strong / ink-dim / ink-muted / * ink-faint) used by older block CSS is aliased to the text chain inside * each scheme block so it flips with data-cms-bg too. The 5-step ink * gradation collapses to 3 steps in scheme-flipped contexts (dim, muted, * faint all map to --cms-text-muted) — acceptable since the unscoped * baseline keeps the original gradation, and most user-facing text uses * ink or ink-strong (which have direct text-* analogs). * ----------------------------------------------------------------- */ [data-cms-bg="dark"] { --cms-text: var(--brand-text-on-dark, #e8e8e8); --cms-text-strong: var(--brand-text-strong-on-dark, #ffffff); --cms-text-muted: var(--brand-text-muted-on-dark, #a0a4ae); --cms-link: var(--brand-primary, #FFB627); --cms-link-hover: var(--brand-accent-orange, #b84a00); /* Surface tokens — flip with scheme so cards/inputs contrast correctly. */ --cms-elevated: var(--brand-elevated-on-dark, #1a1d24); --cms-rule: var(--brand-rule-on-dark, #20242c); --cms-rule-strong: var(--brand-rule-strong-on-dark, #2d323d); /* Legacy --cms-ink-* chain — alias to text-* so it flips with scheme */ --cms-ink: var(--cms-text); --cms-ink-strong: var(--cms-text-strong); --cms-ink-dim: var(--cms-text-muted); --cms-ink-muted: var(--cms-text-muted); --cms-ink-faint: var(--cms-text-muted); } [data-cms-bg="light"] { --cms-text: var(--brand-text-on-light, #15171c); --cms-text-strong: var(--brand-text-strong-on-light, #0a0b0e); --cms-text-muted: var(--brand-text-muted-on-light, #6b7280); --cms-link: var(--brand-primary, #2238c2); --cms-link-hover: var(--brand-primary, #2238c2); /* Surface tokens — flip with scheme so cards/inputs contrast correctly. */ --cms-elevated: var(--brand-elevated-on-light, #ffffff); --cms-rule: var(--brand-rule-on-light, #e8e2d3); --cms-rule-strong: var(--brand-rule-strong-on-light, #cdc6b3); /* Legacy --cms-ink-* chain — alias to text-* so it flips with scheme */ --cms-ink: var(--cms-text); --cms-ink-strong: var(--cms-text-strong); --cms-ink-dim: var(--cms-text-muted); --cms-ink-muted: var(--cms-text-muted); --cms-ink-faint: var(--cms-text-muted); } /* ----------------------------------------------------------------- * 2. Body baseline * ----------------------------------------------------------------- */ .cms-public-body { background-color: var(--cms-paper); color: var(--cms-ink); font-family: var(--cms-font-sans); font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; transition: background-color var(--cms-dur-long) var(--cms-ease), color var(--cms-dur-long) var(--cms-ease); } /* ----------------------------------------------------------------- * 3. Site header — refined editorial bar * ----------------------------------------------------------------- */ .cms-site-header { position: sticky; top: 0; z-index: 40; background-color: color-mix(in oklab, var(--cms-paper) 88%, transparent); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--cms-rule); transition: box-shadow var(--cms-dur) var(--cms-ease), border-color var(--cms-dur) var(--cms-ease); } .cms-site-header[data-stuck="true"] { box-shadow: var(--cms-shadow-sm); border-bottom-color: var(--cms-rule-strong); } .cms-site-header-inner { max-width: var(--cms-content-wide); margin-inline: auto; padding: 1.125rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .cms-site-brand { display: inline-flex; align-items: baseline; gap: 0.5rem; font-family: var(--cms-font-display); font-weight: 500; font-size: 1.0625rem; letter-spacing: -0.012em; color: var(--cms-ink-strong); text-decoration: none; font-variation-settings: 'opsz' 18, 'SOFT' 30; transition: color var(--cms-dur) var(--cms-ease); } .cms-site-brand::after { content: '·'; color: var(--cms-accent-public); font-weight: 600; margin-left: 0.125rem; transform: translateY(-1px); } .cms-site-brand:hover { color: var(--cms-accent-public); } .cms-site-nav { display: flex; align-items: center; gap: 1rem; position: relative; } .cms-site-nav-list-wrap { display: none; } @media (min-width: 768px) { .cms-site-nav-list-wrap { display: block; } } .cms-site-nav-list-inline, .cms-site-nav-list-stacked { border: 0; background: transparent; } .cms-site-nav-list-inline ul { display: flex; align-items: center; gap: 1.75rem; list-style: none; margin: 0; padding: 0; } .cms-site-nav-list-inline ul ul { /* Sub-menus: rendered as a column dropdown if styled in future. */ display: none; } .cms-site-nav-list-stacked ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.875rem; } .cms-site-nav-list-stacked ul ul { margin-top: 0.5rem; margin-left: 1rem; padding-top: 0.25rem; border-left: 1px solid var(--cms-rule); padding-left: 0.875rem; display: flex; flex-direction: column; gap: 0.5rem; } .cms-site-nav-link { position: relative; font-family: var(--cms-font-sans); font-weight: 500; font-size: 0.875rem; color: var(--cms-ink-dim); text-decoration: none; padding: 0.25rem 0; transition: color var(--cms-dur) var(--cms-ease); } .cms-site-nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--cms-accent-public); transform: scaleX(0); transform-origin: right; transition: transform var(--cms-dur-long) var(--cms-ease); } .cms-site-nav-link:hover, .cms-site-nav-link[aria-current="page"] { color: var(--cms-ink-strong); } .cms-site-nav-link:hover::after, .cms-site-nav-link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; } .cms-mobile-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; background: transparent; border: 1px solid var(--cms-rule); border-radius: var(--cms-radius-sm); color: var(--cms-ink-dim); cursor: pointer; transition: all var(--cms-dur) var(--cms-ease); } @media (min-width: 768px) { .cms-mobile-toggle { display: none; } } .cms-mobile-toggle:hover { color: var(--cms-ink-strong); background: var(--cms-paper-2); border-color: var(--cms-rule-strong); } .cms-mobile-drawer { position: absolute; left: 0; right: 0; top: 100%; background: var(--cms-paper); border-bottom: 1px solid var(--cms-rule); padding: 1rem 1.5rem 1.25rem; box-shadow: var(--cms-shadow); } @media (min-width: 768px) { .cms-mobile-drawer { display: none !important; } } /* ----------------------------------------------------------------- * 4. Site footer — three-column with editorial flourishes * ----------------------------------------------------------------- */ .cms-site-footer { background-color: var(--cms-paper-2); color: var(--cms-ink-dim); border-top: 1px solid var(--cms-rule); padding: var(--cms-section-y) 0 1.5rem; margin-top: auto; } .cms-site-footer-inner { max-width: var(--cms-content-wide); margin-inline: auto; padding: 0 1.5rem; display: grid; gap: 2.5rem; grid-template-columns: 1fr; } @media (min-width: 768px) { .cms-site-footer-inner { grid-template-columns: 2fr 1fr 1fr; } } .cms-site-footer-brand { font-family: var(--cms-font-display); font-weight: 500; font-size: 1.25rem; color: var(--cms-ink-strong); text-decoration: none; letter-spacing: -0.01em; font-variation-settings: 'opsz' 24, 'SOFT' 30; } .cms-site-footer-tagline { font-family: var(--cms-font-display); font-style: italic; font-weight: 400; font-size: 1rem; color: var(--cms-ink-dim); margin-top: 0.625rem; max-width: 24rem; line-height: 1.45; font-variation-settings: 'opsz' 14, 'SOFT' 50; } .cms-site-footer-heading { font-family: var(--cms-font-sans); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cms-ink-muted); margin-bottom: 0.875rem; } .cms-site-footer-list-wrap ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; } .cms-site-footer-list-wrap ul ul { margin-top: 0.4rem; margin-left: 0.5rem; padding-left: 0.625rem; border-left: 1px solid var(--cms-rule); } .cms-site-footer-link, .cms-site-footer-contact a { color: var(--cms-ink-dim); text-decoration: none; transition: color var(--cms-dur) var(--cms-ease); } .cms-site-footer-link:hover, .cms-site-footer-contact a:hover { color: var(--cms-ink-strong); } .cms-site-footer-legal ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; } .cms-site-footer-legal-link { color: var(--cms-ink-muted); text-decoration: none; transition: color var(--cms-dur) var(--cms-ease); } .cms-site-footer-legal-link:hover { color: var(--cms-ink); } .cms-site-footer-contact { font-size: 0.875rem; line-height: 1.5; display: flex; flex-direction: column; gap: 0.4rem; } .cms-site-footer-contact .muted { color: var(--cms-ink-muted); } .cms-site-footer-rule { max-width: var(--cms-content-wide); margin: 3rem auto 0; padding: 0 1.5rem; } .cms-site-footer-rule::before { content: ''; display: block; height: 1px; background: var(--cms-rule); margin-bottom: 1.25rem; } .cms-site-footer-bottom { display: flex; flex-direction: column; gap: 0.5rem; font-family: var(--cms-font-mono); font-size: 0.75rem; color: var(--cms-ink-muted); letter-spacing: 0; } @media (min-width: 768px) { .cms-site-footer-bottom { flex-direction: row; justify-content: space-between; } } .cms-site-footer-bottom nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; } .cms-site-footer-bottom a { color: var(--cms-ink-muted); text-decoration: none; transition: color var(--cms-dur) var(--cms-ease); } .cms-site-footer-bottom a:hover { color: var(--cms-ink); } /* ----------------------------------------------------------------- * 5. Reusable block atoms — eyebrow, headline, body, CTA buttons * ----------------------------------------------------------------- */ .cms-eyebrow { display: inline-block; font-family: var(--cms-font-sans); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cms-accent-public); margin-bottom: 0.6875rem; } .cms-eyebrow::before { content: '— '; color: var(--cms-ink-faint); margin-right: 0.125rem; } .cms-block-headline { font-family: var(--cms-font-display); font-weight: 500; color: var(--cms-ink-strong); letter-spacing: -0.018em; line-height: 1.05; margin: 0; font-variation-settings: 'opsz' 36, 'SOFT' 30; } .cms-block-headline--xl { font-size: clamp(2.4rem, 5vw, 3.75rem); } .cms-block-headline--lg { font-size: clamp(2rem, 4vw, 2.75rem); font-variation-settings: 'opsz' 30, 'SOFT' 30; } .cms-block-headline--md { font-size: clamp(1.5rem, 2.5vw, 2rem); font-variation-settings: 'opsz' 22, 'SOFT' 30; } .cms-block-body { font-family: var(--cms-font-sans); font-size: 1.0625rem; line-height: 1.55; color: var(--cms-ink-dim); margin: 1rem 0 0; max-width: 36rem; } .cms-block-section { padding: var(--cms-section-y) 1.5rem; background: var(--brand-bg, var(--cms-paper)); color: var(--cms-ink); } .cms-block-section--sunken { background: var(--cms-paper-2); border-block: 1px solid var(--cms-rule); } .cms-block-section--inverted { background: var(--cms-ink); color: var(--cms-paper); } .cms-block-section--inverted .cms-block-headline, .cms-block-section--inverted .cms-block-body { color: var(--cms-paper); } .cms-block-section--inverted .cms-eyebrow { color: color-mix(in oklab, var(--cms-accent-public) 70%, var(--cms-paper)); } .cms-block-container { max-width: var(--cms-content-width); margin-inline: auto; } .cms-block-container--wide { max-width: var(--cms-content-wide); } .cms-block-container--narrow { max-width: var(--cms-content-narrow); } .cms-block-container--center { text-align: center; } .cms-block-container--center .cms-block-body { margin-inline: auto; } /* CTA buttons — solid (primary) and ghost (secondary) */ .cms-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.75rem 1.25rem; font-family: var(--cms-font-sans); font-weight: 500; font-size: 0.9375rem; letter-spacing: -0.005em; border-radius: var(--cms-radius-sm); border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: all var(--cms-dur) var(--cms-ease); box-shadow: var(--cms-shadow-sm); } .cms-btn--primary { background-color: var(--cms-accent-public); color: var(--cms-on-accent-public); border-color: var(--cms-accent-public); } .cms-btn--primary:hover { background-color: color-mix(in oklab, var(--cms-accent-public) 88%, var(--cms-ink-strong)); transform: translateY(-1px); box-shadow: var(--cms-shadow); } .cms-btn--ghost, .cms-btn--secondary { background-color: transparent; color: var(--cms-ink-strong); border-color: var(--cms-rule-strong); } .cms-btn--ghost:hover, .cms-btn--secondary:hover { border-color: var(--cms-ink-strong); background-color: var(--cms-paper-2); } .cms-btn--inverted-primary { background-color: var(--cms-paper); color: var(--cms-ink-strong); border-color: var(--cms-paper); } .cms-btn--inverted-ghost { background-color: transparent; color: var(--cms-paper); border-color: color-mix(in oklab, var(--cms-paper) 50%, transparent); } .cms-btn--inverted-ghost:hover { border-color: var(--cms-paper); background-color: color-mix(in oklab, var(--cms-paper) 12%, transparent); } .cms-btn-row { display: inline-flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.75rem; } .cms-btn-row--center { justify-content: center; } /* Button block size + layout modifiers */ .cms-btn--sm { padding: 0.5rem 0.875rem; font-size: 0.8125rem; } .cms-btn--lg { padding: 1rem 1.75rem; font-size: 1.0625rem; } .cms-btn--block { width: 100%; justify-content: center; } /* Button block wrapper alignment */ .cms-block-button { display: flex; } .cms-block-button--align-left { justify-content: flex-start; } .cms-block-button--align-center { justify-content: center; } .cms-block-button--align-right { justify-content: flex-end; } /* ----------------------------------------------------------------- * 6. Block — hero (full bleed) * ----------------------------------------------------------------- */ .cms-block-hero { position: relative; padding: var(--cms-section-y-lg) 1.5rem; color: var(--cms-paper); overflow: hidden; isolation: isolate; } .cms-block-hero--gradient { background: linear-gradient(135deg, var(--brand-primary, #2238c2) 0%, var(--brand-secondary, #1c2e9d) 100%); } .cms-block-hero--image { background-size: cover; background-position: center; } .cms-block-hero--image::before, .cms-block-hero--video::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in oklab, var(--cms-ink-strong) 55%, transparent) 0%, color-mix(in oklab, var(--cms-ink-strong) 75%, transparent) 100%); z-index: -1; } .cms-block-hero--image::after { content: ''; position: absolute; inset: 0; background: inherit; background-size: inherit; background-position: inherit; z-index: -2; } /* Background-video variant: keep the brand gradient as the base fallback * (shown if the video is transparent, still loading, or fails), with the * decorative