/* ============================================================
BattMobility Short Lease — B2C stylesheet (Calm Mobility)
------------------------------------------------------------
Gebaseerd op het BattMobility Design System v05 (juni 2026),
toegepast met het B2B-palet "Fleet Forward" uit het brand book
(sectie 3.3): B2B Key #4F8459, Future Blue accent, Urban Mist,
Eco Horizon en Transit Sand voor datagedreven componenten.
Regels die ongewijzigd gelden: Inter, radii 10/20/999,
spacing 0/5/20/40/60/80/100, secties 80/40, geen schaduwen
behalve de navigatiepil, knoppen met merk-pijl.
============================================================ */
/* ============================================================
Inter, zelf gehost
------------------------------------------------------------
Stond eerder op fonts.googleapis.com. Twee redenen om het weg te halen:
het IP-adres van elke bezoeker ging naar Google voordat de cookiebanner
zelfs getekend was (en er was geen manier om dat te weigeren), en het
kostte twee DNS-lookups plus twee TLS-handshakes naar een ander domein.
Het is één variabel bestand voor alle gewichten, daarom font-weight
100 900. De twee subsets met hun unicode-range komen van Google Fonts:
de browser haalt latin-ext alleen op als er een teken uit die range op
de pagina staat. Onze teksten blijven binnen latin (é, ë, ï en de
typografische aanhalingstekens zitten daarin), dus in de praktijk is dat
48 KB in plaats van 132.
Inter staat onder de SIL Open Font License 1.1, die zelf hosten
uitdrukkelijk toelaat. De licentie staat in _fonts/OFL.txt.
============================================================ */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("_fonts/inter-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("_fonts/inter-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ---- 1. Tokens ---- */
:root {
/* ============================================================
BattMobility Design System — May 2026 V04
Tokens uit sectie 21 (CSS Token Reference, source of truth).
Niets hier verzinnen: staat een waarde niet in de md,
dan hoort ze niet in het systeem.
============================================================ */
/* ----- Color: Brand ----- */
--b2c-key: #4F8459;
--b2c-key-hover: #437348;
--air-flow: #BDE3FF;
--air-flow-hover: #A8D6F7;
--green-shift: #97D7A0;
--soft-grove: #DFF4E1;
--path-clay: #F0E1CE;
/* ----- Color: Neutrals ----- */
--graphite-drive: #4F4F4F;
--urban-mist: #D9D9D9;
--off-white: #F6F9FD;
--white: #FFFFFF;
/* BENOEMDE UITZONDERING, afwijking van het palet, goedgekeurd door Ben.
Het design system geeft Graphite-Drive-50 (#9F9F9F) als kleur voor
secundaire tekst, maar die haalt 2,37 tot 2,65:1 op onze achtergronden
terwijl WCAG AA 4,5:1 vraagt voor tekst onder 24px. Nagemeten over de
hele site: ALLE 24 plaatsen met --muted faalden, geen enkele stond op een
donker vlak of was grote tekst die met 3:1 wegkomt. De donkerste
palet-tint eronder is #777777 en die blijft op 4,48:1 steken, 0,02 te
kort. #6F6F6F haalt 5,02:1 op wit en 4,76:1 op off-white en zit tussen
twee bestaande tinten, dus het blijft in de familie.
Daarom het token zelf aangepast in plaats van 24 selectors te patchen.
Het eerdere --muted-leesbaar is daarmee overbodig geworden. */
--muted: #6F6F6F;
/* ----- Color: Caption Surfaces ----- */
--caption-surface: #FAFCFE;
--caption-border: #EBEBEB;
/* ----- Color: Tints ----- */
--b2c-key-75: #7C9C84;
--b2c-key-50: #96B49D;
--b2c-key-25: #A4C3A9;
--air-flow-75: #CBE9FF;
--air-flow-50: #D8EEFF;
--air-flow-25: #ECF6FF;
--green-shift-75: #B0DEB7;
--green-shift-50: #C7E8CF;
--green-shift-25: #D8F2DD;
--soft-grove-75: #E9F6EA;
--soft-grove-50: #F0F8F3;
--soft-grove-25: #F8FCF9;
--path-clay-75: #F3E8DB;
--path-clay-50: #F7F0E6;
--path-clay-25: #FDF9F4;
--urban-mist-75: #E2E2E2;
--urban-mist-50: #E9E9E9;
--urban-mist-25: #F4F4F4;
--graphite-75: #777777;
--graphite-50: #9F9F9F;
--graphite-25: #D3D3D3;
/* ----- Spacing: Base Scale ----- */
--space-0: 0;
--space-xs: 5px;
--space-sm: 20px;
--space-md: 40px;
--space-lg: 60px;
--space-xl: 80px;
--space-2xl: 100px;
/* ----- Spacing: Named Exceptions ----- */
--space-caption-y: 8px;
--space-caption-x: 12px;
/* Het sectielabel is in het design system een ander component dan de
caption-pill: 6/14 padding en POSITIEVE tracking van 0.5px, omdat
overline- en labeltekst in hoofdletters staat en dan ruimte nodig heeft.
Ik had die twee op één set tokens gezet, waardoor het label de negatieve
bodytracking meekreeg. Eigen tokens dus, zodat .tag, .caption-pill,
.count-pill en de nav ongemoeid blijven. */
--space-label-y: 6px;
--space-label-x: 14px;
--tracking-label: 0.5px;
--space-nested: 10px;
--space-button-gap: var(--space-xs);
/* ----- Radius ----- */
--radius-sm: 10px;
--radius-md: 20px;
--radius-pill: 999px;
/* ----- Typography: Family ----- */
--font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* ----- Typography: Weights ----- */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
/* ----- Typography: Tracking ----- */
--tracking-tight: -0.02em;
--tracking-caption: -0.28px;
/* ----- Typography: Sizes ----- */
--font-size-super-title: 72px;
--font-size-super-subtitle: 50px;
--font-size-first-large-title: 50px;
--font-size-first-large-subtitle: 32px;
--font-size-second-large-title: 36px;
--font-size-second-large-subtitle: 22px;
--font-size-third-title: 26px;
--font-size-third-subtitle: 18px;
--font-size-fourth-title: 18px;
--font-size-fourth-subtitle: 14px;
--font-size-body-super: 30px;
--font-size-body-xl: 24px;
--font-size-body-lg: 20px;
--font-size-body: 18px;
--font-size-body-sm: 14px;
--font-size-caption: 12px;
/* ----- Typography: Line Heights ----- */
--line-height-super-title: 86px;
--line-height-super-subtitle: 60px;
--line-height-first-large-title: 60px;
--line-height-first-large-subtitle: 38px;
--line-height-second-large-title: 42px;
--line-height-second-large-subtitle: 31px;
--line-height-third-title: 30px;
--line-height-third-subtitle: 22px;
--line-height-fourth-title: 22px;
--line-height-fourth-subtitle: 17px;
--line-height-body-super: 36px;
--line-height-body-xl: 30px;
--line-height-body-lg: 31px;
--line-height-body: 28px;
--line-height-body-sm: 18px;
--line-height-caption: 16px;
/* ----- Shadow (Navigation only) -----
V04 sectie 21 geeft hier 0 4px 24px rgba(79,79,79,0.08). We gebruiken de
waarde van battmobility.pro, op vraag van Ben: strakker en neutraal, en
dezelfde waarde als de gloed op de knoppen. Bewuste afwijking. */
--shadow-nav: 0 0 10px rgba(0, 0, 0, 0.1);
/* ----- Touch Target ----- */
--touch-target-min: 44px;
/* ============================================================
Afgeleid uit de V04-tekst, niet uit sectie 21.
Elke waarde staat letterlijk in de md, alleen niet als token.
============================================================ */
--hairline: rgba(79, 79, 79, 0.10); /* 8. optionele kaartrand */
--container: 1280px; /* 14. max content width */
--nav-clearance: 100px; /* ruimte onder de fixed nav-pill */
/* Benoemde uitzondering, in de geest van de tabel Named Component
Exceptions in V04 sectie 4. 15px zit niet in de basisschaal, maar komt
op twee plaatsen uit de referentie: de binnenruimte van de dealkaart
(Figma 36:1415 en battmobility.pro) en de middenstap van de padding op
het wagenbeeld. Ben heeft die maat als uitzondering aanvaard. Gebruik
hem via dit token, nooit als los getal, anders lopen de twee uit elkaar. */
--space-card-inset: 15px;
--gutter: 20px; /* 14. gutter mobiel */
--gutter-tablet: 40px; /* 14. gutter tablet */
--gutter-desktop: 60px; /* 14. gutter desktop */
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* 18. motion */
--overlay-scrim: rgba(79, 79, 79, 0.45); /* modal backdrop */
}
/* ---- 2. Basis ---- */
*, *::before, *::after { box-sizing: border-box; }
/* Elke componentregel met een eigen display verslaat de browserregel
[hidden] { display: none }. Dat ging hier al twee keer mis: de cookiebanner
bleef als onzichtbare laag over de pagina liggen, en op de aanbodpagina
bleven alle wagens staan zodat "toon meer" niets leek te doen. Daarom staat
het hier één keer globaal, in plaats van per selector. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--off-white);
color: var(--graphite-drive);
font-family: var(--font-family);
font-size: var(--font-size-body);
line-height: var(--line-height-body);
font-weight: var(--font-weight-regular);
letter-spacing: var(--tracking-tight);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--b2c-key); text-decoration: none; transition: color 0.2s var(--ease-standard); }
a:hover { color: var(--b2c-key-hover); }
:focus-visible {
outline: none;
border-radius: 4px;
box-shadow: 0 0 0 2px var(--off-white), 0 0 0 5px rgba(79, 132, 89, 0.35);
}
::selection { background: var(--soft-grove); }
/* ---- 3. Typografie ---- */
h1, h2, h3, h4 { margin: 0 0 var(--space-sm); font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-tight); }
h1, .title-super { font-size: var(--font-size-super-title); line-height: var(--line-height-super-title); }
.title-1, h2 { font-size: var(--font-size-first-large-title); line-height: var(--line-height-first-large-title); }
.title-2 { font-size: var(--font-size-second-large-title); line-height: var(--line-height-second-large-title); }
h3, .title-3 { font-size: var(--font-size-third-title); line-height: var(--line-height-third-title); }
.title-4 { font-size: var(--font-size-fourth-title); line-height: var(--line-height-fourth-title); }
p { margin: 0 0 var(--space-sm); }
p:last-child { margin-bottom: 0; }
.body-large { font-size: var(--font-size-body-lg); line-height: var(--line-height-body-lg); }
.body-standard { font-size: var(--font-size-body); line-height: var(--line-height-body); }
.body-small { font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); }
.caption { font-size: var(--font-size-caption); line-height: var(--line-height-caption); }
/* Kleine letters onder een vergelijking: waar de cijfers vandaan komen, wat
een aanname is, wat illustratief is. Bewust rustig, want het mag de inhoud
niet overschreeuwen, maar wel leesbaar. Drie kolommen op desktop, twee op
tablet, een op mobiel, via het bestaande gridgedrag. */
.kleine-letters {
margin-top: var(--space-md);
padding-top: var(--space-sm);
border-top: 1px solid var(--hairline);
}
.kleine-letters p {
margin: 0;
font-size: var(--font-size-caption);
line-height: var(--line-height-caption);
color: var(--muted);
}
.kleine-letters strong { font-weight: var(--font-weight-medium); color: var(--graphite-drive); }
/* Headerbeeld van een case, 16:9 zoals de kaarten op het overzicht. */
.case-beeld {
width: 100%;
height: auto;
display: block;
border-radius: var(--radius-md);
}
.muted { color: var(--muted); }
.lead { font-size: var(--font-size-body-lg); line-height: var(--line-height-body-lg); max-width: 720px; }
/* ---- 4. Layout ---- */
.container { max-width: var(--container); margin: 0 auto; }
.section { padding: var(--space-xl) var(--gutter-desktop); }
.section-compact { padding: var(--space-lg) var(--gutter-desktop); }
.section-head { max-width: 760px; margin-bottom: var(--space-lg); }
/* 20px onder het label is de standaard, want dat geldt in elke blokcontext:
.section-head en de .container van een page-hero. Die laatste had niets,
waardoor de h1 op elke subpagina tegen het label aan stond.
Twee uitzonderingen, en die zijn opzet: .hero-main en .case-body zijn
flex-kolommen die hun afstand met gap regelen (10px en 5px). Een marge zou
daar bovenop komen in plaats van in de plaats van, dus 30px en 25px. */
.section-label { margin-bottom: var(--space-sm); }
.hero-main > .section-label,
.case-body > .section-label { margin-bottom: 0; }
.grid-2, .grid-3, .grid-4 { display: grid; gap: var(--space-sm); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
/* ---- 5. Sectielabel & badges ---- */
.section-label {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-caption);
line-height: var(--line-height-caption);
font-weight: var(--font-weight-medium);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--muted);
background: var(--caption-surface);
border: 1px solid var(--caption-border);
padding: var(--space-label-y) var(--space-label-x);
border-radius: var(--radius-pill);
/* In een flex-kolom (de kaarten) niet meerekken tot de volle breedte. */
align-self: flex-start;
}
.section-label.on-dark { color: var(--off-white); background: rgba(246, 249, 253, 0.14); border-color: rgba(246, 249, 253, 0.24); }
.caption-pill {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-caption-y) var(--space-caption-x);
border: 1px solid var(--caption-border);
border-radius: var(--radius-pill);
font-size: var(--font-size-caption);
line-height: var(--line-height-caption);
font-weight: var(--font-weight-medium);
letter-spacing: var(--tracking-caption);
text-transform: uppercase;
background: var(--caption-surface);
color: var(--muted);
}
.formule-badge { height: 40px; width: auto; }
/* ---- 6. Knoppen ---- */
.btn {
display: inline-flex;
align-items: center;
/* Geometrie exact als battmobility.pro, zodat de knoppen op alle
BattMobility-sites hetzelfde aanvoelen. 14px, 22px en 16px staan niet in
de V04-schaal; dat is een bewuste afwijking op vraag van Ben.
min-height is niet nodig: 16px maal 1,3 plus 2 maal 14 geeft 49px,
dus ruim boven de 44px die sectie 16 vraagt. */
gap: var(--space-nested);
padding: 14px 22px;
border: none;
border-radius: var(--radius-pill);
font-family: inherit;
font-size: 16px;
font-weight: var(--font-weight-medium);
letter-spacing: var(--tracking-tight);
line-height: 1.3;
cursor: pointer;
text-decoration: none;
transition: all 0.2s var(--ease-standard);
}
/* Hover overgenomen van de knoppen op battmobility.be: groen wordt Air Flow,
tekst en pijl worden Graphite, met een zachte gloed. Daar staat de
transitieduur op 0s en springt het; hier loopt hij over 0,2s.
Twee bewuste afwijkingen van V04 die hieruit volgen:
- Sectie 7 zegt dat Primary op hover B2C Key Hover (#437348) wordt, dus
donkerder groen. De live site doet Air Flow. Ben koos de live site.
- Sectie 1 en 7 verbieden schaduw op hover. De live site zet er een
zachte gloed op. Ook dat is een keuze van Ben, niet van het document. */
.btn:hover { transform: translateY(-2px); }
.btn-primary:hover,
.btn-dark:hover,
.btn-light:hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
/* De pijl schaalt met de tekst (sectie 7) en schuift mee bij hover. Dat
laatste komt van .pro: het eigen merkelement doet het werk, geen extra
effect nodig. De 3px is een bewegingsafstand, geen layout-spacing. */
.btn-arrow { width: 0.72em; height: 0.67em; flex: none; transition: transform 0.2s var(--ease-standard); }
.btn:hover .btn-arrow { transform: translateX(3px); }
/* Klik: de knop zakt terug op zijn plek en de pijl komt terug. Sneller dan
de hover (0,1s) zodat het indrukken snappy voelt. */
.btn:active { transform: translateY(0); transition-duration: 0.1s; }
.btn:active .btn-arrow { transform: translateX(0); transition-duration: 0.1s; }
.btn-primary { background: var(--b2c-key); color: var(--off-white); }
.btn-primary:hover { background: var(--air-flow); color: var(--graphite-drive); }
.btn-primary:active { background: var(--b2c-key-hover); color: var(--off-white); }
/* Secondary en Ghost exact zoals de tabel in V04 sectie 7. */
.btn-secondary { background: var(--air-flow); color: var(--graphite-drive); }
.btn-secondary:hover { background: var(--air-flow-hover); color: var(--graphite-drive); }
.btn-ghost { background: var(--soft-grove); color: var(--b2c-key); }
.btn-ghost:hover { background: var(--b2c-key); color: var(--off-white); }
.btn-ghost:active { background: var(--b2c-key-hover); color: var(--off-white); }
/* btn-dark en btn-light staan niet in de tabel van sectie 7, maar zijn nodig
voor knoppen op donkere en fotografische vlakken (sectie 2). Ze gebruiken
alleen kleuren uit het palet. */
.btn-dark { background: var(--graphite-drive); color: var(--off-white); }
.btn-dark:hover { background: var(--b2c-key); color: var(--off-white); }
.btn-dark:active { background: var(--b2c-key-hover); color: var(--off-white); }
.btn-light { background: var(--off-white); color: var(--b2c-key); }
.btn-light:hover { background: var(--air-flow-75); color: var(--graphite-drive); }
.btn-light:active { background: var(--air-flow-50); color: var(--graphite-drive); }
.btn-outline {
background: transparent;
border: 1.5px solid var(--urban-mist);
color: var(--graphite-drive);
}
.btn-outline:hover { background: var(--b2c-key); color: var(--off-white); border-color: var(--b2c-key); }
.btn-outline:active { background: var(--b2c-key-hover); color: var(--off-white); border-color: var(--b2c-key-hover); }
.btn-compact { padding: 0 var(--space-sm); height: 40px; min-height: 0; font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); }
.btn-large { padding: 0 var(--space-md); height: 60px; }
/* ---- 7. Navigatie ---- */
.site-header {
position: fixed;
top: 20px;
left: 0;
right: 0;
z-index: 100;
padding: 0 var(--space-sm);
display: flex;
justify-content: center;
}
.nav-pill {
display: flex;
align-items: center;
gap: var(--space-sm);
width: 100%;
max-width: 1200px;
/* Vaste hoogte van 80px, zoals op battmobility.pro. Dat is precies
--space-xl, dus geen nieuwe waarde. --nav-clearance blijft 100px:
20px marge boven plus deze 80px. */
height: var(--space-xl);
padding: var(--space-nested) var(--space-sm);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: var(--radius-pill);
box-shadow: var(--shadow-nav); /* enige schaduw in het systeem */
}
.nav-logo { display: flex; align-items: center; }
.nav-logo img { height: 34px; width: auto; }
/* Geanimeerd logo (intro on load, loop on hover) — zie battmobility.be */
.wm-logo-container { width: 100%; height: 100%; cursor: pointer; }
.wm-logo-container svg { display: block; width: 100%; height: 100%; }
.wm-anim-pill { animation: pillIntro 2s ease-in-out 1 forwards; }
.wm-anim-cutout { animation: cutoutIntro 2s ease-in-out 1 forwards; }
.wm-anim-part-01 { animation: part01Intro 2s ease-in-out 1 forwards; }
.wm-anim-part-02 { animation: part02Intro 2s ease-in-out 1 forwards; }
.wm-logo-container:hover .wm-anim-pill { animation: pillLoop 2s ease-in-out infinite; }
.wm-logo-container:hover .wm-anim-cutout { animation: cutoutLoop 2s ease-in-out infinite; }
.wm-logo-container:hover .wm-anim-part-01 { animation: part01Loop 2s ease-in-out infinite; }
.wm-logo-container:hover .wm-anim-part-02 { animation: part02Loop 2s ease-in-out infinite; }
@keyframes pillIntro {
0% { opacity: 0; width: 125px; height: 125px; x: 30px; rx: 62.5px; }
10% { opacity: 1; width: 125px; x: 30px; }
25% { width: 185px; x: 0px; }
100% { opacity: 1; width: 185px; height: 125px; x: 0px; rx: 62.5px; }
}
@keyframes cutoutIntro {
0%, 25% { opacity: 0; }
30% { opacity: 1; }
100% { opacity: 1; }
}
@keyframes part01Intro {
0%, 35% { opacity: 0; transform: translateX(-190px); }
40% { opacity: 1; }
50%,100%{ transform: translateX(0); opacity: 1; }
}
@keyframes part02Intro {
0%, 45% { opacity: 0; transform: translateX(-190px); }
50% { opacity: 1; }
60%,100%{ transform: translateX(0); opacity: 1; }
}
@keyframes pillLoop {
0% { opacity: 0; width: 125px; height: 125px; x: 30px; rx: 62.5px; }
10% { opacity: 1; width: 125px; x: 30px; }
25% { width: 185px; x: 0px; }
90% { opacity: 1; width: 185px; height: 125px; x: 0px; rx: 62.5px; }
100% { opacity: 0; width: 185px; x: 0px; }
}
@keyframes cutoutLoop {
0%, 25% { opacity: 0; }
30% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes part01Loop {
0%, 35% { opacity: 0; transform: translateX(-190px); }
40% { opacity: 1; }
50% { transform: translateX(0); opacity: 1; }
90% { transform: translateX(0); opacity: 1; }
100% { transform: translateX(0); opacity: 0; }
}
@keyframes part02Loop {
0%, 45% { opacity: 0; transform: translateX(-190px); }
50% { opacity: 1; }
60% { transform: translateX(0); opacity: 1; }
90% { transform: translateX(0); opacity: 1; }
100% { transform: translateX(0); opacity: 0; }
}
.nav-menu {
display: flex;
align-items: center;
gap: var(--space-xs);
list-style: none;
margin: 0 auto;
padding: 0;
}
.nav-menu a:not(.btn) {
display: inline-block;
padding: var(--space-caption-y) var(--space-caption-x);
border-radius: var(--radius-pill);
color: var(--graphite-drive);
font-size: var(--font-size-body-sm);
font-weight: var(--font-weight-medium);
}
.nav-menu a:not(.btn):hover { color: var(--b2c-key); background: var(--off-white); }
.nav-menu a[aria-current="page"] { color: var(--b2c-key); background: var(--soft-grove); }
.nav-menu-cta { display: none; }
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: var(--space-xs);
width: 44px;
height: 44px;
padding: var(--space-nested);
border: none;
background: transparent;
border-radius: var(--radius-pill);
cursor: pointer;
}
.nav-toggle span {
display: block;
height: 2px;
background: var(--graphite-drive);
border-radius: 2px;
transition: transform 0.2s var(--ease-standard), opacity 0.2s var(--ease-standard);
}
.nav-open .nav-toggle span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-open .nav-toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }
/* Minimale header voor focus-landingspagina's (Car Policy Scan) */
.header-minimal {
display: flex;
align-items: center;
justify-content: space-between;
max-width: var(--container);
margin: 0 auto;
padding: var(--space-md);
}
.header-minimal img { height: 38px; width: auto; }
.header-minimal a.back { font-size: var(--font-size-body-sm); font-weight: var(--font-weight-medium); }
/* ---- 8. Hero ---- */
.hero {
position: relative;
/* Exact de hero van battmobility.pro: 20px ingezet, gecapt op de
contentkolom, 40px binnenruimte, en de inhoud hangt onderaan.
Op tablet en mobiel steekt de kaart daardoor 20 respectievelijk 10px
buiten de contentkolom, net zoals daar. Bewust: de twee sites moeten
hetzelfde aanvoelen. */
width: calc(100% - var(--space-md));
max-width: var(--container);
height: 720px;
margin: 0 auto;
padding: calc(var(--nav-clearance) + var(--space-2xl)) var(--space-md) var(--space-md);
display: flex;
flex-direction: column;
justify-content: flex-end;
border-radius: var(--radius-md);
overflow: hidden;
color: var(--off-white);
}
.hero-media {
position: absolute;
inset: 0;
z-index: 0;
}
/* video net als img, zelfde regel als op battmobility.pro */
.hero-media img,
.hero-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-media::after {
content: "";
position: absolute;
inset: 0;
/* leesbaarheids-scrim, geen decoratieve gradient */
/* Bewuste uitzondering: dit is geen decoratieve gradient maar een scrim die
witte tekst leesbaar houdt op een foto. Sectie 2 geeft alleen een vlakke
overlay voor kaarten en modals, niet voor heroes met beeld. */
background: linear-gradient(209.36deg, rgba(79, 79, 79, 0.28) 0%, rgba(79, 79, 79, 0.8) 98.55%);
}
.hero-inner {
position: relative;
z-index: 1;
/* width: 100% is nodig: .hero is een kolom-flex en margin: 0 auto zou een
flex-item anders shrink-to-fit maken en centreren. Staat zo ook op .pro. */
width: 100%;
max-width: var(--container);
margin: 0 auto;
/* Rij zoals .pro: tekst links, dealkaart rechts, beide onderaan uitgelijnd. */
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-md);
}
.hero-main {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-nested);
min-width: 0;
max-width: 760px;
}
/* Herotypografie exact als battmobility.pro: titel 50/60 en lead 18/28,
niet de Super Title 72/86 die V04 sectie 3 voor een hero voorschrijft.
Bewuste afwijking, op vraag van Ben: de twee sites moeten hetzelfde
aanvoelen. Gevolg: de home-hero en de subpagina-hero's zijn nu even
groot, precies zoals daar. */
.hero h1 {
margin: 0;
max-width: 820px;
font-size: var(--font-size-first-large-title);
line-height: var(--line-height-first-large-title);
}
/* Tussenregel tussen titel en lead, zoals .pro: 24/32 medium. Geeft de hero
drie niveaus in plaats van twee. */
.hero-sub {
margin: 0;
font-size: var(--font-size-body-xl);
line-height: var(--line-height-body-xl);
font-weight: var(--font-weight-medium);
color: var(--off-white);
}
.hero .lead {
font-size: var(--font-size-body);
line-height: var(--line-height-body);
color: var(--off-white);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-sm); }
/* In de hero staan de knoppen dichter bij elkaar en verder van de tekst,
zoals op battmobility.pro. */
.hero .hero-actions { gap: var(--space-nested); margin-top: var(--space-md); }
/* Dealkaart in de hero, zelfde plek en opbouw als de 43%-kaart op .pro.
Stond hier absoluut gepositioneerd; nu in de flow, zodat hij nooit over
de tekst kan vallen en op smalle schermen netjes onderaan schuift. */
/* Maten exact van .pro: 355 breed, --space-card-inset binnenruimte, 20px
tussenruimte, inhoud bovenaan uitgelijnd. 355 staat niet in de V04-schaal;
op .pro staat daar ook bij dat deze kaart eigen binnenmarges heeft. */
.hero-stat {
flex: none;
display: flex;
align-items: flex-start;
gap: var(--space-sm);
/* Off White kaart met een wit beeldvak erin: een genest vlak volgens V04
sectie 5, met 20px buiten- en 10px binnenradius. De binnenruimte blijft
15px in plaats van de 10px die sectie 5 noemt, omdat Ben de maten van
.pro wil. */
background: var(--off-white);
color: var(--graphite-drive);
border-radius: var(--radius-md);
padding: var(--space-card-inset);
width: 355px;
max-width: 100%;
text-decoration: none;
transition: transform 0.2s var(--ease-standard);
}
.hero-stat:hover { transform: translateY(-4px); }
/* "Beste deal" is een statusbadge, en sectie 6 laat daar wel een sterkere
vulling toe. Een caption-pill zou op deze witte kaart wegvallen. */
.hero-stat-badge {
display: inline-flex;
align-items: center;
align-self: flex-start;
/* Kleiner dan een gewone caption-pill: de kaart is maar 355px breed en de
prijs moet de aandacht krijgen, niet de badge. */
padding: var(--space-xs) var(--space-nested);
margin-bottom: var(--space-xs);
border-radius: var(--radius-pill);
background: var(--soft-grove);
color: var(--b2c-key);
font-size: var(--font-size-caption);
line-height: var(--line-height-caption);
font-weight: var(--font-weight-medium);
letter-spacing: var(--tracking-caption);
text-transform: uppercase;
}
/* Geen tussenruimte: in Figma staan de drie regels vlak op elkaar
(y 0, 42, 68) en doen de regelhoogtes het werk. 42 + 26 + 44 = 112, exact
de hoogte van het Pic-blok ernaast. */
.hero-stat-text { display: flex; flex-direction: column; gap: 0; width: 160px; flex: none; }
.hero-stat strong { font-size: var(--font-size-second-large-title); line-height: var(--line-height-second-large-title); font-weight: var(--font-weight-medium); color: var(--b2c-key); }
.hero-stat-label {
/* 16/26 en gewicht 400, exact als .pro. Zelfde afwijking van de schaal als
bij de knoppen, en om dezelfde reden. */
font-size: 16px;
line-height: 26px;
font-weight: var(--font-weight-regular);
letter-spacing: var(--tracking-tight);
color: var(--b2c-key);
}
.hero-stat-caption { font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--muted); }
/* .pro heeft hier een portretfoto met object-fit: cover. Onze wagenbeelden
zijn liggende uitsnedes op wit, dus een liggend vak met contain: anders
snijdt de wagen middendoor. */
/* Maten uit Figma, node 36:1415 in het Fleet Forward design system: het
Pic-blok is daar 107 bij 112, met 20px tussenruimte naast een tekstkolom
van 198. 15 + 198 + 20 + 107 + 15 = de 355 van de kaart.
Daar vult een foto het hele blok; onze wagenbeelden zijn uitsnedes, dus die
staan XY-gecentreerd in het witte vlak met de ruimte eromheen wit. */
/* flex: 1 in plaats van een vaste breedte: het witte vlak neemt wat de
tekstkolom overlaat. Bij 355 kaart, 15 padding en 20 tussenruimte blijft
305 te verdelen, dus met een tekstkolom van 160 wordt dit 145 breed.
Verandert de kaart ooit, dan klopt het nog steeds. */
.hero-stat-media {
flex: 1;
/* stretch in plaats van een vaste hoogte: het witte vlak loopt over de
volle hoogte van de kaart mee, dus tot de onderkant van de tekstkolom.
De wagen blijft er XY-gecentreerd in staan. */
align-self: stretch;
min-width: 100px;
background: var(--white);
border-radius: var(--radius-sm);
overflow: hidden;
}
/* box-sizing border-box is nodig bij width/height 100% met padding, anders
duwt de padding het beeld buiten het witte vlak. 15px is de benoemde
uitzondering --space-card-inset, op mobiel 10. */
.hero-stat-media video,
.hero-stat-media img {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: var(--space-card-inset);
object-fit: contain;
object-position: center center;
}
/* Sobere paginahero (subpagina's) */
.page-hero { padding: calc(var(--nav-clearance) + var(--space-2xl)) var(--gutter-desktop) var(--space-md); }
.page-hero h1 { font-size: var(--font-size-first-large-title); line-height: var(--line-height-first-large-title); margin-bottom: var(--space-sm); }
/* ---- 9. USP-pillen (brand book pill-communicatie) ---- */
/* De pill-strip zit in .pill-section > .container en lijnt daardoor exact
met de sectietitels. Hij stond eerder over de volle vensterbreedte
gecentreerd en lijnde met niets. */
.pill-section { padding: var(--space-md) var(--gutter-desktop); }
/* USP-ticker, overgenomen van battmobility.pro. Twee identieke groepen plus
translateX(-50%) geeft een naadloze loop; hover pauzeert. Geknipt op de
containerbreedte, dus in dezelfde kolom als de rest van de pagina.
V04 sectie 18 verbiedt constante decoratieve animatie. Deze ticker staat
op battmobility.be en .pro en is dus vaste huisstijl; Ben vroeg hem hier
ook. Het reduced-motion blok hierboven zet alle animatie uit, dus wie
beweging heeft afgezet ziet een stilstaande rij. */
.pill-ticker {
overflow: hidden;
/* Exact dezelfde box als .hero, en exact zoals .pro: 20px ingezet, gecapt
op de contentkolom, 60px verticale ruimte. Stond eerder gutter-afhankelijk
en liep daardoor niet meer gelijk met de hero. */
padding: var(--space-lg) 0;
width: calc(100% - var(--space-md));
max-width: var(--container);
margin: 0 auto;
}
.pill-ticker-track {
display: flex;
width: max-content;
will-change: transform;
animation: pill-ticker-loop 56s linear infinite;
}
.pill-ticker-group {
display: flex;
gap: var(--space-nested);
padding-right: var(--space-nested);
flex: 0 0 auto;
}
.pill-ticker:hover .pill-ticker-track { animation-play-state: paused; }
@keyframes pill-ticker-loop {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.pill-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: var(--space-nested);
padding: 0;
}
.pill-strip .pill,
.pill-ticker .pill {
display: inline-flex;
align-items: center;
gap: var(--space-nested);
padding: var(--space-nested) var(--space-sm);
border-radius: var(--radius-pill);
font-size: var(--font-size-body-sm);
font-weight: var(--font-weight-medium);
/* Zonder grijze lijn moet de vulling het werk doen. Soft Grove is in
sectie 2 de zachte vlakkleur voor lage nadruk. */
background: var(--soft-grove);
white-space: nowrap;
}
.pill-strip .pill::before,
.pill-ticker .pill::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--b2c-key);
}
/* ---- 10. Kaarten ---- */
.card {
background: var(--white);
border-radius: var(--radius-md);
padding: var(--space-md);
transition: transform 0.2s var(--ease-standard);
}
a.card { color: inherit; display: block; }
.card:hover { transform: translateY(-4px); }
.card h3 { margin-bottom: var(--space-xs); }
.card-blue {
background: var(--b2c-key);
color: var(--off-white);
border: none;
border-radius: var(--radius-md);
padding: var(--space-md);
}
.card-blue h3, .card-blue h2 { color: var(--off-white); }
/* .case-kpi staat op --b2c-key en zou op deze vulling onzichtbaar zijn. */
.card-blue .case-kpi { color: var(--off-white); }
.card-blue strong { font-weight: var(--font-weight-semibold); }
.card-green {
background: var(--soft-grove);
color: var(--graphite-drive);
border: none;
border-radius: var(--radius-md);
padding: var(--space-md);
}
.card-sand { background: var(--path-clay-25); border: none; }
/* Stappenkaart (01/02/03, brand book blueprint) */
.step-card {
background: var(--white);
border-radius: var(--radius-md);
overflow: hidden;
display: flex;
flex-direction: column;
}
.step-card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.step-card .step-body { padding: var(--space-sm); display: flex; gap: var(--space-sm); align-items: baseline; }
.step-card .step-nr { font-size: var(--font-size-body-xl); line-height: var(--line-height-body-xl); font-weight: var(--font-weight-medium); color: var(--b2c-key); }
.step-card h3 { font-size: var(--font-size-fourth-title); line-height: var(--line-height-fourth-title); margin-bottom: var(--space-xs); }
.step-card p { font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--muted); }
/* Statistiektegel (datagedreven, Eco Horizon / Transit Sand) */
.stat-tile {
background: var(--white);
border-radius: var(--radius-md);
padding: var(--space-md) var(--space-sm);
text-align: center;
}
.stat-tile strong {
display: block;
font-size: var(--font-size-first-large-title);
line-height: var(--line-height-first-large-title);
font-weight: var(--font-weight-medium);
color: var(--b2c-key);
}
.stat-tile span { font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--muted); }
.stat-tile.accent-green { background: var(--soft-grove-75); border: none; }
.stat-tile.accent-sand { background: var(--path-clay-25); border: none; }
/* Checklist (Eco Horizon chips) */
.checklist { list-style: none; margin: 0 0 var(--space-sm); padding: 0; display: flex; flex-direction: column; gap: var(--space-nested); }
.checklist li { display: flex; align-items: flex-start; gap: var(--space-nested); font-size: var(--font-size-body); line-height: var(--line-height-body); }
.checklist .check {
flex: none;
width: 20px;
height: 20px;
margin-top: calc((var(--line-height-body) - var(--space-sm)) / 2);
border-radius: var(--radius-pill);
background: var(--soft-grove);
color: var(--graphite-drive);
font-size: var(--font-size-body-sm);
font-weight: var(--font-weight-medium);
display: inline-flex;
align-items: center;
justify-content: center;
}
.card-blue .checklist .check { background: rgba(246, 249, 253, 0.2); color: var(--off-white); }
/* Case-kaart */
/* .case-card is de variant MET beeld: de kaart heeft dan geen eigen padding,
het beeld loopt tot de rand en .case-body neemt de binnenruimte over. */
.case-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
/* 16:9, de verhouding waarin de casebeelden geleverd zijn. Zo snijdt
object-fit niets weg. */
.case-card > img,
.case-card > .beeldslot { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; border-radius: 0; display: block; }
.case-card .case-body { padding: var(--space-sm) var(--space-sm) var(--space-md); display: flex; flex-direction: column; gap: var(--space-xs); flex: 1; }
.case-card p { font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); }
/* Deze drie stonden onder .case-card en deden daardoor niets: geen enkele
pagina gebruikt die klasse. Nu staan ze los, zodat ze ook werken in de
kaarten op de home, op cases en op contact. */
.case-kpi { font-size: var(--font-size-body-xl); line-height: var(--line-height-body-xl); font-weight: var(--font-weight-medium); color: var(--b2c-key); }
.case-name { font-size: var(--font-size-caption); line-height: var(--line-height-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; font-weight: var(--font-weight-medium); color: var(--muted); }
.case-link { margin-top: auto; padding-top: var(--space-sm); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--b2c-key); }
/* ---- Beeldslots (tijdelijk) ----
Duidelijk gemarkeerde, lege plek waar beeld hoort. Vervang het hele
element door een ![]()
met dezelfde verhouding. Deze regels mogen weg
zodra alle slots gevuld zijn. */
.beeldslot {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: var(--soft-grove-25);
border: 1px solid var(--hairline);
border-radius: var(--radius-sm);
padding: var(--space-sm);
color: var(--muted);
font-size: var(--font-size-caption);
line-height: var(--line-height-caption);
letter-spacing: var(--tracking-caption);
text-transform: uppercase;
}
/* ---- 11. Prijstabel ---- */
.price-table-wrap { overflow-x: auto; border-radius: var(--radius-md); background: var(--white); }
.price-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.price-table th, .price-table td { text-align: left; padding: var(--space-sm); font-size: var(--font-size-body); line-height: var(--line-height-body); }
.price-table thead th {
font-size: var(--font-size-caption);
line-height: var(--line-height-caption);
letter-spacing: var(--tracking-caption);
text-transform: uppercase;
font-weight: var(--font-weight-medium);
color: var(--muted);
border-bottom: 1px solid var(--hairline);
}
.price-table tbody tr + tr td { border-top: 1px solid var(--hairline); }
.price-table .price { font-weight: var(--font-weight-medium); color: var(--b2c-key); white-space: nowrap; }
/* ---- 12. Accordeon (native details) ---- */
.accordion { display: flex; flex-direction: column; gap: var(--space-sm); }
.accordion details {
background: var(--white);
border-radius: var(--radius-md);
padding: 0;
}
.accordion summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
padding: var(--space-sm);
font-size: var(--font-size-body);
line-height: var(--line-height-body);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-md);
}
.accordion summary::-webkit-details-marker { display: none; }
/* Was een chevron uit twee CSS-randen, met right: 20px, top: 26px, 10px en
2px: geen Phosphor (sectie 13) en vier waarden buiten de schaal. Nu een
echt caret-down icoon op 20px, de ankermaat uit sectie 13. Sectie 11 vraagt
180 graden bij openen, dus precies dat. */
.accordion summary .caret {
flex: none;
width: 20px;
height: 20px;
color: var(--graphite-drive);
transition: transform 0.2s var(--ease-standard);
}
.accordion details[open] summary { color: var(--b2c-key); }
.accordion details[open] summary .caret { transform: rotate(180deg); color: var(--b2c-key); }
/* De kaarten lopen mee met de contentkolom, maar de antwoordtekst niet:
op 1280px zou een regel ruim 140 tekens worden. 720px is de leesmaat die
V04 sectie 14 ook voor de legal-pagina's aanhoudt. */
.accordion .accordion-body { padding: 0 var(--space-sm) var(--space-sm); font-size: var(--font-size-body); line-height: var(--line-height-body); max-width: 720px; }
/* ---- 13. Formulieren ---- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
.form-field { display: flex; flex-direction: column; gap: var(--space-xs); }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); font-weight: var(--font-weight-medium); }
.form-field input,
.form-field select,
.form-field textarea {
font-family: inherit;
font-size: var(--font-size-body);
line-height: var(--line-height-body);
letter-spacing: var(--tracking-tight);
color: var(--graphite-drive);
background: var(--soft-grove);
border: 2px solid transparent;
border-radius: var(--radius-sm);
/* 10px rondom, ook boven en onder. Het dropdownpijltje van een select
wordt door de browser binnen de padding getekend, dus met 5px stond het
te dicht op de rand. .pro doet hier 12px 14px; Ben vroeg 10. */
padding: var(--space-nested);
/* Chrome negeert line-height op een select, waardoor die 47px werd en het
datumveld 54px. Eén minimumhoogte trekt ze gelijk: het aanraakvlak van
44px plus één stap van 10px is exact de natuurlijke hoogte van het
hoogste veld, dus niets wordt uitgerekt. */
min-height: calc(var(--touch-target-min) + var(--space-nested));
transition: border-color 0.2s var(--ease-standard), background 0.2s var(--ease-standard), box-shadow 0.2s var(--ease-standard);
}
.form-field textarea { resize: vertical; min-height: calc(var(--space-2xl) + var(--space-sm)); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
outline: none;
background: var(--white);
border-color: var(--b2c-key);
box-shadow: 0 0 0 3px rgba(79, 132, 89, 0.15);
}
.form-note { font-size: var(--font-size-caption); line-height: var(--line-height-caption); color: var(--muted); }
/* ---- 14. Quote ---- */
.quote-block {
display: flex;
gap: var(--space-md);
align-items: center;
background: var(--white);
border-radius: var(--radius-md);
padding: var(--space-md);
}
.quote-block img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; flex: none; }
.quote-block blockquote { margin: 0; font-size: var(--font-size-body-xl); line-height: var(--line-height-body-xl); font-weight: var(--font-weight-medium); }
.quote-block cite { display: block; margin-top: var(--space-sm); font-style: normal; font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--muted); }
/* Quote op een casepagina: een casebeeld links, de quote rechts. Twee kolommen
dus, in die zin. De tekst zelf loopt door, niet opgesplitst.
Deze regels MOETEN na de basis hierboven staan, want die zet het beeld op
100x100 en rond. */
.quote-block--case { align-items: flex-start; }
.quote-block--case img {
width: 360px;
height: auto;
flex: none;
border-radius: var(--radius-sm);
object-fit: cover;
}
/* ---- 15. CTA-band & donkere secties ---- */
.cta-band {
background: var(--b2c-key);
color: var(--off-white);
border-radius: var(--radius-md);
padding: var(--space-xl) var(--gutter-desktop);
text-align: center;
}
.cta-band h2 { color: var(--off-white); max-width: 720px; margin: 0 auto var(--space-sm); }
.cta-band p { max-width: 620px; margin: 0 auto var(--space-md); color: rgba(246, 249, 253, 0.88); }
.cta-band .hero-actions { justify-content: center; margin: 0; }
.section-dark { background: var(--graphite-drive); color: var(--off-white); }
.section-dark h2, .section-dark h3 { color: var(--off-white); }
/* "Goed om te weten" (KBC-patroon: juridisch/feitelijk apart) */
.note-block {
background: var(--path-clay-25);
border-radius: var(--radius-md);
padding: var(--space-md);
}
.note-block h3 { font-size: var(--font-size-fourth-title); line-height: var(--line-height-fourth-title); }
.note-block p, .note-block li { font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--graphite-drive); }
.note-block ul { margin: 0; padding-left: var(--space-sm); }
/* Sectiebanden: secties met een eigen achtergrondkleur, gescheiden door
hairlines. Zet .band op elke sectie (hairline bovenaan) en combineer
optioneel met een kleurvariant. Zie designsystem.html voor het ritme. */
.band { border-top: 0; }
.band-warm { background: var(--path-clay-25); }
.band-blue { background: var(--air-flow-25); }
.band-green { background: var(--soft-grove-75); }
.band-sand { background: var(--path-clay-25); }
.band-blue .section-label { background: rgba(255, 255, 255, 0.65); }
.band-dark { background: var(--graphite-drive); color: var(--off-white); }
.band-dark h2, .band-dark h3 { color: var(--off-white); }
.band-dark .lead, .band-dark .body-standard { color: rgba(246, 249, 253, 0.85); }
.band-dark .muted { color: rgba(246, 249, 253, 0.6); }
.band-dark .section-label { color: var(--off-white); background: rgba(246, 249, 253, 0.14); }
/* ---- 16. Footer ---- */
.site-footer {
background: var(--graphite-drive);
color: var(--off-white);
width: calc(100% - 40px);
max-width: var(--container);
margin: var(--space-lg) auto var(--space-sm);
border-radius: var(--radius-md);
padding: var(--space-xl) var(--gutter-desktop) var(--space-md);
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: var(--space-md); }
.footer-brand img { height: var(--space-md); width: auto; margin-bottom: var(--space-sm); }
.footer-baseline { font-size: var(--font-size-body); line-height: var(--line-height-body); font-weight: var(--font-weight-medium); color: var(--off-white); }
.footer-meta { font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: rgba(246, 249, 253, 0.64); }
.footer-title {
font-size: var(--font-size-caption);
line-height: var(--line-height-caption);
letter-spacing: var(--tracking-caption);
text-transform: uppercase;
font-weight: var(--font-weight-medium);
color: rgba(246, 249, 253, 0.56);
margin-bottom: var(--space-sm);
}
/* De gap staat op 10px, maar de li erfde de regelhoogte van de body (18px
tekst met 28px regel) terwijl de link zelf 14px is. Dat legde 12px
regelruimte bovenop de gap, dus je zag 22px. Met de eigen typetokens van
de link is het lijnvak 18px tegen een glyphvak van 17px, en blijft er
10 a 11px over. Alleen bestaande tokens, geen nieuwe maat. */
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-nested); }
.footer-col li { font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); }
.footer-col a { color: var(--off-white); font-size: var(--font-size-body-sm); }
.footer-col a:hover { color: var(--b2c-key-50); }
.footer-legal {
margin-top: var(--space-xl);
padding-top: var(--space-md);
border-top: 1px solid rgba(246, 249, 253, 0.14);
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
justify-content: space-between;
align-items: center;
font-size: var(--font-size-caption);
color: rgba(246, 249, 253, 0.64);
}
.footer-legal a {
color: rgba(246, 249, 253, 0.8);
text-transform: uppercase;
letter-spacing: var(--tracking-caption);
font-size: var(--font-size-caption);
font-weight: var(--font-weight-medium);
margin-left: var(--space-sm);
}
.footer-legal a:first-child { margin-left: 0; }
.footer-legal a:hover { color: var(--off-white); }
/* ---- 17. Hulpjes ---- */
.mt-20 { margin-top: var(--space-sm); } .mt-40 { margin-top: var(--space-md); } .mt-60 { margin-top: var(--space-lg); }
.mb-20 { margin-bottom: var(--space-sm); } .mb-40 { margin-bottom: var(--space-md); } .mb-60 { margin-bottom: var(--space-lg); }
.center { text-align: center; }
.maxw-720 { max-width: 720px; }
.maxw-860 { max-width: 860px; }
.mx-auto { margin-left: auto; margin-right: auto; }
/* ---- 18. Responsief ---- */
@media (max-width: 1024px) {
/* tablet: één stap terug binnen de V04-schaal, geen tussenmaten */
h1, .title-super { font-size: var(--font-size-first-large-title); line-height: var(--line-height-first-large-title); }
.title-1, h2 { font-size: var(--font-size-second-large-title); line-height: var(--line-height-second-large-title); }
.title-2 { font-size: var(--font-size-first-large-subtitle); line-height: var(--line-height-first-large-subtitle); }
/* tablet-gutter, V04 sectie 14 */
.section, .section-compact, .pill-section, .cta-band, .site-footer { padding-left: var(--gutter-tablet); padding-right: var(--gutter-tablet); }
/* Tablet: 40px marge rondom de nav-balk, zoals op battmobility.pro */
.site-header { top: var(--space-md); padding: 0 var(--gutter-tablet); }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; }
.nav-menu { display: none; }
.nav-toggle { display: flex; }
.nav-cta { margin-left: auto; }
.nav-open .nav-menu {
display: flex;
flex-direction: column;
align-items: stretch;
position: absolute;
top: calc(100% + 10px);
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(12px);
border-radius: var(--radius-md);
padding: var(--space-sm);
box-shadow: var(--shadow-nav);
}
.nav-open .nav-menu a:not(.btn) { padding: var(--space-nested) var(--space-sm); min-height: var(--touch-target-min); font-size: var(--font-size-body); }
.nav-open .nav-menu .nav-menu-cta { display: block; margin-top: var(--space-xs); }
.nav-pill { position: relative; }
.hero { height: auto; }
/* Onder 1024px past de dealkaart niet meer naast de tekst. Stapelen, zoals .pro. */
.hero-inner { flex-direction: column; align-items: flex-start; }
/* position, right en bottom waren restanten van toen deze kaart absoluut
gepositioneerd stond; die staat nu in de flow, dus ze deden niets meer.
De tweede regel overschreef ook max-width 100% met none. Samengevoegd.
margin-top blijft: die komt boven op de gap van 40 van .hero-inner. */
.hero-stat { max-width: 100%; margin-top: var(--space-sm); }
}
@media (max-width: 640px) {
/* mobiel: body blijft 18/28, V04 sectie 16 laat niet onder 14px gaan */
h1, .title-super { font-size: var(--font-size-second-large-title); line-height: var(--line-height-second-large-title); }
.title-1, h2 { font-size: var(--font-size-first-large-subtitle); line-height: var(--line-height-first-large-subtitle); }
.title-2 { font-size: var(--font-size-third-title); line-height: var(--line-height-third-title); }
.section, .section-compact { padding: var(--space-lg) var(--gutter); }
.pill-section { padding: var(--space-md) var(--gutter); }
/* Mobiel: terug naar 20px marge rondom de nav-balk */
.site-header { top: var(--space-sm); padding: 0 var(--gutter); }
.pill-ticker { width: calc(100% - var(--space-sm)); padding: var(--space-md) 0; }
.hero { width: calc(100% - var(--space-sm)); padding: calc(var(--nav-clearance) + var(--space-lg)) var(--gutter) var(--space-md); }
.page-hero { padding: calc(var(--nav-clearance) + var(--space-lg)) var(--gutter) var(--space-sm); }
.page-hero h1 { font-size: var(--font-size-first-large-subtitle); line-height: var(--line-height-first-large-subtitle); }
/* .pro doet hier 38/46. Die maat staat niet in de V04-schaal, dus 36/42,
de naaste waarde die er wel in staat. */
.hero h1 { font-size: var(--font-size-second-large-title); line-height: var(--line-height-second-large-title); }
.hero-sub { font-size: var(--font-size-body-lg); line-height: var(--line-height-body); }
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.form-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.site-footer { width: calc(100% - var(--space-sm)); margin: var(--space-md) auto var(--space-nested); padding: var(--space-lg) var(--gutter) var(--space-md); }
.quote-block { flex-direction: column; align-items: flex-start; }
.quote-block--case img { width: 100%; }
.nav-cta { display: none; }
.header-minimal { padding: var(--space-sm); }
.hero-actions .btn-large { height: auto; padding: var(--space-xs) var(--space-sm); }
/* Dealkaart mobiel, zoals .pro: volle breedte en een meebuigende tekstkolom. */
.hero-stat { width: 100%; }
.hero-stat-media video,
.hero-stat-media img { padding: var(--space-nested); }
.hero-stat-text { width: auto; flex: 1; min-width: 0; }
/* Aanraakvlakken van 44px (sectie 16) alleen waar er ook echt getikt wordt.
Op desktop volstaat de aanwijzer en zou 44px per footerlink de kolommen
onnodig lang maken. */
.nav-logo,
.breadcrumb a,
.footer-col a,
.footer-legal a { display: inline-flex; align-items: center; min-height: var(--touch-target-min); }
.footer-col ul { gap: var(--space-0); }
}
/* ---- 19. Beweging beperken ---- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition: none !important; animation: none !important; }
}
/* ---- 20. Aanbod / catalogus (wireframe 01) ---- */
.count-pill {
display: inline-block;
margin-top: var(--space-sm);
padding: var(--space-caption-y) var(--space-caption-x);
border-radius: var(--radius-pill);
background: var(--caption-surface);
border: 1px solid var(--caption-border);
color: var(--muted);
font-size: var(--font-size-caption);
line-height: var(--line-height-caption);
font-weight: var(--font-weight-medium);
}
.catalog-topbar {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--space-sm);
}
.catalog-topbar .pill-strip { justify-content: flex-start; padding: 0; gap: var(--space-nested); }
.rating { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--graphite-drive); }
.rating .stars { color: var(--b2c-key); }
.rating strong { font-weight: var(--font-weight-medium); }
.catalog { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-md); align-items: start; }
.filters-panel .filters-title { font-size: var(--font-size-fourth-title); line-height: var(--line-height-fourth-title); font-weight: var(--font-weight-medium); margin: 0 0 var(--space-sm); }
.filters-panel .form-field { margin-bottom: var(--space-sm); }
.filters-reset {
font-family: inherit; font-size: var(--font-size-body-sm); font-weight: var(--font-weight-medium);
color: var(--muted); background: none; border: none; padding: 0; cursor: pointer;
letter-spacing: var(--tracking-tight);
}
.filters-reset:hover { color: var(--b2c-key); }
.result-bar {
display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm);
margin-bottom: var(--space-sm); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--muted);
}
.result-bar .sort { display: inline-flex; align-items: center; gap: var(--space-nested); }
.result-bar .sort select {
font-family: inherit; font-size: var(--font-size-body-sm); font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-tight);
color: var(--graphite-drive); background: transparent; border: none; cursor: pointer;
}
.car-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
.car-card {
display: flex; flex-direction: column;
background: var(--white); border-radius: var(--radius-md);
padding: var(--space-sm); text-decoration: none; color: inherit;
transition: transform 0.2s var(--ease-standard);
}
a.car-card:hover { transform: translateY(-4px); }
/* min-height: 0 is nodig zodra het beeld padding krijgt. Als flex-item staat
min-height standaard op auto, en dan mag de inhoud het vak oprekken; met
box-sizing border-box telt de padding in die minimummaat mee, waardoor het
vak 8px buiten zijn eigen 16:10 groeide. Die verhouding bepaalt het ritme
van het hele grid, dus die moet leidend blijven. */
.car-card__media { aspect-ratio: 16 / 10; min-height: 0; background: var(--white); border-radius: var(--radius-sm); margin-bottom: var(--space-sm); }
.car-card__model { font-size: var(--font-size-third-title); line-height: var(--line-height-third-title); font-weight: var(--font-weight-medium); margin: 0 0 var(--space-xs); }
.car-card__uitvoering { font-size: var(--font-size-fourth-subtitle); line-height: var(--line-height-fourth-subtitle); color: var(--muted); margin: 0 0 var(--space-nested); }
.car-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-nested); margin-bottom: var(--space-sm); }
.tag {
display: inline-flex; align-items: center; padding: var(--space-caption-y) var(--space-caption-x);
border-radius: var(--radius-pill); background: var(--soft-grove); color: var(--graphite-drive);
font-size: var(--font-size-caption); line-height: var(--line-height-caption); font-weight: var(--font-weight-medium);
}
.car-card__price { font-size: var(--font-size-body-xl); line-height: var(--line-height-body-xl); font-weight: var(--font-weight-medium); color: var(--graphite-drive); margin: auto 0 0; }
.car-card__price-note { font-size: var(--font-size-caption); line-height: var(--line-height-caption); color: var(--muted); margin: var(--space-xs) 0 0; }
/* Opsplitsing van de prijs in het vaste deel en de kilometers. Zelfde
captionstijl en dezelfde kleur als de regel erboven. Eerst stond hier
--graphite-25, maar dat token is in het design system een randkleur en op
wit levert het 1,5:1 contrast. Deze regel draagt prijsinformatie, dus die
mag niet lichter zijn dan de rest. */
.car-card__price-split { font-size: var(--font-size-caption); line-height: var(--line-height-caption); color: var(--muted); margin: 0; }
/* Wagenkaart als rij: beeld links, tekst rechts, over de volle breedte. Zo
staat hij in hetzelfde ritme als de quote erboven, en verdwijnt de witruimte
die de verticale kaart naast een korte kaart overhield.
MOET na de basisregels hierboven staan: die zetten flex-direction column en
een margin-bottom op de media.
Alleen op een casepagina gebruikt. De kaarten in de catalogus blijven
verticaal; die staan in een grid van drie en zouden als rij te smal worden. */
.car-card--rij { flex-direction: row; align-items: center; gap: var(--space-sm); }
.car-card--rij .car-card__media { width: 60%; flex: none; margin-bottom: 0; }
.car-card--rij .car-card__tekst { flex: 1; min-width: 0; }
.toon-meer { text-align: center; margin-top: var(--space-md); }
.toon-meer .toon-meer-note { font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--muted); margin-top: var(--space-nested); }
@media (max-width: 1024px) {
.catalog { grid-template-columns: 1fr; }
.car-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
/* Naast elkaar blijft het te smal voor een rij, dus op mobiel terug naar
beeld boven tekst. */
.car-card--rij { flex-direction: column; align-items: stretch; }
.car-card--rij .car-card__media { width: 100%; margin-bottom: var(--space-sm); }
.car-grid { grid-template-columns: 1fr; }
}
/* Statusmelding boven het wagengrid (prijzen ophalen / voorbeeldprijzen) */
.catalog-note {
margin: 0 0 var(--space-sm);
padding: var(--space-nested) var(--space-sm);
border-radius: var(--radius-sm);
background: var(--soft-grove-75);
color: var(--graphite-drive);
font-size: var(--font-size-body-sm);
line-height: var(--line-height-body-sm);
}
.catalog-note--warning { background: var(--path-clay-25); }
/* Nul vrije wagens. Een leeg grid leest als een fout, deze regel zegt wat er
aan de hand is en wat de bezoeker kan doen. */
.catalog-leeg {
grid-column: 1 / -1;
margin: 0;
padding: var(--space-lg) var(--space-md);
border-radius: var(--radius-md);
background: var(--white);
color: var(--graphite-50);
text-align: center;
font-size: var(--font-size-body);
line-height: var(--line-height-body);
}
/* Voertuigfoto in de kaart (komt van de publieke API) */
/* Padding op het beeld, niet op het vak: zo houdt .car-card__media zijn
16:10 en zijn witte vlak, en komt alleen de wagen naar binnen. box-sizing
border-box is daarvoor nodig, anders duwt de padding het beeld buiten het
vak. 20 op desktop, 15 op tablet, 10 op mobiel. */
/* Terugval voor een model dat de API teruggeeft en waarvoor wij nog geen
uitsnede hebben. Sinds Bens vier renders is dat er geen enkel meer, maar
de vloot wijzigt, dus de terugval blijft. Een leeg wit vak leest als een
fout, dit icoon als "beeld volgt". Phosphor, zoals sectie 13 vraagt. */
.car-card__geen-beeld {
width: 48px;
height: 48px;
margin: auto;
color: var(--graphite-25);
}
.car-card__media { display: flex; align-items: center; justify-content: center; }
.car-card__media img {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: var(--space-sm);
object-fit: contain;
display: block;
}
/* Deze twee moeten NA de basisregel staan. Ze hadden dezelfde specificiteit
en stonden eerder in het bestand, waardoor de basisregel ze overal
overschreef en de padding op elk formaat 20px bleef.
De middenstap van 20 naar 10 is --space-card-inset, de benoemde
uitzondering die ook de binnenruimte van de dealkaart geeft. */
@media (max-width: 1024px) {
.car-card__media img { padding: var(--space-card-inset); }
}
@media (max-width: 640px) {
.car-card__media img { padding: var(--space-nested); }
}
/* ---- 21. Wagen-detailpagina (wireframe 02) ---- */
.breadcrumb {
max-width: var(--container);
margin: 0 auto;
padding: calc(var(--nav-clearance) + var(--space-sm)) var(--gutter-desktop) 0;
font-size: var(--font-size-body-sm);
line-height: var(--line-height-body-sm);
color: var(--muted);
}
/* In een page-hero staat het kruimelpad binnen de container. Die draagt daar
al de maximumbreedte en de gutter, en de hero zelf de nav-clearance, dus
hier alleen nog de afstand naar het label eronder. */
.page-hero .breadcrumb { max-width: none; margin: 0 0 var(--space-nested); padding: 0; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--b2c-key); }
.breadcrumb span { color: var(--graphite-drive); }
.wagen-detail {
display: grid;
grid-template-columns: 1fr 400px;
gap: var(--space-md);
align-items: start;
background: var(--white);
border-radius: var(--radius-md);
padding: var(--space-md);
}
.wagen-detail__media {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 16 / 9;
background: var(--off-white);
border-radius: var(--radius-sm);
overflow: hidden;
}
.wagen-detail__media img { width: 100%; height: 100%; object-fit: contain; }
.wagen-detail__caption { margin-top: var(--space-sm); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--muted); }
/* Bestelpaneel */
.wagen-order {
background: var(--soft-grove-75);
border-radius: var(--radius-md);
padding: var(--space-sm);
}
.wagen-order__title { font-size: var(--font-size-third-title); line-height: var(--line-height-third-title); font-weight: var(--font-weight-medium); margin: 0 0 var(--space-nested); }
.wagen-order__price { font-size: var(--font-size-second-large-title); line-height: var(--line-height-second-large-title); font-weight: var(--font-weight-medium); margin: 0; }
.wagen-order__meta { font-size: var(--font-size-caption); line-height: var(--line-height-caption); color: var(--muted); margin: var(--space-xs) 0 0; }
.wagen-order__split { font-size: var(--font-size-caption); line-height: var(--line-height-caption); color: var(--muted); margin: 0 0 var(--space-sm); }
.wagen-order .form-field { margin-bottom: var(--space-sm); }
.wagen-order .form-field input,
.wagen-order .form-field select { background: var(--white); }
.wagen-order__divider { height: 1px; background: var(--hairline); margin: var(--space-sm) 0; border: 0; }
.wagen-order__included-title { font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); font-weight: var(--font-weight-medium); margin: 0 0 var(--space-nested); }
.wagen-order__included { list-style: none; margin: 0 0 var(--space-sm); padding: 0; display: flex; flex-direction: column; gap: var(--space-nested); }
.wagen-order__included li { display: flex; align-items: flex-start; gap: var(--space-nested); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); }
.wagen-order__included svg { width: 20px; height: 20px; flex: none; margin-top: calc((var(--line-height-body-sm) - var(--space-sm)) / 2); color: var(--b2c-key); }
.wagen-order .btn { width: 100%; justify-content: center; }
.wagen-order__note { font-size: var(--font-size-caption); line-height: var(--line-height-caption); color: var(--muted); margin: var(--space-nested) 0 0; }
@media (max-width: 1024px) {
.wagen-detail { grid-template-columns: 1fr; }
.breadcrumb { padding-top: calc(var(--nav-clearance) + var(--space-nested)); }
}
@media (max-width: 640px) {
.wagen-detail { padding: var(--space-sm); }
.breadcrumb { padding: var(--space-2xl) var(--space-sm) 0; }
}
/* ---- 22. Aanvraag-modal (wireframe 03) ---- */
/* Native