/* ============================================================ legacy-compat.css — 1:1 static-site port compensations (2026-07-05) The ported legacy marketing pages (wrapped in div.legacy-site) now render inside the Next.js app shell, which the old static HTML never loaded: 1. Tailwind v4 preflight (globals.css) zeroes the UA margins/paddings the old pages relied on. 2. The root layout's ThemeProvider sets data-theme on (system dark), and globals.css/marketing.css redefine the same CSS custom properties (--paper, --ink, --accent, ...) the legacy styles.css uses — including higher-specificity dark/accent variants. 3. marketing.css's `.marketing-shell .wrap` (0,2,0) beats the legacy `.wrap` (0,1,0) and shrinks the container 1200px → 1180px. Rules here are scoped to .legacy-site and compensate ONLY for properties the legacy styles.css/editorial.css/waitlist.css do NOT set themselves. Element-level compensations use :where() so their specificity (0,1,0) beats preflight but loses to every real rule in the legacy stylesheets. This file must be linked AFTER the page's legacy stylesheets. ============================================================ */ /* (2) Pin the old styles.css :root light tokens on the wrapper. The old pages hard-coded and were light for every visitor; element-level custom properties win over any html-level redefinition (dark theme, data-accent variants), including during the pre-hydration frame before LegacyTheme() re-pins . Values are byte-identical to marketing-static/styles.css :root. */ .legacy-site { --cyan: #9FE0E2; --cyan-strong: #6DCDD0; --cyan-deep: #2BA2A6; --ink: #0A0A0A; --ink-2: #1A1A1A; --paper: #FBFAF7; --paper-2: #F2EFE8; --line: rgba(10,10,10,.10); --line-soft: rgba(10,10,10,.06); --muted: rgba(10,10,10,.58); --muted-2: rgba(10,10,10,.42); --accent: var(--cyan); --display: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif; --body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --maxw: 1200px; --gutter: 32px; --radius: 14px; --radius-lg: 22px; /* Old painted var(--paper); .marketing-shell sits OUTSIDE this wrapper and may paint the app-shell (possibly dark) paper token. */ background: var(--paper); color: var(--ink); min-height: 100vh; } /* (2b) The app root layout paints the app's (dark) body background; the old site's painted var(--paper) (styles.css:49-54), which showed in overscroll/rubber-band regions and any viewport taller than the content. body sits OUTSIDE the .legacy-site token scope, so the value is duplicated literally. :has() is supported by all evergreen browsers; non-supporting engines just keep the app body color behind the (fully opaque, 100vh) wrapper — invisible except during overscroll. */ body:has(.legacy-site) { background: #FBFAF7; } /* (1) Preflight zeroes UA margins — but do NOT restore UA paragraph margins here. Ground truth (2026-07-05 welcome-page port audit): every legacy page (index, about, contact, dpa, founding-100, pricing, privacy, standards, terms, welcome) loaded styles.css, whose global `p { margin: 0 }` (styles.css:151) meant UA paragraph margins NEVER applied on the old site — paragraph rhythm came only from explicit legacy rules (.ed-lede, .wl-sub, .foot-brand p, …). Preflight's zeroing therefore matches the legacy baseline exactly. A blanket `.legacy-site :where(p) { margin-block: 1em }` (0,1,0) would ALSO out-cascade the 0,1,0 legacy rules linked earlier (.wl-sub, .founding-desc, .modal-sub, .modal-foot, .founding-fallback, …) and visibly shift the ported pages. */ /* (1) Preflight's universal margin reset kills the UA `dialog { margin: auto }` that centered the legacy