/* * ╔══════════════════════════════════════════════════════════════════╗ * ║ LoonBox — Design System ║ * ║ Versie 2.1 · 2026 ║ * ╠══════════════════════════════════════════════════════════════════╣ * ║ Inhoudsopgave ║ * ║ ║ * ║ 1. Fonts (via in — geen @import) ║ * ║ 2. Reset ║ * ║ 3. Tokens (:root) ║ * ║ 4. Migratie-aliassen (oud → nieuw) ║ * ║ 5. Typografie ║ * ║ 6. Layout utilities ║ * ║ 7. Spacing utilities ║ * ║ 8. Kleur- & achtergrond utilities ║ * ║ 9. Buttons (incl. disabled & loading states) ║ * ║ 10. Formulieren (inputs, selects, textareas, validatie) ║ * ║ 11. Icon-box & .fi iconen ║ * ║ 12. Badges, labels & eyebrows ║ * ║ 13. Cards ║ * ║ 14. Reviews & testimonials ║ * ║ 15. FAQ (accordion) ║ * ║ 16. Stappen (process steps) ║ * ║ 17. Trust strip (social proof bar) ║ * ║ 18. Pricing table & calculator ║ * ║ 19. Promo banner ║ * ║ 20. Navigatie (header, menu, mobiel, hero-overlay) ║ * ║ 21. Hero (homepage & subpagina) ║ * ║ 22. Sectie-koppen ║ * ║ 23. CTA banner ║ * ║ 24. Sidebar ║ * ║ 25. Footer ║ * ║ 26. Sticky bar & WhatsApp FAB ║ * ║ 27. Afbeeldingen ║ * ║ 28. Toegankelijkheid ║ * ║ 29. Performance ║ * ║ 30. Responsief ║ * ║ 31. Print ║ * ╚══════════════════════════════════════════════════════════════════╝ * * * ─── 1. VERPLICHTE -TAGS (volgorde telt) ───────────────────── * * * * * * * * * * * ─── CHANGELOG ────────────────────────────────────────────────────── * * v2.1 (fixes na expert-audit ronde 2): * • [BUG] Nav-conflict opgelost: bare `nav` is nu legacy (.legacy-nav), * nieuw patroon gebruikt .site-header (sticky). Geen position-clash meer. * • [BUG] .grid-2 gap terug naar 64px (match live site). Nieuwe * .grid-2--tight (16px) en .grid-2--md (32px) modifiers. * • [BUG] Homepage transparante nav: .nav--hero-overlay modifier * voor wit-op-donker navigatie met scroll-overgang. * • [A11Y] CTA contrast gefixt: achtergrond van --green naar --green-cta * (#2a7d1f, 4.58:1 op wit). Paragraph opacity naar .85. * • [A11Y] .contact-submit:focus-visible toegevoegd. * • [A11Y] FAQ JS-voorbeeld nu met aria-expanded toggle. * • [UX] .btn:disabled en .btn.is-loading states. * • [PERF] content-visibility: auto op herhalende componenten. * • [MKT] .promo-banner component. * • [MKT] .range-slider basis-styling voor pricing calculator. * * v2.0: * • Migratie-aliassen (--g → --green, .btn-g → .btn-primary, etc.) * • h1 line-height 1.02 → 1.12 * • --ink-50 verdonkerd #767676 → #6e6e6e (4.74:1 contrast) * • Focus-fallback via @supports selector(:focus-visible) * • .sr-only, formuliercomponenten, card-systeem, reviews, FAQ, * steps, trust strip, pricing, hero, CTA, sidebar, footer, * sticky bar, WhatsApp FAB, sectie-padding token. */ /* ══════════════════════════════════════════════ 2. RESET ══════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html,body{overflow-x:hidden} @media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}} img,video{display:block;max-width:100%;height:auto} a{color:inherit;transition:color var(--ease)} nav a,.btn,.nav-logo,.ft-links a,.ft-contact a,.ft-legal a{text-decoration:none} .nav-menu,.nav-links,.ft-links{list-style:none} /* ══════════════════════════════════════════════ 3. TOKENS ══════════════════════════════════════════════ */ :root{ /* ── Kleur: primair ── */ --green: #3DAE2B; --green-text: #217A18; /* Groene tekst op wit: 5.2:1 contrast — WCAG AA */ --green-hover: #359a25; --green-cta: #2a7d1f; /* CTA-achtergrond — 4.58:1 contrast op wit (AA) */ --green-light: #F0FAF0; --green-border: #B8DFB3; /* ── Kleur: neutraal ── */ --ink: #1A1A1A; --ink-70: #3d3d3a; --ink-50: #6e6e6e; /* 4.74:1 op wit — veilig AA */ --ink-15: #E2E2E2; --surface: #FAFAFA; --page: #F8F8F6; /* pagina-achtergrond (warmer dan surface) */ --white: #FFFFFF; /* ── Kleur: sfeer (card hero gradients) ── */ --sage: #7A9E8A; /* ── Kleur: semantisch ── */ --red: #c0392b; --red-light: #fce4ec; --red-border: #f48fb1; --amber: #f59e0b; --blue: #2563eb; --blue-light: #eff6ff; /* ── Kleur: donker ── */ --dark: #0f1f0a; /* ── Border ── */ --border: rgba(26,26,24,.09); --border-medium: rgba(26,26,24,.16); /* ── Border radius ── */ --r: 10px; --r-box: 8px; /* matcht logo 'Box' radius — voor arrow-box, icon-box */ --r-btn: 12px; --r-pill: 100px; --rl: 16px; /* ── Schaduwen ── */ --shadow-sm: 0 2px 16px rgba(0,0,0,.06); --shadow-md: 0 6px 40px rgba(0,0,0,.10); /* ── Overgangen ── */ --ease: .18s ease; /* ── Typografie ── */ --lh-body: 1.68; /* ── Sectie-afstand ── */ --section-py: 72px; } /* ══════════════════════════════════════════════ 4. MIGRATIE-ALIASSEN (lb.css v5 → v2.1) ══════════════════════════════════════════════ */ :root{ --g:var(--green);--gd:var(--green-hover);--gl:var(--green-light); --is:var(--ink-70);--im:var(--ink-50);--cream:var(--surface); --b:var(--border);--bm:var(--border-medium); --sh:var(--shadow-sm);--shm:var(--shadow-md); } /* ══════════════════════════════════════════════ 5. TYPOGRAFIE ══════════════════════════════════════════════ */ body{ font-family:'Manrope',sans-serif;font-size:1rem;font-weight:400; line-height:var(--lh-body);letter-spacing:0;color:var(--ink); background:var(--white); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } h1{ font-family:'Instrument Serif',serif;font-weight:400; font-size:clamp(1.8rem,4.5vw,3rem); line-height:1.12;letter-spacing:-0.02em;color:var(--ink); } h2{ font-family:'Manrope',sans-serif;font-weight:700; font-size:clamp(1.6rem,3vw,2.5rem); line-height:1.2;letter-spacing:-0.02em;color:var(--ink); } h3{ font-family:'Manrope',sans-serif;font-weight:600; font-size:clamp(1.4rem,2vw,2rem);line-height:1.3;color:var(--ink); } h4{ font-family:'Manrope',sans-serif;font-weight:700; font-size:clamp(1.2rem,1.5vw,1.75rem);line-height:1.4;color:var(--ink); } p{color:var(--ink-50);line-height:var(--lh-body)} button,input,select,textarea,label{font-family:'Manrope',sans-serif;letter-spacing:0.01em} .text-muted{color:var(--ink-50)}.text-soft{color:var(--ink-70)} .text-green{color:var(--green-text)}.text-white{color:#fff} .text-small{font-size:0.82rem}.text-xs{font-size:0.72rem} .text-center{text-align:center}.text-upper{text-transform:uppercase} .letter-wide{letter-spacing:0.09em}.lh-tall{line-height:1.75} .fw-500{font-weight:500}.fw-600{font-weight:600} .fw-700{font-weight:700}.fw-800{font-weight:800} .fs-sm{font-size:.84rem}.fs-xs{font-size:.78rem}.fs-xxs{font-size:.72rem} .fs-md{font-size:.92rem}.fs-lg{font-size:1.05rem}.fs-xl{font-size:1.1rem} .c-muted{color:var(--ink-50)}.c-soft{color:var(--ink-70)} .c-green{color:var(--green-text)}.c-ink{color:var(--ink)}.c-white{color:#fff} .c-white-70{color:rgba(255,255,255,.7)}.c-white-45{color:rgba(255,255,255,.45)} /* ══════════════════════════════════════════════ 6. LAYOUT UTILITIES ══════════════════════════════════════════════ */ .wrap{max-width:1140px;margin:0 auto;padding:0 28px} .wrap-sm{max-width:720px;margin:0 auto;padding:0 28px} section{padding:var(--section-py) 0} .flex{display:flex}.flex-center{display:flex;align-items:center} .flex-between{display:flex;align-items:center;justify-content:space-between} .flex-wrap{flex-wrap:wrap} .gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-14{gap:14px} .gap-16{gap:16px}.gap-18{gap:18px}.gap-22{gap:22px}.gap-24{gap:24px} /* * [FIX v2.1] .grid-2 gap terug naar 64px (match live site homepage). * Gebruik .grid-2--tight (16px) of .grid-2--md (32px) voor kleinere gaps. * * MIGRATIE-ACTIE: tarieven.html gebruikt .grid-2 voor de vergelijkingstabel. * Voeg daar class="grid-2 grid-2--tight" toe, anders wordt de gap te breed. * Idem voor contact.html (.contact-grid) en andere smalle twee-koloms layouts. */ .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} .grid-2--tight{gap:16px} .grid-2--md{gap:32px} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .w-full{width:100%}.pos-rel{position:relative}.pos-abs{position:absolute} /* ══════════════════════════════════════════════ 7. SPACING UTILITIES ══════════════════════════════════════════════ */ .mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-10{margin-top:10px} .mt-12{margin-top:12px}.mt-14{margin-top:14px}.mt-16{margin-top:16px} .mt-18{margin-top:18px}.mt-20{margin-top:20px}.mt-22{margin-top:22px} .mt-24{margin-top:24px}.mt-28{margin-top:28px}.mt-32{margin-top:32px} .mb-4{margin-bottom:4px}.mb-6{margin-bottom:6px}.mb-8{margin-bottom:8px} .mb-10{margin-bottom:10px}.mb-12{margin-bottom:12px}.mb-14{margin-bottom:14px} .mb-16{margin-bottom:16px}.mb-18{margin-bottom:18px}.mb-20{margin-bottom:20px} .mb-22{margin-bottom:22px}.mb-24{margin-bottom:24px}.mb-28{margin-bottom:28px} /* ══════════════════════════════════════════════ 8. KLEUR- & ACHTERGROND UTILITIES ══════════════════════════════════════════════ */ .bg-white{background:var(--white)}.bg-cream{background:var(--surface)} .bg-page{background:var(--page)} .bg-gl{background:var(--green-light)}.bg-green{background:var(--green)} .bg-dark{background:var(--dark)} .border{border:1px solid var(--border)}.border-m{border:2px solid var(--border-medium)} .r-sm{border-radius:var(--r)}.r-12{border-radius:12px} .r-lg{border-radius:var(--rl)}.r-pill{border-radius:var(--r-pill)} .shadow{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)} /* ══════════════════════════════════════════════ 9. BUTTONS ══════════════════════════════════════════════ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:14px 22px;border-radius:var(--r-btn);border:1.5px solid transparent; font-family:'Manrope',sans-serif;font-size:0.98rem;font-weight:700; line-height:1;letter-spacing:0.01em;text-decoration:none; white-space:nowrap;cursor:pointer; transition:background var(--ease),border-color var(--ease),color var(--ease), transform var(--ease),box-shadow var(--ease),opacity var(--ease); } /* Primair */ .btn-primary,.btn-g{background:var(--green-cta);color:#fff} .btn-primary:hover,.btn-g:hover{ background:var(--green-hover);transform:translateY(-1px); box-shadow:0 6px 20px rgba(61,174,43,.35); } /* Secundair */ .btn-secondary,.btn-ghost{background:var(--white);color:var(--ink);border-color:var(--border-medium)} .btn-secondary:hover,.btn-ghost:hover{ background:var(--green-light);border-color:var(--green-border);color:var(--ink); } /* Op donkere achtergrond — wit gevuld */ .btn-on-dark,.btn-w{background:var(--white);color:var(--green);border-color:transparent} .btn-on-dark:hover,.btn-w:hover{ background:var(--green-light);transform:translateY(-1px);box-shadow:var(--shadow-sm); } /* Op donkere achtergrond — outline */ .btn-on-dark-outline,.btn-gw,.btn-ow{ background:transparent;color:#fff;border-color:rgba(255,255,255,0.4); } .btn-on-dark-outline:hover,.btn-gw:hover,.btn-ow:hover{ border-color:#fff;background:rgba(255,255,255,0.08); } /* Grootte */ .btn-sm{padding:9px 16px;font-size:0.82rem} .btn-lg{padding:16px 28px;font-size:1rem} .btn-block{width:100%} /* * [FIX v2.1] Disabled state — voorkomt dubbel-klikken op submit. * Gebruik: * of: … */ .btn:disabled, .btn[aria-disabled="true"]{ opacity:0.5; cursor:not-allowed; pointer-events:none; } /* * [FIX v2.1] Loading state — toon tijdens async acties. * Gebruik: button.classList.add('is-loading') bij form submit. * * */ .btn.is-loading{ position:relative; color:transparent !important; pointer-events:none; } .btn.is-loading::after{ content:''; position:absolute; width:18px;height:18px; border:2.5px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:btn-spin .6s linear infinite; } .btn-secondary.is-loading::after, .btn-ghost.is-loading::after{ border-color:rgba(26,26,24,.15); border-top-color:var(--green); } /* Wit-gevulde knoppen: groene spinner i.p.v. witte (anders onzichtbaar) */ .btn-on-dark.is-loading::after, .btn-w.is-loading::after{ border-color:rgba(61,174,43,.2); border-top-color:var(--green); } @keyframes btn-spin{to{transform:rotate(360deg)}} /* ══════════════════════════════════════════════ 10. FORMULIEREN ══════════════════════════════════════════════ */ .form-group{display:flex;flex-direction:column;gap:6px} .form-label,.contact-label{font-size:0.82rem;font-weight:700;color:var(--ink);display:block} .form-input,.form-textarea,.form-select, .contact-input,.contact-textarea{ width:100%;padding:12px 14px;border:1.5px solid var(--ink-15); border-radius:var(--r);font-family:'Manrope',sans-serif; font-size:0.9rem;font-weight:500;color:var(--ink);background:var(--white); transition:border-color var(--ease),box-shadow var(--ease);outline:none; } .form-input:focus,.form-textarea:focus,.form-select:focus, .contact-input:focus,.contact-textarea:focus{ border-color:var(--green);box-shadow:0 0 0 3px rgba(61,174,43,.12); } .form-input::placeholder,.form-textarea::placeholder, .contact-input::placeholder,.contact-textarea::placeholder{ color:var(--ink-50);font-weight:400; } .form-textarea,.contact-textarea{resize:vertical;min-height:120px} .form-select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6e6e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;padding-right:40px; } .form-hint{font-size:0.78rem;font-weight:500;color:var(--ink-50)} /* Error */ .form-group.is-error .form-input, .form-group.is-error .form-textarea, .form-group.is-error .form-select{ border-color:var(--red);box-shadow:0 0 0 3px rgba(192,57,43,.10); } .form-group.is-error .form-hint{color:var(--red)} .form-group.is-error .form-label{color:var(--red)} /* Succes */ .form-success,.success-msg{ background:var(--green-light);border:1px solid var(--green-border); border-radius:var(--r-btn);padding:20px;text-align:center; } .form-success h3,.success-msg h3{color:var(--green-hover);font-size:1.1rem;margin-bottom:6px} .form-success p,.success-msg p{color:var(--ink-70);font-size:0.9rem} /* Submit (lb.css v5 compat) */ .contact-submit{ width:100%;padding:13px;background:var(--green);color:#fff;border:none; border-radius:var(--r-pill);font-family:'Manrope',sans-serif; font-size:1rem;font-weight:700;cursor:pointer;transition:background var(--ease); } .contact-submit:hover{background:var(--green-hover)} /* Checkbox / Radio */ .form-check{display:flex;align-items:flex-start;gap:10px;font-size:0.86rem;color:var(--ink-70);cursor:pointer} .form-check input[type="checkbox"], .form-check input[type="radio"]{width:18px;height:18px;margin-top:2px;accent-color:var(--green);flex-shrink:0} /* ══════════════════════════════════════════════ 11. ICON-BOX & .fi ICONEN ══════════════════════════════════════════════ * * LoonBox gebruikt een EIGEN iconenset (loonbox-systeem-v4). * NIET Lucide, NIET emoji. Alle iconen zijn 32×32, stroke-only. * Zie loonbox-icons.svg voor het volledige overzicht. * * Gebruik met : * * * Of inline (zonder extern bestand): * * * * * * * * * Beschikbare iconen (ID's): * * Documenten: loonstrook, kalender * Financieel: betaling, calculator * Mensen: medewerkers * Systeem: automatisering, foutloos, tijdregistratie, veiligheid, inzicht * Communicatie: contact, envelop, telefoon, support * Groei: groei, koppeling * Extra: schild, pijl-rechts, check, kruis * * ⚠ GEEN emoji gebruiken als icoon. Gebruik altijd SVG uit de iconenset. */ .icon-box{ background:var(--white);border:1.5px solid var(--ink-15);padding:16px; border-radius:var(--r-box);display:inline-flex;align-items:center;justify-content:center; transition:background var(--ease),border-color var(--ease),transform var(--ease),box-shadow var(--ease); } .icon-box:hover{ background:var(--green-light);border-color:var(--green-border); transform:translateY(-2px);box-shadow:var(--shadow-sm); } .icon-box--sm{padding:10px;border-radius:var(--r)} .icon-box--lg{padding:20px;border-radius:var(--rl)} .icon-box--filled{background:var(--green-light);border-color:var(--green-border)} .icon-box--filled .fi{stroke:var(--green)} .fi{ width:32px;height:32px;stroke:var(--ink);fill:none; stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round; flex-shrink:0;transition:stroke var(--ease); } .icon-box:hover .fi{stroke:var(--green)} .fi-sm{width:20px;height:20px} .fi-lg{width:40px;height:40px} /* ══════════════════════════════════════════════ 12. BADGES, LABELS & EYEBROWS ══════════════════════════════════════════════ */ .badge{ display:inline-flex;align-items:center;gap:6px; background:var(--green-light);color:var(--green-text);font-size:0.72rem; font-weight:700;padding:4px 12px;border-radius:var(--r-pill); letter-spacing:0.07em;text-transform:uppercase;border:1px solid var(--green-border); } .badge::before{content:'';width:6px;height:6px;background:var(--green);border-radius:50%;flex-shrink:0} .eyebrow{ display:inline-block;font-size:0.72rem;font-weight:700;color:var(--green-text); text-transform:uppercase;letter-spacing:0.1em;margin-bottom:10px; } .tag{ display:inline-block;background:var(--green-light);color:var(--green-text); font-size:0.68rem;font-weight:700;border-radius:var(--r-pill); padding:2px 9px;border:1px solid var(--green-border); } .pill{ display:inline-block;font-size:0.68rem;font-weight:700; padding:2px 8px;border-radius:var(--r-pill);vertical-align:middle; border:1px solid transparent; } .pill--green{background:var(--green-light);color:var(--green-text);border-color:var(--green-border)} .pill--red{background:var(--red-light);color:var(--red);border-color:var(--red-border)} .pill--grey{background:var(--surface);color:var(--ink-50);border-color:var(--ink-15)} /* Breadcrumb */ .breadcrumb-nav,.breadcrumb{font-size:0.8rem;color:var(--ink-50);font-weight:500;margin-bottom:18px} .breadcrumb-nav a,.breadcrumb a{color:var(--ink-50)} .breadcrumb-nav a:hover,.breadcrumb a:hover{color:var(--green-text)} .breadcrumb-nav a+a::before,.breadcrumb-nav a+span::before{content:'›';margin:0 6px;color:var(--ink-50)} .breadcrumb-nav>span:not([aria-current]),.breadcrumb>span:not([aria-current]){margin:0 5px} /* ══════════════════════════════════════════════ 13. CARDS ══════════════════════════════════════════════ * * LoonBox v4 kaartensysteem — drie varianten: * * A) SERVICE CARD — met gradient hero (diensten-pagina) * B) LIST CARD — compacte rij met icoon (overzichten, navigatie) * C) CARD — generiek blok (content, USP's) * * De arrow-box (.arrow-box) spiegelt de vierkante 'Box' uit het * logo: witte achtergrond, border, 8px radius, groen op hover. */ /* ── A) Service card (hero + tekst + arrow-box) ── */ .service-card{ background:var(--white);border:1px solid var(--ink-15); border-radius:var(--rl);overflow:hidden;cursor:pointer; transition:box-shadow .2s ease,transform .2s ease; text-decoration:none;display:block;color:var(--ink); } .service-card:hover{ transform:translateY(-2px);box-shadow:0 10px 32px rgba(0,0,0,.09); } /* Card hero — gradient achtergrond */ .card-hero{ position:relative;height:160px;overflow:hidden; background:linear-gradient(135deg,#6B9A7A 0%,#8EB49C 40%,#A8C8B4 100%); } .card-hero::before,.card-hero::after{ content:'';position:absolute;border-radius:14px; background:rgba(255,255,255,.18);backdrop-filter:blur(6px); } .card-hero::before{width:90px;height:64px;top:40px;left:60px;transform:rotate(-8deg)} .card-hero::after{width:60px;height:44px;top:52px;left:172px;transform:rotate(4deg)} /* Hero kleurvarianten per dienst */ .card-hero.hero-salaris{background:linear-gradient(135deg,#5A8A6A 0%,#7AAE8C 50%,#9ACAAA 100%)} .card-hero.hero-hr{background:linear-gradient(135deg,#6A8A7A 0%,#8AAEAA 50%,#A8CAC4 100%)} .card-hero.hero-cao{background:linear-gradient(135deg,#7A8A6A 0%,#9AAE8C 50%,#B8CAA8 100%)} .card-hero.hero-pensioen{background:linear-gradient(135deg,#5A7A8A 0%,#7A9EAE 50%,#98BACA 100%)} .card-hero.hero-fiscaal{background:linear-gradient(135deg,#6A7A5A 0%,#8E9E7C 50%,#A8B89C 100%)} .card-hero.hero-partner{background:linear-gradient(135deg,#5A6A7A 0%,#7A8E9E 50%,#98A8B8 100%)} /* Logo in hero */ .hero-logo{ position:absolute;top:18px;left:20px;color:#fff; font-family:'Manrope',sans-serif;font-weight:700;font-size:1.1rem; letter-spacing:-0.01em;display:flex;align-items:center;gap:1px; } .hero-logo .box{ border:2px solid rgba(255,255,255,.9);border-radius:5px; padding:0 5px;line-height:1.4; } /* Card body */ .card-body{ padding:20px 20px 22px;display:flex; align-items:flex-start;justify-content:space-between;gap:12px; } .card-text{flex:1} .card-title{ font-family:'Manrope',sans-serif;font-weight:700;font-size:1.05rem; color:var(--ink);margin-bottom:6px;line-height:1.2; } .card-desc{font-size:0.84rem;color:var(--ink-50);line-height:1.55} /* ── Arrow-box — spiegelt de 'Box' uit het logo ── */ .arrow-box{ background:var(--white);border:1.5px solid var(--ink-15); border-radius:var(--r-box);width:40px;height:40px; display:flex;align-items:center;justify-content:center; flex-shrink:0;margin-top:1px; transition:background var(--ease),border-color var(--ease); } .service-card:hover .arrow-box, .list-card:hover .arrow-box{ background:var(--green-light);border-color:var(--green-border); } /* Arrow SVG — zelfde stroke-stijl als .fi */ .arrow-icon{ width:18px;height:18px;stroke:var(--ink);fill:none; stroke-width:2;stroke-linecap:round;stroke-linejoin:round; transition:stroke var(--ease),transform var(--ease); } .service-card:hover .arrow-icon{ stroke:var(--green);transform:translate(1px,-1px); } /* ── B) List card (icoon + tekst + pijl) ── */ .list-card{ background:var(--white);border:1px solid var(--ink-15); border-radius:var(--r-btn);padding:18px; display:flex;align-items:center;gap:16px; cursor:pointer;text-decoration:none;color:var(--ink); transition:box-shadow var(--ease),border-color var(--ease); } .list-card:hover{ border-color:var(--green-border); box-shadow:0 4px 16px rgba(61,174,43,.10); } /* Icon-box in list-card — page-achtergrond */ .list-card .icon-box{ background:var(--page);border:1.5px solid var(--ink-15); border-radius:var(--r-box);width:52px;height:52px; display:flex;align-items:center;justify-content:center;flex-shrink:0; transition:background var(--ease),border-color var(--ease); } .list-card:hover .icon-box{ background:var(--green-light);border-color:var(--green-border); } /* .fi in list-card context — iets kleiner */ .list-card .fi{width:26px;height:26px} .list-card:hover .fi{stroke:var(--green)} .list-text{flex:1} .list-title{font-weight:700;font-size:0.95rem;color:var(--ink);margin-bottom:3px;line-height:1.2} .list-desc{font-size:0.78rem;color:var(--ink-50);line-height:1.45} .list-arrow{ width:16px;height:16px;stroke:var(--ink-50);fill:none; stroke-width:2;stroke-linecap:round;stroke-linejoin:round; flex-shrink:0;transition:stroke var(--ease),transform var(--ease); } .list-card:hover .list-arrow{stroke:var(--green);transform:translateX(2px)} /* Stapels */ .card-stack{display:flex;flex-direction:column;gap:16px} .list-stack{display:flex;flex-direction:column;gap:10px} /* ── C) Generiek card (legacy + nieuw) ── */ .card{ background:var(--white);border-radius:var(--rl);padding:26px 22px; border:1px solid var(--border);transition:box-shadow var(--ease),transform var(--ease); } .card:hover{box-shadow:var(--shadow-md);border-color:var(--border-medium);transform:translateY(-2px)} /* ── Photo card (legacy — blog, cases) ── */ .photo-card{ border-radius:var(--rl);overflow:hidden;background:var(--white); border:1px solid var(--border);cursor:pointer; transition:box-shadow .25s ease,transform .25s ease; display:flex;flex-direction:column;text-decoration:none;color:var(--ink); } .photo-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)} .photo-card .photo{position:relative;overflow:hidden} .photo-card .photo.ratio-4-3{aspect-ratio:4/3} .photo-card .photo.ratio-16-9{aspect-ratio:16/9} .photo-card .photo img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;display:block} .photo-card:hover .photo img{transform:scale(1.04)} .photo-card .photo::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(8,22,10,.55) 0%,transparent 55%)} .photo-card .body{padding:20px 22px 24px;flex:1;display:flex;flex-direction:column} .photo-card .row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} /* Arrow in photo-card — ook vierkant (v4 systeem) */ .arrow{ width:36px;height:36px;border-radius:var(--r-box); background:var(--white);border:1.5px solid var(--ink-15); display:flex;align-items:center;justify-content:center; flex-shrink:0;transition:background var(--ease),border-color var(--ease); } .photo-card:hover .arrow{background:var(--green-light);border-color:var(--green-border)} .photo-card:hover .arrow svg{stroke:var(--green)} /* Info card / Info item (contact, USP-lijsten) */ .info-card,.info-item{display:flex;align-items:flex-start;gap:12px;margin-bottom:20px} .info-icon{ width:36px;height:36px;background:var(--green-light);border-radius:50%; display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0; } .info-label{font-size:0.78rem;font-weight:700;color:var(--ink-50);margin-bottom:2px} .info-val{font-size:0.9rem;font-weight:600;color:var(--ink)} .info-val a{color:var(--ink)} .info-val a:hover{color:var(--green-text)} /* ══════════════════════════════════════════════ 14. REVIEWS & TESTIMONIALS ══════════════════════════════════════════════ */ .review{background:var(--surface);border-radius:var(--rl);padding:24px 22px;border:1px solid var(--border)} .stars{color:var(--amber);font-size:0.9rem;margin-bottom:12px} .review q{display:block;font-size:0.9rem;font-style:italic;color:var(--ink-70);line-height:1.65;margin-bottom:18px;font-weight:500} .reviewer{display:flex;align-items:center;gap:10px} .av{ width:34px;height:34px;border-radius:50%;background:var(--green-light); display:flex;align-items:center;justify-content:center; font-size:0.78rem;font-weight:800;color:var(--green-text);flex-shrink:0; } .rv-name{font-size:0.86rem;font-weight:700} .rv-co{font-size:0.76rem;color:var(--ink-50);font-weight:500} /* ══════════════════════════════════════════════ 15. FAQ (ACCORDION) ══════════════════════════════════════════════ * * [FIX v2.1] JS-voorbeeld nu met aria-expanded toggle: * * document.addEventListener('click', function(e) { * var q = e.target.closest('.faq-q'); * if (!q) return; * var item = q.parentElement; * var isOpen = item.classList.toggle('open'); * q.setAttribute('aria-expanded', String(isOpen)); * }); * * // Keyboard support (Enter/Space) * document.addEventListener('keydown', function(e) { * if (e.key === 'Enter' || e.key === ' ') { * var q = e.target.closest('.faq-q'); * if (q) { e.preventDefault(); q.click(); } * } * }); * * HTML: *
* *
*

Antwoord hier.

*
*
*/ .faq-item{border-bottom:1px solid var(--border)} .faq-item:first-child{border-top:1px solid var(--border)} .faq-q{ display:flex;justify-content:space-between;align-items:center;padding:16px 0; cursor:pointer;font-size:0.94rem;font-weight:700;gap:12px;user-select:none;color:var(--ink); } .faq-icon{color:var(--green-text);font-size:1.2rem;flex-shrink:0;transition:transform var(--ease);font-weight:400;line-height:1} .faq-item.open .faq-icon{transform:rotate(45deg)} .faq-a{font-size:0.89rem;color:var(--ink-70);line-height:1.65;padding-bottom:16px;display:none;font-weight:500} .faq-item.open .faq-a{display:block} /* ══════════════════════════════════════════════ 16. STAPPEN (PROCESS STEPS) ══════════════════════════════════════════════ */ .step{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--border)} .step:last-child{border-bottom:none} .step-num{ width:40px;height:40px;border-radius:50%;background:var(--green-light); border:2.5px solid var(--green);display:flex;align-items:center;justify-content:center; font-size:0.95rem;font-weight:800;color:var(--green-text);flex-shrink:0;margin-top:2px; } .step-tag{ display:inline-block;font-size:0.72rem;font-weight:700;padding:2px 9px; border-radius:8px;background:var(--green-light);color:var(--green-text);margin-top:6px; } /* ══════════════════════════════════════════════ 17. TRUST STRIP ══════════════════════════════════════════════ */ .trust-strip{background:var(--white);padding:36px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .trust-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:1px; background:var(--border);border:1px solid var(--border);border-radius:var(--r);overflow:hidden; } .trust-cell{background:var(--white);padding:22px;text-align:center} .trust-num{font-size:2rem;font-weight:800;color:var(--green-text);display:block;letter-spacing:-0.02em} .trust-lbl{font-size:0.8rem;color:var(--ink-50);margin-top:2px;font-weight:500} /* ══════════════════════════════════════════════ 18. PRICING TABLE & CALCULATOR ══════════════════════════════════════════════ */ .pricing-card{ background:var(--white);border:1px solid var(--border);border-radius:var(--rl); padding:32px 28px;display:flex;flex-direction:column; transition:box-shadow var(--ease),transform var(--ease); } .pricing-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)} .pricing-card--featured{border-color:var(--green);border-width:2px;position:relative} .pricing-header{margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--border)} .pricing-price{display:flex;align-items:baseline;gap:4px;margin-top:8px} .pricing-amount{font-size:2.4rem;font-weight:800;color:var(--ink);letter-spacing:-0.02em;line-height:1} .pricing-unit{font-size:0.84rem;color:var(--ink-50);font-weight:500} .pricing-features{list-style:none;flex:1;margin-bottom:24px} .pricing-features li{padding:8px 0;font-size:0.88rem;font-weight:500;color:var(--ink-70);padding-left:28px;position:relative} .pricing-features li.included::before{content:'✓';position:absolute;left:0;color:var(--green-text);font-weight:700} .pricing-features li.excluded{color:var(--ink-50);text-decoration:line-through;opacity:0.6} .pricing-features li.excluded::before{content:'✕';position:absolute;left:0;color:var(--ink-50);font-weight:700} /* * [NIEUW v2.1] Range slider — basis-styling voor tarievencalculator. * * Gebruik: *
* * *
* 150+ *
*
*/ .range-group{display:flex;flex-direction:column;gap:8px} .range-slider{ -webkit-appearance:none;appearance:none;width:100%;height:6px; background:var(--ink-15);border-radius:3px;outline:none; transition:background var(--ease); } .range-slider::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none;width:24px;height:24px; border-radius:50%;background:var(--green);cursor:pointer; border:3px solid var(--white);box-shadow:0 2px 8px rgba(0,0,0,.15); transition:transform var(--ease),box-shadow var(--ease); } .range-slider::-webkit-slider-thumb:hover{ transform:scale(1.15);box-shadow:0 2px 12px rgba(61,174,43,.4); } .range-slider::-moz-range-thumb{ width:24px;height:24px;border-radius:50%;background:var(--green); cursor:pointer;border:3px solid var(--white);box-shadow:0 2px 8px rgba(0,0,0,.15); } .range-labels{display:flex;justify-content:space-between;font-size:0.78rem;color:var(--ink-50);font-weight:500} .range-slider:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:4px} /* ══════════════════════════════════════════════ 19. PROMO BANNER ══════════════════════════════════════════════ * * [NIEUW v2.1] Voor seizoensgebonden acties en aanbiedingen. * * VERWACHTE DOM-VOLGORDE: de promo-banner moet BOVEN de header/nav staan: * * *
…
← eerst *
…
← daarna *
…
* * * z-index: 1001 (boven .site-header z-index: 1000). * Als de banner ná de header in de DOM staat, overlapt hij de navigatie. * * Gebruik: *
*
*

* Eerste maand gratis — Stap over vóór 1 mei. *

* Plan gesprek → *
*
* * Varianten: * .promo-banner--subtle (groen-licht achtergrond, groene tekst) */ .promo-banner{ background:var(--dark);color:rgba(255,255,255,.9); padding:12px 0;text-align:center;position:relative;z-index:1001; } .promo-banner--subtle{ background:var(--green-light);color:var(--ink); border-bottom:1px solid var(--green-border); } .promo-text{ font-size:0.88rem;font-weight:600;color:inherit;line-height:1.4; } .promo-text strong{font-weight:800} .promo-banner--subtle .promo-text strong{color:var(--green-text)} /* ══════════════════════════════════════════════ 20. NAVIGATIE ══════════════════════════════════════════════ * * [FIX v2.1] Twee navigatie-patronen, nu conflict-vrij: * * A) NIEUW — .site-header (sticky, voor nieuwe pagina's): *
*
…
*
* * B) LEGACY — bare