/* DCSS Verhuur — MOBIEL DESIGN (richting E, "iPhone") =========================================================================== Gekozen door Lenny op 06-08 uit zes richtingen in /lab/. Dit bestand is de samenvoeging van lab/basis.css (de gedeelde mobiele opruiming, zes uitgangspunten) en lab/e.css (het karakter: alles rond, iOS-grijs, systeemletter, zwevende tabbalk, glazen knoppen). ⚠ HARDE EIS VAN LENNY: dit mag de desktop NIET raken. Alles hieronder staat daarom in één @media(max-width:880px)-blok. Dat is niet alleen een belofte: `node _qa/desktop-onaangeraakt.js` meet 25 berekende stijleigenschappen per element op 1440 px over tien pagina's en moet nul verschillen geven. Bewerk je hier iets, houd het dan binnen dat blok. De losse labbestanden blijven staan zodat de zes richtingen vergelijkbaar blijven. =========================================================================== */ /* ══ uit lab/basis.css ══════════════════════════════════════════ */ /* DCSS Verhuur — mobiel fundament voor alle vier de richtingen =========================================================================== Dit bestand bevat GEEN smaak. Alleen de zes mobiele uitgangspunten die Lenny op 06-08 aanleverde, plus de vier dode plekken die uit de meting van dezelfde dag kwamen. Elke richting (a/b/c/d) laadt dit eerst en zet er daarna zijn eigen karakter overheen. De zes uitgangspunten, en wat ze hier concreet doen: 1 EEN KOLOM alles onder elkaar; geen halve kaarten meer in beeld. Uitzondering: het productraster op /verhuur/ staat op twee kolommen. Zie de noot daar — dat is een bewuste afwijking met een gemeten reden, geen slordigheid. 2 GROTE KNOPPEN 52 px hoog, volle breedte in een kaart, en de primaire actie is gevuld rood zodat hij losstaat van de pagina. 3 RUIMTE ruimte TUSSEN blokken, niet BINNEN kaarten. De gaten binnen kaarten waren dood; die zijn eruit. 4 ACTIE BOVENAAN op elke pagina staat er een echte actie in het eerste scherm, niet pas na drie keer vegen. 5 EEN MENU al een hamburger; de regels erin zijn nu tapbaar (52 px) in plaats van tekstlinkjes. 6 MINDER, GROTER lopende tekst minimaal 15,5 px, bijschriften niet meer onder 13 px, en koppen kleiner zodat ze geen vier regels vullen. */ @media(max-width:880px){ /* ── 6 · leesbaarheid ───────────────────────────────────────────────────── De H1 op de home stond op 42 px en vulde vier regels; met drie regels is hij nog steeds groot en zie je de knop eronder zonder te scrollen. */ .vt-hero h1{font-size:34px;line-height:1.06} .vt-herotekst{font-size:16px;margin-top:16px} .vt-gelheroinhoud h1{font-size:30px} .vt-sectiekop h2,.vt-popkop h2{font-size:29px} .vt-sectiekop p,.vt-popkop p{font-size:15.5px} .vt-poppub,.vt-prodsub{font-size:14px} .vt-prodcat,.vt-reviewlabel{font-size:12px} .vt-gelinfo span{font-size:14.5px} .vt-vraag summary{font-size:17px} /* ── 3 · ruimte tussen de blokken, niet erin ────────────────────────────── De setkaart had ~150 px leegte tussen de prijs en de knop, omdat alle kaarten in de rij even hoog werden gerekt. Elke kaart is nu zo hoog als zijn eigen inhoud. */ .vt-poprij,.vt-gelrij-scroll{align-items:start} .vt-popacties{margin-top:16px} .vt-popinfo{padding:16px 16px 18px} /* dezelfde leegte zat onder de prijs van de eventkaarten op de home */ .vt-gelinfo{padding:16px 16px 18px} .vt-gelvanaf{margin-top:14px} /* ── 1 · een kolom, en vegen klikt netjes vast ──────────────────────────── De rijen sneden de tweede kaart willekeurig doormidden. Nu is elke kaart bijna schermbreed en klikt hij op zijn plek; het randje ernaast is precies genoeg om te laten zien dat er meer is. */ .vt-poprij,.vt-gelrij-scroll{grid-auto-columns:82vw;scroll-snap-type:x mandatory; scroll-padding-left:var(--pad);padding-bottom:34px} .vt-pop,.vt-gelrij-scroll>*{scroll-snap-align:start} .vt-popknoppen{margin-left:auto} .vt-popknop{width:52px;height:52px} .vt-gelrij,.vt-reviewrij,.vt-tweekolom,.vt-stapbalk{grid-template-columns:1fr} /* ── 2 · knoppen die je ziet en raakt ───────────────────────────────────── Er stonden drie soorten randknoppen door elkaar die er allemaal even onbelangrijk uitzagen. Op mobiel is er nu per kaart één gevulde knop. */ .vt-pill,.vt-prodknop,.vt-ctaknop,.vt-popacties .vt-pill{ min-height:52px;font-size:15px;width:100%;justify-content:center} .vt-heroknoppen .vt-pill{width:100%} .vt-heroknoppen{gap:10px} .vt-prodknop{justify-content:center;background:var(--rood-btn); border-color:var(--rood-btn);color:#fff} .vt-popacties .vt-pill:not(.vt-pill-vol){border-color:var(--lijn-sterk)} /* ── 5 · het menu is een menu, geen lijst linkjes ───────────────────────── */ .vt-navlink{min-height:52px;font-size:17px} .vt-navsub{width:52px;min-height:52px} .vt-paneellijst a{min-height:56px} /* ── het logo hing als losse tegel in de balk ───────────────────────────── */ .vt-merk{border-right:0} /* ── 4 · actie in het eerste scherm ─────────────────────────────────────── Op de eventpagina's en het aanbod stond de eerste knop pas ver onder de vouw. De hero is daarom minder hoog: de tekst blijft staan, maar er is ruimte over voor wat erna komt. */ .vt-hero{min-height:auto} .vt-gelhero{min-height:auto} .vt-heroinhoud{padding:28px var(--pad) 34px} .vt-gelheroinhoud{padding:24px var(--pad) 30px} /* ── het aanbod: 57 kaarten onder elkaar was 28,5 schermen ──────────────── Elke kaart stond op min-height 376 px met een fotovak van 186 px, en het raster liet er maar één naast elkaar toe. Dat is 21.000 px aan kaarten. ⚠ Twee kolommen is de ENIGE afwijking van "een kolom". Een productraster is nog steeds verticaal scrollen en staat zo in elke webshop; als het er echt één moet zijn, haal deze regel weg en het is meteen terug. */ .vt-airrij{grid-template-columns:1fr 1fr;gap:10px} .vt-airgroepkop h3{font-size:19px} .vt-aircard{min-height:0;border-radius:14px} .vt-airmedia{height:118px} .vt-airmedia img{padding:8px} /* 16-09: een foto die zélf een studiofoto is blijft ook hier vullend; deze regel moet ACHTER .vt-airmedia img staan, anders wint de marge hierboven. */ .vt-airmedia--vol img{padding:0} .vt-airbody{padding:12px 12px 14px} .vt-airbody h3{font-size:15.5px;line-height:1.25} .vt-airbody p,.vt-airbody>span{font-size:13px} .vt-airfoot{padding-top:12px;flex-wrap:wrap;gap:4px} .vt-airfoot strong{font-size:16px} /* het plusje was 36 px; te klein om met een duim te raken */ .vt-airadd{width:44px;height:44px;top:8px;right:8px} /* hetzelfde raster in zijn oudere vorm, voor de pagina's die dat nog gebruiken */ .vt-prodgrid{grid-template-columns:1fr 1fr} .vt-prod{padding:12px} .vt-prodfoto{margin-bottom:10px;padding:6px} .vt-prodfoto--vol{padding:0} .vt-prod h3{font-size:15.5px} .vt-prodprijs strong{font-size:20px} .vt-prodknop{padding:12px 10px;font-size:13.5px} } /* ══ uit lab/e.css ══════════════════════════════════════════ */ /* RICHTING E — IPHONE · ALLEEN MOBIEL =========================================================================== Gevraagd: veel rondingen, nergens een scherpe hoek, en glazen kaarten. ⚠ EEN EERLIJKE KANTTEKENING OVER "GLAS" Echt matglas in een browser is `backdrop-filter: blur()`. Dat is precies wat we in juni sitebreed hebben weggehaald: het was de nummer 1 oorzaak van het stroeve scrollen waar je toen over viel (de browser moet bij elke pixel die je scrolt de achtergrond opnieuw vervagen). Op een vaste kop of onderbalk is het het duurst, want die vervagen bij élke scrollstap iets anders. Daarom staan hier TWEE soorten glas: · standaard = nagemaakt glas — doorschijnend wit, een lichte randlijn en een glansrand bovenin. Op een foto ziet dat er glazen uit en het kost niets. · ?blur=1 = écht matglas erbij. Zet dat achter het adres in je browser en scroll dezelfde pagina nog eens; dan voel je zelf of het de moeite waard is. Vind je van wel, dan zetten we het aan. ⚠ ALLES staat in één @media-blok tot 880 px; de desktopsite blijft ongewijzigd. */ @media(max-width:880px){ :root{ /* de grijstinten van iOS: de achtergrond is grijs, de kaarten zijn wit */ --wit:#f2f2f7; --papier:#ffffff; --papier-2:#e9e9ef; --inkt:#000000; --inkt-zacht:#3c3c43; --grijs:#6c6c70; --lijn:rgba(60,60,67,.16); --lijn-sterk:rgba(60,60,67,.29); --rood:#ff3b30; /* het rood van iOS staat dichter bij DCSS-rood */ --rood-btn:#d70015; --rood-tx:#c00d14; /* Op een iPhone is dit San Francisco, het systeemlettertype zelf. Dat blijft zo voor de LOPENDE TEKST: dat is precies wat de iOS-richting native laat aanvoelen, en het is ook hoe echte iOS-apps het doen — systeemletter voor tekst, eigen merkletter voor de koppen. ⚠️ 17-08-2026: de KOPPEN gaan wél naar de merkletter. Dhiraj klaagde over een "robotachtig" lettertype terwijl hij 's avonds op zijn telefoon zat te kijken — daar zag hij dus SF Pro Display en niet Space Grotesk. Zonder deze regel verandert de hele fontkeuze niets op het formaat waar hij naar keek. */ --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif; --disp:"Montserrat",-apple-system,BlinkMacSystemFont,system-ui,sans-serif; --r:22px; } body{background:var(--wit)} h1,h2,h3{letter-spacing:-.03em;font-weight:700} .vt-hero h1{letter-spacing:-.035em} /* ── nergens een scherpe hoek ──────────────────────────────────────────── */ .vt-pop,.vt-gelkaart,.vt-review,.vt-aircard,.vt-prod,.vt-fam,.vt-cta, .vt-set-tier,.vt-evkaart,.vt-stapkaart,.vt-aircard{ border-radius:22px;border-color:transparent;background:var(--papier); box-shadow:0 1px 1px rgba(0,0,0,.03),0 10px 26px -14px rgba(0,0,0,.22)} /* specifieker in vita.css (`.vt-gelrij-scroll .vt-gelkaart`), en die zet de kaart op `var(--wit)` — hier de grijze PAGINAkleur. Zonder deze regel is de kaart dus niet van de achtergrond te onderscheiden. */ .vt-gelrij-scroll .vt-gelkaart{background:var(--papier);border-color:transparent; border-radius:22px; box-shadow:0 1px 1px rgba(0,0,0,.03),0 10px 26px -14px rgba(0,0,0,.22)} .vt-popfoto,.vt-airmedia,.vt-gelfoto,.vt-evfoto{ border-radius:22px 22px 0 0;border-bottom:0} .vt-prodfoto{border-radius:16px;border:0} .vt-menufoto,.vt-opmaaticoon,.vt-gelicoon, .vt-pill,.vt-prodknop,.vt-ctaknop,.vt-popknop,.vt-airadd,.vt-gast, .vt-filterknop,.vt-kiesfilter,.vt-catlink,.vt-reviewlabel{border-radius:999px} .vt-vraag summary{border-radius:16px} .vt-vragen,.vt-vraag{border-color:var(--lijn)} .vt-prodgrid,.vt-airgrid{border:0} .vt-prod{border:0} /* ── glas: nagemaakt, dus zonder vervaging ───────────────────────────────── Dit werkt alleen bovenop iets, vandaar dat het op de hero zit: daar ligt een foto onder en dan lees je de doorschijnendheid als glas. */ .vt-heroknoppen .vt-pill:not(.vt-pill-vol), .vt-pill-glas,.vt-kopfeiten .vt-pill,.vt-hero .vt-pill:not(.vt-pill-vol){ background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.42); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 22px -12px rgba(0,0,0,.6)} .vt-bolletje::before{background:rgba(255,255,255,.38)} .vt-bolletje.is-aan::before{background:#fff} /* de kop en de onderbalk zijn DEKKEND. Een vaste balk die doorschijnend is zonder vervaging laat de tekst eronder doorschemeren — dat was precies de bug die we vanochtend uit de site hebben gehaald. */ .vt-kop{background:#fff;border-bottom:.5px solid var(--lijn-sterk)} .vt-merk{border-right:0} /* de Offerte-knop was een vierkant blok tot aan de rand; als pil past hij bij "nergens een scherpe hoek" */ .vt-mand{margin:9px 12px 9px 0;padding:0 18px;border-radius:999px; border-left:0;background:var(--rood-btn)} .vt-burger{padding:14px 16px} /* onderbalk als zwevende tabbalk, zoals in een app ─────────────────────── */ .vt-mbalk{left:10px;right:10px;bottom:10px;border-radius:22px;overflow:hidden; border:.5px solid var(--lijn-sterk);background:#fff; box-shadow:0 10px 30px -10px rgba(0,0,0,.3)} .vt-mbel{background:transparent} .vt-copy{padding-bottom:calc(18px + 78px)} /* ── knoppen in iOS-vorm ───────────────────────────────────────────────── */ .vt-pill-vol{background:var(--rood-btn);border-color:var(--rood-btn); box-shadow:0 6px 16px -8px rgba(215,0,21,.9)} .vt-prodknop{background:var(--rood-btn);border-color:var(--rood-btn);color:#fff} .vt-popacties .vt-pill:not(.vt-pill-vol){background:var(--papier-2); border-color:transparent;color:var(--inkt)} /* ── zachte scheiding in plaats van harde lijnen ───────────────────────── */ .vt-blok{border-bottom:0} .vt-sectiekop,.vt-popkop{padding-top:42px;padding-bottom:16px} .vt-sectiekop h2,.vt-popkop h2{font-weight:700} .vt-werkwijze,.vt-voet{background:#1c1c1e} /* Kruimelpad: de links waren 22 px hoog. Ze staan naast elkaar met een scheidingsteken ertussen, dus je tikt er makkelijk naast. Alleen het RAAKVLAK groeit — de tekst blijft even groot en het pad even hoog. */ .vt-kruimel{font-size:14px} .vt-kruimel a{display:inline-flex;align-items:center;min-height:24px} /* De voetlinks waren 350x22 px met 8 px ertussen: met een duim niet te raken en de kans op de verkeerde link is groot. Twaalf stuks, gevonden in de zelfreview van 07-08. Alleen mobiel — op desktop klik je met een muis. */ .vt-voetrij nav,.vt-voetrij>div:last-child{gap:0} .vt-voetrij nav a,.vt-voetrij>div:last-child a{min-height:44px;display:flex; align-items:center;font-size:15.5px} .vt-hero::after{background:linear-gradient(180deg, rgba(0,0,0,.08) 0%,rgba(0,0,0,.46) 48%,rgba(0,0,0,.86) 100%)} /* grijs op iOS-grijs haalt 4,32:1 bij deze twee kleine tellers */ .vt-bol>span,.vt-filterknop span{color:var(--inkt-zacht)} /* ── écht matglas, alleen met ?blur=1 in het adres ───────────────────────── Zo kun je op je eigen telefoon voelen wat het met het scrollen doet. */ .glas-echt .vt-kop{background:rgba(255,255,255,.72); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px)} .glas-echt .vt-mbalk{background:rgba(255,255,255,.72); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px)} .glas-echt .vt-heroknoppen .vt-pill:not(.vt-pill-vol), .glas-echt .vt-hero .vt-pill:not(.vt-pill-vol){ -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px)} }