/* ═══════════════════════════════════════════════════════════════════ SMSAK MOBILE FOUNDATION — spec v2.1 Wordt op ELKE pagina geladen. Bewust defensief: enkel regels die een bestaand ontwerp niet kunnen breken. Alles wat de layout zou kunnen verschuiven staat achter een media-query of een expliciete class. ═══════════════════════════════════════════════════════════════════ */ /* ── Safe areas beschikbaar maken als variabele ── */ :root { --safe-t: env(safe-area-inset-top, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); } /* ── Fix #8: geen horizontale scroll op telefoons ── `overflow-x: hidden` op zou position:sticky slopen; `clip` niet, want dat maakt geen scrollcontainer aan. Decoratieve blur-vlakken en overhangende kaarten worden zo netjes afgesneden i.p.v. de pagina breder te maken. Browsers zonder clip-ondersteuning vallen terug op body-only. */ body { overflow-x: hidden; max-width: 100%; } @supports (overflow: clip) { html { overflow-x: clip; } body { overflow-x: clip; } } /* ── Fix #3: iOS zoomt in zodra een invoerveld < 16px is ── Op aanraakschermen forceren we minstens 16px, met !important omdat Tailwind en andere utility-frameworks ná deze stylesheet laden. Op desktop blijft het ontwerp exact zoals het bedoeld is. */ input, textarea, select { font-size: max(16px, 1em); } @media (pointer: coarse) { input, textarea, select, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], input[type="password"], input[type="date"] { font-size: max(16px, 1em) !important; } } /* ── Grijze tap-flash weg, vervangen door de huisstijlkleur ── */ a, button, [role="button"], input[type="submit"], input[type="button"], label, summary { -webkit-tap-highlight-color: rgba(0, 49, 138, 0.15); } /* ── Zichtbare focus voor toetsenbord- en screenreadergebruikers ── */ :focus-visible { outline: 3px solid #F5C000; outline-offset: 3px; border-radius: 4px; } :focus:not(:focus-visible) { outline: none; } /* ── Media nooit breder dan hun kader ── */ img, video, svg, iframe, canvas { max-width: 100%; } img, video { height: auto; } /* ── Safari heeft de prefixen nodig ── */ [style*="backdrop-filter"], .glass, .blur { -webkit-backdrop-filter: inherit; } /* ── Fix #7: zwevende knoppen boven de home indicator ── Ook de gedeelde SMSAK-widgets uit /tools/smsak-*.js, die zichzelf met position:fixed onderaan hangen en anders half onder de gesture bar zitten. */ .whatsapp-float, .fab, .toast, .scroll-top, #scroll-top, [class*="whatsapp"][class*="float"], [class*="fab-"], .smsak-status, .smsak-unizo, .ss-toasts { bottom: max(20px, calc(20px + var(--safe-b))) !important; } .swissy-launcher { bottom: max(20px, calc(20px + var(--safe-b))) !important; } .swissy-window { bottom: max(90px, calc(90px + var(--safe-b))) !important; } @media (max-width: 640px) { .swissy-launcher { bottom: max(18px, calc(18px + var(--safe-b))) !important; } } /* ── Fix #2: vaste balken onderaan respecteren de gesture bar ── */ .sticky-bottom-bar, .mobile-cta-bar, .cookie-banner, .bottom-nav, [class*="sticky-bottom"] { padding-bottom: max(10px, var(--safe-b)); padding-left: max(0px, var(--safe-l)); padding-right: max(0px, var(--safe-r)); } /* ── Fix #1 + #6: vaste kop onder de Dynamic Island, zijkanten vrij van de notch ── */ @supports (padding: max(0px)) { header[style*="position:fixed"], header[style*="position: fixed"], .site-header, .app-header, nav.fixed, nav.sticky { padding-left: max(0px, var(--safe-l)); padding-right: max(0px, var(--safe-r)); } } /* ── Aanraakschermen: bedienelementen minstens 44x44 (Apple HIG). Bewust NIET op elke — dat zou lopende tekst uit elkaar trekken. ── */ @media (pointer: coarse) { /* Echte bedienelementen: minstens 44x44. Die zijn block/flex, dus min-height werkt hier ook echt. */ button, [role="button"], input[type="submit"], input[type="button"], .btn, .button, .cta, .nav-cta, .chip, .pill, .tab, .lang-btn, .lang-btns button { min-height: 44px; } button, [role="button"], .btn, .button { min-width: 44px; } select, input:not([type="checkbox"]):not([type="radio"]) { min-height: 44px; } /* Navigatie- en footerlinks staan vaak inline; min-height doet daar niets. Verticale padding vergroot wel het tikvlak zonder de regelhoogte of de layout te veranderen. Links midden in een lopende zin laten we met rust: die horen typografisch in de tekst, niet als knop. */ nav a, .menu a, .nav-links a, footer a, [class*="menu"] > a, /* Terug-knoppen zitten vaak in een genestelde selector (nav.top .back), die specifieker is dan deze. Vandaar !important: op een aanraakscherm weegt een raakbare knop zwaarder dan het exacte oorspronkelijke ontwerp. */ a[class*="back"], a[class*="terug"], .breadcrumb a, .crumbs a { padding-block: 15px !important; } /* ... behalve links midden in een lopende zin: die horen typografisch in de tekst en zouden met extra padding de regelval verstoren. */ footer p a, nav p a, main p a, article p a, li p a { padding-block: 0; } /* Selectievakjes en radios zijn standaard veel te klein om te raken */ input[type="checkbox"], input[type="radio"] { min-width: 22px; min-height: 22px; } } /* ── Landschap: extra ruimte aan de kant waar de notch zit ── */ @media (orientation: landscape) { body { padding-left: var(--safe-l); padding-right: var(--safe-r); } } /* ── Respecteer 'verminder beweging' ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── Android: geen per ongeluk pull-to-refresh op app-achtige pagina's ── */ body { overscroll-behavior-y: contain; } /* ── Print: verspil geen inkt aan navigatie ── */ @media print { .no-print, .whatsapp-float, .fab, #scroll-top, .scroll-top, .cookie-banner, .mobile-cta-bar, .sticky-bottom-bar { display: none !important; } } /* ── Skiplink: onzichtbaar tot je hem met Tab bereikt ── Eigen classnaam (.smsak-skip) zodat pagina's met een eigen .skip-link ongemoeid blijven. */ .smsak-skip { position: absolute; left: 12px; top: -200px; z-index: 100000; display: inline-block; padding: 12px 20px; background: #00318A; color: #fff; font: 600 15px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; text-decoration: none; border-radius: 0 0 8px 8px; box-shadow: 0 4px 18px rgba(0,0,0,.35); transition: top .18s ease; } .smsak-skip:focus { top: max(0px, var(--safe-t)); } @media print { .smsak-skip { display: none; } }