/* base.css — reset, basistypografie en toegankelijkheidsgedrag Laadvolgorde: tokens.css → fonts.css → base.css → components.css Geen componentstijlen hier (die staan in components.css). */ /* ── Reset (modern, minimaal) ── */ *, *::before, *::after { box-sizing: border-box; } body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } /* Het hidden-attribuut wint altijd, ook van componentregels met een eigen display-waarde (zoals .form-success { display: grid }). */ [hidden] { display: none !important; } ul[class], ol[class] { list-style: none; margin: 0; padding: 0; } /* ── Basistypografie ── */ html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-text); font-size: var(--text-body); line-height: 1.6; color: var(--color-body); background: var(--color-surface); /* Footer altijd onderaan de viewport, ook op korte pagina's (zoals 404) */ min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1; /* Kolom-flex zodat een sectie met .section--fill de resthoogte kan vullen (korte pagina's zoals de 404) */ display: flex; flex-direction: column; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 400; color: var(--color-ink); line-height: 1.15; } a { color: var(--color-brand-text); text-decoration-thickness: 1px; text-underline-offset: 0.15em; } a:hover { color: var(--color-brand-strong); } /* ── Focus zichtbaar (toetsenbordnavigatie) ── */ :focus-visible { outline: var(--focus-ring); outline-offset: 2px; } /* ── Skip-link: visueel verborgen tot focus ── */ .skip-link { position: absolute; top: 0; left: 0; z-index: 100; padding: 0.75em 1.25em; background: var(--color-ink); color: var(--color-surface); font-family: var(--font-text); font-size: var(--text-small); text-decoration: none; transform: translateY(-120%); transition: transform 0.2s ease; } .skip-link:focus-visible { transform: translateY(0); } /* ── no-js / js-afspraak ── main.js vervangt de klasse "no-js" op door "js" zodra script actief is. Zonder JS blijft de site volledig bruikbaar; CSS die navigatie op mobiel verbergt mag dat uitsluitend doen onder .js (die regels horen thuis in components.css, niet hier). */ html.no-js { /* geen eigen stijl nodig — aanwezigheid van deze klasse is het hulpmiddel waarop componentregels (elders) kunnen selecteren. */ } /* ── Ankernavigatie: sectiekoppen niet onder de sticky header laten verdwijnen bij klikken op een nav-link ── */ [id] { scroll-margin-top: 6rem; } /* ── Reduced motion ── */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }