/* ============================================================================ bto-about-grounds.css — About's grounds + panel motion, brought onto the site's language. Founder, 2026-08-06: "the background color and the panel interaction like the parallax effect and all of that does not match with our website if you see in home page and service page". Loaded LAST on about.html, after bto-static.css / bto-about.css / palette.css / site-unify.css / bto-type.css / bto-footer.css. Linked by about.html ONLY. contact.html, founder.html and work.html do not link it and are untouched — which is why nothing here edits a shared sheet. ── WHAT WAS ACTUALLY WRONG (measured headless at 1440, not eyeballed) ────── The page was on a RETIRED palette rhythm, not a broken one. HOME ink #13181B → navy #003A6C → cream → navy → ink → cream → ink SERVICES ink → cream → navy → ink → navy → grey → ink ABOUT cream → ink → cream → ink → GREY → cream → ink → cream → GREY → ink → GREY → ink 1. ZERO NAVY. #003A6C is the site's signature ground and About never touched it. Every other page opens dark; About opened on cream. 2. THREE #CCD5DA PANELS. That cold grey was DELIBERATELY RETIRED as a panel ground on home — bto-spylt/src/panel2.css §1 records the call in its own words: cream on #CCD5DA is ~1.2:1, so the fill treatment is invisible on it and keeping the surface means abandoning the treatment. About was the last page still shipping it. ── §1 · THE NAVY TOKEN, AND WHY IT IS NOT A HARDCODE ─────────────────────── 🔴 THERE IS NO NAVY TOKEN IN palette.css, AND #003A6C IS NOT A CONSTANT. `--bg-inset-dark` is #13181B in LIGHT and BECOMES #003A6C in DARK (palette.css:169 vs :226). So a hardcoded `background:#003A6C` would collapse onto the `--dark` panels the moment the header's theme disc is pressed — eleven panels, two grounds, alternation gone. The toggle is real: Mokko's ms_theme_mode() writes data-theme onto and persists it (mokko/assets/js/main.js:963-1003). So the navy ground is a token with a value PER THEME, chosen to keep three distinct grounds in both: theme canvas navy (this file) dark light #F0EEEB #003A6C #13181B dark #13181B #0B263B #003A6C In dark the roles rotate rather than collide — #0B263B is palette.css's own dark-theme `--bg-panel2` (:211), not a colour invented here. CONTRAST, computed not assumed, for cream/mute/amber on #003A6C: --fg-on-dark #F0EEEB 9.95:1 (palette.css:191 states this) --fg-on-dark-mute #B7B6B5 5.69:1 (palette.css:192 states this) --fill-accent #FFBF65 7.08:1 (computed here; eyebrows + slab) All clear AA at body size. ========================================================================== */ :root, [data-theme], [data-theme="light"] { --bto-navy: #003A6C; } [data-theme="dark"] { --bto-navy: #0B263B; } /* ========================================================================== §2 · THE NAVY PANEL ========================================================================== Mirrors bto-static.css:265-276's `--dark` block rather than editing it — that file is shared with contact.html, founder.html and work.html, and none of them asked for a navy ground. `background` alone is not enough: `.bto-panel::before` (bto-static.css:228) is the full-bleed layer and it paints `background: inherit`, so the ground arrives at the viewport edges for free. */ .bto-static .bto-panel--navy { background: var(--bto-navy); color: var(--fg-on-dark); } .bto-static .bto-panel--navy .content__title, .bto-static .bto-panel--navy .svc-sec-head, .bto-static .bto-panel--navy .page-header__title { color: var(--fg-on-dark); } .bto-static .bto-panel--navy p, .bto-static .bto-panel--navy .bto-row__line, .bto-static .bto-panel--navy .bto-stat__label { color: var(--fg-on-dark-mute); } .bto-static .bto-panel--navy .svc-sec-eyebrow { color: var(--fill-accent); } .bto-static .bto-panel--navy .bto-stats, .bto-static .bto-panel--navy .bto-stats > li { border-top-color: var(--fg-on-dark); } .bto-static .bto-panel--navy .bto-stat__amount { color: var(--fg-on-dark); } .bto-static .bto-panel--navy a { color: var(--fg-on-dark); } /* 🔴 THE LINK RULE ABOVE EATS THE AMBER CTA, AND THIS PUTS IT BACK. `.bto-static .p2-cta--primary` sets `--fg-on-accent` (ink) at (0,2,0); the `a` rule is (0,2,1) and beats it, so "Send the idea" came out CREAM ON AMBER — measured 1.37:1, effectively unreadable. The bug is inherited from bto-static.css:276's identical `--dark` rule and simply never fired before: #about-close is the page's only panel with a CTA pair and it was GROUND B (#CCD5DA) until this pass, where `a` was never restyled. (0,3,0) — three classes beats two-classes-plus-a-type, no !important. The GHOST button needs nothing: it is `color: currentColor` (cream, correct on navy) over a `--bg-hairline` border that is polar at .55 alpha and draws cleanly on navy — which is also why bto-about.css:119's ink-border workaround for GROUND B is not ported here. */ .bto-static .bto-panel--navy .p2-cta--primary { color: var(--fg-on-accent); } /* THE ROW LABEL IS THE ONE THING THE `--dark` BLOCK GETS WRONG, so it is not copied. `.bto-static .bto-row__label` is (0,2,0) and sets `--fg-ink`; the inherited `.bto-panel--dark p` rule is (0,2,1) and beats it, which flattens label and line onto the SAME mute grey. On light grounds the label is the strong half of the pair (ink vs body). Restored here for navy — it is the left column of "Who is on it" and "What we don't take on", and without the step the rows read as one undifferentiated block. */ .bto-static .bto-panel--navy .bto-row__label { color: var(--fg-on-dark); } /* 🔴 TWO MORE `--dark` RULES THAT NEEDED `--navy` TWINS, both found by a full-page contrast sweep on founder.html after its grey panels went navy — neither is in bto-static.css's on-dark block (:265-276), so neither was caught when §2 above was written against about.html. ① BARE `

`. The block covers `p`, `.bto-row__line` and `.bto-stat__label` but not list items, so `.bto-list li` inherited `--fg-ink` and rendered ink-on-navy: measured 1.12:1 on founder's "Elsewhere" links. ② THE WORD SCRUB'S SETTLED COLOUR. reveals.js's M4 mixes toward `--fg-ink` on light grounds; bto-static.css:526 already inverts that to `--fg-on-dark` for `.bto-panel--dark`, and its own comment records that the on-dark pair "clear[s] AA on ink AND on navy (8.83/5.69 and 15.44/9.95)". So the endpoints were already navy-safe — only the SELECTOR was missing, and without it 44 words of body copy settled at 1.82:1. ⚠ It settles to that colour, so scrolling onto it does not fix it; a probe that only samples at scroll 0 reads this as "not revealed yet" and passes it. */ .bto-static .bto-panel--navy li { color: var(--fg-on-dark-mute); } .bto-static .bto-panel--navy .bto-scrub .bto-rv-w { color: color-mix(in srgb, var(--fg-on-dark) var(--rv-lit, 100%), var(--fg-on-dark-mute)); } @media (prefers-reduced-motion: reduce) { .bto-static .bto-panel--navy .bto-scrub { color: var(--fg-on-dark); } } /* ── THE INK HERO ────────────────────────────────────────────────────────── `.page-header-content` is not a `.bto-static__sec`, so it takes the ground modifier without the section padding rules. 🔴 THE H1 DOES NOT INHERIT THE PANEL'S COLOUR, AND THIS RULE IS THE WHOLE REASON THE HERO IS READABLE. site-unify.css:799 declares `body .page-header-content .page-header__title { color: var(--u-ink) }` at (0,2,1), which beats the panel's inherited `--fg-on-dark` — inheritance loses to any declaration, at any specificity. Flipping the hero to a dark ground therefore painted ink type on an ink ground: measured 1.00:1, i.e. an invisible headline, and NOTHING in bto-static.css or bto-about.css covers `.page-header__title` (both only reach `.content__title`). Caught by the contrast probe, not by reading. (0,3,1) — one type + three classes, all on elements that already carry them, so it clears (0,2,1) without !important. The panel and the page-header ARE the same element; that is not a typo. */ body.bto-static .page-header-content.bto-panel--dark .page-header__title, body.bto-static .page-header-content.bto-panel--navy .page-header__title { color: var(--fg-on-dark); } /* `.bto-static__lead` needs no equivalent: it declares `--fg-lead` at (0,2,0) and bto-static.css:269's `.bto-static .bto-panel--dark p` beats it at (0,2,1). Measured 8.83:1 on ink. */ /* ========================================================================== §3 · PANEL LIFT + CONTENT PARALLAX — REMOVED 2026-08-06, SAME DAY ========================================================================== Founder, hours after asking for it: "even the card animation that you have made scrap that, make it exactly like the master production house about page." MPH's about page has no panel-over-panel arrival and no per-element parallax — it is a flat scroll with a short fade-up. So the lift, the negative-margin overlap, the corner-radius landing, the `top`-based variant for the sticky timeline and the three parallax bands all came out, together with bto-js/about-panels.js. WHAT STAYS: §1 and §2 above — the navy token and the navy panel. Those are the GROUNDS, which the founder kept ("our about page almost looks like our website so that is good"). The MPH layout, type scale and spacing system that replaced this lives in bto-css/bto-about-mph.css, loaded after this file. ========================================================================== */