/* ============================================================= TOEGANKELIJKHEID — zwevende knop + instellingenpaneel ------------------------------------------------------------- Overgenomen uit website-hapdemakroon.nl en aangepast aan het Marine Blue-palet en de componenten van deze site. Opties: tekstgrootte · hoog contrast · hoge saturatie · voorlezen · grote cursor · dyslexie-lettertype · reset Alle standen worden onthouden in localStorage (zie a11y.js). ============================================================= */ @font-face { font-family: "Open-Dyslexic"; font-style: normal; font-weight: 400; font-display: swap; src: local("OpenDyslexic"), local("Open-Dyslexic"), url("/assets/fonts/opendyslexic-400.woff2") format("woff2"); } @font-face { font-family: "Open-Dyslexic"; font-style: normal; font-weight: 700; font-display: swap; src: local("OpenDyslexic Bold"), local("OpenDyslexic-Bold"), url("/assets/fonts/opendyslexic-700.woff2") format("woff2"); } /* ------------------------------------------------------------- 1. Standen die op worden gezet ------------------------------------------------------------- */ /* Tekstgrootte — schaalt mee met de html-root, dus alle rem/clamp-waarden */ html.a11y-text-size-sm { font-size: 87.5%; } html.a11y-text-size-md { font-size: 100%; } html.a11y-text-size-lg { font-size: 125%; } /* Hoge saturatie — isolation voorkomt compositing-randen in WebKit */ html.a11y-high-saturation { filter: saturate(1.45); isolation: isolate; } /* Extra grote cursor */ html.a11y-large-cursor, html.a11y-large-cursor body, html.a11y-large-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath fill='%23111111' stroke='%23ffffff' stroke-width='3.2' stroke-linejoin='round' d='M4 2v42l12-11 8 15 7-3-7-15h20L4 2z'/%3E%3C/svg%3E") 6 4, auto !important; } html.a11y-large-cursor :is(input[type='text'], input[type='email'], input[type='tel'], input[type='url'], input[type='search'], input[type='password'], input[type='number'], textarea) { cursor: text !important; } /* Dyslexie-lettertype */ html.a11y-dyslexia-font { --font-head: "Open-Dyslexic", Arial, sans-serif; --font-body: "Open-Dyslexic", Arial, sans-serif; } html.a11y-dyslexia-font body { letter-spacing: .015em; word-spacing: .04em; } html.a11y-dyslexia-font :is(button, input, select, textarea) { font-family: var(--font-body); } /* Het logo is beeld, maar koppen mogen niet meer "balanceren" — dat botst met bredere letters */ html.a11y-dyslexia-font :is(h1, h2, h3, h4) { text-wrap: initial; } /* ------------------------------------------------------------- 2. Hoog contrast Decoratieve gradiënten worden vlak, tekst gaat naar zwart/wit en elk vlak krijgt een harde rand. ------------------------------------------------------------- */ html.high-contrast { --acc: #00405C; --acc-deep: #002B3D; --acc-soft: #BFEAF2; --ink: #000; --ink-soft: #000; --muted: #1A1A1A; --paper: #fff; --paper-2: #fff; --tint: #fff; --tint-2: #fff; --dark: #000; --footer: #000; --on-dark: #fff; --on-dark-mut: #fff; --on-dark-faint: #fff; --line: #000; --line-dark: #fff; --acc-wash: #fff; } html.high-contrast body { background: #fff; color: #000; } /* Gradiëntvlakken vlak maken zodat tekst er altijd op leesbaar is */ html.high-contrast :is(.hero, .page-hero) { background: #000 !important; } html.high-contrast :is(.hero, .page-hero)::before, html.high-contrast :is(.hero, .page-hero)::after { display: none !important; } html.high-contrast :is(.section--cta, .cta) { background: #000 !important; } html.high-contrast .section--dark, html.high-contrast .section--ink { background: #000 !important; } html.high-contrast :is(.media, .card__media, .feature__media, .pinned__panel, .tile__media, .zadelband__foto) { background-image: none !important; background: #fff !important; border: 2px solid #000; } /* De zadelband staat op de zachte sectie-achtergrond; die wordt hier vlak wit, waardoor het witte kader eromheen zonder rand zou wegvallen (die komt hierboven). */ html.high-contrast .zadelband { background: #fff !important; } html.high-contrast .zadelband__foto { box-shadow: none !important; } html.high-contrast .circle--1 { background-image: none !important; background: #000 !important; color: #fff !important; } html.high-contrast :is(.circle--2, .circle--3) { background-image: none !important; background: #fff !important; color: #000 !important; border: 2px solid #000; } /* Tekst op donkere vlakken */ html.high-contrast :is(.hero, .page-hero, .section--dark, .section--ink, .section--cta, .cta, .site-footer) :is(p, li, span, h1, h2, h3, h4, dt, dd, blockquote, address) { color: #fff !important; } html.high-contrast :is(.hero__text, .page-hero__intro, .section__intro, .cta__text, .pledge__after, .site-footer__tagline) { color: #fff !important; } html.high-contrast :is(.section--dark, .section--ink, .section--cta, .cta, .hero, .page-hero) .eyebrow { color: #fff !important; } /* Randen en vlakken op lichte secties */ html.high-contrast :is(.card, .topic, .step, .card-panel, .pill-list li, .intent-card__box, .field input, .field textarea, .field select, .overtuiging__icoon, .pledge) { background: #fff !important; border: 2px solid #000 !important; color: #000 !important; } /* Wit formulierpaneel op een zwarte sectie: de regel hierboven maakt álle tekst binnen .section--dark wit, en die zou hier wegvallen tegen het paneel. */ html.high-contrast .card-panel--form :is(p, li, span, label, h1, h2, h3, h4) { color: #000 !important; } html.high-contrast .card-panel--form a { color: #000 !important; text-decoration: underline; } html.high-contrast .accordion, html.high-contrast .accordion__item { border-color: #000 !important; } html.high-contrast .deflist__row { border-color: #000 !important; } /* Knoppen: zwart-op-wit of wit-op-zwart, altijd met rand */ html.high-contrast :is(.btn--primary, .primary-nav__cta, .step__num, .pinned__num.is-active) { background: #000 !important; color: #fff !important; border: 2px solid #000 !important; } html.high-contrast :is(.btn--light, .btn--ghost, .btn--on-hero) { background: #fff !important; color: #000 !important; border: 2px solid #000 !important; backdrop-filter: none !important; } html.high-contrast :is(.hero, .page-hero, .section--cta, .cta) .btn--on-hero { background: #fff !important; color: #000 !important; border: 2px solid #fff !important; } /* Afspeelknop over een video: zwart op wit, met rand, zodat hij ook op een zwart videovlak herkenbaar blijft. */ html.high-contrast :is(.videobox__play, .videobox__geluid) { background: #fff !important; color: #000 !important; border: 2px solid #000 !important; } html.high-contrast .site-header { background: #fff !important; border-bottom: 2px solid #000; backdrop-filter: none !important; } html.high-contrast .site-header--over:not(.is-scrolled) { background: #fff !important; } html.high-contrast .site-header--over:not(.is-scrolled) .brand__img--dark { opacity: 1; } html.high-contrast .site-header--over:not(.is-scrolled) .brand__img--light { opacity: 0; } html.high-contrast .primary-nav__link { color: #000 !important; } html.high-contrast .site-footer { background: #000 !important; } html.high-contrast .site-footer :is(a, .site-footer__heading) { color: #fff !important; } html.high-contrast .text-link { color: inherit !important; border-bottom-width: 2px; } html.high-contrast a:focus-visible, html.high-contrast button:focus-visible, html.high-contrast :is(input, select, textarea):focus-visible { outline: 3px solid #000 !important; outline-offset: 3px; } html.high-contrast :is(.hero, .page-hero, .section--dark, .section--cta, .cta, .site-footer) :is(a, button):focus-visible { outline-color: #fff !important; } /* De zwevende knoppen moeten op zowel zwarte als witte secties opvallen: zwart vlak, witte rand, daaromheen nog een zwarte ring. */ html.high-contrast :is(.to-top, .a11y-fab) { background: #000 !important; color: #fff !important; border: 2px solid #fff !important; box-shadow: 0 0 0 2px #000 !important; } html.high-contrast .a11y-panel { background: #fff !important; border: 2px solid #000 !important; } html.high-contrast :is(.a11y-panel-close, .a11y-panel-reset, .a11y-size-segmented) { background: #fff !important; border: 2px solid #000 !important; color: #000 !important; } html.high-contrast .a11y-size-btn:has(.a11y-size-input:checked) { background: #000 !important; color: #fff !important; } html.high-contrast :is(.a11y-panel-hint, .a11y-option, .a11y-fieldset-legend, .a11y-panel-title) { color: #000 !important; } /* ------------------------------------------------------------- 3. De zwevende knop en het paneel ------------------------------------------------------------- */ .a11y-widget { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 120; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 10px; font-family: var(--font-body); pointer-events: none; } .a11y-widget > * { pointer-events: auto; } /* De terug-naar-boven-knop staat op dezelfde hoek → één rij hoger zetten */ .to-top { bottom: calc(clamp(1rem, 3vw, 2rem) + 52px + 12px); } .a11y-fab { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--acc-deep); background: var(--acc); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); transition: transform .15s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease; } .a11y-fab:hover { transform: translateY(-2px); box-shadow: var(--shadow); background: var(--acc-deep); } .a11y-fab[aria-expanded="true"] { background: var(--dark); border-color: var(--dark); } .a11y-fab svg { width: 26px; height: 26px; } .a11y-panel { width: min(320px, calc(100vw - 32px)); padding: 16px 18px 14px; background: var(--paper-2); border: 1.5px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); max-height: calc(100dvh - 120px); overflow-y: auto; } .a11y-panel[hidden] { display: none !important; } .a11y-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .a11y-panel-title { margin: 0 0 12px; font-size: 1.05rem; font-weight: 700; color: var(--ink); } .a11y-panel-head .a11y-panel-title { margin: 0; } .a11y-panel-reset { width: 36px; height: 36px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--tint); color: var(--ink); cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease; } .a11y-panel-reset:hover { background: var(--tint-2); } .a11y-panel-reset:active { transform: scale(.97); } .a11y-panel-reset svg { width: 18px; height: 18px; fill: currentColor; } .a11y-fieldset { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; } .a11y-fieldset-textsize { margin-bottom: 18px; } .a11y-fieldset-legend { display: block; font-size: .82rem; font-weight: 700; color: var(--ink); margin-bottom: 10px; padding: 0; } .a11y-size-segmented { display: flex; width: 100%; border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--tint); } .a11y-size-btn { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 11px 8px; margin: 0; font-family: inherit; font-size: .86rem; font-weight: 600; color: var(--ink); cursor: pointer; background: transparent; border: 0; border-right: 1px solid var(--line); transition: background .18s ease, color .18s ease; } .a11y-size-btn:last-child { border-right: 0; } .a11y-size-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .a11y-size-btn-text { position: relative; pointer-events: none; } .a11y-size-btn:hover { background: var(--tint-2); } .a11y-size-btn:has(.a11y-size-input:checked) { background: var(--acc); color: #fff; } .a11y-size-btn:has(.a11y-size-input:checked):hover { background: var(--acc-deep); } .a11y-size-btn:has(.a11y-size-input:focus-visible) { outline: 3px solid var(--acc); outline-offset: -3px; } .a11y-option { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; font-size: .95rem; font-weight: 500; color: var(--ink); cursor: pointer; line-height: 1.35; } .a11y-option input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--acc); } .a11y-panel-hint { margin: 0 0 12px; font-size: .82rem; color: var(--muted); line-height: 1.45; } .a11y-panel-close { width: 100%; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--tint); font-weight: 600; font-size: .9rem; cursor: pointer; color: var(--ink); } .a11y-panel-close:hover { background: var(--tint-2); } @media (max-width: 720px) { .a11y-widget { right: 12px; bottom: 12px; } .to-top { right: 12px; bottom: calc(12px + 52px + 10px); } } /* ------------------------------------------------------------- 4. Voorleesmodus — tekstblokken worden aanwijsbaar ------------------------------------------------------------- */ body.a11y-read-mode .a11y-widget { z-index: 130; } body.a11y-read-mode .a11y-read-block { position: relative; outline: 1px dashed rgba(0, 126, 167, .55); outline-offset: 3px; border-radius: 4px; cursor: pointer; transition: background-color .15s ease, outline-color .15s ease; } body.a11y-read-mode .a11y-read-block::after { content: ""; position: absolute; top: -12px; right: -12px; width: 30px; height: 30px; opacity: 0; pointer-events: none; border: 1px solid rgba(0, 40, 60, .18); border-radius: var(--r-pill); background-color: rgba(255, 255, 255, .94); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003249' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M18.5 6a9 9 0 0 1 0 12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 20px 20px; transform: translateY(-2px); transition: opacity .15s ease, transform .15s ease; } body.a11y-read-mode .a11y-read-block:hover, body.a11y-read-mode .a11y-read-block:focus-visible { outline: 2px solid var(--acc); background: rgba(128, 206, 215, .22); } body.a11y-read-mode .a11y-read-block:hover::after, body.a11y-read-mode .a11y-read-block:focus-visible::after { opacity: 1; transform: translateY(0); } /* Op donkere vlakken een lichte omlijning */ body.a11y-read-mode :is(.hero, .page-hero, .section--dark, .section--ink, .section--cta, .cta, .site-footer) .a11y-read-block { outline-color: rgba(255, 255, 255, .5); } body.a11y-read-mode :is(.hero, .page-hero, .section--dark, .section--ink, .section--cta, .cta, .site-footer) .a11y-read-block:hover, body.a11y-read-mode :is(.hero, .page-hero, .section--dark, .section--ink, .section--cta, .cta, .site-footer) .a11y-read-block:focus-visible { outline-color: #fff; background: rgba(255, 255, 255, .16); } /* Blok dat op dit moment wordt voorgelezen */ body.a11y-read-mode .a11y-read-block.a11y-read-flash { outline: 2px solid var(--acc); background: rgba(128, 206, 215, .38); } /* Eerste tik op een knop/link: eerst voorlezen, tweede tik voert de actie uit */ body.a11y-read-mode .a11y-read-block.a11y-read-selected { outline: 3px solid var(--acc); outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { .a11y-fab, .a11y-panel-reset, .a11y-read-block, .a11y-read-block::after { transition: none !important; } }