/* * MMC Demo — tokens. * * Dit bestand vervangt assets/css/tokens.css van EQwise Base. Dat gaat vanzelf: * de keten in eqwise-base/functions.php zoekt elke stylesheet eerst in het * childthema en pas daarna bij zichzelf. Er is dus geen filter voor nodig, en * de EQwise-kleuren van de base komen hier nooit binnen. * * WAT HIER STAAT EN WAT NIET * * Kleur staat hier NIET. Die staat in theme.json, als palet, en WordPress maakt * daar --wp--preset--color--* van. Eén bron per gegeven: zet je een kleur ook * hier neer, dan heb je er twee en gaan ze uiteenlopen. * * Hier staan de waarden die geen preset kunnen zijn — regelhoogte, letterspatie, * gewicht, maat en ritme — plus de brug naar de tokennamen die EQwise Base zelf * gebruikt in zijn templates en in zijn theme.json (--eq-t-*, --eq-kant, * --eq-kolom, --eq-stap). Zonder die brug valt de base terug op zijn eigen * fallbacks en staat de MMC-demo in EQwise-maten. * * HERKOMST * * Elke waarde komt uit tokens.md (6 september 2026, gelezen uit de computed * styles van mmclearning.com) of uit de ritmemeting tegen de offline spiegel. * Wat afgeleid of benaderd is, staat als zodanig gemarkeerd en staat in * aannames.md. Niets is op het oog bepaald. * * PREFIX * * --eq- is van het thema, --eqw- van de plugin eqwise-blocks. In dit bestand * staat dus geen enkele --eqw-. De eerdere tokenlaag van de swarm gebruikte die * naam wel; die is hier omgezet, niet gekopieerd. */ :root { /* ---------- typografische schaal ---------- * Namen zoals EQwise Base ze gebruikt, waarden zoals MMC ze heeft. * theme.json bindt de presets hieraan, dus één wijziging landt overal. */ --eq-t-display: 46px; /* hero op ai-training */ --eq-t-h1: 30px; --eq-t-h2: 28px; --eq-t-lead: 24px; /* tussenkop; base noemt deze naam 'lead' */ --eq-t-h3: 22px; --eq-t-h4: 20px; --eq-t-h5: 18px; --eq-t-h6: 16px; --eq-t-body: 16px; --eq-t-label: 16px; --eq-t-menu: 15px; /* hoofdmenu */ --eq-t-knop: 14px; /* knop in het menu; gemeten op de bron, PT Sans 400 */ /* hoofdmenu; gemeten op de bron, tussen klein en body in */ --eq-t-klein: 13px; /* Het formulier draagt een eigen schaal. Op de bron is de kop 32 en * staan label, veld en knop alle drie op 18 — groter dan de lopende * tekst eromheen. Dat verschil is wat het paneel als formulier laat * lezen in plaats van als een alinea met vakjes. */ --eq-t-form-title: 32px; --eq-t-form-intro: 18.4px; --eq-t-form-field: 18px; --eq-t-section-head: 36px; /* sectiekop boven een kaartenblok */ /* De koppenschaal van start-here, gemeten: 52 voor de paginakop, 44 * voor een bandkop, 36 voor een groepskop. Alle drie hoofdletters. * 52 is de grootste kop van de hele site. */ --eq-t-mega: 52px; --eq-t-xl: 44px; /* De regelafstand van de bron. Eén getal, over elke corpsmaat: 16/20, * 18/22,5, 18,4/23, 36/45. Wij stonden op 1,72 en dat is zeven pixels * per regel extra — het is de belangrijkste reden dat onze pagina's * luchtiger ogen dan de bron terwijl de tekst klopt. */ --eq-leading-bron: 1.25; --eq-t-bijschrift: 13px; /* Bebas Neue op /ocean-ai/: fase-labels en tiernamen. Vijfde lettertype, * alleen op die pagina. Zie aannames.md. */ --eq-t-fase: 80px; /* Base leest deze naam in zijn eigen theme.json voor de bodymaat. */ --eq-t-body-gebouwd: var(--eq-t-body); /* ---------- gewicht ---------- */ --eq-weight-display: 400; --eq-weight-h1: 700; --eq-weight-h2: 700; --eq-weight-h3: 700; --eq-weight-h4: 600; --eq-weight-h5: 600; --eq-weight-h6: 500; --eq-weight-body: 400; --eq-weight-label: 500; --eq-weight-knop: 700; /* ---------- regelhoogte ---------- * Body staat op de bron op TWEE waarden: het thema zet 1.25, de * typografieset zet 1.72. Wat er landt hangt af van het element, dus ze * blijven allebei staan. --eq-leading-body-ui is de interfacewaarde (menu, * knop, label), --eq-leading-body de leeswaarde (alinea). */ --eq-leading-display: 1.2; --eq-leading-h1: 1.3; --eq-leading-h2: 1.35; --eq-leading-h3: 1.33; --eq-leading-h4: 1.25; --eq-leading-h5: 1.13; --eq-leading-h6: 1.06; --eq-leading-body: 1.72; --eq-leading-body-ui: 1.25; --eq-leading-meta: 1.5; /* ---------- letterspatie ---------- */ --eq-tracking-display: 0.015em; --eq-tracking-h2: 0.01em; --eq-tracking-body: 0.015em; --eq-tracking-none: 0; /* ---------- maat ---------- * --eq-kolom en --eq-kant zijn de namen die EQwise Base gebruikt. * Sitebreedte 1248px en kantlijn 30px komen uit tokens.md. OPEN PUNT: de * ritmemeting tegen de spiegel gaf een bakbreedte van 1298px, wat op 25px * kantlijn wijst. Niet stilzwijgend aangepast — dit hoort door de meter, * niet door mij. Zie aannames.md. */ --eq-kolom: 1248px; --eq-kant: 30px; --eq-randdikte: 1px; /* De inzet: op een smal scherm de kantlijn, op een breed scherm de * ruimte naast de inhoudskolom. Hierdoor lijnt een sectie die van rand * tot rand loopt tóch uit op dezelfde kolom als de menubalk. Dezelfde * formule die EQwise Base in zijn theme.json gebruikt. */ --eq-inzet: max(var(--eq-kant), calc((100% - var(--eq-kolom)) / 2)); --eq-dropdown: 170px; /* ---------- ritme ---------- * --eq-stap is de naam die de base gebruikt voor de afstand tussen twee * onderdelen binnen een sectie. --eq-sectie is de sectiepadding zelf: * 45px, dominant gemeten (14x) met 25px als tweede waarde. */ --eq-stap: 24px; --eq-sectie: 45px; --eq-alinea-onder: 20px; /* 100x gemeten, de meest voorkomende waarde op de bron */ /* Kopmarges. Avada zet ze in em en tegengesteld aan de grootte: hoe kleiner * de kop, hoe groter de marge. Dat is niet MMC's keuze maar het bepaalt wel * hun ritme, dus het staat er zoals het is. */ --eq-kop-marge-h1: 0.67em; --eq-kop-marge-h2: 0.83em; --eq-kop-marge-h3: 1em; --eq-kop-marge-h4: 1.33em; --eq-kop-marge-h5: 1.67em; --eq-kop-marge-h6: 2.33em; /* ---------- knop ---------- * Eén knopmaat voor de hele site; de base bewaakt dát er één is, deze * waarden zeggen welke. Hoogte 45px gemeten. De radius is de pilvorm van de * bron (±30px). De verloopkleur naar #ed6325 die de bron erbij heeft is * BEWUST niet nagebouwd: één vlakke kleur, gemeld in aannames.md. */ --eq-knop-hoogte: 45px; --eq-knop-radius: 30px; --eq-knop-boven: 12px; --eq-knop-zij: 24px; } /* ---- De ruimtematen terugzetten -------------------------------------------- * WordPress genereert uit zijn eigen spacingScale een reeks met dezelfde slugs * 20 tot en met 80, en die wint van de spacingSizes uit onze theme.json. * Gemeten op de live pagina stond --wp--preset--spacing--30 op 0,67rem — dat is * 10,72 px waar wij 24 bedoelen — en verscheen er een 70 die wij nergens * definiëren. * * spacingScale op steps 0 zetten hielp niet, ook niet met het volledige object. * Een custom property mag wél opnieuw gezet worden, en dit stylesheet laadt ná * de inline global styles van WordPress. Daarom staan ze hier. * * De waarden komen uit theme.json en worden daaruit gegenereerd, zodat er één * bron blijft en de twee niet uit elkaar kunnen lopen. */ :root { --wp--preset--spacing--5: 4px; --wp--preset--spacing--10: 8px; --wp--preset--spacing--15: 12px; --wp--preset--spacing--20: 16px; --wp--preset--spacing--30: 24px; --wp--preset--spacing--40: 32px; --wp--preset--spacing--45: var(--eq-sectie, 45px); --wp--preset--spacing--50: 48px; --wp--preset--spacing--60: 64px; --wp--preset--spacing--80: 96px; }