/*! FivePaths microsite base — v1
https://cdn.fivepaths.com/microsite/v1/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:
── 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 #008080 carries every text accent: links, eyebrow tags, tick
marks, step numbers, focus rings. 4.8: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 AA (4.5:1).
── 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: #626878; /* 5.4:1 on --fp-bg */
--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: #008080; /* teal, 4.8:1 on --fp-bg */
--fp-accent-strong: #006666; /* hover, 6.8:1 */
--fp-bronze: #8a6300; /* the amber family as text, 5.4:1 on --fp-bg */
--fp-bronze-strong: #6f4f00;
--fp-amber-wash: #fff8e4; /* faintest amber, for highlighted panels */
--fp-link: var(--fp-accent);
--fp-link-hover: var(--fp-accent-strong);
/* ── 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: #008080; /* teal as a fill; #fff on it is 4.8: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: #8f96a8; /* 6.2:1 on --fp-board */
--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: #0f6bb2;
--fp-route-green: #008050;
--fp-route-red: #d23a35;
--fp-route-orange: #f5851f;
--fp-route-purple: #7d5ba6;
--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-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: #8f96a8; /* 6.2:1 on --fp-bg */
--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: #8f96a8;
--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%; }
a { color: var(--fp-link); }
a:hover { color: var(--fp-link-hover); }
: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: 44em;
}
.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 */
.brand-logo img, .brand-logo svg { height: var(--fp-logo-height, 3rem); 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); }
.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: #006a6a; 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); }
/* 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;
}
.steps > *::before {
content: "0" counter(step);
font-family: var(--fp-mono);
font-weight: 700;
font-size: 0.9rem;
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: 2.5px solid var(--fp-accent);
background: var(--fp-bg);
}
/* .checks — when the list means "verified / conformant", not "stops on a line" */
.ticks.checks > li { padding-left: 1.6rem; }
.ticks.checks > li::before {
content: "\2713";
top: 0;
width: auto;
height: auto;
border: 0;
border-radius: 0;
background: none;
color: var(--fp-accent);
font-weight: 800;
}
/* ── 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: 40em;
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: #7d8498; } /* comment */
pre.code .m { color: var(--fp-amber); } /* method */
pre.code .p { color: #a7d8b6; } /* path / string */
pre.code .k { color: #a9bfe0; } /* key */
/* ── 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: 40em; 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: 38em; 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 .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); }
/* 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; }
.footer-row strong { color: var(--fp-ink); }
.footer-copy { margin-left: auto; }
.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; }
/* "a FivePaths product" byline. The chip gives the logo a light plate so it
holds up on the near-black footer. */
.fp-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-weight: 700;
color: var(--fp-accent);
text-decoration: none;
}
.fp-link:hover { color: var(--fp-accent-strong); }
.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; }