/* ============================================================================ Consent Banner — DevOpser Lite ---------------------------------------------------------------------------- Editorial-dossier aesthetic. Anchored bottom-left card, not the generic full-width strip. Inherits the brand palette + typography from the same tokens used by /pros and /landing-builder, but re-declared in scope so the banner renders identically on templates that don't pull landing-builder.css (signup, login, account, builder, …). ============================================================================ */ /* Scoped tokens — same hex values as landing-builder.css :root, aliased under --cb-* so we never collide with page-level vars. */ #consent-banner, #consent-prefs-btn { --cb-ink: #000; --cb-ink-2: #1e1e1e; --cb-ink-3: #282828; --cb-ink-4: #333; --cb-rule: #444; --cb-rule-2: #3d3d3d; --cb-pink: #ED166C; --cb-pink-2: #c41058; --cb-pink-3: #ff3d8b; --cb-pink-glow: rgba(237, 22, 108, 0.30); --cb-pink-grad: linear-gradient(135deg, #ED166C 0%, #c41058 100%); --cb-pink-grad-hover: linear-gradient(135deg, #c41058 0%, #a00d48 100%); --cb-hi: #fde047; --cb-text: #fff; --cb-text-2: #ccc; --cb-text-3: #888; --cb-text-4: #555; --cb-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --cb-font-display: 'Saira Condensed', 'Heebo', -apple-system, BlinkMacSystemFont, sans-serif; --cb-font-mono: 'JetBrains Mono', 'Heebo', ui-monospace, SFMono-Regular, Menlo, monospace; --cb-ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ---------- Backdrop (lightbox layer) ---------- */ /* Full-viewport dim + blur. Demands attention so the user has to make a choice rather than ignore the banner. Body scroll is locked while mounted (set via .cb-body-locked on ). */ #consent-backdrop { position: fixed; inset: 0; z-index: 99998; background: radial-gradient(60% 50% at 50% 50%, rgba(237, 22, 108, 0.10), transparent 70%), rgba(0, 0, 0, 0.72); -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%); display: flex; align-items: center; justify-content: center; padding: 24px; } #consent-backdrop[hidden] { display: none; } @media (prefers-reduced-motion: no-preference) { #consent-backdrop[data-cb-state="entering"] { animation: cb-backdrop-in 320ms var(--cb-ease) both; } #consent-backdrop[data-cb-state="exiting"] { animation: cb-backdrop-out 220ms var(--cb-ease) forwards; } } @keyframes cb-backdrop-in { from { opacity: 0; } to { opacity: 1; } } @keyframes cb-backdrop-out { from { opacity: 1; } to { opacity: 0; } } /* ---------- Banner card ---------- */ #consent-banner { position: relative; /* now centered inside the backdrop, not fixed */ width: 480px; max-width: 100%; /* Card surface — significantly brighter than --ink-2 page chrome. Gradient gives shape; pink + yellow corner radials add atmosphere without competing with the dim backdrop. */ background: radial-gradient(440px 300px at 110% 110%, rgba(237, 22, 108, 0.22), transparent 70%), radial-gradient(320px 220px at -10% -20%, rgba(253, 224, 71, 0.08), transparent 70%), linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%); border: 1px solid rgba(237, 22, 108, 0.50); border-radius: 14px; padding: 24px 26px 24px 32px; /* extra left padding makes room for accent stripe */ color: var(--cb-text); font-family: var(--cb-font-body); box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(237, 22, 108, 0.22) inset, 0 0 60px -10px rgba(237, 22, 108, 0.30); } /* Brand accent stripe — runs the leading edge of the card. */ #consent-banner::before { content: ''; position: absolute; top: 16px; bottom: 16px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--cb-pink-3) 0%, var(--cb-pink) 50%, var(--cb-pink-2) 100%); box-shadow: 0 0 14px rgba(237, 22, 108, 0.55); } [dir="rtl"] #consent-banner::before { left: auto; right: 0; border-radius: 3px 0 0 3px; } [dir="rtl"] #consent-banner { padding: 24px 32px 24px 26px; } /* Heading is programmatically focused for screen-reader announcement on open. Suppress the visible outline since it's `tabindex="-1"` (keyboard users can never reach it via Tab — only programmatic focus). */ .cb-heading:focus, .cb-heading:focus-visible { outline: none; } #consent-banner[hidden] { display: none; } /* Body scroll lock — applied while the backdrop is mounted so users can't scroll past the dialog. */ body.cb-body-locked { overflow: hidden; } /* Reveal staircase — one orchestrated entrance. Children fade up with a stepped delay; the parent slides in. */ @media (prefers-reduced-motion: no-preference) { #consent-banner[data-cb-state="entering"] { animation: cb-card-in 420ms var(--cb-ease) both; } #consent-banner[data-cb-state="entering"] .cb-eyebrow { animation: cb-fade-up 360ms var(--cb-ease) 80ms both; } #consent-banner[data-cb-state="entering"] .cb-heading { animation: cb-fade-up 360ms var(--cb-ease) 160ms both; } #consent-banner[data-cb-state="entering"] .cb-body { animation: cb-fade-up 360ms var(--cb-ease) 240ms both; } #consent-banner[data-cb-state="entering"] .cb-actions { animation: cb-fade-up 360ms var(--cb-ease) 320ms both; } #consent-banner[data-cb-state="exiting"] { animation: cb-card-out 220ms var(--cb-ease) forwards; } } @keyframes cb-card-in { from { transform: scale(0.94) translateY(8px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } @keyframes cb-card-out { from { transform: scale(1) translateY(0); opacity: 1; } to { transform: scale(0.96) translateY(-4px); opacity: 0; } } @keyframes cb-fade-up { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ---------- Eyebrow row (mono caps + caution dot — bridge from /pros) ---------- */ .cb-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--cb-font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cb-text-3); margin: 0 0 10px; } .cb-eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cb-hi); box-shadow: 0 0 0 3px rgba(253, 224, 71, 0.20), 0 0 8px rgba(253, 224, 71, 0.45); flex-shrink: 0; } /* ---------- Heading + body ---------- */ .cb-heading { font-family: var(--cb-font-display); font-weight: 900; font-size: 1.4rem; line-height: 1.1; letter-spacing: -0.02em; text-transform: uppercase; color: var(--cb-text); margin: 0 0 8px; } .cb-body { font-size: 0.85rem; line-height: 1.5; color: var(--cb-text-2); margin: 0 0 16px; } .cb-body a { color: var(--cb-text); text-decoration: none; border-bottom: 1px solid var(--cb-text-4); padding-bottom: 1px; transition: border-color 0.15s, color 0.15s; } .cb-body a:hover, .cb-body a:focus-visible { color: var(--cb-pink-3); border-bottom-color: var(--cb-pink); outline: none; } /* ---------- Actions row ---------- */ .cb-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .cb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0.55rem 1rem; font-family: var(--cb-font-display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 8px; cursor: pointer; border: 1px solid transparent; transition: background 0.18s var(--cb-ease), border-color 0.18s var(--cb-ease), transform 0.18s var(--cb-ease), box-shadow 0.18s var(--cb-ease), color 0.18s var(--cb-ease); -webkit-tap-highlight-color: transparent; white-space: nowrap; } .cb-btn:focus-visible { outline: 2px solid var(--cb-pink-3); outline-offset: 2px; } .cb-btn .fa-solid, .cb-btn .fa-regular, .cb-btn .fa-brands { font-size: 0.72rem; } /* Ghost — Reject all + Customize */ .cb-btn--ghost { background: var(--cb-ink-3); border-color: var(--cb-rule); color: var(--cb-text-2); } .cb-btn--ghost:hover { background: var(--cb-rule-2); border-color: var(--cb-text-4); color: var(--cb-text); } /* Primary — Accept all + Save */ .cb-btn--primary { background: var(--cb-pink-grad); color: var(--cb-text); box-shadow: 0 6px 18px -10px var(--cb-pink-glow); } .cb-btn--primary:hover { background: var(--cb-pink-grad-hover); transform: translateY(-1px); box-shadow: 0 10px 24px -10px var(--cb-pink-glow); } /* ---------- Customize panel (accordion) ---------- */ .cb-panel { overflow: hidden; max-height: 0; margin-top: 0; border-top: 1px solid var(--cb-rule-2); transition: max-height 0.32s var(--cb-ease), margin-top 0.32s var(--cb-ease), padding-top 0.32s var(--cb-ease); padding-top: 0; } .cb-panel[data-cb-open="true"] { max-height: 360px; margin-top: 16px; padding-top: 16px; } .cb-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--cb-rule-2); } .cb-row:last-of-type { border-bottom: none; } .cb-row-code { font-family: var(--cb-font-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--cb-text-3); padding-top: 2px; } /* Inline span by default — force block stacking so name and description each get their own line and the 4px gap below the name actually applies. */ .cb-row-text { display: block; min-width: 0; } .cb-row-name { display: block; font-family: var(--cb-font-display); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cb-text); margin: 0 0 4px; } .cb-row-desc { display: block; font-size: 0.78rem; line-height: 1.45; color: var(--cb-text-3); margin: 0; } /* Custom toggle — visually-hidden checkbox + styled label */ .cb-toggle { position: relative; width: 36px; height: 20px; flex-shrink: 0; } .cb-toggle input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; } .cb-toggle-track { display: block; width: 100%; height: 100%; border-radius: 999px; background: var(--cb-ink-4); cursor: pointer; transition: background 0.2s ease-out; position: relative; } .cb-toggle-track::after { content: ''; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--cb-text-3); transition: transform 0.2s ease-out, background 0.2s ease-out, box-shadow 0.2s ease-out; } .cb-toggle input:checked ~ .cb-toggle-track { background: var(--cb-pink-grad); } .cb-toggle input:checked ~ .cb-toggle-track::after { transform: translateX(16px); background: var(--cb-text); box-shadow: 0 0 6px 1px var(--cb-pink-glow); } .cb-toggle input:focus-visible ~ .cb-toggle-track { outline: 2px solid var(--cb-pink-3); outline-offset: 2px; } .cb-toggle input:disabled ~ .cb-toggle-track { background: var(--cb-rule); cursor: not-allowed; opacity: 0.7; } .cb-toggle input:disabled ~ .cb-toggle-track::after { transform: translateX(16px); background: var(--cb-text-2); box-shadow: none; } .cb-panel-actions { display: flex; justify-content: flex-end; margin-top: 14px; } /* ---------- Floating reopen button (post-decision affordance) ---------- */ #consent-prefs-btn { position: fixed; bottom: 20px; right: 20px; width: 40px; height: 40px; border-radius: 50%; background: var(--cb-ink-3); border: 1px solid var(--cb-rule); color: var(--cb-text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 99998; font-size: 0.95rem; transition: border-color 0.18s var(--cb-ease), color 0.18s var(--cb-ease), box-shadow 0.18s var(--cb-ease), transform 0.18s var(--cb-ease); } #consent-prefs-btn[hidden] { display: none; } #consent-prefs-btn:hover { border-color: var(--cb-pink); color: var(--cb-pink); box-shadow: 0 0 0 4px var(--cb-pink-glow); transform: translateY(-1px); } #consent-prefs-btn:focus-visible { outline: 2px solid var(--cb-pink-3); outline-offset: 3px; } /* One-time entrance pulse so the affordance is noticed once. */ @media (prefers-reduced-motion: no-preference) { #consent-prefs-btn[data-cb-pulse="true"] { animation: cb-prefs-pulse 600ms var(--cb-ease) 1; } } @keyframes cb-prefs-pulse { 0% { box-shadow: 0 0 0 0 var(--cb-pink-glow); } 60% { box-shadow: 0 0 0 12px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } /* ---------- RTL (Hebrew) ---------- */ [dir="rtl"] #consent-banner { left: auto; right: 24px; } [dir="rtl"] #consent-prefs-btn { right: auto; left: 20px; } [dir="rtl"] .cb-actions, [dir="rtl"] .cb-panel-actions { justify-content: flex-start; } [dir="rtl"] .cb-row { grid-template-columns: auto 1fr 36px; } [dir="rtl"] .cb-toggle input:checked ~ .cb-toggle-track::after { transform: translateX(-16px); } [dir="rtl"] .cb-toggle input:disabled ~ .cb-toggle-track::after { transform: translateX(-16px); } /* ---------- Floating shield disabled ---------- */ /* The 40x40 floating shield at bottom-right was confusing on desktop (read as a preview affordance, not a consent control) and overlapped the mobile builder's Publish button. Removed everywhere — the canonical re-management path is now the footer "Cookie preferences" link, wired via the data-cookie-prefs attribute (auto-bound in consent-banner.js). ensurePrefsButton() still runs but the button is hidden by this rule. */ #consent-prefs-btn { display: none !important; } /* ---------- Mobile (≤480px) ---------- */ @media (max-width: 480px) { #consent-backdrop { padding: 16px; } #consent-banner { width: 100%; padding: 18px 20px 18px 26px; /* preserve room for accent stripe */ } [dir="rtl"] #consent-banner { padding: 18px 26px 18px 20px; } .cb-heading { font-size: 1.2rem; } .cb-body { font-size: 0.82rem; } .cb-btn { flex: 1 1 auto; padding: 0.6rem 0.8rem; } .cb-panel[data-cb-open="true"] { max-height: 460px; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { #consent-banner, #consent-banner *, #consent-prefs-btn { animation: none !important; transition: none !important; } }