/* ===================================================================== Certosa Servizi — Cookie Consent — stili Allineato al design system del sito: font Inter, token colore condivisi, dark mode automatica, angoli e ombre moderne. I colori NON sono più hard-coded: ereditano i token del sito (var(--surface), var(--text), var(--brand)…) con un valore di fallback, così l'UI funziona sia integrata nel sito sia da sola (es. le demo in _dev). Cambiando tema sul il banner segue. Prefisso cs-cc- per evitare collisioni col resto del sito. ===================================================================== */ /* ---------- Token locali: mappano i token del sito con fallback ---------- */ .cs-cc-root { --cs-surface: var(--surface, #ffffff); --cs-surface-2: var(--surface-2, #f5f9fd); --cs-surface-3: var(--surface-3, #eaf2fa); --cs-text: var(--text, #0d2236); --cs-text-strong: var(--text-strong, #04243f); --cs-muted: var(--text-muted, #516a82); --cs-line: var(--line, #dde8f3); --cs-brand: var(--brand, #005495); --cs-brand-bright: var(--brand-bright, #1a78c4); --cs-accent: var(--accent, #dfb220); --cs-font: var(--body, 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif); --cs-ease: var(--ease, cubic-bezier(.22, .61, .36, 1)); --cs-radius: 20px; --cs-radius-sm: 12px; --cs-radius-xs: 10px; --cs-shadow: 0 24px 70px -18px rgba(4, 20, 40, .45); position: relative; z-index: 2147483000; } .cs-cc-root *, .cs-cc-root *::before, .cs-cc-root *::after { box-sizing: border-box; } /* Il wordmark blu sparirebbe sul fondo scuro: mostro la variante bianca. */ :root[data-theme="dark"] .cs-cc-logo img { content: url("logo-certosa-white.png"); } /* ---------- Banner (livello 1) — card ancorata in basso ---------- */ .cs-cc-banner-wrap { position: fixed; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: clamp(12px, 3vw, 28px); background: rgba(4, 18, 33, .34); -webkit-backdrop-filter: blur(3px) saturate(120%); backdrop-filter: blur(3px) saturate(120%); animation: cs-fade .25s var(--cs-ease); } .cs-cc-banner { position: relative; width: 100%; max-width: 640px; background: var(--cs-surface); border: 1px solid var(--cs-line); border-radius: var(--cs-radius); padding: 28px 30px 26px; box-shadow: var(--cs-shadow); font-family: var(--cs-font); color: var(--cs-text); animation: cs-rise .4s var(--cs-ease); } /* accento in cima alla card: sottile filo brand→oro */ .cs-cc-banner::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--cs-brand), var(--cs-brand-bright) 55%, var(--cs-accent)); opacity: .9; } .cs-cc-logo { display: flex; justify-content: flex-start; margin: 6px 0 16px; } .cs-cc-logo img { width: 148px; height: auto; } .cs-cc-title { margin: 0 0 8px; font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em; color: var(--cs-text-strong); font-family: var(--display, var(--cs-font)); } .cs-cc-text { margin: 0 0 22px; font-size: .92rem; line-height: 1.65; color: var(--cs-muted); text-align: left; } .cs-cc-text a, .cs-cc-modal-intro a { color: var(--cs-brand); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .cs-cc-text a:hover, .cs-cc-modal-intro a:hover { color: var(--cs-brand-bright); } .cs-cc-actions { display: flex; gap: 12px; justify-content: flex-end; align-items: center; flex-wrap: wrap; } /* ---------- Pulsanti ---------- */ .cs-cc-btn { font-family: inherit; font-size: .9rem; font-weight: 600; line-height: 1; cursor: pointer; border-radius: var(--cs-radius-xs); padding: 13px 22px; border: 1px solid transparent; transition: background .18s var(--cs-ease), color .18s var(--cs-ease), border-color .18s var(--cs-ease), transform .18s var(--cs-ease), box-shadow .18s var(--cs-ease); } .cs-cc-btn:hover { transform: translateY(-1px); } .cs-cc-btn:active { transform: translateY(0); } /* primario: pieno brand */ .cs-cc-btn-primary { background: var(--cs-brand); color: #fff; border-color: var(--cs-brand); box-shadow: 0 8px 20px -8px rgba(0, 84, 149, .5); /* fallback per browser senza color-mix */ box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--cs-brand) 65%, transparent); } .cs-cc-btn-primary:hover { background: var(--cs-brand-bright); border-color: var(--cs-brand-bright); } /* secondario: contorno su superficie */ .cs-cc-btn-secondary { background: var(--cs-surface-2); color: var(--cs-text-strong); border-color: var(--cs-line); } .cs-cc-btn-secondary:hover { background: var(--cs-surface-3); border-color: var(--cs-brand); color: var(--cs-brand); } /* fantasma: solo testo, per l'azione terziaria (Personalizza) */ .cs-cc-btn-link { background: none; color: var(--cs-muted); border: none; padding: 13px 10px; text-decoration: underline; text-underline-offset: 3px; } .cs-cc-btn-link:hover { color: var(--cs-brand); transform: none; } /* ---------- Modale preferenze (livello 2) ---------- */ .cs-cc-modal-wrap { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(4, 18, 33, .5); -webkit-backdrop-filter: blur(4px) saturate(120%); backdrop-filter: blur(4px) saturate(120%); padding: clamp(12px, 3vw, 28px); z-index: 2147483001; animation: cs-fade .25s var(--cs-ease); } .cs-cc-modal { width: 100%; max-width: 580px; max-height: 88vh; background: var(--cs-surface); border: 1px solid var(--cs-line); border-radius: var(--cs-radius); box-shadow: var(--cs-shadow); display: flex; flex-direction: column; overflow: hidden; font-family: var(--cs-font); color: var(--cs-text); animation: cs-rise .4s var(--cs-ease); } .cs-cc-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px 14px; flex: 0 0 auto; border-bottom: 1px solid var(--cs-line); } .cs-cc-logo-sm { margin: 0; justify-content: flex-start; } .cs-cc-logo-sm img { width: 120px; } .cs-cc-close { width: 38px; height: 38px; border: 1px solid var(--cs-line); background: var(--cs-surface-2); border-radius: var(--cs-radius-xs); font-size: 22px; line-height: 1; color: var(--cs-muted); cursor: pointer; transition: background .18s var(--cs-ease), color .18s var(--cs-ease), border-color .18s var(--cs-ease); } .cs-cc-close:hover { background: var(--cs-surface-3); color: var(--cs-text-strong); border-color: var(--cs-brand); } .cs-cc-modal-scroll { overflow-y: auto; padding: 22px 24px 10px; flex: 1 1 auto; } .cs-cc-modal-title { margin: 0 0 12px; font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; color: var(--cs-text-strong); font-family: var(--display, var(--cs-font)); } .cs-cc-modal-intro { margin: 0 0 20px; font-size: .88rem; line-height: 1.65; color: var(--cs-muted); } .cs-cc-allow-all { display: inline-block; margin: 0 0 26px; } .cs-cc-manage { margin: 0 0 6px; font-size: .95rem; font-weight: 600; color: var(--cs-text-strong); font-family: var(--display, var(--cs-font)); } /* ---------- Categoria (accordion) ---------- */ .cs-cc-cat { border-bottom: 1px solid var(--cs-line); } .cs-cc-cat:first-of-type { border-top: 1px solid var(--cs-line); } .cs-cc-cat-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; background: none; border: none; padding: 16px 4px; font-family: inherit; cursor: pointer; text-align: left; border-radius: var(--cs-radius-xs); transition: background .18s var(--cs-ease); } .cs-cc-cat-head:hover { background: var(--cs-surface-2); } .cs-cc-cat-title { font-size: .95rem; font-weight: 600; color: var(--cs-text-strong); display: flex; align-items: center; gap: 12px; } .cs-cc-caret { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--cs-surface-3); color: var(--cs-brand); font-weight: 600; font-size: 15px; line-height: 1; flex: 0 0 auto; } .cs-cc-always { font-size: .78rem; font-weight: 600; color: var(--cs-brand); background: var(--cs-surface-3); padding: 5px 11px; border-radius: 999px; white-space: nowrap; } .cs-cc-cat-body { max-height: 0; overflow: hidden; transition: max-height .28s var(--cs-ease); } .cs-cc-cat.cs-open .cs-cc-cat-body { max-height: 640px; } .cs-cc-cat-body p { margin: 0; padding: 2px 4px 18px 38px; font-size: .86rem; line-height: 1.65; color: var(--cs-muted); } /* ---------- Toggle switch ---------- */ .cs-cc-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: 0 0 auto; } .cs-cc-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; } .cs-cc-slider { position: absolute; inset: 0; background: var(--cs-line); border-radius: 26px; transition: background .2s var(--cs-ease); } .cs-cc-slider::before { content: ""; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .22s var(--cs-ease); box-shadow: 0 2px 5px rgba(0, 0, 0, .28); } .cs-cc-switch input:checked + .cs-cc-slider { background: var(--cs-brand); } .cs-cc-switch input:checked + .cs-cc-slider::before { transform: translateX(20px); } .cs-cc-switch input:focus-visible + .cs-cc-slider { outline: 2px solid var(--cs-accent); outline-offset: 2px; } /* ---------- Footer modale ---------- */ .cs-cc-modal-footer { flex: 0 0 auto; display: flex; gap: 12px; justify-content: flex-end; padding: 16px 24px; border-top: 1px solid var(--cs-line); background: var(--cs-surface-2); } .cs-cc-modal-footer .cs-cc-btn { flex: 0 1 auto; } /* ---------- Focus visibile (accessibilità) ---------- */ .cs-cc-root button:focus-visible, .cs-cc-root a:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 2px; } /* Il focus viene spostato sul dialog per gli screen reader: nessun anello visibile sul contenitore (i controlli reali mantengono il loro focus-visible). */ .cs-cc-banner:focus, .cs-cc-modal:focus { outline: none; } /* ---------- Animazioni ---------- */ @keyframes cs-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes cs-rise { from { opacity: 0; transform: translateY(16px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .cs-cc-banner-wrap, .cs-cc-modal-wrap, .cs-cc-banner, .cs-cc-modal, .cs-cc-cat-body, .cs-cc-slider, .cs-cc-slider::before, .cs-cc-btn { animation: none !important; transition: none !important; } } /* ---------- Mobile ---------- */ @media (max-width: 640px) { .cs-cc-banner { padding: 24px 20px 22px; border-radius: 18px; } .cs-cc-actions { flex-direction: column-reverse; gap: 10px; align-items: stretch; } .cs-cc-actions .cs-cc-btn { width: 100%; text-align: center; } .cs-cc-modal-footer { flex-direction: column-reverse; } .cs-cc-modal-footer .cs-cc-btn { width: 100%; } }