/* ============================================================================= SCATOLE — LE DUE ICONE DELL'INTESTAZIONE (account e carrello) Foglio di 000945-scatole-due-icone.php. Vedi quel file per il perche' di tutto: qui ci sono solo le regole e le ragioni delle misure. NIENTE `!important` IN TUTTO IL FILE. Questo foglio vince perche' arriva dopo 01-base, 05-globali e 11-tipografia (priorita' 10700 + dipendenze dichiarate) e perche' dove serve porta un selettore piu' specifico. I due punti in cui la specificita' e' stata calcolata a mano sono segnati. Ogni gettone ha il suo valore di riserva accanto: con `?officina=0` i gettoni non esistono e le due icone devono restare giuste lo stesso. ========================================================================== */ /* ============================================================================= 1 · IL DISEGNO — che non venga riempito ----------------------------------------------------------------------------- 01-base § 6d strappa il `fill="#23292f"` che i due SVG vecchi avevano cablato dentro, e lo fa cosi': #header .elementor-icon svg path { fill: currentColor } #header .elementor-menu-cart__toggle_button svg path{ fill: currentColor } #header .elementor-menu-cart__close-button-custom svg path { ... } Su un disegno pieno e' la riga giusta. Sui miei contorni riempirebbe la testa, le spalle e il secchiello: tornerebbero le due macchie di prima, ma deformi. Va quindi rimessa a `none`, e va vinta di specificita', non di ordine: quelle tre regole pesano 0-1-1-2 (= 112) e un `#header .sc-due__icona path` ne peserebbe 111, cioe' UNO IN MENO. `#header .elementor-widget-container svg.sc-due__icona path` pesa 0-1-2-2 (= 122): vince senza dipendere da chi carica per ultimo. ========================================================================== */ svg.sc-due__icona, svg.sc-due__icona path, svg.sc-due__icona circle, #header .elementor-widget-container svg.sc-due__icona path, #header .elementor-widget-container svg.sc-due__icona circle { fill: none; } /* ============================================================================= 2 · LA MISURA — 24 px tutte e due, dappertutto ----------------------------------------------------------------------------- Prima: l'account 35 px su desktop (Elementor gli mette `font-size: 35px` sull'ancora e l'SVG vale 1em) e 20 px sul telefono; il carrello 24 px in tutti e due i casi, per via di una riga di 01-base. Tre misure per due icone, e sulla stessa riga l'account arrivava 3,5 px piu' in alto. Adesso 24 px e basta. Le due regole con `#header` pesano 0-1-2-1 (= 121) e scavalcano sia il `font-size` di Elementor (che agisce tramite `1em`) sia il `width: 24px` di 01-base (0-1-1-1 = 111). Il bersaglio da dito NON cambia: i 44x44 stanno sull'ancora e sul pulsante, e li mette 01-base § 6d. Qui si tocca solo il disegno dentro. ========================================================================== */ svg.sc-due__icona { display: block; width: 24px; height: 24px; overflow: visible; /* la testa che si alza non deve venire tagliata */ } #header .elementor-icon svg.sc-due__icona, #header .elementor-menu-cart__toggle_button svg.sc-due__icona, #header .elementor-menu-cart__close-button-custom svg.sc-due__icona { width: 24px; height: 24px; } /* L'ACCOUNT VA CENTRATO NEL SUO BERSAGLIO, e questa riga nasce da una misura sbagliata trovata solo dopo il primo scatto. L'ancora dell'account e' un `inline-block` da 44x44 (01-base § 6d) con dentro un SVG `display: block`: senza altro, il disegno si incolla in ALTO A SINISTRA. Finche' l'SVG era alto 35 px su 44 non si notava; sceso a 24 il disco dell'account e' finito 11 px piu' in alto del secchiello — sulla stessa riga, uno accanto all'altro. Il pulsante del carrello non ha il problema perche' Elementor lo fa `inline-flex` con `align-items: center`. Qui si fa la stessa cosa, e le due icone tornano sulla stessa mezzeria. 0-1-2-0 (= 120) contro l'`inline-block` di Elementor (0-1-0 = 10). */ #header .elementor-icon-box-icon .elementor-icon { display: inline-flex; align-items: center; justify-content: center; } /* ============================================================================= 3 · IL COLORE — uno solo, e preso dal testo ----------------------------------------------------------------------------- Prima erano di DUE colori diversi, e nessuno dei due era quello del menu: account #3F4750 (--sc-ink-2, da 01-base) carrello #69727D (il valore di riserva di `--toggle-button-icon-color` di Elementor Pro, che vinceva su 01-base perche' sta sullo interno) menu #226E78 (--sc-mar-testo) Il `color` del pulsante 01-base lo gestisce gia' bene — inchiostro a riposo, verde di casa al passaggio. Bastava che lo dell'icona smettesse di metterci il suo: da qui in poi eredita, e l'SVG e' `stroke="currentColor"`. Cosi' le due icone seguono il testo al passaggio, sul fuoco e su qualunque fondo, senza una riga di colore cablata da nessuna parte. 0-2-0 (Elementor, a riposo) e 0-3-0 (Elementor, al passaggio) contro 0-1-2-0 (= 120) di questa: vince tutte e due, e proprio perche' vince anche quella del passaggio il colore del passaggio torna a deciderlo 01-base. ========================================================================== */ #header .elementor-menu-cart__toggle .elementor-button-icon { color: inherit; } /* ============================================================================= 4 · LA PASTIGLIA DEL CONTEGGIO ----------------------------------------------------------------------------- Era 17x20 px di pieno saturo col numero in 12,5 px grassetto: il pieno piu' forte della zona, addosso a un'icona che adesso e' un filo da 1,27 px. ⚠️ IL NUMERO NON SI RIMPICCIOLISCE, e la prima versione di questa regola sbagliava proprio qui. 11-tipografia § 1 porta apposta quel numero da 10 a 12,5 px, e scrive perche': «e' l'unica cosa che dice quanti pezzi ci sono dentro, e si leggeva peggio di qualunque altra cosa in pagina». Calmare la pastiglia togliendole leggibilita' vorrebbe dire disfare quel lavoro per ottenere un'intestazione piu' composta: uno scambio che non si fa. La pastiglia si calma quindi con la MISURA e con lo STATO, non con il corpo del numero. Tonda da 16 px invece di 17x20 — 256 px quadri contro 340, un quarto di inchiostro in meno — con il numero a 11 px grassetto, che resta sopra i 10 px da cui 11-tipografia voleva scappare. L'anello bianco di 2 px la stacca dal manico del secchiello: e' quello che permette di rimpicciolirla senza che si impasti col disegno sotto. E soprattutto: quando il carrello e' vuoto la pastiglia si spegne (regola qui sotto). E' li' che stava il grosso del rumore — un pieno saturo per dire «zero». `top` e `inset-inline-end` erano in `em` (Elementor: -0.7em) e quindi cambiavano con il corpo del numero, che 11-tipografia intanto portava a 12,5 px: la pastiglia scivolava. Qui sono in px, cosi' stanno ferme. SPECIFICITA' — questa regola pesa 0-1-3-0 (= 130) e scavalca le tre che oggi la dipingono: 01-base 0-1-2-0 (120), 11-tipografia 0-1-2-0 (120), Elementor Pro 0-5-0 (50). ⚠️ QUI NON SI TOCCA IL CONTEGGIO. `data-counter` e il testo dentro la pastiglia li scrive WooCommerce a ogni aggiornamento del carrello: questo foglio guarda quell'attributo, non lo scrive. ========================================================================== */ #header .elementor-menu-cart__toggle_button .elementor-button-icon-qty[data-counter] { min-width: 16px; width: auto; /* a due cifre la pastiglia si allunga, non taglia */ height: 16px; line-height: 16px; padding: 0 3px; top: -5px; inset-inline-end: -6px; font-family: var(--sc-mono, ui-monospace, "SF Mono", Menlo, monospace); font-size: 11px; font-weight: 700; letter-spacing: 0; border-radius: 999px; background-color: var(--sc-mar-vivo, #226E78); color: var(--sc-fondo, #FFFFFF); box-shadow: 0 0 0 2px var(--sc-fondo, #FFFFFF); } /* A ZERO SI SPEGNE, MA RESTA SCRITTA. Lo zero non lo nascondo: e' un dato, e nasconderlo e' una decisione che il titolare non ha chiesto. Gli tolgo pero' il pieno — filo grigio e numero secondario — cosi' la pastiglia grida solo quando ha qualcosa da dire. Misura e posizione restano identiche: passando da 0 a 1 non salta niente, cambia solo il colore. */ #header .elementor-menu-cart__toggle_button .elementor-button-icon-qty[data-counter="0"] { background-color: transparent; color: var(--sc-ink-3, #616A75); box-shadow: 0 0 0 2px var(--sc-fondo, #FFFFFF), inset 0 0 0 1px var(--sc-quota, #C6CCD3); } /* ============================================================================= 5 · IL MOVIMENTO ----------------------------------------------------------------------------- Solo `transform`, come nel menu, e i perni sono in unita' del viewBox: il sistema di riferimento predefinito di un elemento SVG e' gia' quello, quindi niente `transform-box` e niente da far cadere sui motori che non lo conoscono. A 24 px su viewBox 24 un'unita' e' un pixel: i numeri qui sotto si leggono come pixel veri. L'aggancio sta sull'ancora e sul pulsante — non c'e' nessuna voce spenta da aggirare come nel menu — e `:focus-visible` accanto a `:hover`, perche' chi naviga da tastiera deve vedere la stessa cosa. ========================================================================== */ .sc-due__mob { transition: transform var(--sc-medio, 280ms) var(--sc-curva, cubic-bezier(.22, 1, .36, 1)); } /* IL MANICO SI ALZA — il gesto di chi prende in mano il cestino. `scaleY` e non `translateY`: il perno sta sui piedi (y 9,2, la linea del bordo), quindi i piedi non si staccano mai dal secchiello. Con una traslazione il manico volerebbe via dal bordo e l'icona sembrerebbe rotta. */ .sc-due__mob--manico { transform-origin: 12px 9.2px; } #header .elementor-menu-cart__toggle_button:hover .sc-due__mob--manico, #header .elementor-menu-cart__toggle_button:focus-visible .sc-due__mob--manico { transform: scaleY(1.18); } /* LA TESTA SI ALZA — lo stesso «qualcosa si solleva» dei coperchi del menu. 1,1 px e non di piu': su una sagoma di persona un movimento largo diventa una smorfia, e il vuoto sotto la testa e' 3,3 unita' — alzandola di piu' si sfonderebbe il margine che la tiene separata dalle spalle a grandezza reale. */ #header .elementor-icon:hover .sc-due__mob--testa, #header .elementor-icon:focus-visible .sc-due__mob--testa, #header .elementor-icon-box-icon:hover .sc-due__mob--testa { transform: translateY(-1.1px); } /* CHI HA CHIESTO DI NON MUOVERE NIENTE, NON VEDE MUOVERE NIENTE. Non basta spegnere la transizione: si spegne anche la posizione di arrivo, se no il salto c'e' lo stesso — solo istantaneo. */ @media (prefers-reduced-motion: reduce) { .sc-due__mob { transition: none; } #header .elementor-menu-cart__toggle_button:hover .sc-due__mob--manico, #header .elementor-menu-cart__toggle_button:focus-visible .sc-due__mob--manico, #header .elementor-icon:hover .sc-due__mob--testa, #header .elementor-icon:focus-visible .sc-due__mob--testa, #header .elementor-icon-box-icon:hover .sc-due__mob--testa { transform: none; } }