/* --------------------------------------------------------------------------- * css/cookieconsent.css - Banner e pannello preferenze cookie di I-Med. * * Sostituisce css/jquery.cookiebar.css (plugin PrimeBox 2012), che aveva due * difetti pratici e uno normativo: * - nessuno z-index: la barra era "position:fixed" ma prima figlia di , * quindi qualunque elemento posizionato piu' avanti nel DOM (la chat * Messenger, che sta a z-index ~2147483000, il footer, le sezioni del * tema) le finiva sopra: barra invisibile e, dove coperta, non cliccabile; * - bottoni con "padding:0 6px" su line-height 24px: area di tocco alta * 24px, sotto i 44px raccomandati, quasi impossibile da centrare da mobile; * - un solo bottone (accetta), nessun rifiuto, nessun link all'informativa. * * Qui: z-index sopra qualunque widget di terze parti, scrim per garantire la * visibilita', bottoni Accetta/Rifiuta di dimensione e peso IDENTICI (il * provvedimento del Garante del 10/06/2021 chiede pari evidenza grafica). * * Palette allineata al tema: primario #2e7eb0, ombra #0d4e77 (css/custom.css). * ------------------------------------------------------------------------- */ #imed-cc-scrim[hidden], #imed-cc-banner[hidden], #imed-cc-prefs[hidden], #imed-cc-reopen[hidden] { display: none !important; } /* --- Scrim ---------------------------------------------------------------- */ #imed-cc-scrim { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(8, 20, 30, 0.55); z-index: 2147483000; } /* --- Banner --------------------------------------------------------------- */ #imed-cc-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483001; background: #0f2433; color: #eef4f8; border-top: 4px solid #2e7eb0; box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.45); padding: 20px 18px; max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch; font-family: inherit; outline: none; } .imed-cc-inner { max-width: 1170px; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .imed-cc-text { -webkit-box-flex: 1; -ms-flex: 1 1 420px; flex: 1 1 420px; min-width: 260px; padding-right: 24px; } #imed-cc-title { margin: 0 0 6px 0; font-size: 17px; line-height: 1.3; font-weight: 700; color: #ffffff; } #imed-cc-desc { margin: 0; font-size: 14.5px; line-height: 1.55; color: #d7e3ec; } #imed-cc-desc a, .imed-cc-note a { color: #8ec9ee; text-decoration: underline; } #imed-cc-desc a:hover, #imed-cc-desc a:focus, .imed-cc-note a:hover, .imed-cc-note a:focus { color: #ffffff; } .imed-cc-actions { -ms-flex: 0 0 auto; flex: 0 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-top: 12px; } /* --- Bottoni -------------------------------------------------------------- */ /* min-height 44px = area di tocco raccomandata (WCAG 2.1 - 2.5.5). Accetta e Rifiuta condividono ESATTAMENTE la stessa classe visiva. */ .imed-cc-btn { display: inline-block; min-height: 44px; min-width: 132px; margin: 0 8px 8px 0; padding: 12px 22px; border: 2px solid transparent; border-radius: 4px; font-size: 15px; font-weight: 600; line-height: 18px; text-align: center; text-decoration: none; cursor: pointer; background: #2e7eb0; color: #ffffff; -webkit-appearance: none; appearance: none; transition: background-color 0.2s ease, color 0.2s ease; } .imed-cc-btn:hover, .imed-cc-btn:focus { background: #0d4e77; color: #ffffff; text-decoration: none; } .imed-cc-btn:focus, #imed-cc-reopen:focus { outline: 3px solid #ffd27f; outline-offset: 2px; } /* Terza scelta (Personalizza): volutamente secondaria, non e' ne' un consenso ne' un rifiuto, quindi non deve competere con i due bottoni principali. */ .imed-cc-btn--ghost { background: transparent; color: #eef4f8; border-color: #6d8ba1; } .imed-cc-btn--ghost:hover, .imed-cc-btn--ghost:focus { background: rgba(255, 255, 255, 0.10); color: #ffffff; border-color: #eef4f8; } .imed-cc-note { -ms-flex: 1 1 100%; flex: 1 1 100%; margin: 4px 0 0 0; font-size: 12.5px; line-height: 1.5; color: #a9bccb; } /* --- Pannello preferenze -------------------------------------------------- */ #imed-cc-prefs { position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 92%; max-width: 660px; max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 2147483002; background: #ffffff; color: #444444; border-top: 4px solid #2e7eb0; border-radius: 5px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); padding: 24px 26px; outline: none; } #imed-cc-prefs h2 { margin: 0 0 6px 0; font-size: 21px; line-height: 1.3; color: #2e7eb0; } #imed-cc-prefs p { color: #5c6871; font-size: 14px; line-height: 1.55; } .imed-cc-cat { border: 1px solid #e2e8ec; border-radius: 4px; padding: 14px 16px; margin: 14px 0; background: #f8fafb; } .imed-cc-cat-head { display: block; font-size: 15.5px; font-weight: 700; color: #333333; cursor: pointer; min-height: 24px; } .imed-cc-cat-head input { margin: 0 10px 0 0; width: 18px; height: 18px; vertical-align: -3px; } .imed-cc-cat-head input[disabled] + span { color: #7a7c82; } .imed-cc-cat p { margin: 8px 0 0 0; font-size: 13.5px; } .imed-cc-cat table { width: 100%; margin-top: 10px; font-size: 12.5px; border-collapse: collapse; } .imed-cc-cat th, .imed-cc-cat td { border-top: 1px solid #e2e8ec; padding: 6px 8px; text-align: left; vertical-align: top; color: #5c6871; } .imed-cc-cat th { color: #333333; font-weight: 600; } .imed-cc-prefs-actions { margin-top: 18px; padding-top: 16px; border-top: 1px solid #e2e8ec; } #imed-cc-prefs .imed-cc-btn--ghost { color: #2e7eb0; border-color: #b9cddb; } #imed-cc-prefs .imed-cc-btn--ghost:hover, #imed-cc-prefs .imed-cc-btn--ghost:focus { background: #eaf3f9; color: #0d4e77; border-color: #2e7eb0; } /* --- Riapertura preferenze (la revoca deve restare sempre disponibile) ---- */ #imed-cc-reopen { position: fixed; left: 14px; bottom: 14px; z-index: 2147482999; min-height: 40px; padding: 9px 14px; border: 1px solid #d7e3ec; border-radius: 20px; background: #ffffff; color: #0d4e77; font-size: 13px; font-weight: 600; line-height: 20px; cursor: pointer; box-shadow: 0 3px 14px rgba(0, 0, 0, 0.20); opacity: 0.85; } #imed-cc-reopen:hover, #imed-cc-reopen:focus { opacity: 1; background: #eaf3f9; } #imed-cc-reopen i { margin-right: 6px; } /* --- Mobile --------------------------------------------------------------- */ @media (max-width: 767px) { #imed-cc-banner { padding: 16px 14px; } .imed-cc-text { padding-right: 0; padding-bottom: 6px; } .imed-cc-actions { width: 100%; } .imed-cc-btn { display: block; width: 100%; min-width: 0; margin: 0 0 10px 0; } #imed-cc-prefs { padding: 18px 16px; width: 94%; } #imed-cc-reopen { left: 10px; bottom: 10px; font-size: 12px; } } @media (prefers-reduced-motion: reduce) { .imed-cc-btn { transition: none; } }