/* * front-page.css — de tien secties van de homepage. * * Dit is de enige pagina van de site die bewust géén 1-op-1 kopie van * sam-it-services.nl is (baserules regel 14). De ontwerptaal is wél dezelfde — * Geomanist, dezelfde blauwen, oranje als signaalkleur — maar de indeling is * opnieuw opgezet: één doorlopend verhaal van "wie zijn we" naar "neem contact * op", in plaats van zes losse blokken onder elkaar. * * De opbouw hieronder volgt de volgorde van de pagina: * * 0. tokens, de onthulling en de gedeelde sectiekop * 1. hero + kengetallen * 2. merkenbalk * 3. assortiment * 3b. de oproep naar de keuzehulp (alleen de sectiemaat) * 4. populaire series * 5. nieuw naast refurbished * 6. zo werkt het bij ons * 7. beoordelingen * 8. veelgestelde vragen * 9. blogartikelen * 10. het blok onderaan * 11. responsief * * Klassenamen zijn camelCase (baserules regel 2). */ /* ================================================================== * 0a. Tokens van deze pagina * * Ze staan hier en niet in main.css omdat ze nergens anders voorkomen: een * bezoeker van een blogartikel hoeft ze niet op te halen (baserules regel 8). * ================================================================== */ :root { /* * De drie blauwen van de gekleurde vlakken — de hero, het vergelijkingspaneel * en het blok onderaan — van donker naar licht. * * Hier stond #01243f, #0b3f68 en #17568c: drie bijna zwarte diepblauwen. Wit * daarop haalde 15:1 tot 7,5:1, dus las het comfortabel, maar het las ook * grauw: de voorpagina van een webshop begon met een zwart-blauw blok en * eindigde er weer in. Dit zijn dezelfde drie blauwen als de categoriebalk in * de header en de bovenkant van de footer, dus staat er over de hele pagina * één blauw in plaats van twee. * * De lichtste van de drie is niet vrijer te kiezen dan dit. Wit op #1b6f9f * komt op 5,5:1 uit en de secundaire tekst (90% wit) op 4,9:1 — allebei ruim * boven de 4,5:1 van WCAG AA. Eén tint lichter en die secundaire tekst zakt * eronder, en dan is het vlak vrolijker maar de tekst erop slechter te lezen. */ --vpDiep: #0f5482; --vpDiepMidden: #17699e; --vpDiepLicht: #1b6f9f; /* De kleur waar het blok onderaan op eindigt: die van de bovenkant van de footer (--kleurFooter in main.css), zodat de twee in elkaar overlopen zonder zichtbare naad. Dezelfde waarde als --vpDiepMidden hierboven; hij staat apart omdat het hier om de aansluiting gaat en niet om de kleur. */ --vpFooterAansluiting: #17699e; --vpZacht: #f7fafc; --vpLijn: #e6ecf2; --vpLijnDonker: #d7e3ec; --vpRand: 18px; --vpRandGroot: 28px; /* Eén verticale maat voor alle secties. Meebewegend met de breedte, zodat een telefoon niet dezelfde witruimte van 110px krijgt als een monitor. */ --vpSectie: clamp(60px, 7.5vw, 108px); } /* * De hero loopt van rand tot rand en zet zijn eigen ruimte bovenaan. De * standaard bovenmarge van het inhoudsgebied moet er hier dus af. */ .siteInhoud { padding-top: 0; } /* ================================================================== * 0b. De onthulling * * Elementen met .vpOnthul komen omhoog zodra ze in beeld staan. De beginstand * (opacity 0) hoort in CSS: zou inc/js/front-page.js hem zetten, dan staat het * element eerst even gewoon in beeld — de scripts staan met defer in de voet — * en knippert het daarna weg. * * Maar in CSS betekent die beginstand onzichtbare inhoud voor wie geen * JavaScript heeft. Vandaar `.jsAan`, dat samitAssets::jsVlag() in de * zet: zonder JavaScript staat alles er meteen. * * Het vangnet erin: draait het script wel maar animeert het niet — Motion niet * ingeladen, een fout in front-page.js — dan komt de inhoud na 2,5 seconde * alsnog in beeld. Een animatie die niet loopt mag nooit betekenen dat er niets * staat. * ================================================================== */ .jsAan .vpOnthul { animation: vpOnthulVangnet 400ms ease 2.5s forwards; opacity: 0; } /* * Zodra front-page.js draait én kan animeren, gaat het vangnet eruit. Dat is * niet alleen opruimen: zou het blijven staan, dan is een kaart onder de vouw na * 2,5 seconde al in beeld gezet en komt hij bij het scrollen nóg een keer * opzetten. Eén van de twee moet de baas zijn, en dat is het script — als het * er is. Dezelfde klasse zet ook de stappenteller en het meelopende lijntje aan; * zie sectie 6. */ .jsAan.vpOnthulActief .vpOnthul { animation: none; } @keyframes vpOnthulVangnet { to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .jsAan .vpOnthul { animation: none; opacity: 1; } } /* * Op papier is er geen scrollpositie en dus geen moment waarop iets in beeld * komt. Zonder deze regel drukt een browser alles onder de vouw af op * opacity 0 — lege vlakken op een blad. */ @media print { .jsAan .vpOnthul { animation: none; opacity: 1; } } /* ================================================================== * 0c. De kop boven een sectie * * Vijf secties hebben dezelfde opbouw: een labeltje, een kop en soms een regel * eronder. Eén klasse, en niet vijf keer dezelfde regels. * ================================================================== */ .sectieKop { max-width: 640px; margin-bottom: clamp(28px, 3.5vw, 44px); } /* De variant met iets rechts ernaast, zoals de pijlknoppen bij de series. */ .sectieKopRij { display: flex; max-width: none; align-items: flex-end; justify-content: space-between; column-gap: 24px; } .sectieLabel { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 6px 14px 6px 11px; border: 1px solid var(--vpLijnDonker); border-radius: var(--randRond); background-color: var(--kleurVlak); color: var(--kleurBlauwDonker); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.04em; line-height: 1.4; text-transform: uppercase; } /* Het oranje stipje ervoor. Een pseudo-element, want het is versiering. */ .sectieLabel::before { content: ""; display: block; width: 7px; height: 7px; flex: none; border-radius: 100%; background-color: var(--kleurOranje); } /* Dezelfde pil op een donker vlak. */ .sectieLabelLicht { border-color: rgb(255 255 255 / 26%); background-color: rgb(255 255 255 / 12%); color: rgb(255 255 255 / 94%); } .sectieTitel { color: var(--kleurTekst); font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1.12; } .sectieTekst { margin-top: 14px; color: var(--kleurTekstZacht); font-size: var(--tekstMd); line-height: 1.55; } /* ================================================================== * 1. Hero * * Een diepblauw vlak van rand tot rand met twee kolommen: links de kop, rechts * de foto met het paneel. De achtergrond bestaat uit drie lagen die alle drie * van CSS zijn — een verloop, twee gloedvlekken en een fijn raster — en dus * geen enkel verzoek naar de server kosten. * ================================================================== */ /* * De twee lichtvlekken zijn achtergrondlagen van de sectie zelf en geen losse * elementen. Dat is met opzet, en het is de tweede versie van deze hero. * * De eerste versie had er twee gepositioneerde 's voor, met * `filter: blur(90px)`, `mix-blend-mode: screen` en een Motion-animatie die ze * langzaam liet rondtrekken. Dat ziet er prachtig uit en het is onbruikbaar: een * vervaagde laag van 620 bij 620 die elke frame verschuift moet elke frame * opnieuw vervaagd worden, en de blendmodus dwingt de browser om de hele * stapelcontext er nog eens overheen te rekenen. Op een gemiddelde laptop loopt * de ventilator aan en hapert het scrollen. * * Een radiaal verloop dat op transparant eindigt heeft van zichzelf al geen * harde rand. De vervaging was dus niet alleen duur maar ook overbodig. Dit * schildert één keer en kost daarna niets meer. */ .hero { position: relative; overflow: hidden; padding-block: clamp(48px, 6vw, 84px) clamp(88px, 9vw, 118px); border-radius: 0 0 var(--vpRandGroot) var(--vpRandGroot); background-color: var(--vpDiep); /* * Twee lichtblauwe gloeden op een blauw verloop, de een helderder dan de * ander. Er stond in de rechteronderhoek even een warm oranje gloed, om dit * vlak niet één kleur te laten zijn — en die is er weer uit. Oranje heeft * geen blauw in zich, dus haalt het over een blauw vlak de verzadiging eruit: * die hoek kwam op #407383 uit, een grijsgroen, precies het grauw waar dit * vlak van af moest. (Zie ook het icoonvlakje in de footer, waar dezelfde * rekensom staat.) De warmte in de hero komt van wat er tóch al oranje is: de * stip in het label, het derde woord van de kop, de knop en de vier vinkjes * in het paneel. * * Verlopen die op transparant eindigen, dus geen filter: blur() en geen * mix-blend-mode — die twee zijn duur zodra er iets bij beweegt, en dat was * de reden dat de twee bewegende gloedvlekken hier eerder uit zijn gehaald. */ background-image: radial-gradient(820px 760px at 6% -20%, rgb(120 200 245 / 40%) 0%, rgb(120 200 245 / 0%) 64%), radial-gradient(720px 660px at 98% 112%, rgb(86 178 236 / 42%) 0%, rgb(86 178 236 / 0%) 62%), linear-gradient(152deg, var(--vpDiep) 0%, var(--vpDiepMidden) 52%, var(--vpDiepLicht) 100%); color: var(--kleurWit); /* Eigen stapelcontext, zodat het decor met z-index: -1 achter de inhoud blijft en niet achter de achtergrond van de pagina verdwijnt. */ isolation: isolate; } .heroInner { position: relative; display: grid; align-items: center; column-gap: clamp(32px, 5vw, 72px); grid-template-columns: minmax(0, 1fr) minmax(0, 440px); } /* --- De tekstkolom ------------------------------------------------ */ .heroLabel { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px; padding: 7px 16px 7px 12px; border: 1px solid rgb(255 255 255 / 18%); border-radius: var(--randRond); background-color: rgb(255 255 255 / 8%); font-size: 0.8125rem; font-weight: 400; line-height: 1.3; } .heroLabelStip { position: relative; display: block; width: 8px; height: 8px; flex: none; border-radius: 100%; background-color: var(--kleurOranje); } /* * Het kringetje dat van het stipje af golft. Eén eigenschap van A naar B in een * lus — dat is CSS-werk en geen reden om Motion aan te spreken. * * Drie keer en niet eeuwig. Het trekt de aandacht bij binnenkomst, en daarna * heeft het zijn werk gedaan; een animatie die de rest van het bezoek doorloopt * houdt de compositor bezig voor niets. */ .heroLabelStip::after { content: ""; position: absolute; inset: 0; border-radius: 100%; animation: heroStipPuls 2.4s ease-out 3; background-color: var(--kleurOranje); } @keyframes heroStipPuls { 0% { opacity: 0.7; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.6); } } @media (prefers-reduced-motion: reduce) { .heroLabelStip::after { animation: none; } } .heroTitel { margin-bottom: 20px; font-size: clamp(2.375rem, 5vw, 3.875rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.04; } /* * Elk woord staat in een doosje met overflow: hidden, zodat het van onder het * masker omhoog kan komen. De padding onderaan is er voor de staartletters: een * `p` of `g` zou anders op de rand van het masker afgekapt worden. De negatieve * marge haalt die padding weer uit de regelhoogte. */ .heroWoord { display: inline-block; overflow: hidden; margin-bottom: -0.14em; padding-bottom: 0.14em; vertical-align: bottom; } .heroWoordInner { display: inline-block; } /* * De beginstand van de kopanimatie. Dezelfde opzet als .vpOnthul hierboven, * maar met een korter vangnet: de kop staat in beeld en mag niet 2,5 seconde * op zich laten wachten als het script hem niet ophaalt. * * De klasse .vpKopKlaar zet front-page.js erop zodra hij de woorden overneemt — * ook als hij ze meteen neerzet in plaats van te animeren. */ .jsAan .heroWoordInner { animation: vpOnthulVangnet 300ms ease 1.2s forwards; opacity: 0; } .jsAan.vpKopKlaar .heroWoordInner { animation: none; opacity: 1; } @media (prefers-reduced-motion: reduce) { .jsAan .heroWoordInner { animation: none; opacity: 1; } } @media print { .jsAan .heroWoordInner { animation: none; opacity: 1; } } .heroWoordNadruk .heroWoordInner { color: var(--kleurOranje); } .heroSubtitel { max-width: 44ch; margin-bottom: 34px; color: rgb(255 255 255 / 90%); font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); font-weight: 300; line-height: 1.5; } .heroKnoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .heroKnop { padding: 14px 26px; border-radius: 10px; box-shadow: 0 14px 30px rgb(245 139 0 / 28%); font-size: var(--tekstMd); } .heroKnopPijl { width: 18px; height: 12px; flex: none; transition: transform var(--duurMd) var(--versnelling); } .heroKnop:hover .heroKnopPijl, .heroKnop:focus-visible .heroKnopPijl { transform: translateX(4px); } .heroKnopLicht { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border: 1px solid rgb(255 255 255 / 26%); border-radius: 10px; color: var(--kleurWit); font-size: var(--tekstMd); font-weight: 500; text-decoration: none; transition: background-color var(--duurMd) ease, border-color var(--duurMd) ease; } .heroKnopLicht:hover, .heroKnopLicht:focus-visible { border-color: rgb(255 255 255 / 45%); background-color: rgb(255 255 255 / 10%); } .heroKnopLichtPijl { width: 5px; height: 8px; flex: none; } /* * De punten uit het paneel, zoals ze in de smalle weergave onder de knoppen * terugkomen. Het paneel zelf staat daar niet in de HTML; deze regels zijn wat * ervan overblijft. */ .heroPunten { display: grid; gap: 11px; margin-top: 30px; } .heroPunt { display: flex; align-items: flex-start; gap: 10px; color: rgb(255 255 255 / 94%); font-size: var(--tekstSm); line-height: 1.35; } .heroPuntVink { width: 17px; height: 17px; flex: none; margin-top: 1px; } /* --- De foto met het paneel --------------------------------------- */ .heroBeeld { position: relative; display: flex; flex-direction: column; align-items: center; } .heroFoto { position: relative; width: 300px; max-width: 100%; } /* * De lichtcirkel achter Sam. Twee dingen in één element: een zachte gloed en * een dunne ring op de rand, die samen de foto van de achtergrond tillen. */ .heroFotoRing { position: absolute; z-index: 0; top: 50%; left: 50%; width: 340px; height: 340px; border: 1px solid rgb(255 255 255 / 14%); border-radius: 100%; background-image: radial-gradient(circle, rgb(255 255 255 / 16%) 0%, rgb(255 255 255 / 0%) 68%); transform: translate(-50%, -50%); } /* * Sam dooft onderaan uit in plaats van afgesneden te worden. * * Het bronbestand loopt met inhoud tot de onderste pixel: er zit geen * transparante marge onder zijn romp. Het paneel eronder staat met een * negatieve marge deels over hem heen, en dat leverde twee dingen op die er als * een fout uitzagen: een kaarsrechte streep door zijn bovenlijf op de bovenrand * van het paneel, en — omdat dat paneel 88% dekt en geen 100% — zijn romp die * er als schaduw dóórheen te zien was. * * Een verloopmasker lost beide op: hij is volledig doorzichtig vóórdat het * paneel begint, dus valt er niets af te snijden en schemert er niets door. Een * masker op een stilstaand element, geen blur en geen mix-blend-mode — zie het * hoofdstuk Ontwerptokens in CLAUDE.md. * * De 92% hangt samen met de -24px van .heroPaneel hieronder: samen zorgen die * ervoor dat het uitdoven precies klaar is waar het paneel begint. Verandert de * ene, dan hoort de andere mee te bewegen. */ .heroFotoBeeld { position: relative; z-index: 1; display: block; width: 100%; height: auto; filter: drop-shadow(0 24px 40px rgb(0 12 26 / 40%)); -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 92%); mask-image: linear-gradient(to bottom, #000 74%, transparent 92%); } /* * De handgeschreven tekst rechtsboven naast Sam. De hero snijdt met * overflow: hidden af wat er buiten valt, dus hij mag gerust een stukje voorbij * zijn kolom steken. */ .heroKrabbel { position: absolute; z-index: 2; top: 26px; right: -78px; width: 132px; height: auto; } .heroPaneel { position: relative; z-index: 3; width: 100%; max-width: 400px; /* * Het paneel schuift onder Sam door, maar minder ver dan eerst (-46px): * zoveel overlap sneed hem tot halverwege zijn romp weg. Zie het masker op * .heroFotoBeeld hierboven — die twee waarden horen bij elkaar. */ margin-top: -24px; padding: 24px 26px 26px; border: 1px solid rgb(255 255 255 / 16%); border-radius: var(--vpRand); /* * Geen backdrop-filter. Die stond hier eerst en gaf een mooi matglaseffect, * maar hij laat de browser bij elke frame opnieuw uitrekenen wat er áchter * het paneel staat — en dat is hier de foto van Sam, die er deels achter * valt. * * Wat ervoor in de plaats komt is een vulling die genoeg dekt om de foto * erachter rustig te houden, met een lichte glans eroverheen. Het verschil * met echt matglas zie je alleen als je de twee naast elkaar legt; het * verschil in rekentijd zie je aan de ventilator. */ background-color: rgb(15 84 130 / 88%); background-image: linear-gradient(160deg, rgb(255 255 255 / 16%) 0%, rgb(255 255 255 / 4%) 100%); box-shadow: 0 26px 60px rgb(4 40 66 / 30%); } .heroPaneelTitel { font-size: 1.375rem; font-weight: 500; line-height: 1.2; } .heroPaneelSubtitel { margin-bottom: 18px; color: rgb(255 255 255 / 88%); font-size: var(--tekstBasis); line-height: 1.3; } .heroPaneelLijst { display: grid; gap: 13px; } .heroPaneelPunt { display: flex; align-items: flex-start; gap: 10px; color: rgb(255 255 255 / 90%); font-size: var(--tekstSm); line-height: 1.3; } .heroPaneelVink { width: 17px; height: 17px; flex: none; margin-top: 1px; } /* --- De kengetallen ------------------------------------------------ * * Een witte kaart die half over de onderrand van het blauw heen hangt. Hij * staat buiten de hero-sectie: die snijdt met overflow: hidden af wat erbuiten * valt, en dat is precies wat hier níet moet gebeuren. * ------------------------------------------------------------------ */ .kengetallenBalk { position: relative; z-index: 2; margin-top: clamp(-72px, -6vw, -56px); } .kengetallen { display: grid; padding: 26px 10px; border: 1px solid var(--vpLijn); border-radius: var(--vpRand); background-color: var(--kleurWit); box-shadow: 0 22px 54px rgb(15 24 74 / 10%); grid-template-columns: repeat(4, minmax(0, 1fr)); } .kengetal { padding-inline: 16px; text-align: center; } .kengetal + .kengetal { border-left: 1px solid var(--vpLijn); } .kengetalWaarde { color: var(--kleurTekst); font-size: clamp(1.75rem, 3vw, 2.375rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1; /* Zonder dit springt de breedte van het getal terwijl het oploopt. */ font-variant-numeric: tabular-nums; } .kengetalAchter { color: var(--kleurOranje); } .kengetalLabel { margin-top: 8px; color: var(--kleurTekstZacht); font-size: var(--tekstXs); line-height: 1.35; } /* ================================================================== * 2. Merkenbalk * ================================================================== */ .merken { padding-block: clamp(44px, 5.5vw, 68px) 0; } .merkenInner { display: flex; align-items: center; column-gap: 36px; } .merkenTitel { max-width: 170px; flex: none; color: var(--kleurTekstZacht); font-size: var(--tekstSm); line-height: 1.4; } /* * De baan waarbinnen geschoven wordt. Het masker laat een logo aan de rand * uitdoven in plaats van het af te kappen; zonder dat zie je de lus omslaan. */ .merkenBaan { overflow: hidden; flex: 1; mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%); } /* * Zonder script schuift er niets en is dit een gewone rij die afbreekt zodra * hij niet meer past. Met script gaat flex-wrap hieronder weer uit: een lus die * afbreekt loopt niet rond. */ .merkenRij { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 16px; row-gap: 12px; } /* * Zodra front-page.js de tweede rij erbij heeft gezet, wordt de baan een spoor * van twee rijen achter elkaar. Ze mogen dan niet meer krimpen en niet meer * afbreken, anders loopt de lus niet rond. */ .merkenBaan[data-samit-schuift] .merkenRij { flex: none; flex-wrap: nowrap; justify-content: flex-start; padding-right: 16px; } .merkenSpoor { display: flex; width: max-content; } .merkKaart { display: flex; width: 148px; height: 74px; flex: none; align-items: center; justify-content: center; border: 1px solid var(--vpLijn); border-radius: 12px; background-color: var(--kleurWit); transition: border-color var(--duurMd) ease; } .merkKaart:hover { border-color: var(--vpLijnDonker); } .merkKaartLink { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; } /* * De logo's staan in grijstinten en komen pas bij hover in hun eigen kleur. Vijf * merkkleuren naast elkaar zouden in deze balk om aandacht vechten met de rest * van de pagina. */ .merkLogo { width: 98px; height: 42px; filter: grayscale(100%); object-fit: contain; opacity: 0.72; transition: filter var(--duurMd) ease, opacity var(--duurMd) ease; } .merkKaart:hover .merkLogo, .merkKaartLink:focus-visible .merkLogo { filter: none; opacity: 1; } /* ================================================================== * 3. Ons assortiment * * Een raster waarin de eerste kaart twee kolommen én twee rijen neemt en de * tweede twee kolommen. De rest vult aan. Welke kaart welk formaat krijgt volgt * uit de volgorde in het veld; zie de template-part. * ================================================================== */ .assortiment { padding-block: var(--vpSectie); } .assortimentRaster { display: grid; gap: 20px; grid-auto-rows: 232px; grid-template-columns: repeat(4, minmax(0, 1fr)); } .categorieKaart { position: relative; display: flex; overflow: hidden; flex-direction: column; border: 1px solid var(--vpLijn); border-radius: var(--vpRand); background-image: linear-gradient(180deg, var(--kleurWit) 0%, var(--vpZacht) 100%); transition: transform var(--duurMd) var(--versnelling), border-color var(--duurMd) ease, box-shadow var(--duurMd) ease; } .categorieKaart:hover, .categorieKaart:focus-within { border-color: var(--vpLijnDonker); box-shadow: 0 22px 44px rgb(15 24 74 / 12%); transform: translateY(-4px); } .categorieKaartGroot { grid-column: span 2; grid-row: span 2; } /* * align-items: stretch en niet center: het beeldvak moet de hoogte van de kaart * krijgen, want daar rekent de max-height van de afbeelding mee. Bij center is * dat vak zo hoog als de foto zelf en steekt die onder de kaart uit. */ .categorieKaartBreed { flex-direction: row-reverse; align-items: stretch; grid-column: span 2; } .categorieKaartBeeld { position: relative; display: flex; min-height: 0; flex: 1; align-items: center; justify-content: center; padding: 20px 20px 8px; } /* * Een zachte gloed achter het apparaat, die bij hover opent. Het staat op een * pseudo-element en niet op de afbeelding zelf: de productfoto's hebben een * doorzichtige achtergrond, dus alles wat erachter staat blijft zichtbaar. */ .categorieKaartBeeld::before { content: ""; position: absolute; top: 50%; left: 50%; width: 78%; height: 78%; border-radius: 100%; background-image: radial-gradient(circle, rgb(35 126 179 / 14%) 0%, rgb(35 126 179 / 0%) 70%); opacity: 0; transform: translate(-50%, -50%) scale(0.8); transition: opacity var(--duurMd) ease, transform 420ms var(--versnelling); } .categorieKaart:hover .categorieKaartBeeld::before, .categorieKaart:focus-within .categorieKaartBeeld::before { opacity: 1; transform: translate(-50%, -50%) scale(1); } .categorieKaartBeeld img { position: relative; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: transform 420ms var(--versnelling); } .categorieKaart:hover .categorieKaartBeeld img, .categorieKaart:focus-within .categorieKaartBeeld img { transform: scale(1.06); } .categorieKaartTekst { padding: 0 20px 20px; } .categorieKaartBreed .categorieKaartTekst { flex: 1; align-self: center; padding: 20px 24px; } .categorieKaartBreed .categorieKaartBeeld { min-height: 0; flex: 0 0 44%; padding: 16px; } .categorieKaartTitel { color: var(--kleurTekst); font-size: var(--tekstMd); font-weight: 500; line-height: 1.2; } .categorieKaartGroot .categorieKaartTitel { font-size: 1.75rem; letter-spacing: -0.015em; } .categorieKaartBreed .categorieKaartTitel { font-size: 1.375rem; } .categorieKaartTagline { margin-top: 6px; color: var(--kleurTekstZacht); font-size: var(--tekstXs); line-height: 1.4; } .categorieKaartGroot .categorieKaartTagline, .categorieKaartBreed .categorieKaartTagline { font-size: var(--tekstBasis); } .categorieKaartKnop { display: inline-flex; align-items: center; gap: 9px; margin-top: 14px; color: var(--kleurBlauw); font-size: var(--tekstSm); font-weight: 500; text-decoration: none; transition: color var(--duurSnel) ease; } /* * De enige link op de kaart, uitgerekt over de hele kaart. Drie losse links — * beeld, titel, knop — zouden één categorie drie keer in de tabvolgorde zetten. */ .categorieKaartKnop::after { content: ""; position: absolute; inset: 0; border-radius: var(--vpRand); } .categorieKaartKnop:hover { color: var(--kleurOranje); } .categorieKaartPijl { width: 18px; height: 12px; flex: none; transition: transform var(--duurMd) var(--versnelling); } .categorieKaart:hover .categorieKaartPijl { transform: translateX(4px); } /* ================================================================== * 3b. De oproep naar de keuzehulp * * De opmaak staat in onderdelen/keuzeoproep.css: dezelfde oproep staat ook boven * het productoverzicht, en die template kent de tokens van deze pagina niet. * Wat hier bijgesteld wordt is alleen de ruimte eronder — die hoort gelijk te * zijn aan die van de secties eromheen, en `--vpSectie` bestaat buiten deze * template niet. Precies waar een onderdeel een variabele voor heeft. * ================================================================== */ .keuzeSectie { --oproepSectie: var(--vpSectie); } /* ================================================================== * 4. Populaire series * * Een rij die opzij schuift. De vierde kaart steekt half voorbij de rand, en * dat is de enige aanwijzing die een bezoeker nodig heeft om te snappen dat er * meer staat. * ================================================================== */ .series { padding-bottom: var(--vpSectie); } .serieBediening { display: flex; flex: none; gap: 10px; } .serieKnop { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--vpLijn); border-radius: 100%; background-color: var(--kleurWit); color: var(--kleurBlauwDonker); cursor: pointer; transition: background-color var(--duurSnel) ease, border-color var(--duurSnel) ease, color var(--duurSnel) ease, opacity var(--duurSnel) ease; } .serieKnop:hover:not(:disabled) { border-color: var(--kleurBlauw); background-color: var(--kleurBlauw); color: var(--kleurWit); } .serieKnop:disabled { cursor: default; opacity: 0.35; } .serieKnopPijl { width: 13px; height: 8px; } /* Eén chevron, twee kanten op gedraaid — dat scheelt een tweede icoon. */ [data-samit-rail-richting="-1"] .serieKnopPijl { transform: rotate(90deg); } [data-samit-rail-richting="1"] .serieKnopPijl { transform: rotate(-90deg); } /* * De scrollbalk staat uit: de half zichtbare kaart, de pijlen en de * voortgangsbalk zeggen samen genoeg, en een grijze balk dwars onder de kaarten * hoort niet bij dit ontwerp. */ .serieBaan { /* * De ruimte links en rechts van de rij: precies zoveel als er naast de * container over is, zodat de eerste kaart op dezelfde lijn begint als alle * andere inhoud. Eén keer vastgelegd, want de scroll-padding hieronder moet * dezelfde waarde hebben. */ --serieMarge: max(20px, calc((100% - 1180px) / 2)); /* * Een container die horizontaal schuift knipt ook verticaal: `overflow-x: * auto` maakt van `overflow-y: visible` vanzelf `auto`, en dat is hier * `hidden`. Zonder ruimte eromheen wordt de schaduw onder een kaart die bij * hover omhoog komt er recht afgesneden. Die ruimte staat als padding op de * rij hieronder (28 boven, 60 onder — de schaduw is 0 20px 40px en de kaart * schuift 4 pixels omhoog); deze marge haalt hem in de pagina weer weg, * zodat de sectie even hoog blijft. */ margin-block: -22px -52px; overflow-x: auto; overflow-y: hidden; /* * Zonder deze regel klikt de browser bij het inladen meteen vast op de * eerste kaart en scrollt hij de marge hierboven weg: de rij staat dan al * een eind opzij voordat er iemand aan gekomen is. */ scroll-padding-inline: var(--serieMarge); scroll-snap-type: x mandatory; scrollbar-width: none; } .serieBaan::-webkit-scrollbar { display: none; } /* * De rij loopt van rand tot rand, maar de eerste kaart begint op de lijn van de * container. Vandaar dat de padding hier meerekent hoeveel ruimte er naast de * container over is, in plaats van een vaste 20px. */ .serieRij { display: flex; column-gap: 22px; padding-block: 28px 60px; padding-inline: var(--serieMarge) 0; } /* * De ruimte áchter de laatste kaart is een leeg flexitem en geen padding-right. * Een browser telt de eindpadding van een flexcontainer niet mee in scrollWidth, * waardoor de laatste kaart aan het eind van de rij tegen de vensterrand plakt * in plaats van op de lijn van de container te eindigen. Een item telt wel mee. * * De tussenruimte gaat eraf, want die staat er dan al voor. */ .serieRij::after { content: ""; flex: 0 0 max(0px, calc(var(--serieMarge) - 22px)); } .serieKaart { flex: 0 0 340px; scroll-snap-align: start; } .serieKaartLink { display: flex; overflow: hidden; height: 100%; flex-direction: column; border: 1px solid var(--vpLijn); border-radius: var(--vpRand); background-color: var(--kleurWit); color: inherit; text-decoration: none; transition: transform var(--duurMd) var(--versnelling), border-color var(--duurMd) ease, box-shadow var(--duurMd) ease; } .serieKaartLink:hover, .serieKaartLink:focus-visible { border-color: var(--vpLijnDonker); box-shadow: 0 20px 40px rgb(15 24 74 / 12%); transform: translateY(-4px); } /* * Een vaste hoogte en geen `aspect-ratio`. Als flexitem in een kolom is de * basismaat van dit vak zijn inhoud, en dan rekt de foto het op tot zijn eigen * hoogte: vier kaarten naast elkaar kregen zo vier verschillende fotohoogtes en * stonden hun titels niet op één lijn. * * Wit en geen verloop, want de productfoto's van de leverancier hebben een * witte achtergrond ingebakken. Op een gekleurd vlak tekent die zich af als een * lichte rechthoek midden op de kaart. */ .serieKaartBeeld { display: flex; height: 210px; flex: none; align-items: center; justify-content: center; padding: 18px; border-bottom: 1px solid var(--vpLijn); background-color: var(--kleurWit); } .serieKaartBeeld img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: transform 420ms var(--versnelling); } .serieKaartLink:hover .serieKaartBeeld img { transform: scale(1.05); } .serieKaartTekst { display: flex; flex: 1 1 auto; flex-direction: column; padding: 16px 20px 18px; row-gap: 12px; } .serieKaartTitel { display: -webkit-box; overflow: hidden; color: var(--kleurTekst); font-size: var(--tekstMd); font-weight: 500; line-height: 1.3; /* * Drie regels, daarna afkappen. Een productnaam als "HP EliteBook 6 G1i 16 * – Intel Core Ultra U5-235U – 512GB SSD – 16GB" past er nooit helemaal in, * en zonder grens is de ene kaart twee keer zo hoog als de andere. Alleen * de -webkit-variant, om dezelfde reden als in onderdelen/kaarten.css: de * ongeprefixte `line-clamp` kent de W3C-validator nog niet. */ -webkit-box-orient: vertical; -webkit-line-clamp: 3; } /* * De prijs staat onderaan de kaart en niet vlak onder de titel. `margin-top: * auto` duwt hem naar beneden, zodat de prijzen van een rij kaarten op één * lijn staan hoe lang de namen erboven ook zijn. */ .serieKaartVoet { display: flex; align-items: center; justify-content: space-between; margin-top: auto; column-gap: 16px; } .serieKaartPrijs { color: var(--kleurBlauw); font-size: var(--tekstLg); font-weight: 500; line-height: 1.2; } /* * De prijs komt uit WooCommerce en brengt zijn eigen opbouw mee: een met * daarin een voor het euroteken, en bij een aanbieding een met de * oude prijs ervoor. Die laatste hoort kleiner en zachter te staan dan de prijs * die telt. */ .serieKaartPrijs del { margin-right: 6px; color: var(--kleurTekstZacht); font-size: var(--tekstBasis); font-weight: 400; } .serieKaartPrijs ins { text-decoration: none; } .serieKaartPijl { width: 18px; height: 12px; flex: none; color: var(--kleurBlauw); transition: transform var(--duurMd) var(--versnelling); } .serieKaartLink:hover .serieKaartPijl { transform: translateX(4px); } /* * De rij is met de muis te verslepen zodra er iets te verslepen valt. Die * voorwaarde staat in JavaScript: een grijphandje boven een rij die al helemaal * in beeld staat, belooft iets wat er niet is. */ .serieBaanSleepbaar { cursor: grab; } .serieBaanSleept { cursor: grabbing; user-select: none; } .serieVoortgangHouder:not(:empty) { margin-top: 24px; } .serieVoortgang { position: relative; overflow: hidden; height: 3px; border-radius: var(--randRond); background-color: var(--vpLijn); } .serieVoortgangBalk { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; border-radius: var(--randRond); background-color: var(--kleurBlauw); } /* ================================================================== * 5. Nieuw naast refurbished * ================================================================== */ /* * Minder onderruimte dan een gewone sectie: hieronder begint het lichtblauwe * vlak van "zo werkt het bij ons", en dat brengt zijn eigen ruimte mee. Twee * hele sectiemarges op elkaar is een gat waar de pagina in wegvalt. */ .vergelijking { padding-bottom: clamp(28px, 3.5vw, 48px); } .vergelijkingPaneel { position: relative; display: grid; overflow: hidden; padding: clamp(30px, 4.5vw, 60px); border-radius: var(--vpRandGroot); background-color: var(--vpDiep); background-image: linear-gradient(148deg, var(--vpDiep) 0%, var(--vpDiepMidden) 58%, var(--vpDiepLicht) 100%); color: var(--kleurWit); column-gap: clamp(32px, 5vw, 72px); grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); isolation: isolate; } .vergelijkingDecor { position: absolute; z-index: -1; inset: 0; background-image: radial-gradient(520px 420px at 92% -12%, rgb(120 200 245 / 32%) 0%, rgb(120 200 245 / 0%) 70%), radial-gradient(420px 340px at -6% 112%, rgb(86 178 236 / 30%) 0%, rgb(86 178 236 / 0%) 70%); } /* Het rijtje is korter dan de kolom ernaast; gecentreerd hangt het niet scheef. */ .vergelijkingTabelHouder { align-self: center; } .vergelijkingTitel { margin-block: 4px 14px; font-size: clamp(1.625rem, 2.9vw, 2.25rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1.14; } .vergelijkingTekst { max-width: 44ch; color: rgb(255 255 255 / 90%); font-size: var(--tekstBasis); line-height: 1.6; } .vergelijkingMeter { margin-top: 32px; } .vergelijkingCijfer { color: var(--kleurOranje); font-size: clamp(3rem, 6.5vw, 4.5rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; } .vergelijkingProcent { font-size: 0.5em; } .vergelijkingCijferLabel { margin-top: 6px; color: rgb(255 255 255 / 88%); font-size: var(--tekstSm); } .vergelijkingStaven { display: grid; max-width: 340px; gap: 16px; margin-top: 28px; } .vergelijkingStaafKop { display: flex; justify-content: space-between; margin-bottom: 8px; color: rgb(255 255 255 / 88%); font-size: var(--tekstXs); } .vergelijkingStaafWaarde { font-variant-numeric: tabular-nums; } .vergelijkingStaafOns .vergelijkingStaafWaarde { color: var(--kleurOranje); font-weight: 500; } .vergelijkingStaafSpoor { display: block; overflow: hidden; height: 8px; border-radius: var(--randRond); background-color: rgb(255 255 255 / 12%); } /* * De breedte komt uit een eigenschap die de template invult: het is een waarde * uit een veld en geen ontwerpkeuze. Zonder script staat het staafje daarmee * meteen goed; met script schuift het van links open. */ .vergelijkingStaafVulling { display: block; width: calc(var(--staaf, 100) * 1%); height: 100%; border-radius: var(--randRond); background-color: rgb(255 255 255 / 32%); transform-origin: left center; } .vergelijkingStaafOns .vergelijkingStaafVulling { background-image: linear-gradient(90deg, var(--kleurOranje) 0%, #ffb552 100%); } /* --- De tabel ------------------------------------------------------ */ .vergelijkingTabel { width: 100%; border-collapse: collapse; } .vergelijkingTabel th, .vergelijkingTabel td { padding: 13px 6px; border-bottom: 1px solid rgb(255 255 255 / 10%); font-weight: 400; text-align: left; } .vergelijkingTabel tbody th { color: rgb(255 255 255 / 90%); font-size: var(--tekstBasis); line-height: 1.35; } .vergelijkingTabel thead th { padding-bottom: 12px; border-bottom-color: rgb(255 255 255 / 22%); color: rgb(255 255 255 / 82%); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; text-align:center; } .vergelijkingKolom { width: 108px; text-align: center; } .vergelijkingTabel td { width: 108px; text-align: center; } /* De eigen kolom krijgt een eigen vlak, zodat het oog weet waar het moet zijn. */ .vergelijkingKolomOns, .vergelijkingCelOns { background-color: rgb(255 255 255 / 6%); } .vergelijkingKolomOns { border-radius: 12px 12px 0 0; color: var(--kleurOranje); } .vergelijkingTabel tbody tr:last-child .vergelijkingCelOns { border-radius: 0 0 12px 12px; } .vergelijkingTabel tbody tr:last-child th, .vergelijkingTabel tbody tr:last-child td { border-bottom: 0; } .vergelijkingPunt { width: 20px; height: 20px; vertical-align: middle; margin:0 auto; } /* ================================================================== * 6. Zo werkt het bij ons * * Links een paneel dat blijft staan, rechts de stappen die één voor één * oplichten. Het lijntje ertussen loopt mee met de scrollpositie. * ================================================================== */ .voordelen { padding-block: var(--vpSectie); background-color: var(--kleurVlak); } .voordelenInner { display: grid; align-items: start; column-gap: clamp(32px, 5vw, 80px); grid-template-columns: minmax(0, 450px) minmax(0, 1fr); } .voordelenPaneelBinnen { position: sticky; top: calc(var(--headerHoogte) + 28px); } .voordelenTitel { margin-block: 4px 26px; color: var(--kleurTekst); font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1.12; } /* * De foto is een uitgeknipte figuur op een doorzichtige achtergrond, dus het * vlak eronder moet uit deze regels komen: zonder achtergrond zou de sectie * erdoorheen schijnen en zweeft er iemand in het niets. */ .voordelenFoto { position: relative; overflow: hidden; border-radius: var(--vpRandGroot); background-image: linear-gradient(170deg, var(--kleurWit) 0%, #dfeaf2 100%); box-shadow: 0 26px 54px rgb(15 24 74 / 16%); } /* * Staand, want dat is wat de foto is; met 4/3 zou er van boven en onder een * flinke hap af gaan. * * De uitsnede van het onderwerp loopt tot de onderste pixel van het bestand: * de man is bij zijn bovenbenen afgesneden. Zonder masker staat daar een * kaarsrechte streep op de onderrand van het kader. Hetzelfde verloop als bij * Sam in de hero en in de voet laat hem uitdoven in het vlak van de kaart. * * Het bestand zelf is opnieuw op 4:5 gezet met het onderwerp in het midden. Het * stond op 44,4% met veertig lege pixels links en honderdnegentien rechts, en * dan staat de man tegen de linkerrand geduwd met een leeg vlak ernaast. */ .voordelenFotoBeeld { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%); mask-image: linear-gradient(to bottom, #000 88%, transparent 100%); } .voordelenTeller { position: absolute; bottom: 20px; left: 20px; display: flex; align-items: center; gap: 12px; padding: 9px 18px; border-radius: var(--randRond); background-color: rgb(1 36 63 / 88%); color: rgb(255 255 255 / 70%); font-size: var(--tekstBasis); font-variant-numeric: tabular-nums; } .voordelenTellerNu { color: var(--kleurOranje); font-size: var(--tekstLg); font-weight: 500; } .voordelenTellerStreep { width: 16px; height: 1px; background-color: rgb(255 255 255 / 40%); } /* --- De stappen ---------------------------------------------------- */ .stappenHouder { position: relative; } .stappenLijst { padding-left: 66px; counter-reset: stap; } .stappenSpoor { position: absolute; z-index: 0; top: 14px; bottom: 14px; left: 21px; overflow: hidden; width: 2px; border-radius: 2px; background-color: var(--vpLijnDonker); } .stappenSpoorVulling { position: absolute; inset: 0; background-image: linear-gradient(180deg, var(--kleurBlauw) 0%, var(--kleurOranje) 100%); transform-origin: top center; } /* * De beginstand van het lijntje en het dimmen van de stappen horen alleen te * gelden als er ook echt iets is dat ze weer aanzet. Vandaar de dubbele * voorwaarde: .jsAan (er is JavaScript) én .vpOnthulActief (het script draait en * animeert ook echt). Bij `prefers-reduced-motion` staat die tweede klasse er * niet, en dan staat alles gewoon op zijn eindstand. */ .jsAan.vpOnthulActief .stappenSpoorVulling { transform: scaleY(0); } .stap { position: relative; padding-bottom: 40px; } /* * Het dimmen gebeurt op de tekst en niet op de
. Een opacity op de hele * stap zet namelijk ook het rondje met het nummer half door zichtbaar — en dan * loopt het lijntje er dwars doorheen. Het rondje hoort altijd dekkend wit te * zijn, of het nu aan de beurt is of niet. * * Niet verder dimmen dan dit: wie niet scrollt maar leest, moet ook de stappen * kunnen lezen die nog niet aan de beurt zijn. */ .jsAan.vpOnthulActief .stapTitel, .jsAan.vpOnthulActief .stapTekst { opacity: 0.55; transition: opacity 350ms ease; } .jsAan.vpOnthulActief .stapActief .stapTitel, .jsAan.vpOnthulActief .stapActief .stapTekst { opacity: 1; } .stap:last-child { padding-bottom: 0; } .stap::before { content: counter(stap, decimal-leading-zero); position: absolute; z-index: 1; top: -3px; left: -66px; display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--vpLijnDonker); border-radius: 100%; background-color: var(--kleurWit); color: var(--kleurTekstZacht); counter-increment: stap; font-size: var(--tekstSm); font-weight: 500; transition: background-color 350ms ease, border-color 350ms ease, box-shadow 350ms ease, color 350ms ease; } .stapActief::before { border-color: var(--kleurOranje); background-color: var(--kleurOranje); box-shadow: 0 0 0 6px rgb(245 139 0 / 14%); color: var(--kleurWit); } /* * Welke stap aanstaat is informatie en geen versiering, dus die volgt de * scrollpositie ook bij `prefers-reduced-motion`. Wat er dan af moet is het * overvloeien: de kleur verspringt, hij kruipt niet. */ @media (prefers-reduced-motion: reduce) { .stap::before, .stapTitel, .stapTekst { transition: none; } } .stapTitel { margin-bottom: 7px; color: var(--kleurTekst); font-size: var(--tekstLg); font-weight: 500; line-height: 1.25; } .stapTekst { max-width: 52ch; color: var(--kleurTekstZacht); line-height: 1.6; } .voordelenSlot { max-width: 58ch; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--vpLijnDonker); color: var(--kleurTekst); font-size: var(--tekstMd); line-height: 1.6; } /* ================================================================== * 7. Beoordelingen * ================================================================== */ /* Zelfde reden, andere kant: het vlak hierboven heeft zijn onderruimte al. */ .reviews { padding-block: clamp(40px, 5vw, 72px) var(--vpSectie); } .reviewsKop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; margin-bottom: clamp(28px, 3.5vw, 42px); gap: 28px; } .reviewsKopTekst { min-width: 0; } .reviewsScore { display: flex; flex: none; align-items: center; gap: 18px; padding: 16px 24px; border: 1px solid var(--vpLijn); border-radius: var(--vpRand); background-color: var(--kleurVlak); } .reviewsScoreCijfer { color: var(--kleurBlauwDonker); font-size: 2.75rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; } .reviewsSterren { display: flex; gap: 3px; color: var(--kleurOranje); } .reviewsSter { width: 16px; height: 15px; } .reviewsScoreLabel { margin-top: 7px; color: var(--kleurTekstZacht); font-size: var(--tekstXs); } .reviewsRij { display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .reviewKaart { position: relative; display: flex; flex-direction: column; padding: 28px 26px 26px; border: 1px solid var(--vpLijn); border-radius: var(--vpRand); background-color: var(--kleurWit); transition: transform var(--duurMd) var(--versnelling), box-shadow var(--duurMd) ease; } .reviewKaart:hover { box-shadow: 0 20px 40px rgb(15 24 74 / 10%); transform: translateY(-4px); } .reviewAanhaling { position: absolute; top: 26px; right: 26px; width: 30px; height: 23px; color: #e2edf5; } .reviewSterrenRij { display: flex; gap: 3px; margin-bottom: 16px; } .reviewSter { width: 15px; height: 14px; color: #dfe4ec; } .reviewSterVol { color: var(--kleurOranje); } .reviewTekst { flex: 1; color: var(--kleurTekst); line-height: 1.6; } .reviewNaam { display: flex; align-items: baseline; gap: 9px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--vpLijn); } .reviewNaamTekst { font-weight: 500; } .reviewPlaats { color: var(--kleurTekstZacht); font-size: var(--tekstXs); } /* ================================================================== * 8. Veelgestelde vragen * ================================================================== */ .vragen { padding-bottom: var(--vpSectie); } .vragenInner { display: grid; align-items: start; column-gap: clamp(32px, 5vw, 72px); grid-template-columns: minmax(0, 380px) minmax(0, 1fr); } .vragenKop { position: sticky; top: calc(var(--headerHoogte) + 28px); margin-bottom: 0; } .vragenKnop { margin-top: 24px; } .vragenKnopPijl { width: 18px; height: 12px; flex: none; } .vragenLijst { display: grid; gap: 12px; } .vraag { border: 1px solid var(--vpLijn); border-radius: 14px; background-color: var(--kleurWit); transition: border-color var(--duurMd) ease, box-shadow var(--duurMd) ease; } .vraag[open] { border-color: var(--vpLijnDonker); box-shadow: 0 14px 34px rgb(15 24 74 / 8%); } .vraagKnop { display: flex; align-items: center; justify-content: space-between; padding: 17px 20px; color: var(--kleurTekst); column-gap: 18px; cursor: pointer; font-size: var(--tekstMd); font-weight: 500; line-height: 1.35; /* Het driehoekje van de browser weg; er staat een eigen chevron in de knop. */ list-style: none; } .vraagKnop::-webkit-details-marker { display: none; } .vraagPijl { display: inline-flex; width: 32px; height: 32px; flex: none; align-items: center; justify-content: center; border-radius: 100%; background-color: var(--kleurVlak); color: var(--kleurBlauwDonker); transition: background-color var(--duurMd) ease, color var(--duurMd) ease, transform var(--duurMd) var(--versnelling); } .vraagPijl svg { width: 12px; height: 7px; } .vraag[open] .vraagPijl { background-color: var(--kleurBlauw); color: var(--kleurWit); transform: rotate(180deg); } .vraagAntwoord { overflow: hidden; } .vraagAntwoordBinnen { padding: 0 20px 20px; color: var(--kleurTekstZacht); } /* ================================================================== * 9. Blogartikelen * * De kaarten zelf staan in onderdelen/kaarten.css — dezelfde als op /blog, in * hetzelfde raster. Hier staat alleen wat de sectie eromheen nodig heeft. * ================================================================== */ .voorpaginaBlog { padding-bottom: var(--vpSectie); } /* * Drie vaste kolommen en niet het `auto-fill` van /blog. Daar staan er tien op * een pagina en vult elke rij zich vanzelf; hier zijn het er precies drie, en * dan levert twee kolommen een losse kaart op een halfvolle tweede rij op. * Onder 860 pixels worden drie kolommen te smal voor beeld plus samenvatting, * en gaan ze onder elkaar. */ .voorpaginaBlog .berichtRaster { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* De link naar het overzicht, rechts naast de kop. */ .blogAlleLink { display: inline-flex; flex: none; align-items: center; padding-bottom: 6px; color: var(--kleurBlauw); column-gap: 10px; font-size: var(--tekstBasis); font-weight: 500; text-decoration: none; } .blogAlleLink:hover, .blogAlleLink:focus-visible { color: var(--kleurBlauwDonker); } .blogAlleLink span { text-decoration: underline; text-underline-offset: 3px; } .blogAlleLinkPijl { width: 18px; height: 12px; flex: none; transition: transform var(--duurMd) var(--versnelling); } .blogAlleLink:hover .blogAlleLinkPijl { transform: translateX(4px); } /* ================================================================== * 10. Het blok onderaan * * Het verloop eindigt op de kleur van de footer, zodat de twee zonder naad in * elkaar overlopen. * ================================================================== */ .slotblok { position: relative; overflow: hidden; padding-block: clamp(52px, 6.5vw, 84px); border-radius: var(--vpRandGroot) var(--vpRandGroot) 0 0; background-color: var(--vpDiep); /* * Twee lagen, en niet één verloop van 162 graden. Dat schuine verloop liep * naar de kleur van de footer toe, maar niet over de hele onderrand: bij een * hoek van 18 graden liggen de linker- en de rechteronderhoek bijna de helft * van de verloopas van elkaar, dus was de naad links donkerder dan rechts. * Nu doet de rechte laag de aansluiting — de onderrand is over de volle * breedte precies --vpFooterAansluiting — en zet de schuine laag daar de * scheefheid bovenop, uitlopend op transparant vóór de onderrand. */ background-image: linear-gradient(158deg, rgb(23 86 140 / 55%) 0%, rgb(23 86 140 / 0%) 62%), linear-gradient(180deg, var(--vpDiep) 0%, var(--vpDiepMidden) 52%, var(--vpFooterAansluiting) 100%); color: var(--kleurWit); isolation: isolate; } .slotblokDecor { position: absolute; z-index: -1; inset: 0; pointer-events: none; } /* * Zonder blur, om dezelfde reden als bij de hero: het verloop is de vervaging. * * En lichtblauw in plaats van oranje, om dezelfde reden als daar. Nagemeten kwam * de rechterbovenhoek van dit blok met een oranje gloed op #3D6877 uit — * verzadiging 0,32, waar de rest van het vlak op 0,75 staat. Oranje heeft geen * blauw in zich, dus haalt het over blauw de verzadiging eruit, en een blauw dat * zijn verzadiging kwijt is is precies wat grauw betekent. De warmte in dit blok * komt van de oranje knop erin. */ .slotblokGloed { position: absolute; top: -260px; right: -180px; width: 760px; height: 700px; border-radius: 100%; background-image: radial-gradient(circle, rgb(86 178 236 / 34%) 0%, rgb(86 178 236 / 0%) 66%); } .slotblokInner { display: flex; align-items: center; justify-content: space-between; column-gap: clamp(28px, 4vw, 56px); } .slotblokTitel { max-width: 17ch; font-size: clamp(1.75rem, 3.4vw, 2.625rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; } .slotblokRegel { max-width: 52ch; margin-top: 16px; color: rgb(255 255 255 / 90%); font-size: var(--tekstMd); line-height: 1.6; } .slotblokKnoppen { display: flex; flex-wrap: wrap; align-items: center; margin-top: 30px; gap: 16px 30px; } .slotblokKnop { padding: 14px 26px; border-radius: 10px; box-shadow: 0 14px 30px rgb(245 139 0 / 26%); font-size: var(--tekstMd); } .slotblokKnopPijl { width: 18px; height: 12px; flex: none; transition: transform var(--duurMd) var(--versnelling); } .slotblokKnop:hover .slotblokKnopPijl { transform: translateX(4px); } .slotblokBellenRegel { display: block; margin-bottom: 4px; color: rgb(255 255 255 / 84%); font-size: var(--tekstXs); } .slotblokNummer { display: inline-flex; align-items: center; gap: 9px; color: var(--kleurWit); font-size: 1.125rem; font-weight: 500; text-decoration: none; transition: color var(--duurSnel) ease; } .slotblokNummer:hover { color: var(--kleurOranje); } .slotblokNummerIcoon { width: 16px; height: 16px; flex: none; } .slotblokFoto { width: 230px; flex: none; line-height: 0; } .slotblokFotoBeeld { width: 100%; height: auto; filter: drop-shadow(0 22px 36px rgb(0 12 26 / 35%)); } /* ================================================================== * Vrije tekst uit de editor * ================================================================== */ .voorpaginaVrijeTekst { margin-block: var(--vpSectie); } /* ================================================================== * 11. Responsief * * De breekpunten volgen die van de apparaatweergave: 1024 (desktop wordt * mobiel) en 767 (mobiel wordt smal). Wat daartussen zit — 900 — gaat over * kolommen die naast elkaar niet meer passen, en niet over een andere HTML. * ================================================================== */ @media (width <= 1120px) { .heroKrabbel { right: -40px; width: 112px; } } /* * De tabletweergave, 768 tot 1024. Bijna alles wat hier staat komt op hetzelfde * neer: een kolom die op de desktop naast een andere staat, houdt zijn * desktopbreedte niet als hij eronder komt. Dat leverde op een tablet van 900 * een pagina op met de inhoud in een strook aan de linkerkant en de rechterhelft * leeg. Waar twee kolommen naast elkaar blijven passen blijven ze staan, en waar * ze onder elkaar gaan rekken ze op tot de volle breedte. */ @media (width <= 1024px) { .heroInner { row-gap: 44px; grid-template-columns: minmax(0, 1fr); } /* * De kop stond hier op 620 pixels: de breedte die hij naast de foto had. * Onder elkaar hoort hij de volle breedte te nemen, anders breekt hij in * twee smalle regels af terwijl de halve hero ernaast leeg is. De * leesbreedte van de zin eronder blijft geregeld door de 44ch op * .heroSubtitel. */ .heroTekst { max-width: none; } /* Naast elkaar in plaats van onder elkaar: de foto is hier smaller en er is ruimte over naast het paneel. */ .heroBeeld { flex-direction: row; align-items: center; column-gap: 28px; } /* * De ring is 30 pixels breder dan de foto en staat gecentreerd, dus stak hij * de paginamarge in: de cirkel begon op 5 pixels van de schermrand en las * daarmee als afgesneden. Deze marge zet hem terug binnen de lijn van de * inhoud. */ .heroFoto { width: 220px; flex: none; margin-inline-start: 16px; } .heroFotoRing { width: 250px; height: 250px; } /* * Het masker onder Sam bestaat om hem onder het paneel te laten verdwijnen * (zie .heroFotoBeeld). Hier staat dat paneel ernaast en niet eronder, en * dan dooft hij midden op zijn romp uit met niets eronder. Alleen de * onderrand blijft dus zacht: genoeg om de rechte streep uit het bestand * weg te halen. */ .heroFotoBeeld { -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent 100%); mask-image: linear-gradient(to bottom, #000 90%, transparent 100%); } .heroPaneel { max-width: none; margin-top: 0; } /* Het paneel is hier anderhalf keer zo breed als op desktop, en vier punten onder elkaar laten de rechterhelft ervan leeg. Twee kolommen zodra er 230 pixels per punt is, en anders vanzelf weer één. */ .heroPaneelLijst { column-gap: 24px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } /* * Twee kolommen met vier gelijke kaarten. De grote kaart nam er twee van de * twee en werd daarmee 860 pixels breed met een foto van 300 in het midden; * de brede kaart eronder deed hetzelfde nog een keer. De nadruk op de eerste * kaart komt hier van zijn grotere kop. */ .assortimentRaster { grid-auto-rows: 300px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .categorieKaartGroot, .categorieKaartBreed { grid-column: auto; grid-row: auto; } /* Staand in plaats van liggend: over één kolom van 420 is er geen ruimte voor een foto naast de tekst. */ .categorieKaartBreed { flex-direction: column; align-items: stretch; } .categorieKaartBreed .categorieKaartBeeld { flex: 1; padding: 20px 20px 8px; } /* align-self blijft anders op center staan, en dan is de tekst van deze ene kaart smaller dan die van de kaart ernaast. */ .categorieKaartBreed .categorieKaartTekst { flex: none; align-self: stretch; padding: 0 20px 20px; } .vergelijkingPaneel { row-gap: 40px; grid-template-columns: minmax(0, 1fr); } /* * De tekstkolom gaat zelf in twee: het verhaal links, het percentage met de * staven ernaast. Onder elkaar bleef die kolom op de 44ch van * .vergelijkingTekst staan, en dan ligt de rechterhelft van het paneel leeg * met een tabel eronder die er ook niet uit komt. */ .vergelijkingTekstKolom { display: grid; align-items: start; column-gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 46ch) minmax(0, 1fr); } /* Een rasterkind wordt geblokkeerd: zonder justify-self rekt het pilletje, dat van zichzelf inline-flex is, over de volle breedte uit. */ .vergelijkingTekstKolom > .sectieLabel { grid-column: 1 / -1; justify-self: start; } .vergelijkingTitel { grid-column: 1 / -1; } .vergelijkingMeter { margin-top: 0; grid-column: 2; } .vergelijkingStaven { max-width: none; } /* * Over de volle breedte zouden de twee kolommen een halve paneelbreedte van * hun regel af komen te staan, en links uitgelijnd blijft er een gat naast * staan. Een tabel is een blok op zichzelf, dus mag hij midden onder de * tekst hangen. Met auto-marges en niet met justify-self: dat laatste laat * een grid-item naar zijn inhoud krimpen, en de tabel erin rekent met * width: 100%. */ .vergelijkingTabelHouder { max-width: 620px; margin-inline: auto; } /* * De twee kolommen blijven staan, met een smallere foto. Onder elkaar werd * die foto 520 bij 650 met de halve breedte ernaast leeg, en begon de eerste * stap pas na een schermlengte foto. */ .voordelenInner { column-gap: clamp(28px, 4vw, 48px); grid-template-columns: minmax(0, 300px) minmax(0, 1fr); } .vragenInner { row-gap: 40px; grid-template-columns: minmax(0, 1fr); } /* Zonder tweede kolom is er niets meer om langs te blijven staan. */ .vragenKop { position: static; } .reviewsRij { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Bij een oneven aantal blijft de laatste kaart alleen op een halve rij achter; over de volle breedte staat er tenminste iets. */ .reviewKaart:last-child:nth-child(odd) { grid-column: 1 / -1; } /* * Naast de foto is er ruimte voor twee regels in plaats van drie: op 17ch * brak de kop hier in drie korte regels af met de halve kolom ernaast leeg. * De breedte komt nu van de 52ch van .slotblokRegel eronder. */ .slotblokTitel { max-width: none; } .slotblokFoto { width: 200px; } } @media (width <= 860px) { .voorpaginaBlog .berichtRaster { grid-template-columns: minmax(0, 1fr); } .merkenInner { flex-direction: column; row-gap: 20px; } .merkenTitel { max-width: none; text-align: center; } .merkenBaan { width: 100%; } } @media (width <= 767px) { .kengetallen { padding: 20px 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; } /* Met twee kolommen hoort de scheidslijn tussen de kolommen te staan, niet links van elke kaart. */ .kengetal + .kengetal { border-left: 0; } .kengetal:nth-child(even) { border-left: 1px solid var(--vpLijn); } .sectieKopRij { flex-direction: column; align-items: flex-start; row-gap: 18px; } .assortimentRaster { grid-auto-rows: auto; grid-template-columns: minmax(0, 1fr); } .categorieKaart, .categorieKaartGroot, .categorieKaartBreed { min-height: 280px; grid-column: auto; grid-row: auto; } .categorieKaartGroot .categorieKaartTitel { font-size: 1.5rem; } .serieKaart { flex: 0 0 268px; } .serieKaartBeeld { height: 172px; } .serieRij { column-gap: 16px; } /* Terug naar één kolom: naast een verhaal van 44ch is hier geen plek meer voor de meter. */ .vergelijkingTekstKolom { display: block; } .vergelijkingMeter { margin-top: 32px; } .vergelijkingKolom, .vergelijkingTabel td { width: 76px; } .vergelijkingTabel thead th { font-size: 0.625rem; letter-spacing: 0.04em; } .voordelenInner { row-gap: 40px; grid-template-columns: minmax(0, 1fr); } /* Zonder tweede kolom is er niets meer om langs te blijven staan. */ .voordelenPaneelBinnen { position: static; } /* De foto is hier het enige in zijn rij: zonder grens wordt hij zo breed als de pagina en daarmee ruim een schermlengte hoog. */ .voordelenFoto { max-width: 520px; } .stappenLijst { padding-left: 54px; } .stappenSpoor { left: 17px; } .stap::before { left: -54px; width: 36px; height: 36px; font-size: var(--tekstXs); } .reviewsRij { grid-template-columns: minmax(0, 1fr); } .reviewsKop { align-items: flex-start; } .slotblokInner { flex-direction: column; align-items: flex-start; row-gap: 32px; } .slotblokFoto { display: none; } } /* * Op papier heeft niets van dit alles zin: geen gloed, geen donkere vlakken die * een inktpatroon leegdrukken, geen sticky kolom. */ @media print { .hero, .vergelijkingPaneel, .slotblok { background: none; color: #000; } .slotblokDecor, .vergelijkingDecor, .heroFotoRing { display: none; } .voordelenPaneelBinnen, .vragenKop { position: static; } }