/* ========================================================================== Accessibilità Semplice — stili -------------------------------------------------------------------------- 1) Stili del widget (pulsante + pannello), già accessibili da tastiera. 2) Modalità di accessibilità applicate via classi su . ========================================================================== */ :root { --a11y-accent: #1d4ed8; --a11y-scale: 1; } /* --- 1. WIDGET --------------------------------------------------------- */ .as-a11y { position: fixed; bottom: 20px; z-index: 99999; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.4; } .as-a11y--right { right: 20px; } .as-a11y--left { left: 20px; } .as-a11y__toggle { width: 52px; height: 52px; border-radius: 50%; border: none; background: var(--a11y-accent); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); transition: transform .15s ease, box-shadow .15s ease; } .as-a11y__toggle:hover { transform: scale(1.06); } .as-a11y__toggle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px var(--a11y-accent); } .as-a11y__panel { position: absolute; bottom: 64px; width: 280px; max-width: calc(100vw - 40px); background: #ffffff; color: #111827; border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28); padding: 16px; box-sizing: border-box; } .as-a11y--right .as-a11y__panel { right: 0; } .as-a11y--left .as-a11y__panel { left: 0; } .as-a11y__panel[hidden] { display: none; } .as-a11y__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .as-a11y__title { font-size: 17px; font-weight: 700; margin: 0; color: #111827; } .as-a11y__close { background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: #6b7280; padding: 0 4px; } .as-a11y__close:hover { color: #111827; } .as-a11y__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .as-a11y__label { font-size: 14px; font-weight: 600; } .as-a11y__stepper { display: flex; align-items: center; gap: 6px; } .as-a11y__step { min-width: 36px; height: 32px; border: 1px solid #d1d5db; background: #f9fafb; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 14px; color: #111827; } .as-a11y__step:hover { background: #eef2ff; } .as-a11y__steplevel { min-width: 46px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; } .as-a11y__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; } .as-a11y__opt { border: 1px solid #d1d5db; background: #f9fafb; border-radius: 8px; padding: 10px 8px; cursor: pointer; font-size: 13px; font-weight: 600; color: #111827; text-align: center; min-height: 44px; } .as-a11y__opt:hover { background: #eef2ff; } .as-a11y__opt[aria-pressed="true"] { background: var(--a11y-accent); border-color: var(--a11y-accent); color: #fff; } .as-a11y__step:focus-visible, .as-a11y__opt:focus-visible, .as-a11y__close:focus-visible, .as-a11y__reset:focus-visible { outline: 3px solid var(--a11y-accent); outline-offset: 2px; } .as-a11y__reset { width: 100%; border: 1px solid #d1d5db; background: #fff; border-radius: 8px; padding: 10px; cursor: pointer; font-size: 13px; font-weight: 600; color: #b91c1c; } .as-a11y__reset:hover { background: #fef2f2; } /* --- 2. MODALITÀ DI ACCESSIBILITÀ ------------------------------------- */ /* Dimensione testo: scala il font-size di root. Funziona al meglio con temi che usano rem/em. */ html.a11y-text { font-size: calc(100% * var(--a11y-scale, 1)) !important; } /* Alto contrasto: sfondo nero, testo bianco, link gialli. */ html.a11y-contrast, html.a11y-contrast body { background: #000 !important; color: #fff !important; } html.a11y-contrast :where(p, span, li, h1, h2, h3, h4, h5, h6, td, th, label, blockquote, figcaption, strong, em, div) { background-color: transparent !important; color: #fff !important; border-color: #fff !important; } html.a11y-contrast :where(a) { color: #ffff00 !important; text-decoration: underline !important; } html.a11y-contrast :where(input, textarea, select) { background: #000 !important; color: #fff !important; border: 1px solid #fff !important; } html.a11y-contrast :where(button, .button) { background: #fff !important; color: #000 !important; border: 1px solid #fff !important; } /* Il widget resta leggibile anche in alto contrasto. */ html.a11y-contrast .as-a11y__panel { background: #000 !important; color: #fff !important; border: 2px solid #fff; } html.a11y-contrast .as-a11y__title, html.a11y-contrast .as-a11y__label, html.a11y-contrast .as-a11y__steplevel { color: #fff !important; } /* Scala di grigi: filtro su tutta la pagina, escluso il widget. */ html.a11y-grayscale body { filter: grayscale(100%) !important; } html.a11y-grayscale #as-a11y-root { filter: grayscale(0%) !important; } /* Carattere ad alta leggibilità + spaziatura lettere leggera. */ html.a11y-readable :where(body, p, span, li, h1, h2, h3, h4, h5, h6, a, td, th, label, blockquote, div) { font-family: Verdana, "Segoe UI", Tahoma, Arial, sans-serif !important; letter-spacing: 0.02em !important; } /* Sottolinea sempre i link. */ html.a11y-links :where(a) { text-decoration: underline !important; } /* Spaziatura aumentata: interlinea, parole, lettere. */ html.a11y-spacing :where(p, li, blockquote, td, dd) { line-height: 1.9 !important; letter-spacing: 0.06em !important; word-spacing: 0.12em !important; } /* Rispetta chi preferisce meno animazioni. */ @media (prefers-reduced-motion: reduce) { .as-a11y__toggle { transition: none; } }