/* ───────────────────────────────────────────────────────────────────────────── YILLO leesinstellingen Zes voorkeuren, elk met één doel, naar het model van iOS Display & Text Size. Alles hangt aan data-attributen op , zodat de losse inline-CSS van elke pagina onaangeroerd blijft: data-a11y-text="100|125|150|200" root-lettergrootte, alle rem schaalt mee data-a11y-contrast="1" donkerder tekst, dekkende vlakken data-a11y-underline="1" links onderstreept, knoppen omrand data-a11y-targets="1" aanraakvlakken minstens 48px data-a11y-motion="1" animaties en overgangen uit data-a11y-flat="1" achtergrondfoto's weg onder tekst De site is al rem-gebaseerd (926 rem tegen 2 px), dus tekstschaling via de root laat de opmaak herstromen en de media queries gewoon werken. Dat is de reden om hier géén CSS zoom te gebruiken: die schaalt wel, maar hertriggert de breekpunten niet en levert op mobiel horizontaal schuiven op. ───────────────────────────────────────────────────────────────────────────── */ :root { --a11y-ring: #0b57d0; /* focusring, 4,6:1 op wit en 3,1:1 op donker */ --a11y-tap: 48px; /* Material minimum; WCAG 2.5.8 vraagt 24px */ } /* ─── Tekstgrootte ─────────────────────────────────────────────────────────── */ /* Geen font-size op html in de pagina's zelf: dan blijft de browserinstelling van de gebruiker het vertrekpunt en vermenigvuldigt dit daarbovenop. */ html[data-a11y-text="125"] { font-size: 125%; } html[data-a11y-text="150"] { font-size: 150%; } html[data-a11y-text="200"] { font-size: 200%; } /* Koppen met clamp() hebben een vw-term die niet meeschaalt. Bij grote tekst valt die weg zodat de rem-ondergrens het overneemt. */ html[data-a11y-text="150"] h1, html[data-a11y-text="200"] h1, html[data-a11y-text="150"] h2, html[data-a11y-text="200"] h2, html[data-a11y-text="150"] .headline, html[data-a11y-text="200"] .headline { font-size: revert; } /* Ruimte voor langere regels: WCAG 1.4.12 vraagt dat tekst overleeft bij regelhoogte 1,5 en 0,12em letterafstand. Dat zetten we hier zelf. */ html[data-a11y-text="150"] body, html[data-a11y-text="200"] body { line-height: 1.6; letter-spacing: 0.01em; } html[data-a11y-text="200"] p { margin-bottom: 0.9em; } /* Vaste hoogtes lopen over zodra de tekst groeit. */ html[data-a11y-text="150"] nav, html[data-a11y-text="200"] nav { height: auto; min-height: 64px; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; } html[data-a11y-text="200"] [class*="card"], html[data-a11y-text="200"] [class*="tile"] { min-height: 0; height: auto; } /* Het logo is merk en geen leesbare inhoud. In px zodat het niet meeschaalt en de navigatiebalk bij 200% niet door het beeldscherm heen groeit. */ html[data-a11y-text="150"] .nav-logo, html[data-a11y-text="200"] .nav-logo { font-size: 24px; } /* Een rasterkolom krimpt niet onder de min-content-breedte van haar inhoud. Bij 200% is één lang woord als "relatieonderzoek" al breder dan een telefoon, en dan schuift de hele pagina zijwaarts. Woorden mogen dus afbreken, en raster- en flexkinderen mogen onder hun natuurlijke breedte. Dit is precies wat WCAG 1.4.4 vraagt: 200% zonder verlies van inhoud of functie. */ html[data-a11y-text="125"] body, html[data-a11y-text="150"] body, html[data-a11y-text="200"] body { overflow-wrap: break-word; hyphens: auto; } html[data-a11y-text="150"] :is([class*="grid"], [class*="card"], [class*="flex"]) > *, html[data-a11y-text="200"] :is([class*="grid"], [class*="card"], [class*="flex"]) > * { min-width: 0; } /* Ruime binnenmarges eten bij grote tekst de leesbreedte op. */ html[data-a11y-text="200"] [class*="-body"], html[data-a11y-text="200"] [class*="-card"] { padding-inline: 1rem; } /* Kolommen die op een vaste minimumbreedte staan, worden één kolom. */ html[data-a11y-text="200"] [class*="grid"] { grid-template-columns: 1fr !important; } /* ─── Meer contrast ────────────────────────────────────────────────────────── */ html[data-a11y-contrast="1"] { --muted: rgba(12, 11, 28, 0.86); --accent-text: #6d4708; --accent-strong: #6d4708; --primary-text: #97123f; --border: rgba(12, 11, 28, 0.38); } /* Doorschijnende vlakken worden dekkend: het equivalent van Reduce Transparency. Achter glas is tekst nooit voorspelbaar leesbaar. */ html[data-a11y-contrast="1"] nav, html[data-a11y-contrast="1"] [class*="glass"], html[data-a11y-contrast="1"] [style*="backdrop-filter"] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html[data-a11y-contrast="1"] nav { background: #ffffff !important; } html[data-a11y-contrast="1"] body { background: #ffffff; } /* Merkgradiënt onder tekst wordt één dekkende kleur die 4,9:1 haalt met wit. */ html[data-a11y-contrast="1"] .btn-primary, html[data-a11y-contrast="1"] .btn-form-submit, html[data-a11y-contrast="1"] button[class*="primary"] { background: #97123f !important; color: #ffffff !important; box-shadow: none !important; } /* Gradiënttekst valt terug op volle kleur: geknipte gradiënten in glyphen zijn per definitie deels te licht. */ html[data-a11y-contrast="1"] .gradient-text { background: none !important; -webkit-text-fill-color: currentColor !important; color: #97123f !important; } html[data-a11y-contrast="1"] :is(p, li, dd, figcaption, small) { color: rgba(12, 11, 28, 0.9); } /* ─── Links onderstrepen, knoppen omranden ─────────────────────────────────── */ /* Naar iOS Button Shapes: betekenis mag niet alleen aan kleur hangen (WCAG 1.4.1). Onderstreping en rand maken interactie zichtbaar. */ html[data-a11y-underline="1"] a:not([class*="btn"]):not([class*="card"]):not(.nav-logo) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; } html[data-a11y-underline="1"] button, html[data-a11y-underline="1"] a[class*="btn"], html[data-a11y-underline="1"] [role="button"] { outline: 2px solid currentColor; outline-offset: 2px; } /* ─── Grote aanraakvlakken ─────────────────────────────────────────────────── */ html[data-a11y-targets="1"] :is(a[class*="btn"], button, [role="button"], input, select, textarea, summary) { min-height: var(--a11y-tap); min-width: var(--a11y-tap); } /* Extra binnenruimte alleen voor knoppen met tekst. Een ronde iconknoop heeft al zijn maat uit min-width; padding zou daar de inhoudsdoos dichtknijpen en het icoon naar breedte nul laten krimpen. */ html[data-a11y-targets="1"] :is(a[class*="btn"], button, [role="button"]):not(.a11y-btn):not(.lang-globe-btn):not(.a11y-close):not(.nav-logo):not([class*="icon"]) { padding-inline: 1.25rem; padding-block: 0.75rem; } /* Een icoon mag nooit meekrimpen met een smallere inhoudsdoos. */ html[data-a11y-targets="1"] :is(button, a, [role="button"]) > svg { flex-shrink: 0; } html[data-a11y-targets="1"] :is(input, select, textarea) { padding: 0.75rem 1rem; font-size: 1rem; } /* Kleine tekstlinks in rijtjes krijgen lucht in plaats van hoogte, anders springt de opmaak uit elkaar. */ html[data-a11y-targets="1"] nav a:not([class*="btn"]):not(.nav-logo), html[data-a11y-targets="1"] footer a { display: inline-block; padding: 0.6rem 0.4rem; } /* Het logo is merk, geen navigatiedoel om te vergroten: het mag niet afbreken. */ html[data-a11y-targets="1"] .nav-logo, html[data-a11y-text="150"] .nav-logo, html[data-a11y-text="200"] .nav-logo { white-space: nowrap; } html[data-a11y-targets="1"] [class*="footer-links"], html[data-a11y-targets="1"] [class*="nav-links"] { row-gap: 0.25rem; } /* ─── Minder beweging ──────────────────────────────────────────────────────── */ html[data-a11y-motion="1"] *, html[data-a11y-motion="1"] *::before, html[data-a11y-motion="1"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } html[data-a11y-motion="1"] [class*="orb"], html[data-a11y-motion="1"] [class*="parallax"] { display: none !important; } /* Reveal-animaties zetten elementen op opacity 0 tot ze in beeld komen. Zonder animatie zouden ze onzichtbaar blijven, dus die dwingen we zichtbaar. */ html[data-a11y-motion="1"] [class*="reveal"] { opacity: 1 !important; transform: none !important; } /* ─── Rustige achtergrond ──────────────────────────────────────────────────── */ /* Tekst op een foto heeft geen voorspelbaar contrast: hoe donker de sluier ook is, elke afbeelding is anders. Dit vervangt de foto door één vlakke kleur. */ html[data-a11y-flat="1"] [class*="hero-bg"], html[data-a11y-flat="1"] [class*="-visual"] img, html[data-a11y-flat="1"] [class*="thumb"] img { display: none !important; } html[data-a11y-flat="1"] [class*="hero-bg"] { background: #0c0b1c !important; } html[data-a11y-flat="1"] [class*="hero-bg"]::after { background: #0c0b1c !important; } html[data-a11y-flat="1"] [class*="-visual"], html[data-a11y-flat="1"] [class*="thumb"] { background: #e9e7f5 !important; min-height: 0 !important; height: auto !important; } /* ─── Zichtbare focus, altijd ──────────────────────────────────────────────── */ /* WCAG 2.4.7 en 1.4.11: de ring moet 3:1 halen tegen de omgeving. Dubbele ring (donker + wit) werkt op zowel lichte als donkere vlakken. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--a11y-ring); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9); border-radius: 4px; } /* ─── Sla navigatie over ───────────────────────────────────────────────────── */ .a11y-skip { position: absolute; left: 0; top: 0; transform: translateY(-120%); z-index: 1000; background: #0c0b1c; color: #ffffff; padding: 0.85rem 1.25rem; font: 600 1rem/1.2 inherit; text-decoration: none; border-radius: 0 0 8px 0; transition: transform 0.15s; } .a11y-skip:focus { transform: translateY(0); } /* ─── De knop in de navigatie ──────────────────────────────────────────────── */ .a11y-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; width: 2.5rem; height: 2.5rem; min-width: 2.5rem; padding: 0; border: 1px solid rgba(12, 11, 28, 0.18); border-radius: 50%; background: #ffffff; color: #0c0b1c; cursor: pointer; font: inherit; transition: background 0.2s, border-color 0.2s; } .a11y-btn:hover { background: #f1eff9; border-color: rgba(12, 11, 28, 0.4); } .a11y-btn svg { width: 1.25rem; height: 1.25rem; display: block; } .a11y-btn[aria-expanded="true"] { background: #0c0b1c; color: #ffffff; border-color: #0c0b1c; } /* Op donkere secties staat de nav-knop op glas; dan een lichte variant. */ .a11y-btn.on-dark { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.5); color: #ffffff; } /* ─── Het paneel ───────────────────────────────────────────────────────────── */ .a11y-backdrop { position: fixed; inset: 0; z-index: 998; background: rgba(12, 11, 28, 0.45); border: 0; padding: 0; } .a11y-panel { position: fixed; z-index: 999; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(28rem, calc(100vw - 2rem)); max-height: min(85vh, 44rem); overflow-y: auto; background: #ffffff; color: #0c0b1c; border-radius: 1.25rem; box-shadow: 0 24px 60px rgba(12, 11, 28, 0.3); padding: 1.5rem; font-family: inherit; /* Het paneel schaalt mee met de tekstinstelling: wie grote tekst nodig heeft, moet ook het paneel zelf kunnen lezen. */ } .a11y-panel h2 { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 0.25rem; } .a11y-panel .a11y-intro { font-size: 0.9rem; color: rgba(12, 11, 28, 0.72); margin: 0 0 1.25rem; line-height: 1.5; } .a11y-close { position: absolute; top: 0.85rem; right: 0.85rem; width: 2.25rem; height: 2.25rem; border: 1px solid rgba(12, 11, 28, 0.18); border-radius: 50%; background: #ffffff; color: #0c0b1c; font-size: 1.1rem; line-height: 1; cursor: pointer; } .a11y-close:hover { background: #f1eff9; } /* Voorbeeldkaart: het effect meteen zichtbaar op echte inhoud, zoals Kindle, Apple Books en X het doen. Zonder dat kiest iemand blind. */ .a11y-preview { border: 1px solid rgba(12, 11, 28, 0.14); border-radius: 0.9rem; padding: 1rem; margin-bottom: 1.25rem; background: #faf9ff; } .a11y-preview-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(12, 11, 28, 0.62); margin: 0 0 0.5rem; } .a11y-preview h3 { font-size: 1.05rem; font-weight: 800; margin: 0 0 0.35rem; } .a11y-preview p { font-size: 0.9rem; line-height: 1.6; color: rgba(12, 11, 28, 0.78); margin: 0 0 0.75rem; } .a11y-preview a { color: #97123f; font-weight: 600; } .a11y-preview .a11y-preview-btn { display: inline-block; background: #97123f; color: #ffffff; border: 0; border-radius: 0.6rem; padding: 0.6rem 1.1rem; font: 600 0.9rem inherit; cursor: default; } .a11y-group { margin-bottom: 1.25rem; } .a11y-group > .a11y-label { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 0.15rem; } .a11y-group > .a11y-hint { display: block; font-size: 0.78rem; color: rgba(12, 11, 28, 0.68); line-height: 1.45; margin-bottom: 0.55rem; } /* Tekstgrootte als stappen, niet als vrije schuif: makkelijker te raken met een onvaste hand en makkelijker te toetsen. */ .a11y-steps { display: flex; gap: 0.4rem; flex-wrap: wrap; } .a11y-step { flex: 1 1 0; min-width: 3.5rem; min-height: 2.75rem; border: 1px solid rgba(12, 11, 28, 0.2); border-radius: 0.6rem; background: #ffffff; color: #0c0b1c; font: 600 0.85rem inherit; cursor: pointer; } .a11y-step:hover { background: #f1eff9; } .a11y-step[aria-pressed="true"] { background: #0c0b1c; color: #ffffff; border-color: #0c0b1c; } /* Schakelaars: een echte knop met aria-pressed, niet een gestileerde checkbox, zodat een schermlezer de stand meldt. */ .a11y-toggle { display: flex; align-items: flex-start; gap: 0.75rem; width: 100%; min-height: 2.75rem; padding: 0.65rem 0.15rem; border: 0; border-top: 1px solid rgba(12, 11, 28, 0.1); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .a11y-toggle:hover { background: #faf9ff; } .a11y-toggle-text { flex: 1; } .a11y-toggle-text strong { display: block; font-size: 0.88rem; font-weight: 700; } .a11y-toggle-text span { display: block; font-size: 0.78rem; color: rgba(12, 11, 28, 0.68); line-height: 1.45; } .a11y-switch { flex-shrink: 0; width: 2.75rem; height: 1.6rem; border-radius: 1rem; background: rgba(12, 11, 28, 0.22); position: relative; transition: background 0.18s; margin-top: 0.1rem; } .a11y-switch::after { content: ''; position: absolute; top: 0.2rem; left: 0.2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #ffffff; transition: transform 0.18s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .a11y-toggle[aria-pressed="true"] .a11y-switch { background: #0f7a3d; } .a11y-toggle[aria-pressed="true"] .a11y-switch::after { transform: translateX(1.15rem); } /* De stand mag niet alleen aan kleur hangen (WCAG 1.4.1): een vinkje erbij. */ .a11y-toggle[aria-pressed="true"] .a11y-switch::before { content: ''; position: absolute; left: 0.5rem; top: 0.52rem; width: 0.45rem; height: 0.25rem; border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff; transform: rotate(-45deg); } .a11y-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; } .a11y-reset, .a11y-done { flex: 1; min-height: 2.75rem; border-radius: 0.7rem; font: 600 0.9rem inherit; cursor: pointer; } .a11y-reset { background: #ffffff; color: #0c0b1c; border: 1px solid rgba(12, 11, 28, 0.28); } .a11y-reset:hover { background: #f1eff9; } .a11y-done { background: #0c0b1c; color: #ffffff; border: 0; } .a11y-done:hover { background: #241f45; } /* Meldingen voor schermlezers, onzichtbaar maar wel voorgelezen. */ .a11y-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Binnen het paneel gelden de eigen instellingen niet: anders wordt het paneel bij 200% onbruikbaar breed of verliest het zijn eigen leesbaarheid. */ html[data-a11y-contrast="1"] .a11y-panel { background: #ffffff; color: #000000; } html[data-a11y-contrast="1"] .a11y-panel .a11y-hint, html[data-a11y-contrast="1"] .a11y-panel .a11y-toggle-text span { color: rgba(0, 0, 0, 0.86); } html[data-a11y-flat="1"] .a11y-preview { background: #ffffff; } @media (max-width: 30rem) { .a11y-panel { width: calc(100vw - 1rem); padding: 1.15rem; border-radius: 1rem; } .a11y-steps { gap: 0.3rem; } } /* Wie in het besturingssysteem al minder beweging vraagt, krijgt dat hier zonder iets aan te zetten. */ @media (prefers-reduced-motion: reduce) { .a11y-skip, .a11y-btn, .a11y-switch, .a11y-switch::after { transition: none; } }