/* ============================================================ TYPOGRAFIE-STANDAARD — CADviseurs Bron van waarheid voor lettergroottes, regelafstand, letterspatiëring, verticale ritmiek en animatietempo. Afgeleid van gemeten computed styles op trionn.com bij 1440px breed (hun root = 14.4px, alles in rem). Wij houden root = 16px en gieten dezelfde maten in clamp(): de max-waarde raakt precies de trionn-maat bij 1440px, de min-waarde is de mobiele bodem. Documentatie: 2026-08-20-WEB-HANDL-typografie-standaard-trionn.md NIET per pagina overschrijven. Nieuwe maat nodig? Voeg hier een token toe, gebruik nergens een losse px/rem-waarde voor tekst. ============================================================ */ :root{ /* ---------- lettergroottes ---------- naam trionn @1440 gebruikt voor */ --fs-mega: clamp(3.6rem, 9.16vw, 8.25rem); /* 132px — schermvullende scrollkop */ --fs-h1: clamp(3rem, 6.25vw, 5.625rem); /* 90px — hero-titel */ --fs-h2: clamp(2.5rem, 5.94vw, 5.35rem); /* 85px — sectiekop */ --fs-h2-klein:clamp(1.9rem, 3.6vw, 3.4rem); /* 52px — sectiekop in een smal paneel */ --fs-h3: clamp(1.5rem, 2.25vw, 2.025rem); /* 32px — kaart-/blokkop */ --fs-h4: clamp(1.2rem, 1.67vw, 1.5rem); /* 24px — subkop */ --fs-lead: clamp(1.05rem, 1.55vw, 1.4rem); /* 22px — losse introzin */ --fs-body: clamp(.95rem, 1.125vw,1.0125rem); /* 16px — lopende tekst */ --fs-klein: clamp(.85rem, 1vw, .9rem); /* 14px — navigatie, bijschrift */ --fs-knop: clamp(.82rem, 1.06vw, .956rem); /* 15px — knoplabel in display-letter */ --fs-mono: clamp(.68rem, .875vw, .7875rem); /* 13px — mono-label, kicker, teller */ --fs-mono-xs:clamp(.6rem, .74vw, .665rem); /* 11px — mono in krappe hoek */ --fs-knop-mono:clamp(.6rem, .76vw, .685rem); /* 11px — knoplabel, bewust kleiner */ /* toegevoegd 8 sep 2026: de drie maten die tot dan toe los in index.html stonden */ --fs-reus: clamp(4rem, 14.5vw, 13.5rem); /* 216px — één woord dat het scherm vult (CADviTool.) */ --fs-reus-klein:clamp(2rem, 6.5vw, 6rem); /* 96px — de tegenlopende vaktermen in het lab */ --fs-merk: clamp(1.5rem, 3.4vw, 2.5rem); /* 40px — het woordmerk in de preloader */ /* ---------- regelafstand ---------- */ --lh-mega: .80; --lh-display: .90; /* h1 */ --lh-h2: .95; --lh-h3: 1.0; --lh-body: 1.35; /* trionn zit op 1.23; iets ruimer voor Nederlandse tekst */ --lh-klein: 1.45; --lh-mono: 1.0; --lh-mono-blok: 1.7; /* mono over meerdere regels */ /* ---------- letterspatiëring ---------- */ --ls-mega: -.08em; --ls-display: -.06em; --ls-h3: -.04em; --ls-h4: -.035em; --ls-body: 0; --ls-knop: -.02em; --ls-mono: -.06em; --ls-knop-mono: -.12em; /* knoplabels staan strakker: Martian Mono is breed */ /* Geen tweede letterfamilie in de koppen: één display-letter voor alles. Nadruk () krijgt dezelfde letter, geen cursief, geen serif. */ /* ---------- verticaal ritme ---------- trionn: sectie 90/72px, ruime sectie 135/144px, kop→blok 42px, blok→blok 72px */ --sp-sectie-top: clamp(4rem, 6.25vw, 5.625rem); --sp-sectie-bot: clamp(3.2rem, 5vw, 4.5rem); --sp-sectie-top-ruim: clamp(5.5rem, 9.4vw, 8.45rem); --sp-sectie-bot-ruim: clamp(6rem, 10vw, 9rem); --sp-kop-tekst: clamp(1.6rem, 2.9vw, 2.625rem); /* 42px — kop → volgende blok */ --sp-tekst-knop: clamp(1.6rem, 2.9vw, 2.625rem); /* 42px — tekst → knoppenrij */ --sp-blok: clamp(3rem, 5vw, 4.5rem); /* 72px — blok → blok */ --maat-tekstkolom: 22.5rem; /* 360px — trionn's paragraafbreedte */ --maat-tekstkolom-breed: 34rem; /* ---------- animatietempo ---------- Eén trap trager dan de kloon: elke waarde is ×1,4 t.o.v. de vorige ronde. Gebruik deze tokens, geen losse seconden meer. VASTGEZET door Leon op 20 aug 2026, samen met de blur-reveal en de ghost-fill in index.html. Niet bijstellen zonder dat Leon er zelf om vraagt; werk dan ook dit document bij: 2026-08-20-WEB-HANDL-vastgezet-trionn-studie.md */ --dur-tik: .35s; /* kleur-/randwissel */ --dur-kort: .65s; /* hover, fade */ --dur-mid: .9s; /* letterwissel op knoppen (.cs) */ --dur-lang: 1.3s; /* paneel, lamel, grote verplaatsing */ --stap-letter: 38ms; /* vertraging per letter in .cs */ --ease-soft: cubic-bezier(.16,1,.3,1); /* ---------- knoplabel (.cs) en het lijntje eronder ---------- Trionn zat op .30s + i·.03s. Leon wilde de knop trager, dus deze twee tokens zijn bewust hóger. Ze staan hier zodat elke pagina dezelfde knop heeft; de JS leest ze uit met getComputedStyle. */ --cs-basis: .55s; /* grondduur van het eerste teken */ --cs-stap: .055s; /* extra duur + vertraging per teken */ --dur-knoplijn: .95s; /* de veeg van het lijntje */ /* De terugweg heeft geen golf — met de trage golf óók op de terugweg leek de knop vast te lopen als je er twee keer achter elkaar overheen ging. Wél rustig van tempo: 0,2s voelde als terugknallen. */ --cs-terug: .45s; --dur-knoplijn-terug: .5s; } /* ============================================================ BASISREGELS — gelden op elke pagina ============================================================ */ body{ font-family:var(--body); font-size:var(--fs-body); line-height:var(--lh-body); letter-spacing:var(--ls-body); } h1,h2,h3,h4,.h-groot{font-family:var(--disp);font-weight:400} h1{font-size:var(--fs-h1);line-height:var(--lh-display);letter-spacing:var(--ls-display)} h2{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-display)} h3{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3)} h4{font-size:var(--fs-h4);line-height:var(--lh-h3);letter-spacing:var(--ls-h4)} /* Nadruk blijft in dezelfde letter — geen cursief, geen serif. */ h1 em,h2 em,h3 em,h4 em,em,.serif{ font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit; } p{font-size:var(--fs-body);line-height:var(--lh-body)} p.lead{font-size:var(--fs-lead);line-height:1.42} .klein{font-size:var(--fs-klein);line-height:var(--lh-klein)} .mono{ font-family:var(--mono); font-size:var(--fs-mono); line-height:var(--lh-mono); letter-spacing:var(--ls-mono); text-transform:uppercase; } .mono-xs{font-size:var(--fs-mono-xs)} .mono-blok{line-height:var(--lh-mono-blok)} /* mega-kop: alleen waar een kop het scherm moet vullen */ .mega{ font-family:var(--disp);font-weight:400; font-size:var(--fs-mega);line-height:var(--lh-mega);letter-spacing:var(--ls-mega); text-transform:uppercase; } /* ============================================================ KNOPLABEL (.cs) — letters schuiven zijwaarts Opgemeten op trionn.com: per letter een eigen duur én vertraging, die bij hover van volgorde omkeren. De JS zet --dur en --del; --schuif is de restbreedte van de knop. Overschrijf dit niet per pagina. ============================================================ */ .cs{display:flex;width:100%;line-height:1.15;white-space:pre} .cs .c{ display:inline-block; transform:translateX(0); transition:transform var(--dur, .3s) ease; transition-delay:var(--del, 0s); will-change:transform; } .cs.hover .c{transform:translateX(var(--schuif, 0px))} /* het lijntje onder de knop: veegt bij hover van links naar rechts wég. Trionn liet de rechterhelft terugtrekken terwijl de linkerhelft aangroeide; op verzoek van Leon is het nu één balk die de knop uit schuift en bij loslaten weer terugkomt. De doos clipt, dus hij verdwijnt aan de rand. */ .knoplijn{position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;overflow:hidden} /* rusttoestand = de terugweg: kort, zodat de knop meteen weer klaarstaat */ .knoplijn i{position:absolute;inset:0;background:currentColor;display:block; transform:translateX(0);transition:transform var(--dur-knoplijn-terug, .22s) var(--ease-soft)} a:hover > .knoplijn i, button:hover > .knoplijn i{ transform:translateX(101%);transition-duration:var(--dur-knoplijn, .95s)} @media (prefers-reduced-motion:reduce){ .cs .c,.knoplijn i{transition:none!important} }