/* ══════════════════════════════════════════════════════════════════════════ recode-advisory-theme.css — the advisory look for the ~245 INTERIOR pages. The homepage moved to navy / mint / paper (assets/recode-advisory.css) and the interior stayed dark gold, so every click from the front door changed palette. This closes that gap. WHY A RETONE AND NOT A REWRITE The interior already runs through one chokepoint: recode-v3-theme.css maps the two legacy token vocabularies (--color-* and --bg/--text/--accent) onto the --v3-* tokens, and the eight v3 routes read --v3-* directly. So redefining --v3-* here reaches all 245 pages at once. Same technique the site has used twice before; load order is the whole contract — this file MUST come last. WHAT MAKES THIS ONE HARDER THAN THE LAST The previous retones were dark-to-dark. This is an INVERSION: the ground goes from near-black to paper and the ink from near-white to navy. Two consequences that are easy to miss: 1. Hairlines were white at 7-22% alpha. White on paper is invisible, so every line token flips to a dark alpha. 2. The gold accent was readable as text on black. Mint (#a6e6c9) is NOT readable as text on paper — it is a fill colour. --v3-accent therefore maps to the readable dark mint, and bright mint is reintroduced only where it sits behind something. PART 1 token inversion PART 2 base + type PART 3 the shared shell — stays navy on a paper page PART 4 components the token flip cannot reach PART 5 legacy-sheet literals ══════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════ PART 1 — TOKEN INVERSION ══════════════════════════════════════════════════════════════════════ */ :root { /* Advisory palette, kept in step with assets/recode-advisory.css PART 1. */ --adv-ink: #07131c; --adv-ink-2: #10232c; --adv-mint: #a6e6c9; /* fills only — fails contrast as text on paper */ --adv-mint-d: #295d4d; /* the readable counterpart */ --adv-paper: #f4f5f0; --adv-paper-2: #e5ebe6; --adv-paper-3: #e7ebe5; --adv-line: #d3d9d4; /* ── surfaces: near-black → paper ─────────────────────────────────── */ --v3-base: #f4f5f0; --v3-tint: #e5ebe6; --v3-panel: #e7ebe5; --v3-hover: #ffffff; /* cards lift TOWARD white on a light ground */ --v3-stripe-a: #dfe5e0; --v3-stripe-b: #e9eee9; /* ── ink: near-white → navy ───────────────────────────────────────── */ --v3-text: #07131c; --v3-bright: #07131c; --v3-strong: #10232c; --v3-body: #596762; --v3-muted: #5b6762; --v3-dim: #5f6b66; --v3-faint: #5b6762; --v3-fainter: #5b6762; --v3-disclaimer: #66716e; /* ── accent: gold → mint ────────────────────────────────────────── --v3-accent is used for eyebrows, labels, links and rules — all TEXT — so it takes the readable dark mint. The bright mint returns in PART 4 only where it is a background. */ --v3-accent: #295d4d; --v3-accent-75: rgba(41, 93, 77, .75); --v3-accent-55: rgba(41, 93, 77, .55); --v3-accent-45: rgba(41, 93, 77, .45); --v3-accent-40: rgba(41, 93, 77, .40); --v3-accent-28: rgba(41, 93, 77, .28); /* ── hairlines: white alpha → dark alpha ────────────────────────── This is the single biggest source of "the page looks empty after the flip" — white rules simply vanish on paper. */ --v3-line: rgba(7, 19, 28, .10); --v3-line-2: rgba(7, 19, 28, .12); --v3-line-3: rgba(7, 19, 28, .14); --v3-line-4: rgba(7, 19, 28, .16); --v3-border: #d3d9d4; --v3-border-str: #b9c3bb; /* ── type: Helvetica/Plex → Manrope + DM Sans ─────────────────────── */ --v3-sans: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --v3-display: Manrope, "Helvetica Neue", Helvetica, Arial, sans-serif; --v3-mono: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --v3-serif: Manrope, Georgia, serif; /* recode-ds.css draws eyebrows from its accent RAMP, which recode-v3-theme mapped to golds. The whole ramp collapses onto mint; the light steps stay ordered so any rule picking a "light" step still gets something sane. */ --color-accent-100: #dff0e7; --color-accent-200: #bfe3d1; --color-accent-300: #9fd5bb; --color-accent-400: #6fb99b; --color-accent-500: #4a9179; --color-accent-600: #356f5c; --color-accent-700: #295d4d; --color-accent-800: #1f4a3d; --color-accent-900: #16372d; --color-accent-2-700: #295d4d; --color-accent-2-600: #356f5c; /* recode-v3-theme.css defines --accent-700 as a light GOLD for eyebrows. Unreadable on paper (1.41:1) and the wrong hue now. */ --accent-700: #295d4d; /* These two were "text on a dark band". Those bands are paper now, so the light values land at ~1.1:1. They have to become ink. */ --text-on-dark: #07131c; --text-muted-on-dark: #596762; /* newsletter.html declares its own --red/--green for a two-column comparison, picked for a dark ground (2.8:1 and 1.4:1 on paper). Darkened here rather than remapped to mint: the red/green contrast IS the content. */ --red: #b3261e; --green: #1f6b46; /* The legacy vocabularies read these directly in a few places. */ --color-surface: #ffffff; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; } /* ══════════════════════════════════════════════════════════════════════ PART 2 — BASE + TYPE ══════════════════════════════════════════════════════════════════════ */ html, body { background: var(--adv-paper); color: var(--adv-ink); } body { font-family: var(--v3-sans); } ::selection { background: var(--adv-mint); color: var(--adv-ink); } /* v3 set display type in Helvetica, uppercase, weight 500. The advisory voice is Manrope, sentence case, weight 600 — so the uppercasing has to be actively undone, not just re-fonted. */ h1, h2, h3, h4, h5, h6, .v3-h2, .v3-idea-title, .v3-stage-title, .v3-step-name, .v3-layer-title, .v3-masthead h1, .v3-serif-h1, .page-title, .section-title, .sec-title, .firehose-card h4, .feed-title, .ah h1, .lead h1, .article-hero h1 { font-family: var(--v3-display); font-weight: 600; text-transform: none; letter-spacing: -.045em; color: var(--adv-ink); } .v3-masthead h1, .v3-serif-h1, .page-title { letter-spacing: -.06em; } /* Eyebrows and micro-labels keep their instrument role, but mono is gone — the advisory system has no monospace voice. Letterspaced DM Sans does the same job without introducing a third family. */ .v3-eyebrow, .v3-micro, .v3-note, .v3-idea-meta, .v3-layer-count, .v3-terminal-bar, .v3-row-tag, .v3-stage-verb, .v3-stage-num, .section-label, .article-label, .memo-eyebrow, .elabel, .eyebrow, .firehose-priority, .adv-index { font-family: var(--v3-sans); font-weight: 700; letter-spacing: .14em; } a { color: var(--adv-ink); } a:hover { color: var(--adv-mint-d); } :focus-visible { outline: 3px solid var(--adv-mint-d); outline-offset: 3px; } /* ══════════════════════════════════════════════════════════════════════ PART 3 — THE SHARED SHELL The header and footer stay NAVY while the page ground goes paper, exactly as on the homepage. They cannot follow --v3-base, so they are set here. ══════════════════════════════════════════════════════════════════════ */ .v3-header { background: rgba(7, 19, 28, .94) !important; border-bottom: 1px solid rgba(255, 255, 255, .14) !important; } .v3-brand { color: #fff; font-family: var(--v3-display); font-weight: 800; letter-spacing: -.085em; text-transform: lowercase; } .v3-brand em { color: var(--adv-mint); } .v3-brand:hover { color: #fff; } .v3-nav > a, .v3-navtop { color: #d8e1df; font-weight: 600; letter-spacing: 0; text-transform: none; } .v3-nav > a:hover, .v3-navtop:hover, .v3-nav > a[aria-current="page"] { color: var(--adv-mint); } .v3-drop { background: var(--adv-ink-2); border: 1px solid rgba(255,255,255,.14); } .v3-drop a { color: #d8e1df; border-bottom: 1px solid rgba(255,255,255,.10); } .v3-drop a:hover, .v3-drop a:focus-visible { background: rgba(255,255,255,.06); color: #fff; } .v3-drop strong { color: #fff; font-family: var(--v3-display); font-weight: 700; } .v3-drop span { color: #94aca7; } .v3-navcta { border: 1px solid #819b92 !important; color: #fff !important; background: none !important; font-weight: 700; letter-spacing: 0; text-transform: none; border-radius: 2px; } .v3-navcta:hover { background: var(--adv-mint) !important; border-color: var(--adv-mint) !important; color: var(--adv-ink) !important; } .v3-burger { color: #fff; border-color: #819b92; } .v3-burger span, .v3-burger span::before, .v3-burger span::after { background: #fff; } .v3-footer { background: var(--adv-ink) !important; color: #b4c5bf !important; border-top: 0 !important; } .v3-footer .v3-brand { color: #fff; } .v3-footer-blurb { color: #b4c5bf; } .v3-footer-h { color: #94aca7; font-family: var(--v3-sans); font-weight: 700; letter-spacing: .14em; } .v3-footer-col a { color: #b4c5bf !important; } .v3-footer-col a:hover { color: var(--adv-mint) !important; } .v3-footer-bar { color: #8ea39d; border-top: 1px solid rgba(255,255,255,.14); } .v3-signup-row { border-color: rgba(255,255,255,.22); } .v3-signup-row span { color: #b4c5bf; } .v3-signup-row b { background: var(--adv-mint); color: var(--adv-ink); } .v3-signup-row:hover b { background: #d6ffe8; } @media (max-width: 900px) { .v3-nav { background: var(--adv-ink-2); } } /* ══════════════════════════════════════════════════════════════════════ PART 4 — COMPONENTS THE TOKEN FLIP CANNOT REACH ══════════════════════════════════════════════════════════════════════ */ /* Cards were dark-on-dark separated by hairlines. On paper they read better as white cards with a border, matching the homepage's offer grid. */ .v3-hairgrid { background: var(--adv-line); } .v3-hairgrid > *, .v3-card, .v3-panel, .v3-terminal, .v3-idea, .v3-route, .card, .story-card, .explainer-card, .memo-card, .excard, .scard, .ncard { background: #fff; } .v3-idea:hover, .v3-stage:hover, .v3-advisory > div:hover, .card:hover, .excard:hover, .ncard:hover, .scard:hover { background: #fafbf8; } /* Buttons: the filled variant was near-white on black. Invert to navy. */ .v3-btn--fill, .btn-primary { background: var(--adv-ink); color: #fff; } .v3-btn--fill:hover, .btn-primary:hover { background: var(--adv-mint); color: var(--adv-ink); } .v3-btn--ghost, .v3-btn--line, .btn-secondary { border-color: var(--adv-ink); color: var(--adv-ink); background: none; } .v3-btn--ghost:hover, .v3-btn--line:hover, .btn-secondary:hover { background: var(--adv-ink); color: #fff; } .v3-btn--accent { border-color: var(--adv-mint-d); color: var(--adv-mint-d); } .v3-btn--accent:hover { background: var(--adv-mint-d); color: #fff; } .v3-btn, .btn { border-radius: 2px; font-family: var(--v3-sans); font-weight: 700; letter-spacing: 0; text-transform: none; } /* Chips, tags and filters. */ .v3-chip, .v3-pill, .tag, .chip, .filter, .v3-cat, .article-tag { border-color: var(--adv-line); color: var(--adv-ink); background: #fff; font-family: var(--v3-sans); letter-spacing: 0; text-transform: none; } .v3-filter { background: none; border: 0; color: var(--v3-body); letter-spacing: .06em; } .v3-filter[aria-pressed="true"], .filter[aria-pressed="true"], .filter.is-active, .filter-pill.active, .news-filters button.active, .filter-bar button.active { background: var(--adv-mint) !important; border-color: var(--adv-mint) !important; color: var(--adv-ink) !important; } /* Progress tracks and score bars read as mint fills on a light track. */ .v3-track, .v3-read-track, .v3-dim-track { background: rgba(7,19,28,.10); } .v3-track i, .v3-read-track i, .v3-dim-track i { background: var(--adv-mint-d); } .v3-funnel-track { background: rgba(7,19,28,.06); } .v3-funnel-bar { background: rgba(41,93,77,.22); border-right-color: var(--adv-mint-d); } /* The striped placeholder used for missing imagery. */ .v3-portrait, .v3-cover { background: repeating-linear-gradient(135deg, #dfe5e0 0 7px, #e9eee9 7px 14px); border-color: var(--adv-line); } .v3-portrait--photo { background: #e9eee9; } /* The one place bright mint returns as a surface: the accent-bounded signal band on /intelligence and the readiness callouts. */ .v3-signal { background: #fff; border-color: var(--adv-mint-d); } .v3-signal-label { color: var(--adv-mint-d); } /* Hardcoded light oklch values in recode-v3.css. They were chosen as readable greys on a near-black ground; on paper they land between 1.8:1 and 2.3:1, which is unreadable. No token reaches them, so they are named here. (These were invisible to the first contrast audit because it only parsed rgb() — oklch computed values were skipped and reported as passing.) */ .v3-masthead p, .v3-quad p, .v3-hero-supp, .v3-book-blurb { color: var(--v3-body); } .v3-cat { color: var(--adv-ink); } .v3-footer-col a { color: #b4c5bf; } code, pre { background: var(--adv-paper-3); color: var(--adv-ink); border-color: var(--adv-line); } blockquote { border-left-color: var(--adv-mint-d); color: var(--adv-ink-2); } hr, .rule { border-top-color: var(--adv-line); } th { color: var(--v3-body); } td { border-color: var(--v3-line); } input, textarea, select { background: #fff; border-color: var(--adv-line); color: var(--adv-ink); } ::placeholder { color: #8a948f; } /* ══════════════════════════════════════════════════════════════════════ PART 5 — LEGACY-SHEET LITERALS Values the token layer cannot reach, carried over from the dark retone. ══════════════════════════════════════════════════════════════════════ */ /* The legacy palette used --bg-dark for BOTH a dark band background and heading ink — one token, two jobs. Any theme that remaps it to a real surface turns these into invisible text. Enumerated from the three legacy sheets and both generator templates rather than found one page at a time. */ .ah h1, .lead h1, .bhero h1, .exhead h2, .post h3, .hs h3, .ncard h3, .excard h4, .hl h4, .scard h4, .firehose-card h4, .article-hero h1, .memo-hero h1, .article-body h2, .article-body h3, .highlight-box h4, .entry-card h4, .sec-title, .section-title, /* per-page inline styles reuse the same pattern for emphasis runs */ .article-body strong, .article-body .highlight-box strong, .memo-body strong, .post strong { color: var(--adv-ink) !important; } /* .signoff is set to var(--accent) !important on a band that is no longer dark; the dark mint needs a light ground under it to reach 4.5:1. */ .signoff, .lead, .article-subtitle, .memo-subtitle, .d-insight { color: var(--adv-ink-2) !important; } /* newsletter.html's two-column comparison uses literal red/green chosen for a dark ground. Darkened to keep the good/bad signal legible on paper — the contrast there is content, not decoration, so it is not remapped to mint. */ .contrast-col-label, .mark { filter: none; } .contrast-col.bad .contrast-col-label, .contrast-col.bad .mark { color: #b3261e !important; } .contrast-col.good .contrast-col-label, .contrast-col.good .mark { color: #1f6b46 !important; } /* Accent-filled controls need dark text on mint, not white. */ .acta a, .btn-p, .sub-btn, .filter-pill.on, nav.a .sub, .nav-subscribe, .cta-btn { background: var(--adv-mint) !important; color: var(--adv-ink) !important; border-color: var(--adv-mint) !important; } .acta a:hover, .btn-p:hover, .sub-btn:hover { background: var(--adv-ink) !important; color: #fff !important; } /* Raised specificity: a page-level rule was still landing #596762 on the mint fill (4.17:1, just under the floor). */ a.sub-btn, a.cta-btn, a.btn-p, a.nav-subscribe, .sub-btn span, .cta-btn span { color: var(--adv-ink) !important; } /* The legacy per-article header bar, and the bare `nav` rule that captures the site header on any page loading recodeai.css. */ nav { background: transparent !important; } .rnav-wrap ~ nav:not(.rnav), .rnav-wrap ~ .mast, .rnav-wrap ~ .util { display: none !important; } nav.a { background: rgba(7,19,28,.94) !important; border-bottom: 1px solid rgba(255,255,255,.14); } nav.a a { color: #d8e1df !important; } nav.a a:hover { color: var(--adv-mint) !important; } /* The legacy site footer. recode-v3-theme.css painted it navy and coloured its links for that ground; the token flip turned the background to paper and left the links light — 1.54:1 on every legacy page. Put the footer back on navy rather than re-colouring the links, so both footers match. */ footer, .site-footer, .foot-top, .foot-bot, .memo-band { background: var(--adv-ink) !important; color: #b4c5bf !important; border-color: rgba(255,255,255,.14) !important; } .footer-links a, .fcol a, .foot-bot a, .site-footer a { color: #b4c5bf !important; } .footer-links a:hover, .fcol a:hover, .foot-bot a:hover, .site-footer a:hover { color: var(--adv-mint) !important; } /* Making the legacy footer navy inverted the ground under its contents, so every child that inherited an ink colour went dark-on-dark — including the global heading rule in PART 2. Scope the light side explicitly. */ footer h1, footer h2, footer h3, footer h4, footer h5, footer h6, .foot-top h1, .foot-top h2, .foot-top h3, .foot-top h4, .foot-top h5, .fcol h5, .foot-brand .brand, .memo-band .sec-title, .fcol strong { color: #fff !important; } footer p, footer span, footer li, footer div, .foot-top p, .foot-top span, .foot-bot span, .foot-bot p { color: #b4c5bf !important; } footer .signoff, .foot-top .signoff, .memo-band .signoff { color: var(--adv-mint) !important; } .mast, .catnav, .util { background: var(--adv-paper-2) !important; border-color: var(--adv-line) !important; color: var(--v3-body) !important; } .thumb, .thumb.t-coral, .thumb.t-teal, .thumb.t-dark, .thumb.t-warm { background: repeating-linear-gradient(135deg, #dfe5e0 0 6px, #e9eee9 6px 12px) !important; border: 1px solid var(--adv-line); color: var(--v3-body); } .article-cta, .article-cta p, .article-cta span { color: var(--v3-body) !important; } .article-cta h2, .article-cta h3 { color: var(--adv-ink) !important; } /* memos/pm-role-ai-shift.html carries ~700 lines of its own inline CSS built for a dark ground: 24 selectors painting text with a surface token or the old warm on-dark literal, landing between 1.0:1 and 1.1:1 on paper. Enumerated from that page's