/* Design tokens — Project Leonidas * * DIT IS DE BRON VAN WAARHEID. Elke kleur, fontgrootte en ruimtestap van de * site staat hier en nergens anders. Waarden komen uit DESIGN-SYSTEM.md. * * De Bricks Global Variables verwijzen hiernaar: de Bricks-variabele `ink` * heeft als waarde `var(--pl-ink)`. Vandaar de --pl- prefix hier - zonder die * prefix zou Bricks `--ink: var(--ink)` schrijven en dat is circulair. * * Wijzig je een waarde hier, dan verandert de hele site mee. Wijzig nooit een * waarde in de Bricks-database: die verwijst alleen maar hierheen. */ :root { /* ---------------------------------------------------------------- KLEUR */ /* Gemeten uit de logobestanden, niet geschat. Bewust NIET overgenomen van de oude site: die gebruikt wit (#FFFFFF) en een feller goud (#C9A042). Wit op zwart is hard; goud-500 is op contrast gecontroleerd. */ --pl-ink: #111010; /* achtergrond donkere secties */ --pl-cream: #F4ECD7; /* achtergrond lichte secties, tekst op zwart */ --pl-logo-goud: #664E12; /* ALLEEN het beeldmerk, nergens anders */ /* Aparte gouden schaal voor de interface. Logo-goud op zwart haalt maar 2,41 contrast; de norm voor lopende tekst is 4,5. Zelfde tint (43 graden), wel leesbaar. Contrastwaarden staan erbij: zwart / cream. */ --pl-goud-700: #685012; /* 2,48 / 6,49 - goud op cream: koppen, links */ --pl-goud-600: #8F6F1E; /* 4,04 / 4,00 - randen, scheidingslijnen */ --pl-goud-500: #B59030; /* 6,33 / 2,55 - primair accent op zwart */ --pl-goud-400: #C9A854; /* 8,33 / 1,93 - tekst en links op zwart */ --pl-goud-300: #D2BA7F; /* 10,01 / 1,61 - hover op zwart */ /* ----------------------------------------------------------- TYPOGRAFIE */ /* Overgenomen van projectleonidas.com, gemeten met getComputedStyle op 1440 / 768 / 375px. Beide families zijn SIL OFL en worden zelf gehost. */ --pl-font-kop: "Bebas Neue", Impact, "Haettenschweiler", sans-serif; --pl-font-tekst: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; /* Cursief voor hero-onderkop, intro's en citaten. Dit ontbrak en gaf de oude site een groot deel van zijn karakter. */ --pl-font-accent: "Playfair Display", Georgia, "Times New Roman", serif; /* Bebas Neue heeft maar één gewicht. Een lagere waarde declareren doet niets - de browser rendert altijd 400. */ --pl-kop-gewicht: 400; --pl-tekst-normaal: 400; --pl-tekst-medium: 500; --pl-tekst-vet: 600; /* Schaal gemeten van de HOMEPAGE van projectleonidas.com (DESIGN-SYSTEM.md, 16 sep 2026). De vorige schaal kwam van /privacy en was 2 tot 3,5 keer te klein. In px, niet rem: Bricks zet html op font-size 10px. */ --pl-fs-hero: 144px; --pl-fs-h2: 64px; /* standaardsectie */ --pl-fs-h2-groot: 72px; /* CTA-secties */ --pl-fs-h3: 32px; --pl-fs-intro: 22.4px; /* Playfair cursief */ --pl-fs-tekst: 16px; /* Montserrat 400 */ --pl-fs-klein: 12px; --pl-fs-eyebrow: 11px; /* Montserrat - zie noot in DESIGN-SYSTEM */ --pl-fs-knop: 11.2px; --pl-lh-hero: 0.9; /* 129,6px */ --pl-lh-h2: 1; --pl-lh-h3: 1.2; --pl-lh-intro: 1.8; /* 40,32px */ --pl-lh-tekst: 1.8; --pl-lh-lijst: 1.8; --pl-lh-klein: 1.8; --pl-lh-eyebrow: 1; --pl-lh-knop: 1.5; /* gemeten 16,8px; geeft de knophoogte van 50-54px */ --pl-ls-hero: 0.05em; /* 7,2px */ --pl-ls-h2: 0.05em; /* 3,2-3,6px */ --pl-ls-h3: 0.05em; --pl-ls-intro: 0; --pl-ls-tekst: 0; --pl-ls-klein: 0.1em; --pl-ls-eyebrow: 0.3em; --pl-ls-knop: 0.3em; /* ---------------------------------------------------------------- RUIMTE */ /* Eén schaal op basis van 8px. Geen losse getallen in de site. */ --pl-space-4: 4px; --pl-space-8: 8px; --pl-space-16: 16px; --pl-space-24: 24px; --pl-space-32: 32px; --pl-space-48: 48px; --pl-space-64: 64px; --pl-space-88: 88px; /* het sectieritme van de oude site */ --pl-space-96: 96px; --pl-space-128: 128px; --pl-space-192: 192px; /* Samengestelde ruimtes. De getallen komen uit de meting op de oude site. */ /* Sectiepadding: VASTE waarden per sectietype, gemeten van de homepage. Nooit vh: clamp(96px, 12vh, 192px) klapte op een venster van 900px hoog in tot 108px en gaf elke sectie dezelfde strakke maat. */ --pl-sectie-hero-boven: 160px; --pl-sectie-hero-onder: 96px; --pl-sectie-standaard: 128px; --pl-sectie-cta: 96px; --pl-sectie-getuigen: 112px; --pl-sectie-x: 32px; /* gemeten; de container centreert zelf */ /* Afstanden BINNEN een sectie, gemeten van de homepage. Worden als marge op de elementen gezet (via global classes): een gap op de container stuurt Bricks niet uit, dat gaf 0px tussen kop, tekst en knop. */ --pl-eyebrow-kop: 24px; --pl-kop-tekst: 24px; --pl-kop-tekst-hero: 32px; --pl-tekstblok: 24px; --pl-kop-boven: 48px; /* boven een hoofdstukkop in lopende tekst */ --pl-tekst-knop: 48px; --pl-tekst-knop-groot: 80px; /* ecosysteem */ --pl-knop-knop: 24px; --pl-knop-y: 17.6px; /* gemeten */ --pl-knop-x: 40px; /* Lijnwerk: eyebrow-streep en haarlijn tussen secties. */ --pl-eyebrow-streep: 30px; /* gemeten */ --pl-eyebrow-streep-ruimte: 16px; /* gemeten: streep tot tekst */ --pl-lijn: 1px; --pl-lijn-dik: 2px; /* bovenrand van de actieve pijlertab */ /* Indeling per sectie - gemeten van de homepage. */ --pl-kolom-gap: 96px; /* spiegel, weggever: 502 | 96 | 502 */ --pl-foto-breed: 550px; /* Quincy */ --pl-partner-foto: 300px; /* partnerportret; bron laat niet meer toe */ --pl-partner-gap: 96px; /* tussen twee partners */ --pl-foto-gap: 32px; --pl-kader-gap: 16px; /* spiegelzin-kader tot kader */ --pl-kader-y: 20px; --pl-kader-x: 24px; --pl-kaart-gap: 24px; /* ecosysteem: 5 x 201px */ --pl-kaart-y: 40px; --pl-kaart-x: 32px; --pl-kaart-titel-regel: 12px; --pl-status-y: 4.8px; --pl-status-x: 11.2px; --pl-veld-y: 16px; --pl-veld-x: 19.2px; --pl-veld-gap: 16px; /* Diepte zonder extra kleur (merk-review 20 sep): spookcijfer, korrel, gloed. */ --pl-spook: 320px; /* hoogte van het achtergrondcijfer */ --pl-spook-dekking: 0.05; /* op donker */ --pl-spook-cream: 0.07; /* op cream heeft goud-700 meer nodig */ --pl-korrel: 0.035; /* ruis over de donkere vlakken */ --pl-gloed: 12%; /* goud in de radiale gloed */ --pl-spook-kaart: 160px; /* zelfde cijfer, maar in een kaart */ --pl-fs-uitgelicht: 36px; /* uitgelichte zin, Playfair cursief */ --pl-uitgelicht-y: 128px; /* lucht boven en onder die zin */ --pl-proces-gap: 24px; /* tussen twee processtappen */ --pl-doorgang-gap: 64px; /* tussen de twee kolommen van de doorgang */ --pl-tijdlijn-kolom: 72px; /* cijferkolom van de verticale tijdlijn */ --pl-route-hoogte: 40px; /* balk boven de routelijn */ --pl-poort: 2px; /* de gouden streep van De Doorgang */ --pl-sociaal-icoon: 22px; /* vierkant icoon in de footer */ /* Opening van /de-agoge (11 okt): groter dan de standaardintro, want dit blok moet in zijn eentje het historische beeld dragen. */ --pl-fs-intro-groot: 32px; --pl-lh-intro-groot: 1.6; --pl-breedte-intro: 640px; --pl-fs-opening: 17px; --pl-breedte-opening: 560px; --pl-spookwoord: 300px; /* het Griekse woord achter de kop */ --pl-fs-band: 40px; /* uitgelichte zin in een eigen band */ --pl-sociaal-gap: 20px; /* gelijke afstand tussen de vier */ /* Subpagina's. Paginakop 112px: de oude subpagina's wisselden tussen 88, 112 en 128px; 112px is de maat van de pagina met de homepage-heropadding. */ --pl-fs-pagina: 112px; --pl-stap-nummer: 96px; /* kolom voor het Romeinse cijfer */ --pl-stap-gap: 48px; /* tussen twee stappen */ --pl-fs-stap-nummer: 48px; --pl-fs-prijs: 48px; --pl-feit-label: 200px; /* labelkolom van de feitenlijst */ /* Pijlersectie. */ --pl-fs-pijler: var(--pl-fs-h3); /* 32px op desktop, 24px op mobiel */ --pl-fundering-tekst: 48px; /* funderingsbalk tot de tekst eronder */ /* Hero - gemeten op de oude homepage. */ --pl-logo-hero: 80px; --pl-logo-kop: 48px; /* logo tot kop */ --pl-hero-raster: 80px; /* rastercel */ --pl-hero-ring: 795px; --pl-scheiding: 60px; /* gouden streep onder de h1 */ --pl-hero-portret: 46%; /* breedte van de portretlaag rechts */ --pl-hero-raster-lijn: color-mix(in srgb, var(--pl-goud-500) 8%, transparent); --pl-hero-gloed: color-mix(in srgb, var(--pl-goud-500) 8%, transparent); --pl-hero-ring-lijn: color-mix(in srgb, var(--pl-goud-500) 5%, transparent); /* Testimonials - gemeten: kader 800px, 48px padding. */ --pl-citaat-kader: 800px; --pl-citaat-pad: 48px; /* Header en footer - gemeten op de oude site. */ --pl-header-y: 19.2px; --pl-logo: 32px; --pl-fs-nav: 10.4px; --pl-ls-nav: 0.25em; --pl-nav-gap: 32px; --pl-knop-klein-y: 10.4px; --pl-knop-klein-x: 25.6px; --pl-menu-knop: 44px; /* minimale aanraakmaat */ --pl-menu-streep: 24px; --pl-menu-streep-dik: 2px; --pl-fs-menu: 32px; /* hoofdlinks in het mobiele paneel */ --pl-voet-boven: 64px; --pl-voet-onder: 32px; --pl-voet-kolom-gap: 64px; --pl-tekst-zacht: color-mix(in srgb, currentColor 60%, transparent); /* Componentgroottes - gemeten. */ --pl-fs-kader: 13.6px; --pl-lh-kader: 1.7; --pl-fs-kader-icoon: 9.6px; --pl-fs-kaart-nummer: 64px; --pl-fs-kaart-titel: 19.2px; --pl-lh-kaart-titel: 1.5; --pl-ls-kaart-titel: 0.1em; --pl-fs-kaart-regel: 12px; --pl-fs-status: 8.8px; --pl-fs-veld: 12.8px; --pl-ls-veld: 0.05em; /* Zachte randen en vlakken. De oude site gebruikt goud en wit op lage dekking; hier AFGELEID van bestaande tokens, geen nieuwe kleuren. currentColor maakt het vlak licht op donker en donker op cream. */ --pl-rand-zacht: color-mix(in srgb, var(--pl-goud-500) 12%, transparent); --pl-rand-status: color-mix(in srgb, var(--pl-goud-500) 25%, transparent); --pl-rand-veld: color-mix(in srgb, var(--pl-goud-500) 35%, transparent); --pl-vlak-zacht: color-mix(in srgb, currentColor 3%, transparent); --pl-vlak-veld: color-mix(in srgb, currentColor 5%, transparent); --pl-kaart-nummer-kleur: color-mix(in srgb, var(--pl-goud-500) 14%, transparent); --pl-lijstitem: var(--pl-space-8); /* lijstitem -> lijstitem */ /* Assistent (21 oktober). Hoekig zoals de rest: geen ronding, een gouden haarlijn, en een vlak dat van --pl-ink is afgeleid in plaats van een nieuwe kleur. */ --pl-assistent-breed: 380px; --pl-assistent-gesprek: 420px; /* maximale hoogte van de gesprekskolom */ --pl-assistent-vraag: 120px; /* maximale hoogte van het invoerveld */ --pl-assistent-hoek: 24px; /* afstand tot de hoek van het scherm */ --pl-fs-assistent: 15px; --pl-lh-assistent: 1.6; --pl-assistent-vlak: color-mix(in srgb, var(--pl-ink) 96%, var(--pl-cream)); --pl-assistent-bubbel: color-mix(in srgb, var(--pl-goud-500) 10%, transparent); --pl-assistent-schaduw: color-mix(in srgb, var(--pl-ink) 55%, transparent); --pl-breedte-content: 1100px; /* gemeten: gecentreerd, inhoud begint op 170px bij 1440 */ --pl-breedte-tekst: 640px; /* ~68 tekens, de maximale leesbare regel */ } /* ------------------------------------------------------------------ MOBIEL */ /* Gemeten op de oude homepage bij 390px. Alleen de schaal verandert; kleuren, sectiepadding en de 8px-schaal blijven gelijk. */ @media (max-width: 767px) { :root { --pl-fs-hero: 64px; /* regelafstand 0.9 -> 57,6px, letterafstand 3,2px */ --pl-fs-h2: 40px; /* 40 / 40 / 2px */ --pl-fs-h2-groot: 40px; --pl-fs-intro: 16px; /* 16 / 28,8 */ --pl-knop-x: 24px; /* lange knopteksten passen anders niet in 326px */ --pl-hero-portret: 100%; --pl-citaat-pad: 24px; --pl-fs-pijler: 24px; --pl-spook: 160px; --pl-fs-intro-groot: 22.4px; --pl-fs-opening: 16px; --pl-spookwoord: 120px; --pl-fs-band: 24px; --pl-fs-uitgelicht: 22.4px; --pl-uitgelicht-y: 64px; --pl-fs-pagina: 56px; --pl-fs-stap-nummer: 32px; --pl-fs-prijs: 40px; --pl-assistent-breed: calc(100vw - 2 * var(--pl-space-16)); --pl-assistent-gesprek: 50vh; --pl-assistent-hoek: 16px; } }