/** * qa-speciale-momenten.css * QA-fixes voor de pagina "Speciale momenten" om deze 1:1 op de Figma-referentie * te krijgen (nodeId 477:8910). Alle regels gescoped op .fleur-page--momenten * zodat andere pagina's ongemoeid blijven. * * Deze stylesheet wordt automatisch ingeladen (assets/css/*.css). Omdat de * bestandsnaam alfabetisch vóór spec-over-contact.css komt, gebruiken we een * iets hogere selector-specificiteit zodat onderstaande regels alsnog winnen. * * @package FleurChild */ /* ---- Hero-intro: breder tekstblok zodat de introparagraaf op 2 regels wrapt zoals in de Figma (i.p.v. 3 regels bij max-width 760px). ---- */ .fleur-page--momenten .fleur-mom-hero .fleur-mom-hero__intro { max-width: 980px; } /* ========================================================================= MOBIEL (≤981px) — telefoon-layout voor "Speciale momenten". BELANGRIJK: spec-over-contact.css laadt NÁ dit bestand en levert de gezaghebbende desktop-opmaak (o.a. .fleur-mom-hero__title{white-space: nowrap} en .fleur-mom-cta__inner{2 kolommen}, beide als NIET-media regels). Om die op mobiel te overrulen gebruiken we hier bewust 3-klasse-selectoren (…-momenten .fleur-mom-* .fleur-mom-*__*) zodat de specificiteit hoger is dan spec-over-contact's 2-klasse-regels — anders zou de latere-laadvolgorde die winnen. De categorie- en productsliders passen hun kolommen zelf al aan via carousel.css (--per-view). ========================================================================= */ @media (max-width: 981px) { /* SLIDERS: exact 2 tegels per view op mobiel (net als de homepage-collectie). carousel.css zet --per-view op 2 (≤768) én 1.35 (≤560) — die "peek" van 1.35 willen we hier niet. We overrulen alleen de speciale-wrappers (3-klasse- selector, specificiteit hoger dan carousel.css' 1-klasse-regels) zodat andere .fleur-carousel-toepassingen (o.a. chocolade-op-maat review) ongemoeid blijven. Beide sliders (categorieën --sides én producten --header) → 2 per view. */ .fleur-page--momenten .fleur-mom-cats .fleur-carousel, .fleur-page--momenten .fleur-mom-products .fleur-carousel { --per-view: 2; } /* HERO: titel mag wrappen (spec forceert nowrap op desktop) + kleiner. */ .fleur-page--momenten .fleur-mom-hero .fleur-mom-hero__title { white-space: normal; font-size: clamp(30px, 7vw, 40px); line-height: 1.15; } .fleur-page--momenten .fleur-mom-hero .fleur-mom-hero__intro { font-size: 15px; line-height: 1.7; } /* PRODUCTBLOK (Sinterklaas-slider): koprij mag wrappen, kleinere titel. */ .fleur-page--momenten .fleur-mom-products .fleur-carousel__header { flex-wrap: wrap; gap: 12px; margin-bottom: 20px; } .fleur-page--momenten .fleur-mom-products .fleur-mom-products__title { font-size: clamp(26px, 6vw, 32px); } /* TEKSTBLOK: foto boven, tekst eronder; kleinere kop. (pages.css stapelt dit pas ≤860 — hier vullen we 861–981px én zetten we een hogere specificiteit voor de kop.) */ .fleur-page--momenten .fleur-mom-block .fleur-mom-block__inner { grid-template-columns: 1fr; gap: 32px; } .fleur-page--momenten .fleur-mom-block .fleur-mom-block__title { font-size: clamp(28px, 7vw, 40px); line-height: 1.1; } /* CTA-band: forceer één kolom (spec zet dit als niet-media regel op 2 kolommen, wat óók ≤860 de pages.css-stapeling overrulet) + full-width knop. De titel mag hier weer normaal wrappen. */ .fleur-page--momenten .fleur-mom-cta .fleur-mom-cta__inner { grid-template-columns: 1fr; gap: 32px; } .fleur-page--momenten .fleur-mom-cta .fleur-mom-cta__title { font-size: clamp(28px, 7vw, 40px); line-height: 1.1; white-space: normal; } .fleur-page--momenten .fleur-mom-cta .fleur-mom-cta__body { max-width: none; } .fleur-page--momenten .fleur-mom-cta .button.fleur-btn--dark { display: block; width: 100%; text-align: center; } } /* Zeer smalle telefoons: extra ademruimte in de hero-intro. */ @media (max-width: 600px) { .fleur-page--momenten .fleur-mom-hero .fleur-mom-hero__intro { font-size: 14px; } } /* ========================================================================= LANDSCAPE TABLET (982–1219px) — Speciale momenten. De desktoplayout blijft staan (hero met omhoog-overlappende tegel-slider, 2-koloms tekst- en CTA-blokken), maar met krappere witruimte en een MINDER diepe hero→tegel- overlap: op de smallere container vielen de tegels anders té ver op de aubergine band. Doel: tegels ~50–65% op de band, ~40px band zichtbaar erboven, geen gat of overloop. LAADVOLGORDE: spec-over-contact.css laadt NÁ dit bestand en levert de gezaghebbende desktopwaarden (hero-padding 300px / tegel-overlap -254px, én de CTA-titel-nowrap via een min-width:861-regel). Op gelijke specificiteit zou spec dus winnen — daarom gebruiken we hier verhoogde specificiteit (dubbele-klasse `.x.x` = 3 klassen, of 3-klasse-selectoren) zodat onderstaande regels alsnog winnen. Alles strikt binnen 982–1219. ========================================================================= */ @media (min-width: 982px) and (max-width: 1219px) { /* SLIDERS: 4 tegels/kaarten per view — spiegelt desktop én neemt de 3↔4-sprong weg die carousel.css rond 1024px introduceert. 3-klasse- selector wint van carousel.css' 1-klasse --per-view-regels; andere .fleur-carousel-toepassingen blijven ongemoeid. */ .fleur-page--momenten .fleur-mom-cats .fleur-carousel, .fleur-page--momenten .fleur-mom-products .fleur-carousel { --per-view: 4; } /* HERO + TEGELS: minder diepe band-onderruimte (300→240) en minder overlap (-254→-200) dan desktop. Netto: band steekt ~40px boven de tegels uit en ~200px van elke tegel valt op de band (≈50–65% afhankelijk van breedte). Dubbele-klasse-selectoren om spec-over-contact's basis + ≤1024-regels te overrulen. */ .fleur-page--momenten .fleur-mom-hero.fleur-mom-hero { padding-bottom: 240px; } .fleur-page--momenten .fleur-mom-cats.fleur-mom-cats { margin-top: -200px; padding: 0 0 32px; } /* Herotitel mag wrappen i.p.v. desktop-nowrap (voorkomt overloop buiten de smallere container bij een langere titel). 3-klasse wint van spec. */ .fleur-page--momenten .fleur-mom-hero .fleur-mom-hero__title { white-space: normal; } /* PRODUCTBLOK-slider: lange, spatieloze productnamen mogen afbreken zodat ze op de smalle (4-per-view) kaarten niet ónder de winkelwagen-knop door lopen — zelfde bescherming als de mobiele ≤981-regel, hier voor 982–1219. */ .fleur-page--momenten .fleur-mom-products .woocommerce-loop-product__title { overflow-wrap: anywhere; word-break: break-word; hyphens: auto; } /* TEKSTBLOK (foto links + tekst rechts): krappere gutter (56→40) en minder onderruimte (64→48). Feedback B: de foto heeft een vaste aspect-ratio en wordt op de smallere kolom korter dan de tekst → grijze kier op wit. Fix: ratio los + de foto de rijhoogte laten vullen (align-items:stretch + height:100%), tekst verticaal gecentreerd. Titel consistent 44px (geen 40↔55-sprong rond 1024px). */ .fleur-page--momenten .fleur-mom-block { padding: 40px 0 48px; } .fleur-page--momenten .fleur-mom-block__inner { gap: 40px; align-items: stretch; } .fleur-page--momenten .fleur-mom-block__media { height: 100%; aspect-ratio: auto; min-height: 340px; } .fleur-page--momenten .fleur-mom-block__text { align-self: center; } .fleur-page--momenten .fleur-mom-block__title { font-size: 44px; } /* CTA-band: krappere padding (72→48) + gutter (44→40). Zelfde feedback-B-fix voor de foto. De CTA-titel wrapt normaal (desktop dwingt nowrap af via een min-width:861-regel in spec-over-contact → 3-klasse-selector nodig) op 44px zodat 'ie binnen de smallere tekstkolom blijft, geen overloop. */ .fleur-page--momenten .fleur-mom-cta { padding: 48px 0; } .fleur-page--momenten .fleur-mom-cta .fleur-mom-cta__inner { gap: 40px; align-items: stretch; } .fleur-page--momenten .fleur-mom-cta__media { height: 100%; aspect-ratio: auto; min-height: 320px; } .fleur-page--momenten .fleur-mom-cta__text { align-self: center; } .fleur-page--momenten .fleur-mom-cta .fleur-mom-cta__title { white-space: normal; font-size: 44px; } }