/* latin */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yw.woff2) format('woff2'); } /* latin */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yw.woff2) format('woff2'); } /* latin */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yw.woff2) format('woff2'); } /* latin */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/V8mDoQDjQSkFtoMM3T6r8E7mPbF4Cw.woff2) format('woff2'); } /* latin */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/V8mDoQDjQSkFtoMM3T6r8E7mPbF4Cw.woff2) format('woff2'); } /* latin */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/V8mDoQDjQSkFtoMM3T6r8E7mPbF4Cw.woff2) format('woff2'); } /* ─── Custom properties ────────────────────────────────────────────────────── */ :root { color-scheme: light; --bg: #F6F6F4; --surface: #FFFFFF; --border: #E4E4E0; --border-strong: #CCCCCA; --text: #111111; --text-muted: #555555; --text-faint: #717171; --accent: #0F766E; --accent-hover: #0B5E5D; --accent-subtle: rgba(15, 118, 110, 0.08); --accent-text: #FFFFFF; --accent-2: #4F46E5; --accent-2-hover: #4338CA; --accent-2-subtle: rgba(79, 70, 229, 0.07); --accent-3: #C2410C; --accent-3-hover: #9A3412; --accent-3-subtle: rgba(194, 65, 12, 0.08); --success: #22A06B; --success-subtle: rgba(34, 160, 107, 0.08); --warning: #D97706; --warning-subtle: rgba(217, 119, 6, 0.06); --error: #E03E3E; --error-dark: #B91C1C; /* Dynamische tint die in dark mode overschreven wordt. Gebruikt voor section-banden, calculator-panel, FAQ-headers, etc. die in lightmode een subtiele off-white tint hadden en in darkmode iets boven het oppervlak moeten "zweven". */ --surface-2: #FAFAF8; --surface-2-strong:#F0F0EC; /* Veelgebruikte rgba-overlays voor section-banden. Tot nu toe stonden de gradient-kleuren hardcoded; via deze tokens werken ze in beide thema's. */ --section-accent-tint: rgba(15, 118, 110, 0.08); --section-accent-2-tint: rgba(79, 70, 229, 0.08); --section-accent-3-tint: rgba(194, 65, 12, 0.09); --section-success-tint: rgba(34, 160, 107, 0.08); --section-error-tint: rgba(239, 68, 68, 0.07); --shadow-card: 0 4px 16px rgba(15, 118, 110, 0.08); --shadow-card-2: 0 6px 20px rgba(15, 118, 110, 0.10); --shadow-card-3: 0 6px 20px rgba(194, 65, 12, 0.10); --hero-overlay: linear-gradient(to bottom, rgba(246,246,244,0.88) 0%, rgba(246,246,244,0.78) 50%, rgba(246,246,244,0.92) 100%); --font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --font-heading: 'Space Grotesk', system-ui, -apple-system, sans-serif; --container: 1120px; --gap: 1.5rem; --gap-lg: 3rem; --gap-xl: 5rem; --radius: 8px; --radius-lg: 12px; --transition: 140ms ease; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 2rem; --text-4xl: 2.75rem; --text-5xl: 3.5rem; } /* ─── Dark mode ────────────────────────────────────────────────────────────────── Strategie: - [data-theme="dark"] op : expliciete dark-keuze van gebruiker (via toggle) - [data-theme="light"]: expliciete light-keuze (ook bij OS=dark) - Geen data-theme of data-theme="auto": volg OS via prefers-color-scheme De toggle-JS in includes/header.php zet data-theme vóór render, zodat er geen "flash" optreedt op een donker apparaat. ⚠️ ONDERHOUD: de variabelen onder [data-theme="dark"] en onder de @media (prefers-color-scheme: dark)-block hieronder MOETEN identiek zijn. Bij toevoegen van een nieuwe variabele beide blokken bijwerken! Quick-check via shell: awk '/^\[data-theme="dark"\]/,/^}/' assets/css/style.css | grep -oE -- '--[a-z0-9-]+:' | sort -u > /tmp/a awk '/prefers-color-scheme: dark/,/^}/' assets/css/style.css | grep -oE -- '--[a-z0-9-]+:' | sort -u > /tmp/b diff /tmp/a /tmp/b */ [data-theme="dark"] { color-scheme: dark; --bg: #0F1115; --surface: #181B22; --surface-2: #1F232C; --surface-2-strong:#262B35; --border: #2A2F38; --border-strong: #3A4049; --text: #ECECEC; --text-muted: #A8ADB5; --text-faint: #8E939B; /* Accent in dark mode is bewust een stuk lichter (mint i.p.v. teal) zodat hij leesbaar is op de donkere achtergrond. Dat maakt witte tekst op de accent- achtergrond echter ondercontrast (≈2:1, faalt WCAG AA). Daarom flippen we --accent-text naar donker: donkere tekst op heldere mint = ~17:1 contrast. */ --accent: #2DD4BF; --accent-hover: #5EEAD4; --accent-subtle: rgba(45, 212, 191, 0.12); --accent-text: #07211D; --accent-2: #818CF8; --accent-2-hover: #A5B4FC; --accent-2-subtle: rgba(129, 140, 248, 0.14); --accent-3: #FB923C; --accent-3-hover: #FDBA74; --accent-3-subtle: rgba(251, 146, 60, 0.13); --success: #34D399; --success-subtle: rgba(52, 211, 153, 0.13); --warning: #FBBF24; --warning-subtle: rgba(251, 191, 36, 0.13); --error: #F87171; --error-dark: #EF4444; --section-accent-tint: rgba(45, 212, 191, 0.10); --section-accent-2-tint: rgba(129, 140, 248, 0.10); --section-accent-3-tint: rgba(251, 146, 60, 0.10); --section-success-tint: rgba(52, 211, 153, 0.10); --section-error-tint: rgba(248, 113, 113, 0.10); --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.40); --shadow-card-2: 0 6px 20px rgba(0, 0, 0, 0.50); --shadow-card-3: 0 6px 20px rgba(0, 0, 0, 0.50); --hero-overlay: linear-gradient(to bottom, rgba(15,17,21,0.93) 0%, rgba(15,17,21,0.85) 50%, rgba(15,17,21,0.96) 100%); } /* Auto-mode: volg OS-voorkeur tenzij gebruiker expliciet een keuze heeft gemaakt */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --bg: #0F1115; --surface: #181B22; --surface-2: #1F232C; --surface-2-strong:#262B35; --border: #2A2F38; --border-strong: #3A4049; --text: #ECECEC; --text-muted: #A8ADB5; --text-faint: #8E939B; --accent: #2DD4BF; --accent-hover: #5EEAD4; --accent-subtle: rgba(45, 212, 191, 0.12); --accent-text: #07211D; --accent-2: #818CF8; --accent-2-hover: #A5B4FC; --accent-2-subtle: rgba(129, 140, 248, 0.14); --accent-3: #FB923C; --accent-3-hover: #FDBA74; --accent-3-subtle: rgba(251, 146, 60, 0.13); --success: #34D399; --success-subtle: rgba(52, 211, 153, 0.13); --warning: #FBBF24; --warning-subtle: rgba(251, 191, 36, 0.13); --error: #F87171; --error-dark: #EF4444; --section-accent-tint: rgba(45, 212, 191, 0.10); --section-accent-2-tint: rgba(129, 140, 248, 0.10); --section-accent-3-tint: rgba(251, 146, 60, 0.10); --section-success-tint: rgba(52, 211, 153, 0.10); --section-error-tint: rgba(248, 113, 113, 0.10); --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.40); --shadow-card-2: 0 6px 20px rgba(0, 0, 0, 0.50); --shadow-card-3: 0 6px 20px rgba(0, 0, 0, 0.50); --hero-overlay: linear-gradient(to bottom, rgba(15,17,21,0.93) 0%, rgba(15,17,21,0.85) 50%, rgba(15,17,21,0.96) 100%); } } /* Geen onnodige transition bij eerste paint — alleen wanneer een gebruiker actief tussen thema's wisselt. .theme-transitioning wordt door theme-toggle.js even op gezet en daarna weer verwijderd. */ .theme-transitioning, .theme-transitioning *, .theme-transitioning *::before, .theme-transitioning *::after { transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important; } /* ─── Reset ─────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font); font-size: var(--text-base); line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1; } img, svg { display: block; max-width: 100%; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } ul { list-style: none; color: var(--text-muted); } button { font-family: var(--font); cursor: pointer; border: none; background: none; } /* Toetsenbordnavigatie: zichtbare focus-ring op interactieve elementen */ :focus { outline: none; } a:focus-visible, button:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* ─── Layout ─────────────────────────────────────────────────────────────────── */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gap); } .section { padding-block: var(--gap-xl); } .section-sm { padding-block: var(--gap-lg); } /* Homepage krijgt iets meer lucht */ .page-home .section { padding-block: 6.5rem; } /* Footer direct na laatste sectie: geen extra marge, de sectie-padding is genoeg */ .page-home .site-footer { margin-top: 0; } /* ─── Typography ─────────────────────────────────────────────────────────────── */ h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; color: var(--text); } h1 { font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl)); } h2 { font-size: clamp(var(--text-2xl), 3.5vw, var(--text-3xl)); } h3 { font-size: var(--text-xl); font-weight: 600; } h4 { font-size: var(--text-lg); font-weight: 600; } p { color: var(--text-muted); } p + p { margin-top: 1em; } .lead { font-size: var(--text-lg); color: var(--text-muted); line-height: 1.7; max-width: 680px; } .eyebrow { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.75rem; } .eyebrow-blue { color: var(--accent-2); } .eyebrow-green { color: var(--success); } .eyebrow-amber { color: var(--accent-3); } /* ─── Read progress bar ──────────────────────────────────────────────────────── */ #read-progress-bar { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: var(--accent); z-index: 9999; transition: width 80ms linear; pointer-events: none; } /* ─── Buttons ─────────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: var(--radius); font-size: var(--text-base); font-weight: 600; line-height: 1; transition: background var(--transition), color var(--transition), border-color var(--transition); white-space: nowrap; } .btn-primary { background: var(--accent); color: var(--accent-text); border: 2px solid var(--accent); } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-text); } .btn-amber { background: var(--accent-3); color: var(--accent-text); border: 2px solid var(--accent-3); } .btn-amber:hover { background: var(--accent-3-hover); border-color: var(--accent-3-hover); color: var(--accent-text); } .btn-ghost { background: transparent; color: var(--text-muted); border: 2px solid var(--border-strong); } .btn-ghost:hover { color: var(--text); border-color: var(--text-muted); } .btn-outline { background: transparent; color: var(--accent); border: 1px solid var(--accent); } .btn-outline:hover { background: var(--accent); color: var(--accent-text); } .btn-lg { padding: 1rem 2rem; font-size: var(--text-lg); border-radius: var(--radius-lg); } /* ─── Header & Navigation ─────────────────────────────────────────────────────── */ /* Skip-to-content link: alleen zichtbaar bij keyboard-focus. Stelt screen reader/keyboard-gebruikers in staat de nav over te slaan. */ .skip-to-content { position: absolute; top: 0.5rem; left: 0.5rem; z-index: 200; padding: 0.6rem 1rem; background: var(--accent); color: var(--accent-text); font-weight: 600; text-decoration: none; border-radius: var(--radius); transform: translateY(-150%); transition: transform 180ms ease; } .skip-to-content:focus, .skip-to-content:focus-visible { transform: translateY(0); outline: 2px solid var(--text); outline-offset: 2px; } .site-header { position: sticky; top: 0; z-index: 100; background: var(--surface); border-bottom: 1px solid var(--border); } .site-header .container { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: var(--gap); } .logo { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 600; color: var(--text); letter-spacing: -0.03em; text-decoration: none; flex-shrink: 0; display: inline-flex; align-items: baseline; gap: 0; } .logo:hover { color: var(--text); } .logo-prefix { font-weight: 500; } .logo-brand { display: inline-block; position: relative; font-weight: 700; border-radius: 5px; box-shadow: inset 0 0 0 2px var(--accent); margin-inline: 0.1em; line-height: 1; transform: skewY(-3deg) translateZ(0); margin: 0 .5rem 0 .25rem; } .logo-brand-filled, .logo-brand-empty { display: inline-block; padding-block: calc(0.05rem + 2px); } .logo-brand-filled { padding-inline-start: calc(0.3rem + 2px); background: var(--accent); color: var(--accent-text); /* Volledige 5px radius (matcht parent) — geen border meer die ruimte inneemt */ border-radius: 5px 0 0 5px; } .logo-brand-empty { padding-inline-end: calc(0.3rem + 2px); background: var(--accent-subtle); color: var(--accent); border-radius: 0 5px 5px 0; } /* Battery terminal nub */ .logo-brand::after { content: ''; position: absolute; right: -5px; top: 50%; transform: translateY(-50%); width: 4px; height: 40%; background: var(--accent); border-radius: 0 2px 2px 0; } .logo-tld { font-weight: 400; color: var(--text-faint); } .main-nav { display: flex; align-items: center; } .nav-list { display: flex; align-items: center; gap: 0.25rem; } .nav-list > li > a, .nav-dropdown-toggle { display: flex; align-items: center; gap: 0.3rem; padding: 0.5rem 0.75rem; border-radius: var(--radius); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); transition: color var(--transition), background var(--transition); text-decoration: none; white-space: nowrap; } .nav-list > li > a:hover, .nav-dropdown-toggle:hover, .nav-dropdown-toggle[aria-expanded="true"] { color: var(--text); background: var(--bg); } .header-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .btn-nav-cta { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--accent); color: var(--accent-text); padding: 0.5rem 1rem; border-radius: var(--radius); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 500; text-decoration: none; white-space: nowrap; transition: background var(--transition), color var(--transition); } .btn-nav-cta:hover { background: var(--accent-hover); color: var(--accent-text); } /* Op de huidige pagina blijft de CTA in de layout (geen verspringen), maar is visueel weg en automatisch uit tab-volgorde + screen reader. */ .btn-nav-cta.is-current-page { visibility: hidden; } /* In het verticale mobile-menu mag de CTA wel volledig uit de flow, want daar veroorzaakt verwijderen geen layout-shift. */ .mobile-menu .btn-primary.is-current-page { display: none; } .has-dropdown { position: relative; } .chevron { font-size: 0.7em; transition: transform var(--transition); display: inline-block; } .nav-dropdown-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); } .dropdown { position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0.5rem; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--transition), transform var(--transition), visibility var(--transition); } /* Onzichtbare brug tussen nav-item en dropdown zodat de hover niet breekt */ .dropdown::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; } .has-dropdown.is-open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown li a { display: block; padding: 0.5rem 0.75rem; font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); border-radius: var(--radius); transition: color var(--transition), background var(--transition); } .dropdown li a:hover { color: var(--text); background: var(--bg); } /* Theme toggle button: zon (= light), maan (= dark), halve cirkel (= auto/OS). Welk icoon zichtbaar is hangt af van data-theme op . */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: 0.25rem; padding: 0; border-radius: 999px; color: var(--text-muted); background: transparent; border: 1.5px solid transparent; flex-shrink: 0; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); } .theme-toggle:hover { background: var(--accent-subtle); color: var(--accent); border-color: var(--accent-subtle); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-toggle .theme-toggle-icon { display: none; font-size: 1.25rem; line-height: 1; } /* Het icoon toont wat klikken DOET, niet wat actief is: - In light mode (huidig licht): toon maan-icoon → klikken switcht naar donker - In dark mode (huidig donker): toon zon-icoon → klikken switcht naar licht */ .theme-toggle .theme-toggle-icon-dark { display: inline-block; } /* Auto-mode + OS=dark: toon zon (klikken = light) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .theme-toggle-icon-dark { display: none; } :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .theme-toggle-icon-light { display: inline-block; } } /* Expliciet light: toon maan (klikken = dark) */ [data-theme="light"] .theme-toggle .theme-toggle-icon-dark { display: inline-block; } [data-theme="light"] .theme-toggle .theme-toggle-icon-light { display: none; } /* Expliciet dark: toon zon (klikken = light) */ [data-theme="dark"] .theme-toggle .theme-toggle-icon-light { display: inline-block; } [data-theme="dark"] .theme-toggle .theme-toggle-icon-dark { display: none; } /* Theme-toggle in footer-bottom: kleine ghost-icon naast andere footer-links */ .theme-toggle-footer { width: auto; height: auto; padding: 0.25rem 0.4rem; margin-left: 0; color: var(--text-faint); border-radius: 4px; } .theme-toggle-footer:hover { background: var(--bg); border-color: transparent; color: var(--text); } .theme-toggle-footer .theme-toggle-icon { font-size: 1rem; } .hamburger { display: none; flex-direction: column; gap: 5px; padding: 0.5rem; border-radius: var(--radius); flex-shrink: 0; } .hamburger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform var(--transition), opacity var(--transition); } .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-menu { display: none; position: fixed; inset: 64px 0 0 0; background: var(--surface); border-top: 1px solid var(--border); padding: 1.5rem var(--gap); overflow-y: auto; z-index: 99; } .mobile-menu.open { display: block; } .mobile-menu a { display: block; padding: 0.75rem 0; font-size: var(--text-base); font-weight: 500; color: var(--text-muted); border-bottom: 1px solid var(--border); } .mobile-menu a:hover { color: var(--text); } .mobile-menu-group { margin-top: 0; } .mobile-menu-group-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.85rem 0; font-size: var(--text-base); font-weight: 600; color: var(--text); background: none; border: none; border-bottom: 1px solid var(--border); cursor: pointer; text-align: left; } .mobile-menu-group-toggle:hover { color: var(--accent); } .mobile-menu-chevron { font-size: 1rem; color: var(--text-faint); transition: transform 220ms ease; flex-shrink: 0; } .mobile-menu-group.open .mobile-menu-chevron { transform: rotate(180deg); } .mobile-menu-group.open .mobile-menu-group-toggle { border-bottom: none; } .mobile-menu-group-body { overflow: hidden; max-height: 0; transition: max-height 280ms ease; } .mobile-menu-group.open .mobile-menu-group-body { max-height: 500px; border-bottom: 1px solid var(--border); } .mobile-menu-group-body a { padding-left: 0.75rem; border-bottom: none; } .mobile-menu-group-body a:last-child { padding-bottom: 0.5rem; } .mobile-menu-all { color: var(--accent) !important; font-weight: 600 !important; } .mobile-menu .btn-primary { display: flex; justify-content: center; margin-top: 1.5rem; width: 100%; padding: 0.75rem 1.5rem; color: var(--accent-text); border-bottom: 2px solid var(--accent); } .mobile-menu .btn-primary:hover { color: var(--accent-text); background: var(--accent-hover); border-color: var(--accent-hover); } /* ─── Hero ───────────────────────────────────────────────────────────────────── */ /* ─── Section headers ─────────────────────────────────────────────────────────── */ .section-header { margin-bottom: var(--gap-lg); } .section-header.centered { text-align: center; } .section-header.centered .lead { margin-inline: auto; } .section-header h2 { margin-bottom: 0.75rem; } /* ─── Card grid ───────────────────────────────────────────────────────────────── */ .card-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .card-grid-3 { grid-template-columns: repeat(3, 1fr); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; transition: border-color var(--transition); } .card:hover { border-color: var(--border-strong); } .card-link { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; color: var(--text); text-decoration: none; transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; } .card-link:hover { border-color: var(--accent); color: var(--text); transform: translateY(-2px); box-shadow: var(--shadow-card); } .card-link-arrow { margin-top: auto; padding-top: 1rem; color: var(--accent); font-size: 1.1rem; line-height: 1; opacity: 0.5; transition: opacity var(--transition), transform var(--transition); } .card-link:hover .card-link-arrow { opacity: 1; transform: translateX(4px); } .card-abbr { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem; } .card h3 { margin-bottom: 0.5rem; } .card p, .card-link p { font-size: var(--text-sm); margin-top: 0.5rem; } /* ─── How it works ─────────────────────────────────────────────────────────────── */ .steps { display: grid; gap: var(--gap); grid-template-columns: repeat(3, 1fr); counter-reset: steps; } .step { padding: 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); counter-increment: steps; } .step-number { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--accent-subtle); border-radius: 50%; font-size: var(--text-sm); font-weight: 700; color: var(--accent); margin-bottom: 1rem; } .step h3 { margin-bottom: 0.5rem; font-size: var(--text-lg); } /* ─── Pros & cons ─────────────────────────────────────────────────────────────── */ .pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); } .pros-list, .cons-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; } .pros-list h3, .cons-list h3 { font-size: var(--text-base); margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); } .pros-list li, .cons-list li { display: flex; gap: 0.6rem; padding: 0.5rem 0; font-size: var(--text-sm); color: var(--text-muted); border-bottom: 1px solid var(--border); } .pros-list li:last-child, .cons-list li:last-child { border-bottom: none; } .pro-icon, .con-icon { flex-shrink: 0; font-size: var(--text-sm); margin-top: 0.1em; } .pro-icon { color: var(--success); } .con-icon { color: var(--error); } /* ─── FAQ ─────────────────────────────────────────────────────────────────────── */ .faq-list { max-width: 720px; margin-inline: auto; } .faq-item { border-bottom: 1px solid var(--border); } .faq-question { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; padding: 1.25rem 0; font-size: var(--text-base); font-weight: 600; color: var(--text); text-align: left; background: none; border: none; cursor: pointer; transition: color var(--transition); } .faq-question:hover { color: var(--accent); } .faq-icon { flex-shrink: 0; width: 20px; height: 20px; position: relative; } .faq-icon::before, .faq-icon::after { content: ''; position: absolute; background: currentColor; border-radius: 2px; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: transform var(--transition), opacity var(--transition); } .faq-icon::before { width: 12px; height: 2px; } .faq-icon::after { width: 2px; height: 12px; } .faq-item.open .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; } .faq-answer { display: none; padding-bottom: 1.25rem; font-size: var(--text-sm); color: var(--text-muted); line-height: 1.7; } .faq-item.open .faq-answer { display: block; } /* ─── Comparison table ─────────────────────────────────────────────────────────── */ .compare-table-wrapper { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); } .compare-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .compare-table th { padding: 1rem 1.25rem; text-align: left; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); background: var(--bg); border-bottom: 1px solid var(--border); white-space: nowrap; } .compare-table td { padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--border); color: var(--text-muted); vertical-align: middle; } .compare-table tr:last-child td { border-bottom: none; } .compare-table td:first-child { font-weight: 500; color: var(--text); white-space: nowrap; } .compare-table tr:hover td { background: var(--bg); } .check { color: var(--success); font-weight: 700; } .cross { color: var(--error); } .neutral { color: var(--text-faint); } /* ─── Breadcrumb ─────────────────────────────────────────────────────────────────── */ .breadcrumb { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: var(--text-sm); color: var(--text-faint); padding-top: 2.5rem; margin-bottom: 2rem; } .breadcrumb a { color: var(--accent-2); } .breadcrumb a:hover { color: var(--accent-2-hover); } .breadcrumb-sep { color: var(--text-faint); } /* ─── Quiz ──────────────────────────────────────────────────────────────────────── */ .quiz-wrapper { max-width: 680px; margin-inline: auto; padding-block: var(--gap-lg); } /* ─── Quiz car track ────────────────────────────────────────────────────────── */ .quiz-car-track { position: relative; padding-top: 44px; margin-bottom: 1rem; overflow: hidden; } .quiz-car { position: absolute; bottom: -2px; left: 0; line-height: 0; will-change: left; transition: left 500ms cubic-bezier(0.34, 1.4, 0.64, 1); } .quiz-car.quiz-car--finish { transition: none; animation: car-drive-off 700ms cubic-bezier(0.4, 0, 1, 1) forwards; } @keyframes car-drive-off { 0% { transform: translateX(0) scaleX(1) scaleY(1); } 12% { transform: translateX(-7px) scaleX(0.88) scaleY(1.1); } 100% { transform: translateX(800px) scaleX(1.1) scaleY(0.92); opacity: 0; } } /* ─── Quiz steps ─────────────────────────────────────────────────────────────── */ .quiz-steps { display: flex; gap: 5px; margin-bottom: 0; } .quiz-dot { flex: 1; height: 3px; border-radius: 2px; background: var(--border); position: relative; overflow: hidden; } .quiz-dot.done { background: var(--accent); opacity: 0.35; } .quiz-dot.current { background: var(--border); } .quiz-dot.current::after { content: ''; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left center; animation: dot-fill 200ms ease forwards; } @keyframes dot-fill { to { transform: scaleX(1); } } .quiz-back-btn { display: flex; align-items: center; gap: 0.35rem; font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); padding: 0.35rem 0.75rem; border-radius: var(--radius); margin-top: 1.25rem; transition: color var(--transition), background var(--transition); } .quiz-back-btn:hover { color: var(--text); background: var(--bg); } .question-slide { animation: slideIn 220ms ease forwards; } .question-slide.exit { animation: slideOut 200ms ease forwards; } @keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-20px); } } @keyframes slideInBack { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } .question-slide.slide-back { animation: slideInBack 220ms ease forwards; } .question-text { font-size: clamp(var(--text-xl), 3vw, var(--text-2xl)); margin-bottom: 0.75rem; font-weight: 700; } .question-hint { font-size: var(--text-sm); color: var(--text-faint); margin-bottom: 1rem; } .answers { display: flex; flex-direction: column; gap: 0.625rem; } .answer-card { display: flex; align-items: center; width: 100%; padding: 1rem 1.25rem; border: 1.5px solid var(--border); border-radius: var(--radius-lg); font-size: var(--text-base); font-weight: 500; color: var(--text); text-align: left; cursor: pointer; position: relative; overflow: hidden; /* Gradient background: accent-subtle on left half, surface on right half. Background-position slides left→right on hover to create a fill sweep. */ background: linear-gradient(to right, var(--accent-subtle) 50%, var(--surface) 50%); background-size: 200% 100%; background-position: right center; transition: background-position 230ms ease, border-color var(--transition), color var(--transition); } @media (hover: hover) and (pointer: fine) { .answer-card:hover:not(:disabled) { background-position: left center; border-color: var(--accent); } } .answer-card.selected { background-position: left center; border-color: var(--accent); color: var(--text); } .answer-card:disabled { cursor: default; } /* Text label sits above the ripple */ .answer-label { position: relative; z-index: 1; pointer-events: none; } /* Ripple that spreads from the click point */ .answer-ripple { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: rgba(15, 118, 110, 0.22); pointer-events: none; animation: answer-ripple 550ms ease-out forwards; } @keyframes answer-ripple { from { transform: translate(-50%, -50%) scale(0); opacity: 1; } to { transform: translate(-50%, -50%) scale(200); opacity: 0; } } /* ─── Quiz initial loading screen ────────────────────────────────────────────────── */ .quiz-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 4rem; text-align: center; opacity: 0; /* Fade-in pas na ~250ms zodat snelle laad geen flits geeft */ animation: quizLoadingFadeIn 220ms ease 250ms forwards; transition: opacity 180ms ease; } .quiz-loading.is-hidden { opacity: 0; pointer-events: none; /* Override de fade-in animatie zodat is-hidden direct effect heeft */ animation: none; } .quiz-loading-spinner { width: 2.5rem; height: 2.5rem; margin-bottom: 1.25rem; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: quizSpin 800ms linear infinite; } .quiz-loading-text { font-size: var(--text-base); color: var(--text-muted); font-weight: 500; } @keyframes quizSpin { to { transform: rotate(360deg); } } @keyframes quizLoadingFadeIn { to { opacity: 1; } } /* ─── Quiz completion screen ─────────────────────────────────────────────────────── */ .quiz-completion { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 4rem; text-align: center; } .quiz-completion-icon { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--accent); color: var(--accent-text); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; margin-bottom: 1.25rem; animation: scaleIn 300ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .quiz-completion-text { font-size: var(--text-lg); color: var(--text-muted); font-weight: 500; } @keyframes scaleIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* ─── Result page ────────────────────────────────────────────────────────────────── */ .result-hero { padding-block: var(--gap-lg) var(--gap); margin-bottom: 1rem; } .result-label { font-size: var(--text-sm); font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.5rem; } .result-title { font-size: clamp(var(--text-3xl), 5vw, var(--text-4xl)); margin-bottom: 0.5rem; } .result-abbr { display: inline-block; font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); background: var(--accent-subtle); border: 1px solid var(--accent); padding: 0.2rem 0.6rem; border-radius: var(--radius); margin-bottom: 1.25rem; } .result-tagline { font-size: var(--text-lg); color: var(--text-muted); max-width: 600px; margin-bottom: 1.5rem; } /* ─── Tied result: tabs + panels ─────────────────────────────────────────────── */ .result-hero-tied { padding-bottom: 0.5rem; } .tied-tabs-scroll { position: relative; margin-block: 1.5rem 2rem; border-bottom: 1px solid var(--border); } .tied-tabs-scroll::before, .tied-tabs-scroll::after { content: ''; position: absolute; top: 0; bottom: 1px; width: 32px; pointer-events: none; opacity: 0; transition: opacity 180ms ease; z-index: 1; } .tied-tabs-scroll::before { left: 0; background: linear-gradient(to right, var(--bg), rgba(246, 246, 244, 0)); } .tied-tabs-scroll::after { right: 0; background: linear-gradient(to left, var(--bg), rgba(246, 246, 244, 0)); } .tied-tabs-scroll.show-fade-left::before { opacity: 1; } .tied-tabs-scroll.show-fade-right::after { opacity: 1; } .tied-tabs { display: flex; gap: 0.25rem; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; } .tied-tabs::-webkit-scrollbar { display: none; } .tied-tab { appearance: none; background: none; border: none; padding: 0.75rem 1.25rem; font-family: var(--font-heading); font-size: var(--text-base); font-weight: 600; color: var(--text-faint); cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--transition), border-color var(--transition); } .tied-tab:hover { color: var(--text-muted); } .tied-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); } .tied-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); } .tied-panel[hidden] { display: none; } .tied-panel-cta { margin-top: 2rem; } /* ─── Share modal ────────────────────────────────────────────────────────────── */ .share-modal { position: fixed; inset: 0; z-index: 500; display: flex; align-items: flex-end; justify-content: center; } .share-modal[hidden] { display: none; } .share-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.25); backdrop-filter: blur(5px); } .share-modal-box { position: relative; background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 1.5rem; width: 100%; max-width: 420px; z-index: 1; animation: modal-slide-up 220ms cubic-bezier(0.34, 1.3, 0.64, 1) forwards; } @keyframes modal-slide-up { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @media (min-width: 640px) { .share-modal { align-items: center; } .share-modal-box { border-radius: var(--radius-lg); } @keyframes modal-slide-up { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } } .share-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; } .share-modal-title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 600; color: var(--text); } .share-modal-close { color: var(--text-faint); padding: 0.25rem; border-radius: var(--radius); font-size: 1.1rem; transition: color var(--transition); } .share-modal-close:hover { color: var(--text); } .share-modal-options { display: flex; flex-direction: column; gap: 0.5rem; } .share-option { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 1rem; border-radius: var(--radius); border: 1.5px solid var(--border); color: var(--text); background: var(--surface); font-size: var(--text-base); font-weight: 500; font-family: var(--font); text-decoration: none; cursor: pointer; transition: background var(--transition), border-color var(--transition); width: 100%; text-align: left; } .share-option:hover { background: var(--bg); border-color: var(--border-strong); color: var(--text); } .share-option i { font-size: 1.2rem; color: var(--text-muted); flex-shrink: 0; } .share-option--copied, .share-option--copied:hover { border-color: var(--accent); color: var(--accent); } .share-option--copied i { color: var(--accent); } .result-reasons { border-left: 3px solid var(--accent); padding: 1.25rem 0 1.25rem 1.5rem; margin-block: 2.5rem; background: var(--accent-subtle); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; padding-right: 1.5rem; margin-top: 1rem; } .result-reasons h2 { font-size: var(--text-xl); margin-bottom: 1rem; color: var(--text); } .result-reasons li { position: relative; padding: 0.35rem 0 0.35rem 1.5rem; font-size: var(--text-base); color: var(--text-muted); } .result-reasons li::before { content: '→'; color: var(--accent); font-weight: 700; position: absolute; left: 0; top: 0.35rem; } .result-warnings { border-left: 3px solid var(--warning); padding: 1.25rem 1.5rem 1.25rem 1.5rem; margin-block: 2.5rem; background: rgba(217, 119, 6, 0.06); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; margin-top: 1rem; } .result-warnings h2 { font-size: var(--text-xl); margin-bottom: 1rem; color: var(--text); } .result-warnings li { position: relative; padding: 0.35rem 0 0.35rem 1.5rem; font-size: var(--text-base); color: var(--text-muted); } .result-warnings li::before { content: '!'; color: var(--warning); font-weight: 700; position: absolute; left: 0; top: 0.35rem; width: 1em; text-align: center; } .result-warnings li a, .result-reasons li a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .result-warnings li a:hover, .result-reasons li a:hover { color: var(--accent-hover); } /* ─── Kostenvergelijking (aanbeveling) ────────────────────────────────────────── */ .result-savings { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; margin-block: 2rem; } .result-savings-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 1.25rem; } .result-savings-grid { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .result-savings-item { flex: 1; min-width: 110px; } .result-savings-fuel { display: block; font-size: var(--text-sm); color: var(--text-muted); margin-bottom: 0.2rem; } .result-savings-amount { display: block; font-size: var(--text-3xl); font-weight: 700; font-family: var(--font-heading); color: var(--text-faint); line-height: 1.1; } .result-savings-item--winner .result-savings-amount { color: var(--accent); } .result-savings-sep { font-size: var(--text-sm); color: var(--text-faint); font-weight: 500; flex-shrink: 0; padding-top: 1.4rem; /* align with amounts */ } .result-savings-besparing { font-size: var(--text-base); color: var(--text-muted); padding-top: 1rem; border-top: 1px solid var(--border); margin-bottom: 0.5rem; } .result-savings-besparing strong { color: var(--text); } .result-savings-cta { margin-top: 1rem; font-size: var(--text-sm); } .result-savings-disclaimer { font-size: var(--text-sm); color: var(--text-faint); margin-top: 0.6rem; margin-bottom: 0; } .runner-up { border-left: 3px solid var(--accent-2); padding: 1.25rem 0 1.25rem 1.5rem; margin-block: 2.5rem; background: var(--accent-2-subtle); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; padding-right: 1.5rem; } .runner-up-label { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-2); margin-bottom: 0.4rem; } .runner-up h3 { margin-bottom: 0.25rem; } .result-suitable { margin-top: 2.5rem; } .result-suitable h3 { margin-bottom: 1rem; } .result-cta { text-align: center; margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--border); } .result-cta h3 { margin-bottom: 0.5rem; } .result-cta p { margin-bottom: 1.25rem; } /* Answer chips (summary of user answers) */ .answer-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.5rem; } .answer-chip { font-size: 0.72rem; font-weight: 500; color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); border-radius: 100px; padding: 0.2rem 0.65rem; white-space: nowrap; } .btn-runner-up { background: transparent; color: var(--accent-2); border: 2px solid var(--accent-2); font-size: var(--text-sm); padding: 0.55rem 1.1rem; } .btn-runner-up:hover { background: var(--accent-2); color: var(--accent-text); } /* Full ranking */ .result-ranking { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--border); } .result-ranking-title { font-size: var(--text-sm); font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1.25rem; } .ranking-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; } .ranking-row:last-child { margin-bottom: 0; } .ranking-name { font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); width: 8rem; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ranking-row.is-winner .ranking-name { color: var(--text); font-weight: 700; } .ranking-bar-track { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; } .ranking-bar-fill { height: 100%; background: rgba(79, 70, 229, 0.32); border-radius: 3px; } .ranking-row.is-winner .ranking-bar-fill { background: var(--accent); } /* ─── Fuel type page ─────────────────────────────────────────────────────────────── */ /* Narrow article container (blog-breedte) */ .container-article { max-width: 780px; } /* All faq-lists inside article container use full width */ .container-article .faq-list { max-width: none; margin-inline: 0; } .fuel-page-hero { padding-block: var(--gap-lg) var(--gap); margin-bottom: var(--gap); } .fuel-page-hero h1 { margin-bottom: 0.75rem; } /* Inline article image (replaces full-width banner) */ .article-image { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: var(--radius-lg); display: block; margin-bottom: var(--gap-lg); } .for-who-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem var(--gap); margin-top: 1rem; margin-bottom: 1em; } .for-who-list li { display: flex; gap: 0.5rem; font-size: var(--text-base); color: var(--text-muted); } .for-who-list li::before { content: '✓'; color: var(--success); font-weight: 700; flex-shrink: 0; } .content-block { max-width: none; } .content-block h2 { margin-bottom: 0.875rem; } .content-block h3 { margin-bottom: 0.5rem; } .content-block p { margin-bottom: 1em; } .content-block p + h2 { margin-top: 2.25rem; } .content-block p + h3 { margin-top: 1.5rem; } .content-block ul + h2, .content-block ol + h2 { margin-top: 2.25rem; } .content-block ul + h3, .content-block ol + h3 { margin-top: 1.5rem; } .related-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } .related-link { font-size: var(--text-sm); font-weight: 500; padding: 0.4rem 0.875rem; border: 1.5px solid var(--border); border-radius: 100px; color: var(--text-muted); transition: border-color var(--transition), color var(--transition); } .related-link:hover { border-color: var(--accent-2); color: var(--accent-2); } /* ─── Advice block (situatie-pagina's) ──────────────────────────────────────────── */ .advice-block { border-left: 3px solid var(--accent); padding: 1.25rem 0 1.25rem 1.5rem; margin-block: 2.5rem; background: var(--accent-subtle); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; padding-right: 1.5rem; } .advice-block h2 { font-size: var(--text-xl); margin-bottom: 0.75rem; color: var(--text); } .advice-block p { margin-bottom: 1rem; } .advice-block .btn { margin-top: 0.25rem; } /* ─── Situatie overview cards ────────────────────────────────────────────────────── */ .situatie-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); margin-top: var(--gap); } .situatie-card { display: block; padding: 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); text-decoration: none; color: var(--text); transition: border-color var(--transition); } .situatie-card:hover { border-color: var(--accent); color: var(--text); } .situatie-card-label { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.4rem; } .situatie-card h3 { margin-bottom: 0.4rem; font-size: var(--text-base); } .situatie-card p { font-size: var(--text-sm); margin-top: 0.25rem; } /* ─── CTA block ─────────────────────────────────────────────────────────────────── */ .cta-block { background: var(--accent-subtle); border: 1px solid var(--accent); border-radius: var(--radius-lg); padding: 2.5rem; text-align: center; margin-top: var(--gap-lg); } /* Suppress top margin when cta-block is the first/only child in its section */ .cta-block:first-child { margin-top: 0; } .cta-block h2 { margin-bottom: 0.75rem; } .cta-block p { margin-bottom: 1.5rem; } /* ─── Woordenlijst ───────────────────────────────────────────────────────────────── */ .glossary-letter { font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-top: var(--gap-lg); margin-bottom: 0.25rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); } .glossary-term { padding: 1.1rem 0; scroll-margin-top: 84px; } .glossary-term h3 { font-size: var(--text-base); font-weight: 700; margin-bottom: 0.35rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem; } .glossary-term h3 span { font-family: var(--font); font-weight: 400; font-size: var(--text-sm); color: var(--text-faint); } .glossary-term p { margin-top: 0; } /* ─── Footer ─────────────────────────────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--border); padding-block: var(--gap-lg) var(--gap); margin-top: var(--gap-xl); } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: var(--gap-lg); margin-bottom: var(--gap-lg); } .footer-brand .logo { display: inline-block; margin-bottom: 0.75rem; } .footer-brand p { font-size: var(--text-sm); max-width: 280px; } .footer-col-title { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.75rem; } .footer-col li { margin-bottom: 0.4rem; } .footer-col a { font-size: var(--text-sm); color: var(--text-muted); text-decoration: none; transition: color var(--transition); } .footer-col a:hover { color: var(--text); } .footer-bottom { padding-top: var(--gap); border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; font-size: var(--text-xs); color: var(--text-faint); } .footer-bottom a { color: var(--text-faint); text-decoration: none; } .footer-bottom a:hover { color: var(--text-muted); } .footer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; } .footer-meta-button { background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; font-size: var(--text-xs); color: var(--text-faint); } .footer-meta-button:hover { color: var(--text-muted); } /* ─── Cookie banner ─────────────────────────────────────────────────────────────── */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; background: var(--surface); border-top: 1px solid var(--border); padding: 1.25rem var(--gap); display: flex; align-items: center; justify-content: center; } .cookie-banner.hidden { display: none; } .cookie-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; max-width: var(--container); width: 100%; } .cookie-text { font-size: var(--text-sm); color: var(--text-muted); flex: 1; min-width: 200px; } .cookie-actions { display: flex; gap: 0.5rem; flex-shrink: 0; } .cookie-actions .btn { padding: 0.5rem 1rem; font-size: var(--text-sm); } /* ─── Divider ─────────────────────────────────────────────────────────────────── */ .divider { border: none; border-top: 1px solid var(--border); margin-block: var(--gap-lg); } /* ─── Utilities ─────────────────────────────────────────────────────────────────── */ .text-center { text-align: center; } .text-muted { color: var(--text-muted); } .mt-sm { margin-top: 0.75rem; } .mt-md { margin-top: 1.5rem; } .mt-lg { margin-top: 3rem; } .mb-sm { margin-bottom: 0.75rem; } .mb-md { margin-bottom: 1.5rem; } .mb-lg { margin-bottom: 3rem; } /* ─── Hero (clean centered, bijna beeldvullend op desktop) ──────────────────────── */ .hero { position: relative; overflow: hidden; min-height: calc(90vh - 64px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding-block: 5rem; text-align: center; background: var(--bg); } .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: bottom right; z-index: 0; } .hero-overlay { position: absolute; inset: 0; z-index: 1; background: var(--hero-overlay); } .hero .container { position: relative; z-index: 2; } .hero h1 { margin-bottom: 1.25rem; } .hero .lead { margin-inline: auto; margin-bottom: 2.5rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } /* Trust badges below hero CTA */ .hero-trust { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.4rem 1.1rem; margin-top: 2rem; } .trust-item { display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--text-sm); color: var(--text-faint); font-weight: 500; } .trust-item i { font-size: 1rem; color: var(--accent); opacity: 0.65; line-height: 1; } .trust-sep { color: var(--border-strong); font-size: var(--text-sm); user-select: none; } /* ─── Section tinted ─────────────────────────────────────────────────────────────── */ .section-tinted { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } /* Twee opeenvolgende witte secties: verwijder de dubbele lijn ertussen */ .section-tinted + .section-tinted { border-top: none; } /* ─── Coloured section backgrounds ──────────────────────────────────────────────── */ .section-indigo-bg { position: relative; overflow: hidden; background: radial-gradient(ellipse 55% 80% at 102% 50%, rgba(79, 70, 229, 0.08) 0%, transparent 100%), rgba(79, 70, 229, 0.03); border-top: 1px solid rgba(79, 70, 229, 0.10); border-bottom: 1px solid rgba(79, 70, 229, 0.10); } .section-amber-bg { position: relative; overflow: hidden; background: radial-gradient(ellipse 50% 80% at -5% 60%, rgba(194, 65, 12, 0.09) 0%, transparent 100%), rgba(194, 65, 12, 0.03); border-top: 1px solid rgba(194, 65, 12, 0.12); border-bottom: 1px solid rgba(194, 65, 12, 0.12); } .section-green-bg { position: relative; overflow: hidden; background: radial-gradient(ellipse 50% 70% at 105% 30%, rgba(34, 160, 107, 0.08) 0%, transparent 100%), rgba(34, 160, 107, 0.03); border-top: 1px solid rgba(34, 160, 107, 0.12); border-bottom: 1px solid rgba(34, 160, 107, 0.12); } /* CTA row below section content */ .section-cta-row { display: flex; justify-content: center; margin-top: var(--gap-lg); } /* ─── Button variants ────────────────────────────────────────────────────────────── */ .btn-outline-2 { background: transparent; color: var(--accent-2); border: 1px solid var(--accent-2); } .btn-outline-2:hover { background: var(--accent-2); color: var(--accent-text); } .btn-outline-3 { background: transparent; color: var(--accent-3); border: 1px solid var(--accent-3); } .btn-outline-3:hover { background: var(--accent-3); color: var(--accent-text); } .btn-outline-green { background: transparent; color: var(--success); border: 1px solid var(--success); } .btn-outline-green:hover { background: var(--success); color: var(--accent-text); } /* ─── Calculator strip (homepage) ───────────────────────────────────────────────── */ .calc-home-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: var(--gap-lg); } .calc-home-card { display: flex; align-items: flex-start; gap: 1rem; padding: 1.375rem 1.5rem; background: var(--surface); border: 1.5px solid rgba(194, 65, 12, 0.20); border-radius: var(--radius-lg); text-decoration: none; color: var(--text); transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; } .calc-home-card:hover { border-color: var(--accent-3); transform: translateY(-2px); color: var(--text); box-shadow: var(--shadow-card-3); } .calc-home-card-icon { font-size: 1.75rem; color: var(--accent-3); flex-shrink: 0; line-height: 1; margin-top: 0.1rem; } .calc-home-card-body { flex: 1; } .calc-home-card-body strong { display: block; font-family: var(--font-heading); font-weight: 600; font-size: var(--text-base); color: var(--text); margin-bottom: 0.3rem; line-height: 1.25; } .calc-home-card-body p { font-size: var(--text-sm); color: var(--text-muted); margin: 0; line-height: 1.45; } .calc-home-card-arrow { flex-shrink: 0; color: var(--accent-3); font-size: 1.1rem; align-self: center; opacity: 0.5; transition: opacity var(--transition), transform var(--transition); } .calc-home-card:hover .calc-home-card-arrow { opacity: 1; transform: translateX(4px); } /* ─── Fuel-type cards op homepage (horizontale stijl, teal-accent) ─────────────── */ .fuel-home-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: var(--gap-lg); } .fuel-home-card { display: flex; align-items: flex-start; gap: 1rem; padding: 1.375rem 1.5rem; background: var(--surface); border: 1.5px solid var(--accent-subtle); border-radius: var(--radius-lg); text-decoration: none; color: var(--text); transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; } .fuel-home-card:hover { border-color: var(--accent); transform: translateY(-2px); color: var(--text); box-shadow: var(--shadow-card-2); } .fuel-home-card-icon { font-size: 1.75rem; color: var(--accent); flex-shrink: 0; line-height: 1; margin-top: 0.1rem; } .fuel-home-card-body { flex: 1; } .fuel-home-card-body strong { display: block; font-family: var(--font-heading); font-weight: 600; font-size: var(--text-base); color: var(--text); margin-bottom: 0.3rem; line-height: 1.25; } .fuel-home-card-body p { font-size: var(--text-sm); color: var(--text-muted); margin: 0; line-height: 1.45; } .fuel-home-card-arrow { flex-shrink: 0; color: var(--accent); font-size: 1.1rem; align-self: center; opacity: 0.5; transition: opacity var(--transition), transform var(--transition); } .fuel-home-card:hover .fuel-home-card-arrow { opacity: 1; transform: translateX(4px); } /* ─── Steps (redesign with large decorative numbers) ────────────────────────────── */ .steps-large { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); } .step-large { padding: 1.75rem 1.5rem; } .step-large-num { font-family: var(--font-heading); font-size: 3.5rem; font-weight: 700; color: var(--accent-2); opacity: 0.35; line-height: 1; margin-bottom: 1rem; letter-spacing: -0.04em; } .step-large h3 { margin-bottom: 0.4rem; font-size: var(--text-lg); } /* ─── Featured fuel cards ────────────────────────────────────────────────────────── */ .fuel-featured-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-bottom: var(--gap); } .card-featured { background: var(--accent-subtle); border: 1.5px solid var(--accent); border-radius: var(--radius-lg); padding: 1.75rem; text-decoration: none; display: block; color: var(--text); transition: background var(--transition), border-color var(--transition); } .card-featured:hover { background: rgba(15, 118, 110, 0.12); border-color: var(--accent-hover); color: var(--text); } .card-featured .card-abbr { color: var(--accent); } .card-featured h3 { margin-bottom: 0.4rem; } .card-featured p { font-size: var(--text-sm); margin-top: 0.4rem; } /* ─── Two-column with image ─────────────────────────────────────────────────────── */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } .two-col-image { border-radius: var(--radius-lg); overflow: hidden; background: var(--border); /* Stretch to match the height of the sibling content column */ align-self: stretch; min-height: 300px; } .two-col-image img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ─── Link list (compact comparison links) ───────────────────────────────────────── */ .link-list { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; } .link-list-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; font-size: var(--text-sm); font-weight: 500; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); transition: background var(--transition), color var(--transition); } .link-list-item:nth-child(odd) { border-right: 1px solid var(--border); } /* Remove bottom border from last row (last 1 or 2 items) */ .link-list-item:last-child { border-bottom: none; } .link-list-item:nth-last-child(2):nth-child(odd) { border-bottom: none; } .link-list-item:hover { background: var(--bg); color: var(--accent); } .link-list-arrow { color: var(--text-faint); flex-shrink: 0; transition: transform var(--transition), color var(--transition); } .link-list-item:hover .link-list-arrow { transform: translateX(3px); color: var(--accent); } /* ─── Icons (Phosphor) ───────────────────────────────────────────────────────────── */ /* Fuel type card icon */ .card-icon { font-size: 1.75rem; color: var(--accent); display: block; line-height: 1; margin-bottom: 0.625rem; } /* ─── Button arrow animation ─────────────────────────────────────────────────────── */ .btn-arrow { display: inline-block; transition: transform 220ms ease; } /* Any .btn or .btn-nav-cta that contains a .btn-arrow slides it on hover */ .btn:hover .btn-arrow, .btn-nav-cta:hover .btn-arrow { transform: translateX(5px); } /* Back button: arrow slides left on hover */ .quiz-back-btn .quiz-back-arrow { display: inline-block; font-size: 1em; line-height: 1; transition: transform 200ms ease; /* Vertically align with text — use vertical-align instead of relying on unicode metrics */ vertical-align: middle; margin-top: .1rem; } .quiz-back-btn:hover .quiz-back-arrow { transform: translateX(-3px); } /* ─── Scroll reveal animations ─────────────────────────────────────────────────── Modern entrance: zachte translate-up met premium easing (cubic-bezier variant van easeOutQuart — geleidelijke deceleratie, niet de saaie default "ease"). Duur 700ms voelt rustig zonder gehaast. Voor staggered grids levert de JS in includes/footer.php een --reveal-index CSS-variabele aan, waardoor elke item z'n eigen vertraging krijgt zonder limiet op aantal. ─────────────────────────────────────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--reveal-index, 0) * 60ms); } .reveal.visible { opacity: 1; transform: none; /* Na de entrance: snelle hover-transitions vrijgeven */ transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 220ms cubic-bezier(0.16, 1, 0.3, 1), border-color 200ms ease, box-shadow 200ms ease; } /* Variant: pop-in met subtiele overshoot — voor kleine accenten zoals icons, badges en CTAs waar je net iets meer "pep" wilt. */ .reveal-pop { opacity: 0; transform: scale(0.85); transition: opacity 550ms cubic-bezier(0.34, 1.56, 0.64, 1), transform 550ms cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: calc(var(--reveal-index, 0) * 60ms); } .reveal-pop.visible { opacity: 1; transform: none; } /* Fallback voor browsers die geen JS-stagger zetten: nth-child geeft toch een redelijke staggered timing. */ .reveal-stagger > .reveal:nth-child(1) { --reveal-index: 0; } .reveal-stagger > .reveal:nth-child(2) { --reveal-index: 1; } .reveal-stagger > .reveal:nth-child(3) { --reveal-index: 2; } .reveal-stagger > .reveal:nth-child(4) { --reveal-index: 3; } .reveal-stagger > .reveal:nth-child(5) { --reveal-index: 4; } .reveal-stagger > .reveal:nth-child(6) { --reveal-index: 5; } .reveal-stagger > .reveal:nth-child(7) { --reveal-index: 6; } .reveal-stagger > .reveal:nth-child(8) { --reveal-index: 7; } .reveal-stagger > .reveal:nth-child(9) { --reveal-index: 8; } .reveal-stagger > .reveal:nth-child(10) { --reveal-index: 9; } /* Respecteer gebruikersvoorkeur voor minder beweging */ @media (prefers-reduced-motion: reduce) { .reveal, .reveal-pop { opacity: 1; transform: none; transition: opacity 0ms; } } /* ─── Wide image banner ───────────────────────────────────────────────────────────── */ .img-banner { width: 100%; aspect-ratio: 21 / 9; border-radius: var(--radius-lg); overflow: hidden; margin-block: var(--gap-lg); } .img-banner img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 800ms ease; } .img-banner:hover img { transform: scale(1.03); } /* ─── Two-col: steps vertical layout ─────────────────────────────────────────────── */ .two-col .steps-large { grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.5rem; } .two-col .step-large { padding: 0; border-left: 2px solid var(--border); padding-left: 1.25rem; } .two-col .step-large-num { font-size: 2.25rem; margin-bottom: 0.4rem; } /* ─── Two-col: link-list altijd 1 kolom ───────────────────────────────────────────── */ .two-col .link-list { grid-template-columns: 1fr; } /* Herstelt border-bottom die de desktop 2-kolom regel weghaalt */ .two-col .link-list-item:nth-child(odd) { border-right: none; } .two-col .link-list-item:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--border); } .two-col .link-list-item:last-child { border-bottom: none; } /* ─── Calculators ────────────────────────────────────────────────────────────────── */ .calc-hero { padding-block: var(--gap-lg) var(--gap); max-width: 680px; } .calc-layout { display: grid; grid-template-columns: 1fr 360px; gap: var(--gap); align-items: stretch; margin-bottom: var(--gap-lg); } .calc-panel { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 1.75rem; } .calc-panel-title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 600; margin-bottom: 1.5rem; padding-bottom: 0.875rem; border-bottom: 1px solid var(--border); } .calc-field { margin-bottom: 1.5rem; } .calc-field:last-child { margin-bottom: 0; } .calc-field > label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; font-size: var(--text-sm); margin-bottom: 0.625rem; color: var(--text); } .calc-value-display { font-family: var(--font-heading); font-weight: 700; color: var(--accent); font-size: var(--text-sm); min-width: 4rem; text-align: right; } .calc-range { width: 100%; accent-color: var(--accent); cursor: pointer; display: block; margin-bottom: 0.35rem; } .calc-range-labels { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--text-faint); } .calc-select { width: 100%; padding: 0.625rem 0.875rem; border: 1.5px solid var(--border); border-radius: var(--radius); font-family: var(--font); font-size: var(--text-sm); background: var(--surface); color: var(--text); cursor: pointer; transition: border-color var(--transition); appearance: auto; } .calc-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .calc-result-panel { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .calc-result-top { background: var(--accent-subtle); border-bottom: 1.5px solid var(--border); padding: 1.75rem; text-align: center; } .calc-result-label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 0.5rem; } .calc-result-value { font-family: var(--font-heading); font-size: var(--text-5xl); font-weight: 700; color: var(--accent); line-height: 1; margin-bottom: 0.25rem; margin-top: 2rem; } .calc-result-unit { font-size: var(--text-sm); color: var(--text-muted); } .calc-result-body { padding: 1.5rem 1.75rem; } .calc-breakdown-row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.625rem 0; border-bottom: 1px solid var(--border); font-size: var(--text-sm); gap: 1rem; } .calc-breakdown-row:last-child { border-bottom: none; } .calc-breakdown-label { color: var(--text-muted); flex: 1; } .calc-breakdown-value { font-weight: 600; font-family: var(--font-heading); white-space: nowrap; } .tco-section-label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.5rem; } /* Geaccentueerde "totaal"-row onderaan een MRB-breakdown. De border-bottom van de vorige zichtbare row dient als natuurlijke scheidingslijn, dus zelf geen border-top — voorkomt dubbele lijn ongeacht welke optionele tussenrows (toeslag/korting) verborgen zijn. Visuele klem via padding + bold. */ .mrb-totaal-row { padding-top: 0.875rem !important; border-top: none !important; border-bottom: none !important; } .mrb-totaal-row .calc-breakdown-label { color: var(--text); font-weight: 600; } .mrb-totaal-row .calc-breakdown-value { font-weight: 700; } /* TCO-calculator breakdown — gestapelde kostenbalk + legenda */ .tco-breakdown { margin-top: 1rem; text-align: left; } .tco-bar { display: flex; width: 100%; height: 8px; border-radius: 4px; overflow: hidden; background: var(--border); margin-bottom: 0.75rem; } .tco-bar-segment { height: 100%; transition: width 220ms cubic-bezier(0.22, 1, 0.36, 1); } .tco-breakdown-list { display: flex; flex-direction: column; gap: 0.4rem; } .tco-breakdown-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.5rem; font-size: var(--text-sm); color: var(--text-muted); } .tco-breakdown-swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; } .tco-breakdown-value { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 500; } .calc-note { font-size: var(--text-xs); color: var(--text-faint); margin-top: 1.25rem; padding-top: 0; line-height: 1.55; } .calc-warning { background: rgba(239, 68, 68, 0.07); border: 1.5px solid rgba(239, 68, 68, 0.25); border-radius: var(--radius); padding: 0.875rem 1rem; font-size: var(--text-sm); color: var(--error-dark); line-height: 1.5; margin-top: 1rem; margin-bottom: 0.25rem; } /* Adjustable price inputs */ .calc-price-details { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); } .calc-price-details summary { font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.375rem; user-select: none; } .calc-price-details summary::-webkit-details-marker { display: none; } .calc-price-details[open] summary { color: var(--text); } .calc-price-details summary .ph { font-size: 1rem; transition: transform var(--transition); } .calc-price-details[open] summary .ph { transform: rotate(180deg); } .calc-price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; } .calc-price-field label { display: block; font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); margin-bottom: 0.375rem; } .calc-price-input { width: 100%; padding: 0.5rem 0.625rem; border: 1.5px solid var(--border); border-radius: var(--radius); font-family: var(--font); font-size: var(--text-sm); background: var(--surface); color: var(--text); transition: border-color var(--transition); box-sizing: border-box; } .calc-price-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } /* Brandstofkosten: side-by-side comparison panels */ .calc-compare-wrap { margin-bottom: var(--gap); } .calc-compare-header-row { display: grid; grid-template-columns: 1fr 48px 1fr; gap: var(--gap); align-items: center; margin-bottom: var(--gap); } .calc-vs-badge { width: 40px; height: 40px; background: var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--text-xs); color: var(--text-muted); margin: 0 auto; } .calc-compare-cost-panel { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .calc-compare-cost-panel.is-winner { border-color: var(--accent); } .calc-compare-top { padding: 1rem 1.25rem 0.875rem; border-bottom: 1px solid var(--border); } .calc-compare-type-label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: 0.25rem; } .calc-compare-type-name { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-base); } .calc-compare-body { padding: 1.25rem; } .calc-compare-cost { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 700; line-height: 1; margin-bottom: 0.25rem; } .calc-compare-cost-sub { font-size: var(--text-xs); color: var(--text-muted); margin-bottom: 0.875rem; } .calc-diff-banner { background: var(--accent-subtle); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: var(--gap); flex-wrap: wrap; } .calc-diff-item { text-align: center; } .calc-diff-amount { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700; color: var(--accent); line-height: 1; margin-bottom: 0.2rem; } .calc-diff-sub { font-size: var(--text-xs); color: var(--text-muted); } /* Calculator index cards */ .calc-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: var(--gap); } .calc-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; transition: border-color var(--transition), transform var(--transition); } .calc-card:hover { border-color: var(--accent); transform: translateY(-2px); color: var(--text); } .calc-card-icon { font-size: 1.75rem; color: var(--accent); line-height: 1; } .calc-card h3 { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 600; line-height: 1.25; } .calc-card p { font-size: var(--text-sm); color: var(--text-muted); flex: 1; line-height: 1.55; } .calc-card-cta { font-size: var(--text-sm); font-weight: 600; color: var(--accent); display: flex; align-items: center; gap: 0.375rem; } /* ─── Responsive ─────────────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .main-nav { display: none; } .hamburger { display: flex; } .header-actions .btn-nav-cta { display: none; } .card-grid-3, .steps { grid-template-columns: 1fr 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } .situatie-grid { grid-template-columns: 1fr; } .pros-cons { grid-template-columns: 1fr; } .for-who-list { grid-template-columns: 1fr; } .fuel-featured-grid { grid-template-columns: 1fr; } .fuel-featured-grid { grid-template-columns: 1fr; } .steps-large { grid-template-columns: 1fr 1fr; } .two-col { grid-template-columns: 1fr; gap: var(--gap-lg); } .two-col-image { order: -1; aspect-ratio: 16 / 9; align-self: auto; min-height: unset; } .calc-layout { grid-template-columns: 1fr; } .calc-result-panel { position: static; } .calc-compare-header-row { grid-template-columns: 1fr 36px 1fr; gap: 0.5rem; } .calc-card-grid { grid-template-columns: 1fr; } .calc-price-grid { grid-template-columns: 1fr; } .calc-home-strip { grid-template-columns: 1fr; } .fuel-home-strip { grid-template-columns: 1fr 1fr; } .link-list { grid-template-columns: 1fr; } .link-list-item:nth-child(odd) { border-right: none; } /* Override desktop last-row rules — need !important due to higher specificity of desktop selectors */ .link-list-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--border) !important; } .link-list-item:last-child { border-bottom: none !important; } } @media (max-width: 600px) { :root { --gap: 1rem; --gap-lg: 2rem; --gap-xl: 3.5rem; } h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); } .card-grid-3, .steps { grid-template-columns: 1fr; } .fuel-home-strip { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .situatie-grid { grid-template-columns: 1fr; } .hero { min-height: 70vh; padding-block: 3.5rem; } .steps-large { grid-template-columns: 1fr; } .hero-actions { flex-direction: column; align-items: stretch; } .hero-actions .btn { justify-content: center; } .trust-sep { display: none; } .hero-trust { gap: 0.5rem 1.5rem; } .result-hero { padding-block: var(--gap); } .cta-block { padding: 1.5rem; } .compare-table th, .compare-table td { padding: 0.75rem 0.875rem; } .fuel-page-banner { height: 200px; } .calc-compare-header-row { grid-template-columns: 1fr; } .calc-vs-badge { margin: 0.25rem auto; } .cookie-inner { flex-direction: column; } .cookie-actions { width: 100%; } .cookie-actions .btn { flex: 1; justify-content: center; } }