/** * Stili per la toolbar di accessibilità e componenti correlati. * * @package EventLanding * @since 1.0.0 */ /* ========================================================================== TOOLBAR ACCESSIBILITÀ ========================================================================== */ .a11y-toolbar { background: var(--color-bg-alt); border-bottom: 1px solid var(--color-border); padding: var(--space-xs) var(--space-md); position: sticky; top: 0; z-index: 8000; transition: background-color var(--transition-normal); } .a11y-toolbar__inner { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-xs); max-width: var(--container-max); margin: 0 auto; } .a11y-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-xs) var(--space-sm); font-family: var(--font-family); font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-muted); cursor: pointer; min-height: 36px; min-width: 36px; text-decoration: none; transition: all var(--transition-fast); line-height: 1; } .a11y-btn:hover { border-color: var(--color-secondary); color: var(--color-secondary); background: var(--color-surface-hover); } .a11y-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .a11y-btn__label { font-size: var(--font-size-sm); } .a11y-btn svg { display: block; flex-shrink: 0; } /* Icone tema: mostra solo quella corrente */ .theme-icon--dark { display: none; } .theme-icon--light { display: inline-flex; } [data-theme="dark"] .theme-icon--dark { display: inline-flex; } [data-theme="dark"] .theme-icon--light { display: none; } /* ========================================================================== FOCUS VISIBLE GLOBALE (tastiera) ========================================================================== */ :focus-visible { outline: 3px solid var(--color-border-focus); outline-offset: 2px; } /* Rimuovi outline per click del mouse */ :focus:not(:focus-visible) { outline: none; } /* ========================================================================== HIGH CONTRAST (forzato dal sistema operativo) ========================================================================== */ @media (forced-colors: active) { .event-card { border: 2px solid ButtonText; } .event-card--selected { border-color: Highlight; } .btn-submit { forced-color-adjust: none; background: ButtonFace; color: ButtonText; border: 2px solid ButtonText; } .a11y-btn { border: 1px solid ButtonText; } } /* ========================================================================== RIDIMENSIONAMENTO TESTO (classi applicate via JS su ) ========================================================================== */ html.font-size-1 { font-size: 87.5%; } /* 14px */ html.font-size-2 { font-size: 100%; } /* 16px - default */ html.font-size-3 { font-size: 112.5%; } /* 18px */ html.font-size-4 { font-size: 125%; } /* 20px */ html.font-size-5 { font-size: 137.5%; } /* 22px */ /* ========================================================================== SCREEN READER ONLY ========================================================================== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================================== LIVE REGION STYLES ========================================================================== */ [role="status"], [role="alert"], [aria-live] { /* Nessun stile visibile, solo semantico */ } .live-region { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }