/* ==========================================================================
Jitcar — LOTLINE design tokens
Single source of truth per DESIGN.md §2. No color, font, radius, or
shadow may appear in any template that is not a token from this file.
========================================================================== */
:root {
/* --- Color · brand ---------------------------------------------------- */
--asphalt: #23262B; /* ink: primary text, dark surfaces, sticker headers, paybar */
--asphalt-2: #2E323A; /* secondary dark surface */
--stage: #31353D; /* photo/vehicle stage background */
--concrete: #F1F0EB; /* page background, the default surface */
--paper: #FFFFFF; /* clean form and document surfaces */
--lane: #FACC15; /* primary action + highlight — road-marking scarcity, never decorative fills */
--guide: #1D6B45; /* reserved exclusively for VERIFIED truth */
--trust: #175EA8; /* explicit source-certified vehicle trust */
--trust-bg: #EAF2FB; /* sourced feature-chip tint */
--favorite-glass: rgba(0, 0, 0, .45); /* photo-contrast control only */
/* --- Color · supporting ----------------------------------------------- */
--guide-bg: #E3F0E8; /* fit-chip tint */
--lane-ink: #7A5D00; /* text on pale yellow tints */
--steel: #6A6E76; /* secondary text */
--hairline: #DEDEDA;
--hairline-2: #CFCFC9;
/* Derived neutrals — tints of asphalt on concrete. Derive, don't invent hues. */
--fill-quiet: #E9E9E2; /* est-chip / droptag fill (boards) */
--asphalt-08: rgba(35, 38, 43, .08); /* quiet hover fills */
--overlay-light: rgba(255, 255, 255, .14); /* favorite button on the stage */
--steel-2: #B9BCC2; /* secondary text on dark surfaces (paybar) */
--guide-border: #CBE2D4; /* border on guide-bg tinted panels */
/* --- Color · functional only (not brand) ------------------------------ */
--error: #B3261E; /* form field validation ONLY — never on vehicle cards (§4 gap-closer rule) */
/* --- Type ------------------------------------------------------------- */
/* Display + UI + body: Plus Jakarta Sans. Data (every number a shopper compares):
Overpass Mono. Self-hosted woff2 in the production app; no third font, ever. */
--sans: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', system-ui, -apple-system, sans-serif;
--mono: 'Overpass Mono', 'Overpass Mono Fallback', ui-monospace, 'SFMono-Regular', monospace;
--w-regular: 500;
--w-semibold: 600;
--w-bold: 700; /* mono data emphasis — chips, pay heroes */
--w-extrabold: 800;
--w-black: 800;
--track-display: -0.04em;
--track-heading: -0.025em;
/* Modular scale — the only permitted type steps. */
--fs-2xs: 0.6875rem; /* 11px — status chips, stock numbers, card footers */
--fs-xs: 0.75rem; /* 12px — kickers, card meta, footnotes */
--fs-sm: 0.8125rem; /* 13px — labels, filter rows */
--fs-base: 0.9375rem; /* 15px — body */
--fs-md: 1.0625rem; /* 17px — card titles, leads */
--fs-lg: 1.25rem; /* 20px — paybar payment hero */
--fs-xl: 1.375rem; /* 22px — card payment hero */
--fs-2xl: 1.6875rem; /* 27px — section headlines */
--fs-3xl: 2rem; /* 32px — sticker payment hero (~31–34) */
--fs-4xl: 2.5rem; /* 40px — display */
--lh-tight: 1.15;
--lh-body: 1.5;
/* --- Shape ------------------------------------------------------------ */
--radius-control: 6px; /* status chips, badges, small controls */
--radius-field: 11px; /* search fields, segmented controls, filter buttons (boards) */
--radius-card: 14px; /* cards, sheets */
--radius-pill: 999px; /* filter chips, the header budget chip */
/* --- Elevation — flat paper: hairlines, near-zero shadows -------------- */
--shadow-sheet: 0 1px 2px rgba(35, 38, 43, .05), 0 12px 34px rgba(35, 38, 43, .10);
--shadow-focus: 0 0 0 3px rgba(245, 197, 24, .18);
/* the one soft elevation token, for sheets/modals only */
--shadow-card: 0 2px 8px rgba(35, 38, 43, .07);
/* --- Spacing (4px base) ------------------------------------------------ */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-8: 32px;
--sp-10: 40px;
--sp-12: 48px;
/* --- Motion — one orchestrated moment per page max (§9) ---------------- */
--ease: cubic-bezier(.2, .7, .2, 1);
--dur-fast: 120ms;
--dur-reveal: 320ms; /* the budget-state flip — the page's earned moment */
/* --- Pattern — the one sanctioned pattern-fill (§2) --------------------
Dashed lane-line motif for dark hero bands. */
--lane-dashes: repeating-linear-gradient(
90deg,
var(--lane) 0 26px,
transparent 26px 44px
);
}
/* ==========================================================================
Jitcar — LOTLINE base layer
Type, buttons, forms, chips, badges, vehicle card, odometer digits.
Consumes tokens.css only — no raw color/font/radius/shadow values here.
Anatomy & spacing are provisional until verified against the v3 boards
in design/reference/ (boards are canonical for anatomy and spacing).
========================================================================== */
/* --- Fonts — self-hosted variable woff2 (production app; boards load
Google Fonts intentionally for standalone use). One file per family
covers all permitted weights (latin subset, OFL — licenses alongside).
Preload both in every template head — both faces are above the fold
on every page:
-------------------- */
@font-face {
font-family: 'Plus Jakarta Sans';
src: url('fonts/plus-jakarta-sans-var.woff2') format('woff2');
font-weight: 200 800;
font-display: swap;
}
@font-face {
font-family: 'Overpass Mono';
src: url('fonts/overpass-mono-var.woff2') format('woff2');
font-weight: 300 800;
font-display: swap;
}
/* Metric-matched local fallbacks — keeps font-display:swap (DESIGN.md §2)
Historical baseline only; these were the prior Overpass weight-band
measurements, not Plus Jakarta Sans adjustments:
2026-07-30: 400→99.8% · 600→102.2% · 700→103.4% · 800→104.7% · 900→108%).
Liberation Sans/Mono = the Arial/Courier metric twins on Linux (CI). */
@font-face {
font-family: 'Plus Jakarta Sans Fallback';
src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue');
font-weight: 100 499;
size-adjust: 100%;
/* Native fallback vertical metrics until DOM-measured. */
}
@font-face {
font-family: 'Plus Jakarta Sans Fallback';
src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue');
font-weight: 500 649;
size-adjust: 100%;
/* Native fallback vertical metrics until DOM-measured. */
}
@font-face {
font-family: 'Plus Jakarta Sans Fallback';
src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue');
font-weight: 650 749;
size-adjust: 100%;
/* Native fallback vertical metrics until DOM-measured. */
}
@font-face {
font-family: 'Plus Jakarta Sans Fallback';
src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue');
font-weight: 750 849;
size-adjust: 100%;
/* Native fallback vertical metrics until DOM-measured. */
}
@font-face {
font-family: 'Plus Jakarta Sans Fallback';
src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue');
font-weight: 850 950;
size-adjust: 100%;
/* Native fallback vertical metrics until DOM-measured. */
}
@font-face {
font-family: 'Overpass Mono Fallback';
src: local('Courier New'), local('Liberation Mono');
size-adjust: 102.6%;
ascent-override: 88%; descent-override: 38%; line-gap-override: 0%;
}
/* --- Reset ------------------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition: none !important;
animation: none !important;
}
}
/* --- Document ----------------------------------------------------------- */
body {
font-family: var(--sans);
font-weight: var(--w-regular);
font-size: var(--fs-base);
line-height: var(--lh-body);
color: var(--asphalt);
background: var(--concrete);
-webkit-font-smoothing: antialiased;
}
/* Visible keyboard focus — quality floor §9 */
:focus-visible {
outline: 2px solid var(--asphalt);
outline-offset: 2px;
}
.dark :focus-visible,
.on-dark :focus-visible {
outline-color: var(--lane);
}
img, svg { display: block; max-width: 100%; }
/* Stroke icon default (boards' .ico convention) */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.ico {
width: 20px;
height: 20px;
stroke: currentColor;
stroke-width: 1.8;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
flex: none;
}
a {
color: inherit;
text-decoration-color: var(--lane);
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
/* --- Type --------------------------------------------------------------- */
/* Sentence case everywhere, including buttons — enforced in copy, not CSS. */
h1, h2, h3, h4 {
line-height: var(--lh-tight);
letter-spacing: var(--track-heading);
font-weight: var(--w-black);
}
h1 { font-size: var(--fs-4xl); letter-spacing: var(--track-display); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-md); font-weight: var(--w-extrabold); letter-spacing: 0; }
/* Every number a shopper compares is set in mono. */
.mono {
font-family: var(--mono);
}
.kicker {
font-family: var(--mono);
font-size: var(--fs-xs);
font-weight: var(--w-semibold);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--steel);
}
.muted { color: var(--steel); }
/* --- Buttons ------------------------------------------------------------
Sentence case. Buttons say what happens and keep the same name through
the flow. Text on lane is always asphalt, never white. ------------------ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
min-height: 48px;
padding: var(--sp-3) var(--sp-5);
border: 1px solid transparent;
border-radius: var(--radius-control);
font-family: var(--sans);
font-size: var(--fs-base);
font-weight: var(--w-extrabold);
line-height: 1;
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease);
}
.btn-primary {
background: var(--lane);
color: var(--asphalt);
}
.btn-primary:hover { filter: brightness(.96); }
.btn-secondary {
background: transparent;
color: var(--asphalt);
border-color: var(--hairline-2);
}
.btn-secondary:hover { border-color: var(--asphalt); }
/* Secondary on dark surfaces (paybar, sticker header) */
.on-dark .btn-secondary {
color: var(--concrete);
border-color: var(--asphalt-2);
}
.btn-dark {
background: var(--asphalt);
color: #fff;
}
.btn-block {
width: 100%;
margin-top: 12px;
}
.btn-quiet {
background: transparent;
color: var(--asphalt);
min-height: 40px;
font-weight: var(--w-semibold);
text-decoration: underline;
text-decoration-color: var(--lane);
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
.btn[disabled] {
opacity: .45;
cursor: not-allowed;
}
/* Time expectation under a primary button (§3 forms) */
.btn-note {
margin-top: var(--sp-2);
font-size: var(--fs-sm);
color: var(--steel);
text-align: center;
}
/* --- Forms ---------------------------------------------------------------
Multi-step, one question cluster per screen, big targets. Consent
checkboxes unticked by default (markup rule). ---------------------------- */
.field { margin-bottom: var(--sp-5); }
.field-label {
display: block;
font-size: var(--fs-sm);
font-weight: var(--w-semibold);
margin-bottom: var(--sp-2);
}
.input,
select.input,
textarea.input {
width: 100%;
min-height: 48px;
padding: var(--sp-3) var(--sp-4);
border: 1px solid var(--hairline-2);
border-radius: var(--radius-control);
background: #fff;
font-family: var(--sans);
font-size: var(--fs-base);
color: var(--asphalt);
transition: border-color var(--dur-fast) var(--ease);
}
.input:focus {
outline: none;
border-color: var(--asphalt);
}
.input::placeholder { color: var(--steel); }
/* Numeric inputs a shopper compares (down payment, term) are data */
.input-mono { font-family: var(--mono); }
/* Errors say what went wrong and how to fix it — never apologize, never vague.
--error is functional-only: fields, never vehicle cards. Validation classes
are applied per field only after blur or an attempted step/submit. */
.field:is(.is-error, .has-error) .input,
.mq-field.has-error :is(input, select, textarea) {
border-color: var(--error);
background: color-mix(in srgb, var(--error) 5%, var(--paper));
}
.field:is(.is-error, .has-error) .input:focus,
.mq-field.has-error :is(input, select, textarea):focus {
border-color: var(--asphalt);
background: var(--paper);
box-shadow: 0 0 0 2px var(--asphalt-08);
}
.field-error {
margin-top: var(--sp-1);
color: var(--error);
font-size: var(--fs-sm);
font-weight: var(--w-semibold);
line-height: var(--lh-body);
}
.client-field-error:not([hidden]) {
display: flex;
align-items: center;
gap: var(--sp-1);
}
.client-field-error::before {
display: inline-grid;
width: 16px;
height: 16px;
flex: none;
place-items: center;
border: 1px solid currentColor;
border-radius: 50%;
content: "!";
font-family: var(--mono);
font-size: 10px;
font-weight: var(--w-black);
line-height: 1;
}
.field-help {
margin-top: var(--sp-1);
font-size: var(--fs-sm);
color: var(--steel);
}
/* Consent row — plain language, unticked by default */
.consent {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
font-size: var(--fs-sm);
}
.consent input[type="checkbox"] {
width: 20px;
height: 20px;
margin-top: 2px;
accent-color: var(--asphalt);
flex: none;
}
/* Soft-pull assurance beside any credit-adjacent step */
.assurance {
display: flex;
align-items: center;
gap: var(--sp-2);
font-size: var(--fs-sm);
color: var(--guide);
font-weight: var(--w-semibold);
}
/* --- Filter / pay chips — pill form (boards: header paychips, filter rows) */
.chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 13px;
border: 1px solid var(--hairline-2);
border-radius: var(--radius-pill);
background: #fff;
font-size: var(--fs-xs);
font-weight: var(--w-bold);
white-space: nowrap;
}
.on-dark .chip {
background: rgba(255, 255, 255, .08);
border-color: rgba(255, 255, 255, .24);
color: var(--concrete);
font-family: var(--mono);
}
.chip.on {
background: var(--lane);
border-color: var(--lane);
color: var(--asphalt);
}
/* --- Status chips (§3) — exactly one per card. Rectangular, control radius. */
.fitchip,
.gapchip,
.estchip,
.droptag {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px;
border-radius: var(--radius-control);
font-family: var(--mono);
font-size: var(--fs-2xs);
font-weight: var(--w-bold);
white-space: nowrap;
}
/* Verified only. Green means verified — using it on an estimate devalues
the whole system. */
.fitchip {
background: var(--guide-bg);
color: var(--guide);
}
/* The gap-closer: sells the fix, never red-flags the car. */
.gapchip {
background: var(--lane);
color: var(--asphalt);
}
/* The pre-flip default. */
.estchip {
background: var(--fill-quiet);
color: var(--steel);
}
/* May accompany any state: "↓ $500 · 12 days listed". The one dark chip on
a card — our own observed price history is the standout signal. It only
renders when the car sits below its first listed price (yo-yo guard), so
the emphasis is always earned. Lane arrow, never green (§5). */
.droptag {
gap: 4px;
background: var(--asphalt);
color: #fff;
}
.droptag .ico { color: var(--lane); }
/* --- Badges — the two-badge system (§3) ----------------------------------
Market badges are estimates and always carry "· est." (copy rule).
Fit badges are verified budget truth. Green never makes a market claim. */
.badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px;
border-radius: var(--radius-control);
font-size: var(--fs-2xs);
font-weight: var(--w-bold);
line-height: 1.4;
}
.badge-market {
background: var(--concrete);
color: var(--asphalt);
}
.badge-fit {
background: var(--guide);
color: #fff; /* white on guide is fine at chip sizes and up */
}
/* --- Vehicle stage (§3) --------------------------------------------------
Feed photography fills a consistent crop; the dark stage remains the
truthful empty-photo surface. */
.deal-badge {
position: absolute;
top: 12px;
left: 12px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 6px;
max-width: calc(100% - 62px);
padding: 7px 10px;
border-radius: var(--radius-control);
color: var(--paper);
font-size: var(--fs-2xs);
font-weight: var(--w-extrabold);
line-height: 1.2;
box-shadow: var(--shadow-card);
text-decoration: none;
}
.deal-badge-market { background: var(--asphalt); }
.deal-badge:focus-visible { outline: 3px solid var(--lane); outline-offset: 2px; }
a.deal-badge-market:hover { filter: brightness(1.12); }
.deal-badge-drop { background: var(--guide); }
.deal-badge-certified { background: var(--trust); }
.stage {
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 0;
background: var(--stage);
overflow: hidden;
aspect-ratio: 16 / 10; /* boards use fixed heights (150/158px) on fixed-width
frames; ratio ≈ equivalent at fluid card widths */
}
.stage::after { display: none; }
.stage img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.photo-empty {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--sp-2);
padding: var(--sp-6);
color: rgba(255, 255, 255, .78);
text-align: center;
}
.photo-empty .ico {
width: 30px;
height: 30px;
opacity: .72;
}
.photo-empty span {
font-family: var(--mono);
font-size: var(--fs-xs);
line-height: var(--lh-tight);
letter-spacing: .02em;
}
.stage .badge {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
}
.fav {
position: absolute;
top: 10px;
right: 10px;
z-index: 3;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: var(--favorite-glass);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
box-shadow: var(--shadow-card);
color: #fff;
cursor: pointer;
}
/* --- Vehicle card ----------------------------------------------------------
Actual photo → title → supporting metadata → payment → sourced highlights
→ explicit next step. One component for mobile and desktop. */
.vcard {
position: relative;
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--hairline);
border-radius: var(--radius-card);
overflow: hidden;
box-shadow: var(--shadow-card);
}
.vbody {
display: flex;
flex: 1;
flex-direction: column;
padding: 13px 14px 14px;
}
.vbody h4 {
font-size: var(--fs-base);
font-weight: var(--w-extrabold);
letter-spacing: 0;
line-height: var(--lh-tight);
}
/* Mileage written plainly here ("41,220 mi") — odometer zeros live only in
odometer-styled components. */
.vmeta {
display: flex;
align-items: center;
gap: 7px;
flex-wrap: wrap;
margin-top: 3px;
font-family: var(--sans);
font-weight: var(--w-regular);
font-variant-numeric: tabular-nums;
font-size: var(--fs-xs);
color: var(--steel);
}
/* Side-by-side cards reserve consistent title and metadata slots so wrapped
content never shifts the monthly payment out of alignment. */
@media (min-width: 681px) {
.vbody h4 {
min-height: 2lh;
}
.vmeta {
min-height: calc(2lh + var(--sp-1));
row-gap: var(--sp-1);
}
}
/* The payline: payment hero + status chip + price sub. The payment is the
typographic hero; cash price demotes to a small mono secondary. */
.payline {
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
margin-top: 9px;
}
.vmeta-mileage {
color: var(--asphalt);
font-family: var(--mono);
font-weight: var(--w-bold);
}
.vmeta-separator { color: var(--hairline-2); }
.vmeta-dealer {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pay-hero {
font-family: var(--mono);
font-size: var(--fs-xl);
font-weight: var(--w-bold);
letter-spacing: -.01em;
line-height: 1;
}
.pay-hero.fit { color: var(--guide); } /* verified fit only */
.pay-sub {
font-family: var(--mono);
font-size: var(--fs-xs);
color: var(--steel);
}
.card-price-panel {
margin-top: 13px;
padding: 10px 12px;
border-radius: var(--radius-field);
background: var(--concrete);
}
.card-price-panel .payline { margin-top: 0; }
.card-price-panel .pay-sub { margin-left: auto; }
.vehicle-facts {
display: flex;
align-items: center;
gap: 6px;
min-height: 27px;
margin: 12px 0 14px;
overflow: hidden;
}
.vehicle-facts span {
min-width: 0;
padding: 5px 8px;
overflow: hidden;
border: 0;
border-radius: var(--radius-control);
background: var(--trust-bg);
color: var(--asphalt);
font-size: var(--fs-2xs);
font-weight: var(--w-bold);
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-cta {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
width: auto;
min-height: 42px;
margin: auto 14px 14px;
padding: 10px 12px;
border-radius: var(--radius-field);
background: var(--lane);
color: var(--asphalt);
font-size: var(--fs-sm);
font-weight: var(--w-extrabold);
text-decoration: none;
transition:
background-color var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease);
}
.card-cta span {
font-size: var(--fs-md);
transition: transform var(--dur-fast) var(--ease);
}
.card-cta:hover {
background: var(--lane);
color: var(--asphalt);
}
.card-cta:hover span { transform: translateX(2px); }
/* Dashed footer: stock number + barcode motif */
.vfoot {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
padding: 8px 14px 10px;
border-top: 1px dashed var(--hairline-2);
}
.stock {
font-family: var(--mono);
font-size: var(--fs-2xs);
color: var(--steel);
letter-spacing: .04em;
}
/* Real Code 128 of the stock number (inline SVG, Services/Barcode.cs) at
the boards' visual weight. */
.barcode {
width: 66px;
height: 18px;
opacity: .85;
color: var(--asphalt);
}
/* --- Odometer digits (§3) --------------------------------------------------
Boxed mono digits, lane numerals on asphalt. The two reveal moments:
pre-qual budget and instant trade value. */
.odo {
display: inline-flex;
gap: 3px;
}
.odo span {
display: grid;
place-items: center;
min-width: 1.5em;
padding: .3em .1em .2em;
background: var(--asphalt);
border-radius: 4px;
font-family: var(--mono);
font-size: var(--fs-3xl);
font-weight: var(--w-black);
line-height: 1;
color: var(--lane);
}
.odo span.sep {
background: transparent;
color: var(--asphalt);
min-width: auto;
}
/* --- Dark hero band with the lane-dash motif ------------------------------ */
.hero-band {
background: var(--asphalt);
color: var(--concrete);
}
.hero-band .lane-line {
height: 4px;
background: var(--lane-dashes);
}
/* --- Cookie choices ------------------------------------------------------
Provider code is gated on the server; this UI only records the shopper's
preference and never loads or replays advertising scripts itself. */
.cookie-consent-banner {
position: fixed;
z-index: 1000;
right: max(18px, env(safe-area-inset-right));
bottom: max(18px, env(safe-area-inset-bottom));
left: max(18px, env(safe-area-inset-left));
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-6);
max-width: 1120px;
margin-inline: auto;
padding: var(--sp-5);
border: 1px solid var(--hairline-2);
border-radius: var(--radius-card);
background: var(--paper);
box-shadow: 0 16px 48px rgba(35, 38, 43, .22);
color: var(--asphalt);
}
.cookie-consent-banner[hidden],
.cookie-preferences-launcher[hidden] { display: none; }
.cookie-consent-banner h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); }
.cookie-consent-banner p { max-width: 710px; margin: 0; color: var(--steel); }
.cookie-consent-actions {
display: flex;
align-items: center;
flex: none;
gap: var(--sp-2);
}
.cookie-consent-actions .btn { white-space: nowrap; }
.cookie-preferences-launcher {
position: fixed;
z-index: 900;
right: max(12px, env(safe-area-inset-right));
bottom: max(12px, env(safe-area-inset-bottom));
min-height: 40px;
padding: 8px 12px;
border: 1px solid var(--hairline-2);
border-radius: 999px;
background: var(--paper);
box-shadow: 0 6px 20px rgba(35, 38, 43, .14);
color: var(--asphalt);
font: var(--w-bold) var(--fs-xs)/1 var(--sans);
cursor: pointer;
}
.cookie-preferences {
width: min(620px, calc(100% - 28px));
max-height: min(760px, calc(100dvh - 28px));
margin: auto;
padding: 0;
overflow: auto;
border: 1px solid var(--hairline-2);
border-radius: var(--radius-card);
background: var(--paper);
color: var(--asphalt);
box-shadow: 0 24px 80px rgba(35, 38, 43, .28);
}
.cookie-preferences::backdrop { background: rgba(35, 38, 43, .64); }
.cookie-preferences form { padding: var(--sp-6); }
.cookie-preferences-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--sp-4);
margin-bottom: var(--sp-3);
}
.cookie-preferences-head h2 { margin: 0; }
.cookie-preferences-head .eyebrow {
margin: 0 0 var(--sp-1);
color: var(--lane-ink);
font: var(--w-semibold) var(--fs-xs)/1.3 var(--mono);
letter-spacing: .08em;
text-transform: uppercase;
}
.cookie-preferences-close {
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid var(--hairline-2);
border-radius: 50%;
background: transparent;
color: var(--asphalt);
font-size: 28px;
line-height: 1;
cursor: pointer;
}
.cookie-preferences > form > p { color: var(--steel); }
.cookie-preference-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-5);
margin-top: var(--sp-3);
padding: var(--sp-4);
border: 1px solid var(--hairline-2);
border-radius: var(--radius-field);
background: var(--concrete);
}
.cookie-preference-row strong { display: block; margin-bottom: 4px; }
.cookie-preference-row span span { display: block; color: var(--steel); font-size: var(--fs-sm); }
.cookie-preference-row input {
flex: none;
width: 24px;
height: 24px;
accent-color: var(--asphalt);
}
.cookie-always-on {
flex: none;
padding: 5px 8px;
border-radius: 999px;
background: var(--asphalt);
color: #fff;
font-size: var(--fs-xs);
font-weight: var(--w-bold);
}
.cookie-preferences-note { font-size: var(--fs-sm); }
.cookie-preferences-actions {
display: flex;
align-items: center;
gap: var(--sp-4);
margin-top: var(--sp-5);
}
@media (max-width: 780px) {
.cookie-consent-banner { align-items: stretch; flex-direction: column; }
.cookie-consent-actions { display: grid; grid-template-columns: 1fr 1fr; }
.cookie-consent-actions .btn-quiet { grid-column: 1 / -1; }
.cookie-preferences form { padding: var(--sp-5); }
.cookie-preferences-actions { align-items: stretch; flex-direction: column; }
}
@media (max-width: 480px) {
.cookie-consent-banner { padding: var(--sp-4); }
.cookie-consent-actions { grid-template-columns: 1fr; }
.cookie-consent-actions .btn-quiet { grid-column: auto; }
}
/* ==========================================================================
Jitcar — SRP template layer (/car/search)
Header, filter rail, toolbar, count line, grid, soft-pull invitation,
pagination. Anatomy per design/reference/ v3 boards (D2 desktop,
frames 02/03 mobile), values mapped to tokens.
One component, two layouts: same card markup desktop and mobile.
========================================================================== */
html,
body {
max-width: 100%;
overflow-x: hidden;
overscroll-behavior-x: none;
}
/* --- Site header --------------------------------------------------------- */
.site-head {
display: flex;
align-items: center;
gap: var(--sp-8);
min-height: 68px;
padding: 0 var(--sp-8);
border-bottom: 1px solid var(--asphalt-2);
background: var(--asphalt);
color: var(--paper);
}
.logo {
display: inline-flex;
align-items: baseline;
flex: none;
color: var(--paper);
font-size: var(--fs-xl);
font-weight: var(--w-black);
letter-spacing: var(--track-display);
line-height: 1;
text-decoration: none;
}
.logo-jit { color: var(--lane); }
.logo-car { color: var(--paper); }
.site-nav {
display: flex;
align-self: stretch;
gap: var(--sp-6);
font-size: var(--fs-base);
line-height: 1.2;
font-weight: var(--w-bold);
}
.site-nav a {
position: relative;
display: inline-flex;
align-items: center;
color: var(--steel-2);
text-decoration: none;
transition: color var(--dur-fast) var(--ease);
}
.site-nav a:hover,
.site-nav a.on { color: var(--paper); }
.nav-menu {
position: relative;
display: flex;
align-self: stretch;
align-items: center;
}
.nav-menu summary {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
height: 100%;
color: var(--steel-2);
cursor: pointer;
list-style: none;
transition: color var(--dur-fast) var(--ease);
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary:hover,
.nav-menu summary:focus-visible,
.nav-menu[open] summary { color: var(--paper); }
.nav-menu summary:focus-visible {
border-radius: var(--radius-control);
outline: 2px solid var(--lane);
outline-offset: 4px;
}
.nav-menu summary svg {
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.75;
transition: transform var(--dur-fast) var(--ease);
}
.nav-menu[open] summary svg { transform: rotate(180deg); }
.nav-submenu {
position: absolute;
z-index: 40;
top: calc(100% - 8px);
left: 50%;
display: grid;
min-width: 190px;
overflow: hidden;
padding: var(--sp-2);
border: 1px solid var(--asphalt-2);
border-radius: var(--radius-control);
background: var(--asphalt-2);
box-shadow: var(--shadow-sheet);
transform: translateX(-50%);
}
.site-nav .nav-submenu a {
min-height: 42px;
padding: var(--sp-2) var(--sp-3);
border-radius: var(--radius-field);
color: var(--steel-2);
white-space: nowrap;
}
.site-nav .nav-submenu a:hover,
.site-nav .nav-submenu a:focus-visible {
color: var(--paper);
background: var(--stage);
outline: 0;
}
.site-nav a.on::after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 3px;
border-radius: var(--radius-pill) var(--radius-pill) 0 0;
background: var(--lane);
content: "";
}
.site-nav a em {
margin-left: var(--sp-1);
padding: 2px 6px;
border-radius: var(--radius-control);
background: var(--lane);
color: var(--asphalt);
font-family: var(--mono);
font-size: var(--fs-2xs);
font-style: normal;
vertical-align: 2px;
}
.live-inventory {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 15px;
border: 1px solid var(--asphalt-2);
border-radius: var(--radius-pill);
background: var(--asphalt-08);
color: var(--steel-2);
font-size: var(--fs-xs);
text-decoration: none;
white-space: nowrap;
}
.live-inventory:hover { border-color: var(--steel); }
.live-inventory strong {
color: var(--lane);
font-weight: var(--w-bold);
}
.live-dot {
width: 8px;
height: 8px;
flex: none;
border-radius: 50%;
background: var(--guide);
}
.site-head .grow { flex: 1; }
.mobile-menu { display: none; }
.header-signin {
min-height: 40px;
padding: 10px 22px;
border-color: var(--lane);
background: var(--lane);
color: var(--asphalt);
text-decoration: none;
box-shadow: var(--shadow-focus);
}
.header-signin:hover { filter: brightness(.97); }
/* The header budget chip — guide green, persists site-wide after the soft
pull. Server renders it hidden (estimate state); the budget-state body
class reveals it. Green = verified only. */
.hbudget {
display: none;
align-items: center;
gap: 7px;
background: var(--guide);
color: #fff;
border-radius: var(--radius-pill);
padding: 7px 14px;
font-size: var(--fs-xs);
font-weight: var(--w-bold);
}
.hbudget .ico { width: 14px; height: 14px; }
.budget-state .hbudget { display: inline-flex; }
/* --- SRP layout ---------------------------------------------------------- */
.srp {
display: grid;
grid-template-columns: 256px 1fr;
gap: 18px;
padding: 18px 28px 34px;
align-items: start;
max-width: 1260px;
margin: 0 auto;
overflow-x: clip;
}
.srp-main { min-width: 0; }
/* --- Filter rail — leads with payment (§7) ------------------------------- */
.drail {
background: #fff;
border: 1px solid var(--hairline);
border-radius: var(--radius-card);
padding: 15px 15px 17px;
}
.drail h5 {
font-family: var(--mono);
font-size: var(--fs-2xs);
font-weight: var(--w-bold);
letter-spacing: .07em;
text-transform: uppercase;
color: var(--steel);
margin: 14px 0 8px;
}
.drail h5:first-child { margin-top: 0; }
/* Cash price / Monthly payment — defaults to Monthly payment */
.seg {
display: flex;
background: var(--concrete);
border: 1px solid var(--hairline);
border-radius: var(--radius-field);
padding: 3px;
}
.seg > * {
flex: 1;
text-align: center;
font-size: var(--fs-xs);
font-weight: var(--w-bold);
padding: 7px 2px;
border-radius: 8px;
border: 0;
background: transparent;
color: var(--steel);
cursor: pointer;
}
.seg .on {
background: var(--asphalt);
color: #fff;
}
/* Range slider visuals (enhancement layer draws thumbs over real inputs) */
.range {
position: relative;
height: 4px;
background: var(--hairline);
border-radius: 2px;
margin: 10px 8px 6px;
}
.range i {
position: absolute;
top: 0;
bottom: 0;
background: var(--lane);
border-radius: 2px;
}
.range s {
position: absolute;
top: 50%;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
border: 2.2px solid var(--asphalt);
transform: translate(-50%, -50%);
}
.range-lab {
display: flex;
justify-content: space-between;
font-family: var(--mono);
font-size: var(--fs-2xs);
color: var(--steel);
margin: 10px 2px 6px;
}
/* Make rows with live counts (truth rule 2: sourced live or removed) */
.checkrow {
display: flex;
align-items: center;
gap: 9px;
padding: 6px 0;
font-size: var(--fs-sm);
}
.checkrow input[type="checkbox"] {
width: 17px;
height: 17px;
border-radius: 5px;
accent-color: var(--asphalt);
flex: none;
}
.checkrow label { flex: 1; }
.checkrow .count {
font-family: var(--mono);
font-size: var(--fs-2xs);
color: var(--steel);
}
.drail .btn { width: 100%; margin-top: 12px; }
/* Rail head — visible only in the mobile sheet */
.drail-head { display: none; }
.pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.facet-scroll {
max-height: 176px;
overflow-y: auto;
padding-right: 4px;
}
.facet-note {
font-size: var(--fs-2xs);
color: var(--steel);
margin-top: 4px;
}
.more-group summary {
cursor: pointer;
list-style: none;
margin-top: 14px;
border-top: 1px dashed var(--hairline-2);
padding-top: 12px;
}
.more-group summary::-webkit-details-marker { display: none; }
.more-group summary::after {
content: " +";
color: var(--steel);
font-weight: var(--w-bold);
}
.more-group[open] summary::after { content: " −"; }
/* --- Toolbar: search restatement + sort ---------------------------------- */
.srp-bar {
display: flex;
align-items: flex-end;
gap: 10px;
margin-bottom: 5px;
}
.inventory-title {
flex: 1;
min-width: 0;
}
.inventory-eyebrow {
display: block;
margin-bottom: var(--sp-1);
color: var(--steel);
font-size: var(--fs-2xs);
font-weight: var(--w-bold);
letter-spacing: .08em;
text-transform: uppercase;
}
.inventory-title h1 {
overflow: hidden;
font-size: var(--fs-2xl);
letter-spacing: var(--track-heading);
text-overflow: ellipsis;
white-space: nowrap;
}
.msearch {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
background: #fff;
border: 1px solid var(--hairline);
border-radius: var(--radius-field);
padding: 10px 13px;
font-size: var(--fs-sm);
color: var(--steel);
}
.msearch .ico { width: 15px; height: 15px; }
.sortchip {
display: flex;
align-items: center;
gap: 7px;
border: 1px solid var(--hairline-2);
border-radius: var(--radius-field);
padding: 0 10px;
font-size: var(--fs-xs);
font-weight: var(--w-bold);
background: #fff;
white-space: nowrap;
min-height: 42px;
transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.sortchip:hover { border-color: var(--steel); }
.sortchip:focus-within {
border-color: var(--lane);
box-shadow: var(--shadow-focus);
}
.sortchip .ico { width: 14px; height: 14px; }
.sortchip select {
min-width: 0;
border: 0;
outline: 0;
background: transparent;
color: var(--asphalt);
font: inherit;
font-weight: var(--w-bold);
cursor: pointer;
padding: 10px 2px;
}
.sortchip select:focus { outline: none; }
/* Mobile filters trigger (offcanvas) */
.tbtn {
display: none;
align-items: center;
gap: 6px;
border: 1px solid var(--hairline-2);
border-radius: var(--radius-field);
padding: 9px 12px;
font-size: var(--fs-xs);
font-weight: var(--w-bold);
background: #fff;
}
.tbtn .ico { width: 15px; height: 15px; }
.tbtn i {
font-style: normal;
font-family: var(--mono);
font-size: var(--fs-2xs);
background: var(--asphalt);
color: var(--lane);
border-radius: var(--radius-pill);
padding: 1px 6px;
}
/* --- Count line — says what mode the shopper is in ----------------------- */
.countline {
font-size: var(--fs-xs);
font-weight: var(--w-regular);
color: var(--steel);
font-variant-numeric: tabular-nums;
letter-spacing: 0;
margin: 0 2px var(--sp-3);
text-transform: none;
}
.feature-search {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--sp-2);
margin-bottom: var(--sp-3);
padding: 7px 8px 7px 12px;
border: 1px solid var(--hairline);
border-radius: var(--radius-field);
background: var(--paper);
transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.feature-search:focus-within {
border-color: var(--lane);
box-shadow: var(--shadow-focus);
}
.feature-search .ico {
width: 18px;
height: 18px;
color: var(--steel);
}
.feature-search-entry {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
min-width: 0;
}
.feature-search-tokens {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.feature-token {
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 30px;
padding: 4px 5px 4px 10px;
border-radius: 999px;
background: var(--asphalt);
color: var(--paper);
font-size: var(--fs-xs);
font-weight: var(--w-bold);
white-space: nowrap;
}
.feature-token button {
display: grid;
width: 22px;
height: 22px;
padding: 0;
place-items: center;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--lane);
font: inherit;
font-size: 17px;
line-height: 1;
cursor: pointer;
}
.feature-token button:hover { background: rgba(255, 255, 255, .12); }
.feature-search-entry > input:not([type]) { flex: 1 1 210px; }
.feature-search input {
min-width: 0;
padding: 7px 2px;
border: 0;
outline: 0;
background: transparent;
color: var(--asphalt);
font: inherit;
}
.feature-search input::placeholder { color: var(--steel); }
.feature-search > button[type="submit"] {
min-height: 36px;
padding: 8px 13px;
border: 0;
border-radius: var(--radius-control);
background: var(--asphalt);
color: var(--paper);
font-size: var(--fs-xs);
font-weight: var(--w-extrabold);
cursor: pointer;
}
.feature-search > button[type="submit"]:hover {
background: var(--lane);
color: var(--asphalt);
}
.feature-suggestions {
position: absolute;
z-index: 15;
top: calc(100% + 6px);
right: 0;
left: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2px;
padding: 8px;
border: 1px solid var(--hairline-2);
border-radius: var(--radius-field);
background: var(--paper);
box-shadow: var(--shadow-sheet);
}
.feature-suggestions[hidden] { display: none; }
.feature-suggestions .feature-suggestion {
display: flex;
align-items: center;
min-height: 40px;
padding: 9px 11px;
border: 0;
border-radius: var(--radius-control);
background: transparent;
color: var(--asphalt);
font-family: var(--sans);
font-size: var(--fs-sm);
font-weight: var(--w-semibold);
text-align: left;
cursor: pointer;
}
.feature-suggestions .feature-suggestion[hidden] { display: none; }
.feature-suggestions .feature-suggestion:hover,
.feature-suggestions .feature-suggestion.on,
.feature-suggestions .feature-suggestion[aria-selected="true"] {
background: var(--fill-quiet);
}
.applied-filter-bar {
display: flex;
align-items: center;
gap: var(--sp-2);
margin-bottom: var(--sp-3);
padding: 9px 11px;
border: 1px solid var(--hairline);
border-radius: var(--radius-field);
background: var(--paper);
}
.applied-filter-label {
flex: none;
font-size: var(--fs-xs);
font-weight: var(--w-bold);
}
.applied-filter-bar .filter-chips {
flex: 1;
margin: 0;
}
.applied-filter-bar .filter-chip {
gap: 7px;
padding: 7px 10px 7px 12px;
border-color: var(--asphalt);
background: var(--asphalt);
color: var(--paper);
line-height: 1;
}
.applied-filter-bar .filter-clear {
flex: none;
padding: 6px 4px;
}
/* --- Results grid — 3-up at full width (§7) ------------------------------ */
.srp-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.srp-results-stage {
position: relative;
min-height: 240px;
}
.results-loader {
position: absolute;
inset: 0;
z-index: 5;
align-items: flex-start;
justify-content: center;
padding-top: clamp(28px, 8vh, 88px);
border-radius: var(--radius-card);
background: rgba(244, 244, 240, .82);
backdrop-filter: blur(2px);
}
.results-loader:not([hidden]) { display: flex; }
.results-loader-panel {
display: flex;
align-items: center;
gap: 14px;
padding: 13px 18px 13px 14px;
border: 1px solid rgba(255, 255, 255, .14);
border-radius: var(--radius-pill);
background: var(--asphalt);
color: #fff;
box-shadow: 0 14px 36px rgba(18, 22, 28, .22);
}
.results-loader-road {
position: relative;
width: 112px;
height: 30px;
flex: none;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .14);
border-radius: var(--radius-pill);
background: #171a1f;
}
.results-loader-road::before {
content: "";
position: absolute;
top: 14px;
right: -40px;
left: -40px;
height: 2px;
background: repeating-linear-gradient(90deg, var(--lane) 0 15px, transparent 15px 27px);
animation: results-road-flow .55s linear infinite;
}
.results-loader-road i {
position: absolute;
top: 8px;
left: 50%;
z-index: 1;
width: 36px;
height: 14px;
border-radius: 5px 9px 4px 4px;
background: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, .32);
transform: translateX(-50%);
animation: results-car-bob .5s ease-in-out infinite alternate;
}
.results-loader-road i::before {
content: "";
position: absolute;
top: -5px;
left: 8px;
width: 19px;
height: 8px;
border-radius: 8px 8px 2px 2px;
background: #fff;
}
.results-loader-road i::after {
content: "";
position: absolute;
bottom: -3px;
left: 6px;
width: 5px;
height: 5px;
border-radius: 50%;
background: #090b0e;
box-shadow: 19px 0 #090b0e;
}
.results-loader-copy { display: grid; gap: 2px; }
.results-loader-copy strong {
font-size: var(--fs-sm);
font-weight: var(--w-extrabold);
}
.results-loader-copy small {
color: rgba(255, 255, 255, .68);
font-family: var(--mono);
font-size: var(--fs-2xs);
}
.is-filter-loading .srp-grid {
opacity: .38;
filter: saturate(.55);
transform: scale(.997);
transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
@keyframes results-road-flow {
to { transform: translateX(27px); }
}
@keyframes results-car-bob {
to { transform: translate(-50%, -1px); }
}
@media (prefers-reduced-motion: reduce) {
.results-loader-road::before,
.results-loader-road i { animation: none; }
}
/* Whole card clickable via stretched title link; fav stays above (z2) */
.vcard .cover { color: inherit; text-decoration: none; }
.vcard .cover::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
/* --- Soft-pull invitation — lane-topped card in the results list (§4) ----- */
.convert {
background: #fff;
border: 1px solid var(--hairline);
border-radius: var(--radius-card);
overflow: hidden;
}
.convert > i {
display: block;
height: 4px;
background: var(--lane);
}
.convert > div {
display: flex;
gap: 11px;
align-items: center;
padding: 12px 14px;
}
.convert b {
display: block;
font-size: var(--fs-sm);
font-weight: var(--w-extrabold);
}
.convert span {
font-size: var(--fs-xs);
color: var(--steel);
}
.convert .ico {
width: 22px;
height: 22px;
color: var(--lane-ink);
flex: none;
}
.convert .btn {
min-height: 0;
padding: 9px 14px;
font-size: var(--fs-xs);
}
/* Once the shopper is in budget state the invitation has done its job */
.budget-state .convert { display: none; }
/* --- Mobile budget banner (frame 03) — revealed with the flip ------------ */
.budget-banner {
display: none;
align-items: center;
gap: 9px;
margin: 12px 14px 0;
background: var(--guide);
border-radius: var(--radius-field);
padding: 11px 13px;
font-size: var(--fs-xs);
font-weight: var(--w-bold);
color: #fff;
}
.budget-banner .ico { width: 16px; height: 16px; flex: none; }
.budget-banner .grow { flex: 1; line-height: 1.3; }
.budget-banner small {
display: block;
font-family: var(--mono);
font-size: 10px;
font-weight: var(--w-semibold);
color: var(--guide-bg);
}
.budget-banner a {
font-weight: var(--w-bold);
color: var(--guide-bg);
text-decoration: none;
}
/* --- Pagination — self-canonical, crawlable prev/next (SEO.md §2) --------- */
.pager {
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
margin-top: var(--sp-6);
font-family: var(--mono);
font-size: var(--fs-sm);
}
.pager a, .pager .cur {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
min-height: 40px;
padding: 0 var(--sp-3);
border: 1px solid var(--hairline-2);
border-radius: var(--radius-control);
background: #fff;
color: var(--asphalt);
text-decoration: none;
}
.pager .cur {
background: var(--asphalt);
border-color: var(--asphalt);
color: #fff;
}
/* --- Site footer — small, honest link set (SEO.md §2) --------------------- */
.site-foot {
background: var(--asphalt);
color: var(--concrete);
margin-top: var(--sp-10);
}
.site-foot .lane-line { height: 4px; background: var(--lane-dashes); }
.site-foot-inner {
max-width: 1260px;
margin: 0 auto;
padding: var(--sp-8) 28px var(--sp-6);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--sp-6);
}
.site-foot h6 {
font-family: var(--mono);
font-size: var(--fs-2xs);
font-weight: var(--w-bold);
letter-spacing: .07em;
text-transform: uppercase;
color: var(--steel);
margin-bottom: var(--sp-2);
}
.site-foot ul { list-style: none; }
.site-foot li { padding: 3px 0; }
.site-foot a {
color: var(--concrete);
text-decoration: none;
font-size: var(--fs-sm);
}
.site-foot .legal {
grid-column: 1 / -1;
border-top: 1px solid var(--asphalt-2);
padding-top: var(--sp-4);
font-size: var(--fs-xs);
color: var(--steel);
}
/* --- Responsive — one component, two layouts; floor is 360px (§9) --------- */
@media (max-width: 1000px) {
.srp { grid-template-columns: 1fr; padding: 12px 14px 34px; }
/* Mobile filter sheet: same element, full parity — shown as a fixed
sheet when body.filters-open (filters.js toggles). */
.drail { display: none; }
.filters-open .drail {
display: block;
position: fixed;
inset: 0;
z-index: 40;
overflow-y: auto;
border-radius: 0;
padding-bottom: 40px;
}
.filters-open { overflow: hidden; }
.filters-open .drail-head {
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
background: #fff;
padding: 4px 0 10px;
font-weight: var(--w-extrabold);
}
.drail-close {
border: 1px solid var(--hairline-2);
background: #fff;
border-radius: var(--radius-control);
width: 34px;
height: 34px;
cursor: pointer;
}
.tbtn { display: flex; }
.srp-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.site-head { min-height: 62px; padding: 0 14px; gap: var(--sp-4); }
.site-nav { display: none; } /* menu button enhancement */
.live-inventory { display: none; }
.mobile-menu {
position: relative;
display: block;
}
.mobile-menu summary {
display: inline-flex;
min-height: 40px;
align-items: center;
gap: 6px;
padding: 8px 11px;
border: 1px solid var(--asphalt-2);
border-radius: var(--radius-control);
color: var(--paper);
background: var(--asphalt-08);
cursor: pointer;
font-size: var(--fs-xs);
font-weight: var(--w-bold);
list-style: none;
}
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-width: 1.7;
}
.mobile-menu[open] summary {
border-color: var(--lane);
color: var(--lane);
}
.mobile-menu-panel {
position: absolute;
z-index: 60;
top: calc(100% + 9px);
right: 0;
display: grid;
width: min(280px, calc(100vw - 28px));
padding: var(--sp-2);
border: 1px solid var(--asphalt-2);
border-radius: var(--radius-control);
background: var(--asphalt-2);
box-shadow: var(--shadow-sheet);
}
.mobile-menu-panel a {
display: flex;
min-height: 44px;
align-items: center;
padding: var(--sp-2) var(--sp-3);
border-radius: var(--radius-field);
color: var(--paper);
font-size: var(--fs-sm);
font-weight: var(--w-bold);
text-decoration: none;
}
.mobile-menu-panel a:hover,
.mobile-menu-panel a:focus-visible {
background: var(--stage);
outline: 0;
}
.mobile-menu-panel em {
margin-left: var(--sp-1);
padding: 2px 6px;
border-radius: var(--radius-control);
color: var(--asphalt);
background: var(--lane);
font-family: var(--mono);
font-size: var(--fs-2xs);
font-style: normal;
}
.mobile-applications {
display: grid;
margin: var(--sp-1) 0;
padding: var(--sp-2) 0;
border-top: 1px solid var(--stage);
border-bottom: 1px solid var(--stage);
}
.mobile-applications > span {
padding: var(--sp-1) var(--sp-3) var(--sp-2);
color: var(--steel-2);
font-family: var(--mono);
font-size: var(--fs-2xs);
font-weight: var(--w-bold);
letter-spacing: .08em;
text-transform: uppercase;
}
.mobile-applications a { padding-left: var(--sp-5); }
.header-signin { min-height: 40px; padding: 9px 16px; }
.budget-state .budget-banner { display: flex; margin: 12px 0 0; }
}
@media (max-width: 680px) {
.srp-grid { grid-template-columns: 1fr; }
.inventory-heading { flex-wrap: wrap; }
.sortchip {
order: 3;
width: 100%;
}
.sortchip select { flex: 1; }
.feature-search {
grid-template-columns: auto minmax(0, 1fr);
scroll-margin-block: var(--sp-4);
transform: translate3d(0, 0, 0);
}
.feature-search input { font-size: 16px; }
.feature-search > button[type="submit"] {
grid-column: 1 / -1;
width: 100%;
}
.feature-suggestions { grid-template-columns: 1fr; }
.inventory-title h1 { font-size: var(--fs-xl); }
.applied-filter-bar {
align-items: flex-start;
flex-wrap: wrap;
}
.applied-filter-label { width: 100%; }
.applied-filter-bar .filter-chips {
flex-basis: calc(100% - 60px);
}
}
/* --- Faceted filter system -------------------------------------------------
CarGurus-inspired interaction structure, expressed in LOTLINE tokens. */
@media (min-width: 1001px) {
.srp { grid-template-columns: 292px 1fr; }
.drail {
position: sticky;
top: 12px;
max-height: calc(100vh - 24px);
overflow-y: auto;
}
}
.drail {
background: var(--fill-quiet);
padding: 12px;
}
.drail-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
padding: 2px 2px 10px;
}
.drail-head > b {
font-size: var(--fs-md);
font-weight: var(--w-black);
}
.drail-head > b span { font-family: var(--mono); }
.drail-head-actions {
display: flex;
align-items: center;
gap: var(--sp-2);
}
.filter-clear {
color: var(--asphalt);
font-size: var(--fs-xs);
font-weight: var(--w-bold);
}
.drail-close { display: none; }
.drail > .filter-chips { display: none; }
.filter-chips {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-bottom: 10px;
}
.filter-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 7px 10px;
border: 1px solid var(--hairline);
border-radius: var(--radius-pill);
background: #fff;
color: var(--asphalt);
font-size: var(--fs-xs);
font-weight: var(--w-semibold);
text-decoration: none;
}
.filter-chip:hover { border-color: var(--asphalt); }
.filter-chip span { font-size: var(--fs-base); line-height: 1; }
.applied-filter-bar .filter-chip:hover {
border-color: var(--asphalt-2);
background: var(--asphalt-2);
}
.applied-filter-bar .filter-chip span {
position: relative;
display: inline-grid;
width: 12px;
height: 12px;
flex: none;
place-items: center;
color: transparent;
font-size: 0;
}
.applied-filter-bar .filter-chip span::before,
.applied-filter-bar .filter-chip span::after {
position: absolute;
width: 11px;
height: 2px;
border-radius: var(--radius-pill);
background: var(--lane);
content: "";
}
.applied-filter-bar .filter-chip span::before { transform: rotate(45deg); }
.applied-filter-bar .filter-chip span::after { transform: rotate(-45deg); }
.save-search {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
min-height: 42px;
margin-bottom: 10px;
border: 0;
border-radius: var(--radius-pill);
background: var(--asphalt);
color: #fff;
font: inherit;
font-size: var(--fs-sm);
font-weight: var(--w-extrabold);
cursor: pointer;
}
.save-search .ico { width: 18px; height: 18px; fill: none; }
.save-search[aria-pressed="true"] .ico { fill: #fff; }
.save-search-note {
margin: -4px 0 10px;
color: var(--steel);
font-size: var(--fs-2xs);
text-align: center;
}
.condition-seg {
margin-bottom: 9px;
background: #fff;
}
.filter-section {
margin-top: 9px;
border: 1px solid var(--hairline);
border-radius: var(--radius-card);
background: #fff;
overflow: clip;
}
.filter-section > summary {
display: flex;
align-items: center;
gap: 8px;
min-height: 48px;
padding: 12px 13px;
cursor: pointer;
list-style: none;
font-size: var(--fs-base);
font-weight: var(--w-extrabold);
}
.filter-section > summary::-webkit-details-marker { display: none; }
.filter-section > summary::after {
content: "";
width: 7px;
height: 7px;
border-right: 1.5px solid var(--asphalt);
border-bottom: 1.5px solid var(--asphalt);
transform: rotate(45deg);
transition: transform var(--dur-fast) var(--ease);
flex: none;
margin-left: 2px;
}
.filter-section[open] > summary::after { transform: rotate(225deg); }
.filter-section-hint {
min-width: 0;
margin-left: auto;
overflow: hidden;
color: var(--steel);
font-family: var(--mono);
font-size: var(--fs-2xs);
font-weight: var(--w-regular);
text-overflow: ellipsis;
white-space: nowrap;
}
.filter-section-body {
padding: 12px 13px 14px;
border-top: 1px solid var(--hairline);
}
.filter-label,
.facet-subtitle {
display: block;
margin: 12px 0 6px;
font-size: var(--fs-xs);
font-weight: var(--w-bold);
}
.filter-section-body > .filter-label:first-child,
.filter-section-body > .facet-subtitle:first-child { margin-top: 0; }
.make-model-list { max-height: 360px; }
.make-block + .make-block { border-top: 1px solid var(--hairline); }
.make-row { min-height: 34px; }
.nested-models {
margin: 0 0 8px 24px;
padding: 2px 0 8px 11px;
border-left: 1px solid var(--hairline-2);
}
.nested-models .facet-subtitle {
margin: 3px 0 4px;
color: var(--steel);
font-size: var(--fs-2xs);
}
.model-row { padding: 5px 0; }
.model-list-status {
padding: 6px 0 8px;
color: var(--steel);
font-size: var(--fs-xs);
}
.model-list-status:not([hidden]) { display: block; }
.filter-actions { padding-top: 10px; }
.filter-actions .btn { margin: 0; }
@media (max-width: 1000px) {
.filters-open .drail {
background: var(--fill-quiet);
padding: 12px;
max-height: none;
}
.filters-open .drail-head {
top: -12px;
z-index: 2;
margin: -12px -12px 0;
padding: 14px;
border-bottom: 1px solid var(--hairline);
}
.drail-close { display: inline-grid; place-items: center; }
.filter-actions {
position: sticky;
bottom: -12px;
z-index: 2;
margin: 10px -12px -12px;
padding: 12px;
border-top: 1px solid var(--hairline);
background: #fff;
}
}
/* --- Progressive filter redesign ---------------------------------------- */
@media (min-width: 1001px) {
.srp {
grid-template-columns: 270px minmax(0, 1fr);
gap: 16px;
}
.drail {
position: static;
max-height: none;
overflow: visible;
}
}
.drail {
overflow: hidden;
padding: 0;
border-color: var(--hairline-2);
background: #fff;
}
.drail-head {
min-height: 52px;
padding: 13px 15px;
border-bottom: 1px solid var(--hairline);
}
.drail .save-search {
width: calc(100% - 30px);
margin: 12px 15px 8px;
}
.drail .save-search-note {
margin: -3px 15px 10px;
}
.drail .condition-seg {
margin: 10px 15px;
}
.drail .filter-section {
margin: 0;
border: 0;
border-top: 1px solid var(--hairline);
border-radius: 0;
background: #fff;
}
.drail .filter-section > summary {
min-height: 50px;
padding: 13px 15px;
}
.drail .filter-section-body {
padding: 12px 15px 15px;
}
.drail .filter-actions {
padding: 14px 15px 15px;
border-top: 1px solid var(--hairline);
background: #fff;
}
.filter-primary-value {
min-height: 48px;
}
.filter-budget-more {
margin-top: 10px;
}
.filter-budget-more > summary {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 0;
color: var(--steel);
cursor: pointer;
font-size: var(--fs-xs);
font-weight: var(--w-bold);
list-style: none;
}
.filter-budget-more > summary::-webkit-details-marker {
display: none;
}
.filter-budget-more > summary::after {
content: "+";
color: var(--lane-ink);
font-family: var(--mono);
}
.filter-budget-more[open] > summary::after {
content: "-";
}
.filter-budget-more-body {
display: grid;
gap: 8px;
padding-top: 5px;
}
.filter-budget-more-body .filter-label {
margin: 0;
}
.filter-budget-more-body .input {
margin-top: 6px;
}
.make-filter-search {
position: relative;
margin-bottom: 10px;
}
.make-filter-search .ico {
position: absolute;
top: 50%;
left: 11px;
width: 16px;
height: 16px;
color: var(--steel);
pointer-events: none;
transform: translateY(-50%);
}
.make-filter-search input {
width: 100%;
min-height: 44px;
padding: 9px 10px 9px 35px;
border: 1px solid var(--hairline-2);
border-radius: var(--radius-field);
outline: 0;
background: #fff;
color: var(--asphalt);
font: inherit;
font-size: var(--fs-sm);
}
.make-filter-search input:focus {
border-color: var(--lane);
box-shadow: var(--shadow-focus);
}
.make-filter-search input::placeholder {
color: var(--steel);
}
.make-model-list {
max-height: 330px;
padding-left: 3px;
overscroll-behavior: contain;
}
.nested-models {
border-left: 2px solid var(--lane);
}
.applied-filter-label > span {
color: var(--steel);
font-family: var(--mono);
font-weight: var(--w-regular);
}
@media (max-width: 1000px) {
.filters-open .drail {
padding: 0;
background: #fff;
}
.filters-open .drail-head {
top: 0;
margin: 0;
padding: 14px 15px;
}
.filters-open .filter-actions {
bottom: 0;
margin: 0;
padding: 12px 15px;
}
}
@media (max-width: 680px) {
.inventory-title {
flex: 1 0 100%;
}
.inventory-heading .tbtn,
.inventory-heading .sortchip {
width: auto;
flex: 1 1 calc(50% - 5px);
}
.inventory-heading .tbtn {
order: 2;
justify-content: center;
}
.inventory-heading .sortchip {
order: 3;
}
}
/* ==========================================================================
Jitcar — budget state (estimate mode)
The flip mechanics per DESIGN.md §4, in the §4 fallback dress: no lender
panel exists yet, so NOTHING here wears guide green — fit/headroom/gap
figures are estimates and say so. When a soft-pull provider lands, the
same slots/classes switch to the verified green treatment.
========================================================================== */
/* --- Header budget chip — estimate variant (asphalt, NOT guide green) ----- */
.hbudget.est {
display: none;
align-items: center;
gap: 7px;
background: var(--asphalt);
color: var(--concrete);
border: 0;
border-radius: var(--radius-pill);
padding: 7px 14px;
font-family: var(--mono);
font-size: var(--fs-xs);
font-weight: var(--w-bold);
cursor: pointer;
}
.budget-state .hbudget.est { display: inline-flex; }
.hbudget.est .clear {
color: var(--steel-2);
font-weight: var(--w-regular);
}
/* --- Card chips in estimate-budget mode ----------------------------------- */
/* fits: asphalt-bold — deliberately NOT the green fitchip */
.fitchip-est {
display: none;
align-items: center;
gap: 5px;
padding: 3px 8px;
border-radius: var(--radius-control);
font-family: var(--mono);
font-size: var(--fs-2xs);
font-weight: var(--w-bold);
background: var(--fill-quiet);
color: var(--asphalt);
white-space: nowrap;
}
/* the gap-closer sells the fix — lane is action, not verified truth */
.gapchip-est {
display: none;
align-items: center;
gap: 5px;
padding: 3px 8px;
border-radius: var(--radius-control);
font-family: var(--mono);
font-size: var(--fs-2xs);
font-weight: var(--w-bold);
background: var(--lane);
color: var(--asphalt);
white-space: nowrap;
}
.budget-state .vcard.fit .fitchip-est,
.budget-state .vcard.gap .gapchip-est { display: inline-flex; }
.budget-state .vcard.fit .estchip,
.budget-state .vcard.gap .estchip { display: none; }
/* The one orchestrated moment (§9): a quiet settle on the payline. */
@media (prefers-reduced-motion: no-preference) {
.vcard .payline { transition: opacity var(--dur-reveal) var(--ease); }
.budget-flipping .vcard .payline { opacity: .35; }
}
/* --- The budget slot (DESIGN.md §4 placement ruling) ----------------------
One slot under the count line, two states. Never inside the car grid. */
.budget-slot { margin: 0 2px 12px; }
/* Pre-flip: the invitation. Desktop = compact single row (details forced
open by JS); mobile = slim collapsed bar expanding on tap (native). */
.bs-invite {
background: #fff;
border: 1px solid var(--hairline);
border-top: 3px solid var(--lane);
border-radius: var(--radius-card);
}
.bs-invite summary {
display: flex;
align-items: center;
gap: 9px;
padding: 11px 14px;
cursor: pointer;
list-style: none;
font-size: var(--fs-sm);
}
.bs-invite summary::-webkit-details-marker { display: none; }
.bs-invite summary .ico { color: var(--lane-ink); }
.bs-invite form {
display: flex;
gap: 10px;
align-items: flex-end;
flex-wrap: wrap;
padding: 0 14px 12px;
}
.bs-invite .field-label { margin-bottom: 4px; }
.bs-invite input { max-width: 140px; }
/* Post-flip: the budget bar with Edit — estimate dress until a lender
verifies (then .verified goes guide green, same slot). */
.bs-bar {
display: flex;
align-items: center;
gap: 10px;
background: var(--asphalt);
color: var(--concrete);
border-radius: var(--radius-field);
padding: 11px 14px;
font-family: var(--mono);
font-size: var(--fs-xs);
font-weight: var(--w-bold);
}
.bs-bar.verified { background: var(--guide); color: #fff; }
.bs-bar .grow { flex: 1; }
.bs-bar button {
background: none;
border: 0;
color: var(--steel-2);
font-family: var(--mono);
font-weight: var(--w-bold);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
}
.budget-state .budget-slot:not(.editing) .bs-invite { display: none; }
.budget-state .budget-slot.editing .bs-bar { display: none; }
/* --- VDP sticker in estimate-budget mode ---------------------------------- */
.budget-state .sticker-top .est-note { color: var(--lane); }
/* ==========================================================================
Jitcar — home template layer (/)
Hero with conversational entry + payment chips, body-type tiles,
fresh-on-lot row. Anatomy per v3 boards (D1 desktop, 01 mobile).
========================================================================== */
/* --- Hero — the one dark band, lane dashes underneath --------------------- */
.dhero {
position: relative;
background: var(--asphalt);
color: #fff;
padding: 40px 44px 46px;
}
.dhero::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 14px;
height: 4px;
background: var(--lane-dashes);
opacity: .9;
}
.dhero h1 {
font-size: var(--fs-4xl);
font-weight: var(--w-black);
line-height: 1.03;
letter-spacing: -.018em;
max-width: 640px;
}
.dhero h1 mark {
background: none;
color: var(--lane);
}
.dhero .sub {
font-size: var(--fs-base);
color: var(--steel-2);
margin: 12px 0 18px;
}
/* Conversational entry — one of two front doors, same destination */
.heroline {
display: flex;
gap: 12px;
align-items: stretch;
max-width: 760px;
}
.ai-entry {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border: 0;
border-radius: var(--radius-field);
padding: 13px 16px;
}
.ai-entry .ico { color: var(--lane-ink); }
.ai-entry input {
flex: 1;
border: 0;
outline: none;
font-family: var(--sans);
font-size: var(--fs-sm);
color: var(--asphalt);
line-height: 1.35;
background: transparent;
}
.ai-entry input::placeholder {
color: var(--steel);
font-style: italic;
}
.dhero .paychips { margin-top: 13px; }
.dhero .paychips .chip { text-decoration: none; cursor: pointer; }
/* --- Sections -------------------------------------------------------------- */
.dsect {
max-width: 1260px;
margin: 0 auto;
padding: 22px 28px 6px;
}
.dsect h2 {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: var(--fs-md);
font-weight: var(--w-extrabold);
letter-spacing: 0;
margin-bottom: 12px;
}
.dsect h2 a {
font-size: var(--fs-xs);
font-weight: var(--w-bold);
color: var(--asphalt);
text-decoration: none;
border-bottom: 2px solid var(--lane);
}
.dsect h2 a .mono { font-size: inherit; }
/* --- Body-type tiles — live values, live counts ---------------------------- */
.btiles {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 10px;
}
.btile {
display: block;
background: #fff;
border: 1px solid var(--hairline);
border-radius: var(--radius-field);
padding: 10px 6px 8px;
text-align: center;
text-decoration: none;
color: var(--asphalt);
}
.btile svg { width: 100%; height: 30px; }
.btile em {
font-style: normal;
font-size: var(--fs-2xs);
font-weight: var(--w-bold);
display: block;
margin-top: 4px;
}
.btile .count {
font-family: var(--mono);
font-size: var(--fs-2xs);
color: var(--steel);
}
/* --- Fresh on the lot ------------------------------------------------------- */
.home-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
max-width: 1260px;
margin: 0 auto;
padding: 14px 28px 34px;
}
/* --- Responsive ------------------------------------------------------------- */
@media (max-width: 1000px) {
.dhero { padding: 30px 18px 40px; }
.heroline { flex-direction: column; }
.btiles { grid-template-columns: repeat(4, 1fr); }
.home-grid { grid-template-columns: 1fr; padding: 14px 14px 30px; }
.dsect { padding: 18px 14px 4px; }
.dhero .paychips { flex-wrap: wrap; }
}
/* ==========================================================================
Jitcar — static/prose page layer (about, legal, faq, contact, fraud)
========================================================================== */
.prose {
max-width: 760px;
margin: 0 auto;
padding: 26px 28px 48px;
}
.prose h1 {
font-size: var(--fs-2xl);
margin-bottom: 14px;
}
.prose h2 {
font-size: var(--fs-md);
font-weight: var(--w-extrabold);
letter-spacing: 0;
margin: 26px 0 8px;
}
.prose h3, .prose h4 {
font-size: var(--fs-base);
font-weight: var(--w-extrabold);
margin: 18px 0 6px;
}
.prose p { margin: 0 0 12px; }
.prose ul, .prose ol { margin: 0 0 12px 22px; }
.prose li { margin-bottom: 6px; }
.prose table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-sm);
margin: 0 0 14px;
}
.prose th, .prose td {
border: 1px solid var(--hairline-2);
padding: 7px 10px;
text-align: left;
vertical-align: top;
}
.prose th { background: var(--fill-quiet); }
.market-methodology { max-width: 820px; }
.market-methodology .eyebrow {
margin-bottom: 8px;
color: var(--steel);
font-family: var(--mono);
font-size: var(--fs-2xs);
font-weight: var(--w-bold);
letter-spacing: .12em;
}
.market-methodology .lede {
padding: 16px 18px;
border-left: 4px solid var(--lane);
background: var(--fill-quiet);
font-size: var(--fs-base);
}
/* Contact cards */
.contact-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
margin: 14px 0 6px;
}
.contact-card {
background: #fff;
border: 1px solid var(--hairline);
border-radius: var(--radius-card);
padding: 15px 16px;
}
.contact-card b { display: block; margin-bottom: 4px; }
.contact-card a { font-family: var(--mono); }
/* FAQ */
.faq-item {
background: #fff;
border: 1px solid var(--hairline);
border-radius: var(--radius-field);
margin-bottom: 10px;
padding: 0;
}
.faq-item summary {
padding: 13px 16px;
font-weight: var(--w-extrabold);
cursor: pointer;
list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item p { padding: 0 16px 13px; margin: 0; color: var(--steel); }
/* --- Lead forms (DESIGN.md §3: clusters, big targets, unticked consent) --- */
.form-page form { margin-top: 6px; }
.form-step {
border: 1px solid var(--hairline);
border-radius: var(--radius-card);
background: #fff;
padding: 16px 18px 12px;
margin: 0 0 14px;
}
.form-step legend {
font-weight: var(--w-extrabold);
font-size: var(--fs-sm);
padding: 0 6px;
}
.form-page .pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.form-actions { margin-top: 4px; }
.form-actions .btn { min-width: 220px; }
.form-done {
background: #fff;
border: 1px solid var(--hairline);
border-top: 3px solid var(--lane);
border-radius: var(--radius-card);
padding: 18px;
margin: 14px 0;
}
.form-done b { display: block; margin-bottom: 6px; }
.inquiry-car {
background: #fff;
border: 1px solid var(--hairline);
border-radius: var(--radius-card);
padding: 14px 16px;
margin-bottom: 14px;
}
.inquiry-car b { display: block; }
.inquiry-car .vmeta { margin: 4px 0 8px; display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 680px) {
.prose { padding: 20px 14px 40px; }
.form-page .pair { grid-template-columns: 1fr; }
}
/* ==========================================================================
Jitcar — lead form layer, per the canonical anatomy (v2 board frame 05,
DESIGN.md §3): big targets, one question cluster per screen, lane
progress, plain-language consent, assurance card, sticky action bar.
========================================================================== */
/* The scene: a quiet dark band keeps the form in focus. The lane motif is
intentionally omitted here so yellow remains reserved for actions. */
.pq-scene {
background: var(--asphalt);
padding: 26px 16px 0;
min-height: 120px;
}
.pq {
max-width: 560px;
margin: 0 auto 48px;
background: #fff;
border-radius: var(--radius-card);
box-shadow: var(--shadow-sheet);
overflow: hidden;
}
.pq-scene .pq { transform: translateY(0); }
/* slim header for focus mode */
.site-head.slim .site-nav { display: none; }
/* --- header: back + form name + step position ----------------------------- */
.pq-head {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
background: #fff;
border-bottom: 1px solid var(--hairline);
}
.pq-head .back {
display: flex;
color: var(--asphalt);
}
.pq-head b {
font-size: var(--fs-base);
font-weight: var(--w-extrabold);
flex: 1;
}
.pq-head .steplabel {
font-family: var(--mono);
font-size: var(--fs-2xs);
color: var(--steel);
letter-spacing: .05em;
}
/* The text label already communicates progress on these short forms. */
.prog { display: none; }
/* --- the form body --------------------------------------------------------- */
.pq-form { padding: 20px 16px 8px; }
.pq-step { margin-bottom: 8px; }
.pq-step > h3 {
font-size: 21px;
font-weight: var(--w-black);
letter-spacing: -.01em;
margin: 0 0 4px;
}
.pq-step > .sub {
color: var(--steel);
font-size: var(--fs-sm);
margin: 0 0 14px;
}
/* Static top labels and large, unmistakably editable targets. */
.pq-form .field { margin-bottom: 10px; }
.pq-form .field-label {
display: block;
color: var(--asphalt);
font-size: var(--fs-xs);
font-weight: var(--w-bold);
margin-bottom: 5px;
}
.pq-form .input {
border-width: 1.5px;
border-color: var(--hairline-2);
border-radius: var(--radius-field);
padding: 14px;
font-size: var(--fs-base);
height: 52px;
min-height: 52px;
min-width: 0;
width: 100%;
transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.pq-form .input:focus {
border-color: var(--asphalt);
box-shadow: 0 0 0 2px var(--asphalt-08);
outline: 2px solid transparent;
}
.pq-form .field:is(.is-error, .has-error) .input {
border-color: var(--error);
background: color-mix(in srgb, var(--error) 5%, var(--paper));
}
.pq-form .field:is(.is-error, .has-error) .input:focus {
border-color: var(--asphalt);
background: var(--paper);
box-shadow: 0 0 0 2px var(--asphalt-08);
outline: 2px solid transparent;
}
.input-shell {
position: relative;
display: block;
min-width: 0;
}
.input-shell .input,
.mq-field .input-shell input,
.mq-field .input-shell select,
.mq-field .input-shell textarea { padding-right: 46px; }
.input-valid-icon {
position: absolute;
top: 50%;
right: 14px;
display: none;
width: 20px;
height: 20px;
transform: translateY(-50%);
place-items: center;
border-radius: 50%;
background: var(--guide);
color: var(--paper);
font-size: var(--fs-2xs);
font-weight: var(--w-black);
line-height: 1;
pointer-events: none;
}
.input-shell:has(select) .input-valid-icon { right: 36px; }
.input-shell:has(select) select { padding-right: 68px; }
.field.is-valid .input-valid-icon,
.mq-field.is-valid .input-valid-icon { display: grid; }
.field.is-valid:not(.is-error):not(.has-error) .input:not(:focus),
.mq-field.is-valid input:not(:focus),
.mq-field.is-valid select:not(:focus),
.mq-field.is-valid textarea:not(:focus) {
border-color: var(--guide);
}
.field:is(.is-error, .has-error) .input-valid-icon,
.mq-field.has-error .input-valid-icon,
.mq-field:has(.is-invalid) .input-valid-icon {
display: none;
}
.pq-form .two {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px;
}
.contact-fields {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 0 9px;
}
.contact-fields .field { min-width: 0; }
.contact-phone,
.contact-address { grid-column: 1 / -1; }
.contact-fields.is-compact {
grid-template-areas:
"first last"
"phone zip"
"email email";
}
.contact-fields.is-compact .contact-first { grid-area: first; }
.contact-fields.is-compact .contact-last { grid-area: last; }
.contact-fields.is-compact .contact-phone { grid-area: phone; }
.contact-fields.is-compact .contact-zip { grid-area: zip; }
.contact-fields.is-compact .contact-email { grid-area: email; }
/* consent — a big tappable card row, plain language, unticked */
.pq-form .consent {
gap: 12px;
font-size: var(--fs-xs);
color: var(--steel);
line-height: 1.55;
margin-top: 4px;
background: var(--concrete);
border: 1.4px solid var(--hairline-2);
border-radius: var(--radius-field);
padding: 14px;
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease);
}
.pq-form .consent:has(input:checked) {
border-color: var(--asphalt);
background: #fff;
}
.pq-form .consent input[type="checkbox"] {
width: 22px;
height: 22px;
border-radius: 6px;
}
/* payment quick-chips on the budget step (chips exist in the system) */
.chiprow {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin: 2px 0 12px;
}
.chiprow .chip { cursor: pointer; font-family: var(--mono); }
/* assurance card — guide icon, truthful copy */
.assure {
display: flex;
gap: 9px;
align-items: center;
background: #fff;
border: 1px solid var(--hairline);
border-radius: var(--radius-field);
padding: 12px 13px;
margin-top: 12px;
font-size: var(--fs-xs);
}
.assure .ico {
width: 17px;
height: 17px;
color: var(--guide);
flex: none;
}
/* --- action bar: lane CTA + trust/time line -------------------------------- */
.formbar {
background: #fff;
border-top: 1px solid var(--hairline);
padding: 12px 16px 18px;
margin-top: 14px;
}
.formbar .btn { width: 100%; }
.formbar .trust {
display: flex;
gap: 7px;
align-items: center;
justify-content: center;
font-size: var(--fs-2xs);
color: var(--steel);
margin-top: 9px;
text-align: center;
}
.formbar .trust .ico {
width: 14px;
height: 14px;
color: var(--guide);
}
/* stepped mode (JS): one cluster per screen; no-JS shows everything */
.pq.stepped .pq-step { display: none; }
.pq.stepped .pq-step.on { display: block; }
@media (max-width: 680px) {
.pq-form .input { font-size: 16px; }
.contact-fields.is-compact {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "first" "last" "phone" "zip" "email";
}
.pq { padding-bottom: 96px; }
.pq.stepped .formbar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 30;
margin: 0;
box-shadow: var(--shadow-sheet);
}
}
/* vehicle summary card on the inquiry form */
.inquiry-summary-wrap { padding-bottom: 0; }
.inquiry-prefill-wrap { padding-bottom: 0; }
.inquiry-prefill {
display: grid;
gap: var(--sp-1);
padding: var(--sp-3) var(--sp-4);
border: 1px solid var(--hairline);
border-left: 3px solid var(--lane);
border-radius: var(--radius-field);
background: var(--fill-quiet);
}
.inquiry-prefill b {
color: var(--asphalt);
font-size: var(--fs-xs);
}
.inquiry-prefill span {
color: var(--steel);
font-size: var(--fs-2xs);
line-height: var(--lh-body);
}
.inquiry-car {
display: grid;
grid-template-columns: 100px minmax(0, 1fr);
gap: 14px;
align-items: center;
padding: 12px;
border: 1px solid var(--hairline);
border-radius: var(--radius-field);
background: var(--concrete);
color: var(--asphalt);
text-decoration: none;
}
.inquiry-car:hover { border-color: var(--asphalt); }
.inquiry-car-thumb {
display: block;
width: 100px;
height: 72px;
overflow: hidden;
border-radius: var(--radius-control);
background: var(--stage);
}
.inquiry-car-thumb picture,
.inquiry-car-thumb img { width: 100%; height: 100%; }
.inquiry-car-thumb img { display: block; object-fit: cover; }
.inquiry-thumb-empty {
display: grid;
width: 100%;
height: 100%;
place-items: center;
color: var(--steel-2);
}
.inquiry-thumb-empty .ico { width: 24px; height: 24px; }
.inquiry-car-details { display: grid; min-width: 0; gap: 5px; }
.inquiry-car-details > b { font-size: var(--fs-sm); line-height: 1.25; }
.inquiry-car-meta {
display: flex;
min-width: 0;
flex-wrap: wrap;
gap: 5px;
color: var(--steel);
font-size: var(--fs-xs);
}
.inquiry-car-price {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 9px;
color: var(--steel);
font-size: var(--fs-xs);
}
.inquiry-car-price strong { color: var(--asphalt); font-size: var(--fs-md); }
@media (max-width: 420px) {
.inquiry-car { grid-template-columns: 88px minmax(0, 1fr); gap: 10px; padding: 10px; }
.inquiry-car-thumb { width: 88px; height: 66px; }
.inquiry-car-meta { font-size: var(--fs-2xs); }
}
/* success — the frame-06 reveal treatment: guide check, bold landing */
.pq .form-done {
margin: 0;
border: 0;
border-radius: 0;
padding: 34px 22px 30px;
text-align: center;
}
.form-done .done-check {
width: 66px;
height: 66px;
border-radius: 50%;
background: var(--guide);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 14px;
}
.form-done .done-check .ico {
width: 30px;
height: 30px;
color: #fff;
stroke-width: 2.4;
}
.form-done b {
font-size: 24px;
font-weight: var(--w-black);
letter-spacing: -.015em;
margin-bottom: 8px;
}
.form-done p {
color: var(--steel);
max-width: 40ch;
margin: 0 auto 16px;
}
/* --- Full new-car quote --------------------------------------------------- */
.quote-full-scene {
min-height: calc(100vh - 70px);
padding: 34px 24px 56px;
background: var(--asphalt);
}
.quote-full-shell {
display: grid;
grid-template-columns: minmax(280px, 370px) minmax(0, 720px);
gap: clamp(28px, 5vw, 68px);
align-items: start;
justify-content: center;
max-width: 1180px;
margin: 0 auto;
}
.quote-full-intro {
position: sticky;
top: 28px;
padding: 18px 0;
color: #fff;
}
.quote-full-back {
display: flex;
width: fit-content;
align-items: center;
gap: 7px;
margin-bottom: 32px;
color: rgba(255, 255, 255, .76);
font-size: var(--fs-xs);
font-weight: var(--w-bold);
text-decoration: none;
}
.quote-full-back:hover { color: #fff; }
.quote-full-back .ico { width: 16px; height: 16px; }
.quote-kicker {
display: inline-block;
color: var(--lane);
font-family: var(--mono);
font-size: var(--fs-2xs);
font-weight: var(--w-bold);
letter-spacing: .11em;
text-transform: uppercase;
}
.quote-full-intro > .quote-kicker { display: block; }
.quote-full-intro h1 {
max-width: 9ch;
margin: 10px 0 14px;
color: #fff;
font-size: clamp(38px, 5vw, 58px);
line-height: .98;
letter-spacing: -.045em;
}
.quote-full-intro > p {
max-width: 34ch;
margin: 0;
color: rgba(255, 255, 255, .7);
font-size: var(--fs-base);
line-height: 1.6;
}
.quote-promises {
display: grid;
gap: 0;
margin: 34px 0 0;
padding: 0;
list-style: none;
border-top: 1px solid rgba(255, 255, 255, .14);
}
.quote-promises li {
display: grid;
grid-template-columns: 34px 1fr;
gap: 10px;
align-items: start;
padding: 15px 0;
border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.quote-promises span {
color: var(--lane);
font-family: var(--mono);
font-size: var(--fs-2xs);
}
.quote-promises b {
color: rgba(255, 255, 255, .9);
font-size: var(--fs-sm);
line-height: 1.4;
}
.quote-full-card {
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .18);
border-radius: calc(var(--radius-card) + 4px);
background: #fff;
box-shadow: var(--shadow-sheet);
}
.quote-full-head {
padding: 26px 28px 22px;
border-bottom: 1px solid var(--hairline);
}
.quote-full-head h2 {
margin: 6px 0 3px;
font-size: 30px;
letter-spacing: -.025em;
}
.quote-full-head p {
margin: 0;
color: var(--steel);
font-size: var(--fs-xs);
}
.quote-full-form { padding: 0; }
.quote-form-section {
padding: 24px 28px 18px;
border-bottom: 1px solid var(--hairline);
}
.quote-section-heading {
display: grid;
grid-template-columns: 34px 1fr;
gap: 10px;
margin-bottom: 18px;
}
.quote-section-heading > span {
padding-top: 4px;
color: var(--steel);
font-family: var(--mono);
font-size: var(--fs-2xs);
}
.quote-section-heading h3 {
margin: 0 0 3px;
font-size: var(--fs-lg);
font-weight: var(--w-black);
}
.quote-section-heading p {
margin: 0;
color: var(--steel);
font-size: var(--fs-xs);
}
.quote-vehicle-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.quote-contact-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 150px;
gap: 10px;
}
.field-help {
display: block;
margin-top: 5px;
color: var(--steel);
font-size: var(--fs-2xs);
}
.quote-zip-field { max-width: 220px; }
.quote-contact-choice {
min-width: 0;
margin: 4px 0 14px;
padding: 0;
border: 0;
}
.quote-contact-choice legend {
margin-bottom: 7px;
font-size: var(--fs-xs);
font-weight: var(--w-bold);
}
.quote-contact-options {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.quote-contact-options label {
position: relative;
min-width: 0;
cursor: pointer;
}
.quote-contact-options input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.quote-contact-options span {
display: grid;
gap: 2px;
min-height: 64px;
align-content: center;
padding: 10px 12px;
border: 1.4px solid var(--hairline-2);
border-radius: var(--radius-field);
background: var(--concrete);
transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.quote-contact-options b { font-size: var(--fs-sm); }
.quote-contact-options small { color: var(--steel); font-size: var(--fs-2xs); }
.quote-contact-options input:checked + span {
border-color: var(--asphalt);
background: #fff;
box-shadow: inset 0 0 0 1px var(--asphalt);
}
.quote-contact-options input:focus-visible + span {
outline: 3px solid var(--lane);
outline-offset: 2px;
}
.quote-contact-choice.is-error .quote-contact-options span { border-color: var(--danger); }
.quote-contact-fields > .field:last-child { margin-bottom: 10px; }
.quote-contact-fields [hidden] { display: none; }
.quote-full-form select.input { background-color: #fff; }
.quote-full-form .field-label span {
color: var(--steel);
font-weight: var(--w-regular);
}
.quote-select-status {
display: block;
min-height: 16px;
margin-top: 4px;
color: var(--steel);
font-size: var(--fs-2xs);
}
.quote-legal {
margin: 9px 2px 0;
color: var(--steel);
font-size: var(--fs-2xs);
}
.quote-legal a { color: var(--asphalt); }
.quote-consent-note {
margin: 5px 2px 0;
color: var(--steel);
font-size: var(--fs-2xs);
}
.quote-full-submit {
margin: 0;
padding: 18px 28px 24px;
border-top: 0;
}
.quote-full-card .form-done {
margin: 0;
padding: 40px 28px 34px;
border: 0;
border-radius: 0;
text-align: center;
}
@media (max-width: 900px) {
.quote-full-scene { padding-top: 22px; }
.quote-full-shell { grid-template-columns: minmax(0, 720px); gap: 22px; }
.quote-full-intro { position: static; padding: 0; }
.quote-full-back { margin-bottom: 24px; }
.quote-full-intro h1 { max-width: none; font-size: 40px; }
.quote-full-intro > p { max-width: 52ch; }
.quote-promises { grid-template-columns: repeat(3, 1fr); margin-top: 24px; }
.quote-promises li {
grid-template-columns: 1fr;
padding: 13px 12px;
border-right: 1px solid rgba(255, 255, 255, .14);
}
}
@media (max-width: 680px) {
.quote-full-scene { padding: 18px 12px 32px; }
.quote-full-back { margin-bottom: 16px; }
.quote-full-intro h1 { font-size: 35px; }
.quote-promises { display: none; }
.quote-promises li { grid-template-columns: 30px 1fr; border-right: 0; }
.quote-full-head,
.quote-form-section { padding-right: 18px; padding-left: 18px; }
.quote-full-form .two,
.quote-vehicle-grid,
.quote-contact-grid { grid-template-columns: 1fr; }
.quote-contact-options { grid-template-columns: 1fr; }
.quote-contact-options span { min-height: 58px; }
.quote-full-submit { padding: 16px 18px 20px; }
}