/*! FivePaths microsite base — v2
https://cdn.fivepaths.com/microsite/v2/base.css
One stylesheet shared by the FivePaths product microsites (gtfs.media,
pdfaa.report, and the next one). Link it, then add a short per-site sheet
for anything genuinely site-specific:
── WHAT v2 CHANGES ───────────────────────────────────────────────────────
v2 is v1 raised to WCAG AAA. It moves layout, which is why it is a new
directory rather than a revision of v1: text blocks are capped at a
~70-character measure, standalone controls grow to a 44px target, and the
ink and accent tokens darken to hold 7:1. A site on v1 keeps its current
layout until it changes its own link. Everything else — component names,
class names, token names — is unchanged, so opting in is a one-line edit
in each page's .
── COLOUR ────────────────────────────────────────────────────────────────
Two hues, and each has one job.
amber #ffb300 is a FILL, never a text colour on a light ground
(1.9:1 on white). Buttons, chips, highlights.
teal #006060 carries every text accent: links, eyebrow tags, tick
marks, step numbers, focus rings. 7.4:1 on white,
lightened to #4dd2d2 on dark grounds (10.1:1).
Neutral inks and papers do everything else. Multicolour appears only as
small "route blips" (--fp-route-*) — reserved for data, never for chrome.
Every text/background pairing defined here clears WCAG AAA (7:1), measured
against the least favourable ground the token can land on: --fp-bg-alt in
the light scheme, --fp-bg-card in the dark one, --fp-board-2 on boards.
── LIGHT / DARK ──────────────────────────────────────────────────────────
Follows prefers-color-scheme. A site pins itself with or .
── DARK BANDS ARE A TOKEN REMAP, NOT AN OVERRIDE ─────────────────────────
.on-dark — and .hero / .proof / .cta-band / .site-footer, which include it
— re-point the neutral tokens at the near-black "board" palette. Every
component below is written purely in tokens, so each one adapts on its own
and there is no parallel set of dark component rules to keep in sync.
Corollary for anyone extending this sheet: never hardcode a colour.
*/
/* ── Type: Overpass / Overpass Mono (SIL OFL 1.1), variable, self-hosted ─── */
@font-face {
font-family: "Overpass";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("fonts/overpass-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
font-family: "Overpass Mono";
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("fonts/overpass-mono-latin-wght-normal.woff2") format("woff2-variations");
}
/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
color-scheme: light;
/* neutrals — light scheme */
--fp-bg: #ffffff;
--fp-bg-alt: #f8f9fb; /* kept light enough that teal on it still clears 4.5:1 */
--fp-bg-card: #ffffff;
--fp-bg-blur: rgb(255 255 255 / 0.92); /* sticky header over scrolling content */
--fp-ink: #141821; /* 16.9:1 on --fp-bg */
--fp-ink-soft: #3d4350; /* 9.9:1 on --fp-bg, 9.3:1 on --fp-bg-alt */
--fp-ink-mute: #505562; /* 7.5:1 on --fp-bg, 7.1:1 on --fp-bg-alt */
--fp-rule: #e5e7eb;
--fp-shadow: 0 1px 2px rgb(20 24 33 / 0.05);
--fp-shadow-lift: 0 14px 40px rgb(20 24 33 / 0.10);
/* accents — light scheme */
--fp-accent: #006060; /* teal, 7.4:1 on --fp-bg, 7.0:1 on --fp-bg-alt */
--fp-accent-strong: #004f4f; /* hover, 9.4:1 */
--fp-bronze: #6f5000; /* the amber family as text, 7.4:1 on --fp-bg */
--fp-bronze-strong: #5a4100;
--fp-amber-wash: #fff8e4; /* faintest amber, for highlighted panels */
/* --fp-link and --fp-link-hover are deliberately not defined here. See the
link rules below: defining them on :root would freeze links at the
light-ground teal, and no dark band could remap them. */
/* ── scheme-independent ────────────────────────────────────────────────── */
/* amber reads the same either way: it is always a fill with dark ink on it */
--fp-amber: #ffb300;
--fp-amber-hover: #ffc94d;
--fp-amber-ink: #1a1200; /* 10.4:1 on --fp-amber */
--fp-teal-solid: #006060; /* teal as a fill; #fff on it is 7.4:1 */
/* the "board": near-black grounds for heroes, CTAs, footers, code */
--fp-board: #10141c;
--fp-board-2: #161b25;
--fp-board-deep: #0b0f16;
--fp-board-line: #272e3c;
--fp-board-ink: #edf0f6; /* 15.9:1 on --fp-board */
--fp-board-soft: #d6dbe7; /* 12.5:1 on --fp-board */
--fp-board-dim: #9fa5b7; /* 7.0:1 on --fp-board-2, the lightest board, so
fine print clears AAA on every dark ground */
--fp-board-accent: #4dd2d2; /* teal, 10.1:1 on --fp-board */
--fp-board-accent-2: #7fdede;
/* route blips — for data (route badges, series keys), never for chrome */
--fp-route-blue: #0d5b98; /* white on each of these is 7:1; orange is the */
--fp-route-green: #006640; /* exception and takes dark ink (#221200, 7.2:1) */
--fp-route-red: #a72925;
--fp-route-orange: #f5851f;
--fp-route-purple: #684b8b;
--fp-sans: "Overpass", system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
--fp-mono: "Overpass Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo,
Consolas, "Liberation Mono", monospace;
--fp-measure: 29em; /* ~70 characters, ~78 for dense text — see "Measure" below */
--fp-wrap: 70rem;
--fp-gutter: 1.5rem;
--fp-radius: 12px;
--fp-radius-sm: 8px;
--fp-pill: 999px;
}
/* Dark scheme. Two selectors, one palette — the media query serves visitors
who asked their OS for dark, [data-theme] serves a site that pins itself. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--fp-bg: #10141c;
--fp-bg-alt: #161b25;
--fp-bg-card: #1b212c;
--fp-bg-blur: rgb(16 20 28 / 0.92);
--fp-ink: #edf0f6; /* 15.9:1 on --fp-bg */
--fp-ink-soft: #b9c0ce; /* 10.1:1 on --fp-bg, 8.8:1 on --fp-bg-card */
--fp-ink-mute: #a4abbb; /* 7.0:1 on --fp-bg-card, the lightest ground */
--fp-rule: #272e3c;
--fp-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
--fp-shadow-lift: 0 18px 44px rgb(0 0 0 / 0.4);
--fp-accent: #4dd2d2; /* 10.1:1 on --fp-bg */
--fp-accent-strong: #7fdede;
--fp-bronze: #ffc94d;
--fp-bronze-strong: #ffdd8a;
--fp-amber-wash: #241a00;
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--fp-bg: #10141c;
--fp-bg-alt: #161b25;
--fp-bg-card: #1b212c;
--fp-bg-blur: rgb(16 20 28 / 0.92);
--fp-ink: #edf0f6;
--fp-ink-soft: #b9c0ce;
--fp-ink-mute: #a4abbb;
--fp-rule: #272e3c;
--fp-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
--fp-shadow-lift: 0 18px 44px rgb(0 0 0 / 0.4);
--fp-accent: #4dd2d2;
--fp-accent-strong: #7fdede;
--fp-bronze: #ffc94d;
--fp-bronze-strong: #ffdd8a;
--fp-amber-wash: #241a00;
}
/* Dark grounds: the neutral tokens point at the board palette. Custom
properties resolve after the cascade, so this block can sit anywhere —
every component rule below picks up the remapped values automatically. */
.on-dark,
.hero,
.proof,
.cta-band,
.site-footer {
color-scheme: dark;
--fp-bg: var(--fp-board);
--fp-bg-alt: var(--fp-board-2);
--fp-bg-card: var(--fp-board-2);
--fp-ink: var(--fp-board-ink);
--fp-ink-soft: var(--fp-board-soft);
--fp-ink-mute: var(--fp-board-dim);
--fp-rule: var(--fp-board-line);
--fp-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
--fp-shadow-lift: 0 18px 44px rgb(0 0 0 / 0.4);
--fp-accent: var(--fp-board-accent);
--fp-accent-strong: var(--fp-board-accent-2);
--fp-bronze: var(--fp-amber);
--fp-bronze-strong: var(--fp-amber-hover);
--fp-amber-wash: #241a00;
}
.on-dark {
background: var(--fp-board);
color: var(--fp-ink-soft);
}
.on-dark :where(h1, h2, h3, h4, strong) { color: var(--fp-ink); }
/* ── Base elements ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
scroll-padding-top: 6.5rem; /* anchor targets clear the sticky header */
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--fp-bg);
color: var(--fp-ink);
font-family: var(--fp-sans);
font-size: 1.0625rem;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
img, svg, video, canvas { max-width: 100%; }
/* Body links resolve --fp-accent at the point of use, so a link inside a dark
band picks up that band's accent and clears AA there (10.1:1 on the board,
where the light-ground teal managed only 3.9:1).
This has to be a fallback rather than a --fp-link token defined on :root. A
custom property whose value contains var() is substituted on the element
that declares it, then inherited as a flat colour, so --fp-link: var(--fp-accent)
on :root computes to the light teal once and the dark-band remap never
reaches it. Leaving --fp-link unset defers the lookup to the link itself.
A site or a section can still set --fp-link to override on purpose. */
a { color: var(--fp-link, var(--fp-accent)); }
a:hover { color: var(--fp-link-hover, var(--fp-accent-strong)); }
:focus-visible {
outline: 3px solid var(--fp-accent);
outline-offset: 3px;
border-radius: 2px;
}
h1, h2, h3, h4 {
margin: 0 0 0.5em;
line-height: 1.15;
letter-spacing: -0.015em;
text-wrap: balance;
}
h1 { font-size: clamp(2rem, 5.5vw, 3.25rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.125rem); font-weight: 750; }
h3 { font-size: 1.2rem; font-weight: 700; }
h4 { font-size: 1.02rem; font-weight: 700; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
code, kbd, samp, pre { font-family: var(--fp-mono); }
hr { border: 0; border-top: 1px solid var(--fp-rule); margin: 2rem 0; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
/* ── Layout and text utilities ────────────────────────────────────────────── */
.wrap {
max-width: var(--fp-wrap);
margin-inline: auto;
padding-inline: var(--fp-gutter);
}
.lead {
font-size: clamp(1.1rem, 2.2vw, 1.3rem);
color: var(--fp-ink-soft);
max-width: var(--fp-measure);
}
.muted { color: var(--fp-ink-mute); }
.fine { font-size: 0.9rem; color: var(--fp-ink-mute); }
/* eyebrow label above a heading */
.tag {
display: inline-block;
margin-bottom: 0.6rem;
color: var(--fp-accent);
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.skip {
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
padding: 0.6rem 1rem;
background: var(--fp-amber);
color: var(--fp-amber-ink);
border-radius: 0 0 var(--fp-radius-sm) 0;
font-weight: 700;
text-decoration: none;
}
.skip:focus { left: 0; }
/* ── Header, brand, nav ───────────────────────────────────────────────────── */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: var(--fp-bg);
border-bottom: 1px solid var(--fp-rule);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.site-header {
background: var(--fp-bg-blur);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
}
.site-header > .wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem 1.5rem;
flex-wrap: wrap;
/* vertical only — the shorthand would drop .wrap's horizontal gutter */
padding-top: 0.85rem;
padding-bottom: 0.85rem;
}
/* once the header wraps into stacked rows, give the rows air */
@media (max-width: 45rem) {
.site-header > .wrap { padding-top: 1.15rem; padding-bottom: 1.4rem; gap: 1.15rem 1.5rem; }
}
.brand {
display: inline-flex;
align-items: center;
gap: 0.55rem;
color: var(--fp-ink);
font-weight: 800;
font-size: 1.2rem;
letter-spacing: -0.02em;
text-decoration: none;
}
.brand:hover { color: var(--fp-ink); }
.brand svg, .brand img { display: block; }
.brand .tld { color: var(--fp-ink-mute); font-weight: 600; }
/* image lockup instead of mark + wordmark; sites tune --fp-logo-height.
3.2rem is the standard microsite header logo height (see DESIGN_GUIDE.md). */
.brand-logo img, .brand-logo svg { height: var(--fp-logo-height, 3.2rem); width: auto; }
.site-nav {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.85rem 1.4rem;
}
.site-nav ul {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.85rem 1.4rem;
list-style: none;
margin: 0;
padding: 0;
}
/* :where() keeps this at zero specificity so .btn variants below still win */
.site-nav :where(a) {
color: var(--fp-ink-soft);
font-weight: 550;
font-size: 0.95rem;
text-decoration: none;
}
.site-nav :where(a:hover) { color: var(--fp-ink); text-decoration: underline; }
.site-nav :where(a[aria-current="page"]) {
color: var(--fp-ink);
box-shadow: 0 2px 0 var(--fp-accent);
}
/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
display: inline-block;
/* Overpass sits its glyphs high in the line box; nudge the label down */
padding: calc(0.7rem + 0.13em) 1.3rem calc(0.7rem - 0.13em);
border: 1.5px solid transparent;
border-radius: var(--fp-pill);
font-family: inherit;
font-size: 0.98rem;
font-weight: 650;
line-height: 1.25;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
/* the default is the page's primary ask: amber fill */
background: var(--fp-amber);
color: var(--fp-amber-ink);
}
.btn:hover { background: var(--fp-amber-hover); color: var(--fp-amber-ink); }
/* .btn-amber is the explicit form of that default — same thing, said out loud */
.btn-amber { background: var(--fp-amber); color: var(--fp-amber-ink); }
.btn-amber:hover { background: var(--fp-amber-hover); color: var(--fp-amber-ink); }
/* ink pill: for a secondary ask that shouldn't spend the amber */
.btn-ink { background: var(--fp-ink); color: var(--fp-bg); }
.btn-ink:hover { background: var(--fp-ink-soft); color: var(--fp-bg); }
.btn-teal { background: var(--fp-teal-solid); color: #ffffff; }
.btn-teal:hover { background: var(--fp-accent-strong); color: #ffffff; }
/* outline. On a dark band the remapped tokens invert it — no dark variant. */
.btn-ghost { background: transparent; border-color: var(--fp-ink-soft); color: var(--fp-ink); }
.btn-ghost:hover { background: var(--fp-bg-alt); border-color: var(--fp-ink); color: var(--fp-ink); }
.btn-sm { padding: calc(0.45rem + 0.13em) 1rem calc(0.45rem - 0.13em); font-size: 0.9rem; }
/* ── Sections ─────────────────────────────────────────────────────────────── */
.section { padding: 4.5rem 0; }
.section-tight { padding: 3rem 0; }
.section-alt { background: var(--fp-bg-alt); }
.section-head { max-width: 46em; margin-bottom: 2.5rem; }
.section-head :where(p) { color: var(--fp-ink-soft); }
.section-head :where(p:not(.lead)) { font-size: 1.1rem; }
.section-head > :last-child { margin-bottom: 0; }
/* thin rule-bounded band of short reassurances */
.strip { border-top: 1px solid var(--fp-rule); border-bottom: 1px solid var(--fp-rule); }
.strip > .wrap { padding-top: 1.1rem; padding-bottom: 1.1rem; }
.strip .ticks { margin: 0; font-weight: 600; font-size: 0.95rem; }
/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero {
padding: 5rem 0 5.5rem;
overflow: hidden;
background:
radial-gradient(1200px 500px at 75% -10%, #1e2431 0%, transparent 60%),
var(--fp-board);
color: var(--fp-ink-soft);
}
.hero :where(h1, h2, h3, strong) { color: var(--fp-ink); }
.hero h1 { max-width: 16em; }
.hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: 3.5rem;
align-items: center;
}
@media (max-width: 56rem) {
.hero { padding: 3.5rem 0 4rem; }
.hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
.hero-ctas {
display: flex;
align-items: center;
gap: 0.9rem;
flex-wrap: wrap;
margin-top: 1.8rem;
}
/* subpage hero: same ground, less air */
.hero-sub { padding: 4rem 0; }
.hero-sub h1 { max-width: 18em; }
/* ── Cards ────────────────────────────────────────────────────────────────── */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
gap: 1.25rem;
list-style: none;
margin: 0;
padding: 0;
}
/* auto-fit is the default; these pin a column count once there's room */
@media (min-width: 52rem) {
.card-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 68rem) {
.card-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.card {
background: var(--fp-bg-card);
border: 1px solid var(--fp-rule);
border-radius: var(--fp-radius);
padding: 1.5rem 1.5rem 1.35rem;
}
.section-alt .card, .card-raised { box-shadow: var(--fp-shadow); }
.card :where(h3) { margin-top: 0; }
.card :where(p) { color: var(--fp-ink-soft); font-size: 0.98rem; }
.card > :last-child { margin-bottom: 0; }
/* last-of-type, not last-child: in a .card-link the closing prose is followed
by the .more affordance, and its own margin-top sets that gap */
.card p:last-of-type { margin-bottom: 0; }
/* a whole card that is one link */
.card-link {
display: block;
color: inherit;
text-decoration: none;
transition: border-color 120ms ease, transform 120ms ease;
}
.card-link:hover { border-color: var(--fp-ink-mute); color: inherit; transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .card-link:hover { transform: none; } }
.card-link .more {
display: inline-block;
margin-top: 0.9rem;
color: var(--fp-accent);
font-weight: 600;
font-size: 0.92rem;
}
.card-link:hover .more { color: var(--fp-accent-strong); text-decoration: underline; }
/* neutral icon chip — colour stays reserved for route blips */
.card-icon {
width: 42px;
height: 42px;
border-radius: 10px;
display: grid;
place-items: center;
background: var(--fp-bg-alt);
border: 1px solid var(--fp-rule);
color: var(--fp-ink);
}
.card-icon + * { margin-top: 0.9rem; }
/* ── Steps ────────────────────────────────────────────────────────────────── */
.steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: 1.25rem;
counter-reset: step;
list-style: none;
margin: 0;
padding: 0;
}
.steps > * {
counter-increment: step;
border-top: 1px solid var(--fp-rule);
padding-top: 1.1rem;
}
/* plain numeral (no leading zero) in a teal ring; two digits widen it to a pill.
Top padding leans on the same Overpass high-glyph nudge the buttons use. */
.steps > *::before {
content: counter(step);
display: inline-grid;
place-items: center;
box-sizing: border-box;
min-width: 1.9rem;
height: 1.9rem;
padding: 0.13em 0.5em 0;
border: 2.5px solid var(--fp-accent);
border-radius: var(--fp-pill);
font-family: var(--fp-mono);
font-weight: 700;
font-size: 0.9rem;
line-height: 1;
color: var(--fp-accent);
}
.steps :where(h3) { margin-top: 0.35rem; }
.steps :where(p) { color: var(--fp-ink-soft); font-size: 0.98rem; }
.steps > * > :last-child { margin-bottom: 0; }
/* ── Feature rows ─────────────────────────────────────────────────────────── */
.feature-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 3rem;
align-items: center;
padding: 2.75rem 0;
}
.feature-row + .feature-row { border-top: 1px solid var(--fp-rule); }
.feature-row.uneven { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
/* .top when the columns differ a lot in height and centring the short one
against the tall one reads as a mistake */
.feature-row.top { align-items: start; }
.feature-row.flip > :first-child { order: 2; }
@media (max-width: 56rem) {
.feature-row, .feature-row.uneven { grid-template-columns: 1fr; gap: 1.5rem; }
.feature-row.flip > :first-child { order: 0; }
}
.feature-row :where(h2) { font-size: clamp(1.35rem, 3vw, 1.75rem); }
.feature-row :where(h3) { font-size: 1.45rem; }
.feature-row .media, .feature-row .copy { min-width: 0; }
.feature-row .copy :where(p) { color: var(--fp-ink-soft); }
/* ── Split panels ─────────────────────────────────────────────────────────── */
.split {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
gap: 1.25rem;
}
.split-panel {
background: var(--fp-bg-card);
border: 1px solid var(--fp-rule);
border-radius: var(--fp-radius);
padding: 2rem;
}
.split-panel > :last-child { margin-bottom: 0; }
.split-panel .btn { margin-top: 0.6rem; }
/* ── Checklists ───────────────────────────────────────────────────────────── */
.ticks {
display: grid;
gap: 0.6rem;
list-style: none;
margin: 0 0 1em;
padding: 0;
}
@media (min-width: 45rem) {
.ticks.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 2.5rem; }
}
.ticks > li { position: relative; padding-left: 1.7rem; color: var(--fp-ink-soft); }
.ticks > li strong { color: var(--fp-ink); }
/* metro-stop dot, drawn rather than a glyph — nothing to fall back to a box */
.ticks > li::before {
content: "";
position: absolute;
left: 0;
top: 0.42em;
width: 0.7rem;
height: 0.7rem;
border-radius: 50%;
border: 3.5px solid var(--fp-accent);
background: var(--fp-bg);
}
/* .checks — when the list means "verified / conformant", not "stops on a line".
Drawn like the dot, so the stroke weight is set here, not by a fallback font. */
.ticks.checks > li { padding-left: 1.6rem; }
.ticks.checks > li::before {
top: 0.38em;
width: 0.85rem;
height: 0.42rem;
border: 0 solid var(--fp-accent);
border-left-width: 3.5px;
border-bottom-width: 3.5px;
border-radius: 0;
background: none;
transform: rotate(-45deg);
}
/* ── Screenshots ──────────────────────────────────────────────────────────── */
/* bare screenshot in a */
.shot { margin: 0; min-width: 0; }
.shot img {
display: block;
width: 100%;
height: auto;
border: 1px solid var(--fp-rule);
border-radius: var(--fp-radius);
box-shadow: var(--fp-shadow-lift);
}
.shot figcaption {
margin-top: 0.75rem;
max-width: var(--fp-measure);
font-size: 0.88rem;
color: var(--fp-ink-mute);
}
.shot-band {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
gap: 2rem;
align-items: start;
}
.shot-band.uneven { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.shot-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 56rem) {
.shot-band.uneven { grid-template-columns: 1fr; }
}
/* browser-style frame, for screenshots that are the product itself */
.frame {
min-width: 0;
background: var(--fp-bg-card);
border: 1px solid var(--fp-rule);
border-radius: var(--fp-radius);
overflow: hidden;
box-shadow: var(--fp-shadow-lift);
}
.frame .bar {
display: flex;
align-items: center;
gap: 0.45rem;
padding: 0.6rem 0.9rem;
border-bottom: 1px solid var(--fp-rule);
}
.frame .bar i { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--fp-rule); }
.frame .bar span {
margin-left: 0.4rem;
font-family: var(--fp-mono);
font-size: 0.72rem;
letter-spacing: 0.04em;
color: var(--fp-ink-soft);
}
.frame > a { display: block; }
.frame img { display: block; width: 100%; height: auto; }
/* ── Code ─────────────────────────────────────────────────────────────────── */
pre.code {
margin: 0;
padding: 1.2rem 1.4rem;
background: var(--fp-board);
color: var(--fp-board-soft);
border: 1px solid var(--fp-board-line);
border-radius: var(--fp-radius);
font-family: var(--fp-mono);
font-size: 0.86rem;
line-height: 1.7;
overflow-x: auto;
}
pre.code .c { color: #a0a5b4; } /* comment, 7.0:1 on the code ground */
pre.code .m { color: var(--fp-amber); } /* method */
pre.code .p { color: #a7d8b6; } /* path / string */
pre.code .k { color: #a9bfe0; } /* key */
/* ── Legal pages (/privacy/, /terms/) — long-form prose ───────────────────── */
.legal { max-width: 46em; }
.legal h2 { margin-top: 2.4rem; font-size: 1.3rem; }
.legal h3 { margin-top: 1.6rem; }
.legal p, .legal li { color: var(--fp-ink-soft); }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: 0.4rem; }
.legal .updated { color: var(--fp-ink-mute); font-size: 0.9rem; }
/* ── Proof strip (dark) ───────────────────────────────────────────────────── */
.proof {
background: var(--fp-board);
color: var(--fp-ink-soft);
padding: 2.4rem 0;
}
.proof > .wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
}
.proof p { margin: 0; max-width: var(--fp-measure); font-size: 1.12rem; }
.proof strong { color: var(--fp-ink); }
/* amber as text is fine here and only here: on the board it is 10:1 */
.proof .badge {
padding: 0.4rem 0.9rem;
border: 1px solid var(--fp-rule);
border-radius: var(--fp-pill);
font-family: var(--fp-mono);
font-size: 0.8rem;
color: var(--fp-amber);
white-space: nowrap;
}
/* ── Closing CTA band (dark) ──────────────────────────────────────────────── */
.cta-band {
padding: 4.5rem 0;
text-align: center;
background:
radial-gradient(900px 400px at 20% 120%, #1e2431 0%, transparent 60%),
var(--fp-board);
color: var(--fp-ink-soft);
}
.cta-band :where(h2, h3, strong) { color: var(--fp-ink); }
.cta-band .inner { max-width: 40rem; margin-inline: auto; }
.cta-band :where(p) { max-width: var(--fp-measure); margin-inline: auto; margin-bottom: 1.8rem; }
.cta-band .hero-ctas { justify-content: center; margin-top: 0; }
.cta-band .fine { margin-top: 1.6rem; margin-bottom: 0; }
/* ── Footer (dark) ────────────────────────────────────────────────────────── */
.site-footer {
background: var(--fp-board-deep);
color: var(--fp-ink-mute);
padding: 3.5rem 0 2.5rem;
font-size: 0.95rem;
}
.site-footer.footer-slim { padding: 2.25rem 0 2.75rem; }
.site-footer.footer-slim .fineprint { margin-top: 1.75rem; padding-top: 1.25rem; }
.site-footer .brand { color: var(--fp-ink); margin-bottom: 0.6rem; }
.site-footer .brand .tld { color: var(--fp-ink-mute); }
.site-footer :where(h3) {
margin-bottom: 0.9rem;
color: var(--fp-ink);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.site-footer :where(ul) { list-style: none; margin: 0; padding: 0; }
.site-footer :where(li) { margin-bottom: 0.5rem; }
.site-footer :where(a) { color: var(--fp-ink-soft); text-decoration: none; }
.site-footer :where(a:hover) { color: var(--fp-ink); text-decoration: underline; }
/* columned footer */
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; }
@media (max-width: 56rem) {
.footer-grid { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
}
/* one-line footer */
.footer-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
/* the columned footer's brand carries a bottom margin; in the byline row it
would lift the brand off the text baseline */
.footer-row .brand { margin-bottom: 0; }
.footer-row strong { color: var(--fp-ink); }
.footer-copy { margin-left: auto; }
/* legal links — privacy policy, terms of service — under the footer logo */
.footer-legal {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 1.4rem;
list-style: none;
margin: 1.25rem 0 0;
padding: 0;
font-size: 0.85rem;
}
.fineprint {
margin-top: 2.75rem;
padding-top: 1.5rem;
border-top: 1px solid var(--fp-rule);
font-size: 0.85rem;
color: var(--fp-ink-mute);
}
.fineprint p { margin: 0 0 0.4rem; }
.fineprint p:last-child { margin-bottom: 0; }
/* "is a FivePaths product." byline. The white mark
(brand/fivepaths/fivepaths-logo-white.png) sits directly on the dark
footer — no plate behind it. */
.fp-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
/* inline contexts (a byline inside a paragraph): the mark makes the box
tall, so baseline alignment rides high — center on the line instead.
Flex rows ignore this. */
vertical-align: middle;
font-weight: 700;
color: var(--fp-accent);
text-decoration: none;
}
.fp-link:hover { color: var(--fp-accent-strong); text-decoration: underline; }
.fp-link > img { display: block; height: 1.5rem; width: auto; }
/* deprecated: the light plate the byline used before the white mark existed.
Kept only for pages published against it; new footers use the bare mark. */
.fp-chip {
display: inline-flex;
padding: 0.15rem;
background: #edf0f6;
border-radius: 0.35rem;
vertical-align: -0.35rem;
}
.fp-chip img { display: block; height: 1.5rem; width: auto; }
/* ── Target size (WCAG 2.5.5, AAA) ─────────────────────────────────────────
Every standalone control presents at least a 44x44 CSS-pixel target. Links
set in running prose are exempt under the criterion's "inline" exception
and keep their natural size, so body copy is untouched.
These rules sit at the end of the sheet so they land after the component
definitions they adjust; each names its component rather than hiding behind
:where(), which would lose to the component's own display value. */
.site-nav a,
.site-nav button,
.footer-grid ul a,
.footer-legal a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
min-width: 44px; /* a short label like "Maps" is otherwise too narrow */
}
/* A stacked list needs the height to come from the row, not from overlapping
hit areas — neighbouring targets that overlap send clicks to the wrong link. */
.footer-grid ul { display: flex; flex-direction: column; }
.footer-grid ul li { display: flex; }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
}
.btn-sm { min-height: 44px; }
.brand { min-height: 44px; }
/* ── Visually hidden ───────────────────────────────────────────────────────
Text for assistive technology only. Used for the "opens in a new tab"
note carried by external links (WCAG 3.2.5), among other things. */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ── Colour-scheme toggle ──────────────────────────────────────────────────
WCAG 1.4.8 asks that the reader be able to choose their own foreground and
background. The sheet already follows prefers-color-scheme; this is the
control that lets someone override it per site. Sites that ship it need the
two small scripts documented in the README. */
.theme-toggle {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-height: 44px;
padding: 0 0.15rem;
background: none;
border: 0;
color: inherit;
font: inherit;
font-size: inherit;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 0.2em;
}
.theme-toggle:hover { color: var(--fp-accent); }
.theme-toggle svg { width: 1.05em; height: 1.05em; flex: none; }
/* Each glyph shows only in the scheme it offers to leave. */
.theme-toggle .to-dark { display: inline; }
.theme-toggle .to-light { display: none; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .theme-toggle .to-dark { display: none; }
:root:not([data-theme="light"]) .theme-toggle .to-light { display: inline; }
}
:root[data-theme="dark"] .theme-toggle .to-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .to-light { display: inline; }
:root[data-theme="light"] .theme-toggle .to-dark { display: inline; }
:root[data-theme="light"] .theme-toggle .to-light { display: none; }
/* ── Measure (WCAG 1.4.8, AAA) ─────────────────────────────────────────────
A block of running text stays under 80 characters a line. Overpass averages
0.36em a character where the text is dense with narrow letters, so 29em
holds under 80 even there — and reads better besides. The cap is in em, so
it holds at every size the sheet uses. Headings, tables and code are not
blocks of running text and keep the full column. */
main p,
.fineprint p,
.legal p,
dd {
max-width: var(--fp-measure);
}
/* Where the container centres its text, the capped block centres with it. */
.cta-band p,
.hero-center p,
[data-centered] p {
margin-inline: auto;
}