/* ══════════════════════════════════════════════════════════════════════════ Laag 2: betekenis (semantic tokens, alias) ══════════════════════════════════════════════════════════════════════════ Wat een waarde betekent, niet welke waarde het is. Een component vraagt om "de kleur van gewone tekst" en niet om "groen op tachtig procent". Wil je later alle zachte tekst een tint donkerder, dan verander je hier één regel en nergens anders. Naamsvorm: --mw--[-] De namen hieronder bestonden al en blijven zo heten, zodat alles wat er nu naar verwijst blijft werken. Wat er is veranderd: ze wijzen nu naar laag 1 in plaats van naar een losse waarde. ══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Vlakken ────────────────────────────────────────────────────────── */ --mw-pagina: var(--mw-kleur-grijs-50); /* de pagina zelf */ --mw-vlak: var(--mw-kleur-wit); /* een kaart of paneel */ --mw-vlak-grijs: var(--mw-kleur-grijs-100); /* een vlak binnen een kaart */ --mw-grijs-vlak: var(--mw-kleur-grijs-100); /* zelfde vlak, oude naam */ --mw-vlak-donker: var(--mw-kleur-groen-900); /* donkere sectie en footer */ /* ── Tekst ──────────────────────────────────────────────────────────── */ --mw-donkergroen: var(--mw-kleur-groen-900); /* gewone tekst */ --mw-donkergroen-diep: var(--mw-kleur-groen-950); /* hover op een link */ --mw-grijs-tekst: var(--mw-kleur-groen-a80); /* zachtere tekst */ --mw-grijs-zacht: var(--mw-kleur-groen-a74); /* labels en hints */ --mw-grijs-intro: var(--mw-kleur-groen-a78); /* intro en inleiding */ --mw-tekst-op-donker: var(--mw-kleur-wit); --mw-tekst-op-donker-zacht: var(--mw-kleur-wit-a82); --mw-tekst-intro: var(--mw-dekking-2); /* dekking, geen kleur */ --mw-tekst-label: var(--mw-dekking-1); /* ── Merk ───────────────────────────────────────────────────────────── */ --mw-felgroen: var(--mw-kleur-neon-500); /* accentvlak en actieve staat */ --mw-felgroen-diep: var(--mw-kleur-neon-600); --mw-felgroen-licht: var(--mw-kleur-neon-300); /* hover op een fel groen vlak */ --mw-lichtgroen: var(--mw-kleur-neon-a45); /* icoonrondje, pil in rust */ --mw-mint: var(--mw-kleur-mint-50); /* informatiekader */ /* ── Randen ─────────────────────────────────────────────────────────── */ --mw-rand: var(--mw-kleur-groen-a10); /* rust */ --mw-grijs-rand: var(--mw-kleur-groen-a16); /* een veld of een knopje */ --mw-rand-donker: var(--mw-kleur-wit-a70); /* op een donker vlak */ --mw-rand-dikte: var(--mw-lijn-1); --mw-rand-dikte-sterk: var(--mw-lijn-2); --mw-tekst-plekhouder: var(--mw-kleur-groen-a62); /* ── Lagen over de pagina heen ────────────────────────────────────────── Een venster verduistert wat eronder ligt. Niet met zwart maar met het diepe groen van de huisstijl: zwart hoort niet in dit palet. */ --mw-overlay: var(--mw-kleur-groen-a45); --mw-overlay-diep: var(--mw-kleur-groen-a70); --mw-beeldsluier: var(--mw-kleur-zwart-a50); /* tekst op een foto */ --mw-let-op-op-donker: var(--mw-kleur-oker-300); --mw-whatsapp: var(--mw-kleur-whatsapp); --mw-whatsapp-diep: var(--mw-kleur-whatsapp-diep); --mw-let-op-vlak-donker: var(--mw-kleur-oker-a06); /* Diepte komt uit vlakken en randen. Alleen wat los over de pagina zweeft (een venster, een keuzelijst) mag een schaduw hebben, en dan deze. */ --mw-schaduw-kleur-zacht: var(--mw-kleur-groen-a08); --mw-schaduw-kleur: var(--mw-kleur-groen-a16); --mw-schaduw-1: 0 4px 16px var(--mw-schaduw-kleur-zacht); --mw-schaduw-2: 0 16px 48px var(--mw-schaduw-kleur); /* Een vlak op een donkere ondergrond: een actief menu-item, een badge. */ --mw-vlak-op-donker: var(--mw-kleur-wit-a10); --mw-vlak-op-donker-sterk: var(--mw-kleur-wit-a25); --mw-vlak-op-donker-zacht: var(--mw-kleur-wit-a05); --mw-vlak-op-donker-melk: var(--mw-kleur-wit-a90); /* een balk die het donker bijna dekt */ --mw-rand-op-donker-zacht: var(--mw-kleur-wit-a20); --mw-rand-op-donker-half: var(--mw-kleur-wit-a50); --mw-tekst-op-donker-flauw: var(--mw-kleur-wit-a60); /* Het zachtste vlak dat er is: een rij die oplicht als je eroverheen gaat. */ --mw-vlak-hover: var(--mw-kleur-groen-a08); --mw-vlak-streep: var(--mw-kleur-groen-a16); /* een scheiding of een balkje */ /* ── Staten ───────────────────────────────────────────────────────────── Gebruik tekst en vlak altijd als paar; los halen ze het contrast niet. */ --mw-goed: var(--mw-kleur-groen-900); --mw-goed-vlak: var(--mw-kleur-mint-50); --mw-goed-rand: var(--mw-kleur-neon-a45); --mw-let-op: var(--mw-kleur-oker-700); --mw-let-op-vlak: var(--mw-kleur-oker-50); --mw-let-op-rand: var(--mw-kleur-oker-a22); --mw-fout: var(--mw-kleur-rood-700); --mw-fout-rgb: var(--mw-kleur-rood-700-rgb); --mw-fout-vlak: var(--mw-kleur-rood-50); --mw-fout-rand: var(--mw-kleur-rood-a22); /* ── Letter ─────────────────────────────────────────────────────────── */ --mw-letter: var(--mw-letterfamilie); --mw-gewicht-kop: var(--mw-gewicht-300); --mw-gewicht-tekst: var(--mw-gewicht-300); --mw-gewicht-titel: var(--mw-gewicht-400); --mw-gewicht-merk: var(--mw-gewicht-500); --mw-h1: var(--mw-maat-1100); --mw-h2: var(--mw-maat-1000); --mw-h3: var(--mw-maat-900); --mw-titel: var(--mw-maat-800); --mw-intro: var(--mw-maat-700); --mw-tekst: var(--mw-maat-600); --mw-label: var(--mw-maat-400); --mw-klein: var(--mw-maat-300); --mw-spatie-groot: var(--mw-spatie-4); --mw-spatie-wijd: var(--mw-spatie-w1); /* kleine kapitalen */ --mw-spatie-code: var(--mw-spatie-w2); /* een code om over te typen */ --mw-spatie: var(--mw-spatie-1); --mw-regel-kop: var(--mw-regelhoogte-1); --mw-regel: var(--mw-regelhoogte-2); --mw-regel-strak: var(--mw-regelhoogte-0); --mw-regel-lees: var(--mw-regelhoogte-4); /* ── Ruimte ───────────────────────────────────────────────────────────── --g is de paginamarge en krimpt mee met het scherm. De containers zijn maximumbreedtes en doen de rest vanzelf. */ --g: var(--mw-ruimte-14); --mw-container-breed: 1560px; --mw-container: 1240px; --mw-container-lees: 880px; /* Smallere kolommen dan een container: een inleiding onder een kop, een kaart in een raster, een melding. */ --mw-kolom-xs: var(--mw-breedte-1); --mw-kolom-s: var(--mw-breedte-2); --mw-kolom-m: var(--mw-breedte-3); --mw-kolom-l: var(--mw-breedte-4); --mw-kolom-xl: var(--mw-breedte-5); --mw-sectie: var(--mw-ruimte-19); --mw-sectie-klein: var(--mw-ruimte-15); /* ── Vorm ───────────────────────────────────────────────────────────── */ --mw-straal-sectie: var(--mw-straal-3); --mw-straal-kaart: var(--mw-straal-2); --mw-straal-veld: var(--mw-straal-1); --mw-straal-rond: var(--mw-straal-vol); /* ── Maten die overal terugkomen ────────────────────────────────────── */ --mw-knop: 48px; --mw-knop-formulier: 52px; --mw-knop-mobiel: 56px; --mw-knop-header: 72px; --mw-knop-header-s: 64px; --mw-badge: 48px; --mw-badge-klein: 34px; --mw-raakvlak: 44px; --mw-header: 84px; --mw-header-top: 52px; --mw-header-s: 64px; --mw-header-top-s: 8px; /* De balk op een telefoon is lager dan op een desktop. Dat is geen afgeleide van 84 maar een eigen maat uit het ontwerp, net als de krappere padding. */ --mw-header-mobiel: 60px; /* Waar een anker landt. De balk is gescrold 64 hoog op 8 van boven, dus de onderkant zit op 72; daarboven lucht, zodat de kop vrij staat en niet tegen de balk aan. Secties mogen meer ruimte vragen, nooit minder. */ --mw-anker-marge: 120px; /* Een beeld dat onder de tekst is geschoven mag niet het hele scherm vullen: daarboven wordt scrollen naar wat eronder staat vervelend. */ --mw-beeld-gestapeld-hoogte: 460px; /* ── Beweging ───────────────────────────────────────────────────────── */ --mw-easing: var(--mw-curve); --mw-elastisch: var(--mw-curve-elastisch); --mw-duur-snel: var(--mw-tijd-1); --mw-duur: var(--mw-tijd-3); --mw-duur-label: var(--mw-tijd-4); --mw-duur-pijl: var(--mw-tijd-5); } /* Onder 768 en 480 pixels krimpt alleen de paginamarge. */ @media (max-width: 768px) { :root { --g: var(--mw-ruimte-12); } } @media (max-width: 480px) { :root { --g: var(--mw-ruimte-8); } } /* Wie beweging heeft uitgezet krijgt geen enkele overgang. Dit staat hier en niet bij de componenten, zodat het onmogelijk vergeten kan worden. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }