/* SquarePoint — Accessibilità condivisa (widget floating stile Iliad) + background istituzionale. Caricato su landing, backoffice, CRM, privacy. Le classi vengono messe su da a11y.js e persistite in localStorage. */ /* ---- Background istituzionale (theme-aware) ------------------------------- */ body { background-image: url(/static/brand/bg-light.svg); background-size: cover; background-position: center top; background-attachment: fixed; background-repeat: no-repeat; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body { background-image: url(/static/brand/bg-dark.svg); } } :root[data-theme="dark"] body { background-image: url(/static/brand/bg-dark.svg); } :root[data-theme="light"] body { background-image: url(/static/brand/bg-light.svg); } /* ---- Regolazioni accessibilità (classi su ) ------------------------- */ /* Dimensione testo (zoom sul body: scala tutto in modo uniforme). */ html.a11y-font-lg body { zoom: 1.12; } html.a11y-font-xl body { zoom: 1.25; } /* Contrasto elevato: forza i token colore (validi per landing e backoffice). */ html.a11y-contrast { --text: #000; --muted: #1c1c28; --border: #4a4a66; } @media (prefers-color-scheme: dark) { html.a11y-contrast { --text: #fff; --muted: #e6e2fb; --border: #b9b2ef; } } /* Evidenzia link */ html.a11y-links a { text-decoration: underline !important; text-underline-offset: 2px; } /* Font leggibile (spaziatura e famiglia più leggibile per dislessia) */ html.a11y-readable body, html.a11y-readable body * { font-family: Verdana, Tahoma, "Segoe UI", sans-serif !important; letter-spacing: .03em; word-spacing: .08em; line-height: 1.7; } /* Riduci animazioni (manuale, oltre a prefers-reduced-motion) */ html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* ---- Widget floating ------------------------------------------------------ */ .a11y-fab { position: fixed; right: 20px; bottom: 20px; z-index: 1000; width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer; background: linear-gradient(135deg, #6c5ce7, #383268); color: #fff; box-shadow: 0 10px 26px rgba(24,20,51,.35); display: grid; place-items: center; } .a11y-fab svg { width: 28px; height: 28px; } .a11y-fab:focus-visible { outline: 3px solid #ff9f43; outline-offset: 3px; } .a11y-panel { position: fixed; right: 20px; bottom: 86px; z-index: 1000; width: min(320px, calc(100vw - 40px)); background: #fff; color: #221d3f; border: 1px solid #e8e5f5; border-radius: 16px; box-shadow: 0 18px 44px rgba(24,20,51,.22); padding: 16px; display: none; } .a11y-panel[data-open="1"] { display: block; } @media (prefers-color-scheme: dark) { .a11y-panel { background: #2b2758; color: #edeafb; border-color: #3a3568; } } .a11y-panel h2 { margin: 0 0 4px; font-size: 15px; } .a11y-panel .hint { margin: 0 0 12px; font-size: 12px; opacity: .7; } .a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(120,110,180,.18); } .a11y-row:last-of-type { border-bottom: none; } .a11y-row .lbl { font-size: 14px; } .a11y-seg { display: inline-flex; border: 1px solid #cdc7ef; border-radius: 9px; overflow: hidden; } .a11y-seg button { border: none; background: transparent; color: inherit; font: inherit; padding: 6px 11px; cursor: pointer; } .a11y-seg button.on { background: #6c5ce7; color: #fff; } .a11y-toggle { position: relative; width: 44px; height: 26px; border-radius: 999px; border: none; background: #cdc7ef; cursor: pointer; flex: none; } .a11y-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .18s ease; } .a11y-toggle[aria-pressed="true"] { background: #6c5ce7; } .a11y-toggle[aria-pressed="true"]::after { left: 21px; } html.a11y-motion .a11y-toggle::after { transition: none; } .a11y-langs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; } .a11y-langs a { font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 8px; border: 1px solid #cdc7ef; color: inherit; } .a11y-langs a.active { background: #6c5ce7; color: #fff; border-color: #6c5ce7; } .a11y-reset { margin-top: 12px; width: 100%; padding: 9px; border-radius: 10px; border: 1px solid #cdc7ef; background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }