/* ============================================================================= scatole.com — OFFICINA · 08 · LE SEI SCHEDE DELLA HOME ----------------------------------------------------------------------------- Ambito: SOLO la home, e dentro la home solo la sezione «OUR BEST SELLER» (`.elementor-element-c817df9`). Ogni regola parte da `body.home #main` e passa per quella sigla. Motivo pratico, non pedanteria: il widget «rating» e il widget «button» che tocco qui esistono identici su altre pagine — un precedente lavoro su questo sito ha ridipinto la pagina FAQ perche' aveva preso il widget e non il posto. Scavalca 01 § 9 e 06 § 6-7 restando in coda a loro: nessuno di quei due fogli viene modificato. Dove serve, la specificita' e' calcolata a mano e il conto e' scritto accanto alla regola. NIENTE COLORI LETTERALI. Tutto viene dai gettoni di 00-fondamenta e dai quattro di 06 (`--sce-fibra-carta`, `--sce-luce`, `--sce-piano`, `--sce-contatto`). L'unico colore nuovo e' un `color-mix` fra due gettoni. ========================================================================== */ /* ============================================================================= 0 · GETTONI LOCALI ----------------------------------------------------------------------------- Stanno sulla sezione, non su `:root`: sono numeri che valgono per queste sei schede e per niente altro, e appenderli alla radice vorrebbe dire offrirli a chi non li ha chiesti. ========================================================================== */ body.home #main .elementor-element-c817df9 { /* Il prezzo. Oggi vale `--sc-t-h2` (max 2,3rem), cioe' ESATTAMENTE quanto il titolo «OUR BEST SELLER» che sta sopra le sei schede. Due cose diverse con lo stesso peso: il titolo e' un'insegna, il prezzo e' la leva. Salgo di un gradino e mi fermo li': a 2,6rem il numero domina la scheda senza superare l'insegna di sezione una volta contato il grassetto. */ --sc08-t-prezzo: clamp(1.85rem, 1.3vw + 1.28rem, 2.6rem); /* L'ombra di contatto, secondo strato. `--sce-contatto` (06) e' il nucleo scuro sotto l'oggetto; questo e' l'alone largo e chiaro attorno. Due strati perche' un'ombra vera ha un bordo netto dove l'oggetto tocca e uno sfumato dove non tocca piu'. Derivato dal gettone, non inventato. */ --sc08-alone: color-mix(in srgb, var(--sce-contatto) 62%, var(--sce-contatto0)); /* Stato di riposo delle due leve del passaggio del mouse. Il § 3 le muove dalla SCHEDA, e l'ereditarieta' le porta giu' fino al disegno e all'ombra: e' il modo di far muovere due elementi diversi con una regola sola. */ --sc08-alza: 0px; /* di quanto si solleva il disegno */ --sc08-ings: 1; /* di quanto si ingrandisce */ --sc08-osx: 1; /* allargamento orizzontale dell'ombra */ --sc08-osy: 1; /* allungamento verticale dell'ombra */ --sc08-oop: 1; /* opacita' dell'ombra */ } /* ============================================================================= 1 · IL PIANO DI POSA — perche' rifaccio i conti di 06 § 6c ----------------------------------------------------------------------------- 06 § 6c ha ragione sulla diagnosi e sui primi due strati: le sei immagini sono disegni a tratto su fondo trasparente, e un rettangolo di colore piatto non ha ne' alto ne' basso, quindi il disegno galleggia. La luce di studio e la fibra restano identiche: sono giuste e non le tocco. Quello che rifaccio e' il TERZO strato, l'ellisse d'appoggio. 06 la mette a quota 85% dell'altezza del riquadro «presa a schermo, non a occhio». Ho rimisurato i sei PNG con GD, contando i pixel opachi (alpha < 100) uno per uno, e la quota del punto piu' basso di ogni disegno NON e' fra l'83 e l'86%: e' questa, in percentuale dell'altezza dell'immagine. lid_base_box2 93,9% <- l'ellisse a 85% cade DENTRO la scatola magnetic_box 97,5% <- 12 punti sopra il fondo: dentro 3_pieces_box3 95,8% <- dentro fondo_rivestito 83,2% <- vicina, la sola che funziona internal_cardboard 68,4% <- 17 punti SOTTO: ombra staccata internal_shaped_foam3 77,9% <- staccata Cioe': su sei disegni l'ombra e' al posto giusto una volta. Su tre e' disegnata addosso alla scatola, su due galleggia sotto il vuoto. Non e' un errore di stima, e' che UNA quota sola non puo' servire sei disegni con i fondi a trenta punti di distanza. LA CORREZIONE, in due mosse: 1a. PORTO I SEI DISEGNI SULLA STESSA QUOTA (§ 2). Ogni immagine viene traslata — e due, che toccherebbero il bordo alto, ridotte di poco — finche' il suo punto piu' basso non cade al 90% dell'altezza. Da qui in poi le sei scatole stanno su UNA riga sola, come sei oggetti su una mensola. E' il guadagno vero: prima ogni disegno era centrato nel suo riquadro, quindi ognuno «poggiava» a un'altezza diversa e la fila si leggeva come sei figure ritagliate, non come sei prodotti fotografati. 1b. L'ELLISSE STA A UNA QUOTA SOLA PER TUTTI E SEI — il centro all'91,5%, cioe' appena sotto la quota d'appoggio — e cambia solo di larghezza e di centro orizzontale, che sono le due cose che dipendono davvero dall'oggetto (§ 2). E' il regalo della mossa 1a: allineati i sei disegni, la componente verticale dell'ombra smette di essere un problema per ciascuno e diventa un numero solo. Passa inoltre da sfondo del riquadro a elemento proprio, perche' un `background-image` non si puo' animare con `transform` — e l'ombra che si allarga quando la scatola si alza e' meta' dell'animazione di § 3. NON SI ACCAVALLANO: qui sotto ridichiaro `background-image` sul riquadro SENZA `--sce-appoggio`. Stessa specificita' di 06, foglio caricato dopo, quindi la vince — e la vince anche sulla variante mobile di 06 § 13, perche' una media query non aggiunge specificita'. Restano fibra, luce e piano di 06. ========================================================================== */ body.home #main .elementor-element-c817df9 .e-con:has(> .elementor-widget-image) { background-image: var(--sce-fibra-carta), var(--sce-luce), var(--sce-piano); background-repeat: repeat, no-repeat, no-repeat; background-size: 180px 180px, 100% 100%, 100% 100%; } /* ============================================================================= 2 · I SEI DISEGNI, UNO PER UNO ----------------------------------------------------------------------------- Ogni scheda porta quattro numeri, tutti in percentuale del RIQUADRO DELL'IMMAGINE (non del riquadro grigio: sono cose diverse, vedi § 2c). --sc08-dy traslazione verticale che porta l'appoggio a quota 90% --sc08-rid riduzione, solo dove il disegno alzato uscirebbe dal bordo --sc08-cx centro orizzontale dell'ombra --sc08-rx semiasse orizzontale dell'ombra COME SONO STATI RICAVATI. Riquadro d'inchiostro di ogni PNG letto con GD; poi, per il piede, l'inchiostro nell'ultimo 12% dell'altezza dell'oggetto. La riduzione e' `min(1; 87/altezza%; 96/larghezza%)`: la prima condizione lascia almeno 3 punti d'aria sopra al disegno alzato, la seconda almeno 2 per lato. Solo due disegni la attivano — magnetic (0,92) e 3_pieces (0,95) — perche' sono gli unici che occupano oltre il 90% dell'altezza. Il centro dell'ombra e' a meta' fra il centro del riquadro d'inchiostro e il centro del piede: i disegni sono assonometrici, la faccia d'appoggio e' un parallelogramma spostato a sinistra, e un'ombra centrata sul disegno intero sarebbe spostata a destra rispetto a dove l'oggetto tocca davvero. Il semiasse e' 0,45 della larghezza del riquadro d'inchiostro: piu' stretto dell'oggetto, perche' l'ombra sta sotto la base, non sotto la sagoma. PERCHE' AGGANCIO AL NOME DEL FILE E NON A `nth-child`. Se il proprietario riordina le sei schede in Elementor, `nth-child` continuerebbe a funzionare assegnando i numeri sbagliati — ombre mal piazzate senza che niente si rompa, cioe' il tipo di guasto che nessuno nota. Con il nome del file, riordinare non cambia niente e togliere un prodotto fa semplicemente decadere i suoi numeri ai valori neutri di § 2b. DUE selettori per scheda: WP Rocket carica le immagini in differita, quindi prima del caricamento l'indirizzo sta in `data-lazy-src` e `src` e' un SVG segnaposto; dopo, Rocket cancella `data-lazy-src` e riempie `src`. ========================================================================== */ /* --- 2a · i quattro numeri ------------------------------------------------- */ /* Lid & Base Box — appoggio 93,9% · inchiostro L 70,8% · piede 42,1% L 33,3% */ body.home #main .elementor-element-c817df9 .elementor-widget-image:has(img[src*="lid_base_box2"]), body.home #main .elementor-element-c817df9 .elementor-widget-image:has(img[data-lazy-src*="lid_base_box2"]) { --sc08-dy: -3.6%; --sc08-rid: .99; --sc08-cx: 45.7%; --sc08-rx: 31.6%; } /* Magnetic Box — appoggio 97,5% (il piu' basso) · alto 95%: va ridotto */ body.home #main .elementor-element-c817df9 .elementor-widget-image:has(img[src*="magnetic_box"]), body.home #main .elementor-element-c817df9 .elementor-widget-image:has(img[data-lazy-src*="magnetic_box"]) { --sc08-dy: -3.5%; --sc08-rid: .92; --sc08-cx: 48.4%; --sc08-rx: 27.5%; } /* 3 Pieces Box — appoggio 95,8% · alto 91,5%: ridotto di poco */ body.home #main .elementor-element-c817df9 .elementor-widget-image:has(img[src*="3_pieces_box3"]), body.home #main .elementor-element-c817df9 .elementor-widget-image:has(img[data-lazy-src*="3_pieces_box3"]) { --sc08-dy: -3.6%; --sc08-rid: .95; --sc08-cx: 47.2%; --sc08-rx: 28.4%; } /* Drawer box (fondo_rivestito) — appoggio 83,2%: sale di quasi 7 punti */ body.home #main .elementor-element-c817df9 .elementor-widget-image:has(img[src*="fondo_rivestito"]), body.home #main .elementor-element-c817df9 .elementor-widget-image:has(img[data-lazy-src*="fondo_rivestito"]) { --sc08-dy: 6.8%; --sc08-rid: 1; --sc08-cx: 43.3%; --sc08-rx: 40.1%; } /* Internal Shaped Cardboard — appoggio 68,4%: il piu' alto, scende di 21 punti. E' il disegno che oggi galleggia peggio: alto solo il 36,7% del riquadro e centrato, quindi con 32 punti di vuoto sotto e l'ombra di 06 a meta' strada. */ body.home #main .elementor-element-c817df9 .elementor-widget-image:has(img[src*="internal_cardboard"]), body.home #main .elementor-element-c817df9 .elementor-widget-image:has(img[data-lazy-src*="internal_cardboard"]) { --sc08-dy: 21.6%; --sc08-rid: 1; --sc08-cx: 46.0%; --sc08-rx: 41.4%; } /* Internal Shaped Foam — appoggio 77,9% */ body.home #main .elementor-element-c817df9 .elementor-widget-image:has(img[src*="internal_shaped_foam3"]), body.home #main .elementor-element-c817df9 .elementor-widget-image:has(img[data-lazy-src*="internal_shaped_foam3"]) { --sc08-dy: 12.1%; --sc08-rid: 1; --sc08-cx: 45.8%; --sc08-rx: 38.9%; } /* --- 2b · valori neutri ---------------------------------------------------- */ /* Un'immagine che non riconosco resta esattamente dov'e' oggi, con un'ombra centrata di larghezza media. Nessun prodotto nuovo puo' finire storto: al massimo finisce non-migliorato, ed e' la direzione giusta in cui sbagliare. */ body.home #main .elementor-element-c817df9 .elementor-widget-image { --sc08-dy: 0%; --sc08-rid: 1; --sc08-cx: 46%; --sc08-rx: 35%; } /* --- 2c · l'ombra come elemento proprio ------------------------------------ */ /* Sta sull'IMMAGINE, non sul riquadro grigio, e per un motivo di coordinate: il widget e' largo quanto il riquadro, ma l'immagine dentro occupa l'80% centrale (misurato: 350,9 px su 438,6 a tutte e sei, impostazione Elementor). Con `inset: 0 10%` il riquadro dell'ombra coincide con quello dell'immagine e le percentuali dei § 2a sono le stesse che ho letto dai PNG — senza conversioni da rifare a mano se un giorno si cambia il fondello. Se quell'80% cambia in Elementor, questa e' l'unica riga da rivedere. `isolation: isolate` crea un contesto di impilamento locale, cosi' lo `z-index` dell'ombra e quello del contenitore dell'immagine non escono di qui: senza, uno pseudo-elemento posizionato passerebbe SOPRA l'immagine, che invece e' statica, e l'ombra si vedrebbe addosso alla scatola. */ body.home #main .elementor-element-c817df9 .elementor-widget-image { position: relative; isolation: isolate; } body.home #main .elementor-element-c817df9 .elementor-widget-image > .elementor-widget-container { position: relative; z-index: 1; } body.home #main .elementor-element-c817df9 .elementor-widget-image::after { content: ""; position: absolute; inset: 0 10%; z-index: 0; pointer-events: none; /* l'immagine e' un collegamento: non lo copro */ /* Due ellissi concentriche, non una. La prima e' il contatto: stretta, alta poco, scura. La seconda e' l'alone: quasi il doppio piu' larga, piu' alta e molto piu' chiara. Un'ombra sola sarebbe o troppo dura al centro o troppo lavata ai bordi, perche' una sfumatura radiale ha un solo raggio. Il centro sta all'91,5%, cioe' un punto e mezzo SOTTO la quota d'appoggio: con l'ellisse centrata esatta sul filo, meta' dell'ombra finisce dietro la faccia bianca della scatola e non si vede — provato, e non si vedeva. */ background-image: radial-gradient(var(--sc08-rx) 5% at var(--sc08-cx) 91.5%, var(--sce-contatto) 0%, var(--sce-contatto0) 70%), radial-gradient(calc(var(--sc08-rx) * 1.9) 9% at var(--sc08-cx) 92%, var(--sc08-alone) 0%, var(--sce-contatto0) 80%); background-repeat: no-repeat, no-repeat; transform-origin: var(--sc08-cx) 91.5%; transform: scale(var(--sc08-osx), var(--sc08-osy)); opacity: var(--sc08-oop); transition: transform 420ms var(--sc-curva), opacity 420ms var(--sc-curva); } /* Finche' l'immagine non e' arrivata, l'ombra non c'e'. WP Rocket carica i disegni in differita: nella seconda fila, prima che il visitatore ci arrivi, il riquadro e' vuoto — e con l'ombra sempre accesa si vedeva una macchia scura sotto il nulla. Era cosi' anche prima di questo foglio (l'ellisse stava nello sfondo del riquadro, sempre visibile); adesso che l'ombra e' piu' netta si notava di piu'. `data-lazy-src` c'e' finche' l'immagine e' un segnaposto e Rocket lo toglie quando la sostituisce: e' lo stesso attributo su cui si regge il § 2a, non un secondo meccanismo. La transizione di opacita' e' gia' dichiarata sopra, quindi l'ombra non compare di scatto — arriva insieme al disegno. */ body.home #main .elementor-element-c817df9 .elementor-widget-image:has(img[data-lazy-src])::after { opacity: 0; } /* --- 2d · il disegno sulla quota comune ------------------------------------ */ /* CONTO DELLA SPECIFICITA', perche' non e' ovvio. 06 § 6d dichiara la trasformazione del disegno DENTRO uno stato `:hover`: body.home #main .elementor-element-c817df9 .e-con:has(> .e-con > .elementor-widget-image):hover .elementor-widget-image img -> (1, 7, 2) Qui la trasformazione non e' uno stato: e' la posizione di riposo, e deve valere anche mentre il mouse e' sopra. Quindi deve battere (1,7,2), e non lo farebbe con la catena naturale, che vale (1,6,2). Aggiungo il passaggio per il riquadro immagine — un anello che nella struttura c'e' davvero, non un `:not()` messo li' per gonfiare — e arrivo a (1,8,2). Le due leve del passaggio del mouse restano variabili, mosse da § 3. `calc()` mescola percentuale e pixel apposta: la quota comune e' relativa all'altezza dell'immagine (cioe' regge a qualunque larghezza di scheda), il sollevamento e' un valore assoluto (6 px sono 6 px anche su un telefono). */ body.home #main .elementor-element-c817df9 .e-con:has(> .e-con > .elementor-widget-image) .e-con:has(> .elementor-widget-image) .elementor-widget-image img { transform: translateY(calc(var(--sc08-dy) + var(--sc08-alza))) scale(calc(var(--sc08-rid) * var(--sc08-ings))); transition: transform 420ms var(--sc-curva); } /* ============================================================================= 3 · L'ANIMAZIONE, PRIMA META': LA SCATOLA SI ALZA E L'OMBRA SI APRE ----------------------------------------------------------------------------- PERCHE' QUESTA E NON UN'ALTRA. E' l'unica animazione della sezione che spiega qualcosa invece di decorare: tutto il § 1 serve a dire che le sei scatole poggiano su un piano, e un'ombra che resta identica mentre l'oggetto si alza sarebbe la smentita immediata di quel piano. Muovendosi insieme — il disegno sale, l'ombra si allarga, si allunga e schiarisce — il piano diventa un fatto invece che un disegno. 06 § 6d alzava gia' il disegno; quello che mancava e' la conseguenza. Muovo SOLO variabili, dalla scheda. Il disegno e l'ombra sono due elementi diversi e distanti nell'albero: ereditando le variabili si muovono insieme con una regola sola, e senza scrivere due catene di selettori gemelle che poi divergono alla prima manutenzione. Costo: due `transform` e una `opacity`. Nessun ridisegno, nessun rifusione. `:focus-within` e non solo `:hover`: chi arriva col tasto TAB deve vedere la stessa cosa di chi arriva col mouse. E' la regola gia' scritta in 06 § 7. ========================================================================== */ body.home #main .elementor-element-c817df9 .e-con:has(> .e-con > .elementor-widget-image):hover, body.home #main .elementor-element-c817df9 .e-con:has(> .e-con > .elementor-widget-image):focus-within { --sc08-alza: -6px; --sc08-ings: 1.025; --sc08-osx: 1.18; /* l'ombra di un oggetto che sale si allarga... */ --sc08-osy: 1.30; --sc08-oop: .72; /* ...e schiarisce, perche' la luce le gira intorno */ } /* ============================================================================= 4 · L'ANIMAZIONE, SECONDA META': LE SEI SCHEDE ENTRANO IN FILA ----------------------------------------------------------------------------- PERCHE'. Queste schede sono la prima cosa che si guarda dopo l'eroe, e sono sei rettangoli identici che compaiono tutti insieme: l'occhio non sa da dove cominciare e le legge come uno sfondo. Facendole arrivare a 70 ms l'una dall'altra si da' alla fila un verso di lettura, per mezzo secondo, una volta sola. Poi non si muove piu' niente. VINCOLI RISPETTATI, uno per uno: · solo `opacity` e `transform`: nessuna proprieta' che costi un rifusione; · niente moto perpetuo: `animation` senza `iteration-count`, parte una volta e l'osservatore smette di guardare la scheda appena e' entrata; · niente CLS: opacita' e traslazione non spostano il flusso di nessuno, e lo stato iniziale e' dichiarato in un foglio bloccante, quindi arriva prima della prima pittura e non "succede" dopo; · movimento ridotto: § 7. PERCHE' `animation` E NON `transition`. Con una transizione lo stato finale sarebbe `transform: none` scritto in una regola con `.sc08-dentro`, cioe' piu' specifica del `:hover` di 01 § 9: finita l'animazione, il sollevamento della scheda al passaggio del mouse non funzionerebbe piu'. Un'animazione con riempimento `backwards` invece riempie SOLO il ritardo iniziale e alla fine molla l'elemento alla cascata normale. Il `:hover` resta intatto e non ho dovuto vincere nessuna gara di specificita' per tenermelo. `html.sc08-js` viene messo da uno script in linea nella testa (vedi il PHP): senza JavaScript la classe non c'e', le schede non spariscono mai e la sezione resta esattamente quella di oggi. ========================================================================== */ html.sc08-js body.home #main .elementor-element-c817df9 .e-con:has(> .e-con > .elementor-widget-image) { opacity: 0; } html.sc08-js body.home #main .elementor-element-c817df9 .e-con:has(> .e-con > .elementor-widget-image).sc08-dentro { opacity: 1; animation: sc08-entra 520ms var(--sc-curva) backwards; animation-delay: var(--sc08-ritardo, 0ms); } /* Un solo fotogramma `from`: il `to` implicito e' lo stato che l'elemento ha nella cascata, quindi l'animazione finisce esattamente dove la pagina sarebbe stata comunque e non lascia residui. */ @keyframes sc08-entra { from { opacity: 0; transform: translateY(14px); } } /* ============================================================================= 5 · IL CORPO DELLA SCHEDA — dare un peso alle cose ----------------------------------------------------------------------------- Oggi i sei elementi del corpo (etichetta, nome, stelle, «starting from», prezzo, bottone) sono separati da uno spazio uguale, 14 px. Sei cose alla stessa distanza sono sei cose con la stessa importanza: e' un elenco, non una scheda. E le due righe in maiuscoletto — la categoria e «starting from» — sono scritte identiche, quindi l'occhio le legge come una coppia quando invece appartengono a due blocchi diversi. Rifaccio la spaziatura a mano, non con `gap`, perche' il punto e' proprio che gli spazi devono essere diversi fra loro: categoria 8 px nome (stessa cosa detta due volte: stanno vicine) nome 20 px garanzia garanzia auto filo + prezzo (spinto in fondo, vedi sotto) prezzo 20 px bottone `margin-top: auto` sul blocco prezzo e' la parte che si vede di piu' senza che nessuno capisca perche': spinge prezzo e bottone contro il fondo della scheda, cosi' i sei prezzi e i sei bottoni stanno su due righe dritte anche quando un nome va a capo — e a 1024 px «Internal Shaped Cardboard» va a capo. Prima quei sei bottoni erano a sei altezze diverse. ========================================================================== */ body.home #main .elementor-element-c817df9 .e-con:has(> .elementor-widget-heading) { gap: 0; flex: 1 1 auto; /* serve al `margin-top: auto` qui sotto */ } body.home #main .elementor-element-c817df9 .e-con > .elementor-widget-heading:nth-child(1) { margin-bottom: var(--sc-s2); } body.home #main .elementor-element-c817df9 .e-con > .elementor-widget-heading:nth-child(2) { margin-bottom: var(--sc-s4); } /* --- 5a · il blocco prezzo ------------------------------------------------- */ /* Il filo sopra e' la sola cosa che separa «che cos'e'» da «quanto costa»: costa un pixel e fa piu' gerarchia di qualunque cambio di corpo. Colore `--sc-linea`, cioe' lo stesso filo che 06 § 6c usa sotto il riquadro immagine: non introduco un secondo modo di tirare una riga. */ body.home #main .elementor-element-c817df9 .e-con > .elementor-widget-heading:nth-child(4) { margin-top: auto; padding-top: var(--sc-s4); border-top: 1px solid var(--sc-linea); } body.home #main .elementor-element-c817df9 .e-con > .elementor-widget-heading:nth-child(4) .elementor-heading-title { font-size: 10.5px; /* un filo sotto `--sc-t-mono`: e' la didascalia del prezzo, non un'etichetta di pari grado */ letter-spacing: .18em; line-height: 1; } /* Il prezzo. `tabular-nums` non e' un vezzo: le cifre proporzionali di Lato fanno cadere «€4.80» e «€7.00» su larghezze diverse, e sei prezzi affiancati che non si allineano si notano anche senza saper dire perche'. */ body.home #main .elementor-element-c817df9 .e-con > .elementor-widget-heading:nth-child(5) { margin-top: var(--sc-s1); margin-bottom: var(--sc-s5); } body.home #main .elementor-element-c817df9 .e-con > .elementor-widget-heading:nth-child(5) .elementor-heading-title { font-size: var(--sc08-t-prezzo); font-weight: 700; line-height: 1; letter-spacing: -.025em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ============================================================================= 6 · LE CINQUE STELLE — un segnale che il sito stesso smentisce ----------------------------------------------------------------------------- LA COSA COM'E'. Le stelle sono scritte a mano nel widget «rating» di Elementor: cinque piene su tutti e sei i prodotti, `content="5"` fisso nel `itemprop="ratingValue"`. Non sono collegate a niente. Nelle pagine di categoria e nelle schede prodotto dello stesso sito le recensioni sono zero. Due pagine dello stesso negozio che si contraddicono, e la seconda ha ragione. COSA FACCIO E COSA NON FACCIO. Non cancello niente: i sei widget restano dove sono, con dentro il loro contenuto. Nascondo le stelle e metto al loro posto una frase che e' vera e che il proprietario ha gia' scritto di suo pugno nell'eroe della stessa pagina, sei schermate piu' su: «handmade in italy». Non l'ho inventata io e non e' un claim nuovo — e' la stessa pagina che lo dice due volte invece di una. PERCHE' IN CSS E NON IN JAVASCRIPT. Perche' un foglio di stile bloccante arriva prima della prima pittura: la sostituzione non «succede» dopo il caricamento e quindi non sposta niente. Con JavaScript avrei aggiunto una riga di testo a pagina gia' dipinta, cioe' uno spostamento di layout, che e' esattamente la cosa che mi era stato chiesto di non peggiorare. Si torna indietro cancellando questo blocco: nessun dato e' stato toccato. RESTANO DUE DECISIONI DEL PROPRIETARIO, tutt'e due nel resoconto. 1. Nascondere le stelle non toglie dal codice sorgente la marcatura `schema.org/Rating` con valore 5. Quella va tolta in Elementor, e andrebbe tolta comunque: e' una valutazione dichiarata a un motore di ricerca senza una sola recensione dietro. 2. Il sito ha quattro lingue con GTranslate, che traduce i nodi di testo del documento. Una frase scritta in `content` non e' un nodo di testo, quindi su FR/IT/ES questa riga resta in inglese. Non e' un difetto di questa regola, e' il prezzo del CLS a zero: l'unico modo di avere insieme la traduzione e nessuno spostamento e' scrivere la frase in Elementor al posto del widget «rating». Che e' anche dove va presa la decisione 1. CONTRASTO: `--sc-mar-testo` su `--sc-carta` = 5,63:1 (misurato). AA con margine. Le stelle erano `--sc-mar-vivo`, stesso colore: non perdo niente. ========================================================================== */ body.home #main .elementor-element-c817df9 .elementor-widget-rating .e-rating { display: none; } body.home #main .elementor-element-c817df9 .elementor-widget-rating > .elementor-widget-container::after { content: "handmade in italy"; display: block; font-family: var(--sc-mono); font-size: var(--sc-t-mono); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; line-height: 1; color: var(--sc-mar-testo); } /* ============================================================================= 7 · IL BOTTONE — resta un contorno, smette di sembrare un campo da riempire ----------------------------------------------------------------------------- 06 § 7 ha portato i sei bottoni da barra petrolio piena a contorno, e l'argomento e' giusto: sei barre piene tutte uguali gridavano quanto il prodotto. Quell'argomento vale ancora e non lo rovescio. Cambia una cosa sola, e per un motivo che nasce da § 5: adesso sopra il bottone c'e' un prezzo di 40 px, quindi il bottone non e' piu' l'elemento piu' forte della scheda e non rischia di rubare la scena. Il suo problema ora e' l'opposto — un rettangolo a filo sottile su fondo carta, largo quanto la scheda, si legge come un campo di modulo. Un velo di petrolio lo riporta a essere un comando senza aggiungergli voce. `--sc-mar-velo` e' il gettone gia' previsto in 00 per «velo tenue: selezione, evidenza». Nessun colore nuovo. CONTRASTI, misurati nel browser: etichetta --sc-ink su --sc-mar-velo 16,73:1 (era 18,08 su carta) perimetro --sc-mar-testo su --sc-mar-velo 5,21:1 (soglia comandi 3:1) perimetro --sc-mar-testo su --sc-carta 5,63:1 (il lato di fuori) acceso --sc-fondo su --sc-mar-vivo 5,88:1 (invariato, e' di 06) L'etichetta scende di 1,35 punti e resta a piu' del triplo della soglia AAA. Il velo contro la carta della scheda fa 1,08:1, e va detto perche' letto da solo sembrerebbe invisibile: non lo e', perche' non e' una differenza di LUMINOSITA' ma di TINTA — petrolio contro bianco caldo. E' esattamente il motivo per cui questo velo si poteva usare: sposta il colore del fondo senza spostarne la luce, quindi non toglie un solo punto di contrasto all'etichetta che ci sta sopra. NIENTE `!important`, ed e' una verifica non un'assunzione: il tema Porto ridipinge i `