/* Theme Name: Beleefkracht Theme URI: https://beleefkracht.nu Author: studio ZOO Author URI: https://zoo.nl Description: Childthema van Astra voor Beleefkracht (Beryl Kleijn). De layout komt uit assets/css/bk.css; dit bestand bevat alleen de huisstijl als tokens. Template: astra Version: 0.4.4 Text Domain: beleefkracht-child */ /* --------------------------------------------------------------------------- Huisstijl als tokens. Alle waarden zijn gemeten uit Peters InDesign-artboards (1920 x 5600 pt, 1 pt = 1 px). Zie bouwplan-beleefkracht.md §2 voor hoe, en waarom je ze niet met de hand moet bijstellen: het testharnas legt de gebouwde pagina er pixelsgewijs naast. ------------------------------------------------------------------------- */ :root { /* --- de schaaleenheid --------------------------------------------------- --bk-u is één ontwerp-pixel. Op de ontwerpbreedte is dat 1 css-pixel; daaronder krimpt hij mee met de contentkolom. Dit verving een verzameling losse clamp()-waarden per element. Die botsten op elkaar: het logo kreeg z'n eigen clamp, de header z'n eigen hoogte, en op 1100px was het logo even hoog als de balk eromheen. Met één eenheid blijft de hele meetkunde in verhouding en kán dat niet meer gebeuren. De formule is (100vw - 72) / 1200 omdat de contentkolom 1200 breed is met 36px marge links en rechts. Op 1272px levert dat exact 1px op — daar sluit hij dus naadloos aan op het vaste ontwerp erboven, zonder sprong. */ --bk-u: 1px; /* --- kleur (geprikt uit de kleurvlakken-laag) --- */ --bk-creme: #F3EEE6; /* header, intro-sectie */ --bk-navy: #404058; /* kaarten, footer, streepband, koppen */ --bk-goud: #AE9A64; /* knoppen, accenten, social-iconen */ --bk-golf: #F5F2EB; /* de golf zelf, op wit */ --bk-wit: #FFFFFF; --bk-tekst: var(--bk-navy); --bk-tekst-omkeer: var(--bk-creme); /* Schaduw onder foto's en kaarten. In het ontwerp is die warm, niet grijs: onder het portret meet crème (243,238,230) af naar (219,209,186), en dat is een goudtint. Met een grijze schaduw ziet het beeld er koud uit. */ /* Uit het ontwerp teruggerekend: 6px onder het portret is de dekking 0,35 (crème 243,238,230 wordt 219,209,186), op 14px nog 0,15. De schaduw is dus krachtig maar kort. Met een brede zachte vervaging (24px, 0.45) werd hij over zoveel pixels uitgesmeerd dat je hem niet meer zag. */ --bk-schaduw: 0 calc(5 * var(--bk-u)) calc(14 * var(--bk-u)) rgb(174 154 100 / .60), 0 calc(12 * var(--bk-u)) calc(34 * var(--bk-u)) rgb(174 154 100 / .30); /* --- typografie --- Figtree vervangt Museo Sans: de geleverde OTF/TTF zijn desktoplicenties. De gewichten volgen het ontwerp een-op-een, op één na: de hero staat in het ontwerp op Museo Sans 100 en Figtree begint bij 300. */ --bk-font: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --bk-font-citaat: 'Zilla Slab', Georgia, 'Times New Roman', serif; /* Grootte en regelafstand — gemeten, niet gekozen. Tekst schaalt NIET mee met --bk-u: op een telefoon zou 84px * 0.27 = 23px worden voor een kop, en 22 * 0.27 = 6px voor broodtekst. Tekst heeft dus een eigen ondergrens; de layout eromheen mag krimpen, de leesbaarheid niet. */ --bk-hero: clamp(38px, calc(84 * var(--bk-u)), 84px); --bk-hero-lh: 1.14; --bk-h2: clamp(28px, calc(48 * var(--bk-u)), 48px); --bk-h2-lh: 1.25; --bk-kaarttitel: clamp(28px, calc(46 * var(--bk-u)), 46px); --bk-citaat: clamp(24px, calc(44 * var(--bk-u)), 44px); --bk-citaat-lh: 1.36; --bk-body: clamp(17px, calc(22 * var(--bk-u)), 22px); --bk-body-lh: 1.64; --bk-menu: clamp(17px, calc(22 * var(--bk-u)), 22px); --bk-hero-gew: 300; --bk-h2-gew: 700; --bk-kaart-gew: 700; --bk-body-gew: 300; --bk-menu-gew: 500; /* Het verticale ritme is een raster van 36px. Let op bij het aflezen uit het ontwerp: tussen twee alinea's zit daar 72px van basislijn tot basislijn, maar dat is de regel zélf (36) plus de marge (36). De MARGE is dus 36, niet 72. */ --bk-ritme: 36px; --bk-alinea: 36px; /* --- raster (gemeten uit de fotolaag) --- */ --bk-content: calc(1200 * var(--bk-u)); /* x 360-1559 op een canvas van 1920 */ --bk-kolom: calc(565 * var(--bk-u)); --bk-goot: calc(70 * var(--bk-u)); /* De footer is bewust bréder dan de contentkolom: inkt loopt van x=360 tot 1626, met kolommen van 481 en 627 en 158 ertussen. Met 565/565 breekt de kop "Je hoeft nog niet precies..." af, en in het ontwerp staat die op één regel. */ --bk-footer-content: calc(1266 * var(--bk-u)); --bk-footer-links: calc(481 * var(--bk-u)); --bk-footer-rechts: calc(627 * var(--bk-u)); --bk-footer-goot: calc(158 * var(--bk-u)); /* --- vaste maten uit het ontwerp --- */ --bk-header-h: calc(209 * var(--bk-u)); --bk-hero-h: calc(871 * var(--bk-u)); --bk-hero-sub-h: calc(499 * var(--bk-u)); --bk-hero-tekst-y: calc(270 * var(--bk-u)); /* ink van de eerste regel op y=491 */ --bk-logo-b: calc(377 * var(--bk-u)); --bk-portret-b: calc(572 * var(--bk-u)); --bk-portret-over: calc(295 * var(--bk-u)); /* hoever het portret de hero in steekt */ --bk-kaarten-h: calc(771 * var(--bk-u)); --bk-golf-h: calc(1081 * var(--bk-u)); --bk-golf-top: calc(540 * var(--bk-u)); --bk-fotoband-h: calc(895 * var(--bk-u)); --bk-streep-h: calc(132 * var(--bk-u)); --bk-footer-h: calc(689 * var(--bk-u)); --bk-radius: calc(16 * var(--bk-u)); --bk-knop-radius: calc(4 * var(--bk-u)); } /* Onder de ontwerpbreedte schaalt de hele meetkunde mee via één eenheid. 1272 en niet 1200: de contentkolom is min(1200px, 100% - 72px) en haalt de volle 1200 pas vanaf 1272. Precies dáár is (100vw - 72) / 1200 gelijk aan 1, dus de overgang is naadloos. */ @media (max-width: 1271px) { :root { --bk-u: calc((100vw - 72px) / 1200); } } /* Op een telefoon stapelt alles en heeft doorschalen geen zin meer: dan wordt een kaartrand 4px en een schaduw onzichtbaar. Onderkant eraan. */ @media (max-width: 767px) { :root { --bk-u: max(0.42px, calc((100vw - 40px) / 1200)); --bk-ritme: 24px; --bk-alinea: 24px; } }