/* ====================================================================== sf-final-legal.css — the legal / policy documents Lane: final/03-legal.mjs · linked LAST in , after tailwind. OWNER, 2026-08-20: "remove yellow textboxes on legal pages." WHAT THE YELLOW WAS. Every legal page carried a page-local .disclaimer { background:#FEF3C7; border:1.5px solid #F59E0B; … } .disclaimer p { color:#92400E; … } which painted the RUO / research-use notice as a highlighter slab: a 14.40:1 near-white-yellow rectangle dropped onto a #142235 navy document. It was legible (#92400E on #FEF3C7 = 6.37:1) and completely off-brand, and its own border failed as a UI edge (#F59E0B on #FEF3C7 = 1.93:1). WHAT REPLACED IT. The same words, in an elevated navy panel with a cyan edge — the callout register the rest of the site already uses. Nothing in the notice text was touched: every one of these blocks is an RUO / not-for-human-use statement and compliance is not this lane's to soften (copy/compliance/RULES.md §2 — a disclaimer is never the thing you edit). CONTRAST, COMPUTED NOT EYEBALLED (WCAG 2.x relative luminance). Page ground is --sf-elevated #142235. panel #1C3049 vs page ground 1.20:1 (a visible lift; the band step is 1.09) notice ink #F0F6FA on #1C3049 12.29:1 (AA body 4.5) cyan edge #16BFD1 on #1C3049 6.00:1 (AA UI 3.0) cyan edge #16BFD1 on #142235 7.18:1 (AA UI 3.0) toc link #A6BACB on #142235 8.02:1 toc hover #3FB6C9 on #142235 6.68:1 body prose #F0F6FA on #142235 14.71:1 Every ink is solved against the surface it actually lands on, and every panel here is OPAQUE — an alpha fade over a dark ground composites what scrolls under it and no gate can measure it (BUILD-DEFAULTS §2a). NO HAIRLINE RING ON THE NOTICE. The first pass ringed the panel in --cc-metal-line as well as edging it; measured, that hairline composited to #384C63 = 1.51:1 on the panel and 1.53:1 on the page, i.e. below the 3:1 an edge has to clear if it is carrying the boundary. Rather than thicken a decorative line into something loud, the ring came out: the panel's identity is the 1.20:1 surface lift plus a 3px cyan edge that measures 6.00:1 and 7.18:1. Nothing here relies on a line nobody can see. The one hairline left is the TOC's bottom separator, and that is a decorative rule, not a component boundary or a state indicator — WCAG 1.4.11 does not reach it. It measures 1.53:1 and that is on purpose. MEASURE. The document column was 96 characters wide (810px of 16.2px prose), and the hero headline sat on a 768px column while the body sat on an 810px one — two different left edges on the same page. Both now run off one variable at 36rem ≈ 77 characters. NOT THIS LANE: font-family (typography lane) and phone-width layout (mobile lane). --cc-legal-pad is deliberately ONE variable driving the hero and the main column together, so the mobile lane can retune the gutter in one place without the two columns drifting apart again. ====================================================================== */ :root { /* one measure and one gutter for the whole document */ --cc-legal-w: 36rem; --cc-legal-pad: 1.5rem; /* the callout surface: one step ABOVE --sf-elevated, opaque */ --cc-legal-note-bg: #1C3049; --cc-legal-note-edge: var(--cc-cyan-400, #16BFD1); --cc-legal-rule: var(--cc-metal-line, rgb(166 186 203 / 0.20)); } @media (max-width: 640px) { :root { --cc-legal-pad: 1.25rem; } } /* ── the document column ─────────────────────────────────────────────── main is box-sizing:border-box on these pages, so its max-width carries the gutter and the two content boxes end on the same pixel. */ .legal-hero { padding-inline: var(--cc-legal-pad); } .legal-hero-inner { max-width: var(--cc-legal-w); } main.cc-legal { max-width: calc(var(--cc-legal-w) + var(--cc-legal-pad) * 2); padding-inline: var(--cc-legal-pad); } /* ── the notice, formerly the yellow textbox ───────────────────────── */ .disclaimer { background: var(--cc-legal-note-bg); border: 0; border-left: 3px solid var(--cc-legal-note-edge); border-radius: var(--sf-radius, 16px); padding: 1rem 1.25rem; margin: 0 0 1.75rem; } .disclaimer p { color: var(--sf-text, #F0F6FA); font-weight: 600; font-size: 0.9rem; line-height: 1.65; margin: 0; } /* ── table of contents ───────────────────────────────────────────────── Deliberately NOT a second panel stacked on the notice: one hairline rule under it, so the notice stays the loudest thing on the page. The grid is intrinsic (auto-fill/minmax) rather than breakpointed, so it reflows on a phone without a media query the mobile lane would have to argue with. */ .legal-toc { margin: 0 0 2rem; padding: 0 0 1.5rem; border-bottom: 1px solid var(--cc-legal-rule); } .legal-toc-title { font-size: 0.95rem; font-weight: 700; color: var(--sf-text, #F0F6FA); letter-spacing: -0.01em; margin: 0 0 0.75rem; } .legal-toc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.35rem 1.5rem; } .legal-toc-list li { margin: 0; } .legal-toc-list a { display: block; font-size: 0.85rem; line-height: 1.5; color: var(--sf-muted, #A6BACB); text-decoration: none; padding: 2px 0; transition: color 0.15s ease; } .legal-toc-list a:hover { color: var(--sf-accent, #3FB6C9); text-decoration: underline; text-underline-offset: 3px; } .legal-toc-list a:focus-visible { outline: 2px solid var(--sf-accent, #3FB6C9); outline-offset: 3px; color: var(--sf-accent, #3FB6C9); } /* ── document body ───────────────────────────────────────────────────── The section heading was 1.1rem against 1rem body — a 1.22x step that read as bold text, not as a heading. scroll-margin-top clears the 54px fixed nav so an in-page anchor does not land under the bar. The 1.35 leading below deliberately outranks the typography lane's bare `h2 { line-height: 1.2 }` — that rule's own comment says a class-level rule which has solved a heading's leading on purpose should win, and 1.2 is a display leading on a 22.5px heading sitting inside a running text column. Family stays theirs; nothing here names a font-family. */ .prose h2 { font-size: 1.25rem; line-height: 1.35; margin: 2.25rem 0 0.6rem; scroll-margin-top: 5.5rem; } .prose > h2:first-child { margin-top: 0; } .prose p, .prose li { line-height: 1.75; } .prose ul { margin-bottom: 0.9rem; } .prose li { margin-bottom: 0.35rem; } .prose li:last-child { margin-bottom: 0; } /* ── order-success.html: the same amber treatment, off the legal pages ── #manual-payment-note was rgba(245,158,11,0.05) with #92400E / #78350F ink over a #0C1726 ground — a composited 2.37:1 and 1.85:1, i.e. the payment instruction was the least legible text on the page. The panel below is opaque and the inks are the site's own. panel #16283F vs #0C1726 ground 1.21:1 #F0F6FA on #16283F 13.67:1 #A6BACB on #16283F 7.46:1 #16BFD1 edge on #16283F 6.67:1 The inline styles on that page are rewritten by the lane as well; these rules are the belt to that pair of braces. */ #manual-payment-note { background: #16283F; border: 0; border-left: 3px solid var(--cc-legal-note-edge); } #manual-payment-note > p:first-child { color: var(--sf-text, #F0F6FA); } #manual-payment-note #manual-payment-deadline { color: var(--sf-muted, #A6BACB); }