/* ========================================================================= * TD Accessibility – stile widget + classi di trasformazione * Prefisso classi UI: .tda- | Prefisso classi globali su : .tda-a11y- * ========================================================================= */ /* ------------------------------------------------------------------------- * 1. PULSANTE FLOTTANTE * ---------------------------------------------------------------------- */ #tda-root { --tda-accent: #1d4ed8; --tda-btn-size: 56px; /* Sorgenti iniettate inline dal PHP (desktop/mobile, x = lato, y = sopra/sotto) */ --tda-offx-d: 20px; --tda-offy-d: 20px; --tda-offx-m: 20px; --tda-offy-m: 20px; /* Valori attivi (desktop di default) */ --tda-offset-x: var(--tda-offx-d); --tda-offset-y: var(--tda-offy-d); --tda-toggle-extent: var(--tda-btn-size); } /* Su mobile usa le distanze dedicate */ @media (max-width: 768px) { #tda-root { --tda-offset-x: var(--tda-offx-m); --tda-offset-y: var(--tda-offy-m); } } .tda-toggle { position: fixed; z-index: 2147483600; width: var(--tda-btn-size); height: var(--tda-btn-size); border: none; border-radius: 50%; background: var(--tda-accent); color: #fff; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, .25); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0; transition: filter .15s ease, box-shadow .15s ease; } /* Hover senza transform: scale, cosi il transform resta libero per centrare i laterali */ .tda-toggle:hover { filter: brightness(1.08); box-shadow: 0 6px 22px rgba(0, 0, 0, .32); } .tda-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 5px var(--tda-accent); } .tda-toggle svg { width: 60%; height: 60%; fill: currentColor; flex-shrink: 0; } /* Posizionamento pulsante */ .tda-pos-bottom-right .tda-toggle { right: var(--tda-offset-x); bottom: var(--tda-offset-y); } .tda-pos-bottom-left .tda-toggle { left: var(--tda-offset-x); bottom: var(--tda-offset-y); } .tda-pos-top-right .tda-toggle { right: var(--tda-offset-x); top: var(--tda-offset-y); } .tda-pos-top-left .tda-toggle { left: var(--tda-offset-x); top: var(--tda-offset-y); } .tda-pos-middle-right .tda-toggle { right: var(--tda-offset-x); top: 50%; transform: translateY(-50%); } .tda-pos-middle-left .tda-toggle { left: var(--tda-offset-x); top: 50%; transform: translateY(-50%); } /* ---- Stile ETICHETTA = tab VERTICALE agganciato al lato ---- */ #tda-root.tda-style-label { --tda-toggle-extent: 46px; } #tda-root.tda-style-label .tda-toggle { width: auto; height: auto; writing-mode: vertical-rl; /* testo in verticale */ padding: 16px 11px; font-size: 14px; font-weight: 700; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.1; top: auto; bottom: var(--tda-offset-y); /* distanza SOLO dal fondo */ transform: none; } #tda-root.tda-style-label .tda-toggle svg { width: 22px; height: 22px; } .tda-toggle-text { white-space: nowrap; } /* Nello stile tondo il testo non si mostra mai */ #tda-root.tda-style-circle .tda-toggle-text { display: none; } /* Lato sinistro: incollato a sinistra, angoli arrotondati verso destra */ #tda-root.tda-style-label.tda-pos-bottom-left .tda-toggle, #tda-root.tda-style-label.tda-pos-top-left .tda-toggle, #tda-root.tda-style-label.tda-pos-middle-left .tda-toggle { left: 0; right: auto; border-radius: 0 10px 10px 0; } /* Lato destro: incollato a destra, angoli arrotondati verso sinistra */ #tda-root.tda-style-label.tda-pos-bottom-right .tda-toggle, #tda-root.tda-style-label.tda-pos-top-right .tda-toggle, #tda-root.tda-style-label.tda-pos-middle-right .tda-toggle { right: 0; left: auto; border-radius: 10px 0 0 10px; } /* Pannello: si apre DI FIANCO al tab verticale, allineato in basso */ #tda-root.tda-style-label .tda-panel { top: auto; bottom: var(--tda-offset-y); transform: none; } #tda-root.tda-style-label.tda-pos-bottom-left .tda-panel, #tda-root.tda-style-label.tda-pos-top-left .tda-panel, #tda-root.tda-style-label.tda-pos-middle-left .tda-panel { left: calc(var(--tda-toggle-extent) + 12px); right: auto; } #tda-root.tda-style-label.tda-pos-bottom-right .tda-panel, #tda-root.tda-style-label.tda-pos-top-right .tda-panel, #tda-root.tda-style-label.tda-pos-middle-right .tda-panel { right: calc(var(--tda-toggle-extent) + 12px); left: auto; } /* ------------------------------------------------------------------------- * 2. PANNELLO * ---------------------------------------------------------------------- */ .tda-panel { position: fixed; z-index: 2147483601; width: 320px; max-width: calc(100vw - 32px); max-height: calc(100vh - 110px); overflow-y: auto; background: #fff; color: #1a1a1a; border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, .3); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.4; padding: 16px; } .tda-pos-bottom-right .tda-panel { right: var(--tda-offset-x); bottom: calc(var(--tda-offset-y) + var(--tda-toggle-extent) + 12px); } .tda-pos-bottom-left .tda-panel { left: var(--tda-offset-x); bottom: calc(var(--tda-offset-y) + var(--tda-toggle-extent) + 12px); } .tda-pos-top-right .tda-panel { right: var(--tda-offset-x); top: calc(var(--tda-offset-y) + var(--tda-toggle-extent) + 12px); } .tda-pos-top-left .tda-panel { left: var(--tda-offset-x); top: calc(var(--tda-offset-y) + var(--tda-toggle-extent) + 12px); } /* Laterali: il pannello si apre di fianco al pulsante, centrato verticalmente */ .tda-pos-middle-right .tda-panel { right: calc(var(--tda-offset-x) + var(--tda-toggle-extent) + 12px); top: 50%; bottom: auto; transform: translateY(-50%); } .tda-pos-middle-left .tda-panel { left: calc(var(--tda-offset-x) + var(--tda-toggle-extent) + 12px); top: 50%; bottom: auto; transform: translateY(-50%); } .tda-panel[hidden] { display: none; } .tda-panel-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; } .tda-panel-head h2 { margin: 0; font-size: 17px; font-weight: 700; color: #1a1a1a; } .tda-close { border: none; background: transparent; cursor: pointer; font-size: 22px; line-height: 1; padding: 4px 8px; border-radius: 8px; color: #444; } .tda-close:hover { background: #eee; } .tda-close:focus-visible { outline: 2px solid var(--tda-accent); outline-offset: 2px; } /* Griglia funzioni */ .tda-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } /* Bottone funzione */ .tda-item { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 2px solid #e2e2e2; background: #f7f7f8; border-radius: 10px; padding: 12px 8px; cursor: pointer; color: #1a1a1a; font-size: 13px; font-weight: 600; text-align: center; transition: border-color .12s ease, background .12s ease; } .tda-item svg { width: 24px; height: 24px; fill: currentColor; } .tda-item:hover { background: #eef0f3; } .tda-item:focus-visible { outline: 2px solid var(--tda-accent); outline-offset: 2px; } .tda-item[aria-pressed="true"] { border-color: var(--tda-accent); background: color-mix(in srgb, var(--tda-accent) 12%, #fff); color: var(--tda-accent); } /* Stepper dimensione testo (occupa l'intera larghezza) */ .tda-stepper { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; border: 2px solid #e2e2e2; border-radius: 10px; background: #f7f7f8; padding: 8px 10px; } .tda-stepper-label { font-size: 13px; font-weight: 600; } .tda-stepper-controls { display: flex; align-items: center; gap: 8px; } .tda-step-btn { width: 34px; height: 34px; border: none; border-radius: 8px; background: var(--tda-accent); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; } .tda-step-btn:disabled { opacity: .4; cursor: not-allowed; } .tda-step-btn:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; } .tda-step-val { min-width: 46px; text-align: center; font-weight: 700; font-size: 13px; } /* Reset */ .tda-reset { grid-column: 1 / -1; margin-top: 4px; border: 2px solid #c33; background: #fff; color: #c33; border-radius: 10px; padding: 10px; font-weight: 700; cursor: pointer; font-size: 13px; } .tda-reset:hover { background: #c33; color: #fff; } .tda-reset:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; } /* Disclaimer in fondo al pannello */ .tda-note { grid-column: 1 / -1; margin: 8px 0 0; font-size: 11px; line-height: 1.35; color: #666; } /* Solo screen reader */ .tda-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ========================================================================= * 3. CLASSI DI TRASFORMAZIONE APPLICATE A * Tutte le regole usano html.tda-a11y-* per massima specificità. * ========================================================================= */ /* ---- Dimensione testo (steps via attributo data) ---- */ /* Selettore curato + body per massima specificità: ingrandisce il testo dei contenuti senza toccare la UI del widget. */ html[data-tda-text]:not([data-tda-text="0"]) body :is( p, li, a, span, td, th, dd, dt, blockquote, h1, h2, h3, h4, h5, h6, label, input, textarea, select, button, figcaption, .entry-content, .uk-text, [class*="uk-"] ):not(#tda-root):not(#tda-root *) { font-size: calc(1em * var(--tda-text-scale, 1)) !important; line-height: 1.5 !important; } html[data-tda-text="1"] { --tda-text-scale: 1.10; } html[data-tda-text="2"] { --tda-text-scale: 1.25; } html[data-tda-text="3"] { --tda-text-scale: 1.40; } html[data-tda-text="4"] { --tda-text-scale: 1.60; } html[data-tda-text="5"] { --tda-text-scale: 1.80; } html[data-tda-text="6"] { --tda-text-scale: 2.00; } /* ---- Alto contrasto (nero/giallo) ---- */ html.tda-a11y-contrast body, html.tda-a11y-contrast body :not(#tda-root):not(#tda-root *) { background-color: #000 !important; color: #ffeb3b !important; border-color: #ffeb3b !important; text-shadow: none !important; box-shadow: none !important; } html.tda-a11y-contrast body :is(a, a *):not(#tda-root *) { color: #4fc3f7 !important; } html.tda-a11y-contrast body :is(img, video, svg):not(#tda-root *) { filter: grayscale(0); } /* ---- Inverti colori ---- */ html.tda-a11y-invert { filter: invert(1) hue-rotate(180deg); background: #fff; } /* Reinverti media per mantenerli naturali */ html.tda-a11y-invert :is(img, video, iframe, picture, [style*="background-image"]) { filter: invert(1) hue-rotate(180deg); } /* Il widget deve restare leggibile: lo riportiamo normale */ html.tda-a11y-invert #tda-root { filter: invert(1) hue-rotate(180deg); } /* ---- Sfondo chiaro forzato ---- */ html.tda-a11y-lightbg body, html.tda-a11y-lightbg body :not(#tda-root):not(#tda-root *) { background-color: #fff !important; color: #1a1a1a !important; } html.tda-a11y-lightbg body :is(a, a *):not(#tda-root *) { color: #0b57d0 !important; } /* ---- Font leggibile (sans-serif ampio) ---- */ html.tda-a11y-readable body :not(#tda-root):not(#tda-root *) { font-family: Verdana, "Segoe UI", Tahoma, Arial, sans-serif !important; letter-spacing: .02em !important; font-weight: 400 !important; } /* ---- Evidenzia link ---- */ html.tda-a11y-links a:not(#tda-root a) { text-decoration: underline !important; text-underline-offset: 3px !important; outline: 2px solid #ffeb3b !important; outline-offset: 1px !important; background-color: rgba(255, 235, 59, .35) !important; color: #00329a !important; } /* ---- Spaziatura testo (WCAG 1.4.12) ---- */ html.tda-a11y-spacing :is(p, li, a, span, h1, h2, h3, h4, h5, h6, td, th, dd, dt, blockquote):not(#tda-root):not(#tda-root *) { line-height: 1.9 !important; letter-spacing: .12em !important; word-spacing: .16em !important; } html.tda-a11y-spacing p:not(#tda-root *) { margin-bottom: 1.6em !important; } /* ---- Cursore grande ---- */ html.tda-a11y-bigcursor, html.tda-a11y-bigcursor * { cursor: url('data:image/svg+xml;utf8,') 4 2, auto !important; } /* ---- Guida di lettura (barra orizzontale) ---- */ .tda-reading-guide { position: fixed; left: 0; width: 100%; height: 38px; background: rgba(255, 235, 59, .28); border-top: 2px solid rgba(0, 0, 0, .55); border-bottom: 2px solid rgba(0, 0, 0, .55); pointer-events: none; z-index: 2147483500; transform: translateY(-50%); } /* ---- Stop animazioni ---- */ html.tda-a11y-stopanim *, html.tda-a11y-stopanim *::before, html.tda-a11y-stopanim *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* Rispetta chi ha già richiesto meno movimento a livello di sistema */ @media (prefers-reduced-motion: reduce) { .tda-toggle { transition: none; } } /* ------------------------------------------------------------------------- * 4. RESPONSIVE * ---------------------------------------------------------------------- */ @media (max-width: 480px) { .tda-panel { width: calc(100vw - 24px); } .tda-pos-bottom-right .tda-panel, .tda-pos-bottom-left .tda-panel, .tda-pos-middle-right .tda-panel, .tda-pos-middle-left .tda-panel, .tda-pos-top-right .tda-panel, .tda-pos-top-left .tda-panel { left: 12px; right: 12px; } /* Sui telefoni i laterali centrati restano comunque leggibili */ .tda-pos-middle-right .tda-panel, .tda-pos-middle-left .tda-panel { transform: none; top: auto; bottom: calc(20px + var(--tda-btn-size) + 12px); } }