/* consent.css - banner e pannello del consenso cookie di itaevo.com (lo script e' consent.js) Tutto sta sotto .cc-root, con prefisso cc-: nessuna regola tocca il resto della pagina, tranne le due classi che lo script mette su (cc-banner-open, cc-modal-open) e lo spazio .cc-spacer in fondo al body. Colori e font vengono dalle variabili del sito (--red, --ink, --line, --bg-2, --f, --fh); i valori dopo la virgola servono solo se una pagina non le definisce. */ .cc-root{ --cc-red:var(--red,#E2001A); --cc-red-d:var(--red-d,#B3001A); --cc-ink:var(--ink,#17171B); --cc-ink-2:var(--ink-2,#5A5A64); /* testo secondario: 6,8:1 sul bianco (AA) */ --cc-ink-3:var(--ink-3,#8A8A93); /* solo per bordi e interruttore spento: 3,4:1, sopra il 3:1 dei componenti */ --cc-line:var(--line,#E4E4E8); --cc-bg-2:var(--bg-2,#F5F5F6); --cc-f:var(--f,"Inter Tight",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif); --cc-fh:var(--fh,"Bw Gradual","Inter Tight",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif); --cc-ease:var(--ease,cubic-bezier(.22,.7,.2,1)); } .cc-root,.cc-root *,.cc-root *::before,.cc-root *::after{box-sizing:border-box} /* l'attributo hidden deve vincere su qualunque display qui sotto */ .cc-root [hidden]{display:none!important} /* testo per i soli lettori di schermo (annuncio "scelta salvata") */ .cc-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ============ BANNER (non modale: la pagina resta usabile) ============ */ .cc-banner{position:fixed;left:0;right:0;bottom:0;z-index:2147483000; max-height:85vh;overflow-y:auto;overscroll-behavior:contain; /* telefono in orizzontale: scorre dentro, non esce dallo schermo */ background:#fff;color:var(--cc-ink);border-top:3px solid var(--cc-red); box-shadow:0 -20px 50px -26px rgba(0,0,0,.42); padding-bottom:env(safe-area-inset-bottom,0px); /* iPhone: sopra la barra home */ font-family:var(--cc-f);font-size:15px;font-weight:400;line-height:1.55;text-align:left;letter-spacing:0; -webkit-font-smoothing:antialiased; transition:transform .45s var(--cc-ease),opacity .45s var(--cc-ease)} .cc-banner.cc-enter{transform:translateY(28px);opacity:0} .cc-banner-in{position:relative;max-width:1220px;margin:0 auto;padding:24px 76px 24px 30px; /* a destra lo spazio della X */ display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 44px;align-items:center} .cc-root .cc-title{margin:0 0 8px;padding:0 44px 0 0;font-family:var(--cc-fh);font-size:20px;font-weight:500;line-height:1.2; letter-spacing:-.01em;color:var(--cc-ink);text-transform:none} .cc-root .cc-text{margin:0 0 6px;font-size:14.5px;line-height:1.55;color:var(--cc-ink-2)} .cc-root .cc-text:last-child{margin-bottom:0} .cc-root .cc-link{color:var(--cc-ink);font-weight:500;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px} .cc-root .cc-note{margin:10px 0 0;padding:9px 12px;border-left:3px solid var(--cc-red);background:var(--cc-bg-2); font-size:14px;line-height:1.45;color:var(--cc-ink)} /* ============ LE TRE AZIONI: stesso componente, stessa misura, stesso colore ============ Nessuna delle tre e' messa in risalto (EDPB 03/2022 sui dark pattern, Garante 2021): griglia a colonne uguali, quindi anche larghezza e altezza sono identiche qualunque sia la lunghezza del testo. */ .cc-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .cc-banner .cc-actions{min-width:470px} .cc-root .cc-btn{-webkit-appearance:none;appearance:none;margin:0;display:flex;align-items:center;justify-content:center; width:100%;min-height:48px;padding:11px 18px;border:1.5px solid var(--cc-ink);border-radius:2px; background:var(--cc-ink);color:#fff;box-shadow:none; font-family:var(--cc-f);font-size:16px;font-weight:500;line-height:1.2;letter-spacing:0;text-align:center;text-transform:none; white-space:normal;cursor:pointer;-webkit-tap-highlight-color:transparent; transition:background-color .2s,border-color .2s,transform .2s var(--cc-ease)} /* hover solo dove c'e' davvero un puntatore: sui telefoni il tocco lascia il bottone "in hover", e il bottone che finisce sotto il dito dopo "Customize" resterebbe rosso, cioe' piu' evidente degli altri due */ @media (hover:hover){ .cc-root .cc-btn:hover{background:var(--cc-red);border-color:var(--cc-red);color:#fff} .cc-root .cc-x:hover{background:var(--cc-bg-2);color:var(--cc-red)} .cc-root .cc-link:hover{color:var(--cc-red)} } .cc-root .cc-btn:active{transform:translateY(1px)} /* X: 44x44 (misura minima di tocco), ben visibile */ .cc-root .cc-x{-webkit-appearance:none;appearance:none;margin:0;padding:0;width:44px;height:44px;flex:none; display:flex;align-items:center;justify-content:center;border:0;border-radius:2px;background:transparent; color:var(--cc-ink);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .2s,color .2s} .cc-root .cc-x svg{display:block;pointer-events:none} .cc-x-banner{position:absolute;top:12px;right:16px} /* focus da tastiera sempre visibile: anello rosso staccato dal componente (4,9:1 sul bianco) */ .cc-root .cc-btn:focus-visible,.cc-root .cc-x:focus-visible,.cc-root .cc-link:focus-visible, .cc-root summary:focus-visible{outline:3px solid var(--cc-red);outline-offset:3px} .cc-root .cc-btn:focus:not(:focus-visible),.cc-root .cc-x:focus:not(:focus-visible){outline:none} .cc-root .cc-modal-title:focus{outline:none} /* ============ PANNELLO "Cookie settings" (dialog modale) ============ */ .cc-root .cc-modal{position:fixed;inset:0;z-index:2147483001;margin:auto;padding:0;border:0;border-radius:12px; width:min(640px,calc(100% - 32px));max-width:none;max-height:calc(100% - 32px);overflow:hidden; height:-webkit-fit-content;height:-moz-fit-content;height:fit-content; /* alta quanto il contenuto, non tutto lo schermo */ background:#fff;color:var(--cc-ink);box-shadow:0 40px 90px -30px rgba(0,0,0,.55); font-family:var(--cc-f);font-size:15px;font-weight:400;line-height:1.55;text-align:left;-webkit-font-smoothing:antialiased} .cc-root .cc-modal:not([open]){display:none} .cc-root .cc-modal[open]{display:flex;flex-direction:column} .cc-root .cc-modal::backdrop{background:rgba(23,23,27,.6)} /* browser senza : lo sfondo scuro e' un'ombra enorme attorno alla scheda */ .cc-root .cc-modal.cc-fallback[open]{box-shadow:0 0 0 100vmax rgba(23,23,27,.6),0 40px 90px -30px rgba(0,0,0,.55)} .cc-modal-in{display:flex;flex-direction:column;min-height:0;max-height:100%;flex:1 1 auto} .cc-modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 18px 14px 28px;border-bottom:1px solid var(--cc-line)} .cc-root .cc-modal-title{margin:0;font-family:var(--cc-fh);font-size:23px;font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--cc-ink)} .cc-modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 28px 8px} .cc-modal-body>.cc-text{margin-bottom:14px} .cc-modal-foot{padding:16px 28px 22px;border-top:1px solid var(--cc-line);background:#fff} .cc-cat{padding:18px 0 16px;border-top:1px solid var(--cc-line)} .cc-cat-head{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:36px} .cc-root .cc-cat-title{margin:0;font-family:var(--cc-f);font-size:17px;font-weight:600;line-height:1.3;letter-spacing:0;color:var(--cc-ink)} /* il label sta dentro il titolo: eredita tutto, anche se la pagina ha regole sue per label */ .cc-root .cc-cat-title label{display:inline;margin:0;padding:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:none;cursor:pointer} .cc-cat .cc-text{margin:8px 0 0} .cc-badge{flex:none;font-size:14px;font-weight:600;color:var(--cc-ink-2);white-space:nowrap} /* interruttore: e' un vero , trasparente sopra il disegno (tastiera, lettori di schermo e clic funzionano come su una casella normale); lo stato e' scritto anche a parole, non solo col colore */ .cc-sw{position:relative;flex:none;display:inline-flex;align-items:center;gap:10px} .cc-root .cc-sw input{position:absolute;left:0;top:50%;z-index:1;width:52px;height:32px;margin:-16px 0 0;padding:0;opacity:0;cursor:pointer} .cc-track{position:relative;display:block;width:52px;height:32px;border-radius:16px;background:var(--cc-ink-3);transition:background-color .2s} .cc-track::after{content:"";position:absolute;left:3px;top:3px;width:26px;height:26px;border-radius:50%;background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s var(--cc-ease)} .cc-sw input:checked+.cc-track{background:var(--cc-red)} .cc-sw input:checked+.cc-track::after{transform:translateX(20px)} .cc-sw input:focus-visible+.cc-track{outline:3px solid var(--cc-red);outline-offset:3px} .cc-sw-state{min-width:4.2em;font-size:15px;font-weight:600;color:var(--cc-ink)} /* elenco dei cookie di ogni categoria, chiuso di default */ .cc-details{margin:10px 0 0} .cc-root .cc-details summary{display:inline-flex;align-items:center;gap:8px;padding:6px 0;list-style:none;cursor:pointer; font-size:14.5px;font-weight:600;color:var(--cc-ink)} .cc-details summary::-webkit-details-marker{display:none} .cc-details summary::before{content:"";flex:none;width:0;height:0;margin:0 2px;border-left:7px solid currentColor; border-top:5px solid transparent;border-bottom:5px solid transparent;transition:transform .2s} .cc-details[open] summary::before{transform:rotate(90deg)} .cc-root .cc-dl{display:grid;gap:8px;margin:8px 0 0;padding:0} .cc-dl>div{padding:10px 12px;border-radius:6px;background:var(--cc-bg-2)} .cc-root .cc-dl dt{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;font-weight:600;color:var(--cc-ink);overflow-wrap:anywhere} .cc-root .cc-dl dd{margin:2px 0 0;font-size:14px;line-height:1.45;color:var(--cc-ink-2)} .cc-root .cc-dl .cc-dl-meta{color:var(--cc-ink);font-size:13.5px} /* ============ SPAZIO E SCROLL DELLA PAGINA ============ */ /* spazio in fondo al body alto quanto il banner: la fine della pagina (footer, modulo) si puo' portare sopra il banner */ .cc-spacer{display:block;height:var(--cc-banner-h,0px)} html:not(.cc-banner-open) .cc-spacer{display:none} /* un campo raggiunto con Tab non deve finire sotto il banner (WCAG 2.2, 2.4.11) */ html.cc-banner-open{scroll-padding-bottom:var(--cc-banner-h,0px)} /* pannello aperto: la pagina dietro non scorre; scrollbar-gutter evita che il contenuto salti di lato */ html.cc-modal-open{overflow:hidden;scrollbar-gutter:stable} /* ============ SCHERMI PIU' STRETTI ============ */ @media (max-width:980px){ .cc-banner-in{grid-template-columns:minmax(0,1fr);padding:20px 22px} .cc-banner .cc-actions{min-width:0} } @media (max-width:600px){ .cc-banner-in{padding:16px 16px 14px;gap:14px} .cc-x-banner{top:6px;right:4px} .cc-root .cc-title{font-size:18px;margin-bottom:12px} /* il testo parte sotto la X */ .cc-root .cc-text{font-size:14px} .cc-actions{gap:8px} .cc-root .cc-btn{padding:10px 4px} /* poco margine interno: "Accetta tutti" sta su una riga; se va a capo, i tre restano uguali */ .cc-root .cc-modal{width:calc(100% - 16px);max-height:calc(100% - 16px);border-radius:10px} .cc-modal-head{padding:12px 8px 10px 18px} .cc-root .cc-modal-title{font-size:20px} .cc-modal-body{padding:14px 18px 6px} .cc-modal-foot{padding:12px 16px 14px} } /* telefoni molto stretti: i tre bottoni uno sotto l'altro, sempre uguali */ @media (max-width:359px){ .cc-actions{grid-template-columns:minmax(0,1fr)} } @media (prefers-reduced-motion:reduce){ .cc-banner,.cc-root .cc-btn,.cc-root .cc-x,.cc-track,.cc-track::after,.cc-details summary::before{transition:none} .cc-banner.cc-enter{transform:none;opacity:1} .cc-root .cc-btn:active{transform:none} } /* contrasto elevato di Windows: bordi e stati disegnati con i colori di sistema */ @media (forced-colors:active){ .cc-banner{border-top:3px solid CanvasText} .cc-root .cc-modal{border:2px solid CanvasText} .cc-root .cc-btn{border-color:ButtonText} .cc-track{border:2px solid CanvasText;background:Canvas} .cc-track::after{background:CanvasText;top:1px;left:1px} .cc-sw input:checked+.cc-track{background:Highlight} .cc-root .cc-note{border:1px solid CanvasText} } @media print{ .cc-root,.cc-spacer{display:none!important} }