/* ==========================================================================
OV1 Auto Group — ov1.css
One stylesheet, built from the worksheet §2.2 tokens. Dark and light mode since v0.2.3 (theme tokens below).
Order: fonts · tokens · base · layout · signature elements (§2.3) · components (§2.4) · utilities · theme UI.
========================================================================== */
/* --- Fonts (self-hosted woff2, public/assets/fonts; see fonts/README.md) ----------------------
font-display: swap, so text paints in the fallback at once and the web font swaps in.
The browser only requests a face when text on the page uses it, so these never block render. */
@font-face {
font-family: "Bebas Neue";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/bebas-neue-400.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/inter-regular.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/inter-500.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/inter-600.woff2") format("woff2");
}
/* --- Tokens --------------------------------------------------------------------------------------
Two layers. (1) Theme tokens: the semantic colors every rule reads (--bg, --surface, --text, --border …).
The dark set is today's look (worksheet §2.2) and is the default; the light set uses white / near-white
surfaces with text in the brand black. Which set applies is decided by data-theme on , written by the
inline head script before any CSS loads (stored choice, else prefers-color-scheme); without JS the media
query below does the same. A section that must stay dark in both modes (hero, red bands, footer) carries
data-theme="dark" itself, so the dark set applies inside it. (2) Brand constants: the red family, the
gradients, pure white / black for things that are white or black in both modes (text on red, the stripe,
the JotForm frame), the placeholder yellow. v0.2.3, light and dark mode: docs/DECISIONS.md 2026-10-04. */
:root {
/* --- brand constants (same in both modes) --- */
--white: #FFFFFF;
--white-rgb: 255, 255, 255;
--black: #000000;
--black-rgb: 0, 0, 0;
--brand-black: #0A0A0A; /* the brand black: dark page field, light-mode text */
/* Brand red (v0.1.3): the fill in the vector masters, docs/brand/logo/ov1_logo__*.pdf → #ED1D24. It is the
accent red everywhere (rules, bars, arcs, stripes, glows). White on it is 4.37:1, under AA for body-size text,
so a red FILL that carries body-size white text uses --grad-red-fill, whose lightest point is --ov1-red-mid
(≥ 5:1). --ov1-red-deep is the one darker shade: gradient dark end, hover, and the ground behind small text.
As TEXT the logo red passes only on the dark field (4.5:1 on #0A0A0A); on white it is 4.37:1, so light mode
reads --accent-text = --ov1-red-deep (6.2:1 on white) wherever red is text. */
--ov1-red: #ED1D24;
--ov1-red-rgb: 237, 29, 36;
--ov1-red-deep: #B9171C; /* #ED1D24 × 0.782 (the worksheet's deep/base ratio); white on it 6.56:1 */
--ov1-red-mid: color-mix(in srgb, var(--ov1-red-deep) 60%, var(--ov1-red)); /* ≈ #CE181F, white 5.5:1 */
--ov1-red-glow: rgba(var(--ov1-red-rgb), .35);
--accent: var(--ov1-red);
--on-accent: var(--white); /* text on any red fill, both modes */
/* gradients (DreamBMW's system in OV1's reds): 90deg accents and fills, 135deg for larger fills, a three-block stripe */
--grad-red: linear-gradient(90deg, var(--ov1-red-deep), var(--ov1-red));
--grad-red-fill: linear-gradient(90deg, var(--ov1-red-deep), var(--ov1-red-mid), var(--ov1-red-deep)); /* behind text; 200% wide, shifted */
--grad-red-135: linear-gradient(135deg, var(--ov1-red-deep), var(--ov1-red));
--grad-stripe: linear-gradient(90deg, var(--ov1-red-deep) 0 33.333%, var(--ov1-red) 33.333% 66.667%, var(--white) 66.667% 100%);
--shimmer: linear-gradient(90deg, transparent, rgba(var(--white-rgb), .15) 40%, rgba(var(--white-rgb), .25) 60%, transparent);
--motion-shift: 10s; /* one gradient loop: 8–12 s */
--placeholder: #FFE600; /* fill-in markers only — never brand color */
--placeholder-rgb: 255, 230, 0;
--success: #2E9E5B;
--success-rgb: 46, 158, 91;
/* type */
--font-display: "Bebas Neue", Impact, sans-serif; /* 400 only (single weight), caps-only face; font-synthesis: none on every use. See docs/DECISIONS.md 2026-10-02 */
--font-body: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace; /* prices, terms */
/* shape */
--radius: 0; /* square corners everywhere (client, v0.1.1). Round only: gauge graphics, the quarter-arc, native radios */
--radius-pill: 0;
/* motion */
--ease: cubic-bezier(.2,.8,.2,1);
--dur: 180ms;
--rise: 16px; /* fade-up travel */
/* layout (derived, not brand tokens) */
--wrap: 1200px;
--gutter: clamp(16px, 4vw, 40px);
--section-y: clamp(56px, 9vw, 112px);
--nav-h: 64px;
}
/* --- Theme tokens: DARK (the default; also re-applied inside any element with data-theme="dark") --- */
:root, [data-theme="dark"] {
color-scheme: dark;
--bg: var(--brand-black); /* page field (#0A0A0A) */
--bg-ink: #000000; /* nav / hero / page-head field */
--surface: #141414; /* cards */
--surface-2: #1C1C1C; /* hover / elevated */
--surface-deep: #111111; /* media wells */
--border: #2A2A2A; /* hairlines */
--border-strong: #3A3A3A; /* hovered card edge */
--text: var(--white);
--text-soft: #DADADA; /* long-form prose */
--text-muted: #9A9A9A; /* meta text: 5.9:1 on #141414, 6.3:1 on #0A0A0A */
--accent-text: var(--ov1-red); /* red used AS text: 4.5:1 on the dark field */
--focus: var(--ov1-red);
--selection-bg: var(--ov1-red);
--selection-text: var(--white);
--input-bg: var(--brand-black);
--input-border: #6B6B6B; /* 3.8:1 on #0A0A0A, 3.3:1 on #141414: the boundary of a control reads at 3:1 (WCAG 1.4.11) */
--control-border: #6B6B6B; /* chips, icon buttons, the theme toggle: same rule */
--input-placeholder: #8A8A8A; /* 4.6:1 on #0A0A0A (was #5f5f5f, 2.3:1) */
--danger-text: #FF6B66;
--hairline: rgba(var(--white-rgb), .12); /* §2.3 #4: 1px white @ 12% */
--glow-alpha: .07; /* the section's radial red glow */
--grid-alpha: .025; /* the body's faint 60px red grid */
--shadow: rgba(var(--black-rgb), .55);
--ph-floor-a: #1C1C1C; /* branded placeholder: studio floor gradient … */
--ph-floor-b: #0B0B0B;
--ph-logo: rgba(var(--white-rgb), .2); /* … and the logo on it, muted */
--ph-sheen: rgba(var(--white-rgb), .075);
--show-on-dark: block; /* which logo file shows: the white one here … */
--show-on-light: none;
}
/* --- Theme tokens: LIGHT (data-theme="light" from the head script / the toggle; no-JS: the system setting) --- */
[data-theme="light"] {
color-scheme: light;
--bg: #F5F5F5;
--bg-ink: #FFFFFF;
--surface: #FFFFFF;
--surface-2: #ECECEC;
--surface-deep: #E6E6E6;
--border: #DCDCDC;
--border-strong: #BDBDBD;
--text: var(--brand-black);
--text-soft: #2A2A2A;
--text-muted: #5C5C5C; /* 5.9:1 on white, 5.5:1 on #F5F5F5 */
--accent-text: var(--ov1-red-deep); /* 6.2:1 on white; the logo red itself is 4.37:1 */
--focus: var(--ov1-red); /* 4.4:1 against white: above the 3:1 UI minimum */
--selection-bg: var(--ov1-red);
--selection-text: var(--white);
--input-bg: #FFFFFF;
--input-border: #7A7A7A; /* 3.5:1 on white */
--control-border: #7A7A7A;
--input-placeholder: #6E6E6E; /* 4.9:1 on white */
--danger-text: #B3261E;
--hairline: rgba(var(--black-rgb), .12);
--glow-alpha: .05;
--grid-alpha: .03;
--shadow: rgba(var(--black-rgb), .22);
--ph-floor-a: #EDEDED;
--ph-floor-b: #D6D6D6;
--ph-logo: rgba(var(--black-rgb), .22);
--ph-sheen: rgba(var(--white-rgb), .6);
--show-on-dark: none;
--show-on-light: block; /* … the dark one here */
}
@media (prefers-color-scheme: light) {
/* No JS ran (no data-theme on ): follow the system. Same values as [data-theme="light"] above. */
:root:not([data-theme]) {
color-scheme: light;
--bg: #F5F5F5; --bg-ink: #FFFFFF; --surface: #FFFFFF; --surface-2: #ECECEC; --surface-deep: #E6E6E6;
--border: #DCDCDC; --border-strong: #BDBDBD; --text: var(--brand-black); --text-soft: #2A2A2A; --text-muted: #5C5C5C;
--accent-text: var(--ov1-red-deep); --focus: var(--ov1-red); --selection-bg: var(--ov1-red); --selection-text: var(--white);
--input-bg: #FFFFFF; --input-border: #7A7A7A; --control-border: #7A7A7A; --input-placeholder: #6E6E6E; --danger-text: #B3261E;
--hairline: rgba(var(--black-rgb), .12); --glow-alpha: .05; --grid-alpha: .03; --shadow: rgba(var(--black-rgb), .22);
--ph-floor-a: #EDEDED; --ph-floor-b: #D6D6D6; --ph-logo: rgba(var(--black-rgb), .22); --ph-sheen: rgba(var(--white-rgb), .6);
--show-on-dark: none; --show-on-light: block;
}
}
/* --- Base --------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[data-theme] { color: var(--text); } /* an always-dark zone (hero, bands, footer) inherits body's RESOLVED color otherwise: re-read the token here */
[hidden] { display: none !important; } /* the attribute must beat any class that sets display (filtered cards, Clear chip) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
margin: 0;
background-color: var(--bg);
/* faint 60px grid of 1px lines in the brand red at 2.5% (DreamBMW's atmosphere, in red) */
background-image: linear-gradient(rgba(var(--ov1-red-rgb), var(--grid-alpha)) 1px, transparent 1px),
linear-gradient(90deg, rgba(var(--ov1-red-rgb), var(--grid-alpha)) 1px, transparent 1px);
background-size: 60px 60px;
color: var(--text);
font: 400 16px/1.6 var(--font-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration-color: var(--ov1-red); text-underline-offset: .2em; }
a:hover { color: var(--text); text-decoration-color: var(--text); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--selection-bg); color: var(--selection-text); }
hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }
p { margin: 0 0 1em; }
strong { font-weight: 600; }
small, .meta { color: var(--text-muted); font-size: .875rem; }
h1, h2, h3, h4, .display {
margin: 0 0 .5em;
font-family: var(--font-display);
font-weight: 400;
font-synthesis: none;
text-transform: uppercase;
letter-spacing: .02em;
line-height: calc(.7em + .3 * var(--fs-old, 1em));
}
/* Bebas Neue has Barlow Condensed's cap height (.7em) but is ~20% narrower. Desktop keeps the Barlow maximum sizes;
below that, the minimums and vw slopes are Barlow's × 1.2. --fs-old is the Barlow size at the same width, so the
line-height above keeps the visible gap between lines (pitch − cap height) at Barlow's .3 × size, as with
line-height 1 before. A heading with a fixed size sets --fs-old: 1em (line-height 1). See DECISIONS.md 2026-10-02. */
h1 { --fs-old: clamp(2.5rem, 7vw, 5rem); font-size: clamp(3rem, 8.4vw, 5rem); }
h2 { --fs-old: clamp(1.875rem, 4.5vw, 3rem); font-size: clamp(2.25rem, 5.4vw, 3rem); }
h3 { --fs-old: clamp(1.25rem, 2.4vw, 1.625rem); font-size: clamp(1.5rem, 2.88vw, 1.625rem); }
h4 { font-size: 1.125rem; }
.lede { font-size: clamp(1.0625rem, 1.8vw, 1.25rem); color: var(--text); max-width: 60ch; }
.eyebrow {
display: inline-block;
margin-bottom: .75rem;
font: 600 12px/1 var(--font-body);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--text-muted);
}
.skip-link {
position: absolute; left: 16px; top: -48px; z-index: 100;
padding: 10px 14px; background: var(--ov1-red-deep); color: var(--on-accent); /* 16px text: the darker shade (6.6:1) */
border-radius: var(--radius); text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 12px; }
.visually-hidden {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; animation-delay: 0ms !important; scroll-behavior: auto !important; }
.btn--red, .cta-band, .card-bar::after, .deal-card::after, .band-tile::after, .quote::after, .form::after, .contact-channel::after, .step::after, .why-block__media::after, .marquee__track, .qarc { animation: none !important; }
.marquee__track { transform: none !important; }
.steps::after { transform: none !important; }
html.js .fade-up, html.js .reveal > *, html.js .diagonals, html.js .divider__stripes { opacity: 1 !important; transform: none !important; }
html.js .diagonals--right { transform: scaleX(-1) !important; }
html.js .gauge .gauge__value { stroke-dasharray: var(--value) 100 !important; }
html.js .qarc circle { stroke-dashoffset: 0 !important; animation: none !important; }
.deal-ph__logo { animation: none !important; transform: none !important; }
}
/* --- Layout ------------------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 780px; }
.section { position: relative; padding-block: var(--section-y); overflow: hidden; }
.section--ink { background: var(--bg-ink); }
.section--line { border-top: 1px solid var(--border); }
.section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(28px, 4vw, 48px); }
.section__head > :first-child { margin-bottom: 0; }
.section__foot { margin-top: clamp(28px, 4vw, 48px); }
.grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.stack > * + * { margin-top: 1rem; }
/* ==========================================================================
Signature elements (worksheet §2.3)
========================================================================== */
/* 1. Gauge arc — partials/gauge-arc.php. 270° sweep, gap at the bottom.
The arc path uses pathLength="100", so --value (0–100) is the filled share of the sweep. */
.gauge {
--value: 0;
--gauge-size: 120px;
position: relative;
display: inline-grid;
place-items: center;
width: var(--gauge-size);
aspect-ratio: 1;
flex: none;
}
.gauge__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gauge__face { fill: var(--surface); }
.gauge__track { fill: none; stroke: var(--border); stroke-width: 6; stroke-linecap: round; }
.gauge__value {
fill: none;
stroke: var(--ov1-red);
stroke-width: 6;
stroke-linecap: round;
stroke-dasharray: var(--value) 100;
filter: drop-shadow(0 0 6px var(--ov1-red-glow));
transition: stroke-dasharray 1.3s var(--ease); /* the speedometer sweep (paint-only; see Motion below) */
}
html.js:not(.reduce) .gauge:not(.in) .gauge__value { stroke-dasharray: 0 100; } /* zero until it enters view */
.gauge__ticks { stroke: var(--hairline); stroke-width: 1; }
.gauge__label {
position: relative;
display: grid;
justify-items: center;
gap: 2px;
text-align: center;
font-family: var(--font-display);
font-weight: 400;
font-synthesis: none;
text-transform: uppercase;
letter-spacing: .02em;
line-height: 1;
}
.gauge__main { font-size: calc(var(--gauge-size) * .2); font-variant-numeric: tabular-nums; }
.gauge__sub { font: 600 calc(var(--gauge-size) * .085)/1 var(--font-body); letter-spacing: .08em; color: var(--text-muted); }
.gauge--sm { --gauge-size: 64px; }
.gauge--lg { --gauge-size: 168px; }
.gauge--badge { --gauge-size: 44px; } /* section badge next to an eyebrow */
.gauge--loading .gauge__value { animation: gauge-sweep 1.4s var(--ease) infinite alternate; }
@keyframes gauge-sweep { from { stroke-dasharray: 4 100; } to { stroke-dasharray: 100 100; } }
/* 2. Red rule — 40×3 red bar under every H1/H2, left-aligned with the text.
Opt out per heading with .no-rule; centred layouts still keep it left (never centred). */
h1::after, h2::after, .red-rule::after {
content: "";
display: block;
width: 40px;
height: 3px;
margin-top: .35em;
background: var(--grad-red);
}
h1::after { margin-top: 20px; }
h2::after { margin-top: 16px; }
.no-rule::after { content: none; }
/* 3. Red bullet — 6px red dot; items uppercase 12px, tracking .08em (matches the posts). */
.bullets { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 14px; }
.bullets li {
position: relative;
padding-left: 20px;
font: 600 12px/1.5 var(--font-body);
letter-spacing: .08em;
text-transform: uppercase;
}
.bullets li::before {
content: "";
position: absolute;
left: 0;
top: .5em;
width: 6px;
height: 6px;
background: var(--ov1-red);
}
.bullets--lg li { font-size: 14px; }
/* Body-copy lists inside prose keep the red dot but stay sentence case. */
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { position: relative; padding-left: 20px; margin-bottom: .5em; }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: .65em; width: 6px; height: 6px; background: var(--ov1-red); }
/* 4. Hairline diagonals — partials/diagonals.php. 1px white @ 12%, 4–6 lines, bottom-left.
Decorative only; the partial is aria-hidden. */
.diagonals {
position: absolute;
left: 0;
bottom: 0;
width: clamp(160px, 28vw, 360px);
height: auto;
pointer-events: none;
fill: none;
stroke: var(--hairline);
stroke-width: 1;
}
.diagonals--right { left: auto; right: 0; transform: scaleX(-1); }
/* 5. Quarter-circle red stroke — the big arc top-right of each post.
2px stroke, 20% opacity, bleeding off the edge. Parent needs position: relative + overflow: hidden. */
.qarc {
position: absolute;
top: calc(var(--qarc-size, 520px) / -2);
right: calc(var(--qarc-size, 520px) / -2);
width: var(--qarc-size, 520px);
height: var(--qarc-size, 520px);
opacity: .2;
pointer-events: none;
overflow: visible;
animation: qarc-drift 26s ease-in-out infinite alternate; /* a very slow drift once drawn (transform only) */
}
.qarc circle { fill: none; stroke: var(--ov1-red); stroke-width: 2; vector-effect: non-scaling-stroke; }
html.js:not(.reduce) .qarc circle { stroke-dasharray: 100 100; stroke-dashoffset: 100; animation: qarc-draw 1.6s var(--ease) .2s forwards; } /* draws in on load */
.qarc--sm { --qarc-size: 320px; }
@media (min-width: 900px) { .qarc { --qarc-size: 820px; } .qarc--sm { --qarc-size: 440px; } }
/* 6. Price lockup — partials/price-lockup.php. "$418" display 40px · "/mo" 14px muted · tax pill.
Numbers are tabular so columns line up in the deal grid. Bebas Neue has tabular figures (tnum);
the mono token is used for the term/miles row (see .deal-card__terms), not the headline price. */
.price { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; line-height: 1; }
.price__amount {
font-family: var(--font-display);
font-weight: 400;
font-synthesis: none;
font-size: 40px;
letter-spacing: .01em;
font-variant-numeric: tabular-nums lining-nums;
}
.price__per { font-size: 14px; color: var(--text-muted); }
.price--withheld .price__withheld { font: 400 clamp(20px, 2.4vw, 26px)/1.1 var(--font-display); font-synthesis: none; text-transform: uppercase; letter-spacing: .03em; color: var(--text); }
.price--lg .price__amount { font-size: clamp(48px, 7vw, 72px); }
.pill {
display: inline-block;
padding: 4px 9px;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
font: 600 11px/1 var(--font-body);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--text);
white-space: nowrap;
}
.pill--red { border-color: var(--ov1-red); color: var(--text); background: rgba(var(--ov1-red-rgb), .12); }
/* ==========================================================================
Components (worksheet §2.4)
========================================================================== */
/* --- Buttons ------------------------------------------------------------------------------------ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
padding: 0 22px;
border: 1px solid var(--text);
border-radius: var(--radius);
background: transparent;
color: var(--text);
font: 400 17px/1 var(--font-display); font-synthesis: none;
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:hover { background: var(--surface-2); color: var(--text); }
.btn--red {
position: relative; overflow: hidden; color: var(--on-accent);
background: var(--grad-red-fill); background-size: 200% 100%; border-color: var(--ov1-red-deep);
animation: red-shift var(--motion-shift) ease-in-out infinite alternate; /* slow gradient drift; lightest point ≥ 5:1 under the white label */
}
.btn--red::after { /* the shimmer: a highlight that sweeps across on hover (transform only) */
content: ""; position: absolute; inset: 0; width: 60%; background: var(--shimmer);
transform: translateX(-100%); pointer-events: none;
}
.btn--red:hover::after, .btn--red:focus-visible::after { animation: shimmer-sweep 1.1s var(--ease) 1; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; box-shadow: none; }
.btn--red:hover:not(:disabled) { border-color: var(--ov1-red); box-shadow: 0 0 0 4px var(--ov1-red-glow); }
.btn--ghost { border-color: var(--control-border); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 15px; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.link-arrow { font-weight: 600; text-decoration: none; }
.link-arrow::after { content: " →"; color: var(--ov1-red); }
/* --- Nav ---------------------------------------------------------------------------------------- */
.nav { position: sticky; top: 0; z-index: 50; background: var(--bg-ink); border-bottom: 1px solid var(--border); }
.nav__inner { display: flex; align-items: center; gap: 24px; height: var(--nav-h); }
.nav__logo { display: flex; align-items: center; flex: none; text-decoration: none; }
.nav__logo img { height: 32px; width: auto; }
.logo-type {
font: 400 30px/1 var(--font-display); font-synthesis: none;
letter-spacing: .04em;
color: var(--text);
}
.logo-type b { color: var(--accent-text); font-weight: 400; }
.nav__links { display: none; list-style: none; margin: 0; padding: 0; gap: 22px; }
.nav__links a {
font: 600 13px/1 var(--font-body);
letter-spacing: .08em;
text-transform: uppercase;
text-decoration: none;
color: var(--text-muted);
padding: 8px 0;
border-bottom: 2px solid transparent;
transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--text); border-bottom-color: var(--ov1-red); }
.nav__actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.nav__phone { font: 600 14px/1 var(--font-body); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nav__phone-label { display: none; }
.nav__toggle {
display: inline-grid; place-items: center; width: 44px; height: 44px;
background: none; border: 1px solid var(--control-border); border-radius: var(--radius); color: var(--text); cursor: pointer;
}
/* Menu button (v0.2.4): three lines. Opening, the outer two slide onto the middle, then turn into an X while the
middle one turns vertical and fades; closing runs the same steps backwards (the delays swap with the state). */
.nav__burger { position: relative; display: block; width: 20px; height: 14px; }
.nav__burger > span {
position: absolute; left: 0; width: 100%; height: 2px; border-radius: 1px; background: currentColor;
transition: top 150ms var(--ease) 150ms, transform 150ms var(--ease) 0ms, opacity 150ms var(--ease) 0ms;
}
.nav__burger > span:nth-child(1) { top: 0; }
.nav__burger > span:nth-child(2) { top: 6px; transition: transform 300ms var(--ease), opacity 150ms var(--ease); }
.nav__burger > span:nth-child(3) { top: 12px; }
.nav__toggle[aria-expanded="true"] .nav__burger > span { transition: top 150ms var(--ease) 0ms, transform 150ms var(--ease) 150ms, opacity 150ms var(--ease) 150ms; }
.nav__toggle[aria-expanded="true"] .nav__burger > span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__burger > span:nth-child(2) { transform: rotate(90deg); opacity: 0; transition: transform 300ms var(--ease), opacity 150ms var(--ease) 150ms; }
.nav__toggle[aria-expanded="true"] .nav__burger > span:nth-child(3) { top: 6px; transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .nav__burger > span { transition-delay: 0ms !important; } }
.nav__drawer { display: none; border-top: 1px solid var(--border); background: var(--bg-ink); }
.nav__drawer ul { list-style: none; margin: 0; padding: 8px var(--gutter) 20px; }
.nav__drawer a { display: block; padding: 14px 0; border-bottom: 1px solid var(--border); font: 400 22px/1 var(--font-display); font-synthesis: none; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
.nav[data-open] .nav__drawer { display: block; }
.cta-short { display: none; }
@media (max-width: 559px) { .cta-long { display: none; } .cta-short { display: inline; } }
.nav__phone-icon { display: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
@media (max-width: 559px) {
.nav__actions { gap: 8px; }
.nav__actions .btn { padding: 0 12px; font-size: 14px; min-height: 40px; }
.nav__phone { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--control-border); border-radius: var(--radius); }
.nav__phone-text { display: none; }
.nav__phone-icon { display: block; }
}
@media (min-width: 1024px) {
.nav__inner { gap: 20px; }
.nav__inner > nav { margin-left: auto; } /* owner, 2026-10-03: links and CTA sit together at the right edge, CTA last */
.nav__actions { margin-left: 0; }
.nav__links { display: flex; flex-wrap: nowrap; }
.nav__links a { white-space: nowrap; }
.nav__toggle, .nav__drawer, .nav[data-open] .nav__drawer { display: none; }
.nav__phone-label { display: inline; color: var(--text-muted); margin-right: 6px; }
}
/* 1024–1199px: all seven links + the long primary CTA must fit on one line, so spacing and size tighten a notch
rather than dropping a link. The button shows its short label here, like phones do. */
@media (min-width: 1024px) and (max-width: 1199px) {
.nav__links { gap: 14px; }
.nav__links a { font-size: 12px; letter-spacing: .05em; }
.nav__actions .btn .cta-long { display: none; }
.nav__actions .btn .cta-short { display: inline; }
}
/* --- Hero --------------------------------------------------------------------------------------- */
.hero {
position: relative;
overflow: hidden;
isolation: isolate;
background: var(--bg-ink);
min-height: min(88vh, 760px);
display: flex;
align-items: center;
padding-block: clamp(72px, 12vw, 140px);
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; } /* the car sits right of centre: a centred crop on a portrait phone cuts it off */
.hero::before { /* keep type legible over any frame of the loop */
content: "";
position: absolute; inset: 0; z-index: -1;
/* Left side stays ≥ 84% black until past the headline's right edge (the h1 is capped at 50% of the width on
tablets, and ends at ~48% at 1280px), then fades so the car on the right of the frame shows through. 84%
black over a pure-white pixel leaves L = .16, i.e. white text at 5.0:1; measured over every frame of the
loop at 360–1280px: ≥ 5:1 everywhere. Phones (≤ 719px) use the vertical wash below instead. */
background: linear-gradient(90deg, rgba(var(--black-rgb), .92) 0%, rgba(var(--black-rgb), .84) 50%, rgba(var(--black-rgb), .12) 76%, rgba(var(--black-rgb), .12) 100%),
linear-gradient(0deg, var(--bg-ink) 0%, transparent 30%);
}
.hero > .wrap { position: relative; z-index: 1; }
@media (max-width: 719px) { .hero::before { background: linear-gradient(0deg, var(--bg-ink) 0%, rgba(var(--black-rgb), .72) 45%, rgba(var(--black-rgb), .55) 100%); } }
.hero h1 { max-width: 14ch; --fs-old: clamp(2.75rem, 8.5vw, 6rem); font-size: clamp(3.3rem, 10.2vw, 6rem); }
@media (min-width: 720px) and (max-width: 1023px) { .hero h1 { max-width: 50%; } } /* tablets: the headline ends before the gradient fades, so the car stays visible */
.hero__sub { max-width: 46ch; font-size: clamp(1.0625rem, 2vw, 1.3125rem); margin-bottom: 28px; }
.hero__trust { margin-top: 22px; font-size: 13px; color: var(--text-muted); letter-spacing: .02em; }
.hero__trust span + span::before { content: "·"; margin: 0 8px; color: var(--ov1-red); }
.hero--page { min-height: 0; padding-block: clamp(56px, 9vw, 104px) clamp(40px, 6vw, 64px); border-bottom: 1px solid var(--border); }
.hero--page::before { content: none; }
.hero--page h1 { max-width: 20ch; }
.hero--page .diagonals { width: clamp(96px, 12vw, 160px); }
/* --- Band tiles --------------------------------------------------------------------------------- */
.band-tiles { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .band-tiles { grid-template-columns: repeat(3, 1fr); } }
.band-tile {
position: relative;
display: flex;
align-items: center;
gap: 20px;
padding: 22px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
text-decoration: none;
transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.band-tile:hover { background: var(--surface-2); border-color: var(--ov1-red); transform: translateY(-2px); }
.band-tile:hover .gauge__value { stroke-dasharray: 100 100; }
.band-tile__range { display: block; font: 400 clamp(28px, 3.4vw, 36px)/1 var(--font-display); font-synthesis: none; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.band-tile__count { display: block; margin-top: 6px; font-size: 14px; color: var(--text-muted); }
.band-tile__count strong { color: var(--text); font-variant-numeric: tabular-nums; }
/* --- Brand strip (typographic only — no OEM logos, §2.5) --------------------------------------- */
.brand-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.brand-strip li { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
@media (max-width: 479px) { .brand-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .brand-strip a { font-size: 15px; padding: 14px 12px; overflow-wrap: anywhere; } }
.brand-strip a {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
height: 100%; min-height: 72px; padding: 16px 18px;
background: var(--bg);
font: 400 18px/1.05 var(--font-display); font-synthesis: none;
letter-spacing: .04em;
text-transform: uppercase;
text-decoration: none;
transition: background var(--dur) var(--ease);
}
.brand-strip a:hover { background: var(--surface-2); }
.brand-strip__count { flex: none; min-width: 28px; padding: 3px 7px; border-radius: var(--radius-pill); background: var(--surface-2); font: 600 12px/1.2 var(--font-body); text-align: center; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.brand-strip a:hover .brand-strip__count { background: var(--ov1-red-deep); color: var(--on-accent); } /* 12px text */
/* --- Deal card / grid / filter bar (skeletons until Sprint 2) --------------------------------- */
.deal-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); list-style: none; margin: 0; padding: 0; }
.deal-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.deal-card:hover { background: var(--surface-2); border-color: var(--border-strong); transform: translateY(-2px); }
.deal-card__media { aspect-ratio: 16 / 10; background: var(--surface-deep); display: grid; }
.deal-card__media img { width: 100%; height: 100%; object-fit: cover; }
/* Branded placeholder (v0.2.1) where an offer has no image_path. The logo is the header's SVG drawn through a CSS
mask (no new file); muted grey = white at 20%; a soft shadow under it; a slow ±4px float, transform only, phase
staggered per offer by --ph-delay (set in the markup from the slug). Reduced motion: still, in the block above. */
.deal-ph { position: relative; width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden;
background: radial-gradient(90% 55% at 50% -5%, var(--ph-sheen) 0%, transparent 70%), linear-gradient(160deg, var(--ph-floor-a) 0%, var(--ph-floor-b) 100%); }
.deal-ph__logo { display: block; width: 40%; aspect-ratio: 268 / 119.2; background: currentColor; color: var(--ph-logo);
-webkit-mask: url(../img/ov1-logo.svg) center / contain no-repeat; mask: url(../img/ov1-logo.svg) center / contain no-repeat;
filter: drop-shadow(0 12px 10px var(--shadow)); will-change: transform;
animation: ph-float 7s ease-in-out infinite; animation-delay: var(--ph-delay, 0s); }
.deal-ph--page .deal-ph__logo { width: 26%; }
@keyframes ph-float { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(4px); } }
.deal__media { max-width: 560px; aspect-ratio: 16 / 10; margin: 18px 0 0; background: var(--surface-deep); border: 1px solid var(--border); display: grid; }
.deal__media img { width: 100%; height: 100%; object-fit: cover; }
.deal__media--ended { opacity: .7; }
/* Uploaded offer photo (v0.3): fills the same 16:10 box as the placeholder (fixed width/height on the ![]()
, so no
layout shift). A representative photo's caption sits over its bottom edge, inside the box. */
.deal-photo { position: relative; margin: 0; width: 100%; height: 100%; overflow: hidden; }
.deal-photo picture, .deal-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.deal-photo__note { position: absolute; inset: auto 0 0 0; padding: 14px 10px 6px; font-size: 11px; line-height: 1.3; color: #F2F2F2;
background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0)); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.deal__media .deal-photo__note { font-size: 12px; padding: 18px 14px 8px; }
.deal-card__body { display: flex; flex-direction: column; gap: 12px; padding: 18px; flex: 1; }
.deal-card__year { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.deal-card__title { margin: 0; font-size: 22px; line-height: 1.05; }
.deal-card__title a { text-decoration: none; }
.deal-card__title a::before { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.deal-card__body-type { margin: 0; font-size: 14px; color: var(--text-soft); } /* v0.4: the body style where the price was */
.deal-card__badge { align-self: flex-start; padding: 3px 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text); border: 1px solid var(--ov1-red); border-radius: var(--radius); } /* v0.4.1 */
.make-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.deal-card__terms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0; background: var(--border); border-top: 1px solid var(--border); }
.deal-card__terms div { padding: 10px 12px; background: var(--surface); }
.deal-card:hover .deal-card__terms div { background: var(--surface-2); }
.deal-card__terms dt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.deal-card__terms dd { margin: 2px 0 0; font: 500 14px/1.2 var(--font-mono); font-variant-numeric: tabular-nums; }
.deal-card__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.deal-card__disclosure { padding: 10px 18px 14px; font-size: 11px; line-height: 1.45; color: var(--text-muted); }
.deal-card--skeleton .skel { display: block; background: var(--surface-2); color: transparent; }
.deal-card--skeleton:hover { transform: none; }
@media (max-width: 719px) { .deal-grid--preview > li:nth-child(n+5) { display: none; } } /* home: 4 cards on phones */
.filter-bar {
position: sticky; top: var(--nav-h); z-index: 20;
display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
margin-bottom: 24px; padding: 12px 0;
background: var(--bg);
border-bottom: 1px solid var(--border);
}
.filter-bar::-webkit-scrollbar { display: none; }
.chip {
flex: none;
display: inline-flex; align-items: center; gap: 6px;
min-height: 36px; padding: 0 14px;
background: var(--surface); border: 1px solid var(--control-border); border-radius: var(--radius-pill);
color: var(--text); font: 600 13px/1 var(--font-body); letter-spacing: .02em;
cursor: pointer; white-space: nowrap;
}
.chip[aria-pressed="true"], .chip:hover { border-color: var(--ov1-red); }
.chip[aria-pressed="true"] { background: rgba(var(--ov1-red-rgb), .14); }
.chip select { appearance: none; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
/* --- Steps (How it works 01–04) ----------------------------------------------------------------- */
.steps { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); list-style: none; margin: 0; padding: 0; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; counter-reset: step; }
.step { position: relative; padding: 28px 24px 32px; background: var(--bg); }
.step__num { display: block; margin-bottom: 18px; font: 400 56px/1 var(--font-display); font-synthesis: none; color: transparent; -webkit-text-stroke: 1px var(--ov1-red); font-variant-numeric: tabular-nums; }
.step__title { margin: 0 0 10px; --fs-old: 1em; font-size: 22px; }
.step p { margin: 0; color: var(--text-muted); font-size: 15px; }
/* --- Why block ---------------------------------------------------------------------------------- */
.why-block { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (min-width: 900px) { .why-block { grid-template-columns: 1fr 1fr; } .why-block--flip .why-block__media { order: -1; } .why-block--solo { grid-template-columns: minmax(0, 720px); } }
.why-block__media { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--surface); aspect-ratio: 4 / 3; }
.why-block__media img { width: 100%; height: 100%; object-fit: cover; }
.why-block__media--empty { display: grid; place-items: center; border: 1px dashed var(--border); }
/* --- Credit application (/apply): JotForm iframe, fixed height; the form scrolls inside the frame ------- */
.apply-note { margin: 0 0 20px; color: var(--text-muted); font-size: 15px; }
/* The JotForm frame (v0.3.1): no border or fill of its own. The form's injected CSS (docs/jotform/credit-app.css) makes
its page transparent and draws the site's form card (one 1px border), so there is never a double border. The frame
is exactly as tall as the form once site.js hears the form's setHeight message (no inner scrollbar); until then the
fallback height below applies and the form scrolls inside it. */
.apply-frame { border: 0; background: transparent; overflow: hidden; }
.apply-frame iframe { display: block; width: 100%; height: min(1200px, calc(100vh - var(--nav-h) - 48px)); min-height: 560px; border: 0; background: transparent; }
.apply-links { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 16px 0 0; font-size: 15px; }
/* --- Testimonials ------------------------------------------------------------------------------- */
.testimonials { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); list-style: none; margin: 0; padding: 0; }
.quote { position: relative; margin: 0; padding: 28px 24px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: transform var(--dur) var(--ease); }
.quote:hover { transform: translateY(-2px); }
.quote::before { content: "\201C"; position: absolute; top: 6px; left: 18px; font: 400 64px/1 var(--font-display); font-synthesis: none; color: var(--ov1-red); }
.quote blockquote { margin: 18px 0 18px; font-size: 16px; }
.quote figcaption { font-size: 13px; color: var(--text-muted); }
.quote figcaption strong { color: var(--text); font-weight: 600; }
/* --- FAQ (native accordion) ----------------------------------------------------------- */
.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
position: relative;
display: block;
padding: 22px 48px 22px 0;
font: 600 17px/1.35 var(--font-body);
cursor: pointer;
list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: "";
position: absolute; right: 8px; top: 50%;
width: 12px; height: 12px; margin-top: -8px;
border-right: 2px solid var(--ov1-red); border-bottom: 2px solid var(--ov1-red);
transform: rotate(45deg);
transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq summary:hover { color: var(--text); }
.faq__answer { padding: 0 0 24px; color: var(--text-soft); max-width: 72ch; }
/* --- CTA band ----------------------------------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; padding-block: clamp(48px, 7vw, 88px); color: var(--on-accent); background: var(--grad-red-fill); background-size: 200% 100%; animation: red-shift var(--motion-shift) ease-in-out infinite alternate; }
.cta-band::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-stripe); } /* the signature stripe: dark red / logo red / white */
.cta-band--black { background: var(--bg-ink); border-block: 1px solid var(--border); animation: none; }
.cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.cta-band h2 { margin: 0; max-width: 18ch; }
.cta-band:not(.cta-band--black) h2::after { background: var(--on-accent); }
.cta-band__phone { display: block; margin-top: 12px; font: 400 clamp(24px, 3vw, 32px)/1 var(--font-display); font-synthesis: none; letter-spacing: .04em; text-decoration: none; font-variant-numeric: tabular-nums; }
.cta-band:not(.cta-band--black) .btn--red { background: var(--bg-ink); border-color: var(--bg-ink); animation: none; }
.cta-band:not(.cta-band--black) .btn--red:hover { background: var(--surface-2); box-shadow: 0 0 0 4px rgba(var(--black-rgb), .3); }
.cta-band .diagonals { stroke: rgba(var(--white-rgb), .2); }
/* --- Lead form ---------------------------------------------------------------------------------- */
.form { position: relative; display: grid; gap: 18px; padding: clamp(20px, 3vw, 32px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.form__row { display: grid; gap: 18px; }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 6px; }
.field label, .field legend { font: 600 12px/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.field .req { color: var(--accent-text); }
.input, .select, .textarea {
width: 100%;
min-height: 48px;
padding: 12px 14px;
background: var(--input-bg);
border: 1px solid var(--input-border);
border-radius: var(--radius);
color: var(--text);
font: 400 16px/1.4 var(--font-body); /* 16px stops iOS zoom-on-focus */
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.textarea { min-height: 120px; resize: vertical; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ov1-red) 50%), linear-gradient(135deg, var(--ov1-red) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--ov1-red); box-shadow: 0 0 0 3px var(--ov1-red-glow); }
.input::placeholder, .textarea::placeholder { color: var(--input-placeholder); }
.check { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ov1-red); }
.form__note { font-size: 12px; color: var(--text-muted); margin: 0; }
.form__alert { margin: 0; padding: 12px 14px; border-left: 3px solid var(--ov1-red); background: rgba(var(--ov1-red-rgb), .1); border-radius: 0 var(--radius) var(--radius) 0; font-size: 14px; }
.form__alert a { color: var(--text); }
.field__error { margin: 0; font-size: 13px; color: var(--danger-text); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--ov1-red); }
.hp { position: absolute !important; left: -9999px !important; } /* honeypot */
.contact-channels { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); list-style: none; margin: 0; padding: 0; }
.contact-channel {
position: relative; display: grid; gap: 10px; height: 100%; padding: 28px 24px;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
text-decoration: none; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
a.contact-channel:hover { background: var(--surface-2); border-color: var(--ov1-red); color: var(--text); transform: translateY(-2px); }
.contact-channel .eyebrow { margin: 0; }
.contact-channel__value { font: 400 clamp(22px, 2.6vw, 30px)/1.1 var(--font-display); font-synthesis: none; letter-spacing: .03em; text-transform: uppercase; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
a.contact-channel .contact-channel__value::after { content: " \2192"; color: var(--ov1-red); }
/* --- Footer ------------------------------------------------------------------------------------- */
.footer { position: relative; overflow: hidden; background: var(--bg-ink); border-top: 0; padding-block: clamp(48px, 7vw, 80px) 28px; font-size: 14px; color: var(--text-muted); }
.footer__grid { display: grid; gap: 36px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.footer__brand img { height: 40px; width: auto; margin-bottom: 14px; }
.footer__tagline { font: 400 20px/1.1 var(--font-display); font-synthesis: none; letter-spacing: .02em; text-transform: uppercase; color: var(--text); margin-bottom: 12px; }
.footer h2 { font: 600 12px/1 var(--font-body); letter-spacing: .12em; color: var(--text); margin-bottom: 16px; }
.footer h2::after { content: none; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--text); text-decoration: underline; text-decoration-color: var(--ov1-red); }
.footer__legal { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: 12px; }
.footer__legal ul { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer__credit { flex-basis: 100%; color: var(--text-muted); }
.footer__credit a { color: var(--text-soft); }
/* --- Prose (long-form static pages) ------------------------------------------------------------- */
.prose { max-width: 72ch; font-size: 17px; line-height: 1.7; color: var(--text-soft); }
.prose h2 { margin-top: 2.2em; color: var(--text); }
.prose > :first-child { margin-top: 0; }
.prose h3 { margin-top: 1.8em; color: var(--text); }
.prose a { color: var(--text); }
.prose strong { color: var(--text); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.prose th { font: 600 12px/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.table-scroll { overflow-x: auto; margin: 1.5em 0; -webkit-overflow-scrolling: touch; }
.table-scroll table { margin: 0; }
@media (max-width: 599px) { .prose .table-scroll th, .prose .table-scroll td { padding: 10px 8px; font-size: 13px; line-height: 1.45; } .prose .table-scroll th { font-size: 10px; } }
.prose blockquote { margin: 1.5em 0; padding: 18px 22px; background: var(--surface); border-left: 3px solid var(--ov1-red); border-radius: 0 var(--radius) var(--radius) 0; color: var(--text); }
.prose blockquote > :last-child { margin-bottom: 0; }
.prose ol { padding-left: 1.4em; }
.prose ol li { margin-bottom: .5em; }
.prose ol li::marker { color: var(--ov1-red); font-weight: 600; }
.callout { margin: 2em 0; padding: 20px 22px; background: var(--surface); border-left: 3px solid var(--ov1-red); border-radius: 0 var(--radius) var(--radius) 0; }
.callout > :last-child { margin-bottom: 0; }
/* --- Disclosure block (§4.4) -------------------------------------------------------------------- */
.disclosure { font-size: 12px; line-height: 1.55; color: var(--text-muted); max-width: 90ch; }
/* ==========================================================================
Build-time markers — must be impossible to miss, so they can't ship unnoticed
========================================================================== */
/* Fill-in placeholder (License #____, entity ____, hours ____, phone ____ …). Shown in every
environment on purpose: a yellow block on a black site is its own launch blocker. */
.ph {
display: inline;
padding: 1px 5px;
background: var(--placeholder);
color: var(--black);
font-weight: 600;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
a .ph, .ph a { color: var(--black); }
/* Legal pages pending counsel review — rendered only when APP_ENV is not production. */
.draft-banner {
position: relative;
z-index: 60;
padding: 10px var(--gutter);
background: var(--placeholder);
color: var(--black);
font: 700 13px/1.4 var(--font-body);
letter-spacing: .06em;
text-transform: uppercase;
text-align: center;
}
/* --- Utilities ---------------------------------------------------------------------------------- */
.text-muted { color: var(--text-muted); }
.text-red { color: var(--accent-text); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }
/* --- Admin (admin/, importer) — same tokens, plain tables; nothing here is used by public pages --- */
.adm { background: var(--bg); }
.adm-bar { background: var(--bg-ink); border-bottom: 1px solid var(--border); }
.adm-bar__inner { display: flex; align-items: center; gap: 24px; min-height: 52px; font-size: 14px; }
.adm-bar__brand { font: 400 22px/1 var(--font-display); font-synthesis: none; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
.adm-bar__brand span { color: var(--accent-text); }
.adm-bar nav a { text-decoration: none; color: var(--text-muted); }
.adm-bar__user { margin-left: auto; color: var(--text-muted); }
.adm-bar__logout { margin: 0; }
.adm-main { padding-block: 28px 64px; }
.adm-login { max-width: 440px; }
.adm-form input[type="password"] { padding: 10px 12px; background: var(--input-bg); color: var(--text); border: 1px solid var(--input-border); border-radius: var(--radius); font: inherit; }
.adm-h1 { font-size: clamp(2rem, 4vw, 3rem); }
.adm-card { margin: 20px 0; padding: 20px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.adm-card h2 { font-size: 1.25rem; margin-bottom: .6em; }
.adm-card summary { cursor: pointer; list-style: none; }
.adm-card summary h2 { display: inline; }
.adm-card summary::before { content: "▸ "; color: var(--ov1-red); }
.adm-card details[open] summary::before { content: "▾ "; }
.adm-form { display: grid; gap: 14px; max-width: 640px; }
.adm-form label { display: grid; gap: 6px; font-size: 14px; color: var(--text-muted); }
.adm-form input[type="text"], .adm-form input[type="datetime-local"], .adm-form input[type="file"] { padding: 10px 12px; background: var(--input-bg); color: var(--text); border: 1px solid var(--input-border); border-radius: var(--radius); font: inherit; }
.adm-form .adm-check { display: flex; align-items: center; gap: 10px; color: var(--text); }
.adm-form button { justify-self: start; }
.adm-flash { padding: 12px 14px; border-left: 3px solid var(--success); background: rgba(var(--success-rgb), .12); border-radius: 0 var(--radius) var(--radius) 0; }
.adm-flash--bad { border-color: var(--ov1-red); background: rgba(var(--ov1-red-rgb), .12); }
.adm-problems { margin: 16px 0; padding: 16px 18px; border: 1px solid var(--ov1-red); border-radius: var(--radius); }
.adm-problems--warn { border-color: var(--placeholder); }
.adm-problems h2 { font-size: 1rem; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.adm-table th, .adm-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.adm-table th { font: 600 11px/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.adm-table code { font-size: 12px; color: var(--text-muted); }
.adm-table--diff { display: block; overflow-x: auto; }
.adm-note { max-width: 36ch; font-size: 12px; }
.adm-lead { border-left: 3px solid var(--border); }
.adm-lead--warn { border-left-color: var(--placeholder); }
.adm-lead__big { font-size: 20px; margin: 0 0 10px; }
.adm-lead__big strong { font: 400 40px/1 var(--font-display); font-synthesis: none; color: var(--accent-text); }
.adm-lead__big small { display: block; font-size: 13px; color: var(--text-muted); }
.adm-counts { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; margin: 0 0 8px; padding: 0; font-size: 14px; color: var(--text-muted); }
.adm-counts strong { color: var(--text); font-variant-numeric: tabular-nums; }
.adm-guard { margin: 10px 0 0; padding: 10px 12px; background: rgba(var(--placeholder-rgb), .08); border-left: 3px solid var(--placeholder); font-size: 14px; }
.adm-guard--block { border-left-color: var(--ov1-red); background: rgba(var(--ov1-red-rgb), .1); }
.adm-publish__grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .adm-publish__grid { grid-template-columns: 1fr 1fr; } }
.adm-publish h3 { font-size: 1rem; }
/* --- Admin v0.3: the client's phone screens (live offers, one offer, photo frame, quick add, review) ------------ */
.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; }
.adm-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
@media (max-width: 719px) {
.adm-bar__inner { flex-wrap: wrap; gap: 8px 16px; padding-block: 8px; }
.adm-nav { order: 3; width: 100%; }
.adm-nav a { padding: 8px 0; }
.adm-main { padding-block: 16px 48px; }
}
.adm-sub { color: var(--text-muted); margin: -.2em 0 1em; }
.adm-back { margin: 0 0 10px; }
.adm-back a { display: inline-block; padding: 10px 0; }
.adm-btn { min-height: 48px; font-size: 17px; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.adm-btn--block { display: flex; width: 100%; }
.adm-btn--danger { border-color: var(--ov1-red); color: var(--text); }
.adm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.adm-actions--stack { flex-direction: column; max-width: 560px; }
.adm-actions--stack form { margin: 0; }
.adm-filter { display: grid; gap: 10px; grid-template-columns: 1fr; margin: 0 0 16px; max-width: 760px; }
@media (min-width: 720px) { .adm-filter { grid-template-columns: 2fr 1fr auto auto; align-items: center; } }
.adm-filter input[type="search"], .adm-filter select, .adm-form--big input[type="text"], .adm-form--big input[type="date"],
.adm-form--big select, .adm-form--big input[type="file"] {
width: 100%; min-height: 48px; padding: 10px 12px; font: inherit; font-size: 17px; color: var(--text);
background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius); }
.adm-toggle, .adm-check-big, .adm-radio { display: flex; align-items: center; gap: 12px; min-height: 48px; font-size: 17px; color: var(--text); cursor: pointer; }
.adm-toggle input, .adm-check-big input, .adm-radio input { width: 24px; height: 24px; flex: none; accent-color: var(--ov1-red); }
.adm-offers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 760px; }
.adm-offer { display: flex; gap: 14px; align-items: center; min-height: 76px; padding: 8px 12px 8px 8px; text-decoration: none; color: var(--text);
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.adm-offer:active, .adm-offer:hover { border-color: var(--border-strong); }
.adm-offer__thumb { flex: none; width: 96px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: var(--surface-deep); display: grid; }
.adm-offer__thumb img { width: 100%; height: 100%; object-fit: cover; }
.adm-offer__thumb .deal-ph__logo { animation: none; width: 56%; }
.adm-offer__text { display: grid; gap: 2px; min-width: 0; }
.adm-offer__year { font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.adm-offer__model { font-size: 17px; line-height: 1.25; }
.adm-offer__pay { font-size: 15px; color: var(--text-soft); }
.adm-offer__pay em { color: var(--accent-text); font-style: normal; }
.adm-offer--sold { justify-content: space-between; padding: 10px 12px; }
.adm-offer__undo { margin: 0; flex: none; }
.adm-h1--offer { font-size: clamp(1.6rem, 6vw, 2.4rem); margin-top: 0; }
.adm-photo { max-width: 560px; display: grid; gap: 16px; }
.adm-photo__current { display: grid; gap: 6px; }
.adm-photo__current img, .adm-photo__current .deal-ph { width: 100%; aspect-ratio: 16 / 10; height: auto; border-radius: 4px; object-fit: cover; }
.adm-photo__kind { margin: 0; font-size: 14px; color: var(--text-muted); }
.adm-photo__form { display: grid; gap: 14px; }
.adm-photo__status { margin: 0; min-height: 1.4em; color: var(--text-soft); }
.adm-photo__status--bad { color: var(--accent-text); }
.adm-pick { position: relative; overflow: hidden; cursor: pointer; }
.adm-pick__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.adm-crop { display: grid; gap: 8px; }
.adm-crop[hidden] { display: none; }
.adm-crop__hint { margin: 0; font-size: 15px; color: var(--text-soft); }
.adm-crop__frame { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; touch-action: none; cursor: grab;
background: var(--surface-deep); border-radius: 4px; outline: 2px solid var(--ov1-red); outline-offset: 2px; }
.adm-crop__frame.is-dragging { cursor: grabbing; }
.adm-crop__frame img { position: absolute; left: 0; top: 0; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.adm-choice { border: 0; margin: 0; padding: 0; display: grid; gap: 2px; }
.adm-choice legend { font-size: 14px; color: var(--text-muted); margin-bottom: 4px; }
.adm-choice--row { grid-template-columns: 1fr 1fr; }
.adm-choice--row legend { grid-column: 1 / -1; }
.adm-hint { margin: 0; font-size: 14px; color: var(--text-muted); }
.adm-form--big { max-width: 560px; gap: 0; }
.adm-form--big .adm-card { display: grid; gap: 14px; margin: 0 0 14px; }
.adm-form--big label { font-size: 15px; color: var(--text-soft); }
.adm-form--big .adm-check-big, .adm-form--big .adm-radio { color: var(--text); font-size: 17px; }
.adm-form--big summary { display: flex; gap: 8px; align-items: baseline; min-height: 40px; }
.adm-money { position: relative; display: block; }
.adm-money::before { content: "$"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 17px; }
.adm-money input { padding-left: 26px !important; }
.adm-indent { margin-left: 36px; }
.adm-err { display: block; margin-top: 4px; color: var(--accent-text); font-size: 14px; }
[aria-invalid="true"] { border-color: var(--ov1-red) !important; }
.adm-list { padding-left: 1.2em; }
.adm-list li { margin: 4px 0; }
.adm-confirm { max-width: 560px; display: grid; gap: 12px; }
.adm-confirm form, .adm-confirm p { margin: 0; }
.adm-counts--big { font-size: 17px; }
.adm-review { max-width: 900px; margin: 22px 0; }
.adm-review__item { display: grid; gap: 12px; margin: 0 0 22px; }
@media (min-width: 900px) { .adm-review__item { grid-template-columns: 340px 1fr; align-items: start; } }
.adm-review__card { grid-template-columns: 1fr; max-width: 360px; }
.adm-change caption { text-align: left; font-weight: 600; padding: 0 0 6px; }
.adm-change th[scope="row"] { color: var(--text-muted); font-weight: 400; }
/* --- Specials pages (Prompt 2): page head, stamp, chips, deal detail, total cost, ended panel ------ */
.page-head { position: relative; overflow: hidden; padding-block: clamp(40px, 6vw, 72px) clamp(24px, 4vw, 40px); background: var(--bg-ink); border-bottom: 1px solid var(--border); }
.page-head h1 { margin-bottom: .5em; }
.adm-h1::after { content: none; } /* page-head h1 keeps the red rule (§2.3 #2); the CTA band already restyles its own */
.stamp { margin: 0 0 14px; font: 600 12px/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.stamp a { text-decoration: none; }
.stamp a:hover { text-decoration: underline; }
.band-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pill--link { text-decoration: none; padding: 6px 12px; font-size: 13px; }
.pill--link:hover { border-color: var(--ov1-red); }
.section--tight { padding-block: clamp(28px, 4vw, 48px); }
.chip--search { padding-left: 10px; }
.chip--search svg { width: 16px; height: 16px; fill: none; stroke: var(--text-muted); stroke-width: 2; }
.chip--search input { width: 11em; background: none; border: 0; color: inherit; font: inherit; outline: none; }
.chip--search input::placeholder { color: var(--text-muted); }
.chip--search:focus-within { border-color: var(--ov1-red); }
.chip--reset { color: var(--accent-text); }
.filter-bar select option { background: var(--surface); }
.filter-count { margin: -8px 0 16px; font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.filter-empty { padding: 32px 0; color: var(--text-muted); }
.link-btn { background: none; border: 0; padding: 0; color: var(--text); font: inherit; text-decoration: underline; text-decoration-color: var(--ov1-red); text-underline-offset: .2em; cursor: pointer; }
.qchip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; background: var(--surface-2); border: 1px solid var(--border); font: 600 11px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); list-style: none; }
.qchip--hot { border-color: var(--ov1-red); color: var(--text); background: rgba(var(--ov1-red-rgb), .14); }
.deal-card__chips { margin: 0; padding: 0; }
.deal-card__footer { margin: 0; border-top: 1px solid var(--border); padding: 8px 18px 10px; font-size: 11px; line-height: 1.5; color: var(--text-muted); }
.deal-card__footer a { position: relative; z-index: 1; } /* above the whole-card link */
.deal-card__cta { margin: 0; padding: 0 18px 18px; } /* v0.4: "Get This Month's Special" */
.deal-card__cta a { position: relative; z-index: 1; } /* above the whole-card link */
.disclosure-block { padding: 20px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.disclosure-block__h { font: 600 12px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; }
.disclosure-block__h::after { content: none; }
.disclosure-block .disclosure { margin: 0; max-width: none; }
.disclosure-block .disclosure + .disclosure { margin-top: 8px; }
.disclosure--version { font-size: 11px; }
.page-head--deal .eyebrow { color: var(--accent-text); }
.deal__lockup { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 48px; margin: 18px 0 20px; }
.deal__lockup--ended .price { opacity: .55; }
.deal-card--ended .price, .deal-card--ended .deal-card__terms { opacity: .55; } /* ended offer: pricing demoted */
.deal-card--ended .deal-card__footer strong { color: var(--text); font-weight: 600; }
.deal__terms { display: flex; flex-wrap: wrap; gap: 12px 32px; flex: 1 1 320px; min-width: 0; margin: 0; } /* a wrapping row beside the price; it was an auto-fit grid inside a flex item with no definite width, so it stacked in one column (fixed 2026-10-03) */
.deal__terms > div { flex: 0 0 auto; }
.deal__terms dt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.deal__terms dd { margin: 3px 0 0; font: 500 16px/1.2 var(--font-mono); font-variant-numeric: tabular-nums; }
.deal__specs { margin: 18px 0 20px; } /* v0.4.1: the offer page's spec table (Make … Status) */
.deal__specs dd { font-family: var(--font-body, inherit); }
.deal__status dd { font-weight: 600; color: var(--text); }
.deal__status dd::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--ov1-red); vertical-align: middle; }
.deal__status--ended dd { color: var(--text-muted); }
.deal__status--ended dd::before { background: var(--text-muted); }
.deal__next { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.deal__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; }
.deal__note { max-width: 62ch; margin: 0 0 22px; padding: 12px 16px; background: var(--surface); border-left: 3px solid var(--ov1-red); border-radius: 0 var(--radius) var(--radius) 0; }
.deal__grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .deal__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: start; } }
.total-cost { padding: 22px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.total-cost h2 { font-size: 1.375rem; }
.total-cost__rows { margin: 0; }
.total-cost__rows div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.total-cost__rows dt { color: var(--text-muted); }
.total-cost__rows dd { margin: 0; font: 500 16px/1.2 var(--font-mono); font-variant-numeric: tabular-nums; }
.total-cost__sum dt { color: var(--text); font-weight: 600; }
.total-cost__sum dd { font-size: 22px; color: var(--text); }
.total-cost__foot { margin: 14px 0 0; font-size: 12px; color: var(--text-muted); }
.deal__aside h2 { font-size: 1.375rem; }
.deal__steps { margin: 0 0 20px; padding-left: 1.3em; color: var(--text-soft); }
.deal__steps li { margin-bottom: 8px; }
.deal__steps li::marker { color: var(--ov1-red); font-weight: 600; }
.deal__expiry { margin: 0 0 16px; font-size: 14px; color: var(--text-muted); }
.deal__expiry strong { color: var(--text); }
.ended-panel { margin: 0 0 22px; padding: 18px 22px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--ov1-red); border-radius: 0 var(--radius) var(--radius) 0; max-width: 70ch; }
.ended-panel__big { font: 400 clamp(22px, 3vw, 28px)/1.1 var(--font-display); font-synthesis: none; letter-spacing: .02em; text-transform: uppercase; margin-bottom: 10px; }
.ended-panel p:last-child { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
/* ==========================================================================
Motion & brand gradients (v0.1.3, client creative pass — DECISIONS 2026-10-03)
Rules: animate transform and opacity, plus background-position on the gradient layers; nothing that
lays out. The one paint-only exception is the gauge/arc sweep (stroke-dasharray), which cannot be done
with a transform on an SVG stroke. prefers-reduced-motion: no motion at all (block above), final states.
JS marks with .js (inline, before paint) and .io once the reveal observer runs; without either,
nothing is ever hidden (the failsafe keyframe covers a script that loaded but failed).
========================================================================== */
@keyframes red-shift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes shimmer-sweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes bar-shimmer { 0% { background-position: -100% 0, 0 0; } 14% { background-position: 200% 0, 0 0; } 100% { background-position: 200% 0, 0 0; } }
@keyframes qarc-draw { to { stroke-dashoffset: 0; } }
@keyframes qarc-drift { from { transform: translate(0, 0); } to { transform: translate(-6px, 8px); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes ov1-failsafe { to { opacity: 1; transform: none; } }
/* 3px top bar on cards and panels: dark red → red, with a shimmer that passes about every 9 s (not constantly).
Two background layers on one pseudo-element; only background-position moves. --i staggers the pass per card. */
.deal-card::after, .band-tile::after, .quote::after, .form::after, .contact-channel::after, .step::after, .why-block__media::after, .card-bar::after {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; pointer-events: none;
background: var(--shimmer) no-repeat -100% 0 / 40% 100%, var(--grad-red);
opacity: .78;
transition: opacity var(--dur) var(--ease);
animation: bar-shimmer 9s linear infinite;
animation-delay: calc(var(--i, 0) * -1.3s);
}
.deal-card:hover::after, .band-tile:hover::after, .quote:hover::after, a.contact-channel:hover::after, .step:hover::after { opacity: 1; } /* the bar brightens on hover */
.deal-card--skeleton::after { animation: none; opacity: .4; }
:is(.deal-grid, .band-tiles, .testimonials, .contact-channels, .steps) > :nth-child(5n+2) { --i: 1; }
:is(.deal-grid, .band-tiles, .testimonials, .contact-channels, .steps) > :nth-child(5n+3) { --i: 2; }
:is(.deal-grid, .band-tiles, .testimonials, .contact-channels, .steps) > :nth-child(5n+4) { --i: 3; }
:is(.deal-grid, .band-tiles, .testimonials, .contact-channels, .steps) > :nth-child(5n+5) { --i: 4; }
/* Section atmosphere: a radial red glow at the top of every section, under the content */
.section { isolation: isolate; }
.section::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(var(--ov1-red-rgb), var(--glow-alpha)), transparent 70%);
}
.section--ink::before { background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(var(--ov1-red-rgb), calc(var(--glow-alpha) - .01)), transparent 70%); }
/* Segmented stripe on the footer's top edge (the CTA band has the same, above) */
.footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-stripe); }
/* Stripes: the hairline diagonals draw in (scaleX from the left) when they enter view; the full-bleed divider
(partials/divider.php) is the same lines as a band between major sections. */
html.js:not(.reduce) .diagonals { transform: scaleX(0); transform-origin: left center; transition: transform 1.1s var(--ease); }
html.js:not(.reduce) .diagonals--right { transform: scaleX(0); transform-origin: right center; }
html.js .diagonals.in { transform: scaleX(1); }
html.js .diagonals--right.in { transform: scaleX(-1); }
.divider { position: relative; height: 44px; overflow: hidden; pointer-events: none; }
.divider__stripes { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--hairline); stroke-width: 1; vector-effect: non-scaling-stroke; }
.divider__stripes line { vector-effect: non-scaling-stroke; }
html.js:not(.reduce) .divider__stripes { transform: scaleX(0); transform-origin: left center; transition: transform 1.4s var(--ease); }
html.js .divider__stripes.in { transform: scaleX(1); }
/* How it works: a stripe runs along the steps and fills as the visitor scrolls through them (--p from site.js) */
.steps { position: relative; }
.steps::after { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--grad-red); transform: scaleX(var(--p, 0)); transform-origin: left center; transition: transform .25s linear; pointer-events: none; z-index: 1; }
@media (max-width: 899px) { .steps::after { width: 3px; height: 100%; transform: scaleY(var(--p, 0)); transform-origin: center top; } }
html:not(.js) .steps::after { transform: none; }
/* Reveal: short fade + 16px rise, once, staggered across grids (DreamBMW's .fade-up / .d1–.d4) */
html.js .fade-up, html.js .reveal > * {
opacity: 0; transform: translateY(var(--rise));
transition: opacity .55s var(--ease), transform .55s var(--ease);
}
html.js:not(.io) .fade-up, html.js:not(.io) .reveal > * { animation: ov1-failsafe .4s var(--ease) 1.2s forwards; } /* failsafe: nothing stays hidden */
html.js .fade-up.in, html.js .reveal > .in, html.js .reveal.in > * { opacity: 1; transform: none; }
.d1, .reveal > :nth-child(4n+2) { transition-delay: .1s; }
.d2, .reveal > :nth-child(4n+3) { transition-delay: .2s; }
.d3, .reveal > :nth-child(4n+4) { transition-delay: .3s; }
.d4, .reveal > :nth-child(4n+5) { transition-delay: .4s; }
/* Brand strip as a slow continuous text marquee (two copies of the list; the second is aria-hidden) */
.marquee { overflow: hidden; border-block: 1px solid var(--border); -webkit-mask-image: linear-gradient(90deg, transparent, var(--black) 6%, var(--black) 94%, transparent); mask-image: linear-gradient(90deg, transparent, var(--black) 6%, var(--black) 94%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee .brand-strip { display: flex; flex: none; border: 0; }
.marquee .brand-strip li { border: 0; border-right: 1px solid var(--border); }
.marquee .brand-strip a { min-height: 64px; padding: 14px 28px; white-space: nowrap; }
html:not(.js) .marquee__track { width: auto; display: block; animation: none; }
html:not(.js) .marquee .brand-strip { display: grid; }
html:not(.js) .marquee .brand-strip--copy { display: none; }
@media (prefers-reduced-motion: reduce) { .marquee__track { width: auto; display: block; } .marquee .brand-strip { display: grid; } .marquee .brand-strip--copy { display: none; } .marquee { -webkit-mask-image: none; mask-image: none; } }
/* Count-up numbers keep their width while the digits change */
[data-count] { font-variant-numeric: tabular-nums; }
/* ==========================================================================
Theme UI (v0.2.3, light and dark mode) — the toggle, the two logo files, the header over the hero
========================================================================== */
/* Logo: partials/logo.php renders both files; the theme tokens of the nearest data-theme ancestor pick one, so
the white logo shows on the dark header, the hero and the footer, and the dark logo on a light header. */
.logo-img--on-dark { display: var(--show-on-dark); }
.logo-img--on-light { display: var(--show-on-light); }
/* The header is themed like the page everywhere, over the hero too (v0.2.5): white with the dark logo in light mode. */
:root[data-theme="light"] .nav__links a { color: var(--text); } /* light mode: nav text in the brand black (owner, 2026-10-04) */
@media (prefers-color-scheme: light) { :root:not([data-theme]) .nav__links a { color: var(--text); } }
.nav { transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
/* Toggle (v0.2.5): a round button holding the current mode's icon, a line-drawn moon (dark) or sun (light). Both
icons sit in the circle; switching, the outgoing one turns away and shrinks while the other turns in, so the moon
becomes the sun (and back) in one 300 ms motion. The page's mode decides (:root). Shown in the header at ≥ 1024px,
as a full-width drawer row ("Theme" + the circle) below that. */
.theme-toggle {
display: none; align-items: center; height: 44px; flex: none; padding: 0;
background: none; border: 0; border-radius: 50%; color: var(--text); cursor: pointer;
}
.theme-toggle__circle {
position: relative; display: block; width: 40px; height: 40px; flex: none;
border: 1px solid var(--control-border); border-radius: 50%;
transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.theme-toggle:hover .theme-toggle__circle { border-color: var(--text); background: var(--surface-2); }
.theme-toggle svg {
position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
transition: transform 300ms var(--ease), opacity 300ms var(--ease);
}
/* Dark (and the no-JS default): moon in, sun out. Light: sun in, moon out. */
.theme-toggle .theme-toggle__sun { opacity: 0; transform: rotate(-90deg) scale(.4); }
.theme-toggle .theme-toggle__moon { opacity: 1; transform: none; }
:root[data-theme="light"] .theme-toggle .theme-toggle__sun { opacity: 1; transform: none; }
:root[data-theme="light"] .theme-toggle .theme-toggle__moon { opacity: 0; transform: rotate(90deg) scale(.4); }
@media (prefers-color-scheme: light) {
:root:not([data-theme]) .theme-toggle .theme-toggle__sun { opacity: 1; transform: none; }
:root:not([data-theme]) .theme-toggle .theme-toggle__moon { opacity: 0; transform: rotate(90deg) scale(.4); }
}
@media (min-width: 1024px) { .nav__actions .theme-toggle { display: inline-flex; } }
.nav__drawer .theme-toggle {
display: flex; width: 100%; height: auto; justify-content: space-between; gap: 12px; padding: 8px 0;
border-bottom: 1px solid var(--border); border-radius: 0;
font: 400 22px/1 var(--font-display); font-synthesis: none; letter-spacing: .04em; text-transform: uppercase;
}
.theme-toggle__label { display: none; }
.nav__drawer .theme-toggle__label { display: inline; }