/* ===================================================== Stolk aan boord — Production Stylesheet Design System: Decisive Interim Architecture Fonts: IBM Plex Sans (headlines) · Inter (body) Methode: mobile-first, CSS custom properties ===================================================== === STIJLGIDS — bron-van-waarheid voor design-keuzes === KLEUREN ------- ACCENT / PRIMAIRE CTA-KLEUR #f7650d — logo-oranje. Gebruik voor: btn-accent, stat-nummers, stap-nummers (methode), hero stat-card achtergrond, border-left bij citaten en aanbod-opmerking, FAQ-plus/min-icoon, mobile sticky bar, focus-outline. Spaarzaam maar consistent. Hover: #d4520a — donkerder oranje. Tekst op oranje: #FFFFFF (wit). PRIMAIRE KLEUR #002444 — deep navy. Gebruik voor: hero-achtergrond, footer, headlines op donkere vlakken. Container: #1B3A5C — mid navy. Gebruik voor: btn-primary, nav-accenten, form-focus-border. Light: #2B5080 — hover-staat nav/knoppen. ACHTERGRONDEN #FCF9F8 — pagina-achtergrond (--color-surface) #F6F3F2 — lichte secties: voor-wie, bewijs, faq (--color-surface-low) #EAE7E7 — borders, dividers (--color-surface-high) #FFFFFF — kaarten, formulier-achtergronden TEKST #1C1B1B — body-tekst (--color-on-surface) #43474E — secundaire tekst, labels (--color-on-surface-muted) TYPOGRAFIE ---------- Headlines: IBM Plex Sans, 600/500 — alle H1–H3 en stat-nummers. Body: Inter, 400/700 — body-tekst, knoppen, labels. Schaal: clamp() van 32px→60px (xl) / 28px→48px (lg) / 24px→32px (md). Labels: 0.75rem, uppercase, letter-spacing 0.08em. KNOPPEN ------- btn-accent — oranje (#f7650d), wit tekst. Primaire CTA, altijd de meest opvallende actie op de pagina. btn-primary — navy (#1B3A5C), wit tekst. Secundaire CTA op lichte vlakken. btn-secondary — outline, transparant. Nevenkeuze naast accent-knop. OPMAAKPRINCIPES --------------- Geen border-radius (--radius: 0px) — scherpe hoeken, zakelijke uitstraling. Mobile-first — breakpoints op 720px en 1024px. Tone: je-vorm, direct, geen jargon. Foto's Marcel: object-position top center. ======================================================= */ /* ----- FONT IMPORTS (self-hosted via system fallbacks) ----- */ /* IBM Plex Sans en Inter worden geladen via Google Fonts stylesheet hieronder als performance-vriendelijke subset. Omdat we geen externe stylesheet-link in gebruiken voor AVG, laden we ze hier via @import met een minimal subset. Alternatief: self-hosted in media/fonts/. */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=Inter:wght@400;700&display=swap'); /* ----- CSS CUSTOM PROPERTIES ----- */ :root { /* Kleurpalet — Decisive Interim Architecture */ --color-primary: #002444; /* deep navy — hoofdkleur */ --color-primary-container: #1B3A5C; /* mid navy — knoppen, headers */ --color-primary-light: #2B5080; /* hover navy */ --color-accent: #f7650d; /* oranje (logo) — primaire CTA */ --color-accent-hover: #d4520a; /* oranje donker — hover */ --color-on-accent: #FFFFFF; /* tekst op oranje */ --color-surface: #FCF9F8; /* achtergrond pagina */ --color-surface-low: #F6F3F2; /* lichte secties */ --color-surface-high: #EAE7E7; /* borders, dividers */ --color-on-surface: #1C1B1B; /* body tekst */ --color-on-surface-muted: #43474E; /* secundaire tekst */ --color-white: #FFFFFF; --color-outline: rgba(26,26,26,0.2); /* Typografie */ --font-headline: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Font sizes — mobile eerst */ --fs-headline-xl: clamp(2rem, 6vw, 3.75rem); /* 32px → 60px */ --fs-headline-lg: clamp(1.75rem, 4vw, 3rem); /* 28px → 48px */ --fs-headline-md: clamp(1.5rem, 3vw, 2rem); /* 24px → 32px */ --fs-headline-sm: 1.25rem; /* 20px */ --fs-body-lg: 1.125rem; /* 18px */ --fs-body-md: 1rem; /* 16px */ --fs-label-caps: 0.75rem; /* 12px */ /* Spacing — 4px base */ --space-4: 0.25rem; --space-8: 0.5rem; --space-12: 0.75rem; --space-16: 1rem; --space-24: 1.5rem; --space-32: 2rem; --space-40: 2.5rem; --space-48: 3rem; --space-64: 4rem; --space-80: 5rem; --space-120: 7.5rem; /* Layout */ --max-width: 1280px; --gutter: var(--space-24); --margin-mobile: var(--space-16); --margin-desktop: var(--space-80); /* Borders — scherp, geen border-radius */ --radius: 0px; --border-1: 1px solid var(--color-surface-high); --border-nav: 2px solid var(--color-primary-container); /* Transitions */ --transition: 150ms ease; } /* ----- RESET & BASE ----- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Universele overflow-beveiliging: geen enkel element mag breder zijn dan de viewport */ *:not(html):not(body) { max-width: 100%; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { overflow-x: hidden; /* voorkom horizontale scroll op mobiel */ font-family: var(--font-body); font-size: var(--fs-body-md); line-height: 1.6; color: var(--color-on-surface); background-color: var(--color-surface); -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } a:hover { color: var(--color-primary-container); } ul, ol { list-style: none; } address { font-style: normal; } /* ----- TYPOGRAPHY UTILITIES ----- */ .headline-xl { font-family: var(--font-headline); font-size: var(--fs-headline-xl); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: var(--color-on-surface); } .headline-lg { font-family: var(--font-headline); font-size: var(--fs-headline-lg); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--color-on-surface); } .headline-sm { font-family: var(--font-headline); font-size: var(--fs-headline-sm); font-weight: 500; line-height: 1.4; } .body-lg { font-size: var(--fs-body-lg); line-height: 1.65; } .label-caps { font-family: var(--font-body); font-size: var(--fs-label-caps); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-on-surface-muted); } em { font-style: italic; } /* ----- LAYOUT — CONTAINER ----- */ .container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--margin-mobile); } /* Vangnet: voorkom dat grid-cellen of kaarten breder worden dan de container */ .container > *, .persona-card, .uitkomst-item, .case-card, .case-stat, .aanbod-card, .faq-item, .methode-step { min-width: 0; } @media (min-width: 720px) { .container { padding-inline: var(--space-40); } } @media (min-width: 1024px) { .container { padding-inline: var(--margin-desktop); } } /* ----- BUTTONS ----- */ .btn { display: inline-block; font-family: var(--font-body); font-size: var(--fs-body-md); font-weight: 700; text-decoration: none; padding: var(--space-16) var(--space-32); border: 2px solid transparent; cursor: pointer; transition: background-color var(--transition), color var(--transition), border-color var(--transition); white-space: normal; /* sta wrapping toe op smalle schermen */ word-break: keep-all; } .btn-primary { background-color: var(--color-primary-container); color: var(--color-white); border-color: var(--color-primary-container); } .btn-primary:hover { background-color: var(--color-primary-light); border-color: var(--color-primary-light); color: var(--color-white); } .btn-secondary { background-color: transparent; color: var(--color-primary-container); border-color: var(--color-primary-container); } .btn-secondary:hover { background-color: var(--color-primary-container); color: var(--color-white); } .btn-accent { background-color: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); font-weight: 700; } .btn-accent:hover { background-color: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-on-accent); } .btn-full { width: 100%; text-align: center; } /* ----- NAVIGATION ----- */ .site-header { position: sticky; top: 0; z-index: 100; background-color: var(--color-white); border-bottom: var(--border-1); } .nav-container { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-16); } .logo { text-decoration: none; display: flex; align-items: center; gap: var(--space-12); } .logo-img { width: 36px; height: 36px; object-fit: contain; display: block; flex-shrink: 0; } .logo-name { font-family: var(--font-headline); font-size: 1.125rem; font-weight: 600; color: var(--color-primary); letter-spacing: -0.02em; } .nav-links { display: none; gap: var(--space-32); } .nav-links a { font-size: var(--fs-body-md); font-weight: 400; text-decoration: none; color: var(--color-on-surface-muted); padding-bottom: var(--space-4); border-bottom: 2px solid transparent; transition: color var(--transition), border-color var(--transition); } .nav-links a:hover, .nav-links a:focus { color: var(--color-primary-container); border-bottom-color: var(--color-primary-container); } .nav-cta { color: var(--color-primary-container) !important; font-weight: 700 !important; border-bottom-color: var(--color-primary-container) !important; } .nav-whatsapp { display: inline-flex; align-items: center; gap: var(--space-8); background-color: #25D366; color: #fff; text-decoration: none; font-family: var(--font-body); font-size: var(--fs-body-md); font-weight: 700; padding: var(--space-8) var(--space-16); border-radius: 4px; white-space: nowrap; transition: background-color var(--transition); } .nav-whatsapp:hover { background-color: #1ebe5d; color: #fff; } /* Op mobiel: toon alleen het icoon, geen tekst */ .nav-whatsapp span { display: none; } @media (min-width: 720px) { .nav-whatsapp span { display: inline; } } .hamburger { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: var(--space-8); } .hamburger span { display: block; width: 24px; height: 2px; background-color: var(--color-primary-container); } .mobile-menu { background-color: var(--color-white); border-bottom: var(--border-1); padding: var(--space-24) var(--margin-mobile); } .mobile-menu ul { display: flex; flex-direction: column; gap: var(--space-16); } .mobile-menu a { font-size: var(--fs-body-lg); text-decoration: none; color: var(--color-on-surface); padding-block: var(--space-8); display: block; border-bottom: var(--border-1); } @media (min-width: 720px) { .nav-links { display: flex; } .hamburger { display: none; } .mobile-menu { display: none; } } /* ----- HERO ----- */ .hero { background-color: var(--color-primary); color: var(--color-white); padding-block: var(--space-64) var(--space-80); overflow: hidden; } .hero-grid { display: grid; gap: var(--space-48); overflow: hidden; /* klem eventuele uitlopers af */ } .hero .label-caps { color: rgba(255,255,255,0.6); } .hero .headline-xl { color: var(--color-white); margin-top: var(--space-16); } .hero-definition { font-size: var(--fs-body-lg); line-height: 1.65; color: rgba(255,255,255,0.8); margin-top: var(--space-24); max-width: 56ch; } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-16); margin-top: var(--space-32); } .hero .btn-secondary { color: var(--color-white); border-color: rgba(255,255,255,0.5); } .hero .btn-secondary:hover { background-color: rgba(255,255,255,0.1); border-color: var(--color-white); } .hero-trust { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-32); font-size: var(--fs-label-caps); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.55); align-items: center; } .trust-divider { color: var(--color-accent); } /* Hero visual */ .hero-image-block { position: relative; overflow: hidden; /* klem foto en stat-card af binnen het blok */ width: 100%; } .hero-photo-placeholder { width: 100%; max-width: 320px; margin-inline: auto; background-color: var(--color-primary-container); border: var(--border-1); } .hero-photo-placeholder svg { width: 100%; height: auto; } .hero-photo { width: 100%; max-width: 320px; margin-inline: auto; object-fit: cover; object-position: top center; display: block; } .hero-stat-card { position: absolute; bottom: var(--space-16); right: var(--space-16); background-color: var(--color-accent); color: var(--color-on-accent); padding: var(--space-16) var(--space-24); max-width: calc(100% - var(--space-32)); /* nooit breder dan de foto */ } .stat-number { display: block; font-family: var(--font-headline); font-size: 2rem; font-weight: 600; line-height: 1; } .stat-label { display: block; font-size: var(--fs-label-caps); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-top: var(--space-4); line-height: 1.4; } @media (min-width: 720px) { .hero-grid { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-64); } .hero-photo-placeholder { max-width: 100%; } .hero-photo { max-width: 100%; } } /* ----- SECTION SHARED STYLES ----- */ .section-label { margin-bottom: var(--space-16); } .section-intro { font-size: var(--fs-body-lg); line-height: 1.65; color: var(--color-on-surface-muted); max-width: 64ch; margin-top: var(--space-24); } /* ----- VOOR WIE ----- */ .voor-wie { padding-block: var(--space-80) var(--space-80); background-color: var(--color-surface-low); } .voor-wie .headline-lg { margin-top: var(--space-8); } .persona-grid { display: grid; gap: var(--space-24); margin-top: var(--space-48); } .persona-card { background-color: var(--color-white); padding: var(--space-32); border: var(--border-1); } .persona-icon { margin-bottom: var(--space-16); } .persona-card h3 { margin-bottom: var(--space-12); color: var(--color-primary); } .persona-card p { color: var(--color-on-surface-muted); line-height: 1.65; } .voor-wie-cta { margin-top: var(--space-48); display: flex; flex-direction: column; gap: var(--space-24); align-items: flex-start; } .voor-wie-cta .body-lg { color: var(--color-on-surface-muted); } @media (min-width: 720px) { .persona-grid { grid-template-columns: repeat(3, 1fr); } .voor-wie-cta { flex-direction: row; align-items: center; } } /* ----- UITKOMST ----- */ .uitkomst { padding-block: var(--space-80); background-color: var(--color-primary); color: var(--color-white); } .uitkomst .headline-lg { color: var(--color-white); margin-top: var(--space-8); } .uitkomst .section-intro { color: rgba(255,255,255,0.7); } .uitkomst-grid { display: grid; gap: var(--space-4); margin-top: var(--space-48); } .uitkomst-item { display: flex; gap: var(--space-24); align-items: flex-start; padding: var(--space-24) var(--space-32); border-bottom: 1px solid rgba(255,255,255,0.1); } .uitkomst-item:last-child { border-bottom: none; } .uitkomst-number { font-family: var(--font-headline); font-size: 2.5rem; font-weight: 600; color: var(--color-accent); line-height: 1; flex-shrink: 0; min-width: 2.5rem; } .uitkomst-item h3 { font-family: var(--font-headline); font-size: var(--fs-headline-sm); font-weight: 500; color: var(--color-white); margin-bottom: var(--space-8); } .uitkomst-item p { color: rgba(255,255,255,0.7); line-height: 1.65; } @media (min-width: 720px) { .uitkomst-grid { grid-template-columns: 1fr 1fr; } .uitkomst-item { border-bottom: none; border-right: 1px solid rgba(255,255,255,0.1); } .uitkomst-item:nth-child(2n) { border-right: none; } .uitkomst-item:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.1); } } /* ----- METHODE ----- */ .methode { padding-block: var(--space-80); background-color: var(--color-surface); } .methode .headline-lg { margin-top: var(--space-8); } .methode-steps { margin-top: var(--space-48); counter-reset: none; } .methode-step { padding: var(--space-32) 0; border-bottom: var(--border-1); } .methode-step:last-child { border-bottom: none; } .step-header { display: flex; align-items: baseline; gap: var(--space-24); margin-bottom: var(--space-16); } .step-number { font-family: var(--font-headline); font-size: 1.5rem; font-weight: 600; color: var(--color-accent); flex-shrink: 0; } .step-header h3 { color: var(--color-primary); } .methode-step p { color: var(--color-on-surface-muted); line-height: 1.65; max-width: 70ch; } .step-timing { display: inline-block; margin-top: var(--space-12); font-size: var(--fs-label-caps); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-on-surface-muted); border-left: 2px solid var(--color-accent); padding-left: var(--space-12); } .methode-cta { margin-top: var(--space-48); } /* ----- BEWIJS ----- */ .bewijs { padding-block: var(--space-80); background-color: var(--color-surface-low); } .bewijs .headline-lg { margin-top: var(--space-8); } .cases-grid { display: grid; gap: var(--space-32); margin-top: var(--space-48); } .case-card { background-color: var(--color-white); padding: var(--space-40); border: var(--border-1); border-left: 4px solid var(--color-accent); min-width: 0; overflow-wrap: break-word; } .case-org { margin-bottom: var(--space-16); } .case-quote { font-size: var(--fs-body-lg); line-height: 1.65; color: var(--color-primary); font-style: italic; margin-bottom: var(--space-16); } .case-cite { font-size: var(--fs-body-md); color: var(--color-on-surface-muted); font-style: normal; } .case-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24); min-width: 0; /* voorkom overflow buiten grid-cel */ } .case-stat { background-color: var(--color-white); padding: var(--space-24); border: var(--border-1); } .stat-big { display: block; font-family: var(--font-headline); font-size: 2.5rem; font-weight: 600; color: var(--color-accent); line-height: 1; margin-bottom: var(--space-8); } .case-stat p { font-size: var(--fs-body-md); color: var(--color-on-surface-muted); line-height: 1.5; } .cases-context { margin-top: var(--space-40); padding: var(--space-32); background-color: var(--color-white); border: var(--border-1); } .cases-context strong { color: var(--color-primary-container); } @media (min-width: 720px) { .cases-grid { grid-template-columns: 1fr 1fr; } } /* ----- AANBOD ----- */ .aanbod { padding-block: var(--space-80); background-color: var(--color-surface); } .aanbod .headline-lg { margin-top: var(--space-8); } .aanbod-grid { display: grid; gap: var(--space-24); margin-top: var(--space-48); } .aanbod-card { background-color: var(--color-white); padding: var(--space-32); border: var(--border-1); display: flex; flex-direction: column; gap: var(--space-16); } .aanbod-card--featured { border-color: var(--color-primary-container); border-width: 2px; position: relative; } .card-badge { color: var(--color-accent); font-weight: 700; } .aanbod-card h3 { color: var(--color-primary); } .aanbod-omschrijving { color: var(--color-on-surface-muted); line-height: 1.65; flex-grow: 1; } .aanbod-duur { font-size: var(--fs-label-caps); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-on-surface-muted); } .aanbod-prijs { font-weight: 600; color: var(--color-primary); line-height: 1.5; } .price-note { display: block; font-weight: 400; font-size: var(--fs-body-md); color: var(--color-on-surface-muted); margin-top: var(--space-4); } .aanbod-btn { margin-top: auto; } .aanbod-note { margin-top: var(--space-40); font-size: var(--fs-body-lg); color: var(--color-on-surface-muted); max-width: 72ch; border-left: 2px solid var(--color-accent); padding-left: var(--space-24); } @media (min-width: 720px) { .aanbod-grid { grid-template-columns: repeat(3, 1fr); } } /* ----- FAQ ----- */ .faq { padding-block: var(--space-80); background-color: var(--color-surface-low); } .faq .headline-lg { margin-top: var(--space-8); } .faq-list { margin-top: var(--space-48); border-top: var(--border-1); } .faq-item { border-bottom: var(--border-1); } .faq-question { display: flex; justify-content: space-between; align-items: center; padding: var(--space-24) 0; font-family: var(--font-headline); font-size: var(--fs-body-lg); font-weight: 500; color: var(--color-primary); cursor: pointer; list-style: none; gap: var(--space-16); } .faq-question::-webkit-details-marker { display: none; } .faq-question::after { content: '+'; font-size: 1.5rem; font-weight: 400; color: var(--color-accent); flex-shrink: 0; transition: transform var(--transition); } details[open] .faq-question::after { content: '−'; } .faq-answer { padding: 0 0 var(--space-24) 0; max-width: 70ch; } .faq-answer p { color: var(--color-on-surface-muted); line-height: 1.7; } /* FAQ header met Marcel-foto rechts */ .faq-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-32); flex-wrap: wrap; } .faq-header-text { flex: 1; min-width: 0; } .faq-marcel { flex-shrink: 0; text-align: center; max-width: 400px; } .faq-marcel-photo { width: 350px; height: 400px; object-fit: cover; object-position: top center; display: block; margin-inline: auto; border: 3px solid var(--color-accent); } .faq-marcel-caption { margin-top: var(--space-12); font-size: 0.8125rem; color: var(--color-on-surface-muted); line-height: 1.5; font-style: italic; max-width: 400px; } .faq-marcel-name { display: block; margin-top: var(--space-4); font-style: normal; font-weight: 700; font-size: var(--fs-label-caps); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary); } @media (max-width: 719px) { .faq-header { flex-direction: column; /* foto onder de tekst, geen float */ } .faq-marcel { order: -1; float: none; /* geen float — voorkomt overflow op smalle schermen */ margin: 0 0 var(--space-24) 0; max-width: 100%; width: 100%; text-align: center; } .faq-marcel-photo { width: 100%; max-width: 280px; height: 220px; margin-inline: auto; } .faq-marcel-caption { max-width: 100%; font-size: 0.75rem; } } /* ----- CONTACT ----- */ .contact { padding-block: var(--space-80); background-color: var(--color-surface); } .contact-grid { display: grid; gap: var(--space-48); } .contact-intro .headline-lg { margin-top: var(--space-8); margin-bottom: var(--space-24); } .contact-details { margin-top: var(--space-32); display: flex; flex-direction: column; gap: var(--space-16); } .contact-detail { display: flex; flex-direction: column; gap: var(--space-4); } .contact-detail .label-caps { color: var(--color-on-surface-muted); } .contact-detail a { font-size: var(--fs-body-lg); color: var(--color-primary-container); text-decoration: none; } .contact-detail a:hover { text-decoration: underline; } .whatsapp-link { display: inline-flex; align-items: center; gap: var(--space-8); color: #25D366 !important; } /* Contact form */ .contact-form-wrapper { background-color: var(--color-white); padding: var(--space-40); border: var(--border-1); } .contact-form { display: flex; flex-direction: column; gap: var(--space-24); } .form-group { display: flex; flex-direction: column; gap: var(--space-8); } .form-group label { color: var(--color-primary); } .optional { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: var(--fs-body-md); color: var(--color-on-surface-muted); } .form-group input, .form-group textarea { font-family: var(--font-body); font-size: var(--fs-body-md); padding: var(--space-16); border: 1px solid var(--color-outline); background-color: var(--color-white); color: var(--color-on-surface); width: 100%; transition: border-color var(--transition); resize: vertical; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--color-primary-container); border-width: 2px; } /* Honeypot */ .form-honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; tabindex: -1; } .form-privacy { font-size: 0.875rem; color: var(--color-on-surface-muted); line-height: 1.5; } @media (min-width: 720px) { .contact-grid { grid-template-columns: 1fr 1fr; align-items: start; } } /* ----- FOOTER ----- */ .site-footer { background-color: var(--color-primary); color: rgba(255,255,255,0.8); } .footer-grid { display: grid; gap: var(--space-40); padding-block: var(--space-64); } .footer-logo { font-family: var(--font-headline); font-size: 1.25rem; font-weight: 600; color: var(--color-white); letter-spacing: -0.02em; } .footer-tagline { margin-top: var(--space-8); color: rgba(255,255,255,0.6); font-style: italic; } .footer-entity { margin-top: var(--space-16); font-size: 0.8125rem; color: rgba(255,255,255,0.35); line-height: 1.6; } .footer-contact .label-caps, .footer-legal .label-caps { color: rgba(255,255,255,0.45); margin-bottom: var(--space-12); } .footer-contact address { display: flex; flex-direction: column; gap: var(--space-8); font-size: var(--fs-body-md); } .footer-contact a, .footer-legal a { color: rgba(255,255,255,0.7); text-decoration: none; } .footer-contact a:hover, .footer-legal a:hover { color: var(--color-white); } .footer-legal ul { display: flex; flex-direction: column; gap: var(--space-8); margin-top: var(--space-12); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-block: var(--space-24); font-size: 0.875rem; color: rgba(255,255,255,0.4); } .footer-bottom a { color: rgba(255,255,255,0.55); text-decoration: none; } .footer-bottom a:hover { color: var(--color-white); } @media (min-width: 720px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } } /* ----- MOBILE STICKY CTA ----- */ .mobile-sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; /* nooit breder dan viewport */ box-sizing: border-box; z-index: 200; background-color: var(--color-accent); padding: var(--space-12) var(--space-16); border-top: 2px solid var(--color-accent-hover); overflow: hidden; } .mobile-sticky-btn { display: block; text-align: center; text-decoration: none; font-family: var(--font-body); font-size: clamp(0.875rem, 4vw, var(--fs-body-lg)); font-weight: 700; color: var(--color-on-accent); padding: 0; margin: 0 auto; white-space: normal; word-break: keep-all; line-height: 1.3; width: 100%; } /* Toon alleen op mobiel */ @media (min-width: 720px) { .mobile-sticky-cta { display: none; } } /* Padding voor body zodat sticky-bar content niet overlapt */ @media (max-width: 719px) { body { padding-bottom: 64px; } } /* ----- FOCUS STYLES (accessibility) ----- */ :focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; } /* ----- PRINT ----- */ @media print { .site-header, .mobile-sticky-cta, .hero-actions, .voor-wie-cta, .methode-cta { display: none; } }