/** * CM Cookie Consent — theme overrides. * * The colour variables themselves are printed inline by * CMCC_Frontend::build_css_variables() so they follow the settings; this file * only holds the static rules (floating button, links, small fixes). */ /* ------------------------------------------------------------------ * * Floating "Cookie settings" button * ------------------------------------------------------------------ */ .cmcc-floating-btn { position: fixed; bottom: 1rem; left: 1rem; z-index: 2147483646; /* just below the consent modal itself */ padding: 0.5rem 0.9rem; border: 1px solid rgba( 0, 0, 0, 0.12 ); border-radius: 999px; background: #fff; color: #2d4156; font-size: 0.8125rem; line-height: 1.2; cursor: pointer; box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.12 ); transition: transform 0.15s ease, box-shadow 0.15s ease; } .cmcc-floating-btn:hover, .cmcc-floating-btn:focus-visible { transform: translateY( -1px ); box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.18 ); } .cmcc-floating-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* Keep the floating button clear of the consent modal while it is open. */ body.show--consent .cmcc-floating-btn { display: none; } /* ------------------------------------------------------------------ * * Inline "Cookie settings" link (shortcode) * ------------------------------------------------------------------ */ .cmcc-settings-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; } .cmcc-settings-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* ------------------------------------------------------------------ * * Modal tweaks * ------------------------------------------------------------------ */ /* Links inside the banner inherit the configured text colour. */ #cc-main a { color: inherit; text-decoration: underline; } /* Keep the banner above sticky headers / WooCommerce notices. */ #cc-main { --cc-z-index: 2147483647; } /* Never cover the WooCommerce checkout submit button on small screens. */ @media ( max-width: 640px ) { #cc-main .cm--box { max-width: calc( 100% - 1.5rem ); } } @media ( prefers-reduced-motion: reduce ) { .cmcc-floating-btn { transition: none; } } /* * Resilient reveal for the consent banner. * * The library reveals the box by adding `show--consent` to and letting * a CSS transition animate it in. Some themes and page-transition libraries * (Divi, PixelYourSite) run a View Transition on load that aborts that reveal, * so `show--consent` is never applied and the box is left at opacity 0 — built * in the DOM but invisible. cc-init.js sets `cmcc-force-show` on while a * decision is pending and removes it the moment the visitor chooses, so this * only ever forces the banner open while it should be open. */ html.cmcc-force-show #cc-main .cm { opacity: 1 !important; transform: translateY( 0 ) !important; visibility: visible !important; }