/* HMB — universele responsive fixes Included op elke pagina via in Breakpoints: 480 / 640 / 768 / 900 / 1024 / 1440 / 1600 */ /* ═════════════════════════════════════════════════ A11Y — globaal (alle viewports) ═════════════════════════════════════════════════ */ a:focus-visible, button:focus-visible, [role="button"]:focus-visible, [role="link"]:focus-visible, [role="tab"]:focus-visible, [role="menuitem"]:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible, summary:focus-visible, details:focus-visible, label:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible, .gm-btn:focus-visible, .opt:focus-visible, .chat-opt:focus-visible, .card:focus-visible, .card-link:focus-visible, a.card:focus-visible{ outline:3px solid var(--primary,#00C46E)!important; outline-offset:3px; border-radius:10px; box-shadow:0 0 0 6px rgba(0,196,110,.18)!important; } /* Nooit focus weggooien — overrule designs die outline:none zetten zonder alternatief */ *:focus-visible{outline-color:var(--primary,#00C46E)} [data-theme="dark"] *:focus-visible{outline-color:#3DDB8A} @media (prefers-reduced-motion:reduce){ .reveal,.reveal-left,.reveal-right,[data-reveal],.gm-reveal{ opacity:1!important;transform:none!important;transition:none!important; } *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important} } /* ═════════════════════════════════════════════════ MOBILE <640px ═════════════════════════════════════════════════ */ @media (max-width:640px){ body{overflow-x:hidden} img,video,iframe{max-width:100%;height:auto} h1{font-size:clamp(24px,6.5vw,36px)!important;line-height:1.2} h2{font-size:clamp(20px,5.5vw,28px)!important;line-height:1.25} h3{font-size:clamp(17px,4.5vw,22px)!important} [style*="font-size:34px"],[style*="font-size: 34px"], [style*="font-size:38px"],[style*="font-size: 38px"], [style*="font-size:32px"],[style*="font-size: 32px"], [style*="font-size:28px"],[style*="font-size: 28px"] {font-size:clamp(20px,5.5vw,26px)!important} [style*="font-size:9px"],[style*="font-size: 9px"], [style*="font-size:10px"],[style*="font-size: 10px"]{font-size:11px!important} table{display:block;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;white-space:nowrap} table th,table td{white-space:normal} .btn,button:not(.wa-tooltip):not([aria-label*="Sluit"]), .opt,.chat-opt,a.btn{min-height:44px} .hero,.hero-section{min-height:auto!important;padding-top:48px!important;padding-bottom:40px!important} [style*="max-width:1100px"],[style*="max-width:1200px"]{padding-left:16px;padding-right:16px} .container,.hero,.section{padding-left:16px!important;padding-right:16px!important} [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns: repeat(3, 1fr)"]{grid-template-columns:1fr 1fr!important} [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns: repeat(4, 1fr)"]{grid-template-columns:1fr 1fr!important} .cookie-banner,#cookieBanner{padding-bottom:calc(20px + env(safe-area-inset-bottom,0))!important} /* Urgency banner compacter — was vanaf 640 te groot */ .urgency-banner{font-size:11px!important;padding:6px 8px!important;gap:6px!important} .urgency-timer-block{font-size:11px!important;padding:1px 4px!important;min-width:22px!important} } @media (max-width:480px){ [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr!important} [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr!important} #hmbBattery3D{display:none!important} #impactStrip{grid-template-columns:1fr!important} .result-box,.hmb-card,.calc-card{word-break:break-word} } /* ═════════════════════════════════════════════════ TABLET 641-1023px ═════════════════════════════════════════════════ */ @media (min-width:641px) and (max-width:1023px){ /* 3-col en 4-col grids stapelen naar 2-col op tablet */ [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns: repeat(3, 1fr)"]{grid-template-columns:repeat(2,1fr)!important} [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns: repeat(4, 1fr)"]{grid-template-columns:repeat(2,1fr)!important} /* Urgency banner: voorkom 3-regelige wrap op 768px */ .urgency-banner{font-size:13px} .urgency-timer-block{font-size:12px;padding:2px 6px} /* Footer: 2-col op tablet ipv 4-kolommen-van-140px */ .footer-grid{grid-template-columns:1fr 1fr!important} } /* Nav-consistentie 768-899px: hamburger zichtbaar, desktop-nav verborgen Dit lost de dead-zone op waar nav volledig onzichtbaar was */ @media (max-width:899px){ .nav-links{display:none!important} .nav-mobile-toggle,.nav-toggle,[aria-label*="menu"]{display:flex!important} } /* ═════════════════════════════════════════════════ DESKTOP >=1024px ═════════════════════════════════════════════════ */ @media (min-width:1024px){ /* Nav-links hover-feedback consistent */ .nav-links a:hover,.hmb-nav-links a:hover{ background:var(--subtle,rgba(0,196,110,0.08)); color:var(--primary-dark,#00A85C); border-radius:8px; } /* Section padding tuning */ section,.section{padding-top:72px;padding-bottom:72px} } /* Ultra-wide: container breder + grotere nav */ @media (min-width:1600px){ :root{--max-w:1320px} .nav-inner{height:80px} .nav-logo-text{font-size:20px} .nav-logo-icon{width:46px;height:46px} .nav-links a{font-size:15px;padding:10px 16px} } /* ═════════════════════════════════════════════════ GLOBAL OVERFLOW PROTECTION (tot 1023px) Voorkomt horizontal-scroll door decoratieve orbs/marquees. ═════════════════════════════════════════════════ */ @media (max-width:1023px){ html,body{overflow-x:hidden;max-width:100vw} .orb,[class*="orb"],.hmb-blob,[class*="blob"]{max-width:60vw!important;pointer-events:none} /* CSS Grid '1fr' bug fix: min-content van item kan grid column laten groeien voorbij viewport. minmax(0,1fr) forceert krimpbaar. */ .article-layout,[class*="article-layout"],[class*="-layout"][style*="grid"]{ grid-template-columns:minmax(0,1fr)!important; } /* Figcaption en img in figure mag niet breder dan parent */ figure,figure > img,figure > figcaption{max-width:100%!important} /* Livestrip hero: forceer single-column op mobile/tablet (overruled 2-col rule) */ .hmb-livestrip-inner,[class*="livestrip-inner"]{ grid-template-columns:minmax(0,1fr)!important; gap:24px!important; } /* Scroll-reveal pre-state mag GEEN translateX veroorzaken op mobile — anders steken elementen buiten viewport voor IntersectionObserver fired. */ [data-reveal="left"],[data-reveal="right"]{transform:translateY(16px)!important} [data-reveal="left"].in,[data-reveal="right"].in{transform:none!important} /* Tables op artikel-pages moeten horizontaal scrollbaar, geen overflow op page */ .prose table,.data-table,table:not(.no-mobile-scroll){ display:block!important; max-width:100%!important; overflow-x:auto!important; -webkit-overflow-scrolling:touch; } /* Button content binnen kleine buttons mag niet uitstulpen */ .btn,.gm-btn,a.btn{max-width:100%;flex-wrap:wrap} /* Infinite marquees moeten in overflow:hidden container */ .gm-marquee,[class*="marquee"]{overflow:hidden!important;max-width:100%} /* Chip/pill filter rows — wrap of horizontaal scrollen */ .chips,[class*="chip-row"],[class*="filters"],.topic-filters{ flex-wrap:wrap!important; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; } /* Trending/card rails → horizontal scroll container */ .trending,.trending-list,[class*="card-rail"],[class*="hscroll"]{ overflow-x:auto!important; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; } /* Sticky TOC aside in artikelen — volledige breedte op mobile, niet sticky */ aside.toc,.article-toc,.toc-aside{ position:static!important; max-width:100%!important; width:100%!important; margin-bottom:20px; } aside.toc ul,.article-toc ul{padding-left:18px} } /* Ultra-small phones (<360px) — footer grid naar 1 kolom, nav-CTA verbergen */ @media (max-width:359px){ .footer-grid,[style*="grid-template-columns:repeat(4"],[style*="grid-template-columns:repeat(3"]{ grid-template-columns:1fr!important; gap:20px!important; } /* Header-CTA ("Gesprek plannen" etc.) past niet op iPhone SE portrait */ .nav a.btn,.nav-actions .btn,header a.btn,nav a.btn,.nav .btn-primary{ display:none!important; } } /* ═════════════════════════════════════════════════ WCAG AA CONTRAST FIXES (alle viewports) Brand-groen #00C46E heeft onvoldoende contrast voor small text + solid btns. We gebruiken --primary-dark (#006B3E, ratio ~6:1) voor tekst + solid buttons. ═════════════════════════════════════════════════ */ .card-cat,.kicker,.label-green,.footer-indie,.region, .cookie-text a,.nav-links a.active,.roi-cta, [class*="green-text"],[class*="txt-green"]{ color:var(--primary-dark,#006B3E)!important; } /* Solid green buttons — witte tekst vereist donker-genoeg bg */ .btn-primary,.btn-green,button.accept,.btn-cta, [class*="btn-primary"],[class*="btn-cta"]{ background:var(--primary-dark,#006B3E)!important; } /* Light-mode muted kleuren: stap donkerder voor 4.5:1 op wit */ @media (prefers-color-scheme: light), (prefers-color-scheme: no-preference){ :root{--muted:#4A5C50!important} } [data-theme="light"] :root,html:not([data-theme="dark"]):root{ --muted:#4A5C50; } /* Red badge contrast: donkerder rood voor kleine tekst */ .badge,[class*="badge-red"],.tag-red,a .badge{background:#B91C1C!important} /* Alle vage grijs op wit → donkerder */ .authority-strip .container > div > div, .station-label,.station-val{color:#4A5255!important;opacity:1!important} /* Authority strip inline greys — sommige pagina's hebben inline #808688 o.i.d. */ .authority-strip span,.authority-strip [style*="color"]{color:#4A5255!important} /* Placeholder kennisbank cards */ .placeholder.card .card-cat{color:#2D3B33!important} .placeholder.card p,.placeholder.card .card-p{color:#3A4A40!important} /* Header-badge op dark bg → lichter grijs */ .header-badge{color:#B7C9BB!important} /* Footer-indie: als in dark forest footer, forceer lichter groen */ footer .footer-indie,.footer .footer-indie, [style*="background"] .footer-indie{color:#6EE89B!important} /* Hero-kicker was nog #00c46e */ .hero-kicker,[class*="hero-kicker"]{color:#006B3E!important} /* Dark-bg footer tekst: .footer-brand p staat ALTIJD op dark forest bg */ .footer-brand p,.footer-brand span, .footer-bottom p,.footer-bottom span{color:#B7C9BC!important} /* Authority-strip + children: forceer donker grijs via wildcard */ .authority-strip,.authority-strip *, [class*="authority-strip"] *{color:#4A5255!important} /* ═════════════════════════════════════════════════ SLIDERS — touch-action (alle viewports) ═════════════════════════════════════════════════ */ .ba-track,.ba-handle,input[type="range"]{touch-action:pan-y!important} /* ═════════════════════════════════════════════════ TAP-TARGETS — globaal, alle viewports (WCAG 2.5.5) ═════════════════════════════════════════════════ */ .btn,.btn-primary,.btn-secondary,.gm-btn, button:not(.wa-tooltip):not(.urgency-close):not(.popup-close), a.btn,.opt,.chat-opt, input[type="submit"],input[type="button"],input[type="reset"]{ min-height:44px; min-width:44px; } /* Desktop: iets minder strikt op inline .nav-links a */ @media (min-width:1024px){ .nav-links a,.hmb-nav-links a{min-height:40px;display:inline-flex;align-items:center} } /* ═════════════════════════════════════════════════ MOBILE FORMS — iOS zoom prevention + ergonomics ═════════════════════════════════════════════════ */ @media (max-width:767px){ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea{ font-size:16px!important; line-height:1.4; } input,select,textarea{ min-height:48px; padding:12px 14px; border-radius:10px; } textarea{min-height:96px;padding-top:14px} .field-err{font-size:14px;margin-top:6px} label,.label{font-size:15px} /* Error shake animation */ .field.invalid input,.field.invalid select,.field.invalid textarea, input.invalid,select.invalid,textarea.invalid{ border-color:#dc2626!important; animation:fieldShake .3s ease-in-out; } @keyframes fieldShake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} } } /* ═════════════════════════════════════════════════ STICKY MOBILE CTA — appears after scroll on key pages Opt-in via or .has-sticky-cta ═════════════════════════════════════════════════ */ .hmb-sticky-cta{ position:fixed; left:12px;right:12px;bottom:12px; z-index:900; display:none; gap:8px; padding:10px 12px; background:rgba(255,255,255,.96); backdrop-filter:saturate(140%) blur(8px); -webkit-backdrop-filter:saturate(140%) blur(8px); border:1px solid rgba(0,0,0,.08); border-radius:14px; box-shadow:0 8px 30px rgba(0,0,0,.12); padding-bottom:max(10px, env(safe-area-inset-bottom)); } .hmb-sticky-cta.show{display:flex} .hmb-sticky-cta .btn{flex:1;justify-content:center;font-size:15px;font-weight:600} @media (min-width:900px){.hmb-sticky-cta{display:none!important}} @media (prefers-reduced-motion:no-preference){ .hmb-sticky-cta{transition:transform .25s ease,opacity .25s ease;transform:translateY(120%);opacity:0} .hmb-sticky-cta.show{transform:translateY(0);opacity:1} } /* WCAG AA footer contrast — dark footer (#0a1f14) needs lighter text. Scope via .footer-col (aanwezig op donkere footer-layout). Lichte footer op contact/kennisbank (#F0F7EE bg, .footer-links ipv .footer-col) niet raken. */ .footer-col h4{color:#B7C9BC!important} .footer-col a,.footer-col li a,.footer-col ul a{color:#D8EBD8!important;opacity:1!important;display:inline-block;padding:6px 0;min-height:24px;line-height:1.35} .footer-col a:hover{color:#fff!important} /* Kleinere light-footer variant ook tap-safe */ .footer-links a,.footer-links li a{display:inline-block;padding:6px 0;min-height:24px;line-height:1.35} /* Urgency banner close-knop: min 44x44 */ #urgencyClose,.urgency-close,button[aria-label="Sluiten"]{min-width:44px!important;min-height:44px!important} .footer:has(.footer-col) .footer-bottom, .footer:has(.footer-col) .footer-bottom *{color:#B7C9BC!important} /* WCAG AA — mobile menu btn-primary moet wit-op-groen zijn */ .mobile-menu .btn.btn-primary, .mobile-menu a.btn-primary, #mobileMenu .btn-primary{color:#FFFFFF!important;background:#006B3E!important} .mobile-menu .btn.btn-primary:hover,#mobileMenu .btn-primary:hover{background:#004E2C!important;color:#FFFFFF!important} /* Logo "besparen" op donkere header (calculator .header heeft --charcoal bg): inline style #006B3E op dark = 1.66 ratio. Forceer lichte accent-kleur. */ .header .logo-text span, .header .logo span{color:#7DDBA1!important}