/* * Tourne brand theme for vanilla-cookieconsent v3. * Loaded AFTER cookieconsent.css, so these overrides win the cascade. * Brand tokens mirror src/scss/base/base.scss: * green #37b4b4 · greendarker #2fa09b · darkgrey #363635 · greydarker #6f7070 * lightgrey #f2f2f2 · greylighter #DEDEDE · white #ffffff · overlay rgba(18,18,17,0.92) * body font FranklinGothicURW · display font Prometo */ #cc-main { /* base palette + type */ --cc-bg: #ffffff; --cc-primary-color: #363635; --cc-secondary-color: #6f7070; --cc-font-family: "FranklinGothicURW", Helvetica, Arial, sans-serif; /* sharp corners to match the site's buttons (border-radius: 0) */ --cc-btn-border-radius: 0; --cc-modal-border-radius: 0; /* primary action = brand green */ --cc-btn-primary-bg: #37b4b4; --cc-btn-primary-border-color: #37b4b4; --cc-btn-primary-color: #ffffff; --cc-btn-primary-hover-bg: #2fa09b; --cc-btn-primary-hover-border-color: #2fa09b; --cc-btn-primary-hover-color: #ffffff; /* secondary action (Reject / Manage) = solid light grey, equal visual weight (GDPR) */ --cc-btn-secondary-bg: #f2f2f2; --cc-btn-secondary-border-color: #f2f2f2; --cc-btn-secondary-color: #363635; --cc-btn-secondary-hover-bg: #DEDEDE; --cc-btn-secondary-hover-border-color: #DEDEDE; --cc-btn-secondary-hover-color: #363635; /* analytics toggle when enabled */ --cc-toggle-on-bg: #37b4b4; --cc-toggle-on-knob-bg: #ffffff; /* links + overlay + category blocks */ --cc-link-color: #2fa09b; --cc-overlay-bg: rgba(0, 0, 0, 0.5); /* transparent-black backdrop for the blocking overlay */ --cc-cookie-category-block-bg: #f2f2f2; --cc-cookie-category-block-border: #f2f2f2; --cc-cookie-category-block-hover-bg: #DEDEDE; --cc-cookie-category-block-hover-border: #DEDEDE; /* stacking: sit below the site header (raised to 100000) but above page content (lowered from the library default of 2147483647) */ --cc-z-index: 10000; } /* modal headings use the brand display font */ #cc-main .cm__title, #cc-main .pm__title { font-family: "Prometo", Helvetica, Arial, sans-serif; } /* The site sets a global `label { display: none }` (src/scss/base/forms.scss) for its placeholder-style forms. v3's category toggle is a , so that rule hides every switch. Restore it inside the CMP scope only. */ #cc-main .section__toggle-wrapper { display: block; } /* --- Overlay layering (disablePageInteraction) ------------------------------- The consent overlay/modal use --cc-z-index (10000, above). The site header is fixed and a direct child of , so raising it above the overlay keeps the logo, burger and language switcher clickable while everything else stays blocked. Order: site header (100000) > consent overlay/modal (10000) > page content (<=3000). Mirrors src/scss/modules/siteHeader.scss (z-index: 10000); loaded after base.css. */ .siteHeader { z-index: 100000; } /* v3's disablePageInteraction forces html/body to height:auto, which collapses the site's percentage-height layout — e.g. the homepage hero spacer (.headerPush, height:100%) goes to 0 and content slides up over the fixed hero. The site relies on html,body{height:100%}, so restore it while the overlay is up (v3's overflow:hidden scroll-lock is left intact). */ html.disable--interaction.show--consent, html.disable--interaction.show--consent body { height: 100% !important; } /* On small screens v3 makes the preferences modal full-screen (top:0), which would sit under the fixed header. Offset it below the header so the close (X), title and buttons stay reachable. */ @media screen and (max-width: 640px) { #cc-main .pm { top: 6.5em; } } /* --- Inline banner on the Privacy/cookies/terms page (entry 516) -------------- #cc-main is rooted into .mainSections (#cc-inline-root) with disablePageInteraction off, so the consent modal must render in the content flow instead of as a fixed, page-blocking overlay — otherwise the terms can't be read/scrolled. The preferences modal (.pm) is left fixed so "Manage preferences" still opens a normal dialog. */ .cc-inline-host { width: 100%; } /* Outer section is a full-width white block (with a little top margin) ONLY while the banner is up; otherwise it collapses to nothing — but stays in the DOM so the footer "Manage preferences" modal can still mount/open here. The inner #cc-inline-root carries .sizeWrapper2, aligning the banner with the terms content column. */ html.show--consent .cc-inline-host { margin-top: 2em; padding: 2.5em 1.5em; background: #ffffff; } /* position:relative (not static) keeps the consent banner in the content flow while still giving #cc-main a stacking context, so the (fixed) preferences modal opened from here floats above the page content instead of behind it. */ .cc-inline-host #cc-main { position: relative; z-index: 10000; } .cc-inline-host #cc-main .cm-wrapper { position: static; } .cc-inline-host #cc-main .cm-wrapper:before { display: none !important; } /* no dark backdrop */ .cc-inline-host #cc-main .cm { position: static; transform: none !important; max-width: none; width: 100%; margin: 0; box-shadow: none; border: none; background: transparent; /* sits directly on the white outer section */ } /* The inline consent modal is in document flow, so when it isn't showing (after a choice, or for a returning consented visitor) collapse its slot to avoid an empty gap above the terms. Keyed on v3's show--consent class (on ). The preferences modal (.pm) is unaffected, so the footer "Manage preferences" link still works here. */ html:not(.show--consent) .cc-inline-host #cc-main .cm-wrapper { display: none; }