/* ============================================================ InfoComuni · Easy Read mode (Sprint 4 — fix v2 30/04/2026 h09:00) -------------------------------------------------------------- Modalità "leggi facile" — UD principio 1+3. FIX v2: scope ristretto SOLO al contenuto principale (article, main p/li, storia-text). Esclusi UI chrome, dropdown, modal, cookie banner, bottom nav per evitare regressioni di layout (issue: dropdown lingue espandeva tutto, cookie banner gonfiava ovunque, bottom nav stretchato). Si attiva con classe `.easy-read` su . ============================================================ */ /* === SCOPE: SOLO contenuto editoriale principale === Target: paragrafi, list-item, descrizioni di articoli e schede. Esclude: header, footer, nav, dropdown, modal, banner, FAB, bottom nav. */ html.easy-read.easy-read main p, html.easy-read.easy-read main li:not(li *), html.easy-read.easy-read article p, html.easy-read.easy-read article li, html.easy-read.easy-read .ic-storia-text, html.easy-read.easy-read .ic-storia-card p, html.easy-read.easy-read [role="article"] p { font-size: 18px !important; line-height: 1.8 !important; letter-spacing: .02em !important; max-width: 60ch !important; margin-bottom: 1em !important; } /* Headings — solo dentro main/article (NON nei navigation menu) */ html.easy-read.easy-read main h1, html.easy-read.easy-read article h1 { font-size: 32px !important; line-height: 1.3 !important; margin: 1em 0 .5em !important; } html.easy-read.easy-read main h2:not(.site-header h2):not(.ic-footer-v3 h2), html.easy-read.easy-read article h2 { font-size: 26px !important; line-height: 1.3 !important; margin: 1em 0 .5em !important; } html.easy-read.easy-read main h3, html.easy-read.easy-read article h3 { font-size: 22px !important; line-height: 1.3 !important; margin: .8em 0 .4em !important; } /* Storia di oggi — testo letto si presta a Easy Read */ html.easy-read.easy-read .ic-storia-text { font-size: 20px !important; line-height: 1.9 !important; max-width: 65ch !important; } html.easy-read.easy-read .ic-storia-card { padding: 28px !important; } /* Bottoni primari di azione — solo CTA principali nel main, NON UI chrome */ html.easy-read.easy-read main a.btn-primary, html.easy-read.easy-read main .ic-storia-btn, html.easy-read.easy-read main button[class*="cta"], html.easy-read.easy-read main a[class*="cta"] { font-size: 18px !important; padding: 14px 22px !important; min-height: 48px !important; } /* Link in flow-text con underline obbligatorio */ html.easy-read.easy-read main p a, html.easy-read.easy-read article p a, html.easy-read.easy-read .ic-storia-text a { text-decoration: underline !important; text-underline-offset: 3px !important; } /* Hero decorative ::before/::after silenziate (opzionale ma riduce distrazione) */ html.easy-read.easy-read .hero__map-bg { opacity: .35 !important; } /* Stop animations: globale ma SAFE (non rompe layout, solo rallenta transizioni) */ html.easy-read.easy-read *:not(.ic-easy-read-fab), html.easy-read.easy-read *:not(.ic-easy-read-fab)::before, html.easy-read.easy-read *:not(.ic-easy-read-fab)::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } /* === EXPLICIT EXCLUSIONS (safety net) === Garantisce che chrome/UI elements NON siano toccati anche se selectors sopra non sono esaustivi. */ html.easy-read.easy-read .site-header, html.easy-read.easy-read .site-header *, html.easy-read.easy-read .ic-footer-v3, html.easy-read.easy-read .ic-footer-v3 *, html.easy-read.easy-read .ic-cc-banner, html.easy-read.easy-read .ic-cc-banner *, html.easy-read.easy-read .ic-cc-modal, html.easy-read.easy-read .ic-cc-modal *, html.easy-read.easy-read .ic-cc-overlay, html.easy-read.easy-read [class*="bottom-nav"], html.easy-read.easy-read [class*="bottom-nav"] *, html.easy-read.easy-read .meteo-overlay, html.easy-read.easy-read .meteo-overlay *, html.easy-read.easy-read .info-overlay, html.easy-read.easy-read .info-overlay *, html.easy-read.easy-read .search-overlay, html.easy-read.easy-read .search-overlay *, html.easy-read.easy-read [role="dialog"], html.easy-read.easy-read [role="dialog"] *, html.easy-read.easy-read .ic-a11y-panel, html.easy-read.easy-read .ic-a11y-panel *, html.easy-read.easy-read .ic-easy-read-fab, html.easy-read.easy-read [id*="lang-dropdown"], html.easy-read.easy-read [id*="lang-dropdown"] *, html.easy-read.easy-read .lang-menu, html.easy-read.easy-read .lang-menu *, html.easy-read.easy-read .puglia-menu, html.easy-read.easy-read .puglia-menu *, html.easy-read.easy-read .ic-search, html.easy-read.easy-read .ic-search * { font-size: revert !important; line-height: revert !important; max-width: revert !important; padding: revert !important; min-height: revert !important; margin: revert !important; } /* === FAB toggle — sempre visibile e accessibile === */ .ic-easy-read-fab { position: fixed; bottom: 20px; left: 20px; z-index: 9990; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: #0B2340; color: #FFCC33; border: 2px solid #FFCC33; border-radius: 999px; font-family: 'Inter', system-ui, sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.2); transition: transform .15s, box-shadow .15s; } .ic-easy-read-fab:hover, .ic-easy-read-fab:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.3); outline: 2px solid #FFCC33; outline-offset: 2px; } html.easy-read .ic-easy-read-fab { background: #FFCC33; color: #0B2340; border-color: #0B2340; } @media (max-width: 640px) { .ic-easy-read-fab { bottom: 80px; /* Sopra la bottom-nav mobile */ left: 12px; padding: 8px 12px; font-size: 13px; } }