/* * Cohort design tokens — CSS custom properties. * Source of truth: design_handoff_cohort_app/README.md ("Color", "Typography", * "Spacing, radii, borders") + cohort2/docs/THEME_SYSTEM.md §1.1/§2/§7 (the * cross-repo re-theme contract) + docs/WEB_ARCH.md §1. * * Slate Tide is retired. The new system is 12 semantic tokens x 6 schemes * (3 accents x 2 modes); the web dashboard ships **Coral only** (the * default accent) with no accent/mode picker (locked user decision — see * THEME_SYSTEM.md §7). Two shipping colorways: Coral Dark (default, * `:root`) and Coral Light (`:root[data-theme="light"]`). One themeable * engine — every component reads these variable names only; the theme * swap re-binds values, it never forks styles. OS preference * (`prefers-color-scheme`) seeds the initial theme before any explicit * toggle; ThemeProvider (src/context/ThemeContext.tsx) stamps `data-theme` * on and that explicit choice always wins over the media query * afterward. */ :root { /* Coral — dark (default) */ --bg: #052430; /* screen background */ --card: #0b303d; /* card / surface */ --card2: #124150; /* raised control (e.g. Cancel pill) */ --ink: #eaede9; /* primary text */ --muted: rgba(234, 237, 233, 0.62); /* secondary text */ --faint: rgba(234, 237, 233, 0.36); /* tertiary text / axis labels */ --line: rgba(234, 237, 233, 0.11); /* borders, separators, track fills */ --track: rgba(234, 237, 233, 0.1); /* progress/bar tracks, chip group bg */ --accent: #f26b5e; /* primary accent (coral) */ --accentSoft: rgba(242, 107, 94, 0.15); /* accent fill / selected bg / area fill */ --good: #5cbfb0; /* positive deltas */ --danger: #c88f8f; /* error / destructive affordances ONLY — never negative deltas (design has no negative-delta color; positive stays --good, negative stays --ink/--muted weight) */ --dangerSoft: rgba(200, 143, 143, 0.16); /* danger fill / error-state bg */ --onAccent: #04212b; /* text/icon on accent fills */ /* Fonts (bound in fonts.css; declared here so tokens.css alone documents every design variable, per README "Typography" + "Spacing, radii, borders"). Space Grotesk replaces Newsreader for display + ALL numerals (THEME_SYSTEM.md §4) — the sans fallback stack changes too, so a missing-font failure never lands on a serif. */ --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; --font-ui: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Type scale (px) — README "Typography" / WEB_ARCH §1.3. Numerals the user reads as data always use --font-display; micro-labels/units use --font-mono uppercase; everything else uses --font-ui. Sizes are UNCHANGED by the re-theme (THEME_SYSTEM.md §4.1) — only the family binding above moved. */ --t-title: 28px; /* screen titles (My Cohort, Timeline, Insights); weight 600, ls -0.3px */ --t-modal: 21px; /* modal titles (check-in, DEXA); weight 700 */ --t-card: 16px; /* card titles; weight 600 (range 15-16) */ --t-body: 14px; /* body copy, rows (range 13-14) */ --n-ring: 42px; /* health-score ring numeral (display) */ --n-cardio: 27px; /* cardio 2x2 values (display) */ --n-body: 23px; /* body-comp values (display) */ --n-score: 16px; /* domain-row / leaderboard scores (display; range 15-16) */ --m-micro: 10px; /* captions, units, chips, ticks (mono, range 9.5-11) */ --m-wordmark: 14px; /* COHORT wordmark (mono, ls 2.5px, uppercase) */ /* Radii, borders, spacing — README "Spacing, radii, borders" / WEB_ARCH §1.4. Fixed at 1px/1.5px: the dashboard has no High-vis scheme, so there is nothing to thicken (THEME_SYSTEM.md §7 — §3's themed border width is app-only and deliberately NOT ported here). */ --r-card: 22px; /* 22-24 — cards/sections */ --r-item: 18px; /* item cards (feed rows) */ --r-tile: 12px; /* 11-14 — inner tiles, controls */ --r-pill: 999px; /* chips, pills, toggles */ --bd: 1px solid var(--line); /* every surface border */ --bd-sel: 1.5px solid var(--accent); /* selected segmented/option */ --pad-card: 20px; /* 18-20 */ --gap-card: 14px; /* inter-card */ --gap-ctl: 10px; /* 9-12 control gap */ --mgn-side: 16px; /* card side margin */ color-scheme: dark; } :root[data-theme='light'] { /* Coral — light. --accent/--accentSoft deliberately deviate from the THEME_SYSTEM.md §1.1 handoff literal (#e1584a / rgba(225,88,74,0.12)): that value measures 3.69:1 for #FFFFFF-on-accent, failing WCAG AA (4.5:1) on the primary CTA. User-authorized fix, mirrored from cohort2's CohortScheme.coralLight (cohort_scheme.dart) — hue-preserving darkening (HSL, H/S held, L 58.63%->50.98%) measuring 4.5363:1. See cohort2/docs/FIDELITY.md and this repo's docs/FIDELITY.md for the full before/after record. */ --bg: #efeee4; --card: #f9f8f1; --card2: #ffffff; --ink: #082832; --muted: #566a6e; --faint: #92a0a0; --line: rgba(8, 40, 50, 0.1); --track: rgba(8, 40, 50, 0.07); --accent: #db3929; --accentSoft: rgba(219, 57, 41, 0.12); --good: #2e9385; --danger: #9e4b4b; --dangerSoft: rgba(158, 75, 75, 0.11); --onAccent: #ffffff; color-scheme: light; } /* OS-light-before-any-toggle mirrors the Coral-light block exactly, scoped so an explicit data-theme attribute (either value) always overrides it — the selector only matches while no toggle has stamped the root yet. */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: #efeee4; --card: #f9f8f1; --card2: #ffffff; --ink: #082832; --muted: #566a6e; --faint: #92a0a0; --line: rgba(8, 40, 50, 0.1); --track: rgba(8, 40, 50, 0.07); /* Mirrors the :root[data-theme='light'] AA-contrast fix above verbatim — see that block's comment for the measured before/after ratios. */ --accent: #db3929; --accentSoft: rgba(219, 57, 41, 0.12); --good: #2e9385; --danger: #9e4b4b; --dangerSoft: rgba(158, 75, 75, 0.11); --onAccent: #ffffff; color-scheme: light; } } /* * site.css — cohort.health marketing page (SITE_SPEC.md §3-§5, §7.4). * Concatenated AFTER web/src/styles/tokens.css by scripts/build-site.sh, so * this file reads --bg/--card/--ink/etc. as already-defined custom * properties — it never redeclares them (SITE_SPEC.md §1: "tokens are * shared by concatenation, not copy-paste"). index.html pins * `data-theme="dark"` so only tokens.css's `:root` block (Coral dark) is * ever in play here — the site is Coral-dark-only by design (§1.1). * * Four literal (non-token) values the design mock uses, carried verbatim * per SITE_SPEC.md §2 rather than invented as new tokens: * - nav background rgba(5,36,48,0.88) (--bg at 88%) * - product-bullet emphasis rgba(234,237,233,0.82) * - hero CTA outline rgba(234,237,233,0.24) * - waitlist field border rgba(234,237,233,0.18) * * No framework, no build step beyond concatenation — this file is the * entire layout/component layer for a one-page static bundle (§1). */ /* --------------------------------------------------------------------- * @font-face — tokens.css only binds the FAMILY NAMES (--font-display * etc.) to CSS custom properties; the actual `src:` declarations live in * the dashboard's web/src/styles/fonts.css, which is NOT concatenated into * this bundle (scripts/build-site.sh step 1 only cats tokens.css + * site.css). Without this block the page silently falls back to the * system sans-serif in every family's stack — no error, no missing * network request, just the wrong typeface — so this bundle carries its * own copy, reading the exact same files scripts/build-site.sh step 2 * copies into dist/fonts/ (self-hosted, no Google Fonts link — SITE_SPEC.md * §2/§4.1). Weights actually used by this page (§4.1): Space Grotesk * 400/500/600, Instrument Sans 400/600, IBM Plex Mono 400/600. * ------------------------------------------------------------------- */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/space-grotesk-400.woff2') format('woff2'); } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/space-grotesk-500.woff2') format('woff2'); } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/space-grotesk-600.woff2') format('woff2'); } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/instrument-sans-400.woff2') format('woff2'); } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/instrument-sans-600.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ibm-plex-mono-400.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/ibm-plex-mono-600.woff2') format('woff2'); } /* --------------------------------------------------------------------- * Reset + base (base.css is NOT concatenated in for this bundle, so this * file carries its own minimal reset, matching web/src/styles/base.css's * conventions for consistency with the dashboard). * ------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } button { background: none; border: none; padding: 0; margin: 0; cursor: pointer; } button:disabled { cursor: default; } img, svg { display: block; max-width: 100%; height: auto; } input { font-family: inherit; color: inherit; } /* Visible, accent-colored focus ring for every interactive element — * SITE_SPEC.md §7.4: "The design shows no focus state; it needs one." */ a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 12px; top: -48px; background: var(--card); color: var(--ink); padding: 10px 16px; border-radius: 10px; border: 1px solid var(--line); z-index: 100; transition: top 0.15s ease; } .skip-link:focus { top: 12px; } /* --------------------------------------------------------------------- * Shared layout primitives. `--page-pad` drives the horizontal padding * table in SITE_SPEC.md §5.1 ("Page padding" column: 20 / 32 / 40 / 40 for * <660 / 660-899 / 900-1199 / >=1200) for the nav row and every section. * ------------------------------------------------------------------- */ :root { --page-pad: 20px; --section-v: 56px; /* <660 vertical section padding (76px -> 56px, §5.4) */ } @media (min-width: 660px) { :root { --page-pad: 32px; --section-v: 76px; } } @media (min-width: 900px) { :root { --page-pad: 40px; } } .section-inner { max-width: 1200px; margin: 0 auto; padding-left: var(--page-pad); padding-right: var(--page-pad); } .rule-top { border-top: 1px solid var(--line); } .eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--good); } .grid-3 { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 40px; } @media (min-width: 660px) { .grid-3 { grid-template-columns: repeat(2, 1fr); gap: 18px; } } @media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1200px) { .grid-3 { gap: 20px; } } .card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 26px 24px 28px; } .card-title { font-family: var(--font-ui); font-size: 18px; font-weight: 600; letter-spacing: -0.2px; margin-top: 16px; } .card-body { font-size: 14px; line-height: 1.6; color: var(--muted); margin-top: 9px; } @media (min-width: 660px) { .card-body { font-size: 14.5px; } } /* --------------------------------------------------------------------- * Nav (§3.1) * ------------------------------------------------------------------- */ .site-nav { position: sticky; top: 0; z-index: 50; background: rgba(5, 36, 48, 0.88); /* literal, not a token — §2 */ backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .nav-inner { max-width: 1200px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; } @media (min-width: 660px) { .nav-inner { padding: 16px var(--page-pad); } } .brand { display: flex; align-items: center; gap: 10px; } .wordmark { font-family: var(--font-mono); font-size: 14px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ink); } .nav-links { display: flex; align-items: center; /* Below 660px only `Log in` + the pill are visible, and at 340px those * two plus the wordmark leave almost nothing spare — the design's 32px * gap is what tips it into wrapping. 16px there, 32px from 660px up * where the three anchors reappear and the design's spacing applies. */ gap: 16px; flex-wrap: nowrap; } @media (min-width: 660px) { .nav-links { gap: 32px; } } .nav-links a:not(.btn) { display: none; font-size: 14px; color: var(--muted); } @media (min-width: 660px) { .nav-links a:not(.btn) { display: inline; } } /* `Log in` — deliberately NOT one of the three in-page anchors §5.4 hides * below 660px. Those are jump links to content the visitor can also just * scroll to; this is the only route an existing user has from the page * into the app, so it survives at every width, including 340px. * * Styling is the *same* rule set as the anchors above (14px, --muted, * --ink on hover) precisely so it reads as secondary: `Join waitlist` * stays the only filled pill and therefore the only primary CTA in the * bar. It introduces no new colour and no new type step. * * inline-flex + min-height, not plain `inline`, for the same reason .btn * carries them (§5.5, ">= 44x44 CSS px"): this link is tappable on mobile * where the anchors are not, and 14px of inline text is a ~17px target. * The bar's height is already set by the 44px-tall pill, so this changes * nothing visually. */ .nav-links a.nav-login { display: inline-flex; align-items: center; min-height: 44px; } .nav-links a:not(.btn):hover { color: var(--ink); } /* --------------------------------------------------------------------- * Buttons / pills, shared by the nav CTA, hero CTAs, and the waitlist. * ------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 600; white-space: nowrap; /* SITE_SPEC.md §5.5: "every tap target >= 44x44 CSS px" — the design's * own padding numbers (e.g. the 9px/16px compact nav pill) fall short of * that on their own, so every button gets a guaranteed-tall hit area on * top of its visual padding. align-items:center keeps the visible pill * centered inside the taller box, so this never looks like extra * padding was added — it reads identically, it just can't be tapped * short. */ min-height: 44px; box-sizing: border-box; } .btn-solid { color: var(--onAccent); background: var(--accent); } .btn-outline { color: var(--ink); background: transparent; border: 1px solid rgba(234, 237, 233, 0.24); /* literal — §2 */ } .nav-cta { font-size: 13px; padding: 9px 16px; } @media (min-width: 660px) { .nav-cta { font-size: 13.5px; padding: 10px 20px; } } /* --------------------------------------------------------------------- * Hero (§3.2) * ------------------------------------------------------------------- */ .hero { padding: 88px 20px 56px; } @media (min-width: 660px) { .hero { padding: 88px var(--page-pad) 72px; } } .hero-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } @media (min-width: 900px) { .hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: 40px; } } @media (min-width: 1200px) { .hero-grid { gap: 56px; } } .badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--good); border: 1px solid rgba(92, 191, 176, 0.4); border-radius: 999px; padding: 6px 13px; } .hero h1 { font-size: 34px; line-height: 1.04; letter-spacing: -1px; margin: 22px 0 0; } @media (min-width: 660px) { .hero h1 { font-size: 44px; letter-spacing: -1.2px; } } @media (min-width: 900px) { .hero h1 { font-size: 52px; letter-spacing: -1.6px; } } @media (min-width: 1200px) { .hero h1 { font-size: 60px; letter-spacing: -1.8px; } } .accent-text { color: var(--accent); } .hero-sub { font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 520px; margin: 22px 0 0; } @media (min-width: 660px) { .hero-sub { font-size: 17px; } } @media (min-width: 900px) { .hero-sub { font-size: 18px; } } .cta-row { display: flex; flex-direction: column; gap: 10px; margin-top: 30px; } .cta-row .btn { width: 100%; padding: 14px 26px; font-size: 15px; } @media (min-width: 660px) { .cta-row { flex-direction: row; flex-wrap: wrap; gap: 12px; } .cta-row .btn { width: auto; } } .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 38px; } @media (min-width: 660px) { .stats { display: flex; flex-wrap: wrap; gap: 28px; } } .stat-value { display: block; font-family: var(--font-display); font-size: 26px; font-weight: 600; } .stat-label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--faint); margin-top: 3px; } .hero-art { display: flex; justify-content: center; } /* The wrapper carries the width (§5.1's four steps, unchanged); * the inside simply fills it. Splitting them this way keeps the * numbers below identical to what the stub used to carry, so the * swap to real screenshots shifts nothing. */ .phone-frame { display: block; width: 100%; max-width: 320px; } @media (min-width: 660px) { .phone-frame { max-width: 380px; } } @media (min-width: 900px) { .phone-frame { max-width: 340px; } } @media (min-width: 1200px) { .phone-frame { max-width: min(402px, 100%); } } .phone-panel { display: block; width: 100%; height: auto; /* The stub SVGs drew their own phone frame — `rect rx=46` inside a * 402x874 viewBox, 2px hairline stroke. The real captures are bare app * screens, so the frame moves to CSS exactly as SITE_SPEC.md §4.2 says * it should ("if a frame is wanted, draw it in CSS"). * * Two-value radius, not a single percentage: a single percentage would * give elliptical corners on a 402x874 box. 46/402 horizontally and * 46/874 vertically resolve to the same number of px at every width * because the aspect ratio is pinned by the width/height attributes, so * the corners stay circular and stay 46px-equivalent as the panel * scales 320 -> 402. * * A ring box-shadow rather than a border so the hairline costs the box * no width — border-box maths on a replaced element with height:auto * would nudge the rendered height. */ border-radius: 11.443% / 5.263%; box-shadow: 0 0 0 1px rgba(234, 237, 233, 0.24); /* literal — §2 */ } /* --------------------------------------------------------------------- * Section shells: how-it-works / product x2 / privacy (§3.3-3.6) * ------------------------------------------------------------------- */ .section { padding-top: var(--section-v); padding-bottom: var(--section-v); scroll-margin-top: 64px; } @media (min-width: 660px) { .section { scroll-margin-top: 70px; } } .section h2 { font-size: 27px; line-height: 1.15; letter-spacing: -0.6px; margin-top: 14px; max-width: 620px; } @media (min-width: 660px) { .section h2 { font-size: 32px; letter-spacing: -0.8px; } } @media (min-width: 900px) { .section h2 { font-size: 34px; letter-spacing: -0.9px; } } @media (min-width: 1200px) { .section h2 { font-size: 38px; letter-spacing: -1px; } } .section-body { font-size: 15px; line-height: 1.65; color: var(--muted); margin-top: 18px; max-width: 520px; } @media (min-width: 660px) { .section-body { font-size: 16px; } } @media (min-width: 900px) { .section-body { font-size: 16.5px; } } .card-num { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--accent); } .card-tag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--faint); } .card-head { display: flex; align-items: center; justify-content: space-between; } /* Product sections: text-then-phone DOM order always (§5.2's "one real * trap") — `.product-art` is only pulled visually left via `order: -1` on * the ONE section that needs it (`.product-cohort`), and only at >=900px. */ .product-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } @media (min-width: 900px) { .product-cohort .product-grid { grid-template-columns: 0.9fr 1.1fr; } .product-insights .product-grid { grid-template-columns: 1.1fr 0.9fr; } /* The one place `order` appears in this file — desktop-only, and it * exists precisely so the DOM can stay text-then-phone at every width * (SITE_SPEC.md §5.2). */ .product-cohort .product-art { order: -1; } } @media (min-width: 1200px) { .product-grid { gap: 56px; } } .product-art { display: flex; justify-content: center; } .bullets { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; } .bullets-narrow { max-width: 520px; } .bullets li { display: flex; gap: 12px; align-items: flex-start; } .bullet-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); margin-top: 8px; flex-shrink: 0; } .bullet-text { font-size: 14px; line-height: 1.55; color: rgba(234, 237, 233, 0.82); /* literal — §2 */ } @media (min-width: 660px) { .bullet-text { font-size: 15px; } } .good-text { color: var(--good); } /* Privacy glyph tiles (§3.6) */ .glyph-tile { width: 38px; height: 38px; border-radius: 11px; background: var(--accentSoft); display: flex; align-items: center; justify-content: center; } .glyph-tile svg { width: 20px; height: 20px; } /* --------------------------------------------------------------------- * Waitlist (§3.7, §6.5) * ------------------------------------------------------------------- */ .waitlist-section { padding: 60px 20px 68px; text-align: center; } @media (min-width: 660px) { .waitlist-section { padding: 80px var(--page-pad) 88px; } } .waitlist-section h2 { font-size: 29px; line-height: 1.1; letter-spacing: -0.7px; max-width: 620px; margin: 0 auto; } @media (min-width: 660px) { .waitlist-section h2 { font-size: 36px; letter-spacing: -1px; } } @media (min-width: 900px) { .waitlist-section h2 { font-size: 38px; letter-spacing: -1.1px; } } @media (min-width: 1200px) { .waitlist-section h2 { font-size: 42px; letter-spacing: -1.2px; } } .waitlist-sub { font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 520px; margin: 16px auto 0; } @media (min-width: 900px) { .waitlist-sub { font-size: 16.5px; } } .waitlist-form { margin-top: 30px; display: flex; justify-content: center; } /* <660px: the pill breaks into a stacked full-width input + button * (§5.4 — "a 340px pill containing a placeholder and a button is * unusable"). */ .field-pill { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 10px; } .field-pill input { width: 100%; min-height: 44px; /* SITE_SPEC.md §5.5 tap-target floor */ box-sizing: border-box; background: var(--card); border: 1px solid rgba(234, 237, 233, 0.18); /* literal — §2 */ border-radius: 14px; padding: 14px 16px; font-size: 15px; color: var(--ink); } .field-pill input::placeholder { color: var(--faint); } .field-pill .btn { width: 100%; padding: 12px 22px; font-size: 14.5px; } @media (min-width: 660px) { .field-pill { flex-direction: row; align-items: center; min-width: 340px; background: var(--card); border: 1px solid rgba(234, 237, 233, 0.18); /* literal — §2 */ border-radius: 999px; padding: 4px 4px 4px 20px; gap: 0; } .field-pill input { flex: 1; background: transparent; border: none; border-radius: 0; padding: 0; } .field-pill .btn { width: auto; padding: 11px 22px; } } /* Disabled state (default — §6.5): accentSoft fill + accent text, NOT the * solid accent pill, so it never reads as a live CTA. */ .btn-disabled { background: var(--accentSoft); color: var(--accent); } .btn-disabled:disabled { cursor: default; } .waitlist-caption { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--faint); margin-top: 16px; } .waitlist-done { font-size: 15px; color: var(--ink); } /* --------------------------------------------------------------------- * Footer (§3.8) * ------------------------------------------------------------------- */ .site-footer { padding: 36px 0 48px; } .footer-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } @media (min-width: 660px) { .footer-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } } .footer-brand { display: flex; align-items: center; gap: 10px; } .footer-brand .wordmark { font-size: 12.5px; letter-spacing: 2.2px; color: var(--muted); } .footer-domain { font-size: 13px; color: var(--faint); } .footer-legal { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--faint); line-height: 1.7; text-align: left; } @media (min-width: 660px) { .footer-legal { text-align: right; } }