/* Evo Sistemi — strumenti di accessibilità: pulsante, pannello e gli effetti
che i comandi applicano alla pagina. Caricato da solo, dopo gli altri fogli,
così le regole di aiuto vincono sui design ereditati senza !important
sparsi altrove. */
/* ------------------------------------------------------------- pulsante */
.a11y-apri {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 2147483000;
width: 52px;
height: 52px;
border: 0;
border-radius: 50%;
background: var(--violet, #5B168C);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 22px rgba(26, 14, 46, .32);
}
.a11y-apri:hover { background: var(--violet-2, #7A2BB8); }
.a11y-apri:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.a11y-apri svg { width: 26px; height: 26px; display: block; }
/* Su telefono la barra fissa dei contatti occupa il fondo: il pulsante sale
sopra di lei invece di finirci sotto. */
@media (max-width: 980px) {
.a11y-apri { bottom: calc(78px + env(safe-area-inset-bottom)); width: 46px; height: 46px; }
.a11y-apri svg { width: 23px; height: 23px; }
}
/* ------------------------------------------------------------- pannello */
.a11y-pannello {
position: fixed;
right: 18px;
bottom: 80px;
z-index: 2147483001;
width: 320px;
max-width: calc(100vw - 36px);
background: var(--card, #fff);
color: var(--ink, #1A0E2E);
border: 1px solid var(--line, #E7E0F0);
border-radius: 16px;
box-shadow: 0 22px 60px rgba(26, 14, 46, .28);
overflow: hidden;
}
@media (max-width: 980px) {
.a11y-pannello { bottom: calc(134px + env(safe-area-inset-bottom)); }
}
.a11y-pannello[hidden] { display: none; }
.a11y-testa {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
border-bottom: 1px solid var(--line, #E7E0F0);
}
.a11y-testa h2 {
margin: 0;
font-size: 16px;
font-family: var(--display, sans-serif);
letter-spacing: -.01em;
}
.a11y-chiudi {
border: 0;
background: transparent;
font-size: 24px;
line-height: 1;
cursor: pointer;
color: var(--muted, #6E6282);
padding: 2px 6px;
border-radius: 8px;
}
.a11y-chiudi:hover { color: var(--ink, #1A0E2E); background: var(--soft-2, #F4F0F9); }
.a11y-griglia {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 14px;
}
.a11y-griglia button {
font: inherit;
font-size: 13px;
line-height: 1.3;
min-height: 54px;
padding: 9px 8px;
border: 1px solid var(--line, #E7E0F0);
border-radius: 10px;
background: var(--soft, #FAF8FC);
color: var(--text, #3F3555);
cursor: pointer;
text-align: center;
}
.a11y-griglia button:hover { border-color: var(--violet, #5B168C); color: var(--ink, #1A0E2E); }
.a11y-griglia button:focus-visible { outline: 2px solid var(--violet, #5B168C); outline-offset: 2px; }
.a11y-griglia button[aria-pressed="true"] {
background: var(--violet, #5B168C);
border-color: var(--violet, #5B168C);
color: #fff;
}
.a11y-griglia button[aria-disabled="true"] { opacity: .45; cursor: default; }
.a11y-piede {
padding: 11px 16px 14px;
border-top: 1px solid var(--line, #E7E0F0);
font-size: 13px;
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
.a11y-piede button {
font: inherit;
font-size: 13px;
border: 1px solid var(--line, #E7E0F0);
background: var(--card, #fff);
color: var(--text, #3F3555);
border-radius: 999px;
padding: 6px 14px;
cursor: pointer;
}
.a11y-piede button:hover { border-color: var(--violet, #5B168C); color: var(--violet, #5B168C); }
.a11y-piede a { color: var(--violet, #5B168C); }
/* ============================================================ gli effetti
Applicati su con una classe, così valgono su tutta la pagina.
Qui l'!important serve davvero: deve vincere sui design ereditati, che a
loro volta usano !important. */
/* Testo più grande o più piccolo, a passi.
Prima moltiplicavo il font-size di ogni elemento per il fattore di
ingrandimento: sbagliato, perche' `1em` dentro un h1 vale la misura del
GENITORE, non quella del titolo — e il titolo da 60 px scendeva a 25.
Il tema dichiara le misure in px, quindi non basta nemmeno agire sul
font-size della radice. Si usa `zoom`, che scala tutto insieme e in
proporzione: testo, spazi e immagini. Pulsante, pannello e guida di
lettura restano fuori, altrimenti crescerebbero anche loro e finirebbero
fuori schermo. */
.a11y-zoom body > *:not(.a11y-apri):not(.a11y-pannello):not(.a11y-barra) {
zoom: var(--a11y-zoom, 1);
}
/* Alto contrasto: fondo scuro, testo chiaro, un solo colore per i link. */
.a11y-contrasto body,
.a11y-contrasto section, .a11y-contrasto header, .a11y-contrasto footer,
.a11y-contrasto div, .a11y-contrasto article, .a11y-contrasto aside {
background: #000 !important;
color: #fff !important;
}
.a11y-contrasto h1, .a11y-contrasto h2, .a11y-contrasto h3, .a11y-contrasto h4,
.a11y-contrasto p, .a11y-contrasto li, .a11y-contrasto span, .a11y-contrasto strong,
.a11y-contrasto b, .a11y-contrasto em, .a11y-contrasto td, .a11y-contrasto th,
.a11y-contrasto figcaption, .a11y-contrasto label { color: #fff !important; }
.a11y-contrasto a { color: #ffe14d !important; }
.a11y-contrasto .btn, .a11y-contrasto button {
background: #ffe14d !important; color: #000 !important; border-color: #ffe14d !important;
}
.a11y-contrasto img, .a11y-contrasto video { filter: contrast(1.15); }
/* Contrasto negativo: inverte tutto tranne le immagini, che tornano al verso
giusto con una seconda inversione. */
.a11y-negativo body { filter: invert(1) hue-rotate(180deg) !important; background: #fff !important; }
.a11y-negativo img, .a11y-negativo video, .a11y-negativo iframe,
.a11y-negativo svg image { filter: invert(1) hue-rotate(180deg) !important; }
/* Scala di grigi. */
.a11y-grigi body { filter: grayscale(1) !important; }
/* Link sempre riconoscibili anche senza distinguere i colori. */
.a11y-link a:not(.btn) {
text-decoration: underline !important;
text-underline-offset: 3px;
text-decoration-thickness: 2px;
}
/* Carattere ad alta leggibilità: forme più aperte e spaziatura maggiore. */
.a11y-leggibile body, .a11y-leggibile h1, .a11y-leggibile h2, .a11y-leggibile h3,
.a11y-leggibile h4, .a11y-leggibile p, .a11y-leggibile li, .a11y-leggibile a,
.a11y-leggibile span, .a11y-leggibile button, .a11y-leggibile label,
.a11y-leggibile input, .a11y-leggibile textarea {
font-family: Verdana, Tahoma, "DejaVu Sans", sans-serif !important;
letter-spacing: .02em !important;
word-spacing: .08em !important;
}
.a11y-leggibile p, .a11y-leggibile li { line-height: 1.85 !important; }
/* Cursore grande: due puntatori disegnati qui, senza file esterni. */
.a11y-cursore, .a11y-cursore * {
cursor: url('data:image/svg+xml;utf8,') 6 4, auto !important;
}
.a11y-cursore a, .a11y-cursore button, .a11y-cursore [role="button"],
.a11y-cursore input, .a11y-cursore label, .a11y-cursore select {
cursor: url('data:image/svg+xml;utf8,') 16 4, pointer !important;
}
/* Guida di lettura: una fascia che segue il puntatore e aiuta a non perdere
la riga. */
.a11y-barra {
position: fixed;
left: 0;
right: 0;
height: 44px;
z-index: 2147482000;
pointer-events: none;
background: rgba(91, 22, 140, .12);
border-top: 2px solid rgba(91, 22, 140, .55);
border-bottom: 2px solid rgba(91, 22, 140, .55);
}
/* Chi ha chiesto meno animazioni non deve vedere la barra rincorrere il
puntatore. */
@media (prefers-reduced-motion: reduce) {
.a11y-barra { transition: none !important; }
}
/* In stampa gli strumenti non servono. */
@media print {
.a11y-apri, .a11y-pannello, .a11y-barra { display: none !important; }
}
/* Il pannello resta leggibile con i propri colori anche quando l'alto
contrasto e il contrasto negativo cambiano tutto il resto: altrimenti i
suoi pulsanti diventano tutti gialli e non si capisce piu' quale sia
acceso. Gli strumenti devono restare usabili mentre li si usa. */
.a11y-contrasto .a11y-pannello,
.a11y-contrasto .a11y-pannello div { background: #111 !important; color: #fff !important; }
.a11y-contrasto .a11y-pannello .a11y-griglia button {
background: #1e1e1e !important; color: #fff !important; border-color: #666 !important;
}
.a11y-contrasto .a11y-pannello .a11y-griglia button[aria-pressed="true"] {
background: #ffe14d !important; color: #000 !important; border-color: #ffe14d !important;
}
.a11y-contrasto .a11y-pannello a { color: #ffe14d !important; }
.a11y-negativo .a11y-apri, .a11y-negativo .a11y-pannello {
filter: invert(1) hue-rotate(180deg) !important;
}