/* ============================================================================ * research.icoco.uk — shared report stylesheet * * Loaded by every report page (and intended to also evolve into the index style). * Two themes (dark/light) selected via prefers-color-scheme; user override * supported by setting data-theme="dark" | "light" on (theme.js handles * the toggle and localStorage persistence). * * Tokens are GitHub Primer-inspired so both modes feel like the same product * across visits. Update tokens here; never hard-code colors in a report. * ========================================================================== */ /* ---- TOKENS ---- */ :root { /* Spacing */ --pad-page: 32px 28px; --pad-panel: 20px; --pad-callout: 12px 16px; --gap-grid: 16px; --radius-sm: 4px; --radius: 6px; --radius-lg: 8px; /* Type */ --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "SF Pro Display", "Segoe UI", sans-serif; --font-mono: "SF Mono", ui-monospace, Menlo, Monaco, monospace; --fs-body: 15px; --fs-h1: 30px; --fs-h2: 22px; --fs-h3: 17px; --fs-h4: 13px; --fs-small: 13px; --fs-xs: 11px; --lh-body: 1.65; /* Layout */ --max-w: 1280px; } /* Dark theme (default night) */ :root, [data-theme="dark"] { color-scheme: dark; --bg: #0e1117; --panel: #161b22; --panel-2: #1c2230; --line: #2a3142; --line-soft: #1f2632; --fg: #e6edf3; --fg-dim: #9aa6b2; --fg-muted: #6e7681; --accent: #5ab1ff; --accent-fg: #7cc4ff; --accent-soft: rgba(90, 177, 255, 0.08); --accent-line: rgba(90, 177, 255, 0.30); --good: #3fb950; --good-soft: rgba(63, 185, 80, 0.10); --bad: #f85149; --bad-soft: rgba(248, 81, 73, 0.08); --warn: #d29922; --warn-soft: rgba(210, 153, 34, 0.10); --code-bg: #0a0d12; --code-fg: #a6d3ff; --tag-bg: #2a3142; --row-hover: rgba(90, 177, 255, 0.05); --toc-bg: rgba(14, 17, 23, 0.95); } /* Light theme — applied when system prefers light AND no manual override */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg: #ffffff; --panel: #f6f8fa; --panel-2: #ffffff; --line: #d0d7de; --line-soft: #eaeef2; --fg: #1f2328; --fg-dim: #656d76; --fg-muted: #8c959f; --accent: #0969da; --accent-fg: #0550ae; --accent-soft: rgba(9, 105, 218, 0.08); --accent-line: rgba(9, 105, 218, 0.30); --good: #1a7f37; --good-soft: rgba(26, 127, 55, 0.10); --bad: #cf222e; --bad-soft: rgba(207, 34, 46, 0.08); --warn: #9a6700; --warn-soft: rgba(154, 103, 0, 0.10); --code-bg: #f6f8fa; --code-fg: #0550ae; --tag-bg: #eaeef2; --row-hover: rgba(9, 105, 218, 0.05); --toc-bg: rgba(255, 255, 255, 0.95); } } /* Manual light override — wins over prefers-color-scheme */ [data-theme="light"] { color-scheme: light; --bg: #ffffff; --panel: #f6f8fa; --panel-2: #ffffff; --line: #d0d7de; --line-soft: #eaeef2; --fg: #1f2328; --fg-dim: #656d76; --fg-muted: #8c959f; --accent: #0969da; --accent-fg: #0550ae; --accent-soft: rgba(9, 105, 218, 0.08); --accent-line: rgba(9, 105, 218, 0.30); --good: #1a7f37; --good-soft: rgba(26, 127, 55, 0.10); --bad: #cf222e; --bad-soft: rgba(207, 34, 46, 0.08); --warn: #9a6700; --warn-soft: rgba(154, 103, 0, 0.10); --code-bg: #f6f8fa; --code-fg: #0550ae; --tag-bg: #eaeef2; --row-hover: rgba(9, 105, 218, 0.05); --toc-bg: rgba(255, 255, 255, 0.95); } /* ---- RESET / BASE ---- */ * { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: var(--font-sans); background: var(--bg); color: var(--fg); line-height: var(--lh-body); font-size: var(--fs-body); /* Smooth color transitions when toggling theme */ transition: background-color 0.15s ease, color 0.15s ease; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .container { max-width: var(--max-w); margin: 0 auto; padding: var(--pad-page); } /* ---- HEADINGS ---- */ h1 { margin: 0 0 8px; font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.01em; } h2 { margin: 48px 0 16px; font-size: var(--fs-h2); font-weight: 600; border-left: 3px solid var(--accent); padding-left: 12px; } h3 { margin: 24px 0 12px; font-size: var(--fs-h3); font-weight: 600; } h4 { margin: 16px 0 8px; font-size: var(--fs-h4); font-weight: 600; color: var(--fg-dim); letter-spacing: 0.05em; text-transform: uppercase; } header { border-bottom: 1px solid var(--line); padding-bottom: 24px; margin-bottom: 32px; } /* When
is used as the *top-level* page header (no .container wrap, * e.g. the 2XY layout), give it page padding so it doesn't butt against the * viewport edge. SOXX uses
inside .container so this rule doesn't * apply there. */ body > header { padding: 40px 60px 24px; margin-bottom: 0; } .sub, .muted, .tagline { color: var(--fg-dim); font-size: 14px; } /* Top-level layout for the "section-as-card" report pattern (2XY). * SOXX uses .container + h2-divided sections instead; both work. */ body > nav { background: var(--panel); border-bottom: 1px solid var(--line); padding: 12px 60px; position: sticky; top: 0; z-index: 100; font-size: var(--fs-small); } body > nav a { color: var(--accent); text-decoration: none; margin-right: 18px; } body > nav a:hover { text-decoration: underline; } main { max-width: var(--max-w); margin: 0 auto; padding: 30px 60px 80px; } main > section { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 36px; margin-bottom: 28px; } main > section > h2 { margin: 0 0 16px; padding-bottom: 8px; padding-left: 0; border-left: none; border-bottom: 2px solid var(--accent); } main > section > h3 { margin: 22px 0 8px; } @media (max-width: 900px) { body > header, body > nav, main { padding-left: 20px; padding-right: 20px; } main > section { padding: 22px 18px; } } /* ---- TABLE OF CONTENTS / NAV ---- */ nav.toc { position: sticky; top: 0; background: var(--toc-bg); backdrop-filter: blur(8px); padding: 12px 0; border-bottom: 1px solid var(--line); z-index: 10; margin: -12px -28px 24px; padding-left: 28px; padding-right: 28px; overflow-x: auto; white-space: nowrap; } nav.toc a { color: var(--fg-dim); text-decoration: none; margin-right: 18px; font-size: var(--fs-small); font-weight: 500; } nav.toc a:hover { color: var(--accent); text-decoration: none; } /* ---- SURFACES ---- */ .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--pad-panel); margin: 16px 0; } .panel-soft, .cohort-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--pad-panel); margin: 16px 0; } .cohort-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; flex-wrap: wrap; gap: 8px; } .cohort-title h3 { margin: 0; } .cohort-tickers { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--accent); } /* ---- GRIDS ---- */ .grid { display: grid; gap: var(--gap-grid); } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-grid); margin: 12px 0; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-grid); } @media (max-width: 880px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* ---- KPI / STAT CARD ---- */ /* Canonical replacement for 2XY's old `.card-mini`. */ .kpi { display: flex; flex-direction: column; padding: 14px; background: var(--panel-2); border-radius: var(--radius); border: 1px solid var(--line); } .kpi-label, .kpi .label { font-size: var(--fs-xs); color: var(--fg-dim); letter-spacing: 0.05em; } .kpi-value, .kpi .num { font-size: 24px; font-weight: 700; margin-top: 4px; color: var(--accent); } .kpi-sub, .kpi .muted { font-size: 12px; color: var(--fg-dim); margin-top: 2px; } /* ---- CALLOUTS ---- */ /* Default: info (accent color). Variants by suffix. */ .callout { background: var(--accent-soft); border-left: 3px solid var(--accent); padding: var(--pad-callout); margin: 14px 0; font-size: 14px; border-radius: 0 var(--radius) var(--radius) 0; } .callout-good { background: var(--good-soft); border-left-color: var(--good); } .callout-warn { background: var(--warn-soft); border-left-color: var(--warn); } .callout-bad, .callout-danger { background: var(--bad-soft); border-left-color: var(--bad); } /* ---- TABLES ---- */ table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); } th { text-align: left; font-weight: 600; color: var(--fg-dim); border-bottom: 1px solid var(--line); padding: 10px 8px; cursor: pointer; user-select: none; } th:hover { color: var(--fg); } td { padding: 9px 8px; border-bottom: 1px solid var(--line-soft); } tr:hover td { background: var(--row-hover); } /* `table.summary` — wide data tables with right-aligned numeric columns and * a sticky header row. Used in big-grid stat tables (e.g. 2XY 20-instrument * table). Numeric td cells right-align by default; first three columns * (symbol / group / start) override back to left. */ table.summary { font-size: 12.5px; margin-top: 14px; } table.summary th { position: sticky; top: 50px; background: var(--panel); z-index: 5; text-align: right; } table.summary th:first-child, table.summary th:nth-child(2), table.summary th:nth-child(3) { text-align: left; } table.summary td { text-align: right; font-variant-numeric: tabular-nums; } table.summary td:first-child { font-weight: 600; text-align: left; } table.summary td:nth-child(2), table.summary td:nth-child(3) { text-align: left; } tr.blowup { background: var(--bad-soft); color: var(--bad); } .num { text-align: right; font-variant-numeric: tabular-nums; } .pos { color: var(--good); } .neg { color: var(--bad); } .neu { color: var(--fg-dim); } /* ---- INLINE BITS ---- */ .highlight { background: var(--warn-soft); padding: 2px 4px; border-radius: 3px; font-weight: 600; } code, pre { background: var(--code-bg); font-family: var(--font-mono); font-size: var(--fs-small); } code { padding: 1.5px 5px; border-radius: 3px; color: var(--code-fg); } pre { padding: 14px 18px; border-radius: var(--radius); overflow-x: auto; line-height: 1.5; } .code { font-family: var(--font-mono); font-size: var(--fs-small); background: var(--code-bg); padding: 1px 6px; border-radius: 3px; color: var(--code-fg); } .formula { background: var(--accent-soft); border-left: 4px solid var(--accent); padding: 12px 16px; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.7; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } /* ---- TAGS ---- */ .tag { display: inline-block; font-size: var(--fs-xs); padding: 2px 8px; border-radius: 10px; background: var(--tag-bg); color: var(--fg-dim); margin-right: 4px; margin-bottom: 4px; } .tag-ai { background: var(--accent-soft); color: var(--accent-fg); } .tag-equip { background: var(--good-soft); color: var(--good); } .tag-analog { background: var(--warn-soft); color: var(--warn); } .tag-memory { background: var(--bad-soft); color: var(--bad); } /* ---- CHARTS ---- */ .chart { width: 100%; height: 440px; margin: 8px 0; } .chart-tall { height: 560px; } .chart-short { height: 300px; } /* Chart-guide three-pane explainer (SOXX pattern). */ .chart-guide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0 6px; font-size: var(--fs-small); } @media (max-width: 760px) { .chart-guide { grid-template-columns: 1fr; } } .cg { padding: 12px 14px; border-radius: var(--radius); background: var(--panel-2); border: 1px solid var(--line); } .cg-label { display: block; font-size: var(--fs-xs); color: var(--fg-dim); letter-spacing: 0.05em; margin-bottom: 4px; text-transform: uppercase; } .cg-howto .cg-label { color: var(--accent); } .cg-saw .cg-label { color: var(--warn); } .cg-action .cg-label { color: var(--good); } .cg p { margin: 0; line-height: 1.55; } .cg strong { color: var(--fg); } /* ---- LISTS ---- */ ul.insights, ul.facts { padding-left: 20px; } ul.insights li, ul.facts li { margin-bottom: 8px; } /* ---- MISC ---- */ .disclaimer { font-size: 12px; color: var(--fg-dim); font-style: italic; margin-top: 8px; padding: 10px; background: var(--panel); border-radius: var(--radius); } footer { margin-top: 60px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--fg-dim); font-size: 12px; text-align: center; } /* Top-level footer (2XY layout — no .container wrap) needs page padding. */ body > footer { margin-top: 0; padding: 30px 60px; } @media (max-width: 900px) { body > footer { padding-left: 20px; padding-right: 20px; } } /* ---- THEME TOGGLE BUTTON ---- */ /* Inserted by theme.js; styles here so it lays out before JS hydrates. */ #_theme_toggle { position: fixed; right: 16px; bottom: 16px; width: 36px; height: 36px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); color: var(--fg-dim); cursor: pointer; z-index: 50; font-size: 16px; line-height: 34px; text-align: center; user-select: none; transition: color 0.15s, border-color 0.15s, background 0.15s; } #_theme_toggle:hover { color: var(--accent); border-color: var(--accent); } /* ---- PRINT ---- * * Force light-theme tokens in print, regardless of the live theme. * The previous version only overrode `body` and a couple of components, * so KPI cards, callouts, code blocks etc. kept their dark-theme values * and printed as black blocks with unreadable text. * * Tokens are redefined here at HIGH specificity so they win over both * `:root` and `[data-theme="dark|light"]`. */ @media print { :root, [data-theme="dark"], [data-theme="light"] { color-scheme: light; --bg: #ffffff; --panel: #f6f8fa; --panel-2: #ffffff; --line: #d0d7de; --line-soft: #eaeef2; --fg: #1f2328; --fg-dim: #4d5560; --fg-muted: #656d76; --accent: #0969da; --accent-fg: #0550ae; --accent-soft: rgba(9, 105, 218, 0.06); --accent-line: rgba(9, 105, 218, 0.30); --good: #1a7f37; --good-soft: rgba(26, 127, 55, 0.07); --bad: #cf222e; --bad-soft: rgba(207, 34, 46, 0.06); --warn: #9a6700; --warn-soft: rgba(154, 103, 0, 0.08); --code-bg: #f6f8fa; --code-fg: #0550ae; --tag-bg: #eaeef2; --row-hover: transparent; --toc-bg: #ffffff; } body { background: #fff; color: var(--fg); } .container, main { max-width: none; } nav.toc, body > nav, #_theme_toggle { display: none; } .panel, .panel-soft, .cohort-card, main > section, .kpi, .callout, .cg, .formula, pre, table.summary th { break-inside: avoid; } .chart { page-break-inside: avoid; } a { color: var(--accent); text-decoration: underline; } }