/* ib-shell.css — the page canvas, in ONE place. --------------------------------------------------------------------------- THE POINT OF THIS FILE: changing the site background is a one-line edit. Every static shell (188 of them: calculators, guides, steroid spokes, info pages, homepage) used to declare its own `--bg`. They had drifted to three different light values (#f0f0f4 / #fafafb / #f1f2f5). They now declare none — the value lives here and only here. Named `ib-*.css` on purpose: next.config.ts applies `Cache-Control: no-cache, must-revalidate` to `/:file(ib-[^/]+\.css)`. Rename it to anything else and deploys will serve a stale stylesheet. Linked in BEFORE ib-nav.css. That ordering is load-bearing: ib-nav.css owns `.ib-dropdown-menu`, and anything here that ties on specificity must lose to it, not win. No flash: a stylesheet is render-blocking, so the browser waits rather than painting the wrong colour. Verified by serving this sheet with a 2.5s delay and sampling the first paint — no white frame. The wait itself is already paid for: ib-nav.css and ib-chat.css are fetched in parallel on the same connection with the same cache policy. The 40px grid backdrop and the two radial glows that used to sit on body::before / body::after were removed from all 188 pages. Do not reintroduce a backdrop here: a z-index:-1 pseudo-element joins the ROOT stacking context and paints UNDERNEATH body's own background box, so an opaque body silently erases it — which is exactly how the grid became invisible in light mode without anyone noticing. Embeds are unaffected: app.js sets `background: transparent` inline on and when window.__embed, and an inline style beats this sheet. */ /* ── The canvas ───────────────────────────────────────────────────────────── */ /* CHANGE THE BACKGROUND HERE — one line per theme. DARK is the base, LIGHT is the [data-theme="light"] override. That order is NOT a style preference, it is required: - The 188 static shells set data-theme synchronously in , so either polarity works for them. - The Next.js routes (/account, /admin, /community, /partner/blog) render with NO data-theme attribute until ThemeSync runs on the client. With light as the base they painted a LIGHT canvas under globals.css's dark-default text tokens — light-on-light, unreadable, until hydration. Dark-base matches what globals.css (:root = dark) and the old shells already assumed. Verified: /community with no data-theme now resolves #0e0e10. */ :root { --bg: #0e0e10; } html[data-theme="light"] { --bg: #fafafb; } /* ── Universal primitives ───────────────────────────────────────────────────── Each of these was byte-identical in every file that carried it (verified by hashing the normalised rule text, not by inspection): @font-face 188/188 files, 1 variant box-sizing 46/46 non-guide files (guides get it from ib-guide.css) #root:empty 34/34 files that mount the React calculator NOT hoisted here, on purpose: html,body{...} 45 identical + cycle-plotter (which only sets min-height). A global `html,body{color:var(--white)}` would tie on specificity with cycle-plotter's own `body{color:var(--cp-text)}` and, loading later, WIN — repainting its text. :root tokens 4 variants across 46 files (--border/--border2 alphas differ between the calc and guide families). Needs reconciliation before it can be shared. */ @font-face{font-family:'Inter Fallback';src:local('Arial');ascent-override:90.00%;descent-override:22.43%;line-gap-override:0.00%;size-adjust:107.12%} *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── The content column ─────────────────────────────────────────────────────── ONE reading measure for every page. It had six: guides 760px, calculators 720px, info pages 660px, the two index pages 980px, reviews 820px, cycle-plotter 860px — with three different top paddings. 880px, not 760px. `.static-page` is NOT the guide-article measure (guides render their prose inside .guide-main-content and never carry this class) — it is the crawlable SEO block that sits BELOW the calculator, in a page whose desktop layout already gives up 280px to the rail. At 760px that block read as a narrow ribbon stranded in a wide page. 880px is ~95 characters at the 15px body size: still inside the readable range, and it uses the space the rail leaves. `background: transparent` came from the calc pages, where .static-page is the SEO prose BELOW the React #root; it is inert everywhere else. Lives in ib-shell.css because all 186 pages link it, and it loads AFTER ib-guide.css / ib-static.css, so this is the value that wins. `.embed-mode .static-page` (0,2,0) in ib-static.css still overrides it in embeds. */ .static-page { max-width: 880px; margin: 0 auto; padding: 40px 20px 80px; background: transparent; } /* The mobile side-padding MUST live here, after the shorthand above. It used to sit in two places at two breakpoints — `calculators` at 720px and ib-guide.css at 640px — both of which load BEFORE this sheet. A `padding` shorthand here beats their `padding-left/right` on source order, so leaving them where they were silently widened the gutters on mobile. Unified to 767px, the site breakpoint. */ @media (max-width: 767px) { .static-page { padding-left: 16px; padding-right: 16px; } } /* Pre-hydration loader. `content` keeps the \2026 ellipsis escape. */ #root:empty{min-height:100vh;display:flex;align-items:center;justify-content:center} #root:empty::after{content:'Loading calculator\2026';font-family:var(--mono,monospace);font-size:13px;color:rgba(240,240,242,0.4)} [data-theme="light"] #root:empty::after{color:rgba(20,20,28,0.4)} html, body { background: var(--bg); } /* ── The site footer ────────────────────────────────────────────────────────── ONE footer, one definition. The markup is stamped into all 186 shells by scripts/gen-footer.mjs (run in prebuild); the look is here and ONLY here. Deliberately theme-INDEPENDENT: the footer is a Deep Teal slab (#075e56, the `teal-numeral` token in DESIGN.md) in both light and night mode, so it reads as the base of the instrument rather than as more page. Because the slab never changes, its text never needs to: every colour below is a white alpha, and there are no [data-theme] or .embed-light branches to keep in sync. If you find one, it is a leftover — delete it, don't extend it. Contrast on #075e56: 0.82-alpha white = 5.9:1, 0.62 = 3.4:1 (large/secondary text only), the .ib-footer-col-head at 0.66 is 10px uppercase tracking — treat 4.5:1 as the floor for anything a user has to READ, which the links and body copy clear. Do not drop the link alpha below 0.8. The brand mark is teal on teal here, so it is repainted white via currentColor — that is why the stamped