/** * ZERO1lab — widget accessibilità (fase 2). * Regolazioni = classi su (z1a-*), applicate prima del paint da uno * script inline in head (vedi inc/a11y.php). Preferenze in localStorage 'z1a'. * Testo: 3 livelli (z1a-text1/2/3). Le altre: toggle on/off. */ /* ---------- regolazioni ---------- */ /* Dimensione testo: scala tutto ciò che è in rem. */ html.z1a-text1{ font-size: 112%; } html.z1a-text2{ font-size: 125%; } html.z1a-text3{ font-size: 140%; } /* Spaziatura testo — valori del criterio WCAG 1.4.12. */ html.z1a-spacing body, html.z1a-spacing body *{ line-height: 1.7 !important; letter-spacing: .12em !important; word-spacing: .16em !important; } html.z1a-spacing p{ margin-bottom: 2em !important; } /* Alto contrasto: backdrop-filter su un layer fisso — a differenza del filter su NON rompe gli elementi position:fixed (header, banner). */ html.z1a-contrast::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index: 99970; backdrop-filter: contrast(1.22) saturate(1.05); } /* Link evidenziati ovunque. */ html.z1a-links a{ text-decoration: underline !important; text-decoration-thickness: 2px; text-underline-offset: 3px; } /* Cursore grande (freccia 44px, bordo bianco per restare visibile sui fondi scuri). */ html.z1a-cursor, html.z1a-cursor *{ cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 12-6 1 3.5 6.5-3 1.5-3.5-6.5-5 4z' fill='%23000' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") 8 4, auto !important; } /* Guida di lettura: banda evidenziata che segue il mouse (creata dal JS). */ .z1a-guideband{ position: fixed; left: 0; right: 0; top: 0; height: 96px; pointer-events: none; z-index: 99960; transform: translateY(-50%); background: color-mix(in srgb, var(--z1-primary, #b5894a) 13%, transparent); border-top: 2px solid var(--z1-primary, #b5894a); border-bottom: 2px solid var(--z1-primary, #b5894a); } /* Stop animazioni e transizioni (CSS; il JS del motore rispetta già prefers-reduced-motion). */ html.z1a-noanim *, html.z1a-noanim *::before, html.z1a-noanim *::after{ animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* Carattere ad alta leggibilità (sans di sistema, niente font decorativi). */ html.z1a-font body, html.z1a-font body *{ font-family: Verdana, Arial, "Helvetica Neue", sans-serif !important; letter-spacing: .01em; } /* ---------- widget ---------- */ .z1a{ position: fixed; bottom: var(--z1a-offset, 18px); z-index: 99990; font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .z1a--sinistra{ left: 18px; } .z1a--destra{ right: 18px; } .z1a__btn{ width: 50px; height: 50px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; background: var(--z1-primary, #b5894a); color: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.22); transition: transform .2s; } .z1a__btn:hover{ transform: scale(1.06); } .z1a__btn svg{ width: 28px; height: 28px; } .z1a__panel{ position: absolute; bottom: 62px; width: 290px; background: #fff; color: #1d2327; border-radius: 14px; box-shadow: 0 12px 44px rgba(0,0,0,.25); padding: 18px 18px 14px; max-height: min(70vh, 560px); overflow: auto; } .z1a--sinistra .z1a__panel{ left: 0; } .z1a--destra .z1a__panel{ right: 0; } .z1a__title{ margin: 0 0 10px; font-size: 15px; font-weight: 700; } .z1a__row{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid #f0f0f1; cursor: pointer; } .z1a__row--step{ cursor: default; } .z1a__row span:first-child{ font-size: 13.5px; } /* stepper dimensione testo */ .z1a-step{ display: flex; align-items: center; gap: 6px; flex: none; } .z1a-step__btn{ width: 30px; height: 26px; border: 1px solid #d5d8dc; background: #fff; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 700; color: #1d2327; line-height: 1; } .z1a-step__btn:hover{ border-color: var(--z1-primary, #b5894a); color: var(--z1-primary, #b5894a); } .z1a-step__btn:disabled{ opacity: .35; cursor: default; } .z1a-step__val{ min-width: 42px; text-align: center; font-size: 12.5px; font-variant-numeric: tabular-nums; color: #50575e; } /* switch (stesso linguaggio del modal cookie) */ .z1a-sw{ position: relative; display: inline-block; flex: none; } .z1a-sw input{ position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .z1a-sw__track{ display: block; width: 38px; height: 22px; border-radius: 999px; background: #d5d8dc; transition: background .2s; } .z1a-sw__track::after{ content:""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; } .z1a-sw input:checked + .z1a-sw__track{ background: var(--z1-primary, #b5894a); } .z1a-sw input:checked + .z1a-sw__track::after{ transform: translateX(16px); } .z1a-sw input:focus-visible + .z1a-sw__track{ outline: 3px solid var(--z1-primary, #b5894a); outline-offset: 2px; } .z1a__reset{ margin-top: 10px; width: 100%; border: 1px solid #d5d8dc; background: #fff; border-radius: 10px; padding: 8px 12px; font-size: 13px; cursor: pointer; color: #1d2327; } .z1a__reset:hover{ border-color: var(--z1-primary, #b5894a); color: var(--z1-primary, #b5894a); } @media (max-width: 520px){ .z1a__panel{ width: min(290px, calc(100vw - 36px)); } }