/* ═══════════════════════════════════════════ SPEMME PRODUCTION — BANNER COOKIE Serve a una cosa sola: decidere se Google Tag Manager può partire. Finché non c'è una scelta esplicita, GTM non viene nemmeno scaricato (vedi js/cookie.js). Il markup lo scrive il JS, qui c'è solo il vestito. ⚠️ Il pannello è `position: fixed` ed è figlio diretto del . Se un giorno si rimette `transform`, `filter`, `backdrop-filter`, `perspective` o `will-change` sul , il banner si sgancia dal viewport e finisce in cima al documento — è la stessa trappola che ha già colpito nav, lightbox e menu mobile. Il controllo è sempre `document.getElementById('cookie-banner').offsetParent === null`. ═══════════════════════════════════════════ */ .ck-banner { position: fixed; z-index: 600; /* sopra la nav, che sta a 500 */ left: 0; right: 0; bottom: 0; background: var(--petrolio-dark); border-top: 1px solid rgba(201, 168, 76, .35); box-shadow: 0 -18px 44px rgba(0, 0, 0, .45); padding: 1.6rem 2rem; } /* filo dorato in sfumatura sul bordo alto, come .sp-cta e .contatti-band */ .ck-banner::before { content: ''; position: absolute; top: -1px; left: 12%; right: 12%; height: 2px; background: linear-gradient(to right, transparent, var(--gold), transparent); } .ck-inner { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; } .ck-label { font-family: var(--font-label); font-size: var(--fs-micro); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-bottom: .5rem; } .ck-text { font-size: var(--fs-sm); line-height: 1.7; color: var(--text-light); max-width: 66ch; /* la misura della riga, come il resto del sito */ margin: 0; } .ck-text a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; } .ck-text a:hover { color: var(--gold-light); } /* ─── I DUE PULSANTI ─── Hanno di proposito la STESSA dimensione e lo stesso peso tipografico: rifiutare deve costare quanto accettare. Cambia solo il riempimento, perché "Accetta" è l'azione di default, non quella privilegiata. */ .ck-actions { display: flex; gap: .8rem; } .ck-btn { font-family: var(--font-label); font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase; padding: 0 1.6rem; min-height: 44px; /* bersaglio tattile */ min-width: 132px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; white-space: nowrap; transition: background var(--transition-normal), color var(--transition-normal), border var(--transition-normal); } .ck-btn--si { background: var(--gold); border: 1px solid var(--gold); color: var(--petrolio-dark); } .ck-btn--si:hover { background: var(--gold-light); border-color: var(--gold-light); } .ck-btn--no { background: transparent; border: 1px solid rgba(201, 168, 76, .45); color: var(--cream); } .ck-btn--no:hover { border-color: var(--gold); color: var(--gold-light); } /* ─── ENTRATA ─── Il banner NON dipende dall'animazione per essere visibile: nasce già al suo posto e l'animazione lo accompagna soltanto. È la regola che il sito si è dato dopo la pagina bianca del ritorno indietro. */ @keyframes ckSu { from { transform: translateY(100%); } to { transform: translateY(0); } } .ck-banner { animation: ckSu .4s ease-out; } @media (prefers-reduced-motion: reduce) { .ck-banner { animation: none; } .ck-btn { transition: none; } } /* ─── TELEFONO ─── Sotto i 760px il testo va sopra e i pulsanti sotto, affiancati e a metà larghezza ciascuno: restano raggiungibili col pollice e non mandano a capo l'etichetta. */ @media (max-width: 760px) { .ck-banner { padding: 1.3rem 1.2rem; } .ck-inner { grid-template-columns: 1fr; gap: 1.2rem; } .ck-actions { width: 100%; } .ck-btn { flex: 1 1 0; min-width: 0; padding: 0 .8rem; } } /* ─── IL LINK PER RIPENSARCI ─── Sta nel footer di ogni pagina e in fondo all'informativa: senza un modo per tornare sui propri passi, il consenso non è revocabile. */ .ck-riapri { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: none; } .ck-riapri:hover { color: var(--gold); } /* Il pulsante "Gestisci le preferenze" dentro l'informativa usa .btn-sm, che si ferma a 42px: due pixel sotto la soglia del bersaglio tattile. Trovato da `driver.py check`, non a occhio. */ .btn[data-ck-riapri] { min-height: 44px; display: inline-flex; align-items: center; } /* L'esito della scelta, annunciato agli screen reader e mostrato in fondo all'informativa. */ .ck-stato { font-size: var(--fs-sm); color: var(--text-dim); margin-top: .8rem; }