/* Font ad alta leggibilità (Atkinson Hyperlegible, auto-ospitato) per la modalità «Alta leggibilità». */ @font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/atkinson-hyperlegible-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/atkinson-hyperlegible-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/atkinson-hyperlegible-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/atkinson-hyperlegible-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* =========================================================================== Accessibilità dei siti pubblici. Self-hosted (nessun servizio terzo). - Fondamentali: skip link, focus ben visibile, rispetto di reduce-motion. - Modalità attivabili dal widget (classi su ): testo più grande, alto contrasto, alta leggibilità, link evidenziati, animazioni ridotte. =========================================================================== */ /* ── Skip link: salta al contenuto (visibile solo con la tastiera) ── */ .a11y-skip { position: fixed; top: 0; left: 0; z-index: 100; background: #1d4ed8; color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; font: 600 14px/1.2 sans-serif; text-decoration: none; transform: translateY(-120%); transition: transform .15s ease; } .a11y-skip:focus { transform: translateY(0); outline: 3px solid #93c5fd; outline-offset: 2px; } /* ── Focus visibile e coerente per chi naviga da tastiera ── */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid #2563eb !important; outline-offset: 2px !important; border-radius: 4px; } /* ── Baseline di contrasto ── Il grigio "slate-400"/"gray-400" non raggiunge il rapporto AA (4.5:1) come testo sui fondi chiari: lo scuriamo quel tanto che basta. Nelle sezioni scure (footer/hero) resta invece chiaro, così non diventa scuro-su-scuro. */ .text-slate-400, .text-gray-400 { color: #6b7280 !important; } [class*="bg-slate-900"] .text-slate-400, [class*="bg-slate-800"] .text-slate-400, [class*="bg-blue-900"] .text-slate-400, [class*="bg-blue-800"] .text-slate-400, [class*="bg-slate-900"] .text-gray-400, [class*="bg-blue-900"] .text-gray-400 { color: #cbd5e1 !important; } /* ── Chi ha chiesto meno animazioni le ottiene sempre ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ── Testo più grande (scala il root: come uno zoom, proporzionale) ── */ html.a11y-font-1 { font-size: 112.5%; } /* 18px */ html.a11y-font-2 { font-size: 125%; } /* 20px */ html.a11y-font-3 { font-size: 140%; } /* ~22px */ /* ── Alto contrasto ── Su fondo CHIARO i testi grigi secondari diventano quasi neri; bordi più netti; link sottolineati. Nelle sezioni SCURE (footer, hero) i testi diventano invece chiari: mai testo scuro su fondo scuro. */ html.a11y-contrast .text-slate-400, html.a11y-contrast .text-slate-500, html.a11y-contrast .text-slate-600, html.a11y-contrast .text-gray-400, html.a11y-contrast .text-gray-500, html.a11y-contrast .text-gray-600 { color: #0f172a !important; } html.a11y-contrast .text-slate-300, html.a11y-contrast .text-gray-300 { color: #1e293b !important; } html.a11y-contrast .border-slate-100, html.a11y-contrast .border-slate-200 { border-color: #475569 !important; } html.a11y-contrast a:not(.a11yw-btn):not([class*="bg-"]) { text-decoration: underline; text-underline-offset: 2px; } html.a11y-contrast ::placeholder { color: #334155 !important; opacity: 1; } /* Sezioni con sfondo scuro o colorato (footer, hero, riquadri, CTA blu): l'elemento e TUTTI i suoi testi restano chiari, mai scuriti. Copre ogni tinta media/scura di slate/blu/grigio così non capita mai testo scuro su scuro. */ html.a11y-contrast [class*="bg-slate-950"], html.a11y-contrast [class*="bg-slate-900"], html.a11y-contrast [class*="bg-slate-800"], html.a11y-contrast [class*="bg-slate-700"], html.a11y-contrast [class*="bg-blue-950"], html.a11y-contrast [class*="bg-blue-900"], html.a11y-contrast [class*="bg-blue-800"], html.a11y-contrast [class*="bg-blue-700"], html.a11y-contrast [class*="bg-blue-600"], html.a11y-contrast [class*="bg-gray-900"], html.a11y-contrast [class*="bg-gray-800"], html.a11y-contrast [class*="bg-neutral-900"], html.a11y-contrast .hero-glow { color: #f8fafc !important; } html.a11y-contrast [class*="bg-slate-950"] [class*="text-"]:not([class*="bg-"]), html.a11y-contrast [class*="bg-slate-900"] [class*="text-"]:not([class*="bg-"]), html.a11y-contrast [class*="bg-slate-800"] [class*="text-"]:not([class*="bg-"]), html.a11y-contrast [class*="bg-slate-700"] [class*="text-"]:not([class*="bg-"]), html.a11y-contrast [class*="bg-blue-950"] [class*="text-"]:not([class*="bg-"]), html.a11y-contrast [class*="bg-blue-900"] [class*="text-"]:not([class*="bg-"]), html.a11y-contrast [class*="bg-blue-800"] [class*="text-"]:not([class*="bg-"]), html.a11y-contrast [class*="bg-blue-700"] [class*="text-"]:not([class*="bg-"]), html.a11y-contrast [class*="bg-blue-600"] [class*="text-"]:not([class*="bg-"]), html.a11y-contrast [class*="bg-gray-900"] [class*="text-"]:not([class*="bg-"]), html.a11y-contrast [class*="bg-gray-800"] [class*="text-"]:not([class*="bg-"]), html.a11y-contrast .hero-glow [class*="text-"]:not([class*="bg-"]) { color: #f1f5f9 !important; } /* ── Alta leggibilità: font Atkinson Hyperlegible + spaziatura e interlinea ampie (progettato apposta per dislessia/ipovisione). Effetto ben visibile. ── */ html.a11y-readable, html.a11y-readable body { font-family: 'Atkinson Hyperlegible', 'Inter', system-ui, sans-serif !important; } html.a11y-readable body { letter-spacing: .05em; word-spacing: .2em; line-height: 1.95; } html.a11y-readable h1, html.a11y-readable h2, html.a11y-readable h3, html.a11y-readable h4, html.a11y-readable h5, html.a11y-readable h6, html.a11y-readable .font-display, html.a11y-readable p, html.a11y-readable li, html.a11y-readable a, html.a11y-readable span, html.a11y-readable button, html.a11y-readable label, html.a11y-readable input, html.a11y-readable textarea { font-family: 'Atkinson Hyperlegible', 'Inter', system-ui, sans-serif !important; } html.a11y-readable p, html.a11y-readable li { line-height: 2.05; margin-bottom: .55em; } /* ── Evidenzia i link ── */ html.a11y-links a:not([class*="bg-"]) { text-decoration: underline !important; text-underline-offset: 2px; } /* =========================================================================== Widget: pulsante fisso + pannello. Namespace .a11yw-* per non toccare il sito. =========================================================================== */ .a11yw-btn { position: fixed; bottom: 20px; left: 20px; z-index: 90; width: 52px; height: 52px; border-radius: 50%; border: 2px solid #fff; background: #1d4ed8; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(15,23,42,.28); } .a11yw-btn:hover { background: #1e40af; } .a11yw-btn svg { width: 28px; height: 28px; } .a11yw-panel { position: fixed; bottom: 84px; left: 20px; z-index: 91; width: 300px; max-width: calc(100vw - 40px); background: #fff; color: #0f172a; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 20px 50px rgba(15,23,42,.28); padding: 16px; font-family: 'Inter', system-ui, sans-serif; } .a11yw-panel[hidden] { display: none; } .a11yw-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .a11yw-title { font-weight: 700; font-size: 15px; } .a11yw-close { background: none; border: none; cursor: pointer; color: #64748b; padding: 4px; border-radius: 6px; } .a11yw-close:hover { background: #f1f5f9; color: #0f172a; } .a11yw-group { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; margin: 10px 0 6px; } .a11yw-row { display: flex; gap: 8px; } .a11yw-opt { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; border: 1.5px solid #e2e8f0; border-radius: 10px; background: #fff; color: #334155; cursor: pointer; font-size: 13px; font-weight: 600; text-align: center; } .a11yw-opt:hover { border-color: #cbd5e1; background: #f8fafc; } .a11yw-opt[aria-pressed="true"] { border-color: #1d4ed8; background: #eff6ff; color: #1d4ed8; } .a11yw-opt svg { width: 18px; height: 18px; flex-shrink: 0; } .a11yw-reset { width: 100%; margin-top: 14px; padding: 9px; border: none; border-radius: 10px; background: #f1f5f9; color: #475569; cursor: pointer; font-size: 13px; font-weight: 600; } .a11yw-reset:hover { background: #e2e8f0; color: #0f172a; }