/* cream.css — the cream scheme /cgi-realism wears, expressed over base.css's semantic tokens. Loaded by index.html, which carries data-theme="cream" on its . It is a LAYER, not the token declaration site, and that is deliberate. base.css keeps the night tokens because app/ and mobile/ re-declare them by hand and CI holds both to base.css on every PR (CLAUDE.md § One token namespace); moving these values into :root would re-skin the member app. So this file shadows base.css's SEMANTIC tokens from a later stylesheet and re-points them at the clay values declared in cgi/base.css's :root, and carries the handful of rules a token cannot reach. Every other marketing page still stands on the night ground until it is brought over the same way. Since 2026-09-15/16 the member app and the phone stand on this scheme too: neither loads this file (the app is its own Vercel project, React Native has no CSS), but each re-declares these values by hand and its guard holds them here — see the App roles block at the end of the token block. Scoped on html[data-theme="cream"], not :root, for two reasons: it beats :root on specificity whatever the load order, and main.js injects /intake.css AFTER this file, so the form overrides below need the attribute to win at all. A page without the attribute is untouched by it. Every value here is cgi/base.css's — cite that file, not this one. */ html[data-theme="cream"] { color-scheme: light; /* Ground and surfaces. --cream-* is base.css's own surviving ramp, byte- identical to clay's; the bone/slab lumps are clay's neutrals. */ --surface-page: var(--cream-200); --surface-raised: #FBF8F1; --surface-card: #F4EFE6; --surface-sunken: var(--cream-300); --surface-inset: #EDE5D8; --surface-invert: #1A1815; /* Glass: white over the picture rather than night over it. A gradient is a legal value for a token read as `background`. */ --surface-glass: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.45)); --surface-glass-opaque: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.86)); --blur-glass: blur(14px); /* Warm inks, never the app's plum. */ --text-heading: #1A1815; --text-body: #3D3A35; --text-muted: #6B635B; --text-faint: #8F8880; --text-invert: var(--cream-50); --text-link: #9A1430; --text-link-hover: #1A1815; --border-hairline: rgba(26,24,21,.12); --border-field: rgba(26,24,21,.28); --border-strong: rgba(26,24,21,.18); --border-glass: rgba(255,255,255,.75); --border-glass-strong: rgba(255,255,255,.9); /* The action pair keeps its #BE1A38 fill; clay darkens on hover and the edge is the under-shadow. */ --action-solid-bg-hover: #9A1430; --action-solid-edge: #8E1229; /* Elevation on cream is thickness plus one soft blue ambient — the one place a blur is correct. cgi/base.css:20-33 records that the night no-blur rule does not transfer. The night names are kept because every component reads them; only the values move. */ --night-shadow-card: 0 24px 30px -18px rgba(46,90,142,.35); --night-shadow-card-alt: 0 24px 30px -18px rgba(46,90,142,.35); --night-shadow-card-hover: 0 30px 36px -18px rgba(46,90,142,.4); --night-shadow-lift: 0 30px 36px -18px rgba(46,90,142,.4); --night-shadow-popover: 0 30px 36px -18px rgba(46,90,142,.4); --night-shadow-button: 0 6px 0 #8E1229; --night-shadow-pressed: 0 3px 0 #8E1229; --night-shadow-control: 0 3px 0 rgba(26,24,21,.10); --action-solid-shadow: 0 6px 0 #8E1229; --action-quiet-shadow: 0 3px 0 rgba(26,24,21,.10); --shadow-inset-field: inset 0 1px 0 rgba(255,255,255,.35); /* Focus is the water blue, 5.9:1 on the ground. */ --focus-ring: #2E5A8E; --focus-glow: 0 0 0 4px rgba(46,90,142,.22); /* Raw tokens that components read directly and that fail on cream: --coral-ink (#F98D83) is ~2.2:1 here. --grad-night grounds the form's Michelle note. */ --coral-ink: #B83C30; --grad-night: linear-gradient(180deg, #FBF8F1, #F4EFE6); --status-idle-bg: rgba(26,24,21,.06); --control-track: var(--cream-300); --control-thumb: #A9C4E4; /* ── App roles ────────────────────────────────────────────────── The member app (app/) stands on this scheme too since 2026-09-15, and its guard (app/scripts/check-tokens.mjs) holds every scheme-bearing token in app/src/app/globals.css to THIS block, the way base.css holds the scheme-neutral ones. These are the roles the app reads that the landing page never does; they are declared here so the app has one place to be held to, and they change nothing on the landing page. Every value is measured on the bone card (#F4EFE6) — the label/wash pairs all clear 5.6:1 on their own wash and on bone. */ /* Chat bubbles: yours is peach clay, theirs lavender clay — the two families the hero cards already wear, so the thread reads as two people's cards. Ink on both is --text-heading (10.3:1 and 10.7:1). */ --surface-message-own: linear-gradient(165deg, #FBDDC0, #F4BE95); --surface-message-peer: linear-gradient(165deg, #E1DEEC, #C7C3D9); --surface-message-own-edge: #D99A6E; --surface-message-peer-edge: #9F9AB8; /* Segmented control: the thumb is a blue clay lump on the sunken track, so it needs the thickness every lump carries. */ --control-thumb-shadow: 0 2px 0 #7FA0C8; /* Status pairs on a light ground. The night inks (--amber-ink #E8C489, --green-ink #8FD3AC, --rose-ink #F2A9A2, --blue-ink #ADC0E0) are all under 2:1 on cream. Rust and blue are cgi/base.css's own card badges; amber and green are derived to the same rule (≥4.5:1 on wash and on bone); the lavender pair is new, for the violet eyebrows and pills the app uses as its "yours" colour. */ --rose-ink: #993C1D; --rose-bg: #FAECE7; --blue-ink: #185FA5; --blue-bg: #E6F1FB; --amber-ink: #7A5210; --amber-bg: #FBF0DC; --amber-line: rgba(122,82,16,.25); --green-ink: #1A6B45; --green-bg: #E3F3E9; --green-line: rgba(26,107,69,.30); --violet-ink: #5B4E8C; --violet-bg: #E9E6F2; --status-underway-bg: var(--amber-bg); --status-underway-ink: var(--amber-ink); --status-done-bg: var(--green-bg); --status-done-ink: var(--green-ink); --status-idle-ink: #3D3A35; --danger-rest: #993C1D; --danger-hover: #B83C30; /* The slab: a lump of clay a card is cut from (cgi/base.css .step-card). Bone by default; the three families are the hero cards' colours. The shadow is thickness (the slab's own darker clay), the hard occlusion under it, the one soft blue ambient, and the sculpted rim. */ --radius-slab: 22px; --surface-slab: linear-gradient(165deg, #FBF8F1 0%, #F4EFE6 45%, #DDD5C6 130%); --surface-slab-peach: linear-gradient(165deg, #FBDDC0 0%, #F4BE95 45%, #D99A6E 130%); --surface-slab-blue: linear-gradient(165deg, #CFDFF2 0%, #A9C4E4 45%, #7FA0C8 130%); --surface-slab-lavender: linear-gradient(165deg, #E1DEEC 0%, #C7C3D9 45%, #9F9AB8 130%); --shadow-rim: inset 0 2px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(26,24,21,.07), inset 2px 0 0 rgba(255,255,255,.18); --shadow-slab: 0 8px 0 #DDD5C6, 0 10px 0 rgba(26,24,21,.08), 0 24px 30px -18px rgba(46,90,142,.35), var(--shadow-rim); --shadow-slab-hover: 0 11px 0 #DDD5C6, 0 13px 0 rgba(26,24,21,.08), 0 30px 36px -18px rgba(46,90,142,.4), var(--shadow-rim); --shadow-slab-peach: 0 8px 0 #D99A6E, 0 10px 0 rgba(26,24,21,.08), 0 24px 30px -18px rgba(46,90,142,.35), var(--shadow-rim); --shadow-slab-blue: 0 8px 0 #7FA0C8, 0 10px 0 rgba(26,24,21,.08), 0 24px 30px -18px rgba(46,90,142,.35), var(--shadow-rim); --shadow-slab-lavender: 0 8px 0 #9F9AB8, 0 10px 0 rgba(26,24,21,.08), 0 24px 30px -18px rgba(46,90,142,.35), var(--shadow-rim); /* Glass carries a whisper, never thickness (cgi/base.css .clay-glass). */ --shadow-glass: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 6px rgba(26,24,21,.06); /* Three ink washes the app reads and the landing page never does: a quiet well behind a chip or a table cell (one step under --status-idle-bg), the step a bordered control's edge takes on hover (one over --border-field), and the scrim behind a modal — warm ink, not black, so the page dims rather than greys. Declared here so the app's literal check has a site to find them at. */ --surface-well: rgba(26,24,21,.05); --border-hover: rgba(26,24,21,.32); --surface-overlay: rgba(26,24,21,.45); /* The phone read this layer for one day (2026-09-16) through a sub-block here of flat clay families; it stands on base.css's night ground as glass since 2026-09-17 and the block went with it, because a token nobody reaches for is a token someone will. backup/clay-phone-2026-09-17 has both. */ } /* ── Rules no token re-point can reach ──────────────────────────── */ /* Headline emphasis: flat deep red, as cgi/base.css:722-739. The gradient's pink stop falls below 3:1 on cream, and -webkit-text-fill-color: transparent cannot be undone from a token. Same selector list as base.css:762-771, plus the form's three gradient-clipped spans. */ [data-theme="cream"] .hero-title .italic, [data-theme="cream"] .section-title em, [data-theme="cream"] .article-title .accent, [data-theme="cream"] .form-title em, [data-theme="cream"] .cta-title em, [data-theme="cream"] .footer-logo .italic, [data-theme="cream"] .step-num, [data-theme="cream"] .dropcap, [data-theme="cream"] #intake-v2 .chapter-title em, [data-theme="cream"] #intake-v2 .sent h2 em, [data-theme="cream"] #intake-v2 .review-section-head .edit { background: none; -webkit-text-fill-color: currentColor; color: #9A1430; } /* base.css:412 hardcodes the focus outline to --logo-violet and never reads --focus-ring; the mark's violet stays (the founder card's crown reads it). */ [data-theme="cream"] a:focus-visible, [data-theme="cream"] button:focus-visible, [data-theme="cream"] summary:focus-visible, [data-theme="cream"] [tabindex]:focus-visible { outline-color: #2E5A8E; } /* The bar: cream at .92 (cgi/base.css:450-452). nav.is-floating's own rule outranks this one, so the bar still lifts off over a hero. */ [data-theme="cream"] nav { background: rgba(251,246,238,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } [data-theme="cream"] nav::before { background: linear-gradient(to bottom, rgba(251,246,238,.8), rgba(251,246,238,0)); } [data-theme="cream"] .nav-cta:hover { box-shadow: 0 5px 0 #8E1229; } @media (max-width: 960px) { [data-theme="cream"] .nav-links { background: rgba(251,246,238,.98); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 4px 0 rgba(26,24,21,.10); } } /* Buttons lift on thickness, not glow (cgi/base.css:695-699). */ [data-theme="cream"] .btn-primary:hover, [data-theme="cream"] #intake-v2 .btn.primary:hover { box-shadow: 0 8px 0 #8E1229, 0 18px 24px -12px rgba(190,26,56,.35); } /* Glass floats on a whisper of shadow; night's panel declares none (cgi/base.css:935-942). */ [data-theme="cream"] .glass-panel { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 6px rgba(26,24,21,.06); } /* The film's scrims (index.html's .journey-stage::after and .journey-media::after) carry seven night-ink stops. The band is inverted to cream at the same alphas so the cream bar seats over footage; the landing already reads --surface-page and follows the re-point. */ [data-theme="cream"] .journey-stage::after, [data-theme="cream"] .journey-media::after { background: linear-gradient(180deg, rgba(251,246,238,0.660) 0%, rgba(251,246,238,0.628) 2.2%, rgba(251,246,238,0.545) 4.4%, rgba(251,246,238,0.416) 6.6%, rgba(251,246,238,0.271) 8.9%, rgba(251,246,238,0.132) 11.0%, rgba(251,246,238,0.038) 12.0%, rgba(251,246,238,0) 12.65%), linear-gradient(180deg, rgba(247,243,234,0) 93%, var(--surface-page) 100%); } /* Off for every glass chapter already; flipped so a caption chapter would inherit a cream wash rather than a night one. */ [data-theme="cream"] .journey-copy::before { background: radial-gradient(48% 44% at 50% 46%, rgba(247,243,234,0.92) 0%, rgba(247,243,234,0.88) 44%, rgba(247,243,234,0.70) 64%, rgba(247,243,234,0.38) 82%, rgba(247,243,234,0) 100%); } [data-theme="cream"] .hero-couples-note a, [data-theme="cream"] .about-story-link { border-bottom-color: rgba(26,24,21,.30); } /* ── The form (/intake.css, injected after this file) ───────────── */ /* The shell is the sunset-sky slab and the chapter card is white glass, as cgi-realism/intake.css:23-45 and :108-116. */ [data-theme="cream"] #intake-v2 { background: linear-gradient(180deg, #AFC6E2 0%, #D6DDE6 42%, #F3D5B8 78%, #F7E4CC 100%); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: rgba(255,255,255,.6); box-shadow: 0 24px 30px -18px rgba(46,90,142,.35), inset 0 2px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(26,24,21,.06); } [data-theme="cream"] #intake-v2.grain::before { background: radial-gradient(ellipse at 10% -10%, rgba(244,190,149,.35), transparent 50%), radial-gradient(ellipse at 110% 10%, rgba(169,196,228,.35), transparent 55%), radial-gradient(ellipse at 50% 120%, rgba(199,195,217,.30), transparent 60%); } [data-theme="cream"] #intake-v2 .chapter { background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.45)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: rgba(255,255,255,.75); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 12px 28px -14px rgba(46,90,142,.35); } [data-theme="cream"] #intake-v2 .progress-rail { background: rgba(26,24,21,.10); } [data-theme="cream"] #intake-v2 .note .avatar { box-shadow: 0 4px 10px -4px rgba(46,90,142,.35); } [data-theme="cream"] #intake-v2 .select { background-image: url("data:image/svg+xml;utf8,"); } [data-theme="cream"] #intake-v2 .input:focus-visible, [data-theme="cream"] #intake-v2 .textarea:focus-visible, [data-theme="cream"] #intake-v2 .select:focus-visible { outline-color: #2E5A8E; border-color: #2E5A8E; } [data-theme="cream"] #intake-v2 .rank-btn:focus-visible { outline-color: #2E5A8E; } [data-theme="cream"] #intake-v2 .rank-item:hover { box-shadow: 0 4px 14px -6px rgba(46,90,142,.18); } [data-theme="cream"] #intake-v2 .rank-item.dragging { border-color: #2E5A8E; box-shadow: 0 14px 30px -10px rgba(46,90,142,.3), 0 0 0 1px rgba(46,90,142,.35); } [data-theme="cream"] #intake-v2 .rank-item.drop-target { border-color: #2E5A8E; background: rgba(169,196,228,.25); box-shadow: inset 0 0 0 2px #2E5A8E; } /* A well the colour of the page vanishes into a slab; give it a white wash. */ [data-theme="cream"] #intake-v2 .dropzone { background: rgba(255,255,255,.45); } [data-theme="cream"] #intake-v2 .dropzone:hover { border-color: #2E5A8E; background: rgba(255,255,255,.6); } [data-theme="cream"] #intake-v2 .dropzone.drag { border-color: #C97E58; background: rgba(244,190,149,.18); } [data-theme="cream"] #intake-v2 .preview-wrap img { box-shadow: 0 6px 16px -6px rgba(46,90,142,.25); } [data-theme="cream"] #intake-v2 .preview-wrap .remove:hover { color: #9A1430; background: rgba(190,26,56,.08); } [data-theme="cream"] #intake-v2 .field-error { color: #9A1430; }