/* ========================================================================== Drawer preventivo · foglio blindato Perché tutto è ancorato a #webell-drawer, e non alle sole classi: Il kit di Elementor non scrive `.elementor-widget-qualcosa button`, come si potrebbe pensare. Scrive `.elementor-kit-42 button`, e quella classe sta sul . Vuol dire che le regole del kit raggiungono qualunque punto del documento, footer compreso, con specificità (0,2,0). Uscire dal DOM di Elementor serve, ma da solo non basta: contro (0,2,0) un reset scritto a (0,1,0) perde, e con lui perdono tutte le regole di componente. L'ID è l'unica ancora che non si può battere senza !important, e nel kit di Elementor !important non c'è. Da qui in poi ogni selettore parte da #webell-drawer: (1,1,0) contro (0,2,0) non è una gara. Tre regole di manutenzione: 1. Il blocco RESET sta in cima e deve restarci. Tutto quello che viene dopo ha specificità superiore, quindi vince. Una regola spostata sopra il reset sparisce. 2. Niente ereditarietà: ogni elemento che stampa testo dichiara la propria famiglia, dimensione e colore. 3. Terracotta solo sulla CTA primaria. Nessun radius, nessuna ombra: sono valori che il sistema non ha. Se un giorno qualcosa filtrasse comunque, la mossa successiva non è aggiungere !important: è lo Shadow DOM. ========================================================================== */ /* -------------------------------------------------------------------------- 1 · RESET DI ANCORAGGIO `all: revert` riporta ogni proprietà al livello del browser, cancellando in un colpo solo quello che hanno dichiarato tema, Elementor e chiunque altro. Il `:where()` tiene a zero la specificità del selettore interno: conta solo l'ID, così ogni regola qui sotto passa avanti senza rincorrere. Gli SVG restano fuori: `all` azzererebbe gli attributi di presentazione delle icone. -------------------------------------------------------------------------- */ #webell-drawer, #webell-drawer :where(*:not(svg, svg *)), #webell-drawer :where(*:not(svg, svg *))::before, #webell-drawer :where(*:not(svg, svg *))::after { all: revert; box-sizing: border-box; } /* Le due proprietà che il sistema non usa mai e che un plugin può reimporre con !important. Sono le uniche eccezioni concesse in questo foglio. */ #webell-drawer :where(*:not(svg, svg *)) { border-radius: 0 !important; box-shadow: none !important; } /* -------------------------------------------------------------------------- 2 · RADICE -------------------------------------------------------------------------- */ #webell-drawer { --wqd-verde: #2D4A3E; --wqd-terra: #B85C38; --wqd-pietra: #F5F2EC; --wqd-hair: rgba(45, 74, 62, .16); --wqd-hair-forte: rgba(45, 74, 62, .28); --wqd-muted: rgba(45, 74, 62, .62); --wqd-faint: rgba(45, 74, 62, .42); --wqd-larghezza: 400px; --wqd-pad: 26px; --wqd-durata: .34s; --wqd-ease: cubic-bezier(.4, 0, .2, 1); position: fixed; inset: 0; z-index: 99990; visibility: hidden; pointer-events: none; transition: visibility 0s linear var(--wqd-durata); font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px; font-weight: 400; line-height: 1.55; color: var(--wqd-verde); text-align: left; letter-spacing: normal; text-transform: none; } #webell-drawer[data-wq-stato="aperto"] { visibility: visible; pointer-events: auto; transition-delay: 0s; } /* La barra di amministrazione è fissa e sta sopra tutto: il pannello le lascia il suo spazio invece di finirci sotto. */ body.admin-bar #webell-drawer { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar #webell-drawer { top: 46px; } } /* -------------------------------------------------------------------------- 3 · VELO Verde traslucido invece del nero: il nero sotto una palette calda vira grigio e spegne la pagina. -------------------------------------------------------------------------- */ #webell-drawer .wqd__velo { position: absolute; inset: 0; background: rgba(45, 74, 62, .40); opacity: 0; transition: opacity var(--wqd-durata) var(--wqd-ease); cursor: pointer; } #webell-drawer[data-wq-stato="aperto"] .wqd__velo { opacity: 1; } /* -------------------------------------------------------------------------- 4 · PANNELLO -------------------------------------------------------------------------- */ #webell-drawer .wqd__pannello { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; width: min(100%, var(--wqd-larghezza)); height: 100%; max-height: 100%; margin: 0; padding: 0; background: var(--wqd-pietra); border: 0; border-left: 1px solid var(--wqd-hair-forte); transform: translateX(100%); transition: transform var(--wqd-durata) var(--wqd-ease); } #webell-drawer[data-wq-stato="aperto"] .wqd__pannello { transform: translateX(0); } /* -------------------------------------------------------------------------- 5 · TESTA -------------------------------------------------------------------------- */ #webell-drawer .wqd__testa { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; margin: 0; padding: 22px var(--wqd-pad) 16px; background: transparent; border-bottom: 1px solid var(--wqd-hair); } #webell-drawer .wqd__titolo { flex: 1 1 auto; margin: 0; padding: 0; font-family: "Cormorant", "Cormorant Garamond", Georgia, serif; font-size: 28px; font-weight: 600; line-height: 1.1; letter-spacing: -.01em; color: var(--wqd-verde); text-transform: none; } #webell-drawer .wqd__conta { flex: 0 0 auto; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: .10em; color: var(--wqd-muted); } #webell-drawer .wqd__chiudi { flex: 0 0 auto; width: 30px; height: 30px; margin: 0; padding: 0; background: transparent; border: 1px solid transparent; color: var(--wqd-verde); opacity: .55; cursor: pointer; transition: opacity .2s var(--wqd-ease), border-color .2s var(--wqd-ease); } #webell-drawer .wqd__chiudi:hover, #webell-drawer .wqd__chiudi:focus-visible { opacity: 1; border-color: var(--wqd-hair-forte); } #webell-drawer .wqd__chiudi svg { display: block; width: 14px; height: 14px; margin: 0 auto; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; } /* -------------------------------------------------------------------------- 6 · CORPO E RIGHE -------------------------------------------------------------------------- */ #webell-drawer .wqd__corpo { flex: 1 1 auto; min-height: 0; margin: 0; padding: 0 var(--wqd-pad); background: transparent; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } #webell-drawer .wqd__vuoto { margin: 0; padding: 34px 0; font-family: inherit; font-size: 14px; line-height: 1.6; color: var(--wqd-muted); } #webell-drawer .wqd__lista { list-style: none; margin: 0; padding: 0; } #webell-drawer .wqd__riga { display: flex; align-items: flex-start; gap: 16px; margin: 0; padding: 18px 0; background: transparent; border: 0; border-bottom: 1px solid var(--wqd-hair); transition: opacity .18s var(--wqd-ease), transform .18s var(--wqd-ease); } #webell-drawer .wqd__riga:last-child { border-bottom: 0; } #webell-drawer .wqd__riga.is-uscita { opacity: 0; transform: translateX(-14px); } #webell-drawer .wqd__img { flex: 0 0 auto; display: block; width: 64px; margin: 0; padding: 0; background: transparent; border: 1px solid var(--wqd-hair); text-decoration: none; } #webell-drawer .wqd__img img { display: block; width: 100%; height: auto; margin: 0; padding: 0; border: 0; mix-blend-mode: multiply; } #webell-drawer .wqd__dati { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; } #webell-drawer .wqd__nome { display: block; font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1.28; color: var(--wqd-verde); text-decoration: none; text-transform: none; letter-spacing: normal; } #webell-drawer .wqd__nome:hover { text-decoration: underline; text-underline-offset: 2px; } #webell-drawer .wqd__meta { display: block; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; font-size: 10px; font-weight: 500; line-height: 1.4; letter-spacing: .09em; text-transform: uppercase; color: var(--wqd-faint); } /* -------------------------------------------------------------------------- 7 · AZIONI DI RIGA Stepper e rimozione sulla stessa linea, in fondo alla colonna dei dati: la riga si legge dall'alto in basso (cosa è, com'è fatto, quanto ne voglio) invece di avere un comando appeso nell'angolo. -------------------------------------------------------------------------- */ #webell-drawer .wqd__azioni { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 0; padding: 0; } #webell-drawer .wqd__qta { display: inline-flex; align-items: stretch; width: auto; margin: 0; padding: 0; background: transparent; border: 1px solid var(--wqd-hair-forte); } #webell-drawer .wqd__qta-btn { flex: 0 0 auto; width: 30px; height: 30px; min-height: 0; margin: 0; padding: 0; background: transparent; border: 0; font-family: inherit; font-size: 14px; font-weight: 400; line-height: 1; color: var(--wqd-verde); text-transform: none; letter-spacing: normal; cursor: pointer; transition: background .18s var(--wqd-ease); } #webell-drawer .wqd__qta-btn:hover:not([disabled]) { background: rgba(45, 74, 62, .07); } /* A quota uno il "meno" e' spento e si vede che lo e'. */ #webell-drawer .wqd__qta-btn[disabled] { color: var(--wqd-faint); cursor: default; opacity: .45; } #webell-drawer .wqd__qta-btn:focus-visible { outline: 1px solid var(--wqd-verde); outline-offset: -1px; } #webell-drawer .wqd__qta-input { flex: 0 0 auto; width: 40px; height: 30px; min-height: 0; max-width: none; margin: 0; padding: 0 2px; background: transparent; border: 0; border-left: 1px solid var(--wqd-hair-forte); border-right: 1px solid var(--wqd-hair-forte); font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; font-size: 12px; font-weight: 500; line-height: 1; color: var(--wqd-verde); text-align: center; -moz-appearance: textfield; appearance: textfield; box-shadow: none; } #webell-drawer .wqd__qta-input::-webkit-outer-spin-button, #webell-drawer .wqd__qta-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #webell-drawer .wqd__qta-input:focus, #webell-drawer .wqd__qta-input:focus-visible { outline: 1px solid var(--wqd-verde); outline-offset: -1px; background: transparent; } #webell-drawer .wqd__rimuovi { flex: 0 0 auto; width: auto; height: 30px; margin: 0; padding: 0; background: transparent; border: 0; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; font-size: 10px; font-weight: 500; line-height: 1; letter-spacing: .09em; text-transform: uppercase; color: var(--wqd-faint); text-decoration: none; cursor: pointer; transition: color .2s var(--wqd-ease); } #webell-drawer .wqd__rimuovi:hover, #webell-drawer .wqd__rimuovi:focus-visible { color: var(--wqd-verde); text-decoration: underline; text-underline-offset: 3px; } #webell-drawer .wqd__rimuovi:focus-visible { outline: 1px solid var(--wqd-verde); outline-offset: 3px; } #webell-drawer .wqd__qta-nota { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--wqd-faint); } /* -------------------------------------------------------------------------- 8 · PIEDE, PROGRESSO, CTA -------------------------------------------------------------------------- */ #webell-drawer .wqd__pie { flex: 0 0 auto; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 18px var(--wqd-pad) calc(20px + env(safe-area-inset-bottom, 0px)); background: transparent; border-top: 1px solid var(--wqd-hair); } #webell-drawer .wqd__prog { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; } #webell-drawer .wqd__prog-barra { position: relative; height: 2px; margin: 0; padding: 0; background: rgba(45, 74, 62, .13); border: 0; } #webell-drawer .wqd__prog-barra i { position: absolute; left: 0; top: 0; height: 2px; background: var(--wqd-verde); transition: width .45s var(--wqd-ease); } /* In mono maiuscolo si leggeva come un'etichetta di sistema, e le etichette di sistema non le legge nessuno. Qui e' una frase, con il peso in evidenza: e' l'unico numero che interessa in questo punto. */ #webell-drawer .wqd__prog-testo { font-family: inherit; font-size: 13.5px; font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 1.45; color: var(--wqd-muted); } #webell-drawer .wqd__prog-testo b { font-weight: 600; color: var(--wqd-verde); white-space: nowrap; } #webell-drawer .wqd__prog.is-completo .wqd__prog-testo, #webell-drawer .wqd__prog.is-completo .wqd__prog-testo b { color: var(--wqd-verde); } #webell-drawer .wqd__cta { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; margin: 0; padding: 0 22px; font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; letter-spacing: .01em; text-align: center; text-decoration: none; text-transform: none; cursor: pointer; transition: background .2s var(--wqd-ease), color .2s var(--wqd-ease); } /* L'unico punto in cui compare la terracotta in tutto il pannello. */ #webell-drawer .wqd__cta--pri, #webell-drawer .wqd__cta--pri:link, #webell-drawer .wqd__cta--pri:visited { background: var(--wqd-terra); border: 1px solid var(--wqd-terra); color: var(--wqd-pietra); } #webell-drawer .wqd__cta--pri:hover, #webell-drawer .wqd__cta--pri:focus-visible { background: transparent; color: var(--wqd-terra); } #webell-drawer .wqd__cta--sec { min-height: 46px; background: transparent; border: 1px solid var(--wqd-hair-forte); color: var(--wqd-verde); font-size: 14px; font-weight: 500; } #webell-drawer .wqd__cta--sec:hover, #webell-drawer .wqd__cta--sec:focus-visible { background: var(--wqd-verde); border-color: var(--wqd-verde); color: var(--wqd-pietra); } #webell-drawer .wqd__cta:focus-visible { outline: 2px solid var(--wqd-verde); outline-offset: 2px; } /* La CTA catalogo occupa lo stesso posto della primaria e ne eredita il peso: a lista vuota e' lei la mossa successiva. Una sola visibile per volta, quindi la terracotta resta unica. */ #webell-drawer .wqd__cta--cat { background: var(--wqd-terra); border: 1px solid var(--wqd-terra); color: var(--wqd-pietra); } #webell-drawer .wqd__cta--cat:hover, #webell-drawer .wqd__cta--cat:focus-visible { background: transparent; color: var(--wqd-terra); } #webell-drawer .wqd__cta--cat { display: none; } #webell-drawer.is-vuoto .wqd__cta--cat { display: flex; } #webell-drawer.is-vuoto .wqd__cta--pri { display: none; } #webell-drawer.is-vuoto .wqd__prog { display: none; } /* -------------------------------------------------------------------------- 9 · ANNULLA RIMOZIONE Il nodo non esiste nel markup: lo crea il JavaScript alla rimozione e lo toglie allo scadere. Una riga nascosta con un attributo è una riga che prima o poi si vede. -------------------------------------------------------------------------- */ #webell-drawer .wqd__annulla-slot:empty { display: none; } #webell-drawer .wqd__annulla { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 11px 13px; background: transparent; border: 1px solid var(--wqd-hair-forte); } #webell-drawer .wqd__annulla-testo { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: inherit; font-size: 13px; line-height: 1.3; color: var(--wqd-muted); } #webell-drawer .wqd__annulla-azione { flex: 0 0 auto; margin: 0; padding: 0; background: transparent; border: 0; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; font-size: 10px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--wqd-verde); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } #webell-drawer .wqd__annulla-azione:focus-visible { outline: 1px solid var(--wqd-verde); outline-offset: 3px; } /* -------------------------------------------------------------------------- 10 · BADGE SUL TRIGGER Vive dentro l'header costruito in Elementor, quindi non può appoggiarsi all'ID del drawer. La classe ripetuta tre volte porta la specificità a (0,3,0): sopra le regole del kit, che si fermano a (0,2,0). Il badge non ha colori propri: usa `currentColor`. Così segue da solo qualunque logica di cambio colore dell'header, senza doverla conoscere. -------------------------------------------------------------------------- */ .wqd-badge.wqd-badge.wqd-badge { all: revert; } .wqd-badge.wqd-badge.wqd-badge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 19px; height: 19px; margin: 0 0 0 10px; padding: 0 5px; background: transparent; border: 1px solid currentColor; border-radius: 0 !important; box-shadow: none !important; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; font-size: 10px; font-weight: 500; line-height: 1; letter-spacing: .04em; color: inherit; text-transform: none; text-decoration: none; vertical-align: middle; box-sizing: border-box; pointer-events: none; } .wqd-badge.wqd-badge.wqd-badge[hidden] { display: none; } /* Variante ad angolo, per trigger che sono solo un'icona. */ .webell-quote-trigger--angolo { position: relative; } .webell-quote-trigger--angolo .wqd-badge.wqd-badge.wqd-badge { position: absolute; top: -7px; right: -9px; margin: 0; background: #2D4A3E; border-color: #2D4A3E; color: #F5F2EC; } .webell-quote-trigger { cursor: pointer; } /* -------------------------------------------------------------------------- 10-bis · SEGNALE SULLA SCHEDA PRODOTTO Vive nel template WooCommerce, quindi non può appoggiarsi all'ID del drawer: stessa tecnica del badge, classe ripetuta per superare il kit. -------------------------------------------------------------------------- */ .wqs.wqs.wqs { all: revert; } .wqs.wqs.wqs { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin: 14px 0 0; padding: 11px 14px; background: transparent; border: 1px solid rgba(45, 74, 62, .28); border-radius: 0 !important; box-shadow: none !important; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: rgba(45, 74, 62, .62); box-sizing: border-box; } .wqs.wqs.wqs[hidden] { display: none; } .wqs.wqs.wqs .wqs__link { margin: 0; padding: 0; background: transparent; border: 0; font: inherit; color: #2D4A3E; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .wqs.wqs.wqs .wqs__link:focus-visible { outline: 1px solid #2D4A3E; outline-offset: 3px; } /* Marcatura dei pulsanti di YITH in catalogo: una riga sotto il pulsante, non un pulsante travestito. */ .wqs-flag.wqs-flag.wqs-flag { all: revert; } .wqs-flag.wqs-flag.wqs-flag { display: block; margin: 8px 0 0; padding: 0; background: transparent; border: 0; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; font-size: 10px; font-weight: 500; line-height: 1.3; letter-spacing: .09em; text-transform: uppercase; color: rgba(45, 74, 62, .62); } .wqs-flag.wqs-flag.wqs-flag[hidden] { display: none; } /* -------------------------------------------------------------------------- 10-ter · BARRA FISSA E TOAST Stessa strategia del drawer: markup in wp_footer, ID come ancora. -------------------------------------------------------------------------- */ #webell-barra, #webell-barra :where(*:not(svg, svg *)) { all: revert; box-sizing: border-box; } #webell-barra :where(*:not(svg, svg *)) { border-radius: 0 !important; box-shadow: none !important; } #webell-barra { --wqb-verde: #2D4A3E; --wqb-terra: #B85C38; --wqb-pietra: #F5F2EC; position: fixed; left: 0; right: 0; bottom: 0; z-index: 99980; background: var(--wqb-verde); border: 0; font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--wqb-pietra); transform: translateY(100%); visibility: hidden; transition: transform .42s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .42s; } #webell-barra[data-wq-stato="aperto"] { transform: translateY(0); visibility: visible; transition-delay: 0s; } #webell-barra__vuoto { display: none; } #webell-barra .wqb__in { display: flex; align-items: center; gap: 28px; width: 100%; max-width: 1280px; margin: 0 auto; padding: 16px 32px calc(16px + env(safe-area-inset-bottom, 0px)); } #webell-barra .wqb__conta { flex: 0 0 auto; margin: 0; padding: 0; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; line-height: 1; color: rgba(245, 242, 236, .68); white-space: nowrap; } #webell-barra .wqb__conta b { font-family: "Cormorant", "Cormorant Garamond", Georgia, serif; font-size: 26px; font-weight: 600; letter-spacing: 0; color: var(--wqb-pietra); margin-right: 6px; vertical-align: -2px; } #webell-barra .wqb__prog { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; max-width: 420px; } #webell-barra .wqb__barra { position: relative; height: 2px; background: rgba(245, 242, 236, .20); } /* Il riempimento non salta al valore nuovo: ci arriva. La striscia chiara che lo attraversa dura quanto la corsa e poi sparisce, cosi' l'occhio segue il movimento invece di trovarsi davanti un fatto compiuto. */ #webell-barra .wqb__barra i { position: absolute; left: 0; top: 0; height: 2px; background: var(--wqb-pietra); transition: width .7s cubic-bezier(.22, .61, .36, 1); } #webell-barra .wqb__prog.is-corsa .wqb__barra i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(245, 242, 236, 0) 0%, rgba(255, 255, 255, .85) 50%, rgba(245, 242, 236, 0) 100%); animation: wqbScorre .7s ease-out 1; } @keyframes wqbScorre { from { transform: translateX(-100%); } to { transform: translateX(100%); } } #webell-barra .wqb__prog.is-completo .wqb__barra i { background: #C6D8CD; } #webell-barra .wqb__testo { margin: 0; padding: 0; font-size: 13px; line-height: 1.35; color: rgba(245, 242, 236, .72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #webell-barra .wqb__testo b { font-weight: 600; color: var(--wqb-pietra); white-space: nowrap; } #webell-barra .wqb__cta { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 50px; margin: 0; margin-left: auto; padding: 0 32px; background: var(--wqb-terra); border: 1px solid var(--wqb-terra); font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--wqb-pietra); text-decoration: none; text-transform: none; cursor: pointer; transition: background .2s ease, color .2s ease; } #webell-barra .wqb__cta:hover, #webell-barra .wqb__cta:focus-visible { background: transparent; color: #E8C9B8; } #webell-barra .wqb__cta:focus-visible { outline: 2px solid var(--wqb-pietra); outline-offset: 2px; } @media (max-width: 860px) { #webell-barra .wqb__in { flex-wrap: wrap; gap: 12px 18px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); } #webell-barra .wqb__prog { order: 3; flex: 1 1 100%; max-width: none; } #webell-barra .wqb__cta { min-height: 46px; padding: 0 22px; font-size: 14px; } } /* ---- toast ---- */ #webell-toast, #webell-toast :where(*:not(svg, svg *)) { all: revert; box-sizing: border-box; } #webell-toast { position: fixed; left: 50%; /* Sta sopra la barra, che cambia altezza fra desktop e mobile: la misura la scrive il JavaScript quando la barra entra o esce. */ bottom: var(--wq-toast-offset, 26px); z-index: 99985; display: flex; flex-direction: column; align-items: center; gap: 8px; width: max-content; max-width: min(92vw, 560px); margin: 0; padding: 0; transform: translateX(-50%); pointer-events: none; } #webell-toast .wq-toast__msg { display: block; margin: 0; padding: 13px 22px; background: #2D4A3E; border: 0; border-radius: 0 !important; box-shadow: none !important; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: .04em; color: #F5F2EC; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; opacity: 0; transform: translateY(22px); transition: opacity .32s cubic-bezier(.22, .61, .36, 1), transform .32s cubic-bezier(.22, .61, .36, 1); } #webell-toast .wq-toast__msg.is-dentro { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { #webell-barra, #webell-barra .wqb__barra i, #webell-toast .wq-toast__msg { transition: none; } #webell-barra .wqb__prog.is-corsa .wqb__barra i::after { animation: none; } } /* -------------------------------------------------------------------------- 11 · BLOCCO SCROLL Fuori dal namespace del drawer: agisce sulla pagina. La compensazione della barra di scorrimento evita lo scatto laterale all'apertura; la misura la calcola il JavaScript. -------------------------------------------------------------------------- */ html.wqd-lock { overflow: hidden; padding-right: var(--wqd-sbw, 0px); } /* -------------------------------------------------------------------------- 12 · SCHERMI STRETTI -------------------------------------------------------------------------- */ @media (max-width: 480px) { #webell-drawer { --wqd-larghezza: 100%; --wqd-pad: 20px; } #webell-drawer .wqd__pannello { border-left: 0; } #webell-drawer .wqd__titolo { font-size: 25px; } } /* -------------------------------------------------------------------------- 13 · MOVIMENTO RIDOTTO -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { #webell-drawer, #webell-drawer .wqd__velo, #webell-drawer .wqd__pannello, #webell-drawer .wqd__riga, #webell-drawer .wqd__prog-barra i, #webell-drawer .wqd__cta, #webell-drawer .wqd__qta-btn, #webell-drawer .wqd__chiudi, #webell-drawer .wqd__rimuovi { transition: none; } }