/* ===================================================================== HAWORTH REPORT TEMPLATE — formalized system - Petrol Navy primary, clean white + cool-gray bands (no cream) - Franklin Gothic display + body; labels in tracked sans (mono optional) - One disciplined brand accent (tweakable), fixed semantic data colors ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wdth,wght@75..100,400..700&family=Crimson+Pro:wght@400;500;600;700&display=swap'); :root { /* Type families */ --font-display: "Google Sans Flex", "Franklin Gothic Demi", "Franklin Gothic Medium", "ITC Franklin Gothic Std Demi", "Helvetica Neue", Arial, sans-serif; --font-body: "Google Sans Flex", "Franklin Gothic Book", "Franklin Gothic Medium Book", "ITC Franklin Gothic Std Book", "Helvetica Neue", Arial, sans-serif; /* Label font — sans by default; tweak swaps to mono on */ --font-label: var(--font-body); --font-mono: "Google Sans Flex", ui-sans-serif, system-ui, sans-serif; --font-serif: "Crimson Pro", Georgia, "Times New Roman", serif; /* Brand neutrals */ --navy: #001D34; /* Petrol — primary dark */ --navy-700: #103551; --ink: #001D34; /* primary text */ --ink-2: #36506A; /* secondary text */ --ink-3: #5E6E7C; /* tertiary / meta — darkened from #6B7C8B for WCAG AA 4.5:1 on white & band */ --white: #FFFFFF; --paper: #FFFFFF; /* base background */ --band: #F2F4F6; /* light cool-gray section band */ --band-2: #E7EBEE; --line: rgba(0,29,52,0.13); --line-strong: rgba(0,29,52,0.30); --map-nd: rgba(0,29,52,0.14); /* choropleth no-data fill; flips on dark so no-data regions stay legible */ /* On-dark */ --on-dark: #EAF1F6; --on-dark-strong: #FFFFFF; --on-dark-muted: #8DA6BC; --on-dark-soft: rgba(234,241,246,0.80); --on-dark-line: rgba(234,241,246,0.16); /* ---- Official Haworth palette (Illustration Brand Guide) ---- */ --gray-tint: #E6E7E8; --cream-tint: #F2EFDE; --bright-cream: #E7DFB7; --dark-blue: #004A78; --dark-green: #006B66; --dark-red: #A12A3F; --dark-terra: #DA5B2B; --bright-blue: #00A2E1; --bright-green: #65C296; --bright-red: #E51938; --bright-orange: #F58233; /* Brand accent — overridden inline by Tweaks. Default: Bright Blue / Dark Blue */ --accent: #00A2E1; --accent-ink: #004A78; /* readable accent text on light (Dark Blue) */ /* Fixed semantic data palette (charts, deltas, severity) — official hues */ --pos: #006B66; /* up / good / on-track — Dark Green */ --neg: #E51938; /* down / risk / off-track — Bright Red */ --warn: #F58233; /* watch / caution — Bright Orange */ --hold: #DA5B2B; /* base / hold — Dark Terracotta */ --info: #00A2E1; /* informational — Bright Blue */ /* Type scale */ --display-xl: clamp(58px, 6.6vw, 96px); --display-l: clamp(44px, 5.0vw, 70px); --display-m: clamp(34px, 3.8vw, 52px); --display-s: clamp(26px, 2.6vw, 38px); --deck: 19px; --body: 16px; --eyebrow: 11.5px; --label: 11px; } *,*::before,*::after { margin:0; padding:0; box-sizing:border-box; } html { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } html, body { overflow-x: clip; } body { font-family: var(--font-body); background: var(--paper); color: var(--ink); line-height: 1.55; } :focus { outline: none; } :focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; } .section.dark :focus-visible { outline-color: var(--on-dark-strong); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ---------- Layout ---------- */ .page-wrap { width:100%; } .container { max-width:1240px; margin:0 auto; padding:0 64px; } /* ---------- Top bar ---------- */ .topbar-wrap { position:sticky; top:0; z-index:100; width:100%; background:var(--navy); border-bottom:1px solid var(--on-dark-line); } .topbar { display:flex; justify-content:space-between; align-items:center; gap:32px; padding:20px 64px; max-width:1240px; margin:0 auto; font-family:var(--font-label); font-size:11.5px; color:var(--on-dark-muted); letter-spacing:0.3px; } .topbar-logo { display:flex; align-items:center; gap:14px; flex-shrink:0; } .topbar-logo svg { display:block; height:17px; width:auto; } .topbar-logo .logo-rule { width:1px; height:18px; background:var(--on-dark-line); } .topbar-logo .logo-meta { font-family:var(--font-label); font-size:10px; color:var(--on-dark-muted); letter-spacing:1.4px; text-transform:uppercase; font-weight:600; } .topbar-chips { display:flex; gap:26px; flex:1; justify-content:center; } .topbar-chips a { color:var(--on-dark-muted); text-decoration:none; transition:color .2s; font-weight:600; letter-spacing:0.4px; } .topbar-chips a:hover { color:var(--on-dark-strong); } .topbar-version { flex-shrink:0; font-weight:600; color:var(--on-dark-muted); letter-spacing:0.5px; display:flex; align-items:center; gap:16px; } .topbar-back { color:var(--on-dark-strong); text-decoration:none; font-weight:600; letter-spacing:0.3px; white-space:nowrap; } .topbar-back:hover { color:var(--accent); } .topbar-version .tv-label { color:var(--on-dark-muted); } /* ---------- Eyebrow ---------- */ .eyebrow { display:flex; align-items:center; gap:13px; font-family:var(--font-label); font-size:var(--eyebrow); font-weight:700; text-transform:uppercase; letter-spacing:1.8px; color:var(--ink-3); margin-bottom:34px; } .eyebrow::before { content:''; flex-shrink:0; width:22px; height:3px; background:var(--accent); } .eyebrow::after { content:''; width:240px; height:1px; background:var(--line); margin-left:6px; } .eyebrow.full::after { flex-grow:1; width:auto; } .eyebrow.dark { color:var(--on-dark-muted); } .eyebrow.dark::after { background:var(--on-dark-line); } /* ---------- Display type ---------- */ /* Brand hierarchy: display-xl = Founders Bold XCnd (one most-important item on the page); display-l/m/s = Founders Medium (titles in publications, brochures, white papers). */ .display-xl { font-family:var(--font-display); font-size:var(--display-xl); font-weight:700; font-stretch:80%; line-height:1.02; letter-spacing:-0.01em; color:var(--ink); } .display-l { font-family:var(--font-display); font-size:var(--display-l); font-weight:700; font-stretch:80%; line-height:1.05; letter-spacing:-0.01em; color:var(--ink); } .display-m { font-family:var(--font-display); font-size:var(--display-m); font-weight:500; font-stretch:100%; line-height:1.12; letter-spacing:-0.005em; color:var(--ink); } .display-s { font-family:var(--font-display); font-size:var(--display-s); font-weight:500; font-stretch:100%; line-height:1.2; letter-spacing:-0.003em; color:var(--ink); } .display-xl.dark, .display-l.dark, .display-m.dark, .display-s.dark { color:var(--on-dark-strong); } /* ---------- Kicker / deck / body ---------- */ .kicker-deck { font-family:var(--font-label); font-weight:600; font-size:13.5px; text-transform:uppercase; letter-spacing:2px; color:var(--ink-2); margin-bottom:18px; } .kicker-deck.dark { color:var(--on-dark-muted); } .deck { font-family:var(--font-serif); font-size:var(--deck); line-height:1.55; color:var(--ink-2); max-width:760px; } .deck.dark { color:var(--on-dark); } .deck u, .deck .accent { text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:5px; font-weight:600; color:var(--ink); } .deck.dark u, .deck.dark .accent { color:var(--on-dark-strong); } .body { font-family:var(--font-serif); font-size:var(--body); line-height:1.68; color:var(--ink-2); } .body.dark { color:var(--on-dark); } .body u, .body .accent { text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:1.5px; text-underline-offset:4px; color:var(--ink); font-weight:500; } /* ---------- Pull quote ---------- */ .pull-quote { margin:54px 0; padding:8px 0 8px 34px; border-left:3px solid var(--accent); font-family:var(--font-serif); font-weight:500; font-size:clamp(24px,2.8vw,36px); line-height:1.3; letter-spacing:0; color:var(--ink); max-width:840px; } .pull-quote .attribution { display:block; margin-top:18px; font-family:var(--font-label); font-weight:600; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-3); } /* ---------- Sections ---------- */ .section { padding:118px 0; position:relative; } .section.compact { padding:84px 0; } .section.dark { background:var(--navy); color:var(--on-dark); } .section.gray { background:var(--band); } .section.dark .display-xl,.section.dark .display-l,.section.dark .display-m,.section.dark .display-s { color:var(--on-dark-strong); } .section.dark .deck,.section.dark .body { color:var(--on-dark); } /* shared content indent so body aligns under eyebrow text */ .section > .container > *:not(.eyebrow) { padding-left:28px; } .section > .container > .eyebrow { padding-left:0; } @media (max-width:760px){ .section > .container > *:not(.eyebrow){ padding-left:0; } } .hero-content { padding-left:0 !important; } /* ---------- KPI grid (At a glance) ---------- */ .metrics-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:54px; border-top:1px solid var(--line); border-left:1px solid var(--line); } .metric-tile { padding:30px 30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); } .metric-tile .label { font-family:var(--font-label); font-size:var(--label); font-weight:700; text-transform:uppercase; letter-spacing:1.4px; color:var(--ink-3); margin-bottom:16px; } .metric-tile .value { font-family:var(--font-display); font-size:42px; font-weight:600; color:var(--ink); letter-spacing:-1.4px; line-height:1; margin-bottom:12px; } .metric-tile .value .unit { font-family:var(--font-display); font-size:19px; color:var(--ink); margin-left:4px; letter-spacing:-0.5px; } .metric-tile .delta { font-family:var(--font-label); font-size:12px; color:var(--ink-3); letter-spacing:0.2px; display:flex; align-items:center; gap:7px; } .metric-tile .delta::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--ink-3); flex-shrink:0; } .metric-tile .delta.warn { color:var(--neg); } .metric-tile .delta.warn::before { background:var(--neg); } .metric-tile .delta.good { color:var(--pos); } .metric-tile .delta.good::before { background:var(--pos); } .section.gray .metric-tile { border-color:rgba(0,29,52,0.16); } .section.gray .metrics-grid { border-color:rgba(0,29,52,0.16); } /* ---------- Chart frame ---------- */ .chart-frame { margin-top:54px; padding-top:34px; border-top:1px solid var(--line); } .chart-frame.dark { border-top-color:var(--on-dark-line); } .chart-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; gap:24px; flex-wrap:wrap; } .chart-head .title { font-family:var(--font-display); font-weight:600; font-size:24px; letter-spacing:-0.4px; color:var(--ink); } .chart-frame.dark .chart-head .title { color:var(--on-dark-strong); } .chart-head .fig { font-family:var(--font-label); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:1.4px; color:var(--ink-3); } .chart-frame.dark .chart-head .fig { color:var(--on-dark-muted); } .chart-sub { font-family:var(--font-serif); font-size:15px; line-height:1.55; color:var(--ink-2); max-width:720px; margin-bottom:26px; } .chart-frame.dark .chart-sub { color:var(--on-dark-soft); } .chart-legend { display:flex; flex-wrap:wrap; gap:22px; margin-bottom:18px; font-family:var(--font-label); font-size:11.5px; font-weight:600; letter-spacing:0.3px; color:var(--ink-2); } .chart-frame.dark .chart-legend { color:var(--on-dark-muted); } .chart-legend .item { display:flex; align-items:center; gap:8px; } .chart-legend .swatch { width:14px; height:3px; } .chart-canvas-wrap { position:relative; width:100%; } .chart-note { margin-top:18px; padding-top:14px; border-top:1px dashed var(--line); font-family:var(--font-label); font-size:11px; letter-spacing:0.2px; color:var(--ink-3); } .chart-frame.dark .chart-note { border-top-color:var(--on-dark-line); color:var(--on-dark-muted); } /* Figure caption under a .diagram. NOT .chart-note's treatment, despite the similar position: .chart-note divides a note from an UNFRAMED canvas, so it earns a dashed hairline, whereas .diagram is already a bordered, rounded card and a second rule under it reads as a stray line. A figcap is also a prose sentence ("Fig. 01 — …"), which wants --font-body at reading size and a measure, not a tracked 11px label. These are exactly the values templates/arch-report.html shipped inline from the start, and every architecture deliverable built to date renders them. They live here now so the template needs no local override and report-mode pages inherit the same caption. No new brand values — --font-body, --ink-3, --on-dark-muted. SKILL.md instructs authors to caption every diagram with .figcap; before 2026-08-06 nothing outside that template defined it. */ .figcap { font-family:var(--font-body); font-size:12.5px; color:var(--ink-3); margin-top:14px; max-width:920px; } .section.dark .figcap { color:var(--on-dark-muted); } /* ---------- Data tables (signal / scenario) ---------- */ .data-table { width:100%; border-collapse:collapse; margin-top:32px; } .data-table th { font-family:var(--font-label); font-size:10.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-3); text-align:left; padding:14px 16px 14px 0; border-bottom:2px solid var(--ink); } .data-table th.right { text-align:right; padding-right:0; } .data-table td { padding:18px 16px 18px 0; border-bottom:1px solid var(--line); vertical-align:middle; font-size:15px; color:var(--ink-2); } .data-table td.right { text-align:right; padding-right:0; font-variant-numeric:tabular-nums; } .data-table .name { display:inline-flex; align-items:center; gap:10px; font-weight:600; color:var(--ink); } .data-table .dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; } .section.gray .data-table td { border-bottom-color:rgba(0,29,52,0.16); } /* status pill */ .pill { display:inline-block; padding:3px 11px; border-radius:100px; font-family:var(--font-label); font-size:10.5px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; } .pill.high { background:rgba(31,138,91,0.14); color:#15613f; } .pill.medium { background:rgba(224,169,59,0.18); color:#7a5a14; } .pill.low { background:rgba(229,25,56,0.12); color:#a01425; } /* ---------- Matrix table (severity bars) ---------- */ .matrix-table { width:100%; border-collapse:collapse; margin-top:46px; } .matrix-table th { font-family:var(--font-label); font-size:10.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-3); text-align:left; padding:16px 18px 16px 0; border-bottom:2px solid var(--ink); } .matrix-table th.right { text-align:right; padding-right:0; } .matrix-table td { font-family:var(--font-serif); padding:24px 18px 24px 0; border-bottom:1px solid var(--line); vertical-align:top; font-size:15px; line-height:1.55; color:var(--ink-2); } .matrix-table td.right { text-align:right; padding-right:0; vertical-align:middle; } .matrix-table .row-name { font-family:var(--font-display); font-weight:600; font-size:19px; color:var(--ink); letter-spacing:-0.3px; line-height:1.25; } .matrix-table .row-sub { font-family:var(--font-serif); font-size:14px; color:var(--ink-3); margin-top:8px; } .matrix-table .row-sub strong { color:var(--ink-2); font-weight:600; } .section.gray .matrix-table td { border-bottom-color:rgba(0,29,52,0.16); } .severity-bar { display:inline-block; width:72px; height:5px; border-radius:100px; background:var(--line); position:relative; vertical-align:middle; } .severity-bar::after { content:''; position:absolute; left:0; top:0; bottom:0; border-radius:100px; background:var(--neg); } .sev-1::after{width:20%;} .sev-2::after{width:40%;} .sev-3::after{width:60%;} .sev-4::after{width:80%;} .sev-5::after{width:100%;} .severity-label { display:block; font-family:var(--font-label); font-size:10px; font-weight:700; color:var(--ink-3); letter-spacing:0.6px; text-transform:uppercase; margin-bottom:7px; } /* ---------- Scenario table ---------- */ .scenario-table { width:100%; border-collapse:collapse; margin-top:46px; } .scenario-table th { font-family:var(--font-label); font-size:10.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-3); text-align:left; padding:16px 18px 16px 0; border-bottom:2px solid var(--ink); } .scenario-table td { padding:22px 18px 22px 0; border-bottom:1px solid var(--line); vertical-align:top; font-size:14.5px; line-height:1.55; color:var(--ink-2); } .scenario-table .scn-name { font-family:var(--font-display); font-weight:600; font-size:19px; color:var(--ink); letter-spacing:-0.3px; line-height:1.2; } .scenario-table .scn-qual { display:block; font-family:var(--font-label); font-size:10px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; color:var(--accent-ink); margin-top:6px; } .section.gray .scenario-table td { border-bottom-color:rgba(0,29,52,0.16); } /* ---------- Insight cards ---------- */ .insights { display:grid; grid-template-columns:repeat(2,1fr); gap:0; margin-top:54px; border-top:1px solid var(--line); border-left:1px solid var(--line); } .insight-card { padding:38px 38px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; } .insight-card::before { content:''; position:absolute; top:-1px; left:-1px; width:46px; height:3px; background:var(--accent); } .insight-card .insight-tag { font-family:var(--font-label); font-size:10.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-3); margin-bottom:18px; } .insight-card h3 { font-family:var(--font-display); font-weight:600; font-size:22px; line-height:1.25; color:var(--ink); margin-bottom:16px; letter-spacing:-0.4px; } .insight-card p { font-family:var(--font-serif); font-size:15px; line-height:1.65; color:var(--ink-2); } .insight-card p strong { color:var(--ink); font-weight:600; } .section.gray .insights { border-color:rgba(0,29,52,0.16); } .section.gray .insight-card { border-color:rgba(0,29,52,0.16); } /* ---------- Scorecard / signal tiles ---------- */ .signals-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:54px; border-top:1px solid var(--line); border-left:1px solid var(--line); } .signal-tile { padding:30px 30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); } .signal-tile .head { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; gap:12px; } .signal-tile .name { font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--ink); letter-spacing:-0.2px; line-height:1.2; } .signal-tile .now { font-family:var(--font-label); font-size:10px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; color:var(--navy); background:var(--warn); padding:4px 11px 3px; border-radius:100px; flex-shrink:0; white-space:nowrap; } .signal-tile .now.good { background:var(--pos); color:#fff; } .signal-tile .now.bad { background:var(--neg); color:#fff; } .signal-tile .metric-line { font-family:var(--font-label); font-size:11.5px; color:var(--ink-3); margin-bottom:14px; letter-spacing:0.2px; line-height:1.4; } .signal-tile .trip { font-family:var(--font-serif); font-size:14px; line-height:1.6; color:var(--ink-2); } .signal-tile .trip strong { color:var(--ink); font-weight:600; } .section.gray .signals-grid { border-color:rgba(0,29,52,0.16); } .section.gray .signal-tile { border-color:rgba(0,29,52,0.16); } /* ---------- Recommendations / commit list ---------- */ .commit-list { margin-top:54px; } .commit-row { display:grid; grid-template-columns:96px 1fr 200px; gap:36px; padding:30px 0; border-top:1px solid var(--line); align-items:start; } .commit-row:last-child { border-bottom:1px solid var(--line); } .commit-row .num { font-family:var(--font-display); font-size:46px; font-weight:600; color:var(--ink); line-height:1; letter-spacing:-2px; } .commit-row h3 { font-family:var(--font-display); font-weight:600; font-size:21px; line-height:1.3; color:var(--ink); margin-bottom:8px; letter-spacing:-0.4px; } .commit-row p { font-size:15px; line-height:1.6; color:var(--ink-2); } .commit-row .meta { font-family:var(--font-label); font-size:11.5px; font-weight:600; color:var(--ink-3); text-align:right; letter-spacing:0.4px; padding-top:7px; } .section.gray .commit-row { border-color:rgba(0,29,52,0.16); } /* ---------- Footer hero + strip ---------- */ .footer-hero { background:var(--navy); color:var(--on-dark); padding:118px 0 92px; } footer { background:var(--navy); } .footer-strip { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:30px 64px; max-width:1240px; margin:0 auto; font-family:var(--font-label); font-size:11.5px; color:var(--on-dark-muted); letter-spacing:0.3px; border-top:1px solid var(--on-dark-line); } .footer-strip nav { display:flex; gap:24px; } .footer-strip a { color:var(--on-dark-strong); text-decoration:none; font-weight:600; } .footer-strip a:hover { color:var(--accent); } /* ---------- Source / participants line ---------- */ .participants { margin-top:46px; } .participants .label { font-family:var(--font-label); font-size:var(--label); font-weight:700; text-transform:uppercase; letter-spacing:1.4px; color:var(--ink-3); margin-bottom:14px; } .participants .names { font-size:15px; line-height:1.55; color:var(--ink); font-weight:500; max-width:920px; } .participants .names .sep { color:var(--ink-3); margin:0 10px; opacity:0.55; } .participants.dark .label { color:var(--on-dark-muted); } .participants.dark .names { color:var(--on-dark-strong); } .participants.dark .names .sep { color:var(--on-dark-muted); } /* ===================================================================== VISUALIZATION LIBRARY — additional chart patterns Each pattern is a decision-support widget. CSS/SVG patterns (gauges, progress, share, bullet, sparkline) are crisp and lib-free; Chart.js handles donut / area / grouped bars. ===================================================================== */ /* viz block: a labeled module on a hairline grid */ .viz-grid { display:grid; gap:0; margin-top:54px; border-top:1px solid var(--line); border-left:1px solid var(--line); } .viz-grid.cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); } .viz-grid.cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); } @media (max-width:960px){ .viz-grid.cols-3 { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:760px){ .viz-grid.cols-2, .viz-grid.cols-3 { grid-template-columns:1fr; } } .viz-cell { padding:34px 34px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); } .viz-cell .viz-label { font-family:var(--font-label); font-size:10.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; } .viz-cell .viz-title { font-family:var(--font-display); font-weight:600; font-size:19px; letter-spacing:-0.3px; color:var(--ink); margin-bottom:6px; } .viz-cell .viz-use { font-size:13px; line-height:1.5; color:var(--ink-3); margin-bottom:24px; max-width:46ch; } .section.gray .viz-grid, .section.gray .viz-cell { border-color:rgba(0,29,52,0.16); } /* --- Stat callouts (big hero numbers, borderless) --- */ .stat-callouts { display:grid; grid-template-columns:repeat(4,1fr); gap:40px 36px; margin-top:50px; } .stat-callout .figure { font-family:var(--font-display); font-weight:600; font-size:clamp(40px,4.4vw,62px); line-height:0.95; letter-spacing:-2px; color:var(--ink); } .stat-callout .figure .u { font-size:0.5em; color:inherit; letter-spacing:-1px; } .stat-callout .figure.accent { color:var(--ink); } .stat-callout .cap { font-family:var(--font-label); font-size:12px; font-weight:600; letter-spacing:0.3px; color:var(--ink-2); margin-top:14px; line-height:1.4; } .stat-callout .cap .sub { display:block; color:var(--ink-3); font-weight:500; margin-top:3px; } .stat-callout { border-top:2px solid var(--ink); padding-top:18px; } @media (max-width:1100px){ .stat-callouts{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .stat-callouts{ grid-template-columns:1fr; } } /* --- Radial gauge (single-metric %) --- */ .gauge-row { display:flex; gap:36px; flex-wrap:wrap; } .gauge { text-align:center; } .gauge svg { display:block; transform:rotate(-90deg); } .gauge .track { fill:none; stroke:var(--line); } .gauge .fill { fill:none; stroke:var(--accent); stroke-linecap:round; transition:stroke-dashoffset .6s ease; } .gauge .fill.pos { stroke:var(--pos); } .gauge .fill.warn { stroke:var(--warn); } .gauge .fill.neg { stroke:var(--neg); } .gauge-wrap { position:relative; width:124px; height:124px; margin:0 auto; } .gauge-val { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; font-size:27px; letter-spacing:-1px; color:var(--ink); } .gauge .glabel { font-family:var(--font-label); font-size:11.5px; font-weight:600; letter-spacing:0.3px; color:var(--ink-2); margin-top:14px; } /* --- Progress bars (multi-metric comparison) --- */ .prog-list { display:flex; flex-direction:column; gap:22px; } .prog .prog-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px; } .prog .prog-name { font-family:var(--font-label); font-size:13px; font-weight:600; color:var(--ink); letter-spacing:0.2px; } .prog .prog-num { font-family:var(--font-display); font-size:15px; font-weight:600; color:var(--ink-2); font-variant-numeric:tabular-nums; } .prog .prog-track { height:8px; border-radius:100px; background:var(--line); overflow:hidden; } .prog .prog-fill { height:100%; border-radius:100px; background:var(--accent); } .prog .prog-fill.pos { background:var(--pos); } .prog .prog-fill.warn { background:var(--warn); } .prog .prog-fill.neg { background:var(--neg); } /* --- Segmented share bar (100% stacked) --- */ .share-bar { display:flex; height:34px; border-radius:6px; overflow:hidden; margin-bottom:18px; } .share-bar .seg { display:flex; align-items:center; justify-content:center; font-family:var(--font-label); font-size:11.5px; font-weight:700; color:#fff; letter-spacing:0.3px; min-width:0; } .share-legend { display:flex; flex-wrap:wrap; gap:18px 26px; } .share-legend .item { display:flex; align-items:center; gap:9px; font-family:var(--font-label); font-size:12.5px; font-weight:500; color:var(--ink-2); } .share-legend .key { width:11px; height:11px; border-radius:3px; flex-shrink:0; } .share-legend .pct { font-weight:700; color:var(--ink); margin-left:2px; } /* --- Bullet chart (actual vs target with qualitative range) --- */ .bullet-list { display:flex; flex-direction:column; gap:26px; } .bullet .bl-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; } .bullet .bl-name { font-family:var(--font-label); font-size:13px; font-weight:600; color:var(--ink); } .bullet .bl-val { font-family:var(--font-display); font-size:15px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; } .bullet .bl-track { position:relative; height:20px; border-radius:4px; background:var(--line); overflow:visible; } .bullet .bl-qual { position:absolute; top:0; bottom:0; left:0; border-radius:4px; background:rgba(0,29,52,0.10); } .bullet .bl-measure { position:absolute; top:5px; bottom:5px; left:0; border-radius:3px; background:var(--accent); } .bullet .bl-measure.pos { background:var(--pos); } .bullet .bl-measure.neg { background:var(--neg); } .bullet .bl-target { position:absolute; top:-3px; bottom:-3px; width:3px; background:var(--ink); border-radius:2px; } .bullet .bl-scale { display:flex; justify-content:space-between; font-family:var(--font-label); font-size:10px; font-weight:600; color:var(--ink-3); margin-top:7px; letter-spacing:0.4px; } /* --- Sparkline table (inline trends) --- */ .spark-table { width:100%; border-collapse:collapse; } .spark-table th { font-family:var(--font-label); font-size:10.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-3); text-align:left; padding:14px 16px 14px 0; border-bottom:2px solid var(--ink); } .spark-table th.right { text-align:right; padding-right:0; } .spark-table td { padding:16px 16px 16px 0; border-bottom:1px solid var(--line); font-size:14.5px; color:var(--ink-2); vertical-align:middle; } .spark-table td.right { text-align:right; padding-right:0; font-family:var(--font-display); font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; } .spark-table .sname { font-weight:600; color:var(--ink); } .spark-table .spark { width:120px; } .spark-table .spark svg { display:block; width:120px; height:30px; } .spark-table .trend { font-family:var(--font-label); font-size:12px; font-weight:700; } .spark-table .trend.up { color:var(--pos); } .spark-table .trend.down { color:var(--neg); } .section.gray .spark-table td { border-bottom-color:rgba(0,29,52,0.16); } /* --- Donut center label --- */ .donut-wrap { position:relative; width:100%; max-width:300px; } /* --- Cover stat row (big numbers on the navy cover) --- */ .cover-stats { display:flex; gap:30px; margin-top:50px; flex-wrap:wrap; } .cover-stat { flex:1; min-width:160px; border-top:2px solid var(--accent); padding-top:18px; } .cover-stat .n { font-family:var(--font-display); font-weight:600; font-size:clamp(38px,4vw,56px); line-height:0.95; letter-spacing:-1.8px; color:var(--on-dark-strong); } .cover-stat .n .u { font-size:0.46em; color:inherit; letter-spacing:-1px; margin-left:2px; } .cover-stat .l { font-family:var(--font-label); font-size:12px; font-weight:600; letter-spacing:0.3px; color:var(--on-dark-muted); margin-top:13px; line-height:1.4; } html[data-hero="light"] .section.dark#cover .cover-stat .n { color:var(--ink); } html[data-hero="light"] .section.dark#cover .cover-stat .l { color:var(--ink-3); } /* --- Dashboard 2-column (chart beside a panel) --- */ .dash-2col { display:grid; grid-template-columns:1.35fr 1fr; gap:54px; margin-top:54px; align-items:start; } .dash-2col.even { grid-template-columns:1fr 1fr; } @media (max-width:900px){ .dash-2col, .dash-2col.even { grid-template-columns:1fr; gap:44px; } } .panel-head { font-family:var(--font-display); font-weight:600; font-size:21px; letter-spacing:-0.4px; color:var(--ink); margin-bottom:8px; } .panel-sub { font-size:14px; line-height:1.55; color:var(--ink-3); margin-bottom:24px; max-width:42ch; } /* --- Icons incorporated into report context (Visual example) --- */ .frame.sm { width:56px; height:56px; } .frame.sm .ico { width:25px; height:25px; } .section-mark { display:flex; align-items:center; gap:18px; margin-bottom:30px; } .section-mark .sm-text .eyebrow { margin-bottom:0; } .section-mark .sm-text .eyebrow::after { display:none; } .metric-tile { position:relative; } .metric-tile .kpi-ico { position:absolute; top:26px; right:26px; width:24px; height:24px; color:var(--accent-ink); } .signal-tile .name-ico { display:inline-flex; align-items:center; gap:9px; } .signal-tile .name-ico .ico { width:18px; height:18px; color:var(--accent-ink); flex:none; } .commit-row .num-ico { display:flex; align-items:center; gap:14px; } .commit-row .num-ico .frame { width:50px; height:50px; } .commit-row .num-ico .frame .ico { width:23px; height:23px; } /* ===================================================================== STUDY PATTERNS — icon & text layouts drawn from Haworth study pages ===================================================================== */ /* Numbered reasons with large standalone icons ("Three primary reasons") */ .reasons { display:grid; grid-template-columns:repeat(3,1fr); gap:48px; margin-top:56px; } .reason .r-num { font-family:var(--font-display); font-weight:600; font-size:86px; line-height:0.9; letter-spacing:-3px; color:var(--ink); } .reason .r-rule { height:1px; background:var(--line-strong); margin:16px 0 18px; } .reason .r-label { font-family:var(--font-display); font-weight:600; font-size:19px; line-height:1.3; letter-spacing:-0.3px; color:var(--ink); margin-bottom:36px; max-width:22ch; } .reason .r-ico { color:var(--ink); } .reason .r-ico .ico { width:104px; height:104px; stroke-width:1.05; } @media (max-width:860px){ .reasons{ grid-template-columns:1fr; gap:42px; } } /* Pros / Cons framed-icon list ("Working from the Office") */ .poscon { display:flex; flex-direction:column; gap:14px; margin-top:50px; } .pc-row { display:grid; grid-template-columns:84px 96px 1fr; align-items:center; gap:24px; padding:14px 0; } .pc-cat { font-family:var(--font-label); font-weight:700; font-size:14px; letter-spacing:0.2px; } .pc-cat.pos { color:var(--dark-green); } .pc-cat.con { color:var(--accent-ink); } .pc-frame { width:92px; height:92px; border-radius:50%; border:1.5px solid var(--line-strong); display:flex; align-items:center; justify-content:center; } .pc-frame .ico { width:42px; height:42px; stroke-width:1.15; color:var(--ink); } .pc-label { font-family:var(--font-display); font-weight:600; font-size:clamp(26px,3vw,34px); letter-spacing:-0.6px; } .pc-label.pos { color:var(--dark-green); } .pc-label.con { color:var(--accent-ink); } .pc-div { height:1px; background:var(--line); margin:18px 0; } @media (max-width:680px){ .pc-row{ grid-template-columns:60px 70px 1fr; gap:16px; } .pc-frame{ width:70px; height:70px; } .pc-frame .ico{ width:32px; height:32px; } } /* 2×2 large-icon points ("policy details changed") */ .icon-points { display:grid; grid-template-columns:1fr 1fr; gap:52px 72px; margin-top:56px; } .ipoint .ip-ico { color:var(--ink); margin-bottom:24px; } .ipoint .ip-ico .ico { width:90px; height:90px; stroke-width:1.05; } .ipoint .ip-rule { height:1px; background:var(--line-strong); margin-bottom:18px; } .ipoint .ip-label { font-family:var(--font-display); font-weight:600; font-size:18px; line-height:1.3; letter-spacing:-0.2px; color:var(--accent-ink); max-width:30ch; } @media (max-width:760px){ .icon-points{ grid-template-columns:1fr; gap:40px; } } /* Large serif lead paragraph (study insight lead) */ .serif-lead { font-family:var(--font-serif); font-weight:400; font-size:clamp(21px,2.2vw,28px); line-height:1.46; letter-spacing:-0.1px; color:var(--ink); max-width:1000px; margin-top:40px; } .serif-lead.dark { color:var(--on-dark-strong); } /* Big-stat + serif columns (study insight body layout) */ .stat-feature { display:grid; grid-template-columns:300px 1fr; gap:56px; margin-top:54px; align-items:start; } .stat-feature .big-stat { font-family:var(--font-display); font-weight:600; font-size:clamp(76px,9vw,124px); line-height:0.84; letter-spacing:-4px; color:var(--ink); } .stat-feature .bs-rule { height:1px; background:var(--line-strong); margin:20px 0 14px; } .stat-feature .bs-label { font-family:var(--font-display); font-weight:600; font-size:16px; line-height:1.32; letter-spacing:-0.2px; color:var(--accent-ink); max-width:26ch; } .stat-feature .sf-cols { column-count:2; column-gap:42px; } .stat-feature .sf-cols p { font-family:var(--font-serif); font-size:15px; line-height:1.62; color:var(--ink-2); margin-bottom:1em; } .stat-feature .sf-cols p:first-child { margin-top:0; } .stat-feature .sf-cols strong { color:var(--ink); font-weight:600; } @media (max-width:860px){ .stat-feature{ grid-template-columns:1fr; gap:30px; } .stat-feature .sf-cols{ column-count:1; } } /* Progress stepper (study page footer) */ .stepper { display:flex; align-items:center; gap:0; margin-top:72px; } .stepper .dot { width:30px; height:30px; border-radius:50%; border:1.5px solid var(--line-strong); display:flex; align-items:center; justify-content:center; font-family:var(--font-label); font-size:12px; font-weight:600; color:var(--ink-3); flex:none; } .stepper .dot.active { background:var(--navy); border-color:var(--navy); color:var(--on-dark-strong); } .stepper .seg { height:1px; background:var(--line-strong); flex:1; min-width:24px; } /* Prose actions — text-forward recommendations list (Text tier) */ .action-prose { margin-top:42px; max-width:880px; } .action-prose .ap-item { padding:26px 0; border-top:1px solid var(--line); } .action-prose .ap-item:last-child { border-bottom:1px solid var(--line); } .action-prose h3 { font-family:var(--font-display); font-weight:600; font-size:21px; letter-spacing:-0.3px; color:var(--ink); margin-bottom:10px; } .action-prose h3 .ap-num { color:var(--ink); margin-right:12px; } .action-prose p { font-family:var(--font-body); font-size:16px; line-height:1.7; color:var(--ink-2); max-width:780px; } .action-prose p .ap-meta { color:var(--ink-3); font-weight:500; } .action-prose .ap-tag { display:block; margin-top:12px; font-family:var(--font-label); font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--ink-3); } /* --- Editorial / long-form (heavy-text feature) --- */ .editorial .feature-head { max-width:22ch; } .editorial .implication { font-family:var(--font-body); font-weight:600; font-size:clamp(17px,1.9vw,22px); line-height:1.35; letter-spacing:-0.2px; color:var(--accent-ink); margin-top:20px; max-width:880px; } .editorial .feature-lead { font-family:var(--font-serif); font-weight:400; font-size:clamp(20px,2.1vw,26px); line-height:1.45; letter-spacing:-0.1px; color:var(--ink); max-width:980px; margin-top:44px; } .editorial .feature-cols { margin-top:52px; column-count:3; column-gap:46px; border-top:1px solid var(--line); padding-top:40px; } .editorial .feature-cols p { font-family:var(--font-serif); font-size:15.5px; line-height:1.62; color:var(--ink-2); margin-bottom:1.05em; } .editorial .feature-cols p:first-child { margin-top:0; } .editorial .feature-cols strong, .editorial .feature-lead strong { color:var(--ink); font-weight:600; } .editorial .feature-cols .data-emph { font-family:var(--font-body); font-weight:600; color:var(--ink); } .section.gray .editorial .feature-cols, .editorial .feature-cols { border-top-color:var(--line); } @media (max-width:980px){ .editorial .feature-cols { column-count:2; } } @media (max-width:600px){ .editorial .feature-cols { column-count:1; } } /* --- Iconography (lined / stroke icons) --- */ .ico { display:inline-block; width:24px; height:24px; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; } .ico.accent { stroke:var(--accent); } .icon-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:0; margin-top:50px; border-top:1px solid var(--line); border-left:1px solid var(--line); } .icon-cell { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:30px 16px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); text-align:center; } .icon-cell .ico { width:30px; height:30px; color:var(--ink); } .icon-cell .iname { font-family:var(--font-label); font-size:10.5px; font-weight:600; letter-spacing:0.3px; color:var(--ink-3); } .section.gray .icon-grid, .section.gray .icon-cell { border-color:rgba(0,29,52,0.16); } @media (max-width:1100px){ .icon-grid{ grid-template-columns:repeat(4,1fr); } } @media (max-width:560px){ .icon-grid{ grid-template-columns:repeat(3,1fr); } } /* icon usage demo row */ .icon-uses { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:54px; border-top:1px solid var(--line); border-left:1px solid var(--line); } .icon-use { padding:30px 30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); } .icon-use .iu-label { font-family:var(--font-label); font-size:10.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-3); margin-bottom:18px; } .icon-use .iu-sizes { display:flex; align-items:baseline; gap:20px; color:var(--ink); } .icon-use .iu-sizes .ico.s1 { width:18px; height:18px; } .icon-use .iu-sizes .ico.s2 { width:24px; height:24px; } .icon-use .iu-sizes .ico.s3 { width:34px; height:34px; } .icon-lockup { display:flex; align-items:center; gap:13px; } .icon-lockup .il-text { font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--ink); letter-spacing:-0.2px; } .icon-lockup .il-sub { font-size:13px; color:var(--ink-3); } .icon-chip { display:inline-flex; align-items:center; gap:9px; padding:9px 15px 9px 12px; border:1px solid var(--line); border-radius:100px; font-family:var(--font-label); font-size:12.5px; font-weight:600; color:var(--ink); } .icon-chip .ico { width:17px; height:17px; color:var(--accent-ink); } .section.gray .icon-uses, .section.gray .icon-use { border-color:rgba(0,29,52,0.16); } .section.gray .icon-chip { border-color:rgba(0,29,52,0.22); } /* --- Dark-mode overrides for the visualization library --- */ .section.dark .viz-grid, .section.dark .viz-cell { border-color:var(--on-dark-line); } .section.dark .viz-cell .viz-label { color:var(--on-dark-muted); } .section.dark .viz-cell .viz-title { color:var(--on-dark-strong); } .section.dark .viz-cell .viz-use { color:var(--on-dark-muted); } .section.dark .stat-callout { border-top-color:var(--on-dark-strong); } .section.dark .stat-callout .figure { color:var(--on-dark-strong); } .section.dark .stat-callout .figure.accent { color:var(--on-dark-strong); } .section.dark .stat-callout .figure .u { color:inherit; } .section.dark .stat-callout .cap { color:var(--on-dark); } .section.dark .stat-callout .cap .sub { color:var(--on-dark-muted); } .section.dark .gauge .track { stroke:var(--on-dark-line); } .section.dark .gauge-val { color:var(--on-dark-strong); } .section.dark .gauge .glabel { color:var(--on-dark); } .section.dark .prog .prog-name { color:var(--on-dark-strong); } .section.dark .prog .prog-num { color:var(--on-dark); } .section.dark .prog .prog-track { background:var(--on-dark-line); } .section.dark .share-legend .item { color:var(--on-dark); } .section.dark .share-legend .pct { color:var(--on-dark-strong); } .section.dark .bullet .bl-name { color:var(--on-dark-strong); } .section.dark .bullet .bl-val { color:var(--on-dark-strong); } .section.dark .bullet .bl-track { background:var(--on-dark-line); } .section.dark .bullet .bl-qual { background:rgba(234,241,246,0.10); } .section.dark .bullet .bl-target { background:var(--on-dark-strong); } .section.dark .bullet .bl-scale { color:var(--on-dark-muted); } .section.dark .spark-table th { color:var(--on-dark-muted); border-bottom-color:var(--on-dark-strong); } .section.dark .spark-table td { color:var(--on-dark); border-bottom-color:var(--on-dark-line); } .section.dark .spark-table td.right { color:var(--on-dark-strong); } .section.dark .spark-table .sname { color:var(--on-dark-strong); } .section.dark .donut-center .dc-num { color:var(--on-dark-strong); } .section.dark .donut-center .dc-cap { color:var(--on-dark-muted); } .section.dark .chart-legend { color:var(--on-dark-muted); } .section.dark .data-table th { color:var(--on-dark-muted); border-bottom-color:var(--on-dark-strong); } .section.dark .data-table td { color:var(--on-dark); border-bottom-color:var(--on-dark-line); } .section.dark .data-table .name { color:var(--on-dark-strong); } /* --- Framed icons (circular frames; stroke/fill rules per brand guide) --- */ .framed-icons { display:flex; flex-wrap:wrap; gap:30px; margin-top:44px; } .framed { display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; } .frame { width:88px; height:88px; border-radius:50%; display:flex; align-items:center; justify-content:center; } .frame .ico { width:38px; height:38px; stroke-width:1.4; } /* outlined frames: stroke limited to Bright colors or Petrol Black */ .frame.f-outline { background:transparent; border:2px solid var(--ink); } .frame.f-outline .ico { color:var(--ink); } .frame.f-outline.b-blue { border-color:var(--bright-blue); } .frame.f-outline.b-blue .ico { color:var(--bright-blue); } .frame.f-outline.b-green { border-color:var(--bright-green); } .frame.f-outline.b-green .ico { color:var(--dark-green); } .frame.f-outline.b-red { border-color:var(--bright-red); } .frame.f-outline.b-red .ico { color:var(--bright-red); } /* dark-fill frames: fill limited to Dark colors; stroke is Cream/Gray tint */ .frame.f-fill .ico { color:var(--cream-tint); } .frame.f-fill.fill-petrol { background:var(--navy); } /* --navy (fixed petrol), NOT --ink which flips to white in dark → invisible cream glyph (dark-mode.md) */ .frame.f-fill.fill-blue { background:var(--dark-blue); } .frame.f-fill.fill-green { background:var(--dark-green); } .frame.f-fill.fill-red { background:var(--dark-red); } .frame.f-fill.fill-terra { background:var(--dark-terra); } /* neutral-fill frame: Cream/Gray tint with Petrol stroke */ .frame.f-cream { background:var(--cream-tint); } .frame.f-cream .ico { color:var(--ink); } .framed .flabel { font-family:var(--font-label); font-size:10.5px; font-weight:600; letter-spacing:0.3px; color:var(--ink-3); max-width:96px; } .donut-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; } .donut-center .dc-num { font-family:var(--font-display); font-weight:600; font-size:34px; letter-spacing:-1.5px; color:var(--ink); line-height:1; } .donut-center .dc-cap { font-family:var(--font-label); font-size:10.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--ink-3); margin-top:7px; } .donut-flex { display:flex; gap:40px; align-items:center; flex-wrap:wrap; } /* ===================================================================== TWEAK VARIANTS (driven by data-attrs on ) ===================================================================== */ /* Label style: mono labels for a data-forward feel */ html[data-labels="mono"] { --font-label: var(--font-mono); } html[data-labels="mono"] .eyebrow, html[data-labels="mono"] .topbar, html[data-labels="mono"] .footer-strip { letter-spacing:0.6px; } /* Eyebrow marker style */ html[data-eyebrow="dot"] .eyebrow::before { width:8px; height:8px; border-radius:50%; } html[data-eyebrow="none"] .eyebrow::before { display:none; } html[data-eyebrow="none"] .eyebrow { gap:0; } /* Section band warmth: Cream Tint (warm) or mist (cool blue), per palette */ html[data-band="warm"] { --band:#F2EFDE; --band-2:#E7DFB7; } html[data-band="mist"] { --band:#EAF1F6; --band-2:#D8E6F0; } /* Accent intensity on KPIs: tint the value vs plain ink */ html[data-kpi="accent"] .metric-tile .value { color:var(--accent-ink); } /* Hero theme: light cover instead of navy */ html[data-hero="light"] .section.dark#cover { background:var(--white); color:var(--ink); } html[data-hero="light"] .section.dark#cover .display-xl, html[data-hero="light"] .section.dark#cover .display-l { color:var(--ink); } html[data-hero="light"] .section.dark#cover .display-xl .accent-word { color:var(--accent-ink); } html[data-hero="light"] .section.dark#cover .eyebrow.dark { color:var(--ink-3); } html[data-hero="light"] .section.dark#cover .eyebrow.dark::after { background:var(--line); } html[data-hero="light"] .section.dark#cover .kicker-deck.dark { color:var(--ink-2); } html[data-hero="light"] .section.dark#cover .deck.dark { color:var(--ink-2); } html[data-hero="light"] .section.dark#cover .deck.dark u { color:var(--ink); } html[data-hero="light"] .section.dark#cover .participants.dark .label { color:var(--ink-3); } html[data-hero="light"] .section.dark#cover .participants.dark .names { color:var(--ink); } html[data-hero="light"] .section.dark#cover .participants.dark .names .sep { color:var(--ink-3); } html[data-hero="light"] .section.dark#cover { border-bottom:1px solid var(--line); } /* Density */ html[data-density="compact"] .section { padding:88px 0; } html[data-density="compact"] .metric-tile, html[data-density="compact"] .signal-tile { padding:24px 24px; } html[data-density="spacious"] .section { padding:144px 0; } /* ===================================================================== CONTENT WIDTH — set per file via (unset) · the shipped 1240px container (default, unchanged) wide · a roomier 1600px cap full · functionally full-width — fills the viewport with responsive gutters, capped only so ultrawide screens stay sane. Prose (.deck/.body/.chart-sub) keeps its own readable max-widths, so only charts, tables, grids and KPI rows widen; text stays legible. ===================================================================== */ html[data-width="wide"] .container, html[data-width="wide"] .topbar, html[data-width="wide"] .footer-strip { max-width:1600px; } html[data-width="full"] .container, html[data-width="full"] .topbar, html[data-width="full"] .footer-strip { max-width:min(2560px, 96vw); padding-left:clamp(40px, 4vw, 120px); padding-right:clamp(40px, 4vw, 120px); } /* Below the tablet breakpoint, full-width must stop taking width away. The 96vw cap plus a 40px minimum gutter leaves 294px of content on a 390px phone — a 31ch measure, tighter than the default's 37ch. Full-width is a big-screen affordance; on a phone it should get out of the way. */ @media (max-width:760px){ html[data-width="full"] .container, html[data-width="full"] .topbar, html[data-width="full"] .footer-strip { max-width:100%; padding-left:var(--gutter-sm, 20px); padding-right:var(--gutter-sm, 20px); } } /* ===================================================================== EMPHASIS SPECTRUM — set statically per file via visual · lead with charts/cards; suppress dense detail balanced· even mix (default — no rules) text · demote charts; widen & densify prose; keep all detail ===================================================================== */ /* VISUAL — maximize the visual modules, cut supporting detail */ html[data-emphasis="visual"] .chart-frame .data-table { display:none; } html[data-emphasis="visual"] .scenario-table { display:none; } html[data-emphasis="visual"] .matrix-table .row-sub { display:none; } html[data-emphasis="visual"] .rpt-chart { height:460px !important; } html[data-emphasis="visual"] .chart-frame { margin-top:64px; } html[data-emphasis="visual"] .display-m { font-size:clamp(38px,4.2vw,58px); } /* a dense text wall is off-message in Visual — keep the editorial as a statement */ html[data-emphasis="visual"] .editorial .feature-cols { display:none; } /* TEXT — demote charts, widen + densify prose, keep all detail */ html[data-emphasis="text"] .rpt-chart { height:240px !important; } html[data-emphasis="text"] .deck { max-width:900px; } html[data-emphasis="text"] .body { max-width:900px; font-size:16.5px; line-height:1.74; } html[data-emphasis="text"] .chart-sub { max-width:900px; } html[data-emphasis="text"] .chart-frame .data-table { margin-top:40px; } /* ===================================================================== DOCUMENT MODE — data-doc="report" hides the kit/reference sections (Visualization Library + Iconography) and their nav chips, so the three starting files are report-only. The kit file omits data-doc. ===================================================================== */ html[data-doc="report"] .kit-only { display:none; } html[data-doc="report"] .topbar-chips a[href="#dataviz"], html[data-doc="report"] .topbar-chips a[href="#icons"] { display:none; } html[data-doc="report"] .footer-strip a[href="#dataviz"] { display:none; } /* ---------- Responsive ---------- */ @media (max-width:1100px){ .container { padding:0 32px; } .topbar { padding:18px 32px; } .topbar-chips { display:none; } .footer-strip { padding:26px 32px; } .metrics-grid, .signals-grid { grid-template-columns:repeat(2,1fr); } .insights { grid-template-columns:1fr; } .commit-row { grid-template-columns:60px 1fr; } .commit-row .meta { display:none; } } @media (max-width:760px){ .container { padding:0 24px; } .topbar { padding:16px 24px; } .topbar-chips { display:none; } /* keep the topbar from overflowing horizontally on small screens */ .topbar-version { display:none; } .footer-strip { flex-direction:column; align-items:flex-start; gap:14px; padding:24px; } .metrics-grid, .signals-grid { grid-template-columns:1fr; } .section { padding:72px 0; } /* --- Charts --- */ .chart-frame { margin-top:40px; padding-top:26px; } .chart-head { gap:10px 16px; margin-bottom:10px; } .chart-head .title { font-size:19px; line-height:1.25; letter-spacing:-0.2px; } .chart-legend { gap:14px; margin-bottom:14px; font-size:11px; } /* override any inline fixed height so charts get a sensible mobile size */ .chart-canvas-wrap.rpt-chart { height:300px !important; } html[data-emphasis="visual"] .rpt-chart { height:340px !important; } html[data-emphasis="text"] .rpt-chart { height:220px !important; } /* --- Matrix table → stacked cards --- */ .matrix-table, .matrix-table thead, .matrix-table tbody, .matrix-table tr, .matrix-table td { display:block; width:100%; } .matrix-table { margin-top:30px; } .matrix-table thead { display:none; } .matrix-table tr { border-bottom:1px solid var(--line); padding:24px 0; } .matrix-table tr:first-child { border-top:1px solid var(--line); } .matrix-table td { padding:0; border-bottom:none; } .matrix-table td + td { margin-top:12px; } .matrix-table td.right { text-align:left; } .matrix-table .row-name { font-size:21px; } .matrix-table .severity-label { display:inline-block; margin-bottom:0; margin-right:12px; vertical-align:middle; } .matrix-table .severity-bar { width:120px; } /* --- Data table → stacked cards with row labels --- */ .data-table, .data-table thead, .data-table tbody, .data-table tr, .data-table td { display:block; width:100%; } .data-table thead { display:none; } .data-table tr { border-bottom:1px solid var(--line); padding:18px 0; } .data-table tr:first-child { border-top:2px solid var(--ink); } .data-table td { padding:5px 0; border-bottom:none; font-size:14.5px; } .data-table td.right { text-align:left; } .data-table td[data-label]::before { content:attr(data-label) " "; font-family:var(--font-label); font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:3px; } .data-table .name { font-size:16px; } /* --- Scenario table → stacked cards --- */ .scenario-table, .scenario-table thead, .scenario-table tbody, .scenario-table tr, .scenario-table td { display:block; width:100%; } .scenario-table thead { display:none; } .scenario-table tr { border-bottom:1px solid var(--line); padding:22px 0; } .scenario-table tr:first-child { border-top:2px solid var(--ink); } .scenario-table td { padding:4px 0; border-bottom:none; } .scenario-table td[data-label]::before { content:attr(data-label) " "; font-family:var(--font-label); font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:3px; margin-top:8px; } .scenario-table .scn-name { font-size:20px; } /* stat callouts already collapse via their own query; tighten the gap */ .stat-callouts { gap:30px 24px; } } @media (max-width:560px){ .container { padding:0 18px; } .topbar { padding:14px 18px; } .topbar-logo svg { height:13px; } .stat-callouts { grid-template-columns:1fr; gap:26px; } .chart-canvas-wrap.rpt-chart { height:260px !important; } .matrix-table .row-name { font-size:19px; } .pull-quote { font-size:21px; padding-left:20px; } .cover-stats { gap:24px; } } /* ── EMOTIVE DASHBOARD GRID ── */ .emotive-grid{display:grid;grid-template-columns:1fr 1.2fr 1.4fr 1fr;gap:10px;margin-top:0;background:var(--band);transition:background .2s} .em-card{padding:28px;background:var(--white);color:var(--ink);position:relative;min-height:120px;transition:background .2s,color .2s} .em-card--quote{background:var(--ink);color:var(--on-dark)} .em-card--kpi{background:var(--white)} .em-card--chart{background:var(--white)} .em-card--narrative{background:var(--band);color:var(--ink)} .emotive-grid[data-theme="dark"]{background:var(--navy)} .emotive-grid[data-theme="dark"] .em-card{background:#0d2335;color:var(--on-dark)} .emotive-grid[data-theme="dark"] .em-card--quote{background:var(--navy);color:var(--on-dark)} .emotive-grid[data-theme="dark"] .em-card--kpi{background:#0d2335} .emotive-grid[data-theme="dark"] .em-card--chart{background:#0d2335} .emotive-grid[data-theme="dark"] .em-card--narrative{background:rgba(0,29,52,.55);color:var(--on-dark)} .emotive-grid[data-theme="dark"] .em-label{color:var(--on-dark-muted)!important} .emotive-grid[data-theme="dark"] .em-prose{color:var(--on-dark)!important} .emotive-grid[data-theme="dark"] .em-context{color:var(--on-dark-muted)!important} .emotive-grid[data-theme="dark"] .em-head{color:var(--on-dark-strong)!important} .em-col-2{grid-column:span 2}.em-col-3{grid-column:span 3} .em-row-2{grid-row:span 2}.em-row-3{grid-row:span 3} .em-theme-toggle{font-family:var(--font-label);font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;background:transparent;border:1px solid var(--line-strong);color:var(--ink-3);padding:6px 16px;cursor:pointer;border-radius:100px} .em-theme-toggle:hover{color:var(--ink);border-color:var(--ink)} @media(max-width:959px){.emotive-grid{grid-template-columns:1fr 1fr}.em-col-3{grid-column:span 2}} @media(max-width:639px){.emotive-grid{grid-template-columns:1fr}.em-col-2,.em-col-3{grid-column:span 1}.em-row-2,.em-row-3{grid-row:span 1}} /* ============================================================================ RECOVERED 2026-07-17 — pieces absent from the recovered master stylesheet. Do NOT drop these again when re-provisioning: 1. html[data-mode="dark"] GROUND-TOKEN block — WITHOUT THIS THE DARK TOGGLE FLIPS THE ATTRIBUTE BUT BACKGROUNDS NEVER CHANGE (see references/dark-mode.md, "A toggle with no ground CSS does nothing"). This is CORE. 2. Category 12 components (timeline · milestones · calendar) — references/components.md §12. 3. .data-scroll — the mobile table wrapper — references/components.md §5.2. ============================================================================ */ /* ---- 1. DARK MODE: flip ONLY the neutral GROUND tokens (data hues never flip) ---- */ html[data-mode="dark"]{ --paper:#001D34; /* page background → Petrol Navy */ --white:#0B2B45; /* cards / surfaces */ --band:#06243B; /* gray section band */ --band-2:#0B2B45; --ink:#EAF1F6; /* primary text → on-dark */ --ink-2:rgba(234,241,246,0.82); --ink-3:#8DA6BC; /* tertiary / meta → on-dark-muted */ --line:rgba(234,241,246,0.14); --line-strong:rgba(234,241,246,0.28); --map-nd:rgba(234,241,246,0.13); /* choropleth no-data on the dark ground */ --accent-ink:#00A2E1; /* reads on navy */ /* NOTE: --navy is intentionally NOT redefined — Petrol data fills + .section.dark stay navy. */ } /* positive delta/dot text lightens to bright-green so it reads on the navy ground (dark-mode.md) */ html[data-mode="dark"] .delta.good, html[data-mode="dark"] .metric-tile .delta.good{ color:#65C296; } /* JS-FREE DARK: honour the OS/client dark setting when the reader has NOT picked a mode with the toggle. This is the only path to dark backgrounds where JavaScript is blocked (e.g. an email preview pane) — the toggle button can't run there. */ @media (prefers-color-scheme: dark){ html:not([data-mode]){ --paper:#001D34; --white:#0B2B45; --band:#06243B; --band-2:#0B2B45; --ink:#EAF1F6; --ink-2:rgba(234,241,246,0.82); --ink-3:#8DA6BC; --line:rgba(234,241,246,0.14); --line-strong:rgba(234,241,246,0.28); --accent-ink:#00A2E1; } html:not([data-mode]) .delta.good, html:not([data-mode]) .metric-tile .delta.good{ color:#65C296; } } /* ---- 2a. Timeline (components.md §12.1) ---- */ .timeline{ margin-top:40px; } .tl-item{ display:grid; grid-template-columns:22px 1fr; gap:22px; padding-bottom:34px; } .tl-item:last-child{ padding-bottom:0; } .tl-rail{ position:relative; } .tl-rail::before{ content:""; position:absolute; left:50%; transform:translateX(-50%); top:5px; bottom:-34px; width:2px; background:var(--line-strong); } .tl-item:last-child .tl-rail::before{ display:none; } .tl-node{ display:block; width:13px; height:13px; margin:2px auto 0; border-radius:50%; border:2px solid var(--accent); background:var(--paper); box-shadow:0 0 0 3px var(--paper); position:relative; z-index:1; } .tl-node.filled{ background:var(--accent); } .tl-node.pos{ border-color:var(--pos); } .tl-node.filled.pos{ background:var(--pos); } .tl-node.warn{ border-color:var(--warn); } .tl-node.filled.warn{ background:var(--warn); } .tl-node.neg{ border-color:var(--neg); } .tl-node.filled.neg{ background:var(--neg); } .tl-node.hold{ border-color:var(--hold); } .tl-node.filled.hold{ background:var(--hold); } .tl-body{ min-width:0; } .tl-date{ font-family:var(--font-label); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--ink-3); font-variant-numeric:tabular-nums; } .tl-head{ display:flex; align-items:center; gap:12px; margin-top:5px; } .tl-title{ font-family:var(--font-display); font-size:18px; font-weight:600; letter-spacing:-0.3px; color:var(--ink); } .tl-desc{ font-family:var(--font-serif); font-size:14.5px; line-height:1.6; color:var(--ink-2); max-width:640px; margin-top:7px; } .tl-desc strong{ color:var(--ink); } .section.gray .tl-node{ box-shadow:0 0 0 3px var(--band); } .section.gray .tl-node:not(.filled){ background:var(--band); } .section.dark .tl-rail::before{ background:var(--on-dark-line); } .section.dark .tl-node{ background:var(--navy); box-shadow:0 0 0 3px var(--navy); } .section.dark .tl-date{ color:var(--on-dark-muted); } .section.dark .tl-title{ color:var(--on-dark-strong); } .section.dark .tl-desc{ color:var(--on-dark); } .section.dark .tl-desc strong{ color:var(--on-dark-strong); } /* ---- 2b. Milestones — horizontal roadmap (components.md §12.2) ---- */ .milestones{ margin-top:44px; } .ms-track{ display:flex; position:relative; } .ms-track::before{ content:""; position:absolute; left:0; right:0; top:7px; height:2px; background:var(--line-strong); } .ms-item{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 8px; position:relative; } .ms-node{ width:14px; height:14px; border-radius:50%; border:2px solid var(--accent); background:var(--paper); box-shadow:0 0 0 4px var(--paper); position:relative; z-index:1; } .ms-node.filled{ background:var(--accent); } .ms-node.pos{ border-color:var(--pos); } .ms-node.filled.pos{ background:var(--pos); } .ms-node.warn{ border-color:var(--warn); } .ms-node.filled.warn{ background:var(--warn); } .ms-node.neg{ border-color:var(--neg); } .ms-node.filled.neg{ background:var(--neg); } .ms-node.hold{ border-color:var(--hold); } .ms-node.filled.hold{ background:var(--hold); } .ms-body{ margin-top:16px; display:flex; flex-direction:column; align-items:center; gap:5px; } .ms-date{ font-family:var(--font-label); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--accent-ink); font-variant-numeric:tabular-nums; } .ms-title{ font-family:var(--font-display); font-size:15px; font-weight:600; letter-spacing:-0.2px; color:var(--ink); max-width:18ch; } .ms-note{ font-family:var(--font-serif); font-size:12.5px; line-height:1.45; color:var(--ink-3); max-width:20ch; } .section.gray .ms-node{ box-shadow:0 0 0 4px var(--band); } .section.gray .ms-node:not(.filled){ background:var(--band); } .section.dark .ms-track::before{ background:var(--on-dark-line); } .section.dark .ms-node{ background:var(--navy); box-shadow:0 0 0 4px var(--navy); } .section.dark .ms-date{ color:var(--on-dark-muted); } .section.dark .ms-title{ color:var(--on-dark-strong); } .section.dark .ms-note{ color:var(--on-dark-muted); } @media (max-width:640px){ .ms-track{ flex-direction:column; align-items:flex-start; } .ms-track::before{ left:6px; right:auto; top:0; bottom:0; width:2px; height:auto; } .ms-item{ flex:none; width:100%; flex-direction:row; align-items:flex-start; text-align:left; gap:18px; padding:0 0 26px 0; } .ms-item:last-child{ padding-bottom:0; } .ms-node{ margin-top:2px; flex:none; } .ms-body{ margin-top:0; align-items:flex-start; } .ms-title,.ms-note{ max-width:none; } } /* ---- 2c. Month calendar (components.md §12.3) ---- */ .calendar{ margin-top:44px; } .cal-head{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:18px; flex-wrap:wrap; } .cal-title{ font-family:var(--font-display); font-size:20px; font-weight:600; letter-spacing:-0.3px; color:var(--ink); } .cal-key{ display:flex; flex-wrap:wrap; gap:14px; } .cal-key .item{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-label); font-size:11px; font-weight:600; color:var(--ink-2); } .cal-key .key{ width:12px; height:12px; border-radius:3px; display:inline-block; } .cal-scroll{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; } .cal-grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); } .cal-dow,.cal-day{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); } .cal-dow{ padding:8px 12px; background:var(--band); font-family:var(--font-label); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--ink-3); } .cal-day{ min-height:96px; padding:10px 12px 12px; display:flex; flex-direction:column; gap:6px; } .cal-day.is-muted{ background:rgba(0,29,52,0.03); } .cal-day.is-muted .cal-date{ opacity:0.45; } .cal-day.is-today{ box-shadow:inset 0 3px 0 var(--accent); } .cal-day.is-today .cal-date{ color:var(--accent-ink); } .cal-date{ font-family:var(--font-display); font-size:14px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; } .cal-evt{ font-family:var(--font-label); font-size:10.5px; font-weight:600; line-height:1.3; padding:3px 7px; border-left:2px solid var(--accent); border-radius:2px; background:rgba(0,162,225,0.10); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cal-evt.pos{ border-left-color:var(--pos); background:rgba(0,107,102,0.12); } .cal-evt.warn{ border-left-color:var(--warn); background:rgba(245,130,51,0.14); } .cal-evt.neg{ border-left-color:var(--neg); background:rgba(229,25,56,0.10); } .cal-evt.navy{ border-left-color:var(--navy); background:rgba(0,29,52,0.08); } .cal-dots{ display:flex; gap:5px; } .cal-dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); } .cal-dot.pos{ background:var(--pos); } .cal-dot.warn{ background:var(--warn); } .cal-dot.neg{ background:var(--neg); } .cal-dot.navy{ background:var(--navy); } .section.gray .cal-grid,.section.gray .cal-dow,.section.gray .cal-day{ border-color:rgba(0,29,52,0.16); } .section.gray .cal-dow{ background:var(--band-2); } .section.dark .cal-grid,.section.dark .cal-dow,.section.dark .cal-day{ border-color:var(--on-dark-line); } .section.dark .cal-dow{ background:rgba(234,241,246,0.06); color:var(--on-dark-muted); } .section.dark .cal-date{ color:var(--on-dark); } .section.dark .cal-day.is-today .cal-date{ color:var(--on-dark-strong); } .section.dark .cal-day.is-muted{ background:rgba(255,255,255,0.02); } .section.dark .cal-evt{ background:rgba(234,241,246,0.10); color:var(--on-dark-strong); } .section.dark .cal-evt.pos{ border-left-color:var(--bright-green); } @media (max-width:680px){ .cal-grid{ min-width:600px; } } /* ---- 3. Data-scroll — keep tables a real table + frozen first col on mobile (components.md §5.2) ---- */ .data-scroll{ width:100%; } @media (max-width:760px){ .data-scroll{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; } .data-scroll .data-table{ border-collapse:separate; border-spacing:0; min-width:560px; } .data-scroll .data-table th:first-child, .data-scroll .data-table td:first-child{ position:sticky; left:0; z-index:1; background:var(--paper); white-space:nowrap; } .section.gray .data-scroll .data-table th:first-child, .section.gray .data-scroll .data-table td:first-child{ background:var(--band); } .section.dark .data-scroll .data-table th:first-child, .section.dark .data-scroll .data-table td:first-child{ background:var(--navy); } } /* ============================================================================ DARK MODE — SYSTEMIC VISIBILITY RULE (2026-07-17) ONE place that fixes the entire recurring "X not showing on dark" bug class. Two root causes, both invisible once the ground flips to Petrol Navy: (a) gray-band hairlines hardcode a dark rgba(0,29,52,…) that doesn't flip; (b) shapes/text painted var(--navy) (fixed Petrol) sit Petrol-on-Petrol. qa-report.mjs lints for new instances of both so this can't regress. ============================================================================ */ /* (a) EVERY .section.gray hairline override → on-dark line (icon grid, gantt rows, calendar, tables, insights, signals, viz, commit, org, metrics, sparks). */ html[data-mode="dark"] .section.gray .metric-tile, html[data-mode="dark"] .section.gray .metrics-grid, html[data-mode="dark"] .section.gray .data-table td, html[data-mode="dark"] .section.gray .matrix-table td, html[data-mode="dark"] .section.gray .scenario-table td, html[data-mode="dark"] .section.gray .insights, html[data-mode="dark"] .section.gray .insight-card, html[data-mode="dark"] .section.gray .signals-grid, html[data-mode="dark"] .section.gray .signal-tile, html[data-mode="dark"] .section.gray .commit-row, html[data-mode="dark"] .section.gray .viz-grid, html[data-mode="dark"] .section.gray .viz-cell, html[data-mode="dark"] .section.gray .spark-table td, html[data-mode="dark"] .section.gray .icon-grid, html[data-mode="dark"] .section.gray .icon-cell, html[data-mode="dark"] .section.gray .icon-uses, html[data-mode="dark"] .section.gray .icon-use, html[data-mode="dark"] .section.gray .icon-chip, html[data-mode="dark"] .section.gray .cal-grid, html[data-mode="dark"] .section.gray .cal-dow, html[data-mode="dark"] .section.gray .cal-day, html[data-mode="dark"] .section.gray .gt-row, html[data-mode="dark"] .section.gray .gt-lane, html[data-mode="dark"] .section.gray .oc-node{ border-color:rgba(234,241,246,0.16) !important; } /* (b) STRUCTURAL NAVY PAINT on the ground → on-dark in dark mode. Catches inline SVG fill/stroke and inline text colour set to var(--navy): venn set, word cloud, sunburst / rose / streamgraph / scatter / dotmatrix data. Chart.js petrol fills are painted in JS (not inline var(--navy)), so they're unaffected. */ html[data-mode="dark"] [fill="var(--navy)"]{ fill:var(--on-dark-strong); } html[data-mode="dark"] [stroke="var(--navy)"]{ stroke:var(--on-dark-strong); } html[data-mode="dark"] [style*="fill:var(--navy)"]{ fill:var(--on-dark-strong) !important; } html[data-mode="dark"] [style*="color:var(--navy)"]{ color:var(--on-dark-strong) !important; } /* inline navy BACKGROUND (legend swatches on venn/sunburst/rose/streamgraph/scatter/ dotmatrix, share-bar segments) → on-dark so they match their flipped data fills. */ html[data-mode="dark"] [style*="background:var(--navy)"]{ background:var(--on-dark-strong) !important; } /* class-based navy foreground (not inline): radar comparison polygon. Its only fix was .section.dark-scoped, which never applies in dark MODE on a gray/white section — so add the mode-based flip here. */ html[data-mode="dark"] .rd-b{ fill:var(--on-dark-strong); stroke:var(--on-dark-strong); } /* class-based navy PILLS with white text (pipeline chevron, funnel bar, flowchart term node "Report drafted"/"Done", mindmap root) → lift the fixed petrol to navy-700 so the pill reads on the dark ground (their .section.dark lift never applies in dark MODE on a white/gray section). */ html[data-mode="dark"] .pl-stage, html[data-mode="dark"] .fn-bar, html[data-mode="dark"] .fc-node.term, html[data-mode="dark"] .mm-root, html[data-mode="dark"] .oc-node.lead{ background:var(--navy-700); } /* class-based navy DATA dots / rules (dotmatrix "not yet", quadrant, calendar) → on-dark so they read on the dark ground, matching their flipped legend swatches. */ html[data-mode="dark"] .dm-dot.d, html[data-mode="dark"] .qd-dot.navy, html[data-mode="dark"] .cal-dot.navy, html[data-mode="dark"] .dot.active{ background:var(--on-dark-strong); } html[data-mode="dark"] .cal-evt.navy{ border-left-color:var(--on-dark-strong); } /* --dark-blue reads muddy on the dark ground → lift to a muted light-blue (--on-dark-muted), distinct from accent (bright blue) and the flipped navy (white). */ html[data-mode="dark"] [style*="fill:var(--dark-blue)"]{ fill:var(--on-dark-muted) !important; } html[data-mode="dark"] [style*="background:var(--dark-blue)"]{ background:var(--on-dark-muted) !important; } /* (c) framed-icon dark contrast: cream fill stays light (glyph must stay dark); bright-green outline glyph lightens so it reads on the dark ground. */ html[data-mode="dark"] .frame.f-cream .ico{ color:var(--navy); } html[data-mode="dark"] .frame.f-outline.b-green .ico{ color:var(--bright-green); } /* ===================================================================== HAWORTH REPORT SYSTEM v2 — COMPONENT EXTENSIONS Added 2026-09. Token-based, strictly on-palette. Link AFTER haworth-report.css (and report-charts.css); every selector references :root tokens from the master stylesheet. "EXTENSIONS" IS A MISNOMER FOR THE NAV CHROME — LINK THIS EVERYWHERE. templates/blocks/nav-chrome.html is mandatory page chrome that downstream generators inject into every document, and its ONLY CSS is here. A document that links haworth-report.css alone renders the drawer as raw blue underlined links spilling over the top-left of the page, on top of the content. That had shipped in every generated document since the first release; the three shipped templates now link this file, and qa-report.mjs check C fails a document that uses a class from any shipped block with no rule behind it (2026-08-10, v1.3.2). Components: - On-chart icon callouts: .chart-stage / .ipin (+ .bare/.right/.pos/.neg/.warn) / .icon-key (+ .cols-2) - Chaptered contents: .toc-grid / .toc-card / .toc-list - Chapter dividers: .chapter-divider / .ch-sections / .ch-chip (use on .section.dark.compact) - Nav chrome: .topbar-end / .mode-toggle / .hamburger / .nav-drawer / .nav-col / .to-top - Colour swatches: .swatch-grid / .swatch ; semantic map: .sem-map / .sem-item - Type specimen: .type-spec / .type-row - Contrast chips: .contrast-row / .cc (.pass/.fail) - Dashboard anatomy: .wire (wireframe) + .demo-dash / .dd-* (worked page) - Offline CSS box plot: .boxplot / .bp-* - Before/after compare: .title-compare / .tc-* ; .threeD-compare / .p3d-* / .flat-* - Cheat sheet: .cheat-grid / .cheat-card / .cheat-list - Live-data badge: .live-badge / .src-note - Guide helpers: .guide-list / .callout / .principle / .chooser / .check-grid / .q-list / .lead-line / .mini-label Markup + the small nav/toggle/scroll-spy/back-to-top JS: references/report-extensions.md ===================================================================== */ /* ---- Guide extras — token-based, strictly on-palette ---- */ .guide-list{ list-style:none; margin:22px 0 0; padding:0; max-width:840px; } .guide-list li{ position:relative; padding-left:26px; margin-bottom:13px; font-family:var(--font-serif); font-size:16px; line-height:1.6; color:var(--ink-2); } .guide-list li::before{ content:''; position:absolute; left:0; top:11px; width:12px; height:2px; background:var(--accent); } .guide-list li strong{ color:var(--ink); font-weight:600; } .guide-list .sub-list{ list-style:none; margin:12px 0 4px; padding:0; } .guide-list .sub-list li{ padding-left:22px; margin-bottom:8px; font-size:15px; color:var(--ink-3); } .guide-list .sub-list li::before{ width:6px; height:6px; border-radius:50%; background:var(--ink-3); top:8px; } .section.dark .guide-list li{ color:var(--on-dark); } .section.dark .guide-list li strong{ color:var(--on-dark-strong); } .guide-list.two-col{ max-width:980px; } @media(min-width:820px){ .guide-list.two-col{ column-count:2; column-gap:56px; } .guide-list.two-col li{ break-inside:avoid; } } /* Callout — accent-left highlighted block */ .callout{ margin-top:32px; padding:26px 32px; background:var(--band); border-left:3px solid var(--accent); border-radius:0 8px 8px 0; max-width:900px; } .section.gray .callout{ background:var(--band-2); } .callout .co-label{ font-family:var(--font-label); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.4px; color:var(--ink-3); margin-bottom:14px; } .callout .co-sentence{ font-family:var(--font-serif); font-size:clamp(19px,2vw,25px); line-height:1.42; color:var(--ink); font-weight:500; } .callout .co-sentence .ph{ color:var(--accent-ink); font-weight:600; } .callout .co-note{ font-family:var(--font-serif); font-size:15.5px; line-height:1.62; color:var(--ink-2); margin-top:16px; } .callout.plain{ border-left-color:var(--line-strong); } /* Principle blocks (section 5) */ .principle{ padding:34px 0; border-top:1px solid var(--line); max-width:880px; } .principle:first-of-type{ border-top:0; padding-top:10px; } .p-num{ font-family:var(--font-label); font-size:11px; font-weight:700; letter-spacing:1.4px; color:var(--accent-ink); text-transform:uppercase; } .principle h3{ font-family:var(--font-display); font-size:clamp(21px,2.3vw,27px); font-weight:600; letter-spacing:-0.4px; color:var(--ink); margin:9px 0 15px; line-height:1.2; } .principle .body{ max-width:820px; } .mini-label{ font-family:var(--font-label); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--ink-3); margin-top:22px; } /* Chooser (section 6.1) */ .chooser{ margin-top:40px; border-top:1px solid var(--line); max-width:940px; } .chooser-goal{ padding:26px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:210px 1fr; gap:34px; align-items:start; } .chooser-goal .cg-tag{ display:block; font-family:var(--font-label); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--accent-ink); margin-bottom:8px; } .chooser-goal .cg-title{ font-family:var(--font-display); font-size:19px; font-weight:600; letter-spacing:-0.3px; color:var(--ink); line-height:1.25; } .chooser-goal .guide-list{ margin-top:0; } @media(max-width:760px){ .chooser-goal{ grid-template-columns:1fr; gap:12px; } } /* insight-card list adaptation (discovery groups + avoid cards) */ .insight-card .guide-list{ margin-top:16px; } .insight-card .guide-list li{ font-size:14.5px; margin-bottom:10px; } .insight-card .guide-list .sub-list li{ font-size:13.5px; } /* Title compare (Worse vs Better) */ .title-compare{ display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:34px; border:1px solid var(--line); border-radius:8px; overflow:hidden; max-width:940px; } .tc-cell{ padding:28px 30px; } .tc-cell + .tc-cell{ border-left:1px solid var(--line); } .tc-cell .tc-cat{ font-family:var(--font-label); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:14px; } .tc-cell.worse .tc-cat{ color:var(--neg); } .tc-cell.better .tc-cat{ color:var(--pos); } .tc-cell .tc-title{ font-family:var(--font-serif); font-size:19px; line-height:1.4; color:var(--ink); } @media(max-width:680px){ .title-compare{ grid-template-columns:1fr; } .tc-cell + .tc-cell{ border-left:0; border-top:1px solid var(--line); } } /* Check grid (section 14) */ .check-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; margin-top:44px; border-top:1px solid var(--line); border-left:1px solid var(--line); } .check-group{ padding:30px 32px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); } .section.gray .check-grid, .section.gray .check-group{ border-color:rgba(0,29,52,0.16); } .check-group .ck-h{ font-family:var(--font-label); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--accent-ink); margin-bottom:16px; } .check-list{ list-style:none; margin:0; padding:0; } .check-list li{ position:relative; padding-left:28px; margin-bottom:13px; font-family:var(--font-serif); font-size:15px; line-height:1.5; color:var(--ink-2); } .check-list li::before{ content:''; position:absolute; left:0; top:2px; width:15px; height:15px; border:1.5px solid var(--accent); border-radius:3px; } @media(max-width:760px){ .check-grid{ grid-template-columns:1fr; } } /* Four-question closer on navy (section 15) */ .q-list{ list-style:none; margin:36px 0 0; padding:0; counter-reset:q; max-width:820px; } .q-list li{ position:relative; padding:20px 0 20px 58px; border-top:1px solid var(--on-dark-line); font-family:var(--font-display); font-size:clamp(21px,2.6vw,30px); font-weight:600; letter-spacing:-0.4px; color:var(--on-dark-strong); line-height:1.15; } .q-list li::before{ counter-increment:q; content:counter(q,decimal-leading-zero); position:absolute; left:0; top:26px; font-family:var(--font-label); font-size:13px; font-weight:700; color:var(--accent); letter-spacing:1px; } /* section intro line above lists */ .lead-line{ font-family:var(--font-serif); font-size:16.5px; line-height:1.6; color:var(--ink-2); max-width:820px; margin-top:26px; } .section.dark .lead-line{ color:var(--on-dark); } /* ===== On-chart icon callouts — brand icons as important-point indicators ===== */ .chart-stage{ position:relative; } .ipin{ position:absolute; z-index:6; transform:translate(-50%,-50%); display:flex; align-items:center; gap:8px; pointer-events:none; } .ipin .ipin-mark{ width:32px; height:32px; border-radius:50%; background:var(--paper); border:1.5px solid var(--accent); display:flex; align-items:center; justify-content:center; box-shadow:0 1px 5px rgba(0,29,52,0.16); flex:none; } .ipin .ipin-mark .ico{ width:18px; height:18px; color:var(--accent-ink); } .ipin.neg .ipin-mark{ border-color:var(--neg); } .ipin.neg .ipin-mark .ico{ color:var(--neg); } .ipin.pos .ipin-mark{ border-color:var(--pos); } .ipin.pos .ipin-mark .ico{ color:var(--pos); } .ipin.warn .ipin-mark{ border-color:var(--warn); } .ipin.warn .ipin-mark .ico{ color:var(--hold); } .section.gray .ipin .ipin-mark{ background:var(--band); } .ipin .ipin-tag{ font-family:var(--font-label); font-size:10.5px; font-weight:700; letter-spacing:0.3px; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:100px; padding:5px 10px; white-space:nowrap; box-shadow:0 1px 4px rgba(0,29,52,0.10); } .section.gray .ipin .ipin-tag{ background:var(--band); } .ipin.right{ flex-direction:row-reverse; } @media(max-width:820px){ .ipin{ display:none; } } /* pins hide on small screens; the icon key still explains */ /* icon callout key — lists each applied technique with its brand icon */ .icon-key{ margin-top:22px; display:grid; gap:13px; max-width:660px; } .icon-key .ik{ display:grid; grid-template-columns:36px 1fr; gap:15px; align-items:start; } .icon-key .ik .ik-ico{ width:36px; height:36px; border-radius:50%; background:var(--paper); border:1.5px solid var(--accent); display:flex; align-items:center; justify-content:center; flex:none; } .section.gray .icon-key .ik .ik-ico{ background:var(--band); } .icon-key .ik .ik-ico .ico{ width:19px; height:19px; color:var(--accent-ink); } .icon-key .ik.neg .ik-ico{ border-color:var(--neg);} .icon-key .ik.neg .ik-ico .ico{ color:var(--neg);} .icon-key .ik.pos .ik-ico{ border-color:var(--pos);} .icon-key .ik.pos .ik-ico .ico{ color:var(--pos);} .icon-key .ik.warn .ik-ico{ border-color:var(--warn);} .icon-key .ik.warn .ik-ico .ico{ color:var(--hold);} .icon-key .ik .ik-t{ font-family:var(--font-serif); font-size:14.5px; line-height:1.5; color:var(--ink-2); padding-top:7px; } .icon-key .ik .ik-t strong{ color:var(--ink); font-weight:600; } .icon-key.cols-2{ max-width:960px; } @media(min-width:820px){ .icon-key.cols-2{ grid-template-columns:1fr 1fr; column-gap:44px; } } .ipin.bare{ gap:0; } /* icon mark only, no text tag (compact tiles) */ /* CSS/SVG box plot — offline-native distribution widget (no chart engine) */ .boxplot{ position:relative; margin-top:22px; } .bp-track{ position:relative; height:60px; } .bp-whisker{ position:absolute; top:50%; height:2px; background:var(--ink-2); transform:translateY(-50%); } .bp-cap{ position:absolute; top:50%; width:2px; height:24px; background:var(--ink-2); transform:translate(-50%,-50%); } .bp-box{ position:absolute; top:50%; height:36px; transform:translateY(-50%); background:rgba(0,162,225,0.14); border:1.5px solid var(--accent); border-radius:3px; } .bp-median{ position:absolute; top:50%; width:3px; height:36px; background:var(--accent-ink); transform:translate(-50%,-50%); } .bp-out{ position:absolute; top:50%; width:12px; height:12px; border-radius:50%; background:var(--neg); transform:translate(-50%,-50%); box-shadow:0 0 0 3px var(--paper); } .section.gray .bp-out{ box-shadow:0 0 0 3px var(--band); } .bp-axis{ position:relative; height:16px; margin-top:10px; } .bp-axis span{ position:absolute; transform:translateX(-50%); font-family:var(--font-label); font-size:10px; font-weight:600; color:var(--ink-3); white-space:nowrap; } /* ===== Chapters — table of contents ===== */ .toc-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin-top:44px; border-top:1px solid var(--line); border-left:1px solid var(--line); } @media(max-width:820px){ .toc-grid{ grid-template-columns:1fr; } } .toc-card{ padding:30px 34px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); } .section.gray .toc-grid, .section.gray .toc-card{ border-color:rgba(0,29,52,0.16); } .toc-card .toc-part{ font-family:var(--font-label); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:1.4px; color:var(--accent-ink); } .toc-card .toc-title{ font-family:var(--font-display); font-size:23px; font-weight:600; letter-spacing:-0.4px; color:var(--ink); margin:8px 0 18px; line-height:1.15; } .toc-list{ list-style:none; margin:0; padding:0; } .toc-list li{ margin-bottom:10px; } .toc-list a{ display:flex; gap:12px; align-items:baseline; font-family:var(--font-serif); font-size:15px; color:var(--ink-2); text-decoration:none; } .toc-list a:hover{ color:var(--accent-ink); } .toc-list a .tn{ font-family:var(--font-label); font-size:11px; font-weight:700; color:var(--ink-3); min-width:22px; } /* ===== Chapter divider (navy band) ===== */ .chapter-divider .ch-sections{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; } .chapter-divider .ch-chip{ font-family:var(--font-label); font-size:11.5px; font-weight:600; color:var(--on-dark); border:1px solid var(--on-dark-line); border-radius:100px; padding:8px 15px; text-decoration:none; } .chapter-divider .ch-chip:hover{ border-color:var(--accent); color:var(--on-dark-strong); } /* ===== Color swatches ===== */ .swatch-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr)); gap:16px; margin-top:24px; } .swatch{ border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--paper); } .section.gray .swatch{ border-color:rgba(0,29,52,0.16); } .swatch .sw-chip{ height:78px; width:100%; display:flex; align-items:flex-end; justify-content:flex-end; } .swatch .sw-chip .sw-hex{ font-family:var(--font-label); font-size:10.5px; font-weight:700; letter-spacing:0.4px; padding:5px 8px; border-radius:5px; margin:8px; } .swatch .sw-body{ padding:13px 15px 15px; } .swatch .sw-name{ font-family:var(--font-display); font-size:15px; font-weight:600; color:var(--ink); letter-spacing:-0.2px; } .swatch .sw-role{ font-family:var(--font-serif); font-size:12.5px; line-height:1.4; color:var(--ink-3); margin-top:3px; } .swatch .sw-vals{ display:flex; gap:12px; margin-top:11px; font-family:var(--font-label); font-size:11px; font-weight:700; color:var(--ink-2); } .swatch .sw-vals .pms{ color:var(--ink-3); font-weight:600; } /* ===== Type specimen ===== */ .type-spec{ margin-top:30px; border-top:1px solid var(--line); } .type-row{ display:grid; grid-template-columns:1fr 230px; gap:34px; align-items:baseline; padding:24px 0; border-bottom:1px solid var(--line); } .section.gray .type-spec, .section.gray .type-row{ border-color:rgba(0,29,52,0.16); } .type-row .ts-spec{ font-family:var(--font-label); font-size:11px; font-weight:600; color:var(--ink-3); line-height:1.6; } .type-row .ts-spec strong{ color:var(--ink-2); } @media(max-width:760px){ .type-row{ grid-template-columns:1fr; gap:10px; } } /* ===== Contrast pass/fail chips ===== */ .contrast-row{ display:flex; flex-wrap:wrap; gap:16px; margin-top:22px; } .cc{ border-radius:8px; padding:18px 20px; min-width:200px; flex:1 1 230px; display:flex; flex-direction:column; gap:10px; } .cc .cc-sample{ font-family:var(--font-serif); font-size:16px; line-height:1.35; } .cc .cc-tag{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-label); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; } .cc .cc-tag .ico{ width:15px; height:15px; } .cc.pass{ background:var(--paper); border:1px solid var(--line); } .cc.pass .cc-sample{ color:var(--ink); } .cc.pass .cc-tag{ color:var(--pos); } .section.gray .cc.pass{ background:var(--paper); } .cc.fail{ background:var(--band-2); border:1px solid var(--line); } .cc.fail .cc-sample{ color:#AEBAC4; } .cc.fail .cc-tag{ color:var(--neg); } /* ===== Dashboard anatomy wireframe ===== */ .wire{ margin-top:30px; border:1px solid var(--line); border-radius:10px; overflow:hidden; max-width:940px; } .section.gray .wire{ border-color:rgba(0,29,52,0.16); } .wire-rowwrap{ display:grid; grid-template-columns:130px 1fr; gap:20px; align-items:start; padding:18px 20px; border-bottom:1px solid var(--line); } .wire-rowwrap:last-child{ border-bottom:0; } .section.gray .wire-rowwrap{ border-color:rgba(0,29,52,0.16); } .wire-label{ font-family:var(--font-label); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--accent-ink); padding-top:6px; line-height:1.4; } .wire-boxes{ display:grid; gap:12px; } .wire-boxes.r1{ grid-template-columns:repeat(4,minmax(0,1fr)); } .wire-boxes.r2{ grid-template-columns:2fr 1fr; } .wire-boxes.r3{ grid-template-columns:repeat(3,minmax(0,1fr)); } .wire-boxes.r4{ grid-template-columns:1fr; } .wire-box{ background:var(--band); border:1px dashed var(--line-strong); border-radius:6px; min-height:52px; display:flex; align-items:center; justify-content:center; font-family:var(--font-label); font-size:11px; font-weight:600; color:var(--ink-3); text-align:center; padding:8px; } .wire-box.tall{ min-height:104px; } .section.gray .wire-box{ background:var(--band-2); } @media(max-width:640px){ .wire-rowwrap{ grid-template-columns:1fr; gap:10px; } .wire-boxes.r1{ grid-template-columns:repeat(2,1fr); } } /* ===== Dashboard-in-practice (worked page) ===== */ .demo-dash{ margin-top:22px; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--paper); max-width:940px; } .section.gray .demo-dash{ border-color:rgba(0,29,52,0.16); } .dd-row{ padding:20px 22px; border-bottom:1px solid var(--line); } .dd-row:last-child{ border-bottom:0; } .section.gray .dd-row{ border-color:rgba(0,29,52,0.16); } .dd-rlabel{ font-family:var(--font-label); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--accent-ink); margin-bottom:14px; } .dd-kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; } .dd-kpi{ border:1px solid var(--line); border-radius:8px; padding:14px 16px; } .section.gray .dd-kpi{ border-color:rgba(0,29,52,0.16); } .dd-kpi .k-l{ font-family:var(--font-label); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; color:var(--ink-3); } .dd-kpi .k-v{ font-family:var(--font-display); font-size:26px; font-weight:600; letter-spacing:-1px; color:var(--ink); margin-top:6px; line-height:1; } .dd-kpi .k-v .u{ font-size:14px; margin-left:2px; } .dd-kpi .k-d{ font-family:var(--font-label); font-size:11px; font-weight:600; margin-top:8px; color:var(--ink-3); } .dd-kpi .k-d.good{ color:var(--pos); } .dd-kpi .k-d.bad{ color:var(--neg); } .dd-2{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:24px; align-items:start; } .dd-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:start; } .dd-ph{ font-family:var(--font-label); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; color:var(--ink-3); margin-bottom:12px; } @media(max-width:760px){ .dd-kpis{ grid-template-columns:repeat(2,1fr); } .dd-2,.dd-3{ grid-template-columns:1fr; } } /* ===== Semantic color map (green/amber/red = good/caution/action) ===== */ .sem-map{ display:flex; flex-wrap:wrap; gap:14px; margin-top:20px; } .sem-item{ display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:100px; padding:9px 20px 9px 12px; } .section.gray .sem-item{ border-color:rgba(0,29,52,0.16); } .sem-item .sem-dot{ width:20px; height:20px; border-radius:50%; flex:none; } .sem-item .sem-txt{ font-family:var(--font-serif); font-size:15px; color:var(--ink); } .sem-item .sem-txt b{ font-weight:600; } .sem-note{ font-family:var(--font-serif); font-size:14.5px; color:var(--ink-3); margin-top:14px; max-width:760px; } /* ===== Pseudo-3D vs flat (avoid demo) ===== */ .threeD-compare{ display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:24px; border:1px solid var(--line); border-radius:8px; overflow:hidden; max-width:760px; } .threeD-cell{ padding:24px 26px; } .threeD-cell + .threeD-cell{ border-left:1px solid var(--line); } .threeD-cap{ font-family:var(--font-label); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:18px; } .threeD-cell.bad .threeD-cap{ color:var(--neg); } .threeD-cell.good .threeD-cap{ color:var(--pos); } .p3d-wrap{ display:flex; gap:26px; align-items:flex-end; height:130px; padding:14px 10px 0; perspective:560px; } .p3d-bar{ position:relative; width:40px; transform:rotateX(24deg) rotateY(-16deg); background:var(--accent); border-radius:2px 2px 0 0; } .p3d-bar::after{ content:''; position:absolute; top:0; right:-9px; width:9px; height:100%; background:rgba(0,29,52,0.42); transform:skewY(-45deg); transform-origin:top; } .p3d-bar::before{ content:''; position:absolute; top:-9px; left:0; width:100%; height:9px; background:rgba(0,29,52,0.20); transform:skewX(-45deg); transform-origin:left; } .flat-wrap{ display:flex; gap:26px; align-items:flex-end; height:130px; padding:0 10px; } .flat-bar{ width:40px; background:var(--accent); border-radius:2px 2px 0 0; } @media(max-width:600px){ .threeD-compare{ grid-template-columns:1fr; } .threeD-cell + .threeD-cell{ border-left:0; border-top:1px solid var(--line); } } /* ===== Live-data badge + source note ===== */ .live-badge{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-label); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; color:#fff; background:var(--pos); border-radius:100px; padding:5px 12px 4px; } .live-badge .ico{ width:14px; height:14px; color:#fff; } .src-note{ font-family:var(--font-label); font-size:11px; font-weight:600; color:var(--ink-3); margin-top:14px; letter-spacing:0.2px; } /* ===== Cheat sheet ===== */ .cheat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:0; margin-top:30px; border-top:1px solid var(--line); border-left:1px solid var(--line); } .section.gray .cheat-grid, .section.gray .cheat-card{ border-color:rgba(0,29,52,0.16); } .cheat-card{ padding:26px 28px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); } .cheat-card .cheat-h{ font-family:var(--font-label); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--accent-ink); margin-bottom:16px; } .cheat-list{ list-style:none; margin:0; padding:0; } .cheat-list li{ display:grid; grid-template-columns:1fr auto; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-family:var(--font-serif); font-size:14px; color:var(--ink-2); align-items:baseline; } .section.gray .cheat-list li{ border-color:rgba(0,29,52,0.16); } .cheat-list li:last-child{ border-bottom:0; } .cheat-list li b{ color:var(--ink); font-weight:600; font-family:var(--font-display); } .cheat-list li .cval{ font-family:var(--font-label); font-size:11.5px; font-weight:700; color:var(--ink-3); text-align:right; white-space:nowrap; } .cheat-sw{ display:inline-block; width:13px; height:13px; border-radius:3px; vertical-align:middle; margin-right:8px; } /* Dark/light toggle (canonical brand-tuned chrome) */ .topbar-end { display:flex; align-items:center; gap:14px; } .mode-toggle { background:transparent; border:1.5px solid rgba(234,241,246,0.28); border-radius:20px; padding:5px 13px 5px 9px; color:rgba(234,241,246,0.72); cursor:pointer; font-family:inherit; font-size:11px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; display:flex; align-items:center; gap:6px; white-space:nowrap; line-height:1; flex-shrink:0; } .mode-toggle:hover { border-color:rgba(234,241,246,0.55); color:#EAF1F6; } .t-d { display:inline-flex; align-items:center; gap:5px; } .t-l { display:none; } html[data-mode="dark"] .t-d { display:none; } html[data-mode="dark"] .t-l { display:inline-flex; align-items:center; gap:5px; } /* ===== Hamburger navigation ===== */ .hamburger{ display:inline-flex; flex-direction:column; justify-content:center; gap:4px; width:36px; height:30px; padding:0 7px; background:transparent; border:1.5px solid rgba(234,241,246,0.28); border-radius:7px; cursor:pointer; flex-shrink:0; } .hamburger span{ display:block; height:2px; width:100%; background:rgba(234,241,246,0.85); border-radius:2px; transition:transform .2s ease, opacity .2s ease; } .hamburger:hover{ border-color:rgba(234,241,246,0.55); } .hamburger.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); } .hamburger.is-open span:nth-child(2){ opacity:0; } .hamburger.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); } .nav-drawer{ position:absolute; top:100%; left:0; right:0; display:none; background:var(--navy); border-top:1px solid var(--on-dark-line); border-bottom:1px solid var(--on-dark-line); box-shadow:0 14px 28px rgba(0,29,52,0.30); max-height:78vh; overflow-y:auto; z-index:99; } .nav-drawer.open{ display:block; } .nav-drawer-inner{ max-width:1240px; margin:0 auto; padding:32px 64px 36px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr)); gap:28px 40px; } .nav-col .nav-h{ font-family:var(--font-label); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--accent); margin-bottom:12px; } .nav-col a{ display:block; position:relative; font-family:var(--font-body); font-size:13.5px; color:var(--on-dark); text-decoration:none; padding:6px 0 6px 16px; transition:color .15s; } .nav-col a::before{ content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:7px; height:7px; border-radius:50%; background:transparent; transition:background .15s; } .nav-col a:hover{ color:var(--on-dark-strong); } .nav-col a.active{ color:var(--on-dark-strong); font-weight:700; } .nav-col a.active::before{ background:var(--accent); } @media(max-width:760px){ .nav-drawer-inner{ padding:24px; gap:22px 24px; } } /* ===== Back to top ===== */ .to-top{ position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:50%; background:var(--navy); border:1.5px solid var(--on-dark-line); color:var(--on-dark-strong); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 18px rgba(0,29,52,0.28); opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .2s ease, transform .2s ease, visibility .2s ease, background .15s; z-index:120; padding:0; } .to-top.show{ opacity:1; visibility:visible; transform:translateY(0); } .to-top:hover{ background:var(--navy-700); border-color:var(--accent); } .to-top .ico{ width:22px; height:22px; color:currentColor; } @media(max-width:560px){ .to-top{ right:16px; bottom:16px; width:42px; height:42px; } } @supports(padding:max(0px)){ .to-top{ bottom:max(22px, env(safe-area-inset-bottom)); } }