/** * BridgeWorks — preferenze di lettura (griglia visuale + stati pagina). */ /* --- Stati applicati su --- */ html.bw-a11y-text-lg { font-size: 112.5%; } html.bw-a11y-text-xl { font-size: 125%; } html.bw-a11y-high-contrast { color-scheme: light; } html.bw-a11y-high-contrast body { background: #fff !important; color: #111 !important; } html.bw-a11y-high-contrast a:not(.bw-a11y-fab):not(.bw-a11y-panel__close):not(.bw-a11y-tile) { color: #0040dd !important; } html.bw-a11y-high-contrast button, html.bw-a11y-high-contrast input, html.bw-a11y-high-contrast select, html.bw-a11y-high-contrast textarea { border-color: #111 !important; } html.bw-a11y-high-contrast :focus-visible { outline-color: #000 !important; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #000 !important; } html.bw-a11y-underline-links a:not(.bw-a11y-fab):not(.bw-a11y-tile) { text-decoration: underline !important; text-underline-offset: 0.15em; } html.bw-a11y-reduce-motion *, html.bw-a11y-reduce-motion *::before, html.bw-a11y-reduce-motion *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Spaziatura testo — 3 livelli (WCAG 1.4.12, senza line-height) */ html.bw-a11y-text-spacing-md body { letter-spacing: 0.04em; word-spacing: 0.06em; } html.bw-a11y-text-spacing-lg body { letter-spacing: 0.06em; word-spacing: 0.1em; } html.bw-a11y-text-spacing-xl body { letter-spacing: 0.08em; word-spacing: 0.16em; } html.bw-a11y-text-spacing-md :is(p, li + li, dd + dd) { margin-bottom: 1em !important; } html.bw-a11y-text-spacing-lg :is(p, li + li, dd + dd) { margin-bottom: 1.25em !important; } html.bw-a11y-text-spacing-xl :is(p, li + li, dd + dd) { margin-bottom: 1.5em !important; } /* Altezza linea — 3 livelli (ciclo come spaziatura) */ html.bw-a11y-line-height-md body { line-height: 1.75 !important; } html.bw-a11y-line-height-lg body { line-height: 2 !important; } html.bw-a11y-line-height-xl body { line-height: 2.35 !important; } html.bw-a11y-line-height-md :is(p, li, dd, blockquote, h1, h2, h3, h4, h5, h6), html.bw-a11y-line-height-lg :is(p, li, dd, blockquote, h1, h2, h3, h4, h5, h6), html.bw-a11y-line-height-xl :is(p, li, dd, blockquote, h1, h2, h3, h4, h5, h6) { line-height: inherit !important; } html.bw-a11y-hide-images :is(img, picture, video):not(.bw-a11y-keep):not(.bw-a11y-panel img):not(.bw-a11y-fab img), html.bw-a11y-hide-images svg[role="img"]:not(.bw-a11y-keep):not(.bw-a11y-panel svg):not(.bw-a11y-fab svg) { display: none !important; } html.bw-a11y-hide-images figure:has(:is(img, picture, video):not(.bw-a11y-keep)) figcaption { display: block; font-size: 0.875rem; color: #44403c; margin: 0.5rem 0 1rem; } html.bw-a11y-dyslexia-font body { font-family: "Atkinson Hyperlegible", var(--bw-font-sans, system-ui), sans-serif !important; } html.bw-a11y-dyslexia-font body :is( h1, h2, h3, h4, h5, h6, p, a, button, input, select, textarea, li, span, label, div, nav, footer, header, main, section, article, td, th, small, strong, em, blockquote, figcaption ) { font-family: inherit !important; } html.bw-a11y-dyslexia-font .bw-a11y-panel, html.bw-a11y-dyslexia-font .bw-a11y-panel * { font-family: var(--bw-font-sans, system-ui), sans-serif !important; } html.bw-a11y-dyslexia-font .bw-a11y-fab, html.bw-a11y-dyslexia-font .bw-a11y-fab * { font-family: var(--bw-font-display, "Plus Jakarta Sans", "DM Sans", system-ui, sans-serif) !important; } /* Saturazione pagina (profilo daltonico / convulsioni) */ html.bw-a11y-saturation-high body > *:not(.bw-a11y-shell):not(.bw-a11y-structure-overlay):not(.bw-a11y-structure-popup):not(#bw-a11y-reading-mask):not(#bw-a11y-reading-guide):not(#bw-a11y-cursor):not(#bw-a11y-read-bar) { filter: saturate(1.45) contrast(1.06); } html.bw-a11y-saturation-low body > *:not(.bw-a11y-shell):not(.bw-a11y-structure-overlay):not(.bw-a11y-structure-popup):not(#bw-a11y-reading-mask):not(#bw-a11y-reading-guide):not(#bw-a11y-cursor):not(#bw-a11y-read-bar) { filter: saturate(0.65) contrast(1.04); } /* --- Cursore assistito --- */ html.bw-a11y-cursor-assist, html.bw-a11y-cursor-assist body { cursor: none !important; } html.bw-a11y-cursor-assist .bw-a11y-shell, html.bw-a11y-cursor-assist .bw-a11y-shell * { cursor: none !important; } .bw-a11y-cursor { position: fixed; left: 0; top: 0; z-index: 10063; width: 24px; height: 24px; margin: 0; pointer-events: none; will-change: transform; } .bw-a11y-cursor__shape { display: block; width: 24px; height: 24px; transform-origin: 4px 4px; filter: drop-shadow(0 1px 1px rgba(42, 92, 71, 0.35)); } .bw-a11y-cursor--md .bw-a11y-cursor__shape { transform: scale(1); } .bw-a11y-cursor--lg .bw-a11y-cursor__shape { transform: scale(1.45); } .bw-a11y-cursor--xl .bw-a11y-cursor__shape { transform: scale(1.9); } /* --- Maschera da lettura --- */ .bw-a11y-reading-mask { position: fixed; inset: 0; z-index: 10052; pointer-events: none; } .bw-a11y-reading-mask__shade { position: absolute; left: 0; right: 0; background: rgba(26, 26, 24, var(--bw-a11y-mask-opacity, 0.76)); transition: height 0.05s linear, top 0.05s linear, background-color 0.15s ease; } .bw-a11y-reading-mask__shade--top { top: 0; } .bw-a11y-reading-mask__shade--bottom { bottom: auto; } .bw-a11y-reading-mask__shade--top::after, .bw-a11y-reading-mask__shade--bottom::before { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--bw-verde-l, #6aab8a); box-shadow: 0 0 6px rgba(106, 171, 138, 0.45); } .bw-a11y-reading-mask__shade--top::after { bottom: 0; } .bw-a11y-reading-mask__shade--bottom::before { top: 0; } /* --- Guida alla lettura --- */ .bw-a11y-reading-guide { position: fixed; left: 0; top: 0; z-index: 10053; width: 100%; height: 0; pointer-events: none; will-change: transform; } .bw-a11y-reading-guide__line { display: block; width: 100%; height: 3px; margin-top: -1px; background: linear-gradient( 90deg, transparent 0%, var(--bw-verde-m, #3d7260) 12%, var(--bw-verde-m, #3d7260) 88%, transparent 100% ); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.75); } .bw-a11y-reading-guide__mark { position: absolute; left: 50%; top: -6px; width: 0; height: 0; margin-left: -5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--bw-verde-m, #3d7260); filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.8)); } html.bw-a11y-reduce-motion .bw-a11y-reading-mask__shade { transition: none; } @media (prefers-reduced-motion: reduce) { .bw-a11y-reading-mask__shade { transition: none; } } /* --- Overlay + pannello ancorato al FAB (basso sinistra) --- */ /* --- Widget accessibilità: tema + dimensioni --- */ html { --bw-a11y-bg: var(--bw-surface, #f8fafc); --bw-a11y-surface: var(--bw-white, #fff); --bw-a11y-header-bg: var(--bw-gradient-brand, linear-gradient(135deg, #2a5c47, #3d7260)); --bw-a11y-header-text: #fff; --bw-a11y-header-muted: rgba(255, 255, 255, 0.82); --bw-a11y-accent: var(--bw-verde, #2a5c47); --bw-a11y-accent-mid: var(--bw-verde-m, #3d7260); --bw-a11y-accent-soft: var(--bw-accent-muted, #ecf5ef); --bw-a11y-accent-ring: var(--bw-accent-soft, rgba(106, 171, 138, 0.18)); --bw-a11y-border: var(--bw-line, rgba(42, 92, 71, 0.12)); --bw-a11y-radius-panel: var(--bw-radius-lg, 16px); --bw-a11y-radius-card: var(--bw-radius-sm, 8px); --bw-a11y-shadow-panel: 0 16px 48px rgba(30, 69, 54, 0.18); --bw-a11y-rail-w: 28rem; --bw-a11y-grid-cols: 1; --bw-a11y-tile-label: 0.875rem; --bw-a11y-tile-min-h: 3.1rem; --bw-a11y-title: 1rem; --bw-a11y-reset: 0.875rem; --bw-a11y-foot: 0.8125rem; --bw-a11y-icon: 1.875rem; --bw-a11y-tile-hint: 0.625rem; --bw-a11y-widget-size-label: 0.875rem; } html.bw-a11y-widget-xl { --bw-a11y-rail-w: 34rem; --bw-a11y-grid-cols: 1; --bw-a11y-tile-label: 0.975rem; --bw-a11y-tile-min-h: 3.65rem; --bw-a11y-title: 1.125rem; --bw-a11y-reset: 1rem; --bw-a11y-foot: 0.9375rem; --bw-a11y-icon: 2.375rem; --bw-a11y-tile-hint: 0.75rem; --bw-a11y-widget-size-label: 1rem; } .bw-a11y-overlay { position: fixed; inset: 0; z-index: 10060; background: rgba(26, 26, 24, 0.5); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; } .bw-a11y-overlay.is-open { opacity: 1; visibility: visible; } .bw-a11y-shell { position: fixed; z-index: 10061; left: max(1rem, env(safe-area-inset-left, 0px)); bottom: max(1rem, env(safe-area-inset-bottom, 0px)); width: min(calc(var(--bw-a11y-rail-w) + 2.5rem), calc(100vw - 2rem)); pointer-events: none; } .bw-a11y-shell.is-open { top: 0; bottom: 0; left: 0; width: min(var(--bw-a11y-rail-w), 100vw); max-width: 100%; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); display: flex; flex-direction: column; pointer-events: none; } .bw-a11y-shell.is-open .bw-a11y-fab { display: none; } .bw-a11y-shell .bw-a11y-fab { pointer-events: auto; } .bw-a11y-shell .bw-a11y-panel.is-open { pointer-events: auto; } .bw-a11y-panel { display: none; position: absolute; left: 0; bottom: calc(100% + 0.65rem); width: 100%; max-height: min(82vh, calc(100vh - 5.5rem)); overflow: auto; margin: 0; padding: 0; border: 1px solid var(--bw-a11y-border); border-radius: var(--bw-a11y-radius-panel); background: var(--bw-a11y-bg); color: var(--bw-ink, #292524); font-family: var(--bw-font-display, "Plus Jakarta Sans", "DM Sans", system-ui, sans-serif); box-shadow: var(--bw-a11y-shadow-panel); transform-origin: bottom left; } .bw-a11y-shell.is-open .bw-a11y-panel { position: relative; flex: 1 1 auto; bottom: auto; left: auto; width: 100%; max-height: none; height: 100%; min-height: 0; overflow: hidden; display: none; border-radius: 0; border-right: 1px solid var(--bw-a11y-border); box-shadow: 4px 0 28px rgba(30, 69, 54, 0.12); } .bw-a11y-shell.is-open .bw-a11y-panel.is-open { display: flex; flex-direction: column; } .bw-a11y-panel.is-open { display: block; animation: bw-a11y-panel-in 0.22s ease; } .bw-a11y-shell.is-open .bw-a11y-panel.is-open { animation: bw-a11y-panel-rail-in 0.22s ease; } .bw-a11y-panel__content { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--bw-a11y-bg); } .bw-a11y-panel__main { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; gap: 0.65rem; padding: 0.65rem 0 0; } .bw-a11y-shell.is-open .bw-a11y-panel__lead { display: none; } .bw-a11y-settings { flex-shrink: 0; margin: 0 1rem; border: 1px solid var(--bw-a11y-border); border-radius: var(--bw-radius-md, 12px); background: var(--bw-a11y-surface); overflow: hidden; } .bw-a11y-settings .bw-a11y-profiles { margin: 0; border: none; border-radius: 0; box-shadow: none; } .bw-a11y-settings .bw-a11y-widget-size { margin: 0; border: none; border-radius: 0; box-shadow: none; border-top: 1px solid var(--bw-a11y-border); } .bw-a11y-tools { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0.35rem; } .bw-a11y-tools__heading { margin: 0; padding: 0.15rem 1.1rem 0.45rem; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2; color: var(--bw-ink-muted, #78716c); } .bw-a11y-shell.is-open .bw-a11y-tools { flex: 1 1 auto; } .bw-a11y-shell.is-open .bw-a11y-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .bw-a11y-shell.is-open .bw-a11y-tile, .bw-a11y-shell.is-open .bw-a11y-tile--cycle { min-height: var(--bw-a11y-tile-min-h); } .bw-a11y-shell.is-open .bw-a11y-tile--cycle:not(.is-active) .bw-a11y-tile__hint { display: none; } .bw-a11y-shell.is-open .bw-a11y-tile__icon { width: 2.15rem; height: 2.15rem; } .bw-a11y-shell.is-open .bw-a11y-tile__icon svg { width: 1.2rem; height: 1.2rem; } @keyframes bw-a11y-panel-in { from { opacity: 0; transform: translateY(0.5rem) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes bw-a11y-panel-rail-in { from { opacity: 0; transform: translateX(-0.75rem); } to { opacity: 1; transform: translateX(0); } } .bw-a11y-panel__header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 1.1rem; background: var(--bw-a11y-header-bg); border-radius: calc(var(--bw-a11y-radius-panel) - 1px) calc(var(--bw-a11y-radius-panel) - 1px) 0 0; flex-shrink: 0; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08); } .bw-a11y-shell.is-open .bw-a11y-panel__header { border-radius: 0; } .bw-a11y-panel__title { margin: 0; font-size: var(--bw-a11y-title); font-weight: 800; line-height: 1.3; color: var(--bw-a11y-header-text); letter-spacing: -0.01em; } .bw-a11y-panel__title kbd, .bw-a11y-panel__title .bw-a11y-panel__shortcut { font-weight: 600; font-size: 0.78em; color: var(--bw-a11y-header-muted); } .bw-a11y-panel__close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: var(--bw-radius-sm, 8px); background: rgba(255, 255, 255, 0.12); color: var(--bw-a11y-header-text); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .bw-a11y-panel__close:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.42); } .bw-a11y-panel__lead { margin: 0; padding: 0 1.1rem; font-size: 0.8125rem; line-height: 1.45; color: var(--bw-ink-soft, #57534e); } /* --- Profili di accessibilità --- */ .bw-a11y-profiles { flex-shrink: 0; margin: 0; border-radius: 0; background: transparent; border: none; box-shadow: none; overflow: hidden; } .bw-a11y-profiles__toggle { display: flex; align-items: center; gap: 0.55rem; width: 100%; padding: 0.85rem 1rem; border: none; background: transparent; color: #1a1a18; font-family: var(--bw-font-display, "Plus Jakarta Sans", "DM Sans", system-ui, sans-serif); font-size: var(--bw-a11y-widget-size-label); font-weight: 700; line-height: 1.25; text-align: left; cursor: pointer; } .bw-a11y-profiles__toggle-icon { display: inline-flex; flex-shrink: 0; color: var(--bw-verde-m, #3d7260); } .bw-a11y-profiles__toggle-text { flex: 1; min-width: 0; } .bw-a11y-profiles__chevron { display: inline-flex; flex-shrink: 0; color: #78716c; transition: transform 0.2s ease; } .bw-a11y-profiles.is-collapsed .bw-a11y-profiles__chevron { transform: rotate(-90deg); } .bw-a11y-profiles__grid { display: flex; flex-direction: column; gap: 0; padding: 0; } .bw-a11y-shell.is-open .bw-a11y-profiles__grid { max-height: min(18rem, 38vh); overflow-y: auto; overscroll-behavior: contain; } .bw-a11y-profiles.is-collapsed .bw-a11y-profiles__grid { display: none; } .bw-a11y-profile { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 0.35rem; min-height: 2.75rem; padding: 0.55rem 1rem; border: none; border-bottom: 1px solid var(--bw-a11y-border); border-radius: 0; background: transparent; color: var(--bw-ink, #292524); font: inherit; text-align: left; cursor: pointer; transition: background 0.15s ease; } .bw-a11y-profile:last-child { border-bottom: none; } .bw-a11y-profile:hover { background: var(--bw-msg-brand-soft-2, #f5faf7); } .bw-a11y-profile:focus-visible { outline: 2px solid var(--bw-verde-m, #3d7260); outline-offset: 2px; } .bw-a11y-profile.is-active { background: var(--bw-a11y-accent-soft); box-shadow: inset 3px 0 0 var(--bw-a11y-accent-mid); } .bw-a11y-profile__main { display: flex; align-items: center; gap: 0.45rem; flex: 1; min-width: 0; } .bw-a11y-profile__check { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 1rem; color: #1a1a18; opacity: 0; transition: opacity 0.15s ease; } .bw-a11y-profile.is-active .bw-a11y-profile__check { opacity: 1; } .bw-a11y-profile__check svg { width: 0.875rem; height: 0.875rem; } .bw-a11y-profile__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--bw-a11y-accent-ring); color: var(--bw-a11y-accent); } .bw-a11y-profile__icon svg { width: 0.9rem; height: 0.9rem; } .bw-a11y-profile.is-active .bw-a11y-profile__icon { background: var(--bw-a11y-accent); color: #fff; } .bw-a11y-profile__label { flex: 1; min-width: 0; font-size: 0.74rem; font-weight: 600; line-height: 1.25; color: #292524; text-align: left; } html.bw-a11y-widget-xl .bw-a11y-profile { min-height: 3.15rem; padding: 0.55rem 0.6rem 0.55rem 0.5rem; } html.bw-a11y-widget-xl .bw-a11y-profile__label { font-size: 0.84rem; } html.bw-a11y-widget-xl .bw-a11y-profile__icon { width: 1.65rem; height: 1.65rem; } html.bw-a11y-widget-xl .bw-a11y-profile__icon svg { width: 1rem; height: 1rem; } .bw-a11y-widget-size { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0; padding: 0.85rem 1rem; border-radius: 0; background: transparent; border: none; box-shadow: none; flex-shrink: 0; } .bw-a11y-widget-size__label { font-family: var(--bw-font-display, "Plus Jakarta Sans", "DM Sans", system-ui, sans-serif); font-size: var(--bw-a11y-widget-size-label); font-weight: 700; line-height: 1.25; color: #1a1a18; } .bw-a11y-switch { position: relative; flex-shrink: 0; width: 3.1rem; height: 1.75rem; padding: 0; border: none; background: transparent; cursor: pointer; } .bw-a11y-switch__track { position: relative; display: block; width: 100%; height: 100%; border-radius: 999px; background: #d6d3d1; transition: background 0.2s ease; } .bw-a11y-switch__thumb { position: absolute; top: 0.18rem; left: 0.18rem; width: 1.38rem; height: 1.38rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(26, 26, 24, 0.18); transition: transform 0.2s ease; } .bw-a11y-switch__icon { position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; color: #78716c; pointer-events: none; transition: opacity 0.15s ease; } .bw-a11y-switch__icon--off { right: 0.42rem; opacity: 1; } .bw-a11y-switch__icon--on { left: 0.42rem; opacity: 0; color: #fff; } .bw-a11y-switch.is-on .bw-a11y-switch__track { background: var(--bw-a11y-accent); } .bw-a11y-switch.is-on .bw-a11y-switch__thumb { transform: translateX(1.35rem); } .bw-a11y-switch.is-on .bw-a11y-switch__icon--off { opacity: 0; } .bw-a11y-switch.is-on .bw-a11y-switch__icon--on { opacity: 1; } .bw-a11y-switch:focus-visible { outline: 2px solid var(--bw-verde-m, #3d7260); outline-offset: 3px; border-radius: 999px; } .bw-a11y-grid { display: flex; flex-direction: column; gap: 0; margin: 0 1rem; padding: 0; border: 1px solid var(--bw-a11y-border); border-radius: var(--bw-radius-md, 12px); background: var(--bw-a11y-surface); overflow: hidden; } .bw-a11y-tile { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 0.65rem; width: 100%; min-height: var(--bw-a11y-tile-min-h); padding: 0.55rem 0.75rem; border: none; border-bottom: 1px solid var(--bw-a11y-border); border-radius: 0; background: transparent; color: var(--bw-ink, #292524); font: inherit; text-align: left; cursor: pointer; box-shadow: none; transition: background 0.15s ease; } .bw-a11y-tile:last-child { border-bottom: none; } .bw-a11y-tile:hover { background: var(--bw-msg-brand-soft-2, #f5faf7); } .bw-a11y-tile:focus-visible { outline: 2px solid var(--bw-a11y-accent-mid); outline-offset: -2px; z-index: 1; } .bw-a11y-tile.is-active { background: var(--bw-a11y-accent-soft); box-shadow: inset 3px 0 0 var(--bw-a11y-accent-mid); } .bw-a11y-tile:not(.bw-a11y-tile--cycle):not(.bw-a11y-tile--action)::after { content: ""; flex-shrink: 0; width: 1.15rem; height: 1.15rem; margin-left: auto; border: 2px solid var(--bw-a11y-border); border-radius: 50%; background: transparent; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .bw-a11y-tile:not(.bw-a11y-tile--cycle):not(.bw-a11y-tile--action).is-active::after { border-color: var(--bw-a11y-accent); background: var(--bw-a11y-accent); box-shadow: inset 0 0 0 3px #fff; } .bw-a11y-tile--action::after { content: ""; flex-shrink: 0; width: 0.45rem; height: 0.45rem; margin-left: auto; border-top: 2px solid var(--bw-ink-muted, #78716c); border-right: 2px solid var(--bw-ink-muted, #78716c); transform: rotate(45deg); } .bw-a11y-tile--cycle { min-height: calc(var(--bw-a11y-tile-min-h) + 0.35rem); } .bw-a11y-tile__copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.1rem; flex: 1; min-width: 0; } .bw-a11y-tile__meta { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.4rem; flex-shrink: 0; margin-left: 0.35rem; } .bw-a11y-tile__cycle-icon { position: static; display: inline-flex; width: 0.95rem; height: 0.95rem; color: var(--bw-ink-muted, #78716c); opacity: 0.9; } .bw-a11y-tile__cycle-icon svg { width: 100%; height: 100%; } .bw-a11y-tile--cycle.is-active .bw-a11y-tile__cycle-icon { color: var(--bw-verde-m, #3d7260); } .bw-a11y-tile__levels { display: flex; align-items: center; justify-content: flex-end; gap: 0.28rem; min-height: 0.45rem; margin-top: 0; } .bw-a11y-tile__level-dot { width: 0.38rem; height: 0.38rem; border-radius: 50%; background: #d6d3d1; transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .bw-a11y-tile__level-dot.is-filled { background: var(--bw-verde, #2a5c47); transform: scale(1.05); } .bw-a11y-tile__level-dot.is-next { background: #fff; border: 1.5px solid var(--bw-verde-m, #3d7260); box-shadow: 0 0 0 2px rgba(61, 114, 96, 0.18); animation: bw-a11y-level-pulse 1.6s ease-in-out infinite; } .bw-a11y-tile__hint { display: block; margin-top: 0; font-size: var(--bw-a11y-tile-hint); font-weight: 600; line-height: 1.15; color: var(--bw-ink-muted, #78716c); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bw-a11y-tile--cycle:not(.is-active) .bw-a11y-tile__hint { color: #57534e; } .bw-a11y-tile--cycle.is-active .bw-a11y-tile__hint { color: var(--bw-verde-m, #3d7260); } @keyframes bw-a11y-level-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 2px rgba(61, 114, 96, 0.15); } 50% { transform: scale(1.12); box-shadow: 0 0 0 3px rgba(61, 114, 96, 0.28); } } .bw-a11y-tile__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.15rem; height: 2.15rem; border-radius: var(--bw-radius-sm, 8px); background: var(--bw-a11y-accent-ring); color: var(--bw-a11y-accent); transition: background 0.15s ease, color 0.15s ease; } .bw-a11y-tile__icon svg { width: 1.2rem; height: 1.2rem; } .bw-a11y-tile.is-active .bw-a11y-tile__icon { background: var(--bw-a11y-accent); color: #fff; } .bw-a11y-tile__badge { display: none; } .bw-a11y-tile__label { margin-top: 0; width: 100%; font-size: var(--bw-a11y-tile-label); font-weight: 700; line-height: 1.25; color: var(--bw-ink, #292524); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bw-a11y-panel__foot-actions { padding: 0.45rem 1rem; border-bottom: 1px solid var(--bw-a11y-border); } .bw-a11y-panel__foot-main { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.65rem 1rem; } .bw-a11y-panel__reset-full { display: flex; align-items: center; justify-content: flex-start; gap: 0.45rem; width: 100%; margin: 0; padding: 0.35rem 0; border: none; border-radius: 0; background: transparent; color: var(--bw-a11y-accent); font: inherit; font-size: 0.8125rem; font-weight: 700; cursor: pointer; box-shadow: none; transition: color 0.15s ease, opacity 0.15s ease; } .bw-a11y-panel__reset-full:hover { color: var(--bw-a11y-accent-mid); opacity: 0.92; } .bw-a11y-panel__reset-icon { display: inline-flex; } .bw-a11y-panel__foot { display: flex; flex-direction: column; flex-shrink: 0; background: var(--bw-a11y-surface); border-top: 1px solid var(--bw-a11y-border); } .bw-a11y-panel__statement { font-size: var(--bw-a11y-foot); font-weight: 700; color: var(--bw-verde-m, #3d7260); text-decoration: underline; text-underline-offset: 0.12em; line-height: 1.35; max-width: 58%; } .bw-a11y-panel__statement:hover { color: #2a5c47; } .bw-a11y-panel__brand { flex-shrink: 0; font-family: var(--bw-font-display, var(--bw-font-sans, system-ui)), sans-serif; font-size: 1.15rem; font-weight: 700; color: var(--bw-verde-m, #3d7260); letter-spacing: -0.02em; text-decoration: none; line-height: 1; } .bw-a11y-panel__brand span { color: var(--bw-terracotta, #c4704a); } .bw-a11y-panel__brand:hover { opacity: 0.88; } /* FAB — ancorato in basso sinistra; il pannello si apre sopra */ html.bw-a11y-widget-xl .bw-a11y-fab:not(.bw-a11y-fab--icon-only) { font-size: 1.05rem; min-height: 52px; padding: 0 1.15rem 0 1rem; } html.bw-a11y-widget-xl .bw-a11y-fab.bw-a11y-fab--icon-only { width: 52px; height: 52px; min-width: 52px; min-height: 52px; } .bw-a11y-fab { position: relative; left: auto; bottom: auto; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-width: 48px; min-height: 48px; padding: 0 1.05rem 0 0.9rem; border: 2px solid rgba(255, 255, 255, 0.35); border-radius: var(--bw-radius-md, 12px); background: var(--bw-gradient-brand, linear-gradient(135deg, #2a5c47, #3d7260)); color: #fff; font-family: var(--bw-font-display, "Plus Jakarta Sans", "DM Sans", system-ui, sans-serif); font-size: 0.95rem; font-weight: 700; line-height: 1.15; cursor: pointer; box-shadow: 0 8px 24px rgba(30, 69, 54, 0.28); transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; pointer-events: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .bw-a11y-fab.bw-a11y-fab--icon-only { width: 48px; height: 48px; padding: 0; border-radius: var(--bw-radius-md, 12px); } .bw-a11y-fab.bw-a11y-fab--icon-only .bw-a11y-fab-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .bw-a11y-fab:hover { background: var(--bw-verde-m, #3d7260); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(26, 26, 24, 0.26); } .bw-a11y-fab:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .bw-a11y-fab-icon { display: inline-flex; flex-shrink: 0; } .bw-a11y-fab-label { letter-spacing: normal; word-spacing: normal; font-family: inherit; font-weight: 700; } body.candidate-area .bw-a11y-shell:not(.is-open), body.company-area .bw-a11y-shell:not(.is-open) { bottom: calc(max(1rem, env(safe-area-inset-bottom, 0px)) + 4.25rem); } body.candidate-area .bw-a11y-shell:not(.is-open) .bw-a11y-panel, body.company-area .bw-a11y-shell:not(.is-open) .bw-a11y-panel { max-height: min(62vh, calc(100vh - 11rem)); } @media (max-width: 380px) { .bw-a11y-tile { padding-inline: 0.6rem; } .bw-a11y-tile__label { font-size: 0.8125rem; } } html.bw-a11y-reduce-motion .bw-a11y-panel.is-open { animation: none; } @media (prefers-reduced-motion: reduce) { .bw-a11y-panel.is-open { animation: none; } } @media (max-width: 420px) { .bw-a11y-fab:not(.bw-a11y-fab--icon-only) { width: 48px; height: 48px; padding: 0; border-radius: var(--bw-radius-md, 12px); } .bw-a11y-fab-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } } html.bw-a11y-reduce-motion .bw-a11y-tile__level-dot.is-next { animation: none; } @media (prefers-reduced-motion: reduce) { .bw-a11y-overlay, .bw-a11y-panel, .bw-a11y-fab, .bw-a11y-tile { transition: none; } .bw-a11y-fab:hover, .bw-a11y-tile:hover { transform: none; } .bw-a11y-tile__level-dot.is-next { animation: none; } } html.bw-a11y-reduce-motion .bw-a11y-overlay, html.bw-a11y-reduce-motion .bw-a11y-panel, html.bw-a11y-reduce-motion .bw-a11y-fab, html.bw-a11y-reduce-motion .bw-a11y-tile { transition: none; } /* --- Struttura pagina (popup separato) --- */ .bw-a11y-structure-overlay { position: fixed; inset: 0; z-index: 10062; background: rgba(26, 26, 24, 0.28); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; pointer-events: none; } .bw-a11y-structure-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .bw-a11y-structure-popup { position: fixed; z-index: 10063; top: 0; bottom: 0; left: 0; display: none; flex-direction: column; width: min(28rem, 100vw); background: var(--bw-a11y-bg); color: var(--bw-ink, #292524); font-family: var(--bw-font-sans, system-ui, sans-serif); box-shadow: 8px 0 32px rgba(30, 69, 54, 0.14); overflow: hidden; } .bw-a11y-structure-popup.is-open { display: flex; animation: bw-a11y-structure-in 0.22s ease; } body.bw-a11y-menu-open .bw-a11y-structure-popup { left: min(var(--bw-a11y-rail-w), 100vw); width: min(30rem, max(20rem, calc(100vw - min(var(--bw-a11y-rail-w), 100vw)))); } html.bw-a11y-widget-xl .bw-a11y-structure__title { font-size: 1.05rem; } html.bw-a11y-widget-xl .bw-a11y-structure__tab { font-size: 0.875rem; } html.bw-a11y-widget-xl .bw-a11y-structure__text { font-size: 0.875rem; } @keyframes bw-a11y-structure-in { from { opacity: 0; transform: translateX(-0.5rem); } to { opacity: 1; transform: translateX(0); } } .bw-a11y-structure-host { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .bw-a11y-panel__main[hidden] { display: none !important; } .bw-a11y-tile--action.is-active { background: var(--bw-a11y-accent-soft); box-shadow: inset 3px 0 0 var(--bw-a11y-accent-mid); } .bw-a11y-tile--action .bw-a11y-tile__icon svg { opacity: 0.92; } .bw-a11y-structure { display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%; overflow: hidden; background: #fff; } .bw-a11y-structure__header { display: flex; align-items: center; gap: 0.65rem; padding: 1rem 1rem 0.55rem; flex-shrink: 0; background: var(--bw-a11y-header-bg); } .bw-a11y-structure__back { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: var(--bw-radius-sm, 8px); background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; } .bw-a11y-structure__back:hover { background: rgba(255, 255, 255, 0.22); } .bw-a11y-structure__title { margin: 0; font-size: 0.9rem; font-weight: 800; line-height: 1.3; color: var(--bw-a11y-header-text); } .bw-a11y-structure__tabs { display: flex; gap: 0; padding: 0 1rem; border-bottom: 1px solid rgba(42, 36, 24, 0.1); flex-shrink: 0; } .bw-a11y-structure__tab { flex: 1; padding: 0.65rem 0.35rem; border: none; border-bottom: 2px solid transparent; background: transparent; font-size: 0.74rem; font-weight: 700; color: #78716c; cursor: pointer; text-transform: lowercase; } .bw-a11y-structure__tab.is-active, .bw-a11y-structure__tab[aria-selected="true"] { color: #2a5c47; border-bottom-color: #2a5c47; } .bw-a11y-structure__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0.35rem 0.5rem 0.85rem; background: #fff; } .bw-a11y-structure__list { list-style: none; margin: 0; padding: 0; } .bw-a11y-structure__item { margin: 0; } .bw-a11y-structure__item--depth-1 { padding-left: 0; } .bw-a11y-structure__item--depth-2 { padding-left: 0.65rem; } .bw-a11y-structure__item--depth-3 { padding-left: 1.3rem; } .bw-a11y-structure__item--depth-4 { padding-left: 1.95rem; } .bw-a11y-structure__item--depth-5 { padding-left: 2.6rem; } .bw-a11y-structure__item--depth-6 { padding-left: 3.25rem; } .bw-a11y-structure__row { display: flex; align-items: flex-start; gap: 0.5rem; width: 100%; padding: 0.45rem 0.35rem; border: none; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; color: #2a5c47; } .bw-a11y-structure__row:hover, .bw-a11y-structure__row:focus-visible { background: rgba(42, 92, 71, 0.08); outline: 2px solid #2a5c47; outline-offset: 1px; } .bw-a11y-structure__badge { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 1.65rem; height: 1.35rem; padding: 0 0.25rem; border-radius: 4px; background: #2a5c47; color: #fff; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.02em; } .bw-a11y-structure__badge--section { background: #57534e; font-size: 0.58rem; } .bw-a11y-structure__badge--link { background: #3d7260; } .bw-a11y-structure__text { flex: 1; font-size: 0.78rem; line-height: 1.35; font-weight: 600; } .bw-a11y-structure__hint { display: block; margin-top: 0.1rem; font-size: 0.68rem; font-weight: 500; color: #78716c; } .bw-a11y-structure__empty { margin: 1rem 0.5rem; font-size: 0.78rem; line-height: 1.45; color: #78716c; text-align: center; } /* Leggi pagina — barra controlli TTS */ .bw-a11y-read-bar { position: fixed; left: 50%; bottom: 1rem; z-index: 100002; display: none; align-items: center; gap: 0.75rem; max-width: min(92vw, 28rem); padding: 0.55rem 0.75rem; border-radius: 12px; border: 1px solid rgba(42, 92, 71, 0.22); background: #fff; box-shadow: 0 8px 28px rgba(28, 25, 23, 0.16); transform: translateX(-50%); } .bw-a11y-read-bar.is-active { display: flex; } .bw-a11y-read-bar__status { flex: 1; margin: 0; font-size: 0.78rem; line-height: 1.35; font-weight: 600; color: #2a5c47; } .bw-a11y-read-bar__actions { display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; } .bw-a11y-read-bar__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2.1rem; height: 2.1rem; padding: 0 0.45rem; border: 1px solid rgba(42, 92, 71, 0.25); border-radius: 8px; background: #f6faf8; color: #2a5c47; font-size: 0.68rem; font-weight: 700; cursor: pointer; } .bw-a11y-read-bar__btn:hover, .bw-a11y-read-bar__btn:focus-visible { background: rgba(42, 92, 71, 0.1); outline: 2px solid #2a5c47; outline-offset: 1px; } .bw-a11y-read-bar__btn--rate { min-width: 4.5rem; } .bw-a11y-read-highlight { outline: 3px solid rgba(42, 92, 71, 0.45) !important; outline-offset: 3px; background-color: rgba(42, 92, 71, 0.06); transition: background-color 0.2s ease, outline-color 0.2s ease; } html.bw-a11y-widget-xl .bw-a11y-read-bar__status { font-size: 0.88rem; } html.bw-a11y-widget-xl .bw-a11y-read-bar__btn { min-width: 2.4rem; height: 2.4rem; font-size: 0.76rem; }