/* ============================================================ Cookie Consent — styles Light theme by default. Dark mode via prefers-color-scheme and/or [data-theme="dark"] on . No external libraries. ============================================================ */ :root { /* Brand accent: decorative use only (tracks, icons, rings). */ --cc-red: #E63946; /* Text/CTA red: darkened for WCAG AA against white. */ --cc-red-strong: #C1121F; --cc-red-strong-hover: #9E0E19; --cc-ink: #111111; --cc-ink-hover: #000000; --cc-ink-text: #ffffff; --cc-bg: #ffffff; --cc-surface: #ffffff; --cc-text: #111111; --cc-text-muted: #4b5057; --cc-border: #d8d8dd; --cc-track: #bfbfc6; --cc-hover-tint: rgba(0, 0, 0, 0.05); --cc-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06); --cc-radius: 12px; --cc-overlay: rgba(17, 17, 17, 0.45); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cc-red-strong: #FF7A7A; --cc-red-strong-hover: #FF9B9B; --cc-ink: #3f3f46; --cc-ink-hover: #52525b; --cc-ink-text: #ffffff; --cc-bg: #1a1a1c; --cc-surface: #232326; --cc-text: #f4f4f5; --cc-text-muted: #b5b5be; --cc-border: #3f3f46; --cc-track: #5a5a63; --cc-hover-tint: rgba(255, 255, 255, 0.08); --cc-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4); --cc-overlay: rgba(0, 0, 0, 0.6); } } :root[data-theme="dark"] { --cc-red-strong: #FF7A7A; --cc-red-strong-hover: #FF9B9B; --cc-ink: #3f3f46; --cc-ink-hover: #52525b; --cc-ink-text: #ffffff; --cc-bg: #1a1a1c; --cc-surface: #232326; --cc-text: #f4f4f5; --cc-text-muted: #b5b5be; --cc-border: #3f3f46; --cc-track: #5a5a63; --cc-hover-tint: rgba(255, 255, 255, 0.08); --cc-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4); --cc-overlay: rgba(0, 0, 0, 0.6); } /* Reset inherited site styles that can leak into the widget ------ */ .cc-banner, .cc-banner *, .cc-modal, .cc-modal * { box-sizing: border-box; } .cc-banner, .cc-modal { font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; text-align: left; } /* Shared text ---------------------------------------------------- */ .cc-title { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--cc-text); line-height: 1.3; letter-spacing: normal; text-transform: none; } .cc-desc { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: var(--cc-text-muted); } .cc-policy-links { margin: 0; font-size: 13px; color: var(--cc-text-muted); } .cc-policy-links a { color: var(--cc-red-strong); text-decoration: underline; } .cc-policy-links a:hover { color: var(--cc-red-strong-hover); } .cc-policy-links a:focus-visible { outline: 2px solid var(--cc-red-strong); outline-offset: 2px; } /* Buttons -------------------------------------------------------- */ .cc-btn { font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; padding: 11px 18px; border-radius: 8px; border: 1px solid var(--cc-border); background: var(--cc-surface); color: var(--cc-text); cursor: pointer; white-space: nowrap; transition: background .18s, color .18s, border-color .18s, transform .06s; } .cc-btn:hover { background: var(--cc-hover-tint); } .cc-btn:active { transform: scale(0.98); } .cc-btn:focus-visible { outline: 2px solid var(--cc-red-strong); outline-offset: 2px; } .cc-btn-primary { background: var(--cc-red-strong); border-color: var(--cc-red-strong); color: #fff; } .cc-btn-primary:hover { background: var(--cc-red-strong-hover); border-color: var(--cc-red-strong-hover); color: #fff; } .cc-btn-ink { background: var(--cc-ink); border-color: var(--cc-ink); color: var(--cc-ink-text); } .cc-btn-ink:hover { background: var(--cc-ink-hover); border-color: var(--cc-ink-hover); color: var(--cc-ink-text); } .cc-btn-ghost { background: transparent; } .cc-btn-ghost:hover { background: var(--cc-hover-tint); } /* Dark-mode override: primary button in dark uses a light-red face with dark text so the label stays readable. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cc-btn-primary, :root:not([data-theme="light"]) .cc-btn-primary:hover { color: #1a1a1c; } } :root[data-theme="dark"] .cc-btn-primary, :root[data-theme="dark"] .cc-btn-primary:hover { color: #1a1a1c; } /* Banner --------------------------------------------------------- */ .cc-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 2147483000; background: var(--cc-bg); border: 1px solid var(--cc-border); border-radius: var(--cc-radius); box-shadow: var(--cc-shadow); max-width: 1120px; margin: 0 auto; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; animation: cc-slide-up .4s cubic-bezier(.16,1,.3,1); } .cc-banner-inner { display: flex; align-items: center; gap: 24px; padding: 20px 24px; } .cc-banner-text { flex: 1 1 auto; min-width: 0; } .cc-banner-actions { display: flex; flex-wrap: wrap; gap: 10px; flex-shrink: 0; } @media (max-width: 860px) { .cc-banner-inner { flex-direction: column; align-items: stretch; gap: 16px; } .cc-banner-actions { flex-direction: column; } .cc-banner-actions .cc-btn { width: 100%; } } /* Overlay + modal ------------------------------------------------ */ .cc-overlay { position: fixed; inset: 0; z-index: 2147483400; background: var(--cc-overlay); animation: cc-fade .25s ease; } .cc-modal { position: fixed; z-index: 2147483500; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); background: var(--cc-bg); border: 1px solid var(--cc-border); border-radius: var(--cc-radius); box-shadow: var(--cc-shadow); display: flex; flex-direction: column; overflow: hidden; animation: cc-pop .3s cubic-bezier(.16,1,.3,1); } /* flex:1 + min-height:0 are required or .cc-modal-body will never scroll */ .cc-modal-inner { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .cc-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px 12px; flex: 0 0 auto; } .cc-close { background: transparent; border: none; cursor: pointer; color: var(--cc-text-muted); padding: 6px; border-radius: 6px; line-height: 0; } .cc-close:hover { color: var(--cc-text); background: var(--cc-hover-tint); } .cc-close:focus-visible { outline: 2px solid var(--cc-red-strong); outline-offset: 2px; } .cc-modal-body { padding: 0 24px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .cc-category { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 16px 0; border-top: 1px solid var(--cc-border); } .cc-category:first-child { border-top: none; } .cc-cat-text { flex: 1 1 auto; min-width: 0; } .cc-cat-title { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--cc-text); } .cc-cat-desc { margin: 0; font-size: 13px; line-height: 1.55; color: var(--cc-text-muted); } .cc-cat-control { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .cc-always { font-size: 12px; font-weight: 700; color: var(--cc-red-strong); } .cc-modal-foot { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 24px 22px; border-top: 1px solid var(--cc-border); flex: 0 0 auto; } .cc-modal-foot .cc-btn { flex: 1 1 130px; min-width: 130px; } @media (max-width: 520px) { .cc-modal-foot { flex-direction: column; } .cc-modal-foot .cc-btn { width: 100%; } } /* Toggle switch -------------------------------------------------- */ .cc-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; } .cc-switch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; z-index: 2; } .cc-switch input:disabled { cursor: not-allowed; } .cc-switch-track { position: absolute; inset: 0; background: var(--cc-track); border-radius: 999px; transition: background .2s; } .cc-switch-thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.35); pointer-events: none; } .cc-switch input:checked + .cc-switch-track { background: var(--cc-red); } .cc-switch input:checked + .cc-switch-track + .cc-switch-thumb { transform: translateX(20px); } .cc-switch input:disabled + .cc-switch-track { opacity: .55; } .cc-switch input:focus-visible + .cc-switch-track { outline: 2px solid var(--cc-red-strong); outline-offset: 2px; } /* Inline text trigger, e.g. in the footer legal row --------------- */ .cc-link-trigger { background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: none; } .cc-link-trigger:hover { text-decoration: underline; } .cc-link-trigger:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* Scroll lock while the modal is open ---------------------------- */ html.cc-lock, html.cc-lock body { overflow: hidden; } /* Animations ----------------------------------------------------- */ @keyframes cc-slide-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes cc-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes cc-pop { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @media (prefers-reduced-motion: reduce) { .cc-banner, .cc-overlay, .cc-modal { animation: none; } .cc-switch-track, .cc-switch-thumb, .cc-btn { transition: none; } } .cc-banner[hidden], .cc-modal[hidden], .cc-overlay[hidden] { display: none !important; } [hidden] { display: none !important; }