/* ========================================================= TSCB UTILITY-SYSTEEM — pagina-decoratie Onderdeel van het tscb-systeem, zie basis/kleur.css voor de kleur-bridge en het versie-/hergebruikbeleid. Un-layered laten, dan wint dit van de Bricks-defaults. ========================================================= */ /* --------------------------------------------------------- 0. DE SCROLLBALK STAAT ER ALTIJD Waarom de pagina verspringt bij het openen van het menu: Bricks zet dan .no-scroll op , met overflow: hidden. Zolang op overflow: visible staat, neemt het viewport die waarde over (dat heet overflow-propagatie) en verdwijnt de scrollbalk. Het venster wordt een balkbreedte breder en alles schuift op. Deze regel doorbreekt precies die propagatie. Het viewport neemt de waarde van alléén over als op visible staat; zet je expliciet op scroll, dan gebruikt het viewport díe waarde en blijft de balk staan. De overflow: hidden van geldt dan gewoon voor zelf en raakt de balk niet meer. De breedte verandert dus nooit — niet bij het openen, niet bij het sluiten. Waarom dit beter is dan scrollbar-gutter: stable, wat hier eerder stond: die reserveert wel ruimte maar laat hem LEEG, en dan zie je een witte reep zodra de balk weggaat. Met overflow-y: scroll staat er een echte balk in — op een pagina die niet scrollt een leeg spoor zonder duim, wat er precies uitziet als een balk die even niet meedoet. Bijvangst: ook tussen een korte en een lange pagina verspringt er niets meer, want de balk is er altijd. Wat je ervoor terugkrijgt: de pagina scrollt door achter het open menu, want de scrollvergrendeling van Bricks werkt hierdoor niet meer. Dat is hetzelfde gedrag als het Offcanvas-element van Bricks standaard heeft — en dus als de andere sites. Kost niets op macOS, iOS en Android: daar zijn scrollbalken overlays zonder breedte. Het speelt alleen op Windows en Linux. --------------------------------------------------------- */ html { overflow-y: scroll; } /* --------------------------------------------------------- 0b. PAGINAKLEUR Op body en niet op html: zolang html geen eigen achtergrond heeft, neemt het scherm die van body over en wordt de kleur dus over de volle hoogte geschilderd — ook onder een korte pagina. Zet je hem op html, dan is die overname er niet meer en zou een achtergrond op body ineens tot z'n eigen doos beperkt zijn. --------------------------------------------------------- */ body { background-color: var(--tscb_paginakleur); } /* --------------------------------------------------------- 1. ACHTERGRONDGOLF Eén grote, heel lichte veeg achter de pagina, afgeleid van de schuine veeg over de bovenkant van het logo. LET OP — dit pad is een BENADERING, geen uitsnede uit het logo. Die veeg in IPM_LOGO_RGB.svg is namelijk geen enkele vorm: het zijn twaalf losse penseelstreken, elk op 10,9% dekking door een eigen masker. Daar valt geen schone curve uit te lichten. Knip je 'm zelf uit in een vectorprogramma, vervang dan alleen --tscb_golf hieronder; de rest blijft werken. Het is een MASK en geen background-image, zodat de kleur uit het palet komt en niet in het bestand gebakken zit. Jouw uitsnede hoeft dus geen kleur te hebben — alleen een vorm. preserveAspectRatio='none' laat 'm meerekken met het scherm, anders zou de golf op breedbeeld ineens klein middenin staan. position: fixed betekent dat de golf blijft staan terwijl de pagina eroverheen schuift. Wil je 'm laten meescrollen: zet 'm op absolute (en dan hoort er ook een position op body). --------------------------------------------------------- */ body::before { --tscb_golf: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20600'%20preserveAspectRatio='none'%3E%3Cpath%20fill='black'%20d='M0%20392%20C246%20448%20470%20340%20720%20288%20C968%20236%201206%20148%201440%20118%20L1440%20600%20L0%20600%20Z'/%3E%3C/svg%3E"); --tscb_golf_kleur: var(--tscb_primary_2); --tscb_golf_opacity: .1; --tscb_golf_breedte: 150%; --tscb_golf_positie: 50% 45%; content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; /* mag nooit klikken opvangen */ background-color: var(--tscb_golf_kleur); opacity: var(--tscb_golf_opacity); -webkit-mask: var(--tscb_golf) var(--tscb_golf_positie) / var(--tscb_golf_breedte) auto no-repeat; mask: var(--tscb_golf) var(--tscb_golf_positie) / var(--tscb_golf_breedte) auto no-repeat; } /* --------------------------------------------------------- 2. ACHTERGRONDLAGEN — de penseelstreken uit het logo. Markup: parts/achtergrond-lagen.php (vijf 's, elk één streek). Waar de golf hierboven een BENADERING is, zijn dit de echte vormen uit IPM_LOGO_RGB.svg. De lagen zijn in het logo al een paar pixels t.o.v. elkaar verschoven; hier krijgt elke laag daar een eigen trage drift overheen. Ze lopen dus nooit synchroon en het beeld staat nooit helemaal stil — maar de uitslag is klein genoeg dat je het eerder voelt dan ziet. Alleen translate en rotate worden geanimeerd; dat zijn de twee dingen die de compositor zonder herteken kan doen. Nooit de mask/paint zelf animeren (zelfde afspraak als in animatie/ts3d-motion.css, sectie 10). fill staat op de container en niet per pad: zo erft elke laag dezelfde kleur uit het palet en is er één knop. --------------------------------------------------------- */ .tscb_lagen { --tscb_lagen_kleur: var(--tscb_primary_2); --tscb_lagen_opacity: .07; /* per laag; vijf lagen stapelen op */ /* Het grote middenvlak onder de streken — in het logo de massieve cyaan schijf. Eigen kleur en dekking, zodat je 'm los van de streken kunt zetten (of op 0 kunt draaien). */ --tscb_lagen_schijf_kleur: var(--tscb_primary_1); --tscb_lagen_schijf_opacity: .05; --tscb_lagen_drift: 2.8%; /* uitslag van de beweging */ --tscb_lagen_tilt: 1.9deg; --tscb_lagen_duur: 58s; /* laag 1; de rest schaalt hiervan af */ /* Kadrering — zie de tabel onderaan deze sectie. Deze zijn de standaard voor een pagina zonder eigen regel. */ --tscb_lagen_zoom: .85; --tscb_lagen_verschuiving: 0vw; /* Bovenin de tekening zit loze ruimte: de bovenste penseelstreek begint pas op ~9% van de viewBox. Die schuift hier weg, anders start de vorm pas onder de header. Percentages in `translate` rekenen over de eigen hoogte van het element, dus dit blijft kloppen op elk scherm. Verzet je dit, verzet dan ook de deler in de svg-hoogte hieronder: die staat op 1 min deze waarde. */ --tscb_lagen_kop: 9%; --tscb_lagen_y: calc(var(--tscb_lagen_kop) * -1); /* Let op de EENHEID bij die twee nullen. Een kale 0 is een geldige lengte in translate, maar de parallax hieronder rekent ermee in een calc(), en daar is `0 + 14vh` getal-plus-lengte en dus ongeldig. Zo'n calc valt in stilte weg: de hele keyframe wordt genegeerd en de animatie doet niets, zonder foutmelding. */ /* Hoeveel de vorm achterblijft bij het scrollen. Zie sectie 2b. */ --tscb_lagen_parallax: 45vh; /* Vertaling naar wat de browser nodig heeft. Niet aankomen — draai aan zoom en verschuiving hierboven. breedte: hoe breed de wordt. Past 37% van de vorm in het scherm, dan is de vorm 100/.37 = 270vw. In vw en niet in %, zodat breedte en hoogte met dezelfde eenheid rekenen. verschuiving: opzij vanaf de LINKERRAND. 0 zet de vorm tegen de linkerkant van het scherm, positief duwt hem naar rechts. Vanaf links, en hieronder ook vanaf BOVEN ("start start"). Dat tweede is geen detail: een grid-item dat groter is dan z'n kader valt bij `center` terug op start, en zolang de vorm uit z'n kader stak zag je het verschil dus niet. Nu het kader de hele pagina hoog is past hij er wél in, en dan centreert `center` echt — de tekening begon daardoor een paar honderd pixels onder de paginatop, precies de hoogte van de header. */ --tscb_lagen_breedte: calc(100vw / var(--tscb_lagen_zoom)); --tscb_lagen_x: var(--tscb_lagen_verschuiving); /* absolute en geen fixed: de vorm hoort bij de bovenkant van de pagina en schuift met de tekst mee weg. Bij fixed bleef hij achter alles hangen, waardoor hij stilstond terwijl de tekst eroverheen gleed. De body krijgt hieronder position: relative, anders zou dit zich aan het viewport ophangen en alsnog blijven staan. */ position: absolute; inset: 0 0 auto 0; /* Precies de pagina, niet meer en niet minder. Korter en de vorm houdt halverwege op met een zichtbare snijlijn dwars over de pagina; langer en hij rekt de scrollhoogte op, want een absoluut gepositioneerd element telt daarvoor mee. De enige plek waar hij dus wegvalt is de onderkant van de footer. */ height: 100%; z-index: -1; pointer-events: none; /* mag nooit klikken opvangen */ overflow: clip; display: grid; place-items: start start; } /* Het ophangpunt voor de lagen hierboven. Zonder deze regel valt een absoluut gepositioneerd element terug op het viewport en blijft het alsnog staan bij het scrollen. */ body:has(.tscb_lagen) { position: relative; } .tscb_lagen__svg { /* De breedte komt uit de zoom; de hoogte is de zoomhoogte (vierkante viewBox, dus gelijk aan de breedte) OF de hele pagina — wat groter is. Anders houdt de tekening op waar de vorm ophoudt, ergens halverwege een lange pagina, in plaats van door te lopen tot onder de footer. De parallax gaat eraf: die schuift de tekening straks precies zoveel omlaag, en zonder die correctie zou hij aan het eind te ver doorsteken. De deler 0.91 is 1 min --tscb_lagen_kop: wat er bovenaan wegschuift moet er onderaan bij, anders houdt de vorm net voor de footer op. Uitrekken doet dit niet: de staat in de markup op preserveAspectRatio="xMidYMid slice", dus de tekening vult de doos en wat er niet in past wordt afgesneden. */ width: var(--tscb_lagen_breedte); height: max(var(--tscb_lagen_breedte), calc((100% - var(--tscb_lagen_parallax)) / 0.91)); fill: var(--tscb_lagen_kleur); /* geen harde rand bij verschuiving; .tscb_lagen knipt af */ overflow: visible; /* De losse translate-property, niet transform: die laatste is hier vrij, maar zo blijft 'ie vrij voor wie er later nog iets bij wil zetten zonder deze regel te moeten herschrijven. */ translate: var(--tscb_lagen_x) var(--tscb_lagen_y); } /* De schijf staat bewust STIL: hij is het vlak waar de streken tegen aflezen, en die leesbaarheid gaat weg als de ondergrond met ze meebeweegt. Wil je 'm toch laten ademen, geef 'm dan tscb_lagen_drift_a met een duur van een paar keer --tscb_lagen_duur en dezelfde transform-box-regel als de lagen. Deze twee regels MOETEN er staan. Zonder de fill- en opacity-declaratie valt de schijf terug op de standaard: hij erft de volle merkkleur van de en komt op dekking 1 te staan — een dichte cyaan cirkel dwars over de pagina in plaats van een zweem eronder. */ .tscb_lagen__schijf { fill: var(--tscb_lagen_schijf_kleur); opacity: var(--tscb_lagen_schijf_opacity); } /* --------------------------------------------------------- 2b. PARALLAX — de vorm blijft achter bij het scrollen. Scroll je omlaag, dan zakt de vorm langzamer weg dan de tekst en lijkt hij dus mee naar beneden te schuiven. Meer diepte dan dat wil je hier niet: het is een achtergrond, geen attractie. Een scroll-gedreven animatie en geen JavaScript: de browser koppelt de voortgang rechtstreeks aan de scrollpositie, wat betekent dat het op de compositor draait en er geen scroll-handler is die bij elke pixel meerekent. scroll(root) en niet view(): bij scroll() is 0% de bovenkant van de pagina, en dat is precies de stand waarin de vorm is ontworpen — hij begint achter de header en schuift van daaruit weg. Met view() loopt de tijdlijn van "element komt in beeld" tot "element is uit beeld", en omdat deze vorm bovenaan het document staat is hij bij het laden al een eind op dreef: dan staat hij meteen voorgeschoven en klopt de beginstand niet meer. Dat deze vorm alleen bovenaan zichtbaar is maakt scroll() hier ook goed bruikbaar — de pagina is nauwelijks langer dan het stuk waarover je hem ziet. DE ANIMATIE ZIT OP DE EN NIET OP DE CONTAINER. Dat is geen detail: een verschoven container steekt onder de pagina uit en telt daar mee voor de scrollhoogte — je kreeg er dus een lap leegte bij om doorheen te scrollen, precies zo hoog als de uitslag hieronder. De zit binnen `overflow: clip`, dus die kan bewegen zonder dat de pagina er iets van merkt. De prijs is dat er bovenin de clip een lege band vrijkomt zodra de tekening zakt. Die is in de praktijk niet te zien: hij groeit mee met de scrollvoortgang, en tegen de tijd dat er iets van te zien zou zijn ben je de bovenkant van de vorm allang voorbij gescrold. Alleen op een pagina die korter is dan de uitslag zelf zou het opvallen. In @supports, want niet elke browser kent dit al. Waar het ontbreekt gebeurt er simpelweg niets — de vorm staat dan stil, en dat is een prima achtergrond. (Chrome en Edge kennen het, Safari en Firefox in hun recente versies.) --------------------------------------------------------- */ @supports (animation-timeline: scroll(root block)) { .tscb_lagen__svg { animation: tscb_lagen_parallax linear both; animation-timeline: scroll(root block); } /* De kadrering (--tscb_lagen_x/y) staat in dezelfde translate en moet dus in allebei de keyframes mee, anders springt de vorm bij het starten van de animatie terug naar 0. */ @keyframes tscb_lagen_parallax { from { translate: var(--tscb_lagen_x) var(--tscb_lagen_y); } to { translate: var(--tscb_lagen_x) calc(var(--tscb_lagen_y) + var(--tscb_lagen_parallax)); } } @media (prefers-reduced-motion: reduce) { .tscb_lagen__svg { animation: none; } } } /* transform-box: fill-box zet het draaipunt op het midden van de laag zelf. Zonder deze regel is de origin het midden van het hele SVG-canvas en zwaaien de lagen om een punt buiten zichzelf — dan is de rotatie ineens een baan i.p.v. een kanteling. */ .tscb_lagen__laag { opacity: var(--tscb_lagen_opacity); transform-box: fill-box; transform-origin: center; will-change: transform; } /* Twee bewegingen, tegen elkaar in. Welke laag welke krijgt is afwisselend, zodat naburige lagen altijd uit elkaar lopen. */ @keyframes tscb_lagen_drift_a { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(var(--tscb_lagen_drift), calc(var(--tscb_lagen_drift) / -2)) rotate(var(--tscb_lagen_tilt)); } } @keyframes tscb_lagen_drift_b { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(calc(var(--tscb_lagen_drift) * -0.8), calc(var(--tscb_lagen_drift) / 2)) rotate(calc(var(--tscb_lagen_tilt) * -1)); } } /* Duur en negatieve delay per laag. De duren zijn bewust geen veelvouden van elkaar (38 / 47 / 43 / 53 / 61): daardoor valt het patroon pas na uren samen en herhaalt het beeld zich praktisch nooit zichtbaar. De delays zijn negatief, zodat elke laag bij het laden al midden in z'n beweging zit en er geen gezamenlijke start is. */ .tscb_lagen__laag--1 { animation: tscb_lagen_drift_a calc(var(--tscb_lagen_duur) * 1.00) ease-in-out -3s infinite; } .tscb_lagen__laag--2 { animation: tscb_lagen_drift_b calc(var(--tscb_lagen_duur) * 1.24) ease-in-out -11s infinite; } .tscb_lagen__laag--3 { animation: tscb_lagen_drift_a calc(var(--tscb_lagen_duur) * 1.13) ease-in-out -19s infinite; } .tscb_lagen__laag--4 { animation: tscb_lagen_drift_b calc(var(--tscb_lagen_duur) * 1.39) ease-in-out -27s infinite; } .tscb_lagen__laag--5 { animation: tscb_lagen_drift_a calc(var(--tscb_lagen_duur) * 1.61) ease-in-out -37s infinite; } /* Wie beweging heeft uitgezet krijgt de lagen gewoon stil. De gestapelde vorm blijft, alleen het driften stopt. */ @media (prefers-reduced-motion: reduce) { .tscb_lagen__laag { animation: none; } } /* --------------------------------------------------------- 3. INTRO — de inhoud fadet kort in bij het laden. Alleen de inhoud: de achtergrondlagen staan er meteen, zodat de pagina niet uit het niets opdoemt maar de tekst erop verschijnt. HET GAAT OM header/main/footer en niet om body: de lagen zijn een direct kind van body, dus zouden die anders meefaden. GEEN opacity: 0 IN DE BASISREGEL. Dat is het verschil tussen een veilige en een gevaarlijke intro-animatie. Zet je de start- toestand in de regel zelf, dan blijft de pagina onzichtbaar zodra er iets misgaat met de animatie — een oudere browser, een uitgeschakelde animatie, een fout verderop in het bestand. Met animation-fill-mode: backwards staat de nul alleen IN de keyframe: de browser past hem toe zolang de animatie loopt en valt daarbuiten terug op de normale waarde. Gaat de animatie niet door, dan is de inhoud gewoon zichtbaar. Kort houden is hier het hele punt. Een halve seconde voelt als "de pagina komt op gang"; alles daarboven voelt als wachten, en de lezer wacht al op het laden zelf. --------------------------------------------------------- */ /* De HEADER doet niet mee. Die is het vaste punt van de pagina — logo en menu horen er te staan zodra je aankomt, niet te verschijnen. Samen met de achtergrondlagen vormt hij het decor waarin de inhoud daarna binnenkomt. */ body > main > *, body > footer { --tscb_intro_duur: .5s; --tscb_intro_stap: 90ms; /* vertraging per blok, van boven naar beneden */ /* Wachten voordat de trap begint. In die pauze is de pagina niet leeg: de achtergrondlagen doen niet mee aan de intro en staan er meteen. Je ziet dus eerst de vorm en daarna de tekst die erop verschijnt — dat is precies de volgorde die je wilt. Wel de grens bewaken: elke tiende seconde hierboven voelt de lezer als traagheid van de site zelf, niet als opzet. */ --tscb_intro_wacht: 0s; animation: tscb_intro var(--tscb_intro_duur) ease-out backwards; } /* Wachten mag alleen waar de achtergrondvorm die pauze vult; op een kale pagina is een halve seconde leeg scherm gewoon traagheid. */ body:has(.tscb_lagen) > main > *, body:has(.tscb_lagen) > footer { --tscb_intro_wacht: .5s; } @keyframes tscb_intro { from { opacity: 0; } } /* De trap. Op de SECTIES en niet op
als geheel: zou main zelf ook faden, dan vermenigvuldigt zijn dekking met die van de secties eronder en verdwijnt het trapje in een algemene waas. Vaste nth-child-regels en geen sibling-index(): die functie is nog te vers om er de hele intro op te laten rusten. Zes stappen is ruim genoeg — verder dan het tweede scherm ziet niemand de volgorde nog, dus alles vanaf de zevende sectie deelt de laatste vertraging. Zonder die afkap zou een lange pagina onderaan seconden staan wachten op iets wat toch al buiten beeld is. backwards is wat de trap mogelijk maakt: daardoor houdt een blok zijn begintoestand vast tijdens de vertraging, in plaats van zichtbaar te staan wachten tot het aan de beurt is. */ body > main > *:nth-child(1) { animation-delay: calc(var(--tscb_intro_wacht) + 0 * var(--tscb_intro_stap)); } body > main > *:nth-child(2) { animation-delay: calc(var(--tscb_intro_wacht) + 1 * var(--tscb_intro_stap)); } body > main > *:nth-child(3) { animation-delay: calc(var(--tscb_intro_wacht) + 2 * var(--tscb_intro_stap)); } body > main > *:nth-child(4) { animation-delay: calc(var(--tscb_intro_wacht) + 3 * var(--tscb_intro_stap)); } body > main > *:nth-child(5) { animation-delay: calc(var(--tscb_intro_wacht) + 4 * var(--tscb_intro_stap)); } body > main > *:nth-child(n+6), body > footer { animation-delay: calc(var(--tscb_intro_wacht) + 5 * var(--tscb_intro_stap)); } /* Wie beweging heeft uitgezet krijgt de pagina meteen compleet. */ @media (prefers-reduced-motion: reduce) { body > main > *, body > footer { animation: none; } } /* ========================================================= ZICHTBAAR OPPERVLAK PER PAGINA — hier stel je het beeld in. Alles op één plek; verder in dit bestand hoef je niet te zijn. Eén vorm die per pagina anders gekaderd staat: de site hangt samen, maar geen twee pagina's tonen hetzelfde plaatje. ZOOM = welk deel van de vorm in de schermbreedte past. 1 = de hele vorm precies passend .85 = ruim beeld, randen net buiten .37 = flink ingezoomd, ruwweg een kwart van de vorm .20 = detail, één penseelstreek vult het scherm Lager = verder inzoomen. Boven de 1 komt de vorm los van de schermranden en zie je hem als geheel zweven. VERSCHUIVING = waar de linkerrand van de vorm begint, in vw vanaf de linkerkant van het scherm. 0 = tegen de linkerrand 34vw = een derde van het scherm blijft links leeg -60vw = de vorm loopt links buiten beeld door Zoom en verschuiving staan los van elkaar: inzoomen verplaatst de vorm niet. De verticale stand staat los: --tscb_lagen_y (0 = midden, bv. -10vh duwt de vorm omhoog). NIEUWE PAGINA erbij: één regel hieronder, plus de slug in de tabel in functions.php. De klassenaam is de paginanaam, zodat dit blok leesbaar blijft zonder heen en weer te zoeken. ========================================================= */ /* Home — gecentreerd, en bewust GROTER dan het kader. Op zoom .85 paste de hele vorm in beeld, en dan zie je wat het is: een cirkel. Dat is precies wat je hier niet wilt — als achtergrond werkt deze vorm doordat je alleen doorlopende bogen ziet die aan alle kanten het beeld uit lopen. Zodra de cirkel sluit, wordt hij een figuur waar je naar kijkt in plaats van een ondergrond waar je overheen leest. Vandaar verder inzoomen dan strikt nodig: op .70 loopt de vorm links en rechts het beeld uit. Zet je de zoom terug omhoog, dan sluit de cirkel weer. */ .tscb_lagen--home { --tscb_lagen_zoom: .70; --tscb_lagen_verschuiving: 0vw; } /* Tablet en kleiner: verder inzoomen. Dat doet in één knop twee dingen, want de vorm is vierkant — hij loopt rechts verder buiten beeld (op een smal scherm wil je juist géén sluitende cirkel zien) en wordt tegelijk twee keer zo hoog, dus hij loopt een veel groter deel van de pagina mee. */ @media (max-width: 59.99rem) { .tscb_lagen--home { --tscb_lagen_zoom: .35; } } /* Van home naar contact in vijf gelijke stappen. Verder inzoomen maakt de vorm groter, dus zie je minder bogen tegelijk — dat is wat het rustiger maakt. De parallax dooft in dezelfde reeks uit. Per breekpunt apart, want home en contact staan daar anders: op smal scherm gaat de vorm tegen de linkerrand (0vw), op breed naar LINKS (contact -20vw). Onderstaande waarden zijn de basis (smal scherm). */ .tscb_lagen--topics { --tscb_lagen_zoom: 0.354; --tscb_lagen_verschuiving: 0vw; --tscb_lagen_parallax: 36vh; } .tscb_lagen--services { --tscb_lagen_zoom: 0.358; --tscb_lagen_verschuiving: 0vw; --tscb_lagen_parallax: 27vh; } .tscb_lagen--projects { --tscb_lagen_zoom: 0.362; --tscb_lagen_verschuiving: 0vw; --tscb_lagen_parallax: 18vh; } .tscb_lagen--publications { --tscb_lagen_zoom: 0.366; --tscb_lagen_verschuiving: 0vw; --tscb_lagen_parallax: 9vh; } /* Breed scherm: eigen reeks, en hier telt --tscb_lagen_y mee omdat contact die alleen hier verzet. */ @media (min-width: 60rem) { .tscb_lagen--topics { --tscb_lagen_zoom: 0.634; --tscb_lagen_verschuiving: -4.0vw; --tscb_lagen_y: -10.8%; } .tscb_lagen--services { --tscb_lagen_zoom: 0.568; --tscb_lagen_verschuiving: -8.0vw; --tscb_lagen_y: -12.6%; } .tscb_lagen--projects { --tscb_lagen_zoom: 0.502; --tscb_lagen_verschuiving: -12.0vw; --tscb_lagen_y: -14.4%; } .tscb_lagen--publications { --tscb_lagen_zoom: 0.436; --tscb_lagen_verschuiving: -16.0vw; --tscb_lagen_y: -16.2%; } } /* Contact — ver ingezoomd op de linkerkant van de vorm. */ .tscb_lagen--contact { --tscb_lagen_zoom: .37; --tscb_lagen_verschuiving: 0vw; /* Geen parallax hier. De contactpagina scrollt maar een paar honderd pixels, dus de vorm zou pas net op gang komen en dan al klaar zijn — een beweging die niet afmaakt leest als een hapering, niet als diepte. 0px en niet een kale 0: de waarde komt in een translate en krijgt daar wel een eenheid nodig zodra er ooit mee gerekend wordt. */ --tscb_lagen_parallax: 0px; } /* Vanaf tablet-breed zakt die uitsnede rechtsonder uit beeld: naar links en omhoog, zodat de boog weer langs de kop en het formulier loopt. */ @media (min-width: 60rem) { .tscb_lagen--contact { --tscb_lagen_verschuiving: -20vw; --tscb_lagen_y: -18%; } } /* Golf en lagen tegelijk wordt troebel: staan de lagen op de pagina, dan gaat de golf uit. :has() is hier de nette weg — geen body-class nodig die iemand later moet onthouden. */ body:has(.tscb_lagen)::before { /* Op deze pagina's neemt de foto hieronder de plek van de golf over; die twee tegelijk wordt troebel. Zonder een pagina-foto blijft het bij `none` en is er dus gewoon niets. */ content: none; } /* --------------------------------------------------------- 2c. PAGINAFOTO — een beeld achter de bewegende lagen. DE STAPELING is hier het hele punt, en die luistert nauw: paginakleur de achtergrond van body — dat is de "canvas", die ligt buiten de z-index-volgorde en dus altijd onderop foto z-index -2 lagen z-index -1 (de drijvende penseelstreken) inhoud gewoon in de stroom, dus daarboven Een negatieve z-index klinkt alsof het element achter zijn eigen ouder verdwijnt, en dat gebeurt ook — maar niet achter diens ACHTERGROND: die van body wordt naar de canvas gepromoveerd en ligt onder alles. Precies daardoor past de foto ertussen. Op body::before en niet als een extra div: dit is decoratie zonder betekenis, en dan hoort het niet in de HTML. Een schermlezer krijgt er niets van mee, wat klopt — de betekenisvolle foto van Patries staat in de pagina zelf, mét alt-tekst. --------------------------------------------------------- */ body:has(.tscb_lagen--home)::before { --tscb_foto: url("/wp-content/uploads/2026/09/PatriesBoekholt.webp"); /* De breedte stuurt, niet de hoogte. In vh gemeten werd de foto op een laag scherm smal en op een hoog scherm breed, terwijl hij zich juist tot de KOLOM ernaast moet verhouden. Boven 1650 px stopt het meegroeien: 50vw is daar 825 px en breder wordt het beeld topzwaar. */ --tscb_foto_breedte: min(50vw, 825px); --tscb_foto_opacity: 1; --tscb_foto_parallax: 12vh; /* hoever de foto onder z'n plek begint */ content: ""; /* absolute en geen fixed: de foto hoort bij het EIND van de pagina en komt daar één keer tevoorschijn, in plaats van de hele rit in de rechteronderhoek te blijven staan. Ophangpunt is body (position: relative, zie sectie 2). */ position: absolute; inset: auto 0 0 auto; z-index: -2; pointer-events: none; /* De hoogte komt uit de breedte, zodat de onderkant op élk scherm precies op bottom: 0 uitkomt. Zet je een eigen hoogte, dan snijdt `background-size: 100% auto` de foto boven- of onderlangs af. */ width: var(--tscb_foto_breedte); aspect-ratio: 1344 / 1008; /* = de maat van PatriesBoekholt.webp */ opacity: var(--tscb_foto_opacity); background: var(--tscb_foto) right bottom / 100% auto no-repeat; /* De golf in sectie 1 zit op ditzelfde ::before en zet daar een mask. Zonder deze reset knipt die golfvorm de foto schuin af. */ -webkit-mask: none; mask: none; } /* Lichte parallax: de foto schuift omhoog terwijl je hem nadert en staat precies goed zodra je helemaal onderaan bent. background-position en geen translate: een verschoven element telt mee voor de scrollhoogte, dus dan zou de pagina langer worden juist terwijl je erdoorheen scrollt — de tijdlijn hieronder rekent zichzelf dan scheef. view() en niet scroll(root): de foto is alleen in het laatste scherm te zien, en dan wil je dat de beweging ook daar zit. `entry` loopt van "de foto raakt de onderrand van het scherm" tot "hij staat er helemaal in", en dat laatste is hier precies het einde van de pagina. */ @supports (animation-timeline: view()) { body:has(.tscb_lagen--home)::before { animation: tscb_foto_opkomst linear both; animation-timeline: view(block); animation-range: entry; } @keyframes tscb_foto_opkomst { from { background-position: right 0 bottom calc(var(--tscb_foto_parallax) * -1); } to { background-position: right 0 bottom 0; } } @media (prefers-reduced-motion: reduce) { body:has(.tscb_lagen--home)::before { animation: none; } } } /* Tot en met tablet over de volle breedte: op 50vw is de foto daar te klein om nog iemand in te herkennen. 100% en geen 100vw: die laatste telt de scrollbar mee en geeft dus een streep horizontale overflow. */ @media (max-width: 59.99rem) { body:has(.tscb_lagen--home)::before { --tscb_foto_breedte: 100%; } } /* ========================================================= TEKSTPAGINA — gedeelde opmaak, scope-class .tscb_pagina. Stond in pages/page.css; hoort bij de algemene layout. Pagina-eigen beelden staan in pages/home.css. ========================================================= */ .tscb_pagina { --tscb_pagina_measure: 74ch; /* leesbreedte lopende tekst */ --tscb_pagina_rule: var(--tscb_tertiary_1); --tscb_pagina_accent: var(--tscb_tertiary_2); --tscb_pagina_stil: var(--tscb_grey_700); /* rustiger dan de body-kleur */ } /* Op de

en