/* ============================================================================
PageSpeedAudit design system v2 — "precision instrument"
Single file, no framework, no JS. Mobile-first. WCAG 2.2 AA contrast.
Display face: Space Grotesk (variable, self-hosted, 22 KB). Body: system stack.
============================================================================ */
/* The @font-face for Space Grotesk deliberately does NOT live here — it is emitted inline in
App.razor's . A static .css file cannot resolve the build's content fingerprint, so the
src would have to name the raw /fonts/space-grotesk-var.woff2 path while
(which CAN resolve it, via @Assets) names the hashed one. That mismatch made the browser fetch
the same 22 KB face twice: once at high priority from the preload, then discarded, then again
late via CSS discovery — on the raw path's 4-hour revalidating cache instead of the hashed
path's immutable year. Declaring it in Razor lets preload and @font-face share one
fingerprint-resolved URL, so they can never drift apart again. */
:root {
/* ink + surfaces */
--ink: #10211a; /* deep pine */
--ink-soft: #33433a;
--muted: #4b5b53; /* 7.03:1 on paper (AAA) */
--paper: #fbfdfb;
--card: #ffffff;
--wash: #eef4f0;
--wash-deep: #e2ece5;
--line: #d8e2db;
--line-soft: #e6eee8;
/* brand */
--brand: #0d6b3c; /* 6.1:1 on paper */
--brand-strong: #0a4f2d;
--brand-deep: #07391f;
--brand-wash: #e3f2e8;
/* dark sections */
--dark-bg: #0b1812;
--dark-bg-2: #102219;
--dark-line: #24382d;
--dark-ink: #eef6f0;
--dark-soft: #b9cfc1; /* 9.5:1 on dark-bg */
--signal: #8df0a6; /* the wow accent — dark surfaces only (11:1 on dark-bg) */
/* semantic */
--good: #0e7a3e; --warn: #8a5800; --bad: #b3261e;
--good-dark: #8df0a6; --warn-dark: #ffd28a; --bad-dark: #ffb1aa;
--focus: #1456d8;
/* shape + depth */
--radius: 14px;
--radius-sm: 9px;
--shadow-1: 0 1px 2px rgb(13 33 23 / .05), 0 2px 8px rgb(13 33 23 / .05);
--shadow-2: 0 2px 4px rgb(13 33 23 / .06), 0 12px 32px -8px rgb(13 33 23 / .14);
--ring: inset 0 1px 0 rgb(255 255 255 / .14);
/* type */
--font-display: "Space Grotesk", system-ui, sans-serif;
--font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, "Cascadia Code", SFMono-Regular, Consolas, monospace;
--text-sm: .875rem;
--text-base: clamp(1rem, .97rem + .15vw, 1.0625rem);
--text-lg: clamp(1.125rem, 1.04rem + .4vw, 1.3125rem);
--text-xl: clamp(1.3125rem, 1.16rem + .75vw, 1.75rem);
--text-2xl: clamp(1.625rem, 1.32rem + 1.5vw, 2.375rem);
--text-3xl: clamp(2rem, 1.5rem + 2.4vw, 3.125rem);
--text-hero: clamp(2.375rem, 1.6rem + 3.9vw, 4.25rem);
--space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
--space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
--space-16: 4rem; --space-20: 5rem;
}
/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.65;
color: var(--ink);
background: var(--paper);
min-height: 100dvh;
display: flex;
flex-direction: column;
text-rendering: optimizeLegibility;
}
main { flex: 1; }
img, svg, iframe { max-width: 100%; }
img, svg { height: auto; display: block; }
h1, h2, h3, .display {
font-family: var(--font-display);
font-weight: 600;
line-height: 1.08;
letter-spacing: -.022em;
margin: 0 0 .5em;
text-wrap: balance;
color: var(--ink);
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg); letter-spacing: -.01em; }
p { margin: 0 0 1em; }
.lede { font-size: var(--text-lg); color: var(--ink-soft); max-width: 56ch; text-wrap: pretty; }
a { color: var(--brand); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--brand-strong); }
small { font-size: var(--text-sm); }
code { font-family: var(--font-mono); font-size: .88em; background: var(--wash); border: 1px solid var(--line-soft); padding: .1em .4em; border-radius: 6px; overflow-wrap: anywhere; }
/* Inside a
the code element is just the block's text — drop the inline-chip background/border so it
doesn't paint a light box over a dark code block (that was hiding the API-keys quick-start curl). */
pre code { background: transparent; border: none; padding: 0; border-radius: 0; font-size: inherit; color: inherit; }
.num, .metric { font-family: var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
:focus-visible { outline: 2px solid #fff; outline-offset: 0; box-shadow: 0 0 0 4px var(--focus); border-radius: 3px; }
/* Blazor's moves focus to the page
for screen readers; that programmatic
focus must not paint a visible ring on a non-interactive heading (it isn't keyboard-tabbable). */
/* FocusOnNavigate parks focus on the page heading after in-app navigation (an a11y feature we keep) —
but a heading isn't interactive, so it gets no visible ring: clear the box-shadow too, not just the
outline, or the global focus style's blue glow paints a rectangle around every routed-to h1. */
h1:focus, h1:focus-visible { outline: none; box-shadow: none; }
::selection { background: #cdebd7; }
.container { width: min(100% - 2.5rem, 71rem); margin-inline: auto; }
.container-narrow { width: min(100% - 2.5rem, 46rem); margin-inline: auto; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }
.skip-link {
position: absolute; left: -200vw; top: 0; z-index: 200;
background: var(--brand-deep); color: #fff; padding: .75rem 1.25rem;
border-radius: 0 0 var(--radius-sm) 0; text-decoration: none; font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }
/* ---------------------------------------------------------------- header */
.site-header {
position: sticky; top: 0; z-index: 50;
background: rgb(251 253 251 / .86);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line-soft);
}
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); padding-block: .8rem; }
.brand {
font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
color: var(--ink); text-decoration: none; letter-spacing: -.03em;
display: inline-flex; align-items: center; gap: .5rem;
}
.brand:hover { color: var(--brand-strong); }
.brand-mark { width: 1.6rem; height: 1.6rem; flex: none; }
.brand { min-height: 44px; }
.brand .tld { color: var(--brand); }
.nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); list-style: none; margin: 0 0 0 auto; padding: 0; }
.nav-links a:not(.btn) {
display: inline-flex; align-items: center; padding: .55rem .35rem; min-height: 44px;
color: var(--ink-soft); text-decoration: none; font-weight: 550; font-size: .96rem;
}
.nav-links a:not(.btn):hover, .nav-links a[aria-current="page"] { color: var(--brand-strong); box-shadow: inset 0 -2px 0 var(--brand); }
.nav-cta { margin-left: var(--space-2); }
/* ---------------------------------------------------------------- buttons */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
min-height: 46px; padding: .65rem 1.45rem;
font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; letter-spacing: .002em;
text-decoration: none; text-align: center; white-space: nowrap;
border-radius: 999px; border: 1.5px solid transparent; cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
/* nowrap keeps button labels on one line — but a label longer than the phone ("Secondary
evidence — Heričko 2021 Table 2 (CSV)") then pushes the whole PAGE into sideways scroll,
measured at up to 171px past a 360px viewport. On phones the label wraps instead; max-width
stops a flex/grid parent from letting the pill itself poke out of the column. */
@media (max-width: 40rem) {
.btn { white-space: normal; max-width: 100%; }
}
.btn-primary {
background: linear-gradient(180deg, var(--brand), var(--brand-strong));
color: #fff; box-shadow: var(--shadow-1), var(--ring);
}
.btn-primary:hover { color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-2), var(--ring); }
.btn-primary:active { transform: translateY(0); }
.btn-secondary { background: var(--card); color: var(--brand-strong); border-color: var(--brand); }
.btn-secondary:hover { background: var(--brand-wash); }
.btn-ghost { background: transparent; color: var(--ink-soft); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--muted); color: var(--ink); }
.btn-danger { background: var(--card); color: var(--bad); border-color: var(--bad); }
.btn-danger:hover { background: #fbeae9; }
.btn-lg { min-height: 56px; padding: .9rem 2.1rem; font-size: 1.13rem; }
.btn-sm { min-height: 36px; padding: .25rem 1rem; font-size: .92rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.btn .arrow { transition: transform .15s ease; }
.btn:hover .arrow { transform: translateX(3px); }
/* on-dark button variants */
.section-dark .btn-primary { background: var(--signal); color: var(--brand-deep); box-shadow: 0 8px 28px -8px rgb(141 240 166 / .45); }
.section-dark .btn-primary:hover { color: var(--brand-deep); background: #a4f5b8; }
.section-dark .btn-secondary { background: transparent; color: var(--dark-ink); border-color: var(--dark-line); }
.section-dark .btn-secondary:hover { background: var(--dark-bg-2); border-color: var(--dark-soft); }
/* ---------------------------------------------------------------- forms */
.field { margin-bottom: var(--space-4); }
.field label { display: block; font-weight: 600; margin-bottom: .35rem; font-size: .97rem; }
.hint { color: var(--muted); font-size: var(--text-sm); margin-top: .35rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="url"], textarea, select {
width: 100%; min-height: 48px; padding: .6rem .9rem;
font: inherit; color: var(--ink); background: var(--card);
border: 1.5px solid #b9c6be; border-radius: var(--radius-sm);
transition: border-color .12s ease;
}
input:hover, textarea:hover { border-color: var(--muted); }
textarea { min-height: 8.5rem; resize: vertical; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
input[disabled] { background: var(--wash); color: var(--muted); }
.error-text { color: var(--bad); font-weight: 600; margin: var(--space-2) 0; }
.success-text { color: var(--good); font-weight: 600; margin: var(--space-2) 0; }
.form-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.form-row input { flex: 1 1 14rem; }
/* ---------------------------------------------------------------- cards */
.card {
background: var(--card); border: 1px solid var(--line);
border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem);
box-shadow: var(--shadow-1);
}
.card.lift { transition: transform .18s ease, box-shadow .18s ease; }
.card.lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.card + .card { margin-top: var(--space-4); }
/* …but inside a grid the `gap` already spaces cards. Without this reset the
stacking margin above pushes every card after the first down within its
cell, so a row's card tops (and their bottom-aligned buttons) don't line up. */
.grid-2 > .card + .card, .grid-3 > .card + .card { margin-top: 0; }
.card h2:first-child, .card h3:first-child { margin-top: 0; }
.panel { background: var(--wash); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 1.75rem); }
.icon-tile {
width: 2.75rem; height: 2.75rem; border-radius: 12px; margin-bottom: var(--space-3);
display: grid; place-items: center;
background: var(--brand-wash); color: var(--brand-strong);
}
.icon-tile svg { width: 1.4rem; height: 1.4rem; }
/* ---------------------------------------------------------------- badges & chips */
.badge {
display: inline-flex; align-items: center; gap: .35rem;
padding: .14rem .7rem; border-radius: 999px;
font-family: var(--font-display); font-size: .82rem; font-weight: 600;
border: 1.5px solid currentColor; white-space: nowrap;
}
.badge::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.badge-queued, .badge-starting { color: var(--warn); }
.badge-running { color: #155cb0; }
.badge-running::before { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.badge-succeeded, .badge-active { color: var(--good); }
.badge-failed, .badge-timedout, .badge-revoked { color: var(--bad); }
.badge-expired, .badge-canceled { color: var(--muted); }
.eyebrow {
display: inline-flex; align-items: center; gap: .5rem;
font-family: var(--font-display); color: var(--brand-strong); font-weight: 600;
letter-spacing: .09em; text-transform: uppercase; font-size: .78rem;
margin-bottom: var(--space-3);
}
.eyebrow::before { content: ""; width: 1.5rem; height: 2px; background: var(--brand); border-radius: 2px; }
.section-dark .eyebrow { color: var(--signal); }
.section-dark .eyebrow::before { background: var(--signal); }
/* ---------------------------------------------------------------- tables */
/* A table wider than the phone scrolls inside its own box rather than widening the page. WCAG 2.2
SC 1.4.10 (Reflow) exempts data tables from the no-two-dimensional-scrolling rule, so this IS the
conformant answer — but a scroll container then has to be reachable by keyboard (SC 2.1.1), which
is why every .table-wrap is marked up as a focusable, named region. */
.table-wrap {
overflow-x: auto;
/* A grid/flex child defaults to min-width:auto and refuses to shrink below its own content, so
the PAGE scrolls sideways instead of the table. Same trap already fixed for .hero-grid. */
min-width: 0;
/* A horizontal swipe across the table must not trigger the browser's back gesture. */
overscroll-behavior-x: contain;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--card);
/* Overlay scrollbars (macOS, and Windows since 11) are invisible at rest, so a table that
scrolls looks identical to one that doesn't. Styling the scrollbar at all opts the container
out of overlay behaviour, giving a permanent cue — and it costs no height when the table
fits, because overflow-x:auto only creates the bar when there IS overflow.
The usual alternative, background-gradient scroll shadows, is wrong for THIS table: the
shadow layers paint behind the cells, and `table.data thead th` is opaque (--wash), so the
shadow would be interrupted across the header row and read as a rendering fault. */
scrollbar-width: thin;
scrollbar-color: var(--line) transparent;
}
.table-wrap::-webkit-scrollbar { height: .5rem; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.table-wrap:hover::-webkit-scrollbar-thumb { background: var(--ink-soft); }
/* The global focus ring squares off the corners; keep the wrapper's own radius. */
.table-wrap:focus-visible { border-radius: var(--radius); }
table.data { width: 100%; border-collapse: collapse; font-size: .94rem; }
table.data th, table.data td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
/* Figures and timestamps break into nonsense when wrapped mid-value ("2026-07-25" over three
lines). Scoped to tbody on purpose: .num is also used on header cells whose text is a prose
label ("Desktop break-even (r ≈ 0.986)"), and pinning those would widen the table into a scroll
it does not currently need. Values never wrap; the words naming them still do. */
table.data tbody .num { white-space: nowrap; }
table.data thead th { background: var(--wash); font-family: var(--font-display); font-weight: 600; font-size: .85rem; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-soft); }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: #f6faf7; }
/* ---------------------------------------------------------------- stacked tables (phones) */
/* Opt-in card layout for tables that were MEASURED to overflow a 360px viewport — a fitting
table keeps its grid (comparison down a column beats cards). Contract for .table-stack:
every