/* ==========================================================================
Darts Cricket Strategy Research — site2 stylesheet
Pure CSS, no dependencies, no build step. Google Fonts loaded via
in each page's (see TEMPLATE.html).
Fonts: Inter (headings/nav/UI chrome), Source Serif 4 (body prose).
Ported near-wholesale from docs/site/css/style.css (the design system
graded B- in docs/SITE_REVIEW_2026-07-02.md), with these deliberate
changes:
1. Mobile-first: base styles target narrow screens; desktop styles
live in @media (min-width: 769px) blocks.
2. AA contrast fixes baked into tokens (the old site failed twice):
- --color-red lightened #e74c3c -> #ea5a49 so dark text on win-low
cells is 5.0:1 (old #222-on-red was 4.16:1).
- .text-accent now maps to --color-link (#a65a0a, 4.9:1 on bg);
raw accent #e88a1a as text was 2.48:1. Accent is never text.
- .param-value.true/.false use --color-green-text/--color-red-text
(AA) instead of the quantitative cell hues.
3. Previously undefined tokens defined: --space-2xs.
(--border-radius-md dropped with the asym-controls block.)
4. Dead selectors trimmed: advisor board/output (interactive advisor
retired — advice chapter is static), asym-controls, condition-toggle
(use .toggle-group), decision-tree styles.
5. New components: .freeze-badge (research-freeze stamp) and
.chapter-nav (prev/next footer).
========================================================================== */
/* --------------------------------------------------------------------------
1. CSS Custom Properties
-------------------------------------------------------------------------- */
:root {
/* Core palette — warm off-white background, near-black text, single orange accent */
--color-bg: #fafaf5;
--color-text: #2d2d2d;
--color-heading: #1a1a1a;
--color-accent: #e88a1a; /* structure only (borders, rings, dots) — NEVER text: 2.48:1 on bg */
--color-accent-hover: #d07a10;
--color-card-bg: #fffefb;
--color-card-border: #e0ddd5;
--color-card-border-hover: #c9c4b8;
--color-nav-bg: #1a1a1a;
--color-nav-text: #fafaf5;
--color-table-header: #f5f5f0;
--color-hover-tint: rgba(232, 138, 26, 0.08);
--color-diagonal: #f0f0eb;
--color-text-diagonal: #8e8e88;
--color-code-bg: #f0efea;
--color-blockquote-bg: #fdf8f2;
/* Text — opacity-free muted tones */
--color-text-muted: #6b6b66; /* 5.1:1 on --color-bg — AA normal text */
--color-text-subtle: #8a8a84; /* AA Large only — footer, author credits */
/* Links — distinct from --color-accent so the accent stays reserved for
structural emphasis. Same hue family, 4.9:1 on bg (AA normal text). */
--color-link: #a65a0a;
--color-link-hover: #7a4108;
/* Quantitative encoding — win-rate cells ONLY (red/yellow/green never
decorate). Cell text must be var(--color-heading):
green 8.3:1, yellow 10.5:1, red 5.0:1 — all AA. */
--color-green: #2ecc71;
--color-yellow: #f1c40f;
--color-red: #ea5a49; /* lightened from #e74c3c for AA dark-text headroom */
/* Semantic red surface tokens (pending callouts, error states) */
--color-red-bg: #fff5f5;
--color-red-border: #fecaca;
--color-red-text: #991b1b; /* 7.9:1 on bg */
/* Semantic text variants of the quantitative hues — use THESE for colored
text (version labels, true/false badges); the cell hues are backgrounds. */
--color-green-text: #1a8a4a; /* 4.2:1 — AA Large / bold ≥18.66px only; pair with weight 600+ at small sizes */
/* Phase badges — categorical labels for strategy phases (Score/Cover/
Chase/Close/Redirect). Tinted background + accessible foreground. */
--phase-score-bg: rgba(46, 204, 113, 0.15);
--phase-score-text: #1a8a4a;
--phase-cover-bg: rgba(241, 196, 15, 0.2);
--phase-cover-text: #9a7d0a;
--phase-chase-bg: rgba(231, 76, 60, 0.15);
--phase-chase-text: #c0392b;
--phase-close-bg: rgba(0, 0, 0, 0.06);
--phase-close-text: #666666;
--phase-redirect-bg: rgba(155, 89, 182, 0.15);
--phase-redirect-text: #7d3c98;
/* Data-viz categorical palette — LEGITIMATE exception to the "no decorative
color" rule. ONLY for encoding the four dart-outcome categories on the
methodology chart (triple/double/single/miss). If another chart adds
non-ordinal categorical data, extend this palette — do not reach for
--color-accent or the win-rate tokens. */
--data-triple: #2ecc71;
--data-double: #3498db;
--data-single: #f39c12;
--data-miss: #bdc3c7;
--data-highlight: #e67e22;
/* Heatmap — 6-step sequential ramp, warm off-white to accent. Ordinal
(not categorical), encoding win-rate magnitude in grid searches.
Dark text on every step: worst case heat-6 is 5.4:1. */
--heat-1: #fee0d2;
--heat-2: #fdccb8;
--heat-3: #fdb97e;
--heat-4: #fd9243;
--heat-5: #e88a1a;
--heat-6: #d07a10;
/* Nav active/hover tint — stronger than --color-hover-tint for persistent state. */
--color-nav-active-tint: rgba(232, 138, 26, 0.1);
--color-nav-active-tint-mobile: rgba(232, 138, 26, 0.15);
/* Typography — families */
--font-body: 'Source Serif 4', Georgia, 'Charter', serif;
--font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
/* Type scale — modular, ~1.25 (major third). Fluid via clamp(). */
--text-body: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
--text-display: clamp(2.5rem, 6vw, 4rem); /* headline stat figures — the loudest type on the site */
--text-h1: clamp(2rem, 1.6rem + 1.6vw, 2.5rem);
--text-h2: clamp(1.45rem, 1.25rem + 0.7vw, 1.75rem);
--text-h3: 1.25rem;
--text-h4: 1.05rem;
--text-h5: 0.95rem;
--text-h6: 0.9rem;
--text-ui-sm: 0.8rem; /* nav links, small buttons, labels */
--text-ui-xs: 0.75rem; /* badges, hero-author */
--text-matrix: clamp(0.7rem, 0.65rem + 0.2vw, 0.8rem);
--text-caption: 0.85rem; /* footer, small-print */
/* Line-heights by role */
--leading-body: 1.65;
--leading-heading: 1.2;
--leading-ui: 1.4;
/* Spacing */
--space-2xs: 0.1rem; /* was undefined in the old sheet — now real */
--space-xs: 0.2rem;
--space-sm: 0.4rem;
--space-md: 0.75rem;
--space-lg: 1rem;
--space-xl: 1.5rem;
--space-2xl: 2rem;
--space-3xl: 2.5rem;
/* Layout */
--max-width: 1100px;
--side-padding: 6rem; /* desktop only; base container uses --space-md */
--nav-height: 44px;
--border-radius: 3px;
--border-radius-sm: 2px;
--border-radius-pill: 100px;
/* Shadows — the aesthetic is 1px borders, not shadows */
--shadow-card: none;
--shadow-card-hover: none;
--shadow-nav: 0 1px 0 rgba(0, 0, 0, 0.1);
/* Motion — exponential ease-out; no bounce/elastic */
--ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
--dur-fast: 0.15s;
--dur-base: 0.2s;
--dur-slow: 0.3s;
}
/* --------------------------------------------------------------------------
2. Reset & Base
-------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Visible keyboard focus on every interactive element (:focus-visible so
mouse clicks don't leave a lingering ring). Do not remove or thin this —
it is the site's WCAG 2.4.7 compliance. */
*:focus {
outline: none;
}
*:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
border-radius: var(--border-radius-sm);
}
/* Nav is near-black; the orange ring reads poorly there — invert. */
.nav *:focus-visible {
outline-color: var(--color-bg);
}
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--nav-height) + var(--space-lg));
}
body {
margin: 0;
padding: 0;
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--leading-body);
color: var(--color-text);
background-color: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
color: var(--color-heading);
line-height: var(--leading-heading);
margin-top: var(--space-2xl);
margin-bottom: var(--space-md);
font-weight: 700;
letter-spacing: -0.01em;
}
h1 { font-size: var(--text-h1); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: var(--text-h2); font-weight: 800; }
h3 { font-size: var(--text-h3); font-weight: 700; }
h4 { font-size: var(--text-h4); font-weight: 700; }
h5 { font-size: var(--text-h5); font-weight: 700; }
h6 { font-size: var(--text-h6); font-weight: 700; }
p {
margin-top: 0;
margin-bottom: var(--space-md);
}
a {
color: var(--color-link);
text-decoration: none;
transition: color var(--dur-base) var(--ease-out-expo);
}
a:hover,
a:focus {
color: var(--color-link-hover);
text-decoration: underline;
}
img {
max-width: 100%;
height: auto;
display: block;
}
ul, ol {
padding-left: var(--space-xl);
margin-bottom: var(--space-md);
}
li {
margin-bottom: var(--space-xs);
}
hr {
border: none;
border-top: 1px solid var(--color-card-border);
margin: var(--space-2xl) 0;
}
/* Skip link — first focusable element on every page */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 2000;
background: var(--color-nav-bg);
color: var(--color-nav-text);
padding: var(--space-sm) var(--space-lg);
font-family: var(--font-ui);
font-size: var(--text-ui-sm);
}
.skip-link:focus {
left: 0;
}
/* --------------------------------------------------------------------------
3. Navigation — fixed top bar. MOBILE-FIRST: base = hamburger panel with
flattened groups; desktop dropdowns arrive at min-width: 769px.
Markup contract lives in TEMPLATE.html (NAV:BEGIN/NAV:END).
-------------------------------------------------------------------------- */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
height: var(--nav-height);
background: var(--color-nav-bg);
box-shadow: var(--shadow-nav);
display: flex;
align-items: center;
justify-content: center;
}
.nav-inner {
width: 100%;
max-width: var(--max-width);
padding: 0 var(--space-md);
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-brand {
font-family: var(--font-heading);
font-weight: 600;
font-size: var(--text-ui-sm);
color: var(--color-nav-text);
text-decoration: none;
white-space: nowrap;
letter-spacing: 0.02em;
}
.nav-brand:hover {
color: var(--color-accent);
text-decoration: none;
}
/* Hamburger toggle — visible at base (mobile) */
.nav-toggle {
display: block;
background: none;
border: none;
cursor: pointer;
padding: var(--space-xs);
}
.nav-toggle span {
display: block;
width: 22px;
height: 2px;
background: var(--color-nav-text);
margin: 5px 0;
border-radius: 2px;
transition: transform var(--dur-slow) var(--ease-out-expo), opacity var(--dur-slow) var(--ease-out-expo);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Mobile panel — hidden until the hamburger opens it */
.nav-links {
display: none;
position: absolute;
top: var(--nav-height);
left: 0;
right: 0;
flex-direction: column;
background: var(--color-nav-bg);
padding: var(--space-sm) 0;
box-shadow: var(--shadow-nav);
gap: 0;
list-style: none;
margin: 0;
}
.nav-links.open {
display: flex;
}
.nav-links li {
margin: 0;
}
.nav-links a {
font-family: var(--font-heading);
font-weight: 500;
color: var(--color-nav-text);
text-decoration: none;
transition: color var(--dur-base) var(--ease-out-expo), background-color var(--dur-base) var(--ease-out-expo);
opacity: 0.7;
display: block;
padding: var(--space-sm) var(--space-lg);
font-size: var(--text-body);
border-radius: 0;
}
.nav-links a:hover {
color: var(--color-accent);
opacity: 1;
text-decoration: none;
}
.nav-links a:hover,
.nav-links a.active {
background: var(--color-nav-active-tint-mobile);
}
.nav-links a.active {
color: var(--color-accent);
opacity: 1;
}
/* Groups on mobile: flattened — the toggle renders as a section label and
the submenu is always visible with an indent. */
.nav-links .nav-group {
position: static;
}
.nav-group-toggle {
font-family: var(--font-heading);
font-weight: 500;
color: var(--color-nav-text);
background: none;
border: none;
display: block;
width: 100%;
text-align: left;
padding: var(--space-sm) var(--space-lg);
border-radius: 0;
cursor: default;
opacity: 0.5;
letter-spacing: 0.03em;
text-transform: uppercase;
font-size: var(--text-ui-xs);
transition: color var(--dur-base) var(--ease-out-expo),
background-color var(--dur-base) var(--ease-out-expo),
opacity var(--dur-base) var(--ease-out-expo);
}
.nav-group-toggle .nav-chevron {
display: none;
}
.nav-group.has-active > .nav-group-toggle {
background: transparent;
}
.nav-submenu {
position: static;
min-width: 0;
background: transparent;
border: none;
box-shadow: none;
border-radius: 0;
opacity: 1;
visibility: visible;
transform: none;
padding: 0;
margin: 0;
list-style: none;
transition: none;
}
.nav-submenu li {
margin: 0;
}
.nav-submenu a {
padding-left: calc(var(--space-lg) + var(--space-md));
white-space: normal;
}
/* Desktop nav — horizontal bar with hover/click dropdowns */
@media (min-width: 769px) {
.nav-inner {
padding: 0 var(--side-padding);
}
.nav-toggle {
display: none;
}
.nav-links {
display: flex;
position: static;
flex-direction: row;
align-items: center;
gap: var(--space-xs);
background: transparent;
padding: 0;
box-shadow: none;
}
.nav-links a {
display: inline-block;
font-size: var(--text-ui-sm);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--border-radius-sm);
}
.nav-links a:hover {
background: transparent;
}
.nav-links a.active {
background: var(--color-nav-active-tint);
}
.nav-links .nav-group {
position: relative;
}
/* Invisible hover-bridge over the 4px gap between toggle and submenu so
the dropdown doesn't close as the cursor crosses. Only interactive
while hovered/open so it never blocks adjacent nav items. */
.nav-group::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 6px;
pointer-events: none;
}
.nav-group:hover::after,
.nav-group.open::after {
pointer-events: auto;
}
.nav-group-toggle {
display: inline-flex;
align-items: center;
gap: 0.35em;
width: auto;
font-size: var(--text-ui-sm);
text-transform: none;
letter-spacing: normal;
padding: var(--space-xs) var(--space-sm);
border-radius: var(--border-radius-sm);
cursor: pointer;
opacity: 0.7;
}
.nav-group-toggle .nav-chevron {
display: inline-block;
font-size: 0.7em;
line-height: 1;
transition: transform var(--dur-base) var(--ease-out-expo);
}
.nav-group-toggle:hover,
.nav-group-toggle:focus-visible,
.nav-group.open > .nav-group-toggle {
color: var(--color-accent);
opacity: 1;
}
/* Parent stays highlighted when a child page is active. */
.nav-group.has-active > .nav-group-toggle {
color: var(--color-accent);
opacity: 1;
background: var(--color-nav-active-tint);
}
.nav-group.open > .nav-group-toggle .nav-chevron,
.nav-group:hover > .nav-group-toggle .nav-chevron {
transform: rotate(180deg);
}
.nav-submenu {
position: absolute;
top: calc(100% + 4px);
left: 0;
min-width: 13em;
background: var(--color-nav-bg);
border: 1px solid var(--color-card-border);
border-radius: var(--border-radius-sm);
box-shadow: var(--shadow-nav);
padding: var(--space-2xs) 0;
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity var(--dur-base) var(--ease-out-expo),
transform var(--dur-base) var(--ease-out-expo),
visibility 0s linear var(--dur-base);
z-index: 1001;
}
/* Hover opens; click/focus opens via .open (JS-managed, mutually
exclusive — js/nav.js closes siblings). We deliberately do NOT use
:focus-within — it stuck two dropdowns open at once on the old site. */
.nav-group:hover > .nav-submenu,
.nav-group.open > .nav-submenu {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity var(--dur-base) var(--ease-out-expo),
transform var(--dur-base) var(--ease-out-expo),
visibility 0s linear 0s;
}
.nav-submenu a {
display: block;
padding: var(--space-xs) var(--space-md);
padding-left: var(--space-md);
border-radius: 0;
opacity: 0.85;
white-space: nowrap;
font-size: var(--text-ui-sm);
}
.nav-submenu a:hover {
background: var(--color-nav-active-tint);
opacity: 1;
}
.nav-submenu a.active {
background: var(--color-nav-active-tint);
color: var(--color-accent);
opacity: 1;
}
}
/* --------------------------------------------------------------------------
4. Hero
-------------------------------------------------------------------------- */
.hero {
padding-top: calc(var(--nav-height) + var(--space-2xl));
padding-bottom: var(--space-xl);
text-align: left;
}
.hero-title {
font-family: var(--font-heading);
font-size: var(--text-h1);
font-weight: 800;
letter-spacing: -0.02em;
color: var(--color-heading);
margin: 0 0 var(--space-sm) 0;
line-height: var(--leading-heading);
}
.hero-subtitle {
font-family: var(--font-body);
font-size: var(--text-body);
color: var(--color-text-muted);
margin: 0 0 var(--space-sm) 0;
line-height: var(--leading-body);
}
.hero-author {
font-family: var(--font-heading);
font-size: var(--text-ui-xs);
color: var(--color-text-subtle);
margin: 0;
letter-spacing: 0.01em;
}
/* Research-freeze badge — REQUIRED near the top of any page that states a
champion or ranking claim. The date is fixed project-wide: July 2, 2026.
Inline-flex pill, Inter, subtle border; the small accent dot is a
functional status indicator, not decoration. */
.freeze-badge {
display: inline-flex;
align-items: center;
gap: 0.5em;
font-family: var(--font-ui);
font-size: var(--text-ui-xs);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-text-muted);
background: var(--color-card-bg);
border: 1px solid var(--color-card-border);
border-radius: var(--border-radius-pill);
padding: 3px 10px;
margin: var(--space-md) 0 0;
}
.freeze-badge::before {
content: '';
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--color-accent);
flex-shrink: 0;
}
/* TL;DR strip — headline findings as inline number + prose, inside the hero
so it reads above the fold. Each finding is a paragraph with its figure at
display size and the rest as continuous research prose. */
.hero-tldr {
margin: var(--space-xl) 0 0;
padding-top: var(--space-xl);
border-top: 1px solid var(--color-card-border);
}
.hero-tldr-grid {
display: grid;
gap: var(--space-xl);
}
.hero-tldr-label {
font-family: var(--font-heading);
font-size: var(--text-ui-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-muted);
margin: 0 0 var(--space-sm);
}
.hero-tldr-item {
margin: 0;
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--leading-body);
color: var(--color-text);
max-width: 62ch;
}
.hero-tldr-figure {
display: block;
font-family: var(--font-heading);
font-size: var(--text-display);
font-weight: 800;
line-height: 1;
color: var(--color-heading);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
margin-bottom: var(--space-sm);
}
.hero-tldr-item a {
color: var(--color-link);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
@media (min-width: 720px) {
.hero-tldr-grid {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
}
.hero-tldr-item {
max-width: none;
}
}
/* Collapsed intro — "If you're new to cricket" details affordance. */
details.intro-details {
margin: var(--space-lg) 0;
padding: 0;
border: none;
background: transparent;
}
details.intro-details > summary {
cursor: pointer;
font-family: var(--font-heading);
font-size: var(--text-ui-sm);
color: var(--color-link);
padding: var(--space-sm) 0;
list-style: none;
display: inline-block;
}
details.intro-details > summary::-webkit-details-marker {
display: none;
}
details.intro-details > summary::before {
content: '\25B8 ';
display: inline-block;
margin-right: 0.25em;
transition: transform var(--dur-base) var(--ease-out-expo);
}
details.intro-details[open] > summary::before {
content: '\25BE ';
}
details.intro-details .intro-body {
margin-top: var(--space-md);
padding-left: var(--space-md);
border-left: 1px solid var(--color-card-border);
}
/* --------------------------------------------------------------------------
5. Layout — container, page content, sections
-------------------------------------------------------------------------- */
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--space-md);
}
@media (min-width: 769px) {
.container {
padding: 0 var(--side-padding);
}
}
/* Account for the fixed nav on all pages */
.page-content {
padding-top: calc(var(--nav-height) + var(--space-xl));
padding-bottom: var(--space-2xl);
}
.section {
margin-bottom: var(--space-xl);
}
@media (min-width: 769px) {
.section {
margin-bottom: var(--space-2xl);
}
}
/* Prose line-length — direct children of a section get a ~68ch measure.
Tables, cards, callouts, and matrices keep the full width. */
.section > p,
.section > ul,
.section > ol,
.section > blockquote {
max-width: 68ch;
}
.section-title {
border-bottom: 1px solid var(--color-card-border);
padding-bottom: var(--space-sm);
margin-top: var(--space-2xl);
}
/* --------------------------------------------------------------------------
6. Cards
-------------------------------------------------------------------------- */
.card {
background: var(--color-card-bg);
border: 1px solid var(--color-card-border);
border-radius: var(--border-radius);
padding: var(--space-md);
margin-bottom: var(--space-md);
}
.card:hover {
border-color: var(--color-card-border-hover);
}
.card-title {
font-family: var(--font-heading);
font-size: var(--text-h5);
font-weight: 700;
color: var(--color-heading);
margin: 0 0 var(--space-xs) 0;
}
.card-body {
margin: 0;
}
.card-body p:last-child {
margin-bottom: 0;
}
/* --------------------------------------------------------------------------
7. Callouts — key findings, features, updates, pending data
-------------------------------------------------------------------------- */
.callout {
background: color-mix(in oklab, var(--color-accent) 3%, var(--color-card-bg));
border: 1px solid var(--color-card-border);
border-radius: var(--border-radius);
padding: var(--space-md);
margin: var(--space-lg) 0;
}
.callout-title {
font-family: var(--font-heading);
font-size: var(--text-ui-sm);
font-weight: 600;
color: var(--color-link);
margin: 0 0 var(--space-xs) 0;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.callout p:last-child {
margin-bottom: 0;
}
/* Feature variant — the single headline finding on a page. */
.callout--feature {
padding: var(--space-xl) var(--space-xl) var(--space-lg);
margin: var(--space-xl) 0;
border-color: color-mix(in oklab, var(--color-accent) 30%, var(--color-card-border));
background: color-mix(in oklab, var(--color-accent) 6%, var(--color-card-bg));
}
.callout--feature .callout-title {
font-size: var(--text-h4);
letter-spacing: 0.02em;
}
/* Compact grid of secondary findings side-by-side. */
.callout-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
gap: var(--space-md);
margin: var(--space-lg) 0;
}
.callout-grid .callout {
margin: 0;
}
/* Update/addendum variant — status note, not a headline finding. */
.callout--update {
border-color: var(--color-card-border-hover);
background: var(--color-blockquote-bg);
}
.callout--update .callout-title {
color: var(--color-text-muted);
font-style: italic;
text-transform: none;
letter-spacing: 0;
}
/* Regime variant — three side-by-side panels with vertical dividers.
Mobile-first: stacked with horizontal dividers; columns at ≥609px. */
.callout--regime .regime-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
margin-top: var(--space-md);
}
.callout--regime .regime-grid > div {
border-top: 1px solid var(--color-card-border);
padding-top: var(--space-md);
}
.callout--regime .regime-grid > div:first-child {
border-top: none;
padding-top: 0;
}
@media (min-width: 609px) {
.callout--regime .regime-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-lg);
}
.callout--regime .regime-grid > div {
border-top: none;
padding-top: 0;
border-left: 1px solid var(--color-card-border);
padding-left: var(--space-md);
}
.callout--regime .regime-grid > div:first-child {
border-left: none;
padding-left: 0;
}
}
.callout--regime .regime-label {
font-family: var(--font-heading);
font-size: var(--text-ui-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-muted);
margin: 0 0 var(--space-xs);
}
.callout--regime .regime-leaders {
font-family: var(--font-heading);
font-size: var(--text-h4);
font-weight: 700;
color: var(--color-heading);
margin: 0 0 var(--space-xs);
letter-spacing: -0.01em;
}
.callout--regime .regime-desc {
margin: 0;
font-size: var(--text-ui-sm);
color: var(--color-text);
line-height: var(--leading-ui);
}
/* Pending-data callout — red-bordered, for items awaiting analysis ONLY. */
.callout-pending {
background: var(--color-red-bg);
border: 1px solid var(--color-red-border);
border-radius: var(--border-radius);
padding: var(--space-md);
margin: var(--space-lg) 0;
}
.callout-pending .callout-title,
.callout-pending p {
color: var(--color-red-text);
}
.text-pending {
color: var(--color-red-text);
font-weight: 600;
}
/* --------------------------------------------------------------------------
8. Matrix table — win-rate grids
-------------------------------------------------------------------------- */
.matrix-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: var(--space-lg) calc(-1 * var(--space-md));
border: 1px solid var(--color-card-border);
border-left: none;
border-right: none;
border-radius: 0;
/* Fade mask at the edges signals scrollable overflow without JS. */
mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
}
@media (min-width: 769px) {
.matrix-wrapper {
margin: var(--space-lg) 0;
border-left: 1px solid var(--color-card-border);
border-right: 1px solid var(--color-card-border);
border-radius: var(--border-radius);
}
}
/* Full-bleed matrix — breaks out of .container on wide screens */
.matrix-full-bleed {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
padding: 0 var(--space-xs);
box-sizing: border-box;
}
@media (min-width: 481px) {
.matrix-full-bleed {
padding: 0 var(--space-lg);
}
}
.matrix-table {
border-collapse: collapse;
font-family: var(--font-mono);
font-size: var(--text-matrix);
white-space: nowrap;
width: 100%;
table-layout: fixed;
}
.matrix-table th,
.matrix-table td {
border: 1px solid var(--color-card-border);
padding: 1px 1px;
text-align: center;
overflow: hidden;
}
@media (min-width: 481px) {
.matrix-table th,
.matrix-table td {
padding: 2px 1px;
}
}
.matrix-table th {
background: var(--color-table-header);
font-family: var(--font-heading);
font-weight: 600;
font-size: var(--text-matrix);
color: var(--color-heading);
}
/* Row headers (first column) */
.matrix-table th:first-child,
.matrix-table td:first-child {
background: var(--color-table-header);
font-family: var(--font-heading);
font-weight: 600;
font-size: var(--text-matrix);
text-align: left;
padding-left: 4px;
width: 2.5em;
}
.matrix-table thead th:first-child {
z-index: 4;
}
.matrix-table .matrix-diagonal {
background: var(--color-diagonal);
color: var(--color-text-diagonal);
}
.matrix-cell {
transition: background-color var(--dur-fast) var(--ease-out-expo);
cursor: default;
}
/* Average column — visually separated from the matrix */
.matrix-avg-header,
.matrix-avg-cell {
border-left: 2px solid var(--color-heading) !important;
}
.matrix-avg-cell {
font-weight: 700;
}
/* Hover highlight — inset box-shadow preserves the win-rate hue underneath.
Row is the narrative ("this strategy vs the field") so it dominates. */
.matrix-hover-row {
box-shadow: inset 0 0 0 2px var(--color-heading);
position: relative;
z-index: 2;
}
.matrix-hover-col {
box-shadow: inset 0 0 0 1px var(--color-text-muted);
position: relative;
z-index: 1;
}
.matrix-hover-row.matrix-hover-col {
box-shadow: inset 0 0 0 2px var(--color-heading);
}
/* --------------------------------------------------------------------------
9. Expandable cards — / disclosures
-------------------------------------------------------------------------- */
details.strategy-card {
background: var(--color-card-bg);
border: 1px solid var(--color-card-border);
border-radius: var(--border-radius);
margin-bottom: var(--space-sm);
overflow: hidden;
}
details.strategy-card summary {
font-family: var(--font-heading);
font-weight: 600;
font-size: var(--text-body);
color: var(--color-heading);
padding: var(--space-sm) var(--space-md);
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
transition: background-color var(--dur-fast) var(--ease-out-expo);
user-select: none;
}
details.strategy-card summary::-webkit-details-marker {
display: none;
}
details.strategy-card summary::after {
content: '';
display: inline-block;
width: 8px;
height: 8px;
border-right: 2px solid var(--color-text);
border-bottom: 2px solid var(--color-text);
transform: rotate(45deg);
transition: transform var(--dur-slow) var(--ease-out-expo);
margin-left: var(--space-md);
flex-shrink: 0;
opacity: 0.5;
}
details.strategy-card[open] summary::after {
transform: rotate(-135deg);
}
details.strategy-card summary:hover {
background-color: var(--color-hover-tint);
}
details.strategy-card .strategy-content {
padding: 0 var(--space-md) var(--space-md);
border-top: 1px solid var(--color-card-border);
animation: slideDown var(--dur-base) var(--ease-out-expo);
}
@keyframes slideDown {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.strategy-content p:last-child {
margin-bottom: 0;
}
/* Tag pills inside cards */
.strategy-tag {
display: inline-block;
font-family: var(--font-heading);
font-size: var(--text-ui-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 2px 8px;
border-radius: var(--border-radius-pill);
margin-right: var(--space-xs);
background: var(--color-hover-tint);
color: var(--color-link);
}
/* --------------------------------------------------------------------------
10. Rankings table
-------------------------------------------------------------------------- */
.rankings-table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.rankings-table {
width: 100%;
border-collapse: collapse;
margin: var(--space-md) 0;
font-family: var(--font-heading);
font-size: var(--text-ui-sm);
}
.rankings-table th {
background: var(--color-table-header);
font-weight: 700;
text-align: left;
padding: var(--space-sm) var(--space-md);
border-bottom: 2px solid var(--color-card-border);
color: var(--color-heading);
white-space: nowrap;
}
.rankings-table td {
padding: var(--space-sm) var(--space-md);
border-bottom: 1px solid var(--color-card-border);
color: var(--color-text);
font-variant-numeric: tabular-nums;
}
/* Numeric columns: right-align so figures line up on the decimal.
Add class="num" to numeric th/td (also right-aligns the header). */
.rankings-table th.num,
.rankings-table td.num {
text-align: right;
font-variant-numeric: tabular-nums;
}
.rankings-table tbody tr:nth-child(even) {
background: var(--color-table-header);
}
.rankings-table tbody tr:first-child {
font-weight: 700;
}
.rankings-table tbody tr:first-child td {
color: var(--color-heading);
}
.rankings-table td:first-child {
text-align: center;
font-weight: 600;
color: var(--color-link);
width: 3em;
}
/* --------------------------------------------------------------------------
11. Toggle group — skill-level / view pill buttons
-------------------------------------------------------------------------- */
.toggle-group {
display: inline-flex;
flex-wrap: wrap;
border: 2px solid var(--color-card-border);
border-radius: var(--border-radius);
overflow: hidden;
margin: var(--space-md) 0;
background: var(--color-card-bg);
}
@media (min-width: 769px) {
.toggle-group {
flex-wrap: nowrap;
border-radius: var(--border-radius-pill);
}
}
.toggle-btn {
font-family: var(--font-heading);
font-size: var(--text-ui-sm);
font-weight: 500;
/* Vertical padding sized to clear the 44x44 WCAG 2.5.5 target. */
padding: var(--space-md) var(--space-lg);
border: none;
background: transparent;
color: var(--color-text);
cursor: pointer;
transition: background-color var(--dur-base) var(--ease-out-expo), color var(--dur-base) var(--ease-out-expo);
white-space: nowrap;
flex: 1 1 auto;
text-align: center;
}
@media (min-width: 769px) {
.toggle-btn {
flex: 0 0 auto;
}
}
.toggle-btn:not(:last-child) {
border-right: 1px solid var(--color-card-border);
}
.toggle-btn:hover {
background: var(--color-hover-tint);
}
.toggle-btn.active {
background: var(--color-accent);
color: var(--color-heading);
}
.toggle-btn.active:hover {
background: var(--color-accent-hover);
}
/* --------------------------------------------------------------------------
12. Parameter table
-------------------------------------------------------------------------- */
.param-table {
width: 100%;
border-collapse: collapse;
margin: var(--space-md) 0;
font-size: var(--text-ui-sm);
}
.param-table th {
background: var(--color-table-header);
font-family: var(--font-heading);
font-weight: 600;
text-align: left;
padding: var(--space-sm) var(--space-md);
border-bottom: 2px solid var(--color-card-border);
color: var(--color-heading);
}
.param-table td {
padding: var(--space-sm) var(--space-md);
border-bottom: 1px solid var(--color-card-border);
vertical-align: top;
font-family: var(--font-ui);
font-size: var(--text-ui-sm);
}
.param-table td:first-child {
font-family: var(--font-mono);
font-size: var(--text-ui-sm);
white-space: nowrap;
color: var(--color-link);
font-weight: 500;
}
.param-table tbody tr:nth-child(even) {
background: var(--color-table-header);
}
/* Boolean/value badges — text uses AA-safe semantic variants, never the
quantitative cell hues. */
.param-value {
display: inline-block;
font-family: var(--font-mono);
font-size: var(--text-ui-sm);
font-weight: 600;
padding: 1px 6px;
border-radius: var(--border-radius-sm);
background: var(--color-code-bg);
}
.param-value.true { color: var(--color-green-text); }
.param-value.false { color: var(--color-red-text); }
/* --------------------------------------------------------------------------
13. Heatmap table — grid searches
-------------------------------------------------------------------------- */
.heatmap-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: var(--space-lg) calc(-1 * var(--space-md));
border: 1px solid var(--color-card-border);
border-left: none;
border-right: none;
border-radius: 0;
mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
}
@media (min-width: 769px) {
.heatmap-wrapper {
margin: var(--space-lg) 0;
border-left: 1px solid var(--color-card-border);
border-right: 1px solid var(--color-card-border);
border-radius: var(--border-radius);
}
}
.heatmap-table {
border-collapse: collapse;
font-family: var(--font-mono);
font-size: var(--text-ui-sm);
white-space: nowrap;
width: 100%;
}
.heatmap-table th {
background: var(--color-table-header);
font-family: var(--font-heading);
font-weight: 600;
font-size: var(--text-ui-xs);
padding: var(--space-xs) var(--space-sm);
border: 1px solid var(--color-card-border);
text-align: center;
color: var(--color-heading);
}
.heatmap-table td {
padding: var(--space-xs) var(--space-sm);
border: 1px solid var(--color-card-border);
text-align: center;
min-width: 3.5em;
transition: outline var(--dur-fast) var(--ease-out-expo);
}
.heatmap-table td:hover {
outline: 2px solid var(--color-accent);
outline-offset: -2px;
z-index: 1;
position: relative;
}
.heatmap-table td:first-child,
.heatmap-table th:first-child {
text-align: left;
font-family: var(--font-heading);
font-weight: 600;
background: var(--color-table-header);
min-width: 5em;
}
/* Heat grades — dark text across all levels (worst case heat-6: 5.4:1). */
.heat-1 { background-color: var(--heat-1); color: var(--color-heading); }
.heat-2 { background-color: var(--heat-2); color: var(--color-heading); }
.heat-3 { background-color: var(--heat-3); color: var(--color-heading); }
.heat-4 { background-color: var(--heat-4); color: var(--color-heading); }
.heat-5 { background-color: var(--heat-5); color: var(--color-heading); }
.heat-6 { background-color: var(--heat-6); color: var(--color-heading); }
.heat-best { outline: 3px solid var(--color-heading); outline-offset: -3px; }
/* --------------------------------------------------------------------------
14. Methodology table
-------------------------------------------------------------------------- */
.methodology-table {
width: 100%;
border-collapse: collapse;
margin: var(--space-md) 0;
font-size: var(--text-ui-sm);
}
.methodology-table th {
background: var(--color-table-header);
font-family: var(--font-heading);
font-weight: 600;
text-align: center;
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--color-card-border);
color: var(--color-heading);
}
.methodology-table th:first-child {
text-align: left;
}
.methodology-table td {
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--color-card-border);
text-align: center;
font-family: var(--font-mono);
font-size: var(--text-ui-sm);
}
.methodology-table td:first-child {
font-family: var(--font-heading);
font-weight: 500;
text-align: left;
}
.methodology-table tbody tr:nth-child(even) {
background: var(--color-table-header);
}
.methodology-table tbody tr.highlight {
background: var(--color-hover-tint);
font-weight: 600;
}
/* --------------------------------------------------------------------------
15. Code & blockquotes
-------------------------------------------------------------------------- */
code {
font-family: var(--font-mono);
font-size: 0.88em;
background: var(--color-code-bg);
padding: 2px 6px;
border-radius: var(--border-radius-sm);
color: var(--color-heading);
}
pre {
background: var(--color-code-bg);
border: 1px solid var(--color-card-border);
border-radius: var(--border-radius);
padding: var(--space-md) var(--space-lg);
overflow-x: auto;
margin: var(--space-lg) 0;
line-height: 1.5;
}
pre code {
background: none;
padding: 0;
border-radius: 0;
font-size: var(--text-ui-sm);
}
blockquote {
border: 1px solid var(--color-card-border);
margin: var(--space-lg) 0;
padding: var(--space-md) var(--space-lg);
background: var(--color-blockquote-bg);
border-radius: var(--border-radius);
font-style: italic;
color: var(--color-text);
}
blockquote p:last-child {
margin-bottom: 0;
}
blockquote cite {
display: block;
margin-top: var(--space-sm);
font-style: normal;
font-size: var(--text-caption);
color: var(--color-text-muted);
}
/* --------------------------------------------------------------------------
16. Phase badges — categorical strategy-phase labels
-------------------------------------------------------------------------- */
.phase-badge {
display: inline-block;
font-family: var(--font-heading);
font-size: var(--text-ui-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 1px 8px;
border-radius: var(--border-radius-pill);
white-space: nowrap;
}
.phase-badge--score { background: var(--phase-score-bg); color: var(--phase-score-text); }
.phase-badge--cover { background: var(--phase-cover-bg); color: var(--phase-cover-text); }
.phase-badge--chase { background: var(--phase-chase-bg); color: var(--phase-chase-text); }
.phase-badge--close { background: var(--phase-close-bg); color: var(--phase-close-text); }
.phase-badge--redirect { background: var(--phase-redirect-bg); color: var(--phase-redirect-text); }
/* --------------------------------------------------------------------------
17. Version timeline, architecture diagram, bug grid — story chapters
-------------------------------------------------------------------------- */
.version-timeline {
position: relative;
padding-left: var(--space-xl);
margin: var(--space-lg) 0;
}
.version-timeline::before {
content: '';
position: absolute;
left: 6px;
top: 0;
bottom: 0;
width: 2px;
background: var(--color-card-border);
}
.version-entry {
position: relative;
margin-bottom: var(--space-lg);
}
.version-entry::before {
content: '';
position: absolute;
left: calc(-1 * var(--space-xl) + 2px);
top: 6px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--color-accent);
border: 2px solid var(--color-bg);
}
.version-entry.version-failure::before {
background: var(--color-red);
}
.version-entry.version-breakthrough::before {
background: var(--color-green);
width: 12px;
height: 12px;
left: calc(-1 * var(--space-xl) + 1px);
}
.version-label {
font-family: var(--font-heading);
font-weight: 700;
font-size: var(--text-ui-sm);
color: var(--color-link);
margin-bottom: var(--space-xs);
letter-spacing: 0.01em;
}
.version-failure .version-label {
color: var(--color-red-text);
}
.version-breakthrough .version-label {
color: var(--color-green-text);
}
.architecture-diagram {
background: var(--color-card-bg);
border: 1px solid var(--color-card-border);
border-radius: var(--border-radius);
padding: var(--space-lg);
font-family: var(--font-mono);
font-size: var(--text-ui-sm);
line-height: 1.6;
overflow-x: auto;
white-space: pre;
margin: var(--space-lg) 0;
}
.bug-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
margin: var(--space-lg) 0;
}
@media (min-width: 769px) {
.bug-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
}
.bug-card {
background: var(--color-card-bg);
border: 1px solid var(--color-card-border);
border-radius: var(--border-radius);
padding: var(--space-md);
}
.bug-card h4 {
font-size: var(--text-ui-sm);
margin: 0 0 var(--space-xs) 0;
}
.bug-card p {
font-size: var(--text-ui-sm);
margin: 0;
}
.strategy-comparison {
width: 100%;
margin: var(--space-lg) 0;
border-collapse: collapse;
}
.strategy-comparison th,
.strategy-comparison td {
padding: var(--space-sm) var(--space-md);
text-align: left;
border-bottom: 1px solid var(--color-card-border);
font-size: var(--text-ui-sm);
}
.strategy-comparison th {
font-weight: 600;
background: var(--color-card-bg);
}
.strategy-comparison .highlight-row {
background: var(--color-hover-tint);
font-weight: 600;
}
/* --------------------------------------------------------------------------
18. Footer & chapter prev/next
-------------------------------------------------------------------------- */
.footer {
border-top: 1px solid var(--color-card-border);
padding: var(--space-xl) 0;
margin-top: var(--space-3xl);
color: var(--color-text-muted);
font-size: var(--text-ui-sm);
font-family: var(--font-heading);
}
.footer p {
margin: 0;
}
.footer a {
color: var(--color-text);
text-decoration: underline;
}
.footer a:hover {
color: var(--color-accent);
}
/* Chapter prev/next — sits above the .footer, inside .container.
Mobile: stacked. Desktop: prev left, next right. */
.chapter-nav {
display: flex;
flex-direction: column;
gap: var(--space-md);
border-top: 1px solid var(--color-card-border);
margin-top: var(--space-3xl);
padding-top: var(--space-xl);
font-family: var(--font-ui);
}
@media (min-width: 609px) {
.chapter-nav {
flex-direction: row;
justify-content: space-between;
}
}
.chapter-nav-link {
display: flex;
flex-direction: column;
gap: var(--space-2xs);
max-width: 22rem;
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--color-card-border);
border-radius: var(--border-radius);
text-decoration: none;
transition: border-color var(--dur-base) var(--ease-out-expo);
}
.chapter-nav-link:hover {
border-color: var(--color-accent);
text-decoration: none;
}
.chapter-nav-next {
margin-left: auto;
text-align: right;
}
.chapter-nav-label {
font-size: var(--text-ui-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-muted);
}
.chapter-nav-title {
font-size: var(--text-ui-sm);
font-weight: 600;
color: var(--color-heading);
}
.chapter-nav-link:hover .chapter-nav-title {
color: var(--color-link-hover);
}
/* --------------------------------------------------------------------------
18b. Inline-SVG charts + in-cell magnitude bars (Batch 3: Bolder)
-------------------------------------------------------------------------- */
/* Chart figure container — a plain resting block for the JS-rendered