/* ============================================================================ theme-adam.css — the CEO's homepage theme, as tokens Adam built his own homepage and the founder chose it as the design direction. This file is that build's palette, type and rhythm expressed as token overrides, so every page can take the theme without any component being rewritten. Spec, with every value quoted from his stylesheet: ~/Github/CapStaq/.forge/workflows/work/design/adam-theme.md Source: /tmp/adam-home.css, /tmp/adam-colors.html https://capstaq-home-exact.adam218003.chatgpt.site/ --------------------------------------------------------------------------- LOAD ORDER. This must come AFTER site-v1.css, which is currently last on every page. site-v1.css declares its tokens on `body.hd-body` (0,2,0), which outranks `:root` (0,1,0) — so §C below re-declares at the same specificity and wins on source order. Load it earlier and §C silently does nothing. ONLY TOKENS. Every declaration in this file is a custom property, except the `background`/`color` pair each ground class needs in order to paint. No component is restyled here. If you find yourself wanting to add a component rule, it belongs in that component's own sheet. THE FONTS are loaded by _build/apply_chrome.py (ADAM_FONTS), which swaps the old Playfair Display + Inter link for DM Sans + Libre Caslon Display on every page it touches. Not an @import here: @import is render-blocking and serialises behind this stylesheet. ========================================================================== */ /* ============================================================================ §A — THE PALETTE, TYPE AND RHYTHM His whole system is nine properties (adam-home.css, line 1): --navy:#071725 --navy-2:#0d2233 --gold:#d7ab56 --gold-dark:#8b621e --ink:#102434 --muted:#596873 --paper:#f4f5f3 --line:#dce1e2 --white:#fff --font:"DM Sans" --serif:"Libre Caslon Display" Two things about it are load-bearing and easy to lose: 1. TWO GOLDS, ONE PER GROUND. #d7ab56 appears only on navy; #8b621e only on light. He switches with one modifier (.eyebrow.ink). Never put #d7ab56 on paper — it measures 2.06:1. 2. HIS HAIRLINES ARE COOL. --line:#dce1e2 against our warm #DFD9CD. Every divider, card border and rule on the site changes temperature with that one value. It is the single most visible row in this file. ========================================================================== */ :root { /* ---- ground: dark ---------------------------------------------------- His primary dark IS our deepest. He has no #0C1F2F at all, and he keeps one ground BELOW navy for the footer so the page bottoms out. */ --hd-navy: #071725; /* .hero, .approach-section, .access-section, .site-header */ --hd-navy-deep: #06131e; /* .site-footer{background:#06131e} */ --hd-navy-2: #0d2233; /* --navy-2, already exact */ --hd-line-d: rgba(255,255,255,.125); /* #ffffff20 */ --hd-line-d2: rgba(255,255,255,.16); /* #ffffff26 */ /* ---- ground: light --------------------------------------------------- FOUR light grounds, not one, and they step brighter as the page descends: #f0f2f1 -> #f4f5f3 -> #f5f6f4 -> #fff. That micro-gradient is why his run of four light bands does not read as monotonous. */ --hd-ground-mist: #f0f2f1; /* .scale{background:#f0f2f1} */ --hd-paper: #f4f5f3; /* --paper, already exact */ --hd-ground-light: #f5f6f4; /* .path-section{background:#f5f6f4} */ --hd-ground-white: #ffffff; /* .founder-section{background:#fff} */ --hd-paper-2: #ffffff; /* --white, already exact */ --hd-line-l: #dce1e2; /* --line — WAS #DFD9CD (warm). The big one. */ --hd-line-l2: #cbd1d2; /* .option-card{border:1px solid #cbd1d2} */ /* ---- ink ------------------------------------------------------------- Measured against #f4f5f3: 15.9:1, 6.0:1, 5.30:1. The floor moves UP from our 4.87:1, so this port does not cost a contrast gate. */ --hd-ink: #102434; /* --ink, already exact */ --hd-ink-2: #3e525e; /* .path-result dd{color:#3e525e} */ --hd-ink-3: #596873; /* --muted — p{color:var(--muted)} is his default */ /* Measured against #071725: 21:1, 12.58:1, 9.22:1. */ --hd-on-d: #ffffff; /* .hero{color:#fff} */ --hd-on-d-2: #ced7dd; /* .hero-lede{color:#ced7dd} */ --hd-on-d-3: #a9bac7; /* .hero-caption{color:#a9bac7} */ /* ---- accent ---------------------------------------------------------- HIS GOLD IS FLAT. There is no gradient anywhere in his file: .btn-gold{color:var(--navy);background:var(--gold);border:1px solid var(--gold)} --hd-gold-fill collapses to the flat colour rather than being deleted, because home-d.css and site-v1.css both paint .btn--primary with it. */ --hd-gold: #d7ab56; /* --gold, already exact. 8.1:1 on navy. */ --hd-gold-soft: #e6c17d; /* .btn-gold:hover{background:#e6c17d} */ --hd-gold-deep: #8b621e; /* --gold-dark. 5.02:1 on paper. */ --hd-gold-fill: #d7ab56; /* WAS linear-gradient(135deg,#F0AD27,#D99B1B) */ /* ---- type ------------------------------------------------------------ Libre Caslon Display ships weight 400 ONLY. His h1,h2,h3{font-weight:500} therefore renders synthesised on serif headings. Serif headings should be 400; --hd-serif-weight exists so a component can read it rather than hard-coding 500. */ --hd-serif: "Libre Caslon Display", Georgia, serif; /* --serif */ --hd-sans: "DM Sans", Arial, sans-serif; /* --font */ --hd-serif-weight: 400; --hd-fine: .8125rem; /* 13 — .fine-print{font-size:13px;line-height:1.6} */ --hd-detail: .9375rem; /* 15 — .text-link, .btn, .role-strip p */ --hd-body: 1rem; /* 16 — body{font-size:16px;line-height:1.65} */ --hd-lede: 1.125rem; /* 18 — .hero-lede{font-size:18px;line-height:1.7} */ --hd-lh-body: 1.65; /* body{line-height:1.65} */ --hd-lh-lede: 1.7; /* .hero-lede{line-height:1.7} */ /* His label step: 12/700/.12em. Ours was 11/600/.19em. */ --hd-eyebrow-size: 12px; --hd-eyebrow-weight: 700; --hd-eyebrow-track: .12em; /* ---- layout ---------------------------------------------------------- .shell{width:min(1280px,calc(100% - 96px))} = 1280 wide / 48px gutters, stepping 60 at >=1600, 32 at <=1150, 20 at <=650. .section{padding:88px 0}, 51px at <=650. Note his band padding is TIGHTER than ours at wide viewports (88 vs up to 144) — that density is part of why his page reads as a document rather than a deck. */ --hd-wrap: 1280px; --hd-gut: clamp(20px, 3.8vw, 48px); --hd-pad: clamp(51px, 6.4vw, 88px); --hd-band-header-gap: 36px; /* .section-heading{margin-bottom:36px} */ --hd-col-gap: 95px; /* two-column bands run 90-100px */ /* ---- surfaces, fields, states ---------------------------------------- */ --hd-field: #f8f9f7; /* input,select,textarea{background:#f8f9f7} */ --hd-field-line: #bbc6ca; /* same declaration */ --hd-card-tint: #e9eeef; /* .option-light{background:#e9eeef} */ --hd-focus: #398dd0; /* :focus-visible{outline:3px solid #398dd0} — BLUE, deliberately: a system focus ring never competes with the gold accent. */ --hd-select: #ead7b1; /* ::selection{background:#ead7b1} */ --hd-link-on-d: #f0e2c9; /* .direct-contact a{color:#f0e2c9} */ --hd-status-soon-bg: #fff8e8; /* .status-tag */ --hd-status-soon-ink: #624812; --hd-status-done-bg: #eaf4ee; /* .status-tag.exited */ --hd-status-done-ink: #23563d; /* ---- the ground-aware defaults, declared at :root --------------------- A band sets these; :root holds the LIGHT values so that a component outside any band still resolves to something real. --hd-surface had no :root value on the first pass, so site-v1's `--hd-raised:var(--hd-surface, #183349)` fell through to the navy fallback and painted navy cards onto paper bands. */ --hd-fg: #102434; --hd-fg-2: #3e525e; --hd-fg-3: #596873; --hd-line: #dce1e2; --hd-line-2: #cbd1d2; --hd-accent: #8b621e; --hd-accent-h: #8b621e; --hd-surface: #ffffff; --hd-ground: #f4f5f3; /* discovery.css reads var(--hd-raised,#183349) directly and never loads site-v1.css, so without a value the opportunity cards kept the navy fallback and took ink text at 1.21:1. DECLARED IN THE GROUND CLASSES, NOT HERE. An alias written as `--x: var(--y)` on :root resolves on :root and inherits as a literal, so a band changing --hd-surface would never re-evaluate it. Set at :root it painted .op-access__col--gated white inside the navy CTA band. This is the trap site-v1.css:24 documents; it is easy to walk into twice. */ --hd-raised: #ffffff; /* ---- corners --------------------------------------------------------- Three, and only three: control / card / panel. */ --hd-r-ctl: 3px; /* .btn, input, .date-label */ --hd-r-card: 4px; /* .project-card */ --hd-r-panel: 5px; /* .option-card, .market-board, .path-result, .access-form-card */ /* ---- elevation ------------------------------------------------------- All four are navy-tinted at 2-4% alpha. He never uses a neutral black shadow. */ --hd-e-card: 0 8px 22px #14222c0a; /* .option-card */ --hd-e-board: 0 8px 20px #13283805; /* .market-board */ --hd-e-panel: 0 16px 35px #172e3e08; /* .path-result */ --hd-e-btn: 0 4px 18px #0001; /* .btn-gold:hover */ /* ---- motion: one duration, one gesture ------------------------------- */ --hd-dur: .2s; /* ======================================================================== --dl-* (deal-brief.css) — a near-exact clone of --hd-*, so the same targets apply. --dl-hd-h / --dl-bar-h / --dl-stuck are deliberately NOT touched: they are our own sticky geometry, not a theme value, and changing them breaks the two-sticky offset deal pages depend on. ====================================================================== */ --dl-navy: #071725; --dl-navy-deep: #06131e; --dl-navy-2: #0d2233; --dl-line-d: rgba(255,255,255,.125); --dl-line-d2: rgba(255,255,255,.16); --dl-paper: #f4f5f3; --dl-paper-2: #ffffff; --dl-line-l: #dce1e2; --dl-line-l2: #cbd1d2; --dl-ink: #102434; --dl-ink-2: #3e525e; --dl-ink-3: #596873; --dl-on-d: #ffffff; --dl-on-d-2: #ced7dd; --dl-on-d-3: #a9bac7; --dl-gold: #d7ab56; --dl-gold-soft: #e6c17d; --dl-gold-deep: #8b621e; --dl-serif: "Libre Caslon Display", Georgia, serif; --dl-sans: "DM Sans", Arial, sans-serif; --dl-fine: .8125rem; --dl-detail: .9375rem; --dl-body: 1rem; --dl-wrap: 1280px; --dl-gut: clamp(20px, 3.8vw, 48px); --dl-pad: clamp(51px, 6.4vw, 88px); /* ======================================================================== --ck-* (chrome.css) — the masthead and footer, on every page. The gold gradients these tokens fed (chrome.css:68, :80, :122) were REMOVED at source, along with home-d.css:173, discovery.css:103, site.css:226, site-v1.css:71 and deal-brief.css:409. Adam's file has no gradient at all: .btn-gold{background:var(--gold)}. These values are the flat replacements; --ck-gold-bright is no longer a lighter stop, it is the same gold, so any gradient that survives somewhere reads flat. ====================================================================== */ --ck-panel: #071725; /* .site-header{background:var(--navy)} */ --ck-gold: #d7ab56; --ck-gold-deep: #8b621e; --ck-gold-bright: #d7ab56; --ck-gold-soft: #d7ab56; --ck-ink: #071725; /* .btn-gold{color:var(--navy)} — navy, not near-black */ --ck-on-dark: #ffffff; /* .site-header{color:#fff} */ --ck-on-dark-mut: #c0cdd6; /* .site-footer{color:#c0cdd6} */ --ck-line-dark: rgba(255,255,255,.125); --ck-font: "DM Sans", Arial, sans-serif; --ck-r: 3px; /* .btn{border-radius:3px} */ /* ======================================================================== tokens.css — the original system. Superseded by --hd-* on any page that loads site-v1.css, but still live on the pages that do not. ====================================================================== */ --navy-950: #06131e; --navy-900: #071725; --navy-850: #0d2233; --navy-800: #0d2233; --navy-700: rgba(255,255,255,.16); --navy-600: #3e525e; --navy-500: #596873; --gold-700: #8b621e; --gold-600: #8b621e; --gold-500: #d7ab56; --gold-400: #d7ab56; --gold-300: #e6c17d; --gold-200: #ead7b1; --gold-100: #f0e2c9; --paper: #f4f5f3; --paper-alt: #f0f2f1; --white: #ffffff; --ink-900: #102434; --ink-700: #3e525e; --ink-500: #596873; --ink-300: #62717a; /* .scale-note{color:#62717a} */ --rule: #dce1e2; --rule-soft: #e9eeef; --on-dark-900: #ffffff; --on-dark-700: #ced7dd; --on-dark-500: #a9bac7; --on-dark-300: #a9bac7; --status-soon: #8b621e; --status-review: #8b621e; --status-open: #23563d; --font-display: "Libre Caslon Display", Georgia, serif; --font-body: "DM Sans", Arial, sans-serif; --wrap: 1280px; --wrap-narrow: 1130px; /* .founder-grid{max-width:1130px} */ --wrap-text: 760px; /* .hero-copy{max-width:760px} */ --gutter: 48px; --section-y: 88px; --section-y-sm: 51px; --r-xs: 2px; --r-sm: 3px; --r-md: 4px; --r-lg: 5px; --r-xl: 5px; --e-1: 0 4px 18px #0001; --e-2: 0 8px 20px #13283805; --e-3: 0 8px 22px #14222c0a; --e-4: 0 16px 35px #172e3e08; --dur: .2s; /* ======================================================================== --p-* (learn.css). Declared here too so the values live in one file; §C re-declares them at learn.css's own specificity, which is what actually lands. ====================================================================== */ --p-bg: #f4f5f3; --p-card: #ffffff; --p-card-2: #f8f9f7; --p-ink: #102434; --p-body: #3e525e; --p-mut: #596873; --p-meta: #62717a; --p-rule: #dce1e2; --p-rule-soft: #e9eeef; --p-gold: #d7ab56; --p-gold-ink: #8b621e; --p-navy: #071725; --f-display: "Libre Caslon Display", Georgia, serif; } /* ============================================================================ §B — THE GROUNDS THIS IS THE ALTERNATION. His page is not navy and it is not paper; it is navy, then four light bands, then navy, then two light, then navy, then light, then a navy deeper than the first: 0 .site-header navy #071725 1 .hero navy #071725 + skyline photo 2 .scale light #f0f2f1 3 .options-section paper #f4f5f3 4 .market-section paper #f4f5f3 5 .experience-section paper #f4f5f3 6 .approach-section navy #071725 7 .path-section light #f5f6f4 8 .founder-section white #ffffff 9 .access-section navy #071725 10 .faq-section paper #f4f5f3 11 .site-footer deep #06131e Four rules fall out of it: - A dark band is punctuation, never a page. Dark carries three jobs: the promise (hero), the argument (approach), the ask (CTA). - Dark bands never touch. Masthead+hero is the one adjacency and reads as a single block. - The light grounds step brighter as you descend, then drop to navy. - A dark band closes with a full-bleed hairline strip, not a hard edge (.hero-bottom, .role-strip, .operator-callout all take border-top:1px solid #ffffff26). --------------------------------------------------------------------------- WHY EACH CLASS SETS FOUR TOKEN FAMILIES The site has four independent palettes: --hd-* (home-d), --dl-* (deal-brief), the cockpit set (--canvas/--card/--line/--muted/--ink/--panel/--on-dark) and the site.css set (--paper/--white/--ink-900/--rule/--gold-*). A component reads whichever its own stylesheet declares — invest.css cards read --card-2 and --muted, deal pages read --dl-fg, partner pages read --hd-fg. So a ground class that set only --hd-* would re-ground a third of the page and leave the rest on the body's colour. Each class below sets ALL FOUR, and the result is that adding one class to a
re-grounds every component inside it, with no component rule anywhere. On a light band --on-dark and --panel are deliberately remapped to the light ink and the light card: a component that asked for "the on-dark colour" on a band that is no longer dark wants the band's own foreground, not white text. ========================================================================== */ /* --------------------------------------------------------------------------- AUTO-GROUNDED DARK BANDS These are not guessed. .forge/artifacts/design/scan-bands.mjs walked all 48 in-scope pages, measured the computed background of every element over 80px tall, and returned every one whose relative luminance is below 0.18. The split below is by the measured value, and the two groups need different treatment: L 0.006 - 0.009 a BAND. Paints the page navy #071725 (L=0.0072). L 0.013 - 0.030 a RAISED CARD inside a band. Paints #0d2233, so it still lifts off the band rather than flattening against it. WHY THEY PAINT AND DO NOT ONLY SET TOKENS. The first pass gave this list the dark token set without a background, on the assumption that every one of them already painted its own. Several did not — .op-hero and .op-open inherited navy from a body that is no longer navy — so they took white ink onto a paper ground at 1.09:1. Tokens and ground travel together or not at all. :where() holds these at specificity 0, so an explicit .ground-* class on the same element still wins. Re-run the scan after adding a band; do not add to this list from memory. --------------------------------------------------------------------------- */ .ground-navy, .ground-deep, .ck-hd, .op-access, .op-quiet, .op-open, .op-hero, :where( .ac-band, .bg-callout, .bg-hero, .credit-decisions, .deal-intake__brief, .dl-end, .dl-hero, .hb-exit, .hb-hero, .hb-scale, .hb-sec, .hd-exit, .hd-hero, .hd-scale, .hd-sec, .he-exit, .hg-hero, .hg-scale, .hg-sec, .hm-band, .hm-hero, .ik-hero, .iw-close, .iw-hero, .learn-next, .page-hero, .pt-hero, .pt-sec, .pt-sec--navy, .dl-bar, .pt-who__col, .pw-chainband, .pw-statusband, .statband, .section--navy, .story-hero, .story-hero__visual, .x-hero ) { /* --- home-d ---------------------------------------------------------- */ --hd-fg: var(--hd-on-d); --hd-fg-2: var(--hd-on-d-2); --hd-fg-3: var(--hd-on-d-3); --hd-line: var(--hd-line-d); --hd-line-2: var(--hd-line-d2); --hd-accent: var(--hd-gold); --hd-accent-h: var(--hd-gold-soft); --hd-surface: var(--hd-navy-2); --hd-raised: var(--hd-navy-2); --dl-raised: var(--hd-navy-2); /* --- deal-brief ------------------------------------------------------ */ --dl-fg: var(--dl-on-d); --dl-fg-2: var(--dl-on-d-2); --dl-fg-3: var(--dl-on-d-3); --dl-line: var(--dl-line-d); --dl-line-2: var(--dl-line-d2); --dl-accent: var(--dl-gold); /* --- cockpit --------------------------------------------------------- */ --canvas: var(--hd-navy); --card: var(--hd-navy-2); --card-2: var(--hd-navy-2); --panel: var(--hd-navy-2); --panel-2: var(--hd-navy); --line: var(--hd-line-d2); --line-dark: var(--hd-line-d); --muted: var(--hd-on-d-3); --ink: var(--hd-on-d); --on-dark: var(--hd-on-d); --on-dark-mut: var(--hd-on-d-3); --on-dark-900: var(--hd-on-d); --on-dark-700: var(--hd-on-d-2); --on-dark-500: var(--hd-on-d-3); --on-dark-300: var(--hd-on-d-3); --gold-deep: var(--hd-gold); --gold-bright: var(--hd-gold); --shadow-card: none; /* --- site.css -------------------------------------------------------- */ --paper: var(--hd-navy); --paper-alt: var(--hd-navy-2); --white: var(--hd-navy-2); --surface: var(--hd-navy-2); --ink-900: var(--hd-on-d); --ink-700: var(--hd-on-d-2); --ink-500: var(--hd-on-d-3); --ink-300: var(--hd-on-d-3); --rule: var(--hd-line-d2); --rule-soft: var(--hd-line-d); --accent-ink: var(--hd-gold); --heading-ink: var(--hd-on-d); --body-ink: var(--hd-on-d-2); --gold-700: var(--hd-gold); --gold-600: var(--hd-gold); --gold-500: var(--hd-gold); --gold-400: var(--hd-gold); --gold-300: var(--hd-gold-soft); --gold-200: var(--hd-gold-soft); /* --- pathway / intake ------------------------------------------------ */ --pw-line: var(--hd-line-d2); --pw-ink: var(--hd-on-d); --pw-body: var(--hd-on-d-2); --pw-mut: var(--hd-on-d-3); --pw-gold-deep: var(--hd-gold); --ik-gold-text: var(--hd-gold); /* --- record.css ------------------------------------------------------ */ --rc-ink: var(--hd-on-d); --rc-body: var(--hd-on-d-2); --rc-mut: var(--hd-on-d-3); --rc-rule: var(--hd-line-d2); --rc-rule-soft: var(--hd-line-d); --rc-gold: var(--hd-gold); --rc-gold-deep: var(--hd-gold); color: var(--hd-on-d); } .ac-band, .bg-callout, .bg-hero, .credit-decisions, .deal-intake__brief, .dl-end, .dl-hero, .hb-exit, .hb-hero, .hb-scale, .hb-sec, .hd-exit, .hd-hero, .hd-scale, .hd-sec, .he-exit, .hg-hero, .hg-scale, .hg-sec, .hm-band, .hm-hero, .ik-hero, .iw-close, .iw-hero, .learn-next, .page-hero, .pt-hero, .pt-sec, .pt-sec--navy, .dl-bar, .pt-who__col, .pw-chainband, .pw-statusband, .statband, .section--navy, .story-hero, .story-hero__visual, .x-hero { background: var(--hd-navy); } .op-access, .op-quiet, .op-open, .op-hero { background: var(--hd-navy); } /* A RAISED CARD FOLLOWS ITS BAND. These measured L=0.013-0.030 when every page was navy, so the first pass painted them --hd-navy-2 outright. That put a navy card on the paper overview band of opportunities.html with ink text at 1.46:1. --hd-surface is navy-2 inside a .ground-navy band and white inside a light one, so the same declaration lifts the card off whichever band it is actually on. */ :where( .dl-absblock, .dl-biggest, .dl-disc, .dl-fees__row, .hb-op__project, .hb-step, .he-exit__media, .hg-exit, .hg-op__project, .hg-plate, .hg-step, .hm-voice__media, .op-access__col, .op-ov__stat, .pt-boundary, .pt-open__body, .pt-shut__row, .rc-gap ) { background: var(--hd-surface); } .ground-navy { background: var(--hd-navy); } .ground-deep, .ck-ft { background: var(--hd-navy-deep); } /* the deepest ground */ .ck-hd { background: var(--hd-navy); } /* .site-header{background:var(--navy)} */ /* --------------------------------------------------------------------------- PER-PAGE BAND ASSIGNMENT — BATCH 1, THE CONVERSION PATH Adam's order is DARK, light x4, DARK, light x2, DARK, light, DARK. Each page below is assigned against that shape: hero dark, body light, one argument band dark where the page has an argument to make, CTA dark, footer deepest. Short pages drop bands from the middle, never from the ends. opportunities navy hero / mist overview / paper tiers / paper types / navy access / paper form operating-partners navy hero / paper world-1 / white world-2 / paper world-3 / navy close investing-with-us navy hero / paper structure / navy close how-it-works navy hero / its own white+navy alternation / paper stage request-access navy hero / paper carry contact navy hero / paper body Listed here rather than as a class in the markup because six of these pages are generator-owned; a selector is one edit, a class is six generators. --------------------------------------------------------------------------- */ .pt-sec--white, .pt-sec--paper, .portal-entry, .x-hero, .credit-cockpit, .access-shell, .progressive-control, .x-candidates, .x-form, .rc-check, .credit-decisions, .about-sec, .page-sec, .learn-chapters, .learn-glossary, body.dl-body .pt-sec, .op-ov, .ground-mist, .ground-paper, .ground-light, .ground-white, .op-tier, .op-types, .x-form, .pw-body, .op-world--1, .op-world--2, .op-world--3, .ik-carry, .process-stage, .section--white, .iw-struct { /* --- home-d ---------------------------------------------------------- */ --hd-fg: var(--hd-ink); --hd-fg-2: var(--hd-ink-2); --hd-fg-3: var(--hd-ink-3); --hd-line: var(--hd-line-l); --hd-line-2: var(--hd-line-l2); --hd-accent: var(--hd-gold-deep); --hd-accent-h: var(--hd-gold-deep); --hd-surface: var(--hd-paper-2); --hd-raised: var(--hd-paper-2); --dl-raised: var(--hd-paper-2); /* --- deal-brief ------------------------------------------------------ */ --dl-fg: var(--dl-ink); --dl-fg-2: var(--dl-ink-2); --dl-fg-3: var(--dl-ink-3); --dl-line: var(--dl-line-l); --dl-line-2: var(--dl-line-l2); --dl-accent: var(--dl-gold-deep); /* --- cockpit. --on-dark and --panel remap to the LIGHT foreground: a component asking for "the on-dark colour" on a band that is no longer dark wants this band's foreground, not white on white. --------------- */ --canvas: var(--hd-paper); --card: var(--hd-paper-2); --card-2: var(--hd-ground-light); --panel: var(--hd-paper-2); --panel-2: var(--hd-ground-mist); --line: var(--hd-line-l); --line-dark: var(--hd-line-l); --muted: var(--hd-ink-3); --ink: var(--hd-ink); --on-dark: var(--hd-ink); --on-dark-mut: var(--hd-ink-3); --on-dark-900: var(--hd-ink); --on-dark-700: var(--hd-ink-2); --on-dark-500: var(--hd-ink-3); --on-dark-300: var(--hd-ink-3); --gold-deep: var(--hd-gold-deep); --gold-bright: var(--hd-gold-deep); --shadow-card: var(--hd-e-card); /* --- site.css -------------------------------------------------------- */ --paper: var(--hd-paper); --paper-alt: var(--hd-ground-mist); --white: var(--hd-paper-2); --surface: var(--hd-paper-2); --ink-900: var(--hd-ink); --ink-700: var(--hd-ink-2); --ink-500: var(--hd-ink-3); --ink-300: var(--hd-ink-3); --rule: var(--hd-line-l); --rule-soft: var(--hd-line-l2); --accent-ink: var(--hd-gold-deep); --heading-ink: var(--hd-ink); --body-ink: var(--hd-ink-2); --gold-700: var(--hd-gold-deep); --gold-600: var(--hd-gold-deep); --gold-500: var(--hd-gold-deep); --gold-400: var(--hd-gold); /* a FILL slot: safe as a button ground */ /* --gold-300 is a TEXT slot. site.css:193 `.on-dark .accent{color:var(--gold-300)}` put it on an h2 that now sits on a paper band, where the light gold measures 1.95:1. On a light ground any gold used as text is the deep one; the light gold is a decoration colour there and never text. */ --gold-300: var(--hd-gold-deep); --gold-200: var(--hd-select); /* --- pathway / intake ------------------------------------------------ */ --pw-line: var(--hd-line-l); --pw-ink: var(--hd-ink); --pw-body: var(--hd-ink-2); --pw-mut: var(--hd-ink-3); --pw-gold-deep: var(--hd-gold-deep); --ik-gold-text: var(--hd-gold-deep); /* --- record.css ------------------------------------------------------ */ --rc-ink: var(--hd-ink); --rc-body: var(--hd-ink-2); --rc-mut: var(--hd-ink-3); --rc-rule: var(--hd-line-l); --rc-rule-soft: var(--hd-line-l2); --rc-gold: var(--hd-gold-deep); --rc-gold-deep: var(--hd-gold-deep); color: var(--hd-ink); } .ground-mist, .op-ov { background: var(--hd-ground-mist); } /* #f0f2f1 — first band under the hero */ .ground-paper, .op-tier, .op-types, .x-form, .ik-carry, .pw-body, .process-stage, .section--white, .iw-struct { background: var(--hd-paper); } /* #f4f5f3 — the default light band */ .ground-light { background: var(--hd-ground-light); } /* #f5f6f4 — interactive / selector band */ .ground-white, .op-world--2 { background: var(--hd-ground-white); } /* paper / white / paper, so no two dark bands touch and the middle operator lifts the way his .founder-section does between two light bands. */ .op-world--1, .op-world--3, .pw-body, body.dl-body .pt-sec, .x-candidates, .x-form, .rc-check, .credit-decisions, .learn-chapters, .learn-glossary { background: var(--hd-paper); } /* THE DECISION TOOLS. .x-hero (1031), .credit-cockpit (private credit) and .access-shell (404) were each a single navy block between a navy masthead and a navy footer, so all three pages were 0% light: three dark bands and nothing else. They are not heroes in his sense, they are his .path-section — a headline, a set of choices, and a white result card beside them: .path-section{background:#f5f6f4} .path-result{padding:32px;background:white;border:1px solid #d1d9db;border-radius:5px} .path-buttons button[aria-pressed="true"]{background:var(--navy);color:white; box-shadow:inset 3px 0 var(--gold)} On the light ground the white answer card and the navy selected stage both become his treatment rather than fighting it. */ .x-hero, .credit-cockpit, .access-shell, .portal-entry { background: var(--hd-ground-light); } /* The strip a story page shows below its hero while the rest stays collapsed. It was a 71px sliver, which is why those pages measured 5% light. Given the band rhythm it becomes a real light band. Progressive layers stay hidden; that is product behaviour, not a theme decision. */ .progressive-control { background: var(--hd-paper); padding-block: var(--hd-pad); } /* The partner pages carry THREE section modifiers, not two: --white, --paper and --navy. They were built to alternate and the automatic .pt-sec grounding was overriding their own intent. Missing --paper off this list left an 1103px band (the largest on the page) painting navy, which is most of why the three partner pages measured 27-30% light instead of alternating. */ .pt-sec--white { background: var(--hd-paper); } .pt-sec--paper { background: var(--hd-ground-mist); } /* A band must not be undercut by a page-level background painted on an ancestor. These templates paint .story-page / .wrapc / main themselves. */ .ground-navy, .ground-deep, .ground-mist, .ground-paper, .ground-light, .ground-white { position: relative; z-index: 0; } /* ============================================================================ §C — THE NIGHT UNWIND site-v1.css remaps every family onto the navy set under `body.hd-body` (specificity 0,2,0), which outranks :root. Eighteen pages carry `body.hd-body hd-night` and run navy end to end. That uniform dark is the thing the founder called out as wrong: Adam's theme alternates. These blocks re-declare the same families at the same specificity, later in source order, pointing at the light ground. Sections then opt back into navy with .ground-navy from §B. THIS IS THE PART WITH A BLAST RADIUS. §A alone is a safe palette swap. §C flips the site's default ground. Comment §C out to take the palette without the ground change. ========================================================================== */ body.hd-body, body.hd-body.hd-night, body.hd-body.hd-paper-body, body.dl-body, body.record { /* ---- grounds, ordered by depth so a card still reads as raised -------- */ --paper: var(--hd-paper); --paper-alt: var(--hd-ground-mist); --white: var(--hd-paper-2); --surface: var(--hd-paper-2); /* ---- ink -------------------------------------------------------------- */ --ink-900: var(--hd-ink); --ink-700: var(--hd-ink-2); --ink-500: var(--hd-ink-3); --ink-300: #62717a; /* ---- accent: the LIGHT-ground gold, because the ground is now light --- 700-500 and 300 are TEXT slots and take the deep gold; 400 is the FILL slot and stays the light gold. This block disagreed with the ground classes on 500 and 300, which is how `.accent{color:var(--gold-500)}` put #d7ab56 on a paper band at 1.95:1 — visible only once the progressive layer that contains it was revealed. Keep the two mappings identical. */ --gold-700: var(--hd-gold-deep); --gold-600: var(--hd-gold-deep); --gold-500: var(--hd-gold-deep); --gold-400: var(--hd-gold); --gold-300: var(--hd-gold-deep); --gold-200: var(--hd-select); /* ---- the frozen aliases. site-v1.css note 1: an alias declared on :root as `--x: var(--y)` resolves there and inherits as a literal, so it has to be re-declared here or the component keeps the night colour. ---------- */ --accent-ink: var(--hd-gold-deep); --heading-ink: var(--hd-ink); --body-ink: var(--hd-ink-2); --rule: var(--hd-line-l); --rule-soft: var(--hd-line-l2); /* ---- cockpit.css ------------------------------------------------------ */ --canvas: var(--hd-paper); --card: var(--hd-paper-2); --card-2: var(--hd-ground-light); --line: var(--hd-line-l); --muted: var(--hd-ink-3); --ink: var(--hd-ink); --gold-deep: var(--hd-gold-deep); /* ---- pathway.css ------------------------------------------------------ */ --pw-line: var(--hd-line-l); --pw-ink: var(--hd-ink); --pw-body: var(--hd-ink-2); --pw-mut: var(--hd-ink-3); --pw-gold-deep: var(--hd-gold-deep); /* ---- portal-cockpit.css ----------------------------------------------- */ --portal-wash: var(--hd-paper-2); --portal-green-soft: var(--hd-status-done-bg); --portal-rule: var(--hd-line-l); /* ---- intake.css ------------------------------------------------------- */ --ik-gold-text: var(--hd-gold-deep); --ik-danger: #9b2c22; --ik-danger-soft: rgba(155,44,34,.12); /* ---- the ground-aware aliases default to LIGHT. A band opts into navy with .ground-navy from §B. ------------------------------------------- */ --hd-fg: var(--hd-ink); --hd-fg-2: var(--hd-ink-2); --hd-fg-3: var(--hd-ink-3); --hd-line: var(--hd-line-l); --hd-line-2: var(--hd-line-l2); --hd-accent: var(--hd-gold-deep); --hd-accent-h: var(--hd-gold-deep); /* --dl-* and --rc-* default light for the same reason every other family does: the band declares the exception. */ /* deal-brief.css:1516 is the deal pages' own night flip: it remaps the whole --dl-* family onto the dark set at body.dl-body. Overriding only the six ground-aware aliases left --dl-paper and --dl-ink pointing at navy and white, so every deal brief still opened as a navy wall with white body text on a paper ground. The whole family has to come back. */ --dl-paper: var(--hd-paper); --dl-paper-2: var(--hd-paper-2); --dl-ink: var(--hd-ink); --dl-ink-2: var(--hd-ink-2); --dl-ink-3: var(--hd-ink-3); --dl-line-l: var(--hd-line-l); --dl-line-l2: var(--hd-line-l2); --dl-gold-deep: var(--hd-gold-deep); --dl-fg: var(--hd-ink); --dl-fg-2: var(--hd-ink-2); --dl-fg-3: var(--hd-ink-3); --dl-line: var(--hd-line-l); --dl-line-2: var(--hd-line-l2); --dl-accent: var(--hd-gold-deep); --rc-navy: #071725; --rc-navy-2: #0d2233; --rc-paper: #f4f5f3; --rc-paper-ink: #102434; --rc-paper-mut: #596873; --rc-ink: var(--hd-ink); --rc-body: var(--hd-ink-2); --rc-mut: var(--hd-ink-3); --rc-rule: var(--hd-line-l); --rc-rule-soft: var(--hd-line-l2); --rc-gold: var(--hd-gold-deep); --rc-gold-deep: var(--hd-gold-deep); --on-dark-900: var(--hd-ink); --on-dark-700: var(--hd-ink-2); --on-dark-500: var(--hd-ink-3); --on-dark-300: var(--hd-ink-3); background: var(--hd-paper); color: var(--hd-ink); } /* learn.css declares its palette on `body.cockpit.learn`. Same specificity, later source order. */ body.cockpit.learn { --p-bg: #f4f5f3; --p-card: #ffffff; --p-card-2: #f8f9f7; --p-ink: #102434; --p-body: #3e525e; --p-mut: #596873; --p-meta: #62717a; --p-rule: #dce1e2; --p-rule-soft: #e9eeef; --p-gold: #d7ab56; --p-gold-ink: #8b621e; --p-navy: #071725; --f-display: "Libre Caslon Display", Georgia, serif; background: var(--p-bg); color: var(--p-body); } /* --------------------------------------------------------------------------- THE EXPLICIT ASSIGNMENTS, RESTATED LAST The automatic band backgrounds above run at plain class specificity so they can beat site.css. That means an explicit .ground-* class would otherwise only tie with them. Restating the six here, at the end of the sheet, puts a deliberate per-page assignment ahead of the automatic one again. --------------------------------------------------------------------------- */ .ground-navy { background: var(--hd-navy); } .ground-deep { background: var(--hd-navy-deep); } .ground-mist { background: var(--hd-ground-mist); } .ground-paper { background: var(--hd-paper); } .ground-light { background: var(--hd-ground-light); } .ground-white { background: var(--hd-ground-white); } /* --------------------------------------------------------------------------- .dl-idx — GROUNDED ONLY WHERE IT PAINTS deal-brief.css:452 paints .dl-idx with --dl-navy-2, but a min-width:1040px query turns the same element into a left rail on the paper band with no background. So it is a dark surface under 1040px and a transparent one above it, and the dark token set is correct for exactly one of those. Grounding it unconditionally passed the mobile sweep and regressed desktop to 1.82:1 — caught only by re-running the desktop sweep afterwards. Run both. --------------------------------------------------------------------------- */ @media (max-width: 1039.98px) { .dl-idx { --dl-fg: var(--dl-on-d); --dl-fg-2: var(--dl-on-d-2); --dl-fg-3: var(--dl-on-d-3); --dl-line: var(--dl-line-d); --dl-line-2: var(--dl-line-d2); --dl-accent: var(--dl-gold); --hd-fg: var(--hd-on-d); --hd-fg-2: var(--hd-on-d-2); --hd-fg-3: var(--hd-on-d-3); --hd-accent: var(--hd-gold); } }