/* * GoodFeeling.nl — Homepage hero * Verhuisd uit Code Snippet #99 op 2026-07-24. * Wordt alleen op de betreffende pagina ingeladen. */ /* === Outline stijl voor 3 secundaire CTA's (alle viewports) === */ .kb-advanced-slide a.kb-button.kb-btn51655_6074b3-f8, .kb-advanced-slide a.kb-button.kb-btn51655_3a1608-a6, .kb-advanced-slide a.kb-button.kb-btn51655_abc4f7-a5, a.kb-button.kb-btn51655_6074b3-f8, a.kb-button.kb-btn51655_3a1608-a6, a.kb-button.kb-btn51655_abc4f7-a5 { background: transparent !important; background-color: transparent !important; border: 2px solid #ffffff !important; color: #ffffff !important; transition: background-color .25s ease, color .25s ease; } .kb-advanced-slide a.kb-button.kb-btn51655_6074b3-f8:hover, .kb-advanced-slide a.kb-button.kb-btn51655_3a1608-a6:hover, .kb-advanced-slide a.kb-button.kb-btn51655_abc4f7-a5:hover, a.kb-button.kb-btn51655_6074b3-f8:hover, a.kb-button.kb-btn51655_3a1608-a6:hover, a.kb-button.kb-btn51655_abc4f7-a5:hover { background: #ffffff !important; background-color: #ffffff !important; color: #27a8b2 !important; border-color: #ffffff !important; } /* === Safety net: force slider container heights === */ .kb-advanced-slider-51655_bb72cd-1c, .kb-advanced-slider-51655_bb72cd-1c .splide__track, .kb-advanced-slider-51655_bb72cd-1c .splide__list { min-height: 500px !important; } /* === TABLET + MOBIEL (≤1024px): toon ALLEEN de eerste slide === */ /* Statische hero op mobiel/tablet. De Kadence-slider bevroor mid-transitie waardoor meerdere slides tegelijk zichtbaar bleven (spooktekst). Daarom hier hard: alleen slide 1 tonen, de rest verbergen. Desktop (>1024px) houdt de echte slider. */ @media (max-width: 1024px) { .kb-advanced-slider-51655_bb72cd-1c, .kb-advanced-slider-51655_bb72cd-1c .splide__track, .kb-advanced-slider-51655_bb72cd-1c .splide__list, .kb-advanced-slider-51655_bb72cd-1c .splide__slider { min-height: 460px !important; visibility: visible !important; } /* Eerste slide: zichtbaar en bovenop */ .kb-advanced-slider-51655_bb72cd-1c li.wp-block-kadence-slide:first-child, .kb-advanced-slider-51655_bb72cd-1c .splide__slide:first-child { display: block !important; visibility: visible !important; opacity: 1 !important; z-index: 2 !important; position: relative !important; } /* Overige slides volledig verbergen (voorkomt over-elkaar-schemeren) */ .kb-advanced-slider-51655_bb72cd-1c li.wp-block-kadence-slide:not(:first-child), .kb-advanced-slider-51655_bb72cd-1c .splide__slide:not(:first-child) { display: none !important; } /* Pijlen + paginabolletjes weg op mobiel (statische hero) */ .kb-advanced-slider-51655_bb72cd-1c .splide__arrows, .kb-advanced-slider-51655_bb72cd-1c .splide__pagination { display: none !important; } .kb-advanced-slider-51655_bb72cd-1c .kb-advanced-slide-inner-wrap { min-height: 460px !important; } } /* === MOBIEL only (≤767px): compacter + image kleiner === */ @media (max-width: 767px) { /* Slider compacter (was 420 → 320) */ .kb-advanced-slider-51655_bb72cd-1c, .kb-advanced-slider-51655_bb72cd-1c .splide__track, .kb-advanced-slider-51655_bb72cd-1c .splide__list, .kb-advanced-slider-51655_bb72cd-1c .kb-advanced-slide-inner-wrap { min-height: 320px !important; } /* Image cover: vult slider verticaal volledig (auto 100% = 100% hoogte, auto breedte), zijkanten worden gecropt — geen letterbox meer */ .kb-advanced-slider-51655_bb72cd-1c .kb-advanced-slide-inner-wrap { background-size: cover !important; background-repeat: no-repeat !important; background-position: center center !important; /* Kadence default = 10rem (160px) padding-top/bottom — op mobiel tot 0 teruggebracht */ padding-top: 0 !important; } /* Spacer bovenaan elke slide (50px) ook weg op mobiel */ .kb-advanced-slider-51655_bb72cd-1c .kb-advanced-slide-inner > .wp-block-spacer:first-child { height: 0 !important; min-height: 0 !important; } /* H1 kleiner */ .kb-advanced-slider-51655_bb72cd-1c h1.wp-block-kadence-advancedheading { font-size: 28px !important; line-height: 1.2 !important; padding: 0 12px !important; } /* Subtitle kleiner */ .kb-advanced-slider-51655_bb72cd-1c h6.wp-block-kadence-advancedheading { font-size: 15px !important; line-height: 1.45 !important; padding: 0 16px !important; } /* Knoppen gestapeld + full-width */ .kb-advanced-slider-51655_bb72cd-1c .wp-block-kadence-advancedbtn { flex-direction: column !important; width: 100% !important; padding: 0 24px !important; gap: 10px !important; } .kb-advanced-slider-51655_bb72cd-1c .wp-block-kadence-advancedbtn > * { width: 100% !important; } .kb-advanced-slider-51655_bb72cd-1c a.kb-button { width: 100% !important; min-height: 46px !important; padding-top: 12px !important; padding-bottom: 12px !important; } } /* === Scrim over de statische hero (max 1024px) · 2026-08-28, verloop bijgesteld 2026-08-31 · zuil gf-menu === Meting zuil mobiel (overdracht D-hero): lichtste pixel achter de H1 was 1,02:1 tegen norm 3:1; de leesbaarheid hing volledig op de text-shadow. De bestaande Kadence-overlay (vlak zwart, opacity 0.2) is hier een verloop geworden. Foto-onafhankelijk, dus een volgende herofoto kan dit niet meer breken. 31-08-2026: verloop van .45 / .15 op 60% / 0 naar .5 / .4 op 50% / .05. De ondertitel (h6, 15px wit, op ongeveer een kwart van de vakhoogte) stond in de LICHTE stand op 3,20 tot 3,70:1 tegen een norm van 4,5:1, met tot 55% van de gliefpunten onder de norm; na de bijstelling 4,62 tot 5,29:1 op 312 t/m 1024, nul punten onder de norm. Gemeten door gf-img op gecomponeerde beeldpunten. Een lichtere tussenstap (.45 -> .35 op 45%) is ook gemeten en haalt het niet. Twee dingen om te weten voor je hieraan sleutelt: 1. Dit blok verandert alleen de LICHTE stand. In donker wint gf-custom.css:2910 (body.color-switch-dark ..., specificiteit 0,3,1) van deze selector (0,2,0), ook al staat er aan beide kanten !important. Twee !important-regels beslissen alsnog op specificiteit. Boven 1024px geldt gf-custom.css:2817. 2. Onder 1024px is de hero statisch: het blok "TABLET + MOBIEL (<=1024px)" hierboven verbergt slide 2 en 3. Deze scrim raakt dus precies een slide. */ @media (max-width: 1024px) { .kb-advanced-slider-51655_bb72cd-1c .kb-advanced-slide-overlay { background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.4) 50%, rgba(0,0,0,.05) 100%) !important; opacity: 1 !important; } } /* === Staande uitsnede voor de mobiele hero (max 480px + band 768-782px) · 2026-08-31 · zuil gf-menu === Slide 1 draaide ook op een telefoon op de liggende bronfoto (media 51656, 2048x1024). Met `cover` in een vak van ~390x552 werd die zo ver opgeschaald dat de persoon half buiten beeld viel. gf-img heeft er een staande uitsnede van gemaakt: media 110303, 780x1104, dus precies 2x op maat bij DPR 2. Let op: pak de VOLLE maat, niet de WordPress-afgeleide -768x1087.webp; met die afgeleide schaalt de browser alsnog op en is de hele exercitie voor niets. Kadence zet de achtergrond in twee regels neer, (0,2,0) en (0,3,0). Daarom hier allebei die selectors plus !important, anders wint Kadence. BIJGESTELD 31-08 (meting gf-img, nagerekend door gf-menu). Het herovak is niet overal staand. Gemeten doosmaten en wat `cover` van de 780x1104 overhoudt: 390 -> 390x518 (0,75) bovenste beeldrij 34 160 px lucht boven het hoofd 480 -> 480x479 (1,00) bovenste beeldrij 163 31 px lucht 520 -> 520x479 (1,09) bovenste beeldrij 193 1 px <- kantelpunt 600 -> 600x479 (1,25) bovenste beeldrij 241 hoofd AFGESNEDEN 767 -> 767x423 (1,81) bovenste beeldrij 337 hoofd AFGESNEDEN 768 -> 768x788 (0,98) bovenste beeldrij 152 42 px lucht 782 -> 782x788 (0,99) bovenste beeldrij 159 35 px lucht De bovenkant van haar hoofd ligt op y=194 van de 1104. Tussen 481 en 767 zakt het vak naar een liggende verhouding en snijdt `cover` haar hoofd eraf; daar wint de liggende bronfoto. 480 is de grootste breedte waarop het hoofd heel blijft, en dekt elke telefoon in staande stand (breedste is 430) met marge. De band 768-782 blijft wel op de staande uitsnede: daar is het vak 768x788, dus juist staand. Boven 782 stond hij altijd al op de liggende bronfoto. */ @media (max-width: 480px), (min-width: 768px) and (max-width: 782px) { .wp-block-kadence-slider .kb-slide-51655_526b7c-31 .kb-advanced-slide-inner-wrap, .kb-slide-51655_526b7c-31 .kb-advanced-slide-inner-wrap { background-image: url("https://goodfeeling.nl/wp-content/uploads/2026/08/goodfeeling-home-hero-staand-mobiel.webp") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } }