/* ═══════════════════════════════════════════════════════════════ A-Trip Studio. — de ruimte Eén scherm, geen paginascroll. Je blijft in de studio; alleen de informatie eromheen wisselt. Scrollen of de balk brengt je naar een ander onderdeel, met een filmovergang ertussen. ═══════════════════════════════════════════════════════════════ */ :root{ /* De doorschijnende randen en vlakken door de hele pagina zijn gemaakt van de tekstkleur en de achtergrondkleur. Als losse getallen zouden ze bij een ander thema niet meelopen; als rgb-variabele wel. */ --ink-rgb:245,239,198; /* Wijn is het standaardthema. Het staat hier in :root en niet als variant, zodat de eerste tekening al goed is: zou het via een `data-thema` moeten komen, dan zag je bij het openen een flits java voordat het script erbij was. Java is daardoor nu de variant. */ --java-rgb:51,15,18; --creme:#F5EFC6; --java:#330F12; --wijn:#4D0E12; --blauw:#D8C7A8; --aarde:#4D0E12; /* Het accent ook als losse getallen. Een glazen knop wil dezelfde kleur maar dan halfdoorzichtig, en dat kan alleen als je bij de rgb-waarden kunt. */ --blauw-rgb:216,199,168; --ink:var(--creme); --ink-2:rgba(var(--ink-rgb),.72); --ink-3:rgba(var(--ink-rgb),.45); --accent:var(--blauw); --op-accent:var(--java); /* glas: een vlak dat licht vangt — in de wijntint van het standaardthema */ --glas:rgba(77,14,18,.44); --glas-licht:rgba(255,255,255,.20); --glas-rand:rgba(255,255,255,.26); --schaduw:0 2px 8px rgba(10,6,5,.30), 0 22px 60px -22px rgba(10,6,5,.75); --serif:"Lora",Georgia,serif; --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif; --soepel:cubic-bezier(.32,.72,0,1); /* Hoe lang een paginawissel duurt. Wordt per overgang gezet op de wérkelijke lengte van de opname die speelt, zodat de tekst, de balk en de lichtstreep tegelijk met het beeld op hun eindbestemming aankomen. Er staat dus nergens nog een vast getal dat los van het beeld loopt. */ --wissel:3000ms; /* Wanneer de inhoud binnenkomt, en hoe lang erover. Tekst en glas gebruiken allebei exact deze twee waarden — anders staat er een lege glasplaat in beeld voordat de tekst er is. */ --in-wacht:calc(var(--wissel) * .52); --in-duur:calc(var(--wissel) * .4); --pad:clamp(18px,3.4vw,54px); --balk-h:clamp(66px,8vh,80px); /* opening */ /* het beginscherm staat het diepst gedempt; na de opening gaat het licht op, maar nooit helemaal — alle beelden blijven licht getemperd */ --dim:.52; --dim-kleur:#140C0A; --waas:0; --dk-rand:0px; --dk-rond:0px; --o1:0; --x1:-30px; --o3:0; --x3:-34px; --o4:0; --x4:-38px; /* de kop vliegt zelf van onder het logo naar zijn plek */ --kop-x:0px; --kop-y:0px; --kop-s:1; --hint:1; --balk-y:150%; --balk-kant:clamp(8px,2.4vw,14px); /* Hoe lang een glazen blok erover doet om te groeien én om terug te krimpen. Dat was eerder niet gelijk: hij sprong er in 0,14 s naartoe en deed er een halve seconde over om terug te komen. Dat leest als een schok gevolgd door een zucht. Beide kanten even lang en met dezelfde versnelling maakt er één beweging van. */ --groei:.34s; --logo-masker:url(img/logo.png) center/100% 100% no-repeat; } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%;overflow:hidden} /* geen paginascroll */ body{background:var(--java);color:var(--ink);font-family:var(--ui); font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased} img,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} :focus-visible{outline:2px solid var(--blauw);outline-offset:3px;border-radius:8px} h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.05;letter-spacing:-.02em} .oog{font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--ink-2)} /* ── het podium: de ruimte zelf ─────────────────────────── */ .podium{position:fixed;inset:0;overflow:hidden; clip-path:inset(var(--dk-rand) round var(--dk-rond))} /* Geen overvloeiing tussen de beelden: de video's zíjn de beweging, en een fade ertussen maakt er twee losse shots van. Direct wisselen laat het lopen als één doorgaande tour door de studio. */ .podium>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:center 46%;opacity:0} .podium>video.aan{opacity:1;z-index:2} /* Alleen op de grens tussen de opening en de rondgang. Dat is dezelfde kamer vanuit dezelfde hoek maar met ander licht — paars tegenover oranje — dus daar leest een korte overvloeiing als het licht dat verandert. Binnen de rondgang wisselt er hard, want daar sluit het beeld naadloos aan. */ /* De overvloeiing bij een sprong duurt precies zo lang als de wissel zelf, anders loopt het beeld niet gelijk met de tekst. */ /* ── de foto's voor een staand scherm ────────────────────── Ze liggen op dezelfde plek als de opnames en gedragen zich hetzelfde: alleen die met `aan` is zichtbaar. Op een laptop staan ze uit én hebben ze geen bron gekregen, dus daar bestaan ze niet eens. */ .podium>.foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:center;opacity:0;display:none; transition:opacity var(--wissel) var(--soepel)} /* De vertrekkende foto blijft dekkend staan tot de nieuwe er helemaal overheen ligt, en verdwijnt dan ineens — je ziet hem op dat moment toch niet meer. Vervaagden ze allebei tegelijk, dan was de som halverwege niet meer dekkend en zakte het beeld zichtbaar donker weg. Dezelfde streek als bij de opnames op een laptop. */ .podium>.foto:not(.aan){transition:opacity 0s linear var(--wissel)} .podium>video.zacht{transition:opacity var(--wissel) var(--soepel)} /* De vertrekkende laag blijft staan tot de nieuwe er helemaal overheen ligt. Vervaagden ze allebei tegelijk, dan was de som halverwege niet meer dekkend en zakte het beeld zichtbaar donker weg — precies de dip waar je eerder over viel. De nieuwe laag ligt er met z-index 2 bovenop, dus de oude mag gewoon blijven staan en aan het eind ineens verdwijnen: je ziet hem dan toch niet meer. */ .podium>video.zacht:not(.aan){transition:opacity 0s linear var(--wissel)} /* Deze twee lagen moeten boven álle videovakken liggen. Het actieve vak heeft z-index 2 om bovenop de andere te komen; zonder eigen z-index vielen de demping en het waas daar dus achter en deden ze niets. */ /* De laag over het beeld heeft de kleur van het thema. In een donker thema dempt hij naar zwart; in het lichte thema naar crème — anders staat er donkere tekst op een donkere foto en lees je er niets van. */ .dim{position:absolute;inset:0;z-index:3;background:var(--dim-kleur,#140C0A);opacity:var(--dim)} .waas{position:absolute;inset:0;z-index:4;opacity:var(--waas); background: /* extra donker aan de kant waar de tekst staat, anders valt hij weg tegen een fel stuk van het beeld */ linear-gradient(94deg,rgba(16,9,8,.80) 0%,rgba(16,9,8,.42) 34%,transparent 66%), linear-gradient(180deg,rgba(18,10,9,.55) 0%,rgba(18,10,9,.14) 28%, rgba(18,10,9,.52) 70%,rgba(18,10,9,.88) 100%)} /* ── glas ───────────────────────────────────────────────── */ .glas{position:relative;overflow:hidden;background:var(--glas); -webkit-backdrop-filter:blur(26px) saturate(1.6); backdrop-filter:blur(26px) saturate(1.6); border:1px solid var(--glas-rand);box-shadow:var(--schaduw)} /* het lichtrandje bovenlangs */ .glas::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit; background:linear-gradient(163deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.04) 34%, transparent 62%)} /* De witte streep die meebeweegt als je van onderdeel wisselt. Géén filter:blur() hier: die liep over 27 glasvlakken tegelijk, terwijl elk van die vlakken zijn eigen achtergrondvervaging al per beeldje moest doorrekenen tegen een spelende video. Dat maakte de wissel stroef. Het verloop is zelf al zacht genoeg — het scheelt niets in beeld en veel in werk. */ .glas::after{content:"";position:absolute;top:-40%;bottom:-40%;width:44%; pointer-events:none;opacity:0;transform:translateX(-160%) rotate(14deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.10) 26%, rgba(255,255,255,.34) 50%,rgba(255,255,255,.10) 74%,transparent)} body.wisselt .glas::after{animation:streep var(--wissel) var(--soepel)} @keyframes streep{ 0%{opacity:0;transform:translateX(-160%) rotate(14deg)} 22%{opacity:1} 100%{opacity:0;transform:translateX(320%) rotate(14deg)} } /* ── logo ───────────────────────────────────────────────── */ /* Géén will-change in ruststand. Dat promoveert het logo tot een eigen laag die op volle 290px wordt gerasterd en daarna 5x wordt verkleind — en juist dat verkleinen gaf de randlijnen in het kleine logo bovenin. Tijdens de vlucht staat het wél aan, want dan helpt het de soepelheid. */ .merk{position:fixed;top:50%;left:50%;z-index:60;width:min(42vw,290px);aspect-ratio:1; pointer-events:none} .merk.vliegt{will-change:transform} .merk.klikbaar{pointer-events:auto;cursor:pointer} /* de ademlaag zit tussen het logo en zijn onderdelen, zodat hij los kan bewegen van de vlucht die op .merk zelf staat */ .merk>.adem{position:absolute;inset:0;display:block;transform-origin:50% 50%} .adem>span{position:absolute;inset:0;display:block} /* geen rand: die gaf een zichtbaar lijntje rond het logo */ .plaat{border-radius:23%; background:linear-gradient(158deg,rgba(28,18,16,.64),rgba(28,18,16,.48) 46%,rgba(28,18,16,.58)); -webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.26), 0 24px 60px -20px rgba(10,6,5,.7)} /* masker precies op de doos: met 'contain' bleef er een randje over. De uitsnede in het bestand houdt zelf maar 6% marge, en dat botst met de afronding van 23% van de plaat — vandaar dat het merk hier krapper wordt gezet, zodat het met lucht binnen de plaat valt in plaats van tegen de hoeken. */ .adem>.letters{inset:12%} /* Het masker bestaat uit twee lagen: een zwart vlak, waar het logo van wordt afgetrokken. De rand van dat zwarte vlak is door kartelvervaging net niet helemaal dekkend, en dat verschil bleef als dun lijntje rondom het logo staan. Het vlak wordt daarom ruimer getekend dan het logo, zodat zijn eigen rand buiten beeld valt. Het logo zelf blijft op 100%. Op 110% kwam die streep bij het kleine logo bovenin terug: daar wordt het merk van 290 naar 76 pixels verkleind, en bij zo'n verkleining schuift de zachte rand van het vlak alsnog over de letters. Vandaar 124%. */ .letters{background:var(--blauw);filter:drop-shadow(0 1.5px 1px rgba(16,9,8,.3)); -webkit-mask-image:linear-gradient(#000,#000),url(img/logo.png); -webkit-mask-size:124% 124%,100% 100%;-webkit-mask-repeat:no-repeat; -webkit-mask-position:center;-webkit-mask-composite:xor; mask-image:linear-gradient(#000,#000),url(img/logo.png); mask-size:124% 124%,100% 100%;mask-repeat:no-repeat;mask-position:center; mask-composite:exclude} /* Zodra het merk klein bovenin staat gaan het hooglicht en de glans eraf. Op 290 pixels leest die rand als glas; op 76 pixels is hetzelfde hooglicht naar verhouding drie keer zo dik en zie je een witte lijn om het logo. Tijdens de vlucht hoort hij er wél te zijn, dus het hangt aan `geopend`. */ /* Op het beginscherm staat de plaat groot en moet het merk er duidelijk uit springen; dan mag hij wat voller zijn. Klein bovenin hoeft dat niet — daar zou een dichte plaat een blok worden. */ body:not(.geopend) .plaat{ background:linear-gradient(158deg,rgba(28,18,16,.78),rgba(28,18,16,.62) 46%,rgba(28,18,16,.72)); -webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5)} body.geopend .plaat{box-shadow:0 18px 40px -18px rgba(10,6,5,.6)} body.geopend .glans{opacity:0} .plaat,.glans{transition:box-shadow .5s var(--soepel),opacity .5s var(--soepel)} .glans{border-radius:23%;pointer-events:none;mix-blend-mode:screen;opacity:.34; background:linear-gradient(124deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.07) 13%, transparent 26%)} /* ── aankomst ─────────────────────────────────────────────── Wat je ziet zodra de pagina opent, vóór je scrolt: een glans die één keer over het logo trekt alsof het glas is, het logo dat rustig naar voren komt, en de studio die een klein stukje terugtrekt. Alles duurt ongeveer twee seconden en eindigt precies op de ruststand — zo is er niets dat blijft nazingen, en scrolt iemand er middenin doorheen, dan valt er niets terug. ─────────────────────────────────────────────────────────── */ .plaat{overflow:hidden} .plaat::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-46%;width:34%; pointer-events:none;opacity:0;transform:translateX(0) rotate(16deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 24%, rgba(255,255,255,.5) 50%,rgba(255,255,255,.14) 76%,transparent)} body.aankomst .plaat::after{animation:glansOverGlas 2s cubic-bezier(.35,0,.2,1) .18s both} body.aankomst .adem{animation:naarVoren 2.1s cubic-bezier(.22,.61,.36,1) both} body.aankomst .podium>video.aan{animation:terugTrekken 2.6s cubic-bezier(.19,.66,.32,1) both} @keyframes glansOverGlas{ 0%{opacity:0;transform:translateX(0) rotate(16deg)} 16%{opacity:1} 84%{opacity:1} 100%{opacity:0;transform:translateX(420%) rotate(16deg)} } @keyframes naarVoren{ from{transform:scale(.955)} to{transform:scale(1)} } /* De camera trekt zich terug: het beeld begint ingezoomd en opent zich naar zijn volle breedte, zodat je steeds meer van de studio ziet. Duidelijker gemaakt dan eerst (was 1,07). */ @keyframes terugTrekken{ from{transform:scale(1.13)} to{transform:scale(1)} } /* ── inhoud per onderdeel ───────────────────────────────── */ /* De verticale ruimte hing aan --pad, en die groeit mee met de bréédte van het venster. Op een breed maar laag scherm at dat de hoogte op, waardoor de onderste punten van een pagina buiten beeld vielen. Verticaal rekent nu met de hoogte; horizontaal blijft --pad. Scheelt zo'n 90px aan inhoud. */ .bladen{position:fixed;inset:0;z-index:20;display:grid;place-items:center; padding:clamp(72px,9vh,88px) var(--pad) calc(var(--balk-h) + clamp(26px,4vh,40px)); pointer-events:none} .blad{grid-area:1/1;max-height:calc(100% + var(--speling) * 2); overflow-y:auto;overflow-x:hidden; /* Speling binnen het schuifvak. Een pagina die kan schuiven knipt ook zijwaarts af: zet je `overflow-y` op `auto`, dan wordt `overflow-x` vanzelf ook `auto`. Het eerste en het laatste pakket raken de rand van het blad precies, dus zodra zo'n glazen blok bij aanwijzen opzwelt viel er een reepje weg — links bij het eerste, rechts bij het laatste. Deze speling vangt dat op; de negatieve marge geeft hem weer terug en de bredere bovengrens houdt de inhoud even breed als eerst, zodat er aan de opmaak van alle pagina's niets verandert. */ --speling:14px; /* De breedte telt de speling er weer bij op. Zonder dat rekensommetje eet de padding zich naar binnen zodra het scherm smaller is dan de bovengrens — en dan wordt de tekstkolom op een telefoon ineens 28px krapper dan op een laptop. */ width:calc(100% + var(--speling) * 2); padding:var(--speling); margin:calc(var(--speling) * -1); max-width:calc(1180px + var(--speling) * 2); overscroll-behavior:contain;scrollbar-width:thin;visibility:hidden; pointer-events:none; /* Het blad zelf vervaagt níét. Een element dat doorschijnend wordt maakt zijn eigen laag, en dan heeft alles met `backdrop-filter` eronder niets meer om te vervagen — dáárom kwamen de pakketten plat binnen en sprong het glas er pas aan het eind in. Alleen zichtbaarheid schakelt hier, met genoeg vertraging om de inhoud te laten vertrekken. */ transition:visibility 0s linear calc(var(--wissel) * .55)} .blad.actief{visibility:visible;pointer-events:auto;transition-delay:0s} /* De pagina die vertrekt blijft nog even zichtbaar — lang genoeg om zijn tekst te laten wegvervagen en zijn blokken te laten wegschuiven. Die vertraging staat in de overgang van .blad hierboven. */ .blad.weg{visibility:hidden} /* Past een pagina toch niet in beeld, dan mag je erin scrollen. Het verloop onderaan laat zien dát er nog iets onder zit — anders lijkt de lijst af en mis je de laatste punten zonder het te weten. Dit stond eerst als `mask-image` op .blad zelf, en dat was fout. Een masker maakt van dat element een eigen achtergrondlaag, en dan heeft alles met `backdrop-filter` eronder niets meer om te vervagen: de glazen kaarten verloren hun waas op het moment dat een pagina kon scrollen. Je zag het sterkst bij het opengeklapte pakket, waar de studio ineens scherp door de kaart heen kwam. Het verloop ligt nu als plakkende laag ín de pagina — boven de inhoud, maar geen voorouder van het glas. */ /* De twee verlooplagen zijn zélf nul hoog. Het verloop wordt door een pseudo-element getekend dat buiten hun doosje valt, en daarmee hebben ze in geen enkele opmaak invloed op de hoogte — ook niet in een flex-kolom, waar een negatieve marge anders uitpakt dan in een gewone stapel. Dat kostte me eerst 60 pixel extra hoogte op over ons, en daarna 115. Het blijven losse elementen en geen masker op het blad zelf: een masker maakt van het blad een eigen achtergrondlaag, en dan verliest het glas erin zijn vervaging. */ .oploop,.afloop{position:sticky;height:0;flex:none;margin:0;z-index:2; pointer-events:none;opacity:0;transition:opacity .35s} .oploop{top:calc(var(--speling) * -1)} .afloop{bottom:calc(var(--speling) * -1)} .oploop::after,.afloop::after{content:"";position:absolute;left:0;right:0} .oploop::after{top:0;height:56px; background:linear-gradient(to top,rgba(var(--java-rgb),0),rgba(var(--java-rgb),.92))} .afloop::after{bottom:0;height:60px; background:linear-gradient(to bottom,rgba(var(--java-rgb),0),rgba(var(--java-rgb),.88))} .blad.meer-onder .afloop{opacity:1} .blad.meer-boven .oploop{opacity:1} /* Elke pagina heeft een kant waar zijn inhoud vandaan komt, en langs diezelfde kant gaat hij er weer uit. Eén variabele per pagina regelt dat allebei. Wie wát doet, en waarom precies zo: · de omhulsels (.kop, .vier, .lijst, .drie) schuiven alleen — ze mogen niet vervagen, want een voorouder met dekking onder de 1 maakt een eigen laag en dán heeft het glas erbinnen niets meer om te vervagen. Dát was de reden dat de tegels plat binnenkwamen · de tekst en de glazen blokken zelf vervagen wél, op precies dezelfde klok. De dekking van een blok zit op het blok zélf, en daar blijft de achtergrondvervaging gewoon werken — het is glas vanaf het eerste beeld Zo komt alles tegelijk binnen én is glas ook echt glas terwijl het komt. */ /* De twee verlooplagen slaan we hier over. Ze zijn decoratie en horen niet mee te schuiven — en erger: ze plakken (`position:sticky`), en een verschuiving op zo'n laag telt gewoon mee in de breedte van het schuifvak. Bij over ons staan de onderdelen 40px naar rechts, dus stak de laag er 40px buiten en gaf dat op Windows een zijwaartse schuifbalk. */ .blad>*:not(.oploop):not(.afloop){transform:translate(var(--in-x,-34px),var(--in-y,0)); transition:transform calc(var(--wissel) * .62) var(--soepel)} .blad.actief>*:not(.oploop):not(.afloop){transform:none;transition-delay:var(--in-wacht)} .blad.weg>*:not(.oploop):not(.afloop){transition-delay:0s} /* De grootte moet hier mee in de lijst. Deze regel gebruikt de korte schrijfwijze `transition`, en die gooit alles weg wat er eerder stond — ook de overgang op `transform` die de blokken bij .pak en .rg meekregen. Daardoor sprong een glazen blok binnen een pagina hard op zijn grootte en net zo hard terug. */ .blad .kop,.blad .glas{opacity:0; transition:opacity var(--in-duur) var(--soepel), transform var(--groei) var(--soepel)} .blad.actief .kop,.blad.actief .glas{opacity:1; transition-delay:var(--in-wacht),0s} .blad.weg .kop,.blad.weg .glas{transition-delay:0s,0s} .kop{max-width:30ch} .kop h1,.kop h2{font-size:clamp(2rem,5.6vw,4.2rem);margin:12px 0 14px; text-shadow:0 2px 34px rgba(12,7,6,.75)} /* De naam op de startpagina mag het grootst zijn; de koppen van de andere pagina's staan een maat kleiner. Op een breed scherm werd zo'n kop anders drie regels van ruim 60px, en dat duwt de inhoud eronder uit beeld. */ .kop h2{font-size:clamp(1.6rem,3.4vw,2.7rem)} .kop p{color:var(--ink-2);max-width:44ch;font-size:1.02rem; text-shadow:0 1px 18px rgba(12,7,6,.85)} .kop .oog{text-shadow:0 1px 14px rgba(12,7,6,.9)} .knoppen{display:flex;gap:11px;flex-wrap:wrap;margin-top:22px} .kn{display:inline-flex;align-items:center;justify-content:center;gap:9px; min-height:48px;padding:13px 26px;border-radius:999px;font-weight:500;font-size:.94rem; transition:transform .4s var(--soepel),background .3s} .kn-vol{background:var(--blauw);color:var(--java)} .kn-vol:hover{transform:translateY(-2px);background:#B9CCE0} .kn-glas{color:var(--ink)} .kn-glas:hover{transform:translateY(-2px)} .kn.glas{border-radius:999px} /* pakketten: vier naast elkaar op glas */ .vier{display:grid;gap:clamp(9px,1.2vw,15px); grid-template-columns:repeat(4,1fr);margin-top:clamp(16px,2.6vw,30px)} .pak{border-radius:20px;padding:clamp(14px,1.5vw,20px);display:flex;flex-direction:column; transition:transform var(--groei) var(--soepel)} .pak .code{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blauw)} .pak h3{font-size:clamp(1.05rem,1.6vw,1.35rem);margin:8px 0 6px} .pak p{font-size:.8rem;color:var(--ink-2);line-height:1.45} .pak .prijs{font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,1.9rem);margin:14px 0 10px} .pak .kn{width:100%;min-height:42px;padding:10px 16px;font-size:.84rem;margin-top:auto} /* ── een opengeklapt pakket op een laptop ────────────────── Klap je een pakket open, dan groeit de kaart tot over de volle breedte en past de pagina niet meer in beeld. Je moest er dan binnen de pagina doorheen scrollen voordat je bij de prijs en de knop kwam, en dat hoort hier niet: op een laptop hoort één scroll je naar de vólgende pagina te brengen, niet naar de onderkant van deze. Ruimte winnen we vooral bij de kop. "Kies je sessie." doet zijn werk zolang je nog kiest; heb je eenmaal een pakket open, dan is die vraag beantwoord en mag hij weg. Hij vouwt dicht in dezelfde beweging als waarmee de kaart opengaat, en komt terug zodra je het pakket sluit. De rest is kleiner grutwerk: iets minder lucht rond de kaart en tussen de blokken erin. Op een telefoon geldt dit niet. Daar passen vier pakketten sowieso niet op één scherm en hoort scrollen binnen de pagina er gewoon bij. */ @media(min-width:641px){ /* De kop krijgt er één eigenschap bij om te bewegen: zijn hoogte. De doorzichtigheid houdt de vertraging van een paginawissel — die hoort bij het binnenkomen van de pagina en daar verandert niets aan — maar de hoogte beweegt meteen, in beide richtingen. Zonder dat onderscheid klapte de kop bij het sluiten van een pakket eerst hard terug in de opmaak en kwam de tekst er pas een seconde later achteraan. */ #blad-pakketten .kop{ transition:height .45s var(--soepel),opacity var(--in-duur) var(--soepel)} #blad-pakketten.actief .kop{transition-delay:0s,var(--in-wacht)} #blad-pakketten:has(.pak.open) .kop{height:0;overflow:hidden;pointer-events:none} #blad-pakketten:has(.pak.open) .vier{margin-top:clamp(10px,1.2vw,16px)} /* Een opengeklapt pakket blijft binnen het scherm. Loopt de inhoud erover, dan schuift díé binnen het blok — de pagina zelf beweegt niet meer. Dat is wat je verwacht als je je muis boven zo'n blok houdt: je wilt zien of er nog meer onder zit, niet naar de volgende pagina. Houd je de muis ernáást, dan blader je gewoon door de site. Dat onderscheid maakt de wielafhandeling al: die zoekt vanaf de plek van je muis omhoog naar iets dat kan schuiven. */ .pak.open{min-height:0;overflow:hidden} .pak.open .detail{min-height:0;overflow-y:auto;overscroll-behavior:contain; scrollbar-width:thin;padding-right:8px;margin-right:-8px} .pak.open{padding:clamp(12px,1.2vw,15px)} .pak.open .detail{margin-top:12px;padding-top:12px} .pak.open .detail .slot{margin-top:12px} .pak.open .vk{margin:14px 0 7px} /* de twee lijsten in de kaart dragen samen de meeste hoogte; iets minder lucht tussen de regels scheelt genoeg om ook op een korter venster helemaal te passen, zonder dat het opeengepakt gaat lezen */ .pak.open .mee li{padding:3px 0} .pak.open .bevat li{padding:5px 0} } @media(max-width:980px){.vier{grid-template-columns:repeat(2,1fr)}} /* Eén kolom op een telefoon — maar géén eigen schuifvak meer. Het raster had `max-height:46vh;overflow:auto`, en dan zitten er twee schuifvakken in elkaar: de pagina én de lijst erin. Welke van de twee je te pakken kreeg, hing af van waar je vinger toevallig lag; lag hij ernaast, dan sprong je meteen door naar de volgende pagina in plaats van de pakketten langs te gaan. Nu schuift alleen de pagina, en dat is voorspelbaar: eerst de pakketten langs, en pas daarna brengt een volgende veeg je verder. */ @media(max-width:560px){.vier{grid-template-columns:1fr}} /* werk: een lijst, geen losse beelden */ .lijst{display:grid;gap:8px;margin-top:clamp(14px,2.2vw,24px);max-width:760px} /* Op een breed maar laag venster is er horizontaal ruimte zat en verticaal niet. De lijst gaat dan in twee kolommen in plaats van de onderste punten uit beeld te duwen. */ @media(min-width:900px) and (max-height:780px){ .lijst{grid-template-columns:1fr 1fr;max-width:1040px;gap:8px 12px} /* Vijf blokken in twee kolommen laat het laatste alleen in de linkerkolom achter, met een gat ernaast. Over de volle breedte staat het rustiger, en omdat de tekst dan op één regel past scheelt het ook hoogte — genoeg om op een laag venster niet meer achter de balk te verdwijnen. */ .lijst .rg:last-child{grid-column:1/-1} /* Op een laag venster telt elke pixel: met de gewone lucht liep het laatste blok achter de balk. Iets minder ruimte rondom en tussen de blokken is genoeg, en op deze hoogte valt dat niet op. */ .lijst{margin-top:clamp(10px,1.4vw,16px);gap:6px 12px} .lijst .rg{padding:12px 16px} } .rg{border-radius:16px;padding:14px 18px;display:flex;align-items:baseline;gap:16px; transition:transform var(--groei) var(--soepel)} /* zie de regel bij .pak verderop: alle glazen blokken groeien symmetrisch */ .rg .nr{font-family:var(--serif);font-size:.8rem;color:var(--blauw);flex:none} .rg b{display:block;font-size:1.02rem;font-weight:600} .rg span{display:block;font-size:.84rem;color:var(--ink-2)} /* geloof: drie panelen */ .drie{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,16px); margin-top:clamp(16px,2.4vw,28px)} .pan{border-radius:20px;padding:clamp(16px,2vw,26px)} .pan .nr{font-family:var(--serif);font-size:2rem;color:var(--blauw);line-height:1} .pan h3{font-size:1.15rem;margin:10px 0 8px} .pan p{font-size:.85rem;color:var(--ink-2)} @media(max-width:820px){.drie{grid-template-columns:1fr}} /* over: tekst plus kenmerken */ .chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px} .chips span{font-size:.72rem;padding:8px 13px;border-radius:999px;color:var(--ink-2)} /* contact */ .contact{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,16px); margin-top:clamp(16px,2.4vw,28px)} .contact a{border-radius:20px;padding:clamp(16px,2vw,24px);display:block} .contact b{display:block;font-size:1rem;margin-bottom:3px} .contact span{font-size:.82rem;color:var(--ink-2)} @media(max-width:820px){.contact{grid-template-columns:1fr}} /* ── de balk ────────────────────────────────────────────── */ .balk{position:fixed;left:50%;bottom:clamp(12px,2vh,20px);z-index:70; transform:translateX(-50%) translateY(var(--balk-y)); display:flex;align-items:center;gap:5px;padding:9px;border-radius:26px; overflow:visible} /* anders knipt hij de tooltip af */ /* De balk laat zijn randen bewust vrij, anders knipt hij de tooltip af. Maar daarmee laat hij ook zijn eigen glans los: die hoort binnen de afronding te blijven en niet als een rechthoek om de balk heen te liggen. Dus geen van beide glaslagen hier — ze verhuizen naar `.veeg`, en die knipt zichzelf wél af op precies dezelfde afronding. */ .balk::before,.balk::after{display:none} .veeg{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none} .veeg::before{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(163deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.04) 34%, transparent 62%)} .veeg::after{content:"";position:absolute;top:-40%;bottom:-40%;width:44%;opacity:0; transform:translateX(-160%) rotate(14deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.10) 26%, rgba(255,255,255,.34) 50%,rgba(255,255,255,.10) 74%,transparent)} body.wisselt .veeg::after{animation:streep var(--wissel) var(--soepel)} .bk{position:relative;display:grid;place-items:center;width:56px;height:56px;flex:none; border-radius:18px;color:var(--ink); transition:background .3s,transform .4s var(--soepel),color .3s} .bk:hover{background:rgba(var(--ink-rgb),.12);transform:translateY(-3px)} .bk[aria-current="true"]{background:var(--blauw);color:var(--java)} .bk svg{width:24px;height:24px} .balk .streep{width:1px;height:30px;background:rgba(var(--ink-rgb),.2);flex:none;margin-inline:4px} .tip{position:absolute;bottom:calc(100% + 13px);left:50%;transform:translateX(-50%) translateY(7px) scale(.94); background:var(--creme);color:var(--java);font-size:.74rem;font-weight:600; padding:7px 12px;border-radius:11px;white-space:nowrap;pointer-events:none;opacity:0; transition:opacity .22s,transform .3s var(--soepel)} .tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%); border:6px solid transparent;border-top-color:var(--creme)} .bk:hover .tip,.bk:focus-visible .tip{opacity:1;transform:translateX(-50%) translateY(0) scale(1)} @media(hover:none){.tip{display:none}} /* Met het mandje en het account erbij past de balk op een telefoon niet meer op vaste maten: hij liep 19px aan weerszijden buiten beeld. Vandaar meeschalend, met een bodem zodat een knop aantikbaar blijft. */ @media(max-width:820px){ .bk.breed{display:none} .bk{width:clamp(40px,12vw,50px);height:clamp(40px,12vw,50px);border-radius:15px} .bk svg{width:22px;height:22px} .balk{gap:clamp(2px,.8vw,5px);padding:clamp(6px,1.6vw,9px)} .balk .streep{margin-inline:2px} } /* Onder de 400px raakt de balk de schermranden. Dan gaat 'Ons werk' er ook uit; die staat in het account-venster nog gewoon in de navigator. */ @media(max-width:400px){.bk.krap-weg{display:none}} /* ── opening ────────────────────────────────────────────── */ .hint{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:65; opacity:var(--hint);color:rgba(var(--ink-rgb),.85);font-size:.62rem;letter-spacing:.26em; text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:9px; pointer-events:none} .hint i{width:1px;height:24px;background:currentColor;animation:zak 2.2s ease-in-out infinite} @keyframes zak{0%,100%{transform:scaleY(.35);opacity:.4}50%{transform:scaleY(1);opacity:1}} /* Tijdens de opening is het startblad al zichtbaar, maar je ziet alleen de kop: de rest staat op opacity 0 via --o1/--o3/--o4. Zo hoeft er aan het eind niets te verschijnen of over te nemen. Aanklikken kan pas als de opening klaar is. */ body:not(.geopend) .blad{pointer-events:none} /* Tijdens de opening reist de kop buiten het blad — onder het logo. Een blad is een scrollvak en knipt alles buiten zijn kader af, dus zolang de opening loopt mag het niet clippen: geen scrollkader en geen verloopmasker. */ body:not(.geopend) .blad{overflow:visible} body:not(.geopend) .blad.meer-onder{-webkit-mask-image:none;mask-image:none} /* even zonder verschuiving meten — ook de kop zelf, anders lees je de stand van de animatie af in plaats van de rustplek */ .blad.meten,.blad.meten h1{transform:none!important;transition:none!important} /* het startblad schuift niet omhoog bij de eerste keer: de naam staat al op zijn plek, en dan zou de kop er onderlangs vandaan komen */ .blad.zonder-schuif:not(.weg){transform:none} /* In één keer neerzetten, zonder vervaging. Ook de kinderen: hun opacity en verschuiving worden tijdens de opening per beeldje door pasToe() gezet, en een CSS-overgang zou daar bij elke stap overheen willen animeren — dat sleept. Na de opening gaat deze klasse eraf en gelden de overgangen weer voor het gewone wisselen tussen pagina's. */ .blad.meteen:not(.weg),.blad.meteen:not(.weg)>*{transition:none} /* De naam blijft op één regel — uitgespeld, niet onder elkaar. De kolom van de startpagina mag daarvoor breder zijn dan de andere; de tekst eronder blijft wel smal, want die leest beter in een korte regel. */ #blad-start .kop{max-width:min(56ch,100%)} #blad-start .kop p{max-width:44ch} #blad-start h1{white-space:nowrap;font-size:clamp(1.7rem,7.2vw,3.9rem)} /* de openingstekst hoort bij het eerste blad en komt uit vier richtingen */ body:not(.geopend) #blad-start .oog{opacity:var(--o1);transform:translateX(var(--x1))} /* De kop vliegt zélf van onder het logo naar zijn plek — er is geen kopie meer die het onderweg overneemt. Hij houdt permanent een transform, ook stil op zijn eindplek (identiteit), en permanent will-change. Wisselen tussen wél en géén transform laat de browser de letters anders rasteren, en dát verspringen zag je als flikkering. Nu verandert er op het eindpunt niets meer. */ #blad-start h1{ transform:translate(var(--kop-x),var(--kop-y)) scale(var(--kop-s)); transform-origin:left top;will-change:transform;backface-visibility:hidden} /* de bovenkop is óók een

in .kop en werd daardoor door deze regel overruled — vandaar :not(.oog), anders krijgt hij de verkeerde vertraging */ body:not(.geopend) #blad-start .kop p:not(.oog){opacity:var(--o3);transform:translateX(var(--x3))} body:not(.geopend) #blad-start .knoppen{opacity:var(--o4);transform:translateX(var(--x4))} /* Zolang de opening loopt zetten die drie regels de tekst op zijn plek. Daarna moeten ze loslaten, anders houden ze de tekst op volle dekking vast en verdwijnt de startpagina met een harde snee in plaats van een fade. */ /* Alles schuift van links binnen en vervaagt mee, kort na elkaar van boven naar beneden. Dat wordt volledig door pasToe() gedaan, meebewegend met de opening — zie de vensters .34–.74, .52–.94 en .60–1 daar. Hier stond eerder een tweede versie van diezelfde binnenkomst, met `body.geopend` en CSS-overgangen. Sinds het startblad vanaf het begin zichtbaar is, speelden ze allebei: de tekst schoof mee tijdens de opening, werd daarna teruggezet en kwam nóg een keer binnen. Vandaar dat die tweede hier weg is. Zet hem niet terug — één binnenkomst is genoeg, en zo blijft de tekst na aankomst gewoon staan. */ /* ── pakket dat opengaat ────────────────────────────────── */ /* Deze regel stond de gedeelde animatie in de weg: `.vier` en `.blad>*` zijn even zwaar, en omdat deze later staat won hij — waarna het raster zonder overgang meteen op volle dekking sprong en dus vóór de tekst in beeld stond. De gedeelde overgangen staan er nu bij. */ .vier{transition:gap .5s var(--soepel), transform calc(var(--wissel) * .62) var(--soepel)} /* De andere pakketten werden alleen doorzichtig gemaakt, maar hielden hun ruimte in het raster. Daardoor stond er onder een opengeklapt pakket een gat van honderden pixels en viel "Boek dit pakket" buiten beeld. Ze klappen nu ook echt dicht. */ .vier.uit .pak:not(.open){opacity:0;transform:scale(.94);pointer-events:none; height:0;min-height:0;padding-top:0;padding-bottom:0;border-top-width:0; border-bottom-width:0;overflow:hidden} .pak{position:relative; transition:transform .5s var(--soepel),opacity .35s var(--soepel), height .45s var(--soepel),padding .45s var(--soepel)} /* Terug naar alle pakketten. Zonder dit stond het pakket dat je net las al op zijn plek terwijl de andere drie nog uit hun nulhoogte omhoog kropen: de één was er meteen, de rest kwam er achteraan. Nu zetten ze zich eerst allemaal ineens goed — de overgang staat uit — en komen ze daarna samen binnen, precies zoals ze dat doen als je voor het eerst op de site komt. Vandaar ook dezelfde richting: `--in-x` en `--in-y` zijn die van de pagina zelf. */ @keyframes blokterug{ from{opacity:0;transform:translate(var(--in-x,-34px),var(--in-y,0))} to{opacity:1;transform:none} } .vier.terugkomst .pak{transition:none; animation:blokterug .52s var(--soepel) both} @media(prefers-reduced-motion:reduce){.vier.terugkomst .pak{animation:none}} .pak-kop{display:flex;flex-direction:column;align-items:flex-start;width:100%;text-align:left; gap:0;padding:0} .pak .vlag{position:absolute;top:12px;right:12px;font-size:.56rem;font-weight:700; letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;border-radius:999px; background:var(--blauw);color:var(--java)} .pak .kort{font-size:.8rem;color:var(--ink-2);margin-top:2px} .pak.open{grid-column:1/-1;cursor:default} /* Opengeklapt is de kaart schermbreed, dus mag de kop op één regel staan in plaats van vier onder elkaar. Scheelt bijna honderd pixels hoogte, en dat is precies wat de knop onderin binnen beeld houdt. */ .pak.open .pak-kop{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:4px 14px} .pak.open .pak-kop h3,.pak.open .pak-kop .kort{margin:0} /* De prijs staat opengeklapt al groot boven de knop; in de kop zou hij niet alleen dubbel staan maar ook onder de vlag "meest gekozen" schuiven. */ .pak.open .pak-kop .prijs{display:none} .pak .detail{display:none} .pak.open .detail{display:block;margin-top:16px;border-top:1px solid rgba(var(--ink-rgb),.16); padding-top:16px} .pak.open .pak-kop{cursor:default} .detail-raster{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(16px,3vw,40px); align-items:start} @media(max-width:820px){.detail-raster{grid-template-columns:1fr}} .bevat{list-style:none} .bevat li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:.88rem; color:var(--ink-2)} .bevat li svg{width:13px;height:13px;flex:none;margin-top:5px;color:var(--blauw)} .detail .slot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px} .detail .totaal{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.4rem);line-height:1} .terug{font-size:.82rem;color:var(--ink-2);display:inline-flex;align-items:center;gap:7px; min-height:44px} .terug:hover{color:var(--ink)} /* zelf samenstellen */ .bouw{display:grid;gap:9px} .bouwrij{display:flex;align-items:center;gap:13px;padding:11px 14px;border-radius:14px; border:1px solid rgba(var(--ink-rgb),.16)} .bouwrij .om{flex:1;min-width:0} .bouwrij b{display:block;font-size:.92rem} .bouwrij small{font-size:.78rem;color:var(--ink-2)} .stap{display:flex;align-items:center;gap:4px;flex:none} .stap button{width:34px;height:34px;border-radius:11px;display:grid;place-items:center; border:1px solid rgba(var(--ink-rgb),.2);font-size:1.1rem;line-height:1; transition:background .25s} .stap button:hover{background:rgba(var(--ink-rgb),.12)} .stap span{min-width:30px;text-align:center;font-weight:600} .vink{width:34px;height:34px;flex:none;border-radius:11px;border:1px solid rgba(var(--ink-rgb),.24); display:grid;place-items:center;transition:background .25s,border-color .25s} .vink[aria-pressed="true"]{background:var(--blauw);border-color:var(--blauw);color:var(--java)} .vink svg{width:16px;height:16px;opacity:0;transition:opacity .2s} .vink[aria-pressed="true"] svg{opacity:1} /* De schuif voor onze inbreng: drie standen, standaard de middelste, zodat de klant hem zélf omlaag moet zetten in plaats van omhoog. Bij de hoogste stand wordt de knop wijnrood — dan nemen wij het over, en dat mag je zien. */ /* Het studio-uur en de schuif in één kaartje. De schuif schuift eronder open zodra er een uur geboekt wordt — vandaar de 0fr→1fr, want op een vaste max-height moet je een hoogte gokken die bij elke schermbreedte anders is. */ .bouwrij.kaartje{flex-direction:column;align-items:stretch;gap:0} .kaartje > .rij{display:flex;align-items:center;gap:13px} .kaartje > .onder{display:grid;grid-template-rows:0fr;opacity:0; margin-top:0;padding-top:0;border-top:1px solid transparent; transition:grid-template-rows .45s var(--soepel),opacity .3s, margin-top .45s var(--soepel),padding-top .45s var(--soepel), border-top-color .45s} .kaartje > .onder > .onder-in{min-height:0;overflow:hidden;display:grid;gap:11px} .kaartje.open > .onder{grid-template-rows:1fr;opacity:1;margin-top:12px;padding-top:13px; border-top-color:rgba(var(--ink-rgb),.16)} .schuif{position:relative;display:grid;grid-template-columns:repeat(3,1fr); padding:4px;border-radius:15px;background:rgba(var(--ink-rgb),.07); border:1px solid rgba(var(--ink-rgb),.16)} .schuif .knop{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/3); border-radius:12px;background:var(--blauw); transition:transform .42s var(--soepel),background .42s var(--soepel)} .schuif[data-stand="40"] .knop{transform:translateX(100%)} .schuif[data-stand="80"] .knop{transform:translateX(200%);background:var(--wijn)} .schuif button{position:relative;z-index:1;padding:9px 6px;border-radius:12px; display:grid;gap:2px;justify-items:center;line-height:1.15; transition:color .3s} .schuif button > span{font-size:.84rem;font-weight:600} .schuif button > small{font-size:.72rem;color:var(--ink-2);transition:color .3s} .schuif button[aria-checked="true"]{color:var(--java)} .schuif button[aria-checked="true"] > small{color:rgba(var(--java-rgb),.72)} .schuif[data-stand="80"] button[aria-checked="true"]{color:var(--creme)} .schuif[data-stand="80"] button[aria-checked="true"] > small{color:rgba(var(--ink-rgb),.74)} .hintje{margin-top:14px;font-size:.78rem;color:var(--ink-2)} .hintje[hidden]{display:none} .kn.uit{opacity:.4;pointer-events:none} /* De cookiemelding. Linksonder, zodat hij de balk in het midden vrij laat, en onder de sluier (z-index 80) zodat een side pagina hem netjes bedekt. Beide knoppen hebben met opzet hetzelfde gewicht: weigeren moet even makkelijk zijn als accepteren, anders is de toestemming niets waard. */ .koekjes{position:fixed;left:clamp(12px,3vw,26px);bottom:clamp(12px,2vh,20px);z-index:75; width:min(370px,calc(100vw - 24px));padding:18px 20px 16px;border-radius:22px; opacity:0;visibility:hidden;transform:translateY(14px) scale(.98); transition:opacity .5s var(--soepel),transform .6s var(--soepel),visibility .5s} body.koekjes-open .koekjes{opacity:1;visibility:visible;transform:none} .koekjes .kt{margin-top:7px;font-size:.86rem;line-height:1.5;color:var(--ink-2)} .koekjes .meer{margin-top:6px} .koekjes .meer li{font-size:.8rem} .koekjes .meer b{color:var(--ink)} .koekjesknoppen{display:flex;gap:8px;margin-top:14px} .koekjesknoppen .kn{flex:1;min-height:42px;padding:11px 14px;font-size:.84rem} .koekjes .tekstknop{margin-top:11px;font-size:.78rem} @media(max-width:560px){ .koekjes{left:12px;right:12px;width:auto;bottom:calc(var(--balk-h) + 24px)} .koekjesknoppen{flex-direction:column} } /* ── vensters die van onderen openslaan ─────────────────── */ .sluier{position:fixed;inset:0;z-index:80;background:rgba(12,7,6,.46); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s} body.venster-open .sluier{opacity:1;visibility:visible} .venster{position:fixed;left:50%;bottom:0;z-index:90; width:min(720px,calc(100vw - 16px));max-height:min(86svh,760px); transform:translateX(-50%) translateY(101%);visibility:hidden; overflow-y:auto;overscroll-behavior:contain; padding:16px clamp(18px,3vw,28px) clamp(26px,4vh,38px); border-radius:28px 28px 0 0;border-bottom:0; transition:transform .6s var(--soepel),visibility .6s} body.account-open #vensterAccount,body.mandje-open #vensterMandje, body.plannen-open #vensterPlannen,body.inloggen-open #vensterInloggen, body.apparaat-open #vensterApparaat{ transform:translateX(-50%) translateY(0);visibility:visible} /* Een venster kan schuiven — het account is negenhonderd pixel lang en er is maar zeshonderd zichtbaar. Dat maakt het een schuifvak, en in een schuifvak rekent `inset:0` niet tegen wat je ziet maar tegen de hele rol. Het lichtrandje was daardoor anderhalf keer zo hoog als de plaat zelf en de streep bijna twee keer, en allebei schoven ze mee naar boven weg. Met `fixed` blijven ze op de zichtbare plaat liggen: het venster staat altijd verschoven (`translateX(-50%)`) en is daarmee zelf het kader waar `fixed` tegen rekent. */ .venster::before{position:fixed;inset:0} .venster::after{position:fixed;top:-40%;bottom:-40%;left:0} .greep{width:42px;height:4px;border-radius:99px;background:var(--ink-3);margin:0 auto 16px} .vkop{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:6px} .vkop h2{font-size:1.2rem} .dicht{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%; background:rgba(var(--ink-rgb),.12);color:var(--ink);transition:background .3s} .dicht:hover{background:rgba(var(--ink-rgb),.22)} .dicht svg{width:18px;height:18px} .vk{font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase; color:var(--ink-2);margin:20px 0 9px} .vnav{display:grid;gap:6px;grid-template-columns:repeat(auto-fit,minmax(min(100%,205px),1fr))} .vnav button{display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:16px; min-height:52px;text-align:left;width:100%;transition:background .3s} .vnav button:hover{background:rgba(var(--ink-rgb),.09)} .vnav .bol{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none; background:var(--blauw);color:var(--java)} .vnav .bol svg{width:19px;height:19px} .vnav b{display:block;font-size:.95rem;font-weight:600} .vnav small{display:block;font-size:.79rem;color:var(--ink-2)} .rijtje{border-radius:18px;overflow:hidden} .rijtje div{display:flex;align-items:center;gap:13px;padding:13px 15px; border-bottom:1px solid rgba(var(--ink-rgb),.12)} .rijtje div:last-child{border-bottom:0} .rijtje .om{flex:1;min-width:0} .rijtje b{display:block;font-size:.93rem} .rijtje small{font-size:.79rem;color:var(--ink-2)} .rijtje .bedrag{font-weight:600;white-space:nowrap} .merkje{font-size:.66rem;font-weight:600;padding:5px 10px;border-radius:999px;white-space:nowrap; background:var(--blauw);color:var(--java)} .merkje.stil{background:transparent;border:1px solid rgba(var(--ink-rgb),.22);color:var(--ink-2)} .avatar{width:56px;height:56px;border-radius:50%;flex:none;display:grid;place-items:center; background:var(--blauw);color:var(--java);font-family:var(--serif);font-size:1.4rem} .opmerk{margin-top:18px;font-size:.79rem;color:var(--ink-2);padding:12px 14px; border-radius:14px;border:1px dashed rgba(var(--ink-rgb),.22)} .tekstknop{color:var(--blauw);text-decoration:underline;text-underline-offset:3px} .weg{width:30px;height:30px;flex:none;border-radius:50%;font-size:1.1rem;line-height:1; color:var(--ink-2);transition:background .3s,color .3s} .weg:hover{background:rgba(var(--ink-rgb),.12);color:var(--ink)} /* ── plan je sessie ─────────────────────────────────────── */ .maandkop{display:flex;align-items:center;justify-content:space-between;gap:12px; margin:4px 0 12px;font-weight:600} .rond{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center; border:1px solid rgba(var(--ink-rgb),.2);transition:background .25s} .rond:hover{background:rgba(var(--ink-rgb),.12)} .rond svg{width:17px;height:17px} /* Kalender links, tijden rechts — anders duwt een maand van zes weken de begintijden buiten beeld en moet je scrollen om te zien wat er te kiezen valt. */ .planraster{display:grid;grid-template-columns:minmax(0,326px) minmax(0,1fr); gap:clamp(16px,3vw,32px);align-items:start} @media(max-width:680px){.planraster{grid-template-columns:1fr}} .vk.eerste{margin-top:0} .weekkop,.dagen{display:grid;grid-template-columns:repeat(7,1fr);gap:4px} .weekkop{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-3);text-align:center;margin-bottom:5px} .dag{aspect-ratio:1;border-radius:11px;display:grid;place-items:center;font-size:.86rem; border:1px solid transparent;transition:background .25s,border-color .25s,color .25s} .dag.kan{border-color:rgba(var(--ink-rgb),.22);background:rgba(var(--ink-rgb),.05)} .dag.kan:hover{background:rgba(var(--ink-rgb),.14)} .dag.dicht{color:var(--ink-3);opacity:.5;cursor:default} .dag.leeg{cursor:default} .dag.aan{background:var(--blauw);border-color:var(--blauw);color:var(--java);font-weight:600} .tijden{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:7px;margin-bottom:4px} .tijd{padding:9px 13px;border-radius:12px;font-size:.85rem;line-height:1.2; border:1px solid rgba(var(--ink-rgb),.22);display:grid;gap:1px;justify-items:center; transition:background .25s,border-color .25s,color .25s} .tijd:hover{background:rgba(var(--ink-rgb),.12)} .tijd small{font-size:.68rem;color:var(--ink-2)} .tijd.aan{background:var(--blauw);border-color:var(--blauw);color:var(--java)} .tijd.aan small{color:rgba(var(--java-rgb),.72)} .tijd.nacht{border-color:rgba(165,188,214,.5)} .tijden .geen{font-size:.83rem;color:var(--ink-2)} /* de regel in het mandje die nog een moment mist */ .mist{display:block;margin-top:6px;font-size:.78rem} .mist button{color:var(--blauw);text-decoration:underline;text-underline-offset:3px} .moment{color:var(--ink)} .venster .slot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px} .venster .totaal{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.1rem);line-height:1} .venster .btw{font-size:.75rem;color:var(--ink-2);margin-left:-6px} .venster .slot .kn{margin-left:auto} /* het aantal op de mandjeknop in de balk */ .telling{position:absolute;top:6px;right:6px;min-width:17px;height:17px;padding:0 4px; border-radius:99px;background:var(--blauw);color:var(--java); font-size:.6rem;font-weight:700;display:grid;place-items:center;line-height:1} .telling[hidden]{display:none} /* de tekst binnen een opengeklapte tegel */ .citaat{font-family:var(--serif);font-size:clamp(1rem,1.7vw,1.25rem);line-height:1.35; margin-bottom:14px} .uitleg{font-size:.88rem;color:var(--ink-2);line-height:1.5} .detail .vk{margin:16px 0 6px} .mee{list-style:none} .mee li{position:relative;padding:5px 0 5px 15px;font-size:.84rem;color:var(--ink-2)} .mee li::before{content:"";position:absolute;left:0;top:13px;width:5px;height:5px; border-radius:50%;background:var(--blauw)} .stand{margin-top:14px;font-size:.82rem;color:var(--ink-2)} .stand b{color:var(--ink)} @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition-duration:.01ms!important} } /* ── inloggen en aanmelden, bovenaan het accountvenster ──── Alleen hier. Wie al ingelogd is ziet zijn naam en zijn bestellingen; wie dat niet is, ziet twee knoppen en verder niets — geen half account-venster met lege lijstjes eronder. */ .onthaal{padding:4px 0 20px;border-bottom:1px solid rgba(var(--ink-rgb),.12);margin-bottom:16px} .onthaal h3{font-size:clamp(1.15rem,2.2vw,1.45rem);margin:6px 0 8px} .onthaal .kt{font-size:.87rem;color:var(--ink-2);line-height:1.5;max-width:46ch} .onthaalknoppen{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px} .onthaalknoppen .kn{flex:1 1 170px;min-height:46px;padding:12px 20px;font-size:.9rem} /* Inloggen is nu ook een glazen blokje. Vol gekleurd stond hij als een postzegel op de ruit, terwijl alles eromheen glas is. Hij blijft wel de eerste die je ziet: het glas krijgt de accentkleur mee, met een rand die er duidelijker is dan bij 'Account aanmaken' ernaast. */ .onthaalknoppen .kn-vol{ background:linear-gradient(150deg,rgba(var(--blauw-rgb),.40),rgba(var(--blauw-rgb),.17)); color:var(--ink);border-color:rgba(var(--blauw-rgb),.55)} .onthaalknoppen .kn-vol:hover{ background:linear-gradient(150deg,rgba(var(--blauw-rgb),.54),rgba(var(--blauw-rgb),.26))} .wie{display:flex;align-items:center;gap:15px;padding:4px 0 18px; border-bottom:1px solid rgba(var(--ink-rgb),.12);margin-bottom:16px} .wie .om{flex:1;min-width:0} .wie b{display:block;font-size:1.05rem} .wie small{display:block;color:var(--ink-2);font-size:.82rem; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wie .tekstknop{flex:none;font-size:.82rem} /* ── inloggen en aanmelden in het venster ────────────────── Eén paneel met twee tabbladen: je ziet alleen het formulier dat je nodig hebt. WooCommerce zet standaard een kader met een rand om elk formulier — dat hoort hier niet, het venster ís al de omlijsting. */ .tabs{display:flex;gap:6px;padding:4px;border-radius:15px;margin:2px 0 20px; background:rgba(var(--ink-rgb),.07);border:1px solid rgba(var(--ink-rgb),.16)} .tab{flex:1;padding:10px 12px;border-radius:11px;font-size:.88rem;font-weight:500; color:var(--ink-2);transition:background .3s,color .3s} .tab:hover{color:var(--ink)} .tab.aan{background:var(--blauw);color:var(--java);font-weight:600} .modus[hidden]{display:none} /* Twee velden die bij elkaar horen op één regel: voornaam en achternaam, postcode en plaats. Onder de 420px gaan ze onder elkaar — dan is er geen breedte meer om te delen. */ .tweeluik{display:grid;grid-template-columns:1fr 1fr;gap:0 12px} @media(max-width:420px){.tweeluik{grid-template-columns:1fr}} /* Het regeltje onder postcode en huisnummer: wat er gevonden is, of dat het niet lukte. Het staat er alleen als er iets te melden valt, zodat er geen lege ruimte onder het formulier hangt te wachten. */ .adresmelding{font-size:.78rem;line-height:1.4;margin:-6px 0 12px;color:var(--ink-3);min-height:0} .adresmelding:empty{display:none} .adresmelding.raak{color:var(--ink-2)} .adresmelding.mis{color:#E8A9A0} .venster form.login,.venster form.register, .venster .woocommerce-form{border:0!important;padding:0!important;margin:0; border-radius:0!important;background:transparent} .venster .form-row,.venster .woocommerce-form-row{margin:0 0 14px;display:block;padding:0} .venster .woocommerce-form label,.venster .form-row label{ display:block;margin-bottom:6px;font-size:.82rem;color:var(--ink-2)} .venster .woocommerce-form label.woocommerce-form__label-for-checkbox{ display:flex;align-items:center;gap:9px;font-size:.84rem;color:var(--ink-2)} .venster .input-text,.venster .woocommerce-Input{ width:100%;min-height:48px;padding:12px 15px;border-radius:14px; border:1px solid var(--glas-rand);background:rgba(var(--java-rgb),.55); color:var(--ink);font-family:var(--ui);font-size:.94rem} .venster .input-text:focus{border-color:var(--blauw);outline:none} .venster .woocommerce-form-login__submit, .venster button[name="register"]{width:100%;margin-top:4px} .venster .lost_password{margin:14px 0 0;font-size:.82rem} .venster .contact{display:grid;gap:8px;margin-top:2px} .venster .contact a{display:block;padding:13px 15px;border-radius:16px;text-decoration:none} .venster .contact b{display:block;font-size:.95rem;color:var(--ink)} .venster .contact span{font-size:.8rem;color:var(--ink-2)} .venster .lost_password a{color:var(--ink-2)} .venster .woocommerce-privacy-policy-text p{font-size:.79rem;color:var(--ink-3);line-height:1.5} /* de plek voor inloggen met Google of Apple */ .sociaal{margin-top:20px;padding-top:18px;border-top:1px solid rgba(var(--ink-rgb),.12); display:grid;gap:9px} .sociaal .ofwel{display:block;text-align:center;font-size:.76rem;color:var(--ink-3); margin:-30px auto 12px;background:var(--aarde);padding:0 12px;width:fit-content} /* ── waar de tekst staat, per standpunt ──────────────────── Elk beeld heeft zijn eigen onderwerp, en daar hoort de tekst omheen te staan in plaats van eroverheen. Opgemeten aan de opnames zelf. */ /* start — het bureau staat frontaal en symmetrisch in beeld; de tekst houdt links de donkere hoek aan en laat het midden vrij */ #blad-start .kop{max-width:min(52ch,58%)} /* pakketten — vier tegels netjes in het midden, zoals gevraagd */ #blad-pakketten{justify-items:center;--in-x:0;--in-y:16px} #blad-pakketten .kop{text-align:center;margin-left:auto;margin-right:auto} #blad-pakketten .kop p{margin-left:auto;margin-right:auto} /* de opengeklapte tegel houdt zijn glas, ook als het raster eromheen wisselt */ .blad .pak.open{background:var(--glas);border-color:var(--glas-rand)} #blad-pakketten .vier{transform:none} #blad-pakketten .vier{width:100%} /* werk — de zithoek vult rechts en onder; de lijst blijft links */ /* De zithoek vult links en onder, dus de lijst staat rechts en komt van links binnenschuiven — naar zijn plek toe, net als bij over ons. */ #blad-werk{justify-items:end;--in-x:-40px} /* De groep blijft rechts in beeld staan, maar alles erin lijnt links uit: de kop, de nummers en de tekst delen één linkerrand. Rechts uitlijnen gaf in elk blok een rafelige linkerkant — dat is wat er onrustig uitzag. */ /* `width:100%` moet erbij. De onderdelen van een pagina krimpen hier mee met hun inhoud, en de kop is smaller dan de lijst — dan beginnen ze op twee verschillende plekken en loopt de linkerrand niet door. Met een vaste breedte staan kop, tekst en blokken allemaal op één lijn. */ #blad-werk .kop,#blad-werk .lijst{width:100%;max-width:min(680px,58%); margin-left:auto} /* De kop houdt zijn rechte rechterkant. Links uitlijnen zag er netter uit, maar dan schuift "ONS WERK" bij een laag venster pal onder het logo, dat midden bovenaan staat — en daar is geen ruimte voor weg te halen zonder dat het laatste blok achter de balk verdwijnt. Kop en blokken delen nu dezelfde rechterrand; ín de blokken lijnt alles links uit. */ #blad-werk .kop{text-align:right} #blad-werk .lijst{text-align:left} #blad-werk .rg{flex-direction:row;text-align:left} #blad-werk>*:not(.oploop):not(.afloop){transform:translateX(-40px)} .blad.actief#blad-werk>*:not(.oploop):not(.afloop){transform:none} /* geloof — de wand met lijsten zit midden en rechts; de panelen zakken naar onderen zodat de bovenste rij lijsten vrij blijft */ #blad-geloof{align-content:end} @media(max-width:900px){ #blad-werk{justify-items:stretch} #blad-werk .kop,#blad-werk .lijst{max-width:100%;text-align:left} #blad-werk .rg{flex-direction:row;text-align:left} } /* over — de kameleon zit rechts van het midden, ongeveer op 55 tot 85 procent van de breedte. Daar mag niets overheen: alles blijft links en smal, en komt van rechts binnenschuiven zodat het naar zijn plek toe beweegt in plaats van ervandaan. */ #blad-over{justify-items:start;--in-x:40px} #blad-over .kop, #blad-over .kop p{max-width:min(46ch,46%)} #blad-over .chips{max-width:min(46ch,46%)} #blad-over>*:not(.oploop):not(.afloop){transform:translateX(40px)} .blad.actief#blad-over>*:not(.oploop):not(.afloop){transform:none} @media(max-width:820px){ #blad-start .kop,#blad-over .kop,#blad-over .kop p{max-width:100%} } /* ── glas dat je kunt aanraken ───────────────────────────── Eén glans die er overheen trekt zodra je muis erop komt, en de knop komt een tikje naar voren. Die inzoom blijft staan zolang je erop blijft — hij springt dus niet terug halverwege. */ /* Aanwijzen laat het hele vlak groeien — geen sprongetje omhoog, want dan schuift de rij uit elkaar. Erop gaan is meteen, eraf gaan zakt rustig terug; ga je met je muis over de pakketten, dan loopt er zo een golf mee. */ .kn:hover, .bk:hover, a.glas:hover, button.glas:hover{transform:scale(1.055)} .kn,.bk,a.glas,button.glas{transition:transform var(--groei) var(--soepel),background .35s} .kn:active,.bk:active,a.glas:active,button.glas:active{transform:scale(1.02)} /* De glans zelf. `.glas` knipt zijn eigen randen al af, dus de streep blijft binnen de knop. Bij `.kn` zonder glas zetten we dat hier apart. */ .kn.glas:hover::after, .pak.glas:hover::after, a.glas:hover::after, button.glas:hover::after{animation:streep 1.5s var(--soepel)} .kn:not(.glas){position:relative;overflow:hidden} .kn:not(.glas)::after{content:"";position:absolute;top:-40%;bottom:-40%;width:44%; pointer-events:none;opacity:0;transform:translateX(-160%) rotate(14deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.12) 26%, rgba(255,255,255,.38) 50%,rgba(255,255,255,.12) 74%,transparent)} .kn:not(.glas):hover::after{animation:streep 1.5s var(--soepel)} /* de tegels van de pakketten liften al; die houden hun eigen hoogte */ /* Een blok groeit vanuit zijn eigen midden. Het schoof eerder opzij of omhoog, en dan lijkt het eerder weg te glijden dan te reageren. */ .pak:hover, .rg:hover{transform:scale(1.04)} .pak.open:hover{transform:none} @media(hover:none){ .kn:hover,.bk:hover,a.glas:hover,button.glas:hover,.pak:hover,.rg:hover{transform:none} } /* ── thema's ─────────────────────────────────────────────── Vijf standen uit hetzelfde palet. Vier donkere met crèmekleurige tekst, en één lichte waarin crème en java omdraaien — precies zoals de merkgids het beschrijft: in de lichte stand wordt wijnrood het accent en blauw een vlak. Alles op de pagina gebruikt deze variabelen, dus een thema wisselen herkleurt de hele site zonder dat er ergens een tweede opmaak naast ligt. De contrasten zijn nagerekend: crème op java 14,9:1, crème op aarde 9,4:1, crème op wijn 11,1:1, crème op nacht 17,3:1 en java op crème 14,9:1. Alle ruim boven de 4,5:1 die de richtlijn vraagt. */ /* Elk thema zet ook zijn eigen --java-rgb. Die kleur zit in het verloop onderaan een pagina die kan schuiven en in een paar kleine vlakken; bleef hij op één waarde staan, dan liep dat verloop in een wijnrode pagina bruin weg. */ :root[data-thema="java"]{ --java:#231815; --aarde:#4A2E27; --blauw:#A5BCD6; --blauw-rgb:165,188,214; --java-rgb:35,24,21; --glas:rgba(28,18,16,.42)} :root[data-thema="aarde"]{ --java:#3A241E; --aarde:#5A3A32; --blauw:#A5BCD6; --blauw-rgb:165,188,214; --java-rgb:58,36,30; --glas:rgba(90,58,50,.46)} :root[data-thema="nacht"]{ --java:#140C0A; --aarde:#2A1B16; --blauw:#A5BCD6; --blauw-rgb:165,188,214; --java-rgb:20,12,10; --glas:rgba(20,12,10,.5)} /* de rij knoppen in het accountvenster */ /* Vier gelijke blokken die samen precies zo breed zijn als de regel *Thema* erboven — dat leest rustiger dan vier losse vierkantjes links in de hoek. Elk blok draagt zijn eigen kleuren: het verloop is de achtergrond die je krijgt, de naam staat er in de letterkleur van dat thema en het stipje is het accent. Zo zie je waar je voor kiest voordat je klikt. */ .themas{display:grid;grid-template-columns:repeat(4,1fr);gap:8px; margin-top:clamp(8px,1.2vh,12px)} /* `hidden` verliest het van `display:grid`; zonder deze regel stonden de kleuren er meteen, ook al hoorden ze pas na een klik te verschijnen. */ .themas[hidden]{display:none} .thema{position:relative;overflow:hidden;min-height:54px;padding:10px 12px; border-radius:14px;text-align:left; background:linear-gradient(135deg,var(--tv),var(--tv2)); border:1px solid rgba(var(--ink-rgb),.22); transition:transform var(--groei) var(--soepel),border-color .3s,box-shadow .3s} .thema b{position:relative;z-index:1;font-size:.86rem;font-weight:500; color:var(--tt);letter-spacing:.01em} .thema::after{content:"";position:absolute;right:10px;bottom:10px; width:10px;height:10px;border-radius:50%;background:var(--ta)} .thema:hover{transform:scale(1.04)} .thema[aria-pressed="true"]{border-color:var(--blauw); box-shadow:0 0 0 2px var(--blauw) inset} /* ── staande schermen ────────────────────────────────────── Een telefoon is smal en hoog. De opnames vullen de hoogte, dus alles wat daaroverheen komt moet krapper en dichter op elkaar — en niets mag opzij buiten beeld schuiven. */ @media(max-width:640px){ /* de blokken komen recht van onderen in plaats van opzij: een verschuiving van 40px is op 375px breed genoeg om de rand te raken */ .blad{--in-x:0;--in-y:26px} #blad-werk,#blad-over,#blad-pakketten{--in-x:0;--in-y:26px} #blad-werk .kop,#blad-werk .lijst, #blad-over .kop,#blad-over .kop p,#blad-over .chips{max-width:100%;text-align:left} #blad-werk{justify-items:stretch} #blad-over{justify-items:stretch} #blad-werk .rg{flex-direction:row;text-align:left} #blad-start h1{white-space:normal} /* de cookiemelding nam het halve beginscherm in beslag en dekte het merk af */ .koekjes{padding:14px 16px 13px;border-radius:18px; bottom:calc(var(--balk-h) + 14px)} .koekjes .kt{font-size:.8rem;line-height:1.45} .koekjes .oog{font-size:.6rem} .koekjesknoppen{flex-direction:row;gap:7px} .koekjesknoppen .kn{min-height:40px;padding:10px 8px;font-size:.78rem} .koekjes .tekstknop{font-size:.74rem;margin-top:9px} /* vensters mogen bijna het hele scherm pakken, maar niet eronder verdwijnen */ .venster{max-height:88svh;padding:14px 16px 26px;border-radius:22px 22px 0 0} .planraster{grid-template-columns:1fr} .tijden{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))} /* vier naast elkaar wordt op deze breedte 38px per blok; dan past er geen naam meer in. Twee rijen van twee houdt ze leesbaar én even breed. */ .themas{grid-template-columns:1fr 1fr;gap:7px} .thema{min-height:48px;padding:9px 11px} } /* Het tikje waarmee een pagina laat merken dat je onderaan bent. Klein genoeg om niet af te leiden, groot genoeg om te voelen dat er iets tegenhoudt. */ @keyframes tikje{ 0%{transform:translateY(0)} 35%{transform:translateY(-9px)} 100%{transform:translateY(0)} } /* Hetzelfde tikje, maar de andere kant op. Scrol je omhoog terwijl er niets meer boven staat, dan hoort het blok ook omhóóg te wijken en niet omlaag — anders voelt het alsof de pagina de verkeerde kant op duwt. */ @keyframes tikje-terug{ 0%{transform:translateY(0)} 35%{transform:translateY(9px)} 100%{transform:translateY(0)} } .blad.tikje{animation:tikje .42s cubic-bezier(.32,.72,0,1)} .blad.tikje-terug{animation:tikje-terug .42s cubic-bezier(.32,.72,0,1)} @media(prefers-reduced-motion:reduce){ .blad.tikje,.blad.tikje-terug{animation:none}} /* ── de telefoonopzet ────────────────────────────────────── Op een laptop ben je ín de studio: het beeld vult het scherm en de tekst ligt eroverheen. Op een telefoon werkt dat niet. Een liggende opname die een smal, hoog scherm moet vullen wordt zo ver ingezoomd dat je nog een kwart van de breedte ziet, en tekst over een foto is er altijd moeilijker leesbaar. Daarom splitst hij daar: de studio staat bovenin als een band, de inhoud eronder op de merkkleur. Je ziet ruim de helft van het beeld in plaats van een kwart, en de tekst staat op een egale ondergrond. De aankomst blijft wél schermvullend — dat is het moment waarop het merk binnenkomt, en dat hoort groot. Pas als de site open is, schuift hij uit elkaar; vandaar dat alles aan `geopend` hangt. */ @media(max-width:640px) and (orientation:portrait){ /* ── het beeld ── Geen band bovenin meer maar een foto over het hele scherm, net zoals de studio dat op een laptop doet. Die band maakte er een plaatje-met-tekst- eronder van, en dan is de ruimte geen ruimte meer. Er wordt hier ook niet gereden. De opnames zijn liggend gefilmd; op een staand scherm hou je daar nog geen 35 procent breedte van over en snijd je het onderwerp eruit. Vijf staande foto's dus, elk bijgesneden rond het punt waar hij om draait, en ze wisselen met een korte vervaging. */ .podium>video{display:none} .podium>.foto{display:block} .podium>.foto.aan{opacity:1;z-index:2} /* Geen enkele opname hier, ook niet bij de opening. Alles gaat met foto's. */ body.geopend .podium{inset:0;height:auto;border-radius:0} /* ── de balk onderin, met alle zeven knoppen ── Ze waren met z'n drieën verborgen omdat de balk op een smal scherm de randen raakte. In plaats van knoppen weg te laten maken we ze kleiner: zeven van 44 pixel met krappe tussenruimtes komen samen op ongeveer 340 pixel, en dat past op elk toestel dat we hier bedienen. Zo hoeft niemand een pagina te missen die de rest wel gewoon ziet. */ .balk{gap:2px;padding:6px;border-radius:22px} .balk .streep{margin-inline:2px} .bk{width:44px;height:44px;border-radius:14px} .bk svg{width:20px;height:20px} .bk:hover{transform:none} .bk.breed,.bk.krap-weg{display:grid} /* ── de inhoud ── Links van de balk, verticaal in het midden, zodat de foto er rondom zichtbaar blijft. De bovenmarge houdt het logo vrij. */ body.geopend .bladen{ padding:clamp(84px,12vh,110px) clamp(15px,4vw,20px) calc(56px + clamp(20px,3vh,30px)) clamp(15px,4vw,20px); place-items:center stretch} /* Op de merkkleur hoeft het beeld niet zo hard gedempt te worden, dus de studio mag hier meer spreken. */ body.geopend .dim{opacity:calc(var(--dim) * .62)} /* Alles links, alles op één rand. Er is te weinig breedte om ergens anders mee te spelen. */ body.geopend .blad{--in-x:0;--in-y:20px} /* De onderdelen van een pagina krimpen mee met hun inhoud en worden door `justify-items` op hun plek gezet — dáár zat het middenzetten van de kop bij de pakketten, niet in de tekstuitlijning. Op deze breedte pakt alles gewoon de volle breedte en lijnt het links uit. */ body.geopend .blad{justify-items:stretch} /* `width:100%` is hier de beslissende: de onderdelen krimpen anders mee met hun inhoud en worden dan door de uitlijning van het blad op hun plek gezet. Op volle breedte doet die uitlijning niets meer en begint alles links. */ body.geopend .kop,body.geopend .kop p, body.geopend .lijst,body.geopend .chips, body.geopend #blad-over .kop,body.geopend #blad-over .kop p{ width:100%;max-width:100%;text-align:left;margin-left:0;margin-right:0} body.geopend #blad-werk .kop,body.geopend #blad-werk .lijst{text-align:left} body.geopend #blad-werk .rg,body.geopend #blad-pakketten .kop{text-align:left} /* De id-regel voor de laptop zet deze kop midden; op een telefoon lijnen de kaarten links uit en dan hoort de kop daar ook te beginnen. Vandaar de id erbij, anders wint de andere regel. */ /* Bij deze drie staat de kop los in beeld en leest hij het rustigst in het midden. Bij de startpagina niet — daar hoort de naam links — en bij over ons ook niet, want daar loopt de tekst door tot onder de kop. */ body.geopend #blad-pakketten .kop,body.geopend #blad-pakketten .kop p, body.geopend #blad-werk .kop,body.geopend #blad-werk .kop p, body.geopend #blad-geloof .kop,body.geopend #blad-geloof .kop p{ text-align:center;margin-left:auto;margin-right:auto} body.geopend #blad-werk{justify-items:stretch} body.geopend #blad-geloof{align-content:center} body.geopend .kop h1,body.geopend .kop h2{font-size:clamp(1.6rem,7.4vw,2.2rem); margin:6px 0 8px;line-height:1.08} body.geopend #blad-start .kop h1{font-size:clamp(1.8rem,8.6vw,2.5rem)} body.geopend .kop p{font-size:.9rem;line-height:1.45} body.geopend .oog{font-size:.58rem} /* ── de vier pakketten, alle vier in beeld ── Geen schuifvak meer. Elk pakket is een regel: links waar het over gaat, rechts wat het kost. Dat leest sneller dan vier kaartjes onder elkaar en het past ruim, ook op een klein toestel. */ /* Gelijke rijen: anders is het pakket met de langste omschrijving hoger dan de rest en staat de rij scheef. */ .vier{grid-template-columns:1fr;grid-auto-rows:1fr;gap:6px;max-height:none; overflow:visible;margin-top:clamp(8px,1.6vh,14px)} /* Zodra er eentje openklapt moeten de rijen hun vaste hoogte loslaten. Met `1fr` houden de dichtgeklapte pakketten hun ruimte in het raster — ze zijn dan wel leeg, maar het opengeklapte blok staat er tweeduizend pixel onder en je moet je duim stukscrollen voor je het ziet. */ .vier.uit{grid-auto-rows:auto} .pak{padding:11px 13px;border-radius:15px} .pak-kop{display:grid;grid-template-columns:1fr auto;align-items:center; column-gap:10px} .pak .code{grid-column:1;grid-row:1;font-size:.52rem;letter-spacing:.16em} .pak h3{grid-column:1;grid-row:2;font-size:.98rem;margin:1px 0 0} .pak .kort{grid-column:1;grid-row:3;font-size:.7rem;margin-top:1px} /* De prijs staat onderaan de rechterkolom en het vlaggetje bovenaan, zodat ze elkaar niet in de weg zitten. Bij alle vier de pakketten staat de prijs op dezelfde hoogte, ook bij de twee zonder vlaggetje — anders danst hij. */ .pak .prijs{grid-column:2;grid-row:1/4;align-self:center; font-size:1.08rem;margin:0;white-space:nowrap} .pak .vlag{top:8px;right:10px;font-size:.47rem;padding:2px 7px;letter-spacing:.1em} /* ── ons werk ── */ .lijst{grid-template-columns:1fr;gap:6px;margin-top:clamp(8px,1.6vh,14px)} .lijst .rg:last-child{grid-column:auto} .rg{padding:10px 13px;gap:11px;border-radius:14px} .rg b{font-size:.92rem} .rg span{font-size:.76rem;line-height:1.35} /* ── waar wij in geloven ── */ /* Het nummer stond op een eigen regel en kostte daarmee per paneel een hele regelhoogte — drie keer dertig pixel die je hier niet hebt. Naast de titel leest het net zo goed en past de pagina weer. */ .drie{grid-template-columns:1fr;gap:5px;margin-top:clamp(6px,1.2vh,11px)} .pan{padding:10px 13px;border-radius:15px; display:grid;grid-template-columns:auto 1fr;column-gap:11px;align-items:baseline} .pan .nr{grid-column:1;grid-row:1;font-size:1.1rem;line-height:1} .pan h3{grid-column:2;grid-row:1;font-size:.95rem} .pan p{grid-column:1/-1;grid-row:2;font-size:.78rem;line-height:1.4;margin-top:4px} /* ── over ons ── De kameleon is hier het onderwerp, dus die moet je zien. De kop gaat naar boven in plaats van naar het midden en de laatste zin gaat eruit; daarmee komt de hele middenband vrij en zit het dier niet meer achter de tekst. Op een laptop staat die zin er gewoon. */ #blad-over>.kop{margin-block:0} .breed-alleen{display:none} /* Vier blokjes van gelijke maat, elk op één regel. De merknaam gaat eruit — het kopje erboven zegt al wat voor apparaat het is, en de volledige naam staat er zodra je erop tikt. Het vijfde blokje, het licht, hoort bij de kamer en niet bij de apparatuur; op deze breedte staat het in de weg. */ .apparatuur{grid-template-columns:1fr 1fr;gap:5px;padding-top:clamp(10px,2vh,16px)} .app{padding:8px 10px;border-radius:13px} .app.smal-weg{display:none} .app-soort{font-size:.5rem;letter-spacing:.12em} .app-naam{font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* De vensters komen nog altijd van onderen; ze mogen de balk net vrijhouden. */ .venster{width:calc(100vw - 8px);max-height:88svh} } /* een hele regel die als knop werkt, met een pijltje dat meedraait */ .regelknop{display:flex;align-items:center;gap:13px;width:100%;text-align:left; padding:13px 15px;border-radius:18px;color:var(--ink)} .regelknop .om{flex:1;min-width:0} .regelknop b{display:block;font-size:.93rem} .regelknop small{font-size:.79rem;color:var(--ink-2)} .regelknop .pijl{width:18px;height:18px;flex:none;color:var(--ink-3); transition:transform .4s var(--soepel)} .regelknop.open .pijl{transform:rotate(180deg)} /* de navigator: twee gelijke kolommen, zodat het blok symmetrisch staat */ .vnav{display:grid;grid-template-columns:1fr 1fr;gap:8px} .vnav button{display:flex;align-items:center;gap:11px;padding:12px 13px; border-radius:16px;text-align:left;color:var(--ink); border:1px solid rgba(var(--ink-rgb),.14);min-width:0} .vnav button:hover{background:rgba(var(--ink-rgb),.1)} /* De bolletjes staan in het vaste blauw van het merk. Ze waren een flauwe grijstint en verdwenen daarmee in het glas; dit is dezelfde kleur die de balk onderin gebruikt voor de pagina waar je staat, dus het rijmt. */ .vnav .bol{width:34px;height:34px;flex:none;display:grid;place-items:center; border-radius:12px;background:var(--blauw);color:var(--java)} .vnav .bol svg{width:17px;height:17px} .vnav b{display:block;font-size:.88rem} .vnav small{display:block;font-size:.73rem;color:var(--ink-2); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media(max-width:520px){.vnav{grid-template-columns:1fr}} /* ── de apparatuur bij over ons ──────────────────────────── Een strook glazen plaatjes over de volle breedte, net boven de balk. Klik er een aan en je leest wat het is en waarom het er staat. */ /* De strook hoort onderaan te hangen, vlak boven de balk. Dan blijft het midden van het beeld vrij en zie je de kameleon in zijn geheel — poot en tak erbij. Dit stond er eerder als `grid-template-rows:1fr auto` met `margin-top:auto` op de strook. Alle drie die regels deden niets: een blad is een blok, geen raster, dus er viel niets te verdelen en de strook zakte simpelweg met de tekst mee tot halverwege het beeld — precies over het dier heen. Nu is het blad een kolom die de volle hoogte pakt. De tekst zweeft in de ruimte erboven; auto-marges bóven én onder houden hem op de plek waar hij stond, dus aan de kop verandert niets. De strook staat onderaan vast, met een marge die hem vrij van de balk houdt. */ #blad-over{display:flex;flex-direction:column;min-height:calc(100% + var(--speling) * 2)} #blad-over>.kop{margin-block:auto} .apparatuur{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px;width:100%;padding-top:clamp(14px,2vh,22px); margin-bottom:clamp(14px,2vh,20px)} .app{padding:12px 14px;border-radius:16px;text-align:left;display:grid;gap:2px; color:var(--ink);min-width:0} .app-soort{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase; color:var(--ink-3)} .app-naam{font-size:.86rem;font-weight:500;line-height:1.25} .app-uitleg[hidden]{display:none} .app-uitleg .kt{font-size:.9rem;line-height:1.55;color:var(--ink-2);margin-bottom:4px} .app-uitleg h2{font-size:clamp(1.2rem,2.4vw,1.6rem);margin-bottom:10px} .app-uitleg .vk{margin-top:18px} @media(max-width:640px){ .apparatuur{grid-template-columns:1fr 1fr;gap:7px} .app{padding:10px 12px} } body.apparaat-open #vensterApparaat{transform:translateX(-50%) translateY(0);visibility:visible}