/* * MSWC homepage v3 — the cinematic layer. * * Loaded ONLY on the front page (see functions.php), so nothing in here can * move the parity pages. Everything is prefixed .mswc-v3- and the markup that * carries these classes is emitted by migration/tools/gen_home_v3.py. * * Design contract (redesign-spec + the approved v3 plan): * - film-first: full-viewport hero, dark "cinema" bands, sticky chapters * - brand untouched: palette, Alegreya Sans SC display, Open Sans text * - content fully readable with JS disabled; all motion opt-out via * prefers-reduced-motion; the hero video is an ENHANCEMENT over a poster * that is designed to stand on its own. */ :root { --v3-ink: var(--wp--preset--color--ink, #14181a); --v3-ink-soft: var(--wp--preset--color--ink-soft, #1f2629); --v3-lime: var(--wp--preset--color--lime, #c9e45c); --v3-accent: var(--wp--preset--color--accent, #017ab7); --v3-sage: var(--wp--preset--color--sage, #d2e0d2); --v3-body: #3f3f50; /* * Blog band accent only (eyebrow, links, Read more). 5.09:1 on that * band's #f7f5f1 ground. The site accent #017ab7 measures 4.32:1 there * and fails, which is why the band does not use it. Do not use olive * anywhere else. */ --v3-olive: #6b6b3a; --v3-on-dark: rgba(255, 255, 255, 0.85); --v3-h1: clamp(2.5rem, 4.8vw, 4rem); /* 64px @1456 — was 84px: 6 lines, 65% of the hero */ --v3-h2: clamp(2.125rem, 3.3vw, 3rem); /* 48px @1456 */ --v3-stat: clamp(3.5rem, 8vw, 6.5rem); /* 104px @1456, standing alone */ --v3-band-pad: clamp(4rem, 9vw, 7.5rem); --v3-wrap: 1200px; --v3-prose: 46rem; /* * Height of the sticky topbar, subtracted from the viewport to size the * hero. home-v4.js overwrites this with the measured value (floored) on * load and on resize. * * The fallback is deliberately a pixel or two UNDER the real height * (measured: 137.2 desktop, 116.7 mobile). Erring high leaves a white * sliver under the hero — 138px against a 137.2px bar produced exactly * that, a 0.8px line of white against a dark photograph, which is far more * visible than it sounds. Erring low costs a sub-pixel of overflow that * nobody can see. */ --v3-topbar-h: 136px; } @media (max-width: 781px) { :root { --v3-topbar-h: 115px; } } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* ------------------------------------------------------------------ topbar */ /* * ⚠️ THE HEADER IS A TEMPLATE PART AND ITS WRAPPER MUST GENERATE NO BOX. * * parts/header.html carries the topbar for every template on the site, so the * bar is one object with one set of rules. WordPress wraps a template part in * a
, and that wrapper is exactly as tall * as the bar inside it — which would make it the sticky element's containing * block and pin the bar for precisely its own height, i.e. not at all. * * `display: contents` removes the wrapper's box without removing the element, * so the bar's containing block becomes the document root again and sticky * behaves as it did while the markup was inline in front-page.html. The class * comes from the template-part call, so this cannot leak to the footer part, * whose wrapper IS the