/* ========================================================================== Elbay - eigen overrides Dit bestand hoort NIET bij de VWE/Elementor-export. Alles wat wij zelf aanpassen komt hier, zodat een nieuwe mirror-run niks van ons overschrijft. Geladen als laatste stylesheet in door tools/inject-custom.mjs. ========================================================================== */ :root { --elbay-tap-min: 44px; /* WCAG 2.5.5 comfortabel tikdoel */ --elbay-red: #e4032e; /* uit de huisstijl van de header/knoppen */ } /* -------------------------------------------------------------------------- 1. Tikdoelen op mobiel De hamburger was 74x20px en losse links 17-27px hoog. Alles onder ~44px is op een telefoon lastig te raken. -------------------------------------------------------------------------- */ @media (max-width: 1024px) { /* Hamburger / menuknop */ #menu-icon { display: inline-flex !important; align-items: center; justify-content: center; min-width: var(--elbay-tap-min); min-height: var(--elbay-tap-min); padding: 12px !important; } #menu-icon .elementor-button-content-wrapper, #menu-icon .elementor-button-icon { line-height: 1; } /* Navigatie- en footerlinks krijgen een volwaardig raakvlak */ .elementor-nav-menu a, .elementor-nav-menu--dropdown a, footer a, .elementor-widget-theme-site-footer a { min-height: var(--elbay-tap-min); display: flex; align-items: center; } /* Telefoon-, mail- en social-links in de footer */ a[href^="tel:"], a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: var(--elbay-tap-min); } /* Checkboxes/radio's in de afspraakformulieren stonden op 13x13 */ .elementor-field-type-checkbox input[type="checkbox"], .elementor-field-type-radio input[type="radio"], .elementor-field-subgroup input[type="checkbox"], .elementor-field-subgroup input[type="radio"] { width: 22px; height: 22px; margin-right: 10px; flex: 0 0 auto; } .elementor-field-subgroup .elementor-field-option { display: flex; align-items: center; min-height: var(--elbay-tap-min); } .elementor-field-subgroup .elementor-field-option label { line-height: 1.3; padding: 4px 0; } /* Formuliervelden: 16px voorkomt dat iOS inzoomt bij focus */ .elementor-field-textual, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea { font-size: 16px !important; min-height: var(--elbay-tap-min); } /* Verzendknoppen */ .elementor-button, button[type="submit"], input[type="submit"] { min-height: var(--elbay-tap-min); } } /* -------------------------------------------------------------------------- 2. Minimale leesbare tekstgrootte Op /hello-world/ stond tekst op 11px. -------------------------------------------------------------------------- */ @media (max-width: 1024px) { .comment-reply-link, .comment-metadata, .posted-on, time, small, .elementor-widget-text-editor small { font-size: 12px !important; } } /* -------------------------------------------------------------------------- 3. Vangnet voor de entrance-animaties Elementor zet .elementor-invisible op { visibility: hidden } en haalt dat pas met JS weg zodra je scrollt. Op de homepage hangen 16 blokken daaraan. Valt JS uit of laadt het traag op 4G, dan blijft een groot deel van de pagina onzichtbaar. Deze regel maakt alles alsnog zichtbaar na 3s; werkt JS normaal, dan is de klasse allang weg en merk je hier niets van. -------------------------------------------------------------------------- */ /* Dit vangnet zat eerst in een CSS-animatie op 'visibility'. Dat werkt, maar die eigenschap kan de browser niet op de GPU afhandelen: Lighthouse telde er 23 van op de homepage. Het vangnet zit nu in elbay-widgets.js, dat na drie seconden gewoon de klasse weghaalt. Zelfde effect, geen animatie. */ .elbay-toon-alles .elementor-invisible { visibility: visible !important; } /* Wie 'reduce motion' aan heeft, krijgt de inhoud direct zonder animatie. */ @media (prefers-reduced-motion: reduce) { .elementor-invisible { visibility: visible !important; animation: none !important; } .animated, .animated-slow, .animated-fast { animation: none !important; transition: none !important; } } /* -------------------------------------------------------------------------- 4. Kleine hygiëne -------------------------------------------------------------------------- */ /* Nooit horizontaal scrollen, ook niet als er later een breed blok bijkomt. */ html, body { overflow-x: hidden; } /* Media schalen mee in plaats van de layout op te rekken. */ img, video, iframe, table { max-width: 100%; } /* Zichtbare focus voor toetsenbord- en screenreadergebruik. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--elbay-red); outline-offset: 2px; }