/* assets/evai.css, de huisstijl van EV-AI. NIET met de hand bijwerken. Dit bestand wordt gemaakt door _gereedschap/bevries.py uit mengpaneel.html. Wil je iets wijzigen, doe het daar en draai het script opnieuw. Gegenereerd uit de stand van 24 augustus 2026. */ /* =========================================================== 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. =========================================================== */ :root{ --papier:#fdfaf7; --papier-2:#ffffff; --mahonie:#17171c; --mahonie-2:#2e2e2e; --inkt-licht:#121216; --inkt-donker:#fdfaf7; --gedempt-licht:#757375; --gedempt-donker:#818081; --acc-licht:#966c18; --acc-donker:#ffb829; --lijn-licht:#dcd9d7; --lijn-donker:#303034; --rand-licht:#939192; --rand-donker:#656366; --markeer:#e1dedc; --markeer-donker:#575759; --f-display:'Newsreader',Georgia,serif; --merk-f:'Newsreader',Georgia,serif; --label-f:'IBM Plex Mono',ui-monospace,monospace; --sans:'DM Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace; --disp-w:400; --disp-ls:-0.02em; --kop-ls:-0.02em; --kop-lh:1.0; --label-ls:.12em; --label-w:400; --merk-w:400; --merk-ls:-0.01em; --zin-w:400; --zin-ls:-0.02em; --hero-beeld:url('/assets/eva-samen-laptop.jpg'); } *{box-sizing:border-box} body{margin:0;background:var(--papier);font-family:var(--sans);font-size:17px;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:clamp(30px,4.6vw,62px);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:12px;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:15px} [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:14px; 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:'Bodoni Moda',Didot,'Times New Roman',serif} /* 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 */ #intro .middenblok{animation:intro-adem 1.4s cubic-bezier(.18,.9,.24,1) forwards} @keyframes intro-adem{from{transform:scale(.978) translateY(10px)}to{transform:none}} #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:14px} .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:17px} [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:15.5px;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:clamp(32px,4.7vw,70px);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:clamp(19px,2.2vw,28px);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:clamp(46px,7.8vw,112px);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:clamp(19px,2.1vw,27px);line-height:1.48} @media(prefers-reduced-motion:reduce){ .brein{min-height:0} .brein-plak{position:static;height:auto;padding:clamp(90px,13vh,150px) 0} .brein-tekst{opacity:1;transform:none;transition:none} .brein-aanhef{display:none} .brein-slot{position:static;translate:none;opacity:1;transform:none;transition:none; 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%; --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)); background:var(--mahonie) 50% 40%/cover no-repeat} .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:clamp(30px,5.8vw,94px);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:clamp(28px,3.6vw,56px);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} @media(max-width:760px){ .overlap{--foto-rand:100%;--kop-links:var(--foto-marge)} .overlap-beeld{right:var(--foto-marge);bottom:auto;height:46%} .laag-foto{display:none} .laag-papier{clip-path:none;position:static} .overlap-kop{position:static;margin:0 var(--kop-rechts) clamp(22px,3vh,34px) var(--foto-marge)} .overlap-rechts{position:static;padding:0 var(--kop-rechts) clamp(48px,8vh,90px) var(--foto-marge)} .overlap{display:flex;flex-direction:column;justify-content:flex-end; padding-top:calc(46% + clamp(24px,4vh,48px))} } /* 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. */ .auto-keuze{display:flex;flex-wrap:wrap;justify-content:center; gap:8px;margin:clamp(22px,3vh,34px) 0 clamp(28px,3.6vh,44px)} .auto-knop{font-family:var(--label-f);font-size:12px;letter-spacing:.02em; padding:9px 16px;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)} .auto-knop[aria-selected="true"]{background:var(--mahonie);border-color:var(--mahonie); color:var(--papier)} .donker .auto-knop{border-color:var(--lijn-donker);color:var(--gedempt-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. */ .werkstappen{display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,28px);margin-top:clamp(34px,4.5vh,64px);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:15px; 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:13.5px;line-height:1.4;color:var(--gedempt-licht)} .vel-kop .wanneer{margin-left:auto;font-family:var(--label-f);font-size:11px; 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:14px;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:15.5px;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:10.5px; 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:15px;line-height:1.4;color:var(--inkt-licht)} .werkstap-uit{margin:0;font-family:var(--ui);font-size:13px;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:12.5px; 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. */ .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:11.5px;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:clamp(19px,1.55vw,23px);line-height:1.2; letter-spacing:var(--kop-ls)} .werkstap p.wat{margin:0;font-size:16px;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:clamp(34px,4.4vw,62px);line-height:1; letter-spacing:var(--kop-ls)} .prijskader .bedrag small{font-family:var(--sans);font-size:14px;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:12.5px; 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:clamp(46px,7.8vw,112px);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.jpg') 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:12px;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.jpg')} .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:clamp(38px,5.4vw,86px);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} } /* 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:13.5px; 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:clamp(17px,1.4vw,20px);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:14px} .reviews-loop .rev-rol{font-family:var(--label-f);font-size:11px;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:clamp(21px,2.5vw,31px);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:12px; 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:18.5px;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:clamp(18px,2.2vw,28px); 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:17.5px;max-width:46ch} .prijs-naam{margin:0;font-family:var(--label-f);font-size:12.5px;letter-spacing:.14em; text-transform:uppercase} .prijs-bedrag{margin:10px 0 0;font-family:var(--f-display);font-weight:var(--disp-w); font-size:clamp(48px,7vw,104px);line-height:.95;letter-spacing:var(--kop-ls)} .prijs-meta{margin:14px 0 0;font-family:var(--label-f);font-size:12px;letter-spacing:.05em; line-height:1.8;opacity:.7;max-width:none} .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:16.5px} .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:15px;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:11.5px; 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:clamp(34px,4.6vw,62px);line-height:1;letter-spacing:var(--kop-ls)} .prijs-vergelijk .v-uit{margin:8px 0 0;font-size:13.5px;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} /* 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:12px;letter-spacing:.1em; text-transform:uppercase;font-weight:var(--label-w);margin-bottom:16px} .voet-kolommen a{display:block;font-size:14.5px;text-decoration:none;color:inherit; opacity:.72;padding:5px 0} .voet-kolommen a:hover{opacity:1} .voet-brief form{display:flex;align-items:center;gap:10px; border-bottom:1px solid currentColor;padding-bottom:9px;max-width:260px} .voet-brief input{flex:1;background:transparent;border:0;color:inherit;font-family:var(--sans); font-size:14.5px;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:17px; line-height:1;padding:0;flex:none} .voet-rij{display:none;flex-wrap:wrap;gap:8px 26px} .voet-rij a{font-size:14.5px;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:11.5px;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:12px;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:26px;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:clamp(38px,4.6vw,68px);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:13px;letter-spacing:.14em; text-transform:uppercase;margin:14px 0 0} .vertaling{margin:clamp(22px,3vh,34px) 0 0;font-size:clamp(18px,2vw,24px);line-height:1.45;max-width:34ch} .opnieuw{margin:clamp(20px,2.6vh,30px) 0 0;font-family:var(--label-f);font-size:12.5px; 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:12px;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:16.5px;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:12px;letter-spacing:.12em; text-transform:uppercase;opacity:.6;max-width:none} .stel-uitkomst{margin:14px 0 0;font-size:clamp(18px,2vw,24px);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:12px;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:11.5px;letter-spacing:.06em; text-transform:uppercase;line-height:1.7;opacity:.62} /* 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:16px;max-width:none} .stroom .rijen{display:flex;flex-direction:column;gap:12px;margin:0} .stroom .rij{font-family:var(--label-f);font-size:14px;padding:12px 16px; border:1px solid var(--rand-licht);background:var(--papier)} .stroom .antwoord{margin:0;font-size:16.5px;line-height:1.55;max-width:none} .stroom-voet{margin:clamp(20px,2.6vh,32px) 0 0;font-family:var(--label-f);font-size:12px; 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} } /* 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:18.5px;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:clamp(30px,4.6vw,62px); 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:11px;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:13px;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:12.5px;line-height:1.85;margin-bottom:16px} .vak p{font-size:15.5px;line-height:1.6;margin:0 0 14px;text-align:left} .vak .voet{font-family:var(--label-f);font-size:11px;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:clamp(24px,3.2vw,38px);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:14px;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:clamp(28px,4.4vw,52px);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:clamp(34px,5vw,60px);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:15.5px} .donker .prijs li{border-bottom-color:var(--lijn-donker)} .gratis{font-size:17px;margin-bottom:30px} .meta{font-family:var(--label-f);font-size:12px;letter-spacing:.04em;line-height:1.9;margin-top:26px} .voet{padding:40px 0 64px;font-size:13px;letter-spacing:.04em} .merk{font-family:var(--sans);font-weight:600;letter-spacing:.14em;text-transform:uppercase; font-size:14px;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:11px;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:19px;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:15px;letter-spacing:normal; text-transform:none;opacity:.62} @media(prefers-reduced-motion:reduce){ .stappen .tijdlijn button{transition:none}} .stappen .tijdlijn button[aria-selected="false"]{opacity:.5} .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. */ .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:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--gedempt-donker)} .licht .stap-label{color:var(--gedempt-licht)} .stap-uit{margin:0;font-size:16px;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:14.5px;line-height:1.4} .licht .kaartje{border-color:var(--lijn-licht)} .kaartje .bij{font-family:var(--label-f);font-size:10.5px;letter-spacing:.1em; text-transform:uppercase;opacity:.6;white-space:nowrap} .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:clamp(38px,4.4vw,62px);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:13.5px;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:10px;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)} .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{padding-top:10px;padding-bottom:10px} .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:11px; 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:clamp(23px,2.2vw,32px);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:16.5px;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:15.5px;padding:6px 0} .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:16.5px;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:12px; 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)} /* ============ 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:14.5px} /* ============ 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. */ .vragen-blok{display:grid;grid-template-columns:minmax(220px,.85fr) minmax(0,1.7fr); gap:clamp(28px,5vw,80px);align-items:start;text-align:left} .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} .vragen-lijst{margin: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:12.5px; 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:17px;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:16.5px;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)} @media(max-width:820px){ .vragen-blok{grid-template-columns:1fr;gap:clamp(24px,5vw,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:11px;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:clamp(15px,1.25vw,19px);max-width:32ch} .helft-beeld .prijs-knop{margin:0} .helft-beeld .kop{margin:0;color:var(--inkt-donker); font-size:clamp(30px,3.6vw,54px);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:clamp(28px,3.4vw,50px);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:clamp(30px,4vw,56px);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:9.5px; 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.jpg 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%)} .banner-in{position:relative;z-index:2;width:100%;max-width:1180px;margin:0 auto; padding:0 clamp(24px,5vw,64px) clamp(38px,6vh,72px);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:11.5px; letter-spacing:.14em;text-transform:uppercase;opacity:.84;line-height:1.5; text-align:left} .banner-zij.rechts{text-align:left;opacity:.6} @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:11px;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:clamp(19px,1.6vw,23px);line-height:1.2;letter-spacing:var(--kop-ls)} .tijdlijn .wat{font-size:16.5px;line-height:1.5;color:var(--gedempt-donker)} .licht .tijdlijn .wat{color:var(--gedempt-licht)} .tijdlijn .tijd{font-family:var(--label-f);font-size:11.5px;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:16.5px} .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