/* ============================================================================= scatole.com — LA PASTIGLIA DEL CAMPIONE Il richiamo in cima a ogni pagina, da riga di testo a comando. ----------------------------------------------------------------------------- AMBITO: SOLO il collegamento `a[href*="sample"]` dentro la striscia in testa e i tre pezzi di testo che ha dentro. Non tocca il selettore di lingua, non tocca il recapito, non tocca il pulsante FAQ, non tocca il menu sotto. Il resto della striscia resta esattamente com'e' l'ha lasciata il foglio 13. ----------------------------------------------------------------------------- COM'ERA — misurato oggi, 1440x900, home, Chromium via CDP · il collegamento misurava 270 x 13 px. Tredici pixel di altezza. E' il primo comando che un cliente incontra entrando nel sito ed era alto quanto una riga di testo: per prenderlo col mouse bisogna mirare, e mirare e' esattamente quello che nessuno fa sulla riga in cima. Su telefono 000943 lo aveva gia' portato a 44 px di area sensibile — ma di area INVISIBILE: il disegno restava una riga. · la forma era: pallino petrolio da 5 px, testo maiuscoletto monospaziato da 13 px in --sc-ink-2, freccia "→" a `opacity: 0` che compare solo al passaggio del mouse. Cioe': a riposo non c'era un solo segnale che quella riga fosse cliccabile. Niente contorno, niente fondo, niente freccia, nessun cambio di colore. Il colore del testo (--sc-ink-2) e' lo stesso del recapito accanto, che pero' e' un `mailto`. · il prezzo stava DENTRO la frase, come coda: "… SAMPLE PACK — €9.90". Da stamattina il campionario costa 9,90 € (prima era gratuito), quindi il prezzo non e' piu' un dettaglio: e' meta' del messaggio. Annegato in un trattino em, alla stessa dimensione e allo stesso colore delle altre ventidue lettere, non lo legge nessuno. ----------------------------------------------------------------------------- COSA CAMBIA, E PERCHE' PROPRIO QUESTO 1. UNA PASTIGLIA, NON UNA RIGA. Il collegamento diventa un contorno con un raggio pieno, alto 26 px come il pulsante FAQ all'altro capo della striscia. Non e' una misura scelta a occhio: e' la `min-height` che il foglio 13 § 7 ha gia' dato al FAQ. Cosi' i due estremi della riga hanno la stessa statura e la striscia si legge come una riga sola con due comandi, invece che come un titolo perso a sinistra e un pulsante a destra. Il bordo e' --sc-mar-fondo (#D6EAEC) e non --sc-linea-2 (#DDE1E6) come il FAQ: e' l'unica differenza fra i due, e dice quale dei due porta un'offerta. Un grado di calore, non un grado di volume. 2. IL FONDO RESTA BIANCO. La regola di casa — scritta nel foglio 13 § 7, e prima ancora nei gettoni (`--sc-mar-pieno-ok-da`) — e' che il PIENO petrolio e' riservato allo STATO ATTIVO: la scheda su cui sei, la vista scelta, la quantita' selezionata. Il FAQ ha perso il suo fondo pieno per questo motivo. Rimetterne uno qui, dieci centimetri piu' a sinistra, sarebbe stato disfare quella decisione il giorno dopo averla presa. Il pieno arriva solo al passaggio del mouse, dove significa "stai puntando questo", che e' uno stato. 3. IL PREZZO ESCE DALLA FRASE. Diventa una pastiglina sua, fondo --sc-mar-velo, testo --sc-mar-vivo a peso 700. Non e' un fondo pieno (vedi il punto 2): e' un velo, lo stesso che il sito usa per le selezioni. Contrasto misurato: #226E78 su #E9F3F4 = 5,21:1 a riposo, #226E78 su #D6EAEC = 4,72:1 col mouse sopra. Tutti e due sopra 4,5. Per farlo uscire dalla frase serviva spezzare il testo in tre pezzi, e quello si fa nel database (intestazione Elementor 2364), non qui. 4. LA FRECCIA SI VEDE ANCHE DA FERMA. Prima stava a `opacity: 0`: un affordance che compare solo dopo che hai gia' capito da solo che si puo' cliccare non serve a niente. Adesso sta a .4 e va a 1 scivolando di 3 px quando la punti. E' l'unico movimento in ciclo... anzi: non e' nemmeno in ciclo. Vedi la nota sull'animazione qui sotto. 5. IL DETTAGLIO CHE DICE PERCHE' VALE. "12 papers + a real magnetic box": compare solo dai 1400 px in su, dove c'e' posto davvero (vedi § 4, con il conto). Serve perche' 9,90 € senza contesto sembrano un pedaggio, mentre coprono poco piu' della spedizione di una scatola magnetica vera e di dodici cartoncini. Sotto i 1400 px sparisce e restano richiamo e prezzo: meglio una riga sola vera che due righe complete. ----------------------------------------------------------------------------- L'ANIMAZIONE — quello che c'e' e quello che NON c'e' NON c'e' nessun ciclo infinito. Non un pallino che pulsa, non un bagliore che passa, non un respiro. Una cosa che si muove da sola in cima a OGNI pagina la vedi trecento volte in una sessione: alla terza e' un tic, e un tic in cima alla pagina lo si impara a ignorare — cioe' ottiene l'esatto contrario di quello per cui era stato messo. Il foglio 04 aveva gia' preparato dei `@keyframes sc-pulsa` per il pallino e qualcuno ha avuto ragione a non applicarli mai: non li applico nemmeno io. Ci sono due movimenti, tutti e due BREVI e tutti e due LEGATI A UN FATTO: · L'ENTRATA. Una volta sola, al caricamento: 420 ms, la pastiglia sale di 6 px e prende opacita'. Muove solo `opacity` e `transform`, che sono le due proprieta' che la scheda grafica compone da sola: nessuna ridipintura, nessun ricalcolo di impaginato, quindi CLS zero (la pastiglia occupa il suo posto fin dal primo fotogramma, sta solo arrivandoci). · LA RISPOSTA AL MOUSE. 280 ms, il tempo di casa (--sc-medio): fondo, bordo e freccia. Succede solo se lo punti. PERCHE' LO STATO INIZIALE INVISIBILE STA DENTRO I @keyframes E NON SULL'ELEMENTO. Con `animation-fill-mode: backwards` il fotogramma di partenza vale anche durante il ritardo, quindi l'effetto e' identico — ma se un domani l'animazione non parte (foglio caricato a meta', `animation` spenta da un'estensione, prefers-reduced-motion), l'elemento resta al suo stato naturale, che e' VISIBILE. Scrivere `opacity: 0` sull'elemento e riportarlo a 1 con i keyframes avrebbe voluto dire che qualunque inciampo nasconde il primo richiamo del sito. Non e' un rischio che vale 420 millisecondi. PREFERS-REDUCED-MOTION. Chi lo ha chiesto non vede ne' l'entrata ne' lo scivolo della freccia: restano i cambi di colore, che sono informazione e non movimento. Per chi ha un disturbo vestibolare una cosa che si muove non e' un vezzo, e' un sintomo — e la riga in cima non si puo' evitare guardando altrove, perche' e' la prima cosa sopra il logo. ----------------------------------------------------------------------------- COME SI VINCE LA CASCATA — senza un solo `!important` Le regole da scavalcare, tutte gia' documentate nel foglio 13: 04 § C / 11 § 1 / 13 § 3 la catena `#header .e-con.e-parent:has(.gtranslate_wrapper) :where(a,p,span,div):not(.glink):not(.glink *) :not(.elementor-button):not(.elementor-button *)` = 1-7-0 13 § 4 `… a[href*="sample"]` = 1-4-1 La prima colpisce anche i tre `` nuovi (sono `span` dentro la striscia), e con 1-7-0 batte qualunque regola scritta corta. Quindi dove devo vestire uno span RICOPIO la catena dei quattro `:not()` parola per parola e ci aggiungo la mia classe: 1-8-0 o piu', e vinco per specificita' invece che per fortuna. Dove invece basta la seconda (il collegamento in se') uso lo stesso selettore del foglio 13 e vinco per posizione, perche' questo foglio arriva dopo (10700 contro 10600). NON provo a scavalcare 000943-scatole-mobile.php, che esce a priorita' 100000 e quindi dopo di me: gli lascio il suo `--sc-barra-h: 44px` e il suo `min-height: 44px` sul collegamento — sono la sua correzione di accessibilita' del telefono e sono giuste. Mi limito a dare alla fascia il respiro che quel 44 px chiede (vedi § 6). ----------------------------------------------------------------------------- COME SI SPEGNE ?pastiglia=0 una visita sola, torna la riga di prima ?topbar=0 spegne tutta la striscia (foglio 13), e con lei questa ?officina=0 spegne tutto Il testo nel database resta spezzato in tre ``: spenti gli stili, fra i pezzi c'e' uno spazio vero, quindi si legge "ORDER YOUR SAMPLE PACK €9.90" — brutto, ma intero e cliccabile. ========================================================================== */ /* ============================================================================= 1 · LA PASTIGLIA ----------------------------------------------------------------------------- `min-height` e non `height`: se una traduzione allunga la frase, la pastiglia cresce invece di tagliare. `padding-inline` asimmetrico perche' a destra c'e' gia' la freccia a fare da margine ottico. ========================================================================== */ #header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="sample"] { min-height: 26px; /* = il FAQ, foglio 13 § 7 */ padding-inline: var(--sc-s3) var(--sc-s2); /* 14 a sinistra, 8 a destra */ gap: var(--sc-s2); border: 1px solid var(--sc-mar-fondo); border-radius: 999px; background: var(--sc-fondo); color: var(--sc-ink-2); text-decoration: none; /* Il colore e il fondo cambiano al passaggio del mouse: 280 ms, il tempo di casa. `border-color` e non `border`, se no la transizione anima anche lo spessore e la riga tremola di un pixel. */ transition: background-color var(--sc-medio) var(--sc-curva), border-color var(--sc-medio) var(--sc-curva), color var(--sc-veloce) var(--sc-curva); /* L'entrata, una volta sola. Vedi la nota lunga in testa al foglio: lo stato invisibile sta nei keyframes, non qui. */ animation: sctb-entra 420ms var(--sc-curva) 120ms backwards; } @keyframes sctb-entra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } #header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="sample"]:hover { background: var(--sc-mar-velo); border-color: var(--sc-mar); color: var(--sc-mar-testo); } /* Il clic: la pastiglia si siede di un pixel. E' un fotogramma, non un'animazione — e comunque sotto prefers-reduced-motion sparisce anche questo. */ #header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="sample"]:active { transform: translateY(1px); } /* La messa a fuoco da tastiera. Il foglio 13 § 8 la disegna gia' per tutti i collegamenti della striscia, ma li' il raggio e' --sc-s1 (4px): su una pastiglia tonda un contorno squadrato stona. Stesso disegno, raggio giusto. */ #header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="sample"]:focus-visible { border-radius: 999px; } /* ============================================================================= 2 · IL PALLINO — resta, ma cambia mestiere ----------------------------------------------------------------------------- Prima era l'unico segno che quella riga fosse qualcosa: adesso il contorno fa quel lavoro, e il pallino torna a essere quello che dovrebbe, cioe' un punto fermo che apre la frase. Scende da 5 a 4 px perche' dentro una pastiglia alta 26 un pallino da 5 pesa; e resta FERMO, per la ragione spiegata in testa al foglio. ========================================================================== */ #header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="sample"]::before { width: 4px; height: 4px; background: var(--sc-mar); animation: none; /* per sempre: vedi la nota */ } /* ============================================================================= 3 · LA FRECCIA — visibile da ferma, viva al passaggio ----------------------------------------------------------------------------- Il contenuto ("→") e la transizione sono di 04 § C1 e restano suoi: qui cambiano solo opacita' di partenza, colore e distanza dello scivolo. `translateX(0)` a riposo invece di `-5px`: la freccia non deve ARRIVARE, c'e' gia'; deve solo farsi avanti. Cosi' la larghezza della pastiglia non cambia di un pixel fra i due stati, e non c'e' nessuno spostamento da compensare. ========================================================================== */ #header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="sample"]::after { color: var(--sc-mar-vivo); opacity: .4; transform: none; font-size: var(--sc11-et); line-height: 1; } #header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="sample"]:hover::after { opacity: 1; transform: translateX(3px); } /* ============================================================================= 4 · I TRE PEZZI DI TESTO ----------------------------------------------------------------------------- Vengono dal titolo del widget nell'intestazione Elementor 2364, spezzato in tre ``. Qui serve la catena dei quattro `:not()` (vedi la nota sulla cascata): senza, la regola 1-7-0 di 04/11/13 li ricolora tutti e tre uguali e non si vede nessuna differenza fra richiamo, dettaglio e prezzo. IL CONTO DELLA SOGLIA A 1400 px, misurato e non stimato. A 1440 px il gruppo di destra (lingue + recapito + FAQ) parte da x = 844: al richiamo restano 844 - 50 = 794 px. Il carattere monospaziato di casa a 13 px con --sc11-ls occupa circa 9,4 px per lettera: "ORDER YOUR SAMPLE PACK" 22 lettere ≈ 207 px "12 PAPERS + A REAL MAGNETIC BOX" 31 lettere a 12,5 px ≈ 280 px "€9.90" dentro la sua pastiglina ≈ 62 px pallino, freccia, quattro spazi, contorni, divisore ≈ 75 px totale ≈ 624 px Sotto i 1400 px il gruppo di destra resta largo uguale (le sue voci non si accorciano) mentre il viewport cala: a 1280 px restano 556 px e i 624 non ci stanno, quindi la striscia andrebbe a capo. Il foglio 13 ha gia' la valvola (`flex-wrap`), quindi non si romperebbe niente — ma due righe in cima sono esattamente il difetto che si sta correggendo. Meglio togliere il dettaglio, che e' la parte che si puo' leggere altrove. ========================================================================== */ /* Il richiamo. Resta il registro della striscia (mono, maiuscoletto, 13 px): cambia solo il peso, 500 -> 600, perche' adesso e' dentro un contorno e a 500 galleggiava. */ #header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="sample"] .sctb-et:not(.glink):not(.glink *):not(.elementor-button):not(.elementor-button *) { font-weight: 600; color: inherit; /* segue la pastiglia al passaggio */ } /* Il dettaglio. Nascosto per difetto: si accende solo dove c'e' posto. `display: none` e non `visibility`, perche' deve smettere di occupare larghezza, non solo di vedersi. */ #header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="sample"] .sctb-det:not(.glink):not(.glink *):not(.elementor-button):not(.elementor-button *) { display: none; } @media (min-width: 1400px) { #header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="sample"] .sctb-det:not(.glink):not(.glink *):not(.elementor-button):not(.elementor-button *) { display: inline; font-size: var(--sc11-mini); /* 12,5: il pavimento di casa */ font-weight: 500; color: var(--sc-ink-3); /* su bianco 6,0:1 */ border-inline-start: 1px solid var(--sc-linea-2); padding-inline-start: var(--sc-s3); margin-inline-start: var(--sc-s1); } } /* NELLE LINGUE TRADOTTE IL DETTAGLIO NON ESCE MAI. MISURATO, NON PRUDENZA. Con la sola soglia a 1400 px, a 1440 px in italiano il richiamo passava da 583 a 750 px e la striscia andava a capo: la fascia da 37 px diventava 61. Cioe' la soglia funzionava in inglese e falliva nelle altre tre lingue, che sono meta' del traffico. Il motivo e' che il gruppo di destra si allunga insieme al richiamo (anche "FAQ - HELP CENTRE" si traduce), quindi lo spazio non cresce mai quanto basta: non esiste una soglia in pixel che vada bene per tutte e quattro le lingue, perche' il problema non e' la larghezza dello schermo. `html.translated-ltr` la scrive Google Translate sul documento appena traduce (verificato dal vivo con il cookie `googtrans=/en/it`: la classe c'e' e l'attributo `lang` passa a "it"). Uso la classe e non `lang`, perche' `lang` in partenza vale "en-US" su questo sito e una regola su `[lang]` dovrebbe indovinare tutte le varianti. Specificita' 1-10-2 contro 1-9-1 della regola qui sopra: vince a prescindere dall'ordine, e la @media resta leggibile per quello che dice. */ html.translated-ltr #header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="sample"] .sctb-det:not(.glink):not(.glink *):not(.elementor-button):not(.elementor-button *), html.translated-rtl #header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="sample"] .sctb-det:not(.glink):not(.glink *):not(.elementor-button):not(.elementor-button *) { display: none; } /* Il prezzo. Una pastiglina nel velo petrolio: non e' un fondo pieno (quello e' riservato agli stati attivi), e' lo stesso velo delle selezioni. `font-variant-numeric: tabular-nums` perche' un giorno il prezzo cambiera' e le cifre devono restare in colonna. */ #header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="sample"] .sctb-prezzo:not(.glink):not(.glink *):not(.elementor-button):not(.elementor-button *) { display: inline-flex; align-items: center; min-height: 18px; padding-inline: var(--sc-s2); border-radius: 999px; background: var(--sc-mar-velo); color: var(--sc-mar-vivo); /* 5,21:1 sul velo */ font-size: var(--sc11-mini); font-weight: 700; letter-spacing: 0; /* un prezzo non e' un'etichetta */ font-variant-numeric: tabular-nums; transition: background-color var(--sc-medio) var(--sc-curva); } #header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="sample"]:hover .sctb-prezzo:not(.glink):not(.glink *):not(.elementor-button):not(.elementor-button *) { background: var(--sc-mar-fondo); /* 4,72:1: resta sopra 4,5 */ } /* ============================================================================= 5 · IL RIENTRO — la pastiglia si allinea al logo, non il suo testo ----------------------------------------------------------------------------- Il foglio 13 § 1 ha portato la striscia a rientrare di 50 px perche' il logo sotto parte da x = 50. Adesso a x = 50 non c'e' piu' l'inizio del testo ma il BORDO della pastiglia, e il testo comincia 15 px dopo. Non lo compenso, ed e' una scelta: il pulsante FAQ all'altro capo della striscia si allinea al margine col suo bordo, non col suo testo, e quando in una riga ci sono due riquadri l'occhio allinea i riquadri. Tirare indietro la pastiglia di 15 px per far combaciare le lettere avrebbe fatto sporgere il contorno fuori dalla gabbia di tutto il sito — cioe' avrebbe rotto la cosa che il foglio 13 era andato a sistemare. Questo blocco non contiene regole: e' il posto dove sta scritto perche' non ce ne sono. Toglierlo e' sicuro; rileggerlo, prima di "correggere" i 15 px, fa risparmiare mezz'ora. ========================================================================== */ /* ============================================================================= 6 · TELEFONO — provato a 375 px ----------------------------------------------------------------------------- Sotto i 768 px Elementor nasconde da solo lingue, recapito e FAQ: nella striscia resta il solo richiamo, ed e' l'unica cosa cliccabile sopra il logo. 000943 gli da' 44 px di altezza sensibile (`--sc-barra-h: 44px` e `min-height: 44px` sul collegamento) e quel foglio esce DOPO questo, quindi quei 44 px valgono e vanno bene: sono la soglia del dito. Il problema che nasce e' un altro: una pastiglia alta 44 px dentro una fascia alta 44 px tocca il bordo di sopra e quello di sotto. Non tolgo i 44 px al collegamento — sarebbe disfare una correzione di accessibilita' — ma do' 3 px di imbottitura alla fascia, che cosi' arriva a 50 px. Misurato: 45 px prima, 50 px adesso, +5 px, una riga sola. `min-height` non e' `height`, quindi basta che il contenuto sia piu' alto e la fascia lo segue. (`.e-con-inner` non e' toccato da 000943 su questo asse, quindi qui non c'e' nessuna gara di specificita': aggiungo, non scavalco.) Il corpo scende a 12,5 px — il pavimento di casa, non sotto — perche' a 375 px il testo e la sua pastiglia devono stare dentro 335 px di gabbia. ========================================================================== */ @media (max-width: 767px) { #header .e-con.e-parent:has(.gtranslate_wrapper) .e-con-inner { padding-block: 3px; } #header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="sample"] { padding-inline: var(--sc-s3) var(--sc-s3); gap: 7px; border-radius: 999px; } #header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="sample"] .sctb-et:not(.glink):not(.glink *):not(.elementor-button):not(.elementor-button *) { font-size: var(--sc11-mini); } /* Il pallino a 375 px non aggiunge niente che il contorno non dica gia', e ruba 11 px (4 + il suo spazio) al testo. Via. */ #header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="sample"]::before { display: none; } /* --- IL RICHIAMO NON ESCE PIU' DALLO SCHERMO -------------------------- Difetto trovato oggi, e c'era gia' prima di questo foglio: a 375 px in italiano il richiamo cominciava a x = -334, cioe' le prime trentasei lettere stavano fuori dallo schermo a sinistra. Non si vedeva una barra di scorrimento (`scrollWidth` restava 375) e quindi non se n'era accorto nessuno: il testo era semplicemente tagliato via. PERCHE' SUCCEDEVA. Il foglio 13 da' a ogni blocco della striscia `min-width: max-content` — una valvola giusta e documentata: serve a impedire che i blocchi si stringano fino a sovrapporsi fra loro. Ma sotto i 768 px nella striscia c'e' un blocco SOLO (Elementor nasconde lingue, recapito e FAQ), quindi non c'e' piu' niente con cui sovrapporsi e la valvola resta a fare solo il danno: il blocco pretende la larghezza del suo contenuto anche quando lo schermo non ce l'ha. E siccome `.e-con-inner` allinea a destra (`justify-content: flex-end`), quello che avanza esce a SINISTRA — cioe' proprio dall'inizio della frase. LA CORREZIONE. Solo sul telefono e solo su questo blocco: gli si ridà il permesso di stringersi, e al richiamo si mette i puntini di sospensione. Il prezzo e la freccia non si stringono mai (`flex: 0 0 auto`): se qualcosa deve sparire, che sparisca la coda della frase e non la cifra. Misurato dopo: italiano 375 px, x = 20 come l'inglese, niente tagliato a sinistra. */ #header .e-con.e-parent:has(.gtranslate_wrapper) .e-con-inner > .e-child:has(a[href*="sample"]) { min-width: 0; } #header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="sample"] { max-width: 100%; } #header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="sample"] .sctb-et:not(.glink):not(.glink *):not(.elementor-button):not(.elementor-button *) { min-width: 0; overflow: hidden; text-overflow: ellipsis; /* `white-space: nowrap` arriva dal foglio 13 § 2 (sta sull'h3 e si eredita): senza quello i puntini non comparirebbero mai, andrebbe semplicemente a capo. */ } #header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="sample"] .sctb-prezzo:not(.glink):not(.glink *):not(.elementor-button):not(.elementor-button *) { flex: 0 0 auto; } } /* ============================================================================= 7 · CHI HA CHIESTO MENO MOVIMENTO ----------------------------------------------------------------------------- Restano i colori, che sono informazione. Sparisce tutto quello che si sposta: l'entrata, lo scivolo della freccia, l'affossamento al clic. `animation: none` riporta la pastiglia al suo stato naturale, che e' visibile — vedi la nota in testa al foglio: e' per questo che lo stato invisibile sta nei keyframes e non sull'elemento. ========================================================================== */ @media (prefers-reduced-motion: reduce) { #header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="sample"] { animation: none; transition: background-color var(--sc-veloce) linear, border-color var(--sc-veloce) linear, color var(--sc-veloce) linear; } #header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="sample"]:active { transform: none; } #header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="sample"]::after { transition: opacity var(--sc-veloce) linear; transform: none; } #header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="sample"]:hover::after { transform: none; /* si accende, non scivola */ } }