/* =========================================================== Flowence — Widget Accessibilità (self-hosted, no terze parti) Controlli utente: testo, contrasto, link, font leggibile, stop animazioni. Le preferenze sono salvate in localStorage (nessun dato inviato altrove). =========================================================== */ /* --- Pulsante flottante --- */ #a11y-btn{ position:fixed; left:18px; bottom:18px; z-index:10000; width:52px; height:52px; border-radius:50%; border:none; cursor:pointer; background:linear-gradient(135deg,#1b5071,#08a2b0 55%,#824f9e); color:#fff; box-shadow:0 6px 20px rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; transition:transform .2s ease, filter .2s ease; } #a11y-btn:hover{ transform:scale(1.06); filter:brightness(1.1); } #a11y-btn:focus-visible{ outline:3px solid #82cfff; outline-offset:2px; } #a11y-btn svg{ width:28px; height:28px; } /* --- Pannello --- */ #a11y-panel{ position:fixed; left:18px; bottom:80px; z-index:10000; width:290px; max-width:calc(100vw - 36px); background:#0f2c44; color:#e8edf2; border:1px solid rgba(255,255,255,.14); border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.45); padding:1rem 1.1rem 1.2rem; font-family:"Arimo",system-ui,-apple-system,Arial,sans-serif; display:none; } #a11y-panel.open{ display:block; } #a11y-panel h2{ font-size:1rem; margin:0 0 .2rem; color:#fff; } #a11y-panel p.sub{ font-size:.78rem; color:#9fb0bf; margin:0 0 .8rem; } .a11y-row{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.5rem 0; border-top:1px solid rgba(255,255,255,.08); } .a11y-row span{ font-size:.9rem; } .a11y-row .grp{ display:flex; gap:.35rem; } .a11y-row button{ min-width:34px; height:32px; padding:0 .55rem; border-radius:8px; cursor:pointer; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:#e8edf2; font-size:.9rem; } .a11y-row button[aria-pressed="true"]{ background:#824f9e; border-color:transparent; color:#fff; font-weight:700; } .a11y-row button:focus-visible{ outline:2px solid #82cfff; outline-offset:1px; } #a11y-reset{ width:100%; margin-top:.9rem; padding:.55rem; border-radius:8px; border:1px solid rgba(255,255,255,.2); background:transparent; color:#82cfff; cursor:pointer; font-size:.85rem; } #a11y-close{ position:absolute; top:.6rem; right:.7rem; background:none; border:none; color:#9fb0bf; font-size:1.4rem; cursor:pointer; line-height:1; } /* ===== Modalità applicate su ===== */ /* Link evidenziati */ html.a11y-links a{ text-decoration:underline !important; text-underline-offset:2px; } /* Font leggibile + spaziatura */ html.a11y-readable body, html.a11y-readable body *{ font-family:Verdana, Tahoma, Arial, sans-serif !important; letter-spacing:.02em !important; line-height:1.75 !important; word-spacing:.05em !important; } /* Alto contrasto */ html.a11y-contrast body{ background:#000 !important; color:#fff !important; } html.a11y-contrast .glass-card, html.a11y-contrast .solid-card, html.a11y-contrast .sticky-bar{ background:#000 !important; backdrop-filter:none !important; border:1px solid #fff !important; box-shadow:none !important; } html.a11y-contrast h1, html.a11y-contrast h2, html.a11y-contrast h3, html.a11y-contrast p, html.a11y-contrast li, html.a11y-contrast span, html.a11y-contrast label{ color:#fff !important; } html.a11y-contrast a{ color:#ffd400 !important; } html.a11y-contrast .fx-word, html.a11y-contrast .fx-para{ color:#fff !important; filter:none !important; opacity:1 !important; } html.a11y-contrast #flow-cursor, html.a11y-contrast #flow-cursor-trail{ display:none !important; } html.a11y-contrast .flow-input{ background:#000 !important; border:1px solid #fff !important; color:#fff !important; } /* Stop animazioni / motion (mostra tutto il contenuto) */ html.a11y-nomotion *, html.a11y-nomotion *::before, html.a11y-nomotion *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } html.a11y-nomotion #flow-cursor, html.a11y-nomotion #flow-cursor-trail, html.a11y-nomotion #scroll-rail, html.a11y-nomotion #scroll-dot, html.a11y-nomotion #flow-container{ display:none !important; } html.a11y-nomotion .fx-para{ filter:none !important; opacity:1 !important; } html.a11y-nomotion .fx-word{ color:inherit !important; } html.a11y-nomotion .fx-rev, html.a11y-nomotion .anim-reveal, html.a11y-nomotion .reveal, html.a11y-nomotion .fx-manifesto{ opacity:1 !important; transform:none !important; } @media print{ #a11y-btn, #a11y-panel{ display:none !important; } }