IN DE SVG. De tekening zit in [data-dgx] en dat element draagt aria-hidden="true", want het is decoratie. Alles daarbinnen is daarmee uit de toegankelijkheidsboom, dus een <title> of een aria-label DAAR levert niets op; dat is precies de val. Deze <span> staat er buiten en draagt zelf geen aria-hidden. Hem visueel wegnemen met de clip-methode van .sc-srt houdt hem in de boom en in de tekst van de pagina, terwijl display:none of visibility:hidden hem er juist uit zou gooien. Getoetst met een uitlezing van de toegankelijkheidsboom, zie het rapport. De markup is niet van dit bestand, vandaar dat de span blijft staan en hier alleen van vorm verandert. */ .mc-bijschrift { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; left: auto; bottom: auto; transform: none; } /* Regel onder de scene, uit content/beveiliging.md. */ [data-mc-onder] { position: absolute; left: 0; right: 0; bottom: 4vh; z-index: 3; text-align: center; padding: 0 clamp(24px, 6vw, 80px); opacity: 1; font-size: var(--sc-p-t); line-height: var(--sc-lh-l); color: var(--sc-body); } /* --- de zes stromen die naar de machine lopen ------------------------------ Zes woorden uit content/beveiliging.md, ## scene-machine, blok "Zwevende labels". WAT HIER EERST STOND EN WAAROM HET WEG IS Zes capsules met een stip erin, verspreid over het beeld. Drie dingen gingen daar mis. Ze hingen los in de ruimte zonder enige relatie tot het apparaat, ze waren alle zes even zwaar zodat er geen begin en geen einde in zat, en de capsulevorm belooft een klikvlak dat er niet is: op het gerenderde beeld lazen ze als knoppen die vergeten waren aan te sluiten. Het besluit van 29 augustus 2026 dat de pilvorm van de template hier mag blijven staan (BRIEF paragraaf 0, besluit 2) gaat over de template. Deze zes zijn onze eigen toevoeging in een scene die we zelf bouwen, dus daar geldt de huisregel gewoon: een label is TEKST. Vandaar dat er hier geen vlak, geen rand en geen radius meer omheen staat. WAT ER NU STAAT Elk woord is gewone tekst met een dunne gestippelde lijn die naar het apparaat loopt, en over die lijn beweegt een klein warm punt richting de machine. Daarmee vertelt het beeld wat er gebeurt: dit werk gaat DAARHEEN. Drie woorden staan links van het apparaat met de lijn naar rechts, drie rechts met de lijn naar links, op verschillende hoogtes, zodat het leest als stromen die van twee kanten binnenkomen. LEESVOLGORDE EN GEWICHT De volgorde is die van content/beveiliging.md en de opmaak laat hem zien, in drie trappen: Mail en Offertes staan vooraan in --color--gray-950 op semi-bold, Contracten en Facturen een trap lichter, Dossiers en Controles het lichtst in --color--gray-900. De lijnen volgen diezelfde trap in dekking. Bovendien fadet vp/scene.js ze een voor een in, in dezelfde volgorde, en lopen de punten met dezelfde stagger. Er is dus een begin (Mail, linksboven) en een eind (Controles, rechtsonder). BREEDTE. De lijnen hebben zijruimte nodig naast het apparaat, en die is er pas vanaf 1200px. Daaronder vallen de zes terug in de stroom als een leesbare rij woorden onder de scene, met een stip ervoor en ruime kolomafstand; dat is de vorm die de huisregel voorschrijft en hij houdt het tot 320 breed. vp/scene.js laat ze opkomen met style.translate en NIET met style.transform: op .mc-doc staat geen animatie meer, maar de punt op de lijn wel, en een animatie verslaat een inline stijl. Met translate blijven de twee gescheiden. */ /* DE LIJNEN LOPEN ACHTER HET APPARAAT LANGS. Ze stonden eerst op z-index 4, boven [data-mc-toneel] (2), en liepen dus over de machine heen; dan lijken ze erop geplakt in plaats van eromheen te lopen. Op 1 zit deze laag tussen de stage-achtergrond met de spot (z-index auto) en het toneel, en valt de machine er werkelijk overheen. Dat is precies wat het beeld diepte geeft: een lijn die achter een object verdwijnt vertelt dat het object ervoor staat. Waarom niet met een hogere z-index op de machine: die leeft in een eigen 3D-context en laat zich er niet zomaar tussen schuiven. De laag zakken werkt wel, want [data-mc-toneel] draagt zelf position:relative met z-index 2 en is daarmee de stapelcontext waar de machine in zit. Nagemeten op een gerenderd beeld en niet in de code: zie het rapport. */ .mc-docs { position: absolute; inset: 0; z-index: 1; margin: 0; padding: 0; list-style: none; pointer-events: none; /* De lijn is decoratie en draagt geen tekst, dus hier geldt geen contrasteis. Het accent op 34 procent leest als een spoor en niet als een streep die met de tekst concurreert. */ --mc-spoor: rgba(165, 68, 26, .34); } .mc-doc { position: absolute; top: var(--y, 50%); display: flex; align-items: center; gap: 12px; font-size: var(--sc-p-xs); line-height: var(--sc-lh-m); letter-spacing: .01em; white-space: nowrap; opacity: 1; } /* HORIZONTAAL VASTGEZET AAN HET APPARAAT, NIET AAN HET VENSTER De drie links worden op hun RECHTERrand geplaatst en de drie rechts op hun LINKERrand, dus daar waar de lijn eindigt. Anders zou een lang woord als Contracten het lijneinde verder opschuiven dan een kort woord als Mail, en dan waaieren de zes uit terwijl ze juist op één punt moeten uitkomen. De twee calc-regels volgen de zijkanten van de tekening. Het doek [data-dgx] is 560px breed vanaf 1280 en de tekening erin is min(286px, 21vw); gemeten op 1200, 1280, 1440, 1680 en 1920 ligt de rechterrand van de tekening op 53,5vw + 350px, met een afwijking onder de 15px over dat hele bereik. De linkerrand is dat min de breedte van de tekening. De lijnen komen daardoor op elke breedte binnen een paar tientallen pixels van het apparaat uit in plaats van bij 1920 los te raken. In de markup staat de <i> vóór de tekst; links draait die volgorde dus om. */ [data-mc-doc="1"], [data-mc-doc="2"], [data-mc-doc="3"] { right: calc(46.5vw - 340px + min(286px, 21vw)); flex-direction: row-reverse; } [data-mc-doc="4"], [data-mc-doc="5"], [data-mc-doc="6"] { left: calc(53.5vw + 360px); flex-direction: row; } /* De lijn. Een repeating-linear-gradient en geen border-style: dotted, want dan bepaalt de browser de puntafstand en die verschilt per engine. */ .mc-doc i { flex: 0 0 auto; position: relative; width: var(--len); height: 1px; background-image: repeating-linear-gradient(to right, var(--mc-spoor) 0 2px, transparent 2px 8px); opacity: var(--sp, 1); } /* Het punt dat over de lijn naar de machine loopt. Alleen transform en opacity, dus dit blijft bij de compositor. */ .mc-doc i::after { content: ""; position: absolute; top: -2.5px; left: -2.5px; width: 6px; height: 6px; border-radius: 50%; background: var(--sc-accent); animation: none; animation-delay: var(--d, 0s); } [data-mc-stage].is-actief .mc-doc i::after { animation: mcStroom 2.1s var(--sc-ez) 1; animation-delay: var(--d, 0s); } /* Rechts van het apparaat loopt de lijn de andere kant op, dus daar draait de punt om: hij begint bij het woord en eindigt bij de machine. */ [data-mc-doc="4"] i::after, [data-mc-doc="5"] i::after, [data-mc-doc="6"] i::after { animation-direction: reverse; } @keyframes mcStroom { 0% { transform: translateX(0); opacity: 0; } 10%, 82% { opacity: 1; } 100% { transform: translateX(var(--len)); opacity: 0; } } /* DRIE TRAPPEN OP GEWICHT EN MAAT, NIET OP KLEUR. De onderste trap stond eerst in --color--gray-900 en zakte daarmee op de warme ondergrond naar 4,40:1, net onder de norm voor kleine tekst: gemeten op 1920. Alle zes staan nu in --color--gray-950, dat op elke gemeten ondergrond ruim 9:1 haalt, en het verschil zit in gewicht en maat. Dat is bovendien zuiverder, want kleur is dan nergens het enige signaal. */ #scene-machine [data-mc-doc="1"], #scene-machine [data-mc-doc="2"] { color: var(--sc-ink); font-weight: var(--sc-w-sb); font-size: var(--sc-p-xs); } #scene-machine [data-mc-doc="3"], #scene-machine [data-mc-doc="4"] { color: var(--sc-ink); font-weight: var(--sc-w-m); font-size: var(--sc-p-xs); } #scene-machine [data-mc-doc="5"], #scene-machine [data-mc-doc="6"] { color: var(--sc-ink); font-weight: var(--sc-w-m); font-size: var(--sc-p-t); } /* Hoogte, lijnlengte, lijndekking en de vertraging van het punt. De zes hoogtes liggen in de band waar de tekening staat (gemeten y35 tot y55 procent van de stage over het hele bereik 1200 tot 1920), links en rechts een halve stap uit elkaar, zodat de zes lijnen als een waaier op het apparaat uitkomen in plaats van als een tralie. --len is een clamp en geen vast getal: op 1200 is er tussen .mc-tekst en de tekening 209px en op 1920 ruim 240, dus de lijn moet meeschalen. */ /* De lijn loopt door TOT ACHTER de tekening en niet tot ervoor: hij moet er zichtbaar onder verdwijnen. De basis is de afstand tot de rand van het apparaat plus 70px overlap. */ .mc-doc { --len: calc(clamp(64px, 6vw, 140px) + 70px); } [data-mc-doc="1"] { --y: 41%; --sp: 1; --d: 0s; } /* Mail */ [data-mc-doc="2"] { --y: 46%; --sp: .84; --d: .7s; } /* Offertes */ [data-mc-doc="3"] { --y: 54%; --sp: .68; --d: 1.4s; } /* Contracten */ [data-mc-doc="4"] { --y: 40%; --sp: .84; --d: .35s; } /* Facturen */ [data-mc-doc="5"] { --y: 48%; --sp: .68; --d: 1.05s;} /* Dossiers */ [data-mc-doc="6"] { --y: 54%; --sp: .54; --d: 1.75s;} /* Controles */ /* ========================================================================== 3. WILL-CHANGE, alleen zolang een scene in beeld is De IntersectionObserver in vp/scene.js zet en haalt .is-actief weg. Buiten beeld verdwijnt daarmee ook de laag die de compositor apart bewaart. ========================================================================== */ [data-bur-stage].is-actief [data-bur-groep], [data-bur-stage].is-actief [data-bur-scherm], [data-bur-stage].is-actief [data-bur-achter], [data-bur-stage].is-actief [data-bur-midden], [data-bur-stage].is-actief [data-bur-voor], [data-mc-stage].is-actief .mc-machine { will-change: transform; } /* ========================================================================== 4. BREEDTES. 767 en 991, de breekpunten van Webflow. ========================================================================== */ /* Telefoon. Hetzelfde getal dat vp/scene.js in zijn matchMedia gebruikt. DE TELEFOONBEHUIZING IS ERUIT, en dat is een keuze met een reden. Hier stond een nagebouwd toestel: een behuizing met een rand van 4,55 procent, een kin, een hoekstraal van 14 procent en een camera-eiland. Dat was het mobiele tegenhangertje van de monitor op desktop. Nu de monitor weg is, zou een toestel op mobiel de scene halverwege laten omslaan: op een breed scherm zweeft het dashboard vrij in de ruimte, op een smal scherm staat het in een apparaat. Dan vertelt dezelfde scene op de ene maat een ander verhaal dan op de andere, en het verhaal dat de opdrachtgever vroeg is het zwevende. Het dashboard zweeft daarom op ELKE maat, alleen kleiner en met minder eromheen. WAT ER OP EEN TELEFOON ANDERS IS 1. De eindschaal gaat van .42 naar .48. Het scherm was een kopie van het venster binnen een behuizing; zonder die rand is er ruimte over, en de tekst op het scherm staat op deze maat toch al op de grens van leesbaar. Op 375 rendert het paneel daarmee als 180 bij 390 in plaats van 157 bij 341. 2. De hoekstraal is 9 procent van de schermbreedte en niet 4,2. Een klein paneel met een grote radius leest als een object; met een kleine radius als een uitsnede. Op 375 is dat 16px op een paneel van 180 breed. 3. Er blijven DRIE kaarten van de zes over, één per diepte. Zes op 375 breed staat gelijk aan een rij die het paneel volledig afdekt; met drie blijft de diepte-ladder heel (maat, schaduw en occlusie) en blijft het scherm het onderwerp. Gemeten op 320, 375 en 767. 4. GEEN PERSPECTIEF, ongewijzigd. Het scherm toont een kopie van een venster van 375 breed op 48 procent, dus een wegdraaiende linkerhelft haalt daar nog eens 6 procent leesbaarheid af en dan gaat de belofte van de scene dicht. Het paneel staat hier recht in beeld, en de compositie blijft gecentreerd omdat er geen tweede kolom naast past. */ @media (max-width: 767px) { #scene-bureau { --bur-eind: .48; --bur-y: 2vh; --bur-r: calc(var(--bur-eind) * 9vw); --bur-hoogte: 205vh; --bur-x: 0; --bur-ry: 0; --bur-rx: 0; /* Het vertrek is hier de helft van de 8vh op de brede maat. Het scherm staat op deze maat met zijn bovenrand op 27vh en de tekst begint op 5vh; de krimp trekt de bovenrand nog wat terug, maar er blijft maar een goede 15vh tussen de twee en daar mag geen 8vh van af. */ --bur-vertrek: -4; } #scene-machine { --mc-hoogte: 192vh; } /* loop 80vh -> 92vh, +15,0 procent */ .bur-sfeer { left: 50%; top: 20%; width: 150vw; height: 78vh; } .bur-lichtval { left: -30vw; top: -20vh; width: 110vw; height: 80vh; } [data-bur-halo] { width: 116vw; height: 68vh; top: 50%; } /* De slagschaduw hoort bij het scherm en moet dus met --bur-y mee zakken, net als de drie kaarten hieronder. Stond hij op een kaal procent, dan kroop hij op een korter toestel achter het paneel: gemeten op 390 bij 664 lag het middelpunt op y505 terwijl de onderrand van het paneel na de zak op y518 kwam, dus de schaduw viel er grotendeels achter. */ .bur-grondschaduw { top: calc(76% + var(--bur-y)); width: 86vw; height: 84px; --bur-grond-op: .13; } /* DRIE KAARTEN IN PLAATS VAN ZES, één per diepte, zodat de ladder heel blijft. De drie die overblijven zijn de eerste van elke trap in de leesvolgorde: Overzicht (ver), Controles (midden) en Mail (dichtbij). De andere drie staan op display:none en worden door vp/scene.js overgeslagen, want die controleert de zichtbaarheid voordat hij schrijft. De maten gaan een trap terug: op 375 is een kaart van 44px hoog met 16px zetsel bijna een derde van de paneelbreedte. Gemeten op 320, 375 en 767. */ [data-bur-zweef="2"], [data-bur-zweef="4"], [data-bur-zweef="6"] { display: none; } /* Terugzetten. De query op 1399 hierboven zet Controles ook uit, want daar is hij de kaart die op de tekstkolom botst. Op een telefoon staat die kolom er niet naast maar erboven, en dan is Controles juist de kaart van de middelste trap die overblijft. Zonder deze regel valt de hele middelste diepte weg en is de ladder op mobiel twee treden in plaats van drie. */ [data-bur-zweef="3"] { display: flex; } /* HIER STAAT HET SCHERM RECHT IN BEELD, dus zijn randen zijn exact te berekenen en niet gemeten: --bur-eind is .48 en --bur-x, --bur-ry en --bur-rx staan op 0, dus het scherm loopt van 26vw tot 74vw en van 26vh + --bur-y tot 74vh + --bur-y. --bur-y telt mee omdat de query voor korte toestellen hem van 1vh naar 7vh zet. Zonder die term stond Overzicht op 320 bij 568 op y125 terwijl de bovenrand van het scherm op y187 lag: de kaart hing 60px boven het scherm in plaats van er half achter. Gemeten. */ /* DE VIER RANDEN VAN HET PANEEL, AFGELEID UIT --bur-eind. Hier stonden 26vw, 74vw, 26vh en 74vh als losse getallen. Die vier zijn niet onafhankelijk: ze zijn 50 min of plus --bur-eind maal 50, uitgerekend voor de eindschaal .48. Zet iemand --bur-eind ooit anders, dan schoof het paneel wel en bleven de kaarten staan; precies de fout die de desktopkant met --sc-dl en --sc-dr al een keer heeft opgelost. Nu volgen ze vanzelf. Op .48 komen deze vier op exact dezelfde 26 en 74 uit als eerst. */ .bur-zwerm { --sc-dl: calc((50 - var(--bur-eind) * 50) * 1vw); --sc-dr: calc((50 + var(--bur-eind) * 50) * 1vw); --sc-dt: calc((50 - var(--bur-eind) * 50) * 1vh + var(--bur-y)); --sc-db: calc((50 + var(--bur-eind) * 50) * 1vh + var(--bur-y)); } [data-bur-zweef="1"] { /* Overzicht, ver */ /* 34 en niet 62. De kaart is 95 breed en het woord begint 32px na de linkerrand, dus op 62 verdween de eerste lettergreep mee onder het scherm en las de kaart als "erzicht". Op 34 gaat alleen de icoontegel eronder. Gemeten op 320 en 375. */ --kx: calc(var(--sc-dr) - 34px); --ky: calc(var(--sc-dt) - 12px); } [data-bur-zweef="3"] { /* Controles, midden */ /* DE ONDERGRENS VAN 10px IS ER OM 320. De linkerrand van het paneel ligt daar op 83px, dus de kaart begon op x5 en stond vrijwel tegen de vensterrand; met de intrede-offset van --kdx -16 erbij liep hij er gemeten 2px overheen en knipte overflow:clip hem af. Boven 340 breed verandert deze max() niets. */ --kx: max(10px, calc(var(--sc-dl) - 78px)); --ky: calc(50vh + var(--bur-y) - 60px); } [data-bur-zweef="5"] { /* Mail, dichtbij */ --kx: calc(var(--sc-dl) + 22px); --ky: calc(var(--sc-db) - 30px); } .bur-kaart--dichtbij { gap: 10px; padding: 7px 15px 7px 7px; border-radius: 10px; font-size: var(--sc-p-xs); --kdx: -26; --kdy: 32; } .bur-kaart--dichtbij .bur-kaart-ico { width: 32px; height: 32px; border-radius: 7px; } .bur-kaart--dichtbij .bur-kaart-ico svg { width: 16px; height: 16px; } .bur-kaart--mid { gap: 8px; padding: 6px 12px 6px 6px; border-radius: 8px; font-size: var(--sc-p-t); --kdx: -16; --kdy: 21; } .bur-kaart--mid .bur-kaart-ico { width: 26px; height: 26px; border-radius: 6px; } .bur-kaart--mid .bur-kaart-ico svg { width: 14px; height: 14px; } .bur-kaart--ver { gap: 7px; padding: 4px 10px 4px 4px; border-radius: 7px; font-size: var(--sc-p-t); --kdx: -8; --kdy: 13; } .bur-kaart--ver .bur-kaart-ico { width: 21px; height: 21px; border-radius: 5px; } .bur-kaart--ver .bur-kaart-ico svg { width: 12px; height: 12px; } /* De strook bovenin het paneel was ruim omdat er een camera-eiland boven hing. Dat eiland is weg met de behuizing, dus de balk staat weer op de gewone padding van het scherm. */ .bur-dash-top { padding: 16px 16px 12px; } .bur-stand { gap: 8px; } .bur-stand span { padding: 0; } /* Het zetsel van het nagebouwde scherm gaat op een telefoon een trap terug. De reden dat het op desktop omhoog ging (het scherm staat daar op 34 procent) geldt hier minder, want --bur-eind is 0,42; en op 320x568 paste de inhoud er niet meer in: de onderste rij liep 25px onder het glas uit en het label NIEUW werd volledig afgeknipt. Gemeten. */ /* De onderpadding houdt op elk toestel de plek vrij waar de scroll-hint over het glas hangt. Zonder die ruimte raakte de knop op 375 bij 667 de onderrand van de lijst; gemeten 3px overlap, met 7vh is er 10px lucht. */ .bur-dash-main { padding: 3vh 18px 7vh; gap: 14px; max-width: none; } .bur-dash-kop { letter-spacing: -1px; max-width: none; } .bur-lijst-kop { padding: 13px 16px 11px; } /* DE TWEE REGELS DIE DE BELOFTE DRAGEN GAAN WEER EEN TRAP OMHOOG. Ze stonden hier op --sc-p-s terwijl de basisregel ze op --sc-p-l zet, en de toelichting erbij noemde als reden dat --bur-eind 0,42 was en de inhoud er op 320 bij 568 niet meer in paste. Die twee getallen kloppen niet meer: de eindschaal staat sinds de behuizing eruit ging op 0,48, en gemeten is er in het paneel op elke telefoonmaat ruimte over. De onderrand van de lijst ligt boven de onderrand van het glas met, gerekend in paneelmaat: 320x568 101px 375x667 112px 390x664 110px 360x740 122px 375x812 187px 414x896 231px Het verschil dat dit maakt in GERENDERDE pixels, want daar gaat het om: de kop van de lijst en de titel van elke rij gaan van 6,72 naar 8,64 op een smalle telefoon en naar 9,60 vanaf 480 breed. Dat is precies de greep die de desktopkant hierboven al toepast en daar beschrijft als "het verschil tussen een regel en een streepje". De bijregels (het onderschrift van een rij, de knop, de kop van de balk) blijven een trap lager staan: die dragen de belofte niet, en de ruimte is er niet voor allebei. */ .bur-lijst-kop span { font-size: var(--sc-p-xs); } .bur-rij .onder { font-size: var(--sc-p-xs); margin-top: 3px; } .bur-knop { font-size: var(--sc-p-xs); padding: 9px 15px; } /* De band gaat op een telefoon op één regel staan met het getal ervoor: de twee standen ernaast passen daar niet naast de kern zonder dat de zin "Wacht op uw akkoord" over drie regels breekt. Gemeten op 375: naast elkaar liep de band 214px hoog, onder elkaar 96px. "Vandaag voorbereid" valt weg. Het is de enige stand die niets over de staat van het werk zegt, en op een venster van 375 op 48 procent is de ruimte er niet voor. De twee die blijven zijn de belofte en het feit dat het lokaal draait; die twee dragen de scene. */ .bur-akkoord { padding: 14px 16px; border-radius: 18px; gap: 12px; flex-wrap: nowrap; align-items: center; } .bur-akkoord-kern { gap: 12px; align-items: center; } .bur-akkoord-kern b { font-size: var(--sc-h2); letter-spacing: -1px; } .bur-akkoord-kern span { font-size: var(--sc-p-s); } .bur-akkoord-naast { padding-left: 12px; gap: 12px; } .bur-stat:not(.bur-stat--leeft) { display: none; } .bur-stat--leeft { font-size: var(--sc-p-xs); } .bur-stat--leeft i { width: 7px; height: 7px; } /* De rij wrapt hier, want het label plus de knop passen op 375 niet naast een tekstkolom die twee regels nodig heeft. Zonder wrap kneep de kolom dicht tot een woord per regel en liep de knop er overheen; gemeten op 375 bij 812. Met een basis van 62 procent blijven icoon en tekst op de eerste regel en zakt de rechterhelft naar de tweede, tegen de rechterrand aan. Op 55 procent past de rij met alleen het label NIEUW nog wel op een regel en wrapt alleen de rij met het label plus de knop. */ .bur-rij { padding: 13px 16px; gap: 11px; flex-wrap: wrap; row-gap: 10px; } .bur-rij-tekst { flex: 1 1 55%; } .bur-rij .rechts { margin-left: auto; gap: 10px; } .bur-rij-ico { width: 32px; height: 32px; border-radius: 10px; } .bur-rij-ico svg { width: 15px; height: 15px; } .bur-rij--wacht { background: linear-gradient(90deg, var(--sc-tint) 0%, var(--sc-tint) 30%, rgba(251, 249, 244, 0) 88%); } [data-bur-regel] { top: 5vh; max-width: none; } /* Op een telefoon heeft deze scene de kop en het beeld TEGELIJK in beeld, anders dan een gewone sectiekop. Het h2-token staat op 479 al op 30px en op 767 op 34px; dat past. Alleen de marge onder de kop gaat eraf. */ [data-bur-regel] p { margin-top: 10px; } #scene-bureau .vp-bur-actie { margin-top: 8px; } /* De knop staat laag, zodat hij onder het zwevende paneel door blijft en de kaart Mail niet raakt. */ [data-bur-hint] { bottom: 4vh; } .bur-hint-knop { padding: 9px 10px 9px 18px; } /* De machinekolom staat op mobiel op COLUMN. Reden, gemeten op 375 breed in de vorige opzet: [data-mc-piloregel] stond hier op position:static en werd daardoor een tweede flex-item NAAST het doek. Doek (271px gewenst) plus alinea (186px) paste niet in 331px, dus kromp het doek tot 145px en werd de machine een duimnagel van ~75px. vp/dgx.js rekent --dgx-maat als min(breedte/1,02 , hoogte/0,60), dus de breedte was daar de rem, niet de hoogte. Op column krijgt het doek de volle breedte en telt --mc-dgx-h weer. De machine is het pronkstuk, dus de padding is hier smal en --mc-dgx-h ruim: het doek pakt zo bijna de volle vensterbreedte. */ [data-mc-toneel] { padding: 64px 16px 0; gap: 20px; } .mc-tekst { flex: 1 1 100%; max-width: none; } .mc-tekst p { margin-bottom: 18px; } .mc-machine { flex: 1 1 100%; height: auto; flex-direction: column; align-items: center; justify-content: flex-start; --mc-dgx-h: min(260px, 30vh); } [data-dgx] { width: 100%; margin-bottom: 0; } .mc-halo { top: 34%; width: 96%; height: 230px; opacity: .13; } .mc-vloerglans { display: none; } } /* EEN TOESTEL VAN MIDDELMATIGE HOOGTE HEEFT OOK EEN ZAK NODIG, ALLEEN EEN KLEINERE. --bur-y stond op 1vh tot 660 hoog en sprong daaronder ineens naar 7vh. Tussen die twee zit precies de maat die de meeste telefoons hebben, en daar liep het mis: de subkop eindigt op 5vh plus de hoogte van het zetsel, en de kaart Overzicht hangt aan de bovenrand van het paneel op 26vh plus --bur-y. Die twee naderen elkaar naarmate het venster korter wordt, want het zetsel is in px en de kaart in vh. Gemeten met de kaart op volle dekking: 390x664 5px OVERLAP van Overzicht over de laatste regel van de subkop 360x740 3px lucht 375x667 6px lucht 375x812 38px lucht Met 4vh zakt het hele zwevende geheel mee, want het paneel, de drie kaarten en de slagschaduw rekenen allemaal met --bur-y. Op 664 wordt dat 20px erbij en staat er 15px lucht; op 812 en hoger verandert er niets. De onderkant houdt ruimte zat: op 664 blijft er na de zak 67px tussen de onderrand van het paneel en de scroll-hint. Waarom een tweede breekpunt en geen clamp() op --bur-y: vp/scene.js leest deze waarde met getComputedStyle en parseFloat, en een custom property die niet met @property is aangemeld komt daar als letterlijke tekst uit. parseFloat van een clamp() geeft NaN, en de guard in meet() houdt dan stil de vórige waarde vast. Dan lopen CSS en JS uit elkaar zonder dat iets het meldt. --bur-y, --bur-eind, --bur-x, --bur-ry en --bur-rx moeten dus alle vijf een kaal getal blijven. */ @media (max-width: 767px) and (max-height: 800px) { #scene-bureau { --bur-y: 5vh; } } /* Een kort toestel, zoals de 320x568 van een oude iPhone SE. Het nagebouwde scherm is een kopie van het venster, dus wat daar niet in past valt onder het glas weg: gemeten stak de lijst er 43px onderuit en werd het label NIEUW volledig afgeknipt. Deze regels halen er 60px uit op de plekken waar het niet aan leesbaarheid kost. */ @media (max-width: 767px) and (max-height: 660px) { /* Op een kort toestel botst de tekstkolom bovenin op het toestel: gemeten op 320x568 liep de laatste regel van de subkop 13px achter het glas, en op 320x640 en 360x640 bleef er 6px over. Twee dingen lossen dat op zonder de tekst in te korten: de kop begint hoger en de hele groep zakt. --bur-y stuurt het scherm, en de slagschaduw en de kaarten volgen dezelfde --bur-x en dezelfde lagen, dus de compositie blijft bij elkaar. Na de ingreep: 26px lucht op 568 en 51 op 640. */ #scene-bureau { --bur-y: 8vh; } [data-bur-regel] { top: 3vh; } .bur-dash-top { padding: 11px 14px 9px; } /* De onderpadding houdt de plek vrij waar de scroll-hint over het toestel hangt. Zonder die ruimte staat de knop op 320 bij 568 precies over de onderste rij van de lijst; gemeten liep hij tot 35px over het label NIEUW heen. Het blok blijft gecentreerd in wat er overblijft, dus er wordt niets afgeknipt. */ .bur-dash-main { padding: 2vh 14px 11vh; gap: 8px; } /* De kop gaat op een kort toestel een trap terug. Op de h1-maat brak hij op 320 in drie regels van samen 114px, en dat is de ruimte die de lijst en de scroll-hint samen nodig hebben. Op de h2-maat blijft hij de grootste tekst op het scherm en past het geheel. */ .bur-dash-kop { font-size: var(--sc-h2); letter-spacing: -.5px; } .bur-akkoord { padding: 10px 12px; border-radius: 14px; } .bur-akkoord-kern b { font-size: var(--sc-h3); } .bur-lijst-kop { padding: 10px 13px 9px; } .bur-rij { padding: 8px 13px; gap: 9px; row-gap: 8px; } .bur-rij-ico { width: 26px; height: 26px; border-radius: 8px; } .bur-rij-ico svg { width: 13px; height: 13px; } .bur-knop { padding: 7px 12px; } } /* Op de smalste toestellen past de balk bovenin het nagebouwde scherm niet meer op één regel: gemeten op 320 liep VOORBEELDWEERGAVE plus LOKAAL tot x356 in een scherm van 320 en viel LOKAAL onder de rand van de telefoon. De twee standen krijgen daar hun eigen regel. 479 is het breekpunt van Webflow zelf. */ @media (max-width: 479px) { .bur-dash-top { flex-wrap: wrap; } .bur-merk { flex: 0 0 auto; white-space: nowrap; } .bur-stand { flex: 1 0 100%; justify-content: flex-start; } } /* Hier stond een regel die de zijbalk onder 1180px weghaalde. Die is overbodig geworden: de zijbalk staat nu op elke breedte uit, zie de toelichting bij .bur-dash. */ /* Tussen 768 en 991 past er geen tekstkolom naast het scherm, dus daar blijft de compositie gecentreerd en schuift het scherm niet naar rechts. De draaiing blijft wel staan, iets zachter, want de diepte hoort ook op een tablet. DE TEKST STOND HIER OP HET PANEEL. --bur-y was -3vh en dat getal komt van de tweekolomsstand vanaf 992, waar de tekst LINKS naast het scherm staat en er boven het scherm dus niets ligt. In deze band ligt de tekst er wél boven, en dan trekt een scherm dat 3vh omhoog staat de bovenrand pal onder de subkop. Gemeten met de tekst op volle dekking: 768x700 subkop y143-273, bovenrand paneel y206 -> 67px OVERLAP 768x740 subkop y146-276, bovenrand paneel y218 -> 58px OVERLAP 768x1024 subkop y166-296, bovenrand paneel y303 -> 7px lucht Drie ingrepen samen halen dat weg, en geen ervan kort de tekst in: 1. --bur-y van -3vh naar 2vh. Het hele zwevende geheel zakt 5vh, op 700 dus 35px. De vier kaarten hangen aan vaste procenten die met -3vh gemeten zijn, dus die tellen hetzelfde erbij; zie de --ky's hieronder. 2. De kopkolom begint op 4vh in plaats van 7vh. Dat is 21px op 700, en het mag: de band boven het paneel is hier de enige plek waar tekst staat. 3. De kolom wordt breder. Hij stond op --bur-eind maal 135vw, een verhouding die klopt als de tekst NAAST het scherm staat; boven het scherm is de breedte van het venster de maat en niet die van het paneel. Op 768 was de kolom 352 breed en liep de subkop over vier regels plus de slotregel. Op 600 zijn dat er drie, en dat scheelt nog eens 22px. */ @media (min-width: 768px) and (max-width: 991px) { /* --bur-vertrek: zelfde reden als op de telefoon. De tekst staat hier boven het scherm en loopt gemeten tot y273 op 768 bij 700, terwijl de bovenrand van het scherm op 35vh staat. */ #scene-bureau { --bur-x: 0; --bur-ry: -12; --bur-rx: 6; --bur-y: 2vh; --bur-vertrek: -4; } [data-bur-regel] { top: 4vh; max-width: min(600px, 84vw); } /* De vier procenten zijn de gemeten standen plus de 5vh waarmee het scherm hierboven zakt, zodat de occlusie tussen kaart en paneel dezelfde blijft: 42 wordt 47, 48 wordt 53, 60 wordt 65 en 62 wordt 67. */ [data-bur-zweef="1"] { --ky: 47%; } [data-bur-zweef="4"] { --ky: 53%; } [data-bur-zweef="5"] { --ky: 65%; } [data-bur-zweef="6"] { --ky: 67%; } } @media (min-width: 768px) and (max-width: 991px) { /* nowrap is hier verplicht. Het toneel staat op flex-wrap: wrap voor de rijstand; zet je de richting op column en past de inhoud niet in de hoogte, dan wrapt hij naar een TWEEDE KOLOM en schuift de machine het beeld uit. Gemeten op 768 bij 740: het doek stond op x518 tot x1078. */ [data-mc-toneel] { flex-direction: column; flex-wrap: nowrap; justify-content: center; gap: 30px; } .mc-tekst { flex: 0 0 auto; max-width: 620px; } .mc-machine { flex: 0 0 auto; width: 100%; height: min(38vh, 340px); } } /* --- de machinescene onder 1200px ------------------------------------------ Twee dingen die hier fout gingen in de vorige opzet en allebei uit dezelfde oorzaak komen: de stage is 100vh met overflow:clip en alles erin stond absoluut, dus wie geen plek meer had verdween of ging over een ander heen. 1. [data-mc-onder] stond onder 760px op display:none. Gemeten 0 bij 0 op 320 en 375: een goedgekeurde regel viel op een telefoon volledig weg. 2. Op 768 liepen de Pilo-regel (y699-743) en [data-mc-onder] (y736-780) 7px door elkaar heen. De stage wordt daarom een flexkolom. Het toneel krimpt mee en de zes woorden plus de onderregel krijgen elk hun eigen rij onderaan, dus ze kunnen per definitie niet meer overlappen. WAAROM 1199 EN NIET MEER 991. De lijnen naar het apparaat hebben zijruimte naast het doek nodig. Gemeten: op 1024 staat .mc-tekst tot x486 en begint het doek op x555, dus er is 69px over, en rechts van het doek net zoveel. Daar past geen woord met een lijn eraan. Vanaf 1200 is er aan beide kanten ruim 200px en klopt het beeld pas. Hieronder zijn het gewone woorden op een rij, met een stip ervoor en ruime kolomafstand: precies de vorm die de huisregel voorschrijft voor meerdere labels naast elkaar. Geen capsule, geen lijn. */ @media (max-width: 1199px) { [data-mc-stage] { display: flex; flex-direction: column; } [data-mc-toneel] { height: auto; flex: 1 1 auto; min-height: 0; } .mc-docs { position: static; order: 2; display: flex; flex-wrap: wrap; justify-content: center; column-gap: clamp(16px, 3vw, 30px); row-gap: 9px; padding: 0 clamp(16px, 5vw, 64px); margin: 0 0 14px; } .mc-doc { position: static; left: auto; right: auto; top: auto; flex-direction: row; gap: 8px; } /* De lijn wordt hier weer de stip die voor het woord staat. */ .mc-doc i { width: 5px; height: 5px; border-radius: 50%; background-image: none; background-color: var(--sc-accent); opacity: 1; } .mc-doc i::after { display: none; } [data-mc-onder] { display: block; position: static; order: 3; bottom: auto; padding: 0 clamp(20px, 5vw, 64px) clamp(14px, 2.4vh, 26px); } } /* De vaste chatprompt vult onder 480px de rechteronderhoek. Reserveer binnen deze scene ruimte, zodat de slotregel ook op 320px volledig leesbaar blijft. */ @media (max-width: 479px) { #scene-machine [data-mc-onder] { padding-bottom: calc(128px + env(safe-area-inset-bottom)); } } /* Laag venster onder 1200px. De stage is daar een flexkolom van 100vh met overflow: clip en het toneel staat op flex: 1 1 auto met min-height: 0, dus hij mag krimpen onder zijn inhoud. Op 375 bij 700 stak de inhoud er 68px uit en liep de Pilo-regel over de labelrij heen. Deze regels halen er 78px uit, verdeeld over de plekken waar het niet aan leesbaarheid kost. */ @media (max-width: 1199px) and (max-height: 780px) { [data-mc-toneel] { padding-top: 40px; gap: 12px; } .mc-tekst p { margin-bottom: 12px; } .mc-standen { gap: 6px; } .mc-machine { --mc-dgx-h: min(220px, 26vh); } .mc-docs { margin-bottom: 6px; } } /* Extreem lage CSS-viewport: dit ontstaat onder meer bij 400% browserzoom. Sticky 100vh plus overflow clip kan tekst dan onbereikbaar maken. Beide scenes vallen hier terug op gewone documentflow; betekenis blijft staan en de decoratieve 3D-lagen verdwijnen. Normale desktophoogtes veranderen niet. */ @media (max-height: 560px) { #scene-bureau, #scene-machine { height: auto !important; margin-top: 0 !important; } #scene-bureau [data-bur-stage], #scene-machine [data-mc-stage] { position: relative !important; top: auto; height: auto !important; min-height: 0; overflow: visible; } #scene-bureau [data-bur-stage] { padding: 64px clamp(20px, 6vw, 64px); } [data-bur-kamer], [data-bur-vulling], [data-bur-grond], [data-bur-halo], [data-bur-groep], [data-bur-voor], [data-bur-hint] { display: none !important; } [data-bur-regel] { position: relative; inset: auto; max-width: 680px; margin: 0 auto; padding: 0; text-align: left; opacity: 1 !important; transform: none !important; } #scene-machine [data-mc-stage] { padding: 64px clamp(20px, 6vw, 64px); } .mc-spot, .mc-machine, .mc-docs { display: none !important; } [data-mc-toneel] { position: relative; display: block; height: auto; padding: 0; } .mc-tekst { max-width: 680px; margin: 0 auto; opacity: 1 !important; } .mc-tekst h2, .mc-tekst p, .mc-standen li { opacity: 1 !important; transform: none !important; } [data-mc-onder] { position: static; max-width: 680px; margin: 24px auto 0; padding: 0; text-align: left; opacity: 1 !important; } } /* ========================================================================== 5. REDUCED MOTION vp/scene.js zet [data-vp-scene] dan niet, dus de secties blijven op height:auto en de stages blijven statisch. Wat hier nog moet: alle lopende CSS-animaties uitzetten. De eindstand hierboven is de basis en is op zichzelf leesbaar. ========================================================================== */ @media (prefers-reduced-motion: reduce) { #scene-bureau *, #scene-machine * { animation: none !important; transition: none !important; } [data-bur-hint] { display: none !important; } [data-bur-vulling] { opacity: 0 !important; } } /* Twee opschriften in dezelfde hint. Het eerste rustpunt laat het geheel zien, daarna klopt "bekijk" niet meer en wordt het "Verder". Wisselen doen we met een klasse, niet met textContent, zodat er per frame niets in de DOM wordt geschreven. */ [data-bur-hint] .verder { display: none; } [data-bur-hint].is-verder .eerst { display: none; } [data-bur-hint].is-verder .verder { display: inline; }

/* ========================================================================== scene.css — de twee gepinde scroll-scenes van V6, tweede opzet Eigenaar: agent SCENES. Raakt alleen #scene-bureau en #scene-machine. WAT ER IN DEZE OPZET VERANDERD IS TEN OPZICHTE VAN DE EERSTE 1. Typografie komt uit de template. Urbanist met de tokens --_typography---typography--h1 t/m --h4, de paragraph-tokens en de font-weight-tokens. Die tokens staan op body en worden door de template zelf al herdeclareerd op 991, 767 en 479, dus de scenes schalen mee met de rest van de site zonder een eigen clamp-ladder. 2. Kleur komt uit de variabelenlaag van de template (--color--*). De hex achter de komma in elke var() is de V5-waarde en is alleen een vangnet. 3. Diepte komt uit de template: grote zachte lichtvlakken achter de content, drop-shadow op losse silhouetten, en layering waarbij elementen elkaar overlappen. Zie blok 0c. 4. Labels blijven tekst zonder capsule. Alleen echte klikvlakken, zoals de goedkeurknop en de scrollknop, houden de ronde knopvorm van de template. WAT ER IN DE DERDE RONDE VERANDERD IS a. De machinescene stond op bijna zwart en staat nu in het licht van de template, met alles wat op donker was afgesteld erachteraan. Zie blok 2. b. De kamer in de bureau-scene was letterlijk getekend (raamkozijn met een kruis, pot met drie blaadjes, bruine plank op poten, mok, papier). Wat niets betekent is eruit; wat blijft is een paneel, een lichtval en de machine. Zie blok 1a. c. Het nagebouwde dashboard was een generieke beheerlayout met een zijbalk en drie gelijke tellers. Zijbalk eruit, warm palet, één hiërarchie. Zie blok 1d. d. Compositie: kop en scherm staan in hetzelfde lichtveld en in dezelfde kolom, het onderschrift botst niet meer met de knop, en de zwevende labels hangen om het apparaat in plaats van door het hele beeld. e. Prestatie: alle backdrop-filters eruit en de blur op de lichtvlakken vervangen door een radial-gradient. Zie blok 0c en de PRESTATIE-blokken. WAT ER IN DE VIERDE RONDE VERANDERD IS f. DE MONITOR EN HET BUREAUBLAD ZIJN WEG. Het dashboard zweeft nu vrij in de ruimte, gedraaid en gekanteld, met zes kaarten op drie diepten eromheen. Weg zijn .bur-huis, .bur-nek, .bur-voet, de telefoonbehuizing, .bur-eiland, [data-bur-frame], .bur-blad en .bur-voorrand, plus de acht maatvariabelen die alleen over die twee gingen. Zie blok 1a-bis voor wat ervoor in de plaats kwam en blok 1c voor wat van de beweging bleef staan. De draaiing en de kanteling blijven: dat deel van de scene werkte. g. Ook op een telefoon staat er geen apparaat meer omheen. Zelfde reden: één scene hoort op elke maat hetzelfde te vertellen. Zie de media-query op 767. DRIE REGELS DIE DIT BESTAND STUREN 1. De EINDSTAND is de basis. Alles wat je hieronder zonder [data-vp-scene] leest, is de leesbare stilstaande scene: het scherm zweeft op zijn plek, de zes kaarten staan eromheen, de tekst is leesbaar. Zo werkt de pagina zonder JS en zo werkt hij bij prefers-reduced-motion. vp/scene.js zet pas een sticky stage en een scrub neer NADAT hij [data-vp-scene] op heeft gezet, en overschrijft daarna per frame met inline transform/opacity. 2. Alleen transform, opacity en filter bewegen. Geen width, height, top, left, margin of font-size in een animatie. 3. MEETEENHEID: alles in deze scenes rekent in vh en NOOIT in svh of dvh. De sticky stage staat op height:100vh; zou een kind in svh rekenen, dan loopt de kamer op een telefoon uit de pas zodra de URL-balk beweegt. (Gemeten op de vorige site, bordrij O1075.) BREEKPUNTEN: 767 en 991, dezelfde getallen als Webflow. Zo wisselen de typografie-tokens van de template en de opbouw van de scene op hetzelfde moment. vp/scene.js gebruikt (min-width: 768px) in zijn matchMedia. ========================================================================== */ /* ========================================================================== 0a. TOKENS ========================================================================== */ #scene-bureau, #scene-machine { font-family: var(--color--font-family--urbanist, Urbanist, sans-serif); /* --- kleur, het palet van deze site ----------------------------------- De --vp-* tokens staan in css/vastpilot-v6.webflow.css, boven de --color--*-namen van de Webflow-export die eruit gevoed worden. Dat is de laag waar de herkleuring in staat, dus dat is de laag die deze scenes lezen. De hex achter de komma is de V5-waarde en is alleen een vangnet voor het geval dit bestand los van de site wordt bekeken. */ --sc-papier: var(--vp-papier, #F3F0E9); --sc-kaart: var(--vp-kaart, #FBF9F4); --sc-band: var(--vp-band, #EBE7DC); --sc-lijn: var(--vp-lijn, #E1DBCE); --sc-body: var(--vp-body, #6a665e); --sc-ink: var(--vp-ink, #22303B); --sc-navy: var(--vp-navy, #1E3A5F); --sc-teal: var(--vp-teal, #0FA48D); /* stip of vlak, geen tekst */ --sc-teal-d: var(--vp-teal-donker, #0B7C6C); /* vlak of rand, geen tekst */ --sc-teal-t: var(--vp-teal-tint, #E3F5F1); --sc-teal-tekst: var(--vp-teal-tekst, #0A7161); /* teal ALS TEKST op licht */ --sc-tint: var(--vp-accent-tint, #FDF1E9); --sc-rand: var(--vp-zachte-rand, rgba(34, 48, 59, .10)); /* Een gloed en een LED zijn decoratie en blijven warm oranje, ongeacht de ondergrond. Het accent-op-licht (#a5441a) is daar te dof voor: uitgesmeerd leest dat als vuil in plaats van als licht. Deze twee dragen nooit tekst. */ --sc-gloed: var(--vp-gloed, #FF6B35); --sc-led: var(--vp-led, #FF8C46); /* --- typografie, tokens van de template ------------------------------- */ --sc-h1: var(--_typography---typography--h1, 80px); --sc-h2: var(--_typography---typography--h2, 44px); --sc-h3: var(--_typography---typography--h3, 28px); --sc-p-l: var(--_typography---paragraph-font-size--large-paragraph, 20px); --sc-p-s: var(--_typography---paragraph-font-size--small-paragraph, 16px); --sc-p-xs: var(--_typography---paragraph-font-size--extra-small-paragraph, 14px); --sc-p-t: var(--_typography---paragraph-font-size--small-text, 12px); --sc-w-m: var(--_typography---font-weight--medium, 500); --sc-w-sb: var(--_typography---font-weight--semi-bold, 600); --sc-w-b: var(--_typography---font-weight--bold, 700); --sc-lh-xs: var(--_typography---font-line-height--extra-small, 95%); --sc-lh-s: var(--_typography---font-line-height--small, 100%); --sc-lh-m: var(--_typography---font-line-height--medium, 120%); --sc-lh-l: var(--_typography---font-line-height--large, 140%); /* --- vorm, tokens van de template -------------------------------------- */ --sc-r-24: var(--_spacing---radius--24px, 24px); --sc-r-100: var(--_spacing---radius--100px, 100px); --sc-ez: cubic-bezier(.8, 0, .5, 1); --sc-bounce: cubic-bezier(.34, 1.3, .4, 1); } /* Accent is contextafhankelijk: op een LICHT vlak --vp-accent-op-licht (#a5441a), op een DONKER vlak --vp-accent-op-donker (#FF6B35). Sinds de machinescene op papier staat (zie blok 2) zijn BEIDE scenes licht, dus staat hier twee keer hetzelfde token. Wordt een van de twee ooit weer donker, dan is dit de enige regel die om moet. */ #scene-bureau { --sc-accent: var(--vp-accent-op-licht, #a5441a); } #scene-machine { --sc-accent: var(--vp-accent-op-licht, #a5441a); } /* ========================================================================== 0b. STICKY-BORGING TEGEN DE WRAPPERS VAN WEBFLOW position: sticky en position: fixed breken zodra een VOOROUDER een transform, filter, perspective, backdrop-filter, contain of will-change draagt, en sticky breekt ook op een voorouder met overflow anders dan visible. De template zet overflow: hidden op .section en webflow.js schrijft in zijn 126 scroll-interacties transforms op elk element met een data-w-id. vp/scene.js loopt daarom bij het starten en bij elke resize de voorouders van beide secties af en zet [data-vp-stickyvrij] op de elementen die er werkelijk een dragen. Alleen die worden hieronder teruggezet, dus een overflow: hidden die niets met deze scenes te maken heeft blijft staan. Zonder JS is er geen pinning en is deze regel dus ook niet nodig. De markup in vp/scenes-markup.html vraagt bovendien om beide secties als direct kind van te plaatsen, buiten .section en zonder data-w-id. Dan komt deze regel helemaal niet aan bod. ========================================================================== */ [data-vp-stickyvrij] { overflow: visible !important; transform: none !important; filter: none !important; perspective: none !important; backdrop-filter: none !important; contain: none !important; will-change: auto !important; } /* ========================================================================== 0c. DIEPTE: de drie middelen van de template 1. .sc-gloed — een groot zacht lichtvlak achter de content, het beeld van .hero-image-shadow-01 en .hero-bg-circle-small uit css/vastpilot-v6.webflow.css. WAAROM HIER EEN RADIAL-GRADIENT STAAT EN GEEN filter: blur() In de template zijn die twee een gevulde cirkel met blur(40px) of blur(50px). Dat kan daar, want die vlakken staan in secties die stilstaan. Hier staan ze in een GEPINDE stage waar per frame content overheen transformeert, en dan dwingt de blur de browser het vlak steeds opnieuw te rasteren. In WebKit is dat het duurste wat er in deze twee scenes stond. Een radial-gradient met dezelfde kern en dezelfde uitloop geeft op deze maten (400 tot 1000px breed, dekking onder .35) een beeld dat naast elkaar niet te onderscheiden is, en kost de compositor vrijwel niets: het vlak wordt één keer getekend en daarna alleen verplaatst. In een eerdere ronde is bewust de omgekeerde weg gelopen, van gradient naar blur, om de template letterlijk te volgen. Die afweging draait hier om omdat de plek anders is: de template blurt in een stilstaande sectie, wij in een gepinde. Het beeld wint niets, de kosten zijn reëel. --sc-g is de kleur van het vlak, --sc-kern hoe ver de volle kleur doorloopt voordat de uitloop begint. Twee stops erna houden de uitloop dicht bij een gaussische in plaats van lineair, want lineair geeft een zichtbare ring op lage dekking. 2. --sc-schaduw-* — de drop-shadow-waarden van de template, ongewijzigd overgenomen (0 0 3px/4px #00000040 en 0 1.8px 2.88px #00000040) plus twee zwaardere varianten voor de grote objecten in de scene. Waar het element een rechthoek met een radius is, staat er box-shadow in plaats van drop-shadow: zelfde beeld, geen filterlaag. 3. Layering — elementen overlappen elkaar met z-index in plaats van naast elkaar te staan. Zie de z-index-ladder in blok 1 en blok 2. ========================================================================== */ /* Er is nog EEN drop-shadow over in deze twee scenes, op [data-bur-cursor]. Alle andere zijn box-shadow geworden: die elementen zijn rechthoeken met een radius, dus het beeld is hetzelfde en er komt geen filterlaag bij in een gepinde stage. De cursor is een SVG-pijl en dus een silhouet; een box-shadow zou daar een rechthoek omheen tekenen. Hij is 19 bij 19px en staat maar tussen voortgang .03 en .20 in beeld, dus de filterlaag is klein en kort. De andere schaduwtokens (klein, fijn, diep, object) hoorden bij de plant, de mok, het papier en Pilo en zijn met die elementen vervallen. */ #scene-bureau, #scene-machine { --sc-schaduw-mid: drop-shadow(0 0 4px #00000040); } .sc-gloed { position: absolute; pointer-events: none; transform: translate(-50%, -50%); /* Eerst de vorm die overal geldig is. Kent de browser color-mix niet, dan valt hij hierop terug in plaats van op niets: een ongeldige waarde gooit de hele declaratie weg, en dan zou de gloed stil verdwijnen. */ background-image: radial-gradient(closest-side, var(--sc-g, var(--sc-gloed)) 0%, var(--sc-g, var(--sc-gloed)) var(--sc-kern, 26%), transparent 100%); background-image: radial-gradient(closest-side, var(--sc-g, var(--sc-gloed)) 0%, var(--sc-g, var(--sc-gloed)) var(--sc-kern, 26%), color-mix(in srgb, var(--sc-g, var(--sc-gloed)) 55%, transparent) 58%, color-mix(in srgb, var(--sc-g, var(--sc-gloed)) 16%, transparent) 80%, transparent 100%); } /* De twee namen komen uit de template (blur 40 en blur 50). Ze staan nu voor een strakkere en een bredere uitloop, zodat de aanroepen in de markup ongewijzigd blijven. */ .sc-gloed--40 { --sc-kern: 34%; } .sc-gloed--50 { --sc-kern: 18%; } /* ========================================================================== 1. SCENE BUREAU ========================================================================== */ #scene-bureau { /* --- maatvoering, één bron voor CSS en JS --------------------------------- vp/scene.js leest --bur-eind, --bur-y, --bur-x, --bur-ry en --bur-rx met getComputedStyle in meet(), zodat de scrub-wiskunde en de opbouw van de scene niet uit elkaar kunnen lopen. Wijzig je hier een getal, dan volgt de JS vanzelf. WAT ER IN DEZE RONDE UIT DE MAATVOERING IS GEVALLEN Hier stonden acht getallen die alleen over de behuizing en het bureaublad gingen: --bur-rand, --bur-rand-onder, --bur-nek, --bur-kier, --bur-huis-r, --bur-glas-r, --bur-onder en --bur-blad. De monitor, de voet, de nek, de telefoonbehuizing en het blad zijn eruit; het dashboard zweeft nu vrij. Er is daarmee nog één vormmaat over, en dat is de hoekstraal van het scherm zelf. */ --bur-eind: .34; /* eindschaal van het scherm t.o.v. de stage */ --bur-y: -3vh; /* eindverschuiving van het scherm */ /* DE HOEKSTRAAL IS EEN VERHOUDING, GEEN VAST GETAL. Het scherm is --bur-eind maal 100vw breed en groeit dus mee met het venster: 490px op 1440, 653 op 1920, 348 op 1024. Een vaste pixelwaarde zou op de brede kant als een scherpe hoek lezen en op de smalle als een bolle. 4,2 procent van de schermbreedte houdt de verhouding overal gelijk en komt op 1440 uit op 20,6px, dicht bij de --radius--24px die de template op zijn kaarten gebruikt. .bur-dash rendert op 100vw bij 100vh en wordt daarna met --bur-eind geschaald, dus daar wordt dit getal eerst door de eindschaal gedeeld. */ --bur-r: calc(var(--bur-eind) * 4.2vw); /* 260vh gaf een leesplateau van 331 px op desktop. De opdrachtgever vroeg om 400. Loop is sectiehoogte min de stage van 100vh, en het plateau is .230 van die loop, dus 400 px vraagt een loop van 1737 px en daarmee 293vh. Alle andere fasen rekenen in voortgang en schalen mee. */ --bur-hoogte: 293vh; /* --- de stand van het scherm in de ruimte -------------------------------- Deze drie zijn UNITLOOS, want vp/scene.js leest ze met getComputedStyle en schaalt ze per frame met de scrub; de eenheid komt er in de transform bij. Zo staat de eindstand op één plek en kunnen CSS en JS niet uit de pas. --bur-x verschuiving naar rechts, in vw --bur-ry draaiing om de verticale as, in graden. NEGATIEF, want in CSS duwt een positieve rotateY de rechterrand juist WEG: bij rotateY(a) wordt z' = -x sin a, dus voor x rechts en a negatief komt z' positief uit en dat is naar de kijker toe. --bur-rx kanteling achterover, in graden. Positief, dus je kijkt er van iets boven op. De hoek is gemeten en niet gekozen op gevoel: zie de notitie bij [data-bur-groep]. Hij staat sinds deze ronde op 16 in plaats van 14, en de kanteling op 7 in plaats van 6. Reden: de opdrachtgever las het scherm als een plaatje op een pagina. Het grootste deel van die klacht zat in de TIMING (vp/scene.js draaide pas vanaf .50 en het scherm komt op .35 al vol in beeld), maar op de eindstand mocht er ook een graad of twee bij. Bij 20 zakt de linkerrand ruim 8 procent in en gaan de regels daar dicht; op 16 is dat 6,5 procent en blijft alles op het scherm leesbaar, nagemeten op gerenderde pixels. */ --bur-x: 15; --bur-ry: -16; --bur-rx: 7; /* --- het vertrek ---------------------------------------------------------- Ook unitloos, ook door vp/scene.js gelezen, en om dezelfde reden: dit is één bron voor twee bestanden. Na het rustpunt op voortgang .84 liep de gepinde sectie nog tot 1.00 door zonder dat er iets bewoog. Gemeten met de vier hoeken van [data-bur-scherm]: 0,02 tot 0,04px per stap van .005, over 184px scrollen op 375 en 252px op 1024 en 1440. Vlak daarna laat de sticky los en gaat de pagina weer lopen, en die twee naast elkaar zijn wat de opdrachtgever als "plots" beschreef. Deze waarde is de hoogte waarmee het hele geheel in die laatste centimeters wegdrijft, in vh en NEGATIEF, dus omhoog, dezelfde kant op als de pagina die zo meteen verder scrolt. vp/scene.js zet er nog een krimp van negen procent bij; samen vullen die twee de stilstand. WAAROM HET PER BREEKPUNT VERSCHILT. Vanaf 992 staat de tekst links naast het scherm en is er boven het scherm ruim 30vh lucht. Daaronder staat de tekst BOVEN het scherm en is die lucht op: gemeten loopt [data-bur-regel] op 768 tot y273. Daar mag het vertrek dus maar de helft zijn. De queries verderop zetten dat. */ --bur-vertrek: -8; position: relative; z-index: 1; background: var(--sc-papier); } /* Alleen mét JS wordt de sectie hoog en de stage sticky. Zonder JS en bij reduced motion blijft de sectie op zijn natuurlijke hoogte staan. */ [data-vp-scene] #scene-bureau { height: var(--bur-hoogte); } [data-bur-stage] { position: relative; min-height: 100vh; overflow: clip; background: linear-gradient(180deg, var(--sc-papier) 0%, var(--sc-band) 100%); /* PERSPECTIEFAFSTAND. Was een vast getal van 1200px. Een 3D-draaiing zonder perspectief geeft een platte scheeftrekking, en een vaste afstand geeft op 1920 te weinig diepte en op 1024 te veel: de afstand hoort zich te verhouden tot de breedte van het beeld, net als een cameralens. 78vw komt overeen met een normaalbrandpunt. Gemeten bij --bur-ry -14 en de eindschaal .34: op 1440 (1123px) rekt de naar voren gedraaide rechterrand 6,4 procent uit en krimpt de linkerrand 5,7 procent. Dat is zichtbaar ruimtelijk en blijft ver van de karikatuur die je onder de 700px krijgt. De klem houdt het op 1024 nog rustig en laat 1920 niet vlak worden. */ perspective: clamp(900px, 78vw, 1500px); } [data-vp-scene] [data-bur-stage] { position: sticky; top: 0; height: 100vh; min-height: 0; } /* --- 1a. de kamer --------------------------------------------------------- */ [data-bur-kamer] { position: absolute; inset: 0; z-index: 0; opacity: 1; } [data-bur-achter], [data-bur-midden], [data-bur-voor] { position: absolute; inset: 0; } /* DE VOORGRONDLAAG IS UIT DE KAMER GEHAALD. Ze zat binnen [data-bur-kamer] en dus op z-index 0, waar ze per definitie niet voor het scherm langs kon. Ze staat nu als eigen kind van de stage tussen de groep (3) en de tekstlagen (6). vp/scene.js vindt haar nog steeds met een querySelector op de sectie, dus de parallax van 136px werkt ongewijzigd door. pointer-events uit, anders vangt een schermvullende laag de klik op de scroll-hint eronder weg. */ [data-bur-voor] { z-index: 4; pointer-events: none; } /* --- De ruimte, vierde versie ---------------------------------------------- WAT ERUIT IS EN WAAROM De eerste versie tekende de kamer letterlijk: een raamkozijn met een kruis erin, een pot met drie blaadjes, een bruine balk met twee poten, een mok en een stapeltje papier. De derde versie bracht dat terug tot een wand, een lichtval, een bureaublad en de voorrand ervan. IN DEZE RONDE GAAT HET BUREAUBLAD ERAF, samen met de monitor die erop stond. Besluit van de opdrachtgever: het dashboard zweeft vrij, met losse elementen op verschillende diepten eromheen. Een bureau zonder iets erop is een leeg vlak, dus .bur-blad en .bur-voorrand zijn eruit, markup en al. BLIJFT: de wand als warm verloop, één lichtval en één groot zacht lichtvlak. Dat is nu de hele ruimte, en dat is genoeg: de diepte komt niet meer van een meubel maar van de objecten zelf, van hun schaduw, hun maat en het verschil in de weg die ze afleggen. DE LICHTRICHTING IS DE ENIGE REGEL DIE ALLES BINDT. .bur-lichtval staat rechtsboven, dus elke schaduw in deze scene valt naar LINKSONDER: die van het scherm (.bur-dash), die van de zes kaarten (.bur-kaart) en de slagschaduw eronder (.bur-grondschaduw). Wijzig je de lichtval, dan moeten die vier mee. ------------------------------------------------------------------------- */ .bur-wand { position: absolute; inset: 0; background: linear-gradient(180deg, var(--sc-kaart) 0%, var(--sc-papier) 38%, var(--sc-band) 100%); } /* Diepte, middel 1: het grote zachte lichtvlak in de kamer, in de warme gloedkleur van de site. Dit is wat de hero van de template ook doet. */ .bur-sfeer { left: 50%; top: 30%; width: min(1500px, 122vw); height: min(1100px, 96vh); --sc-g: var(--sc-gloed); /* ZACHTER, NIET WEG. Gemeten op het gerenderde beeld met R min B als maat voor de warmte: papier staat op 10, het volle accent op 202. De hero van de template haalt daar een mediaan van 20 met een p90 van 97; een gewone sectie zit op 7 en 10. Deze twee scenes samen zijn bijna 500vh, dus een wash die de hele weg op hero-sterkte staat maakt de pagina oranje in plaats van warm. Met .07 hier, .09 op de halo, .055 op de spot en .14 op mc-halo komen de scenes op een mediaan van 12 en een p90 van 17 uit: dicht bij een gewone sectie, en de ruimtelijkheid blijft staan omdat die van het verloop komt en niet van de verzadiging. */ opacity: .07; } /* De lichtval vervangt het getekende raam: je ziet niet het kozijn maar het licht dat er doorheen valt. Koeler en breder dan de sfeer, zodat de twee niet als één oranje waas over elkaar liggen. Hij staat RECHTSBOVEN en niet meer linksboven. Dat is geen smaak: het scherm draait met zijn rechterrand naar de kijker toe, en die rand moet het licht vangen. Daarmee ligt ook de richting van elke slagschaduw vast, namelijk naar linksonder, van de kijker weg. */ .bur-lichtval { position: absolute; right: -18vw; left: auto; top: -28vh; width: 78vw; height: 98vh; background: radial-gradient(closest-side, rgba(255, 252, 244, .92), rgba(255, 250, 238, .42) 52%, rgba(255, 250, 238, 0) 100%); } /* ========================================================================== 1a-bis. DE ZWEVENDE KAARTEN Zes kaarten hangen op drie diepten om het scherm heen. Ze zijn de taal van de hero van deze template, waar acht losse vlakken op verschillende afstanden voor en achter een toestel zweven en de schaduw de afstand vertelt (.hero-image-01 t/m -09 in css/vastpilot-v6.webflow.css: drop-shadow 3px, 3,2px en 4px, en z-index 1 of 2). DE ZES WOORDEN ZIJN NIET VERZONNEN. Het zijn schermlabels uit content/home.md, ## scene-bureau, blok "Schermlabels": Overzicht, Mail, Offertes, Controles, Kennis en Instellingen. Die zes stonden daar voor de zijbalk die in een eerdere ronde uit het nagebouwde scherm is gehaald; ze hebben sindsdien geen plek meer op de pagina. Nu wel. GEEN CAPSULES. De pilvorm van de template mag op deze site blijven staan (BRIEF paragraaf 0, besluit 2), maar dat besluit gaat over de template. Dit zijn onze eigen elementen in een scene die we zelf bouwen, dus geldt de huisregel: een label is TEKST. Deze zes zijn dan ook geen labels maar OPPERVLAKKEN met een radius van 24, 18 en 14 uit de template. Geen border-radius van 100px, geen pil, en niets hiervan is aanklikbaar. Dezelfde afweging als bij .mc-doc in scene 2. DRIE DIEPTEN, EN HET VERSCHIL IS GEMETEN. Twee elementen met dezelfde schaduw en dezelfde beweging hangen op dezelfde diepte en doen niets. Deze drie trappen verschillen daarom op vier assen tegelijk: trap maat hoofdschaduw weg occlusie dichtbij 44px -20px 36px 64px -28px a .36 136px voor midden 34px -11px 20px 36px -20px a .24 84px achter ver 26px -6px 10px 20px -14px a .14 40px achter maat = de icoontegel; het zetsel gaat mee (16, 14 en 12px) weg = de verticale weg die de laag in de parallax aflegt, geschreven door vp/scene.js op [data-bur-voor], [data-bur-midden] en [data-bur-achter]. De dichtstbijzijnde legt 3,4 keer zoveel af als de verste. occlusie = of de kaart voor of achter het scherm langs gaat. Dat is het sterkste signaal van de vier: een kaart die een stuk van het scherm afdekt hangt er aantoonbaar voor. Bovenop die vier komt de intrede: elke kaart komt uit een eigen richting en over een eigen afstand naar zijn plek, en die afstand loopt met de diepte mee (--kdx en --kdy hieronder, gelezen door vp/scene.js in meet()). DE SCHADUWEN VALLEN NAAR LINKSONDER, want .bur-lichtval staat rechtsboven. Vandaar de negatieve x in elke box-shadow. Dezelfde richting als de schaduw van .bur-dash en van .bur-grondschaduw. ========================================================================== */ .bur-zwerm { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; } .bur-kaart { /* --kx en --ky zijn de LINKERBOVENHOEK van de kaart, in procenten van de stage. Bewust geen translate(-50%,-50%) om te centreren: vp/scene.js schrijft per frame een eigen transform op deze elementen, en twee schrijvers op dezelfde eigenschap is precies waar dit bestand het elders over heeft. */ position: absolute; left: var(--kx); top: var(--ky); display: inline-flex; align-items: center; background: var(--sc-kaart); border: 1px solid var(--sc-lijn); color: var(--sc-ink); white-space: nowrap; /* EINDSTAND. Zonder JS en bij reduced motion staat de hele zwerm er gewoon. */ opacity: 1; } .bur-kaart-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: var(--sc-papier); border: 1px solid var(--sc-lijn); } .bur-kaart-naam { line-height: var(--sc-lh-m); } /* Bescheiden kaartcorners. De vlakken blijven ruimtelijke kaarten en lezen niet als capsules of vergeten knoppen. */ .bur-kaart--dichtbij { gap: 14px; padding: 10px 22px 10px 10px; border-radius: 12px; font-size: var(--sc-p-s); font-weight: var(--sc-w-sb); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), -20px 36px 64px -28px rgba(34, 48, 59, .36), -5px 10px 20px -12px rgba(34, 48, 59, .18); --kdx: -40; --kdy: 46; } .bur-kaart--dichtbij .bur-kaart-ico { width: 44px; height: 44px; border-radius: 9px; } .bur-kaart--mid { gap: 11px; padding: 8px 17px 8px 8px; border-radius: 10px; font-size: var(--sc-p-xs); font-weight: var(--sc-w-m); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), -11px 20px 36px -20px rgba(34, 48, 59, .24), -3px 5px 11px -7px rgba(34, 48, 59, .11); --kdx: -24; --kdy: 30; } .bur-kaart--mid .bur-kaart-ico { width: 34px; height: 34px; border-radius: 7px; } .bur-kaart--ver { gap: 9px; padding: 6px 13px 6px 6px; border-radius: 8px; font-size: var(--sc-p-t); font-weight: var(--sc-w-m); box-shadow: -6px 10px 20px -14px rgba(34, 48, 59, .14); --kdx: -12; --kdy: 18; } .bur-kaart--ver .bur-kaart-ico { width: 26px; height: 26px; border-radius: 6px; } /* DE KANT DIE ACHTER HET SCHERM VERDWIJNT DRAAGT HET ICOON, NIET HET WOORD. De kaart links van het scherm schuift met zijn RECHTERrand eronder. Stond het icoon daar links, dan viel het woord half weg: gemeten op 1440 werd "Controles" op x700 afgesneden en las het als "Cont". Met de volgorde om is het icoon het deel dat verdwijnt en blijft het woord heel. Dezelfde greep als bij .mc-doc 1 tot 3 in scene 2. Geldt alleen voor de kaart die ACHTER het scherm langs de linkerrand ligt. Mail ligt ervoor en dekt het scherm juist af; daar is er niets te ontwijken. */ [data-bur-zweef="3"] { flex-direction: row-reverse; padding-left: 25px; padding-right: 8px; } /* DE PLAATSING HANGT AAN HET SCHERM, NIET AAN HET VENSTER --------------------------------------------------------------------------- Eerst stonden hier zes vaste procenten. Die klopten op 1440 en liepen overal anders scheef, om twee redenen die allebei gemeten zijn: 1. Tussen 768 en 991 staat --bur-x op 0, dus het scherm schuift daar NIET naar rechts. De kaarten stonden er wel op de plek van de verschoven stand: gemeten op 768 bij 1024 lag Controles op x315-453 terwijl het scherm van 253 tot 518 liep, dus de kaart zat er VOLLEDIG achter en was onzichtbaar. 2. Het scherm schaalt met vw en de kaarten met px. Op 1920 lag Controles daardoor 9px NAAST de linkerrand van het scherm in plaats van eronder, en dan valt de occlusie weg die de diepte moest dragen. --sc-dl en --sc-dr zijn daarom de linker- en rechterrand van het scherm, in dezelfde bron als de rest: 33,7 en 69 procent van de stage plus --bur-x. Die twee getallen zijn nagemeten op 1024, 1440 en 1920, waar het silhouet na de draaiing van 48,7 tot 84,0 procent loopt bij --bur-x 15. Elke kaart staat nu op een van de twee randen plus een offset in px, dus de overlap met het scherm is op elke breedte hetzelfde aantal pixels. Verticaal is een gewoon procent wel goed. Het scherm is --bur-eind maal 100vh hoog en staat gecentreerd, dus zijn boven- en onderrand liggen op een vaste vh-fractie: gemeten 28,3 en 64,2 procent op 900, 28,6 en 64,2 op 768, 28,1 en 64,3 op 1080. Daar hoeft geen anker omheen. */ .bur-zwerm { --sc-dl: calc(33.7% + var(--bur-x) * 1vw); --sc-dr: calc(69% + var(--bur-x) * 1vw); } /* Overzicht, ver. Steekt boven de bovenrand uit en verdwijnt er 8px onder. */ [data-bur-zweef="1"] { --kx: calc(var(--sc-dl) + 5px); --ky: 27.5%; } /* Instellingen, ver. Steekt onder de onderrand uit; 14 van de 40px hoogte gaat eronder, dus 26 blijft zichtbaar. Op 61,5 procent was dat andersom en las de kaart als een fout. */ [data-bur-zweef="2"] { --kx: calc(var(--sc-dl) + 48px); --ky: 62.7%; } /* Controles, midden. De icoontegel hoort HALF achter het scherm te verdwijnen, niet helemaal: de kaart is 139 breed, dus de rechterrand komt 28px voorbij de schermrand en de tegel van 34 ligt daar half onder. */ [data-bur-zweef="3"] { --kx: calc(var(--sc-dl) - 111px); --ky: 51%; } /* Kennis, midden. Spiegelbeeld aan de rechterkant: 43px voorbij de rand naar binnen, dus de tegel ligt eronder en het woord blijft heel. */ [data-bur-zweef="4"] { --kx: calc(var(--sc-dr) - 43px); --ky: 27%; } /* Mail, dichtbij. Ligt VOOR het scherm en dekt de linkerrand af; dat is de occlusie de andere kant op. */ [data-bur-zweef="5"] { --kx: calc(var(--sc-dl) - 53px); --ky: 38%; } /* Offertes, dichtbij. Ligt voor de onderrand rechts. */ [data-bur-zweef="6"] { --kx: calc(var(--sc-dr) - 201px); --ky: 62%; } /* ZES KAARTEN PASSEN PAS VANAF 1400px. VIER DAARONDER. --------------------------------------------------------------------------- Twee gemeten grenzen, en ze komen allebei uit hetzelfde: het scherm schaalt met vw en een kaart is in px zo breed als zijn woord. 1. De tekstkolom. Vanaf 992 staat die links, met een rechterrand op 6vw + min(38vw, 480px). Controles hangt aan de LINKERrand van het scherm, dus zijn linkerrand ligt op 48,7vw min 111px. Die twee raken elkaar tot W = 1384: gemeten op 1024 liep de kaart 63px over de alinea heen en op 1200 nog 55px. Vandaar 1400 en niet 1200. 2. Instellingen en Offertes hangen allebei onder het scherm, de een aan de linkerrand en de ander aan de rechter. De ruimte tussen die twee ankers is 35,3 procent van de breedte min 249px, en dat is pas meer dan de 115px van Instellingen boven W = 1031. Gemeten op 768: de twee lagen 93px over elkaar heen. Onder 1400 blijven er vier over, en de diepte-ladder blijft compleet: één ver (Overzicht), één midden (Kennis) en twee dichtbij (Mail, Offertes). Wat wegvalt is de tweede kaart van de verste en de middelste trap, niet een trap. De ankers --sc-dl en --sc-dr blijven gelden, dus de kaarten hangen ook hier aan het scherm en niet aan het venster. */ @media (max-width: 1399px) { [data-bur-zweef="2"], [data-bur-zweef="3"] { display: none; } } /* 992 tot 1399: de tekstkolom staat links, dus de linker helft van het beeld is bezet tot ongeveer 62 procent van de hoogte (gemeten: de alinea eindigt op 55vh op 1440 en op 62vh op 992). Alleen ONDER die grens mag er links iets hangen; daarboven hangen de kaarten aan de rechterrand. */ @media (min-width: 992px) and (max-width: 1399px) { /* Overzicht ligt 72px voorbij de rand en Kennis 30. Dat is geen willekeur: Overzicht is de VERSTE kaart, dus die hoort het diepst weg te zakken. Ze stonden allebei op ongeveer 40px en lazen daardoor als twee regels van een lijst tegen dezelfde rand. */ [data-bur-zweef="1"] { --kx: calc(var(--sc-dr) - 72px); --ky: 34%; } [data-bur-zweef="4"] { --kx: calc(var(--sc-dr) - 30px); --ky: 55%; } [data-bur-zweef="5"] { --kx: calc(var(--sc-dl) - 30px); --ky: 64%; } [data-bur-zweef="6"] { --kx: calc(var(--sc-dr) - 240px); --ky: 60%; } } /* 768 tot 991: hier staat de tekst NIET links maar gecentreerd bovenin, en het scherm staat in het midden (--bur-x is 0). De bezette zone is dus de bovenste band: gemeten loopt [data-bur-regel] tot y273 op 768 bij 700 en tot y296 op 768 bij 1024. Alle vier de kaarten hangen daarom onder 42 procent van de hoogte, langs de linker-, rechter- en onderrand van het scherm. De scroll-hint staat op bottom 10vh; gemeten blijft er op 700 hoogte 88px tussen de onderste kaart en de knop. */ @media (min-width: 768px) and (max-width: 991px) { [data-bur-zweef="1"] { --kx: calc(var(--sc-dr) - 30px); --ky: 42%; } /* Kennis hangt in deze band aan de LINKERrand, dus hier geldt dezelfde regel als bij Controles: het icoon draait naar de tucked kant, anders wordt het woord afgesneden. Gemeten op 768: zonder deze regel las de kaart als "Kenn". */ [data-bur-zweef="4"] { --kx: calc(var(--sc-dl) - 80px); --ky: 48%; flex-direction: row-reverse; padding-left: 25px; padding-right: 8px; } [data-bur-zweef="5"] { --kx: calc(var(--sc-dl) - 34px); --ky: 60%; } [data-bur-zweef="6"] { --kx: calc(var(--sc-dr) - 120px); --ky: 62%; } } /* DE SLAGSCHADUW ONDER HET ZWEVENDE SCHERM. Zelfde greep als .hero-image-shadow-02 in de template en als .mc-vloerglans in scene 2: een breed, plat en zacht vlak in de inktkleur, niet in oranje, want een schaduw is donker en niet warm. Zonder dit vlak hangt het scherm nergens aan vast en leest het als een plaatje op de achtergrond. Hij staat BUITEN de parallax-lagen en krijgt zijn verschuiving van vp/scene.js, precies dezelfde --bur-x maal de schuif-ramp als het scherm zelf. Zat hij in [data-bur-midden], dan zou hij er 84px onder wegzakken. */ .bur-grondschaduw { /* 47 en niet 50: het licht komt van rechtsboven, dus de schaduw valt naar linksonder. Op 1440 is dat 43px naar links, in dezelfde richting als de x van elke box-shadow in deze scene. De hoogte 71 procent legt hem net onder de onderrand van het scherm (578 op een venster van 900) zonder eraan vast te plakken: het middelpunt ligt op 639, de bovenrand op 587. Negen pixel lucht, en dat is wat een object dat zweeft van een object dat staat onderscheidt. */ left: 47%; top: 71%; z-index: 2; width: min(600px, 48vw); height: 104px; --sc-g: var(--sc-ink); transform: translate(-50%, -50%) translateX(calc(var(--bur-x) * 1vw)); /* EINDSTAND, één bron voor CSS en JS. vp/scene.js leest --bur-grond-op in meet() en schrijft het getal per frame met de ramp erop. Zet je het hier anders, dan volgt de JS vanzelf; een custom property overleeft de inline opacity die het script erop schrijft, een gewone waarde niet. */ --bur-grond-op: .15; opacity: var(--bur-grond-op); } /* --- 1b. vulvlak achter het scherm ---------------------------------------- Aan het begin vult het dashboard het hele beeld. Het scherm heeft dan al de hoekstraal van de eindstand, en die ronding zou je aan de vier hoeken zien. Dit vlak staat er in exact de dashboardkleur achter en fadet weg zodra het scherm een stap terug zet en zijn eigen randen krijgt. Zo hoeft de hoekstraal niet te animeren, wat een paint per frame zou kosten. */ [data-bur-vulling] { position: absolute; inset: 0; z-index: 1; background: var(--sc-kaart); opacity: 0; pointer-events: none; } /* Diepte, middel 1 plus 3: de halo achter het zwevende scherm. Ligt op z-index 2, dus boven de kamer (0) en het vulvlak (1) en ONDER de groep (3): het licht bloedt langs de randen naar buiten in plaats van erover. vp/scene.js fadet hem mee met dezelfde ramp die het scherm losmaakt. */ [data-bur-halo] { /* COMPOSITIE. Was 760x560 op 50%/50%, precies om het scherm heen; kop, scherm, onderschrift en knop lazen daardoor als vier losse banden onder elkaar. Het vlak is nu hoger en breder en zijn bovenrand loopt achter de kop door, zodat de kop en het scherm in HETZELFDE licht staan in plaats van dat de kop er los bovenop ligt. Dat is de greep van de template: één lichtveld waar de hele compositie in hangt. Het middelpunt blijft op 52% staan, dus het zwaartepunt van het licht blijft bij het scherm en de kop pakt alleen de uitloop mee. Daarmee blijft de subkop op 4,5:1; zie de contrastnotitie bij [data-bur-regel] p. */ left: 50%; top: 52%; z-index: 2; width: min(1080px, 82vw); height: min(880px, 84vh); /* Volgt het scherm naar rechts, anders blijft het licht in het midden hangen terwijl het object er niet meer staat. vp/scene.js schrijft dezelfde verschuiving per frame met de scrub erop. */ transform: translate(-50%, -50%) translateX(calc(var(--bur-x) * 1vw)); --sc-g: var(--sc-gloed); /* Basis is de EINDSTAND, dus de stand zonder JS. vp/scene.js schrijft er per frame overheen en laat hem met de los-ramp mee opkomen; het getal .09 staat daar ook, in frameBureau(). Zie de warmtemeting bij .bur-sfeer. */ opacity: .09; } /* --- 1c. de groep die het scherm in de ruimte zet ------------------------- Hier zaten de behuizing en het scherm samen in, zodat hun randen bij een perspectivische projectie niet uiteen konden lopen. De behuizing is weg, dus de groep draagt nu alleen het scherm. Ze blijft wel staan, en dat is geen restant: de groep draagt de verschuiving, de draaiing en de kanteling, terwijl [data-bur-scherm] eronder de SCHAAL draagt. Zou je die vier op één element zetten, dan moeten schaal en rotatie in dezelfde transform-lijst en zit de volgorde vast; nu kan de scrub ze op eigen ramps zetten, en dat is precies waar de vorige ronde op stukliep. */ /* HET SCHERM STAAT IN DE RUIMTE, NIET PLAT IN BEELD. Het schoof eerst alleen omhoog en kantelde een paar graden; daarmee bleef het een plaatje op een pagina. Nu schuift het naar rechts, draait het weg met de rechterrand naar de kijker toe en kantelt het licht achterover. DE HOEK IS GEMETEN, NIET GEKOZEN. De tekst op het scherm draagt de belofte van de scene, dus die moet leesbaar blijven. Bij de eindschaal .34 en een perspectiefafstand van 78vw is de wegdraaiende linkerhelft de maat: op -10 graden is de ruimtelijkheid nauwelijks te zien, op -20 zakt de linkerrand ruim 8 procent in en gaan de regels op het scherm daar dicht. Op -16 krimpt de linkerrand 6,5 procent en rekt de rechterrand 7,3 procent uit, en blijft de kop op het scherm op elke gemeten breedte leesbaar. EN DE HOEK MOET ER OP TIJD ZIJN. Hij zat op één ramp met de verschuiving naar rechts en die begon pas op .50, terwijl het scherm tussen .30 en .45 al vol in beeld staat. Daar was rotateY gemeten 0,000 graden: het scherm las precies zoals de opdrachtgever het beschreef, als een plaatje op een pagina. vp/scene.js draait de twee nu op eigen ramps, en de draaiing begint op .18, tegelijk met het moment dat het scherm loskomt. transform-origin blijft op het midden staan. Dat is nu ook de enige juiste plek: het scherm raakt niets meer, dus er is geen contactpunt om de oorsprong aan op te hangen. Een object dat vrij hangt draait om zijn eigen zwaartepunt. Gemeten op 1440x900. */ [data-bur-groep] { position: absolute; inset: 0; z-index: 3; transform: translate(calc(var(--bur-x) * 1vw), var(--bur-y)) rotateX(calc(var(--bur-rx) * 1deg)) rotateY(calc(var(--bur-ry) * 1deg)); transform-style: preserve-3d; /* Loopt met de scrub mee van 0 naar 1 en stuurt het licht dat bij de stand hoort. Dat waren er twee, de lichtrand op de behuizing en de glans over het scherm; de behuizing is weg, dus alleen .bur-dash::after leest hem nog. Zonder JS staat hij op 1, want dan is de eindstand ook de enige stand. */ --bur-licht: 1; } /* HIER STOND DE BEHUIZING. .bur-huis met zijn lichtrand, .bur-nek, .bur-voet en de aparte telefoonbehuizing zijn eruit, samen met [data-bur-frame] dat ze droeg en met .bur-eiland, het camera-eiland van de telefoon. Het dashboard is nu zelf het object; wat de behuizing aan licht en schaduw deed, doet .bur-dash hieronder. vp/scene.js schreef elk frame ongeguard op [data-bur-frame]; die twee regels zijn daar mee verdwenen, anders had een querySelector die null teruggeeft de hele scene gebroken. */ /* --- 1d. het scherm met de nagebouwde cockpit ------------------------------ */ [data-bur-scherm] { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; transform-origin: 50% 50%; transform: scale(var(--bur-eind)); } /* HET NAGEBOUWDE SCHERM, tweede versie --------------------------------------------------------------------------- De eerste versie was een generieke beheerlayout: een zijbalk met vijf menu-items, drie gelijke tellers en een lijstje eronder, in wit op koel grijsblauw. Dat is het scherm dat elke SaaS-site laat zien, en het botste met de rest van deze pagina. De tweede versie haalde de zijbalk eruit en zette het palet warm, maar hield drie gelijke tellers op een rij met een lijstje eronder. Dat is nog steeds wat elke SaaS-site laat zien, alleen in andere kleuren. Wat er nu staat, met de middelen van de template: - de zijbalk is weg, markup en al. Een nagebouwd scherm dat EEN ding goed toont overtuigt meer dan een dat een compleet product nabootst; - het palet is warm: papier als schermvlak, kaart als kaartvlak, hairlines in --color--gray-200. Geen wit-op-koelgrijs meer; - de radius van de template op de kaarten (--radius--24px) en veel meer lucht: de rijen ademen nu in vh en niet in vaste pixels; - TWEE blokken in plaats van vier, en ze zijn niet gelijk. Boven de band met "4, wacht op uw akkoord" op de h1-maat in de accenttint, met de twee rustige standen ernaast als tekst achter een haarlijn. Daaronder het werk zelf, als het grootste vlak op het scherm, met de rij die op akkoord wacht in dezelfde accenttint en de knop Goedkeuren erin. Zo loopt het oog van het getal naar de knop en vertelt het scherm in één oogopslag wat het te vertellen heeft: er ligt werk klaar en het wacht op u. Alle tekst komt letterlijk uit content/home.md, ## scene-bureau. De standen 4 en 12 zijn voorbeeldstanden in een scherm dat het woord VOORBEELDWEERGAVE draagt. */ .bur-dash { width: 100vw; height: 100vh; overflow: clip; display: flex; flex-direction: column; background: var(--sc-papier); /* De hoekstraal wordt door de schaal meegekrompen, dus deel hem hier alvast door de eindschaal. In de eindstand staat er precies --bur-r. */ border-radius: calc(var(--bur-r) / var(--bur-eind)); /* HET SCHERM IS NU ZELF HET OBJECT. Er stond één schaduw, want er zat een behuizing omheen die het zware werk deed. Nu het scherm vrij hangt, moet de schaduw vertellen dat het los van de achtergrond staat, en dat doet één laag niet: één schaduw leest als een vlek, twee lagen als hoogte. De hairline is de rand die de behuizing eerst was. Alle drie de getallen staan in schermcoördinaten en worden met --bur-eind meegeschaald. In de eindstand op 1440 rendert dit als een lijn van 1,4px, een diepe schaduw van -20 op 33 met 65 blur, en een contactschaduw van -6 op 12 met 24 blur. De x is negatief omdat .bur-lichtval rechtsboven staat. Meegemeten: de rand haalt op --color--gray-50 een verschil dat je op elke breedte ziet zonder dat er een lijn omheen komt te liggen. */ box-shadow: 0 0 0 calc(1.4px / var(--bur-eind)) rgba(34, 48, 59, .09), -60px 96px 190px -70px rgba(30, 58, 95, .50), -18px 34px 70px -30px rgba(30, 58, 95, .26); position: relative; } /* De glans over het glas, in dezelfde richting als de draaiing: de linkerhelft loopt weg en wordt een tikje donkerder, de rechterrand vangt licht. Het gaat om donkere tekst op een licht vlak, dus beide richtingen vergroten het contrast in plaats van het te verkleinen; nagemeten in het rapport. Komt met --bur-licht mee op, zodat een recht van voren staand scherm op voortgang 0 geen glans draagt die daar niet hoort. */ .bur-dash::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; opacity: var(--bur-licht, 1); /* GEMETEN EN BIJGESTELD. Op .085 aan de donkere kant en .34 aan de lichte zakte VOORBEELDWEERGAVE op 375 naar 3,9:1 en de knop Verzonden naar 3,7. Donkerder maken verlaagt namelijk WEL het contrast van donkere tekst op een licht vlak; dat is de fout die je maakt als je alleen naar de lichte kant kijkt. Met .04 en .18 blijft het perspectief zichtbaar en haalt alles op het scherm de norm. Nagemeten op gerenderde pixels, zie het rapport. */ background: linear-gradient(101deg, rgba(34, 48, 59, .04) 0%, rgba(34, 48, 59, .012) 26%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, .18) 100%); } .bur-dash-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px clamp(28px, 4vw, 56px); background: var(--sc-kaart); border-bottom: 1px solid var(--sc-lijn); } .bur-merk { display: inline-flex; align-items: center; gap: 10px; font-size: var(--sc-p-s); line-height: var(--sc-lh-m); font-weight: var(--sc-w-sb); color: var(--sc-navy); } .bur-stand { display: inline-flex; align-items: center; gap: 12px; } /* TEKST: controleren tegen content/home.md */ .bur-stand span { font-size: var(--sc-p-t); line-height: var(--sc-lh-m); font-weight: var(--sc-w-b); letter-spacing: .08em; padding: 0; } .bur-stand .voorbeeld { color: var(--sc-ink); } .bur-stand .lokaal { display: inline-flex; align-items: center; gap: 6px; color: var(--sc-teal-tekst); } .bur-stand .lokaal::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .bur-dash-body { flex: 1; min-height: 0; display: flex; } .bur-dash-main { flex: 1; min-width: 0; max-width: 1120px; margin: 0 auto; padding: 4vh clamp(28px, 5vw, 76px); display: flex; flex-direction: column; /* safe center en niet gewoon center. Past de inhoud niet in de hoogte, dan laat center hem aan BEIDE kanten uitlopen en schuift de kop over de balk bovenin; gemeten op 320x568, waar de kop over VOORBEELDWEERGAVE viel en de onderste rij eronderuit liep. Met safe valt hij dan terug op flex-start en loopt de overloop alleen naar beneden, waar overflow:clip hem opvangt. */ justify-content: center; justify-content: safe center; gap: clamp(18px, 3.6vh, 38px); } .bur-dash-kop { font-size: var(--sc-h1); line-height: var(--sc-lh-s); font-weight: var(--sc-w-sb); letter-spacing: -2px; color: var(--sc-navy); text-wrap: pretty; margin: 0; /* Een maat in plaats van de volle kolom, zodat de kop een vorm krijgt in plaats van een band te zijn. */ max-width: 17ch; } .bur-dash-kop em { font-style: normal; color: var(--sc-accent); } /* DE BAND DIE DE BELOFTE DRAAGT --------------------------------------------------------------------------- Hier stonden drie tellers naast elkaar in een grid van 1,25fr 1fr 1fr. Drie even grote tegels op een rij zijn precies de vorm die elke SaaS-site laat zien, en ze zeggen alle drie even hard iets terwijl er maar EEN ding toe doet: er ligt werk klaar en het wacht op uw akkoord. Wat er nu staat is een band met een binnenverdeling. Links het getal op de h1-maat met het onderwerp ernaast, in de accenttint; dat is het eerste wat je op elke schaal ziet, ook op 34 procent. Rechts, achter een haarlijn, de twee rustige standen als TEKST en niet als tegel: een teller die alleen een stand meldt heeft geen eigen vlak nodig. Zo staan er nog twee blokken op het scherm in plaats van vier, en het verschil tussen die twee is meteen de hiërarchie. #a5441a op #FDF1E9 haalt 5,7:1 en dat is ruim boven de 4,5 die de kleinste tekst hier nodig heeft. De tekst noemt de betekenis voluit, dus kleur is nergens het enige signaal. */ .bur-akkoord { display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 4vw, 56px); flex-wrap: wrap; background: var(--sc-tint); border: 1px solid #F2D9C6; border-radius: var(--sc-r-24); padding: clamp(20px, 2.6vh, 30px) clamp(26px, 3vw, 40px); box-shadow: 0 20px 38px -32px rgba(165, 68, 26, .55); } .bur-akkoord-kern { display: flex; align-items: baseline; gap: 20px; margin: 0; min-width: 0; } .bur-akkoord-kern b { font-size: var(--sc-h1); line-height: var(--sc-lh-xs); font-weight: var(--sc-w-sb); letter-spacing: -2px; color: var(--sc-accent); } .bur-akkoord-kern span { font-size: var(--sc-h3); line-height: var(--sc-lh-m); font-weight: var(--sc-w-sb); color: var(--sc-ink); } /* De haarlijn scheidt de belofte van de twee standen. Hij staat op de randkleur van de band zelf, dus hij trekt geen aandacht; hij houdt alleen de twee helften uit elkaar zonder er een tweede kaart van te maken. */ .bur-akkoord-naast { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 36px); margin: 0; padding-left: clamp(20px, 2.6vw, 36px); border-left: 1px solid #EBCDB6; } .bur-stat { display: inline-flex; align-items: baseline; gap: 9px; font-size: var(--sc-p-s); line-height: var(--sc-lh-m); color: var(--sc-body); white-space: nowrap; } .bur-stat b { font-size: var(--sc-h3); line-height: var(--sc-lh-s); font-weight: var(--sc-w-sb); color: var(--sc-navy); letter-spacing: -.5px; } /* Teal ALS TEKST op licht heeft de donkerste variant nodig: --vp-teal-tekst haalt op de accenttint 5,3:1, de gewone teal blijft onder de 4,5. De stip is decoratie en mag daarom de lichtere teal houden. */ .bur-stat--leeft { align-items: center; font-weight: var(--sc-w-sb); color: var(--sc-teal-tekst); } .bur-stat--leeft i { width: 9px; height: 9px; border-radius: 50%; background: var(--sc-teal); flex: 0 0 auto; } /* HET WERK ZELF. Dit is het grootste blok op het scherm, want dit is waar de scene over gaat. Layering: de kaart ligt als een eigen vlak op het schermvlak met de radius van de template, en de schaduw eronder houdt hem los van het papier. */ .bur-lijst { position: relative; background: var(--sc-kaart); border: 1px solid var(--sc-lijn); border-radius: var(--sc-r-24); overflow: clip; box-shadow: 0 24px 44px -34px rgba(30, 58, 95, .45); } .bur-lijst-kop { /* Eén doorlopende regel, geen space-between: content/home.md levert dit als één zin ("Klaargezet voor u, vandaag") en met de kolommen uit elkaar getrokken bleef de komma los aan de linkerkant hangen. */ display: flex; align-items: baseline; justify-content: flex-start; gap: 6px; padding: 22px clamp(24px, 2.6vw, 34px) 20px; background: var(--sc-papier); border-bottom: 1px solid var(--sc-lijn); } /* LEESBAARHEID OP 34 PROCENT. In de eindstand staat dit scherm op --bur-eind, dus alles wordt door 0,34 gedeeld, en de wegdraaiende linkerhelft haalt daar nog 5,7 procent af. Het zetsel gaat daarom een trap omhoog: de regels die de belofte dragen staan op het large-paragraph-token in plaats van small, en de bijregels op small in plaats van extra-small. 20px wordt zo 6,8px op het bureau in plaats van 5,4, en dat is het verschil tussen een regel en een streepje. */ .bur-lijst-kop b { font-weight: var(--sc-w-sb); font-size: var(--sc-p-l); color: var(--sc-ink); } .bur-lijst-kop span { font-size: var(--sc-p-s); color: var(--sc-body); } /* De rijen krijgen meer lucht dan de 20px die er stond, en een icoontegel voorop. Die tegel is de greep van de template: elke regel in de hero daar begint met een icoon in een eigen vlakje, en dat geeft de rij een begin in plaats van een tekstblok tegen een rand. Hij is decoratie en draagt aria-hidden; de betekenis staat volledig in de tekst ernaast. */ .bur-rij { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 20px); padding: clamp(20px, 2.4vh, 26px) clamp(24px, 2.6vw, 34px); border-top: 1px solid var(--sc-lijn); } .bur-rij:first-of-type { border-top: 0; } .bur-rij-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; /* BINNENRADIUS IS BUITENRADIUS MIN DE MARGE. De kaart heeft radius 24 en de rij zet de tegel op clamp(24,2.6vw,34) van de rand af, dus de tegel raakt die bocht niet en mag zijn eigen ronding houden. 14 is de radius van de template op zijn kleine vlakken. */ border-radius: 14px; background: var(--sc-papier); border: 1px solid var(--sc-lijn); } .bur-rij-tekst { flex: 1 1 auto; min-width: 0; } .bur-rij .titel { display: block; font-weight: var(--sc-w-sb); font-size: var(--sc-p-l); line-height: var(--sc-lh-m); color: var(--sc-ink); } .bur-rij .onder { display: block; font-size: var(--sc-p-s); line-height: var(--sc-lh-m); color: var(--sc-body); margin-top: 6px; } .bur-rij .rechts { display: inline-flex; align-items: center; gap: 14px; flex: 0 0 auto; } /* De rij die op akkoord wacht staat in de accenttint, dezelfde tint als de band erboven, zodat het oog van het getal 4 naar de knop loopt. Het verloop dooft naar rechts uit, dus de knop en het label staan op het gewone kaartvlak en houden het contrast dat daar gemeten is. De tekst noemt de stand voluit, dus deze tint is nergens het enige signaal. */ .bur-rij--wacht { background: linear-gradient(90deg, var(--sc-tint) 0%, var(--sc-tint) 22%, rgba(251, 249, 244, 0) 76%); } .bur-rij--wacht .bur-rij-ico { background: var(--sc-kaart); border-color: #F2D9C6; } .bur-label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--sc-p-xs); line-height: var(--sc-lh-m); font-weight: var(--sc-w-b); letter-spacing: .06em; padding: 0; } .bur-label::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .bur-label--klaar { color: var(--sc-teal-tekst); } .bur-label--nieuw { color: var(--sc-accent); } /* Klikvlak. Radius 100px, want zo doet de template zijn .button. box-shadow en niet drop-shadow: dit is een rechthoek met een radius, dus het beeld is hetzelfde en er komt geen filterlaag bij in een gepinde stage. */ .bur-knop { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: var(--sc-p-s); line-height: var(--sc-lh-m); font-weight: var(--sc-w-sb); color: #FFFFFF; background: var(--sc-accent); border-radius: var(--sc-r-100); padding: 10px 18px; box-shadow: 0 6px 14px -8px rgba(165, 68, 26, .70); } .bur-knop .af { display: none; } /* De verzonden-stand van de knop. --vp-teal-donker gaf wit-op-teal 5,17:1 en dat zakte in het geschaalde scherm door de antialiasing naar 4,0. Met --vp-teal-tekst, de donkerste teal in het palet, staat de basis op 5,88 en blijft er ook na het schalen marge over. Gemeten op gerenderde pixels. */ [data-bur-lijst].is-akkoord .bur-knop { background: var(--sc-teal-tekst); } [data-bur-lijst].is-akkoord .bur-knop .aan { display: none; } [data-bur-lijst].is-akkoord .bur-knop .af { display: inline; } [data-bur-lijst].is-akkoord .bur-label--klaar { opacity: 0; } .bur-label--klaar { transition: opacity .3s ease; } [data-bur-cursor] { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; z-index: 3; filter: var(--sc-schaduw-mid); } /* --- 1e. tekstregel en scroll-hint ---------------------------------------- De koppen zijn echte

-elementen en erven dus de h2-regel van de template: --_typography---typography--h2, line-height small, semi-bold, letter-spacing -1px, kleur --color--blue-950. Hier staat alleen wat daar bovenop komt. / / COMPOSITIE. De kopkolom is niet meer de volle breedte maar een vaste verhouding van de schermbreedte: --bur-eind is de eindschaal van het scherm, dus 135% daarvan is op ELKE breedte dezelfde verhouding tot het scherm dat eronder staat. Op 1440 is dat 653 tegen een scherm van 490. Zo staat de kop in dezelfde kolom als het beeld in plaats van er los boven te hangen. Het plafond van 720px houdt de regellengte binnen het leesbare. / [data-bur-regel] { position: absolute; left: 0; right: 0; top: 7vh; z-index: 6; max-width: min(calc(var(--bur-eind) 135vw), 720px); margin: 0 auto; text-align: center; padding: 0 24px; opacity: 1; } [data-bur-regel] h2 { text-wrap: pretty; } [data-bur-regel] h2:focus-visible, .mc-tekst h2:focus-visible { outline: 3px solid var(--sc-accent); outline-offset: 5px; } [data-bur-regel] h2 em { font-style: normal; color: var(--sc-accent); } [data-bur-regel] p { /* 52ch en niet 58: de subkop is de uitleg, niet de kop, en een kortere maat zet die verhouding neer. Kleur --color--gray-900 op papier haalt 5,02:1; op het zachtste punt van de gloed erachter is dat nagemeten op gerenderde pixels, zie het rapport. / margin: 14px auto 0; max-width: 52ch; font-size: var(--sc-p-s); line-height: var(--sc-lh-l); font-weight: var(--sc-w-m); color: var(--sc-body); } / Doorverwijzing blijft kind van [data-bur-regel]. scene.js laat daardoor kop en knop als één blok in- en uitschuiven. / .vp-bur-actie { width: fit-content; margin: clamp(18px, 2.2vh, 26px) auto 0; pointer-events: auto; } / Alleen voor schermlezers. Het bijschrift bij het nagebouwde scherm hoort bij de betekenis maar niet in het beeld: op het scherm staat het woord VOORBEELDWEERGAVE al, en een vierde tekstregel op het rustpunt duwt op een smal venster het scherm uit beeld. De tweede zin van dat bijschrift noemde een monitor en een telefoon en is met die twee behuizingen vervallen; zie het commentaar bij de
in index.html. / .sc-srt { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } / TWEEKOLOMS COMPOSITIE VANAF 992px. Het scherm schuift naar rechts, dus de tekst gaat naar links. Daarmee is de kop geen band meer die los boven het beeld hangt maar de linkerhelft van een compositie: kop, uitleg, slotregel links, het zwevende scherm met zijn zes kaarten rechts. Dat is de opbouw die de template zelf ook gebruikt in zijn tekst-plus-beeld-secties, en het is ook de reden dat geen enkele kaart links van 42 procent van de stage hangt: daar staat de tekst. Onder 992px past dat niet naast elkaar; daar blijft alles gecentreerd. / @media (min-width: 992px) { [data-bur-regel] { / 28vh en niet 23. De kolom stond op het oude beeld naast een monitor die op een bureaublad stond, en dat blad vulde de onderste derde. Zonder blad is de linkeronderhoek leeg, en dan hangt een tekst die op 207 begint te hoog. Het zwevende geheel loopt gemeten van y243 tot y643 met zijn zwaartepunt op 443; de kolom staat nu op 270 tot 480 met zwaartepunt 375 en dat leest als één compositie in plaats van als twee blokken. / left: 6vw; right: auto; top: 28vh; max-width: min(38vw, 480px); margin: 0; text-align: left; padding: 0; } [data-bur-regel] p { margin-left: 0; margin-right: 0; max-width: none; } .vp-bur-actie { margin-left: 0; margin-right: 0; } } / De hint is een klikvlak en houdt dus een vorm; radius 100px zoals .button. / [data-bur-hint] { display: none; / Terug op 10vh. De 7vh was er om het ingetrokken onderschrift te ontwijken; dat staat er niet meer, dus de knop mag weer los van de onderrand staan. / position: absolute; left: 50%; bottom: 10vh; z-index: 7; transform: translateX(-50%); } [data-vp-scene] [data-bur-hint] { display: block; } .bur-hint-knop { display: inline-flex; align-items: center; gap: 12px; padding: 11px 13px 11px 22px; border-radius: var(--sc-r-100); cursor: pointer; font: inherit; font-size: var(--sc-p-xs); line-height: var(--sc-lh-m); font-weight: var(--sc-w-sb); letter-spacing: .04em; color: var(--sc-navy); white-space: nowrap; / PRESTATIE. Hier stond backdrop-filter: blur(18px) saturate(160%). Dat is de duurste variant die er is, en hij stond op een knop die per frame meebeweegt in een gepinde scene: WebKit vervaagt en verzadigt de achtergrond dan bij elke scroll-frame opnieuw. Regel 962 zette hem onder 768px al uit, wat betekent dat iemand het half wist. Hij staat nu overal uit. Een dekkende vulling in het kaartvlak van de template geeft hier hetzelfde beeld en leest zelfs rustiger. / background: var(--sc-kaart); border: 1px solid var(--sc-lijn); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 16px 32px -18px rgba(34, 48, 59, .34); animation: none; } [data-bur-stage].is-actief .bur-hint-knop { animation: burSpring 1.7s var(--sc-bounce) 2; } .bur-hint-knop i { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--sc-accent); box-shadow: 0 8px 18px -8px rgba(165, 68, 26, .65); } .bur-hint-knop:focus-visible { outline: 3px solid var(--sc-accent); outline-offset: 3px; } @keyframes burSpring { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(7px); } } / Op een laag venster ligt de onderrand van het zwevende scherm dicht bij de onderrand van het beeld, dus de knop schuift daar omlaag. Dit stond er eerder om het bureaublad en de voet van de monitor te ontwijken; die twee zijn weg, de krappe hoogte niet. De kaart Offertes hangt hier bovendien het laagst van de zes, en die mag de knop niet raken; gemeten op 1440 bij 720. / @media (min-width: 768px) and (max-height: 780px) { [data-bur-hint] { bottom: 6vh; } } / ========================================================================== 2. SCENE MACHINE ========================================================================== / / DEZE SCENE STOND OP BIJNA ZWART EN STAAT NU IN HET LICHT --------------------------------------------------------------------------- Hij kwam uit een opzet waarin een donkere sectie het ritme brak. Die designtaal gebruikt deze site niet: van de hero tot de footer is alles licht warm papier met grote zachte gloedvlakken. Een donker blok van 230vh midden in die pagina las als een sectie uit een andere site. De omzetting is niet alleen de achtergrond. Alles wat op donker was afgesteld ging mee, want anders houd je een lichte sectie met donkere resten erin: - het accent ging van #FF6B35 (op donker) naar #a5441a (op licht), zie 0a. De gloed en de LED blijven warm oranje, want dat is decoratie en geen tekst; - de kop van --vp-op-donker naar de kopkleur van de template (--sc-navy), de lopende tekst en de standen naar --color--gray-900, het bijschrift en de onderregel naar --color--gray-950 en -900; - de zwevende labels van een glasvlak met backdrop-filter naar een kaartvlak met een hairline; - de spot en de vloerglans van "licht in het donker" naar het omgekeerde: een warm lichtveld en een zachte schaduw die de machine grondt; - de zware objectschaduw (rgba(0,0,0,.55)) naar een schaduw die op papier werkt. Het verloop begint op --color--gray-100, precies waar de bureau-scene eindigt, en loopt naar het kaartvlak, precies de body-kleur van de sectie eronder. Zo zit er geen naad. LET OP, DIT VERLOOP IS VERHUISD. Zolang de scenes gepind zijn draagt #scene-machine::before het, want daar staat het stil in het document en kan het aan de bovenkant invloeien over de bureau-scene. De regel op [data-mc-stage] hieronder geldt nog wel, maar alleen voor de pagina zonder JavaScript. Zie het blok DE LEEGTE TUSSEN DE TWEE SCENES verderop. / #scene-machine { / 230vh gaf een loop van 130vh. 250vh geeft 150vh, 15,4 procent langer, zodat de tekst bij de machine navenant langer leesbaar blijft. De 100vh van de stage schaalt NIET mee, dus 230 x 1,15 zou 26,5 procent geven. / --mc-hoogte: 250vh; / DE OVERLAP MET DE UITLOOP VAN DE BUREAU-SCENE. Dit getal stond alleen als terugvalwaarde in de margeregel verderop en was daarmee nergens te vinden. Het is nu een echt token, want de invloeiing hieronder rekent zich eraan: wijzig je de overlap, dan schuift het verloop mee en blijft de verhouding kloppen. / --mc-overlap: 55vh; / Over deze afstand komt het vlak van de machinescene OP, van volledig doorzichtig aan de bovenrand tot dekkend. Bewust korter dan de overlap: het vlak is dekkend voordat de bureau-sectie eindigt, dus er is geen strook waar de pagina-achtergrond doorheen kan schijnen. 95 procent van 55vh is 52,25vh, dus die veiligheidsmarge is 2,75vh. / --mc-invloei: calc(var(--mc-overlap) .95); position: relative; z-index: 2; background: var(--sc-kaart); color: var(--sc-ink); } [data-vp-scene] #scene-machine { height: var(--mc-hoogte); } /* DE LEEGTE TUSSEN DE TWEE SCENES. Een sticky stage plakt tot de onderrand van zijn sectie, en schuift daarna over zijn eigen hoogte omhoog uit beeld. Bij een stage van 100vh is die uitloop dus ook 100vh. Het scherm staat hoog in de bureau-stage, dus het is als eerste weg, en daarna schuift er een leeg vlak van bijna een heel scherm voorbij voordat de machine begint. Gemeten op 1440 bij 900, voor deze regel: van y=3750 tot y=4350 stond er geen enkel object in beeld, zes ruiten scrollen lang. Oplossing: de machinesectie begint eerder en schuift met zijn eigen sticky stage over die uitloop heen. #scene-machine draagt al z-index 2, dus hij komt bovenop. Alleen onder [data-vp-scene], want zonder JavaScript zijn de secties niet gepind en zou een negatieve marge de twee gewoon over elkaar leggen. / [data-vp-scene] #scene-bureau + #scene-machine { margin-top: calc(-1 var(--mc-overlap)); } /* EN DE SNIJLIJN DIE DAAR UIT KWAM. --------------------------------------------------------------------------- Die overlap loste de leegte op en maakte er een nieuw probleem voor terug. Twee vlakken schoven met een RECHTE bovenrand over de bureau-scene heen: #scene-machine zelf (250vh hoog, dekkend --color--white) en de stage erin (100vh, dekkend verloop vanaf --color--gray-100). Die twee randen vallen op dezelfde regel, want de stage begint precies op de bovenrand van de sectie zolang de sticky nog niet vastzit. Gemeten op 1440 stond daar een sprong van 7 op 255 over de volle breedte, en dwars door het zwevende dashboard heen: een guillotine, en zo las het ook. WAT ER NU GEBEURT. Het vlak gaat van de sectie en van de stage af en komt terug op EEN laag, ::before, die de hele sectie beslaat en die aan de bovenkant invloeit van doorzichtig naar --color--gray-100. Daar waar de rand stond is de laag dus doorzichtig, en de bureau-scene eronder verdwijnt over 52vh in plaats van op een regel. De alfa zit IN het verloop en niet in een masker: een masker van 250vh bij de vensterbreedte is een eigen compositielaag, een verloop met alfa is gewoon verf. WAAROM DE LAAG OP DE SECTIE STAAT EN NIET OP DE STAGE. De stage is sticky, dus zijn bovenrand plakt tijdens de hele gepinde scene aan de bovenkant van het venster. Een invloeiing daarop zou de bovenste 52vh van het BEELD de hele scene lang laten vervagen. De sectie staat stil in het document, dus daar valt de invloeiing precies één keer, op de plek waar de twee scenes elkaar raken. WAAROM ALLEEN ONDER [data-vp-scene]. Zonder JavaScript is er geen negatieve marge en dus geen overlap: er staat niets achter de bovenrand van deze sectie en een doorzichtige strook zou het paginavlak laten zien. De stage houdt daar zijn eigen dekkende verloop, precies zoals het was. / [data-vp-scene] #scene-bureau + #scene-machine { background: none; } [data-vp-scene] #scene-bureau + #scene-machine::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; / Terugvalvorm zonder color-mix: een rechte alfaramp. Kent de browser color-mix niet, dan blijft de invloeiing staan in plaats van dat de hele declaratie sneuvelt en de harde rand terugkomt. Interpolatie naar transparent gaat in premultiplied alfa, dus dit vervaagt zonder grijze tussenstand. / background: linear-gradient(180deg, transparent 0, var(--sc-band) var(--mc-invloei), var(--sc-kaart) calc(var(--mc-invloei) + 34vh), var(--sc-kaart) 64%, var(--sc-papier) 100%); / En de vorm die telt: dezelfde ramp, maar met een S-bocht erin. Een rechte alfaramp knikt aan beide uiteinden en zo'n knik leest als een flauwe lijn op precies de plek waar we er net een hebben weggehaald. De zeven stops hieronder benaderen een smoothstep, dus de ramp begint en eindigt vlak. / background: linear-gradient(180deg, / 0,4 procent en niet 0. Een stop op nul procent is transparent zwart, en dan hangt het van de browser af of hij in premultiplied alfa mengt; doet hij dat niet, dan komt er een grijze zweem in de eerste centimeters. Met een spoor kleur erin klopt de tint in beide modellen, en 0,4 procent van het bandvlak is 0,03 op 255. / color-mix(in srgb, var(--sc-band) .4%, transparent) 0, color-mix(in srgb, var(--sc-band) 6%, transparent) calc(var(--mc-invloei) .20), color-mix(in srgb, var(--sc-band) 20%, transparent) calc(var(--mc-invloei) * .38), color-mix(in srgb, var(--sc-band) 42%, transparent) calc(var(--mc-invloei) * .55), color-mix(in srgb, var(--sc-band) 66%, transparent) calc(var(--mc-invloei) * .70), color-mix(in srgb, var(--sc-band) 87%, transparent) calc(var(--mc-invloei) * .84), color-mix(in srgb, var(--sc-band) 97%, transparent) calc(var(--mc-invloei) * .94), var(--sc-band) var(--mc-invloei), /* Vanaf hier is het het verloop dat de stage droeg, uitgerekt over de hele sectie in plaats van over één venster. De onderkant eindigt op --color--gray-50 tegen de --color--white van de sectie eronder: acht niveaus, precies de naad die er al zat en die goed was. / var(--sc-kaart) calc(var(--mc-invloei) + 34vh), var(--sc-kaart) 64%, var(--sc-papier) 100%); } [data-mc-stage] { position: relative; min-height: 100vh; overflow: clip; / Loopt naar onderen geleidelijk donkerder in plaats van dat er een horizon staat. De stand zonder voorafgaande bureau-scene begint op --sc-kaart, dezelfde eindkleur als #uw-gegevens. Zo ontstaat geen kleurstap tussen de gegevensillustratie en de lokale machine. DIT GELDT ALLEEN ZONDER JAVASCRIPT. Is de scene gepind, dan pakt de regel bij [data-vp-scene] hieronder het over: het dekkende deel gaat naar #scene-machine::before en hier blijft alleen de tint die naar onderen donkerder maakt. Anders zou deze rechte bovenrand meeplakken met de sticky. / background: linear-gradient(180deg, var(--sc-kaart) 0%, var(--sc-kaart) 36%, var(--sc-papier) 100%); } [data-vp-scene] [data-mc-stage] { position: sticky; top: 0; height: 100vh; min-height: 0; z-index: 1; } [data-vp-scene] #scene-bureau + #scene-machine [data-mc-stage] { / Het vlak zit onder [data-vp-scene] op #scene-machine::before, want daar staat het stil in het document en kan het aan de bovenkant invloeien. Hier zou het meeplakken met de sticky en dus de hele scene lang vervagen. Zonder JS blijft het verloop hierboven staan, want dan is er geen overlap en heeft de sectie zelf een vlak nodig. WAT ER WEL BLIJFT: "naar onderen geleidelijk donkerder". Dat was de bedoeling van het oude verloop en die hoort bij het beeld, niet bij de naad. Het staat hier nu als een TINT met alfa in plaats van als een dekkend vlak: bovenaan de stage is de alfa nul, dus er is geen rand als de stage in beeld schuift, en onderaan komt hij uit op --color--gray-50, precies de kleur die ::before daar ook heeft. Gemeten zonder deze tint zat de onderkant van het beeld 10 op 255 lichter dan voorheen. / background: linear-gradient(180deg, transparent 0%, transparent 30%, var(--sc-papier) 100%); background: linear-gradient(180deg, color-mix(in srgb, var(--sc-papier) .4%, transparent) 0%, color-mix(in srgb, var(--sc-papier) 2%, transparent) 30%, color-mix(in srgb, var(--sc-papier) 14%, transparent) 52%, color-mix(in srgb, var(--sc-papier) 46%, transparent) 72%, color-mix(in srgb, var(--sc-papier) 82%, transparent) 88%, var(--sc-papier) 100%); } / Het grote warme lichtveld waar de machine in hangt. Dezelfde greep als de hero van de template, en op licht doet dit het werk dat de spot op donker deed: het oog gaat naar het apparaat. / .mc-spot { position: absolute; inset: 0; opacity: 1; pointer-events: none; / GEMETEN EN BIJGESTELD. Op .16 tilde dit veld het papier onder de tekstkolom op tot 242,223,209 en zakte --color--gray-900 daar naar 4,38:1, net onder de 4,5 voor kleine tekst. Op .10 en met het zwaartepunt op 74 procent, dus over het apparaat in plaats van over de tekst, blijft het papier onder de alinea papier. / background: radial-gradient(116% 96% at 74% 42%, rgba(255, 107, 53, .055), rgba(255, 140, 70, .022) 44%, rgba(255, 140, 70, 0) 74%); } / DE VLOERLIJN IS WEG, ELEMENT EN AL. Hier stond een vlak van 34vh dat vanaf 34vw begon en als horizon dienstdeed. Eén scheiding die diepte moet suggereren leest als een truc, en omdat het apparaat er bijna frontaal voor staat leek de lijn het doormidden te snijden in plaats van eronder door te lopen. Diepte komt hier van twee dingen die nooit een rand tonen: het verloop van [data-mc-stage] dat naar onderen geleidelijk donkerder wordt, en de zachte schaduw onder het apparaat (.mc-vloerglans hieronder). / [data-mc-toneel] { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 80px); padding: 96px clamp(24px, 5vw, 64px) 72px; flex-wrap: wrap; } / De kop is een echte

en erft de h2-regel van de template, inclusief de kopkleur --color--blue-950. Die stond hier om omdat het vlak donker was; nu het licht is, staat er weer gewoon de kleur van de template. / .mc-tekst { flex: 1 1 340px; max-width: 470px; position: relative; z-index: 2; } .mc-tekst h2 { color: var(--sc-navy); margin: 0 0 20px; opacity: 1; transform: none; } .mc-tekst h2 em { font-style: normal; color: var(--sc-accent); } .mc-tekst p { font-size: var(--sc-p-s); line-height: var(--sc-lh-l); margin: 0 0 28px; max-width: 44ch; color: var(--sc-body); opacity: 1; transform: none; } / Drie standen onder elkaar met een stip ervoor. / .mc-standen { display: flex; flex-direction: column; gap: 10px; max-width: 44ch; margin: 0; padding: 0; list-style: none; } .mc-standen li { display: flex; align-items: baseline; gap: 11px; font-size: var(--sc-p-xs); line-height: var(--sc-lh-l); font-weight: var(--sc-w-m); color: var(--sc-body); opacity: 1; transform: none; } .mc-standen i { width: 5px; height: 5px; border-radius: 50%; background: var(--sc-teal); flex: 0 0 auto; transform: translateY(-3px); } .mc-machine { / Eén plek voor de maat van het DGX-doek. Heeft de machine meer of minder ruimte nodig, dan is dit het enige getal dat mee moet; de zwevende labels en Pilo rekenen zich er zelf omheen. / --mc-dgx-h: min(300px, 34vh); flex: 1 1 340px; max-width: 620px; position: relative; height: min(52vh, 470px); display: flex; align-items: center; justify-content: center; transform: none; } / Diepte, middel 1: twee zachte lichtvlakken achter de machine, het beeld van .hero-image-shadow-01 en .hero-bg-circle-small uit de template. z-index 0, dus onder het doek van de machine (1) en onder Pilo. De dekking is omlaag van .30 naar .22: op zwart mocht dit vlak hard zijn, op papier tilt het de ondergrond op en dan zakt de tekst die erop staat (.mc-bijschrift) onder de contrastnorm. Gemeten, zie het rapport. / .mc-halo { left: 50%; top: 42%; z-index: 0; width: min(680px, 82%); height: min(460px, 66%); --sc-g: var(--sc-gloed); / Zie de warmtemeting bij .bur-sfeer. Was .22 en daarmee het felste vlak van de twee scenes; .14 houdt het licht om het apparaat en haalt de nadruk eraf. Het getal staat ook in frameMachine(). / opacity: .14; } / Was een warme glans die bij de vloerlijn hoorde. Nu die lijn weg is, is dit de enige plek waar het apparaat op staat: een zachte, brede schaduw eronder, in de inktkleur en niet in oranje, want een schaduw is donker en niet warm. Breder en platter dan de gloed die er stond, zodat hij als grond leest en niet als een tweede lichtvlak. / .mc-vloerglans { left: 50%; top: 74%; z-index: 0; width: min(620px, 88%); height: 92px; --sc-g: var(--sc-ink); opacity: .13; } / Contract met de machine: het lege element hieronder is het doek van vp/dgx.css en vp/dgx.js. Deze scene geeft alleen plaats en maat, en schrijft per frame --dgx-scrub (0 tot 1) en de klasse is-actief. / [data-dgx] { position: relative; z-index: 1; / 92 procent en niet 82: vp/dgx.js rekent --dgx-maat als min(breedte/1,02 , hoogte/0,60), dus de breedte van dit vak is op een tussenmaat de rem. Op 1024 kwam de machine daardoor op 350 uit terwijl er ruimte was voor 392. Boven 1360 is de hoogte de rem en verandert er niets. / width: min(560px, 92%); height: var(--mc-dgx-h); / Deze marge duwde het doek omhoog om onderin ruimte te houden voor Pilo. Pilo staat niet meer in deze scene, dus de marge is terug naar de ruimte die het bijschrift nodig heeft: dat staat op bottom clamp(94,12vh,108). / margin-bottom: 56px; --dgx-scrub: .15; } / HET BIJSCHRIFT STAAT NIET MEER IN BEELD. Besluit van de opdrachtgever, 29 augustus 2026: er komt geen zichtbare apparaatnaam meer onder de tekening. De naam moet wel blijven bestaan, zodat een schermlezer en een zoekmachine weten om welk apparaat het gaat. WAAROM DIT EN GEEN IN DE SVG. De tekening zit in [data-dgx] en dat element draagt aria-hidden="true", want het is decoratie. Alles daarbinnen is daarmee uit de toegankelijkheidsboom, dus een <title> of een aria-label DAAR levert niets op; dat is precies de val. Deze <span> staat er buiten en draagt zelf geen aria-hidden. Hem visueel wegnemen met de clip-methode van .sc-srt houdt hem in de boom en in de tekst van de pagina, terwijl display:none of visibility:hidden hem er juist uit zou gooien. Getoetst met een uitlezing van de toegankelijkheidsboom, zie het rapport. De markup is niet van dit bestand, vandaar dat de span blijft staan en hier alleen van vorm verandert. / .mc-bijschrift { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; left: auto; bottom: auto; transform: none; } / Regel onder de scene, uit content/beveiliging.md. / [data-mc-onder] { position: absolute; left: 0; right: 0; bottom: 4vh; z-index: 3; text-align: center; padding: 0 clamp(24px, 6vw, 80px); opacity: 1; font-size: var(--sc-p-t); line-height: var(--sc-lh-l); color: var(--sc-body); } / --- de zes stromen die naar de machine lopen ------------------------------ Zes woorden uit content/beveiliging.md, ## scene-machine, blok "Zwevende labels". WAT HIER EERST STOND EN WAAROM HET WEG IS Zes capsules met een stip erin, verspreid over het beeld. Drie dingen gingen daar mis. Ze hingen los in de ruimte zonder enige relatie tot het apparaat, ze waren alle zes even zwaar zodat er geen begin en geen einde in zat, en de capsulevorm belooft een klikvlak dat er niet is: op het gerenderde beeld lazen ze als knoppen die vergeten waren aan te sluiten. Het besluit van 29 augustus 2026 dat de pilvorm van de template hier mag blijven staan (BRIEF paragraaf 0, besluit 2) gaat over de template. Deze zes zijn onze eigen toevoeging in een scene die we zelf bouwen, dus daar geldt de huisregel gewoon: een label is TEKST. Vandaar dat er hier geen vlak, geen rand en geen radius meer omheen staat. WAT ER NU STAAT Elk woord is gewone tekst met een dunne gestippelde lijn die naar het apparaat loopt, en over die lijn beweegt een klein warm punt richting de machine. Daarmee vertelt het beeld wat er gebeurt: dit werk gaat DAARHEEN. Drie woorden staan links van het apparaat met de lijn naar rechts, drie rechts met de lijn naar links, op verschillende hoogtes, zodat het leest als stromen die van twee kanten binnenkomen. LEESVOLGORDE EN GEWICHT De volgorde is die van content/beveiliging.md en de opmaak laat hem zien, in drie trappen: Mail en Offertes staan vooraan in --color--gray-950 op semi-bold, Contracten en Facturen een trap lichter, Dossiers en Controles het lichtst in --color--gray-900. De lijnen volgen diezelfde trap in dekking. Bovendien fadet vp/scene.js ze een voor een in, in dezelfde volgorde, en lopen de punten met dezelfde stagger. Er is dus een begin (Mail, linksboven) en een eind (Controles, rechtsonder). BREEDTE. De lijnen hebben zijruimte nodig naast het apparaat, en die is er pas vanaf 1200px. Daaronder vallen de zes terug in de stroom als een leesbare rij woorden onder de scene, met een stip ervoor en ruime kolomafstand; dat is de vorm die de huisregel voorschrijft en hij houdt het tot 320 breed. vp/scene.js laat ze opkomen met style.translate en NIET met style.transform: op .mc-doc staat geen animatie meer, maar de punt op de lijn wel, en een animatie verslaat een inline stijl. Met translate blijven de twee gescheiden. / / DE LIJNEN LOPEN ACHTER HET APPARAAT LANGS. Ze stonden eerst op z-index 4, boven [data-mc-toneel] (2), en liepen dus over de machine heen; dan lijken ze erop geplakt in plaats van eromheen te lopen. Op 1 zit deze laag tussen de stage-achtergrond met de spot (z-index auto) en het toneel, en valt de machine er werkelijk overheen. Dat is precies wat het beeld diepte geeft: een lijn die achter een object verdwijnt vertelt dat het object ervoor staat. Waarom niet met een hogere z-index op de machine: die leeft in een eigen 3D-context en laat zich er niet zomaar tussen schuiven. De laag zakken werkt wel, want [data-mc-toneel] draagt zelf position:relative met z-index 2 en is daarmee de stapelcontext waar de machine in zit. Nagemeten op een gerenderd beeld en niet in de code: zie het rapport. / .mc-docs { position: absolute; inset: 0; z-index: 1; margin: 0; padding: 0; list-style: none; pointer-events: none; / De lijn is decoratie en draagt geen tekst, dus hier geldt geen contrasteis. Het accent op 34 procent leest als een spoor en niet als een streep die met de tekst concurreert. / --mc-spoor: rgba(165, 68, 26, .34); } .mc-doc { position: absolute; top: var(--y, 50%); display: flex; align-items: center; gap: 12px; font-size: var(--sc-p-xs); line-height: var(--sc-lh-m); letter-spacing: .01em; white-space: nowrap; opacity: 1; } / HORIZONTAAL VASTGEZET AAN HET APPARAAT, NIET AAN HET VENSTER De drie links worden op hun RECHTERrand geplaatst en de drie rechts op hun LINKERrand, dus daar waar de lijn eindigt. Anders zou een lang woord als Contracten het lijneinde verder opschuiven dan een kort woord als Mail, en dan waaieren de zes uit terwijl ze juist op één punt moeten uitkomen. De twee calc-regels volgen de zijkanten van de tekening. Het doek [data-dgx] is 560px breed vanaf 1280 en de tekening erin is min(286px, 21vw); gemeten op 1200, 1280, 1440, 1680 en 1920 ligt de rechterrand van de tekening op 53,5vw + 350px, met een afwijking onder de 15px over dat hele bereik. De linkerrand is dat min de breedte van de tekening. De lijnen komen daardoor op elke breedte binnen een paar tientallen pixels van het apparaat uit in plaats van bij 1920 los te raken. In de markup staat de <i> vóór de tekst; links draait die volgorde dus om. / [data-mc-doc="1"], [data-mc-doc="2"], [data-mc-doc="3"] { right: calc(46.5vw - 340px + min(286px, 21vw)); flex-direction: row-reverse; } [data-mc-doc="4"], [data-mc-doc="5"], [data-mc-doc="6"] { left: calc(53.5vw + 360px); flex-direction: row; } / De lijn. Een repeating-linear-gradient en geen border-style: dotted, want dan bepaalt de browser de puntafstand en die verschilt per engine. / .mc-doc i { flex: 0 0 auto; position: relative; width: var(--len); height: 1px; background-image: repeating-linear-gradient(to right, var(--mc-spoor) 0 2px, transparent 2px 8px); opacity: var(--sp, 1); } / Het punt dat over de lijn naar de machine loopt. Alleen transform en opacity, dus dit blijft bij de compositor. / .mc-doc i::after { content: ""; position: absolute; top: -2.5px; left: -2.5px; width: 6px; height: 6px; border-radius: 50%; background: var(--sc-accent); animation: none; animation-delay: var(--d, 0s); } [data-mc-stage].is-actief .mc-doc i::after { animation: mcStroom 2.1s var(--sc-ez) 1; animation-delay: var(--d, 0s); } / Rechts van het apparaat loopt de lijn de andere kant op, dus daar draait de punt om: hij begint bij het woord en eindigt bij de machine. / [data-mc-doc="4"] i::after, [data-mc-doc="5"] i::after, [data-mc-doc="6"] i::after { animation-direction: reverse; } @keyframes mcStroom { 0% { transform: translateX(0); opacity: 0; } 10%, 82% { opacity: 1; } 100% { transform: translateX(var(--len)); opacity: 0; } } / DRIE TRAPPEN OP GEWICHT EN MAAT, NIET OP KLEUR. De onderste trap stond eerst in --color--gray-900 en zakte daarmee op de warme ondergrond naar 4,40:1, net onder de norm voor kleine tekst: gemeten op 1920. Alle zes staan nu in --color--gray-950, dat op elke gemeten ondergrond ruim 9:1 haalt, en het verschil zit in gewicht en maat. Dat is bovendien zuiverder, want kleur is dan nergens het enige signaal. / #scene-machine [data-mc-doc="1"], #scene-machine [data-mc-doc="2"] { color: var(--sc-ink); font-weight: var(--sc-w-sb); font-size: var(--sc-p-xs); } #scene-machine [data-mc-doc="3"], #scene-machine [data-mc-doc="4"] { color: var(--sc-ink); font-weight: var(--sc-w-m); font-size: var(--sc-p-xs); } #scene-machine [data-mc-doc="5"], #scene-machine [data-mc-doc="6"] { color: var(--sc-ink); font-weight: var(--sc-w-m); font-size: var(--sc-p-t); } / Hoogte, lijnlengte, lijndekking en de vertraging van het punt. De zes hoogtes liggen in de band waar de tekening staat (gemeten y35 tot y55 procent van de stage over het hele bereik 1200 tot 1920), links en rechts een halve stap uit elkaar, zodat de zes lijnen als een waaier op het apparaat uitkomen in plaats van als een tralie. --len is een clamp en geen vast getal: op 1200 is er tussen .mc-tekst en de tekening 209px en op 1920 ruim 240, dus de lijn moet meeschalen. / / De lijn loopt door TOT ACHTER de tekening en niet tot ervoor: hij moet er zichtbaar onder verdwijnen. De basis is de afstand tot de rand van het apparaat plus 70px overlap. / .mc-doc { --len: calc(clamp(64px, 6vw, 140px) + 70px); } [data-mc-doc="1"] { --y: 41%; --sp: 1; --d: 0s; } / Mail / [data-mc-doc="2"] { --y: 46%; --sp: .84; --d: .7s; } / Offertes / [data-mc-doc="3"] { --y: 54%; --sp: .68; --d: 1.4s; } / Contracten / [data-mc-doc="4"] { --y: 40%; --sp: .84; --d: .35s; } / Facturen / [data-mc-doc="5"] { --y: 48%; --sp: .68; --d: 1.05s;} / Dossiers / [data-mc-doc="6"] { --y: 54%; --sp: .54; --d: 1.75s;} / Controles / / ========================================================================== 3. WILL-CHANGE, alleen zolang een scene in beeld is De IntersectionObserver in vp/scene.js zet en haalt .is-actief weg. Buiten beeld verdwijnt daarmee ook de laag die de compositor apart bewaart. ========================================================================== / [data-bur-stage].is-actief [data-bur-groep], [data-bur-stage].is-actief [data-bur-scherm], [data-bur-stage].is-actief [data-bur-achter], [data-bur-stage].is-actief [data-bur-midden], [data-bur-stage].is-actief [data-bur-voor], [data-mc-stage].is-actief .mc-machine { will-change: transform; } / ========================================================================== 4. BREEDTES. 767 en 991, de breekpunten van Webflow. ========================================================================== / / Telefoon. Hetzelfde getal dat vp/scene.js in zijn matchMedia gebruikt. DE TELEFOONBEHUIZING IS ERUIT, en dat is een keuze met een reden. Hier stond een nagebouwd toestel: een behuizing met een rand van 4,55 procent, een kin, een hoekstraal van 14 procent en een camera-eiland. Dat was het mobiele tegenhangertje van de monitor op desktop. Nu de monitor weg is, zou een toestel op mobiel de scene halverwege laten omslaan: op een breed scherm zweeft het dashboard vrij in de ruimte, op een smal scherm staat het in een apparaat. Dan vertelt dezelfde scene op de ene maat een ander verhaal dan op de andere, en het verhaal dat de opdrachtgever vroeg is het zwevende. Het dashboard zweeft daarom op ELKE maat, alleen kleiner en met minder eromheen. WAT ER OP EEN TELEFOON ANDERS IS 1. De eindschaal gaat van .42 naar .48. Het scherm was een kopie van het venster binnen een behuizing; zonder die rand is er ruimte over, en de tekst op het scherm staat op deze maat toch al op de grens van leesbaar. Op 375 rendert het paneel daarmee als 180 bij 390 in plaats van 157 bij 341. 2. De hoekstraal is 9 procent van de schermbreedte en niet 4,2. Een klein paneel met een grote radius leest als een object; met een kleine radius als een uitsnede. Op 375 is dat 16px op een paneel van 180 breed. 3. Er blijven DRIE kaarten van de zes over, één per diepte. Zes op 375 breed staat gelijk aan een rij die het paneel volledig afdekt; met drie blijft de diepte-ladder heel (maat, schaduw en occlusie) en blijft het scherm het onderwerp. Gemeten op 320, 375 en 767. 4. GEEN PERSPECTIEF, ongewijzigd. Het scherm toont een kopie van een venster van 375 breed op 48 procent, dus een wegdraaiende linkerhelft haalt daar nog eens 6 procent leesbaarheid af en dan gaat de belofte van de scene dicht. Het paneel staat hier recht in beeld, en de compositie blijft gecentreerd omdat er geen tweede kolom naast past. / @media (max-width: 767px) { #scene-bureau { --bur-eind: .48; --bur-y: 2vh; --bur-r: calc(var(--bur-eind) 9vw); --bur-hoogte: 205vh; --bur-x: 0; --bur-ry: 0; --bur-rx: 0; /* Het vertrek is hier de helft van de 8vh op de brede maat. Het scherm staat op deze maat met zijn bovenrand op 27vh en de tekst begint op 5vh; de krimp trekt de bovenrand nog wat terug, maar er blijft maar een goede 15vh tussen de twee en daar mag geen 8vh van af. / --bur-vertrek: -4; } #scene-machine { --mc-hoogte: 192vh; } / loop 80vh -> 92vh, +15,0 procent / .bur-sfeer { left: 50%; top: 20%; width: 150vw; height: 78vh; } .bur-lichtval { left: -30vw; top: -20vh; width: 110vw; height: 80vh; } [data-bur-halo] { width: 116vw; height: 68vh; top: 50%; } / De slagschaduw hoort bij het scherm en moet dus met --bur-y mee zakken, net als de drie kaarten hieronder. Stond hij op een kaal procent, dan kroop hij op een korter toestel achter het paneel: gemeten op 390 bij 664 lag het middelpunt op y505 terwijl de onderrand van het paneel na de zak op y518 kwam, dus de schaduw viel er grotendeels achter. / .bur-grondschaduw { top: calc(76% + var(--bur-y)); width: 86vw; height: 84px; --bur-grond-op: .13; } / DRIE KAARTEN IN PLAATS VAN ZES, één per diepte, zodat de ladder heel blijft. De drie die overblijven zijn de eerste van elke trap in de leesvolgorde: Overzicht (ver), Controles (midden) en Mail (dichtbij). De andere drie staan op display:none en worden door vp/scene.js overgeslagen, want die controleert de zichtbaarheid voordat hij schrijft. De maten gaan een trap terug: op 375 is een kaart van 44px hoog met 16px zetsel bijna een derde van de paneelbreedte. Gemeten op 320, 375 en 767. / [data-bur-zweef="2"], [data-bur-zweef="4"], [data-bur-zweef="6"] { display: none; } / Terugzetten. De query op 1399 hierboven zet Controles ook uit, want daar is hij de kaart die op de tekstkolom botst. Op een telefoon staat die kolom er niet naast maar erboven, en dan is Controles juist de kaart van de middelste trap die overblijft. Zonder deze regel valt de hele middelste diepte weg en is de ladder op mobiel twee treden in plaats van drie. / [data-bur-zweef="3"] { display: flex; } / HIER STAAT HET SCHERM RECHT IN BEELD, dus zijn randen zijn exact te berekenen en niet gemeten: --bur-eind is .48 en --bur-x, --bur-ry en --bur-rx staan op 0, dus het scherm loopt van 26vw tot 74vw en van 26vh + --bur-y tot 74vh + --bur-y. --bur-y telt mee omdat de query voor korte toestellen hem van 1vh naar 7vh zet. Zonder die term stond Overzicht op 320 bij 568 op y125 terwijl de bovenrand van het scherm op y187 lag: de kaart hing 60px boven het scherm in plaats van er half achter. Gemeten. / / DE VIER RANDEN VAN HET PANEEL, AFGELEID UIT --bur-eind. Hier stonden 26vw, 74vw, 26vh en 74vh als losse getallen. Die vier zijn niet onafhankelijk: ze zijn 50 min of plus --bur-eind maal 50, uitgerekend voor de eindschaal .48. Zet iemand --bur-eind ooit anders, dan schoof het paneel wel en bleven de kaarten staan; precies de fout die de desktopkant met --sc-dl en --sc-dr al een keer heeft opgelost. Nu volgen ze vanzelf. Op .48 komen deze vier op exact dezelfde 26 en 74 uit als eerst. / .bur-zwerm { --sc-dl: calc((50 - var(--bur-eind) 50) * 1vw); --sc-dr: calc((50 + var(--bur-eind) * 50) * 1vw); --sc-dt: calc((50 - var(--bur-eind) * 50) * 1vh + var(--bur-y)); --sc-db: calc((50 + var(--bur-eind) * 50) * 1vh + var(--bur-y)); } [data-bur-zweef="1"] { /* Overzicht, ver / / 34 en niet 62. De kaart is 95 breed en het woord begint 32px na de linkerrand, dus op 62 verdween de eerste lettergreep mee onder het scherm en las de kaart als "erzicht". Op 34 gaat alleen de icoontegel eronder. Gemeten op 320 en 375. / --kx: calc(var(--sc-dr) - 34px); --ky: calc(var(--sc-dt) - 12px); } [data-bur-zweef="3"] { / Controles, midden / / DE ONDERGRENS VAN 10px IS ER OM 320. De linkerrand van het paneel ligt daar op 83px, dus de kaart begon op x5 en stond vrijwel tegen de vensterrand; met de intrede-offset van --kdx -16 erbij liep hij er gemeten 2px overheen en knipte overflow:clip hem af. Boven 340 breed verandert deze max() niets. / --kx: max(10px, calc(var(--sc-dl) - 78px)); --ky: calc(50vh + var(--bur-y) - 60px); } [data-bur-zweef="5"] { / Mail, dichtbij / --kx: calc(var(--sc-dl) + 22px); --ky: calc(var(--sc-db) - 30px); } .bur-kaart--dichtbij { gap: 10px; padding: 7px 15px 7px 7px; border-radius: 10px; font-size: var(--sc-p-xs); --kdx: -26; --kdy: 32; } .bur-kaart--dichtbij .bur-kaart-ico { width: 32px; height: 32px; border-radius: 7px; } .bur-kaart--dichtbij .bur-kaart-ico svg { width: 16px; height: 16px; } .bur-kaart--mid { gap: 8px; padding: 6px 12px 6px 6px; border-radius: 8px; font-size: var(--sc-p-t); --kdx: -16; --kdy: 21; } .bur-kaart--mid .bur-kaart-ico { width: 26px; height: 26px; border-radius: 6px; } .bur-kaart--mid .bur-kaart-ico svg { width: 14px; height: 14px; } .bur-kaart--ver { gap: 7px; padding: 4px 10px 4px 4px; border-radius: 7px; font-size: var(--sc-p-t); --kdx: -8; --kdy: 13; } .bur-kaart--ver .bur-kaart-ico { width: 21px; height: 21px; border-radius: 5px; } .bur-kaart--ver .bur-kaart-ico svg { width: 12px; height: 12px; } / De strook bovenin het paneel was ruim omdat er een camera-eiland boven hing. Dat eiland is weg met de behuizing, dus de balk staat weer op de gewone padding van het scherm. / .bur-dash-top { padding: 16px 16px 12px; } .bur-stand { gap: 8px; } .bur-stand span { padding: 0; } / Het zetsel van het nagebouwde scherm gaat op een telefoon een trap terug. De reden dat het op desktop omhoog ging (het scherm staat daar op 34 procent) geldt hier minder, want --bur-eind is 0,42; en op 320x568 paste de inhoud er niet meer in: de onderste rij liep 25px onder het glas uit en het label NIEUW werd volledig afgeknipt. Gemeten. / / De onderpadding houdt op elk toestel de plek vrij waar de scroll-hint over het glas hangt. Zonder die ruimte raakte de knop op 375 bij 667 de onderrand van de lijst; gemeten 3px overlap, met 7vh is er 10px lucht. / .bur-dash-main { padding: 3vh 18px 7vh; gap: 14px; max-width: none; } .bur-dash-kop { letter-spacing: -1px; max-width: none; } .bur-lijst-kop { padding: 13px 16px 11px; } / DE TWEE REGELS DIE DE BELOFTE DRAGEN GAAN WEER EEN TRAP OMHOOG. Ze stonden hier op --sc-p-s terwijl de basisregel ze op --sc-p-l zet, en de toelichting erbij noemde als reden dat --bur-eind 0,42 was en de inhoud er op 320 bij 568 niet meer in paste. Die twee getallen kloppen niet meer: de eindschaal staat sinds de behuizing eruit ging op 0,48, en gemeten is er in het paneel op elke telefoonmaat ruimte over. De onderrand van de lijst ligt boven de onderrand van het glas met, gerekend in paneelmaat: 320x568 101px 375x667 112px 390x664 110px 360x740 122px 375x812 187px 414x896 231px Het verschil dat dit maakt in GERENDERDE pixels, want daar gaat het om: de kop van de lijst en de titel van elke rij gaan van 6,72 naar 8,64 op een smalle telefoon en naar 9,60 vanaf 480 breed. Dat is precies de greep die de desktopkant hierboven al toepast en daar beschrijft als "het verschil tussen een regel en een streepje". De bijregels (het onderschrift van een rij, de knop, de kop van de balk) blijven een trap lager staan: die dragen de belofte niet, en de ruimte is er niet voor allebei. / .bur-lijst-kop span { font-size: var(--sc-p-xs); } .bur-rij .onder { font-size: var(--sc-p-xs); margin-top: 3px; } .bur-knop { font-size: var(--sc-p-xs); padding: 9px 15px; } / De band gaat op een telefoon op één regel staan met het getal ervoor: de twee standen ernaast passen daar niet naast de kern zonder dat de zin "Wacht op uw akkoord" over drie regels breekt. Gemeten op 375: naast elkaar liep de band 214px hoog, onder elkaar 96px. "Vandaag voorbereid" valt weg. Het is de enige stand die niets over de staat van het werk zegt, en op een venster van 375 op 48 procent is de ruimte er niet voor. De twee die blijven zijn de belofte en het feit dat het lokaal draait; die twee dragen de scene. / .bur-akkoord { padding: 14px 16px; border-radius: 18px; gap: 12px; flex-wrap: nowrap; align-items: center; } .bur-akkoord-kern { gap: 12px; align-items: center; } .bur-akkoord-kern b { font-size: var(--sc-h2); letter-spacing: -1px; } .bur-akkoord-kern span { font-size: var(--sc-p-s); } .bur-akkoord-naast { padding-left: 12px; gap: 12px; } .bur-stat:not(.bur-stat--leeft) { display: none; } .bur-stat--leeft { font-size: var(--sc-p-xs); } .bur-stat--leeft i { width: 7px; height: 7px; } / De rij wrapt hier, want het label plus de knop passen op 375 niet naast een tekstkolom die twee regels nodig heeft. Zonder wrap kneep de kolom dicht tot een woord per regel en liep de knop er overheen; gemeten op 375 bij 812. Met een basis van 62 procent blijven icoon en tekst op de eerste regel en zakt de rechterhelft naar de tweede, tegen de rechterrand aan. Op 55 procent past de rij met alleen het label NIEUW nog wel op een regel en wrapt alleen de rij met het label plus de knop. / .bur-rij { padding: 13px 16px; gap: 11px; flex-wrap: wrap; row-gap: 10px; } .bur-rij-tekst { flex: 1 1 55%; } .bur-rij .rechts { margin-left: auto; gap: 10px; } .bur-rij-ico { width: 32px; height: 32px; border-radius: 10px; } .bur-rij-ico svg { width: 15px; height: 15px; } .bur-rij--wacht { background: linear-gradient(90deg, var(--sc-tint) 0%, var(--sc-tint) 30%, rgba(251, 249, 244, 0) 88%); } [data-bur-regel] { top: 5vh; max-width: none; } / Op een telefoon heeft deze scene de kop en het beeld TEGELIJK in beeld, anders dan een gewone sectiekop. Het h2-token staat op 479 al op 30px en op 767 op 34px; dat past. Alleen de marge onder de kop gaat eraf. / [data-bur-regel] p { margin-top: 10px; } #scene-bureau .vp-bur-actie { margin-top: 8px; } / De knop staat laag, zodat hij onder het zwevende paneel door blijft en de kaart Mail niet raakt. / [data-bur-hint] { bottom: 4vh; } .bur-hint-knop { padding: 9px 10px 9px 18px; } / De machinekolom staat op mobiel op COLUMN. Reden, gemeten op 375 breed in de vorige opzet: [data-mc-piloregel] stond hier op position:static en werd daardoor een tweede flex-item NAAST het doek. Doek (271px gewenst) plus alinea (186px) paste niet in 331px, dus kromp het doek tot 145px en werd de machine een duimnagel van ~75px. vp/dgx.js rekent --dgx-maat als min(breedte/1,02 , hoogte/0,60), dus de breedte was daar de rem, niet de hoogte. Op column krijgt het doek de volle breedte en telt --mc-dgx-h weer. De machine is het pronkstuk, dus de padding is hier smal en --mc-dgx-h ruim: het doek pakt zo bijna de volle vensterbreedte. / [data-mc-toneel] { padding: 64px 16px 0; gap: 20px; } .mc-tekst { flex: 1 1 100%; max-width: none; } .mc-tekst p { margin-bottom: 18px; } .mc-machine { flex: 1 1 100%; height: auto; flex-direction: column; align-items: center; justify-content: flex-start; --mc-dgx-h: min(260px, 30vh); } [data-dgx] { width: 100%; margin-bottom: 0; } .mc-halo { top: 34%; width: 96%; height: 230px; opacity: .13; } .mc-vloerglans { display: none; } } / EEN TOESTEL VAN MIDDELMATIGE HOOGTE HEEFT OOK EEN ZAK NODIG, ALLEEN EEN KLEINERE. --bur-y stond op 1vh tot 660 hoog en sprong daaronder ineens naar 7vh. Tussen die twee zit precies de maat die de meeste telefoons hebben, en daar liep het mis: de subkop eindigt op 5vh plus de hoogte van het zetsel, en de kaart Overzicht hangt aan de bovenrand van het paneel op 26vh plus --bur-y. Die twee naderen elkaar naarmate het venster korter wordt, want het zetsel is in px en de kaart in vh. Gemeten met de kaart op volle dekking: 390x664 5px OVERLAP van Overzicht over de laatste regel van de subkop 360x740 3px lucht 375x667 6px lucht 375x812 38px lucht Met 4vh zakt het hele zwevende geheel mee, want het paneel, de drie kaarten en de slagschaduw rekenen allemaal met --bur-y. Op 664 wordt dat 20px erbij en staat er 15px lucht; op 812 en hoger verandert er niets. De onderkant houdt ruimte zat: op 664 blijft er na de zak 67px tussen de onderrand van het paneel en de scroll-hint. Waarom een tweede breekpunt en geen clamp() op --bur-y: vp/scene.js leest deze waarde met getComputedStyle en parseFloat, en een custom property die niet met @property is aangemeld komt daar als letterlijke tekst uit. parseFloat van een clamp() geeft NaN, en de guard in meet() houdt dan stil de vórige waarde vast. Dan lopen CSS en JS uit elkaar zonder dat iets het meldt. --bur-y, --bur-eind, --bur-x, --bur-ry en --bur-rx moeten dus alle vijf een kaal getal blijven. / @media (max-width: 767px) and (max-height: 800px) { #scene-bureau { --bur-y: 5vh; } } / Een kort toestel, zoals de 320x568 van een oude iPhone SE. Het nagebouwde scherm is een kopie van het venster, dus wat daar niet in past valt onder het glas weg: gemeten stak de lijst er 43px onderuit en werd het label NIEUW volledig afgeknipt. Deze regels halen er 60px uit op de plekken waar het niet aan leesbaarheid kost. / @media (max-width: 767px) and (max-height: 660px) { / Op een kort toestel botst de tekstkolom bovenin op het toestel: gemeten op 320x568 liep de laatste regel van de subkop 13px achter het glas, en op 320x640 en 360x640 bleef er 6px over. Twee dingen lossen dat op zonder de tekst in te korten: de kop begint hoger en de hele groep zakt. --bur-y stuurt het scherm, en de slagschaduw en de kaarten volgen dezelfde --bur-x en dezelfde lagen, dus de compositie blijft bij elkaar. Na de ingreep: 26px lucht op 568 en 51 op 640. / #scene-bureau { --bur-y: 8vh; } [data-bur-regel] { top: 3vh; } .bur-dash-top { padding: 11px 14px 9px; } / De onderpadding houdt de plek vrij waar de scroll-hint over het toestel hangt. Zonder die ruimte staat de knop op 320 bij 568 precies over de onderste rij van de lijst; gemeten liep hij tot 35px over het label NIEUW heen. Het blok blijft gecentreerd in wat er overblijft, dus er wordt niets afgeknipt. / .bur-dash-main { padding: 2vh 14px 11vh; gap: 8px; } / De kop gaat op een kort toestel een trap terug. Op de h1-maat brak hij op 320 in drie regels van samen 114px, en dat is de ruimte die de lijst en de scroll-hint samen nodig hebben. Op de h2-maat blijft hij de grootste tekst op het scherm en past het geheel. / .bur-dash-kop { font-size: var(--sc-h2); letter-spacing: -.5px; } .bur-akkoord { padding: 10px 12px; border-radius: 14px; } .bur-akkoord-kern b { font-size: var(--sc-h3); } .bur-lijst-kop { padding: 10px 13px 9px; } .bur-rij { padding: 8px 13px; gap: 9px; row-gap: 8px; } .bur-rij-ico { width: 26px; height: 26px; border-radius: 8px; } .bur-rij-ico svg { width: 13px; height: 13px; } .bur-knop { padding: 7px 12px; } } / Op de smalste toestellen past de balk bovenin het nagebouwde scherm niet meer op één regel: gemeten op 320 liep VOORBEELDWEERGAVE plus LOKAAL tot x356 in een scherm van 320 en viel LOKAAL onder de rand van de telefoon. De twee standen krijgen daar hun eigen regel. 479 is het breekpunt van Webflow zelf. / @media (max-width: 479px) { .bur-dash-top { flex-wrap: wrap; } .bur-merk { flex: 0 0 auto; white-space: nowrap; } .bur-stand { flex: 1 0 100%; justify-content: flex-start; } } / Hier stond een regel die de zijbalk onder 1180px weghaalde. Die is overbodig geworden: de zijbalk staat nu op elke breedte uit, zie de toelichting bij .bur-dash. / / Tussen 768 en 991 past er geen tekstkolom naast het scherm, dus daar blijft de compositie gecentreerd en schuift het scherm niet naar rechts. De draaiing blijft wel staan, iets zachter, want de diepte hoort ook op een tablet. DE TEKST STOND HIER OP HET PANEEL. --bur-y was -3vh en dat getal komt van de tweekolomsstand vanaf 992, waar de tekst LINKS naast het scherm staat en er boven het scherm dus niets ligt. In deze band ligt de tekst er wél boven, en dan trekt een scherm dat 3vh omhoog staat de bovenrand pal onder de subkop. Gemeten met de tekst op volle dekking: 768x700 subkop y143-273, bovenrand paneel y206 -> 67px OVERLAP 768x740 subkop y146-276, bovenrand paneel y218 -> 58px OVERLAP 768x1024 subkop y166-296, bovenrand paneel y303 -> 7px lucht Drie ingrepen samen halen dat weg, en geen ervan kort de tekst in: 1. --bur-y van -3vh naar 2vh. Het hele zwevende geheel zakt 5vh, op 700 dus 35px. De vier kaarten hangen aan vaste procenten die met -3vh gemeten zijn, dus die tellen hetzelfde erbij; zie de --ky's hieronder. 2. De kopkolom begint op 4vh in plaats van 7vh. Dat is 21px op 700, en het mag: de band boven het paneel is hier de enige plek waar tekst staat. 3. De kolom wordt breder. Hij stond op --bur-eind maal 135vw, een verhouding die klopt als de tekst NAAST het scherm staat; boven het scherm is de breedte van het venster de maat en niet die van het paneel. Op 768 was de kolom 352 breed en liep de subkop over vier regels plus de slotregel. Op 600 zijn dat er drie, en dat scheelt nog eens 22px. / @media (min-width: 768px) and (max-width: 991px) { / --bur-vertrek: zelfde reden als op de telefoon. De tekst staat hier boven het scherm en loopt gemeten tot y273 op 768 bij 700, terwijl de bovenrand van het scherm op 35vh staat. / #scene-bureau { --bur-x: 0; --bur-ry: -12; --bur-rx: 6; --bur-y: 2vh; --bur-vertrek: -4; } [data-bur-regel] { top: 4vh; max-width: min(600px, 84vw); } / De vier procenten zijn de gemeten standen plus de 5vh waarmee het scherm hierboven zakt, zodat de occlusie tussen kaart en paneel dezelfde blijft: 42 wordt 47, 48 wordt 53, 60 wordt 65 en 62 wordt 67. / [data-bur-zweef="1"] { --ky: 47%; } [data-bur-zweef="4"] { --ky: 53%; } [data-bur-zweef="5"] { --ky: 65%; } [data-bur-zweef="6"] { --ky: 67%; } } @media (min-width: 768px) and (max-width: 991px) { / nowrap is hier verplicht. Het toneel staat op flex-wrap: wrap voor de rijstand; zet je de richting op column en past de inhoud niet in de hoogte, dan wrapt hij naar een TWEEDE KOLOM en schuift de machine het beeld uit. Gemeten op 768 bij 740: het doek stond op x518 tot x1078. / [data-mc-toneel] { flex-direction: column; flex-wrap: nowrap; justify-content: center; gap: 30px; } .mc-tekst { flex: 0 0 auto; max-width: 620px; } .mc-machine { flex: 0 0 auto; width: 100%; height: min(38vh, 340px); } } / --- de machinescene onder 1200px ------------------------------------------ Twee dingen die hier fout gingen in de vorige opzet en allebei uit dezelfde oorzaak komen: de stage is 100vh met overflow:clip en alles erin stond absoluut, dus wie geen plek meer had verdween of ging over een ander heen. 1. [data-mc-onder] stond onder 760px op display:none. Gemeten 0 bij 0 op 320 en 375: een goedgekeurde regel viel op een telefoon volledig weg. 2. Op 768 liepen de Pilo-regel (y699-743) en [data-mc-onder] (y736-780) 7px door elkaar heen. De stage wordt daarom een flexkolom. Het toneel krimpt mee en de zes woorden plus de onderregel krijgen elk hun eigen rij onderaan, dus ze kunnen per definitie niet meer overlappen. WAAROM 1199 EN NIET MEER 991. De lijnen naar het apparaat hebben zijruimte naast het doek nodig. Gemeten: op 1024 staat .mc-tekst tot x486 en begint het doek op x555, dus er is 69px over, en rechts van het doek net zoveel. Daar past geen woord met een lijn eraan. Vanaf 1200 is er aan beide kanten ruim 200px en klopt het beeld pas. Hieronder zijn het gewone woorden op een rij, met een stip ervoor en ruime kolomafstand: precies de vorm die de huisregel voorschrijft voor meerdere labels naast elkaar. Geen capsule, geen lijn. / @media (max-width: 1199px) { [data-mc-stage] { display: flex; flex-direction: column; } [data-mc-toneel] { height: auto; flex: 1 1 auto; min-height: 0; } .mc-docs { position: static; order: 2; display: flex; flex-wrap: wrap; justify-content: center; column-gap: clamp(16px, 3vw, 30px); row-gap: 9px; padding: 0 clamp(16px, 5vw, 64px); margin: 0 0 14px; } .mc-doc { position: static; left: auto; right: auto; top: auto; flex-direction: row; gap: 8px; } / De lijn wordt hier weer de stip die voor het woord staat. / .mc-doc i { width: 5px; height: 5px; border-radius: 50%; background-image: none; background-color: var(--sc-accent); opacity: 1; } .mc-doc i::after { display: none; } [data-mc-onder] { display: block; position: static; order: 3; bottom: auto; padding: 0 clamp(20px, 5vw, 64px) clamp(14px, 2.4vh, 26px); } } / De vaste chatprompt vult onder 480px de rechteronderhoek. Reserveer binnen deze scene ruimte, zodat de slotregel ook op 320px volledig leesbaar blijft. / @media (max-width: 479px) { #scene-machine [data-mc-onder] { padding-bottom: calc(128px + env(safe-area-inset-bottom)); } } / Laag venster onder 1200px. De stage is daar een flexkolom van 100vh met overflow: clip en het toneel staat op flex: 1 1 auto met min-height: 0, dus hij mag krimpen onder zijn inhoud. Op 375 bij 700 stak de inhoud er 68px uit en liep de Pilo-regel over de labelrij heen. Deze regels halen er 78px uit, verdeeld over de plekken waar het niet aan leesbaarheid kost. / @media (max-width: 1199px) and (max-height: 780px) { [data-mc-toneel] { padding-top: 40px; gap: 12px; } .mc-tekst p { margin-bottom: 12px; } .mc-standen { gap: 6px; } .mc-machine { --mc-dgx-h: min(220px, 26vh); } .mc-docs { margin-bottom: 6px; } } / Extreem lage CSS-viewport: dit ontstaat onder meer bij 400% browserzoom. Sticky 100vh plus overflow clip kan tekst dan onbereikbaar maken. Beide scenes vallen hier terug op gewone documentflow; betekenis blijft staan en de decoratieve 3D-lagen verdwijnen. Normale desktophoogtes veranderen niet. / @media (max-height: 560px) { #scene-bureau, #scene-machine { height: auto !important; margin-top: 0 !important; } #scene-bureau [data-bur-stage], #scene-machine [data-mc-stage] { position: relative !important; top: auto; height: auto !important; min-height: 0; overflow: visible; } #scene-bureau [data-bur-stage] { padding: 64px clamp(20px, 6vw, 64px); } [data-bur-kamer], [data-bur-vulling], [data-bur-grond], [data-bur-halo], [data-bur-groep], [data-bur-voor], [data-bur-hint] { display: none !important; } [data-bur-regel] { position: relative; inset: auto; max-width: 680px; margin: 0 auto; padding: 0; text-align: left; opacity: 1 !important; transform: none !important; } #scene-machine [data-mc-stage] { padding: 64px clamp(20px, 6vw, 64px); } .mc-spot, .mc-machine, .mc-docs { display: none !important; } [data-mc-toneel] { position: relative; display: block; height: auto; padding: 0; } .mc-tekst { max-width: 680px; margin: 0 auto; opacity: 1 !important; } .mc-tekst h2, .mc-tekst p, .mc-standen li { opacity: 1 !important; transform: none !important; } [data-mc-onder] { position: static; max-width: 680px; margin: 24px auto 0; padding: 0; text-align: left; opacity: 1 !important; } } / ========================================================================== 5. REDUCED MOTION vp/scene.js zet [data-vp-scene] dan niet, dus de secties blijven op height:auto en de stages blijven statisch. Wat hier nog moet: alle lopende CSS-animaties uitzetten. De eindstand hierboven is de basis en is op zichzelf leesbaar. ========================================================================== / @media (prefers-reduced-motion: reduce) { #scene-bureau , #scene-machine * { animation: none !important; transition: none !important; } [data-bur-hint] { display: none !important; } [data-bur-vulling] { opacity: 0 !important; } } /* Twee opschriften in dezelfde hint. Het eerste rustpunt laat het geheel zien, daarna klopt "bekijk" niet meer en wordt het "Verder". Wisselen doen we met een klasse, niet met textContent, zodat er per frame niets in de DOM wordt geschreven. */ [data-bur-hint] .verder { display: none; } [data-bur-hint].is-verder .eerst { display: none; } [data-bur-hint].is-verder .verder { display: inline; }