/* ============================================================================= UK Vehicle Audit - design system Two themes via [data-theme] on . No frameworks, no third-party CSS. ============================================================================= */ /* --- Self-hosted fonts (latin subsets, woff2) -------------------------------- Served from our own origin: no render-blocking Google Fonts CSS request, no third-party connection (GDPR), and the browser only downloads the weights a page actually uses. Regenerate via the Google css2 API with a Chrome UA. */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('../fonts/web/fraunces-500-700.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/web/inter-400.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/web/inter-500.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/web/inter-600.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/web/inter-700.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/web/jetbrains-mono-500.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/web/jetbrains-mono-600.woff2') format('woff2'); } @font-face { font-family: 'Sora'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/web/sora-700.woff2') format('woff2'); } @font-face { font-family: 'Sora'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/web/sora-800.woff2') format('woff2'); } /* --- Tokens ---------------------------------------------------------------- */ :root { --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-head: 'Sora', 'Inter', system-ui, sans-serif; --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-plate: 'Sora', 'Arial Black', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Menlo', monospace; --plate-yellow: #fcd12a; --plate-yellow-2: #ffe15c; --plate-blue: #0e3ea8; --plate-black: #14161a; --radius-xs: 7px; --radius-s: 10px; --radius-m: 14px; --radius-l: 20px; --radius-xl: 28px; --radius-pill: 999px; --container: 1160px; --container-narrow: 800px; --header-h: 72px; --ease: cubic-bezier(.22, .8, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --section-y: clamp(42px, 4.6vw, 76px); } [data-theme="light"] { color-scheme: light; --bg: #f3f5fb; --bg-raised: #ffffff; --bg-raised-2: #f7f9fd; --bg-sunken: #e9edf5; --border: #dde3ee; --border-soft: #e9edf5; --border-strong: #cbd3e2; --text: #0f1626; --text-soft: #48546b; --text-faint: #78849a; --accent: #2f5bd6; --accent-strong: #2247bd; --accent-2: #10ad9a; --accent-ink: #ffffff; --accent-soft: rgba(47, 91, 214, .09); --accent-line: rgba(47, 91, 214, .22); --cta-blue: #2f5bd6; --cta-blue-2: #4d79ea; --good: #0f8b50; --good-soft: #dcf5e7; --warn: #b45309; --warn-soft: #fdf2d8; --warn-fill: #f59e0b; --bad: #d1343f; --bad-soft: #fce4e6; --grid-line: rgba(15, 22, 38, .045); --sheen: rgba(255, 255, 255, .7); --shadow-s: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04); --shadow-m: 0 14px 40px -16px rgba(16, 24, 40, .18); --shadow-l: 0 36px 74px -26px rgba(16, 24, 40, .26); --shadow-glow: 0 0 0 1px var(--accent-line), 0 22px 54px -22px rgba(47, 91, 214, .32); } [data-theme="dark"] { color-scheme: dark; --bg: #090b11; --bg-raised: #10141d; --bg-raised-2: #171d29; --bg-sunken: #05070c; --border: #232c3b; --border-soft: #1a2130; --border-strong: #333e51; --text: #eef1f8; --text-soft: #a7b1c2; --text-faint: #6b7688; --accent: #6f9dff; --accent-strong: #5786ff; --accent-2: #4fe0c6; --accent-ink: #0a0c12; --accent-soft: rgba(111, 157, 255, .15); --accent-line: rgba(111, 157, 255, .32); --cta-blue: #4169e8; --cta-blue-2: #6389f5; --good: #3ed88f; --good-soft: rgba(62, 216, 143, .13); --warn: #f0c14b; --warn-soft: rgba(240, 193, 75, .13); --warn-fill: #f0c14b; --bad: #ff6b78; --bad-soft: rgba(255, 107, 120, .13); --grid-line: rgba(255, 255, 255, .035); --sheen: rgba(255, 255, 255, .06); --shadow-s: 0 1px 2px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .3); --shadow-m: 0 14px 38px -14px rgba(0, 0, 0, .62); --shadow-l: 0 34px 74px -26px rgba(0, 0, 0, .74); --shadow-glow: 0 0 0 1px var(--accent-line), 0 22px 56px -20px rgba(79, 127, 255, .5); } /* Shared gradient recipes (resolve against the active theme's tokens). */ :root { --grad-brand: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); --grad-cta: linear-gradient(180deg, var(--cta-blue-2), var(--cta-blue)); --grad-surface: linear-gradient(180deg, var(--sheen), transparent 60%); --hero-glow: radial-gradient(680px 340px at 50% -60px, var(--accent-soft), transparent 70%); } /* --- Reset / base ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; /* Sticky footer: main grows, so the footer sits at the viewport bottom even on short pages (dashboard with one order, 404, …). */ min-height: 100vh; display: flex; flex-direction: column; font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background .25s var(--ease), color .25s var(--ease); } main { flex: 1 0 auto; } /* Ambient light: soft aurora glows anchored to the top of the viewport, fading out by mid-page. Restrained on purpose - the hero adds its own. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(62% 48% at 12% -6%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 68%), radial-gradient(52% 42% at 104% -2%, color-mix(in srgb, var(--accent-2) 15%, transparent), transparent 62%); -webkit-mask: linear-gradient(180deg, #000 0%, #000 26%, transparent 74%); mask: linear-gradient(180deg, #000 0%, #000 26%, transparent 74%); } h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.022em; text-wrap: balance; } /* Editorial serif display for the big statements; sans for UI-level headings. */ h1, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.015em; font-optical-sizing: auto; } h1 { font-size: clamp(2.25rem, 5.2vw, 3.75rem); line-height: 1.04; } h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.08; } h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; } /* An h2 that renders like the compact sans h3 - used where a card or rail heading follows the h1 directly, so the document outline never skips a level but the big serif h2 stays reserved for section heads. */ h2.h-min { font-family: var(--font-head); font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.12; margin-bottom: 7px; } p { margin: 0 0 1em; } a { color: var(--accent); text-decoration: none; transition: color .15s; } a:hover { text-decoration: underline; } img, svg { vertical-align: middle; } .container-narrow { max-width: var(--container-narrow); margin-inline: auto; padding-inline: 20px; } /* --- Reusable premium utilities ------------------------------------------- */ .eyebrow { display: inline-flex; align-items: center; gap: 9px; font: 600 .73rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; } .eyebrow::before { content: ""; width: 20px; height: 2px; border-radius: 2px; background: var(--grad-brand); } .section-head .eyebrow { margin-inline: auto; } .text-gradient { background: linear-gradient(120deg, var(--accent) 10%, var(--accent-2) 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Scroll-reveal - only engaged when JS marks , so no-JS and reduced-motion users always see fully-rendered content. */ .js [data-reveal] { opacity: 0; transform: translateY(18px); } .js [data-reveal].in { opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform .7s var(--ease-out); } .js [data-reveal][data-reveal-delay="1"].in { transition-delay: .08s; } .js [data-reveal][data-reveal-delay="2"].in { transition-delay: .16s; } .js [data-reveal][data-reveal-delay="3"].in { transition-delay: .24s; } .js [data-reveal][data-reveal-delay="4"].in { transition-delay: .32s; } @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; } } .container { max-width: var(--container); margin-inline: auto; padding-inline: 20px; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--accent); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--radius-s) 0; z-index: 100; } .skip-link:focus { left: 0; } /* Scroll progress - a thin gradient line that fills as you read. */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; max-width: 100%; background: var(--grad-brand); z-index: 60; pointer-events: none; opacity: 0; transition: opacity .3s; } .scroll-progress.on { opacity: 1; } @media (prefers-reduced-motion: reduce) { .scroll-progress { transition: none; } } @media print { .scroll-progress { display: none; } } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* --- Header -------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid transparent; transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .site-header.scrolled { background: color-mix(in srgb, var(--bg) 86%, transparent); border-bottom-color: var(--border-soft); box-shadow: 0 10px 30px -22px rgba(0, 0, 0, .5); } .header-inner { display: flex; align-items: center; gap: 20px; height: var(--header-h); } .brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none !important; color: var(--text); } .brand-plate { display: inline-grid; place-items: center; width: 36px; height: 27px; background: linear-gradient(180deg, var(--plate-yellow-2), var(--plate-yellow)); color: var(--plate-black); font: 800 13px/1 var(--font-head); letter-spacing: .02em; border-radius: 6px; border-left: 7px solid var(--plate-blue); box-shadow: var(--shadow-s), inset 0 1px 0 rgba(255, 255, 255, .5); transition: transform .25s var(--ease-spring); } .brand:hover .brand-plate { transform: translateY(-1px) rotate(-3deg); } .brand-name { font-family: var(--font-head); font-size: 1.08rem; font-weight: 500; letter-spacing: -.02em; } .brand-name strong { font-weight: 800; } .main-nav { display: flex; align-items: center; gap: 2px; } .nav-link, .nav-trigger { display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; border: 0; background: transparent; border-radius: var(--radius-pill); color: var(--text-soft); font: 500 .92rem/1 var(--font-body); cursor: pointer; white-space: nowrap; transition: color .15s, background .15s; } .nav-link:hover, .nav-trigger:hover, .nav-item:hover .nav-trigger, .nav-item.open .nav-trigger { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); text-decoration: none; } .nav-link[aria-current="page"] { color: var(--accent); background: var(--accent-soft); } .nav-caret { opacity: .65; transition: transform .25s var(--ease); } .nav-item:hover .nav-caret, .nav-item.open .nav-caret { transform: rotate(180deg); } @media (min-width: 1025px) { .main-nav { margin-inline: auto; gap: 4px; } } .header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; } /* --- Theme toggle ---------------------------------------------------------------- */ .theme-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 50%; background: var(--bg-raised); color: var(--text-soft); cursor: pointer; transition: transform .35s var(--ease-spring), color .15s, border-color .15s, background .15s; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); transform: rotate(-25deg); } [data-theme="light"] .icon-sun { display: none; } [data-theme="dark"] .icon-moon { display: none; } /* --- Buttons ------------------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: var(--radius-s); border: 1px solid transparent; font: 600 .94rem/1.2 var(--font-body); letter-spacing: -.005em; cursor: pointer; text-decoration: none !important; transition: transform .18s var(--ease-spring), box-shadow .2s var(--ease), background .18s, border-color .18s, color .18s, filter .18s; white-space: nowrap; } .btn:active { transform: translateY(0) scale(.98); } .btn-primary { background: var(--grad-cta); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 8px 20px -8px color-mix(in srgb, var(--cta-blue) 75%, transparent); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, .32) inset, 0 16px 34px -10px color-mix(in srgb, var(--cta-blue) 78%, transparent); } .btn-accent { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--accent) 80%, transparent); } .btn-accent:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 16px 34px -12px color-mix(in srgb, var(--accent) 85%, transparent); } .btn-outline { border-color: var(--border-strong); color: var(--text); background: color-mix(in srgb, var(--bg-raised) 40%, transparent); } .btn-outline:hover { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); } .btn-ghost { color: var(--text-soft); background: transparent; } .btn-ghost:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); } .btn-danger { background: var(--bad); color: #fff; box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--bad) 75%, transparent); } .btn-danger:hover { transform: translateY(-2px); filter: brightness(1.06); } /* Account page: the delete-account card */ .card-danger { border-color: color-mix(in srgb, var(--bad) 35%, transparent); } .card-danger:hover { transform: none; box-shadow: var(--shadow-s); } .btn-lg { padding: 15px 30px; font-size: 1.04rem; border-radius: var(--radius-m); } .btn-sm { padding: 7px 15px; font-size: .87rem; } .btn-block { width: 100%; } .btn[disabled] { opacity: .55; cursor: not-allowed; } .btn[disabled]:hover { transform: none; } /* --- The registration plate input --------------------------------------------------- */ .plate-form { display: flex; flex-direction: column; gap: 14px; align-items: center; } .plate-input-wrap { display: flex; width: min(460px, 100%); border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-l), inset 0 0 0 2px rgba(0, 0, 0, .3), 0 24px 50px -28px color-mix(in srgb, var(--plate-yellow) 60%, transparent); transition: transform .22s var(--ease-spring), box-shadow .25s var(--ease); } .plate-input-wrap:focus-within { transform: translateY(-2px) scale(1.012); box-shadow: var(--shadow-l), inset 0 0 0 2px rgba(0, 0, 0, .3), 0 0 0 4px color-mix(in srgb, var(--accent) 42%, transparent), 0 30px 60px -26px color-mix(in srgb, var(--plate-yellow) 66%, transparent); } .plate-band { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 52px; flex: 0 0 52px; background: var(--plate-blue); color: #fff; font: 700 .8rem/1 var(--font-head); padding-block: 8px; } .plate-band svg { width: 22px; height: 22px; } .plate-input { flex: 1; min-width: 0; border: 0; background: linear-gradient(180deg, var(--plate-yellow-2), var(--plate-yellow)); color: var(--plate-black); font: 800 clamp(1.6rem, 6vw, 2.35rem)/1 var(--font-plate); letter-spacing: .06em; text-align: center; text-transform: uppercase; padding: 19px 12px; outline: none; } .plate-input::placeholder { color: rgba(20, 22, 26, .35); } .plate-hint { color: var(--text-faint); font-size: .88rem; } .plate-error { color: var(--bad); background: var(--bad-soft); font-size: .92rem; font-weight: 500; padding: 8px 14px; border-radius: var(--radius-s); display: none; } .plate-error.visible { display: block; } /* Live decode line: appears once a full current-style reg is typed. Mono = the site's data voice; the tag itself gets the accent. Sits after the hint so its arrival never moves the CTA buttons. */ .plate-decode { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .02em; color: var(--text-soft); animation: decode-in .4s var(--ease-out); } .plate-decode strong { color: var(--accent); font-weight: 600; } @keyframes decode-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* --- MOT reminder sign-up (adds an email + consent under the plate) -------------------- */ .reminder-field { display: flex; flex-direction: column; gap: 6px; width: min(430px, 100%); text-align: left; } .reminder-field > span { font-size: .9rem; font-weight: 600; color: var(--text-soft); } .reminder-field input { width: 100%; padding: 13px 15px; border-radius: var(--radius-s); border: 1px solid var(--border); background: var(--bg-raised); color: var(--text); font: 500 1rem/1.2 var(--font-body); transition: border-color .18s var(--ease), box-shadow .18s var(--ease); } .reminder-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); } .reminder-consent { display: flex; gap: 10px; width: min(430px, 100%); text-align: left; font-size: .9rem; color: var(--text-soft); line-height: 1.45; cursor: pointer; } .reminder-consent input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); } /* --- Hero ------------------------------------------------------------------------------ */ .hero { position: relative; isolation: isolate; padding: clamp(56px, 9vw, 118px) 0 clamp(44px, 7vw, 84px); text-align: center; overflow: hidden; } /* Layered hero backdrop: a faint grid that fades out, plus twin colour spots. */ .hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 100% 58px, linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 58px 100%; -webkit-mask: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%); mask: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%); } .hero::after { content: ""; position: absolute; inset: -20% -10% auto -10%; height: 620px; z-index: -2; background: radial-gradient(38% 60% at 30% 20%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%), radial-gradient(34% 56% at 72% 8%, color-mix(in srgb, var(--accent-2) 22%, transparent), transparent 68%); filter: blur(18px); opacity: .9; } .hero .eyebrow { justify-content: center; } .hero h1 { max-width: 15ch; margin-inline: auto; letter-spacing: -.02em; } .hero .lede { max-width: 580px; margin: 0 auto 36px; color: var(--text-soft); font-size: clamp(1.05rem, 2vw, 1.22rem); line-height: 1.6; } .hero-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 32px; color: var(--text-faint); font-size: .9rem; font-weight: 500; } .hero-trust span { display: inline-flex; align-items: center; gap: 8px; } .hero-trust svg { color: var(--good); flex-shrink: 0; } /* --- Cards & sections --------------------------------------------------------------- */ .section { padding: var(--section-y) 0; } .section-alt { background: var(--bg-sunken); border-block: 1px solid var(--border-soft); } .section-head { text-align: center; max-width: 660px; margin: 0 auto 52px; } .section-head p { color: var(--text-soft); font-size: 1.06rem; } .card { position: relative; background: var(--grad-surface), var(--bg-raised); border: 1px solid var(--border-soft); border-radius: var(--radius-l); padding: 28px; box-shadow: var(--shadow-s); transition: transform .28s var(--ease-out), box-shadow .28s, border-color .28s; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: var(--accent-line); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .feature-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-m); background: var(--grad-brand); color: #fff; margin-bottom: 18px; box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--accent) 72%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25); } .card h3 { margin-bottom: 7px; } .card p { color: var(--text-soft); font-size: .96rem; margin: 0; line-height: 1.6; } /* Specificity rescue: the .card p reset above (0-1-1) outweighs single-class paragraph components (0-1-0), silently flattening their intended margins inside result cards. Re-assert them with .card-scoped twins - if you add a new margined

component that lives inside a .card, add it here. */ .card .fc-status { margin: 0 0 20px; } .card .pc-note { margin: 0 0 20px; } .card .caz-basis { margin: 0 0 20px; } .card .caz-note, .card .ved-note { margin: 0 0 12px; } .card .caz-source, .card .ved-source { margin: 14px 0 0; } /* --- Forms ------------------------------------------------------------------------------ */ .form-card { position: relative; max-width: 448px; margin: clamp(30px, 6vw, 72px) auto; background: var(--grad-surface), var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 38px; box-shadow: var(--shadow-l); overflow: hidden; } .form-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad-brand); } .form-card h1 { font-size: 1.65rem; text-align: center; } .form-card .form-sub { text-align: center; color: var(--text-soft); margin-bottom: 28px; font-size: .95rem; } .field { margin-bottom: 18px; } .field label { display: block; font-weight: 600; font-size: .86rem; margin-bottom: 7px; } .field input, .field select, .field textarea { width: 100%; padding: 12px 15px; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--bg); color: var(--text); font: 400 1rem var(--font-body); transition: border-color .16s, box-shadow .16s, background .16s; } .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--border-strong); } .field textarea { resize: vertical; min-height: 120px; line-height: 1.5; } .field select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 38px; background-image: linear-gradient(45deg, transparent 50%, var(--text-soft) 50%), linear-gradient(135deg, var(--text-soft) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } .field .field-help { font-size: .82rem; color: var(--text-faint); margin-top: 5px; } .form-links { text-align: center; margin-top: 18px; font-size: .92rem; color: var(--text-soft); } .divider { display: flex; align-items: center; gap: 14px; color: var(--text-faint); font-size: .82rem; margin: 22px 0; } .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border-soft); } .oauth-row { display: grid; gap: 10px; } .btn-oauth { border-color: var(--border); background: var(--bg); color: var(--text); justify-content: center; } .btn-oauth:hover { background: var(--bg-sunken); border-color: var(--text-faint); } /* --- Flash messages ----------------------------------------------------------------------- */ .flash { margin-top: 16px; padding: 12px 18px; border-radius: var(--radius-m); font-weight: 500; font-size: .95rem; border: 1px solid transparent; } .flash-success { background: var(--good-soft); color: var(--good); border-color: color-mix(in srgb, var(--good) 25%, transparent); } .flash-error { background: var(--bad-soft); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 25%, transparent); } .flash-info { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 25%, transparent); } .flash-warning { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 25%, transparent); } /* --- Steps strip (how it works) -------------------------------------------------------------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: step; } .step { position: relative; padding: 28px; } .step::before { counter-increment: step; content: counter(step, decimal-leading-zero); display: block; font: 800 2.3rem/1 var(--font-head); letter-spacing: -.02em; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; margin-bottom: 14px; } /* --- Price banner --------------------------------------------------------------------------------- */ .price-line { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--font-head); } .price-line .amount { font-size: 2.6rem; font-weight: 800; } .price-line .per { color: var(--text-faint); } /* --- Tables ------------------------------------------------------------------------------------------ */ .table-wrap { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: var(--radius-m); } table.data { width: 100%; border-collapse: collapse; background: var(--bg-raised); font-size: .94rem; } table.data th, table.data td { padding: 12px 16px; text-align: left; } table.data th { background: var(--bg-sunken); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-soft); } table.data tr + tr td { border-top: 1px solid var(--border-soft); } table.data tr:hover td { background: color-mix(in srgb, var(--bg-sunken) 55%, transparent); } .badge { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: .78rem; font-weight: 600; } .badge-good { background: var(--good-soft); color: var(--good); } .badge-warn { background: var(--warn-soft); color: var(--warn); } .badge-bad { background: var(--bad-soft); color: var(--bad); } .badge-muted { background: var(--bg-sunken); color: var(--text-soft); } /* --- Mini plate (for tables / report headers) ------------------------------------------------------------ */ .mini-plate { display: inline-block; background: linear-gradient(180deg, var(--plate-yellow-2), var(--plate-yellow)); color: var(--plate-black); border-left: 5px solid var(--plate-blue); border-radius: 5px; padding: 3px 11px; font: 700 .95rem/1.5 var(--font-plate); letter-spacing: .05em; white-space: nowrap; box-shadow: var(--shadow-s), inset 0 1px 0 rgba(255, 255, 255, .45); } /* --- FAQ accordion ------------------------------------------------------------------------------------------- */ .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1000px; margin-inline: auto; align-items: start; } .faq-col { display: flex; flex-direction: column; gap: 12px; } .faq-col .faq-item { margin-bottom: 0; } @media (max-width: 760px) { .faq-grid { grid-template-columns: 1fr; gap: 12px; } } .faq-item { border: 1px solid var(--border-soft); border-radius: var(--radius-m); background: var(--grad-surface), var(--bg-raised); margin-bottom: 12px; overflow: hidden; transition: border-color .2s, box-shadow .2s; } .faq-item:hover { border-color: var(--border-strong); } .faq-item[open] { border-color: var(--accent-line); box-shadow: var(--shadow-s); } .faq-item summary { padding: 17px 22px; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: color .15s; } .faq-item summary:hover { color: var(--accent); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); font: 400 1.35rem/1 var(--font-head); color: var(--accent); transition: transform .25s var(--ease-spring), background .2s; } .faq-item[open] summary::after { transform: rotate(135deg); } .faq-item .faq-body { padding: 0 22px 20px; color: var(--text-soft); line-height: 1.65; } /* --- Footer ----------------------------------------------------------------------------------------------------- */ .site-footer { position: relative; margin-top: 52px; background: var(--bg-sunken); padding: 64px 0 30px; font-size: .92rem; overflow: hidden; } .site-footer { border-top: 1px solid var(--border); } .site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-line) 25%, var(--accent-line) 75%, transparent); } .footer-top { display: grid; grid-template-columns: 1.5fr 1fr; gap: 44px; align-items: start; padding-bottom: 44px; margin-bottom: 40px; border-bottom: 1px solid var(--border-soft); } .footer-tagline { color: var(--text-soft); max-width: 46ch; margin: 18px 0; line-height: 1.65; font-size: 1rem; } .footer-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 9px 20px; margin: 0; padding: 0; color: var(--text-faint); font-size: .85rem; } .footer-trust li { display: inline-flex; align-items: center; gap: 7px; } .footer-trust li::before { content: ""; flex: none; width: 15px; height: 15px; background: var(--good); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; } .footer-social { display: flex; gap: 10px; margin-top: 18px; } .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: var(--text-soft); background: var(--bg-raised); border: 1px solid var(--border-soft); transition: color .18s, border-color .18s, background .18s, transform .18s var(--ease-out); } .footer-social a:hover { color: var(--accent); border-color: var(--accent-line); transform: translateY(-2px); } .footer-cta { background: var(--grad-surface), var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-l); padding: 26px; box-shadow: var(--shadow-s); } .footer-cta-label { font: 600 1.25rem/1.2 var(--font-display); margin: 0 0 16px; letter-spacing: -.01em; } .footer-cta-sub { color: var(--text-faint); font-size: .84rem; line-height: 1.5; margin: 14px 0 0; } .footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; padding-bottom: 40px; } .footer-col { display: flex; flex-direction: column; gap: 11px; } .footer-col h3 { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); margin-bottom: 4px; } .footer-col a { color: var(--text-soft); width: fit-content; transition: color .15s; } .footer-col a:hover { color: var(--accent); text-decoration: none; } .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-top: 26px; border-top: 1px solid var(--border-soft); } .footer-copy { color: var(--text-faint); font-size: .82rem; margin: 0; max-width: 64ch; line-height: 1.55; } .footer-legal-links { display: flex; gap: 20px; } .footer-legal-links a { color: var(--text-faint); font-size: .82rem; } .footer-legal-links a:hover { color: var(--accent); text-decoration: none; } /* --- Burger (mobile nav) --------------------------------------------------------------------------------------------- */ .nav-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 8px; background: none; border: 1px solid var(--border); border-radius: var(--radius-s); cursor: pointer; } .nav-burger span { display: block; height: 2px; border-radius: 2px; background: var(--text); transition: transform .25s var(--ease), opacity .2s; } .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* --- Responsive ---------------------------------------------------------------------------------------------------------- */ /* The 5-item mega nav needs true desktop width - drop to the drawer below this. */ @media (max-width: 1024px) { .main-nav { position: fixed; inset: calc(var(--header-h) + 8px) 12px auto 12px; flex-direction: column; align-items: stretch; background: color-mix(in srgb, var(--bg-raised) 92%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow-l); padding: 10px; gap: 3px; max-height: calc(100vh - var(--header-h) - 24px); overflow-y: auto; overscroll-behavior: contain; transform: translateY(-10px) scale(.98); transform-origin: top center; opacity: 0; visibility: hidden; transition: transform .24s var(--ease-spring), opacity .18s, visibility .24s; } .main-nav.open { transform: none; opacity: 1; visibility: visible; } .main-nav a { font-size: 1rem; } .nav-burger { display: flex; } .header-actions .btn-ghost { display: none; } } @media (max-width: 900px) { .grid-3, .steps { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } .footer-top { grid-template-columns: 1fr; gap: 32px; } .footer-cols { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer-cols { grid-template-columns: 1fr 1fr; } .footer-bottom { flex-direction: column; align-items: flex-start; } .header-actions .btn-outline, .header-actions .btn-primary { display: none; } } /* --- Vehicle report ---------------------------------------------------------------------------------------------- */ .report-page { max-width: 920px; } .report-hero { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; background: var(--grad-surface), var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 30px 32px; box-shadow: var(--shadow-m); margin-bottom: 24px; overflow: hidden; } .report-hero::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--grad-brand); } .report-hero .report-plate { font-size: 1.75rem; padding: 7px 22px; border-left-width: 9px; border-radius: 8px; } .report-hero h1 { font-size: clamp(1.5rem, 3.2vw, 2.05rem); margin: 14px 0 4px; } .report-hero .report-sub { color: var(--text-soft); font-size: .95rem; margin: 0; } .report-brand-logo { height: 46px; width: auto; max-width: 90px; object-fit: contain; } .report-car-photo { width: 264px; max-width: 100%; border-radius: var(--radius-l); background: var(--bg-sunken); box-shadow: var(--shadow-m); } .report-hero-id { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .report-verdict { position: relative; display: flex; gap: 16px; align-items: center; border-radius: var(--radius-l); padding: 20px 24px; margin-bottom: 28px; font-size: 1rem; line-height: 1.55; border: 1px solid transparent; box-shadow: var(--shadow-s); } .report-verdict::before { content: "\2713"; flex: 0 0 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; font: 800 1.3rem/1 var(--font-head); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); } .report-verdict strong { display: block; font-family: var(--font-head); font-size: 1.16rem; letter-spacing: -.01em; margin-bottom: 2px; color: var(--text); } .report-verdict.v-good { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 32%, transparent); } .report-verdict.v-warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn-fill) 42%, transparent); } .report-verdict.v-bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 32%, transparent); } .report-verdict.v-good::before { background: var(--good); } .report-verdict.v-warn::before { content: "!"; background: var(--warn-fill); color: #241a02; } .report-verdict.v-bad::before { content: "\2715"; background: var(--bad); } /* The audit checklist */ /* Report jump-nav: a sticky mono strip that pins under the site header and scroll-spies the sections (app.js). Print gets the full document, no chrome. */ .report-nav { position: sticky; top: 78px; z-index: 20; display: flex; gap: 4px; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; margin: 18px 0 24px; padding: 6px; background: color-mix(in srgb, var(--bg-raised) 82%, transparent); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border: 1px solid var(--border-soft); border-radius: var(--radius-pill); box-shadow: var(--shadow-s); } .report-nav::-webkit-scrollbar { display: none; } .report-nav a { flex: 0 0 auto; padding: 7px 14px; border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: .74rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-soft); transition: color .18s, background .18s; } .report-nav a:hover { color: var(--text); text-decoration: none; } .report-nav a.active { background: var(--accent-soft); color: var(--accent); } /* Anchor targets land clear of the sticky header + nav stack. */ #sec-checks, #sec-mot, #sec-mileage, #sec-tax, #sec-owner, #sec-spec { scroll-margin-top: 148px; } @media print { .report-nav { display: none; } } .check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 30px; } .check-item { display: flex; gap: 13px; padding: 16px 18px; background: var(--grad-surface), var(--bg-raised); border: 1px solid var(--border-soft); border-radius: var(--radius-m); font-size: .88rem; color: var(--text-soft); transition: border-color .2s, transform .2s var(--ease-out), box-shadow .2s; } .check-item:hover { border-color: var(--border); transform: translateY(-2px); box-shadow: var(--shadow-s); } .check-item strong { display: block; color: var(--text); font-size: .95rem; margin-bottom: 2px; } .check-dot { flex: 0 0 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .82rem; font-weight: 700; margin-top: 1px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); } .check-dot.good { background: var(--good); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 4px var(--good-soft); } .check-dot.warn { background: var(--warn-fill); color: #241a02; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 4px var(--warn-soft); } .check-dot.bad { background: var(--bad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 4px var(--bad-soft); } /* Key figures strip */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 30px; } .stat-cell { position: relative; background: var(--grad-surface), var(--bg-raised); border: 1px solid var(--border-soft); border-radius: var(--radius-m); padding: 16px 18px; transition: border-color .2s, transform .2s var(--ease-out), box-shadow .2s; } .stat-cell:hover { border-color: var(--accent-line); transform: translateY(-2px); box-shadow: var(--shadow-s); } .stat-ic { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); } .stat-cell .k { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); font-weight: 600; padding-right: 34px; } .stat-cell .v { font: 800 1.4rem/1.25 var(--font-head); letter-spacing: -.02em; margin-top: 4px; } .stat-cell .v small { font-size: .78rem; font-weight: 500; color: var(--text-soft); } /* Report sections */ .report-section { background: var(--grad-surface), var(--bg-raised); border: 1px solid var(--border-soft); border-radius: var(--radius-l); margin-bottom: 22px; overflow: hidden; box-shadow: var(--shadow-s); } .report-section > h2 { font-size: 1.08rem; margin: 0; padding: 17px 24px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; gap: 13px; background: color-mix(in srgb, var(--bg-sunken) 50%, transparent); } .report-section > h2 .rs-ic { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--grad-brand); color: #fff; box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--accent) 72%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25); } .report-section > h2 .badge { margin-left: auto; } .report-section .section-body { padding: 20px 24px; } .report-section .table-wrap { border: 0; border-radius: 0; } /* MOT timeline */ .mot-timeline { list-style: none; margin: 0; padding: 4px 0 4px 6px; position: relative; } .mot-timeline::before { content: ''; position: absolute; left: 17px; top: 10px; bottom: 10px; width: 2px; background: var(--border); } .mot-test { position: relative; padding: 0 0 22px 44px; } .mot-test:last-child { padding-bottom: 4px; } .mot-test .mot-dot { position: absolute; left: 6px; top: 2px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .72rem; font-weight: 800; box-shadow: 0 0 0 4px var(--bg-raised); } .mot-test .mot-dot.pass { background: var(--good); box-shadow: 0 0 0 4px var(--bg-raised), 0 0 0 6px var(--good-soft); } .mot-test .mot-dot.fail { background: var(--bad); box-shadow: 0 0 0 4px var(--bg-raised), 0 0 0 6px var(--bad-soft); } .mot-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .mot-head .mot-date { font-weight: 700; font-family: var(--font-head); font-size: 1.02rem; } .mot-head .mot-meta { color: var(--text-faint); font-size: .86rem; } .mot-miles { height: 5px; max-width: 320px; margin: 9px 0 2px; border-radius: var(--radius-pill); background: var(--bg-sunken); overflow: hidden; } .mot-miles-fill { display: block; height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent), var(--accent)); } .mot-defects { margin: 8px 0 0; padding: 0; list-style: none; font-size: .88rem; } .mot-defects li { display: flex; gap: 8px; padding: 3px 0; color: var(--text-soft); align-items: baseline; } .defect-tag { flex-shrink: 0; font-size: .68rem; font-weight: 700; letter-spacing: .04em; padding: 1px 7px; border-radius: 4px; } .defect-tag.dangerous, .defect-tag.major { background: var(--bad-soft); color: var(--bad); } .defect-tag.minor { background: var(--warn-soft); color: var(--warn); } .defect-tag.advisory { background: var(--bg-sunken); color: var(--text-soft); } /* Mileage rows */ .delta-up { color: var(--good); font-variant-numeric: tabular-nums; } .delta-down { color: var(--bad); font-weight: 700; font-variant-numeric: tabular-nums; } /* Spec grids */ .spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 32px; padding: 8px 24px 18px; } .spec-group h3 { display: flex; align-items: center; gap: 8px; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); margin: 18px 0 8px; } .spec-ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); flex: 0 0 auto; } .spec-group dl { margin: 0; font-size: .92rem; } .spec-group .row { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; border-bottom: 1px dashed var(--border-soft); } .spec-group dt { color: var(--text-soft); } .spec-group dd { margin: 0; font-weight: 600; text-align: right; } /* Small advisory line under a value (e.g. the VIN cloning check). */ .spec-group .row-note { border-bottom: 0; padding-top: 2px; } .spec-group dd.vin-note { font-weight: 400; font-size: .8rem; color: var(--text-faint); line-height: 1.5; max-width: 34ch; } /* NCAP stars */ .ncap-stars { color: var(--warn); letter-spacing: 3px; font-size: 1.1rem; } .report-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 34px; } /* Public sample report - banner + buy CTA */ .sample-banner { display: flex; align-items: center; gap: 14px; padding: 16px 22px; margin-bottom: 24px; background: var(--grad-surface), var(--bg-raised); border: 1px solid var(--border-soft); border-left: 4px solid var(--accent); border-radius: var(--radius-m); box-shadow: var(--shadow-s); } .sample-banner p { margin: 0; color: var(--text-soft); font-size: .92rem; } .sample-tag { flex: 0 0 auto; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 700; color: var(--accent-ink); background: var(--grad-brand); padding: 5px 12px; border-radius: 999px; } .sample-cta { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding: clamp(36px, 5vw, 56px) 24px; margin: 10px 0 30px; background: var(--grad-surface), var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-l); } .sample-cta::before { content: ""; position: absolute; left: 50%; top: -45%; width: 640px; height: 440px; transform: translateX(-50%); z-index: -1; background: radial-gradient(42% 60% at 42% 40%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%), radial-gradient(40% 55% at 64% 30%, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 68%); filter: blur(20px); } .sample-cta h2 { margin: 0 0 10px; font-size: clamp(1.5rem, 3vw, 2.05rem); } .sample-cta > p { max-width: 560px; margin: 0 auto 22px; color: var(--text-soft); } .sample-cta-form { display: flex; flex-direction: column; align-items: center; gap: 14px; } .sample-cta-form .plate-input-wrap { width: min(430px, 100%); } .sample-cta-form .plate-error:empty { display: none; } .sample-cta-fine { margin: 16px 0 0; font-size: .85rem; color: var(--text-faint); } @media (max-width: 700px) { .report-hero { grid-template-columns: 1fr; padding: 22px; } .report-car-photo { width: 100%; order: -1; } .spec-grid { padding-inline: 20px; } .report-section .section-body { padding: 16px 20px; } } @media print { /* Always print in the light palette - a dark-theme screen must never print near-white text onto white paper (invisible when the browser omits backgrounds) or heavy dark ink blocks. Mirrors the :root light tokens. */ [data-theme="dark"] { color-scheme: light; --bg: #f3f5fb; --bg-raised: #ffffff; --bg-raised-2: #f7f9fd; --bg-sunken: #e9edf5; --border: #dde3ee; --border-soft: #e9edf5; --border-strong: #cbd3e2; --text: #0f1626; --text-soft: #48546b; --text-faint: #78849a; --accent: #2f5bd6; --accent-strong: #2247bd; --accent-2: #10ad9a; --accent-ink: #ffffff; --accent-soft: rgba(47, 91, 214, .09); --accent-line: rgba(47, 91, 214, .22); --cta-blue: #2f5bd6; --cta-blue-2: #4d79ea; --good: #0f8b50; --good-soft: #dcf5e7; --warn: #b45309; --warn-soft: #fdeecb; --bad: #d1343f; --bad-soft: #fce4e6; --grid-line: rgba(15, 22, 38, .045); --sheen: rgba(255, 255, 255, .7); } .site-header, .site-footer, .report-actions, .theme-toggle { display: none !important; } .report-section, .report-hero, .check-item, .stat-cell { box-shadow: none; border-color: #ccc; } /* The sticky-footer flex layout must not force a full-viewport page when printing. */ body { background: #fff; display: block; min-height: 0; } } /* Reduce motion for users who ask for it. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } } /* --- Guides & articles ------------------------------------------------------------------------------------------- */ .guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .guide-card { display: flex; flex-direction: column; gap: 11px; padding: 28px; background: var(--grad-surface), var(--bg-raised); border: 1px solid var(--border-soft); border-radius: var(--radius-l); box-shadow: var(--shadow-s); color: var(--text); transition: transform .24s var(--ease-out), box-shadow .24s var(--ease), border-color .24s; } .guide-card:hover { text-decoration: none; transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: var(--accent-line); } .guide-card h3, .guide-card h2 { margin: 0; font: 700 1.08rem/1.35 var(--font-head); letter-spacing: -.01em; transition: color .18s; } .guide-card:hover h3 { color: var(--accent); } .guide-card p { margin: 0; color: var(--text-soft); font-size: .92rem; flex-grow: 1; line-height: 1.6; } .guide-card-meta { display: inline-flex; align-items: center; gap: 7px; color: var(--text-faint); font-size: .8rem; font-weight: 500; } .guide-card-meta::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } .guide-tag { align-self: flex-start; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); background: var(--accent-soft); padding: 4px 11px; border-radius: 99px; border: 1px solid var(--accent-line); } /* Featured lead card on the guides index - the cornerstone guide gets the cover-story treatment: serif headline + its own diagram, full width above the grid. */ .guide-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(24px, 4vw, 52px); align-items: center; padding: clamp(26px, 4vw, 44px); margin-bottom: 22px; background: var(--grad-surface), var(--bg-raised); border: 1px solid var(--border-soft); border-radius: var(--radius-xl); box-shadow: var(--shadow-s); color: var(--text); transition: transform .24s var(--ease-out), box-shadow .24s var(--ease), border-color .24s; } .guide-feature:hover { text-decoration: none; transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: var(--accent-line); } .guide-feature-kicker { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--accent); margin-bottom: 14px; } .guide-feature-kicker::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--grad-brand); } .guide-feature h2 { margin: 0 0 12px; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.16; letter-spacing: -.015em; transition: color .18s; } .guide-feature:hover h2 { color: var(--accent); } .guide-feature-copy p { margin: 0 0 16px; color: var(--text-soft); line-height: 1.65; } .guide-feature-fig { width: 100%; height: auto; border-radius: 14px; box-shadow: var(--shadow-m); } @media (max-width: 900px) { .guide-feature { grid-template-columns: 1fr; } .guide-feature-fig { order: -1; } } /* Single article */ .article-narrow { max-width: 760px; } .article-hero { padding: 44px 0 8px; background: var(--hero-glow) no-repeat; } .article-hero h1 { max-width: 18em; } .crumbs { display: flex; gap: 8px; font-size: .85rem; color: var(--text-faint); margin-bottom: 18px; } .crumbs a { color: var(--text-soft); } .article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; color: var(--text-faint); font-size: .88rem; margin: 14px 0 0; } .article-body { padding: 28px 0 8px; font-size: 1.06rem; line-height: 1.75; } .article-body .article-lede { font-size: 1.2rem; color: var(--text-soft); line-height: 1.6; } .article-body h2 { margin: 1.8em 0 .55em; font-size: 1.5rem; letter-spacing: -.02em; } .article-body h3 { margin: 1.5em 0 .45em; font-size: 1.12rem; } .article-body p { margin: 0 0 1.1em; } .article-body a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-line); text-decoration-thickness: 1.5px; text-underline-offset: 2.5px; transition: text-decoration-color .15s; } .article-body a:hover { text-decoration-color: var(--accent); } .article-body ul, .article-body ol { margin: 0 0 1.2em; padding-left: 1.3em; } .article-body li { margin-bottom: .55em; } .article-body li::marker { color: var(--accent); } .article-body strong { font-weight: 700; color: var(--text); } .article-body blockquote { margin: 1.6em 0; padding: 6px 22px; border-left: 3px solid var(--accent); color: var(--text-soft); font-style: italic; } /* In-article comparison tables - real HTML tables (extractable by search and AI answer engines), styled to match the site's card language. */ .article-body .article-table { margin: 1.4em 0 1.6em; overflow-x: auto; } .article-body table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.5; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .article-body th, .article-body td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border-soft); vertical-align: top; } .article-body thead th { font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-soft); background: var(--bg-raised-2); } .article-body tbody tr:last-child td { border-bottom: 0; } .article-body td .yes { color: var(--good); font-weight: 600; } .article-body td .no { color: var(--bad); font-weight: 600; } /* In-article diagrams (self-contained dark SVG cards; they carry their own background + border, so no extra chrome here). */ .article-figure { margin: 2em 0 2.1em; } .article-figure img { display: block; width: 100%; height: auto; border-radius: 20px; box-shadow: var(--shadow-m); } .article-figure figcaption { margin-top: 12px; font-family: var(--font-mono, monospace); font-size: .8rem; letter-spacing: .02em; color: var(--text-faint); } /* In-article comparison tables (guides wrap them in div.article-table). */ .article-table { margin: 1.6em 0 1.9em; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-l, 14px); } .article-table table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.5; } .article-table th { text-align: left; font-weight: 600; color: var(--text); background: var(--bg-raised-2); border-bottom: 1px solid var(--border-strong); padding: 11px 16px; } .article-table td { padding: 11px 16px; border-bottom: 1px solid var(--border-soft); color: var(--text-soft); vertical-align: top; } .article-table tr:last-child td { border-bottom: none; } .article-table td:first-child { color: var(--text); font-weight: 500; } .article-table .yes { color: var(--good); font-weight: 700; } .article-table .no { color: var(--bad); font-weight: 700; } .article-faqs { margin: 40px 0 8px; } .article-faqs h2 { font-size: 1.35rem; } /* Quieter in-article callout pointing at the free tool a guide teaches. */ .guide-tool { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; margin: 34px 0 8px; padding: 22px 26px; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--radius-l); } .guide-tool h2 { font-size: 1.12rem; margin: 0 0 4px; } .guide-tool p { margin: 0; color: var(--text-soft); font-size: .93rem; max-width: 52ch; } .guide-tool-label { display: block; margin-bottom: 8px; font: 600 .7rem/1 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--accent); } .guide-tool .btn { flex-shrink: 0; } .guide-cta { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; margin: 44px 0; padding: 32px 34px; background: var(--grad-surface), var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-l); } .guide-cta::before { content: ""; position: absolute; right: -10%; top: -60%; width: 420px; height: 360px; z-index: -1; background: radial-gradient(45% 55% at 60% 50%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); filter: blur(18px); } .guide-cta h2 { font-size: 1.35rem; margin-bottom: .3em; } .guide-cta p { margin: 0; color: var(--text-soft); max-width: 44ch; } .guide-cta .btn { flex-shrink: 0; } .related-guides { margin: 10px 0 50px; } .related-guides h2 { font-size: 1.3rem; margin-bottom: 18px; } .related-guides .guide-grid { grid-template-columns: repeat(3, 1fr); } .related-guides .guide-card p { display: none; } @media (max-width: 900px) { .guide-grid, .related-guides .guide-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .guide-grid, .related-guides .guide-grid { grid-template-columns: 1fr; } .guide-cta { padding: 24px; } .article-body { font-size: 1rem; } } /* --- Free MOT check (/free-mot-check) ------------------------------------------------------------------------ */ .hero-compact { padding: clamp(34px, 5vw, 62px) 0 clamp(8px, 1.6vw, 18px); } .hero-compact .lede { margin-bottom: 20px; } /* Pull the first content block up close to any hero (was a big empty gap). */ .hero + .section, .hero-compact + .section { padding-top: clamp(14px, 2vw, 26px); } .free-check-result { max-width: 720px; margin-inline: auto; padding: 26px 28px; } .fc-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; } .fc-plate { font-size: 1.25rem; padding: 4px 14px; border-left-width: 7px; border-radius: 6px; } .fc-vehicle { color: var(--text-soft); font-size: .95rem; } .fc-status { margin: 0 0 18px; padding: 13px 16px; border-radius: var(--radius-m); border: 1px solid transparent; font-size: 1.02rem; } .fc-status.fc-good { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 30%, transparent); } .fc-status.fc-bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 30%, transparent); } .fc-status.fc-muted { background: var(--bg-sunken); border-color: var(--border-soft); color: var(--text-soft); } .fc-status.fc-good strong { color: var(--good); } .fc-status.fc-bad strong { color: var(--bad); } .fc-rel { font-family: var(--font-mono); font-size: .85em; color: var(--text-soft); white-space: nowrap; } .fc-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 20px; } .fc-facts dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); margin-bottom: 4px; } .fc-facts dd { margin: 0; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .fc-upsell { border-top: 1px solid var(--border-soft); padding-top: 20px; display: grid; gap: 14px; } .fc-upsell p { margin: 0; color: var(--text-soft); } .fc-upsell strong { color: var(--text); } @media (max-width: 620px) { .fc-facts { grid-template-columns: 1fr; gap: 10px; } .free-check-result { padding: 20px; } } /* --- Number plate check (/number-plate-check) --------------------------------------------------------------- */ .pc-facts { margin-bottom: 16px; } .pc-shape { font: 600 .9rem/1.4 var(--font-plate); letter-spacing: .02em; color: var(--text-soft); } .pc-note { margin: 0 0 20px; padding: 12px 16px; background: var(--bg-sunken); border-radius: var(--radius-m); color: var(--text-soft); font-size: .95rem; } /* --- Number plate region pages (/number-plates) --------------------------------------------------------------- */ .region-hero-plate { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 22px; } .region-hero-note { color: var(--text-soft); font-size: .95rem; } .region-grid { grid-template-columns: repeat(3, 1fr); } .region-card { position: relative; } .region-card .region-letter { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 11px; font: 800 1.25rem/1 var(--font-plate); color: var(--accent-ink); background: var(--grad-brand); letter-spacing: .01em; box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--accent) 72%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25); } .region-card p { color: var(--text-soft); font-size: .9rem; } .region-table td.mono, .region-table .mono { font-family: var(--font-plate); letter-spacing: .02em; } .region-tag-count { color: var(--text-faint); font-size: .82rem; font-weight: 400; } .region-fulllist { margin-top: 16px; padding: 12px 16px; background: var(--bg-sunken); border-radius: var(--radius-m); color: var(--text-soft); font-size: .92rem; line-height: 1.7; letter-spacing: .01em; } .region-cta { max-width: 620px; } .region-cta-card { text-align: center; } .region-cta-card .plate-form { margin-top: 16px; } @media (max-width: 820px) { .region-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .region-grid { grid-template-columns: 1fr; } } /* --- Free car check hub (/free-car-check) --------------------------------------------------------------------- */ .tool-card { position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit; } .tool-card h3 { color: var(--text); } .tool-card .tool-go { margin-top: auto; padding-top: 12px; font-weight: 600; font-size: .92rem; color: var(--accent); } .tool-free { position: absolute; top: 20px; right: 20px; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); padding: 3px 9px; border-radius: 999px; } .compare-card { display: flex; flex-direction: column; } .compare-card-pro { border-color: color-mix(in srgb, var(--accent) 40%, transparent); } .compare-list { list-style: none; margin: 4px 0 20px; padding: 0; } .compare-list li { position: relative; padding: 7px 0 7px 28px; color: var(--text-soft); font-size: .96rem; border-bottom: 1px solid var(--border); } .compare-list li:last-child { border-bottom: 0; } .compare-list li::before { content: ""; position: absolute; left: 4px; top: 12px; width: 12px; height: 7px; border-left: 2px solid var(--good); border-bottom: 2px solid var(--good); transform: rotate(-45deg); } .compare-list-pro li::before { border-color: var(--accent); } .compare-card .btn { margin-top: auto; align-self: flex-start; } /* --- Homepage: free-check band + guide strip ------------------------------------------------------------------ */ .free-band { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; padding: 26px 30px; background: var(--bg-raised); border: 1px solid var(--border-soft); border-radius: var(--radius-l); box-shadow: var(--shadow-m); } .free-band h2 { font-size: 1.25rem; margin-bottom: .3em; } .free-band p { margin: 0; color: var(--text-soft); max-width: 52ch; } .free-band .btn { flex-shrink: 0; } .free-band-actions { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; } @media (max-width: 620px) { .free-band { padding: 22px; } .free-band-actions { width: 100%; } .free-band-actions .btn { flex: 1 1 auto; justify-content: center; } } /* --- Car tax (VED) calculator ------------------------------------------------------------------------------- */ .ved-wrap { max-width: 720px; margin: 0 auto; } /* Two-column calculator layout: form/result left, a context rail right. */ .ved-wrap:has(.calc-rail), .caz-wrap:has(.calc-rail) { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; max-width: 1044px; } .ved-wrap:has(.calc-rail) .ved-form, .caz-wrap:has(.calc-rail) .caz-form { grid-column: 1; grid-row: 1; } .ved-wrap:has(.calc-rail) .ved-result, .caz-wrap:has(.calc-rail) .caz-result { grid-column: 1; grid-row: 2; } .calc-rail { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: calc(var(--header-h) + 16px); } .calc-rail-card { background: var(--grad-surface), var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-l); padding: 24px; box-shadow: var(--shadow-s); } .calc-rail-card .feature-icon { margin-bottom: 14px; } .calc-rail-card h3 { font-size: 1.06rem; line-height: 1.3; margin: 0 0 8px; } .calc-rail-card > p { color: var(--text-soft); font-size: .91rem; line-height: 1.55; margin: 0 0 16px; } .calc-rail-card em { color: var(--text); font-style: normal; font-weight: 600; } .calc-rail-list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; } .calc-rail-list li { position: relative; padding-left: 25px; font-size: .89rem; color: var(--text-soft); } .calc-rail-list li::before { content: ""; position: absolute; left: 0; top: 1px; width: 16px; height: 16px; background: var(--good); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; } .calc-rail-sample { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: 600; font-size: .88rem; color: var(--accent); transition: gap .2s var(--ease); } .calc-rail-sample:hover { text-decoration: none; gap: 9px; } @media (max-width: 920px) { .ved-wrap:has(.calc-rail), .caz-wrap:has(.calc-rail) { display: block; max-width: 720px; } .calc-rail { position: static; margin-top: 22px; } .calc-rail-card { max-width: 460px; margin-inline: auto; } } .ved-form { padding: 26px 28px; } .ved-fieldset { border: 0; margin: 0; padding: 0; } .ved-fieldset > legend { font: 600 1.05rem/1.3 var(--font-head); margin-bottom: 14px; padding: 0; } /* Segmented control for the registration era. */ .ved-segment { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 5px; background: var(--bg-sunken); border-radius: var(--radius-m); margin-bottom: 22px; } .ved-segment input { position: absolute; opacity: 0; pointer-events: none; } .ved-segment label { display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px 8px; border-radius: var(--radius-s); font-size: .92rem; font-weight: 600; color: var(--text-soft); cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; } .ved-segment label:hover { color: var(--text); } .ved-segment input:checked + label { background: var(--bg-raised); color: var(--accent); box-shadow: var(--shadow-s); } .ved-segment input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; } .ved-panel[hidden] { display: none; } .ved-row { margin-bottom: 18px; } .ved-row[hidden] { display: none; } .ved-label, .ved-row > .ved-label { display: block; font-weight: 600; margin-bottom: 7px; } .ved-select, .ved-input { width: 100%; padding: 12px 14px; font-size: 1rem; color: var(--text); background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-m); } .ved-select:focus, .ved-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); } .ved-input { max-width: 200px; } .ved-radios { display: flex; flex-direction: column; gap: 10px; } .ved-radios label, .ved-check label { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; cursor: pointer; line-height: 1.4; } .ved-radios input, .ved-check input { margin-top: 3px; accent-color: var(--accent); flex-shrink: 0; } .ved-hint { display: block; margin-top: 6px; font-size: .85rem; color: var(--text-soft); } .ved-check .ved-hint { margin-left: 26px; } /* Result card. */ .ved-result { margin-top: 22px; padding: 26px 28px; } .ved-headline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--border-soft); } .ved-amount { font: 800 2.6rem/1 var(--font-head); color: var(--text); letter-spacing: -.02em; } .ved-per { color: var(--text-soft); font-size: 1rem; } .ved-badge { margin-left: auto; align-self: center; padding: 5px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: .85rem; } .ved-lines { list-style: none; margin: 0 0 18px; padding: 0; } .ved-lines li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px dashed var(--border-soft); } .ved-lines li:last-child { border-bottom: 0; } .ved-line-label { font-weight: 600; } .ved-line-label small { display: block; font-weight: 400; color: var(--text-soft); font-size: .82rem; margin-top: 3px; } .ved-line-label.bik-strong { color: var(--accent); } .ved-line-amount { font-weight: 700; white-space: nowrap; } .ved-note { margin: 0 0 12px; color: var(--text-soft); font-size: .95rem; line-height: 1.6; } .ved-source { margin: 14px 0 0; font-size: .82rem; color: var(--text-soft); } .ved-upsell { margin-top: 22px; padding: 18px 20px; background: var(--bg-sunken); border-radius: var(--radius-m); } .ved-upsell p { margin: 0 0 12px; } /* Reference rate tables. */ .ved-table { width: 100%; border-collapse: collapse; margin: 16px 0 26px; font-size: .95rem; } .ved-table caption { text-align: left; font-weight: 600; color: var(--text-soft); font-size: .85rem; padding-bottom: 8px; } .ved-table th, .ved-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-soft); } .ved-table thead th { font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-soft); border-bottom: 2px solid var(--border); } .ved-table tbody tr:nth-child(even) { background: var(--bg-sunken); } .ved-table td:not(:first-child) { font-variant-numeric: tabular-nums; } .ved-disclaimer { margin-top: 8px; padding: 14px 16px; background: var(--bg-sunken); border-radius: var(--radius-m); color: var(--text-soft); font-size: .9rem; line-height: 1.6; } @media (max-width: 620px) { .ved-form, .ved-result { padding: 22px 18px; } .ved-segment label { padding: 10px 4px; font-size: .82rem; } .ved-amount { font-size: 2.1rem; } .ved-table { font-size: .88rem; } .ved-table th, .ved-table td { padding: 8px 8px; } } /* ---- ULEZ / Clean Air Zone checker ---------------------------------------- */ .caz-wrap { max-width: 720px; margin: 0 auto; } .caz-form { padding: 26px 28px; } .caz-row { margin-bottom: 18px; } .caz-row[hidden] { display: none; } .caz-label { display: block; font-weight: 600; margin-bottom: 7px; } .caz-select, .caz-input { padding: 12px 14px; font-size: 1rem; color: var(--text); background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-m); } .caz-select { width: 100%; } .caz-select:focus, .caz-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); } .caz-date-fields { display: flex; gap: 10px; } .caz-date-fields .caz-select { flex: 1 1 auto; } .caz-date-fields .caz-input { flex: 0 0 130px; width: 130px; } .caz-hint { display: block; margin-top: 6px; font-size: .85rem; color: var(--text-soft); } /* Result card. */ .caz-result { margin-top: 22px; padding: 26px 28px; } .caz-verdict { padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius-m); margin-bottom: 18px; } .caz-verdict strong { display: block; font: 700 1.3rem/1.2 var(--font-head); margin-bottom: 6px; } .caz-verdict span { display: block; color: var(--text-soft); line-height: 1.55; } .caz-verdict .caz-euro { margin-top: 10px; font-size: .82rem; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .03em; } .caz-verdict.caz-good { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 30%, transparent); } .caz-verdict.caz-warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); } .caz-verdict.caz-bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 30%, transparent); } .caz-verdict.caz-good strong { color: var(--good); } .caz-verdict.caz-warn strong { color: var(--warn); } .caz-verdict.caz-bad strong { color: var(--bad); } .caz-basis { margin: 0 0 20px; color: var(--text-soft); line-height: 1.6; } .caz-zones-head { font-size: 1rem; margin: 0 0 12px; } .caz-zones { list-style: none; margin: 0 0 18px; padding: 0; } .caz-zone { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 16px; border: 1px solid var(--border-soft); border-radius: var(--radius-m); margin-bottom: 8px; } .caz-zone-main { display: flex; flex-direction: column; gap: 2px; } .caz-zone-name { font-weight: 600; } .caz-zone-area { font-size: .85rem; color: var(--text-soft); } .caz-zone-charge { font-weight: 700; white-space: nowrap; padding: 4px 12px; border-radius: 999px; font-size: .9rem; } .caz-zone-clear .caz-zone-charge { background: var(--good-soft); color: var(--good); } .caz-zone-charged .caz-zone-charge { background: var(--bad-soft); color: var(--bad); } .caz-note { margin: 0 0 12px; color: var(--text-soft); font-size: .95rem; line-height: 1.6; } .caz-source { margin: 14px 0 0; font-size: .82rem; color: var(--text-soft); } .caz-upsell { margin-top: 22px; padding: 18px 20px; background: var(--bg-sunken); border-radius: var(--radius-m); } .caz-upsell p { margin: 0 0 12px; } /* Reference tables reuse the VED table look. */ .caz-table { width: 100%; border-collapse: collapse; margin: 16px 0 14px; font-size: .95rem; } .caz-table caption { text-align: left; font-weight: 600; color: var(--text-soft); font-size: .85rem; padding-bottom: 8px; } .caz-table th, .caz-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-soft); } .caz-table thead th { font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-soft); border-bottom: 2px solid var(--border); } .caz-table tbody tr:nth-child(even) { background: var(--bg-sunken); } .caz-disclaimer { margin-top: 8px; padding: 14px 16px; background: var(--bg-sunken); border-radius: var(--radius-m); color: var(--text-soft); font-size: .9rem; line-height: 1.6; } @media (max-width: 620px) { .caz-form, .caz-result { padding: 22px 18px; } .caz-date-fields { flex-direction: column; } .caz-date-fields .caz-input { flex-basis: auto; width: 100%; } .caz-zone { flex-direction: column; align-items: flex-start; gap: 8px; } .caz-table { font-size: .88rem; } .caz-table th, .caz-table td { padding: 8px 8px; } } /* Car finance calculator - reuses the .ved-* form/result/table styling. */ .fin-segment { grid-template-columns: repeat(2, 1fr); } .fin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .fin-grid .ved-row { margin-bottom: 18px; } .fin-grid .ved-input { max-width: none; } .ved-opt { font-weight: 400; color: var(--text-soft); font-size: .85rem; } .ved-line-label.fin-strong { color: var(--accent); } .fin-balloon[hidden] { display: none; } @media (max-width: 620px) { .fin-grid { grid-template-columns: 1fr; gap: 0; } .fin-segment label { padding: 10px 6px; font-size: .82rem; } } /* Car depreciation calculator - reuses the .ved-* form/result/table styling. */ .dep-advanced { margin-top: 4px; } .dep-advanced summary { cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--accent); padding: 4px 0; list-style: none; } .dep-advanced summary::-webkit-details-marker { display: none; } .dep-advanced summary::before { content: "+ "; } .dep-advanced[open] summary::before { content: "\2013 "; } .dep-advanced[open] { padding-bottom: 4px; } .dep-advanced .fin-grid { margin-top: 14px; } .dep-schedule { margin: 22px 0 6px; } .dep-schedule td:last-child { color: var(--bad); } /* --- Total cost of ownership: ranked breakdown bars --------------------------------------------------------- */ .tco-bars { display: grid; gap: 10px; margin: 4px 0 20px; } .tco-bar-row { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 12px; } .tco-bar-label { font-size: .9rem; font-weight: 600; color: var(--text); } .tco-bar-track { height: 12px; border-radius: 6px; background: var(--bg-raised); overflow: hidden; } .tco-bar-fill { display: block; height: 100%; border-radius: 6px; min-width: 3px; transition: width .5s ease; } .tco-fill-depreciation { background: var(--bad); } .tco-fill-fuel { background: var(--accent); } .tco-fill-insurance { background: var(--warn); } .tco-fill-servicing { background: color-mix(in srgb, var(--accent) 55%, var(--good)); } .tco-fill-tax { background: var(--good); } .tco-bar-val { font-size: .9rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .tco-bar-val small { font-weight: 500; color: var(--text-faint); margin-left: 3px; } @media (max-width: 560px) { .tco-bar-row { grid-template-columns: 1fr auto; column-gap: 10px; row-gap: 4px; } .tco-bar-track { grid-column: 1 / -1; order: 3; } } /* --- How it works: numbered flow + "not covered" list ------------------------------------------------------- */ .flow { list-style: none; counter-reset: flow; max-width: 760px; margin: 0 auto; padding: 0; display: grid; gap: 16px; } .flow-step { position: relative; padding: 22px 24px 22px 74px; background: var(--bg-raised); border: 1px solid var(--border-soft); border-radius: var(--radius-l); box-shadow: var(--shadow-s); } .flow-step::before { counter-increment: flow; content: counter(flow); position: absolute; left: 22px; top: 22px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 800 1.05rem/1 var(--font-head); } .flow-step h3 { margin: 2px 0 6px; } .flow-step p { margin: 0; color: var(--text-soft); font-size: .96rem; } /* Red-cross variant of the tick list, for the "what we don't cover" column. */ .compare-list-x li::before { border: 0; transform: none; left: 3px; top: 8px; width: auto; height: auto; content: "\00d7"; color: var(--bad); font: 700 1.15rem/1 var(--font-head); } .compare-note { color: var(--text-faint); font-size: .9rem; margin: 2px 0 0; } @media (max-width: 520px) { .flow-step { padding: 20px 20px 20px 20px; } .flow-step::before { position: static; margin-bottom: 12px; } .flow-step h3 { margin-top: 0; } } /* ============================================================================ HOMEPAGE - product hero, trust bar, closing CTA (batch 2) ============================================================================ */ .hero-home { text-align: left; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(30px, 5vw, 68px); align-items: center; } .hero-home h1 { max-width: 15ch; margin-inline: 0; } .hero-home .lede { margin-inline: 0; } .hero-home .plate-form { align-items: flex-start; } .hero-home .hero-trust { justify-content: flex-start; margin-top: 26px; } /* Floating report-preview card - decorative, pure CSS. */ .hero-preview { position: relative; } .hero-preview::before { content: ""; position: absolute; inset: 6% 8%; z-index: -1; background: var(--grad-brand); filter: blur(48px); opacity: .32; border-radius: 50%; } /* Keyframes reset the whole transform, so they must re-state the element's rotation - set --r on anything rotated that also floats. */ @keyframes float { 0%, 100% { transform: rotate(var(--r, 0deg)) translateY(0); } 50% { transform: rotate(var(--r, 0deg)) translateY(-10px); } } /* Hero fan - three REAL screenshots of the sample report, spread like a hand of cards (carVertical-style). The images are light-theme report captures, so they read as white documents on both site themes. */ .hero-shots { position: relative; height: 500px; } .hero-shots .shot { position: absolute; width: min(452px, 96%); height: auto; border-radius: 14px; border: 1px solid rgba(15, 22, 38, .10); background: #fff; box-shadow: 0 34px 64px -26px rgba(8, 13, 26, .5), 0 8px 22px -12px rgba(8, 13, 26, .28); } /* Page-load choreography: the three report cards deal into the fan (back, mid, front last), then the float takes over. Transform-only (no fade) so the LCP image paints immediately; float delays start AFTER the deal finishes because a running animation later in the list overrides the deal's forwards fill. Reduced-motion is covered by the global animation:none block. */ @keyframes deal { from { transform: rotate(calc(var(--r, 0deg) + 5deg)) translateY(36px) scale(.985); } to { transform: rotate(var(--r, 0deg)) translateY(0) scale(1); } } .hero-shots .shot-back { top: 4px; right: 0; --r: 3.5deg; transform: rotate(var(--r)); animation: deal .7s var(--ease-out) backwards; } .hero-shots .shot-mid { top: 150px; left: 0; --r: -4deg; transform: rotate(var(--r)); animation: deal .7s var(--ease-out) .14s backwards, float 9s ease-in-out 2s infinite; } .hero-shots .shot-front { top: 320px; right: 8px; --r: 1.5deg; transform: rotate(var(--r)); animation: deal .7s var(--ease-out) .28s backwards, float 7s ease-in-out 1.2s infinite; } @media (max-width: 940px) { .hero-shots { max-width: 480px; margin-inline: auto; } } /* Hero CTA row: paid primary + free secondary. The free button is JS-driven, so it only appears when JS is on (html.js set pre-paint in header). */ .hero-cta-row { display: flex; gap: 10px; flex-wrap: wrap; } #hero-free-btn { display: none; } .js #hero-free-btn { display: inline-flex; } /* Live free-check result card in the hero (built by app.js, XSS-safe DOM). */ .hero-check { margin-top: 18px; padding: 18px 20px; max-width: 460px; background: var(--grad-surface), var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow-m); } .hero-check-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .hero-check-veh { color: var(--text-soft); font-size: .92rem; font-weight: 600; } .hero-check-chip { display: inline-block; padding: 6px 12px; border-radius: var(--radius-pill); font-size: .84rem; font-weight: 700; margin-bottom: 8px; } .hero-check-chip.is-good { background: var(--good-soft); color: var(--good); } .hero-check-chip.is-bad { background: var(--bad-soft); color: var(--bad); } .hero-check-title { font-weight: 700; margin: 0 0 4px; } .hero-check-text { color: var(--text-soft); font-size: .92rem; margin: 0 0 12px; line-height: 1.55; } .hero-check form { margin: 2px 0 10px; } .hero-check-fine { color: var(--text-faint); font-size: .8rem; margin: 0; line-height: 1.5; } /* Honest numbers strip under the data-sources band. */ .fact-strip { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 34px; margin: 18px 0 0; padding: 0; color: var(--text-soft); font-size: .92rem; } .fact-strip strong { font-family: var(--font-mono); color: var(--text); font-size: 1rem; } /* Scroll-linked report walkthrough: captions left, sticky frame right that crossfades between REAL report screenshots as each step passes the middle of the viewport. Mobile gets the inline image per step instead. */ .walk { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; } .walk-steps { display: flex; flex-direction: column; gap: clamp(90px, 16vh, 150px); padding-block: 40px; } .walk-step { padding-left: 20px; border-left: 3px solid var(--border-soft); opacity: .45; transition: opacity .3s, border-color .3s; } .walk-step.is-active { opacity: 1; border-color: var(--accent); } .walk-step h3 { font-size: 1.25rem; margin-bottom: 8px; } .walk-step p { color: var(--text-soft); line-height: 1.65; margin: 0; } /* Inline (per-step) images are mobile-only. !important because the generic .ill-on-* theme toggles (0-2-0, later in file) would otherwise re-show the dark variant on desktop. The mobile rules below re-enable exactly one. */ .walk-inline { display: none !important; } .walk-frame { position: sticky; top: calc(var(--header-h) + 48px); min-height: 480px; } .walk-img { position: absolute; top: 0; left: 0; width: 100%; height: auto; border-radius: 12px; border: 1px solid rgba(15, 22, 38, .10); background: #fff; box-shadow: 0 30px 58px -24px rgba(8, 13, 26, .45); opacity: 0; transition: opacity .35s var(--ease); } .walk-img.is-active { opacity: 1; } .shot-cta { text-align: center; margin: 30px 0 0; } /* Editorial pull-stat: one oversized serif figure between the walkthrough and the steps - a type-only magazine beat framed by hairline rules. The figure is the DVSA's published first-time MOT failure rate; keep it real. */ .section.pull-stat-band { padding-block: clamp(12px, 2vw, 22px); } .pull-stat { max-width: 640px; margin-inline: auto; padding: clamp(30px, 4.5vw, 46px) 20px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: center; } .pull-stat-num { font-family: var(--font-display); font-weight: 600; font-size: clamp(4rem, 9vw, 6.4rem); line-height: 1; letter-spacing: -.02em; color: var(--text); margin: 0; } .pull-stat-num span { font-style: italic; font-weight: 500; font-size: .36em; margin-inline: .22em; vertical-align: .16em; color: var(--text-soft); } .pull-stat-line { font-size: 1.18rem; color: var(--text-soft); margin: 12px 0 0; } .pull-stat-src { font-family: var(--font-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; color: var(--text-faint); margin: 16px 0 0; } @media (max-width: 900px) { .walk { display: block; } .walk-frame { display: none; } .walk-steps { gap: 0; padding: 0; } .walk-step { opacity: 1; border-left: 0; padding-left: 0; margin-bottom: 40px; } html:not([data-theme="dark"]) .walk-inline.ill-on-light { display: block !important; } [data-theme="dark"] .walk-inline.ill-on-dark { display: block !important; } .walk-inline { width: 100%; height: auto; margin-top: 14px; border-radius: 12px; border: 1px solid rgba(15, 22, 38, .10); background: #fff; box-shadow: var(--shadow-m); } } /* Trust bar - honest, factual confidence strip. Needs its own top margin: it follows the hero grid, whose height is set by the TALLER column - when the copy column wins (narrower viewports), the last trust line would otherwise touch this bar (0px gap). */ .trust-bar { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 38px; gap: 1px; background: var(--border-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-s); } .trust-item { background: var(--bg-raised); padding: 24px 20px; text-align: center; } /* Chunky illustrated markers (swiftreg-style): brand yellow/white objects, no backdrop. Each ships TWO renditions - .ill-on-light (navy ink outlines) and .ill-on-dark (clean rimless fills; slate #9aa7bf auxiliary linework) - toggled by theme below. Draw new ones as a pair. */ .trust-item .trust-ill { display: inline-block; width: 90px; height: 90px; margin-bottom: 10px; filter: drop-shadow(0 10px 14px rgba(15, 22, 38, .18)); } /* Anything themed ships a light AND a dark rendition; the theme picks one. Used by the illustrations AND the real report screenshots (hero fan + walkthrough) so dark mode shows dark-theme captures. */ .ill-on-dark { display: none; } [data-theme="dark"] .ill-on-light { display: none; } [data-theme="dark"] .ill-on-dark { display: inline; } /* Dark screenshot variants need dark frames, not the white-paper treatment. */ .shot.ill-on-dark, .walk-img.ill-on-dark, .walk-inline.ill-on-dark { background: #10141d; border-color: rgba(255, 255, 255, .09); } .trust-item .tv { font: 800 clamp(1.3rem, 2.4vw, 1.7rem)/1 var(--font-head); letter-spacing: -.02em; } .trust-item .tl { color: var(--text-soft); font-size: .86rem; margin-top: 8px; line-height: 1.45; } /* Bento - asymmetric "what's in a report" layout. */ .section-head-left { text-align: left; max-width: 640px; margin-inline: 0; } .section-head-left .eyebrow { margin-inline: 0; } .report-bento { display: grid; grid-template-columns: 1.12fr 1fr; gap: 18px; } .bento-card { display: flex; flex-direction: column; background: var(--grad-surface), var(--bg-raised); border: 1px solid var(--border-soft); border-radius: var(--radius-l); padding: 28px; box-shadow: var(--shadow-s); transition: transform .28s var(--ease-out), box-shadow .28s, border-color .28s; } .bento-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: var(--accent-line); } .bento-card .bento-ill { display: inline-block; width: 70px; height: 70px; margin-bottom: 14px; filter: drop-shadow(0 8px 12px rgba(15, 22, 38, .15)); } /* The spans size the illustrations; the inner svgs (both theme variants) just fill them. NO display property here - it would out-specificity the .ill-on-light/.ill-on-dark visibility toggles and show both variants. */ .trust-ill svg, .bento-ill svg { width: 100%; height: 100%; } .bento-card h3 { margin-bottom: 8px; } .bento-card > p { color: var(--text-soft); font-size: .96rem; line-height: 1.6; margin: 0; } .bento-feature { grid-row: span 2; } .bento-feature h3 { font-size: 1.3rem; } .bento-aside { margin: 18px 0 0; padding-left: 15px; border-left: 2px solid var(--accent-line); color: var(--text-faint); font-size: .92rem; line-height: 1.62; } .bento-included { margin-top: auto; padding-top: 24px; border-top: 1px solid var(--border-soft); } .bento-included-label { display: block; margin-bottom: 15px; font: 600 .72rem/1 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--text-faint); } .bento-checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; } .bento-checklist li { position: relative; padding-left: 26px; font-size: .92rem; font-weight: 500; color: var(--text-soft); } .bento-checklist li::before { content: ""; position: absolute; left: 0; top: 1px; width: 17px; height: 17px; background: var(--good); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; } /* Mini mileage chart - same idiom as the real report's chart (accent line + gradient area, flagged reading in red) so the card previews the product. */ .bento-chart { margin-top: auto; padding: 14px 14px 8px; background: var(--bg-sunken); border: 1px solid var(--border-soft); border-radius: var(--radius-m); } .bento-chart svg { display: block; width: 100%; height: auto; } .bento-card > p + .bento-chart { margin-top: 18px; } .bento-link { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; margin-top: 18px; font-weight: 600; font-size: .93rem; color: var(--accent); text-decoration: none; } .bento-link span { transition: transform .2s var(--ease-out); } .bento-link:hover span { transform: translateX(3px); } .bento-link:hover { text-decoration: underline; } @media (max-width: 820px) { .report-bento { grid-template-columns: 1fr; } .bento-feature { grid-row: auto; } } @media (max-width: 480px) { .bento-checklist { grid-template-columns: 1fr; } } /* Honest "data sources" trust strip. */ .data-sources { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 30px 24px; border-block: 1px solid var(--border-soft); } .data-sources-label { font: 600 .72rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); } .data-sources-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; margin: 0; padding: 0; list-style: none; } .data-sources-list li { position: relative; font: 600 1.02rem/1 var(--font-head); letter-spacing: -.01em; color: var(--text-soft); opacity: .9; } .data-sources-list li + li::before { content: ""; position: absolute; left: -20px; top: 50%; width: 4px; height: 4px; transform: translateY(-50%); border-radius: 50%; background: var(--border-strong); } @media (max-width: 620px) { .data-sources-list { gap: 10px 22px; } .data-sources-list li { font-size: .9rem; } .data-sources-list li + li::before { left: -13px; } } /* Closing CTA panel. */ .cta-panel { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 56px); border-radius: var(--radius-xl); border: 1px solid var(--border); background: var(--grad-surface), var(--bg-raised); box-shadow: var(--shadow-l); } .cta-panel::before { content: ""; position: absolute; left: 50%; top: -40%; width: 720px; height: 480px; transform: translateX(-50%); z-index: -1; background: radial-gradient(42% 60% at 40% 40%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%), radial-gradient(40% 55% at 66% 30%, color-mix(in srgb, var(--accent-2) 22%, transparent), transparent 68%); filter: blur(20px); } .cta-panel h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin-bottom: 10px; } .cta-panel .price-line { margin: 6px 0 14px; } .cta-panel > p { max-width: 560px; margin: 0 auto 26px; color: var(--text-soft); } .cta-panel-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } @media (max-width: 480px) { .cta-panel-actions { flex-direction: column; } .cta-panel-actions .btn { width: 100%; } } @media (max-width: 940px) { .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; } .hero-preview { max-width: 420px; margin-inline: auto; } } @media (max-width: 820px) { .trust-bar { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .hero-home { text-align: center; } .hero-home h1 { margin-inline: auto; } .hero-home .lede { margin-inline: auto; } .hero-home .plate-form { align-items: center; } .hero-home .hero-trust { justify-content: center; } .hero-preview { display: none; } .trust-bar { grid-template-columns: 1fr 1fr; } } /* ============================================================================ CALCULATOR & TOOL CARD POLISH (batch 4) ============================================================================ */ /* Form/result panels are .card, but shouldn't lift on hover like a link card. */ .ved-form, .ved-result, .caz-form, .caz-result, .free-check-result { box-shadow: var(--shadow-m); } .ved-form:hover, .ved-result:hover, .caz-form:hover, .caz-result:hover, .free-check-result:hover { transform: none; box-shadow: var(--shadow-m); border-color: var(--border); } /* Segmented control - selected pill gets an accent ring + surface sheen. */ .ved-segment input:checked + label { background: var(--grad-surface), var(--bg-raised); color: var(--accent); box-shadow: var(--shadow-s), inset 0 0 0 1px var(--accent-line); } /* Result headline + badge. */ .ved-amount { letter-spacing: -.03em; } .ved-badge, .caz-verdict .caz-euro-badge { background: var(--grad-brand); color: var(--accent-ink); } /* Free-tool result status pills read a little bolder now. */ .fc-status { box-shadow: var(--shadow-s); } .fc-plate { box-shadow: var(--shadow-s), inset 0 1px 0 rgba(255, 255, 255, .45); } /* ============================================================================ PHASE 2 - app surfaces, pricing, 404, order (batch 7-9) ============================================================================ */ /* Highlighted accent card (account credit, featured cards). */ .card-accent { border-color: var(--accent-line); box-shadow: var(--shadow-m); overflow: hidden; } .card-accent:hover { transform: none; border-color: var(--accent-line); box-shadow: var(--shadow-m); } .card-accent::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad-brand); } /* App page header (dashboard/account). */ .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 30px; } .page-head h1 { margin-bottom: 4px; } .page-head .sub { color: var(--text-soft); margin: 0; } .page-head-actions { display: flex; gap: 10px; flex-wrap: wrap; } /* Empty state. */ .empty-state { text-align: center; padding: clamp(48px, 8vw, 80px) 30px; } .empty-state .feature-icon { width: 62px; height: 62px; margin: 0 auto 20px; border-radius: var(--radius-l); } .empty-state h2 { font-size: 1.4rem; } .empty-state p { color: var(--text-soft); max-width: 440px; margin: 0 auto 24px; } /* Multi-check reg list + live summary. */ textarea.reg-textarea { padding: 14px 16px; border-radius: var(--radius-m); font: 600 1.06rem/1.9 var(--font-plate); letter-spacing: .08em; text-transform: uppercase; min-height: 150px; } textarea.reg-textarea::placeholder { color: var(--text-faint); letter-spacing: .06em; } .multi-summary { transition: color .15s; font-weight: 500; } .multi-summary.has-invalid { color: var(--warn); font-weight: 600; } /* ---- Pricing panel ---- */ .pricing-wrap { max-width: 540px; margin: 0 auto; } .pricing-panel { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding: clamp(38px, 5vw, 56px) clamp(28px, 4vw, 46px); border-radius: var(--radius-xl); border: 1px solid var(--accent-line); background: var(--grad-surface), var(--bg-raised); box-shadow: var(--shadow-l); } .pricing-panel::before { content: ""; position: absolute; left: 50%; top: -50%; width: 620px; height: 460px; transform: translateX(-50%); z-index: -1; background: radial-gradient(42% 60% at 42% 42%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%), radial-gradient(40% 55% at 64% 30%, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 68%); filter: blur(22px); } .pricing-badge { display: inline-block; padding: 5px 14px; border-radius: var(--radius-pill); background: var(--grad-brand); color: var(--accent-ink); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 18px; } .pricing-price { display: inline-flex; align-items: flex-start; gap: 4px; font-family: var(--font-head); line-height: 1; letter-spacing: -.03em; margin-bottom: 6px; } .pricing-price .cur { font-size: 1.8rem; font-weight: 700; margin-top: 8px; color: var(--text-soft); } .pricing-price .num { font-size: clamp(3.4rem, 8vw, 4.6rem); font-weight: 800; } .pricing-price .per { align-self: flex-end; margin-bottom: 12px; color: var(--text-faint); font-size: 1rem; font-weight: 500; } .pricing-sub { color: var(--text-soft); margin-bottom: 28px; } .pricing-features { text-align: left; margin: 0 auto 28px; padding: 0; list-style: none; max-width: 350px; } .pricing-features li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; color: var(--text-soft); border-bottom: 1px solid var(--border-soft); } .pricing-features li:last-child { border-bottom: 0; } .pricing-features svg { flex: none; margin-top: 3px; color: var(--good); } /* ---- 404 / error page ---- */ .err-page { position: relative; isolation: isolate; text-align: center; padding: clamp(72px, 12vw, 150px) 0; overflow: hidden; } .err-page::before { content: ""; position: absolute; left: 50%; top: 10%; width: 700px; height: 460px; transform: translateX(-50%); z-index: -1; background: radial-gradient(45% 55% at 50% 40%, var(--accent-soft), transparent 70%); filter: blur(10px); } /* The 404 as a UK plate - the one page a vehicle-history site should never render generically. Same tokens as the real plate inputs; the slight tilt echoes the illustration language. */ .err-plate { display: inline-flex; align-items: stretch; border-radius: var(--radius-m); overflow: hidden; margin-bottom: 30px; transform: rotate(-2.5deg); box-shadow: var(--shadow-l), inset 0 0 0 2px rgba(0, 0, 0, .3), 0 24px 50px -28px color-mix(in srgb, var(--plate-yellow) 60%, transparent); } .err-plate-band { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 62px; background: var(--plate-blue); color: #fff; font: 700 1rem/1 var(--font-head); } .err-plate-band svg { width: 26px; height: 26px; } .err-plate-num { display: block; background: linear-gradient(180deg, var(--plate-yellow-2), var(--plate-yellow)); color: var(--plate-black); font: 800 clamp(3.6rem, 13vw, 6.2rem)/1 var(--font-plate); letter-spacing: .08em; padding: 20px 42px 16px; } .err-page h1 { margin-bottom: 12px; } .err-page p { color: var(--text-soft); max-width: 440px; margin: 0 auto 28px; } .err-links { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* ---- Order status ---- */ .order-status { display: inline-flex; align-items: center; gap: 9px; } .pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 0 color-mix(in srgb, var(--warn) 60%, transparent); animation: pulse 1.8s var(--ease) infinite; } /* Post-payment progress: the three real stages of an order. States come from the server; the page's own refresh advances them. */ .order-steps { display: flex; align-items: flex-start; gap: 8px; max-width: 640px; margin: 26px 0 20px; } .order-step { display: flex; flex-direction: column; align-items: center; gap: 9px; flex: 0 0 auto; width: min(112px, 27vw); text-align: center; } .os-dot { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--bg-raised); color: transparent; position: relative; } .os-dot svg { width: 16px; height: 16px; } .order-step.done .os-dot { background: var(--good); border-color: var(--good); color: #fff; } .order-step.active .os-dot { border-color: var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); animation: os-pulse 1.8s var(--ease) infinite; } .order-step.active .os-dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); } @keyframes os-pulse { to { box-shadow: 0 0 0 12px transparent; } } .os-label { font-family: var(--font-mono); font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); } .order-step.done .os-label { color: var(--text-soft); } .order-step.active .os-label { color: var(--accent); } .os-rail { flex: 1 1 auto; min-width: 18px; height: 2px; border-radius: 2px; background: var(--border); margin-top: 17px; } .os-rail.done { background: var(--grad-brand); } .order-open { margin: 6px 0 4px; } /* Multi-check: live plate chips under the textarea - valid regs become mini-plates as they're typed, invalid ones show as red chips. */ .multi-plates { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .multi-plates:empty { display: none; } .multi-chip-bad { display: inline-block; padding: 3px 11px; border-radius: 5px; background: var(--bad-soft); border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent); color: var(--bad); font: 700 .95rem/1.5 var(--font-plate); letter-spacing: .05em; white-space: nowrap; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warn) 55%, transparent); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } @media (prefers-reduced-motion: reduce) { .pulse-dot { animation: none; } } /* ============================================================================ GLOBAL FINISHING TOUCHES (batch 10) ============================================================================ */ ::selection { background: color-mix(in srgb, var(--accent) 32%, transparent); color: var(--text); } /* --- View transitions (progressive enhancement) --------------------------------------- Cross-document: a fast crossfade between page navigations. Same-document: the theme toggle runs a circular reveal from the button (app.js adds .theme-ripple for the duration so these overrides never touch navigation transitions). Unsupported browsers ignore all of it. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; } .theme-ripple::view-transition-image-pair(root) { isolation: auto; } .theme-ripple::view-transition-old(root), .theme-ripple::view-transition-new(root) { animation: none; mix-blend-mode: normal; display: block; } .theme-ripple::view-transition-new(root) { z-index: 1; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } html { scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; } ::-webkit-scrollbar { width: 13px; height: 13px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); border: 3px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--text-faint); } /* Consistent focus ring across interactive controls. */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ============================================================================ REPORT DATA-VIZ (batch 11) ============================================================================ */ /* "X of Y checks clear" tally above the audit grid. */ .audit-tally { display: flex; align-items: center; gap: 18px; padding: 18px 22px; margin-bottom: 18px; background: var(--grad-surface), var(--bg-raised); border: 1px solid var(--border-soft); border-radius: var(--radius-l); box-shadow: var(--shadow-s); } .audit-tally-count { font: 800 2.1rem/1 var(--font-head); letter-spacing: -.03em; color: var(--good); white-space: nowrap; } .audit-tally-count small { font-size: 1.1rem; font-weight: 700; color: var(--text-faint); } .audit-tally-body { flex: 1; min-width: 0; } .audit-tally-body strong { display: block; font-family: var(--font-head); font-size: 1rem; margin-bottom: 8px; } .audit-tally-bar { height: 8px; border-radius: var(--radius-pill); background: var(--bg-sunken); overflow: hidden; } .audit-tally-bar span { display: block; height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--good), color-mix(in srgb, var(--good) 60%, var(--accent-2))); transition: width .8s var(--ease-out); } /* Mileage-over-time area chart. */ .mileage-chart-wrap { padding-bottom: 8px; } .mileage-chart { display: block; width: 100%; height: 200px; overflow: visible; } .mileage-chart circle { transition: r .15s var(--ease); } .mileage-chart-axis { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; padding: 0 2px; font-size: .8rem; color: var(--text-faint); } .mileage-chart-peak { font-weight: 700; color: var(--text-soft); font-variant-numeric: tabular-nums; } /* Motion: draw the mileage line + fill the tally bar when they scroll into view. All effects are additive - if JS/anim never runs, content shows in full. */ .js .mileage-chart-wrap.in .mileage-chart polyline { stroke-dasharray: 1600; animation: mileageDraw 1.4s var(--ease-out) .1s both; } @keyframes mileageDraw { from { stroke-dashoffset: 1600; } to { stroke-dashoffset: 0; } } .js .mileage-chart-wrap.in .mileage-chart path { animation: fadeIn 1.1s ease .4s both; } .js .mileage-chart-wrap.in .mileage-chart circle { opacity: 0; transform-box: fill-box; transform-origin: center; animation: dotPop .45s var(--ease-spring) 1s forwards; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes dotPop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } } .audit-tally-bar span { transform-origin: left; } .js .audit-tally.in .audit-tally-bar span { animation: barGrow 1s var(--ease-out) .15s backwards; } @keyframes barGrow { from { transform: scaleX(0); } } @media (prefers-reduced-motion: reduce) { .js .mileage-chart-wrap.in .mileage-chart polyline, .js .mileage-chart-wrap.in .mileage-chart path, .js .mileage-chart-wrap.in .mileage-chart circle, .js .audit-tally.in .audit-tally-bar span { animation: none; opacity: 1; transform: none; } } /* Never let reveal-in-progress hide report content on print. */ @media print { .js [data-reveal] { opacity: 1 !important; transform: none !important; } .mileage-chart polyline { stroke-dashoffset: 0 !important; } } /* ============================================================================ EDITORIAL TYPE - monospace for metadata/labels + grain texture (batch 16) ============================================================================ */ /* The 'utility voice': short labels, table headers, breadcrumbs, badges, counts and dates in monospace, contrasting the serif display + sans body. */ .stat-cell .k, table.data th, .ved-table thead th, .caz-table thead th, .footer-col h3, .guide-card-meta, .article-meta, .crumbs, .badge, .tool-free, .caz-verdict .caz-euro, .region-tag-count, .fc-facts dt, .spec-group h3, .mileage-chart-axis, .audit-tally-count, .sample-tag, .pricing-badge { font-family: var(--font-mono); font-feature-settings: "tnum" 1; } /* Mono runs a touch wider - ease off the tracking on these labels. */ .stat-cell .k, table.data th, .ved-table thead th, .caz-table thead th, .footer-col h3, .fc-facts dt, .spec-group h3 { letter-spacing: .02em; } .badge, .tool-free, .pricing-badge, .sample-tag { letter-spacing: .04em; } /* ============================================================================ HEADER MEGA-MENU / DROPDOWNS (batch 17) ============================================================================ */ .nav-item { position: relative; display: flex; } .nav-menu { position: absolute; top: calc(100% + 12px); left: 0; z-index: 60; padding: 10px; background: color-mix(in srgb, var(--bg-raised) 97%, transparent); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow-l); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s var(--ease), transform .22s var(--ease-out), visibility .22s; pointer-events: none; } /* invisible bridge so the pointer can cross the gap without closing */ .nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } .nav-item:hover > .nav-menu, .nav-item:focus-within > .nav-menu, .nav-item.open > .nav-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .nav-menu.mega { left: 50%; transform: translateX(-50%) translateY(8px); width: min(720px, calc(100vw - 32px)); } .nav-item:hover > .nav-menu.mega, .nav-item:focus-within > .nav-menu.mega, .nav-item.open > .nav-menu.mega { transform: translateX(-50%) translateY(0); } .mega-grid { display: grid; grid-template-columns: 1fr 1fr .92fr; gap: 4px 8px; } .mega-col { display: flex; flex-direction: column; } .mega-heading { font: 600 .68rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); margin: 8px 12px 6px; } .menu-list { display: flex; flex-direction: column; gap: 2px; min-width: 320px; } .menu-list-plain { min-width: 210px; } .mega-link, .menu-link { display: flex; gap: 12px; align-items: center; padding: 9px 12px; border-radius: var(--radius-m); color: var(--text); transition: background .15s; } .mega-link:hover, .menu-link:hover { background: var(--accent-soft); text-decoration: none; } .menu-ic { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--bg-sunken); border: 1px solid var(--border-soft); color: var(--accent); transition: background .15s, border-color .15s, color .15s; } .mega-link:hover .menu-ic, .menu-link:hover .menu-ic { background: var(--grad-brand); border-color: transparent; color: #fff; } .menu-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .menu-tx strong { font: 600 .9rem/1.25 var(--font-body); color: var(--text); letter-spacing: -.01em; } .menu-tx small { font-size: .78rem; color: var(--text-soft); line-height: 1.3; } .menu-link-sm { padding: 11px 14px; font: 500 .92rem/1 var(--font-body); } .menu-all { display: flex; align-items: center; gap: 6px; margin-top: 4px; padding: 11px 14px; border-top: 1px solid var(--border-soft); color: var(--accent); font-weight: 600; font-size: .88rem; transition: gap .2s var(--ease); } .menu-all:hover { text-decoration: none; gap: 10px; } .mega-feature { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 20px; border-radius: var(--radius-m); background: radial-gradient(130% 100% at 100% 0%, var(--accent-soft), transparent 62%), var(--bg-sunken); border: 1px solid var(--accent-line); color: var(--text); transition: border-color .18s, transform .18s var(--ease-out); } .mega-feature:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-2px); } .mega-feature-tag { align-self: flex-start; font: 600 .66rem/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--accent-ink); background: var(--grad-brand); padding: 5px 10px; border-radius: 99px; } .mega-feature strong { font: 600 1.1rem/1.2 var(--font-display); } .mega-feature small { color: var(--text-soft); font-size: .84rem; line-height: 1.45; } .mega-feature-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; color: var(--accent); font-weight: 600; font-size: .86rem; } /* Mobile: dropdowns become in-flow accordions inside the drawer. */ @media (max-width: 1024px) { .nav-item { display: block; width: 100%; position: static; } .nav-trigger { width: 100%; justify-content: space-between; padding: 13px 16px; font-size: 1rem; border-radius: var(--radius-m); } .nav-menu { position: static; display: none; opacity: 1; visibility: visible; transform: none; pointer-events: auto; width: auto; min-width: 0; padding: 2px 0 8px 10px; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; box-shadow: none; } .nav-menu::before { display: none; } .nav-item.open > .nav-menu { display: block; } .nav-menu.mega { left: auto; transform: none; } .mega-grid { grid-template-columns: 1fr; gap: 0; } .mega-heading { margin: 10px 12px 4px; } .mega-feature { display: none; } .menu-list { min-width: 0; } .menu-ic { width: 34px; height: 34px; } }