(or, for site-wide propagation, by adding "splash" as a class on the ). The dark nav and footer from base.html stay above and below, creating a deliberate magazine-spread frame around the cream document body. Token-driven. Edit the :root block to retune the whole site at once. ===================================================================== */ :root { /* Surfaces */ --bg: #F5F4F0; /* cream backdrop */ --bg-stamp: #ECEAE2; /* slightly darker for inset stamps */ --bg-warm: #EFEDE5; /* warmer cream — used for AI panel side */ --bg-cool: #F0EFE9; /* slightly cooler — REAL panel side */ /* Ink */ --ink: #0A0A0A; /* primary text + hairlines */ --ink-muted: #5C5C58; /* secondary metadata */ --hair: rgba(10, 10, 10, 0.12); /* The single industrial accent — Abloh's Caterpillar orange */ --accent: #FF5A1F; --accent-soft: #FFE2D6; /* Caution tape (pending data / WIP) */ --tape-y: #FFD400; --tape-k: #0A0A0A; /* Verdict palette (additive on cream) */ --vc-good: #DBEEDB; /* CONSTITUTIONAL */ --vc-warn: #FFF1C2; /* CONDITIONAL */ --vc-bad: #F8D2CC; /* UNCONSTITUTIONAL */ } /* ===================================================================== Wrapper — anywhere a page wants the Off-White treatment: OR

===================================================================== */ .splash { background: var(--bg); color: var(--ink); font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, monospace; } /* When applied at body level make sure full viewport gets cream */ body.splash { background: var(--bg); } /* ===================================================================== Typography ===================================================================== */ .splash .display { font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 900; letter-spacing: -0.025em; line-height: 0.92; } .splash .display-tight { letter-spacing: -0.03em; line-height: 0.88; } .splash .mono { font-variant-numeric: tabular-nums; } .splash .elapsed { color: var(--accent); font-weight: 700; } .splash .muted { color: var(--ink-muted); } .splash .accent { color: var(--accent); } /* Off-White "typeset quotes" — content rather than punctuation. Wrap any element in .quoted to get curly typeset quotes around its text. */ .splash .quoted::before { content: "“"; } .splash .quoted::after { content: "”"; } /* Tab-figure / SKU style — for bill numbers, granule IDs, citations. */ .splash .sku { font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; letter-spacing: 0.02em; text-transform: uppercase; } /* ===================================================================== Structural elements ===================================================================== */ .splash .hair { background: var(--ink); height: 1px; opacity: 0.85; } .splash .stamp { background: var(--bg-stamp); border: 1px solid var(--hair); } /* Yellow + black diagonal caution tape — "PENDING DATA PIPE" markers */ .splash .tape { background-image: repeating-linear-gradient( -45deg, var(--tape-y) 0, var(--tape-y) 14px, var(--tape-k) 14px, var(--tape-k) 28px ); height: 18px; } /* Branch numbering badge — rotated bordered square */ .splash .branch-x { width: 56px; height: 56px; border: 1.5px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800; transform: rotate(-3deg); } /* Wireframe SVG fill rule */ .splash svg.wire { color: var(--ink); } /* ===================================================================== Verdict + status badges ===================================================================== */ .splash .verdict-badge { display: inline-block; padding: 2px 8px; border: 1.5px solid var(--ink); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; } .splash .verdict-CONSTITUTIONAL { background: var(--vc-good); } .splash .verdict-CONDITIONAL { background: var(--vc-warn); } .splash .verdict-UNCONSTITUTIONAL { background: var(--vc-bad); } .splash .verdict-PASSES, .splash .verdict-accent { background: var(--accent); color: #FFF; border-color: var(--accent); } .splash .verdict-muted { background: var(--bg-stamp); } /* ===================================================================== Row-link interaction — used inside list panels ===================================================================== */ .splash .grid-rule > * + * { border-top: 1px solid var(--hair); } .splash a.row-link:hover .row-title { text-decoration: underline; } /* ===================================================================== THE COMPARISON GRID — the heart of the splash visual language. Each "comparison" is a 2-col grid: REAL ↔ AI side-by-side. On mobile collapses to stacked rows. ===================================================================== */ .splash .vs-grid { display: grid; grid-template-columns: 1fr; gap: 0; } @media (min-width: 900px) { .splash .vs-grid { grid-template-columns: 1fr 1fr; } } .splash .vs-cell { padding: 20px 22px; position: relative; } .splash .vs-cell-real { background: var(--bg-cool); } .splash .vs-cell-ai { background: var(--bg-warm); } /* The center divider is a literal "VS." marker — visible only on desktop */ .splash .vs-divider { position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--ink); display: none; } @media (min-width: 900px) { .splash .vs-divider { display: block; } } .splash .vs-label { font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 900; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); } .splash .vs-label-ai { color: var(--accent); } /* The big title inside each comparison cell */ .splash .vs-title { font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; font-size: 22px; margin-top: 8px; } @media (min-width: 1100px) { .splash .vs-title { font-size: 26px; } } /* Operative-provision pills inside the AI cell */ .splash .pill { display: inline-block; font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; font-size: 11px; padding: 2px 8px; margin: 2px 4px 2px 0; border: 1px solid var(--hair); background: rgba(255, 255, 255, 0.5); } .splash .pill-accent { border-color: var(--accent); background: var(--accent-soft); } /* ===================================================================== Counter strip — masthead metric row ===================================================================== */ .splash .counter-strip { display: flex; flex-wrap: wrap; gap: 0; margin-top: 20px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); } .splash .counter-cell { padding: 14px 18px; flex: 1 1 0; min-width: 180px; border-right: 1px solid var(--hair); } .splash .counter-cell:last-child { border-right: 0; } .splash .counter-num { font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 900; font-size: 32px; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; } .splash .counter-label { font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); margin-top: 6px; } /* ===================================================================== Marquee hero — comparison-of-the-day ===================================================================== */ .splash .marquee { border: 1.5px solid var(--ink); background: var(--bg); margin-top: 36px; } .splash .marquee-head { padding: 18px 22px; border-bottom: 1.5px solid var(--ink); display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; } .splash .marquee-eyebrow { font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; } .splash .marquee-title { font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 900; font-size: 36px; letter-spacing: -0.025em; line-height: 1; } /* ===================================================================== Detail document layout (for /solutions/{id} and similar) ===================================================================== */ .splash .doc { max-width: 760px; margin: 0 auto; } .splash .doc h2 { font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800; letter-spacing: -0.01em; font-size: 22px; margin-top: 32px; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--hair); } .splash .doc p { margin-top: 10px; line-height: 1.6; font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; } .splash .doc .spec-table { display: grid; grid-template-columns: 1fr 2fr; gap: 0; border: 1px solid var(--hair); margin-top: 8px; } .splash .doc .spec-key { padding: 8px 12px; background: var(--bg-stamp); border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-muted); } .splash .doc .spec-val { padding: 8px 12px; border-bottom: 1px solid var(--hair); } .splash .doc .spec-key:nth-last-child(2), .splash .doc .spec-val:last-child { border-bottom: 0; }