/* * Brand theme for whitecube/laravel-cookie-consent. * The package inlines its own stylesheet, so this file only overrides the * generic purple accent (#7959ef) with the Zimmermann navy and matches the * banner typography to the rest of the site. */ #cookies-policy#cookies-policy { --zm-cc-navy: #133C6C; --zm-cc-navy-light: #35517F; --zm-cc-border: #DDE3EC; --zm-cc-green: #1B7F4C; font-family: var(--rr-ff-body, inherit); } #cookies-policy#cookies-policy .cookies__alert { border-color: var(--zm-cc-border); border-radius: 4px; } #cookies-policy#cookies-policy .cookies__title { color: var(--zm-cc-navy); font-family: var(--rr-ff-heading, inherit); font-size: 22px; line-height: 1.3; margin-bottom: 10px; } /* * The package inlines its stylesheet inside , after this file loads from * . Its selectors are identical (#cookies-policy .cookiesBtn__link), so an * equal-specificity override would lose on source order — hence the doubled id. */ #cookies-policy#cookies-policy .cookiesBtn--accept, #cookies-policy#cookies-policy .cookiesBtn__link { background: var(--zm-cc-navy); border-color: var(--zm-cc-navy); border-radius: 0; color: #fff; } #cookies-policy#cookies-policy .cookiesBtn--accept:focus, #cookies-policy#cookies-policy .cookiesBtn--accept:hover, #cookies-policy#cookies-policy .cookiesBtn__link:focus, #cookies-policy#cookies-policy .cookiesBtn__link:hover { background: var(--zm-cc-navy-light); border-color: var(--zm-cc-navy-light); } /* * `cookiesBtn--essentials` sits on the

, not on the button inside it, so the * compound selector this once used could never match and both actions rendered * solid. Only the secondary action is outlined, which is what separates it from * the one the visitor is meant to reach for. */ #cookies-policy#cookies-policy .cookiesBtn--essentials .cookiesBtn__link { background: transparent; border: 1px solid var(--zm-cc-navy); border-radius: 0; color: var(--zm-cc-navy); } /* * The package fades its buttons on hover with opacity alone, which leaves the * outlined one dark-on-dark once it fills. Both actions state their own colours. */ #cookies-policy#cookies-policy .cookiesBtn--essentials .cookiesBtn__link:focus, #cookies-policy#cookies-policy .cookiesBtn--essentials .cookiesBtn__link:hover, #cookies-policy#cookies-policy .cookiesBtn__link:focus, #cookies-policy#cookies-policy .cookiesBtn__link:hover { background: var(--zm-cc-navy-light); border-color: var(--zm-cc-navy-light); color: #fff; opacity: 1; } #cookies-policy#cookies-policy .cookies__intro a, #cookies-policy#cookies-policy .cookies__details { color: var(--zm-cc-navy); text-decoration: underline; } #cookies-policy#cookies-policy .cookies__intro a:focus, #cookies-policy#cookies-policy .cookies__intro a:hover, #cookies-policy#cookies-policy .cookies__details:focus, #cookies-policy#cookies-policy .cookies__details:hover { color: var(--zm-cc-navy-light); } /* * Green rather than the navy the buttons use: on a switch the colour is the state, * so it should not be the same colour that means "this is a control you can press". */ #cookies-policy#cookies-policy .cookies__category input:checked + .cookies__box:after { background: var(--zm-cc-green); } #cookies-policy#cookies-policy .cookies__title, #cookies-policy#cookies-policy .cookies__label { color: var(--zm-cc-navy); }