/* ========================================================================== Cookiebanner — Complianz in de huisstijl Vier toestanden uit het ontwerp, allemaal op de HTML die Complianz zelf neerzet. Er is niets nagebouwd: de knoppen, de schuifjes en het uitklappen blijven van de plugin, zodat de toestemming blijft werken zoals die hoort. Welke toestand je ziet, hangt aan één klasse. Complianz zet 'cmplz-categories-visible' op de banner zodra je op 'Voorkeuren beheren' klikt, en haalt hem er weer af. Daar hangt het hele verschil tussen de balk en het venster aan: breed + zonder klasse → balk onderaan over de volle breedte breed + mét klasse → venster van 600px in het midden smal + zonder klasse → vel onderaan het scherm smal + mét klasse → hetzelfde vel, met de categorieën erin Alles staat onder '#cmplz-cookiebanner-container'. Dat is één id tegen de klassenketens van de plugin, dus deze regels wegen zwaarder, ook als Complianz zijn eigen banner-CSS ná deze inlaadt. Waar de plugin zelf !important gebruikt, staat het hier ook. ========================================================================== */ /* De hele huisstijl van de banner staat in deze waarden; de rest van het bestand verwijst er alleen naar. Navy draagt alles wat je aanklikt of leest — knoppen, koppen, schuifjes — en het goud is het accent: de lijn bovenaan, de links en het label 'Always Active'. Dat is geen smaakkwestie: goud op wit haalt de leesbaarheidsnorm niet voor tekst van 13 à 14px, en een gevulde gouden knop met wit opschrift evenmin. Als accent naast navy valt dat weg. De iconen staan als data-URI verderop en halen hun kleur dus niet uit deze variabelen. Gaat een kleur om, zoek dan ook op '%230B1F3B' (navy) en '%23C2A14D' (goud). */ #cmplz-cookiebanner-container { --aer-cb-navy: #0B1F3B; --aer-cb-brand: #0B1F3B; --aer-cb-gold: #C2A14D; --aer-cb-gold-soft: #F9F5ED; --aer-cb-text: #3E4C62; --aer-cb-line: #D9DDE4; --aer-cb-footer: #F5F6F7; --aer-cb-switch-off: #CBD5E1; --aer-cb-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --aer-cb-font-title: 'Source Serif 4', Georgia, 'Times New Roman', serif; /* De variabelen van Complianz zelf meteen goedzetten. Wat hiermee al klopt, hoeft verderop niet nog eens overschreven te worden. */ --cmplz_banner_background_color: #ffffff; --cmplz_banner_border_color: var( --aer-cb-line ); --cmplz_text_color: var( --aer-cb-text ); --cmplz_hyperlink_color: var( --aer-cb-gold ); --cmplz_button_accept_background_color: var( --aer-cb-brand ); --cmplz_button_accept_border_color: var( --aer-cb-brand ); --cmplz_button_accept_text_color: #ffffff; --cmplz_button_settings_background_color: #ffffff; --cmplz_button_settings_border_color: var( --aer-cb-brand ); --cmplz_button_settings_text_color: var( --aer-cb-brand ); --cmplz_button_deny_background_color: #ffffff; --cmplz_button_deny_border_color: var( --aer-cb-brand ); --cmplz_button_deny_text_color: var( --aer-cb-brand ); --cmplz_slider_active_color: var( --aer-cb-brand ); --cmplz_slider_inactive_color: var( --aer-cb-switch-off ); --cmplz_slider_bullet_color: #ffffff; } /* --- Het paneel zelf ---------------------------------------------------- */ #cmplz-cookiebanner-container .cmplz-cookiebanner, #cmplz-cookiebanner-container .cmplz-cookiebanner * { box-sizing: border-box; } #cmplz-cookiebanner-container .cmplz-cookiebanner { font-family: var( --aer-cb-font ); color: var( --aer-cb-text ); background: #ffffff !important; letter-spacing: normal; } /* Onderdelen die het ontwerp niet kent. De scheidingslijnen worden hier een border op de voet, en de beheerlinks ('Beheer opties', 'Beheer diensten') staan niet in het ontwerp. De knop 'cmplz-manage-options' is de tweede 'Bekijk voorkeuren' die Complianz voor TCF meelevert; die doet hetzelfde als de knop ernaast. */ #cmplz-cookiebanner-container .cmplz-divider, #cmplz-cookiebanner-container .cmplz-links.cmplz-information, #cmplz-cookiebanner-container .cmplz-btn.cmplz-manage-options { display: none !important; } /* --- Tekst -------------------------------------------------------------- */ /* De volle breedte van het blok eromheen. Complianz rekent de tekst anders naar de ingestelde bannerbreedte (526px - 42px), ongeacht hoe breed het paneel hier werkelijk is; dan breekt de tekst halverwege af. */ #cmplz-cookiebanner-container .cmplz-message { width: 100% !important; max-width: 100% !important; margin: 0 !important; color: var( --aer-cb-text ) !important; font-size: 14px !important; font-weight: 400; line-height: 1.5 !important; } /* De kop in de schreefletter van de huisstijl. 600 is het zwaarste gewicht dat de site van Source Serif 4 inlaadt; vraag je 700, dan rekent de browser er zelf een vet lettertype bij en staat de kop er grover op dan elders. */ #cmplz-cookiebanner-container .cmplz-title { color: var( --aer-cb-navy ) !important; font-family: var( --aer-cb-font-title ) !important; font-weight: 600 !important; text-align: left; } /* Hoogstens twee regels in de balk en op het vel. Een vangnet voor een langere tekst uit de instellingen van Complianz: anders groeit het paneel over het halve scherm. In het venster staat geen beperking — daar hoort de hele tekst te staan en schuift de inhoud desnoods. */ #cmplz-cookiebanner-container .cmplz-cookiebanner:not( .cmplz-categories-visible ) .cmplz-message { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } /* --- Knoppen ------------------------------------------------------------ */ /* Let op: hier staat bewust géén 'display'. Deze selector raakt élke knop, dus een display-waarde hier zou het tonen en verbergen hieronder — en dat van Complianz zelf — overrulen, waardoor alle vijf de knoppen tegelijk in beeld komen. Welke knop zichtbaar is, staat verderop per toestand. */ #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn { align-items: center; justify-content: center; width: auto !important; min-height: 41px !important; height: 41px; margin: 0 !important; padding: 0 24px !important; /* Eén pixel, en dat geldt voor alle vier de toestanden: dit is de enige plek waar de rand van een knop wordt gezet. De knoppen rekenen met 'box-sizing: border-box' (bovenin dit bestand), dus ze blijven precies even hoog — alleen de lijn wordt dunner. */ border-width: 1px !important; border-style: solid !important; border-radius: 0 !important; font-family: var( --aer-cb-font ); font-size: 14px !important; font-weight: 600 !important; line-height: 17px !important; white-space: nowrap; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-accept { background-color: var( --aer-cb-brand ) !important; border-color: var( --aer-cb-brand ) !important; color: #ffffff !important; } #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-deny, #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-view-preferences, #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-save-preferences { background-color: #ffffff !important; border-color: var( --aer-cb-brand ) !important; color: var( --aer-cb-brand ) !important; } #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-accept:hover, #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-accept:focus-visible { background-color: #091829 !important; background-color: color-mix( in srgb, var( --aer-cb-brand ) 82%, #000 ) !important; border-color: color-mix( in srgb, var( --aer-cb-brand ) 82%, #000 ) !important; } #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-deny:hover, #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-deny:focus-visible, #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover, #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-view-preferences:focus-visible, #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover, #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-save-preferences:focus-visible { background-color: color-mix( in srgb, var( --aer-cb-brand ) 8%, #fff ) !important; } /* --- Welke knop wanneer ------------------------------------------------- Drie knoppen per toestand. In de balk opent 'Voorkeuren beheren' het venster; in dat venster is 'Voorkeuren opslaan' zijn vervanger. Weigeren en accepteren staan er altijd. Het hangt aan dezelfde klasse als de rest van de opmaak, en niet aan de inline-stijl die Complianz zelf op die twee knoppen zet. Zo is er één bron voor wat je ziet, en kan de ene toestand de andere niet overlappen. */ #cmplz-cookiebanner-container .cmplz-cookiebanner:not( .cmplz-categories-visible ) .cmplz-btn.cmplz-accept, #cmplz-cookiebanner-container .cmplz-cookiebanner:not( .cmplz-categories-visible ) .cmplz-btn.cmplz-deny, #cmplz-cookiebanner-container .cmplz-cookiebanner:not( .cmplz-categories-visible ) .cmplz-btn.cmplz-view-preferences, #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible .cmplz-btn.cmplz-accept, #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible .cmplz-btn.cmplz-deny, #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible .cmplz-btn.cmplz-save-preferences { display: inline-flex !important; } #cmplz-cookiebanner-container .cmplz-cookiebanner:not( .cmplz-categories-visible ) .cmplz-btn.cmplz-save-preferences, #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible .cmplz-btn.cmplz-view-preferences { display: none !important; } /* In de HTML staat accepteren vooraan; in het ontwerp staat het rechts. Omdraaien met order en niet in de HTML: die komt bij elke update van de plugin terug. Op smalle schermen draait het verderop weer om. */ #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-deny { order: 1; } #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-view-preferences, #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-save-preferences { order: 2; } #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-accept { order: 3; } /* --- Links naar de verklaringen ----------------------------------------- */ /* Complianz zet deze links in de gegenereerde CSS onvoorwaardelijk op display:none; het ontwerp heeft ze wel. */ /* Links uitlijnen: Complianz centreert deze rij. Het omhulsel én de lijst erin moeten het allebei weten, anders staat de lijst alsnog in het midden van een omhulsel dat wél de volle breedte heeft. Op smalle schermen zet de mediaquery onderaan het weer in het midden. */ #cmplz-cookiebanner-container .cmplz-links.cmplz-documents { justify-content: flex-start !important; margin: 0 !important; padding: 0 !important; } #cmplz-cookiebanner-container .cmplz-links.cmplz-documents ul { display: flex !important; flex-wrap: wrap; gap: 16px !important; margin: 0 !important; padding: 0 !important; list-style: none; } /* De volgorde uit het ontwerp: beleid, disclaimer, privacy. In de HTML van Complianz staat de disclaimer (daar 'impressum') achteraan, dus de twee laatste wisselen van plek. */ #cmplz-cookiebanner-container .cmplz-links.cmplz-documents li:nth-child( 2 ) { order: 3; } #cmplz-cookiebanner-container .cmplz-links.cmplz-documents li:nth-child( 3 ) { order: 2; } /* Het lettertype staat er expliciet bij. De Elementor-kit van deze site zet 'font-family: Poppins' op de kale 'a', en een regel op het element zelf wint altijd van wat de banner eromheen doorgeeft — dan staan alleen deze drie links in een ander lettertype dan de rest van het paneel. */ #cmplz-cookiebanner-container .cmplz-links.cmplz-documents .cmplz-link { display: inline-block !important; margin: 0 !important; font-family: var( --aer-cb-font ) !important; color: var( --aer-cb-gold ) !important; font-size: 13px !important; font-weight: 600 !important; line-height: 16px !important; text-decoration: none !important; } #cmplz-cookiebanner-container .cmplz-links.cmplz-documents .cmplz-link:hover, #cmplz-cookiebanner-container .cmplz-links.cmplz-documents .cmplz-link:focus-visible { text-decoration: underline !important; } /* --- Kop: koekje, titel, kruisje ---------------------------------------- */ /* De lege