/* ══════════════════════════════════════════ Cookie Consent Banner v2 — cookie-banner.css Dark design: #1a1a1a bg · white text Blue primary #1c6ef3 · Green "Always Active" #22c55e ══════════════════════════════════════════ */ /* ── FIX #1: flicker/"reappears every load" guard ── cookie-consent-banner.php prints a tiny blocking inline script in (before any page caching plugin can interfere) that adds the `ccb-consented` class to the instant it detects a valid, current-version consent record in localStorage or the cookie. This rule hides the banner from the very first paint, so even a fully cached page (WP Rocket / Sucuri) never flashes the banner for a visitor who already responded. */ html.ccb-consented #ccb-banner, html.ccb-consented #ccb-us-banner { display: none !important; } /* ── Reset scoped to plugin ── */ #ccb-banner *, #ccb-overlay *, #ccb-banner *::before, #ccb-overlay *::before, #ccb-banner *::after, #ccb-overlay *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ════════════════════════════ BOTTOM BANNER BAR ════════════════════════════ */ #ccb-banner { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 2147483646 !important; /* One below overlay, still above all page content */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.6; } /* !important added defensively — a theme/page-builder rule that sets #ccb-banner{display:block/flex !important} elsewhere (both matched on an ID selector) would otherwise win on source-order alone and keep the banner visible after consent, one contributor to the "reload"-looking behaviour reported in Issue 1. */ #ccb-banner.ccb-hidden { display: none !important; } #ccb-inner { display: flex; align-items: center; gap: 20px; background: #1a1a1a; color: #e5e5e5; padding: 14px 52px 14px 24px; border-top: 1px solid #2e2e2e; flex-wrap: wrap; position: relative; } #ccb-message { flex: 1 1 280px; font-size: 14px; color: #e5e5e5; } #ccb-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; } /* Close X on banner */ #ccb-close { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); background: none; border: none; color: #888; font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 6px; border-radius: 4px; transition: color 0.15s; } #ccb-close:hover { color: #fff; } /* ════════════════════════════ SHARED BUTTON STYLES ════════════════════════════ */ .ccb-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 22px !important; font-size: 14px; font-weight: 600; border-radius: 3px; cursor: pointer; white-space: nowrap; transition: background 0.18s, color 0.18s, border-color 0.18s; line-height: 1.4; letter-spacing: 0.01em; } /* Outlined */ .ccb-btn--outline { background: transparent; color: #ffffff; border: 1.5px solid #ffffff; } .ccb-btn--outline:hover { background: rgba(255,255,255,0.08); } /* Primary blue */ .ccb-btn--primary { background: #1c6ef3; color: #ffffff; border: 1.5px solid #1c6ef3; } .ccb-btn--primary:hover { background: #1558c8; border-color: #1558c8; } /* ════════════════════════════ OVERLAY + MODAL ════════════════════════════ */ #ccb-overlay { position: fixed !important; inset: 0; background: rgba(0,0,0,0.68); z-index: 2147483647 !important; /* Absolute max 32-bit z-index — cannot go higher */ display: flex; align-items: center; justify-content: flex-end; /* align to right side like screenshot */ padding: 0; } #ccb-overlay[hidden] { display: none; } /* Defensive hardening for Issue 2: guarantee interactive controls are always clickable even if a theme/plugin stylesheet loaded after ours sets a blanket `pointer-events: none` on generic selectors (seen in some sticky-header / animation libraries used by page builders). */ #ccb-banner, #ccb-us-banner, #ccb-overlay, #ccb-float-btn, #ccb-banner .ccb-btn, #ccb-us-banner .ccb-btn, #ccb-modal .ccb-btn, #ccb-modal-close, #ccb-us-close, #ccb-close, .ccb-toggle, .ccb-section__header { pointer-events: auto; } #ccb-modal { background: #1a1a1a; color: #e5e5e5; width: 100%; max-width: 560px; height: 100vh; display: flex; flex-direction: column; border-left: 1px solid #2e2e2e; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.6; } /* ── Modal Header ── */ #ccb-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid #2e2e2e; flex-shrink: 0; } #ccb-modal-title { font-size: 18px; font-weight: 700; color: #ffffff; line-height: 1.3; } #ccb-modal-close { background: none; border: none; color: #aaa; font-size: 26px; line-height: 1; cursor: pointer; padding: 10px 12px; margin: -10px -12px -10px 0; border-radius: 6px; transition: color 0.15s, background 0.15s; flex-shrink: 0; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } #ccb-modal-close:hover, #ccb-modal-close:active { color: #fff; background: rgba(255,255,255,0.1); } /* ── Modal Body (scrollable) ── */ #ccb-modal-body { flex: 1 1 auto; overflow-y: auto; padding: 0 24px; scrollbar-width: thin; scrollbar-color: #444 #1a1a1a; } #ccb-modal-body::-webkit-scrollbar { width: 6px; } #ccb-modal-body::-webkit-scrollbar-track { background: #1a1a1a; } #ccb-modal-body::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; } /* ── Intro Text ── */ #ccb-intro { padding: 20px 0 8px; } #ccb-intro-text p { margin-bottom: 10px; color: #d0d0d0; font-size: 14px; } #ccb-intro-text p:last-child { margin-bottom: 0; } /* Extra paragraphs hidden by default */ .ccb-intro-extra { display: none; } .ccb-intro-extra.ccb-visible { display: block; } #ccb-show-toggle { background: none; border: none; color: #4a9eff; font-size: 14px; cursor: pointer; padding: 6px 0 0; display: inline-block; text-decoration: none; } #ccb-show-toggle:hover { text-decoration: underline; } /* ── Divider ── */ .ccb-divider { border: none; border-top: 1px solid #2e2e2e; margin: 0; } /* ── Accordion Sections ── */ .ccb-section { padding: 4px 0; } .ccb-section__header { display: flex; align-items: center; gap: 10px; padding: 14px 0; cursor: pointer; user-select: none; outline: none; } .ccb-section__header:focus-visible { outline: 2px solid #1c6ef3; border-radius: 2px; } .ccb-section__arrow { font-size: 18px; color: #aaa; transition: transform 0.2s; display: inline-block; line-height: 1; flex-shrink: 0; } .ccb-section__header[aria-expanded="true"] .ccb-section__arrow { transform: rotate(90deg); } .ccb-section__title { flex: 1; font-size: 15px; font-weight: 700; color: #ffffff; } .ccb-section__always { font-size: 13px; font-weight: 600; color: #22c55e; flex-shrink: 0; } /* ── Section Body ── */ .ccb-section__body { padding: 0 0 14px 28px; color: #aaa; font-size: 14px; line-height: 1.6; } .ccb-section__body--collapsed { display: none; } /* ── Toggle Switch ── */ .ccb-toggle { position: relative; display: inline-block; width: 48px; height: 26px; flex-shrink: 0; cursor: pointer; } .ccb-toggle input { opacity: 0; width: 0; height: 0; position: absolute; } .ccb-toggle__track { position: absolute; inset: 0; background: #3a3a3a; border-radius: 26px; transition: background 0.2s; border: 1px solid #555; } .ccb-toggle__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #888; border-radius: 50%; transition: transform 0.2s, background 0.2s; } .ccb-toggle input:checked + .ccb-toggle__track { background: #1c6ef3; border-color: #1c6ef3; } .ccb-toggle input:checked + .ccb-toggle__track::after { transform: translateX(22px); background: #fff; } /* ── Modal Footer ── */ #ccb-modal-footer { display: flex; align-items: center; gap: 10px; padding: 16px 24px; border-top: 1px solid #2e2e2e; background: #1a1a1a; flex-shrink: 0; flex-wrap: wrap; } #ccb-modal-footer .ccb-btn { flex: 1; justify-content: center; padding: 12px 10px; font-size: 14px; } /* ════════════════════════════ RESPONSIVE ════════════════════════════ */ @media (max-width: 640px) { #ccb-close { top: 10%; } #ccb-message { flex: none; font-size: 11px; } #ccb-inner { flex-direction: column; align-items: flex-start; padding: 20px 44px 16px 16px; } #ccb-actions { width: 100%; } #ccb-actions .ccb-btn { flex: 1; text-align: center; justify-content: center; } #ccb-modal { max-width: 100%; height: 100dvh; } #ccb-modal-footer { flex-direction: column; padding-bottom: max(16px, env(safe-area-inset-bottom)); position: relative; z-index: 2; } #ccb-modal-footer .ccb-btn { width: 100%; min-height: 46px; } } /* ════════════════════════════ US / CCPA OPT-OUT BANNER ════════════════════════════ */ #ccb-us-banner { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 2147483646 !important; /* One below overlay, still above all page content */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; } #ccb-us-inner { display: flex; align-items: center; gap: 16px; background: #1a1a1a; color: #e5e5e5; padding: 14px 52px 14px 24px; border-top: 2px solid #1c6ef3; flex-wrap: wrap; position: relative; } #ccb-us-message { flex: 1 1 280px; font-size: 13px; color: #ccc; } #ccb-us-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; } #ccb-us-close { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); background: none; border: none; color: #888; font-size: 30px; line-height: 1; cursor: pointer; padding: 4px 6px; border-radius: 4px; transition: color 0.15s; } #ccb-us-close:hover { color: #fff; } #ccb-us-optout { border-color: #f59e0b !important; color: #f59e0b !important; } #ccb-us-optout:hover { background: rgba(245,158,11,0.1) !important; } /* ════════════════════════════ FLOATING COOKIE ICON (bottom-right) ════════════════════════════ */ #ccb-float-btn { position: fixed; bottom: 24px; left: 24px; z-index: 2147483645 !important; /* Float button — just below banner/modal */ width: 52px; height: 52px; background: #1c6ef3; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(28,110,243,0.45); transition: transform 0.2s, background 0.2s, box-shadow 0.2s; padding: 0; } #ccb-float-btn:hover { background: #1558c8; transform: scale(1.1); box-shadow: 0 6px 24px rgba(28,110,243,0.6); } #ccb-float-btn svg { width: 26px; height: 26px; fill: #ffffff; } /* Tooltip on hover */ #ccb-float-btn::before { content: 'Cookie Preferences'; position: absolute; bottom: 58px; left: 0; background: #1a1a1a; color: #fff; font-size: 12px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; white-space: nowrap; padding: 5px 10px; border-radius: 4px; border: 1px solid #333; opacity: 0; pointer-events: none; transition: opacity 0.2s; } #ccb-float-btn:hover::before { opacity: 1; } /* Hide float btn when banner is already visible */ #ccb-float-btn.ccb-float-hidden { display: none; } /* ════════════════════════════ COOKIE CARDS (screenshot style) ════════════════════════════ */ .ccb-cookie-list { display: flex; flex-direction: column; gap: 0; margin-top: 14px; border-radius: 6px; overflow: hidden; border: 1px solid #2e2e2e; } .ccb-cookie-card { background: #222; padding: 14px 16px; border-bottom: 1px solid #2e2e2e; display: flex; flex-direction: column; gap: 6px; } .ccb-cookie-card:last-child { border-bottom: none; } .ccb-cookie-row { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; line-height: 1.5; } .ccb-cookie-label { font-weight: 700; color: #ffffff; min-width: 90px; flex-shrink: 0; font-size: 13px; } .ccb-cookie-val { color: #cccccc; font-size: 13px; word-break: break-word; } /* ════════════════════════════ REDUCED MOTION ════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .ccb-btn, .ccb-section__arrow, .ccb-toggle__track, .ccb-toggle__track::after { transition: none; } }