/* BlueChipGarage — design system.
*
* One stylesheet, no build step, same convention as the other sites on this
* box. The look is "auction catalog meets trading desk": editorial wide-set
* headlines (Archivo at 125% stretch), every figure in tabular IBM Plex Mono,
* layered navy surfaces. Fonts are SELF-HOSTED in /assets/fonts — the CSP is
* font-src 'self', so a Google Fonts would silently fall back.
*
* Colour decisions that carry meaning (deal bands, the free score) are
* commented with their contrast ratio against the surface they sit on, because
* they are the numbers a member reads fastest and misreading them costs money.
*
* The surfaces are tinted toward blue (the brand), but "good deal" stays
* GREEN — the accent is the brand's colour, the deal bands are the money's.
*/
/* Archivo variable: weights 100-900 AND widths 62%-125% in one 88KB file.
* The display look is this same family at font-stretch 125% — no second
* download, and body and headline can never drift apart in rendering. */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 100 900;
font-stretch: 62% 125%;
font-display: swap;
src: url('/assets/fonts/archivo-var-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/plexmono-400-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/assets/fonts/plexmono-500-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/assets/fonts/plexmono-600-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
color-scheme: dark;
--plane: #070b13; /* page */
--surface-1: #0f1622; /* cards */
--surface-2: #17202f; /* raised rows, inputs */
--surface-3: #223044; /* hover */
--line: #263450;
--line-soft: #1b2536;
/* A faint top-edge light on raised panels — the "machined edge". */
--edge: inset 0 1px 0 rgba(196, 216, 245, .07);
--ink: #eef3fb; /* 18.2:1 on --plane */
--ink-2: #b9c4d6; /* 10.9:1 on --plane */
--muted: #8595ad; /* 6.4:1 on --plane — the floor for body text */
/* Brand blue. Links, buttons, charts — everything that says "us". */
--accent: #66a9fc; /* 7.8:1 on --plane */
--accent-dim: #1e56a8;
--accent-ink: #06172e; /* text ON the accent — 7.1:1 */
/* Deal / cost scale, cool-to-warm. Each is checked against --surface-1. */
--good: #4ade80; /* 10.0:1 — below market, cheap to own */
--ok: #7dd3fc; /* 10.5:1 — about market */
--warn: #fbbf24; /* 10.5:1 — above market, expensive */
--crit: #fb7185; /* 6.5:1 — well above market, punishing */
--radius: 16px;
--radius-sm: 10px;
--radius-field: 10px;
--shadow: 0 12px 38px rgba(2, 5, 12, .5);
--shadow-lift: 0 18px 44px rgba(2, 5, 12, .55);
--maxw: 1200px;
--font: 'Archivo', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
/* The editorial voice: same family, pushed wide. */
--display-stretch: 125%;
}
* { box-sizing: border-box; }
/* The hidden attribute must always win. Any component rule that sets display
* (.btn, .hero-stats, …) out-ranks the UA sheet's [hidden] rule, which is how
* the hero tallies and the browse "Load more" button leaked into view before
* their JS meant to show them. */
[hidden] { display: none !important; }
body {
margin: 0;
background: var(--plane);
color: var(--ink);
font-family: var(--font);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* Headlines carry the personality: Archivo stretched to 125%, heavy, tight.
* h3 stays at text width — it labels components, not chapters. */
h1, h2 { line-height: 1.08; margin: 0 0 .5em; font-weight: 740;
font-stretch: var(--display-stretch); letter-spacing: -.02em;
text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
h3, h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 680; letter-spacing: -.012em; }
h3 { font-size: 1.13rem; }
p { margin: 0 0 1em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* A visible focus ring everywhere. On a dark site the UA default outline is
* effectively invisible, which makes the whole site unusable by keyboard. */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
/* The page's ground: a cold dawn over the plane — one blue glow up top, a
* near-invisible counter-glow low right. Gradients only, no images. */
main {
background:
radial-gradient(1100px 500px at 12% -140px, rgba(96, 165, 250, .1), transparent 60%),
radial-gradient(900px 600px at 95% 8%, rgba(45, 90, 170, .06), transparent 55%);
}
/* Homepage market-data example: photo beside the numbers. */
.market-example-card { padding: 0; overflow: hidden; }
.market-example { display: flex; }
.market-example-chart { padding: 20px 24px 24px; border-top: 1px solid var(--line-soft); }
.market-example .photo { width: 42%; flex: none; position: relative;
background: var(--surface-2); min-height: 240px; }
.market-example .photo img { position: absolute; inset: 0; width: 100%;
height: 100%; object-fit: cover; }
.market-example .body { padding: 22px 24px; display: flex;
flex-direction: column; gap: 12px; flex: 1; min-width: 0; }
@media (max-width: 720px) {
.market-example { flex-direction: column; }
.market-example .photo { width: 100%; aspect-ratio: 16 / 9; min-height: 0; }
}
/* Status pills: a listing's fate at a glance. Same words everywhere —
* "For sale", "Sold", "Sold after" (a post-auction deal) and "Bid to $X"
* (a reserve that wasn't met, which is not a sale price). */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px;
border-radius: 999px; font-family: var(--mono); font-size: .72rem;
font-weight: 500; letter-spacing: .02em; white-space: nowrap;
border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); }
.pill-live { background: rgba(74, 222, 128, .13); border-color: rgba(74, 222, 128, .42); color: var(--good); }
.pill-sold { background: rgba(125, 211, 252, .11); border-color: rgba(125, 211, 252, .36); color: var(--ok); }
.pill-after { background: rgba(125, 211, 252, .09); border-color: rgba(125, 211, 252, .36); color: var(--ok); border-style: dashed; }
.pill-bid { background: rgba(251, 191, 36, .11); border-color: rgba(251, 191, 36, .36); color: var(--warn); }
.loc-row { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line-soft); }
/* Market-data loader: a little car driving to the finish line. The car's
* position is REAL progress (models loaded / models total), not theatre. */
.load-wrap { padding: 46px 0 26px; }
.load-track { position: relative; height: 58px; max-width: 560px; margin: 0 auto;
border-bottom: 2px solid var(--line); }
.load-track::after {
content: ''; position: absolute; right: 0; bottom: 2px; width: 14px; height: 46px;
background: repeating-conic-gradient(#e8ecf1 0% 25%, #131a26 0% 50%) 0 0 / 7px 7px;
border-radius: 2px;
}
.load-car { position: absolute; left: 0; bottom: 2px; width: 88px;
transition: left .35s ease; }
.load-car svg { display: block; width: 100%; height: auto; }
.load-car .wheel { animation: load-wheel .45s linear infinite;
transform-box: fill-box; transform-origin: center; }
@keyframes load-wheel { to { transform: rotate(360deg); } }
.load-note { text-align: center; margin-top: 14px; }
/* Homepage hero: text beside the logo car (the car hides on small screens). */
.hero-flex { display: flex; align-items: center; gap: 56px; }
.hero-art { flex: none; width: 250px; filter: drop-shadow(0 18px 44px rgba(96, 165, 250, .22)); }
.hero-art svg { width: 100%; height: auto; display: block; }
@media (max-width: 780px) { .hero-art { display: none; } }
.narrow { max-width: 780px; }
/* Live tallies under the hero: what the engine is actually sitting on. */
.hero-stats {
display: flex; gap: 16px 40px; flex-wrap: wrap;
margin-top: 34px; padding-top: 22px;
border-top: 1px solid var(--line-soft);
}
.hero-stats .stat { display: flex; flex-direction: column; gap: 2px; }
.hero-stats .stat b {
font-family: var(--mono); font-weight: 600; font-size: 1.3rem;
font-variant-numeric: tabular-nums; color: var(--ink);
}
.hero-stats .stat span {
font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
letter-spacing: .14em; color: var(--muted);
}
/* ------------------------------------------------------- the duel section */
/* The homepage signature: two cars at the SAME price with opposite outcomes,
* face to face. The layout is the argument — everything else on the page
* supports this one comparison. */
.duel { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; position: relative; }
.duel-half {
background: linear-gradient(180deg, rgba(196, 216, 245, .03), rgba(196, 216, 245, 0) 120px), var(--surface-1);
border: 1px solid var(--line);
border-radius: var(--radius); overflow: hidden;
display: flex; flex-direction: column;
box-shadow: var(--edge);
}
.duel-half.is-free { border-color: rgba(74, 222, 128, .35); }
.duel-half.is-paid { border-color: rgba(251, 113, 133, .28); }
.duel-photo { position: relative; aspect-ratio: 16 / 9; background: var(--surface-2); }
.duel-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.duel-photo .duel-tag {
position: absolute; top: 12px; left: 12px;
font-family: var(--mono); font-size: .68rem; font-weight: 600;
text-transform: uppercase; letter-spacing: .12em;
padding: 5px 10px; border-radius: 7px;
background: rgba(4, 8, 15, .78); backdrop-filter: blur(6px);
}
.is-free .duel-tag { color: var(--good); }
.is-paid .duel-tag { color: var(--crit); }
.duel-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.duel-verdict {
display: flex; align-items: baseline; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
padding: 14px 16px; border-radius: var(--radius-sm);
background: var(--surface-2); border: 1px solid var(--line-soft);
}
.duel-verdict .label {
font-family: var(--mono); font-size: .66rem; text-transform: uppercase;
letter-spacing: .13em; color: var(--muted); display: block; margin-bottom: 2px;
}
.duel-verdict .big {
font-family: var(--mono); font-weight: 600; font-size: clamp(1.4rem, 4vw, 1.9rem);
font-variant-numeric: tabular-nums; line-height: 1.1;
}
.duel-vs {
position: absolute; left: 50%; top: 21%; transform: translate(-50%, -50%);
z-index: 2; width: 52px; height: 52px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: var(--mono); font-weight: 600; font-size: .82rem; letter-spacing: .06em;
background: var(--plane); color: var(--ink-2);
border: 1px solid var(--line); box-shadow: var(--shadow);
}
@media (max-width: 860px) {
.duel { grid-template-columns: 1fr; }
.duel-vs { display: none; }
}
/* ---------------------------------------------------------------- header */
.site-header {
position: sticky; top: 0; z-index: 40;
background: rgba(7, 11, 19, .82);
backdrop-filter: blur(14px) saturate(1.3);
-webkit-backdrop-filter: blur(14px) saturate(1.3);
border-bottom: 1px solid var(--line-soft);
}
.site-header .wrap { display: flex; align-items: center; gap: 22px; height: 64px; position: relative; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 780; color: var(--ink);
font-size: 1.06rem; letter-spacing: -.02em; font-stretch: 112%; }
.brand:hover { text-decoration: none; }
.brand .mark { width: 31px; height: 29px; flex: none; }
.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav a {
color: var(--ink-2); padding: 7px 11px; border-radius: var(--radius-sm);
font-size: .92rem; font-weight: 520; white-space: nowrap;
}
.nav a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--ink); background: var(--surface-2); }
/* The menu button. Hidden on desktop; below the breakpoint it replaces the
* inline nav, which otherwise wraps over the page content — the old broken
* mobile header. */
.nav-toggle {
display: none; margin-left: auto;
width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center;
background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
color: var(--ink); cursor: pointer;
}
.nav-toggle:hover { background: var(--surface-2); }
.nav-toggle svg { display: block; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
/* A signed-in header carries more items (Account, Sign out, sometimes Admin),
* so it collapses to the drawer earlier — renderHeader() marks it. The two
* blocks are the same rules at two widths. */
@media (max-width: 920px) {
.nav-toggle { display: inline-flex; }
.nav {
display: none;
position: absolute; top: 100%; left: 0; right: 0;
flex-direction: column; align-items: stretch; gap: 2px;
margin: 0; padding: 10px 16px 16px;
background: #070b13;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--line);
box-shadow: var(--shadow);
}
.site-header[data-nav-open] .nav { display: flex; }
.nav a { padding: 12px 14px; font-size: 1rem; }
.nav .btn { margin-top: 8px; }
.nav .btn-sm { padding: 10px 14px; font-size: .95rem; }
}
@media (max-width: 1120px) {
.site-header[data-nav-heavy] .nav-toggle { display: inline-flex; }
.site-header[data-nav-heavy] .nav {
display: none;
position: absolute; top: 100%; left: 0; right: 0;
flex-direction: column; align-items: stretch; gap: 2px;
margin: 0; padding: 10px 16px 16px;
background: #070b13;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--line);
box-shadow: var(--shadow);
}
.site-header[data-nav-heavy][data-nav-open] .nav { display: flex; }
.site-header[data-nav-heavy] .nav a { padding: 12px 14px; font-size: 1rem; }
.site-header[data-nav-heavy] .nav .btn { margin-top: 8px; }
}
/* ----------------------------------------------------------------- buttons */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 10px 18px; border-radius: var(--radius-field);
border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
font: inherit; font-size: .95rem; font-weight: 620; cursor: pointer;
text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--surface-3); text-decoration: none; }
.btn { transition: background .14s ease, border-color .14s ease, transform .14s ease, box-shadow .14s ease; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
/* Specificity note: .nav a is (0,2,0) and would out-rank .btn (0,1,0), so a
* button inside the nav needs this to keep its own colours. Exactly the bug
* that made palker's header CTA render grey. */
.btn-primary, .nav .btn-primary {
background: linear-gradient(180deg, #6db1fc, #3f86f0);
border-color: #3f86f0; color: var(--accent-ink);
box-shadow: 0 6px 20px rgba(96, 165, 250, .22);
}
.btn-primary:hover, .nav .btn-primary:hover {
background: linear-gradient(180deg, #85befd, #559af5);
border-color: #559af5; transform: translateY(-1px);
box-shadow: 0 9px 26px rgba(96, 165, 250, .3);
}
.btn-ghost { background: transparent; }
.btn-sm { padding: 6px 12px; font-size: .87rem; }
.btn-lg { padding: 14px 26px; font-size: 1.02rem; }
.btn-block { width: 100%; }
/* ------------------------------------------------------------------- cards */
.card {
background: linear-gradient(180deg, rgba(196, 216, 245, .03), rgba(196, 216, 245, 0) 140px), var(--surface-1);
border: 1px solid var(--line);
border-radius: var(--radius); padding: 22px;
box-shadow: var(--edge);
}
.card + .card { margin-top: 16px; }
.card-tight { padding: 16px; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
/* ------------------------------------------------------------------- text */
/* Eyebrows are set in the data voice — mono, wide-tracked, brand blue. */
.eyebrow {
font-family: var(--mono);
text-transform: uppercase; letter-spacing: .18em; font-size: .7rem;
font-weight: 500; color: var(--accent);
}
.lede { font-size: 1.14rem; color: var(--ink-2); }
.muted { color: var(--muted); }
.small { font-size: .87rem; }
.tiny { font-size: .79rem; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
/* ------------------------------------------------------------------ badges */
.badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 9px; border-radius: 999px;
font-family: var(--mono); font-size: .7rem; font-weight: 500;
letter-spacing: .01em; white-space: nowrap;
background: var(--surface-3); color: var(--ink-2);
border: 1px solid var(--line);
font-variant-numeric: tabular-nums;
}
.badge-good { background: rgba(74, 222, 128, .13); color: var(--good); border-color: rgba(74, 222, 128, .3); }
.badge-ok { background: rgba(125, 211, 252, .12); color: var(--ok); border-color: rgba(125, 211, 252, .28); }
.badge-warn { background: rgba(251, 191, 36, .12); color: var(--warn); border-color: rgba(251, 191, 36, .28); }
.badge-crit { background: rgba(251, 113, 133, .13); color: var(--crit); border-color: rgba(251, 113, 133, .3); }
.badge-live { background: rgba(74, 222, 128, .13); color: var(--good); border-color: rgba(74, 222, 128, .3); }
.badge-sold { background: var(--surface-3); color: var(--muted); }
/* --------------------------------------------------------------- listings */
.listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 18px; }
.listing-card {
background: linear-gradient(180deg, rgba(196, 216, 245, .03), rgba(196, 216, 245, 0) 120px), var(--surface-1);
border: 1px solid var(--line);
border-radius: var(--radius); overflow: hidden;
display: flex; flex-direction: column;
box-shadow: var(--edge);
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.listing-card:hover {
transform: translateY(-3px);
border-color: rgba(102, 169, 252, .4);
box-shadow: var(--edge), var(--shadow-lift);
}
.listing-card .photo {
aspect-ratio: 16 / 10; background: var(--surface-2);
display: flex; align-items: center; justify-content: center;
color: var(--muted); font-size: .8rem; overflow: hidden;
}
.listing-card .photo { position: relative; }
.listing-card .photo img { width: 100%; height: 100%; object-fit: cover;
transition: transform .35s ease; }
.listing-card:hover .photo img { transform: scale(1.035); }
@media (prefers-reduced-motion: reduce) {
.listing-card:hover { transform: none; }
.listing-card:hover .photo img { transform: none; }
}
/* Attribution on every hotlinked photo. Small, but always present — the image
* is someone else's and the page should say so without being asked. */
.photo-credit {
position: absolute; bottom: 6px; right: 7px;
background: rgba(0, 0, 0, .66); color: #e8ecf1;
font-size: .66rem; padding: 2px 6px; border-radius: 5px;
letter-spacing: .01em; pointer-events: none;
}
.hero-photo { position: relative; border-radius: var(--radius); overflow: hidden;
background: var(--surface-2); aspect-ratio: 16/9; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Spec table on a listing */
/* The backdrop paints the 1px gaps AND any unfilled tail of the last row, so
* it stays close to the cell colour — a bright fill reads as a broken panel. */
.spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px;
background: var(--line-soft); border-radius: var(--radius); overflow: hidden; }
.spec { background: var(--surface-1); padding: 12px 14px; }
.spec dt { font-family: var(--mono); font-size: .66rem; text-transform: uppercase;
letter-spacing: .12em; color: var(--muted); font-weight: 500; margin: 0; }
.spec dd { margin: 4px 0 0; font-size: .97rem; font-variant-numeric: tabular-nums; }
.listing-card .body { padding: 15px 16px 16px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.listing-card h3 { font-size: 1.01rem; margin: 0; line-height: 1.35; }
.listing-card h3 a { color: var(--ink); }
.listing-card .meta { display: flex; flex-wrap: wrap; gap: 6px; }
.listing-card .price-row {
display: flex; align-items: baseline; justify-content: space-between;
gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line-soft);
}
.listing-card .price { font-family: var(--mono); font-size: 1.28rem; font-weight: 600;
font-variant-numeric: tabular-nums; }
/* --------------------------------------------------- the headline figures */
.figure-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border-radius: var(--radius); overflow: hidden; }
.figure {
background: var(--surface-1); padding: 16px 18px;
display: flex; flex-direction: column; gap: 3px;
min-width: 0; /* a grid child refuses to shrink without this — the "$12,94" clip */
}
.figure .label { font-family: var(--mono); font-size: .66rem; color: var(--muted);
text-transform: uppercase; letter-spacing: .13em; font-weight: 500; }
.figure .value { font-family: var(--mono); font-size: clamp(1.15rem, 4.2vw, 1.5rem);
font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15; }
.figure .sub { font-size: .8rem; color: var(--muted); }
.figure.hero .value { font-size: clamp(1.5rem, 6vw, 2.2rem); }
.value-good { color: var(--good); }
.value-ok { color: var(--ok); }
.value-warn { color: var(--warn); }
.value-crit { color: var(--crit); }
/* Free score meter */
.meter { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin-top: 8px; }
.meter > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
/* ------------------------------------------------------------- cost table */
.cost-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cost-table th, .cost-table td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.cost-table th { font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
letter-spacing: .12em; color: var(--muted); font-weight: 500; }
.cost-table td.num, .cost-table th.num { text-align: right; white-space: nowrap; }
.cost-table td.num { font-family: var(--mono); font-size: .92rem; }
.cost-table tr:last-child td { border-bottom: 0; }
.cost-table .basis { color: var(--muted); font-size: .82rem; display: block; margin-top: 3px;
line-height: 1.45; font-family: var(--font); }
.cost-table tr.total td { border-top: 2px solid var(--line); font-weight: 700; font-size: 1.02rem; }
.cost-table tr.credit td.num { color: var(--good); }
/* Wide content must scroll in its own box, never the page body. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* ----------------------------------------------------------------- forms */
label { display: block; font-size: .87rem; font-weight: 600; margin-bottom: 6px; color: var(--ink-2); }
/* Match by exclusion, not by listing types: an with no type attribute
* is valid and would match nothing in a type-based selector, falling back to
* the browser default — a pale box with black text, invisible on a dark theme. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
select, textarea {
width: 100%; padding: 10px 12px;
/* background-color, NOT the background shorthand: the shorthand resets
* background-image and would wipe the select chevron. */
background-color: var(--surface-2);
border: 1px solid var(--line); border-radius: var(--radius-field);
color: var(--ink); font: inherit; font-size: .95rem;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
.field { margin-bottom: 14px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }
.hint { font-size: .8rem; color: var(--muted); margin-top: 5px; }
.error-text { color: var(--crit); font-size: .87rem; margin-top: 6px; }
/* A checkbox with its text. flex-wrap stays OFF: a wrapping flex row puts a
* long label on its own line under an orphaned checkbox (the old calculator
* bug) — here the text is a shrinkable flex item beside the box instead. */
.check { display: flex; align-items: flex-start; gap: 9px;
margin: 0; font-weight: 500; font-size: .9rem; cursor: pointer; }
.check input { width: auto; flex: none; margin-top: 3px; accent-color: var(--accent); }
.check + .check { margin-top: 8px; }
.check span { min-width: 0; }
input[type=checkbox] { accent-color: var(--accent); }
/* Autofill can't have its background set directly; this is the standard hack. */
input:-webkit-autofill, input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--ink);
-webkit-box-shadow: 0 0 0 100px var(--surface-2) inset;
}
/* --------------------------------------------------------------- paywall */
.locked {
border: 1px dashed var(--line); border-radius: var(--radius);
padding: 28px 22px; text-align: center; background: var(--surface-1);
}
.locked .lock-icon { font-size: 1.6rem; }
.paywall-preview {
position: relative;
border-radius: var(--radius);
border: 1px solid var(--line);
background: var(--surface-1);
overflow: hidden;
margin-bottom: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.paywall-mock-content {
opacity: 0.22;
filter: blur(1.5px);
pointer-events: none;
user-select: none;
padding: 22px 24px;
}
.paywall-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24px;
text-align: center;
background: radial-gradient(circle at center, rgba(13, 19, 32, 0.88) 0%, rgba(7, 11, 19, 0.72) 100%);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.paywall-overlay .lock-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 50%;
background: rgba(45, 102, 221, 0.15);
border: 1px solid rgba(91, 155, 248, 0.3);
margin-bottom: 10px;
}
.paywall-overlay h3 {
margin: 0 0 6px;
font-size: 1.25rem;
}
.paywall-overlay p {
margin: 0 0 16px;
max-width: 52ch;
font-size: 0.95rem;
}
/* ---------------------------------------------------------------- notices */
.notice {
border-radius: var(--radius-sm); padding: 13px 15px; font-size: .9rem;
border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
}
.notice-warn { border-color: rgba(251, 191, 36, .35); background: rgba(251, 191, 36, .07); }
.notice-crit { border-color: rgba(251, 113, 133, .35); background: rgba(251, 113, 133, .07); }
.notice strong { color: var(--ink); }
/* ------------------------------------------------------------------ toast */
.toast-host { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; }
.toast {
background: var(--surface-3); border: 1px solid var(--line);
padding: 11px 17px; border-radius: var(--radius-sm); box-shadow: var(--shadow);
font-size: .92rem; max-width: 92vw;
}
.toast.err { border-color: rgba(251, 113, 133, .5); }
/* ------------------------------------------------------------------ modal */
.modal-backdrop {
position: fixed; inset: 0; background: rgba(2, 5, 11, .72);
backdrop-filter: blur(3px);
display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 80;
}
.modal {
background: var(--surface-1); border: 1px solid var(--line);
border-radius: var(--radius); padding: 24px; max-width: 560px; width: 100%;
max-height: 86vh; overflow-y: auto; box-shadow: var(--shadow);
}
.modal h3 { margin-top: 0; }
/* ----------------------------------------------------------------- footer */
.site-footer { border-top: 1px solid var(--line-soft); margin-top: 72px; padding: 40px 0 48px;
color: var(--muted); font-size: .88rem;
background: linear-gradient(180deg, rgba(96, 165, 250, .03), transparent 200px); }
.site-footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 26px; }
@media (max-width: 820px) { .site-footer .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .site-footer .cols { grid-template-columns: 1fr; } }
.site-footer a { color: var(--ink-2); display: block; padding: 3px 0; }
.site-footer h4 { color: var(--muted); font-family: var(--mono); font-size: .68rem;
font-weight: 500; text-transform: uppercase; letter-spacing: .16em; }
/* ------------------------------------------------------------------- misc */
.section { padding: 64px 0; }
.section-tight { padding: 34px 0; }
.stack > * + * { margin-top: 14px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.spinner { color: var(--muted); padding: 34px; text-align: center; }
hr { border: 0; border-top: 1px solid var(--line-soft); margin: 22px 0; }
/* The app shell starts hidden and is revealed once the auth guard has passed,
* so a signed-out visitor never sees a flash of the member view. */
.app-shell { opacity: 0; }
body[data-ready] .app-shell { opacity: 1; }
/* ------------------------------------------------------------------ chart */
.chart-wrap { margin: 0; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart circle:hover { r: 7; }
.chart-wrap figcaption { margin-top: 8px; }
.chart text { font-family: var(--mono); }
/* Model-page filter tabs */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tabs button {
padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line);
background: var(--surface-2); color: var(--ink-2); font: inherit;
font-size: .87rem; font-weight: 600; cursor: pointer;
}
.tabs button[aria-pressed="true"] {
background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
/* ------------------------------------------------------- the cost story */
/* Three blocks, visually separated, because they answer three different
* questions: what you need up front, what lands every year, and what the whole
* thing actually cost once the car is sold again. */
.cost-story { display: grid; gap: 14px; }
.cost-block {
background: var(--surface-1); border: 1px solid var(--line);
border-radius: var(--radius); padding: 18px 20px;
box-shadow: var(--edge);
}
.cost-block-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 12px; margin-bottom: 2px; flex-wrap: wrap;
}
.cost-block-head h3 { margin: 0; font-size: 1.05rem; }
.cost-block-total {
font-family: var(--mono);
font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.cost-block .cost-table td { padding: 9px 0; }
.cost-block .cost-table td.num { padding-right: 0; }
/* On a phone the two-column table stops working: the label column claims the
* width it wants and the nowrap money column runs straight off the card, so
* "$1,067/yr" lost its last glyphs over the edge. Rows become a grid instead
* — 1fr for the label, auto for the figure — which sizes the money column to
* its content first and wraps the label into what is left. The basis line
* lives inside the label cell, so it keeps sitting under its own label.
*
* Only the cost-story blocks are converted. The wide failure-points table
* keeps its .scroll-x box, where sideways scrolling is the right answer. */
@media (max-width: 620px) {
.cost-block .cost-table,
.cost-block .cost-table tbody { display: block; }
.cost-block .cost-table tr {
display: grid; grid-template-columns: minmax(0, 1fr) auto;
gap: 0 12px; align-items: baseline; padding: 9px 0;
border-bottom: 1px solid var(--line-soft);
}
.cost-block .cost-table tr:last-child { border-bottom: 0; }
.cost-block .cost-table td { display: block; padding: 0; border-bottom: 0; }
.cost-block .cost-table tr.total { border-top: 2px solid var(--line); }
.cost-block .cost-table tr.total td { border-top: 0; }
/* The head is the same collision one size up: let the title wrap and take
* the figure down a size rather than push it off the card. */
.cost-block-head h3 { min-width: 0; }
.cost-block-total { font-size: 1.2rem; }
.cost-outcome .cost-block-total { font-size: 1.35rem; }
}
/* Same phone problem, worse: the failure-points table is four columns wide, so
* .scroll-x left the title squeezed to a couple of words per line and the
* Expected figure — the one the whole table is building towards — parked off
* the right edge behind a sideways scroll nobody performs. Each row becomes a
* small stack instead: the failure point in full, then its three figures as
* labelled lines, using the headings data-label carries down from issuesTable.
* The header row has nothing left to head, so it goes. */
@media (max-width: 620px) {
.issues-table, .issues-table tbody { display: block; }
.issues-table thead { display: none; }
.issues-table tr {
display: block; padding: 12px 0;
border-bottom: 1px solid var(--line-soft);
}
.issues-table tr:last-child { border-bottom: 0; }
.issues-table td { display: block; padding: 0; border-bottom: 0; border-top: 0; }
.issues-table td.num {
display: flex; justify-content: space-between; align-items: baseline;
gap: 12px; margin-top: 6px;
}
.issues-table td.num::before {
content: attr(data-label); font-family: var(--font); font-weight: 400;
font-size: .82rem; color: var(--muted); white-space: normal;
}
.issues-table tr.total { border-top: 2px solid var(--line); }
/* The two summary rows label themselves in a colspan cell, so their figure
* would otherwise print its label twice. */
.issues-table td[colspan] + td.num::before { content: none; }
.issues-table td[colspan] + td.num { justify-content: flex-end; }
}
/* The outcome block is the site's whole thesis, so it reads as the conclusion
* rather than as a third list. */
.cost-outcome { border-color: var(--line); background: var(--surface-2); }
.cost-outcome.is-free {
border-color: rgba(74, 222, 128, .45);
background: rgba(74, 222, 128, .07);
}
.cost-outcome .cost-block-total { font-size: 1.6rem; }
/* The net cost re-attributed by cause. Set off from the arithmetic above it:
* that table says WHAT it cost, this one says WHY. */
.where-money { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.where-money h4 { margin: 0 0 6px; font-family: var(--mono); font-size: .72rem;
font-weight: 500; text-transform: uppercase;
letter-spacing: .12em; color: var(--muted); }
/* Ranking figure on a browse card — shown when sorted by cost to own, so the
* number the sort used is visible rather than implied. */
.listing-card .cost-row {
display: flex; align-items: baseline; justify-content: space-between;
gap: 8px; padding-top: 8px; border-top: 1px dashed var(--line-soft);
}
.listing-card .cost-figure { font-family: var(--mono); font-weight: 600;
font-variant-numeric: tabular-nums; }
/* Market history on a browse card: the model's price-history chart, compact,
* with the trend and typical value under it. The point is the SHAPE — whether
* this car has been going up — so the chart gets the room and the figures sit
* on one line beneath it. */
.card-market {
padding-top: 9px; margin-top: 1px;
border-top: 1px dashed var(--line-soft);
display: flex; flex-direction: column; gap: 5px;
}
.card-market .chart-compact { max-height: 92px; }
.market-line {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px;
font-family: var(--mono); font-size: .74rem; color: var(--ink-2);
font-variant-numeric: tabular-nums;
}
.market-trend { font-weight: 600; text-decoration: none; }
a.market-trend:hover { text-decoration: underline; }
.chart-compact circle:hover { r: 4; }
/* Filters on the browse page: one slim toolbar, not a boxy card. */
.filter-bar {
background: linear-gradient(180deg, rgba(196, 216, 245, .03), rgba(196, 216, 245, 0)), var(--surface-1);
border: 1px solid var(--line); border-radius: var(--radius);
padding: 14px 16px; box-shadow: var(--edge);
}
/* The sort select sits in a wrapping row; a fixed min-width inline style used
* to shove it past the card edge on phones. */
.sort-select { width: auto; min-width: 210px; }
@media (max-width: 620px) { .sort-select { width: 100%; min-width: 0; } }