/* ========================================================================= OPGELOST! — stijlsysteem v5 René Uijttenboogaard | klus-opgelost.nl ========================================================================= */ /* Lettertypen worden NIET meer hier ge-@import: dat maakte een wachtrij (html → styles.css → @import → font-css → fontbestanden) waarbij elke stap op de vorige wachtte en de pagina stilstond. Ze staan nu als in de van elke pagina, vlak na de preconnects, zodat de browser ze meteen bij de eerste keer lezen ziet en parallel ophaalt. NIET terugzetten. */ :root { --navy: #010340; --teal: #04a2ab; --teal-light: #06c4cf; --teal-dark: #027780; --teal-pale: #e8fafb; --teal-soft: #c8f0f2; --bg: #ffffff; --bg-card: #ffffff; --bg-alt: #edfcfd; --border: #cce8ea; --border-soft: #e3f5f6; --text: #0a1f20; --text-soft: #2e5f63; --text-muted: #3f767b; --white: #ffffff; --success: #0e9f6e; --danger: #e02424; /* Sterren. Bewust géén --teal: sterren zijn een universeel beoordelingssymbool en dat leest de bezoeker in goud/amber sneller dan in de huisstijlkleur. Amber is bovendien de complementaire kleur van turquoise, dus het botst niet. */ --gold: #f59e0b; --font-display: 'Sora', system-ui, sans-serif; --font-body: 'Lexend', system-ui, sans-serif; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-xl: 30px; --radius-full: 999px; --shadow-xs: 0 1px 5px rgba(4,162,171,.07); --shadow-sm: 0 4px 18px rgba(4,162,171,.11); --shadow-md: 0 12px 40px rgba(4,162,171,.14); --shadow-lg: 0 24px 64px rgba(1,3,64,.18); --container: 1120px; --gutter: clamp(20px, 5vw, 48px); --ease: cubic-bezier(.2,.7,.3,1); --header-h: 138px; /* Footer: exact de logo-turquoise (= --teal #04a2ab), op verzoek van René. */ --footer-bg: var(--teal); /* Vertelt de browser dat de site zelf licht/donker beheert (via de themaknop). Voorkomt dat "geforceerd donker" van de telefoon de achtergrond overrulet. */ color-scheme: light dark; } /* ── Donker thema: grafiet / antraciet ── */ [data-theme="dark"] { color-scheme: dark; --bg: #111118; --bg-card: #1c1c27; --bg-alt: #161621; --border: #2e2e42; --border-soft: #252536; --text: #e8e8f4; --text-soft: #9494b2; --text-muted: #9090b4; --teal-pale: rgba(4,162,171,.12); --teal-soft: rgba(4,162,171,.20); /* Iets lichter goud: #f59e0b is op #1c1c27 te donker en dooft weg. */ --gold: #fbbf24; } /* Lichte keuze is óók expliciet, zodat de knop op een donkere telefoon wint. */ [data-theme="light"]{ color-scheme: light; } /* ── Reset ── */ *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;background:var(--bg);} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}} body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;transition:background .25s,color .25s;} img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} ul{margin:0;padding:0;list-style:none;} button{font:inherit;cursor:pointer;} h1,h2,h3,h4{font-family:var(--font-display);color:var(--text);line-height:1.15;margin:0 0 .5em;letter-spacing:-.02em;} h1{font-size:clamp(2rem,1.3rem+2.8vw,3.4rem);font-weight:800;} h2{font-size:clamp(1.5rem,1.1rem+1.4vw,2.2rem);font-weight:800;} h3{font-size:clamp(1rem,.95rem+.3vw,1.2rem);font-weight:700;} p{margin:0 0 1em;color:var(--text-soft);} strong{color:var(--text);} .container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);} /* ── Eyebrow ── */ .eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:.85em;} .eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px rgba(4,162,171,.18);flex-shrink:0;} .lede{font-size:1.08rem;color:var(--text-soft);max-width:56ch;} /* Skip link */ .skip-link{position:absolute;left:-999px;top:0;background:var(--teal);color:#fff;padding:10px 18px;border-radius:0 0 8px 0;font-weight:700;z-index:1000;} .skip-link:focus{left:0;} :focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px;} /* ── Secties ── */ .section{padding:clamp(52px,8vw,96px) 0;} .section-alt{background:var(--bg-alt);} .section-tight{padding:clamp(32px,5vw,56px) 0;} .section-head{max-width:640px;margin-bottom:clamp(28px,4vw,48px);} .section-head.center{margin-inline:auto;text-align:center;} hr.divider{border:none;height:1px;background:var(--border);margin:0;} /* ── Knoppen ── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:1.05rem;padding:15px 32px;border-radius:var(--radius-full);border:2px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .18s var(--ease),box-shadow .18s,background .18s,border-color .18s,color .18s;text-decoration:none;} .btn-primary{background:var(--teal);color:#fff;box-shadow:0 6px 20px rgba(4,162,171,.30);} .btn-primary:hover{background:var(--teal-light);transform:translateY(-2px);box-shadow:0 10px 28px rgba(4,162,171,.40);} .btn-outline{background:var(--teal-pale);border-color:var(--teal);color:var(--teal-dark);} .btn-outline:hover{background:var(--teal-pale);transform:translateY(-2px);} .btn-ghost{background:transparent;border-color:var(--border);color:var(--text-soft);} .btn-ghost:hover{border-color:var(--teal);color:var(--teal);} .btn-wa{background:#25d366;color:#fff;box-shadow:0 6px 20px rgba(37,211,102,.28);} .btn-wa:hover{background:#1eb858;transform:translateY(-2px);} .btn-sm{padding:11px 22px;font-size:.95rem;} .btn[disabled]{opacity:.5;cursor:not-allowed;transform:none!important;} .btn-row{display:flex;flex-wrap:wrap;gap:12px;} /* ── Header ── */ .site-header{position:sticky;top:0;z-index:500;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--border-soft);transition:background .25s;} [data-theme="dark"] .site-header{background:rgba(17,17,24,.94);border-color:var(--border);} .site-header .container{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--header-h);} /* LOGO — licht thema: logo-light.png, donker thema: logo-dark.png */ .brand{display:flex;align-items:center;} .brand .logo-light{display:block;} .brand .logo-dark{display:none;} [data-theme="dark"] .brand .logo-light{display:none;} [data-theme="dark"] .brand .logo-dark{display:block;} .brand img{height:112px;width:auto;object-fit:contain;} /* Mobiel: iets kleiner logo maar zelfde verhoudingen */ /* Mobiel: kleiner logo — header-h wordt onder de 920px-query gezet (cascade) */ /* Horizontale nav vervalt: navigatie loopt nu via de burger (alle breedtes) */ .main-nav{display:none;} .main-nav ul{display:flex;gap:26px;} .main-nav a{font-family:var(--font-display);font-weight:600;font-size:.98rem;color:var(--text-soft);position:relative;padding:6px 0;white-space:nowrap;transition:color .15s;} .main-nav a:hover,.main-nav a[aria-current="page"]{color:var(--teal);} .main-nav a[aria-current="page"]::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:2px;background:var(--teal);} .header-actions{display:flex;align-items:center;gap:10px;} .phone-pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:700;font-size:.88rem;color:var(--text);background:var(--bg-card);border:1.5px solid var(--border);padding:9px 16px;border-radius:var(--radius-full);transition:border-color .15s,color .15s;white-space:nowrap;} .phone-pill:hover{border-color:var(--teal);color:var(--teal);} .phone-pill svg{width:15px;height:15px;stroke:var(--teal);flex-shrink:0;} .theme-toggle{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-full);color:var(--text-muted);transition:border-color .15s,color .15s;} .theme-toggle:hover{border-color:var(--teal);color:var(--teal);} .theme-toggle svg{width:17px;height:17px;} .icon-sun{display:none;} [data-theme="dark"] .icon-moon{display:none;} [data-theme="dark"] .icon-sun{display:block;} .lang-switch{display:inline-flex;font-family:var(--font-display);font-weight:700;font-size:.78rem;border:1.5px solid var(--border);border-radius:var(--radius-full);overflow:hidden;} .lang-switch a{padding:7px 12px;color:var(--text-muted);transition:background .15s,color .15s;} .lang-switch a[aria-current="true"]{background:var(--teal);color:#fff;} .lang-switch a:not([aria-current="true"]):hover{background:var(--teal-pale);color:var(--teal);} .nav-toggle{display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text);transition:border-color .15s,color .15s;} .nav-toggle:hover{border-color:var(--teal);color:var(--teal);} .nav-toggle svg{width:20px;height:20px;} .nav-toggle .icon-close{display:none;} .nav-toggle[aria-expanded="true"] .icon-menu{display:none;} .nav-toggle[aria-expanded="true"] .icon-close{display:block;} /* Uitschuifmenu: nette kaart die onder de header opent (burger, alle breedtes). Auto-hoogte = alle knoppen meteen in beeld; geen smalle scrollbalk meer. */ .mobile-panel{position:absolute;top:calc(var(--header-h) - 6px);right:max(var(--gutter),calc((100vw - var(--container)) / 2 + var(--gutter))); width:min(300px,calc(100vw - 2*var(--gutter))); max-height:calc(100dvh - var(--header-h) - 16px);overflow-y:auto; background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);padding:14px 16px 16px;z-index:590; opacity:0;visibility:hidden;transform:translateY(-10px) scale(.98);transform-origin:top right; transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;} .mobile-panel.is-open{opacity:1;visibility:visible;transform:none;} .mobile-panel ul{display:flex;flex-direction:column;gap:1px;margin-bottom:12px;} .mobile-panel a{display:block;font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--text);padding:11px 8px;border-bottom:1px solid var(--border-soft);border-radius:6px;transition:background .12s,color .12s;} .mobile-panel ul li:last-child a{border-bottom:none;} .mobile-panel a:hover,.mobile-panel a:focus-visible{background:var(--teal-pale);color:var(--teal);} .mobile-panel .phone-pill{width:100%;justify-content:center;margin-bottom:10px;} .mobile-panel .lang-switch{width:max-content;} @media(max-width:520px){.mobile-panel{left:var(--gutter);right:var(--gutter);width:auto;transform-origin:top center;}} @media(max-width:920px){:root{--header-h:94px;}.brand img{height:68px;}.header-actions .phone-pill .phone-text{display:none;}} @media(max-width:640px){:root{--header-h:72px;}.brand img{height:55px;width:auto;}} /* ── Hero ── */ .hero{padding:clamp(52px,8vw,96px) 0;background:linear-gradient(160deg,var(--teal-pale) 0%,var(--bg) 55%);} [data-theme="dark"] .hero{background:linear-gradient(160deg,rgba(4,162,171,.07) 0%,var(--bg) 55%);} .hero .container{display:block;} .hero-copy{max-width:760px;} .hero-copy h1{margin-bottom:.35em;} .hero-copy .lede{margin-bottom:1.6em;} .trust-strip{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:2em;padding-top:1.4em;border-top:1px solid var(--border);} .trust-strip li{display:flex;align-items:center;gap:7px;font-size:.84rem;color:var(--text-muted);font-weight:500;} .trust-strip svg{width:13px;height:13px;stroke:var(--teal);flex-shrink:0;} /* Op smalle schermen elk pluspunt op een eigen regel. Bewust een kolom en geen flex-wrap: bij wrap bepaalt de pixelbreedte welke twee punten toevallig samen op een regel passen — dat verschilt per toestel en per taal, en zag er scheef uit (één punt hing achter een ander). Een kolom is altijd voorspelbaar. */ @media(max-width:560px){.trust-strip{flex-direction:column;gap:8px;}} .hero-media{position:relative;} .hero-frame{border-radius:var(--radius-xl);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--shadow-lg);background:var(--bg-alt);border:1px solid var(--border);} .hero-frame img{width:100%;height:100%;object-fit:cover;object-position:center top;} [data-theme="dark"] .hero-badge{background:var(--teal-dark);} @media(max-width:880px){.hero .container{grid-template-columns:1fr;}.hero-media{order:-1;max-width:300px;margin-inline:auto;width:100%;}} /* ── Placeholders ── */ .img-placeholder{width:100%;height:100%;min-height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:var(--bg-alt);border:1.5px dashed var(--border);color:var(--text-muted);text-align:center;padding:18px;border-radius:inherit;} .img-placeholder svg{width:28px;height:28px;stroke:var(--teal);} .img-placeholder strong{display:block;color:var(--text-soft);font-size:.84rem;font-weight:600;} .img-placeholder span{font-size:.75rem;color:var(--text-muted);} /* ── Intro / Over mij ── */ .intro-grid{display:grid;grid-template-columns:.48fr 1fr;gap:clamp(28px,5vw,64px);align-items:start;} .intro-portrait{border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-md);border:1px solid var(--border);background:var(--bg-alt);} .intro-portrait img{width:100%;height:100%;object-fit:cover;display:block;} .intro-copy blockquote{border-left:3px solid var(--teal);margin:1.4em 0;padding:.6em 0 .6em 1.2em;font-style:italic;color:var(--text-soft);font-size:1.04rem;} @media(max-width:800px){.intro-grid{grid-template-columns:1fr;}.intro-portrait{max-width:240px;margin-inline:auto;}} /* ── Diensten ── */ .service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;} .service-card{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:24px 20px;transition:transform .2s var(--ease),border-color .2s,box-shadow .2s;} .service-card:hover{transform:translateY(-3px);border-color:var(--teal);box-shadow:var(--shadow-sm);} .service-card .icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);background:var(--teal-pale);margin-bottom:14px;} [data-theme="dark"] .service-card .icon{background:rgba(4,162,171,.15);} .service-card .icon svg{width:30px;height:30px;stroke:var(--teal);} .service-card h3{font-size:.98rem;margin-bottom:.25em;} .service-card p{font-size:.86rem;color:var(--text-muted);margin:0;} /* Tegels zijn nu links naar contact: subtiele klik-cue */ .service-card{position:relative;} a.service-card{cursor:pointer;} a.service-card:hover h3{color:var(--teal);} a.service-card::after{content:'\2192';position:absolute;top:22px;right:18px;font-family:var(--font-display);font-weight:800;font-size:1.1rem;color:var(--teal);opacity:0;transform:translateX(-5px);transition:opacity .2s var(--ease),transform .2s var(--ease);} a.service-card:hover::after,a.service-card:focus-visible::after{opacity:1;transform:none;} @media(max-width:1000px){.service-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:540px){.service-grid{grid-template-columns:1fr;}} /* ── Tip-kaart (werkwijze) ── */ .tip-card{display:flex;gap:16px;align-items:flex-start;background:#d8f5f6;border:1.5px solid var(--teal);border-radius:var(--radius-lg);padding:clamp(20px,3vw,28px);margin-top:clamp(34px,4.5vw,50px);} [data-theme="dark"] .tip-card{background:rgba(4,162,171,.12);border-color:rgba(4,162,171,.42);} .tip-card .tip-icon{width:44px;height:44px;flex-shrink:0;border-radius:var(--radius-md);background:var(--teal);display:flex;align-items:center;justify-content:center;} .tip-card .tip-icon svg{width:23px;height:23px;stroke:#fff;} .tip-card h3{margin:0 0 .35em;color:var(--teal-dark);} [data-theme="dark"] .tip-card h3{color:var(--teal-light);} .tip-card p{margin:0;color:var(--text-soft);font-size:.95rem;} .tip-card p a{color:var(--teal-dark);font-weight:600;text-decoration:underline;} [data-theme="dark"] .tip-card p a{color:var(--teal-light);} /* ── Tarief ── */ .rate-card{background:var(--navy);border-radius:var(--radius-lg);padding:clamp(28px,4vw,48px);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;} [data-theme="dark"] .rate-card{background:linear-gradient(135deg,#0d1117,#161824);border:1px solid var(--border);} .rate-card h2{color:#fff;margin:0;} .rate-card p{color:rgba(255,255,255,.6);margin:0;} .rate-price{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,1.4rem+2vw,2.8rem);color:#fff;white-space:nowrap;line-height:1;} .rate-price small{font-size:1rem;font-weight:500;color:#fff;} /* ── CTA ── */ .cta-banner{background:var(--navy);border-radius:var(--radius-lg);padding:clamp(30px,4vw,52px);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;} [data-theme="dark"] .cta-banner{background:linear-gradient(135deg,#0d1117,#161824);border:1px solid var(--border);} .cta-banner h2{color:#fff;margin-bottom:.2em;} .cta-banner p{color:rgba(255,255,255,.6);margin:0;} /* ── Waarden ── */ .values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} .value-card{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:22px 20px;} .value-card h3{display:flex;align-items:center;gap:9px;font-size:.98rem;margin-bottom:.4em;} .value-card h3 svg{width:18px;height:18px;stroke:var(--teal);flex-shrink:0;} .value-card p{font-size:.88rem;color:var(--text-muted);margin:0;} @media(max-width:880px){.values-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){.values-grid{grid-template-columns:1fr;}} /* ── Consultancy teaser (homepage) ── */ .consultancy-teaser{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:clamp(28px,4vw,44px);display:flex;align-items:center;gap:28px;flex-wrap:wrap;box-shadow:var(--shadow-xs);} .consultancy-teaser .icon-wrap{width:64px;height:64px;border-radius:var(--radius-md);background:var(--teal-pale);display:flex;align-items:center;justify-content:center;flex-shrink:0;} [data-theme="dark"] .consultancy-teaser .icon-wrap{background:rgba(4,162,171,.15);} .consultancy-teaser .icon-wrap svg{width:32px;height:32px;stroke:var(--teal);} .consultancy-teaser-body{flex:1;} .consultancy-teaser-body h3{margin-bottom:.25em;} .consultancy-teaser-body p{color:var(--text-muted);font-size:.94rem;margin:0;} /* ── Projecten ── */ .project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;} .project-card{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-xs);} .compare{display:grid;grid-template-columns:1fr 1fr;} .compare-cell{position:relative;aspect-ratio:4/3;} .compare-cell .img-placeholder{border-radius:0;border:none;border-right:1px solid var(--border);min-height:100%;} .compare-cell:last-child .img-placeholder{border-right:none;border-left:1px solid var(--border);} .compare-cell img{width:100%;height:100%;object-fit:cover;} .compare-tag{position:absolute;top:8px;left:8px;background:var(--bg-card);color:var(--text);font-family:var(--font-display);font-weight:700;font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:var(--radius-full);border:1px solid var(--border);z-index:2;} .project-card .project-body{padding:18px 20px;} .project-card h3{margin-bottom:.25em;} .project-card p{color:var(--text-muted);font-size:.88rem;margin:0;} .project-tag-row{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap;} .chip{font-size:.7rem;font-weight:700;letter-spacing:.03em;color:var(--teal);background:var(--teal-pale);border:1px solid rgba(4,162,171,.22);padding:3px 10px;border-radius:var(--radius-full);font-family:var(--font-display);} .empty-state{background:var(--bg-card);border:1.5px dashed var(--border);border-radius:var(--radius-lg);padding:clamp(36px,5vw,64px);text-align:center;} .empty-state svg{width:40px;height:40px;stroke:var(--teal);margin:0 auto 16px;} .empty-state h3{margin-bottom:.3em;} .empty-state p{color:var(--text-muted);font-size:.94rem;margin:0;} @media(max-width:700px){.project-grid{grid-template-columns:1fr;}} /* ── Reviews ── */ .review-list{display:flex;flex-direction:column;gap:16px;} .review-card{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:22px 24px;box-shadow:var(--shadow-xs);} .review-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:8px;flex-wrap:wrap;} .review-who{font-family:var(--font-display);font-weight:700;color:var(--text);} .review-city{font-weight:400;color:var(--text-muted);font-size:.9em;} .review-date{font-size:.78rem;color:var(--text-muted);} .review-card>p{color:var(--text-soft);margin:8px 0 0;} /* Vertaallabel onder een review. Bewust een labeltje en geen 'toon origineel'- knop: dat vraagt JS + een tweede tekst per review, voor een paar regels tekst. */ /* Onderwerpregel boven de reviewtekst. Staat NA .review-card>p, want die zet kleur en marge voor élke

in de kaart — inclusief deze. */ .review-subject{font-family:var(--font-display);font-weight:700;color:var(--text);font-size:1.02rem;line-height:1.35;margin:12px 0 0;} .review-subject+p{margin-top:4px;} .review-lang{margin:10px 0 0;font-size:.74rem;color:var(--text-muted);font-style:italic;} .review-reply{margin-top:14px;background:var(--bg-alt);border-left:3px solid var(--teal);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:12px 16px;} .review-reply .reply-tag{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:.72rem;color:var(--teal);letter-spacing:.04em;text-transform:uppercase;margin-bottom:5px;} .review-reply p{margin:0;font-size:.9rem;color:var(--text-soft);} .stars{display:inline-flex;gap:2px;} .stars svg{width:16px;height:16px;} .stars svg.filled{fill:var(--gold);stroke:var(--gold);} .stars svg.empty{fill:none;stroke:var(--border);} /* ── Formulieren ── */ .form-card{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:clamp(24px,4vw,40px);box-shadow:var(--shadow-xs);} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;} .form-group{display:flex;flex-direction:column;gap:7px;} .form-group.full{grid-column:1/-1;} .form-group label{font-weight:600;font-size:.88rem;color:var(--text);} .form-group .hint{font-size:.76rem;color:var(--text-muted);margin-top:-3px;} .form-group input[type=text],.form-group input[type=email],.form-group input[type=tel],.form-group select,.form-group textarea{width:100%;background:var(--bg-alt);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:12px 15px;color:var(--text);font-family:var(--font-body);font-size:.95rem;transition:border-color .15s;} .form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-muted);} .form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--teal);outline:none;} .form-group textarea{resize:vertical;min-height:110px;} .form-group .form-warn{display:block;font-size:.78rem;color:var(--danger);margin-top:5px;} /* Leeg = weg, anders reserveert het vakje ruimte die er niet hoort te zijn. */ .form-group .form-warn:empty{display:none;} .required{color:var(--teal);} .optional{color:var(--text-muted);font-weight:400;font-size:.82rem;} .file-input{width:100%;background:var(--bg-alt);border:1.5px dashed var(--border);border-radius:var(--radius-sm);padding:11px 13px;color:var(--text);font-family:var(--font-body);font-size:.9rem;cursor:pointer;transition:border-color .15s;} .file-input:hover{border-color:var(--teal);} .file-input:focus{border-color:var(--teal);outline:none;} .file-input::file-selector-button{font-family:var(--font-body);font-size:.85rem;font-weight:600;color:#fff;background:var(--teal);border:none;border-radius:var(--radius-sm);padding:7px 14px;margin-right:12px;cursor:pointer;transition:filter .15s;} .file-input::file-selector-button:hover{filter:brightness(1.06);} .file-list{display:flex;flex-direction:column;gap:6px;margin-top:9px;} .file-list:empty{margin-top:0;} .file-chip{display:flex;align-items:center;gap:8px;background:var(--bg-alt);border:1px solid var(--border);border-radius:999px;padding:5px 6px 5px 13px;font-size:.82rem;color:var(--text);max-width:100%;box-sizing:border-box;} /* Naam kapt af met …, de grootte en het kruisje blijven altijd zichtbaar */ .file-chip-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .file-chip-size{flex-shrink:0;color:var(--muted,#6b7280);font-size:.78rem;} .file-chip-remove{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;padding:0;border:none;border-radius:50%;background:var(--border);color:var(--text);font-size:15px;line-height:1;cursor:pointer;transition:background .15s,color .15s;} .file-chip-remove:hover{background:var(--teal);color:#fff;} .file-chip-remove:focus-visible{outline:2px solid var(--teal);outline-offset:2px;} .file-note{margin-top:7px;font-size:.82rem;color:var(--accent,#c0392b);} /* Bevestigingsscherm na een geslaagde formulierverzending */ .success-overlay{display:none;position:fixed;inset:0;z-index:700;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:20px;} .success-overlay.open{display:flex;} .success-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:36px 28px 28px;width:100%;max-width:420px;box-shadow:var(--shadow-lg);border:1px solid var(--border);text-align:center;} .success-icon{width:56px;height:56px;margin:0 auto 18px;border-radius:50%;background:var(--success);display:flex;align-items:center;justify-content:center;} .success-icon svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;} .success-card h3{margin-bottom:.4em;} .success-card p{font-size:.95rem;color:var(--text-muted);margin-bottom:1.6em;line-height:1.5;} .file-note.is-info{color:var(--muted,#6b7280);} /* Eigen kiesknop: het native bestandsveld is verborgen (toonde altijd "geen bestand gekozen", omdat we het veld na elke keuze legen; de gekozen bestanden staan als chips eronder). */ .file-picker-wrap{position:relative;} .file-picker{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;} .file-btn{display:inline-flex;align-items:center;gap:9px;width:100%;background:var(--bg-alt);border:1.5px dashed var(--border);border-radius:var(--radius-sm);padding:11px 13px;color:var(--text);font-family:var(--font-body);font-size:.9rem;cursor:pointer;transition:border-color .15s,background .15s;box-sizing:border-box;} .file-btn:hover{border-color:var(--teal);} .file-picker-wrap:focus-within .file-btn{border-color:var(--teal);border-style:solid;} .file-btn-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--teal);color:#fff;font-size:17px;line-height:1;font-weight:600;} .file-btn-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .btn:disabled{cursor:progress;opacity:.85;transform:none!important;} .btn-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:btnspin .7s linear infinite;flex-shrink:0;} @keyframes btnspin{to{transform:rotate(360deg);}} .form-progress{height:6px;background:var(--bg-alt);border-radius:999px;overflow:hidden;margin-top:14px;display:none;} .form-progress.is-active{display:block;} .form-progress-bar{height:100%;width:40%;background:var(--teal);border-radius:999px;animation:progressSlide 1.15s ease-in-out infinite;} @keyframes progressSlide{0%{margin-left:-42%;}100%{margin-left:100%;}} /* Uitzondering op de blanket reduced-motion-regel (zie boven, ~r86): een functionele laadindicator MOET blijven bewegen, anders staat de "bezig"- spinner stil en lijkt het formulier vastgelopen. Geen draaiing/schuiven (dat is nu juist wat reduced-motion-gebruikers willen vermijden), maar een zachte opacity-pulse — die geeft wél het "bezig"-signaal zonder beweging die klachten geeft. Hogere specificiteit dan `*`, dus de !important wint. */ @media(prefers-reduced-motion:reduce){ .btn-spinner{border-color:rgba(255,255,255,.6)!important;animation:btnpulse 1.1s ease-in-out infinite!important;} .form-progress-bar{animation:btnpulse 1.1s ease-in-out infinite!important;} } @keyframes btnpulse{0%,100%{opacity:.4;}50%{opacity:1;}} .star-input{display:flex;gap:5px;flex-direction:row-reverse;justify-content:flex-end;} .star-input input{position:absolute;opacity:0;pointer-events:none;} .star-input label{cursor:pointer;} .star-input label svg{width:26px;height:26px;fill:none;stroke:var(--border);transition:fill .15s,stroke .15s;} .star-input input:checked~label svg,.star-input label:hover svg,.star-input label:hover~label svg{fill:var(--gold);stroke:var(--gold);} .form-foot{display:flex;align-items:center;gap:16px;margin-top:20px;flex-wrap:wrap;} .form-msg{font-size:.88rem;padding:8px 0;display:none;} .form-msg.success{color:var(--success);display:block;} .form-msg.error{color:var(--danger);display:block;} .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;} @media(max-width:680px){.form-grid{grid-template-columns:1fr;}} /* ── Contact ── */ .contact-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(24px,4vw,52px);align-items:start;} .contact-portrait{border-radius:var(--radius-xl);overflow:hidden;aspect-ratio:3/4;box-shadow:var(--shadow-md);border:1px solid var(--border);background:var(--bg-alt);margin-bottom:22px;} .contact-portrait img{width:100%;height:100%;object-fit:cover;object-position:center top;} .contact-info{display:flex;flex-direction:column;gap:16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(20px,3vw,28px);} .contact-info-item{display:flex;gap:12px;align-items:flex-start;} .contact-info-item .icon{width:38px;height:38px;flex-shrink:0;background:var(--teal-pale);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;} [data-theme="dark"] .contact-info-item .icon{background:rgba(4,162,171,.15);} .contact-info-item .icon svg{width:17px;height:17px;stroke:var(--teal);} .contact-info-item h3{margin:0 0 2px;font-size:.88rem;} .contact-info-item a,.contact-info-item p{margin:0;color:var(--text-soft);font-size:.9rem;word-break:break-word;} .contact-info-item a:hover{color:var(--teal);} .hours-table{width:100%;border-collapse:collapse;margin-top:4px;} .hours-table td{padding:4px 0;font-size:.88rem;color:var(--text-muted);} .hours-table td:last-child{text-align:right;color:var(--text-soft);font-weight:500;} .privacy-note{margin-top:22px;padding-top:18px;border-top:1px solid var(--border);font-size:.82rem;color:var(--text-muted);} .privacy-note a{color:var(--teal);} @media(max-width:840px){.contact-grid{grid-template-columns:1fr;}.contact-portrait{max-width:240px;}} /* ── Werkwijze stappen ── */ .steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} .step-card{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:26px 22px;} .step-num{font-family:var(--font-display);font-weight:800;font-size:.88rem;color:#fff;background:var(--teal);width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px;} .step-card h3{margin-bottom:.35em;} .step-card p{color:var(--text-muted);font-size:.9rem;margin:0;} @media(max-width:800px){.steps-grid{grid-template-columns:1fr;gap:12px;}} /* ── Consultancy pagina ── */ .consultancy-hero-img{border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-md);} .consultancy-hero-img img{width:100%;object-fit:cover;} .expertise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} .expertise-card{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:24px 20px;} .expertise-card h3{display:flex;align-items:center;gap:10px;font-size:1.02rem;margin-bottom:.5em;} .expertise-card h3 svg{width:20px;height:20px;stroke:var(--teal);flex-shrink:0;} .expertise-card p{font-size:.9rem;color:var(--text-muted);margin:0;} @media(max-width:900px){.expertise-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){.expertise-grid{grid-template-columns:1fr;}} .cred-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.4em;} .cred-badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:600;font-size:.8rem;color:var(--teal);background:var(--teal-pale);border:1px solid rgba(4,162,171,.25);padding:6px 14px;border-radius:var(--radius-full);} [data-theme="dark"] .cred-badge{background:rgba(4,162,171,.1);} .cred-badge svg{width:13px;height:13px;stroke:var(--teal);} .beschikbaarheid-card{background:var(--navy);border-radius:var(--radius-lg);padding:clamp(26px,4vw,40px);} [data-theme="dark"] .beschikbaarheid-card{background:linear-gradient(135deg,#0d1117,#161824);border:1px solid var(--border);} .beschikbaarheid-card h3{color:#fff;margin-bottom:.8em;} .beschikbaarheid-card ul{display:flex;flex-direction:column;gap:9px;} .beschikbaarheid-card li{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.72);font-size:.92rem;} .beschikbaarheid-card li svg{width:15px;height:15px;stroke:var(--teal-light);flex-shrink:0;} /* ── Privacybeleid ── */ .policy{max-width:74ch;} .policy h2{margin-top:1.6em;font-size:1.15rem;} .policy h2:first-of-type{margin-top:0;} .policy ul{margin:0 0 1em;padding-left:1.3em;list-style:disc;} .policy li{margin-bottom:.35em;color:var(--text-soft);} /* ── Pagina hero ── */ .page-hero{padding:clamp(40px,6vw,72px) 0 clamp(24px,3vw,36px);background:linear-gradient(160deg,var(--teal-pale) 0%,var(--bg) 55%);} [data-theme="dark"] .page-hero{background:linear-gradient(160deg,rgba(4,162,171,.07) 0%,var(--bg) 55%);} /* ── Footer ── */ .site-footer{background:var(--footer-bg);padding:clamp(30px,4vw,46px) 0 18px;} [data-theme="dark"] .site-footer{background:#0a0a12;border-top:1px solid var(--border);} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.16);} [data-theme="dark"] .footer-grid{border-color:var(--border);} /* Footer logo: volledig wit wordmark op de teal footer */ .footer-brand img{height:92px;width:auto;margin-bottom:12px;} .footer-brand p{color:rgba(255,255,255,.62);font-size:.88rem;max-width:28ch;} .footer-col h4{font-family:var(--font-display);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:14px;} .footer-col ul{display:flex;flex-direction:column;gap:9px;} .footer-col a{color:rgba(255,255,255,.82);font-size:.92rem;transition:color .15s;} .footer-col a:hover{color:#fff;} .footer-col p{color:rgba(255,255,255,.82);font-size:.92rem;margin:0;} .footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 20px;padding-top:15px;font-size:.78rem;color:rgba(255,255,255,.62);} .footer-bottom p{margin:0;} .footer-bottom a{color:rgba(255,255,255,.62);} .footer-bottom a:hover{color:#fff;} /* Juridische regel: nette middot-scheiding op breed, gestapeld op smal scherm */ .footer-legal{display:flex;flex-wrap:wrap;align-items:baseline;margin:0;color:#fff;} .footer-legal span:not(:first-child){margin-left:14px;} .footer-legal span:not(:first-child)::before{content:'·';margin-right:14px;opacity:.5;} @media(max-width:780px){.footer-grid{grid-template-columns:1fr 1fr;}} @media(max-width:560px){.footer-legal{flex-direction:column;}.footer-legal span:not(:first-child){margin-left:0;}.footer-legal span:not(:first-child)::before{content:none;}.footer-brand img{height:60px;}} @media(max-width:480px){.footer-grid{grid-template-columns:1fr;}} /* ── Scroll-reveal ── */ .reveal{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease);} .reveal.is-visible{opacity:1;transform:translateY(0);} /* ── WhatsApp popup ── */ .wa-popup-overlay{display:none;position:fixed;inset:0;z-index:600;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);align-items:flex-end;justify-content:center;padding-bottom:20px;} .wa-popup-overlay.open{display:flex;} .wa-popup{background:var(--bg-card);border-radius:var(--radius-lg) var(--radius-lg) var(--radius-md) var(--radius-md);padding:28px 24px 20px;width:100%;max-width:400px;box-shadow:var(--shadow-lg);border:1px solid var(--border);} .wa-popup h3{text-align:center;margin-bottom:.3em;} .wa-popup p{text-align:center;font-size:.9rem;color:var(--text-muted);margin-bottom:1.4em;} .wa-popup .btn-row{flex-direction:column;} .wa-popup .btn{width:100%;justify-content:center;} .wa-popup-cancel{display:block;text-align:center;margin-top:14px;font-size:.86rem;color:var(--text-muted);cursor:pointer;} .wa-popup-cancel:hover{color:var(--teal);} /* Sticky footer voor korte utility-pagina's (bedankt / thanks) */ body.page-utility{display:flex;flex-direction:column;min-height:100vh} body.page-utility main{flex:1 0 auto} /* ── Onderwerpen-keuze: multi-select dropdown (contactformulier) ── */ .klus-field{grid-column:1/-1;} .klus-legend{font-weight:600;font-size:.88rem;color:var(--text);margin-bottom:9px;display:block;} .klus-legend .klus-hint{font-weight:400;color:var(--text-muted);font-size:.82rem;} .klus-select{position:relative;} /* de knop die het lijstje opent */ .klus-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;cursor:pointer;font-family:var(--font-body);font-size:.98rem;color:var(--text);background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:12px 15px;transition:border-color .15s;} .klus-select-trigger:hover{border-color:var(--teal);} .klus-select-trigger:focus-visible{outline:3px solid var(--teal);outline-offset:2px;} .klus-select.is-open .klus-select-trigger{border-color:var(--teal);} .klus-select-label{display:flex;flex-wrap:wrap;gap:6px;min-width:0;flex:1;} .klus-select-label.is-empty{display:block;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .klus-chip{display:inline-flex;align-items:center;gap:6px;background:var(--bg-alt);border:1px solid var(--border);border-radius:999px;padding:3px 5px 3px 11px;font-size:.84rem;color:var(--text);line-height:1.35;max-width:100%;} .klus-chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .klus-chip-remove{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:18px;height:18px;border-radius:50%;background:var(--border);color:var(--text);font-size:13px;line-height:1;cursor:pointer;transition:background .15s,color .15s;} .klus-chip-remove:hover{background:var(--teal);color:#fff;} .klus-select-caret{width:18px;height:18px;flex-shrink:0;stroke:var(--text-muted);transition:transform .2s var(--ease);} .klus-select.is-open .klus-select-caret{transform:rotate(180deg);} /* het uitklappaneel met de aanvinkbare onderwerpen */ .klus-select-panel{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:0 6px 6px;max-height:330px;overflow-y:auto;} .klus-select.is-open .klus-select-panel{display:block;} .klus-option{display:flex;gap:11px;align-items:flex-start;padding:9px 10px;border-radius:var(--radius-sm);cursor:pointer;transition:background .12s;} .klus-option:hover{background:var(--bg-alt);} .klus-option>input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;} .klus-check{flex-shrink:0;width:20px;height:20px;margin-top:1px;border:1.5px solid var(--border);border-radius:6px;background:var(--bg-alt);display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s;} .klus-check::after{content:'';width:10px;height:5.5px;margin-top:-2px;border-left:2.4px solid #fff;border-bottom:2.4px solid #fff;transform:rotate(-45deg) scale(0);transition:transform .15s var(--ease);} .klus-option>input:checked+.klus-check{background:var(--teal);border-color:var(--teal);} .klus-option>input:checked+.klus-check::after{transform:rotate(-45deg) scale(1);} .klus-option>input:focus-visible+.klus-check{outline:3px solid var(--teal);outline-offset:2px;} .klus-option-text{display:flex;flex-direction:column;gap:2px;} .klus-option-title{font-family:var(--font-display);font-weight:600;font-size:.86rem;color:var(--text);line-height:1.25;} .klus-option-desc{font-size:.78rem;line-height:1.4;color:var(--text-muted);} /* stabiliteit: geen scroll-chaining naar de pagina + vaste positie verborgen input (voorkomt "verspringen") */ .klus-select-panel{overscroll-behavior:contain;} .klus-option{position:relative;} .klus-option>input{top:0;left:0;} /* "Klaar"-knop bovenin het uitschuifmenu (sticky) */ .klus-select-done-row{position:sticky;top:0;z-index:2;background:var(--bg-card);margin:0 -6px 4px;padding:10px 12px;border-bottom:1px solid var(--border);border-radius:var(--radius-md) var(--radius-md) 0 0;display:flex;justify-content:flex-start;} .klus-select-done{font-family:var(--font-body);font-size:.86rem;font-weight:600;color:#fff;background:var(--teal);border:none;border-radius:var(--radius-sm);padding:8px 18px;cursor:pointer;transition:filter .15s;} .klus-select-done:hover{filter:brightness(1.06);} .klus-select-done:focus-visible{outline:3px solid var(--teal);outline-offset:2px;} /* subtiele nadruk als er via een homepage-tegel is voorgeselecteerd */ @keyframes klusPulse{0%{box-shadow:0 0 0 0 rgba(4,162,171,.45);}100%{box-shadow:0 0 0 8px rgba(4,162,171,0);}} .klus-select.preselected .klus-select-trigger{animation:klusPulse 1.1s ease-out 2;border-color:var(--teal);} /* ── Consultancy: tarief-tegel ── */ .consult-tarief{display:flex;align-items:center;gap:16px;background:var(--teal-pale);border:1.5px solid var(--teal-soft);border-radius:var(--radius-lg);padding:20px 22px;margin:1.4em 0;} [data-theme="dark"] .consult-tarief{background:rgba(4,162,171,.1);border-color:rgba(4,162,171,.28);} .consult-tarief .ct-icon{width:44px;height:44px;flex-shrink:0;border-radius:var(--radius-md);background:var(--teal);display:flex;align-items:center;justify-content:center;} .consult-tarief .ct-icon svg{width:22px;height:22px;stroke:#fff;} .consult-tarief .ct-label{font-family:var(--font-display);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-dark);margin:0 0 2px;font-weight:700;} [data-theme="dark"] .consult-tarief .ct-label{color:var(--teal-light);} .consult-tarief .ct-value{font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:var(--text);margin:0;line-height:1.2;} .consult-tarief .ct-sub{margin:2px 0 0;font-size:.86rem;color:var(--text-muted);}