/* assets/evai.css, de opmaak van EV-AI. NIET met de hand bijwerken. Dit bestand wordt gemaakt door _gereedschap/bevries.py uit twee bronnen: assets/huisstijl.css de tokens, met de hand onderhouden mengpaneel.html de onderdelen, in de gekozen stand Wil je een kleur, maat of ronding wijzigen, doe dat in huisstijl.css. Wil je een onderdeel wijzigen, doe dat in het mengpaneel. Draai daarna het script opnieuw. */ /* ============================================================================ assets/huisstijl.css, de huisstijl van EV-AI in code. Dit is de bron. Elk getal hieronder is gemeten aan de draaiende site op 31 augustus 2026, niet uit het hoofd opgeschreven. Wat nieuw is afgesproken staat als zodanig gemerkt met NIEUW. Dit bestand is met de hand gemaakt en wordt NIET door bevries.py overschreven, net als assets/fonts.css. Andersom leest bevries.py dit bestand wel: hij zet het bovenaan assets/evai.css, zodat de site en dit bestand nooit uit elkaar kunnen lopen. Ergens anders gebruiken (een PDF, een A4, de werkplek, een losse pagina)? Dan laad je alleen dit bestand plus assets/fonts.css. Er zitten geen onderdelen in, alleen waarden. De onderdelen staan in evai.css en worden getoond op huisstijl.html. De volgorde: 1 kleur, de vaste waarden 2 kleur, opgelost per register <- hier schrijf je nieuw werk mee 3 de tekens, kleur die iets betekent 4 toestand 5 letter 6 de maatladder 7 ruimte 8 ronding 9 lijn en schaduw 10 beweging 11 maatvoering ========================================================================= */ :root{ /* ── 1. Kleur, de vaste waarden ───────────────────────────────────────── De steunkleuren zijn berekend en niet gekozen. Gedempte tekst zoekt zichzelf op tot precies 4,5 contrast, randen tot precies 3,0. Daarom staan er rare waarden als #757375. Verander je er een, reken hem dan opnieuw door. Gemeten, 31-08-2026: inkt op papier 18,0 inkt op mahonie 17,2 gedempt-licht op papier 4,52 gedempt-donker op mahonie 4,54 rand-licht op papier 3,01 rand-donker op mahonie 3,00 acc-licht op papier 4,53 acc-donker op mahonie 10,3 */ --papier:#fdfaf7; /* de lichte baan. Jeton, een warm bijna-wit */ --papier-2:#ffffff; /* een vlak op de lichte baan: kaart, veld */ --papier-3:#f0eee9; /* de zwaardere lichte baan, en de intro */ --papier-4:#f4f1ea; /* warm vlak, alleen binnen een donkere baan */ --mahonie:#17171c; /* de donkere baan. Inkwell */ --mahonie-2:#2e2e2e; /* een vlak op de donkere baan */ --inkt-licht:#121216; /* tekst op papier */ --inkt-donker:#fdfaf7; /* tekst op mahonie */ --gedempt-licht:#757375; /* bijtekst op papier, precies 4,5 */ --gedempt-donker:#818081; /* bijtekst op mahonie, precies 4,5 */ --lijn-licht:#dcd9d7; /* haarlijn op papier. Mag zwak, betekent niets */ --lijn-donker:#303034; /* haarlijn op mahonie */ --rand-licht:#939192; /* rand van een vlak of veld, precies 3,0 */ --rand-donker:#656366; /* idem op mahonie */ --markeer-licht:#e1dedc; /* de markeerstreep op papier */ --markeer-donker:#575759; /* de markeerstreep op mahonie */ --acc-licht:#966c18; /* het accent op papier. Amber, tot 4,5 */ --acc-donker:#ffb829; /* het accent op mahonie. Amber zoals hij is */ /* --markeer bestond al onder die naam en wijst naar de lichte waarde. Blijft staan zolang evai.css hem gebruikt. Nieuw werk schrijft var(--streep), die kiest zelf. */ --markeer:var(--markeer-licht); /* ── 3. De tekens ─────────────────────────────────────────────────────── Kleur die iets betekent, en verder nergens voor dient. Ze staan op de vierkantjes van 28 bij 28 in de nagebouwde schermpjes, met een wit symbool erop. Elke kleur betekent overal hetzelfde. Bewust gedempt: dit staat naast warm papier, en volle app-kleuren gaan daartegenin. REGELS. Een teken is een vlak met een symbool, nooit een tekstkleur en nooit een vlak achter tekst. Buiten een nagebouwd scherm komen ze niet voor. Het accent blijft de enige kleur die op de pagina zelf iets doet. LET OP, gemeten 31-08-2026: wit symbool op --teken-map haalt 2,52 en dat is onder de 3,0 die een grafisch element nodig heeft. Alle andere zitten tussen 3,90 en 4,45. Op goud hoort dus een inkt-symbool (7,43), of het goud moet donkerder. Zie docs/huisstijl.md. */ --teken-map:#cf9a3f; /* mappen, bestanden, lijstjes (goud) */ --teken-web:#3d8b7d; /* buiten, het internet (teal) */ --teken-beeld:#bd6089; /* beeld (roze) */ --teken-tekst:#5a7fd0; /* schrijven en kijken (blauw) */ --teken-hek:#4d8a68; /* grenzen, en wat hij niet doet (groen) */ --teken-mail:#c4544c; /* post en agenda (rood) */ --teken-tijd:#7c6bc4; /* tijd (paars) */ --teken-glyph:#ffffff; /* het symbool op een teken */ --merk-linkedin:#0a66c2; /* het enige echte merklogo dat we tonen */ /* ── 4. Toestand ──────────────────────────────────────────────────────── Alleen voor terugkoppeling aan de bezoeker. Geen sier, geen sfeer. Alle drie in twee waarden, want de site heeft twee registers en een donkerrood op mahonie haalt 2,48. Dat was er nog niet. Gemeten 31-08-2026, de eerste waarde tegen papier en de tweede tegen mahonie. */ --fout-licht:#a32b1c; /* 6,92. Nooit als enige signaal: er hoort altijd tekst bij, en het veld wordt dikker */ --fout-donker:#e2726a; /* 5,83. NIEUW */ --bezig-licht:#6e56cf; /* 5,18. Bewust geen merkkleur: betekent 'er wordt nu gewerkt' en gaat daarna weer weg */ --bezig-donker:#9b8cf0; /* 6,30. NIEUW */ --goed-licht:#3f7a5c; /* 4,87. NIEUW. Bestond niet, en een gelukt formulier heeft hem nodig */ --goed-donker:#6bab8a; /* 6,65. NIEUW */ /* ── 5. Letter ────────────────────────────────────────────────────────── Vijf families, en elk heeft precies een taak. De letters staan op onze eigen server, in assets/fonts/. Nooit een link naar fonts.googleapis.com erbij zetten: dan gaat het IP-adres van elke bezoeker naar Google voordat de pagina getekend is, en daar kun je geen toestemming voor vragen. Zie assets/fonts.css, dat is handwerk. */ --f-display:'Newsreader',Georgia,serif; /* koppen */ --merk-f:'Newsreader',Georgia,serif; /* woordmerk */ --sans:'DM Sans',system-ui,sans-serif; /* tekst */ --label-f:'IBM Plex Mono',ui-monospace,monospace; /* labels */ --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace; /* code */ --f-intro:'Bodoni Moda',Georgia,serif; /* alleen de intro-animatie, nergens anders */ --ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; /* de systeemletter. Alleen binnen een nagebouwd schermpje. Zet daar nooit Newsreader neer: dan leest het als een ontworpen plaatje en niet als een programma */ /* Gewicht. Newsreader staat altijd op 400: dun oogt duur maar wordt vaal. */ --disp-w:400; /* koppen */ --merk-w:400; /* woordmerk */ --zin-w:400; /* de hero-zin */ --label-w:400; /* monolabels */ --tekst-w:400; /* lopende tekst */ --nadruk-w:500; /* knop, en een woord dat er echt uit moet */ --vet-w:700; /* spaarzaam, en niet in een kop */ /* Spatiëring. Groot zet dicht, klein zet los. */ --disp-ls:-0.02em; /* koppen */ --kop-ls:-0.02em; --merk-ls:-0.01em; /* het woordmerk staat iets losser dan een kop */ --zin-ls:-0.02em; --label-ls:.12em; /* monolabels, in hoofdletters */ --knop-ls:.16em; /* NIEUW als token. Gemeten: 2,24px op 14px */ --voet-ls:.036em; /* NIEUW als token. De voet staat iets losser */ /* Spatiëring per trede, en dit is nieuw op 31-08-2026. Nu krijgt alles wat groot is dezelfde -0,02em en krijgt kleine tekst niets. Bij Waabi, Apollo en Aboard hangt de spatiëring aan de trede: hoe groter, hoe dichter, en kleine tekst gaat juist iets uit elkaar. Dat is precies waarom hun kleine tekst rustig leest en de onze op 11 en 12 pixels een tikje dichtgeslibd oogt. De voet doet dit trouwens al, met die 0,036em die daar ooit met de hand is neergezet. */ --ls-reus:-0.03em; --ls-mega:-0.025em; --ls-kop:-0.02em; --ls-titel:-0.015em; --ls-lead:-0.01em; --ls-tekst:0em; --ls-klein:.01em; --ls-fijn:.015em; /* Regelafstand. */ --lh-kop:1.0; /* elke kop in de maatladder van mega tot sub */ --lh-reus:.98; /* alleen het allergrootste */ --lh-titel:1.2; /* een kaartkop, en het woordmerk */ --lh-lead:1.5; /* de inleidende zin */ --lh-tekst:1.55; /* lopende tekst */ --lh-zacht:1.45; /* een grote zachte zin over meerdere regels */ --kop-lh:var(--lh-kop); /* de oude naam, blijft staan voor evai.css */ /* ── 6. De maatladder ─────────────────────────────────────────────────── Elke kop kiest een trede. Verzin geen eigen getal. Alles wat groot is schaalt mee met het scherm, alles wat je leest staat vast: lopende tekst die meeschaalt wordt op een tussenmaat altijd net te klein of net te groot. Sinds 2 september 2026 staat de hele opmaak op deze ladder: de drieentwintig losse pixelmaten en de veertig losse clamp-maten die er tot dan in evai.css stonden zijn omgezet naar een trede. Wat er nog buiten valt is met naam bekend: het woordmerk (.merk-groot, .voet-merk, .balk-merk), het bannerwoord, de intro, en de knop op 14px. */ --t-reus:clamp(46px,7.8vw,112px); /* het uitroepteken. Een per pagina */ --t-mega:clamp(38px,6.8vw,102px); /* het grootste in een gewone baan */ --t-kop:clamp(36px,5.4vw,74px); /* elke sectiekop */ --t-missie:clamp(30px,3.8vw,68px); /* een kop in een halve kolom */ --t-sub:clamp(26px,2.88vw,42px); /* een kop in een smalle kolom */ --t-titel:clamp(19px,1.55vw,22.5px);/* NIEUW. De kop op een kaart */ --t-lead:clamp(19px,1.75vw,22px); /* de inleidende zin onder een kop */ --t-zin:clamp(30px,4.6vw,62px); /* de ene uitspraak die een baan draagt */ --t-cijfer:clamp(34px,4.6vw,62px); /* een groot getal: bedrag, uitkomst */ --t-groot:18.5px; /* NIEUW. Lopende tekst in een ruime baan */ --t-tekst:17px; /* NIEUW. Lopende tekst, de standaard */ --t-klein:15px; /* NIEUW. Bijschrift, voet, navigatie */ --t-fijn:13.5px; /* NIEUW. Voetnoot, kleine lettertjes */ --t-label:12px; /* NIEUW. Het monolabel */ --t-mini:11px; /* NIEUW. Het kleinste dat mag. Daaronder niets, ook niet in een schermpje */ /* ── 7. Ruimte ────────────────────────────────────────────────────────── NIEUW. Er was geen schaal, en dat is te zien: 8, 10, 12, 13, 14, 16, 26, 34, 38 staan allemaal door elkaar in evai.css. Dit is de schaal waar nieuw werk uit kiest. Acht als grondmaat, en boven de 64 wordt het lucht en gaat het meeschalen. */ --ruimte-1:4px; --ruimte-2:8px; --ruimte-3:12px; --ruimte-4:16px; --ruimte-5:24px; --ruimte-6:32px; --ruimte-7:48px; --ruimte-8:64px; --ruimte-9:96px; --baan-lucht:clamp(88px,12vw,150px); /* boven en onder een baan, in de ruime stand. Overgenomen uit de draaiende site */ --baan-lucht-strak:clamp(48px,6vw,86px); /* een baan die tegen de vorige aan mag staan */ --wrap-lucht:clamp(24px,5vw,64px); /* links en rechts in de kolom */ --kaart-lucht:clamp(26px,3.4vw,54px); /* binnen een kaart. Gemeten: 54 */ /* ── 8. Ronding ───────────────────────────────────────────────────────── Vier maten en verder niets. De 2, 8, 10 en 14 die nu los in evai.css staan horen bij een van deze vier. --r-vel is de uitzondering die mag blijven: een nagebouwd schermpje heeft de ronding van een echt venster en niet die van onze vlakken. */ --r-mini:3px; /* een streepje, een stip */ --r-klein:12px; /* een klein vlak, een veld, een teken */ --r-vlak:22px; /* de ronding. Kaart, paneel, foto */ --r-vel:14px; /* alleen een nagebouwd venster */ --r-pil:999px; /* elke knop, en het toestandslabel */ --r-rond:50%; /* alleen iets dat echt rond is */ /* Ronding per rol, nieuw op 31-08-2026. De vier hierboven zijn maten, deze zeggen waar ze horen. Bij Symbolic en Apollo staat de ronding per soort onderdeel vastgelegd en niet als één getal voor alles, en dat is de reden dat daar nooit een 10 of een 14 tussendoor glipt zoals bij ons. Schrijf --r-kaart en niet --r-vlak, dan hoef je nooit meer te kiezen. */ --r-kaart:var(--r-vlak); /* kaart, paneel, foto, baan met eigen vlak */ --r-knop:var(--r-pil); /* elke knop, ook de omlijnde */ --r-veld:var(--r-klein); /* invoerveld, keuzevak */ --r-teken:8px; /* het gekleurde vierkantje. Bewust kleiner dan --r-klein: op 28 bij 28 leest 12px als een pil in plaats van een tegel */ --r-streep:var(--r-mini); /* een streepje, een stip, een balkje */ /* ── 9. Lijn en schaduw ───────────────────────────────────────────────── Een lijn is geen rand. Een sierlijn mag zwak zijn, want die betekent niets. Zodra er iets klikbaars aan hangt haalt hij 3,0, en dan pak je --rand en niet --lijn. Over schaduw. In het oude document stond 'geen schaduwen'. Dat klopte al niet meer: er staan er drie in de site, en ze doen precies het goede werk. Ze zijn nu een schaal in plaats van drie losse getallen. DE REGEL. Schaduw hoort bij een wit vlak dat op een donkere of warme grond ligt, en nergens anders. Op papier is de haarlijn het gereedschap. In het donkere register geen schaduw: daar komt diepte uit vlak op vlak. */ --lijn-dikte:1px; --rand-dikte:1px; --rand-fout:2px; /* een veld met een fout wordt ook dikker, want kleur alleen is geen signaal */ /* De kleur van de schaduw, en dit is een voorstel van 31-08-2026. De drie schaduwen in de site worden nu gemengd uit --rand-licht #939192, en dat is een neutraal grijs. Symbolic.ai, waar dit ontwerp zijn toestandslabel aan ontleent, heeft bijna hetzelfde papier als wij (#fdfcf5 tegen onze #fdfaf7) maar mengt zijn schaduw uit een warme steen #d5d0b8. Dat is het verschil tussen een vlak dat op papier ligt en een vlak met een grijze rand eronder. --schaduw-steen is die warme variant, doorgerekend op ons eigen papier. De regels in evai.css gebruiken nog het grijs; op huisstijl.html staan ze naast elkaar. Bevalt het warme, dan gaan de drie regels om. */ --schaduw-steen:#c9beb4; --schaduw-grijs:var(--rand-licht); /* wat de site nu doet */ --schaduw-1:0 1px 2px color-mix(in srgb, var(--schaduw-steen) 30%, transparent); /* een chip, een toestandslabel */ --schaduw-2:0 2px 6px color-mix(in srgb, var(--schaduw-steen) 45%, transparent); /* een kaart die op een grond ligt */ --schaduw-3:0 -3px 12px color-mix(in srgb, var(--schaduw-steen) 34%, transparent), 0 1px 2px color-mix(in srgb, var(--schaduw-steen) 30%, transparent); /* een vel dat van boven komt aanschuiven */ --schaduw-zwevend:0 8px 20px rgba(20,18,16,.15), 0 1px 3px rgba(20,18,16,.12); /* alleen wat echt boven de pagina hangt: het uitgeklapte menu */ /* ── 10. Beweging ─────────────────────────────────────────────────────── Drie snelheden en twee krommen. Alles zet zichzelf uit bij prefers-reduced-motion, dat is geen keuze per onderdeel. */ --duur-tik:.18s; /* hover, focus. Zo kort dat je het voelt zonder het te zien */ --duur-schakel:.35s; /* iets dat van stand wisselt */ --duur-opkomst:.8s; /* een stuk dat in beeld komt */ --stap-vertraging:.14s; /* per stuk erbij, binnen een sectie */ --soepel:cubic-bezier(.18,.9,.24,1); /* eruit. Snel weg, zacht aan */ --zacht:cubic-bezier(.32,0,.14,1); /* heen en terug */ /* ── 11. Maatvoering ──────────────────────────────────────────────────── Breekpunten kunnen geen variabele zijn, die staan hier als afspraak: 620 telefoon, 860 tablet, 1180 de volle kolom. In evai.css staan er nu zeven verschillende (600, 620, 700, 760, 820, 860, 900). Nieuw werk gebruikt deze drie. */ /* Beeld. Sfeer komt uit fotografie en niet uit kleur, en dat is ook het enige dat een concurrent niet kan kopiëren. Er is een foto die de opmaak bij naam nodig heeft, de rest staat in de pagina zelf. Het pad staat vanaf de wortel, dus dit werkt alleen binnen deze site. */ --hero-beeld:url('/assets/eva-samen-laptop.webp'); /* Hoe een foto behandeld wordt, nieuw op 31-08-2026. Dit stond nergens, terwijl fotografie het enige is dat een concurrent niet kan kopiëren. Aboard doet het omgekeerde van ons en heeft daar tokens voor: een foto is óf helemaal vullend met een waas eroverheen zodat tekst erop kan, óf ingekaderd met een haarlijn eromheen. Wij doen alleen het eerste, en de waas staat op vier plekken met de hand ingesteld. */ --beeld-waas:linear-gradient(to bottom, rgba(23,23,28,.15) 0%, rgba(23,23,28,.55) 55%, rgba(23,23,28,.82) 100%); /* over een foto waar tekst op staat. Onderin zwaarder, want daar staat de tekst */ --beeld-waas-licht:linear-gradient(to bottom, rgba(23,23,28,0) 0%, rgba(23,23,28,.35) 100%); /* over een foto met alleen een klein bijschrift */ --beeld-rand:1px solid color-mix(in srgb, var(--rand-licht) 45%, transparent); /* om een ingekaderde foto. Een foto zonder rand op papier zweeft */ --korrel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23k)'/%3E%3C/svg%3E"); /* de korrel over een foto. Heel licht, en alleen om een verloop niet te laten banden */ --wrap:1180px; /* de kolom. Gemeten */ --wrap-smal:820px; /* een baan die smaller mag staan */ --tekstkolom:70ch; /* een pagina die vooral tekst is */ --balk-hoogte:80px; /* NIEUW 01-09-2026. De vaste menubalk. Gemeten aan de draaiende site, en hij blijft 80 in rust en na scrollen: de balk wordt wel krapper van binnen maar niet lager. Nodig zodra iets anders zich onder de balk moet vastzetten, zoals het filter op de blog */ --raak:44px; /* het kleinste tikdoel dat mag. Norm */ } /* ============================================================================ 2. Kleur, opgelost per register. Dit is het belangrijkste stuk van dit bestand, en het is nieuw. Tot nu toe schreef elke regel in evai.css var(--inkt-licht), en stond er een tweede regel onder .donker met var(--inkt-donker). Dat is de reden dat dat bestand 150 kB groot is, en het is ook de reden dat er in een week acht keer iets omsloeg naar de verkeerde kleur: twee regels met hetzelfde gewicht, en de onderste won. Vanaf nu schrijf je kleur een keer: color:var(--inkt); background:var(--grond); border-color:var(--rand); Zet .donker op een baan en alles eronder klapt mee om. Zet .licht op iets binnen die donkere baan en dat stuk klapt terug. Je hoeft niets te herhalen. De bestaande regels in evai.css zijn niet omgezet, die blijven werken zoals ze werken. Dit geldt voor alles wat er vanaf nu bij komt. De vlakkenladder. Bij Waabi, Apollo, Aboard en Symbolic staat die opgeschreven als vier genummerde niveaus met een doel per niveau, en dat is precies wat wij niet hadden. Vandaar: 0 --grond de baan waar je op staat 1 --grond-2 dezelfde baan, een tint zwaarder. Voor een blok binnen een blok, zonder dat je van register wisselt 2 --vlak een kaart of paneel dat op de grond ligt 3 --vlak-2 een vlak binnen dat vlak. Het diepste dat mag Meer niveaus zijn er niet. Heb je een vijfde nodig, dan is de indeling fout en niet de ladder. ========================================================================= */ :root, .licht, [data-register="licht"]{ --grond:var(--papier); --grond-2:var(--papier-3); --vlak:var(--papier-2); --vlak-2:var(--papier-3); --inkt:var(--inkt-licht); --gedempt:var(--gedempt-licht); --lijn:var(--lijn-licht); --rand:var(--rand-licht); --streep:var(--markeer-licht); --accent:var(--acc-licht); --op-accent:var(--inkt-licht); /* tekst op een accentvlak. Inkt op amber haalt 3,96, wit haalt 4,71: allebei alleen groot of vet gebruiken */ --fout:var(--fout-licht); --bezig:var(--bezig-licht); --goed:var(--goed-licht); } .donker, [data-register="donker"]{ --grond:var(--mahonie); --grond-2:var(--mahonie-2); --vlak:var(--mahonie-2); --inkt:var(--inkt-donker); --gedempt:var(--gedempt-donker); --lijn:var(--lijn-donker); --rand:var(--rand-donker); --streep:var(--markeer-donker); --accent:var(--acc-donker); --op-accent:var(--inkt-licht); /* amber is licht, dus daar gaat inkt op */ --fout:var(--fout-donker); --bezig:var(--bezig-donker); --goed:var(--goed-donker); } /* Een wit vlak binnen een donkere baan is een lichte omgeving. Zonder deze regel staat er gedempte lichte tekst op wit, en dat is precies de fout die op 24 augustus twee keer is gemaakt. */ .donker .op-papier{ --grond:var(--papier-2); --vlak:var(--papier-2); --inkt:var(--inkt-licht); --gedempt:var(--gedempt-licht); --lijn:var(--lijn-licht); --rand:var(--rand-licht); --streep:var(--markeer-licht); --accent:var(--acc-licht); --fout:var(--fout-licht); --bezig:var(--bezig-licht); --goed:var(--goed-licht); } /* De focusring. Een afspraak en geen keuze: twee pixel, drie pixel lucht, in de kleur van de inkt zodat hij in beide registers te zien is. */ :where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{ outline:2px solid var(--inkt, var(--inkt-licht)); outline-offset:3px; border-radius:var(--r-mini); } /* =========================================================== MENGPANEEL EV-AI Geen vaste paletten meer. Per onderdeel een eigen keuze, en de steunkleuren worden berekend in plaats van gekozen: gedempte tekst zoekt zichzelf op tot precies 4,5 rand zoekt zichzelf op tot precies 3,0 lijn mag zwak zijn, die betekent niets accent krijgt per baan een eigen familielid, want één accent dat op licht en donker 4,5 haalt bestaat niet. Dat is rekenwerk, geen smaak. =========================================================== */ /* de tokens staan bovenaan dit bestand, uit assets/huisstijl.css */ *{box-sizing:border-box} body{margin:0;background:var(--papier);font-family:var(--sans);font-size:var(--t-tekst);line-height:1.55;-webkit-font-smoothing:antialiased} .baan{padding:clamp(64px,9vw,132px) 0} .licht{background:var(--papier);color:var(--inkt-licht)} /* Een strakke baan. De gewone baan heeft veel lucht binnenin, en dat werkt bij een blok met een kop, tekst en een knop. Bij een blok van twee zinnen wordt dat een leeg veld waar de tekst in verdwijnt. Deze houdt de lucht juist buiten zichzelf: minder ruimte erin, een strook papier erboven en eronder. Daardoor leest hij als een streep in de pagina in plaats van als een hoofdstuk. */ /* De selector heeft [data-ruimte] nodig, anders wint de ruime baan verderop in dit bestand. Gelijk gewicht betekent: wie het laatst staat wint, en dat is hij. */ [data-ruimte] .baan.strak{padding:clamp(48px,6vw,86px) 0;margin:clamp(28px,3.4vw,56px) 0} .donker{background:var(--mahonie);color:var(--inkt-donker)} .wrap{max-width:1180px;margin:0 auto;padding:0 clamp(24px,5vw,64px)} .merk-groot{font-family:var(--merk-f);font-weight:var(--merk-w); font-size:clamp(58px,14vw,190px);line-height:.86;letter-spacing:var(--merk-ls); margin:0 0 clamp(18px,2.6vw,34px)} .zin{font-family:var(--f-display);font-weight:var(--zin-w); font-size:var(--t-zin);line-height:1.04;letter-spacing:var(--zin-ls); margin:0;max-width:22ch;text-wrap:balance} /* De maatladder. Vijf stappen voor koppen en inleidingen, en elke kop kiest een stap in plaats van een eigen getal te verzinnen. Dat is precies wat er misging bij de missie: die stond op 44 terwijl elke andere sectiekop op 74 staat, en dan voelt zo'n blok als een losse pagina. --t-sub is de trede voor een kop die naast iets anders staat en dus niet de volle breedte heeft. --t-missie is een eigen trede, en dat heeft een reden. De missiezin stond op --t-sub, samen met de vragen in de rekenhulp. Die vragen staan in een smal kolommetje, de missiezin in een kolom van bijna de halve pagina, en dan is dezelfde maat voor de een goed en voor de ander te klein. Op een scherm van 2133 breed liep de missiezin tegen het plafond van 42 pixels aan, terwijl er ruim duizend pixels kolom onder stond. De 3,8vw is gemeten en niet gekozen: de kolom is ongeveer 48 procent van het scherm, en bij 3,8vw vult de langste regel over de hele reeks schermbreedtes steeds zo'n 87 tot 90 procent van die kolom. Genoeg lucht dus, en hij breekt nergens in tweeën. Ga je naar 4vw, dan zit je bij 1280 op 95 procent en is één afrondingsverschil genoeg om de regel te laten omvallen. */ :root{--t-mega:clamp(38px,6.8vw,102px);--t-kop:clamp(36px,5.4vw,74px); --t-sub:clamp(26px,2.88vw,42px);--t-missie:clamp(30px,3.8vw,68px); --t-lead:clamp(19px,1.75vw,22px)} /* De tussentekst stond op 31px en dat was de uitschieter van de hele ladder. Gemeten op 26 augustus 2026 bij vier voorbeelden, venster 1280 breed: Cohere grootste alinea 16, Anthropic 24, Stripe 16, Aesop 16. Deze site zat op 31, bijna dubbel de lopende tekst, zonder trede ertussen. Nu 22. Besloten door Eva op 26 augustus, en het geldt voor de hele site. */ .kop{font-family:var(--f-display);font-weight:var(--disp-w);font-size:var(--t-kop); line-height:var(--kop-lh);letter-spacing:var(--kop-ls);margin:0 0 26px;text-wrap:balance} .label{font-family:var(--label-f);font-size:var(--t-label);font-weight:var(--label-w);letter-spacing:var(--label-ls); text-transform:uppercase;margin:0 0 26px} .licht .label{color:var(--acc-licht)} .donker .label, .hero .label{color:var(--acc-donker)} p{margin:0 0 18px;max-width:60ch} .licht .zacht{color:var(--gedempt-licht)} .donker .zacht, .hero .zacht{color:var(--gedempt-donker)} .knop{display:inline-block;font-family:var(--sans);font-size:14px;font-weight:500; letter-spacing:.1em;text-transform:uppercase;padding:15px 30px;border:1px solid; background:transparent;cursor:pointer;text-decoration:none;transition:background .18s ease} [data-ronding="cohere"] .knop{border-radius:999px;letter-spacing:.16em} /* De ronding is een token, net als de kleuren: hier staat wat een keuze betekent, en elk vlak vraagt het op in plaats van zijn eigen getal te kiezen. Zo gaat alles in een keer mee als je van stijl wisselt. --r-vlak is voor grote vlakken, --r-klein voor menuutjes, --r-mini voor staafjes en balkjes. */ :root{--r-vlak:0px;--r-klein:0px;--r-mini:0px} [data-ronding="cohere"]{--r-vlak:22px;--r-klein:12px;--r-mini:3px} .hero-beeld, .vlak, .vak, .missie-foto, .stroom, .prijs-kaart, .reviews-loop .rev{border-radius:var(--r-vlak)} .sub{border-radius:var(--r-klein)} .uren span{border-radius:var(--r-mini)} /* Cohere zet ook een haarlijn om de vakken, dat hoort bij de stijl en niet bij de ronding, dus die regel blijft apart staan */ [data-ronding="cohere"] .diagram{background:transparent;border-top:none;gap:clamp(16px,2vw,24px)} [data-ronding="cohere"] .vak{border:1px solid var(--lijn-licht)} [data-ronding="cohere"] .donker .vak{border-color:var(--lijn-donker)} [data-ronding="cohere"] .prijs li{border-bottom-color:var(--lijn-licht)} [data-ronding="cohere"] .donker .prijs li{border-bottom-color:var(--lijn-donker)} .licht .knop{color:var(--acc-licht);border-color:var(--acc-licht)} .licht .knop:hover{background:color-mix(in srgb, var(--acc-licht) 9%, transparent)} .donker .knop, .hero .knop{color:var(--acc-donker);border-color:var(--acc-donker)} .donker .knop:hover, .hero .knop:hover{background:color-mix(in srgb, var(--acc-donker) 15%, transparent)} .hero{position:relative;min-height:96vh;display:flex;align-items:center;overflow:hidden; background-color:var(--mahonie);background-image:var(--hero-beeld); background-position:center;background-size:cover;background-repeat:no-repeat} .hero::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(20,18,16,.55) 0%,rgba(20,18,16,.30) 42%,rgba(20,18,16,.82) 100%)} /* het beeld in een eigen baan onder de woorden, zoals Open het doet */ .hero-beeld::after{content:"";position:absolute;inset:0} .hero-beeld{position:relative;display:none;height:clamp(320px,58vh,640px);background-color:var(--mahonie-2); background-image:var(--hero-beeld);background-position:center;background-size:cover;background-repeat:no-repeat} /* het beeld tussen het woordmerk en de titel: binnen de kolom, niet paginabreed */ .hero .wrap{position:relative;z-index:2;width:100%; padding:clamp(90px,11vw,150px) clamp(24px,5vw,64px) clamp(40px,6vw,80px); color:var(--inkt-donker);text-align:center} .hero .merk-groot{margin-left:auto;margin-right:auto} .hero .zin{max-width:20ch;margin-left:auto;margin-right:auto} .hero .meta{margin-left:auto;margin-right:auto;max-width:70ch} .hero-onder{display:flex;flex-direction:column;gap:26px;align-items:center;margin-top:34px; border-top:1px solid rgba(223,218,213,.28);padding-top:30px} .hero-onder p{max-width:46ch;color:var(--gedempt-donker);margin:0} [data-register="wit"] .hero-onder{border-top:none;padding-top:6px} [data-register="wit"] .baan{padding:clamp(96px,13vw,168px) 0} [data-register="wit"] .vlak{border:none;background:var(--papier-2)} /* De knop: Amrit en Jeton vullen hem nooit, Aesop en Cohere juist wel. De hover wordt lichter, nooit donkerder. Dat voelt als optillen. */ [data-knop="gevuld"] .licht .knop{background:var(--inkt-licht);color:var(--papier);border-color:var(--inkt-licht)} [data-knop="gevuld"] .licht .knop:hover{background:var(--gedempt-licht);border-color:var(--gedempt-licht)} /* Een knop die bewust omlijnd blijft, ook als de stand op gevuld staat. Voor een doorverwijzing naast de hoofdactie: dezelfde vorm, minder gewicht, zodat de gevulde knop de enige echte actie blijft. */ [data-knop="gevuld"] .donker .knop.omlijnd{background:transparent; color:var(--inkt-donker);border-color:var(--inkt-donker)} [data-knop="gevuld"] .donker .knop.omlijnd:hover{ background:color-mix(in srgb, var(--inkt-donker) 12%, transparent)} [data-knop="gevuld"] .licht .knop.omlijnd{background:transparent; color:var(--inkt-licht);border-color:var(--inkt-licht)} [data-knop="gevuld"] .licht .knop.omlijnd:hover{ background:color-mix(in srgb, var(--inkt-licht) 9%, transparent)} [data-knop="gevuld"] .donker .knop, [data-knop="gevuld"] .hero .knop{ background:var(--inkt-donker);color:var(--mahonie);border-color:var(--inkt-donker)} [data-knop="gevuld"] .donker .knop:hover, [data-knop="gevuld"] .hero .knop:hover{ background:#ffffff;border-color:#ffffff} .acties{display:flex;gap:22px;align-items:center;flex-wrap:wrap;justify-content:center} [data-uitlijning="links"] .acties{justify-content:flex-start} .knop-tweede{display:none;color:inherit;text-decoration:underline;text-underline-offset:4px; font-family:var(--sans);font-size:var(--t-klein)} [data-knop="gevuld"] .knop-tweede{display:inline-block} [data-register="wit"] .kop{margin-bottom:32px} [data-register="wit"] .diagram{background:transparent;gap:clamp(24px,4vw,48px);border-top:none} [data-register="wit"] .vak{padding:0} [data-register="wit"] .prijs li{border-bottom:none;padding:6px 0} [data-uitlijning="links"] .hero .wrap{text-align:left} [data-uitlijning="links"] .hero .merk-groot, [data-uitlijning="links"] .hero .zin, [data-uitlijning="links"] .hero .meta{margin-left:0;margin-right:0} [data-uitlijning="links"] .hero-onder{align-items:flex-start} /* De hero op de lichte baan. Cohere, Aesop, Jeton en Outsource doen dat, Amrit en Dala juist niet. Bij een beeld áchter de letters kan het niet. */ /* ============ de navigatiebalk ============ Vijf patronen uit de referenties. De balk ligt over de hero en erft zijn kleur, zodat hij meeverandert met de rest van het systeem. */ .balk{position:fixed;top:0;left:0;right:0;z-index:20; --balk-inkt:var(--inkt-donker);--balk-grond:var(--mahonie);color:var(--balk-inkt); background:transparent;border-bottom:1px solid transparent; transition:background-color .35s ease,border-color .35s ease,color .35s ease} .balk-in{display:flex;align-items:center;gap:clamp(24px,3.4vw,52px); width:100%;max-width:1180px;margin:0 auto;padding:22px clamp(24px,5vw,64px); transition:padding .35s ease} /* zodra je de hero uit scrollt wordt de balk licht, met een haarlijn eronder */ [data-gescrold="1"] .balk{--balk-inkt:var(--inkt-licht);--balk-grond:var(--papier); background:var(--papier);border-bottom-color:var(--lijn-licht)} [data-gescrold="1"] .balk-in{padding-top:13px;padding-bottom:13px} /* alles op een lijn: de uitklapbare items zijn een ander blok dan de gewone links, dus zonder deze regels gaan ze op hun eigen basislijn staan */ .balk a{text-decoration:none;color:inherit;font-family:var(--sans);font-size:var(--t-klein); white-space:nowrap;display:inline-flex;align-items:center;line-height:1.2} .balk-merk{white-space:nowrap;display:inline-flex;align-items:center;line-height:1.2} .mi{display:inline-flex;align-items:center} /* Het woordmerk in de balk hoort dezelfde letter te hebben als het grote EV-AI in de hero. Dat is waar --merk-f voor is. Het stond op --label-f, de monoletter van de kleine labels, met wijde spatiëring erbij, en dan leest het als E V - A I in plaats van als een merknaam. */ /* .balk a en niet .balk-merk, en dat is niet voor de sier. .balk a is sterker dan een losse klasse, dus een regel op .balk-merk alleen verliest van de letter die daar voor alle links wordt gezet. Dat is ook waarom dit merk hiervoor nooit in de bedoelde monoletter stond: alleen de spatiëring en de hoofdletters kwamen erdoor, want die zet .balk a niet. De regel voor de knop in de balk hiernaast doet het om dezelfde reden zo. */ .balk a.balk-merk{font-family:var(--merk-f);font-weight:var(--merk-w); font-size:21px;letter-spacing:var(--merk-ls);text-transform:none} .balk-links, .balk-acties, .balk-menu{display:none} .balk-links{align-items:center;gap:clamp(22px,2.6vw,40px)} .balk-acties{gap:18px;align-items:center} .balk a.balk-cta{padding:9px 18px;border:1px solid var(--balk-inkt); background:var(--balk-inkt);color:var(--balk-grond)} [data-ronding="cohere"] .balk a.balk-cta{border-radius:999px} /* ============ de intro ============ Alleen het woordmerk en de belofte, in Newsreader op Jeton-papier. Het streepje is het enige gekleurde teken: één accent, meer niet. De letters komen achter een masker omhoog, dat is beweging die iets onthult in plaats van beweging die aandacht vraagt. */ #intro{position:fixed;inset:0;z-index:100;display:flex; align-items:center;justify-content:center;padding:4vw 3vw; background:#ffffff; transition:opacity .75s cubic-bezier(.4,0,.2,1),transform .75s cubic-bezier(.4,0,.2,1)} #intro[hidden]{display:none} #intro.weg{opacity:0;transform:translateY(-2%);pointer-events:none} #intro[data-grond="creme"]{background:#f0eee9} #intro[data-letter="bodoni"] .im, #intro[data-letter="bodoni"] .onder{ font-family:var(--f-intro)} /* het woordmerk vult de breedte. De maat wordt gemeten, niet geraden, want elke letter heeft een eigen breedte en dan klopt een vaste vw nooit. */ #intro .middenblok{position:relative;will-change:transform} #intro .im{margin:0;display:flex;white-space:nowrap;font-weight:400;color:#17171c; line-height:1;letter-spacing:-0.015em;font-size:22vw} #intro .m{display:inline-block;overflow:hidden;padding:.2em 0 .1em;margin:-.2em 0 -.1em} #intro .m i{display:block;font-style:normal;transform:translateY(112%); animation:intro-op 1s cubic-bezier(.18,.9,.24,1) forwards} #intro .m:nth-child(1) i{animation-delay:.06s} #intro .m:nth-child(2) i{animation-delay:.15s} #intro .m:nth-child(3) i{animation-delay:.24s} #intro .m:nth-child(4) i{animation-delay:.33s} #intro .m:nth-child(5) i{animation-delay:.42s} /* het hele blok ademt heel licht mee omhoog, dat maakt het opkomen zichtbaar, en blijft daarna heel zacht doorademen tot hij naar de hero krimpt. Zonder dat staat het merk na het opkomen een halve seconde roerloos stil voor het verkleint, en dat oogt als vastlopen in plaats van als een overgang. */ #intro .middenblok{animation:intro-adem 1.4s cubic-bezier(.18,.9,.24,1) forwards, intro-zweeft 3s ease-in-out 1.4s infinite} @keyframes intro-adem{from{transform:scale(.978) translateY(10px)}to{transform:none}} @keyframes intro-zweeft{0%,100%{transform:scale(1)}50%{transform:scale(1.01)}} #intro .onder{position:absolute;top:100%;left:50%;translate:-50% 0; width:min(36ch,88vw);margin:clamp(22px,3.2vw,48px) 0 0;text-align:center; font-weight:400;color:#616161;font-size:clamp(19px,2.4vw,34px);line-height:1.4; letter-spacing:-0.01em;opacity:0;transform:translateY(14px); animation:intro-zacht .85s cubic-bezier(.18,.9,.24,1) .5s forwards} @keyframes intro-op{to{transform:translateY(0)}} @keyframes intro-zacht{to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){ #intro .m i, #intro .onder, #intro .middenblok{animation:none;transform:none;opacity:1} #intro{transition:none} } /* de uitklap onder Tweede brein en Aanbod. Geen pijltje, want geen iconen. */ .mi{position:relative} .balk .sub a{line-height:1.5} .sub{position:absolute;top:100%;left:-16px;z-index:4;display:flex;flex-direction:column; min-width:200px;padding:10px 0;margin-top:10px; background:var(--papier);border:1px solid var(--lijn-licht); opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .18s ease,transform .18s ease,visibility 0s .18s} .sub::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px} .mi:hover .sub, .mi:focus-within .sub{opacity:1;visibility:visible;transform:none;transition-delay:0s} .balk .sub a{display:block;padding:9px 18px;color:var(--inkt-licht);font-size:var(--t-klein)} .balk .sub a:hover{background:var(--papier-2)} /* Menu is een knop en geen woord: een span kun je niet aanklikken, niet focussen en niet voorlezen. */ .balk-menu{background:none;border:0;padding:0 4px;margin:0;font:inherit;color:inherit; cursor:pointer;min-height:44px;align-items:center} .balk-in{position:relative} /* de uitklappers openen ook op klik, want een vinger heeft geen hover */ .mi.open > .sub{opacity:1;visibility:visible;transform:none;transition-delay:0s} /* Een zichtbare focusring. Zonder ziet iemand die met het toetsenbord navigeert niet waar hij staat, en dat is ook een toegankelijkheidseis. :focus-visible, dus hij verschijnt bij het toetsenbord en niet bij een klik. */ :focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:3px} /* de balk ligt over de hero, dus de inhoud moet eronder beginnen */ .hero{padding-top:0} /* Smal scherm: de links maken plaats voor Menu, zoals elke echte site doet. Let op de extra .balk in de kiezers. Zonder die winnen de patroonregels hieronder, want die zijn even specifiek en staan later in het bestand, en dan krijg je de links en Menu tegelijk. */ @media(max-width:860px){ .balk{gap:16px} [data-nav="cohere"] .balk .balk-links, [data-nav="cohere"] .balk .balk-acties a:not(.balk-cta){display:none} [data-nav="cohere"] .balk .balk-acties{margin-left:auto} [data-nav="cohere"] .balk .balk-menu{display:flex} /* het paneel zelf: het valt onder de balk uit over de volle breedte */ [data-menu="open"] .balk{background:var(--papier);border-bottom-color:var(--lijn-licht); --balk-inkt:var(--inkt-licht);--balk-grond:var(--papier)} [data-menu="open"] .balk .balk-links{display:flex;flex-direction:column;align-items:stretch; gap:0;position:absolute;left:0;right:0;top:100%; background:var(--papier);border-bottom:1px solid var(--lijn-licht); padding:4px clamp(24px,5vw,64px) 20px;max-height:calc(100dvh - 100%);overflow-y:auto} /* elke regel is een tikdoel van 44 pixel, niet een regel tekst van zeventien */ [data-menu="open"] .balk .balk-links > a, [data-menu="open"] .balk .mi > a{display:flex;align-items:center;min-height:46px; width:100%;font-size:var(--t-tekst)} [data-menu="open"] .balk .mi{display:block;width:100%} /* op een telefoon staan de onderliggende items gewoon uitgeklapt: een menu van vijf regels heeft geen tweede laag nodig */ [data-menu="open"] .balk .sub{position:static;opacity:1;visibility:visible;transform:none; background:transparent;border:0;min-width:0;margin:0;padding:0 0 6px 18px;transition:none} [data-menu="open"] .balk .sub a{min-height:42px;display:flex;align-items:center; padding:0;font-size:var(--t-klein);opacity:.75} [data-menu="open"] .balk .sub::before{display:none} } /* Amrit en 11x: woordmerk links, de links rechts */ /* Cohere: woordmerk links, links in het midden, stille knop plus pil rechts */ [data-nav="cohere"] .balk-links{display:flex;margin:0 auto} [data-nav="cohere"] .balk-acties{display:flex} /* Open: alleen een woordmerk en het woord Menu, allebei in de labelletter */ /* Outsource: alles links, mono labels, een haarlijn eronder over de volle breedte */ /* ============ het tweede brein ============ Chaos naar brein, gestuurd door de scroll. De lat, en waarom: 1. een punt en niets anders, want vormpjes lezen als clipart 2. bijna alles ligt vlak boven de achtergrond, alleen de voorste laag telt 3. geen gloed, platte punten 4. geen kleur, alleen de inkt van de donkere baan 5. de vorm komt uit dichtheid, de rand lost op 6. het komt tot rust en ademt daarna alleen nog 7. de deeltjes komen niet tegelijk aan Plus: stil zodra de sectie uit beeld is, minder deeltjes op een klein scherm, en stilstaand bij prefers-reduced-motion. */ .brein{min-height:430vh;position:relative;padding:0} .brein-plak{position:sticky;top:0;height:100vh;overflow:hidden; display:flex;align-items:flex-end;justify-content:center; padding-bottom:clamp(52px,8vh,104px)} #breindoek{position:absolute;inset:0;width:100%;height:100%;display:block} /* De aanhef, alleen in het begin. Een zin die door de animatie heen loopt en pas na het brein afmaakt: daardoor wacht je op het einde. */ .brein-aanhef{position:absolute;inset:0;z-index:3;display:flex;align-items:center; justify-content:center;pointer-events:none;padding:0 6vw; opacity:0;transition:opacity .55s ease} .brein.toon-aanhef .brein-aanhef{opacity:1;transition:opacity .2s ease} .brein-aanhef span{font-family:var(--f-display);font-weight:var(--disp-w); font-size:var(--t-kop);line-height:1.12;letter-spacing:var(--kop-ls); color:var(--inkt-donker);text-align:center;max-width:20ch} /* woord voor woord van links naar rechts open, met een klein verschil ertussen zodat het leest als iemand die het uitspreekt en niet als een gordijn */ .brein-aanhef i{font-style:normal;display:inline-block; clip-path:inset(0 102% -12% -3%); transition:clip-path .8s cubic-bezier(.32,0,.14,1)} .brein.toon-aanhef .brein-aanhef i{clip-path:inset(0 -3% -12% -3%)} .brein-aanhef i:nth-child(2){transition-delay:.15s} .brein-aanhef i:nth-child(3){transition-delay:.3s} .brein-tekst{position:relative;z-index:2;text-align:center; opacity:0;transform:translateY(24px); transition:opacity .95s cubic-bezier(.18,.9,.24,1),transform .95s cubic-bezier(.18,.9,.24,1)} .brein.gevormd .brein-tekst{opacity:1;transform:none} /* De slotfase: het brein zakt weg en Stel je voor neemt zijn plek in, nog steeds binnen dezelfde plakkende sectie. Zo loopt het in elkaar over in plaats van dat je uit een vastgezette beleving een los blok in scrolt. */ .brein.overgang .brein-tekst{opacity:0;transform:translateY(-26px)} .brein-slot{position:absolute;left:0;right:0;top:50%;translate:0 -50%;z-index:2; text-align:center;padding:0 clamp(24px,5vw,64px); opacity:0;transform:translateY(26px);pointer-events:none; transition:opacity .9s cubic-bezier(.18,.9,.24,1),transform .9s cubic-bezier(.18,.9,.24,1)} .brein.overgang .brein-slot{opacity:1;transform:none;pointer-events:auto} .brein-slot p.lead{margin:clamp(24px,3.2vh,40px) auto 0;text-align:center; max-width:42ch;font-size:var(--t-lead);line-height:1.45} .slotwoorden i{font-style:normal;display:inline-block; clip-path:inset(0 102% -14% -3%); transition:clip-path .85s cubic-bezier(.32,0,.14,1)} .slotwoorden i:nth-child(2){transition-delay:.16s} .slotwoorden i:nth-child(3){transition-delay:.32s} .brein.overgang .slotwoorden i{clip-path:inset(0 -3% -14% -3%)} /* Tweede brein is hier niet het kopje boven de tekst, het is het antwoord op alles wat ervoor stond. Dus staat het er als het grootste woord. */ .brein-tekst .groot{margin:0 auto;font-family:var(--f-display);font-weight:var(--disp-w); font-size:var(--t-reus);line-height:.98;letter-spacing:var(--kop-ls); max-width:18ch;text-wrap:balance} .brein-tekst p.zacht{margin:clamp(22px,3vh,38px) auto 0;max-width:44ch; font-size:var(--t-lead);line-height:1.48} @media(prefers-reduced-motion:reduce){ .brein{min-height:0} /* display:block erbij: .brein-plak is een flex-rij (voor het uitlijnen van de tekst onderin de plakkende sectie), en zonder animatie stonden Jouw tweede brein en Stel je voor daardoor naast elkaar in twee smalle kolommen, op elke telefoon met Verminder beweging aan (6 september). */ .brein-plak{position:static;height:auto;display:block;padding:clamp(90px,13vh,150px) 0} .brein-tekst, .brein-slot{margin-left:auto;margin-right:auto} /* Met .brein ervoor, en .overgang en .gevormd erbij: het script zet die klassen ook in de stille stand op de sectie zodra je erlangs scrolt, en .brein.overgang .brein-tekst{opacity:0} won dan van de kale regel hier. Gevolg: Jouw tweede brein verdween zodra je scrolde, op elke telefoon met Verminder beweging aan (6 september 2026). Nu winnen deze regels. */ .brein .brein-tekst, .brein.gevormd .brein-tekst, .brein.overgang .brein-tekst{ opacity:1;transform:none;transition:none} .brein-aanhef, .brein.toon-aanhef .brein-aanhef{display:none} .brein .brein-slot, .brein.overgang .brein-slot{position:static;translate:none;opacity:1; transform:none;transition:none;pointer-events:auto;margin-top:clamp(60px,9vh,110px)} .slotwoorden i{clip-path:none;transition:none} .brein-aanhef i{clip-path:none;transition:none} } /* de markering: geen kleur erbij verzinnen, maar een bleke tint uit het eigen palet. Het vlak groeit van links naar rechts, als een stift. */ .mark{background-color:transparent; /* browsers geven mark standaard geel */ background-image:linear-gradient(var(--markeer),var(--markeer)); background-repeat:no-repeat;background-position:0 0.08em;background-size:0% 92%; padding:0 .06em;margin:0 -.06em;color:inherit; transition:background-size .75s cubic-bezier(.4,0,.2,1) .45s} .opkomend.zichtbaar .mark{background-size:100% 92%} @media(prefers-reduced-motion:reduce){.mark{background-size:100% 92%;transition:none}} /* het drieluik: drie kolommen met haarlijnen ertussen, in leesrichting. Links uitgelijnd, ook als de rest gecentreerd staat: een gecentreerde alinea van vijf regels in een smalle kolom leest rommelig. */ /* ============ kop die over de rand van de foto loopt ============ De foto is een vlak in de linkerhelft met papier eromheen. De kop begint een stuk binnen de foto, loopt door over de volle pagina, en kruist dus de rechterrand van het beeld. Op de foto is hij licht, op het papier donker. Hoe de twee kleuren precies op elkaar aansluiten: de zin staat er twee keer, elk in een laag die de HELE sectie beslaat. Beide koppen staan op exact dezelfde plek binnen die laag, dus ze breken op dezelfde plek af. Daarna wordt de ene laag bijgesneden tot de fotohelft en de andere vanaf de fotohelft. Omdat de lagen even groot zijn als de sectie, klopt --foto-rand als percentage in alle drie de plekken waar hij gebruikt wordt. Eerder stond de bijsnijding op de kop zelf, en toen liep de naad niet gelijk met de foto zodra de kop niet meer de volle breedte had. De padding moet met [data-ruimte] ervoor, anders wint de ruime baan verderop in dit bestand en zit er 300 pixels onzichtbare ruimte in dit blok. */ [data-ruimte] .baan.overlap{padding:0} .overlap{position:relative;overflow:hidden; --foto-rand:42%; /* dezelfde 42, maar als lengte, want calc kan een percentage van de sectie niet met een lengte optellen. De sectie is de volle breedte. */ --foto-rand-vw:42vw; --foto-marge:clamp(28px,4.4vw,88px); --foto-boven:clamp(56px,7vw,140px); --foto-onder:clamp(56px,7vw,140px); --kop-links:clamp(44px,10vw,180px); --kop-rechts:clamp(28px,5vw,72px); --rechts-vanaf:58%; min-height:clamp(540px,66vw,960px)} .overlap-beeld{position:absolute; top:var(--foto-boven);bottom:var(--foto-onder); left:var(--foto-marge);right:calc(100% - var(--foto-rand)); /* De bovenrand van het kader ligt op een vast punt in de foto, en niet op een percentage van de speling. Een percentage (het stond op 78%) rekent met "kader min foto", en dat verschilt per schermbreedte: op 1280 kwam de rand net boven haar hoofd uit, op een breder scherm zakte hij tot haar kin. Gemeten op 3 september op Eva's laptop: hoofd eraf. Nu: de foto vult de breedte (100% auto, dus altijd op breedte geschaald), is 2:3, dus zijn geschaalde hoogte is 1,5 keer de kaderbreedte. Schuif hem omhoog met --foto-kop keer die hoogte, en de bovenrand ligt op elk scherm op --foto-kop van de foto. Op .2 staat hij net boven haar hoofd; dat zit op ongeveer .27. De pagina mag --foto-kop inline bijstellen. */ --foto-breedte:calc(var(--foto-rand-vw) - var(--foto-marge)); background:var(--mahonie) no-repeat; background-size:100% auto; background-position:50% calc(var(--foto-breedte) * 1.5 * var(--foto-kop,.2) * -1)} .overlap-beeld::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(18,16,14,.06),rgba(18,16,14,.30))} /* De twee lagen. Ze beslaan allebei de hele sectie en raken niets aan. */ .overlap-laag{position:absolute;inset:0;pointer-events:none;z-index:2} .laag-foto{clip-path:inset(0 calc(100% - var(--foto-rand)) 0 0)} .laag-papier{clip-path:inset(0 0 0 var(--foto-rand))} .overlap-kop{position:absolute;margin:0; left:var(--kop-links);right:var(--kop-rechts); bottom:calc(var(--foto-onder) + clamp(12px,2.2vh,34px)); font-family:var(--f-display);font-weight:var(--disp-w); font-size:var(--t-mega);line-height:1.02; letter-spacing:var(--kop-ls);max-width:none} .laag-foto .overlap-kop{color:var(--inkt-donker)} .laag-papier .overlap-kop{color:var(--inkt-licht)} /* Rechtsboven: het label, de naam en de knop. */ /* De kolom hangt niet meer aan de rand van de foto maar aan de rechterkant van de pagina. Een eigen maat, zodat hij niet meeschuift als de foto van breedte verandert. */ .overlap-rechts{position:absolute;z-index:3; top:var(--foto-boven);left:var(--rechts-vanaf);right:var(--kop-rechts); padding-left:0} /* Missie staat hier als kop en niet als labeltje: groot, donker, in de displayletter. Daaronder de naam en de knop, netjes eronder uitgelijnd. */ .overlap-rechts .titel{margin:0 0 clamp(26px,3.4vh,46px); font-family:var(--f-display);font-weight:var(--disp-w); font-size:var(--t-missie);line-height:1.05; letter-spacing:var(--kop-ls);color:var(--inkt-licht)} .overlap-rechts p{margin:0 0 clamp(18px,2.4vh,30px);max-width:34ch} .overlap-rechts p:last-child{margin-bottom:0} /* Op een smal scherm staat alles onder elkaar: foto, dan Missie met de naam en de knop, dan de kop. Niets zweeft meer, dus niets kan over de foto vallen. Eerder bleef de foto absoluut staan met height:46%, en werd er met padding-top:46% ruimte voor gemaakt. Dat lijkt hetzelfde getal, maar padding-top rekent in procenten van de BREEDTE en height in procenten van de HOOGTE. Op een telefoon is het blok hoger dan breed, dus de foto was groter dan de ruimte ervoor, en Missie, de naam en de knop vielen er in donkere inkt overheen. Gemeten op 375 breed: foto tot 396, tekst vanaf 197. De padding staat met [data-ruimte] .baan ervoor, anders wint de regel die de padding op nul zet. */ @media(max-width:760px){ .overlap, [data-ruimte] .baan.overlap{--foto-rand:100%;--kop-links:var(--foto-marge); display:block;min-height:0; padding:var(--foto-boven) 0 clamp(48px,8vh,90px)} /* relative en niet static: de schaduwlaag (::after) heeft inset:0 en hecht zich aan de dichtstbijzijnde gepositioneerde ouder. Bij static is dat de sectie, en dan ligt er een grijze waas over het hele blok. */ /* Dezelfde uitsnede als op de laptop. Daar is het kader 7 breed bij 8 hoog (482 bij 550 op 1280) en toont de foto van 19% tot 95% van boven: de bovenrand net boven haar hoofd, de plant en de deur erboven eraf. Eva op 3 september: "gewoon dat bovenste eraf, tot net boven mijn hoofd". Geef het kader hier dezelfde verhouding en laat --foto-positie (78%) gewoon gelden, dan komt exact hetzelfde beeld eruit, want cover vult de breedte en de rest is rekenwerk dat op beide maten gelijk is. Geen eigen background-position hier: die zou de laptop-uitsnede juist loslaten. */ .overlap-beeld{position:relative;top:auto;bottom:auto;left:auto;right:auto; height:auto;aspect-ratio:7/8;margin:0 var(--foto-marge); /* hier loopt het kader over de volle breedte, min de marge links en rechts */ --foto-breedte:calc(100vw - 2 * var(--foto-marge))} .laag-foto{display:none} .laag-papier{clip-path:none;position:static} .overlap-rechts{position:static; padding:clamp(24px,4vh,40px) var(--kop-rechts) 0 var(--foto-marge)} .overlap-kop{position:static; margin:clamp(22px,3vh,34px) var(--kop-rechts) 0 var(--foto-marge)} } /* Een gecentreerd blok dat toch de volle kolom mag gebruiken. De klasse gecentreerd knijpt de kolom af op 940, en dat is goed voor lopende tekst maar veel te smal voor drie kaarten naast elkaar: die werden 263 breed terwijl ze bij Symbolic 570 zijn. Vandaar deze uitzondering, en de kop en de tussentekst houden hun eigen smalle maat zodat die niet ineens over de volle breedte lopen. */ /* Breder dan de rest van de site. Bij Symbolic zijn deze kaarten 570 breed en hier waren ze 337, en dat verschil zit niet in het ontwerp maar in de kolom: deze site loopt tot 1180 en hun sectie tot ongeveer 1800. Alleen dit blok mag daarom uit de band springen, want het is het enige met drie kaarten naast elkaar. */ .gecentreerd.breed > .wrap{max-width:1400px} .gecentreerd.breed > .wrap > .kop-sub{max-width:46ch} .gecentreerd.breed > .wrap > .lead{max-width:52ch} /* Een sectiekop op de kleinere trede. Bij Symbolic staat elke sectiekop op 36 en alleen de allereerste kop van de pagina op 58. Op deze site staat elke sectiekop op 74, en dat is te zwaar boven een blok met kleine kaarten. */ /* ============ de automatiseringen wisselen ============ Drie roosters staan in de pagina, er is er een zichtbaar. Geen inhoud in JavaScript: zo staat de tekst gewoon in het bestand, is hij vindbaar, en kan Eva hem aanpassen zonder een regel code aan te raken. */ /* Het korte label boven de knoppen: hoeveel het er zijn en wat je ermee doet. Dit is een label bij een bedieningselement, zoals boven een invulveld, en geen kopje boven een kop. Daarom staat hij vlak op de knoppen en niet los in de ruimte, en daarom gewoon in kleine letters zonder spatiëring. */ .auto-label{margin:clamp(24px,3.2vh,38px) 0 10px;font-family:var(--label-f); font-size:var(--t-label);text-align:center;color:var(--gedempt-licht)} .donker .auto-label{color:var(--gedempt-donker)} /* De knoppen zitten dicht op het kaartenblok eronder. Eerder zat er 60 tot 100 pixels tussen, plus een regel tekst, en dan lees je de knoppen als een los rijtje in plaats van als de tabbladen van dat blok. De actieve knop is bijna wit, het kaartenblok ook: staan ze dicht op elkaar, dan hoort de ene zichtbaar bij de andere. */ .auto-keuze{display:flex;flex-wrap:wrap;justify-content:center; gap:8px;margin:0 0 clamp(14px,1.8vh,22px)} /* min-height op de tikmaat. Gemeten kwamen deze knoppen uit op 36 hoog, en de norm is 44. Het is de enige plek op de site waar een echt tikdoel eronder zat: de andere te kleine treffer is een link midden in een zin, en daar maakt de norm uitdrukkelijk een uitzondering voor. */ .auto-knop{font-family:var(--label-f);font-size:var(--t-label);letter-spacing:.02em; padding:9px 16px;min-height:var(--raak);display:inline-flex;align-items:center; border-radius:999px;cursor:pointer; border:1px solid var(--lijn-licht);background:transparent;color:var(--gedempt-licht); transition:background .2s ease,color .2s ease,border-color .2s ease} .auto-knop:hover{border-color:var(--rand-licht);color:var(--inkt-licht)} /* Het nummer voor het label. Zonder dat oogden de drie knoppen als losse tags in plaats van als een setje om uit te kiezen: er stond nergens dat het er drie zijn. De kleur komt gewoon mee uit de knop zelf (currentColor), dus hij hoeft niet apart per stand of thema geregeld te worden. */ .auto-nr{opacity:.55;margin-right:.6em} .auto-knop[aria-selected="true"] .auto-nr{opacity:.65} .auto-knop[aria-selected="true"]{background:var(--mahonie);border-color:var(--mahonie); color:var(--papier)} /* Op de donkere baan stonden de niet-actieve knoppen bijna onzichtbaar: een haarlijn die nauwelijks afsteekt tegen mahonie, en geen vlak erachter. Ze lazen als losse, doodse tekst in plaats van als knoppen. Nu krijgen ze het vlak dat de huisstijl al heeft voor "iets op de donkere baan" (--mahonie-2), zodat ze net zo goed als vorm herkenbaar zijn als de actieve. En de hover-stand gebruikte de licht-thema kleuren (bijna zwarte tekst), wat op deze donkere baan de tekst juist deed verdwijnen zodra je eroverheen ging: het tegenovergestelde van duidelijker. */ .donker .auto-knop{border-color:var(--lijn-donker);color:var(--gedempt-donker); background:var(--mahonie-2)} .donker .auto-knop:hover{border-color:var(--rand-donker);color:var(--inkt-donker)} .donker .auto-knop[aria-selected="true"]{background:var(--papier); border-color:var(--papier);color:var(--inkt-licht)} /* Bij het wisselen loopt de opkomst opnieuw. De vertragingen staan al op de elementen, dus terugzetten op nul en weer loslaten is genoeg. */ /* display:grid wint van het hidden-attribuut, dus dat moet je hier zeggen. */ .werkstappen[hidden]{display:none} .werkstappen.opnieuw .op{opacity:0;transform:translateY(20px);transition:none} /* Een regel wacht op zijn beurt. Bij Symbolic zie je eerst alleen de ene post, dan komt de tweede erbij, dan de derde. Dat is wat het levend maakt: je ziet hem bouwen in plaats van dat het er in een klap staat. */ [data-beurt]{opacity:0;transform:translateY(16px) scale(.985); transition:opacity .5s ease, transform .5s ease} [data-beurt].erin{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ [data-beurt]{opacity:1;transform:none;transition:none}} @media(prefers-reduced-motion:reduce){.werkstappen.opnieuw .op{opacity:1;transform:none}} .kop-sub{font-family:var(--f-display);font-weight:var(--disp-w); font-size:var(--t-sub);line-height:1.15;letter-spacing:var(--kop-ls); margin:0 0 clamp(16px,2vh,26px);max-width:34ch} [data-uitlijning="midden"] .gecentreerd .kop-sub{margin-left:auto;margin-right:auto} .gecentreerd > .wrap > .kop-sub{margin-left:auto;margin-right:auto;text-align:center} /* ============ de drie werkstappen ============ Naar het voorbeeld van Symbolic.ai, opgevraagd via Refero op 26 augustus 2026. Wat daar werkt en hier is overgenomen: - witte kaarten op het crème canvas, met een zachte schaduw in de randkleur in plaats van grijs. Dat leest als papier op een bureau, niet als een vak. - kleine maten. Hun kaartkop is 19 en hun tekst 14. Op deze site staat de lopende tekst op 17 tot 18,5, en dat is precies waarom dezelfde hoeveelheid woorden hier als een muur leest en daar als een overzicht. - in het vel staat een nagebouwd stukje scherm met echte inhoud, niet met blindtekst. Dat is waarom je het gelooft zonder te lezen. Wat NIET is overgenomen: hun accentrood en violet, en hun regel dat alles licht moet blijven. Deze site wisselt licht en donker af, en dat blijft. */ /* De bovenmarge is klein, want de knoppen erboven horen erbij: samen zijn ze één blok, tabbladen met hun inhoud. De grote afstand tot de kop zit al in het label en de knoppen zelf. */ .werkstappen{display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,28px);margin-top:0;text-align:left} .werkstap{background:var(--papier-2);border-radius:var(--r-vlak); padding:clamp(16px,1.5vw,22px); box-shadow:0 2px 6px color-mix(in srgb, var(--rand-licht) 40%, transparent)} /* Het nagebouwde schermpje bovenin de kaart. Vaste hoogte, want drie kaarten naast elkaar met verschillende hoogtes leest als een fout. Wat er niet in past wordt afgesneden, net als bij Symbolic: hun voorbeeldtekst loopt midden in een zin door de onderrand, en dat zegt dat er meer is. LES VAN 26 AUGUSTUS 2026: de eerste versie had zeven kleine elementen per schermpje. Symbolic heeft er twee, maar dan groot. Minder dingen en grotere letters leest sneller dan meer dingen en kleinere letters, ook als het aantal woorden gelijk blijft. */ .werkstap-beeld{--vlak:color-mix(in srgb, var(--rand-licht) 12%, var(--papier)); --ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; position:relative;background:var(--vlak); border-radius:calc(var(--r-vlak) - 8px); padding:clamp(16px,1.5vw,22px); padding-bottom:clamp(56px,5vw,64px); height:clamp(260px,25vw,392px); display:flex;flex-direction:column;gap:clamp(9px,1vw,14px);overflow:hidden} /* Onderaan vervaagt het vlak. Zo lijkt het afknippen bedoeld in plaats van per ongeluk, en het maakt ruimte waar de pil overheen kan liggen. */ .werkstap-beeld::after{content:'';position:absolute;left:0;right:0;bottom:0; height:clamp(58px,5.5vw,72px);pointer-events:none; background:linear-gradient(to top, var(--vlak) 42%, transparent)} /* ---------- de stapel kaartjes ---------- Bij Symbolic staan die dingen niet los onder elkaar maar liggen ze op elkaar, als een stapel papier waarvan je de randen ziet. Dat is wat het samenhangend maakt: het is een stapel, geen lijstje. Een nieuw vel komt van achter het vorige tevoorschijn en gaat er bovenop liggen. De stapelvolgorde regelt zichzelf: elementen met position:relative worden getekend in de volgorde waarin ze in het bestand staan, dus het laatste vel ligt vanzelf bovenop. Geen z-index nodig. */ .stapel{display:flex;flex-direction:column} .vel{position:relative;background:var(--papier-2);border-radius:14px; padding:8px;border:1px solid color-mix(in srgb, var(--rand-licht) 26%, transparent); box-shadow:0 -3px 12px color-mix(in srgb, var(--rand-licht) 30%, transparent), 0 1px 2px color-mix(in srgb, var(--rand-licht) 26%, transparent)} /* De overlap. Hierdoor zie je de bovenrand van het vel eronder net niet meer, en dat is precies het effect: ze gaan in elkaar over. */ .vel + .vel{margin-top:-7px} /* Binnenin een grijze pil met het icoon en de naam, net als in het voorbeeld. */ .vel-kop{display:flex;align-items:center;gap:10px; background:color-mix(in srgb, var(--rand-licht) 14%, var(--papier)); border-radius:10px;padding:8px 11px} .vel-wat{min-width:0} .vel-kop .naam{display:block;font-family:var(--ui);font-weight:600;font-size:var(--t-klein); line-height:1.3;letter-spacing:-.005em} /* Een waarde onder de naam. Zo zien de eerste twee stappen eruit: rustige pilletjes waar alles meteen staat. Alleen de laatste stap klapt open, en daar zit dan ook geen waarde in, anders staat hetzelfde er twee keer. */ .vel-kop .waarde{display:block;margin:2px 0 0;font-family:var(--ui); font-size:var(--t-fijn);line-height:1.4;color:var(--gedempt-licht)} .vel-kop .wanneer{margin-left:auto;font-family:var(--label-f);font-size:var(--t-mini); color:var(--gedempt-licht);white-space:nowrap} /* De tekst eronder klapt open bij het vel dat vooraan ligt. Met een grid-rij van 0fr naar 1fr, want dat loopt soepel; met max-height moet je een hoogte gokken en dan schokt het aan het eind. */ .vel-tekst{display:grid;grid-template-rows:0fr;opacity:0; transition:grid-template-rows .45s ease, opacity .3s ease} .vel-tekst > div{overflow:hidden} .vel-tekst p{margin:0;padding:9px 5px 3px;font-family:var(--ui); font-size:var(--t-klein);line-height:1.5;color:var(--gedempt-licht);max-width:none} .vel.voor .vel-tekst{grid-template-rows:1fr;opacity:1} /* Een regel met een icoon, een naam en een waarde. Dit is de vorm die bij Symbolic het beste leest: icoon in een rondje, vette naam, waarde eronder. LET OP DE LETTER. Binnen een nagebouwd schermpje staat NOOIT de schreefletter van deze site. Echte programma's draaien op de systeemletter, en zodra je daar Newsreader neerzet leest het als een ontworpen plaatje in plaats van als een echt scherm. Vandaar --ui hieronder. De tijdstempels blijven mono, want zo ziet metadata er in een programma ook uit. */ .teken{flex:0 0 auto;width:28px;height:28px;border-radius:8px; display:grid;place-items:center; background:color-mix(in srgb, var(--rand-licht) 20%, var(--papier))} .teken svg{width:14px;height:14px;fill:currentColor} /* Merken krijgen hun eigen kleur, want een grijs LinkedIn-logo bestaat niet. */ .teken.linkedin{background:#0a66c2} .teken.linkedin svg{fill:#fff;width:16px;height:16px} /* De tegels krijgen kleur, want grijs op grijs leest als een tekening en niet als een programma. Elk soort ding heeft zijn eigen kleur, en die betekent overal hetzelfde: geel is iets van jezelf, groen is buiten, rood is post, blauw is schrijven, en het groen van het hek is een grens. Bewust iets gedempt. Dit staat naast Eva's warme papier, en volle app-kleuren gaan daar tegenin. Nieuwsbrief en e-mail krijgen geen merklogo: een Mailchimp- of Gmail-teken leest als 'dit is gekoppeld', en die koppeling is er niet. Alleen LinkedIn is een echt merk, want daar staat de post ook echt voor klaar. */ .teken.k-map{background:#cf9a3f} /* mappen, bestanden, lijstjes */ .teken.k-web{background:#3d8b7d} /* buiten, het internet */ .teken.k-beeld{background:#bd6089} /* beeld */ .teken.k-tekst{background:#5a7fd0} /* schrijven en kijken */ .teken.k-hek{background:#4d8a68} /* grenzen en wat hij niet doet */ .teken.k-mail{background:#c4544c} /* post en agenda */ .teken.k-tijd{background:#7c6bc4} /* tijd */ .teken.k-map svg, .teken.k-web svg, .teken.k-beeld svg, .teken.k-tekst svg, .teken.k-hek svg, .teken.k-mail svg, .teken.k-tijd svg{fill:#fff} /* De regel die je typt, en de opzet die eruit komt. Ook hier de systeemletter: dit is wat er in een venster staat, niet wat er op de pagina staat. */ .werkstap-vraag{margin:0;font-family:var(--ui);font-weight:600; font-size:var(--t-klein);line-height:1.4} /* De staande opdracht bovenaan stap 1. Dit is wat de assistent te doen heeft, in gewone woorden, en het is het eerste wat je leest. Zonder dit staat er wel een schermpje maar weet je niet waar je naar kijkt. */ .opdracht{margin:0 0 2px;padding:0 0 clamp(9px,1vw,13px);text-align:left; border-bottom:1px solid color-mix(in srgb, var(--rand-licht) 26%, transparent)} .opdracht .wie{display:block;font-family:var(--label-f);font-size:var(--t-mini); letter-spacing:.14em;text-transform:uppercase;color:var(--gedempt-licht); text-align:left;margin:0 0 5px} .opdracht .tekst{display:block;font-family:var(--ui);font-weight:600; font-size:var(--t-klein);line-height:1.4;color:var(--inkt-licht)} .werkstap-uit{margin:0;font-family:var(--ui);font-size:var(--t-fijn);line-height:1.55; color:var(--gedempt-licht)} /* Het toestandslabel met een stip ervoor. Bij Symbolic is dit de hele animatie: Summarizing... Fact checking... Rewriting... Meer beweging is er niet. */ .bezig{position:absolute;left:clamp(16px,1.5vw,22px); bottom:clamp(15px,1.4vw,20px);z-index:2; display:inline-flex;align-items:center;gap:7px; background:var(--papier-2);border-radius:999px; padding:7px 13px;font-family:var(--ui);font-size:var(--t-label); color:var(--gedempt-licht); border:1px solid color-mix(in srgb, var(--rand-licht) 30%, transparent); box-shadow:0 1px 3px color-mix(in srgb, var(--rand-licht) 30%, transparent)} /* Twee toestanden, en je ziet er altijd maar een van. Bezig: een draaiend rondje in het paars van het voorbeeld. Klaar: een rustige stip in het gedempte grijs van de site. Dat paars is bewust geen merkkleur van EV-AI. Het betekent hier maar een ding, namelijk 'er wordt nu gewerkt', en zodra dat voorbij is verdwijnt het weer. */ .bezig:not(.af){color:#6e56cf} .bezig .tol{width:13px;height:13px;flex:0 0 auto;animation:tollen .9s linear infinite} .bezig .tol circle{fill:none;stroke:currentColor;stroke-width:2.4;opacity:.22} .bezig .tol path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round} .bezig.af .tol{display:none} .bezig:not(.af) i{display:none} @keyframes tollen{to{transform:rotate(360deg)}} .bezig i{width:7px;height:7px;border-radius:50%;background:currentColor; opacity:.4;flex:0 0 auto} .bezig .woord{transition:opacity .25s ease} .bezig.wisselt .woord{opacity:0} @media(prefers-reduced-motion:reduce){.bezig .tol{animation:none}} /* ---------- de kaarten op een donkere baan ---------- Een kaart blijft een wit eiland, ook als de baan eromheen donker is. Dat is precies de bedoeling: zo leest hij als een venster op een bureaublad in plaats van als een vlak dat meekleurt met de pagina. Daarom staan hier vaste kleuren en niet de tokens die met de baan meedraaien. Let op de tekst: die erft de lichte kleur van de baan en moet dus expliciet terug naar donker, anders is de helft onleesbaar. */ .donker .werkstap{background:#fff} .donker .werkstap h3{color:var(--inkt-licht)} .donker .werkstap p.wat{color:var(--gedempt-licht)} .donker .werkstap-nr{color:var(--gedempt-licht)} .donker .werkstap-beeld{background:color-mix(in srgb, var(--rand-licht) 12%, var(--papier))} .donker .opdracht .tekst{color:var(--inkt-licht)} .donker .opdracht .wie{color:var(--gedempt-licht)} .donker .werkstap-vraag{color:var(--inkt-licht)} .donker .werkstap-uit{color:var(--gedempt-licht)} .donker .vel{background:#fff;color:var(--inkt-licht); border-color:color-mix(in srgb, var(--rand-licht) 26%, transparent)} .donker .vel-kop{background:color-mix(in srgb, var(--rand-licht) 14%, var(--papier))} .donker .vel-kop .naam{color:var(--inkt-licht)} .donker .vel-kop .waarde{color:var(--gedempt-licht)} .donker .vel-kop .wanneer{color:var(--gedempt-licht)} .donker .vel-tekst p{color:var(--gedempt-licht)} .donker .vel .teken{background:color-mix(in srgb, var(--rand-licht) 20%, var(--papier))} /* De kleurtegels moeten hier herhaald worden. .donker .vel .teken telt drie klassen en wint dus van .teken.k-map, dat er maar twee heeft. Zonder deze regels wordt alles weer grijs zodra de baan donker is. */ .donker .vel .teken.linkedin{background:#0a66c2} .donker .vel .teken.k-map{background:#cf9a3f} .donker .vel .teken.k-web{background:#3d8b7d} .donker .vel .teken.k-beeld{background:#bd6089} .donker .vel .teken.k-tekst{background:#5a7fd0} .donker .vel .teken.k-hek{background:#4d8a68} .donker .vel .teken.k-mail{background:#c4544c} .donker .vel .teken.k-tijd{background:#7c6bc4} .donker .bezig{background:#fff;color:var(--gedempt-licht); border-color:color-mix(in srgb, var(--rand-licht) 30%, transparent); box-shadow:0 1px 2px color-mix(in srgb, var(--rand-licht) 26%, transparent)} .donker .bezig:not(.af){color:#6e56cf} /* ---------- onder de kaarten ---------- De afsluitende zin en de knop. Hier moet een echte pauze onder de kaarten, want dat is een groot blok en de zin is een nieuwe gedachte. Waarom het hier misging: er staan drie roosters onder elkaar en twee daarvan hebben hidden. Een verborgen element neemt geen ruimte in, ook zijn ondermarge niet, dus de zin plakte tegen de onderrand van de kaarten aan. De ruimte moet dus van de zin zelf komen, niet van het rooster erboven. */ /* De regel voor wie in een team werkt, onder een blok met kaarten. Zelfde behandeling als .na-werkstappen: gedempt, gecentreerd, met lucht erboven, zodat hij als een terzijde leest en niet als een volgende sectie. */ /* Geen eigen text-align: die volgt de uitlijning-as van de pagina, en op Werkwijze staat die op links. Stond hij op center, dan zweefde deze regel als enige in het midden onder een blok dat links uitlijnt. */ .team-regel{margin:clamp(26px,3.4vh,40px) 0 0;max-width:64ch; font-size:var(--t-klein);line-height:1.6;opacity:.78} .team-regel + .team-regel{margin-top:clamp(10px,1.4vh,16px)} /* De drie kleine lettertjes onder het keuzeblok: opzeggen, iets erbij, met een team. Als drie alinea's onder elkaar lazen ze als nog een lap tekst, en dat is te veel gewicht voor wat voetnoten zijn. Naast elkaar zijn ze in één blik te overzien en zie je meteen dat het drie losse dingen zijn. Een haarlijn bovenaan in plaats van ertussen, want dat markeert ze als een voetregel onder het blok erboven en niet als een nieuwe kolommenrij. */ /* auto-fit en geen vast aantal kolommen: er stonden er drie, het werden er twee toen "iets erbij" eruit ging, en met repeat(3,1fr) bleef er dan een lege kolom staan. Zo verdeelt hij zich over hoeveel blokjes er ook zijn. */ /* flex en geen grid, en gecentreerd: bij twee blokjes zette een raster van drie ze links met een gat rechts, en een raster van twee maakte ze allebei een halve pagina breed. Zo staan ze op hun eigen breedte in het midden van de baan, hoeveel het er ook zijn. */ .notities{display:flex;flex-wrap:wrap;justify-content:center; gap:clamp(20px,3vw,44px);margin:clamp(34px,4.4vh,56px) 0 0;text-align:left} .notitie{flex:0 1 clamp(240px,26vw,300px);padding-top:14px; border-top:1px solid var(--lijn-licht)} .donker .notitie{border-top-color:var(--lijn-donker)} .notitie-naam{margin:0 0 6px;font-family:var(--label-f);font-size:var(--t-mini); letter-spacing:.14em;text-transform:uppercase;opacity:.6} .notitie p{margin:0;font-size:var(--t-klein);line-height:1.55;max-width:none} @media(max-width:760px){ .notities{gap:0} .notitie{flex:1 1 100%} .notitie + .notitie{margin-top:18px} } .na-werkstappen{margin:clamp(40px,5.2vh,62px) 0 0} .na-werkstappen + .prijs-knop{margin-top:clamp(26px,3.4vh,40px)} /* Onder het schermpje: nummer, kop, en een zin. Klein, zoals bij Symbolic. */ .werkstap-nr{margin:clamp(14px,1.6vh,20px) 0 0;font-family:var(--label-f); font-size:var(--t-mini);letter-spacing:.14em;text-transform:uppercase; color:var(--gedempt-licht)} .werkstap h3{margin:6px 0 8px;font-family:var(--f-display); font-weight:var(--disp-w);font-size:var(--t-titel);line-height:1.2; letter-spacing:var(--kop-ls)} .werkstap p.wat{margin:0;font-size:var(--t-tekst);line-height:1.6;max-width:none; color:var(--gedempt-licht)} @media(max-width:860px){ .werkstappen{grid-template-columns:1fr;gap:clamp(14px,3vw,22px)} .werkstap-beeld{min-height:0} } /* ============ het prijskader ============ Een lijn om de prijs. Rechte hoeken, net als de fotovlakken, want een afgeronde doos leest als een vel dat op de pagina ligt en de rest van deze site loopt tot de rand door. */ .prijskader{max-width:640px;margin:clamp(28px,3.6vh,48px) auto 0; border:1px solid var(--rand-licht);padding:clamp(30px,4vw,56px);text-align:center} .donker .prijskader{border-color:var(--rand-donker)} .prijskader > :first-child{margin-top:0} .prijskader > :last-child{margin-bottom:0} .prijskader .bedrag{margin:0 0 clamp(14px,1.8vh,22px);font-family:var(--f-display); font-weight:var(--disp-w);font-size:var(--t-cijfer);line-height:1; letter-spacing:var(--kop-ls)} .prijskader .bedrag small{font-family:var(--sans);font-size:var(--t-klein);font-weight:400; letter-spacing:0;text-transform:none;opacity:.6;margin-left:8px} /* ============ de drie stappen, kort ============ Alleen de naam en de tijd. De uitleg staat op de Werkwijze-pagina, en die stond hier bijna woordelijk overgeschreven. Zo zie je in een oogopslag de vorm van het traject, drie afspraken en vierenhalf uur, en dat is meteen de deelsom bij de prijs eronder. */ .stappen-kort{margin:clamp(28px,3.6vh,48px) 0 clamp(24px,3vh,40px); display:flex;flex-direction:column;gap:clamp(8px,1.2vh,16px)} .stappen-kort p{margin:0;font-family:var(--label-f);font-size:var(--t-label); font-weight:var(--label-w);letter-spacing:.11em;text-transform:uppercase; display:flex;justify-content:center;gap:clamp(10px,1.4vw,20px);align-items:baseline} .stappen-kort b{font-weight:inherit} .stappen-kort span{opacity:.6} @media(max-width:600px){ .stappen-kort p{flex-direction:column;gap:3px} } /* drie momenten met lucht ertussen, elk met een eigen opkomst */ .moment + .moment{margin-top:clamp(96px,15vh,200px)} /* een grote aanzet, met dezelfde veeg van links naar rechts als bij het brein. Twee grote momenten die dezelfde beweging delen maken er een systeem van. */ .aanzet{font-family:var(--f-display);font-weight:var(--disp-w); font-size:var(--t-reus);line-height:.98;letter-spacing:var(--kop-ls); margin:0 0 clamp(26px,3.4vh,44px);max-width:16ch;text-wrap:balance} [data-uitlijning="midden"] .aanzet{margin-left:auto;margin-right:auto;text-align:center} .veegwoorden i{font-style:normal;display:inline-block; clip-path:inset(0 102% -14% -3%); transition:clip-path .8s cubic-bezier(.32,0,.14,1); transition-delay:calc(var(--stap,0s) + var(--eigen,0s))} .veegwoorden i:nth-child(2){--eigen:.15s} .veegwoorden i:nth-child(3){--eigen:.3s} .veegwoorden i:nth-child(4){--eigen:.45s} .opkomend.zichtbaar .veegwoorden i{clip-path:inset(0 -3% -14% -3%)} @media(prefers-reduced-motion:reduce){.veegwoorden i{clip-path:none;transition:none}} /* De tussentekst werkte alleen als hij een direct kind van .wrap was. Stond hij in een kolom, dan kreeg hij niets en las hij als gewone tekst. Dat gold al voor Kaapstad, het boek en 'mijn tweede brein weet alles van mij'. Sinds 26 augustus 2026 geldt de maat overal waar .lead staat. De regel eronder blijft, want die doet het centreren. */ .lead{font-size:var(--t-lead);line-height:1.5;max-width:40ch} [data-ruimte] .baan > .wrap > p.lead{font-size:var(--t-lead);line-height:1.5;max-width:40ch} [data-uitlijning="midden"] .baan > .wrap > p.lead{margin-left:auto;margin-right:auto;text-align:center} /* ============ missie en Eva ============ Een sectie, drie behandelingen. De tekst staat maar op een plek, dus een wijziging in het verhaal geldt overal. band de brede foto als achtergrond, MISSIE groot links, alles rechts redactie geen foto, MISSIE klein in de linkermarge portret geen achtergrond, het staande portret naast de tekst */ .missie-sectie{position:relative;overflow:hidden} .missie-doek{position:absolute;inset:0; background:url('/assets/eva-banner.webp') left center/cover no-repeat} .missie-doek::after{content:"";position:absolute;inset:0} .missie-in{position:relative;z-index:2;display:grid; grid-template-columns:minmax(180px,26%) 1fr;gap:clamp(26px,4vw,72px);align-items:start} .missie-reviews{position:relative;z-index:2} @media(max-width:860px){.missie-in{grid-template-columns:1fr;gap:clamp(26px,4vh,48px)} [data-missie="band"] .missie-label{position:static;white-space:normal} [data-missie="band"] .missie-in{padding:0 clamp(24px,5vw,64px);grid-template-columns:1fr} [data-missie="band"] .missie-links{height:auto;justify-content:flex-start;padding-bottom:0} [data-missie="band"] .missie-in{gap:clamp(26px,4vh,48px)}} .missie-label{margin:0;font-family:var(--label-f);font-size:var(--t-label);letter-spacing:.24em; text-transform:uppercase;opacity:.72} .missie-foto{display:none;aspect-ratio:4/5;background:var(--mahonie-2) center/cover no-repeat; background-image:url('/assets/eva-portret-bo.webp')} .missie-titel{margin:0;font-family:var(--f-display);font-weight:var(--disp-w); font-size:var(--t-missie);line-height:1.08;letter-spacing:var(--kop-ls);max-width:none} /* Elke zin een eigen regel, en elke regel veegt in zijn geheel van links open, alsof hij geschreven wordt. display:block moet hier staan en niet het inline-block van .veegwoorden i, anders staan de twee zinnen achter elkaar op een regel. */ .missie-titel i{display:block;font-style:normal} .missie-verhaal{margin-top:clamp(28px,3.6vh,50px);max-width:56ch} .missie-verhaal p{max-width:none;text-align:left;margin:0 0 clamp(16px,2vh,22px)} .missie-verhaal p:last-child{margin-bottom:0} .missie-verhaal .eerste{font-size:var(--t-lead);line-height:1.5} .meer-over{margin-top:clamp(22px,2.8vh,34px)} .meer-over a{color:inherit;text-decoration:underline;text-underline-offset:4px; font-family:var(--sans);font-size:inherit} .donker .mark{background-image:linear-gradient(var(--markeer-donker),var(--markeer-donker))} /* op een foto moet de markering doorschijnen, anders ligt er een grijze plak over het beeld in plaats van een streep onder de woorden */ [data-missie="band"] .missie-verhaal .mark{background-image:linear-gradient( color-mix(in srgb,var(--markeer-donker) 62%, transparent), color-mix(in srgb,var(--markeer-donker) 62%, transparent))} /* De missie sprak een andere opmaaktaal dan de rest: elke andere baan op deze pagina is gecentreerd en eenkolommig, deze stond links uitgelijnd. Dat is waarom het als een losse pagina voelde, niet de lettergrootte. Nu volgt het blok gewoon de uitlijning-as, net als alle andere banen. Het staat alleen in de rechterhelft in plaats van in het midden van het scherm, want daar is de foto donker genoeg om tekst te dragen. */ [data-uitlijning="midden"][data-missie="band"] .missie-rechts{text-align:center} [data-uitlijning="midden"][data-missie="band"] .missie-verhaal{margin-left:auto;margin-right:auto} [data-uitlijning="midden"][data-missie="band"] .missie-verhaal p{text-align:center; margin-left:auto;margin-right:auto} [data-uitlijning="midden"][data-missie="band"] .missie-verhaal .zacht{max-width:44ch} [data-uitlijning="midden"][data-missie="band"] .missie-verhaal .eerste{max-width:none; text-wrap:balance} /* de lopende tekst staat hier op een foto en niet op papier: gedempt grijs verdwijnt dan in het beeld, dus hier de gewone inkt */ /* De demping zit in de kleur en niet in opacity, en dat is geen smaak maar noodzaak. Met opacity:.88 op deze alinea won deze regel (0,4,0) van .opkomend .op (0,2,0), en dan blijft de tekst tijdens de opkomst gewoon staan: hij schuift wel omhoog maar hij verschijnt nooit. Gemeten op 24 augustus: alle andere stukken begonnen op 0, deze op 0,88. */ [data-missie="band"] .missie-verhaal .zacht{ color:color-mix(in srgb,var(--inkt-donker) 88%,transparent)} /* band: de foto eronder, MISSIE groot in de linkerkolom. De waas is links licht zodat Eva en het uitzicht zichtbaar blijven, en rechts zwaar genoeg om vier alinea's leesbaar te dragen. */ [data-missie="band"] .missie-doek::after{ background:linear-gradient(90deg,rgba(14,13,17,.30) 0%,rgba(14,13,17,.52) 26%, rgba(14,13,17,.86) 52%,rgba(14,13,17,.93) 100%)} /* MISSIE linksboven, de zin rechts ernaast. De foto is iets naar rechts geschoven zodat de linkerbovenhoek landschap is en het woord niet over haar heen valt. */ [data-missie="band"] .missie-links{display:flex;flex-direction:column;justify-content:flex-start} [data-missie="band"] .missie-doek{background-position:32% 8%} /* MISSIE hangt aan de hoed, niet aan deze kolom: missieOpHoed() zet 'm neer */ [data-missie="band"] .missie-label{position:absolute;margin:0;white-space:nowrap} /* de tekst loopt door tot vlak bij de rand van het scherm */ /* de tekst staat midden in de baan, net als in elke andere baan */ [data-missie="band"] .missie-rechts{align-self:center} [data-missie="band"] .missie-in{align-items:stretch;gap:clamp(28px,3vw,52px); grid-template-columns:minmax(180px,48%) 1fr;max-width:none; padding-left:clamp(24px,5vw,72px);padding-right:clamp(20px,2.6vw,40px)} [data-missie="band"] .missie-label{font-family:var(--f-display);font-weight:var(--disp-w); font-size:var(--t-kop);letter-spacing:var(--kop-ls);line-height:1; text-transform:uppercase;opacity:1} @media(max-width:860px){ [data-missie="band"] .missie-doek::after{ background:linear-gradient(180deg,rgba(14,13,17,.42) 0%,rgba(14,13,17,.9) 34%)} /* Deze drie regels stonden al in het mobiele blok bovenaan deze sectie, maar dat blok staat eerder in het bestand dan de tweekolomsregel hierboven, en bij gelijke specificiteit wint de laatste. Gemeten op 375 breed: de tekstkolom was 145 pixels en de zin liep het scherm uit. Vandaar dat het hier nog een keer staat, na de regel die het veroorzaakt. */ [data-missie="band"] .missie-in{grid-template-columns:1fr; padding-left:clamp(24px,5vw,64px);padding-right:clamp(24px,5vw,64px)} [data-missie="band"] .missie-links{height:auto;justify-content:flex-start;padding-bottom:0} [data-missie="band"] .missie-rechts{align-self:start} /* MISSIE hangt op een breed scherm aan de rand van haar hoed, met een berekende plek. Onder 860 zet missieOpHoed() die plek weer leeg, maar de regel die het woord uit de tekststroom haalt bleef staan, en dan valt het boven op de kop. Hier gaat het terug in de stroom. */ [data-missie="band"] .missie-label{position:static;white-space:normal; margin-bottom:.24em} } /* redactie en portret: geen achtergrondfoto */ /* de reviews lopen door van links naar rechts, zoals op de vorige site. Het spoor staat er twee keer in: zodra de eerste helft eruit geschoven is, staat de tweede precies op dezelfde plek en springt hij onzichtbaar terug. Vandaar translateX(-50%) naar 0 en niet andersom: dan loopt hij naar rechts. */ .reviews-loop{margin-top:clamp(34px,4.5vh,62px);overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .reviews-spoor{display:flex;align-items:stretch;gap:clamp(18px,2vw,30px); width:max-content;padding:0 clamp(18px,2vw,30px); animation:revschuif 52s linear infinite} @keyframes revschuif{from{transform:translateX(-50%)}to{transform:translateX(0)}} .reviews-loop:hover .reviews-spoor, .reviews-loop:focus-within .reviews-spoor{animation-play-state:paused} .reviews-loop .rev{margin:0;flex:0 0 min(82vw,380px);padding:clamp(24px,2.4vw,34px); border:1px solid var(--lijn-donker);display:flex;flex-direction:column;justify-content:flex-start} .licht .reviews-loop .rev{border-color:var(--lijn-licht)} @media(prefers-reduced-motion:reduce){ .reviews-spoor{animation:none;flex-wrap:wrap;width:auto;justify-content:center} .reviews-loop{-webkit-mask-image:none;mask-image:none} .reviews-spoor .rev[aria-hidden="true"]{display:none} } /* Op de telefoon geen band maar een veegrij. De band deed daar 52 seconden over een ronde, dus de volgende review kwam pas na een seconde of zeventien in beeld, en vegen kon niet: een animatie is geen scrollvak. Nu staan de drie kaarten naast elkaar in een vak dat je met je vinger schuift, en elke kaart klikt in het midden vast. Aan weerszijden steekt een stukje van de buurkaart uit, zodat je ziet dat er meer is. (Eva, 6 september 2026) */ @media(max-width:760px){ .reviews-loop{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory;-webkit-mask-image:none;mask-image:none; scrollbar-width:none;padding-bottom:6px} .reviews-loop::-webkit-scrollbar{display:none} .reviews-spoor{animation:none;width:max-content;padding:0 9vw} .reviews-spoor .rev{flex-basis:82vw;scroll-snap-align:center} .reviews-spoor .rev[aria-hidden="true"]{display:none} } /* De sterren in het accentgeel uit het palet, en op volle sterkte. Ze stonden op halve dekking en verdwenen daardoor in de donkere baan, terwijl vijf sterren juist het eerste zijn wat je wilt zien bij een review. */ .reviews-loop .sterren{margin:0 0 clamp(16px,1.8vw,22px);font-size:var(--t-fijn); letter-spacing:.24em;color:var(--acc-donker)} .licht .reviews-loop .sterren{color:var(--acc-licht)} .reviews-loop blockquote{margin:0} .reviews-loop blockquote p{margin:0;font-family:var(--f-display);font-weight:var(--disp-w); font-size:var(--t-lead);line-height:1.44;letter-spacing:var(--kop-ls);max-width:none} /* de naam zakt altijd naar de onderkant, ook als de ene review langer is dan de andere. Zo staan de drie namen op dezelfde lijn */ .reviews-loop figcaption{margin-top:auto;padding-top:clamp(20px,2.4vw,30px); display:flex;flex-direction:column;gap:4px} .reviews-loop .rev-naam{font-size:var(--t-klein)} .reviews-loop .rev-rol{font-family:var(--label-f);font-size:var(--t-mini);letter-spacing:.1em; text-transform:uppercase;opacity:.5;line-height:1.5; /* twee regels gereserveerd, ook als er maar een nodig is. Anders schuift de naam van de ene kaart omhoog zodra de praktijk van de buurman afbreekt */ min-height:3em} /* ============ de werkwijze, kort ============ Geen derde rij van drie: die vorm staat al bij het diagram en bij de reviews. Dit is een programma, dus het leest als een programma. Naam en tijd links, wat er gebeurt rechts, een haarlijn tussen elke afspraak. */ .afspraken{list-style:none;margin:clamp(38px,5vh,64px) auto 0;padding:0; max-width:76ch;text-align:left} .afspraken li{display:grid;grid-template-columns:minmax(190px,30%) 1fr; gap:clamp(18px,3vw,46px);padding:clamp(26px,3.4vh,40px) 0; border-top:1px solid var(--lijn-donker)} .licht .afspraken li{border-top-color:var(--lijn-licht)} .afspraken li:last-child{border-bottom:1px solid var(--lijn-donker)} .licht .afspraken li:last-child{border-bottom-color:var(--lijn-licht)} .afspraak-naam{margin:0;font-family:var(--f-display);font-weight:var(--disp-w); /* Dit is een kopje in de afsprakenlijst, geen tussentekst. Hij leende de trede van de lead, dus toen die op 26 augustus kleiner werd is hier de oude maat blijven staan. */ font-size:var(--t-titel);line-height:1.1;letter-spacing:var(--kop-ls);max-width:none} .afspraak-tijd{margin:8px 0 0;font-family:var(--label-f);font-size:var(--t-label); letter-spacing:var(--label-ls);text-transform:uppercase;opacity:.6;max-width:none} .afspraak-wat{margin:0;max-width:46ch} [data-ruimte="ruim"] .afspraken .afspraak-wat{font-size:var(--t-groot);line-height:1.65} /* het zeefwerk: dit is het moment waarop iemand zichzelf herkent of afhaakt, dus het staat los en niet als vierde regel in de lijst */ .zeef{margin:clamp(34px,4.5vh,56px) auto 0;max-width:52ch;text-align:center} .werkwijze-link{margin:clamp(24px,3vh,36px) auto 0;text-align:center} .werkwijze-link a{color:inherit;text-decoration:underline;text-underline-offset:4px; font-family:var(--sans);font-size:inherit} @media(max-width:760px){.afspraken li{grid-template-columns:1fr;gap:10px}} /* ============ de slotbaan ============ De pagina opent met de foto en sluit ermee af. Dat maakt er een boekwerk van in plaats van een lijst, en het lost meteen het ritmeprobleem op: de prijs is licht en de voet is donker, dus hier hoort niet nog een vlakke baan. */ .slot-baan{position:relative;overflow:hidden;padding:clamp(96px,15vh,190px) 0; background-color:var(--mahonie);color:var(--inkt-donker);text-align:center} .slot-doek{position:absolute;inset:0;background-image:var(--hero-beeld); background-position:center 38%;background-size:cover;background-repeat:no-repeat} .slot-doek::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(14,13,17,.80) 0%,rgba(14,13,17,.66) 45%,rgba(14,13,17,.86) 100%)} /* ---- rustige achtergronden zonder foto ---- Alles hieronder wordt getekend uit de kleuren die je in het mengpaneel kiest, dus het kan nooit botsen met de rest. De korrel is een SVG-ruisfilter: dat is wat een egaal verloop het gevoel van bedrukt papier geeft in plaats van een computerscherm. Zonder korrel gaat zo'n verloop altijd banderen. */ :root{--korrel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23k)'/%3E%3C/svg%3E")} /* de donkere waas krijgt dezelfde drie drijvende vlekken als de lichte. Op donker moet het licht juist erbij komen in plaats van eraf: een zachte gloed en een accentveeg over een diepzwarte grond */ /* dezelfde waas, maar hij ademt. Twintig seconden per slag */ @keyframes adem{from{transform:scale(1.06) translate3d(0,0,0)} to{transform:scale(1.18) translate3d(-2.5%,-2%,0)}} /* vloeibaar glas: een kegelverloop dat zo zwaar vervaagd wordt dat de banden samensmelten tot zachte metaalglans. Draait in drie kwartier minuut rond */ @keyframes glansdraai{to{transform:rotate(360deg)}} /* ---- lichte gradient die drijft ---- Drie zachte vlekken, elk met een eigen tempo en richting. Omdat ze niet gelijk lopen komt het verloop nooit twee keer hetzelfde uit: je ziet dat er iets beweegt als je ernaar kijkt, maar niets trekt je blik weg van de knop. Ze zijn getekend als radiaalverloop, niet vervaagd met een filter: dat is even zacht en het kost de laptop bijna niets. */ .vlek{display:none} [data-slot="stroom"] .slot-baan{background-color:var(--papier);color:var(--inkt-licht); border-top:1px solid var(--lijn-licht)} [data-slot="stroom"] .slot-doek, .gloed{background-image: linear-gradient(158deg, var(--papier-2) 0%, var(--papier) 46%, var(--papier-2) 100%)} [data-slot="stroom"] .vlek, .gloed .vlek{display:block;position:absolute; border-radius:50%;will-change:transform} [data-slot="stroom"] .vlek.a, .gloed .vlek.a{inset:-40% 10% -6% -34%; background:radial-gradient(closest-side, #fff 0%, rgba(255,255,255,.55) 46%, transparent 78%); animation:drijfA 17s ease-in-out infinite alternate} [data-slot="stroom"] .vlek.b, .gloed .vlek.b{inset:2% -30% -40% 34%; background:radial-gradient(closest-side, color-mix(in srgb,var(--inkt-licht) 8%, transparent) 0%, color-mix(in srgb,var(--inkt-licht) 3.5%, transparent) 46%, transparent 78%); animation:drijfB 23s ease-in-out infinite alternate} [data-slot="stroom"] .vlek.c, .gloed .vlek.c{inset:-16% -6% 16% 40%; background:radial-gradient(closest-side, color-mix(in srgb,var(--acc-licht) 11%, transparent) 0%, color-mix(in srgb,var(--acc-licht) 4%, transparent) 50%, transparent 80%); animation:drijfC 14s ease-in-out infinite alternate} [data-slot="stroom"] .slot-doek::after, .gloed::after{content:"";position:absolute;inset:0; background:var(--korrel);background-size:220px 220px;opacity:.11;mix-blend-mode:multiply} @keyframes drijfA{from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(23%,13%,0) scale(1.20)}} @keyframes drijfB{from{transform:translate3d(0,0,0) scale(1.06)} to{transform:translate3d(-27%,-16%,0) scale(.90)}} @keyframes drijfC{from{transform:translate3d(0,0,0) scale(.96)} to{transform:translate3d(-19%,20%,0) scale(1.18)}} [data-slot="stroom"] .slot-baan .knop{color:var(--inkt-licht);border-color:var(--inkt-licht)} [data-slot="stroom"] .slot-baan .knop:hover{background:color-mix(in srgb,var(--inkt-licht) 12%, transparent)} [data-knop="gevuld"][data-slot="stroom"] .slot-baan .knop{background:var(--inkt-licht); color:var(--papier);border-color:var(--inkt-licht)} [data-knop="gevuld"][data-slot="stroom"] .slot-baan .knop:hover{ background:var(--mahonie);border-color:var(--mahonie);color:var(--papier)} /* de lichte versie: papier met een zachte gloed, donkere letters erop */ @media(prefers-reduced-motion:reduce){ [data-slot="stroom"] .vlek{animation:none} } .slot-in{position:relative;z-index:2} .slot-kop{margin:0 auto;font-family:var(--f-display);font-weight:var(--disp-w); font-size:var(--t-mega);line-height:1;letter-spacing:var(--kop-ls); max-width:17ch;text-wrap:balance} .slot-zin{margin:clamp(22px,3vh,36px) auto 0;font-size:var(--t-lead); line-height:1.45;max-width:34ch;opacity:.82} .slot-knop{margin:clamp(32px,4.2vh,54px) 0 0} /* deze baan heet niet licht of donker, dus de knopregels van die twee gelden hier niet en viel hij terug op de standaard linkkleur */ .slot-baan .knop{color:var(--inkt-donker);border-color:var(--inkt-donker);background:transparent} .slot-baan .knop:hover{background:color-mix(in srgb, var(--inkt-donker) 15%, transparent)} [data-knop="gevuld"] .slot-baan .knop{background:var(--inkt-donker);color:var(--mahonie); border-color:var(--inkt-donker)} [data-knop="gevuld"] .slot-baan .knop:hover{background:#fff;border-color:#fff} /* ============ het prijsblok ============ Vijf manieren om een enkele prijs te tonen. Een kaartenrij werkt alleen met buren om mee te vergelijken; met een aanbod werkt hij juist leeg. */ .prijsblok{margin-top:clamp(34px,5vh,64px)} .prijs-kaart{max-width:640px} .prijs-gratis{margin:0 0 clamp(26px,3.4vh,40px);font-size:var(--t-tekst);max-width:46ch} .prijs-naam{margin:0;font-family:var(--label-f);font-size:var(--t-label);letter-spacing:.14em; text-transform:uppercase} .prijs-bedrag{margin:10px 0 0;font-family:var(--f-display);font-weight:var(--disp-w); font-size:var(--t-mega);line-height:.95;letter-spacing:var(--kop-ls)} .prijs-meta{margin:14px 0 0;font-family:var(--label-f);font-size:var(--t-label);letter-spacing:.05em; line-height:1.8;opacity:.7;max-width:none} /* Staat er geen bedrag tussen, dan volgen twee monoregels elkaar direct op en klonteren ze samen tot één blokje. Deze regel geldt alleen in dat geval, want zonder bedrag staat .prijs-meta meteen achter .prijs-naam. */ .prijs-naam + .prijs-meta{margin-top:clamp(16px,2vh,24px)} /* De inleiding boven de lijst. Sinds 3 september 2026 staat het bedrag niet meer op de site: dat hoor je bij de kennismaking. Deze alinea vult de plek waar het stond met de reden dat het bij jou nu niet werkt, en niet met een verzonnen kop. */ /* De inleiding boven de lijst, in één blok. Hier stonden drie stukken onder elkaar: een aanloop op de leadtrede, de omslagzin groot in de displayletter, en een slotzin op de tekst-trede. Drie maten en twee letters in vier regels, en dat oogde rommelig (Eva, 3 september). Nu één alinea, licht schuin in de displayletter, zodat het als één rustige opening leest en niet als drie stukjes die om aandacht vragen. Schuin en niet groot: het moet de kaart openen, niet met de kop erboven concurreren. */ .prijs-intro{margin:clamp(22px,2.8vh,32px) 0 0;font-family:var(--f-display); font-style:italic;font-size:var(--t-lead);line-height:1.55;max-width:46ch} [data-prijs="kaart"] .prijs-intro{margin-left:auto;margin-right:auto} .prijs-lijst{list-style:none;padding:0;margin:clamp(26px,3.4vh,40px) 0 0} .prijs-lijst li{padding:13px 0;border-top:1px solid var(--lijn-licht);font-size:var(--t-tekst)} .donker .prijs-lijst li{border-top-color:var(--lijn-donker)} .prijs-lijst li:last-child{border-bottom:1px solid var(--lijn-licht)} .donker .prijs-lijst li:last-child{border-bottom-color:var(--lijn-donker)} .prijs-knop{margin:clamp(28px,3.6vh,44px) 0 0} .prijs-klein{margin:clamp(22px,2.8vh,32px) 0 0;font-size:var(--t-klein);line-height:1.6;max-width:46ch;opacity:.78} .prijs-vergelijk{display:none;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px); margin-bottom:clamp(34px,4.5vh,60px);max-width:640px} .prijs-vergelijk .v-label{margin:0 0 10px;font-family:var(--label-f);font-size:var(--t-mini); letter-spacing:.12em;text-transform:uppercase;opacity:.65} .prijs-vergelijk .v-getal{margin:0;font-family:var(--f-display);font-weight:var(--disp-w); font-size:var(--t-cijfer);line-height:1;letter-spacing:var(--kop-ls)} .prijs-vergelijk .v-uit{margin:8px 0 0;font-size:var(--t-fijn);opacity:.65} .prijs-vergelijk > div + div{border-left:1px solid var(--lijn-licht);padding-left:clamp(22px,3vw,48px)} .donker .prijs-vergelijk > div + div{border-left-color:var(--lijn-donker)} @media(max-width:700px){.prijs-vergelijk{grid-template-columns:1fr} .prijs-vergelijk > div + div{border-left:none;padding-left:0; border-top:1px solid var(--lijn-licht);padding-top:22px}} /* 1. Kaart: het model uit de referentie, gecentreerd met een rand eromheen */ [data-prijs="kaart"] .prijs-kaart{margin:0 auto;text-align:center; border:1px solid var(--rand-licht);padding:clamp(30px,4vw,54px)} [data-prijs="kaart"] .donker .prijs-kaart{border-color:var(--rand-donker)} [data-prijs="kaart"] .prijs-gratis, [data-prijs="kaart"] .prijs-klein{margin-left:auto;margin-right:auto} [data-prijs="kaart"] .prijs-lijst li{border-top:none;border-bottom:none;padding:9px 0} [data-prijs="kaart"] .prijs-lijst li:last-child{border-bottom:none} /* Wat er na de eerste 90 dagen te kiezen valt: drie kolommen naast elkaar, met de naam, het bedrag en wat je ervoor krijgt. Geen tabel met vinkjes, want dat leest als software en niet als een keuze tussen drie manieren van samenwerken. Op een smal scherm onder elkaar met een lijn ertussen. */ .keuzes{display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,44px);margin:clamp(30px,4vh,50px) 0 0} .keuze{padding:0} .keuze + .keuze{border-left:1px solid var(--lijn-licht);padding-left:clamp(20px,3vw,44px)} .donker .keuze + .keuze{border-left-color:var(--lijn-donker)} .keuze-naam{margin:0;font-family:var(--label-f);font-size:var(--t-label); letter-spacing:.14em;text-transform:uppercase;opacity:.7} .keuze-bedrag{margin:10px 0 0;font-family:var(--f-display);font-weight:var(--disp-w); font-size:var(--t-sub);line-height:1.05;letter-spacing:var(--kop-ls)} .keuze-uit{margin:4px 0 0;font-family:var(--label-f);font-size:var(--t-mini);opacity:.6} .keuze-wat{margin:clamp(12px,1.6vh,18px) 0 0;font-size:var(--t-klein);line-height:1.6; max-width:none} /* Wat je per keuze krijgt, als rijen en niet als alinea. Een alinea van vijf regels lees je of niet, en drie alinea's naast elkaar vergelijk je niet: je moet ze allemaal helemaal lezen om het verschil te vinden. Als losse rijen met een haarlijn ertussen staat het verschil meteen op ooghoogte, en het is dezelfde vorm als de lijst in de kaart erboven. Links uitgelijnd, ook in een gecentreerde baan, om dezelfde reden als daar. */ /* Zonder haarlijnen tussen de regels, op Eva's verzoek van 3 september. Dat kan hier ook: de regels zijn kort en er staan er maar twee tot vier, dus de witruimte houdt ze al uit elkaar. In de kaart erboven liggen acht langere regels onder elkaar, en daar doet de lijn wel werk. Wat de lijn hier deed neemt de ruimte over: iets meer lucht tussen de regels dan erbinnen. */ .keuze-punten{list-style:none;padding:0;margin:clamp(14px,1.8vh,20px) 0 0;text-align:left} .keuze-punten li{font-size:var(--t-klein);line-height:1.45} .keuze-punten li + li{margin-top:10px} @media(max-width:760px){ .keuzes{grid-template-columns:1fr;gap:0} .keuze + .keuze{border-left:none;padding-left:0; border-top:1px solid var(--lijn-licht);margin-top:24px;padding-top:24px} .donker .keuze + .keuze{border-top-color:var(--lijn-donker)} } /* De lijstkaart. Dezelfde kaart, maar links uitgelijnd en met de regels als echte rijen. Nodig sinds het bedrag op 3 september 2026 van de site ging. Een gecentreerde kaart hangt aan het getal in het midden: dat is de haak waar de rest omheen staat. Zonder dat getal staan er acht regels van ongelijke lengte, gecentreerd, zonder opsommingsteken en in dezelfde kleur, en dan heeft het oog geen rand om langs te lopen. Het leest als een blok grijs in plaats van als een lijst. Wat het oplost: een rechte linkerrand, een haarlijn per regel, en per regel een kop in volle inkt met de uitleg erachter gedempt. Zo kun je de acht koppen onder elkaar scannen en pas daarna de uitleg lezen. */ .prijs-kaart.lijstkaart{text-align:left} .prijs-kaart.lijstkaart .prijs-naam, .prijs-kaart.lijstkaart .prijs-meta, .prijs-kaart.lijstkaart .prijs-intro, .prijs-kaart.lijstkaart .prijs-klein{margin-left:0;margin-right:0} .prijs-kaart.lijstkaart .prijs-lijst li{padding:14px 0; border-top:1px solid var(--lijn-licht)} .prijs-kaart.lijstkaart .prijs-lijst li:last-child{ border-bottom:1px solid var(--lijn-licht)} .donker .prijs-kaart.lijstkaart .prijs-lijst li{border-top-color:var(--lijn-donker)} .donker .prijs-kaart.lijstkaart .prijs-lijst li:last-child{border-bottom-color:var(--lijn-donker)} /* De kop van de regel. Geen vet, want de displayletter is al zwaar genoeg en vet zou hier acht keer schreeuwen. Het verschil zit in de demping erachter. */ .prijs-kaart.lijstkaart .prijs-lijst b{font-weight:inherit} .prijs-kaart.lijstkaart .prijs-lijst .uitleg{opacity:.68} /* In een gecentreerde baan gaat de kop van de kaart mee naar het midden: de naam, het bedrag, de regel eronder en de knop. De acht regels blijven links. Dat is met opzet en niet half werk: die regels zijn ongelijk van lengte en hebben een rechte linkerrand nodig om langs te scannen. Gecentreerd stonden ze eerder en toen was het "totaal niet overzichtelijk" (Eva, 3 september). Een kaart met een gecentreerde kop en een links uitgelijnde lijst is ook de gewone vorm voor een prijskaart, en niet iets nieuws. */ .gecentreerd .prijs-kaart.lijstkaart .prijs-naam, .gecentreerd .prijs-kaart.lijstkaart .prijs-bedrag, .gecentreerd .prijs-kaart.lijstkaart .prijs-meta, .gecentreerd .prijs-kaart.lijstkaart .prijs-knop{text-align:center} /* De naam boven het bedrag erft de maximale breedte van een alinea en staat met marge nul links in de kaart. De tekst was gecentreerd binnen dat smalle vak, en het vak zelf niet: zo stond "Je tweede brein" een stuk links van het bedrag (Eva, 6 september). Het vak mag de hele kaart zijn. */ .gecentreerd .prijs-kaart.lijstkaart .prijs-naam{max-width:none} /* 2. Bon: alles op regels met haarlijnen, als een rekening */ /* 3. Twee kolommen: wat je krijgt links, wat het kost rechts */ /* Links wat je krijgt, rechts wat het kost. Elk stuk heeft hier zijn eigen rij, en dat is geen overdaad. Eerst stonden alleen de kolommen ingesteld en niet de rijen, en dan zoekt het raster zelf maar een plek. De lijst links is vijf regels hoog, dus rij 2 werd vijf regels hoog, en het bedrag belandde in rij 3: een halve pagina onder het label waar het bij hoort. Met vaste rijen staat de prijs weer tegen zijn eigen label aan. */ /* De prijs zakt een hele lijstregel. Stond de bovenkant gelijk met de eerste lijn van de lijst, dan lezen de twee kolommen als twee koppen naast elkaar. Lager leest het als antwoord op de lijst in plaats van als tweede begin. De maat is met opzet een regel van de lijst en geen rond getal: gemeten liggen de lijstregels 52 pixels uit elkaar. Een halve regel is geprobeerd en was te subtiel, je zag het verschil niet. Gevolg dat erbij hoort: het prijsblok steekt nu onder de lijst uit, want de twee kolommen zijn ongeveer even hoog. Dat is de bedoeling, anders zou het zakken niets doen. */ /* Het bedrag stond op 104 pixels in een kolom van 320. Dan breekt "€ 1.750" in tweeën en staat het euroteken alleen op een regel. Hier past het in de kolom en blijft het net onder de sectiekop van 74, zodat de rangorde klopt. nowrap is de vangrail: liever loopt hij een keer uit zijn kolom dan dat hij ongemerkt weer breekt. */ /* 4. Groot: het bedrag is de hele sectie */ /* 5. Vergelijk: tegenover wat de rekenmachine hierboven net liet zien */ /* ============ de voet ============ Vijf patronen uit de referenties, want een voet zegt meer over een merk dan je denkt: het is de laatste indruk en de enige plek waar alles samenkomt. */ .voet-in{display:flex;flex-direction:column;gap:clamp(30px,4vh,54px)} .voet-merk{font-family:var(--merk-f);font-weight:var(--merk-w);letter-spacing:var(--merk-ls); font-size:clamp(17px,1.9vw,22px)} .voet-merk-groot{display:none;font-family:var(--merk-f);font-weight:var(--merk-w); letter-spacing:var(--merk-ls);line-height:.86;font-size:clamp(64px,17vw,240px)} .voet-kolommen{display:none;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(26px,3vw,52px)} /* minmax(0,1fr) en niet 1fr: een 1fr-kolom heeft stiekem min-width:auto, dus het langste woord in een kolom duwt hem breder dan zijn deel. Gemeten op 375 breed gaf dat 95 en 205 pixels naast elkaar in plaats van twee gelijke helften. */ @media(max-width:860px){ .voet-kolommen{grid-template-columns:repeat(2,minmax(0,1fr))} /* De nieuwsbrief over de volle breedte. In een halve kolom van 150 pixels past "Je e-mailadres" plus het pijltje niet, en dan duwt het formulier de pagina breder dan het scherm: gemeten 406 pixels op een telefoon van 375. */ .voet-kolommen .voet-brief{grid-column:1/-1} } .voet-kolommen b{display:block;font-family:var(--label-f);font-size:var(--t-label);letter-spacing:.1em; text-transform:uppercase;font-weight:var(--label-w);margin-bottom:16px} .voet-kolommen a{display:block;font-size:var(--t-klein);text-decoration:none;color:inherit; opacity:.72;padding:5px 0} .voet-kolommen a:hover{opacity:1} /* De kop van de eerste kolom is zelf ook een link (naar de werkwijze), maar moet eruit blijven zien als kop: zelfde letter, geen doezeling, geen tikvlak erbij. */ .voet-kolommen b a{display:inline-block;font:inherit;letter-spacing:inherit;opacity:1; padding:12px 0;margin:-12px 0} /* tikvlak 44 hoog, zonder de kop te verplaatsen */ .voet-kolommen b a:hover{opacity:.72} .voet-brief form{display:flex;align-items:center;gap:10px; border-bottom:1px solid currentColor;padding-bottom:9px;max-width:260px} /* Na een gelukte aanmelding zet het script hidden op het formulier. Zonder deze regel doet dat niets: display:flex hierboven wint van de [hidden]-regel van de browser, want een klasse weegt zwaarder dan een attribuut. */ .voet-brief form[hidden]{display:none} .voet-brief input{flex:1;background:transparent;border:0;color:inherit;font-family:var(--sans); font-size:var(--t-klein);padding:2px 0;min-height:44px;min-width:0} .voet-brief input::placeholder{color:inherit;opacity:.5} .voet-brief button{background:transparent;border:0;color:inherit;cursor:pointer;font-size:var(--t-tekst); line-height:1;padding:0;flex:none} /* Het lokvakje voor robots. Een mens ziet het niet en vult het dus nooit in, een robot vult alles in wat hij tegenkomt. Zie api/aanmelden.js. */ .brief-lok{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* Wat er terugkomt na het versturen. Leeg tot er iets te melden valt, en de hoogte staat vast zodat de voet niet verspringt zodra er tekst in komt. */ .brief-uitkomst{margin:8px 0 0;max-width:260px;font-size:var(--t-fijn); opacity:.72;min-height:1.5em} .brief-uitkomst.mis{opacity:1} .voet-rij{display:none;flex-wrap:wrap;gap:8px 26px} .voet-rij a{font-size:var(--t-klein);text-decoration:none;color:inherit;opacity:.72} .voet-rij a:hover{opacity:1} .voet-regel{margin:0;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline; font-family:var(--label-f);font-size:var(--t-mini);letter-spacing:.06em;opacity:.55;max-width:none} .voet-regel a{color:inherit;text-decoration:none;border-bottom:1px solid transparent} .voet-regel a:hover{border-bottom-color:currentColor} .voet-streep{display:none;height:1px;background:currentColor;opacity:.16} /* 1. Kaal: alleen het woordmerk en een regel. Amrit en Open doen dit. */ /* 2. Kolommen: het Cohere-model, met nieuwsbrief */ [data-voet="kolommen"] .voet-kolommen{display:grid} [data-voet="kolommen"] .voet-streep{display:block} /* 3. Alles links met haarlijnen: Outsource */ /* 4. Ruim: Aesop, gecentreerd en zonder lijnen */ /* 5. Woordmerk groot: de voet is het merk */ /* ============ de rekenmachine ============ Vier dingen maken het sterk. Het getal is het grootste op het scherm. Het krijgt een maat die iets betekent, want 43 uur zegt niets en 43 sessies wel. Je ziet de hoeveelheid als streepjes, dus je kijkt er niet alleen naar maar je ziet hem groeien. En de schuiven zijn haarlijnen met een stip in plaats van systeemknoppen, want die lezen als een formulier. */ .reken2{margin-top:clamp(40px,6vh,72px);display:grid; grid-template-columns:minmax(240px,300px) 1fr;gap:clamp(32px,5vw,72px);align-items:start} @media(max-width:860px){.reken2{grid-template-columns:1fr}} .knoppen-kolom{display:flex;flex-direction:column;gap:clamp(26px,3.5vh,40px)} .regelaar label{display:flex;justify-content:space-between;align-items:baseline;gap:12px; font-family:var(--label-f);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase; margin-bottom:14px;text-align:left} .regelaar label b{font-family:var(--f-display);font-weight:var(--disp-w); font-size:var(--t-titel);letter-spacing:normal;text-transform:none} /* De lijn blijft een haartje dun, maar het aanraakvlak is 44 pixels hoog. Stond op 22, en op een telefoon is dat met een duim bijna niet te raken. De truc: het element zelf is 44 hoog en tekent de lijn als achtergrond, precies in het midden. De baan van de schuif laten we met rust, want dan centreert de browser het bolletje vanzelf. */ .schuif{-webkit-appearance:none;appearance:none;width:100%;height:44px; display:block;cursor:pointer; background:linear-gradient(var(--rand-licht),var(--rand-licht)) center/100% 1px no-repeat} .schuif::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%; background:var(--inkt-licht);border:0} .schuif::-moz-range-track{height:1px;background:transparent} .schuif::-moz-range-thumb{width:15px;height:15px;border:0;border-radius:50%;background:var(--inkt-licht)} .donker .schuif{background-image:linear-gradient(var(--rand-donker),var(--rand-donker))} .donker .schuif::-webkit-slider-thumb{background:var(--inkt-donker)} .donker .schuif::-moz-range-thumb{background:var(--inkt-donker)} .uitkomst-kolom{text-align:left} .twee-getallen{display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,64px);align-items:flex-start} /* De twee uitkomsten stonden op 96, en de sectiekop erboven op 74. Een getal in een vel was dus groter dan de kop van de hele sectie, en dan valt de rangorde om: je oog gaat eerst naar het bedrag en pas daarna naar de vraag die erbij hoort. Nu blijven ze onder de kop. */ .groot-getal{font-family:var(--f-display);font-weight:var(--disp-w); font-size:var(--t-cijfer);line-height:.92;letter-spacing:var(--kop-ls);margin:0; font-variant-numeric:tabular-nums;white-space:nowrap} .groot-eenheid{font-family:var(--label-f);font-size:var(--t-fijn);letter-spacing:.14em; text-transform:uppercase;margin:14px 0 0} .vertaling{margin:clamp(22px,3vh,34px) 0 0;font-size:var(--t-lead);line-height:1.45;max-width:34ch} .opnieuw{margin:clamp(20px,2.6vh,30px) 0 0;font-family:var(--label-f);font-size:var(--t-label); letter-spacing:.06em;line-height:1.8;padding-top:16px;border-top:1px solid var(--lijn-licht); max-width:34ch} .donker .opnieuw{border-top-color:var(--lijn-donker)} /* De cyclus. De sectie beeldt een proces uit, dus laat het proces zich afspelen: de vraag typt zichzelf, de bestanden lichten een voor een op alsof ze gelezen worden, en het antwoord schrijft zich woord voor woord. Daarna een adempauze en opnieuw. */ .stroom .bel{min-height:1.4em} .stroom .bel .cursor{display:inline-block;width:.55em;height:1em;vertical-align:-.12em; background:currentColor;margin-left:.06em;animation:knipper 1.05s steps(1) infinite} @keyframes knipper{0%,49%{opacity:1}50%,100%{opacity:0}} .stroom .rij{transition:background-color .4s ease,border-color .4s ease,color .4s ease} .stroom .rij.lezen{background:var(--inkt-licht);color:var(--papier);border-color:var(--inkt-licht)} .stroom .antwoord w{opacity:0;transition:opacity .34s ease} .stroom .antwoord w.aan{opacity:1} @media(prefers-reduced-motion:reduce){ .stroom .bel .cursor{display:none} .stroom .antwoord w{opacity:1} } /* ---- vijf manieren om de rekenmachine neer te zetten ---- De som blijft altijd dezelfde, alleen de plaatsing verandert. "naast" is de opzet waarmee het begon: schuiven links, uitkomst rechts. */ /* Het kopje boven een antwoord is geen bijschrift maar de tegenstelling zelf. Op 11,5 pixels mono droeg het niets: twee even zware regeltjes waar je overheen leest. Nu in de kopletter, en het onderscheidende woord voorop. Links gedempt, rechts volle inkt, zodat het verschil er al staat voordat je de antwoorden vergelijkt. */ /* Staat een uitspraak middenin een kolom en niet bovenaan, dan heeft hij lucht nodig om als eigen trede te lezen in plaats van als een dikke alinea. */ .duo-kant .duo-tekst{margin:clamp(24px,3vw,36px) 0 clamp(16px,2vw,24px)} .duo-kant > .duo-tekst:first-child{margin-top:0} .duo-tekst{margin:0;font-family:var(--f-display);font-weight:var(--disp-w); font-size:var(--t-sub);line-height:1.3;letter-spacing:var(--kop-ls);max-width:44ch} .duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,64px)} .duo-kant{min-width:0} /* Is de ene kant een lange foto en de andere korte tekst, dan hangt de tekst bovenaan en blijft er onderaan een gat. Op het midden leest het als één blok in plaats van als twee losse kolommen. */ .duo.midden{align-items:center} /* De twee kanten omgedraaid: de kop rechts, de tekst links. Alleen zolang ze naast elkaar staan. Vallen ze onder elkaar, dan gaat de kop weer voorop, want dan is de volgorde in de code ook de volgorde van het lezen. */ @media(min-width:761px){ .duo.omgedraaid > .duo-kant:first-child{order:2} .duo.omgedraaid > .duo-kant:last-child{order:1} } /* Links geen kader en geen vulling. Dat kader maakte er een afgebakend object van, en op cremepapier is een wit vlak maar 14 procent lichter, dus het linker antwoord won het van het rechter. Precies verkeerd om. Nu is rechts het enige echte object op het scherm en zweeft links er als los concept naast. De binnenruimte blijft gelijk, anders staan de twee antwoorden niet meer op dezelfde regel. */ /* De mailkop. Twee regels met een haarlijn eronder, en dat is genoeg: wie dit ziet weet dat het een mail is. Een nagebouwd Gmail-venster met knopjes zou het antwoord maken tot een schermafdruk van iemand anders' product, en dat is precies wat deze pagina niet is. Beide kanten krijgen dezelfde kop, want het is dezelfde mail aan dezelfde cliënt. Alleen het antwoord verschilt. */ /* Onder elkaar zie je ze niet meer in een oogopslag, en dat is precies waar dit blok het van moet hebben. Vandaar dat de labels op een telefoon zwaarder worden: die moeten dan het werk doen dat de nevenschikking niet meer doet. */ @media(max-width:760px){ .duo{grid-template-columns:1fr;gap:clamp(28px,5vw,38px)} } /* Nergens stond dat je aan de schuiven mag trekken. Zonder die regel is het voor wie er niet toevallig op klikt gewoon een tabelletje met vaste getallen. De formulering komt uit scan.html, waar dezelfde schuiven staan, zodat het op beide plekken hetzelfde heet. */ .schuif-uitleg{margin:0 0 clamp(20px,2.6vh,30px);font-family:var(--label-f); font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;opacity:.72} /* De vervolgstap hangt aan de rekenhulp en niet aan de prijs. Dit is wat TravelPerk en Zendesk doen: je rekent uit wat het probleem je kost, en wat er dan volgt is een gesprek of een gratis stap, geen bedrag. Een prijs op datzelfde moment maakt van een schrikmoment een koopmoment, en het zet twee bedragen naast elkaar die dan als een opbrengstbelofte gaan lezen. De prijs houdt daarom zijn eigen sectie eronder. Een haarlijn en geen gevuld blok, want gevulde vlakken staan niet in dit systeem. */ .scan-balk{margin:clamp(28px,3.6vh,44px) 0 0;padding-top:clamp(22px,2.8vh,30px); border-top:1px solid var(--lijn-donker); display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:clamp(16px,2.2vw,32px)} .licht .scan-balk{border-top-color:var(--lijn-licht)} .scan-tekst{margin:0;max-width:42ch;font-size:var(--t-tekst);line-height:1.55} .scan-knop{margin:0} @media(max-width:620px){.scan-balk{display:block} .scan-knop{margin-top:clamp(18px,2.4vh,26px)}} /* In de kaart-variant loopt de haarlijn door tot de rand van het vak, zoals de vervolgbalk bij TravelPerk over de volle breedte van hun kader loopt. De negatieve marges halen de binnenruimte van het vak weg en de padding zet hem er zelf weer bij. Alleen links en rechts. Hetzelfde onderaan is geprobeerd en gaf twintig pixels overloop: gemeten scrollHeight 762 tegen clientHeight 742. Zonder een gevuld vlak zie je dat aansluiten toch niet, dus het is de moeite en het risico niet waard. */ [data-reken="kaart"] .scan-balk{ margin-left:calc(-1 * clamp(26px,3.2vw,42px)); margin-right:calc(-1 * clamp(26px,3.2vw,42px)); padding-left:clamp(26px,3.2vw,42px); padding-right:clamp(26px,3.2vw,42px)} /* de uitkomst in een omlijst vak, zodat het los komt van de schuiven */ [data-reken="kaart"] .uitkomst-kolom{border:1px solid var(--rand-donker); border-radius:var(--r-vlak);padding:clamp(26px,3.2vw,42px)} [data-reken="kaart"] .licht .uitkomst-kolom{border-color:var(--rand-licht)} [data-reken="kaart"] .steldat{border-top:none;padding-top:0} /* het bedrag wint, de uren worden het bijschrift. Harder, en het werkt alleen als je er direct een prijs onder zet, want anders is het alleen bang maken */ /* de som als zin: zij leest wat ze zelf doet, en schuift dan aan haar eigen woorden. Dit is de enige variant waarin de getallen in een zin staan en niet in een formulier */ .reken-zin{display:none} /* de getallen staan al in de zin, dus onder de schuif hoeft alleen nog te staan wáár je aan draait. Drie naamloze schuiven is een raadspel */ /* De brug naar de prijs. De aanname staat er hardop boven, want de helft is een schatting en geen meting; zodra er pilots zijn gedraaid komt hier een echt getal. En het eindigt op een vraag, zodat het prijsblok eronder een antwoord is op iets wat zij twee tellen eerder zelf heeft gelezen. */ .steldat{margin:clamp(28px,3.6vh,46px) 0 0;padding-top:clamp(22px,2.8vh,34px); border-top:1px solid var(--lijn-donker);max-width:42ch} .licht .steldat{border-top-color:var(--lijn-licht)} .stel-aanname{margin:0;font-family:var(--label-f);font-size:var(--t-label);letter-spacing:.12em; text-transform:uppercase;opacity:.6;max-width:none} .stel-uitkomst{margin:14px 0 0;font-size:var(--t-lead);line-height:1.4;max-width:none} .stel-vraag{margin:clamp(20px,2.6vh,30px) 0 0;font-family:var(--f-display); font-weight:var(--disp-w);font-size:var(--t-sub);line-height:1.15; letter-spacing:var(--kop-ls);max-width:none} /* elk streepje is een uur. Je ziet het blok groeien terwijl je schuift. */ .uren{display:flex;flex-wrap:wrap;gap:5px;margin-top:clamp(26px,3.4vh,40px); max-width:100%} .uren span{width:9px;height:9px;background:currentColor;opacity:.1; transition:opacity .28s ease} .uren span.aan{opacity:.8} .uren span.weg{display:none} /* ============ de drieslag als eigen lichte baan: na het donkere technische blok een adempauze waarin alleen de belofte staat. Drie regels, elk van links naar rechts open, want het zijn drie stappen. */ .drieslag-baan{text-align:center} .drieslag-groot{font-family:var(--f-display);font-weight:var(--disp-w); font-size:var(--t-mega);line-height:1.04;letter-spacing:var(--kop-ls); margin:0 auto;max-width:22ch;text-wrap:balance} .drieslag-groot i{display:block} /* de slotregel is geen vierde stap maar de uitkomst. Dat verschil zit in de witruimte erboven, niet meer in de timing: elke regel komt op dezelfde afstand na de vorige */ .drieslag-groot i.slot{margin-top:.4em} /* De belofte hangt aan je scrollwiel, niet aan een klokje. Vier regels op een klok laten lopen werkt hier niet: hoe je ook timet, wie snel scrolt mist ze en wie stilstaat ziet ze in een keer. Nu is scrollen de knop: elke regel heeft zijn eigen stuk van de baan. De sectie is daarom hoger dan het scherm, dat overschot is het budget waarin het zich afspeelt. */ .belofte{min-height:250vh;position:relative;padding:0} .belofte-plak{position:sticky;top:0;min-height:100vh;display:flex;align-items:center; padding:clamp(72px,10vh,120px) 0} .belofte-plak > .wrap{width:100%} .belofte .veegwoorden i{clip-path:inset(0 102% -14% -3%);transition-delay:0s} .belofte .veegwoorden i.staat{clip-path:inset(0 -3% -14% -3%)} /* de knop staat altijd midden onder het blok. Zonder deze regel erft hij de leesbreedte van een gewone alinea en staat hij op breed scherm links */ .belofte .knopregel{opacity:0;transform:translateY(16px); transition:opacity .7s ease,transform .7s cubic-bezier(.18,.9,.24,1); max-width:none;margin-left:auto;margin-right:auto;text-align:center} .belofte .knopregel.staat{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .belofte{min-height:0} .belofte-plak{position:static;min-height:0} .belofte .veegwoorden i{clip-path:none} .belofte .knopregel{opacity:1;transform:none} } .veegwoorden.traag i:nth-child(2){--eigen:.34s} .veegwoorden.traag i:nth-child(3){--eigen:.68s} .veegwoorden.traag i:nth-child(4){--eigen:1.02s} /* De aansluiting op de breinsectie. Die eindigt vastgezet met Stel je voor, en daarna begon hier een gewone baan met volle marge: dat las als een los blok. Nu weinig lucht, een haarlijn die van boven naar beneden doorloopt, en de panelen komen als geheel omhoog terwijl ze openvegen. */ [data-ruimte] .baan.stroom-baan{padding-top:clamp(18px,2.6vh,40px)} .brug{width:1px;height:clamp(48px,7vh,92px);margin:0 auto clamp(26px,3.6vh,48px); background:var(--lijn-donker);transform-origin:top;transform:scaleY(0); transition:transform .8s cubic-bezier(.32,0,.14,1)} .licht .brug{background:var(--lijn-licht)} .opkomend.zichtbaar .brug{transform:scaleY(1)} @media(prefers-reduced-motion:reduce){.brug{transform:scaleY(1);transition:none}} /* ============ de stroom: vragen, lezen, antwoorden ============ Drie panelen naast elkaar die van links naar rechts openvegen, elk in een eigen trap van het palet: papier, tweede papier, donkere baan. Dat is de licht-naar-donker-trap uit de referentie zonder dat er kleur bij komt. */ .stroom{display:grid;grid-template-columns:repeat(3,1fr);margin-top:0; border:1px solid var(--rand-licht);overflow:hidden} .donker .stroom{border-color:var(--rand-donker)} .paneel-l, .paneel-m, .paneel-r{padding:clamp(24px,3vw,40px);display:flex;flex-direction:column; min-height:clamp(230px,32vh,330px);text-align:left} .paneel-l{background:var(--papier);color:var(--inkt-licht)} .paneel-m{background:color-mix(in srgb, var(--inkt-licht) 6%, var(--papier)); color:var(--inkt-licht); border-left:1px solid var(--rand-licht);border-right:1px solid var(--rand-licht)} .paneel-r{background:var(--mahonie);color:var(--inkt-donker)} .stroom .kopje{font-family:var(--label-f);font-size:var(--t-label);letter-spacing:.14em; text-transform:uppercase;margin:0 0 clamp(18px,2.2vh,26px)} .stroom .kopje b{font-weight:700} .stroom .onder{margin:auto 0 0;font-family:var(--label-f);font-size:var(--t-mini);letter-spacing:.06em; text-transform:uppercase;line-height:1.7;opacity:.78} /* de vraag als gevuld blokje, zoals in de referentie */ .stroom .bel{align-self:flex-start;margin:0;padding:14px 20px; background:var(--inkt-licht);color:var(--papier);font-weight:600;font-size:var(--t-tekst);max-width:none} .stroom .rijen{display:flex;flex-direction:column;gap:12px;margin:0} .stroom .rij{font-family:var(--label-f);font-size:var(--t-klein);padding:12px 16px; border:1px solid var(--rand-licht);background:var(--papier)} .stroom .antwoord{margin:0;font-size:var(--t-tekst);line-height:1.55;max-width:none} .stroom-voet{margin:clamp(20px,2.6vh,32px) 0 0;font-family:var(--label-f);font-size:var(--t-label); letter-spacing:.1em;text-transform:uppercase;text-align:center;max-width:none;opacity:.7} @media(max-width:900px){ .stroom{grid-template-columns:1fr} .paneel-m{border-left:none;border-right:none; border-top:1px solid var(--rand-licht);border-bottom:1px solid var(--rand-licht)} .paneel-l, .paneel-m, .paneel-r{min-height:0} } /* Het label van het paneel dat aan de beurt is komt iets omhoog en wordt groter, en zakt terug zodra het volgende paneel aan de beurt is. Eerst 01, dan 02, dan 03. Een transformatie en geen grotere letter, want dan schuift er niets onder het label en blijft de rest van het paneel stil. Eva op 2 september: geen kop erboven, alleen dit. */ .stroom .kopje{transition:transform .5s cubic-bezier(.2,.7,.2,1);transform-origin:left center} .stroom .aan-de-beurt .kopje{transform:translateY(-4px) scale(1.34)} @media(prefers-reduced-motion:reduce){.stroom .aan-de-beurt .kopje{transform:none}} /* Het paneel waar de cyclus mee bezig is blijft vol, de andere twee zakken weg. Zonder dit staan alle drie de panelen altijd even helder en vertelt niets je waar je moet kijken, en dan is het lezen van de map voorbij voordat je oog er is. .geleid staat alleen op het blok terwijl de cyclus loopt, dus in rust en op een pagina zonder JS blijft alles vol staan. De :not() maakt deze regels specifieker dan .opkomend .op.veeg, dat opacity op 1 zet voor het openvegen. Zonder dat verschil wint die. De naam is niet .bezig, want die bestaat al als statuspil met een eigen positie en ronding. Dat maakte het middelste paneel een witte blob. */ .stroom .paneel-l, .stroom .paneel-m, .stroom .paneel-r{transition:opacity .5s ease} .stroom.geleid .paneel-l:not(.aan-de-beurt), .stroom.geleid .paneel-m:not(.aan-de-beurt), .stroom.geleid .paneel-r:not(.aan-de-beurt){opacity:.34} @media(prefers-reduced-motion:reduce){ .stroom.geleid .paneel-l:not(.aan-de-beurt), .stroom.geleid .paneel-m:not(.aan-de-beurt), .stroom.geleid .paneel-r:not(.aan-de-beurt){opacity:1} } /* van links naar rechts opengeveegd in plaats van omhoog komend */ .opkomend .op.veeg{opacity:1;transform:none;clip-path:inset(0 100% 0 0); transition:clip-path .78s cubic-bezier(.32,0,.14,1);transition-delay:var(--stap,0s)} .opkomend.zichtbaar .op.veeg{clip-path:inset(0 0 0 0)} @media(prefers-reduced-motion:reduce){ .opkomend .op.veeg{clip-path:none;transition:none} } /* ============ opkomen bij het scrollen ============ Elk stuk komt na het vorige omhoog, niet alles tegelijk. Een sectie krijgt .opkomend, de losse stukken krijgen .op. De vertraging wordt per stuk gezet. Het gebeurt een keer, niet elke keer dat je terugscrolt: heen en weer knipperende tekst is vermoeiender dan geen animatie. */ .opkomend .op{opacity:0;transform:translateY(20px); transition:opacity .8s cubic-bezier(.18,.9,.24,1),transform .8s cubic-bezier(.18,.9,.24,1); transition-delay:var(--stap,0s)} .opkomend.zichtbaar .op{opacity:1;transform:none} /* Een kop die van links open veegt doet niet ook nog de fade. Anders beweegt dezelfde tekst twee kanten op tegelijk en wordt het onrustig. Deze regel stond eerst boven bij de veegwoorden zelf, en dus boven .opkomend .op. Even specifiek, maar eerder in het bestand, dus hij verloor en de fade liep alsnog mee. Nu staat hij erna en wint hij. */ .opkomend .veegwoorden{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .opkomend .op{opacity:1;transform:none;transition:none}} /* ============ het ritme van de banen ============ Afwisselend licht en donker is wat Amrit en 11x doen. Cohere doet het anders: na de hero is alles licht, en alleen de voet is donker. Dat lost hier op door de donkere tokens binnen die secties te herdefinieren, zodat elke bestaande regel vanzelf de lichte waarde pakt. */ /* De missie doet hier niet aan mee. Elke andere donkere baan is een kleurvlak en kan dus zonder bezwaar licht worden, maar de missie heeft een nachtfoto als achtergrond. Klapt die mee om, dan staat er zwarte tekst op een zwarte berg. Gezien op 24 augustus, meteen nadat de cohere-voorkeuze aan ging. */ [data-uitlijning="midden"] .baan .label{text-align:center;margin-bottom:38px} [data-uitlijning="midden"] .baan .kop{text-align:center;margin-left:auto;margin-right:auto;max-width:20ch} [data-uitlijning="midden"] .baan > .wrap > p, [data-uitlijning="midden"] .moment p{margin-left:auto;margin-right:auto;text-align:center} [data-uitlijning="midden"] .moment .kop{text-align:center;margin-left:auto;margin-right:auto} [data-ruimte="ruim"] .baan > .wrap > p, [data-ruimte="ruim"] .moment p, [data-ruimte="ruim"] .missie-verhaal p{font-size:var(--t-groot);line-height:1.65} [data-ruimte] .missie-verhaal p.eerste{font-size:var(--t-lead);line-height:1.5} /* De grote openingszin moet hier ook langs, en dat is geen overdaad. De regel hierboven zet de maat van élke alinea die rechtstreeks in een baan staat, en hij is met vier klassen sterker dan het kale .zin. Zet je die zin dus buiten de hero neer, dan krimpt hij naar 18,5 pixels. Gemeten op de werkwijze- pagina: een openingszin van 62 pixels stond er als lopende tekst. */ [data-ruimte] .baan > .wrap > p.zin{font-size:var(--t-zin); line-height:1.04;letter-spacing:var(--zin-ls);max-width:22ch;text-wrap:balance} [data-ruimte="ruim"] .baan{padding:clamp(88px,12vw,150px) 0} .diagram{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:44px; background:var(--lijn-licht);border-top:1px solid var(--lijn-licht)} .donker .diagram{background:var(--lijn-donker);border-top-color:var(--lijn-donker)} @media(max-width:860px){.diagram{grid-template-columns:1fr}} .vak{padding:26px;background:var(--papier);text-align:left} .donker .vak{background:var(--mahonie)} .vak .stap-n{font-family:var(--label-f);font-size:var(--t-mini);letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px} .licht .vak .stap-n{color:var(--acc-licht)} .donker .vak .stap-n{color:var(--acc-donker)} .vak .vraag{font-family:var(--label-f);font-size:var(--t-fijn);line-height:1.6;padding:12px 14px; border:1px solid var(--rand-licht);margin-bottom:16px} .donker .vak .vraag{border-color:var(--rand-donker)} .vak .paden{font-family:var(--label-f);font-size:var(--t-label);line-height:1.85;margin-bottom:16px} .vak p{font-size:var(--t-klein);line-height:1.6;margin:0 0 14px;text-align:left} .vak .voet{font-family:var(--label-f);font-size:var(--t-mini);letter-spacing:.06em;line-height:1.6; padding-top:14px;border-top:1px solid var(--lijn-licht)} .donker .vak .voet{border-top-color:var(--lijn-donker)} .drieslag{margin-top:36px;font-family:var(--f-display);font-size:var(--t-sub);line-height:1.2} .reken{margin-top:34px;max-width:520px} [data-uitlijning="midden"] .reken{margin-left:auto;margin-right:auto} .reken label{display:block;font-size:var(--t-klein);margin-bottom:8px;text-align:left} .reken input[type=range]{width:100%;margin-bottom:22px;accent-color:var(--acc-licht)} .uitkomst{font-family:var(--f-display);font-size:var(--t-cijfer);line-height:1.15;margin:10px 0 0} .prijs{margin-top:38px;max-width:620px;text-align:left} [data-uitlijning="midden"] .prijs{margin-left:auto;margin-right:auto} .bedrag{font-family:var(--f-display);font-size:var(--t-cijfer);line-height:1.1;margin:0 0 6px} .prijs ul{list-style:none;padding:0;margin:22px 0} .prijs li{padding:11px 0;border-bottom:1px solid var(--lijn-licht);font-size:var(--t-klein)} .donker .prijs li{border-bottom-color:var(--lijn-donker)} .gratis{font-size:var(--t-tekst);margin-bottom:30px} .meta{font-family:var(--label-f);font-size:var(--t-label);letter-spacing:.04em;line-height:1.9;margin-top:26px} .voet{padding:40px 0 64px;font-size:var(--t-fijn);letter-spacing:.04em} .merk{font-family:var(--sans);font-weight:600;letter-spacing:.14em;text-transform:uppercase; font-size:var(--t-klein);color:var(--inkt-donker)} /* ============ de banner van een subpagina ============ De hero van de homepage is 96 procent van het scherm met het woordmerk op 190 pixels. Dat is de maat van een merknaam, en die verdien je maar een keer per site. Op een subpagina wordt hetzelfde blok een grote lege hal: gemeten op 1440 bij 900 was de banner 864 pixels hoog voor twee regels tekst. Hier is de paginanaam een label en draagt de zin het gewicht. */ /* ============ de verbinding ============ Wat er los ligt, komt op een plek samen. Vier dingen links, jouw tweede brein rechts, en een vonkje dat over elke draad naar het midden loopt. Geen logo's van Slack, Notion of Google, en dat is geen esthetische keuze. Een logo op een site leest als "hiermee kan ik koppelen", en de regel is dat er geen kanalen op deze site staan die niet gebouwd zijn. Hier staan Eva's eigen woorden, en die zijn wel waar. Alles in een enkele svg met een vaste viewBox, dus de tekst schaalt mee en er hoeft niets uitgerekend te worden bij het verspringen van het scherm. Het vonkje loopt over offset-path in svg-eenheden, en dat is de reden dat het in de svg zit en niet als los bolletje eroverheen. */ .verbind{width:100%;max-width:620px;margin:0 auto} .verbind svg{width:100%;height:auto;display:block;overflow:visible} .verbind .vak{fill:none;stroke:var(--lijn-donker);stroke-width:1} .licht .verbind .vak{stroke:var(--lijn-licht)} .verbind .brein{fill:var(--mahonie-2);stroke:var(--rand-donker)} .licht .verbind .brein{fill:var(--papier-2);stroke:var(--rand-licht)} .verbind .naam{font-family:var(--label-f);font-size:var(--t-mini);letter-spacing:.12em; text-transform:uppercase;fill:var(--gedempt-donker)} .licht .verbind .naam{fill:var(--gedempt-licht)} .verbind .kern{font-family:var(--f-display);font-size:var(--t-groot);letter-spacing:-.01em; fill:var(--inkt-donker)} .licht .verbind .kern{fill:var(--inkt-licht)} /* De draden op de randkleur en niet op de lijnkleur. Een lijn is een scheiding die niets betekent en mag dus zwak zijn; deze draden zijn het onderwerp van het hele beeld. Op de lijnkleur waren ze onzichtbaar en zag je alleen vier bolletjes zweven. */ .verbind .snoer{fill:none;stroke:var(--rand-donker);stroke-width:1} .licht .verbind .snoer{stroke:var(--rand-licht)} .verbind .vonk{fill:var(--inkt-donker);r:3; animation:vonkloop 3.4s cubic-bezier(.55,0,.45,1) infinite} .licht .verbind .vonk{fill:var(--inkt-licht)} .verbind .vonk:nth-of-type(2){animation-delay:.45s} .verbind .vonk:nth-of-type(3){animation-delay:.9s} .verbind .vonk:nth-of-type(4){animation-delay:1.35s} @keyframes vonkloop{ 0%{offset-distance:0%;opacity:0} 12%{opacity:1} 78%{opacity:1} 100%{offset-distance:100%;opacity:0} } /* Zet iemand minder beweging aan, dan staan de vonkjes stil aan het eind van hun draad. Dan zie je nog steeds dat alles op een plek uitkomt. */ @media(prefers-reduced-motion:reduce){ .verbind .vonk{animation:none;offset-distance:100%;opacity:1} } /* ============ de stappen met beeld ============ Links de stappen als knoppen, rechts per stap een eigen scene. Dat is de vorm die Eva aanwees bij Apollo en bij die boekingssite. De scenes zijn gebouwd en niet gefotografeerd. Een foto van Eva in een tuin laat niet zien wat er in stap drie gebeurt; een handvol kaartjes met haar eigen bestandsnamen erop wel. Alles in haarlijnen en inkt, geen gloed en geen gradient, want de referenties waar dit vandaan komt zitten met hun banen en hun schijnsel dicht tegen het AI-uniform aan. Zonder javascript staan alle scenes gewoon onder elkaar. De knoppen zijn dan koppen. Verbergen doet de JS pas als hij er ook weer bij kan. */ /* Het blok is met opzet lang. De lijst links blijft staan, de scenes rechts schuiven er per stap langs, en welke stap aan is volgt uit waar je bent. Je scrollt dus gewoon en het gaat vanzelf mee. Wat hier NIET gebeurt is de scroll overnemen. Sites die je muiswiel iets anders laten doen dan je verwacht zijn onbruikbaar met een trackpad, een schermlezer of een toetsenbord. Dit is gewone scroll met sticky erin. */ .stappen{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr); gap:clamp(30px,5vw,80px);align-items:start;text-align:left} /* De kop en de lijst plakken samen. De kop hoort bij dit blok en niet bij de sectie erboven: scroll je door de stappen, dan wil je blijven zien waar je in zit. Daarom staat hij in de linkerkolom en niet erboven. De lijst zelf blijft relative, want de wijzer en het spoor worden daarbinnen geplaatst. Het plakken zit een niveau hoger. */ .stappen .tijdlijn{position:relative} .stappen-links{position:sticky;top:clamp(96px,13vh,150px);align-self:start} [data-uitlijning="links"] .stappen-links .kop{margin-bottom:clamp(24px,3vw,40px)} /* Het doek is zo hoog als het aantal stappen. Daar zit geen inhoud in, het is alleen scrolllengte: elke stap krijgt ruim een half scherm. Het beeld zelf blijft plakken en wisselt, zodat er altijd precies één in beeld staat. Dat is het verschil met scenes die onder elkaar langsschuiven: daar zie je er twee half, en dan is het geen stap meer maar een lijst. */ .stap-doek{height:calc(var(--stappen,7) * 62vh);position:relative} .stap-plak{position:sticky;top:clamp(96px,13vh,150px)} /* de voortgangslijn: een spoor met een gevuld deel tot waar je bent */ .stappen .tijdlijn::before{content:"";position:absolute;left:9px;top:14px;bottom:14px; width:1px;background:var(--lijn-donker)} .licht .stappen .tijdlijn::before{background:var(--lijn-licht)} /* Het gevulde deel loopt uit het spoor op: bovenaan vrijwel niets, bij de wijzer volle inkt. Geen nieuwe kleur, alleen de inkt die er al is in vier sterktes. Geen overgang erop, en dat is met opzet. De hoogte volgt rechtstreeks je scrollpositie, dus hij beweegt al vloeiend. Zet je er een transitie op, dan loopt hij achter je scroll aan en voelt het traag. */ .stappen .tijdlijn::after{content:"";position:absolute;left:9px;top:14px;width:1px; height:var(--voortgang,0px); background:linear-gradient(180deg, color-mix(in srgb,var(--inkt-donker) 6%, transparent) 0%, color-mix(in srgb,var(--inkt-donker) 26%, transparent) 40%, color-mix(in srgb,var(--inkt-donker) 62%, transparent) 78%, var(--inkt-donker) 100%)} .licht .stappen .tijdlijn::after{background:linear-gradient(180deg, color-mix(in srgb,var(--inkt-licht) 6%, transparent) 0%, color-mix(in srgb,var(--inkt-licht) 26%, transparent) 40%, color-mix(in srgb,var(--inkt-licht) 62%, transparent) 78%, var(--inkt-licht) 100%)} /* De wijzer. Een blokje met een lichte ring eromheen, zoals in de referentie. De ring is een outline en geen schaduw: schaduwen staan niet in dit systeem, en dit is ook geen diepte maar een halo in dezelfde inkt. */ .stap-wijzer{position:absolute;left:5px;top:var(--wijzer,0px);width:9px;height:9px; border-radius:2px;background:var(--inkt-donker);transform:translateY(-50%); outline:5px solid color-mix(in srgb,var(--inkt-donker) 11%, transparent); pointer-events:none} .licht .stap-wijzer{background:var(--inkt-licht); outline-color:color-mix(in srgb,var(--inkt-licht) 11%, transparent)} @media(prefers-reduced-motion:reduce){.stappen .tijdlijn::after{transition:none}} /* De li is in de gewone tijdlijn een raster van drie kolommen. Hier zit er een knop in die zelf de indeling doet, dus moet de li een gewoon blok zijn. Gemeten: de knop was 120 pixels breed in een kolom van 417, en dan breken de stapnamen in tweeen. */ .stappen .tijdlijn li{display:block;padding:0} /* Geen nummers in de kantlijn hier. Naast het spoor met de wijzer werden het twee dingen die allebei zeggen waar je bent, en dan zegt geen van beide het nog. Het nummer staat nu in de scene rechts, waar het bij hoort: dit is stap zoveel, en dit is wat je dan ziet. */ .stappen .tijdlijn li::before{content:none} .stappen .tijdlijn{padding-left:clamp(22px,2.4vw,34px)} /* Het nummer blijft in de monoletter. Dat is de regel: mono voor getallen, tijden en datums, gewone letters voor tekst. Een cijferreeks in een monoletter staat recht onder elkaar, en dat is precies waar hij voor is. */ .stap-nr{display:inline-block;margin-right:14px;opacity:.5; font-family:var(--label-f);font-variant-numeric:tabular-nums} /* Alleen de naam en de tijd. De zin die eronder stond is weg: één woord staat sterker dan een woord met een uitleg eronder, en die uitleg staat toch al in de scene ernaast. Drie dingen wijken hier af van de gewone tijdlijn, en alle drie om dezelfde reden: een lijst met zeven identieke haarlijnen en mono-hoofdletters hard rechts leest als een instellingenscherm. Geen lijn per rij. Alleen boven en onder de hele lijst een haarlijn. Uit de aantekening bij Aesop: de rust komt uit witruimte, niet uit lijnen. De tijd staat direct achter de naam en niet tegen de rechterrand, in gewone kleine letters. '2 tot 3 minuten' is iemand die iets vertelt, '2 TOT 3 MINUTEN' rechts uitgelijnd is een specificatie. En de actieve regel krijgt meer lucht dan de rest. Zeven rijen van precies dezelfde hoogte is machinaal; dit ademt mee met waar je bent. */ /* Ook geen lijn boven en onder de hele lijst meer. Het spoor met de wijzer ernaast bakent het blok al af; twee kaders om hetzelfde blok is er een te veel. De rust komt uit witruimte, zoals bij Aesop. */ .stappen .tijdlijn{border:0} .stappen .tijdlijn li{border:0} .stappen .tijdlijn li:last-child{border:0} .stappen .tijdlijn button{display:flex;width:100%;text-align:left;cursor:pointer; background:none;border:0;color:inherit;font:inherit; align-items:baseline;gap:clamp(12px,1.4vw,20px);flex-wrap:wrap; padding:clamp(13px,1.7vw,19px) 0; transition:opacity .35s ease,padding .35s cubic-bezier(.3,0,.2,1)} .stappen .tijdlijn button[aria-selected="true"]{ padding-top:clamp(20px,2.6vw,30px);padding-bottom:clamp(20px,2.6vw,30px)} .stappen .tijdlijn button .tijd{white-space:nowrap; font-family:var(--sans);font-size:var(--t-klein);letter-spacing:normal; text-transform:none;opacity:.75} @media(prefers-reduced-motion:reduce){ .stappen .tijdlijn button{transition:none}} .stappen .tijdlijn button[aria-selected="false"]{opacity:.66} .stappen .tijdlijn button[aria-selected="false"]:hover{opacity:.8} /* De naam licht op als de wijzer erlangs komt. Alleen de kleur beweegt, niet de letter zelf: een naam die van maat verspringt laat de hele lijst dansen. */ .stappen .tijdlijn button{transition:opacity .35s ease} @media(prefers-reduced-motion:reduce){.stappen .tijdlijn button{transition:none}} .stap-beeld{border:1px solid var(--rand-donker);border-radius:var(--r-vlak); padding:clamp(24px,3vw,40px);min-height:clamp(280px,34vh,380px); display:flex;flex-direction:column;justify-content:center;gap:16px} .licht .stap-beeld{border-color:var(--rand-licht)} .stap-beeld{width:100%} /* Zonder javascript staan alle scenes gewoon onder elkaar. Pas als de code draait zet hij .gestuurd op het doek en verbergt hij de rest. Verbergen doe je nooit in de opmaak zelf: gaat de code stuk, dan is de tekst weg. Alleen boven de 900, en dat is een reparatie van 3 september. Onder de 900 zet de opmaak het doek op height:auto en het beeld op position:static: daar is dus geen scrollruimte meer om doorheen te lopen. De code bleef wel alles op een scene na verbergen, dus op een telefoon zag je stap 1 en verder niets, hoe ver je ook scrolde. Nu staan alle zes de scenes daar gewoon onder elkaar, precies zoals de rest van die mediaregel al bedoelde. */ @media(min-width:901px){ .gestuurd .stap-beeld{display:none} .gestuurd .stap-beeld.aan{display:flex; animation:scenein .45s cubic-bezier(.18,.9,.24,1)} } @keyframes scenein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.gestuurd .stap-beeld.aan{animation:none}} .stap-label{margin:0;font-family:var(--label-f);font-size:var(--t-mini);letter-spacing:.14em; text-transform:uppercase;color:var(--gedempt-donker)} .licht .stap-label{color:var(--gedempt-licht)} .stap-uit{margin:0;font-size:var(--t-tekst);line-height:1.55;color:var(--gedempt-donker);max-width:40ch} .licht .stap-uit{color:var(--gedempt-licht)} /* een kaartje, het bouwsteentje van bijna elke scene */ .kaartje{display:flex;align-items:baseline;justify-content:space-between;gap:16px; padding:13px 16px;border:1px solid var(--lijn-donker);border-radius:10px; font-size:var(--t-klein);line-height:1.4} .licht .kaartje{border-color:var(--lijn-licht)} .kaartje .bij{font-family:var(--label-f);font-size:var(--t-mini);letter-spacing:.1em; text-transform:uppercase;opacity:.6;white-space:nowrap} /* Een link in een kaartje is een echt tikdoel en geen link in een zin, dus die haalt de tikmaat wel. Het kaartje zelf is 44 hoog door zijn padding; de link erin was 19. Met deze regel vult hij de hoogte van zijn vak. */ .kaartje a{display:inline-flex;align-items:center;min-height:var(--raak); margin:calc((var(--raak) - 1.4em) / -2) 0} .kaartjes{display:flex;flex-direction:column;gap:9px} /* de stapel loopt iets uit de pas, zoals losse dingen op een bureau */ .kaartjes.scheef .kaartje:nth-child(2){margin-left:clamp(10px,2vw,26px)} .kaartjes.scheef .kaartje:nth-child(3){margin-left:clamp(20px,4vw,52px)} .kaartjes.scheef .kaartje:nth-child(4){margin-left:clamp(6px,1.2vw,14px)} /* het grote getal in de scene van de scan */ .stap-getal{margin:0;font-family:var(--f-display);font-weight:var(--disp-w); font-size:var(--t-cijfer);line-height:1;letter-spacing:var(--kop-ls)} /* de twee mails naast elkaar, klein */ .mini-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px} .mini{border:1px solid var(--lijn-donker);border-radius:10px;padding:14px; font-size:var(--t-fijn);line-height:1.5} .licht .mini{border-color:var(--lijn-licht)} .mini.vol{background:var(--mahonie-2)} .licht .mini.vol{background:var(--papier-2)} .mini b{display:block;font-family:var(--label-f);font-size:var(--t-mini);letter-spacing:.12em; text-transform:uppercase;opacity:.6;margin-bottom:8px;font-weight:400} /* de lege stap. Er gebeurt hier van alles, maar niet bij jou. */ .stap-beeld.leeg{align-items:center;text-align:center;border-style:dashed} .stap-beeld.leeg .stap-getal{opacity:.35} @media(max-width:900px){ .stappen{grid-template-columns:1fr;gap:clamp(24px,5vw,40px)} .stappen-links{position:static} .stap-doek{height:auto} .stap-plak{position:static} .stap-beeld{margin-bottom:clamp(20px,4vw,32px);display:flex} /* De wijzer en de tijdlijn horen bij het scrollen door het doek. Dat doek bestaat hier niet, dus de wijzer zou op nul blijven staan alsof je altijd bij stap 1 bent. Weg ermee: de stappen zijn hier gewoon een lijst boven de scenes. */ .stappen .stap-wijzer{display:none} .mini-duo{grid-template-columns:1fr} /* De stapnaam eiste 170 pixels op, en met de tijd erachter werd de rij 343 breed terwijl er 297 beschikbaar was. Gemeten op 375: de pagina liep 22 pixels uit het scherm. minmax(0,1fr) laat de naam wel krimpen. */ .stappen .tijdlijn .stap{min-width:0} } /* Een anker landt onder de vaste balk als je er niets aan doet: je springt naar het onderdeel en de kop staat achter de navigatie. scroll-margin-top geeft elk aanspringbaar onderdeel die lucht mee. */ [id]{scroll-margin-top:clamp(96px,12vh,140px)} /* Twee lichte banen achter elkaar hebben geen rand meer tussen zich. Op een pagina die helemaal licht is worden dat driehonderd pixels ononderbroken wit, en dan weet je niet meer of je in een nieuw onderdeel zit. Een haarlijn doet wat de kleurwissel eerst deed. De eerste baan krijgt hem niet, want daarboven zit de balk al. */ .baan.licht + .baan.licht{border-top:1px solid var(--lijn-licht)} /* Tikdoelen. De norm is 44 pixels; gemeten waren de navigatielinks 17 hoog, de voetlinks 19 en de uitklappers 32. Dit is geen opmaakkeuze maar een eis, en het verandert niets aan wat je ziet: alleen het aanraakvlak groeit. */ .balk a{padding-top:14px;padding-bottom:14px} .balk .sub a{padding-top:12px;padding-bottom:12px} /* Let op de volgorde: hieronder stond eerst .voet a{display:inline-block}, en die won van .voet-kolommen a{display:block} omdat hij even sterk is en later staat. Gevolg: de vier voetkolommen liepen als één sliert door. Het tikvlak krijgen ze nu zonder aan display te komen. */ .voet-kolommen a{padding-top:12px;padding-bottom:12px} .voet-regel a, .voet-rij a{display:inline-block;padding-top:13px;padding-bottom:13px} /* De laatste vier die nog onder de norm zaten: de knop in de balk, de tekstlink naast een knop, de doorlink in het aanbod en het pijltje van het formulier. Gemeten waren ze 37, 25, 36 en 17 pixels hoog. */ .balk a.balk-cta{padding-top:13px;padding-bottom:13px} .knop-tweede{padding-top:12px;padding-bottom:12px;display:inline-block} /* .genummerd .door staat verderop, bij zijn eigen opmaak, want die regel staat later en wint */ .voet-brief button{min-height:44px;min-width:44px} /* ============ de gloed ============ Dezelfde achtergrond als het slotblok op de homepage: drie zachte vlekken die langzaam langs elkaar drijven, met een korrel eroverheen. Hij stond vast aan dat ene blok; hier is hij losgetrokken zodat elke lichte baan hem kan krijgen. De regels erboven zijn uitgebreid in plaats van gekopieerd, zodat er maar een plek is waar die vlekken beschreven staan. Twee kopieen lopen uit elkaar. De vlekken staan stil bij minder beweging; die regel staat al bij het slotblok en geldt hier dus ook. */ .gloed-baan{position:relative;overflow:hidden} .gloed{position:absolute;inset:0;pointer-events:none} .gloed-baan > .wrap{position:relative;z-index:2} /* ============ de genummerde lijst ============ Voor het aanbod. De vorm komt van de pagina What we build van Neurova, die Eva aanwees: een nummer in de kantlijn, een korte naam, een vetgedrukte belofte en twee zinnen. Meer niet. Wel haarlijnen tussen de onderdelen, anders dan in de trajectlijst. Daar waren het zeven regels en werd het een tabel; hier zijn het zes alinea's en is de lijn precies wat er nodig is om ze uit elkaar te houden. */ .genummerd{list-style:none;margin:clamp(30px,4vw,52px) 0 0;padding:0;text-align:left} .genummerd > li{position:relative;padding:clamp(26px,3.2vw,40px) 0 clamp(26px,3.2vw,40px) clamp(0px,0vw,0px);border-top:1px solid var(--lijn-licht)} .donker .genummerd > li{border-top-color:var(--lijn-donker)} .genummerd > li:last-child{border-bottom:1px solid var(--lijn-licht)} .donker .genummerd > li:last-child{border-bottom-color:var(--lijn-donker)} .genummerd .nr{display:block;margin:0 0 10px;font-family:var(--label-f);font-size:var(--t-mini); letter-spacing:.14em;color:var(--gedempt-licht)} .donker .genummerd .nr{color:var(--gedempt-donker)} .genummerd h3{margin:0 0 clamp(10px,1.2vw,14px);font-family:var(--f-display); font-weight:var(--disp-w);font-size:var(--t-sub);line-height:1.15; letter-spacing:var(--kop-ls)} /* 50ch en niet 66. De eenheid ch is de breedte van het cijfer nul, en in DM Sans is dat 11,3 pixels terwijl een gemiddelde letter er 8,3 breed is. 66ch leverde dus regels van negentig tekens op. Gemeten in de pagina. 50ch komt uit op ongeveer achtenzestig tekens, en dat is de norm. */ .genummerd p{margin:0;max-width:50ch;font-size:var(--t-tekst);line-height:1.62; color:var(--gedempt-licht);text-align:left} .donker .genummerd p{color:var(--gedempt-donker)} .genummerd p strong{color:var(--inkt-licht);font-weight:500} .donker .genummerd p strong{color:var(--inkt-donker)} .genummerd .door{display:inline-block;margin:clamp(14px,1.6vw,20px) 0 0; color:var(--acc-licht);text-decoration:underline;text-underline-offset:4px; font-size:var(--t-klein);padding:11px 0} /* 11 en niet 6: de regel hierboven bij de tikvlakken werd door deze overschreven, en dan bleef de link 35 hoog; nu 45 */ .donker .genummerd .door{color:var(--acc-donker)} /* Op een breed scherm staat het nummer in de kantlijn naast de naam, zoals bij Neurova. Daaronder erboven, want een kantlijn van honderd pixels op een telefoon is een kantlijn die de tekst opeet. */ @media(min-width:900px){ .genummerd > li{padding-left:clamp(70px,7vw,110px)} .genummerd .nr{position:absolute;left:0;top:clamp(26px,3.2vw,40px);margin:0} } /* ============ de stappenopsomming ============ Voor 'Hoe het gaat': genummerd, met een vetgedrukte aanhef per stap. Dit is geen tijdlijn met tijden, dus geen spoor en geen wijzer, alleen een lijst. */ /* 48ch, om dezelfde reden als bij de genummerde lijst hierboven: ch is breder dan een gemiddelde letter. Plus de inspringing voor de nummers, die niet in de maat meetelt. */ .stappenlijst{margin:clamp(24px,3vw,38px) 0 0;padding-left:1.4em;text-align:left; max-width:48ch} .stappenlijst li{margin:0 0 clamp(14px,1.6vw,20px);font-size:var(--t-tekst);line-height:1.62; color:var(--gedempt-licht)} .donker .stappenlijst li{color:var(--gedempt-donker)} .stappenlijst li::marker{font-family:var(--label-f);font-size:var(--t-label); color:var(--gedempt-licht)} .donker .stappenlijst li::marker{color:var(--gedempt-donker)} .stappenlijst strong{color:var(--inkt-licht);font-weight:500} .donker .stappenlijst strong{color:var(--inkt-donker)} /* Dezelfde lijst, maar als tijdlijn: geen nummers, een lijn links met een stip per stap. Zelfde maten als .vragen-tijdlijn op de over-pagina, zodat de twee er als familie uitzien. Eva op 2 september, voor "Hoe het gaat" op Aanbod: niet zo precies met nummers, wel een paar puntjes. */ .stappenlijst.stippen{--tl-in:clamp(26px,3vw,46px);--tl-stip:7px; list-style:none;position:relative;padding-left:var(--tl-in)} .stappenlijst.stippen::before{content:"";position:absolute;left:0;top:.8em;bottom:.8em; width:1px;background:var(--lijn-licht)} .donker .stappenlijst.stippen::before{background:var(--lijn-donker)} .stappenlijst.stippen li{position:relative} .stappenlijst.stippen li::before{content:"";position:absolute; left:calc(-1 * var(--tl-in) - var(--tl-stip)/2 + .5px); top:calc(.81em - var(--tl-stip)/2); width:var(--tl-stip);height:var(--tl-stip);border-radius:50%; background:var(--gedempt-licht)} .donker .stappenlijst.stippen li::before{background:var(--gedempt-donker)} /* In een gecentreerd blok staat de lijst als geheel in het midden, en de tekst erin blijft links, want gecentreerde lopende tekst leest slecht. De zin die erop volgt gaat wel mee naar het midden. */ .gecentreerd > .wrap > .stappenlijst{margin-left:auto;margin-right:auto} /* Een gewone alinea in een gecentreerd blok stond met zijn tekst in het midden maar zijn vak links, want p heeft een max-width van 60ch zonder auto-marges. Dan hangt de tekst scheef. Het vak gaat nu ook naar het midden. */ .gecentreerd > .wrap > p{margin-left:auto;margin-right:auto} .gecentreerd > .wrap > .stappenlijst + p{margin-left:auto;margin-right:auto;text-align:center} /* Een gewone link in lopende tekst. Stond tot 2 september als eigen stijlblok op Over en op Contact, en op de andere pagina's was hij browserblauw. Alleen in lopende tekst (alinea, lijst, definitie, kaartje), zodat de kaarten op de blog en de knoppen er niet onder vallen. */ main :is(p, li, dd, .kaartje) a:not(.knop):not(.knop-tweede){color:inherit;text-decoration:underline; text-underline-offset:4px;text-decoration-thickness:1px} main :is(p, li, dd, .kaartje) a:not(.knop):not(.knop-tweede):hover{opacity:.65} /* De handtekening: de zakelijke gegevens als een stille regel onder een uitnodiging, in de monoletter. Op Contact, in plaats van een baan met vier kaartjes. */ .handtekening{margin:clamp(28px,3.6vw,48px) 0 0;font-family:var(--label-f);font-size:var(--t-label); letter-spacing:.08em;color:var(--gedempt-licht);max-width:none} .donker .handtekening{color:var(--gedempt-donker)} .handtekening a{color:inherit;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px; display:inline-block;padding:11px 0;margin:-11px 0} /* tikvlak op de telefoon */ /* ============ de stappen op een rij ============ Vijf stappen van links naar rechts, met een lijnteken per stap en een dunne lijn ertussen. Zelfde nummer- en kopstijl als .genummerd, zodat "Hoe het gaat" en "De zes" op Aanbod als familie lezen. Op een smal scherm twee naast elkaar, op een telefoon onder elkaar, en dan gaat de lijn ertussen weg. */ .stappen-rij{--rij-gap:clamp(18px,2.4vw,36px);--rij-ikoon:44px; list-style:none;margin:clamp(30px,4vw,52px) auto 0;padding:0;text-align:center; max-width:1180px;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--rij-gap)} .stappen-rij li{position:relative;margin:0;padding:0} .stappen-rij .ikoon{position:relative;display:grid;place-items:center; width:var(--rij-ikoon);height:var(--rij-ikoon);border-radius:12px;margin:0 auto 18px; background:color-mix(in srgb, var(--rand-licht) 20%, var(--papier));color:var(--inkt-licht)} .donker .stappen-rij .ikoon{background:color-mix(in srgb, var(--rand-donker) 30%, transparent);color:var(--inkt-donker)} .stappen-rij .ikoon svg{width:22px;height:22px;fill:none;stroke:currentColor; stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} /* De lijn loopt van de rechterkant van dit teken naar de linkerkant van het volgende. Beide tekens staan midden in hun kolom, dus: vanaf het midden plus een half teken, tot aan het midden van de buurkolom min een half teken. De percentages rekenen vanaf de breedte van de eigen kolom. */ .stappen-rij li:not(:last-child)::before{content:"";position:absolute; top:calc(var(--rij-ikoon)/2); left:calc(50% + var(--rij-ikoon)/2 + 12px); right:calc(-50% - var(--rij-gap) + var(--rij-ikoon)/2 + 12px); height:1px;background:var(--lijn-licht)} .donker .stappen-rij li:not(:last-child)::before{background:var(--lijn-donker)} .stappen-rij .nr{display:block;margin:0 0 6px;font-family:var(--label-f);font-size:var(--t-mini); letter-spacing:.14em;color:var(--gedempt-licht)} .donker .stappen-rij .nr{color:var(--gedempt-donker)} .stappen-rij h3{margin:0 0 8px;font-family:var(--f-display);font-weight:var(--disp-w); font-size:var(--t-titel);line-height:1.15;letter-spacing:var(--kop-ls)} .stappen-rij p{margin:0;max-width:none;font-size:var(--t-klein);line-height:1.55;color:var(--gedempt-licht)} /* de zin na de rij kreeg geen lucht: de laatste alinea van de rij heeft margin 0, dus die twee plakten aan elkaar */ .stappen-rij + p{margin-top:clamp(30px,4vw,52px)} .donker .stappen-rij p{color:var(--gedempt-donker)} @media(max-width:900px){ .stappen-rij{grid-template-columns:1fr 1fr;row-gap:clamp(26px,4vw,40px)} .stappen-rij li:not(:last-child)::before{content:none} } @media(max-width:560px){.stappen-rij{grid-template-columns:1fr}} /* ============ het slotkader ============ Het bordje aan het eind van de aanbodpagina: een omlijnd vak met een vraag, een zin en de knop. Bij Neurova staat het gevuld; hier omlijnd, want gevulde vlakken staan niet in dit systeem. */ .slotkader{margin:clamp(44px,5.5vw,76px) auto 0;max-width:640px;text-align:center; border:1px solid var(--rand-licht);border-radius:var(--r-vlak); padding:clamp(30px,4vw,52px)} .donker .slotkader{border-color:var(--rand-donker)} .slotkader h2{margin:0 0 12px;font-family:var(--f-display);font-weight:var(--disp-w); font-size:var(--t-sub);line-height:1.2;letter-spacing:var(--kop-ls); text-align:center;max-width:none} .slotkader p{margin:0 auto clamp(22px,2.6vw,32px);max-width:46ch;text-align:center; color:var(--gedempt-licht)} .donker .slotkader p{color:var(--gedempt-donker)} .slotkader .knop{margin:0} .slotkader .klein{margin:14px 0 0;font-size:var(--t-klein)} /* ============ de vragen ============ Links een korte aanleiding met de knop, rechts de vragen. Dat is de vorm van de FAQ die Eva aanwees: monolabels in hoofdletters, haarlijnen ertussen, en een plusje rechts dat een minnetje wordt. Gebouwd op
en en niet op eigen javascript. Dat opent en sluit vanzelf, werkt met een toetsenbord, wordt goed voorgelezen, en het antwoord staat gewoon in de pagina als er geen JS draait. Voor een blok dat tekst verbergt is dat geen luxe maar de enige verantwoorde keuze. Het tikdoel is 56 pixels hoog. De norm is 44, en de rest van deze site haalt die nog niet. */ /* Gestapeld is de grondvorm, twee kolommen zijn de uitzondering voor breed. Op de telefoon staan de vragen dus onder de intro, op een laptop rechts ernaast. Waarom in deze volgorde en niet andersom: het stond eerst standaard op twee kolommen, met een mediaregel eronder die het op smal weer op een zette. Ging die regel om wat voor reden dan ook niet op, dan bleef de tweekolomsverdeling staan. De linkerkolom eist minimaal 220 pixels, die past nog net op een telefoon, en de vragen werden naar een kolom van nul pixels geduwd, buiten het scherm. Gemeten op 3 september op 375 breed: de vragen stonden op x=380 met breedte 0 en de pagina schoof horizontaal. Zo kan dat niet meer: valt de uitzondering weg, dan blijft het gestapelde resultaat over, en dat is leesbaar. */ .vragen-blok{display:grid;grid-template-columns:1fr; gap:clamp(24px,5vw,38px);align-items:start;text-align:left} @media(min-width:821px){ .vragen-blok{grid-template-columns:minmax(220px,.85fr) minmax(0,1.7fr); gap:clamp(28px,5vw,80px)} /* Een ruimere variant, voor een blok met veel lucht ernaast. Stond op werkwijze.html als inline stijl op het element zelf, en dat was precies het probleem: een inline stijl wint van elke regel hier, ook van de mediaregel die het op een telefoon op een kolom zet. Gevolg: de linkerkolom eiste zijn 300 pixels op en de vragen hielden nul over, buiten het scherm. Als klasse doet hij hetzelfde op breed en laat hij smal met rust. */ .vragen-blok.ruim{grid-template-columns:minmax(300px,.85fr) minmax(0,1.5fr); gap:clamp(56px,9vw,150px)} } .vragen-intro{text-align:left} [data-uitlijning="midden"] .vragen-intro .kop{text-align:left;margin-left:0;margin-right:0; max-width:14ch} [data-uitlijning="midden"] .vragen-intro p{text-align:left;margin-left:0;margin-right:0} .vraag{border-top:1px solid var(--lijn-licht)} .donker .vraag{border-top-color:var(--lijn-donker)} .vraag:last-child{border-bottom:1px solid var(--lijn-licht)} .donker .vraag:last-child{border-bottom-color:var(--lijn-donker)} .vraag summary{list-style:none;cursor:pointer;position:relative; padding:19px 44px 19px 0;font-family:var(--label-f);font-size:var(--t-label); letter-spacing:.1em;text-transform:uppercase;line-height:1.5} .vraag summary::-webkit-details-marker{display:none} .vraag summary::after{content:"+";position:absolute;right:2px;top:50%; transform:translateY(-50%);font-size:var(--t-tekst);line-height:1;opacity:.6} .vraag[open] summary::after{content:"\2013"} .vraag summary:hover::after{opacity:1} .vraag p{margin:0 0 22px;max-width:56ch;font-size:var(--t-tekst);line-height:1.6; color:var(--gedempt-licht);text-align:left} .donker .vraag p{color:var(--gedempt-donker)} /* ============ de vragenlijst als tijdlijn ============ LET OP de naam. Er bestaat al een .tijdlijn in deze huisstijl, voor de genummerde stappenlijst op Werkwijze. Die heeft bewust GEEN bolletjes op een lijn, zie de toelichting daar. Deze component heet daarom .vragen-tijdlijn: op 26 augustus 2026 heette hij even .tijdlijn en toen kreeg de stappenlijst op Werkwijze er een lijn bij die niemand had gevraagd. Zelfde uitklapstappen, maar op een lijn met een stip per stap. De kop blijft links staan en de lijn staat rechts, dus de tweekolomsopbouw hierboven verandert niet. De haarlijnen tussen de stappen gaan eruit: een lijn die verticaal loopt en lijnen die horizontaal lopen vechten om dezelfde aandacht, en dan leest het als een tabel in plaats van als een tijdlijn. In ruil daarvoor krijgen de stappen meer lucht, anders valt de rangorde weg met de lijnen. */ /* Eén waarde voor de inspringing en één voor de stip, allebei hier gezet en nergens anders herhaald. Dat is niet netheid maar noodzaak: stond de maat twee keer los uitgerekend, dan liep de stip 5,5 pixel naast de lijn. */ .vragen-tijdlijn{--tl-in:clamp(26px,3vw,46px);--tl-stip:7px; position:relative;padding-left:var(--tl-in)} .vragen-tijdlijn::before{content:"";position:absolute;left:0;top:1.6em;bottom:1.6em; width:1px;background:var(--lijn-licht)} .donker .vragen-tijdlijn::before{background:var(--lijn-donker)} .vragen-tijdlijn .vraag, .vragen-tijdlijn .vraag:last-child{border:none} .vragen-tijdlijn .vraag summary{padding-top:26px;padding-bottom:26px} /* De stip zit midden op de lijn: zijn hart komt op een halve pixel, en daar ligt het hart van de lijn van 1 pixel ook. */ .vragen-tijdlijn .vraag summary::before{content:"";position:absolute; left:calc(-1 * var(--tl-in) - var(--tl-stip)/2 + .5px); top:calc(50% - var(--tl-stip)/2); width:var(--tl-stip);height:var(--tl-stip);border-radius:50%; background:var(--gedempt-licht)} .donker .vragen-tijdlijn .vraag summary::before{background:var(--gedempt-donker)} /* Een open stap houdt zijn stip bij de titel, niet in het midden van de uitgeklapte tekst. */ .vragen-tijdlijn .vraag[open] summary::before{top:calc(50% - 3.5px)} /* De vraag zelf staat in monokapitalen. Op een breed scherm past hij op een of twee regels en leest hij als een label. Op een telefoon wordt dezelfde vraag drie regels kapitalen van 12 pixels met ruime spatiëring, en dat is zwaar leeswerk voor de plek waar iemand juist snel iets zoekt. Onder de 560 iets groter en minder ver uit elkaar. De kapitalen blijven, want dat is de vorm van deze site. */ @media(max-width:560px){ .vraag summary{font-size:var(--t-fijn);letter-spacing:.05em; padding-right:38px} } /* ============ de beeldbaan ============ Een foto van rand tot rand midden in de pagina, met eventueel een zin erop. Dezelfde behandeling als de paginabanner, maar lager, en zonder het grote woord. Bedoeld om een lang verhaal te laten ademen: tekst, beeld, tekst. Waarom een eigen component en niet .banner hergebruikt: de banner is 420 tot 720 pixels hoog omdat hij een pagina moet openen. Midden in een verhaal is dat een onderbreking in plaats van een adempauze. */ .beeldbaan{position:relative;display:flex;align-items:center;overflow:hidden; min-height:clamp(300px,46vh,520px); background-position:50% 42%;background-size:cover;background-repeat:no-repeat} .beeldbaan::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(20,18,16,.34) 0%,rgba(20,18,16,.30) 45%, rgba(20,18,16,.62) 100%)} .beeldbaan > .wrap{position:relative;z-index:2;width:100%} .beeldbaan .zin{max-width:24ch} /* Zonder zin erop mag de waas lichter: er hoeft niets leesbaar te blijven. */ .beeldbaan.stilbeeld::after{background:linear-gradient(180deg,rgba(20,18,16,.14),rgba(20,18,16,.24))} /* ============ plaatshouder voor beeld ============ Tijdelijk gereedschap, geen onderdeel van de huisstijl. Een gestippeld vlak met een label erin, zodat je in de pagina ziet waar een foto komt en welke. Weg zodra de foto's gekozen en ingeladen zijn. Bewust saai: geen grijs vlak dat op een echte foto lijkt, want dan ga je er overheen kijken en blijft hij staan. */ /* ============ één blok gecentreerd ============ Werkt op een gewone baan en op een beeldbaan. Voor een pagina die verder links uitgelijnd staat, maar waar één blok in het midden hoort. De kop en de tussentekst gaan mee naar het midden. Het antwoord achter de klik blijft links, want gecentreerde lopende tekst leest slecht zodra hij meer dan twee regels wordt: je oog moet elke regel opnieuw de beginplek zoeken. */ .gecentreerd > .wrap{max-width:940px;text-align:center} .gecentreerd > .wrap > .kop, .gecentreerd > .wrap > p.lead, .gecentreerd > .wrap > p.zin{margin-left:auto;margin-right:auto;text-align:center} .gecentreerd .vraag p{text-align:left} .gecentreerd .stap-foto{margin-left:auto;margin-right:auto} .plaatshouder{display:flex;align-items:center;justify-content:center;text-align:center; aspect-ratio:4/3;margin:6px 0 22px;padding:16px; border:1px dashed var(--lijn-licht);color:var(--gedempt-licht)} .donker .plaatshouder{border-color:var(--lijn-donker);color:var(--gedempt-donker)} .plaatshouder span{font-family:var(--label-f);font-size:var(--t-mini);font-weight:var(--label-w); letter-spacing:.12em;text-transform:uppercase;opacity:.75;max-width:24ch;line-height:1.8} /* De kleine plaatshouder staat nu naast polaroids, dus hij krijgt hun maat en hun vorm. Anders leest de lege plek als een groter blok dan de foto die er straks in komt, en dan klopt het ritme van de stap niet. */ .plaatshouder.klein{aspect-ratio:1/1;max-width:var(--polaroid,150px)} .plaatshouder.breed{aspect-ratio:16/7;max-width:none} /* ============ halve banen: foto en tekst tegen elkaar ============ Naar het voorbeeld van Douze. Geen kantlijn en geen tussenruimte: de foto loopt door tot de rand van het scherm en de tekst begint precies waar de foto ophoudt. Twee van deze banen onder elkaar, met het beeld om en om links en rechts, lezen als één doorlopend vlak in plaats van als losse kaarten op een pagina. De baan zet zijn eigen padding op nul, want de helften brengen hun eigen ruimte mee. Vandaar de dubbele klasse, anders wint de padding van .baan. */ .baan.helften{padding:0;display:grid;grid-template-columns:1fr 1fr; align-items:stretch} .helft-beeld{position:relative;overflow:hidden; min-height:clamp(420px,54vw,780px);color:var(--inkt-donker); background:var(--mahonie) 50% 42%/cover no-repeat; display:flex;align-items:flex-end;padding:clamp(26px,3.4vw,54px)} .helft-beeld::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(18,16,14,.14) 0%,rgba(18,16,14,.28) 45%, rgba(18,16,14,.66) 100%)} .helft-beeld > *{position:relative;z-index:2} /* De naam onder de kop op een foto: kleiner, en in dezelfde lichte kleur. */ .helft-beeld .onder-kop{margin:clamp(10px,1.4vh,18px) 0 clamp(20px,2.6vh,30px); color:var(--inkt-donker);opacity:.88;font-size:var(--t-groot);max-width:32ch} .helft-beeld .prijs-knop{margin:0} .helft-beeld .kop{margin:0;color:var(--inkt-donker); font-size:var(--t-missie);line-height:1.06;max-width:15ch;text-align:left} .helft-tekst{display:flex;flex-direction:column;justify-content:center; padding:clamp(40px,5vw,92px) clamp(28px,4.4vw,80px);text-align:left} .helft-tekst > :first-child{margin-top:0} /* Staat de kop in de tekst-helft in plaats van op de foto, dan mag hij niet de maat van een volle-breedte kop houden: hij heeft maar een halve kolom. */ /* Beide openingszinnen in een tekst-helft krijgen dezelfde maat. Bij Kaapstad staat de kop op de foto en is dit een uitspraak, bij Voor wie is dit de kop zelf. Verschillende rollen, maar ze staan op dezelfde plek in het blok en de lezer ziet ze als hetzelfde soort zin. Dan moeten ze ook even groot zijn. */ .helft-tekst .kop, .helft-tekst .duo-tekst{margin:0 0 clamp(18px,2.2vw,28px); font-size:var(--t-missie);line-height:1.06;max-width:none} /* Beeld rechts in plaats van links. Alleen zolang ze naast elkaar staan. */ @media(min-width:761px){ .helften.omgedraaid > .helft-beeld{order:2} .helften.omgedraaid > .helft-tekst{order:1} } @media(max-width:760px){ .baan.helften{grid-template-columns:1fr} .helft-beeld{min-height:clamp(300px,66vw,460px)} } /* ============ de titel op een foto ============ Alleen de kop staat op het beeld, de tekst ernaast blijft op papier. Zo houdt de foto zijn eigen kleur in plaats van dat er een scherm over de hele baan moet voor de leesbaarheid. De kop krijgt hier een kleinere trede dan buiten het beeld: hij staat in een halve kolom in plaats van over de volle breedte, en op 74 zou hij uit het vlak lopen. */ /* Rechte hoeken, geen afronding. Op 26 augustus 2026 gekozen naar het voorbeeld van Douze: een foto die tot de rand doorloopt leest als een vlak in de pagina, een afgeronde als een vel erop. */ .kop-op-beeld{position:relative;overflow:hidden; display:flex;align-items:flex-end;min-height:clamp(380px,52vw,680px); padding:clamp(24px,3.2vw,44px);color:var(--inkt-donker); background:var(--mahonie) 50% 55%/cover no-repeat} .kop-op-beeld::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(18,16,14,.16) 0%,rgba(18,16,14,.30) 45%, rgba(18,16,14,.68) 100%)} .kop-op-beeld > *{position:relative;z-index:2} .kop-op-beeld .kop{margin:0;color:var(--inkt-donker); /* Groter dan de trede ernaast: dit is de zin die als eerste gelezen moet worden, dus hij moet het winnen van de tekst in de kolom. */ font-size:var(--t-missie);line-height:1.06;max-width:15ch} /* ============ een heel blok op een foto ============ De tekst loopt door het beeld heen in plaats van ernaast. De waas eroverheen is er niet voor de sfeer maar voor de leesbaarheid: deze foto heeft een lichte lucht, en witte letter op een lichte lucht valt weg. Vandaar een scherm dat bovenin en onderin zwaarder is dan in het midden, want daar staat de tekst. De dubbele klasse (.baan.baan-op-beeld) is nodig omdat .donker een achtergrond-verkorting gebruikt die anders de foto zou wissen. */ .baan.baan-op-beeld{position:relative;overflow:hidden; background-position:50% 52%;background-size:cover;background-repeat:no-repeat} .baan.baan-op-beeld::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(18,16,14,.66) 0%,rgba(18,16,14,.52) 40%, rgba(18,16,14,.58) 70%,rgba(18,16,14,.76) 100%)} .baan.baan-op-beeld > .wrap{position:relative;z-index:2} /* ============ een foto die bij een blok hoort ============ Geen polaroid: die is voor de kleine herinneringen in de tijdlijn. Deze hoort bij de tekst ernaast en loopt dus mee met de kolom. De verhouding wordt 4 op 5 gelegd. Zonder dat wordt een staande foto in een halve kolom ruim achthonderd hoog, en dan staat de ene kant van het blok twee keer zo lang als de andere. De uitsnede zakt naar beneden, want bij een landschap zit het onderwerp onder de lucht. */ .blok-foto{margin:clamp(20px,2.6vw,34px) 0 0} .blok-foto img{display:block;width:100%;height:auto;aspect-ratio:4/5; object-fit:cover;object-position:50% 62%;border-radius:var(--r-vlak)} /* ============ echte foto's in een stap van de tijdlijn ============ Als polaroid: klein, witte rand die onderaan dikker is, een zachte schaduw en een graad scheef. Klein is hier het punt. Een foto van 280 breed werd een plaat waar de tekst omheen moest; op 150 is het een herinnering die je erbij pakt, en dat is wat een stap in een tijdlijn nodig heeft. */ .stap-foto{margin:14px 0 26px;width:var(--polaroid,150px); background:#fff;padding:8px 8px 24px;border-radius:2px; box-shadow:0 8px 20px rgba(20,18,16,.15),0 1px 3px rgba(20,18,16,.12); transform:rotate(-1.8deg)} .stap-foto img{display:block;width:100%;height:auto;aspect-ratio:1/1; object-fit:cover;object-position:50% 28%} .stap-foto figcaption{margin:8px 2px 0;font-family:var(--label-f);font-size:var(--t-mini); font-weight:var(--label-w);letter-spacing:.1em;text-transform:uppercase; color:#6b675f;line-height:1.5} /* Twee polaroids die net niet even scheef staan. Precies even scheef leest als een raster, en dan is het geen stapeltje foto's meer. */ .stap-tweeluik{display:flex;flex-wrap:wrap;gap:clamp(10px,1.6vw,20px); margin:14px 0 26px} .stap-tweeluik figure{margin:0;width:var(--polaroid,150px); background:#fff;padding:8px 8px 24px;border-radius:2px; box-shadow:0 8px 20px rgba(20,18,16,.15),0 1px 3px rgba(20,18,16,.12)} .stap-tweeluik figure:nth-child(odd){transform:rotate(-2.2deg)} .stap-tweeluik figure:nth-child(even){transform:rotate(1.6deg)} .stap-tweeluik img{display:block;width:100%;height:auto;aspect-ratio:1/1; object-fit:cover;object-position:50% 22%} /* Waar in de foto het onderwerp staat, verschilt per foto. Standaard snijden we iets boven het midden, maar staat iemand hoog in beeld dan snijdt dat door het hoofd. Dan zet je er .boven op. */ /* Een boekomslag of een affiche moet je heel zien, anders snijd je door de titel. Die krijgt de staande verhouding in plaats van het vierkant. */ .stap-foto.staand img{aspect-ratio:2/3} .stap-foto img.boven, .stap-tweeluik img.boven{object-position:50% 0} .stap-foto img.onder, .stap-tweeluik img.onder{object-position:50% 100%} /* De donkere baan heeft geen witte polaroid nodig, daar valt hij uit elkaar. */ .donker .stap-foto, .donker .stap-tweeluik figure{background:#f4f1ea} /* ============ de paginabanner ============ Een foto van rand tot rand met de paginanaam er middenin, en links en rechts een klein label. Dit is de banner van de oude werkwijze-pagina, en die is sterker dan een halve hero: hij zegt in één beeld waar je bent en houdt de belofte voor het blok eronder. Verder niets erin. Geen ondertitel, geen knop, geen regel met streepjes. Een banner is een bordje boven de deur, geen hero. Het waas is zwaarder dan op de homepage, en dat moet. De hero van de homepage staat op een donkere foto van twee mensen. Een paginabanner krijgt de foto die bij het onderwerp hoort, en op eva-laptop.webp zit een fel laptopscherm precies waar de tekst staat. */ /* Het woord staat linksonder en niet in het midden, zoals bij Amrit Palace uit Eva's referenties. Dat is zelfverzekerder: de foto krijgt de ruimte en het woord hoeft hem niet in zijn eentje te dragen. Daarom is de banner ook hoger dan de eerste versie. */ .banner{position:relative;display:flex;align-items:flex-end;overflow:hidden; min-height:clamp(420px,72vh,720px); background:var(--mahonie) 38% 42%/cover no-repeat;color:var(--inkt-donker)} .banner::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(20,18,16,.58) 0%,rgba(20,18,16,.48) 42%, rgba(20,18,16,.78) 100%)} /* Het woord staat op elke pagina op dezelfde hoogte: de banner is even hoog (vh), het woord hangt aan de onderkant, en de regel eronder is overal een regel. Eva op 2 september: het mag allemaal wat hoger. De onderrand is daarom van 6vh naar 10vh. */ .banner-in{position:relative;z-index:2;width:100%;max-width:1180px;margin:0 auto; padding:0 clamp(24px,5vw,64px) clamp(56px,10vh,120px);display:grid; grid-template-columns:1fr;gap:10px;text-align:left} .banner-woord{margin:0;text-align:left;white-space:nowrap; font-family:var(--f-display);font-weight:var(--disp-w); font-size:clamp(40px,7vw,112px);line-height:.94;letter-spacing:-.01em; text-transform:uppercase} .banner-zij{margin:0;font-family:var(--label-f);font-size:var(--t-mini); letter-spacing:.14em;text-transform:uppercase;opacity:.84;line-height:1.5; text-align:left} .banner-zij.rechts{text-align:left;opacity:.8} @media(max-width:860px){ .banner{min-height:clamp(320px,50vh,460px)} .banner-in{gap:8px} .banner-woord{font-size:clamp(36px,12vw,74px)} } .hero .meta{color:var(--inkt-donker);opacity:.82} .hero .hero-onder p{color:var(--inkt-donker);opacity:.86} .hero.pagina .merk-groot{font-size:clamp(34px,5vw,68px);line-height:1; margin-bottom:clamp(14px,1.8vw,22px);opacity:.72} .hero.pagina .zin{max-width:24ch} .hero.pagina .hero-onder{margin-top:clamp(24px,3vh,40px)} /* ============ de tijdlijn ============ Voor een traject in stappen. Drie kolommen: wat de stap heet, wat er gebeurt, en hoeveel tijd het jou kost. Die derde kolom is het punt van het hele blok, dus die staat rechts en springt eruit met de monoletter. Het is geen tabel geworden maar een lijst. Een tabel van zeven rijen valt op een telefoon om, en het is ook geen gegevens maar een verhaal met een volgorde. Vandaar het lijntje met de bolletjes: dat maakt van zeven regels een reeks. Refero leverde hier niets voor. Tien keer een Gantt-chart uit projectsoftware, en dat is een tijdlijn voor een planner en niet voor een bezoeker. De vorm komt van Neurova: een vetgedrukte aanhef plus een zin, meer niet. */ /* Links uitgelijnd, ook al staat de site op gecentreerd. Een reeks stappen lees je langs een linkerrand af; gecentreerd danst elke regel heen en weer en is de volgorde weg. De tijd rechts is de uitzondering, die hoort op een lijn aan de andere kant. */ .tijdlijn{list-style:none;margin:0;padding:0 0 0 clamp(30px,3.4vw,52px);position:relative; text-align:left;counter-reset:stap} .tijdlijn .stap, .tijdlijn .wat{text-align:left} .tijdlijn li{position:relative;display:grid; grid-template-columns:minmax(120px,.85fr) minmax(0,2fr) auto; gap:clamp(14px,2.2vw,40px);align-items:baseline; padding:clamp(17px,2.1vw,24px) 0;border-top:1px solid var(--lijn-donker)} .licht .tijdlijn li{border-top-color:var(--lijn-licht)} .tijdlijn li:last-child{border-bottom:1px solid var(--lijn-donker)} .licht .tijdlijn li:last-child{border-bottom-color:var(--lijn-licht)} /* Een nummer in de kantlijn en geen bolletje op een lijn. Het nummer zegt hetzelfde, maar het is informatie in plaats van versiering, en het staat in dezelfde monoletter als elk ander label op deze site. Een lijn met bolletjes erop leest als een infographic, en dat is precies het register dat deze site niet wil. */ .tijdlijn li{counter-increment:stap} .tijdlijn li::before{content:counter(stap,decimal-leading-zero); position:absolute;left:0;top:calc(clamp(17px,2.1vw,24px) + .5em); font-family:var(--label-f);font-size:var(--t-mini);letter-spacing:.06em; color:var(--gedempt-donker);font-variant-numeric:tabular-nums} .licht .tijdlijn li::before{color:var(--gedempt-licht)} .tijdlijn .stap{font-family:var(--f-display);font-weight:var(--disp-w); font-size:var(--t-titel);line-height:1.2;letter-spacing:var(--kop-ls)} .tijdlijn .wat{font-size:var(--t-tekst);line-height:1.5;color:var(--gedempt-donker)} .licht .tijdlijn .wat{color:var(--gedempt-licht)} .tijdlijn .tijd{font-family:var(--label-f);font-size:var(--t-mini);letter-spacing:.1em; text-transform:uppercase;text-align:right;white-space:nowrap;opacity:.8} @media(max-width:760px){ .tijdlijn li{grid-template-columns:1fr auto;gap:6px clamp(14px,3vw,20px)} .tijdlijn .wat{grid-column:1/-1} } /* Een opsomming op zichzelf, buiten het prijsblok. Die lijst met haarlijnen was alleen te krijgen door hem in een prijskaart te zetten, en dan komt de hele prijsindeling mee: een lege rechterkolom met een zwevend label. */ .opsom{list-style:none;padding:0;margin:0 auto;max-width:58ch;text-align:left} .opsom li{padding:14px 0;border-top:1px solid var(--lijn-licht);font-size:var(--t-tekst)} .opsom li:last-child{border-bottom:1px solid var(--lijn-licht)} .donker .opsom li{border-top-color:var(--lijn-donker)} .donker .opsom li:last-child{border-bottom-color:var(--lijn-donker)} /* ============ de fotobaan ============ Een baan met een foto erachter en tekst erop, zoals het missieblok op de homepage. Het waas loopt van links licht naar rechts zwaar: links blijft de foto zichtbaar, rechts moet hij een alinea kunnen dragen. Op een telefoon loopt datzelfde verloop van boven naar beneden, want daar staat de tekst onder het beeld en niet ernaast. */ .fotobaan{position:relative;overflow:hidden} .fotobaan .doek{position:absolute;inset:0; background:var(--mahonie) center/cover no-repeat} .fotobaan .doek::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(14,13,17,.28) 0%,rgba(14,13,17,.60) 36%, rgba(14,13,17,.90) 68%,rgba(14,13,17,.94) 100%)} .fotobaan > .wrap{position:relative;z-index:2} /* Alles in dit blok links uitgelijnd, ook de kop. De tekst staat tegen de donkere kant van de foto aan, en dan is een linkerrand de enige houvast die er is. Een gecentreerde kop boven links uitgelijnde alinea's leest als twee verschillende blokken. */ .fotobaan .binnen{max-width:46ch;margin-left:auto;text-align:left} [data-uitlijning="midden"] .fotobaan .binnen .kop{text-align:left; margin-left:0;margin-right:0;max-width:16ch} [data-uitlijning="midden"] .fotobaan .binnen p{text-align:left; margin-left:0;margin-right:0} @media(max-width:860px){ .fotobaan .doek::after{background:linear-gradient(180deg,rgba(14,13,17,.44) 0%, rgba(14,13,17,.92) 38%)} .fotobaan .binnen{max-width:none;margin-left:0} } /* ============ de tekstpagina ============ Voor pagina's die vooral tekst zijn: de voorwaarden, de privacyverklaring, later een blog. Twee dingen wijken af van de homepage, allebei uit noodzaak. De balk heeft hier geen donkere hero om op te liggen. Op de homepage is hij doorzichtig met lichte letters en klapt hij pas om als je scrolt. Hier zou dat lichte letters op licht papier geven, dus staat hij meteen in zijn lichte stand. En de tekst staat links uitgelijnd op een leesbare regellengte, ook al staat de rest van de site op gecentreerd. Vierhonderd regels algemene voorwaarden gecentreerd lezen is niet te doen. */ /* Twee soorten pagina's zonder donkere kop: een tekstpagina en een pagina die gewoon licht begint, zoals het aanbod. Allebei hebben ze hetzelfde nodig: een balk die meteen in zijn lichte stand staat, en lucht onder die balk voor de eerste baan. */ .tekstpagina .balk, .lichte-kop .balk{--balk-inkt:var(--inkt-licht); --balk-grond:var(--papier);background:var(--balk-grond); border-bottom-color:var(--lijn-licht)} /* section erbij, want :first-of-type kijkt naar de tagnaam: de