/* ==== Free Harmony — Pannello Accessibilità ==== */ /* ---- Pulsante flottante ---- */ .fh-a11y-btn { position: fixed; left: 1rem; bottom: 1rem; z-index: 1060; width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--fh-primary-600); color: #fff; border: 0; box-shadow: 0 10px 24px rgba(0, 0, 0, .22); font-size: 1.35rem; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; } .fh-a11y-btn:hover, .fh-a11y-btn:focus-visible { background: var(--fh-navy-700); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, .28); } .fh-a11y-btn:focus-visible { outline: 3px solid var(--fh-accent-500); outline-offset: 2px; } /* ---- Pannello ---- */ #fh-a11y { position: fixed; inset: 0; z-index: 1100; display: none; } #fh-a11y.is-open { display: block; } #fh-a11y .fha-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); } #fh-a11y .fha-panel { position: absolute; left: 1rem; bottom: 1rem; width: min(100% - 2rem, 380px); max-height: min(80vh, 640px); overflow-y: auto; background: var(--fh-surface-contrast); color: var(--fh-text); border-radius: var(--fh-radius); box-shadow: var(--fh-shadow); } #fh-a11y .fha-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.1rem; border-bottom: 1px solid rgba(0, 0, 0, .08); } #fh-a11y .fha-header h2 { font-size: 1.05rem; margin: 0; } #fh-a11y .fha-close { background: none; border: 0; font-size: 1.4rem; line-height: 1; color: inherit; cursor: pointer; padding: .1rem .4rem; } #fh-a11y .fha-body { padding: 1rem 1.1rem; } #fh-a11y .fha-group { margin-bottom: 1.1rem; } #fh-a11y .fha-group:last-child { margin-bottom: 0; } #fh-a11y .fha-label { display: flex; align-items: center; justify-content: space-between; font-weight: 600; margin-bottom: .5rem; gap: .5rem; } #fh-a11y .fha-desc { font-size: .85rem; opacity: .75; margin: -.3rem 0 .5rem; } /* switch on/off, stesso linguaggio visivo del pannello cookie */ #fh-a11y .fha-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: none; } #fh-a11y .fha-switch input { opacity: 0; width: 0; height: 0; } #fh-a11y .fha-switch .fha-slider { position: absolute; inset: 0; background: rgba(0, 0, 0, .18); border-radius: 999px; cursor: pointer; transition: background-color .15s ease; } #fh-a11y .fha-switch .fha-slider::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s ease; } #fh-a11y .fha-switch input:checked + .fha-slider { background: var(--fh-primary-600); } #fh-a11y .fha-switch input:checked + .fha-slider::before { transform: translateX(20px); } #fh-a11y .fha-switch input:focus-visible + .fha-slider { outline: 3px solid var(--fh-accent-500); outline-offset: 2px; } /* stepper dimensione testo */ #fh-a11y .fha-fontsteps { display: flex; gap: .5rem; } #fh-a11y .fha-fontsteps button { flex: 1; border: 1px solid rgba(0, 0, 0, .15); background: transparent; color: inherit; border-radius: 10px; padding: .5rem .25rem; cursor: pointer; font-weight: 700; } #fh-a11y .fha-fontsteps button[aria-pressed="true"] { background: var(--fh-primary-600); border-color: var(--fh-primary-600); color: #fff; } #fh-a11y .fha-reset { width: 100%; margin-top: .25rem; } @media (min-width: 768px) { .fh-a11y-btn { left: 1.5rem; bottom: 1.5rem; } #fh-a11y .fha-panel { left: 1.5rem; bottom: 1.5rem; } } /* ================================================================== DARK MODE — attivato con [data-fh-theme="dark"] su Ricalibra solo le variabili brand; i componenti Bootstrap seguono [data-bs-theme="dark"] impostato in parallelo dallo stesso toggle. ================================================================== */ html[data-fh-theme="dark"] { --fh-navy-700: #0B2540; --fh-primary-500: #5CA8EE; --fh-primary-600: #4694E0; --fh-neutral-0: #0E1B29; /* Magenta schiarito: sul fondo notte i toni pieni del tema chiaro scenderebbero sotto il contrasto richiesto per il testo. */ --fh-accent-500: #FF7FAE; --fh-accent-600: #FF4D8D; --fh-accent-700: #FF6BA0; /* Sul fondo notte il blu dei link va schiarito, altrimenti resta illeggibile */ --fh-link: #5CA8EE; --bs-link-color-rgb: 92,168,238; --bs-link-hover-color-rgb: 207,227,247; --fh-text: #E9F1FA; --fh-text-muted: rgba(233, 241, 250, .7); --fh-surface: var(--fh-neutral-0); --fh-surface-contrast: #16283C; --fh-shadow: 0 10px 30px rgba(0, 0, 0, .45); --bs-body-bg: var(--fh-surface); --bs-body-color: var(--fh-text); --bs-border-color: rgba(233, 241, 250, .14); } html[data-fh-theme="dark"] .navbar-main, html[data-fh-theme="dark"] #topbar { background: var(--fh-surface-contrast); } html[data-fh-theme="dark"] .card-title, html[data-fh-theme="dark"] h1, html[data-fh-theme="dark"] h2, html[data-fh-theme="dark"] h3, html[data-fh-theme="dark"] h4, html[data-fh-theme="dark"] h5, html[data-fh-theme="dark"] h6 { color: var(--fh-text); } html[data-fh-theme="dark"] .bg-surface { background: var(--fh-surface); } html[data-fh-theme="dark"] .card { background: var(--fh-surface-contrast); color: var(--fh-text); } html[data-fh-theme="dark"] .bg-navy { background: #071626; } html[data-fh-theme="dark"] .footer-texture { background-color: #071626; } html[data-fh-theme="dark"] .text-muted { color: var(--fh-text-muted) !important; } html[data-fh-theme="dark"] .fh-lightbox { background: rgba(0, 0, 0, .95); } html[data-fh-theme="dark"] ::selection { background: var(--fh-accent-500); color: #111; } html[data-fh-theme="dark"] .form-control, html[data-fh-theme="dark"] .form-select { background-color: var(--fh-surface-contrast); border-color: rgba(233, 241, 250, .18); color: var(--fh-text); } html[data-fh-theme="dark"] .form-control::placeholder { color: var(--fh-text-muted); } html[data-fh-theme="dark"] .form-control:focus, html[data-fh-theme="dark"] .form-select:focus { background-color: var(--fh-surface-contrast); color: var(--fh-text); } /* .bg-10/.bg-30 (sezioni evidenziate tipo "Ti accompagniamo passo dopo passo") e la notice-band (CTA arancione) restano volutamente chiare anche in dark mode: qui si forza solo il testo a un colore scuro leggibile, invece di inseguire --fh-text. */ html[data-fh-theme="dark"] .bg-10, html[data-fh-theme="dark"] .bg-30, html[data-fh-theme="dark"] .bg-light { color: #0a1a2b; } html[data-fh-theme="dark"] .bg-10 h1, html[data-fh-theme="dark"] .bg-10 h2, html[data-fh-theme="dark"] .bg-10 h3, html[data-fh-theme="dark"] .bg-10 h4, html[data-fh-theme="dark"] .bg-10 h5, html[data-fh-theme="dark"] .bg-10 h6, html[data-fh-theme="dark"] .bg-30 h1, html[data-fh-theme="dark"] .bg-30 h2, html[data-fh-theme="dark"] .bg-30 h3, html[data-fh-theme="dark"] .bg-30 h4, html[data-fh-theme="dark"] .bg-30 h5, html[data-fh-theme="dark"] .bg-30 h6, html[data-fh-theme="dark"] .bg-light h1, html[data-fh-theme="dark"] .bg-light h2, html[data-fh-theme="dark"] .bg-light h3, html[data-fh-theme="dark"] .bg-light h4, html[data-fh-theme="dark"] .bg-light h5, html[data-fh-theme="dark"] .bg-light h6 { color: #0a1a2b; } html[data-fh-theme="dark"] .bg-10 .text-muted, html[data-fh-theme="dark"] .bg-30 .text-muted, html[data-fh-theme="dark"] .bg-light .text-muted { color: rgba(10, 26, 43, .7) !important; } html[data-fh-theme="dark"] .bg-10 .text-primary, html[data-fh-theme="dark"] .bg-30 .text-primary, html[data-fh-theme="dark"] .bg-light .text-primary { color: #14507f !important; } /* Sul fondo notte il magenta è schiarito: il pulsante pieno vuole testo scuro, con il bianco resterebbe a 3.14:1. */ html[data-fh-theme="dark"] .btn-accent { --_text: #12212e; } html[data-fh-theme="dark"] .badge-accent { color: #12212e; } html[data-fh-theme="dark"] .notice-band p { color: rgba(10, 26, 43, .72); } html[data-fh-theme="dark"] .sponsors-section .ratio, html[data-fh-theme="dark"] .sponsors-section .sponsor-logo { background: #f4f6f9; } /* ================================================================== ALTO CONTRASTO — .fh-contrast su ================================================================== */ html.fh-contrast { --fh-shadow: 0 0 0 1px currentColor; } html.fh-contrast body { background: #fff; color: #000; } html.fh-contrast a { text-decoration: underline !important; } html.fh-contrast .btn { border-width: 2px !important; font-weight: 700; } html.fh-contrast .card { border: 2px solid currentColor !important; box-shadow: none !important; } html.fh-contrast *:focus-visible { outline: 3px solid #000 !important; outline-offset: 2px !important; } html.fh-contrast[data-fh-theme="dark"] body { background: #000; color: #fff; } html.fh-contrast[data-fh-theme="dark"] *:focus-visible { outline-color: #fff !important; } /* ================================================================== DIMENSIONE TESTO — [data-fh-fontsize="2"|"3"] su ================================================================== */ html[data-fh-fontsize="2"] { font-size: 112.5%; } html[data-fh-fontsize="3"] { font-size: 125%; } /* ================================================================== RIDUZIONE ANIMAZIONI — .fh-reduce-motion su Si somma a prefers-reduced-motion: qui è una scelta esplicita dell'utente, indipendente dalle impostazioni di sistema. ================================================================== */ html.fh-reduce-motion .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } html.fh-reduce-motion * { scroll-behavior: auto !important; } html.fh-reduce-motion .header-wrap, html.fh-reduce-motion .navbar-main, html.fh-reduce-motion .carousel-item, html.fh-reduce-motion .sponsor-card, html.fh-reduce-motion .fh-gallery__img { transition: none !important; animation: none !important; }