/* ============================================================ Accessibilità, preferenze utente (condiviso fra tutte le pagine) Gli effetti sono pilotati da attributi su , impostati prima del paint da uno script inline e gestiti da prefs.js. ============================================================ */ /* ---------- RETE DI SICUREZZA TIPOGRAFICA ---------- */ /* I titoli sono in Syne 800 a corpo grande: una parola lunga ("collaborazione.", "l'accessibilità.") su schermo stretto non entra in una riga e, non potendo andare a capo, sfonderebbe la pagina in orizzontale. Perché entrambe le proprietà, in quest'ordine: - hyphens: auto sillaba all'italiana (le pagine hanno lang="it"). Misurato: interviene ESATTAMENTE alle stesse larghezze in cui la parola non ci sta comunque, mai per riempire meglio una riga. Quindi non altera la tipografia. - overflow-wrap: break-word resta come ultima risorsa, per le parole prive di punti di sillabazione validi (indirizzi email, URL). Senza la prima, la rottura cade in un punto qualsiasi e lascia orfano il punto finale; con entrambe si ottiene "l'accessibili-tà." con il trattino corretto. Specificità bassa di proposito: le regole di pagina restano libere di sovrascrivere tutto il resto. */ h1, h2, h3 { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; } /* ---------- EFFETTI ---------- */ /* Contrasto alto */ html[data-contrast="high"] { --muted: #2c2b27; --muted-light: #5f5f59; --line: rgba(26, 26, 26, 0.55); --orange-ink: #A82600; } html[data-contrast="high"] .rotating-word, html[data-contrast="high"] .dot-accent, html[data-contrast="high"] .metric-num { color: var(--orange-ink); } html[data-contrast="high"] .card-light { border-color: var(--ink); } html[data-contrast="high"] .field input, html[data-contrast="high"] .field textarea { border-color: #5a5954; } /* Spaziatura testo (logica WCAG 1.4.12) */ html[data-spacing="wide"] body { line-height: 1.75; letter-spacing: 0.045em; word-spacing: 0.14em; } html[data-spacing="wide"] p { margin-bottom: 1.7em; } html[data-spacing="wide"] .page-title, html[data-spacing="wide"] .hero-title, html[data-spacing="wide"] h1, html[data-spacing="wide"] h2 { letter-spacing: -0.01em; word-spacing: normal; line-height: 1.06; } /* Font ad alta leggibilità */ html[data-font="legible"] { --font-body: 'Atkinson Hyperlegible', 'Inter', sans-serif; } /* Dimensione testo (scala dal root; richiede tipografia in rem) */ html[data-text-size="large"] { font-size: 112.5%; } html[data-text-size="xlarge"] { font-size: 125%; } /* Riduci animazioni (override esplicito, oltre alla preferenza di sistema) */ html[data-reduce-motion="true"] *, html[data-reduce-motion="true"] *::before, html[data-reduce-motion="true"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* ---------- RISPETTO DELLE IMPOSTAZIONI DI SISTEMA ---------- Questi blocchi si attivano da soli, senza che l'utente tocchi nulla nel sito: è qui che sta la vera accessibilità. */ /* L'utente ha chiesto più contrasto a livello di OS/browser */ @media (prefers-contrast: more) { :root { --muted: #2c2b27; --muted-light: #5f5f59; --line: rgba(26, 26, 26, 0.6); --orange-ink: #A82600; } .rotating-word, .dot-accent, .metric-num { color: var(--orange-ink); } .card-light { border-color: var(--ink); } .field input, .field textarea { border-color: #5a5954; } } /* Modalità a colori forzati (es. Contrasto elevato di Windows): non imporre colori, ma garantire che i bordi e i controlli restino visibili */ @media (forced-colors: active) { .card, .card-light, .card-dark, .card-orange, .next, .demo-card { border: 1px solid; } .pref-toggle, .btn, .pref-switch, .pref-seg { border: 1px solid; } .pref-switch[aria-checked="true"] { background: Highlight; } .cursor-ring { display: none !important; } } /* ---------- PILL NELLA TOPBAR ---------- */ .topbar.has-prefs { justify-content: space-between; align-items: center; } .pref-toggle { font-family: var(--font-display); font-weight: 800; font-size: 0.9375rem; letter-spacing: 0.02em; color: var(--ink); background: transparent; border: 1.5px solid var(--line); border-radius: 999px; padding: 7px 15px; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; gap: 8px; transition: border-color .2s ease; } .pref-toggle:hover { border-color: var(--ink); } .pref-toggle__sub { font-family: var(--font-body); font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } /* ---------- PANNELLO ---------- Ordine di sovrapposizione, da tenere allineato fra questo file e la regola .cursor-ring che sta nello