/*
* MyCarInspector — Copyright (c) 2026 Web App Solutions LLC. All rights reserved.
* Proprietary and confidential. Not open source, and not licensed for
* redistribution or resale. See LICENSE.
*/
/* Pre Purchase Inspection — design system
The palette and the typefaces of prepurchaseinspection.co, so a customer who
clicks through from the marketing site to book does not feel handed off to a
different company: navy ink on warm ivory, gold as the single accent,
Playfair Display for display type, Barlow for text, Barlow Condensed for
labels and figures.
The panels (admin, inspector) are NOT part of this. They are internal tools
on their own graphite-and-lime theme and they pin the tokens they borrow. */
/* Self-hosted, from Fontsource (SIL Open Font License — see fonts/OFL.txt).
Google Fonts used to be @imported here: a render-blocking round trip to a
third party on every page, a GDPR footnote, and the one external origin left
in the Content-Security-Policy. The latin-ext faces are only fetched when a
page actually shows those characters.
Playfair is variable, so one file covers 400-900. Barlow and Barlow Condensed
are not — Fontsource ships them as static instances, so each weight is its own
file and only the weights actually used are listed here. */
@font-face {
font-family: 'Playfair Display'; font-style: normal; font-display: swap; font-weight: 400 900;
src: url('/fonts/playfair-display-latin-wght-normal.woff2') format('woff2-variations');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'Playfair Display'; font-style: normal; font-display: swap; font-weight: 400 900;
src: url('/fonts/playfair-display-latin-ext-wght-normal.woff2') format('woff2-variations');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
/* Playfair italic is a separate file, not a style axis. The marketing site's
wordmark and every .accent run inside a heading are italic, so without this
the browser was synthesising a slant. */
font-family: 'Playfair Display'; font-style: italic; font-display: swap; font-weight: 400 900;
src: url('/fonts/playfair-display-latin-wght-italic.woff2') format('woff2-variations');
}
@font-face {
/* 300 is the theme's body weight for leads, package descriptions and
sub-labels. Without it those rendered at 400 and read heavier than the
marketing site. */
font-family: 'Barlow'; font-style: normal; font-display: swap; font-weight: 300;
src: url('/fonts/barlow-latin-300-normal.woff2') format('woff2');
}
@font-face {
font-family: 'Barlow Condensed'; font-style: normal; font-display: swap; font-weight: 400;
src: url('/fonts/barlow-condensed-latin-400-normal.woff2') format('woff2');
}
@font-face {
font-family: 'Barlow Condensed'; font-style: normal; font-display: swap; font-weight: 800;
src: url('/fonts/barlow-condensed-latin-800-normal.woff2') format('woff2');
}
@font-face {
font-family: 'Barlow'; font-style: normal; font-display: swap; font-weight: 400;
src: url('/fonts/barlow-latin-400-normal.woff2') format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'Barlow'; font-style: normal; font-display: swap; font-weight: 400;
src: url('/fonts/barlow-latin-ext-400-normal.woff2') format('woff2');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'Barlow'; font-style: normal; font-display: swap; font-weight: 500;
src: url('/fonts/barlow-latin-500-normal.woff2') format('woff2');
}
@font-face {
font-family: 'Barlow'; font-style: normal; font-display: swap; font-weight: 600;
src: url('/fonts/barlow-latin-600-normal.woff2') format('woff2');
}
@font-face {
font-family: 'Barlow'; font-style: normal; font-display: swap; font-weight: 700;
src: url('/fonts/barlow-latin-700-normal.woff2') format('woff2');
}
@font-face {
font-family: 'Barlow Condensed'; font-style: normal; font-display: swap; font-weight: 600;
src: url('/fonts/barlow-condensed-latin-600-normal.woff2') format('woff2');
}
@font-face {
font-family: 'Barlow Condensed'; font-style: normal; font-display: swap; font-weight: 700;
src: url('/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2');
}
:root {
/* Lifted from the marketing site's own :root, value for value, rather than
matched by eye. My first pass guessed a warm ivory ground (#F7F5F0) and a
navy text colour; the site actually runs a cool light grey and slate text,
and the difference showed the moment the two were put side by side.
--navy #0a1628 --light #f5f6f8
--navy2 #112240 --border #e2e8f0
--gold #c8a94a --text #1e293b
--gold2 #e8c96a --gray #6b7280
The names below are the platform's; the values are his. */
--ink: #0A1628; /* --navy: dark bands, nav, footer */
--ink-2: #112240; /* --navy2: raised dark surfaces */
--text: #1E293B; /* body copy on light — NOT the navy */
--paper: #FFFFFF; /* the site's ground is white */
--paper-2: #F5F6F8; /* --light: tinted sections */
--card: #FFFFFF;
--gold: #C8A94A;
--gold-2: #E8C96A;
--gold-dk: #8A7333; /* gold dark enough to set text on white */
--gold-lt: rgba(200,169,74,.15);
/* The header's link colour #CCD6F6 (hue 226deg) taken to 34% lightness so
it can hold text: 10.18:1 on white. Tried on the hero stat figures and
rejected — a third accent alongside navy and gold. Kept because the
derivation is the useful part. */
--indigo: #213B8C;
--navy: #112240;
--sky: #2B6BE4;
--warn: #B4720B;
--fault: #C0392B; /* --red */
--fault-2: #E74C3C; /* --red2 */
--ok: #1B7A4B;
--gray: #6B7280;
--gray-2: #7A8FAA; /* the site's muted text on dark grounds */
--line: #E2E8F0; /* --border */
--line-d: rgba(255,255,255,.10);
--display: 'Playfair Display', Georgia, 'Times New Roman', serif;
--body: 'Barlow', system-ui, sans-serif;
--cond: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
--mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
/* The theme's own gradients, so a gold button here and a gold button on the
marketing site are the same object. */
--grad-gold: linear-gradient(135deg, #C8A94A, #B8953A);
--grad-gold-hover:linear-gradient(135deg, #E8C96A, #C8A94A);
--grad-wordmark: linear-gradient(135deg, #F4DC8A 0%, #E8C96A 35%, #C8A94A 60%, #A88A3C 100%);
--r: 10px;
--r-lg: 22px; /* the theme's package-card radius */
--r-xl: 28px;
--pad: clamp(20px, 5vw, 64px);
--sh-sm: 0 1px 2px rgba(10,22,40,.06);
--sh: 0 6px 16px -6px rgba(10,22,40,.16);
--sh-lg: 0 24px 48px -18px rgba(10,22,40,.26);
--sh-gold: 0 10px 28px rgba(200,169,74,.38);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0; font-family: var(--body); font-size: 17px; line-height: 1.6;
/* Slate, not navy. The marketing site sets copy in #1e293b and keeps the
navy for dark bands and headings; using navy for body text made every
paragraph a shade darker than the same paragraph on the .co page. */
color: var(--text); background: var(--paper); -webkit-font-smoothing: antialiased;
}
/* The customer pages run dark: navy ground, gold accent, cool light text,
the same world as prepurchaseinspection.co. A customer clicking through from
the marketing site should not land on a white page. */
body.dark { background: var(--ink); color: #CCD6F6; }
a { color: inherit; }
img { max-width: 100%; }
/* ---------------------------------- type --------------------------------- */
h1, h2, h3, h4 {
/* 900, which is what the marketing site uses throughout — 700 read notably
lighter beside it. Playfair is variable here so the weight costs nothing
extra. Leading and tracking are the theme's: 1.0 on h1, 1.1 on h2/h3. */
font-family: var(--display); font-weight: 900; margin: 0 0 .4em;
line-height: 1.1; letter-spacing: 0;
color: var(--ink);
}
h1 { line-height: 1.0; }
h1 { font-size: clamp(40px, 7.5vw, 78px); }
h2 { font-size: clamp(29px, 4.6vw, 46px); }
/* Long headings orphan a word on the last line at some widths. Balance the
break rather than leaving one word stranded. */
h1, h2, h3 { text-wrap: balance; }
/* For a heading that should hold one line wherever there is room for it. */
.nowrap-lg { white-space: nowrap; }
@media (max-width: 620px) { .nowrap-lg { white-space: normal; } }
h3 { font-size: clamp(20px, 2.3vw, 25px); letter-spacing: -.008em; }
p { margin: 0 0 1em; }
/* The theme's signature: a gold italic run inside a heading. On the dark
hero it is the bright gold; on white it needs the darker one to stay
readable at 4.5:1. */
.accent { color: var(--gold-dk); font-style: italic; }
h1 .accent, h2 .accent, h3 .accent { color: var(--gold-dk); font-style: italic; }
body.dark .accent, .hero .accent { color: var(--gold); }
.hl { background: var(--gold); padding: 0 .18em; border-radius: 4px; color: var(--ink); }
.section-label, .eyebrow {
display: inline-flex; align-items: center; gap: 8px;
/* The theme's .section-label: 4px tracking, gold, no bullet. The dot that
used to sit before it is not part of this brand. */
font-family: var(--body); font-size: 11.5px; font-weight: 700;
letter-spacing: .26em; text-transform: uppercase; color: var(--gold-dk);
margin-bottom: 10px;
}
body.dark .section-label, body.dark .eyebrow { color: var(--gold); }
/* The theme's 50px gold hairline under a section heading. It was display:none
because the previous design had no such device; this one does. */
.section-line {
display: block; width: 50px; height: 2px; margin: 0 0 34px;
background: linear-gradient(90deg, var(--gold), transparent);
}
.text-center .section-line { margin-left: auto; margin-right: auto; }
.text-center { text-align: center; }
.text-center .section-label { justify-content: center; }
.num { font-family: var(--cond); font-weight: 600; font-variant-numeric: tabular-nums; }
.lede { font-size: clamp(17px, 1.9vw, 21px); color: var(--gray); max-width: 60ch; }
body.dark .lede { color: var(--gray-2); }
.legal { font-size: 13.5px; color: var(--gray); line-height: 1.6; }
body.dark .legal { color: var(--gray-2); }
/* --------------------------------- layout -------------------------------- */
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 var(--pad); }
.section { padding: clamp(56px, 8vw, 108px) 0; }
.section.tint {
/* Was --paper-2 (#F5F6F8) — four points off white, which on a screen is not
a band at all. A real gradient, with hairlines top and bottom so the edge
is deliberate. */
background: linear-gradient(180deg, #F0F4F9 0%, #E2E9F3 100%);
border-top: 1px solid #E4EAF2; border-bottom: 1px solid #DCE3EE;
}
/* Inverted, so Contact directly after FAQ reads as its own band rather than a
continuation of the one above it. */
#contact {
background: linear-gradient(180deg, #E5ECF5 0%, #F1F5FA 100%);
border-top: 1px solid #DCE3EE;
}
body.dark .section.tint { background: var(--ink-2); }
.grid { display: grid; gap: 20px; }
@media (min-width: 760px) { .cols-2 { grid-template-columns: 1fr 1fr; } .cols-3 { grid-template-columns: repeat(3,1fr); } }
/* ---------------------------------- nav ---------------------------------- */
.topbar {
/* The marketing site's nav is a solid navy bar 72px tall with gold links.
This was a translucent cream bar 68px tall — the join between the two
pages was the most obvious seam in the whole reskin. */
position: sticky; top: 0; z-index: 40;
background: rgba(10,22,40,.97); backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(200,169,74,.18);
}
body.dark .topbar { background: rgba(10,22,40,.97); border-bottom-color: rgba(200,169,74,.18); }
.topbar .wrap { display: flex; align-items: center; gap: 20px; height: 72px; }
.brand { font-family: var(--cond); font-weight: 700; font-size: 20px; letter-spacing: -.03em; text-decoration: none; display: flex; align-items: center; gap: 9px; }
.brand { gap: 8px; }
/* The wordmark carries the same magnifier as the favicon and the PDF header.
Deep forest reads as diligence rather than highlighter; on dark surfaces it
would disappear, so those use a lighter tint of the same hue. */
/* The wordmark is one drawn artefact — outlines, not type — so it renders the
same in every browser, in the PDF and with no font loaded. Height drives it;
the intrinsic width/height on the , not a child. Below 820px the nav turns into a
fixed dropdown that is display:none until the hamburger is pressed, and a
phone number hidden behind a menu is not quick access. Outside the nav it
stays on the bar at every width. */
.topbar .wrap > a.tel {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--body); font-weight: 600; font-size: 16px;
font-variant-numeric: tabular-nums; letter-spacing: .01em;
color: var(--gold); text-decoration: none;
padding: 6px 12px; margin-left: 14px; border-radius: 8px; white-space: nowrap;
transition: color .2s, background .2s;
}
.topbar .wrap > a.tel svg { width: 15px; height: 15px; fill: currentColor; flex: none; opacity: .85; }
.topbar .wrap > a.tel:hover { color: var(--gold-2); background: rgba(200,169,74,.12); }
.topbar .wrap > a.tel:hover svg { opacity: 1; }
.topbar .wrap > a.tel:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
/* Icon only once the bar gets tight. The full number plus seven nav links
overflowed the topbar by 199px at 900px wide — measured, not guessed. The
number stays in the accessible name via aria-label, so a screen reader still
reads it out. */
@media (max-width: 1180px) {
.topbar .wrap > a.tel span {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap;
}
.topbar .wrap > a.tel { padding: 9px; margin-left: 6px; }
.topbar .wrap > a.tel svg { width: 19px; height: 19px; opacity: 1; }
}
/* Below the nav collapse the bar is brand | tel | hamburger, in that order. */
@media (max-width: 1000px) {
.topbar .wrap > a.tel { order: 2; margin-left: auto; }
.menu-btn { order: 3; }
}
body.dark .menu-btn { border-color: rgba(255,255,255,.2); }
@media (max-width: 1000px) {
.menu-btn { display: flex; }
.topbar nav {
position: fixed; inset: 72px 0 auto 0; margin: 0;
flex-direction: column; align-items: stretch; gap: 0;
/* Navy, not white. The nav links are #CCD6F6 — chosen for the navy bar —
and on a white panel that measures about 1.6:1, which is unreadable. The
panel drops out of the bar it belongs to, so matching the bar is both
the fix and the right answer. */
background: var(--ink); border-bottom: 1px solid rgba(200,169,74,.2);
padding: 8px 0 14px; box-shadow: var(--sh-lg);
max-height: calc(100vh - 72px); overflow-y: auto;
display: none;
}
body.dark .topbar nav { background: var(--ink); border-bottom-color: rgba(200,169,74,.2); }
.topbar nav.open { display: flex; }
.topbar nav a {
padding: 15px var(--pad); font-size: 17px; font-weight: 500;
color: #E7EDF7;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar nav a:hover, .topbar nav a:active { color: var(--gold); background: rgba(200,169,74,.1); }
body.dark .topbar nav a { border-bottom-color: rgba(255,255,255,.08); }
.topbar nav a:last-child { border-bottom: 0; }
.topbar nav a.hide-sm,
.topbar nav a.lo-pri,
.topbar nav a.mid-pri { display: block; }
/* The CTA keeps the gold treatment it has on the bar, rather than becoming
a navy block on a navy panel. */
.topbar nav a.on {
color: var(--ink); background: var(--grad-gold); border: 0; border-radius: 0;
margin: 0; padding: 17px var(--pad); font-size: 17px; font-weight: 700;
box-shadow: none;
}
.topbar nav a.on:hover { color: var(--ink); background: var(--grad-gold-hover); }
.topbar nav a.on:hover { transform: none; box-shadow: none; }
body.dark .topbar nav a.on { color: var(--ink); background: var(--gold); }
}
/* --------------------------------- hero ---------------------------------- */
/* --- hero -----------------------------------------------------------------
The marketing site's hero LAYOUT — gold italic second line, a short gold
rule, stat cards stacked down the right — on a light ground. The navy
version was too heavy under an already-navy topbar: the page read as a dark
slab with a white page hanging off the bottom of it.
The accent uses --gold-dk rather than --gold. #C8A94A on this ground is
about 2.2:1, under the 3:1 that large text needs; --gold-dk is 4.4:1. */
/* The photograph. /brand/hero.svg is still in the repo as the fallback the
build shipped with — swap this one line to go back to it. */
:root { --hero-img: url('/brand/hero.jpg'); }
.hero {
position: relative; overflow: hidden; isolation: isolate;
padding: clamp(56px, 8vw, 108px) 0 clamp(56px, 8vw, 100px);
background: var(--paper-2);
border-bottom: 1px solid var(--line);
}
.hero-bg {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: var(--hero-img) center / cover no-repeat;
}
/* A navy scrim over the backdrop. Without it the headline's contrast depends
on whatever image happens to be behind it, which is how hero text ends up
unreadable the moment someone swaps the photo. */
/* The scrim. Measured over the photograph, sampling the rectangle the h1
actually occupies rather than against a flat token colour:
scrim 86/68/50 navy h1 8.19:1 gold accent 2.07:1 lede 2.18:1
scrim 95/90/62 navy h1 13.99:1 gold accent 3.54:1 lede 3.73:1
(worst-case pixels, not the mean.) The first row is why this went up: the
sunset in the photo sits exactly where the headline does, and the gold accent
line — the largest, most important words on the page — was failing the 3:1
that large text needs. */
.hero-bg::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(100deg, rgba(255,255,255,.95) 0%, rgba(250,251,253,.90) 50%, rgba(237,241,247,.62) 100%);
}
.hero .wrap { position: relative; z-index: 2; }
.hero-grid { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 1fr) 232px; align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 { color: var(--ink); }
.hero h1 .accent { color: var(--gold-dk); font-style: italic; }
.hero .lede { color: var(--text); margin-top: 0; max-width: 46ch; }
.hero-rule {
width: 74px; height: 3px; margin: 26px 0 24px;
background: linear-gradient(90deg, var(--gold), transparent);
}
.hero-badge {
display: inline-flex; align-items: center; gap: 9px;
font-family: var(--body); font-size: 12px; font-weight: 700;
letter-spacing: .22em; text-transform: uppercase; color: var(--gold-dk);
background: rgba(200,169,74,.12); border: 1px solid rgba(200,169,74,.42);
padding: 9px 18px; border-radius: 999px; margin-bottom: 26px;
}
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: pulse 2.2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.hero .btn.ghost { color: var(--ink); border-color: rgba(10,22,40,.22); background: rgba(255,255,255,.7); }
.hero .btn.ghost:hover { border-color: var(--gold); color: var(--gold-dk); background: #fff; }
/* Stacked down the right on desktop, side by side on a phone. */
.hero-stats { display: grid; gap: 14px; }
@media (max-width: 900px) {
.hero-stats { grid-template-columns: repeat(3, 1fr); margin-top: 8px; }
}
.hero-stats .stat-card {
background: #fff; border: 1px solid var(--line);
border-radius: 14px; padding: 20px 18px; text-align: center;
box-shadow: var(--sh-sm);
transition: transform .18s cubic-bezier(.2,.7,.3,1), border-color .18s ease;
}
.hero-stats .stat-card:hover { transform: translateY(-2px); border-color: rgba(200,169,74,.55); }
.hero-stats .stat-card .n {
font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1.05;
color: var(--ink); letter-spacing: 0;
}
.hero-stats .stat-card .l {
font-family: var(--body); font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
text-transform: uppercase; color: var(--gray); margin-top: 10px;
padding-top: 10px; position: relative;
}
/* A 26px gold rule between the figure and its label — the same device as the
section rules. Ties the cards to the brand without tinting the numbers. */
.hero-stats .stat-card .l::before {
content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
width: 26px; height: 2px; background: var(--gold);
}
/* Stat cards elsewhere on the page keep the light treatment. */
.stat-card {
background: var(--card); border: 1px solid var(--line);
border-radius: var(--r-lg); padding: 20px 22px;
transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--sh-sm); }
.stat-card .n { font-family: var(--cond); font-size: 32px; font-weight: 700; letter-spacing: -.03em; }
.stat-card .l { font-size: 13.5px; color: var(--gray); margin-top: 2px; }
/* The coverage card holds a list rather than a single figure, so it wraps where
the others do not, leaving "VA · MD · DC ·" above a lone "TX". One line will
not fit a 138px card at a readable size, so balance the break instead: two
even lines read as deliberate where three-then-one reads as broken. Balancing
also keeps working as areas are added. */
.stat-card .n.states {
font-size: 24px;
line-height: 1.15;
text-wrap: balance;
}
@media (max-width: 700px) { .stat-card .n.states { font-size: 20px; } }
/* -------------------------------- buttons -------------------------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
/* The theme's button: Barlow 700, 8px radius, a 2px lift on hover. Not the
pill this design used — the marketing site has no pills anywhere. */
font-family: var(--body); font-weight: 700; font-size: 15.5px; letter-spacing: .01em;
padding: 15px 28px; border-radius: 8px; border: 1.5px solid var(--ink);
background: var(--ink); color: #fff; text-decoration: none; cursor: pointer;
transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.btn:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); transform: translateY(-2px); }
.btn:active { transform: none; }
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
/* .lime is the primary gold button. The class name is left alone: it is used
in nine places across five pages and renaming it is churn, not a rebrand. */
.btn.lime {
background: var(--grad-gold); border-color: transparent; color: var(--ink);
}
.btn.lime:hover {
background: var(--grad-gold-hover); border-color: transparent; color: var(--ink);
box-shadow: var(--sh-gold);
}
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { background: var(--card); box-shadow: none; }
body.dark .btn { background: var(--gold); border-color: var(--gold); color: var(--ink); }
body.dark .btn.ghost { background: transparent; color: #CCD6F6; border-color: rgba(200,169,74,.35); }
.btn.danger { background: transparent; border-color: var(--fault); color: var(--fault); }
.btn.block { width: 100%; }
.btn.sm { padding: 10px 18px; font-size: 14px; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 28px; }
.step-panel .btn-row { margin-bottom: 4px; }
.btn-row .grow { flex: 1; }
/* --------------------------------- cards --------------------------------- */
.card {
background: var(--card); border: 1px solid var(--line);
border-radius: var(--r-lg); padding: 26px;
box-shadow: var(--sh-sm);
transition: transform .18s cubic-bezier(.2,.7,.3,1),
box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sh); border-color: #D5D2CA; }
body.dark .card { background: var(--ink-2); border-color: rgba(255,255,255,.09); box-shadow: none; }
body.dark .card:hover { border-color: rgba(255,255,255,.18); transform: translateY(-2px); }
/* --- the booking wizard ---------------------------------------------------
The wizard was a white .card on a white section: no edge, no depth, and the
ZIP field was a third white box inside it. Three surfaces at the same value
means the eye has nothing to hold on to, and the one thing on the screen the
customer has to interact with looked like background.
.card.static is the wizard's own wrapper, so this treatment does not touch
the pricing, FAQ or footer cards. */
#book { background: linear-gradient(180deg, #F2F5F9 0%, #E7EDF5 100%); }
.card.static {
/* Brushed metal, done with light rather than a texture: a cool gradient from
white to steel, a hairline highlight along the top inside edge, and a
border a shade darker than the page so the panel has a real boundary. */
background: linear-gradient(158deg, #FFFFFF 0%, #FAFCFE 38%, #EDF2F8 100%);
border: 1px solid #D3DCE8;
border-radius: 18px;
padding: 30px 30px 32px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.9),
0 1px 2px rgba(10,22,40,.05),
0 18px 40px -24px rgba(10,22,40,.35);
position: relative; overflow: hidden;
}
/* A gold hairline across the top edge — the same device as the section rules,
and it stops the panel reading as a plain grey box. */
.card.static::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(--gold) 0%, var(--gold-2) 42%, transparent 88%);
}
/* .card lifts on hover. On the wizard that is wrong: it is a form the customer
is typing into, not a tile to click. */
.card.static:hover { transform: none; box-shadow:
inset 0 1px 0 rgba(255,255,255,.9),
0 1px 2px rgba(10,22,40,.05),
0 18px 40px -24px rgba(10,22,40,.35);
border-color: #D3DCE8; }
/* Fields inside the wizard read as recessed, so they are obviously the part
you fill in rather than more panel. */
.card.static input,
.card.static select,
.card.static textarea {
background: #FFFFFF; border-color: #C9D4E2;
box-shadow: inset 0 2px 4px rgba(10,22,40,.07);
}
.card.static input:focus,
.card.static select:focus,
.card.static textarea:focus {
border-color: var(--gold);
box-shadow: inset 0 2px 4px rgba(10,22,40,.05), 0 0 0 4px rgba(200,169,74,.28);
}
/* The ZIP field is the first thing anyone touches on this page, so it gets a
little more presence: navy digits, wider, and centred under the copy. */
.card.static input.big {
color: var(--ink); max-width: 320px; margin: 0 auto; display: block;
background: linear-gradient(180deg, #FFFFFF 0%, #F6F9FC 100%);
}
.card.static input.big::placeholder { color: #A9B6C7; }
/* A card that is only a container should not pretend to be interactive. */
.card.static:hover { transform: none; box-shadow: var(--sh-sm); }
.step { padding: 28px 26px; }
.step:hover .step-num { transform: scale(1.06) rotate(-4deg); }
.step-num { transition: transform .2s cubic-bezier(.2,.7,.3,1); }
.step-num {
width: 42px; height: 42px; border-radius: 50%; background: var(--gold); color: var(--ink);
display: grid; place-items: center; font-family: var(--cond); font-weight: 700; font-size: 17px;
margin-bottom: 16px;
}
/* ------------------------------- packages -------------------------------- */
/* --- the package deck ----------------------------------------------------
Three tiers fanned like a hand of cards: each one overlaps the next, so only
a slice of the first two shows and the whole of the last. Hovering, tapping
or tabbing into a card raises it above its neighbours, where it paints over
them and reads in full.
The slice is 250px wide, not a third — a third of a 460px card is 153px,
which cuts through the price. 250px is measured to clear the badge, the
band, the sample vehicle and the figure, so the closed state is still a
price list rather than three unlabelled edges.
Raising z-index is the whole mechanism. Nothing moves sideways and nothing
resizes, so there is no reflow, no layout thrash on hover, and the card is
fully legible the instant it comes forward.
Two columns at 880px was also why Gold fell off the row — three tiers in a
two-column grid wraps. */
.packages { display: grid; gap: 22px; }
@media (min-width: 720px) and (max-width: 1039px) {
.packages { grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (min-width: 1040px) {
/* #tierCards only. #tierPick shares the class but is the wizard's chooser —
overlapping cards you have to click is the wrong shape for a form. */
#tierCards.packages {
--card-w: 460px;
--peek: 250px;
/* stretch, not flex-start. Bronze carries four feature groups and Gold
two, so at natural heights Bronze's bottom two-thirds hung below the
other two, fully exposed — the fan only held where the cards actually
overlapped and the rest looked like a rendering fault. Equal heights make
the closed state a clean block, and .pkg is already a column flexbox with
margin-top:auto on its button, so the shorter cards put the extra space
above the button rather than stretching their content. */
display: flex; align-items: stretch; justify-content: center;
gap: 0; padding: 10px 0 24px;
}
#tierCards.packages > .pkg { flex: 0 0 var(--card-w); position: relative; z-index: 1; }
/* A hairline down the leading edge of each slice, so two overlapping
cards of the same colour still read as two cards. */
#tierCards.packages > .pkg + .pkg { border-left-width: 1px; }
#tierCards.packages > .pkg + .pkg { margin-left: calc(var(--peek) - var(--card-w)); }
/* Later cards sit above earlier ones by default, which is what makes the fan
read left-to-right and cheapest-first. */
#tierCards.packages > .pkg:nth-child(2) { z-index: 2; }
#tierCards.packages > .pkg:nth-child(3) { z-index: 3; }
/* The cut. Without this the slice ends mid-word — "The full inspection:
every system", "What turns a go" — which reads as a rendering fault rather
than a deliberate fan. Masking the covered card fades its content out just
before the next card's edge, so the cut looks intended. Applied to the
covered cards only: the last one is never covered, and the card in front
must be whole. */
#tierCards.packages > .pkg:not(:last-child):not(.deck-front) {
-webkit-mask-image: linear-gradient(90deg, #000 0, #000 186px, transparent 248px);
mask-image: linear-gradient(90deg, #000 0, #000 186px, transparent 248px);
}
/* Forward. :focus-within covers the keyboard — tabbing to a card's Book
button brings its card with it — and .deck-front is set on tap, because a
touch screen has no hover. */
/* .deck-front is set by JS on pointer enter, focus and tap, and it STAYS
until another card is chosen. It used to be a :hover rule, which meant the
card fell back the instant the pointer left it — so dragging across a card
to select text kept flipping the mask and the z-index and the text
appeared to flash. A sticky class holds the card still while you read or
copy from it. The saturate() filter on the siblings is gone for the same
reason: it repainted all three cards on every crossing. */
#tierCards.packages > .pkg.deck-front {
z-index: 20; transform: translateY(-8px);
box-shadow: 0 34px 70px -26px rgba(10,22,40,.55);
}
#tierCards.packages > .pkg-silver.deck-front,
#tierCards.packages > .pkg-gold.deck-front {
box-shadow: 0 34px 70px -26px rgba(0,0,0,.6);
}
/* Text in the cards is selectable — nothing here sets user-select: none, and
this makes that explicit so a future hover trick cannot take it away. */
#tierCards.packages > .pkg, #tierCards.packages > .pkg * { user-select: text; }
}
/* --- the deck tabs -------------------------------------------------------
Three tabs over the fan. Below the deck breakpoint every card is already
fully visible, so both the tabs and the hint would be describing an
interaction that is not there. */
.deck-tabs { display: none; }
.deck-hint { display: none; }
@media (min-width: 1040px) {
/* A full-width flex row that centres its own contents. Auto margins on a
fit-content box were landing 30px left of the deck — three competing
display/width declarations from an earlier pass. */
.deck-tabs {
display: flex; justify-content: center; gap: 4px;
margin: 26px 0 0; padding: 0; background: none; border: 0;
}
/* The segmented plate moves onto an inner wrapper so the row can be full
width and the plate can still hug the tabs. */
.deck-tabs .deck-tab-group {
display: flex; gap: 4px; padding: 5px; border-radius: 12px;
background: rgba(10,22,40,.06); border: 1px solid var(--line);
}
.deck-tab {
display: flex; flex-direction: column; align-items: center; gap: 1px;
min-width: 116px; padding: 9px 20px 8px;
font-family: var(--body); border: 1px solid transparent; border-radius: 9px;
background: transparent; color: var(--gray); cursor: pointer;
transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.deck-tab-name { font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.deck-tab-price {
font-family: var(--display); font-weight: 700; font-size: 13px;
color: var(--gray); letter-spacing: 0;
}
.deck-tab:hover { background: rgba(255,255,255,.7); color: var(--ink); }
.deck-tab:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
/* Selected. Navy plate with the gold price, so the strip says which card is
forward without needing to look down at the deck. */
.deck-tab[aria-selected="true"] {
background: var(--ink); color: #fff; border-color: var(--ink);
box-shadow: 0 6px 16px -8px rgba(10,22,40,.5);
}
.deck-tab[aria-selected="true"] .deck-tab-price { color: var(--gold); }
}
@media (min-width: 1040px) {
.deck-hint {
display: block; text-align: center; margin: 6px 0 0;
font-size: 13.5px; color: var(--gray);
}
.deck-hint b { color: var(--ink); font-weight: 600; }
}
/* --- packages ------------------------------------------------------------
The marketing site gives the three tiers three different treatments, and
that contrast is most of what makes the pricing block work: Bronze sits on
the light grey with a plain border, Silver on flat navy, Gold on a navy
gradient inside a full gold border. Anything less and the $999 tier looks
like the $499 one with a bigger number.
Class names are the platform's existing ones. .pkg-bronze and .pkg-gold are
new; .pkg-silver already existed and is retargeted. */
.pkg {
position: relative; background: var(--paper-2); border: 2px solid var(--line);
border-radius: var(--r-lg); padding: 42px 36px; transition: all .35s ease;
display: flex; flex-direction: column; overflow: hidden;
}
.pkg:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.pkg.on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-lt), var(--sh); }
.pkg-silver {
background: var(--ink-2); border-color: rgba(200,169,74,.25); color: #B8C8DC;
}
.pkg-gold {
background: linear-gradient(145deg, #090F1E 0%, #152248 100%);
border-color: var(--gold); color: #B8C8DC;
}
/* The gold tier carries a soft corner glow on the marketing site. inset +
pointer-events:none so it cannot eat the click on the tile. */
.pkg-gold::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(ellipse at top right, rgba(200,169,74,.08), transparent 60%);
}
.pkg-silver > *, .pkg-gold > * { position: relative; z-index: 1; }
.pkg-badge {
display: inline-block; font-family: var(--body); font-size: 11px; font-weight: 700;
letter-spacing: .2em; text-transform: uppercase; padding: 6px 13px; border-radius: 999px;
background: rgba(107,114,128,.12); color: var(--gray);
}
.pkg-silver .pkg-badge, .pkg-gold .pkg-badge {
background: var(--gold-lt); color: var(--gold);
}
.pkg-band { font-size: 14px; font-weight: 300; color: var(--gray); margin-top: 12px; line-height: 1.6; }
.pkg-silver .pkg-band, .pkg-gold .pkg-band { color: #B3C4DB; }
.pkg-price {
font-family: var(--display); font-weight: 900; font-size: 60px; line-height: 1;
letter-spacing: 0; margin: 16px 0 2px; color: var(--ink);
}
.pkg-silver .pkg-price, .pkg-gold .pkg-price { color: var(--gold); }
.pkg-price sup { font-size: 26px; top: -.72em; }
.pkg-divider { height: 1px; background: rgba(0,0,0,.07); margin: 24px 0; }
.pkg-silver .pkg-divider, .pkg-gold .pkg-divider { background: rgba(255,255,255,.1); }
.pkg-features { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.pkg-features li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: #374151; }
.pkg-silver .pkg-features li, .pkg-gold .pkg-features li { color: #B8C8DC; }
.pkg .btn { margin-top: auto; }
.pkg-bronze .btn { background: var(--ink); border-color: var(--ink); color: #fff; }
.pkg-bronze .btn:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.pkg-silver .btn, .pkg-gold .btn {
background: var(--grad-gold); border-color: transparent; color: var(--ink);
}
.pkg-silver .btn:hover, .pkg-gold .btn:hover {
background: var(--grad-gold-hover); box-shadow: var(--sh-gold); color: var(--ink);
}
.check {
flex: none; width: 20px; height: 20px; border-radius: 50%; margin-top: 1px;
background: var(--gold); color: var(--ink); display: inline-flex;
align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
}
/* The theme's diagonal corner ribbon, kept for whenever a tier earns a flag.
Nothing renders it today — see the note above pkgCard() in index.html. */
.pkg-flag {
position: absolute; top: 18px; right: -35px; background: var(--gold); color: var(--ink);
font-family: var(--body); font-size: 10px; font-weight: 800; letter-spacing: .2em;
padding: 5px 48px; transform: rotate(45deg); text-transform: uppercase; z-index: 2;
}
/* --------------------------------- forms --------------------------------- */
label { display: block; font-size: 15px; font-weight: 500; margin-bottom: 7px; color: var(--ink); }
body.dark label { color: #B8C8DC; }
label .opt { font-weight: 400; color: var(--gray); }
input, select, textarea {
width: 100%; font-family: var(--body); font-size: 16.5px; padding: 14px 16px;
border: 1.5px solid var(--line); border-radius: var(--r); background: var(--card); color: var(--ink);
transition: border-color .14s, box-shadow .14s;
}
body.dark input, body.dark select, body.dark textarea {
/* Slightly lifted off the page ground rather than the same navy, so a field
reads as a field without needing a heavy border. */
background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.16); color: #E7EDF7;
}
body.dark input::placeholder, body.dark textarea::placeholder { color: #6E7F99; }
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) { border-color: var(--gray-2); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(200,169,74,.28); }
input.big { font-family: var(--cond); font-size: 34px; font-weight: 700; letter-spacing: .14em; text-align: center; padding: 20px 14px; }
input.err, select.err { border-color: var(--fault); box-shadow: 0 0 0 4px rgba(220,58,58,.12); }
.err-msg { color: var(--fault); font-size: 14px; margin: 7px 0 0; }
.field { margin-bottom: 18px; }
.row { display: grid; gap: 16px; }
@media (min-width: 620px) { .row.r2 { grid-template-columns: 1fr 1fr; } .row.r3 { grid-template-columns: 1fr 1fr 1fr; } }
.check-row { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--gray); margin-bottom: 15px; line-height: 1.55; }
.check-row input { width: auto; flex: none; margin-top: 4px; }
body.dark .check-row { color: var(--gray-2); }
fieldset { border: 0; padding: 0; margin: 0 0 32px; }
legend { font-family: var(--cond); font-size: 14.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gray); padding: 0 0 14px; }
/* ------------------------------ wizard rail ------------------------------ */
.rail { display: flex; align-items: center; margin: 0 0 36px; }
.rail-step { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.rail-step:last-child { flex: none; }
.rail-dot {
flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
font-family: var(--cond); font-weight: 600; font-size: 15px;
background: var(--card); color: var(--gray); border: 1.5px solid var(--line); transition: all .2s ease;
}
.rail-label { font-size: 14.5px; font-weight: 500; color: var(--gray); white-space: nowrap; }
.rail-line { flex: 1; height: 2px; background: var(--line); margin: 0 12px; min-width: 12px; }
.rail-step.done .rail-dot { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.rail-step.done .rail-line { background: var(--gold); }
.rail-step.done .rail-label { color: var(--ink); }
/* Four nowrap labels cannot fit a phone, and were pushing the last dot 14px
off the right edge — the whole page then scrolled sideways. On narrow
screens show only the current step's label; the dots carry the rest. */
@media (max-width: 560px) {
.rail { margin-bottom: 26px; }
.rail-step { gap: 8px; }
.rail-label { display: none; }
.rail-step.on .rail-label { display: block; font-size: 13.5px; }
.rail-line { margin: 0 8px; min-width: 8px; }
.rail-dot { width: 30px; height: 30px; font-size: 13.5px; }
}
.rail-step.on .rail-dot { border-color: var(--gold); color: var(--ink); box-shadow: 0 0 0 5px rgba(200,169,74,.28); }
.rail-step.on .rail-label { color: var(--ink); font-weight: 600; }
@media (max-width: 720px) { .rail-label { display: none; } .rail-line { margin: 0 6px; } }
.step-panel { display: none; }
.step-panel.on { display: block; animation: slideIn .26s ease; }
@keyframes slideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* --------------------------------- tiles --------------------------------- */
.tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); }
.tile {
position: relative; border: 1.5px solid var(--line); border-radius: var(--r);
padding: 15px 16px 15px 48px; cursor: pointer; background: var(--card);
transition: border-color .14s ease, background .14s ease;
}
.tile:hover { border-color: #B8B4AA; }
/* The indicator, drawn rather than an input so the whole card stays clickable. */
.tile::before {
content: ''; position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
width: 20px; height: 20px; border-radius: 6px;
border: 1.5px solid #C3BFB5; background: #fff;
transition: background .14s ease, border-color .14s ease;
}
.tile::after {
content: ''; position: absolute; left: 22px; top: 50%;
width: 6px; height: 11px; margin-top: -7px;
border: solid #fff; border-width: 0 2px 2px 0;
transform: rotate(45deg) scale(.6); opacity: 0;
transition: opacity .12s ease, transform .12s ease;
}
.tile.on { border-color: var(--navy); background: rgba(22,53,42,.05); }
.tile.on::before { background: var(--navy); border-color: var(--navy); }
.tile.on::after { opacity: 1; transform: rotate(45deg) scale(1); }
.tile b { display: block; font-family: var(--cond); font-size: 16px; font-weight: 600; }
.tile-sub { font-size: 14px; color: var(--gray); margin-top: 2px; }
body.dark .tile { background: var(--ink-2); border-color: rgba(255,255,255,.12); }
body.dark .tile.on { background: var(--gold); color: var(--ink); border-color: var(--gold); }
/* -------------------------------- verdict -------------------------------- */
.verdict { display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; border-radius: var(--r-lg); border: 1.5px solid var(--line); background: var(--card); }
.verdict-icon { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; font-weight: 700; }
.verdict.green { border-color: rgba(27,158,90,.4); background: rgba(27,158,90,.06); }
.verdict.green .verdict-icon { background: var(--gold); color: var(--ink); }
.verdict.amber { border-color: rgba(232,137,12,.4); background: rgba(232,137,12,.06); }
.verdict.amber .verdict-icon { background: rgba(232,137,12,.16); color: var(--warn); }
.verdict.red, .verdict.black { border-color: rgba(220,58,58,.3); background: rgba(220,58,58,.05); }
.verdict.red .verdict-icon, .verdict.black .verdict-icon { background: rgba(220,58,58,.12); color: var(--fault); }
.verdict h4 { font-family: var(--cond); font-size: 19px; margin: 0 0 4px; }
.verdict p { margin: 0; font-size: 15.5px; color: var(--gray); }
/* -------------------------------- summary -------------------------------- */
.summary {
position: sticky; bottom: 0; z-index: 20;
background: var(--ink); color: var(--paper);
border-radius: var(--r-lg);
padding: 17px 22px;
display: flex; justify-content: space-between; align-items: center;
gap: 14px; flex-wrap: wrap;
/* Clearance from whatever it is sitting under, and a top edge so it reads as
a separate bar rather than something glued to the button above it. */
margin: 26px 0 18px;
border-top: 1px solid rgba(255,255,255,.1);
box-shadow: 0 -2px 0 var(--paper), 0 14px 34px -12px rgba(20,22,26,.4);
}
.summary .lbl { font-size: 14px; color: #A9B3BF; font-weight: 500; }
.summary .sub { font-size: 13px; color: #7E8C9E; margin-top: 2px; }
.summary .amt {
font-family: var(--cond); font-size: 28px; font-weight: 700;
color: var(--gold); letter-spacing: -.03em; line-height: 1;
font-variant-numeric: tabular-nums;
}
body.dark .summary { box-shadow: 0 -2px 0 var(--ink), 0 14px 34px -12px rgba(0,0,0,.6); }
@media (max-width: 520px) {
.summary { padding: 15px 18px; margin: 22px 0 14px; }
.summary .amt { font-size: 24px; }
}
/* -------------------------------- statuses ------------------------------- */
.pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--cond); font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 999px; border: 1.5px solid currentColor; background: transparent; }
.pill.green { color: var(--ok); }
.pill.amber { color: var(--warn); }
.pill.red { color: var(--fault); }
.pill.black { color: var(--gray); }
.pill.solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* ------------------------------ trust + faq ------------------------------ */
.trustbar { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust {
display: flex; gap: 13px; align-items: center;
transition: transform .18s cubic-bezier(.2,.7,.3,1);
}
.trust:hover { transform: translateX(3px); }
.trust-ico { transition: transform .2s cubic-bezier(.2,.7,.3,1); }
.trust:hover .trust-ico { transform: scale(1.1); }
.trust-ico { flex: none; width: 40px; height: 40px; border-radius: 11px; background: var(--gold); color: var(--ink); display: grid; place-items: center; font-size: 17px; font-weight: 700; }
.trust b { display: block; font-family: var(--cond); font-size: 16px; font-weight: 600; }
.trust span { font-size: 14px; color: var(--gray); }
details.faq { border-bottom: 1px solid var(--line); transition: background .16s ease; }
details.faq:hover { background: rgba(20,22,26,.02); }
body.dark details.faq:hover { background: rgba(255,255,255,.03); }
details.faq summary { cursor: pointer; list-style: none; padding: 19px 40px 19px 0; position: relative; font-family: var(--cond); font-weight: 600; font-size: 18px; letter-spacing: -.015em; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: '+'; position: absolute; right: 6px; top: 16px; font-family: var(--cond); font-size: 26px; color: var(--gray); font-weight: 400; }
details.faq[open] summary::after { content: '\2013'; }
details.faq p { color: var(--gray); font-size: 16px; padding-bottom: 10px; margin: 0; }
/* ------------------------------ trace + table ---------------------------- */
.trace { font-family: var(--mono); font-size: 13.5px; line-height: 1.85; }
.trace .line { display: grid; grid-template-columns: 64px 180px 1fr; gap: 12px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.trace .t { color: var(--gray-2); }
.trace .k { color: var(--gold); font-weight: 600; }
.trace .d { color: #C3CBD4; font-family: var(--body); font-size: 14px; word-break: break-word; }
.trace .line.hit .k { color: var(--ok); }
.trace .line.miss .k { color: var(--fault); }
@media (max-width: 660px) { .trace .line { grid-template-columns: 56px 1fr; } .trace .d { grid-column: 1/-1; padding-left: 68px; } }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th { text-align: left; font-family: var(--cond); font-size: 13px; letter-spacing: .04em; color: var(--gray); font-weight: 600; padding: 10px 11px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 12px 11px; border-bottom: 1px solid var(--line); vertical-align: top; }
body.dark th, body.dark td { border-bottom-color: rgba(255,255,255,.09); }
body.dark th { color: var(--gray-2); }
tbody tr:hover td { background: rgba(200,169,74,.07); }
/* --------------------------------- misc ---------------------------------- */
.strip { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat b { font-family: var(--cond); font-size: 30px; font-weight: 700; letter-spacing: -.03em; }
body.dark .stat b { color: var(--gold); }
.stat span { font-size: 13.5px; color: var(--gray); }
body.dark .stat span { color: var(--gray-2); }
.empty { padding: 40px 22px; text-align: center; color: var(--gray); font-size: 15.5px; border: 1.5px dashed var(--line); border-radius: var(--r-lg); }
body.dark .empty { border-color: rgba(255,255,255,.14); color: var(--gray-2); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 15px 24px; border-radius: 999px; font-size: 15px; z-index: 90; max-width: 92vw; box-shadow: var(--sh-lg); }
footer { background: var(--ink); color: #98A3B0; font-size: 15px; padding: 56px 0 42px; }
footer a { color: #D3D9E0; }
footer .brand { color: #fff; }
footer .brand-lockup { height: 22px; }
.skip { position: absolute; left: -9999px; background: var(--ink); color: #fff; padding: 12px 18px; z-index: 100; }
.skip:focus { left: 0; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
/* ---------------------- package contents, grouped ------------------------ */
/* A flat row of ticks is what every competitor prints. Grouping by consequence
lets a buyer find what they care about instead of reading the whole list. */
.pkg-group + .pkg-group-next { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.pkg-group-head {
display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
margin-bottom: 10px; justify-content: flex-start;
}
.pkg-group-name {
font-family: var(--cond); font-weight: 600; font-size: 12px;
letter-spacing: .07em; text-transform: uppercase; color: var(--navy);
}
.pkg-group-note { font-size: 12.5px; color: var(--gray-2); }
.pkg-list { list-style: none; margin: 0; padding: 0; }
.pkg-list li {
position: relative; padding: 6px 0 6px 18px;
font-size: 14.5px; line-height: 1.5; color: var(--ink);
}
.pkg-list li::before {
content: ''; position: absolute; left: 0; top: 13px;
width: 6px; height: 6px; border-radius: 50%;
background: var(--navy); opacity: .45;
}
.pkg.on .pkg-group-name { color: var(--navy); }
/* Both dark cards. Two things were wrong here.
Gold had no rules at all, so its group names and list items fell through to
the light-ground defaults — var(--navy) and var(--ink) — and rendered dark
navy on a dark navy card. On the $999 tier, every feature it sells was
invisible.
And these selectors used to name only .pkg-silver, in the previous brand's
mint green (#A8DCBE / #9DB7A5 / #E4EFE7). Those were hardcoded hex values,
so the navy-and-gold palette sweep never touched them: Silver's group
headings have been mint green this whole time. */
.pkg-silver .pkg-group-name,
.pkg-gold .pkg-group-name { color: var(--gold); }
.pkg-silver .pkg-group-note,
.pkg-gold .pkg-group-note { color: #B3C4DB; }
.pkg-silver .pkg-list li,
.pkg-gold .pkg-list li { color: #E7EDF7; }
.pkg-silver .pkg-list li::before,
.pkg-gold .pkg-list li::before { background: var(--gold); opacity: .85; }
.pkg-silver .pkg-group + .pkg-group-next,
.pkg-gold .pkg-group + .pkg-group-next { border-top-color: rgba(255,255,255,.16); }
/* The blurb under the price and the section divider, same reasoning. */
.pkg-silver .pkg-divider,
.pkg-gold .pkg-divider { background: rgba(255,255,255,.14); }
body.dark .pkg-group-name { color: var(--gold); }
body.dark .pkg-list li { color: #C4D2E4; }
body.dark .pkg-list li::before { background: var(--gold); }
body.dark .pkg-group + .pkg-group-next { border-top-color: rgba(255,255,255,.1); }
@media (max-width: 560px) {
.pkg-list li { font-size: 14px; padding-left: 16px; }
.pkg-group-head { gap: 6px; }
}
/* Anyone who has asked for reduced motion gets none of it. */
@media (prefers-reduced-motion: reduce) {
.card, .card:hover, .pkg, .pkg:hover, .stat-card, .stat-card:hover,
.trust, .trust:hover, .step-num, .trust-ico {
transform: none !important;
transition: box-shadow .01s, border-color .01s !important;
}
}
/* --- packages on the dark ground -----------------------------------------
Bronze's light-grey plate is invisible on navy, so on dark the three tiers
separate by border and depth instead: Bronze plain, Silver a lifted navy,
Gold the gradient inside a full gold border. */
body.dark .pkg {
background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.10); color: #C4D2E4;
}
body.dark .pkg:hover { box-shadow: 0 24px 48px -18px rgba(0,0,0,.6); }
body.dark .pkg-silver { background: var(--ink-2); border-color: rgba(200,169,74,.28); }
body.dark .pkg-gold {
background: linear-gradient(145deg, #0B1428 0%, #152248 100%);
border-color: var(--gold);
}
body.dark .pkg-badge { background: rgba(255,255,255,.07); color: #9FB2CC; }
body.dark .pkg-silver .pkg-badge, body.dark .pkg-gold .pkg-badge {
background: var(--gold-lt); color: var(--gold);
}
body.dark .pkg-band { color: #B3C4DB; }
body.dark .pkg-price { color: var(--gold); }
body.dark .pkg-divider { background: rgba(255,255,255,.1); }
body.dark .pkg-features li { color: #C4D2E4; }
body.dark .pkg-bronze .btn { background: transparent; border-color: rgba(200,169,74,.5); color: var(--gold); }
body.dark .pkg-bronze .btn:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
/* The hero glow, and the stat tiles, on the dark ground. */
body.dark .hero::after { background: radial-gradient(circle, rgba(200,169,74,.16), transparent 66%); }
body.dark .stat-card { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.10); }
body.dark .hero-badge { background: var(--gold-lt); border-color: rgba(200,169,74,.35); color: var(--gold); }
body.dark .verdict { border-color: rgba(255,255,255,.12); }
body.dark .rail-step .rail-dot { border-color: rgba(255,255,255,.22); color: #8899BB; }
body.dark .rail-step.done .rail-dot { background: var(--gold); border-color: var(--gold); color: var(--ink); }
body.dark .rail-line { background: rgba(255,255,255,.14); }
body.dark .pkg-flag { color: var(--ink); }
/* Headings on the dark ground. The theme sets h1-h4 to var(--ink) — the navy
the marketing site uses for headings on white — and on a navy page that is
navy on navy: the hero h1 rendered as a blank gap. Caught by looking at the
screenshot, not by any audit. */
body.dark h1, body.dark h2, body.dark h3, body.dark h4 { color: #F2F6FF; }
body.dark h1 .accent, body.dark h2 .accent,
body.dark h3 .accent, body.dark .accent { color: var(--gold); }
/* The live dot was the old brand's green. On this palette it reads as a status
light that means nothing; gold makes it part of the badge. */
body.dark .pulse-dot, .hero .pulse-dot { background: var(--gold); }
/* Figures in the stat strip: gold throughout rather than one gold and three
white, which looked like the first tile was selected. */
body.dark .stat-card .n { color: var(--gold); }
body.dark .stat-card .l { color: #8899BB; }
/* --- panels on the tinted bands ------------------------------------------
A plain white .card on a tinted band is two flat rectangles with nothing
between them. These take the same brushed surface as the booking wizard, so
they read as plates lying on the band. */
.section.tint .card,
#contact .card {
background: linear-gradient(158deg, #FFFFFF 0%, #FAFCFE 40%, #EFF3F9 100%);
border-color: #D3DCE8;
box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
0 1px 2px rgba(10,22,40,.05),
0 14px 32px -22px rgba(10,22,40,.3);
}
.section.tint .card:hover,
#contact .card:hover { border-color: #BFCCDD; }
/* The contact form is a form, not a tile, so it does not lift on hover — same
reasoning as the wizard panel. */
#contact .card:has(form),
#contact .card:has(form):hover { transform: none; }
#contact .card input,
#contact .card select,
#contact .card textarea {
background: #FFFFFF; border-color: #C9D4E2;
box-shadow: inset 0 2px 4px rgba(10,22,40,.07);
}
#contact .card input:focus,
#contact .card select:focus,
#contact .card textarea:focus {
border-color: var(--gold);
box-shadow: inset 0 2px 4px rgba(10,22,40,.05), 0 0 0 4px rgba(200,169,74,.28);
}
/* The FAQ rows sit directly on the band, so each one needs its own ground to
be a row at all. The old hover was rgba(20,22,26,.02) — invisible on a tint,
and invisible on white too. */
#faq details.faq {
background: rgba(255,255,255,.74);
border-bottom: 1px solid #DCE3EE;
padding: 0 18px;
}
#faq details.faq:first-of-type { border-radius: 12px 12px 0 0; }
#faq details.faq:last-of-type { border-radius: 0 0 12px 12px; border-bottom: 0; }
#faq details.faq:hover,
#faq details.faq[open] { background: #FFFFFF; }
/* --- contact form confirmation -------------------------------------------
Shown in place of the form once a message is sent. The tick is the only
green on the customer site; it is the semantic "done" colour and reads as a
result rather than as brand furniture. */
.sent-panel { text-align: center; padding: 26px 12px 20px; }
.sent-tick {
width: 82px; height: 82px; margin: 0 auto 22px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(150deg, #2FA35C, #157F42);
color: #fff;
box-shadow: 0 0 0 10px rgba(47,163,92,.12), 0 14px 30px -14px rgba(21,127,66,.6);
}
.sent-tick svg { width: 40px; height: 40px; }
.sent-panel h3 { font-size: clamp(24px, 3vw, 30px); margin: 0; }
/* The same 50px gold hairline the section headings use, so the panel still
belongs to the page. */
.sent-rule {
width: 50px; height: 2px; margin: 16px auto 18px;
background: linear-gradient(90deg, var(--gold), transparent);
}
.sent-panel p { color: var(--text); margin: 0 auto; max-width: 40ch; }
.sent-panel p b { color: var(--ink); font-weight: 600; }
.sent-call {
display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
justify-content: center;
margin-top: 22px !important; padding: 10px 18px; border-radius: 999px;
background: rgba(10,22,40,.05); border: 1px solid var(--line);
font-size: 14.5px; color: var(--gray) !important;
}
.sent-call a { color: var(--gold-dk); font-weight: 700; text-decoration: none; }
.sent-call a:hover { text-decoration: underline; }