/* ===== EIGEN LETTERTYPES (niets gaat naar Google) ===== */ /* woff2 staat vooraan en woff erachter als terugval. woff2 is een kwart kleiner bij exact hetzelfde lettertype - samen scheelt dat ruim 50 kB op het eerste bezoek. Elke browser die woff2 kent, neemt die; een heel oude browser leest gewoon door naar de tweede regel. */ @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/inter-400.woff2') format('woff2'), url('../fonts/inter-400.woff') format('woff');} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap; src:url('../fonts/inter-500.woff2') format('woff2'), url('../fonts/inter-500.woff') format('woff');} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap; src:url('../fonts/inter-600.woff2') format('woff2'), url('../fonts/inter-600.woff') format('woff');} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/spacegrotesk-400.woff2') format('woff2'), url('../fonts/spacegrotesk-400.woff') format('woff');} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap; src:url('../fonts/spacegrotesk-500.woff2') format('woff2'), url('../fonts/spacegrotesk-500.woff') format('woff');} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap; src:url('../fonts/spacegrotesk-600.woff2') format('woff2'), url('../fonts/spacegrotesk-600.woff') format('woff');} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap; src:url('../fonts/spacegrotesk-700.woff2') format('woff2'), url('../fonts/spacegrotesk-700.woff') format('woff');} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/jetbrainsmono-400.woff2') format('woff2'), url('../fonts/jetbrainsmono-400.woff') format('woff');} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap; src:url('../fonts/jetbrainsmono-500.woff2') format('woff2'), url('../fonts/jetbrainsmono-500.woff') format('woff');} :root{ --ink:#010928; /* logo shadow-navy */ --deep:#092249; /* logo blue, darkened for panels */ --panel:#0C2C57; /* Het logoblauw (#0A59CE) opgehelderd voor op de donkere grond. Reken je het logoblauw op de helderheid die daar nodig is, dan kom je exact hier uit. Het logoblauw zelf haalt op donkerblauw maar 2,5 en dat is te weinig om een randje te zien; dit haalt 3,4. */ --accent:#166DF4; /* Hetzelfde blauw, maar donkerder: voor KLEINE TEKST op een lichte achtergrond. Het heldere blauw haalt daar maar 3,9 tot 4,3 op 1, en WCAG vraagt 4,5. Dit haalt overal minstens 5,1. */ /* Het logoblauw zelf, voor tekst en knoppen op een lichte achtergrond. --accent hierboven is datzelfde blauw, opgehelderd voor op donker. */ --accent-tekst:#0A59CE; --accent-soft:#9FBFEF; --frost:#5C93E0; /* logo blue, lightened — used for airco motion (no teal/cyan) */ /* Het goud uit de vector van het logo, exact. Stond hiervoor op #F09506; dat was donkerder dan het logo en dan het drukwerk. Dit haalt op de donkere grond 9,1 waar het oude 6,7 haalde. */ --gold:#FDBA00; --gold-soft:#FFD24A; /* Goud als TEKST op een lichte achtergrond. Het gewone goud haalt daar 2,3 en dat is onleesbaar; dit haalt 6,4. Zelfde kleur, donkerder gemaakt - net zoals de drukker een andere inktwaarde gebruikt. */ --gold-donker:#8A5202; /* Het geel uit de vector van het logo, exact. */ --yellow:#F6EB25; --paper:#F5F7FB; --paper-dim:#E7ECF5; --slate:#54627A; --line:rgba(255,255,255,0.12); --line-dark:rgba(10,26,48,0.10); } *{box-sizing:border-box;} /* NL/EN-tekst heeft niet exact dezelfde lengte, waardoor de pagina net over/onder de grens komt waar een verticale scrollbalk nodig is - die balk erbij/eraf laten springen schuift dan de hele pagina een stukje links/rechts. Scrollbalk-ruimte altijd reserveren voorkomt die sprong. */ html{scroll-behavior:smooth;scrollbar-gutter:stable;overflow-y:scroll;} body{margin:0;background:var(--paper);color:var(--ink);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;} h1,h2,h3{font-family:'Space Grotesk',sans-serif;margin:0;letter-spacing:-0.01em;} .mono{font-family:'JetBrains Mono',monospace;letter-spacing:0.02em;} a{color:inherit;text-decoration:none;} /* Links midden in een tekst moeten er ook uitzien als een link */ .qf-hint a, .faq-a a, .desc a, .sd-lead a, .rz-intro a, .legal-panel p a, .tekstlink{ color:var(--accent-tekst);font-weight:600;text-decoration:underline; text-decoration-thickness:1.5px;text-underline-offset:2.5px; text-decoration-color:rgba(22,109,244,0.45); transition:color .15s ease, text-decoration-color .15s ease;} .qf-hint a:hover, .faq-a a:hover, .desc a:hover, .sd-lead a:hover, .rz-intro a:hover, .legal-panel p a:hover, .tekstlink:hover{ color:#0B4FBF;text-decoration-color:currentColor;text-decoration-thickness:2px;} .qf-hint a:focus-visible, .faq-a a:focus-visible, .desc a:focus-visible, .legal-panel p a:focus-visible, .tekstlink:focus-visible{ outline:2px solid var(--accent);outline-offset:2px;border-radius:3px;} .wrap{max-width:1160px;margin:0 auto;padding:0 32px;} section{padding:96px 0;} @media(max-width:640px){ section{padding:64px 0;} .wrap{padding:0 20px;} } /* ===== HEADER ===== */ header{position:sticky;top:0;z-index:50;background:rgba(10,26,48,0.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);} .headbar{max-width:1160px;margin:0 auto;padding:4px 32px;display:flex;align-items:center;justify-content:space-between;} .logo{display:flex;align-items:center;gap:10px;color:#fff;flex-shrink:0;} /* Compacte tussenruimte in de nav (i.p.v. de vroegere 20px) zodat de volledige navigatie + een goed leesbaar logo samen in de 1160px kopbalk passen zonder dat één van beide ineenschrompelt. */ nav{display:flex;align-items:center;gap:8px;} nav a.navlink{color:var(--accent-soft);font-size:13px;font-weight:500;} nav a.navlink:hover{color:#fff;} /* ===== Tweede rij: het hoofdmenu ===== Stond vroeger samen met het telefoonnummer op één regel rechts van het logo, waar het klein en gedrongen oogde. Nu staat het op een eigen regel eronder, groter, en verdeeld over driekwart van de balk. */ /* Geen scheidingslijn: de menurij is gewoon een tikje donkerder dan de rij erboven. Dat geeft rust - je ziet dat het twee rijen zijn zonder dat er een streep staat. */ .hoofdnav{background:rgba(0,0,0,0.18);} .hoofdnav-binnen{max-width:1160px;margin:0 auto;display:flex; align-items:center;justify-content:center;gap:38px;padding:9px 32px;} .hoofdnav a.navlink{color:var(--accent-soft);font-size:16px;font-weight:500; letter-spacing:0.01em;padding:6px 16px;border-radius:999px;position:relative; transition:color .16s ease, background .16s ease;} .hoofdnav a.navlink:hover{color:#fff;background:rgba(255,255,255,0.05);} /* De pagina waar u nu bent, licht zachtjes op in de blauwtinten van de site zelf. */ .hoofdnav a.navlink.hier{color:#fff;background:rgba(255,255,255,0.09);} .call-pill{display:flex;align-items:center;gap:8px;color:#fff;font-family:'JetBrains Mono',monospace;font-size:13px;border:1px solid var(--line);border-radius:999px;padding:8px 11px;transition:border-color .18s ease, background .18s ease;} .call-pill:hover{border-color:var(--accent);background:rgba(255,255,255,0.06);} .call-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none;box-shadow:0 0 0 3px rgba(242,169,59,0.25);transition:box-shadow .18s ease;} .call-pill:hover .dot{box-shadow:0 0 0 4px rgba(242,169,59,0.4);} .taal-switch{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:999px;padding:4px;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;flex:none;} .taal-switch a{color:var(--accent-soft);padding:4px 9px;border-radius:999px;letter-spacing:0.5px;} .taal-switch a.actief{background:var(--gold);color:#241300;} .taal-switch a:hover:not(.actief){color:#fff;} .mobile-nav .taal-switch{margin:14px 24px 4px;align-self:flex-start;} /* WAAR STAAT DE TAALKIEZER: IN DE BALK OF IN HET MENU? Op een gsm paste de kopbalk niet. Gemeten op 13 september 2026: logo + telefoonpil + NL EN FR (95 px) + hamburger vroegen samen meer dan het scherm breed is, en dus schoof ELKE bladzijde zijwaarts - 37 px te breed op 320, 33 op 360, 18 op 375. Onder de 430 px staat de taalkiezer daarom in het hamburgermenu; daarboven gewoon in de balk zoals altijd. Stephen koos dat boven een krappere balk of een balk over twee regels: je kiest je taal een keer, de rest van de balk gebruik je elke keer. */ .mobile-nav .taal-switch{display:none;} @media(max-width:430px){ .headbar .taal-switch{display:none;} .mobile-nav .taal-switch{display:flex;} } /* 44 bij 44 pixels: dat is de maat waarop een duim betrouwbaar raakt. De streepjes blijven even breed als vroeger, alleen het aanraakvlak eromheen is groter. */ .hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px; width:44px;height:44px;background:none;border:none;cursor:pointer;padding:0; border-radius:10px;-webkit-tap-highlight-color:transparent; transition:background .15s ease;} .hamburger span{width:24px;} .hamburger:active{background:rgba(255,255,255,0.12);} .hamburger:focus-visible{outline:2px solid var(--gold);outline-offset:2px;} .hamburger span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;transition:transform .2s ease, opacity .2s ease;} .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);} .hamburger.open span:nth-child(2){opacity:0;} .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} .mobile-nav{display:none;flex-direction:column;background:var(--deep);border-top:1px solid var(--line);visibility:hidden; max-height:0;overflow:hidden;transition:max-height .3s ease;} .mobile-nav.open{max-height:420px;visibility:visible;} .mobile-nav a{padding:14px 24px;color:var(--accent-soft);font-size:15px;border-bottom:1px solid rgba(255,255,255,0.06);} .mobile-nav a:hover{color:#fff;} /* Nu het hoofdmenu op een eigen regel staat, moet het niet meer vechten om plaats met het logo. Daardoor kan het hamburgermenu later inschakelen dan vroeger (900 in plaats van 1150px) en zien meer bezoekers het volledige menu. In de bovenste regel staan enkel nog het logo, de twee contactknoppen en de taalkeuze; die passen ruim binnen 900px. */ @media(max-width:900px){ nav a.navlink{display:none;} .hoofdnav{display:none;} .hamburger{display:flex;} .mobile-nav{display:flex;} } /* Het mailadres verdwijnt uit de balk zodra ze anders te breed wordt. Dat stond op 760 px, en precies daardoor schoof een iPad in portret (768 px) nog 14 px zijwaarts: op 768 stond de mailpil er nog wel, en samen met logo, telefoonpil, sociale iconen en de taalkiezer paste dat niet. 820 px is de eerste waarde waarbij 768 er netjes onder valt en 834 (iPad Air) er nog boven blijft. Het mailadres staat dan gewoon in het hamburgermenu. */ @media(max-width:820px){ .call-pill[href^='mailto']{display:none;} } /* ===== Het eerlijke cookiebericht ===== Groter en midden op het scherm, maar het BLOKKEERT NIETS: de laag eromheen staat op pointer-events:none en alleen de kaart zelf vangt kliks. Zo kan de bezoeker gewoon verder lezen en scrollen. Het is geen toestemmingsvenster, want de site volgt niemand - er valt niets te kiezen. */ .cookieregel{position:fixed;inset:0;z-index:950; display:flex;align-items:center;justify-content:center;padding:20px; pointer-events:none; background:rgba(3,10,26,0.52);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); opacity:0;transition:opacity .3s ease;} .cookieregel.tonen{opacity:1;} .cookieregel-kaart{pointer-events:auto;position:relative; width:100%;max-width:520px;max-height:calc(100vh - 40px);overflow-y:auto; background:#0B2249;border:1px solid var(--line);border-radius:18px; padding:30px 32px 24px;box-shadow:0 26px 70px rgba(3,10,26,0.55); color:#D3E0F5;font-size:15px;line-height:1.62; transform:translateY(16px) scale(.985); transition:transform .3s cubic-bezier(.22,.8,.28,1);} .cookieregel.tonen .cookieregel-kaart{transform:none;} .cookieregel-titel{font-family:'Space Grotesk',sans-serif;font-size:22px;line-height:1.25; letter-spacing:-0.01em;color:#fff;font-weight:600;margin:0 44px 12px 0;} .cookieregel-tekst{margin:0 0 18px;} .cookieregel-kaart a{color:var(--gold-soft);text-decoration:underline; text-decoration-color:rgba(249,204,134,0.45);text-underline-offset:3px;} .cookieregel-kaart a:hover{text-decoration-color:currentColor;} .cookieregel-rij{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;} .cookieregel-ok{flex:none;background:var(--gold);color:#231402;border:0; font:600 15px/1 'Inter',sans-serif;cursor:pointer; padding:14px 26px;border-radius:11px;min-height:48px; transition:background .18s ease, transform .18s ease;} .cookieregel-ok:hover{background:#FFA81F;} .cookieregel-ok:active{transform:translateY(1px);} .cookieregel-sluit{position:absolute;top:10px;right:10px; width:44px;height:44px;display:flex;align-items:center;justify-content:center; background:none;border:0;color:var(--accent-soft);font-size:26px;line-height:1; cursor:pointer;border-radius:10px;} .cookieregel-sluit:hover{color:#fff;background:rgba(255,255,255,0.07);} .cookieregel-ok:focus-visible,.cookieregel-sluit:focus-visible, .cookieregel-kaart a:focus-visible{outline:2px solid var(--accent-soft);outline-offset:3px;} @media(max-width:520px){ .cookieregel{padding:16px;} .cookieregel-kaart{padding:26px 22px 20px;font-size:14.5px;} .cookieregel-titel{font-size:19.5px;margin-right:40px;} .cookieregel-ok{width:100%;} } @media(prefers-reduced-motion:reduce){ .cookieregel{transition:none;} .cookieregel-kaart{transition:none;transform:none;} } /* ===== HERO ===== */ .hero{background:radial-gradient(1100px 500px at 15% -10%, #16345F 0%, var(--ink) 55%);color:#fff;padding:88px 0 40px;position:relative;overflow:hidden;} .hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center;} @media(max-width:900px){ .hero-grid{grid-template-columns:1fr;} } .eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--gold-soft);border:1px solid rgba(242,169,59,0.35);border-radius:999px;padding:6px 14px;margin-bottom:22px;} .hero h1{font-size:44px;font-weight:700;line-height:1.1;color:#fff;} .hero h1 em{font-style:normal;color:var(--frost);} .hero p.lead{font-size:17px;color:#C9D8ED;line-height:1.6;margin:22px 0 32px;max-width:480px;} .btnrow{display:flex;gap:14px;flex-wrap:wrap;} .btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:10px;font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;} .btn-gold{background:var(--gold);color:#241300;} .btn-gold:hover{background:var(--gold-soft);} .btn-outline{border-color:rgba(255,255,255,0.3);color:#fff;} .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,0.06);} /* .btn-outline-dark is de variant voor een LICHTE achtergrond. Die werd gebruikt in 404.php en in deel/inhoud/gemeente.php - dus op de 19 gemeentepagina's plus de foutpagina, 20 in totaal - maar bestond niet in de CSS. Gevolg: .btn gaf border:1px solid transparent en geen kleuren, en de belknop stond daar als kale tekst naast de gouden knop. De rand #74889F haalt 3,1:1 tegen wit, dus boven de 3:1 die WCAG voor bedieningselementen vraagt. */ .btn-outline-dark{border-color:#74889F;color:var(--accent-tekst);background:#fff;} .btn-outline-dark:hover{border-color:var(--accent);background:var(--paper-dim);} /* ===== SIGNATURE: interactive koelen/verwarmen unit ===== */ .unit-demo{position:relative;height:440px;border-radius:20px;overflow:hidden; background:radial-gradient(120% 120% at 30% 20%, #0E2E63 0%, #06152F 70%); border:1px solid var(--line);transition:background 0.8s ease;} .unit-demo.mode-heat{background:radial-gradient(120% 120% at 30% 20%, #4A2A0E 0%, #251206 70%);} .unit-demo .particles{position:absolute;inset:0;overflow:hidden;} .particle{position:absolute;border-radius:50%;opacity:0;} .unit-demo.mode-cool .particle{background:var(--accent-soft);animation:fall linear infinite;} .unit-demo.mode-heat .particle{background:var(--gold-soft);animation:rise linear infinite;} @keyframes fall{ 0%{transform:translateY(-10%);opacity:0;} 10%{opacity:0.85;} 100%{transform:translateY(480px);opacity:0;} } @keyframes rise{ 0%{transform:translateY(10%);opacity:0;} 12%{opacity:0.85;} 100%{transform:translateY(-480px);opacity:0;} } .ac-unit{position:absolute;left:50%;top:56px;transform:translateX(-50%);width:340px;z-index:3;} .unit-photo{-webkit-mask-image:radial-gradient(ellipse 62% 70% at center, #000 62%, transparent 100%); mask-image:radial-gradient(ellipse 62% 70% at center, #000 62%, transparent 100%);} .unit-photo{width:100%;height:auto;display:block;position:relative;z-index:2;} .ac-unit .flow-svg{position:absolute;left:0;top:0;width:100%;height:270px;z-index:1;overflow:visible;} @media(max-width:640px){ .hero p.lead{font-size:15.5px;max-width:100%;} .unit-demo{height:340px;} .ac-unit{width:75%;top:36px;} .ac-unit .flow-svg{height:210px;} .btnrow .btn{flex:1 1 auto;justify-content:center;} } .flow-line{fill:none;stroke-width:2.4;stroke-linecap:round;opacity:0;stroke-dasharray:10 14;} .unit-demo.mode-cool .flow-line{stroke:var(--accent-soft);animation:flowcool 2.4s linear infinite;opacity:0.75;} .unit-demo.mode-heat .flow-line{stroke:var(--gold-soft);animation:flowheat 2.4s linear infinite;opacity:0.75;} .flow-line.f2,.flow-line.f4{animation-delay:-0.6s;} .flow-line.f3{animation-delay:-1.2s;} @keyframes flowcool{ from{stroke-dashoffset:48;} to{stroke-dashoffset:0;} } @keyframes flowheat{ from{stroke-dashoffset:0;} to{stroke-dashoffset:-48;} } .unit-label{position:absolute;left:50%;bottom:112px;transform:translateX(-50%);z-index:3; font-family:'JetBrains Mono',monospace;font-size:12.5px;color:#DCE7F6;text-align:center; letter-spacing:0.04em;transition:color 0.5s ease;} .unit-demo.mode-heat .unit-label{color:#FBE3BF;} .unit-label b{display:block;font-family:'Space Grotesk',sans-serif;font-size:18px;color:#fff;margin-top:2px;} .mode-toggle{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:4; display:flex;gap:6px;background:rgba(0,0,0,0.25);border:1px solid rgba(255,255,255,0.15); border-radius:999px;padding:5px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);} .mode-btn{font-family:'JetBrains Mono',monospace;font-size:13px;padding:9px 18px;border-radius:999px; border:none;cursor:pointer;background:transparent;color:#B9CFEC;transition:all 0.25s ease;} .mode-btn.active.cool{background:var(--accent);color:#fff;} .mode-btn.active.heat{background:var(--gold);color:#241300;} .node-circle{fill:var(--deep);stroke:var(--accent-soft);stroke-width:1.4;} .node-label{font-family:'JetBrains Mono',monospace;font-size:11px;fill:#B9CFEC;} .stat-strip{border-top:1px solid var(--line);margin-top:56px;padding-top:28px;display:flex;gap:0;flex-wrap:wrap;} .stat{flex:1;min-width:140px;padding-right:24px;} .stat .num{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:26px;color:#fff;} .stat .lbl{font-size:12.5px;color:#94A9C7;margin-top:4px;font-family:'JetBrains Mono',monospace;} /* ===== INTRO ===== */ .intro{background:var(--paper);} /* Drie velden in twee kolommen: links rij 1-2 : de foto, over allebei de rijen rechts rij 1 : de titel rechts rij 2 : de tekst en de erkenningen Zo dragen beide kolommen ongeveer evenveel en eindigen ze samen. Stonden titel en foto samen links, dan was die kolom 808 px en de tekst rechts 554 - 254 px leegte, en het blok eindigde scheef. */ .intro-grid{display:grid;grid-template-columns:0.92fr 1.08fr;gap:24px 60px; align-items:start;} .intro-foto{grid-column:1;grid-row:1 / span 2;} .intro-titel{grid-column:2;grid-row:1;margin:0;} .intro-body{grid-column:2;grid-row:2;} .intro-foto .creds-box{margin-top:0;} /* Op een smal scherm valt alles onder elkaar, in de volgorde titel - foto - tekst - erkenningen: eerst waar het over gaat, dan wie het doet, dan het verhaal. */ @media(max-width:860px){ .intro-grid{grid-template-columns:1fr;gap:0;} .intro-titel,.intro-body,.intro-foto{grid-column:1;grid-row:auto;} .intro-titel{order:1;} .intro-foto{order:2;} .intro-body{order:3;margin-top:26px;} .intro-foto .creds-box{margin-top:22px;} } .kicker{font-weight:inherit;font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--accent-tekst);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:14px;display:block;} .intro h2{font-size:32px;font-weight:700;color:var(--ink);line-height:1.18;} .intro-body p{font-size:16px;line-height:1.75;color:var(--slate);margin:0 0 16px;} .intro-body strong{color:var(--ink);} /* ===== SERVICES OVERVIEW ===== */ .services{background:var(--ink);color:#fff;} .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:48px;flex-wrap:wrap;} .sec-head h2{font-size:32px;color:#fff;} .sec-head p{color:#9FB2D1;font-size:15px;max-width:360px;margin:0;} .sec-head-onder{display:block;margin-bottom:40px;} .sec-head-onder p{max-width:560px;margin-top:12px;} .service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} @media(max-width:860px){ .service-grid{grid-template-columns:1fr;} } .scard{background:var(--deep);border:1px solid var(--line);border-radius:16px;padding:32px 28px;transition:transform .25s ease, border-color .25s ease;text-align:left;display:block;} .scard:hover{transform:translateY(-4px);border-color:var(--accent);} .scard .icon{width:46px;height:46px;margin-bottom:22px;} .scard h3{color:#fff;font-size:20px;margin-bottom:12px;} .scard p{color:#AFC1DD;font-size:14.5px;line-height:1.65;margin:0 0 18px;} .scard .tag{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--gold-soft);border:1px solid rgba(242,169,59,0.3);border-radius:999px;padding:4px 12px;display:inline-block;} .scard .go{font-size:13px;color:var(--frost);font-weight:600;} /* ===== SUB-PAGE STYLE SECTIONS (Airco / Elektriciteit / Laadpalen) ===== */ .subpage{position:relative;overflow:hidden;} .subpage .wrap{position:relative;z-index:2;} .subpage-head{display:flex;align-items:center;gap:16px;margin-bottom:10px;} .subpage-tag{font-family:'JetBrains Mono',monospace;font-size:12px;padding:5px 12px;border-radius:999px;border:1px solid var(--line-dark);color:var(--slate);} .subpage h1,.subpage h2{font-size:34px;margin:14px 0 18px;line-height:1.18;} @media(max-width:640px){ .subpage h1,.subpage h2{font-size:27px;} } /* Een bovenschrift blijft klein, ook als het om leesbaarheid voor schermlezers een echte h2 geworden is. */ .subpage h2.kicker, h2.kicker{ font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:400; line-height:1.5;letter-spacing:0.08em;text-transform:uppercase;} .subpage h2.gallery-label, h2.gallery-label{font-family:'JetBrains Mono',monospace;font-weight:400;line-height:1.5;text-transform:uppercase;} @media(max-width:640px){ .subpage h2.kicker{font-size:12.5px;} .subpage h2.gallery-label{font-size:11.5px;} } .subpage h2.gallery-label, h2.gallery-label{font-size:11.5px;letter-spacing:0.06em;color:var(--slate);margin:28px 0 12px;} h2.kicker{color:var(--accent-tekst);margin-bottom:14px;} /* kruimelpad bovenaan een dienstpagina */ .kruimel{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-family:'JetBrains Mono',monospace; font-size:12px;color:var(--slate);margin-bottom:2px;} .kruimel a{color:var(--slate);text-decoration:underline;text-decoration-color:rgba(90,104,126,0.35); text-underline-offset:3px;} .kruimel a:hover{color:var(--accent-tekst);text-decoration-color:currentColor;} .kruimel span[aria-current]{color:var(--ink);font-weight:500;} .navlink.hier{color:#fff;position:relative;} .navlink.hier::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--gold);border-radius:2px;} .hoofdnav .navlink.hier::after{display:none;} .mobile-nav .navlink.hier::after{display:none;} .mobile-nav .navlink.hier{color:#fff;font-weight:600;} .subpage .desc{font-size:16px;color:var(--slate);line-height:1.7;max-width:600px;margin-bottom:36px;} .feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:36px;} @media(max-width:700px){ .feature-list{grid-template-columns:1fr;} } .feature-item{display:flex;gap:12px;align-items:flex-start;padding:16px;background:#fff;border:1px solid var(--line-dark);border-radius:12px;} .feature-item .fi{width:20px;height:20px;flex:none;margin-top:2px;} .feature-item p{margin:0;font-size:14px;color:var(--ink);line-height:1.5;} .subpage.airco{background:linear-gradient(180deg,#EAF6FB 0%, var(--paper) 100%);} .subpage.elek{background:linear-gradient(180deg,#FFF6E6 0%, var(--paper) 100%);} .subpage.laadpaal{background:var(--paper);} /* ===== REALISATIES GALLERY ===== */ .gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px;} @media(max-width:700px){ .gallery{grid-template-columns:1fr;} } .gallery img{width:100%;height:280px;object-fit:cover;border-radius:12px;border:1px solid var(--line-dark); display:block;cursor:zoom-in;transition:transform 0.2s ease, box-shadow 0.2s ease;} .gallery img:hover{transform:scale(1.02);box-shadow:0 8px 24px rgba(10,26,48,0.18);} .gallery-label{font-weight:inherit;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--slate);text-transform:uppercase;letter-spacing:0.06em;margin:28px 0 12px;display:block;} /* ===== HOVER ZOOM OVERLAY ===== */ .zoom-overlay{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center; background:rgba(1,9,40,0.82);padding:40px;pointer-events:none; opacity:0;visibility:hidden;transition:opacity 0.4s ease, visibility 0.4s;} /* pointer-events terug aan: anders komt er geen klik of veeg aan en doen de pijlen, het kruisje en het vegen niets. */ .zoom-overlay.active{opacity:1;visibility:visible;pointer-events:auto;} .zoom-overlay img{max-width:94vw;max-height:92vh;border-radius:14px;box-shadow:0 30px 70px rgba(0,0,0,0.5); border:2px solid rgba(255,255,255,0.15);transform:scale(0.97);transition:transform 0.4s ease, opacity 0.3s ease;} .zoom-overlay.active img{transform:scale(1);} /* ===== WHATSAPP CHAT WIDGET ===== */ .whatsapp-fab{position:fixed;right:22px;bottom:22px;z-index:900;width:58px;height:58px;border-radius:50%; background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(0,0,0,0.28); transition:transform 0.2s ease, box-shadow 0.2s ease;border:none;cursor:pointer;} .whatsapp-fab:hover{transform:scale(1.08);box-shadow:0 10px 28px rgba(0,0,0,0.35);} .whatsapp-fab svg{width:30px;height:30px;color:#fff;} .whatsapp-fab .wa-close-icon{display:none;} .whatsapp-fab.open .wa-chat-icon{display:none;} .whatsapp-fab.open .wa-close-icon{display:block;} @media(max-width:640px){ .whatsapp-fab{right:16px;bottom:16px;width:52px;height:52px;} .whatsapp-fab svg{width:26px;height:26px;} } .wa-panel{position:fixed;right:22px;bottom:92px;z-index:899;width:320px;max-width:calc(100vw - 32px); background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,0.25);overflow:hidden; opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;} .wa-panel.open{opacity:1;visibility:visible;transform:translateY(0);} .wa-panel-header{background:#075E54;color:#fff;padding:16px 18px;display:flex;align-items:center;gap:12px;} .wa-panel-avatar{width:40px;height:40px;border-radius:50%;background:var(--gold);color:#241300;font-weight:700; display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;flex:none;} .wa-panel-header div{flex:1;} .wa-panel-header .wa-naam{margin:0;font-size:15px;font-family:'Space Grotesk',sans-serif;font-weight:700;} .wa-panel-header p{margin:2px 0 0;font-size:12px;color:#CFE9E4;} .wa-panel-body{background:#ECE5DD;padding:16px;} .wa-bubble{background:#fff;border-radius:10px;padding:10px 14px;font-size:13.5px;color:var(--ink); line-height:1.5;box-shadow:0 1px 2px rgba(0,0,0,0.1);max-width:90%;} .wa-panel-footer{padding:14px;background:#fff;display:flex;flex-direction:column;gap:10px;} .wa-panel-footer textarea{font-family:'Inter',sans-serif;font-size:13.5px;border:1px solid #D9E1EE; border-radius:8px;padding:9px 11px;resize:none;min-height:54px;} .wa-start-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:#25D366;color:#fff; border:none;border-radius:8px;padding:11px;font-weight:600;font-size:14px;cursor:pointer;text-decoration:none;} .wa-start-btn:hover{background:#1EBE59;} .wa-start-btn svg{width:18px;height:18px;} /* ===== BRAND CREDENTIALS ===== */ .brand-creds{display:flex;gap:14px;margin-bottom:32px;flex-wrap:wrap;} .brand-cred{display:flex;flex-direction:column;align-items:flex-start;gap:8px;background:#fff;border:1px solid var(--line-dark); border-radius:12px;padding:20px 26px;min-width:170px;} .brand-cred-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;color:var(--ink);letter-spacing:0.02em;} .brand-cred-tag{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent-tekst);text-transform:uppercase;letter-spacing:0.05em;} /* ===== MODEL CARDS ===== */ .model-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:8px 0 32px;} @media(max-width:760px){ .model-grid{grid-template-columns:1fr;} } .model-card{background:#fff;border:1px solid var(--line-dark);border-radius:14px;padding:20px;} .model-card .m-icon{width:100%;height:64px;margin-bottom:14px;transition:transform 0.2s ease, box-shadow 0.2s ease;} .model-card .m-icon:hover{transform:scale(1.03);box-shadow:0 8px 24px rgba(10,26,48,0.15);} .model-card .m-brand{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--accent-tekst);text-transform:uppercase;letter-spacing:0.06em;} .model-card h3{font-family:'Space Grotesk',sans-serif;font-size:16px;margin:4px 0 8px;color:var(--ink);} .model-card p{font-size:13px;color:var(--slate);line-height:1.55;margin:0;} /* ===== OFFERTE FORMULIER ===== */ .quote-section{background:var(--paper);} .quote-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:start;} @media(max-width:900px){ .quote-grid{grid-template-columns:1fr;} } .quote-form{background:#fff;border:1px solid var(--line-dark);border-radius:16px;padding:32px;} @media(max-width:480px){ .quote-form{padding:22px 18px;} } /* Kopjes binnen het formulier: donkerder, met een goudkleurig streepje ervoor */ .quote-form .gallery-label{font-size:12.5px;font-weight:600;color:var(--ink);letter-spacing:0.09em; display:flex;align-items:center;gap:10px;} .quote-form .gallery-label::before{content:"";width:16px;height:2.5px;border-radius:2px; background:var(--gold);flex:none;} .quote-form .qf-optioneel{color:var(--slate);} /* niet-gekozen knopjes iets leesbaarder */ .quote-form .qf-radio label{color:#2A3A55;} .quote-form .qf-radio label:hover{border-color:var(--accent);color:var(--accent);} .quote-form .qf-radio input:checked + label{color:#fff;} .qf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;} @media(max-width:560px){ .qf-row{grid-template-columns:1fr;} } .qf-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;} .qf-field label{font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:500;color:#2A3A55;text-transform:uppercase;letter-spacing:0.05em;} .qf-field input, .qf-field select, .qf-field textarea{ font-family:'Inter',sans-serif;font-size:14.5px;color:var(--ink); border:1px solid #D9E1EE;border-radius:8px;padding:10px 12px;background:#F9FAFC; width:100%;min-width:0;box-sizing:border-box;} .qf-field input:focus, .qf-field select:focus, .qf-field textarea:focus{outline:2px solid var(--accent);outline-offset:1px;} .qf-field textarea{resize:vertical;min-height:70px;} .qf-radiogroup{display:flex;gap:10px;flex-wrap:wrap;} .qf-radio{position:relative;} .qf-radio input{position:absolute;opacity:0;} .qf-radio label{display:block;font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--slate); border:1px solid #D9E1EE;border-radius:999px;padding:8px 16px;cursor:pointer;transition:all .15s ease;text-transform:none;letter-spacing:0;} .qf-radio input:checked + label{background:var(--ink);color:#fff;border-color:var(--ink);} .qf-roomblock{border:1px solid #D9E1EE;border-radius:12px;padding:16px;margin-bottom:12px;background:#F9FAFC;position:relative;} .qf-roomblock-grid{display:grid;grid-template-columns:1.3fr 0.8fr 0.9fr;gap:10px;margin-bottom:10px;} @media(max-width:640px){ .qf-roomblock-grid{grid-template-columns:1fr;} } .qf-roomblock select, .qf-roomblock input[type="number"]{ font-family:'Inter',sans-serif;font-size:13.5px;color:var(--ink); border:1px solid #D9E1EE;border-radius:8px;padding:9px 10px;background:#fff;width:100%;} .qf-roomblock-sublabel{font-size:11px;font-weight:500;color:#2A3A55;font-family:'JetBrains Mono',monospace;margin-bottom:5px;display:block;text-transform:uppercase;letter-spacing:0.04em;} .qf-optioneel{font-weight:400;text-transform:none;letter-spacing:0;opacity:0.7;} .qf-photo-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;} .qf-photo-btn{display:inline-flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:12.5px; color:var(--accent);border:1px dashed var(--accent);border-radius:8px;padding:8px 14px;cursor:pointer;background:#fff;} /* Stond op display:none. Een verborgen invoerveld staat niet in de tabvolgorde, en er is geen