/** * KINKSTER — ACCESSIBILITY GLOBAL CSS * * Documento normativo. Vedi memory feedback_accessibility_wcag22_aa.md. * Si applica a TUTTI i layout via diretto (no Vite build). * * Sezioni: * 1. Skip link * 2. .sr-only utility * 3. Focus ring globale * 4. Touch target 44px * 5. Font-size 16px su input mobile (anti zoom iOS) * 6. prefers-reduced-motion globale * 7. Classi opt-in del widget accessibilità (su ) * 8. Stili del widget stesso * * NON modificare senza revisione di accessibilità. */ /* ════════════════════════════════════════════════════════ 1. SKIP LINK — primo elemento focusabile della pagina. Permette agli utenti tastiera/screen reader di saltare header e nav per andare direttamente al main content. WCAG 2.4.1 Bypass Blocks (Livello A). ════════════════════════════════════════════════════════ */ .skip-link { position: absolute; top: -100%; left: 16px; z-index: 99999; background: #7A1E2D; color: #fff; padding: 12px 20px; font-weight: 700; font-size: 0.95rem; text-decoration: none; border-radius: 0 0 8px 8px; transition: top 0.12s ease; } .skip-link:focus, .skip-link:focus-visible { top: 0; outline: 3px solid #fff; outline-offset: 2px; } /* ════════════════════════════════════════════════════════ 2. .sr-only — visivamente nascosto, leggibile da screen reader. Pattern standard per testo che serve agli screen reader ma non deve apparire visivamente (es. label estesi su icone). ════════════════════════════════════════════════════════ */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Focusable variant — diventa visibile quando riceve focus (es. lo skip-link, alcuni controlli avanzati) */ .sr-only-focusable:focus, .sr-only-focusable:focus-within { position: static !important; width: auto !important; height: auto !important; padding: inherit !important; margin: inherit !important; overflow: visible !important; clip: auto !important; white-space: inherit !important; } /* ════════════════════════════════════════════════════════ 3. FOCUS RING GLOBALE :focus-visible si attiva solo per navigazione tastiera, non per click mouse. Questa è la combinazione corretta: - :focus-visible → outline visibile - :focus:not(:focus-visible) → niente outline (per click) ════════════════════════════════════════════════════════ */ :focus-visible { outline: 3px solid #B08D57; /* gold */ outline-offset: 3px; border-radius: 4px; } :focus:not(:focus-visible) { outline: none; } /* Per input/select/textarea preferiamo border + box-shadow invece dell'outline (si integra meglio con bordo già presente) */ input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-color: #B08D57 !important; box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.28) !important; } /* ════════════════════════════════════════════════════════ 4. TOUCH TARGET MOBILE — minimo 44×44px su tablet/phone WCAG 2.5.5 Target Size — Livello AAA (best practice AA). Disabilitato sopra 1024px (mouse precision). ════════════════════════════════════════════════════════ */ @media (max-width: 1023px) { button, [role="button"], a.btn, a.nav-link, .nav-item, .bottom-nav-item, input[type="checkbox"] + label, input[type="radio"] + label, input[type="submit"], input[type="button"] { min-height: 44px; min-width: 44px; } } /* ════════════════════════════════════════════════════════ 5. FONT-SIZE 16PX SU INPUT MOBILE iOS Safari zoomma automaticamente sul focus se il campo ha font-size < 16px. Spezza il layout. SEMPRE 16px su mobile. ════════════════════════════════════════════════════════ */ @media (max-width: 768px) { input, select, textarea { font-size: 16px !important; } } /* ════════════════════════════════════════════════════════ 6. PREFERS-REDUCED-MOTION GLOBALE Utenti con vestibolari sensibili / chinetosi. Disabilita o riduce drasticamente animazioni e transizioni. ════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ════════════════════════════════════════════════════════ 7. WIDGET ACCESSIBILITÀ — CLASSI OPT-IN SU L'utente attiva queste opzioni dal widget. Lo stato è persistito in localStorage e ri-applicato a ogni page load via JS (vedi /js/accessibility.js). ════════════════════════════════════════════════════════ */ /* 7.1 — Testo più grande (3 livelli) */ html.a11y-text-large { font-size: 112.5%; } /* 18px base */ html.a11y-text-xlarge { font-size: 125%; } /* 20px base */ html.a11y-text-xxlarge { font-size: 137.5%; } /* 22px base */ /* 7.2 — Sottolinea sempre i link (chi non distingue colori) */ html.a11y-underline-links a:not(.btn):not([class*="-btn"]):not([class*="button"]) { text-decoration: underline !important; text-underline-offset: 3px; } /* 7.3 — Riduci movimento (in aggiunta a system preference) */ html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* 7.4 — Font ad alta leggibilità (Atkinson Hyperlegible o fallback) Pensato per dislessia e basse acuità visive */ html.a11y-readable-font, html.a11y-readable-font * { font-family: 'Atkinson Hyperlegible', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; letter-spacing: 0.02em; } /* MA mantieni il wordmark Cormorant Garamond — è un brand asset */ html.a11y-readable-font .kk-logo--wordmark text { font-family: 'Cormorant Garamond', serif !important; letter-spacing: 0.32em; } /* 7.5 — Contrasto rinforzato (boost dei contrasti già scuri) */ html.a11y-high-contrast { --color-text-soft: #d4d4d4 !important; /* era #B0B0B0 */ --color-text-muted: #b0b0b0 !important; /* era #707070 */ --color-border: rgba(255,255,255,0.20) !important; } html.a11y-high-contrast body { background: #000 !important; color: #fff !important; } html.a11y-high-contrast a:not(.btn) { color: #ffd97a !important; /* gold più chiaro */ text-decoration: underline !important; } /* 7.6 — Pause animations & autoplay videos */ html.a11y-pause-media video[autoplay] { /* JS si occupa di mettere in pausa, qui solo override visuale se serve */ } /* ════════════════════════════════════════════════════════ 8. STILI DEL WIDGET ACCESSIBILITÀ Bottone flottante + pannello drawer. Volutamente sobrio, integrato col tema scuro Kinkster. ════════════════════════════════════════════════════════ */ /* 8.1 — Bottone flottante (in basso a destra). NB: lasciamo l'angolo sinistro al "manage cookie button" del banner GDPR (.cb-manage-btn) che vive in bottom-left. Convivono in angoli opposti. */ .a11y-fab { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 48px; height: 48px; border-radius: 50%; background: #7A1E2D; border: 2px solid rgba(255, 255, 255, 0.14); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 9990; /* sotto a modali (10000) ma sopra UI */ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); transition: transform 0.15s ease, background 0.15s ease; padding: 0; } .a11y-fab:hover { background: #9A3A4A; transform: scale(1.05); } .a11y-fab:focus-visible { outline: 3px solid #B08D57; outline-offset: 3px; } .a11y-fab svg { width: 26px; height: 26px; pointer-events: none; } /* Su mobile sotto a bottom-nav, posiziona il FAB più in alto */ @media (max-width: 768px) { body:has(.bottom-nav) .a11y-fab { bottom: calc(76px + env(safe-area-inset-bottom)); } } /* Quando il cookie banner GDPR è aperto, alza il FAB sopra di esso per non sovrapporsi. Il banner è full-width bottom:0, altezza ~92px desktop / ~140px mobile. La classe is-cookie-banner-active viene messa sul dal JS del widget appena rileva il banner visibile. */ body.is-cookie-banner-active .a11y-fab { bottom: calc(108px + env(safe-area-inset-bottom)); } @media (max-width: 767px) { /* Mobile: cookie banner più alto + bottom-nav presente sotto auth */ body.is-cookie-banner-active .a11y-fab { bottom: calc(160px + env(safe-area-inset-bottom)); } body.is-cookie-banner-active:has(.bottom-nav) .a11y-fab { bottom: calc(220px + env(safe-area-inset-bottom)); } } /* 8.2 — Backdrop quando il pannello è aperto */ .a11y-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 9991; opacity: 0; pointer-events: none; transition: opacity 0.18s ease; } .a11y-backdrop.is-open { opacity: 1; pointer-events: auto; } /* 8.3 — Pannello drawer (da destra, coerente con FAB in bottom-right) */ .a11y-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 100vw); background: #1A1E21; border-left: 1px solid rgba(255, 255, 255, 0.10); z-index: 9992; transform: translateX(100%); transition: transform 0.22s ease; display: flex; flex-direction: column; overflow: hidden; color: #F0F0F0; font-family: 'Inter', system-ui, sans-serif; } .a11y-panel.is-open { transform: translateX(0); } .a11y-panel__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .a11y-panel__title { font-size: 1.1rem; font-weight: 700; color: #F0F0F0; margin: 0; } .a11y-panel__close { background: transparent; border: 0; color: #B0B0B0; cursor: pointer; width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0; } .a11y-panel__close:hover { background: rgba(255, 255, 255, 0.06); color: #fff; } .a11y-panel__close:focus-visible { outline: 2px solid #B08D57; outline-offset: 2px; } .a11y-panel__intro { padding: 14px 20px 4px; font-size: 0.88rem; color: #B0B0B0; line-height: 1.5; } .a11y-panel__body { flex: 1; overflow-y: auto; padding: 8px 20px 20px; } .a11y-section { margin-top: 16px; } .a11y-section__title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #707070; margin-bottom: 8px; } /* 8.4 — Toggle switch (checkbox stilizzato) */ .a11y-toggle { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; cursor: pointer; transition: background 0.12s; min-height: 56px; } .a11y-toggle:hover { background: rgba(255, 255, 255, 0.04); } .a11y-toggle:focus-within { background: rgba(255, 255, 255, 0.04); outline: 2px solid #B08D57; outline-offset: 2px; } .a11y-toggle input[type="checkbox"] { /* Nasconde il checkbox nativo, lo screen reader lo legge ancora */ position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .a11y-toggle__switch { flex-shrink: 0; width: 44px; height: 24px; background: rgba(255, 255, 255, 0.12); border-radius: 999px; position: relative; transition: background 0.18s; } .a11y-toggle__switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #F0F0F0; border-radius: 50%; transition: transform 0.18s, background 0.18s; } .a11y-toggle input:checked ~ .a11y-toggle__switch { background: #7A1E2D; } .a11y-toggle input:checked ~ .a11y-toggle__switch::after { transform: translateX(20px); background: #fff; } .a11y-toggle__body { flex: 1; min-width: 0; } .a11y-toggle__label { display: block; font-size: 0.95rem; font-weight: 600; color: #F0F0F0; line-height: 1.3; } .a11y-toggle__hint { display: block; font-size: 0.8rem; color: #909090; margin-top: 2px; line-height: 1.4; } /* 8.5 — Selettore dimensione testo (3 step) */ .a11y-text-size { display: flex; gap: 8px; margin-top: 8px; } .a11y-text-size__btn { flex: 1; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.10); color: #F0F0F0; padding: 12px 8px; border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.12s; min-height: 48px; } .a11y-text-size__btn:hover { border-color: rgba(176, 141, 87, 0.5); } .a11y-text-size__btn:focus-visible { outline: 2px solid #B08D57; outline-offset: 2px; } .a11y-text-size__btn[aria-pressed="true"] { background: rgba(176, 141, 87, 0.16); border-color: #B08D57; color: #fff; } .a11y-text-size__btn span { display: block; font-size: 0.7rem; color: #909090; margin-top: 2px; font-weight: 400; } .a11y-text-size__btn[aria-pressed="true"] span { color: #d4a96b; } /* 8.6 — Reset button */ .a11y-reset { width: 100%; margin-top: 16px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.14); color: #B0B0B0; padding: 12px; border-radius: 8px; cursor: pointer; font-size: 0.9rem; transition: all 0.12s; min-height: 48px; } .a11y-reset:hover { color: #fff; border-color: rgba(255, 255, 255, 0.25); } .a11y-reset:focus-visible { outline: 2px solid #B08D57; outline-offset: 2px; } /* 8.7 — Footer pannello: link a info accessibilità */ .a11y-panel__footer { padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.8rem; color: #707070; line-height: 1.5; } .a11y-panel__footer a { color: #B08D57; text-decoration: underline; } /* Quando il pannello è aperto, blocca lo scroll della pagina */ html.a11y-panel-open, html.a11y-panel-open body { overflow: hidden; } /* ════════════════════════════════════════════════════════ TOAST/ALERT GLOBALE — sistema unificato Kinkster Mostra flash session + errori validation in posizione fissa ════════════════════════════════════════════════════════ */ .kinkster-toast { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); border-left: 4px solid currentColor; background: #1a1a1a; color: #f0f0f0; font-size: 14px; line-height: 1.4; max-width: 420px; cursor: pointer; transition: transform 0.18s, box-shadow 0.18s; } .kinkster-toast:hover { transform: translateY(-1px); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45); } .kinkster-toast-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: currentColor; } .kinkster-toast-icon svg { color: #1a1a1a; } .kinkster-toast-body { color: #f0f0f0; word-break: break-word; min-width: 0; } .kinkster-toast-title { display: block; font-weight: 700; font-size: 13.5px; margin-bottom: 4px; color: #fff; } .kinkster-toast-close { background: transparent; border: 0; color: rgba(255, 255, 255, 0.6); cursor: pointer; padding: 2px; border-radius: 4px; flex-shrink: 0; transition: color 0.15s, background 0.15s; } .kinkster-toast-close:hover, .kinkster-toast-close:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.1); outline: none; } /* Varianti tipo */ .kinkster-toast--success { color: #22c55e; } .kinkster-toast--error { color: #ef4444; } .kinkster-toast--warning { color: #f59e0b; } .kinkster-toast--info { color: #3b82f6; } /* Su mobile: stretch full-width */ @media (max-width: 640px) { .kinkster-toast { max-width: calc(100vw - 32px); } } /* Light theme override (se l'app usa background chiaro) */ @media (prefers-color-scheme: light) { .kinkster-toast { background: #fff; color: #1a1a1a; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); } .kinkster-toast-body, .kinkster-toast-title { color: #1a1a1a; } .kinkster-toast-close { color: rgba(0, 0, 0, 0.5); } .kinkster-toast-close:hover { color: #000; background: rgba(0, 0, 0, 0.05); } .kinkster-toast-icon svg { color: #fff; } } /* ════════════════════════════════════════════════════════ FIELD ERRORS — bordo rosso + scroll-to-error ════════════════════════════════════════════════════════ */ input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18); } .field-error { color: #ef4444; font-size: 0.82rem; margin-top: 4px; display: flex; align-items: center; gap: 4px; }