/* Cookie Consent Manager — front-end styles. All colors/spacing driven by CSS custom properties so the admin's Design settings apply without editing this file. */ :root { --ccm-bg: #ffffff; --ccm-text: #1a1a2e; --ccm-accent: #2563eb; --ccm-accept-bg: #2563eb; --ccm-accept-text: #ffffff; --ccm-reject-bg: #eef0f4; --ccm-reject-text: #1a1a2e; --ccm-radius: 12px; --ccm-font-size: 15px; --ccm-font-family: inherit; --ccm-shadow: 0 10px 40px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.08); } .ccm-root { font-family: var(--ccm-font-family); font-size: var(--ccm-font-size); color: var(--ccm-text); line-height: 1.5; -webkit-font-smoothing: antialiased; } .ccm-root[hidden] { display: none !important; } .ccm-root * { box-sizing: border-box; } /* Always present while a decision is pending — blocks clicks/scroll reaching the page underneath regardless of the dim styling below, so visitors can't interact with the site until they choose. */ .ccm-overlay { position: fixed; inset: 0; background: transparent; z-index: 2147483000; } .ccm-overlay-dim { background: rgba(15, 23, 42, 0.45); animation: ccm-fade-in 0.2s ease; } /* Set on while consent is undecided (see consent-banner.js). */ html.ccm-scroll-lock, html.ccm-scroll-lock body { overflow: hidden !important; } /* ---------- Banner ---------- */ .ccm-banner { position: fixed; z-index: 2147483001; background: var(--ccm-bg); color: var(--ccm-text); box-shadow: var(--ccm-shadow); display: flex; gap: 20px; align-items: center; flex-wrap: wrap; padding: 20px 24px; animation: ccm-slide-up 0.35s ease; } .ccm-banner[hidden] { display: none !important; } /* Layout: bar (full-width, bottom or top) */ .ccm-layout-bar .ccm-banner { left: 0; right: 0; width: 100%; border-radius: 0; justify-content: space-between; } .ccm-layout-bar.ccm-position-bottom .ccm-banner { bottom: 0; } .ccm-layout-bar.ccm-position-top .ccm-banner { top: 0; animation-name: ccm-slide-down; } /* Layout: box (corner card) */ .ccm-layout-box .ccm-banner { max-width: 420px; width: calc(100% - 32px); border-radius: var(--ccm-radius); flex-direction: column; align-items: stretch; } .ccm-layout-box.ccm-position-bottom .ccm-banner, .ccm-layout-box.ccm-position-bottom-right .ccm-banner { bottom: 16px; right: 16px; } .ccm-layout-box.ccm-position-bottom-left .ccm-banner { bottom: 16px; left: 16px; } .ccm-layout-box.ccm-position-top .ccm-banner { top: 16px; right: 16px; } /* Layout: modal (centered, blocking) */ .ccm-layout-modal .ccm-banner { top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 520px; width: calc(100% - 32px); border-radius: var(--ccm-radius); flex-direction: column; align-items: stretch; /* The base .ccm-banner rule's slide-up animation also animates `transform`, which would hijack this centering transform for the animation's duration (dropping translate(-50%,-50%) entirely) and then snap back to centered once it finishes — visible as the banner appearing off in a corner before jumping to center. Swap in an animation whose own keyframes keep the centering transform constant throughout instead. */ animation: ccm-modal-pop-in 0.25s ease; } .ccm-banner-body { flex: 1 1 320px; min-width: 220px; } /* The box/modal cards stack body+actions vertically (flex-direction: column), where the row-oriented basis above does nothing useful and just left the actions row looking oddly placed — reset it there. */ .ccm-layout-box .ccm-banner-body, .ccm-layout-modal .ccm-banner-body { flex: none; min-width: 0; } .ccm-title { margin: 0 0 6px; font-size: 1.15em; font-weight: 700; } .ccm-message { margin: 0; font-size: 0.95em; opacity: 0.85; } .ccm-policy-link { color: var(--ccm-accent); text-decoration: underline; margin-left: 4px; white-space: nowrap; } .ccm-banner-actions { display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0; } .ccm-layout-box .ccm-banner-actions, .ccm-layout-modal .ccm-banner-actions { margin-top: 8px; justify-content: flex-end; } /* Equal-width buttons filling the row — avoids any leftover empty gap regardless of how much text is in each label, and matches the standard look for a centered consent modal (three even buttons). */ .ccm-layout-box .ccm-banner-actions .ccm-btn, .ccm-layout-modal .ccm-banner-actions .ccm-btn { flex: 1 1 0; text-align: center; } /* ---------- Buttons ---------- */ .ccm-btn { /* Reset first so the host theme's global button styles can't leak in (padding, border-radius, background, etc.), then redeclare below. */ all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; appearance: none; border: 1px solid transparent; cursor: pointer; font: inherit; font-weight: 600; padding: 10px 18px; border-radius: calc(var(--ccm-radius) * 0.55); transition: filter 0.15s ease, transform 0.05s ease; white-space: nowrap; text-align: center; } .ccm-btn:active { transform: scale(0.98); } .ccm-btn:hover { filter: brightness(0.94); } .ccm-btn:focus-visible { outline: 2px solid var(--ccm-accent); outline-offset: 2px; } .ccm-btn-primary { background: var(--ccm-accept-bg); color: var(--ccm-accept-text); } .ccm-btn-ghost { background: var(--ccm-reject-bg); color: var(--ccm-reject-text); } .ccm-btn-outline { background: transparent; border-color: currentColor; color: var(--ccm-text); } .ccm-btn-pill.ccm-btn, .ccm-btn-pill .ccm-btn { border-radius: 999px; } .ccm-btn-outline.ccm-btn { background: transparent; } /* button_style variants set on .ccm-root via ccm-btn-{style} */ .ccm-root.ccm-btn-outline .ccm-btn-primary, .ccm-root.ccm-btn-outline .ccm-btn-ghost { background: transparent; border-color: currentColor; } .ccm-root.ccm-btn-pill .ccm-btn { border-radius: 999px; } /* ---------- Theme: dark ---------- */ .ccm-theme-dark .ccm-banner, .ccm-theme-dark .ccm-preferences-panel { background: #14161f; color: #f2f3f7; } .ccm-theme-dark .ccm-category-description { color: #b7bacb; } .ccm-theme-dark .ccm-category { border-color: rgba(255, 255, 255, 0.08); } /* ---------- Preferences modal ---------- */ .ccm-preferences { position: fixed; inset: 0; z-index: 2147483002; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, 0.45); } .ccm-preferences[hidden] { display: none !important; } .ccm-preferences-panel { background: var(--ccm-bg); color: var(--ccm-text); width: 100%; max-width: 560px; max-height: min(640px, 90vh); border-radius: var(--ccm-radius); box-shadow: var(--ccm-shadow); display: flex; flex-direction: column; animation: ccm-pop-in 0.2s ease; } .ccm-preferences-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .ccm-preferences-header h2 { margin: 0; font-size: 1.1em; } .ccm-close { all: unset; box-sizing: border-box; appearance: none; background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: inherit; opacity: 0.6; padding: 4px; } .ccm-close:hover { opacity: 1; } .ccm-preferences-body { padding: 8px 24px; overflow-y: auto; } .ccm-category { padding: 16px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .ccm-category:last-child { border-bottom: none; } .ccm-category-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ccm-category-label { font-weight: 600; } .ccm-category-description { margin: 6px 0 0; font-size: 0.9em; opacity: 0.75; } .ccm-preferences-footer { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; padding: 16px 24px; border-top: 1px solid rgba(0, 0, 0, 0.08); } /* ---------- Toggle switch ---------- */ .ccm-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; } .ccm-switch input { opacity: 0; width: 0; height: 0; } .ccm-slider { position: absolute; inset: 0; background: #cbd0dc; border-radius: 999px; cursor: pointer; transition: background 0.15s ease; } .ccm-slider::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform 0.15s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .ccm-switch input:checked + .ccm-slider { background: var(--ccm-accent); } .ccm-switch input:checked + .ccm-slider::before { transform: translateX(18px); } .ccm-switch input:disabled + .ccm-slider { opacity: 0.6; cursor: not-allowed; } .ccm-switch input:focus-visible + .ccm-slider { outline: 2px solid var(--ccm-accent); outline-offset: 2px; } /* ---------- Floating launcher ---------- */ .ccm-launcher { /* Reset first so the host theme's global button/anchor styles (padding, border, background, font) can't leak in, then redeclare everything we actually want — needed because this button is injected into arbitrary theme markup we don't control. */ all: unset; box-sizing: border-box; position: fixed !important; bottom: 16px; left: 16px; z-index: 2147483001; width: 46px; height: 46px; min-width: 46px; min-height: 46px; padding: 0; margin: 0; border-radius: 50%; background: var( --ccm-accept-bg, #2563eb ); color: var( --ccm-accept-text, #fff ); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--ccm-shadow); line-height: 0; } .ccm-launcher[hidden] { display: none !important; } .ccm-launcher:hover { filter: brightness(0.94); } .ccm-launcher svg { width: 22px; height: 22px; flex-shrink: 0; fill: currentColor; display: block; } /* ---------- Animations ---------- */ @keyframes ccm-slide-up { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes ccm-slide-down { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes ccm-pop-in { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes ccm-modal-pop-in { from { transform: translate(-50%, -50%) scale(0.96); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } } @keyframes ccm-modal-pop-in-mobile { from { transform: translateY(-50%) scale(0.96); opacity: 0; } to { transform: translateY(-50%) scale(1); opacity: 1; } } @keyframes ccm-fade-in { from { opacity: 0; } to { opacity: 1; } } /* ---------- Responsive ---------- */ @media (max-width: 560px) { .ccm-banner { padding: 16px; flex-direction: column; align-items: stretch; } .ccm-layout-box .ccm-banner { left: 8px; right: 8px; width: auto; bottom: 8px; max-width: none; } /* The desktop modal rule centers via left:50% + transform:translate(-50%,-50%). Pinning left/right to fixed edges here without also collapsing the horizontal half of that transform left it double-offset off-screen on narrow viewports — this keeps only the vertical centering. */ .ccm-layout-modal .ccm-banner { left: 8px; right: 8px; top: 50%; bottom: auto; width: auto; max-width: none; transform: translateY(-50%); max-height: calc(100vh - 32px); overflow-y: auto; /* Same reasoning as the desktop rule's ccm-modal-pop-in: the animation must keep whatever the static centering transform is for this breakpoint (here just translateY, no translateX since left/right are pinned) or it snaps into place after animating. */ animation: ccm-modal-pop-in-mobile 0.25s ease; } .ccm-banner-actions { justify-content: stretch; } .ccm-banner-actions .ccm-btn { flex: 1 1 auto; } .ccm-preferences-footer .ccm-btn { flex: 1 1 auto; } } /* ---------- Shortcode output (settings button + cookie declaration table) ---------- */ .ccm-cookie-settings-btn { cursor: pointer; font: inherit; background: var(--ccm-accept-bg, #2563eb); color: var(--ccm-accept-text, #fff); border: none; border-radius: 6px; padding: 8px 16px; } .ccm-declaration-table { width: 100%; border-collapse: collapse; margin: 0 0 24px; } .ccm-declaration-table th, .ccm-declaration-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } @media (prefers-reduced-motion: reduce) { .ccm-banner, .ccm-overlay, .ccm-preferences-panel { animation: none !important; } }