/* ══════════════════════════════════════════════════════════════════════════ Laag 1: basiswaarden (global tokens, primitives) ══════════════════════════════════════════════════════════════════════════ Ruwe waarden zonder betekenis. Een kleur heet hier naar wat hij is, niet naar waar hij voor dient: groen-900 en niet "tekstkleur". Wat de waarde betékent staat in laag 2 (tokens-betekenis.css), en wat een onderdeel ermee doet in laag 3 (tokens-onderdelen.css). Naamsvorm: --mw--- Twee kleuren komen niet uit dit bestand maar uit de database: de merkkleur en de accentkleur staan in Instellingen en worden bij het laden van elke pagina als --mw-primair en --mw-accent in de kop gezet (includes/mw2026/kleuren.php). De trappen hieronder zijn daarvan afgeleid, zodat een andere huisstijl overal doorwerkt en niet half. Regel: gebruik laag 1 nooit rechtstreeks in een component. Staat er geen passende token in laag 2 of 3, dan hoort die er te komen. ══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Kleur: groen, de merkkleur ──────────────────────────────────────── 900 is de kleur zelf, 950 de diepere variant voor hover op donker. De lagere trappen zijn dezelfde kleur met minder dekking; dat houdt alles in dezelfde familie in plaats van er grijstinten naast te zetten. */ --mw-kleur-groen-950: var(--mw-primair-diep, #02322B); --mw-kleur-groen-900: var(--mw-primair, #03493F); --mw-kleur-groen-900-rgb: var(--mw-primair-rgb, 3, 73, 63); --mw-kleur-groen-a78: rgba(var(--mw-primair-rgb, 3, 73, 63), .78); --mw-kleur-groen-a80: rgba(var(--mw-primair-rgb, 3, 73, 63), .8); --mw-kleur-groen-a74: rgba(var(--mw-primair-rgb, 3, 73, 63), .74); --mw-kleur-groen-a62: rgba(var(--mw-primair-rgb, 3, 73, 63), .62); --mw-kleur-groen-a20: rgba(var(--mw-primair-rgb, 3, 73, 63), .2); --mw-kleur-groen-a16: rgba(var(--mw-primair-rgb, 3, 73, 63), .16); --mw-kleur-groen-a10: rgba(var(--mw-primair-rgb, 3, 73, 63), .1); --mw-kleur-groen-a08: rgba(var(--mw-primair-rgb, 3, 73, 63), .08); --mw-kleur-groen-a06: rgba(var(--mw-primair-rgb, 3, 73, 63), .06); --mw-kleur-groen-a45: rgba(var(--mw-primair-rgb, 3, 73, 63), .45); --mw-kleur-groen-a70: rgba(var(--mw-primair-rgb, 3, 73, 63), .7); /* ── Kleur: neon, het accent ─────────────────────────────────────────── Alleen als vlak of als actieve staat. Nooit als tekst op wit en nooit als rand in rust: het haalt daar het contrast niet. */ --mw-kleur-neon-600: #83F064; --mw-kleur-neon-300: #B2FFA0; /* lichter dan het accent, voor een hover op donker */ /* een tint dieper, alleen voor hover */ --mw-kleur-neon-500: var(--mw-accent, #97FF78); --mw-kleur-neon-500-rgb: var(--mw-accent-rgb, 151, 255, 120); --mw-kleur-neon-a85: rgba(var(--mw-accent-rgb, 151, 255, 120), .85); --mw-kleur-neon-a45: rgba(var(--mw-accent-rgb, 151, 255, 120), .45); --mw-kleur-neon-a16: rgba(var(--mw-accent-rgb, 151, 255, 120), .16); --mw-kleur-neon-a25: rgba(var(--mw-accent-rgb, 151, 255, 120), .25); --mw-kleur-neon-a08: rgba(var(--mw-accent-rgb, 151, 255, 120), .08); /* Hier stond var(--mw-mint, #F3FEEF), en --mw-mint in laag 2 wijst terug naar deze regel. Dat is een cirkel: zonder de kleurregel uit het CMS is geen van de twee geldig, en dan waren de informatiemelding, de uitgelichte rij in de vergelijkingstabel en het merklabel doorzichtig op een site die zijn kleuren niet heeft aangepast. Nu leest laag 1 een eigen naam, zoals bij het accent, en is de waarde er altijd. */ --mw-kleur-mint-50: var(--mw-mint-gekozen, #F3FEEF); /* ── Kleur: neutraal ───────────────────────────────────────────────── */ --mw-kleur-wit: #FFFFFF; --mw-kleur-wit-a82: rgba(255, 255, 255, .82); --mw-kleur-wit-a70: rgba(255, 255, 255, .7); /* Wit met dekking, in een vaste trap. De bladen gebruikten hier negentien verschillende waarden tussen .04 en .96; dat verschil zag niemand, maar het maakte wel elke regel een eigen beslissing. */ --mw-kleur-wit-a90: rgba(255, 255, 255, .9); --mw-kleur-wit-a60: rgba(255, 255, 255, .6); --mw-kleur-wit-a50: rgba(255, 255, 255, .5); --mw-kleur-wit-a25: rgba(255, 255, 255, .25); --mw-kleur-wit-a20: rgba(255, 255, 255, .2); --mw-kleur-wit-a14: rgba(255, 255, 255, .14); --mw-kleur-wit-a10: rgba(255, 255, 255, .1); --mw-kleur-wit-a05: rgba(255, 255, 255, .05); --mw-kleur-grijs-50: #F7F7F7; --mw-kleur-grijs-50-a90: rgba(247, 247, 247, .9); --mw-kleur-grijs-100:#F1F1F1; /* ── Kleur: signaal ─────────────────────────────────────────────────── Elk paar haalt 4,5:1 van tekst op zijn eigen vlak. Gebruik ze als paar. */ --mw-kleur-rood-700: #A3210F; --mw-kleur-rood-700-rgb: 163, 33, 15; --mw-kleur-rood-50: #FDF1EF; --mw-kleur-rood-a22: rgba(163, 33, 15, .22); --mw-kleur-oker-700: #8A4B00; --mw-kleur-oker-50: #FFF6E8; /* Een lichte oker voor een waarschuwing op een donkere ondergrond. De donkere oker-700 is daar onleesbaar. */ --mw-kleur-oker-300: #FFB347; --mw-kleur-oker-a06: rgba(255, 160, 40, .06); --mw-kleur-oker-a22: rgba(138, 75, 0, .22); /* ── Kleur: de zoekresultaatvoorbeeld ───────────────────────────────── De enige vreemde kleuren in het hele systeem, en met opzet: de voorvertoning van een zoekresultaat in de paginabouwer laat zien hoe Google de pagina toont, en dat zijn de kleuren van Google. Gebruik ze nergens anders. */ --mw-kleur-serp-titel: #1A0DAB; --mw-kleur-serp-adres: #0B7A3B; --mw-kleur-serp-tekst: #4D5156; /* ── Ruimte ─────────────────────────────────────────────────────────── Een trap van twee pixels tot 24, daarboven van acht. De stappen zijn niet verzonnen maar geteld: dit zijn de afstanden die het ontwerp werkelijk gebruikt. Alles wat je in een component intypt hoort een van deze te zijn. */ --mw-ruimte-0: 0; --mw-ruimte-1: 2px; --mw-ruimte-2: 4px; --mw-ruimte-3: 6px; --mw-ruimte-4: 8px; --mw-ruimte-5: 10px; --mw-ruimte-6: 12px; --mw-ruimte-7: 14px; --mw-ruimte-8: 16px; --mw-ruimte-9: 18px; --mw-ruimte-10: 20px; --mw-ruimte-11: 22px; --mw-ruimte-12: 24px; --mw-ruimte-13: 28px; --mw-ruimte-14: 32px; --mw-ruimte-15: 40px; --mw-ruimte-16: 48px; --mw-ruimte-17: 56px; --mw-ruimte-18: 64px; --mw-ruimte-19: 80px; /* Boven de tachtig gaat het niet meer om ruimte binnen een onderdeel maar om de hoogte van een sectie: de lucht boven een hero, de inspringing van een blok dat de header moet vrijhouden. */ /* De breedtes waarop de indeling omklapt. Een media query kan een custom property niet lezen, dus de stijlbladen schrijven het getal zelf uit; deze vijf staan hier zodat JavaScript en de referentiepagina ze kunnen lezen en gereedschap/breekpunten-nalopen.php kan controleren dat er geen zesde bijkomt. De lijst zelf staat in includes/mw/breekpunten.php. */ --mw-bp-groot: 1100px; --mw-bp-midden: 900px; --mw-bp-tablet: 768px; --mw-bp-klein: 600px; --mw-bp-mini: 480px; --mw-ruimte-20: 96px; --mw-ruimte-21: 112px; --mw-ruimte-22: 128px; --mw-ruimte-23: 160px; --mw-ruimte-24: 200px; --mw-ruimte-25: 240px; /* ── Vorm ───────────────────────────────────────────────────────────── Vier trappen. Geen slagschaduwen: diepte komt uit vlakken en randen. */ --mw-straal-0: 0; --mw-straal-1: 8px; --mw-straal-2: 12px; --mw-straal-3: 16px; --mw-straal-vol: 9999px; --mw-lijn-1: 1px; --mw-lijn-2: 1.5px; /* ── Letter ─────────────────────────────────────────────────────────── Google Sans Flex. Koppen staan op 300 en worden nooit vetter: het formaat maakt het verschil, niet het gewicht. */ --mw-letterfamilie: 'Google Sans Flex', system-ui, -apple-system, sans-serif; --mw-letterfamilie-code: ui-monospace, SFMono-Regular, Menlo, monospace; --mw-gewicht-300: 300; --mw-gewicht-400: 400; --mw-gewicht-500: 500; --mw-maat-100: 11px; --mw-maat-200: 12px; --mw-maat-300: 13px; --mw-maat-400: 14px; --mw-maat-500: 15px; --mw-maat-600: 16px; --mw-maat-700: 18px; --mw-maat-800: 24px; --mw-maat-900: clamp(28px, 2.6vw, 36px); --mw-maat-1000: clamp(32px, 3.4vw, 50px); --mw-maat-1100: clamp(40px, 4.2vw, 56px); --mw-spatie-0: 0; --mw-spatie-1: -.5px; --mw-spatie-2: -.9px; --mw-spatie-3: -1.2px; --mw-spatie-4: -2px; /* Positieve spatiering bestaat ook: kleine kapitalen in een label lopen zonder extra lucht aan elkaar vast. Stond op negen plekken als .04em, .5px en .6px, drie schrijfwijzen voor hetzelfde. */ --mw-spatie-w1: .5px; /* Een code die iemand moet overtypen staat wijd uit elkaar, zodat een 0 en een O niet aan elkaar plakken. Dat is geen opmaak maar leesbaarheid. */ --mw-spatie-w2: 8px; --mw-regelhoogte-1: 1.2; --mw-regelhoogte-2: 1.3; --mw-regelhoogte-3: 1.5; /* Regelhoogte 1 is geen tekstregel maar een blok dat precies zo hoog is als zijn letter: een icoon, een badge, een cijfer in een rondje. */ --mw-regelhoogte-0: 1; --mw-regelhoogte-4: 1.6; /* Tekstkolommen. Er stonden achttien verschillende breedtes in de code, van 280 tot 900 pixels, allemaal met de hand gekozen. Dit is de trap waar ze op vallen; de drie containers staan in laag 2. */ --mw-breedte-1: 280px; --mw-breedte-2: 420px; --mw-breedte-3: 560px; --mw-breedte-4: 640px; --mw-breedte-5: 720px; --mw-dekking-1: .74; --mw-dekking-2: .78; --mw-dekking-3: .8; /* ── Beweging ───────────────────────────────────────────────────────── Eén curve voor alles: traag beginnen, snel uitlopen. Het elastische gevoel is voorbehouden aan het mobiele menu. */ --mw-curve: cubic-bezier(.625, .05, 0, 1); --mw-curve-elastisch:cubic-bezier(.34, 1.56, .64, 1); --mw-tijd-1: 200ms; --mw-tijd-2: 300ms; --mw-tijd-3: 450ms; --mw-tijd-4: 560ms; --mw-tijd-5: 600ms; --mw-tijd-6: 800ms; }