/* ========================================================================== Cookie Banner Styling ========================================================================== Let op: kleuren worden NIET hier vastgelegd, die komen als inline-style vanuit PHP (class-banner.php), omdat ze per klant instelbaar zijn. Dit bestand regelt alleen positionering, spacing en structuur. ========================================================================== */ .scc-banner { position: fixed; z-index: 999999; /* boven vrijwel alle theme-elementen, incl. sticky headers */ padding: 20px; box-shadow: 0 2px 16px rgba( 0, 0, 0, 0.2 ); /* Bewust GEEN font-family hier: door dit leeg te laten, erft de banner automatisch het lettertype van het WordPress-thema van de site (via de standaard CSS-inheritance van de ). Zo past de banner zich vanzelf aan het merk van elke klant aan, zonder dat je dit per site hoeft in te stellen. */ font-size: 14px; line-height: 1.5; box-sizing: border-box; } /* [hidden] is een standaard HTML-attribuut; de browser verbergt het element automatisch. We gebruiken dit i.p.v. display:none in CSS, zodat JavaScript het simpelweg kan verwijderen/toevoegen zonder CSS-classes te managen. */ .scc-banner[hidden] { display: none; } /* Onderaan, volledige breedte: de "klassieke" balk-layout. left/right/bottom worden hier vastgezet in CSS; offset/breedte worden voor deze variant bewust genegeerd (zie class-banner.php). */ .scc-position-bottom-full { left: 0; right: 0; bottom: 0; } /* Gecentreerd, zwevend kaartje onderaan het scherm. left/transform komen uit de inline-style (PHP) voor exacte centrering. width/height: fit-content zorgt dat het kaartje precies zo groot wordt als de tekst nodig heeft -- nooit groter, en nooit uitgerekt door iets in het thema van de site. */ .scc-position-center { border-radius: 12px; width: fit-content; height: fit-content; max-width: min( 420px, calc( 100vw - 40px ) ); } /* De 4 hoek-varianten: allemaal zwevende kaartjes met afgeronde hoeken. top/left/right/bottom worden per stuk ingevuld via inline-style (PHP), afhankelijk van de gekozen offset. width/height: fit-content is de kern van de fix: het kaartje krimpt/groeit mee met de hoeveelheid tekst, in plaats van een vaste/percentage-breedte te forceren die op sommige schermen een veel te hoog kaartje oplevert. */ .scc-position-top-left, .scc-position-top-right, .scc-position-bottom-left, .scc-position-bottom-right { border-radius: 12px; width: fit-content; height: fit-content; min-width: 280px; /* calc(100vw - 40px) voorkomt dat het kaartje op mobiel breder wordt dan het scherm (40px = 2x 20px marge, veiligheidsmarge aan weerszijden) */ max-width: min( 380px, calc( 100vw - 40px ) ); } .scc-banner-content { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; } .scc-banner-text { margin: 0; flex: 1 1 400px; } .scc-banner-buttons { display: flex; gap: 10px; flex-shrink: 0; } /* Bij de smallere, zwevende varianten (hoeken + center) zetten we tekst en knoppen onder elkaar in plaats van naast elkaar, omdat er simpelweg minder horizontale ruimte is dan bij volledige breedte. */ .scc-position-center .scc-banner-content, .scc-position-top-left .scc-banner-content, .scc-position-top-right .scc-banner-content, .scc-position-bottom-left .scc-banner-content, .scc-position-bottom-right .scc-banner-content { flex-direction: column; align-items: stretch; } /* CRUCIALE FIX: .scc-banner-text heeft standaard flex: 1 1 400px, bedoeld als BREEDTE-basis in de horizontale balk-layout. Maar in de kolom-layout hierboven (flex-direction: column) wordt diezelfde 400px opeens als HOOGTE geinterpreteerd -- dat veroorzaakte het veel te hoge kaartje met lege ruimte tussen tekst en knoppen. We resetten de basis daarom naar auto: de tekst wordt precies zo hoog als de inhoud, niets meer. */ .scc-position-center .scc-banner-text, .scc-position-top-left .scc-banner-text, .scc-position-top-right .scc-banner-text, .scc-position-bottom-left .scc-banner-text, .scc-position-bottom-right .scc-banner-text { flex: 0 1 auto; } .scc-position-center .scc-banner-buttons, .scc-position-top-left .scc-banner-buttons, .scc-position-top-right .scc-banner-buttons, .scc-position-bottom-left .scc-banner-buttons, .scc-position-bottom-right .scc-banner-buttons { justify-content: stretch; } .scc-btn { padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: 600; transition: opacity 0.2s ease; white-space: nowrap; } .scc-btn:hover { opacity: 0.85; } .scc-btn-decline { background-color: transparent; color: inherit; border: 1px solid currentColor; } .scc-btn-accept { color: #ffffff; } /* Mobiel: banner-inhoud onder elkaar in plaats van naast elkaar */ @media ( max-width: 600px ) { .scc-banner-content { flex-direction: column; align-items: stretch; } /* Zelfde fix als bij de hoek-varianten: in kolom-layout mag de tekst geen flex-basis van 400px hebben (wordt dan hoogte). */ .scc-banner-text { flex: 0 1 auto; } .scc-banner-buttons { justify-content: stretch; } .scc-btn { flex: 1; } /* Op zeer smalle schermen (bv. telefoon in portrait) is een grote offset (marge vanaf de rand, ingesteld in WP-admin) relatief gezien te veel verloren ruimte, dus verkleinen we die naar 10px. BELANGRIJK: we zetten hier NIET zowel left als right tegelijk -- dat zou de browser dwingen de breedte te berekenen als "volledige beschikbare ruimte", wat width: fit-content teniet doet en een smal-maar-heel-hoog kaartje oplevert (de bug die we hier fixen). In plaats daarvan raken we alleen de kant aan die al gebruikt wordt, via de positie-specifieke classes hieronder. */ .scc-position-top-left, .scc-position-bottom-left { left: 10px !important; } .scc-position-top-right, .scc-position-bottom-right { right: 10px !important; } .scc-position-top-left, .scc-position-top-right, .scc-position-bottom-left, .scc-position-bottom-right { min-width: 0; max-width: calc( 100vw - 20px ); } .scc-position-center { max-width: calc( 100vw - 20px ); } }