/* ========================================================================= Il contenuto delle pagine. Veste il vocabolario che `elementor-a-html.py` scrive dentro `post_content`: `.sezione`, `.colonne`, `.colonna`, `.riga`, `.separatore`, `.pulsante`, `.disegno`, `.carosello`, `.galleria`, `.scheda-doppia`, `.finestra`. ⚠ La struttura (griglia, sezioni) è la grammatica dello strumento ed è la stessa su tutti i siti che lo usano. I colori, i corpi e i respiri qui sotto sono di CIMITERI.ONLINE e di nessun altro: sono presi dal Kit e dalle misure del sito vivo. Non si copiano da un altro tema, e questo non si copia altrove: la matrice sta in PLUGIN-NEXEN. Il sito è SCURO: fondo nero, testi chiari. È la cosa che si sbaglia per prima ereditando un foglio scritto per un sito bianco. ========================================================================= */ .pagina { color: var(--c-testo); } .pagina__contenuto { display: flow-root; } /* S-RIFINITURA, 4/9/2026 — «niente maiuscolo forzato sui titoli» (lingua del sito, LOOP-S-RIFINITURA-20260904.md). `token.css` (generato dal Kit di Elementor, non si scrive a mano) dichiara `text-transform:uppercase` su `.stile-primary/-secondary/-accent/-e20ef4c/-a0720a2`: classi vecchie, ancora attaccate a titoli veri fuori dalle pagine di famiglia — il nome della memoria (`h1.articolo__titolo.stile-primary` su `/ricordo/…/`, SGUARDO-TUTTO-20260903.md §2 "Memorie") e il nome del cimitero nelle schede di ricerca (`h3.nexen-cim-carta__nome.stile-a0720a2`, stesso rapporto, "Editoriali" — «Cimitero di Roma» usciva «CIMITERO DI ROMA»). `pagine-testo.css` l'aveva già spento ma solo dentro il proprio perimetro (`body.pagina-testo`/`.foglio-civile`): qui si spegne per tutto il sito, in `contenuto.css` che carica ovunque e dopo `token.css` nella catena delle dipendenze (stessa specificità, vince chi arriva dopo). */ .stile-primary, .stile-secondary, .stile-accent, .stile-e20ef4c, .stile-a0720a2 { text-transform: none; } /* ---------------------------------------------------------------- sezioni */ .sezione { position: relative; /* ⚠ IL RIPIEGO È ZERO, E LO DICONO DUE PAGINE GEMELLE. (6/8/2026.) Il respiro sopra e sotto arriva dal contenuto (`--su` e `--giu`, scritti da `elementor-a-html.py` dal `padding` della sezione). Qui c'era **4rem** per le sezioni che non lo dichiarano, e non era il ripiego: era una misura inventata. La prova sta in due pagine che sul vivo sono **identiche**, 963px tutte e due. `manifesto-…-civile-modello-rosa-01` dichiara `padding: 0` e usciva 749; `manifesto-…-religioso-modello-padre-pio-01` **non dichiara niente** e usciva 877. La differenza è **128px, cioè 4rem sopra più 4rem sotto**, ed è tutta nostra: il grafico non ha scritto nulla e noi ci abbiamo messo otto centimetri. Il predefinito di una sezione di Elementor è **zero**. Lo spazio, quando c'è, lo mettono i widget e il `gap` della colonna — non la sezione. Sono **96 sezioni su 242** a non dichiarare padding, il 39%: la 4rem era il difetto più diffuso del tema, e si vedeva solo dove due pagine uguali uscivano diverse. *(Il 6/8 mattina questa riga era già stata corretta una volta, da 4rem fissi a variabile, perché il banner dei manifesti usciva 149px più alto. Correggere il ripiego a metà lascia il difetto dove il dato manca.)* */ /* 🚨 E IL RESPIRO PUÒ ESSERE NEGATIVO: 52 volte su 7 pagine. (7/8/2026.) `elementor-a-html.py` somma padding e margine, e il margine di una sezione di Elementor può essere negativo — è così che il grafico fa scavalcare una sezione sull'altra: `--su:-60px`, `--su-t:-50px`, `--su-m:-33px`, fino a `--giu:-50px`. **Un `padding` negativo non esiste**: la dichiarazione è invalida e il browser la butta, in silenzio. Erano scritti, arrivavano, e non ne è mai stato applicato uno. Si dividono: il positivo va in `padding`, il negativo in `margin`. È quello che fa Elementor, che li tiene separati fin dall'inizio. */ padding-block: max(0px, var(--su, 0px)) max(0px, var(--giu, 0px)); margin-block: min(0px, var(--su, 0px)) min(0px, var(--giu, 0px)); /* L'altezza minima dichiarata dal contenuto: la home è fatta di sezioni a schermo pieno. È un minimo, non una misura fissa — il contenuto che cresce la supera, e a telefono si lascia perdere. */ min-height: var(--alta, auto); /* Il fondo dichiarato dal contenuto. ⚠ Due sezioni della home su sette sono CHIARE, e il tema le rendeva nere: nessuna misura di altezza se n'era accorta, l'ha detto il video. */ background-color: var(--fondo, transparent); padding-inline: 1.25rem; background-position: center; background-size: cover; background-repeat: no-repeat; } /* Lo sfondo arriva dal contenuto come variabile, perché è un dato della pagina (quale foto) e non una regola del tema (come si comporta). */ .sezione[style*="--sfondo"] { background-image: var(--sfondo); } /* 🚨 LO STACCO FRA UNA FASCIA E L'ALTRA. (9/8/2026.) `--su` è il respiro DENTRO la sezione (il suo `padding`), e lo legge la regola qui sopra. Il margine che la sezione ha SOPRA di sé è un altro dato, e nel convertitore lo guardava solo `incastro_sezione`, che tiene il negativo e butta il positivo: l'incastro di due fotografie tagliate lo portavamo, lo stacco fra due fasce no. Misurato sul vivo a 1440 su `mi-presento`: «Domande Frequenti» comincia a 2333 e «Hai altre domande?» a 2869, cioè **50px sotto** la sezione di prima, a testa. Sono 100px su una pagina che ne aveva 177 in meno del vivo. A telefono la terza sezione ne dichiara 16 al posto di 50, e la scala lo dice. ⚠ Margine e non imbottitura, e su questo sito si vede: il fondo di una sezione lo dipinge `--fondo`, e con l'imbottitura quei 50px verrebbero dipinti anche loro. Di là sono margine, e qui restano margine. ⛔ Selettore di attributo: deve battere il `margin-block` che `.sezione` scrive per i respiri negativi, e quello per i telefoni in fondo al foglio. */ .sezione[style*="--sopra:"] { margin-block-start: var(--sopra); } /* ⚠ QUANTO È LARGO IL CONTENUTO LO DICE LA SEZIONE, non il tema. (6/8/2026.) `elementor-a-html.py` scrive `--larghezza-sezione` dal `content_width` del grafico **su 60 pagine su 69**, e qui non lo leggeva nessuno: restavano i 1200px di `--larghezza-max` per tutti. Misurato sul vivo a 1440, `politiche-sulla-privacy`: il riquadro del contenuto è **1250px**, il nostro 1200. Cinquanta pixel in meno sono una riga in più ogni tante, e su una pagina da 24.000 caratteri diventano **+378px, il +5,4%** che la teneva fuori dal cancello. `--larghezza-max` resta il ripiego di chi non dichiara. */ .sezione > *, .sezione > .colonne { max-width: var(--larghezza-sezione, var(--larghezza-max)); margin-inline: auto; } /* 🚨 UNA FASCIA A FILO NON HA RESPIRO LATERALE. (26/8/2026, F12-bis.) `.sezione` porta `padding-inline: 1.25rem` — 20px — e serve, sui telefoni: senza, il testo tocca il bordo. Ma su una fascia dichiarata `none` quei 20px sono l'ultima cosa che ci separa dal vivo: misurato a 1440 dopo la prima correzione, il contenitore stava a **x=20, w=1400** contro **x=0, w=1440** del vivo — una striscia nera di 20px per lato, visibile sulla fotografia della giostra nel PNG. ⚠ **Sopra gli 800px soltanto**, la soglia che il foglio usa già (`@media (max-width: 800px)` più in basso). Sotto, il respiro resta: il vivo a 768 e a 375 **non è stato misurato**, e togliere un margine su una larghezza che non si è guardata è il modo di riaprire il difetto da un'altra parte. 👉 Resta da misurare a 768 e 375 prima di estendere la regola. */ @media (min-width: 801px) { .sezione[style*="--larghezza-sezione:none"] { padding-inline: 0; } } /* 🚨 FIX-VISTA (27/8/2026) — MISURATO A 375: È IL RESPIRO LASCIATO IN SOSPESO QUI SOPRA, E QUEI 20PX PER LATO SONO NERI, NON UNO SPAZIO VUOTO. Le uniche due sezioni della home con `--larghezza-sezione:none` E un `--fondo` scuro sulla SEZIONE stessa (non sulla colonna) sono «Cimitero Virtuale» (id 5) e «Servizi business» (id 6), entrambe `--fondo:#000000`. Sotto gli 800px la riga 125 non tocca il loro `padding-inline`, quindi restano i 20px per lato di base (riga 69) — e siccome il fondo NERO è sulla sezione, non sul contenuto, quei 20px non sono un margine bianco: sono una cornice nera intorno al riquadro chiaro dei servizi. Misurato su `dopo-375-servizi-a.png` (pixel reali, non dedotto): nero esatto a x=[0,20] e x=[354,374] per tutta l'altezza della fascia — 20px netti, gli stessi di sempre. E su `prima-375.png`, stessa immagine di stanotte prima dei due tagli diagonali aggiunti da FIX-HTML: **stesso nero, stessi pixel** — non è un difetto dei tagli, c'era già, ed è proprio il "resta da misurare" lasciato aperto alla riga 123. ⚠ Perimetro cercato in tutte le 63 pagine convertite: la coppia `--larghezza-sezione:none` + `--fondo:#000000` sulla sezione compare solo qui, 2 volte — non tocca nessun'altra pagina. Il testo non arriva al bordo: il titolo e le sei schede sono centrati dal loro stesso markup (nessun `imb-dx-m`/`imb-sx-m` diverso da 0 in queste due sezioni, quindi nessun rientro perso togliendo il padding). 🚨 CORRETTO IL 30/8/2026 — LA REGOLA QUI SOTTO CONTRADDICEVA LA SUA STESSA ANALISI, SCRITTA TRE RIGHE SOPRA. Non aveva media query: azzerava il padding-inline A TUTTE LE LARGHEZZE, compreso sotto gli 800px — cioè esattamente la cornice nera che questo commento aveva appena deciso di tenere. Misurato sul PNG a 375: il bollino "Free" cominciava a x≈0-4 (col riquadro scuro tagliato dal bordo) contro **x≈12 sul vivo**. Sopra gli 800px è pura ripetizione: la riga 125 già azzera il padding di OGNI `--larghezza-sezione:none`, e questa coppia lo è. Quindi non serve scriverla di nuovo lì — basta che smetta di applicarsi sotto. */ @media (min-width: 801px) { .sezione[style*="--larghezza-sezione:none"][style*="--fondo:#000000"] { padding-inline: 0; } } /* ⚠ E UNA GRIGLIA ANNIDATA DICHIARA LA SUA, DI LARGHEZZA. (26/8/2026, F12-bis.) `.sezione > .colonne` qui sopra cappa solo i **figli diretti** della sezione. La griglia dei sei servizi della home non lo e' — sta dentro una `.colonna` — e quindi si prendeva tutta la fascia: misurata **x=20, w=1400** contro **x=245, w=950** del vivo. 🚨 **E il numero giusto non e' 950px.** Misurato sul vivo a due larghezze: 1440 → **950** · 1920 → **1267**. Sono **66%** tutte e due (65,97 e 65,99): un tetto fisso in pixel avrebbe sbagliato di **317px a 1920**, e il difetto sarebbe ricomparso su uno schermo grande dopo essere sembrato chiuso a 1440. 👉 *Una larghezza sola non dice se un numero e' fisso o proporzionale.* */ .colonne[style*="--larghezza-riga:"] { max-width: var(--larghezza-riga); margin-inline: auto; } /* 🚨 F12-bis, SQUADRA LARGHEZZE (27/8/2026) — IL TETTO TOLTO ALLA FASCIA HA TOLTO IL TETTO ANCHE AL TESTO DENTRO. È LA CAUSA DEI 2 RIGHE INVECE DI 3. `--larghezza-sezione:none` (righe 107-108) e' giusto per la fascia — deve arrivare a filo — ma toglie `max-width` a OGNI figlio diretto della sezione, testo compreso. Sotto, `.riga > .colonna:only-child` (riga 607) stira la colonna del paragrafo alla riga intera, e il convertitore scrive l'imbottitura del testo in PERCENTUALE (`--imb-dx:10%;--imb-sx:10%`): una percentuale di una riga larga 1440/1920px e' un padding enorme, e il testo resta largo il doppio di quello che dovrebbe. Misurato su "Conserva i loro ricordi…": il paragrafo (l'H4, non il suo contenitore) corre a **1.152px a 1440 e 1.536px a 1920** — oltre il doppio del tetto di ~920px che SISTEMA-ESTETICO §4 dichiara per un corpo di testo. Stessa percentuale, stesso pattern, su "Cimitero Virtuale". Il numero giusto, misurato sul vivo a DUE larghezze (mai una sola, come alla riga 135): il contenitore diretto del testo e' **691px a 1440 e 922px a 1920 — 48% della finestra, esatto alle due misure**. Restituendo quella larghezza alla riga, il 10%/10% del convertitore produce da solo **553px e 737px di testo — gli stessi numeri del vivo**, senza toccare corpo o dimensione del carattere. ⛔ Non e' un tetto fisso in pixel, per la stessa ragione della riga 135: e' **48vw**, provato a due larghezze. `min(48vw, 100%)` evita che sfori il genitore su schermi molto larghi. ⚠ Perimetro, cercato in famiglia: il selettore prende SOLO le righe il cui unico contenuto e' un `.elemento` con `--imb-dx`/`--imb-sx` al 10% — la giostra "Omaggia" e la fotografia dell'eroe non hanno questo pattern e restano intonse (verificato leggendo `_conversione/html/16515.html`). */ .sezione[style*="--larghezza-sezione:none"] .riga:has(> .colonna > .elemento[style*="--imb-dx:10%"][style*="--imb-sx:10%"]) { max-width: min(48vw, 100%); margin-inline: auto; } /* 🚨 H7, 31/8/2026 — LA REGOLA 48vw QUI SOPRA NON VALE PER TUTTE E DUE LE SEZIONI CHE CONDIVIDONO LO STESSO SCHEMA HTML, ED È QUI L'ERRORE DEL 27/8. Il commento sopra diceva "stessa percentuale, stesso pattern, su Cimitero Virtuale" — MAI VERIFICATO SUL VIVO per quella sezione specifica, solo assunto perché il markup (`--imb-dx:10%;--imb-sx:10%`) è identico. Misurato ORA col righello vero (Chrome reale via Playwright, DUE larghezze, mai una sola — v. `misura-animali.py`): il paragrafo di "Cimitero Virtuale Per i nostri amici Animali" sul VIVO è **912px a 1440 (63,3%) e 1219px a 1920 (63,5%)** — non 48%. Le due sezioni hanno lo stesso schema di padding ma NON la stessa larghezza di contenuto sul vivo: applicare 48vw qui dava **737px, su 4 righe** contro le **2 righe** del vivo — il difetto visto da Gabriele nella sezione «Cimitero virtuale per i nostri amici animali». Scoped su `id="5"` soltanto (selettore composto, sovrainsieme di quello sopra: nessun `!important`, vince per specificità pura), così la sezione 4 — dove 48vw è già verificato giusto — non cambia. 79,3vw di riga, meno il 20% di `--imb-dx:10%;--imb-sx:10%`, torna ai 63,4vw di testo misurati. */ [id="5"].sezione[style*="--larghezza-sezione:none"] .riga:has(> .colonna > .elemento[style*="--imb-dx:10%"][style*="--imb-sx:10%"]) { max-width: min(79.3vw, 100%); } /* 🚨 F12-bis, SQUADRA LARGHEZZE (27/8/2026) — LA GRIGLIA DEI SERVIZI RESTA AL 66% ANCHE SOTTO GLI 800px, DOVE IL VIVO SI ALLARGA QUASI A TUTTO SCHERMO. `--larghezza-riga:66vw` (scritto dal convertitore) non ha variante di breakpoint: e' lo stesso valore da 1920 a 375px. Sopra gli 800px va bene (950px a 1440 e 1267px a 1920 sono IDENTICI al vivo, 66% tutte e due le volte — v. la nota alla riga 135). Sotto, il vivo abbandona la proporzione: misurato **756px su 768 (98%) e 363px su 375 (97%)**; lo staging restava a 507 e 248 (66% anche li'), **sotto la sua stessa soglia dichiarata di 335px a 375** (SISTEMA-ESTETICO §4). Aperti i PNG affiancati a 768 e 375 (non dedotto): il badge "Free" della prima scheda comincia a x≈131 da noi contro x≈6 sul vivo — si vede, non e' un dettaglio di misura. Sotto la soglia telefono del sito (800px, la stessa della riga 493) si spegne il tetto proporzionale: resta il respiro della sezione (1.25rem, riga 69), che a 375 da' 335px — esattamente il piede della soglia dichiarata in SISTEMA-ESTETICO §4. ⚠ Solo i due `66vw` della griglia servizi (le righe Free e Pro): il `90vw` di MEMORIE IMMORTALI non si tocca, e' gia' verde a queste larghezze (verificato guardando il PNG: stesso testo, stessi a-capo, su entrambi i lati — il 29% contro 90% misurato a 1440/1920 e' un artefatto del sonda, che a quella larghezza legge la colonna singola invece del widget intero, non un difetto vero. V. `MISURE.md`). */ @media (max-width: 800px) { .colonne[style*="--larghezza-riga:66vw"] { max-width: none; } } /* ⛔ I VENTI PIXEL FRA UN WIDGET E L'ALTRO: PROVATI E TOLTI. (6/8/2026.) Il Kit li serve con una riga sola, che vale su tutto il sito: .elementor-widget:not(:last-child) { margin-block-end: 20px } Sembra che si traduca in `.colonna > *:not(:last-child)`, e **non si traduce**, perché nel nostro markup **il widget non ha un involucro**: `elementor-a-html.py` versa il contenuto di un `text-editor` dentro la colonna così com'è. Su `la-tua-pubblicita` i figli di `.colonna` sono due scatole e la regola funzionava; su `politiche-sulla-privacy`, che è **un solo widget** con dentro tutta la pagina, i figli di `.colonna` sono ogni titolo e ogni paragrafo — e i 20px finivano in mezzo a **tutti**. Il numero: `sviluppo-siti-web` da −20,4% a −13,3% e `mi-presento` da −10,4% a −8,3%, cioè **meglio**; `politiche-sulla-privacy` da +5,3% a **+6,3%**, e l'`h3` misurato da `8px/16px` (il vivo) a `8px/20px` (noi). Una regola che aiuta due pagine e ne rompe una terza non è una causa chiusa: è una coincidenza con due testimoni. ✅ **CHIUSO IL 7/8/2026**, e la strada era quella: **serviva un confine**. La copia di cantiere del convertitore ora avvolge ogni widget in un `
`, e allora la riga del Kit si scrive per quello che è — venti pixel fra un widget e l'altro — invece che per «ogni figlio della colonna», che su una pagina fatta di un widget solo vuol dire ogni paragrafo. ⚠ Il margine del grafico (`.stacco`) resta **dentro** l'involucro, e non è una svista: in Elementor i 20px stanno su `.elementor-element` e il `_margin` su `.elementor-widget-container`, che ci sta dentro. 🚨 **E QUI C'ERA SCRITTO IL CONTRARIO DI QUELLO CHE FA IL VIVO. (8/8/2026.)** La riga che stava qui diceva *«fra il margine del genitore e quello dell'ultimo figlio c'è l'accorpamento, che tiene il più grande — ed è esattamente quello che fa il vivo»*. **Non è quello che fa il vivo**, e quella frase era il buco delle tre pagine corte a 1440. La prova sta nel foglio di Elementor, letto l'8/8: .elementor:not(.elementor-bc-flex-widget) .elementor-widget-wrap{display:flex} Ogni widget è un **elemento flessibile**, e un elemento flessibile è un contesto di formattazione indipendente: **niente di quello che ha dentro si accorpa verso fuori**. I 20px del Kit e il `_margin` del grafico stanno su due scatole diverse e **si sommano**; da noi il margine del figlio usciva dall'involucro, dalla colonna e dalla sezione, e la sezione lo perdeva. Il numero: l'ultima sezione di `sviluppo-siti` dichiara `_margin: 50px 0 0 0` sul primo widget e `0 0 70px 0` sull'ultimo. Il vivo fa **292px**, noi ne facevamo **159**. Con `display: flow-root` qui sotto: **295**. ⚠ `flow-root` e non `overflow: hidden`: taglia niente, e `.sezione--foto` e le fasce diagonali continuano a debordare come devono. */ .colonna > .elemento:not(:last-child) { margin-block-end: 20px; } .elemento { display: flow-root; } /* ⛔ E CON IL CONFINE VENGONO FUORI I MARGINI CHE IL TEMA HA INVENTATO. (8/8/2026, e va letta insieme alla nota qui sopra: sono una riparazione sola.) Finché il margine si accorpava via, questi non si vedevano. Con `flow-root` diventano veri — e sul vivo non esistono. Il foglio di Elementor sull'immagine dice **solo** questo, e non c'è nessun margine: .elementor img{border:none;border-radius:0;box-shadow:none;height:auto;max-width:100%} In Elementor lo spazio fra due widget è **venti pixel e basta**. Quindi dove il blocco È il widget, il margine del tema si spegne. Misurato su `termini-uso` (una sezione sola, il banco locale la riproduce a pixel): con `flow-root` da 1234 a **1428**; spegnendo questi, **1316**. ⚠ Solo `> `, cioè solo quando il blocco è il widget: un `` dentro il testo di un `text-editor` sta dentro un `

` e non è un widget, e lì il respiro lo mette il paragrafo — come di là. 🚨 **E PER LE IMMAGINI QUESTA RIGA NON HA MAI VINTO. (8/8/2026, misurato.)** `.elemento > img` pesa (0,1,1) — una classe e un tipo — esattamente quanto `.pagina img` più sotto (`:424`, `margin-block: 1rem`), che sta **dopo** nel foglio: a parità di peso vince l'ultima, e le immagini dei widget si tenevano i loro 16px sopra e 16 sotto. Il foglio diceva una cosa e il browser ne faceva un'altra, e il conto del 7/8 («flow-root da 1234 a 1428, spegnendo questi 1316») era stato fatto sul banco locale, dove il numero tornava. Sullo staging, letto con `getComputedStyle` sull'immagine di `termini-uso`: `margin-top: 16px`. Le due immagini di quella pagina costavano **64px** — 32 la prima, e 32 la seconda, che è alta **zero** perché il file non c'è più: due margini attorno al niente. Il `.pagina` davanti porta il peso a (0,2,1) e la riga vince dove deve. ⚠ Le miniature `.larghezza-auto` non si muovono: erano già a 0 sopra e 20 sotto (verificato su `prepara-manifesto` prima di toccare), e i 20 glieli dà la riga qui sotto, che pesa (0,3,0) e resta davanti a questa. */ .pagina .elemento > img, .pagina .elemento > a > img, .pagina .elemento > .schede, .pagina .elemento > .fisarmonica { margin-block: 0; } /* ⛔ E L'INVOLUCRO NON DEVE ROMPERE LA FILA. (7/8/2026.) Un `

` è un blocco, e i widget che il grafico ha messo **in riga** — `_element_width: auto`, cioè `.larghezza-auto` — sono elementi in linea che si affiancano da soli. Avvolgendoli uno per uno andavano a capo tutti. Il numero: `prepara-manifesto` da +1,6% a **+141,5%**. Sono le 52 miniature dei modelli, che scorrevano quattro per fila e sono diventate 52 file. `display: contents` toglie di mezzo la scatola e lascia il figlio dov'era. E i 20px non si applicano più a quei widget, che è giusto: fra due elementi in fila lo spazio lo mette il grafico, non la spaziatura dei widget — è la stessa cosa che `kit-a-css.py` si è scritta in fronte il 5/8 per `.larghezza-auto + .larghezza-auto`. ⚠ E il figlio DIRETTO non basta: il widget immagine con un collegamento esce `
`, e la classe sta due livelli sotto. Le 52 miniature restavano una per riga anche con `:has(> .larghezza-auto)`, e il numero non si muoveva: +137,3%. */ .elemento:has(.larghezza-auto) { display: contents; } /* 🚨 «I 20px NON SI APPLICANO PIÙ A QUEI WIDGET, CHE È GIUSTO» — GIUSTO DI LATO, SBAGLIATO SOTTO. (8/8/2026.) La frase qui sopra vale per due elementi **sulla stessa riga**. Ma su `prepara-manifesto` quei widget sono **50 miniature che vanno a capo**, e fra una fila e l'altra il vivo lo spazio ce l'ha: ogni miniatura è un `.elementor-widget:not(:last-child)` e prende i **20px del Kit** (`post-1023.css`). Togliendo la scatola con `display: contents` abbiamo tolto anche il posto dove quei 20px stavano scritti. Finché il tema metteva `1rem` alle immagini (`.pagina img`) il buco non si vedeva: 16+16 = 32 al posto di 20, un po' troppo ma c'era. L'8/8, azzerando i margini inventati (v. la nota su `flow-root`), è rimasto **zero**, e la pagina si è accorciata di 268px a 1440, **532 a 768 e 1.555 a 375**. Il conto torna a tre larghezze diverse, ed è quello che lo rende una causa e non un'ipotesi: 1.555 / 32 = **48,6 file** a 375 (le miniature sono 50, una per fila); 532 / 32 = **16,6** a 768 (tre per fila); 268 / 32 = **8,4** a 1440 (sei per fila, e il banco locale conta 8 file). Rimettendo i 20 del vivo al posto dei 32 inventati: 50×20, 17×20, 8×20. ⚠ Va sul figlio, non sull'involucro: l'involucro non c'è più. */ .elemento:not(:last-child) > .larghezza-auto, .elemento:not(:last-child) > a > .larghezza-auto { margin-block-end: 20px; } /* ⛔ TOLTA IL 31/8/2026 (H7, il calco della home) — `.sezione--eroe` non è mai stata usata da nessuna delle 61 pagine convertite (`grep -r sezione--eroe _conversione/html/`, zero risultati): era una regola morta con la STESSA specificità di `.sezione` (0,1,0) e un'altezza inventata (`min(88vh,760px)`) che IGNORAVA del tutto `--alta` scritta dal contenuto. Il commento a :4443 (oggi qualche riga più giù) la chiamava già «una mina»: fra 801 e 1300px solo un selettore di attributo scritto apposta la teneva a bada. Con la mina tolta non serve più difendersi da lei, e la decisione dell'altezza torna a passare da UN punto solo — questa regola, più le sue due varianti di soglia qui sotto, tutte e tre nella stessa forma `var(--alta-X, var(--alta, auto))`. Il gemello a 768px (`.sezione--eroe { min-height: 70vh }`, dentro `@media (max-width: 800px)`) è tolto con lei, per lo stesso motivo. */ /* Una sezione che si dichiara scura porta con sé il proprio inchiostro: da qui in giù i titoli tornano bianchi anche dentro una pagina chiara, senza che nessuna regola debba saperlo. (15/8/2026 — v. la nota in `base.css`.) */ .sezione--scura { background-color: var(--c-fondo); color: var(--c-bianco); --c-inchiostro: var(--c-bianco); --c-tenue: var(--c-minore); } .sezione--foto::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .45); pointer-events: none; } .sezione--foto > * { position: relative; z-index: 1; } .sezione--rientrata-poco { padding-inline: clamp(1.25rem, 6vw, 5rem); } .separatore { height: 1px; margin: 0; border: 0; background: var(--c-separatori); } /* 🚨 LA VECCHIA TESTATA DENTRO LA HOME. (7/8/2026.) La prima sezione del contenuto della home **è un menù**: dentro ci sono `[nexen_menu menu="sx"]`, `[nexen_menu menu="dx"]`, `[nexen_ricerca]` e `[nexen_menu menu="utente"]`. Non è un errore della conversione: nel JSON le **prime sei sezioni** sono la vecchia testata in sei varianti (`_title`: DESKTOP, TABLET, MOBILE…), e sul sito di oggi sono spente da una riga scritta a mano dal grafico: body:not(.logged-in) #sezioninolog { display: none } Quella riga si aggancia a un `_element_id`, e `elementor-a-html.py` **non legge `_element_id` affatto**. Risultato: un secondo menù, alto **654px**, in mezzo alla prima pagina, visto da chiunque. È la parte grossa del +11,0% con cui la home esce dal cancello a 1440. 📌 **La sezione NON si toglie**: Gabriele, il 6/8, *«dalla home non si toglie niente»*. Si riproduce quello che fa il vivo, cioè nasconderla a chi non è entrato — e a chi è entrato resta visibile, come là. ⚠ **Questo è un ponte, e va detto.** L'aggancio giusto è l'identificativo del grafico; qui si aggancia al **contenuto** (`:has(.nexen-menu)`), che su questo sito è preciso — delle 61 pagine convertite **solo la home** ha un `[nexen_menu]` dentro il testo — ma resta un aggancio indiretto. Si toglie il giorno in cui il convertitore porta `_element_id`: quel file, la notte in cui questa riga è stata scritta, era dichiarato dalla sessione Mancini. ✅ **19/8/2026 — il convertitore adesso legge `_element_id`.** Le quattro sezioni `sezioninolog` non escono più in pagina: `SEZIONI_SCARTATE` in `_conversione/elementor-a-html-cimiteri.py`, e nei «lasciati fuori» c'è una riga per ognuna. La home passa da 26.020 a 25.183 byte di `post_content` e la sua misura a 1440 **non si muove** (54,76% prima, 54,76% dopo): la prova che qui non si è tolto niente che si vedesse — si è tolto markup che il foglio di stile nascondeva comunque. 📌 **La riga qui sotto resta lo stesso, ed è una rete, non più un ponte.** Il `post_content` di prima è ancora nel dump di `~/nexen-rilancio/20260804-pre-T/`: chi lo ripristina senza rigenerare si ritroverebbe la seconda barra, e questa riga gliela spegne. Si toglie quando quel dump non è più una strada. */ body:not(.logged-in) .pagina__contenuto > .sezione:has(.nexen-menu) { display: none; } /* ---------------------------------------------------------------- colonne */ .colonne { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); /* ⚠ ANCHE LE SEZIONI ANNIDATE HANNO UN RESPIRO DICHIARATO, E NON LO LEGGEVA NESSUNO. (6/8/2026.) `elementor-a-html.py` scrive `--su`, `--giu` e le loro varianti di tablet e telefono su ogni `.colonne` che le dichiara — sono **sei** occorrenze, sei per variante — e qui c'era solo `display: grid`. Il dato arrivava e cadeva a terra. Su `la-tua-pubblicita` la riga a due colonne dichiara `margin-top: 30px` e sul vivo si vedono: 30px che noi non avevamo. ⛔ **E si legge con il selettore di attributo, non con `var(--su, 0)`.** Le variabili CSS **si ereditano**: `var(--su)` dentro `.colonne` avrebbe preso il respiro della SEZIONE MADRE — su `la-tua-pubblicita` 50px sopra e 50 sotto — e ogni riga a colonne del sito sarebbe cresciuta di cento pixel senza che nessun dato lo dicesse. Il ripiego zero non salva da questo: il valore ereditato non è mai il ripiego. Con `[style*="--su:"]` la regola vale **solo dove il dato è scritto su quell'elemento**, ed è lo stesso schema che il tema usa già per il tablet e per il telefono. */ } .colonne[style*="--su:"] { padding-block-start: max(0px, var(--su)); margin-block-start: min(0px, var(--su)); } .colonne[style*="--giu:"] { padding-block-end: max(0px, var(--giu)); margin-block-end: min(0px, var(--giu)); } /* `content_position` di Elementor: dove stanno le colonne dentro la riga quando una è più corta dell'altra. `elementor-a-html.py` lo scrive come `--vert` e qui non lo leggeva nessuno — nono dato scritto e caduto a terra contato stanotte. Stesso selettore di attributo, stessa ragione: `--vert` si eredita come tutte le variabili. */ .colonne[style*="--vert:"] { align-items: var(--vert); } .colonne--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .colonne--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .colonne--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .colonne--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .colonne--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } /* 🚨 ANCHE UNA COLONNA HA UN FONDO, E OGGI NON GLIELO PORTA NESSUNO. (15/8/2026.) La riga c'era per la sezione (`:68`) e per il riquadro (`.riquadro`), per la colonna no. E la colonna è proprio dove il vivo lo mette: su `/termini-uso/` il rettangolo chiaro dietro al testo è `DIV.elementor-widget-wrap 1250×1109 → rgba(165,165,165,0.1)`, cioè il fondo di una **colonna**, non di una sezione. ⚠ QUESTA RIGA OGGI NON DIPINGE NIENTE, ed è giusto così: nessuna pagina convertita porta `--fondo` su una colonna, perché a perderlo è il CONVERTITORE, non il tema — `elementor-a-html-cimiteri.py` legge `background_color` solo sulle sezioni, e solo quando è scritto per esteso. Contati sull'estrazione del 4/8: **40 colonne con un fondo su 23 pagine** (26 delle quali rimandano a un colore globale del Kit, 14 lo scrivono), più **12 sezioni** il cui fondo è un rimando globale e sparisce per la stessa ragione. In tutto **29 pagine**. Rigenerare la conversione non è compito di questo giro: questa riga è la metà che sta nel tema, e quando la conversione tornerà a scrivere `--fondo` sulle colonne il fondo comparirà da solo. ⛔ SELETTORE DI ATTRIBUTO, E NON PER SIMMETRIA CON LE RIGHE QUI SOTTO: scritto come `.colonna { background-color: var(--fondo, transparent) }` **rompe il sito**, e l'ho misurato lo stesso giorno. `--fondo` è una proprietà personalizzata, quindi si EREDITA: una sezione che dichiara `--fondo:#000` lo passa a tutte le colonne dentro di lei, che si sono ridipinte del colore della sezione. Il metro l'ha visto subito — la home, che non doveva muoversi di un pixel, si è spostata di **+1,17% a 1440, +1,79% a 768, +1,01% a 375**. Con `[style*="--fondo"]` dipinge solo la colonna che se lo scrive addosso. */ .colonna { min-width: 0; } .colonna[style*="--fondo"] { background-color: var(--fondo); } /* E lo stesso per una RIGA, dal 21/8/2026: `fondo_di()` era chiamata sulle sezioni e sulle colonne, non sulle righe annidate — e sulla home sono le fasce chiare sotto il testo. La fascia `c42a916` dichiara #F7F7F7 **solo** come rimando globale del Kit, e senza di lei «Richiedi una lapide digitale» e «Servizio Gratuito» stavano sul nero: 2,97:1 da noi contro 6,20:1 sul vivo. ⛔ Selettore di attributo, per la stessa ragione scritta qui sopra. */ .riga[style*="--fondo"], .colonne[style*="--fondo"] { background-color: var(--fondo); } /* 🚨 REGOLA 1, SQUADRA S (26/8/2026) — LA FASCIA DEI SERVIZI ERA STROZZATA A 1140/1200, CON LE BANDE NERE AI LATI. Misurato sullo staging a 1905: il fondo chiaro `#F7F7F7` delle due righe «Manifesti Free/Pro» (le sei schede) cominciava a x≈352 e finiva a x≈1553, cioè 1201px centrati su una finestra di 1905 — il `max-width` che `.sezione > .colonne` mette al CONTENUTO (riga 108) stava tappando anche il COLORE di fondo, che sul vivo va da bordo a bordo. Non si allarga la scatola: le colonne devono restare nei loro 1140/1200, altrimenti le tre schede si staccano dal margine di tutta la pagina (lo stesso difetto già trovato e tolto il 22/8 per `.riga--intera`, v. sopra). Si allarga solo il COLORE, con un'ombra piena — `box-shadow: 0 0 0 100vmax` non costa un byte di margine e `.pagina__contenuto{overflow-x:clip}` (riga 729) la taglia esatta al bordo della finestra, senza barra orizzontale. Perimetro: `--fondo:#F7F7F7` su `.colonne` esce due volte in tutta la home (le righe Free e Pro), ed è il solo posto giusto per questa ombra — un `--fondo` generico allargherebbe anche riquadri che sul vivo restano nella colonna (es. i pulsanti Accedi/Registrati, `#FFFFFF00`). */ /* 🚨 CORRETTO IL 26/8 SERA, e il difetto l'ha filmato Gabriele. `box-shadow: 0 0 0 100vmax` allarga il colore in TUTTE le direzioni: a 1440 sono 1440px anche VERSO L'ALTO, e coprivano per intero la fascia sopra — quella del cimitero degli animali. Misurato: 976px uniformi #F7F7F7, il 15% della pagina, con dentro titolo, testo, bottone e fotografia del cane resi invisibili. Provato togliendo l'ombra da JS: la fotografia ricompare. 👉 L'ombra risolveva un difetto vero (il fondo strozzato a 1140 con due bande nere ai lati) e ne creava uno peggiore. Qui si allarga SOLO DI LATO. */ .colonne[style*="--fondo:#F7F7F7"] { position: relative; background: none; } .colonne[style*="--fondo:#F7F7F7"]::before { content: ""; position: absolute; inset-block: 0; inset-inline: -100vmax; background: var(--fondo); z-index: 0; } .colonne[style*="--fondo:#F7F7F7"] > * { position: relative; z-index: 1; } /* ================================ la visibilità per dispositivo (15/8/2026) 🚨 IL DIFETTO CHE HA FATTO NASCERE QUESTE TRE RIGHE SI VEDEVA A OCCHIO NUDO. Su `prepara-manifesto` compariva **a 1440** il riquadro «ATTENZIONE! *A causa delle dimensioni ridotte del tuo display*, è fortemente consigliato creare i manifesti funebri da PC o Tablet muniti di tastiera». Cioè a chi apre il sito da un monitor grande stavamo dicendo che il suo schermo è piccolo — una pagina che sembra rotta, non 125px di geometria. Nel JSON quel widget porta `hide_desktop`, e il convertitore non lo portava fuori: adesso sì, come classe (v. `classi_visibilita()`). Sono **55 dichiarazioni su 7 pagine**. ⛔ LE SOGLIE SONO QUELLE DEL SITO, NON NUOVE, e la ragione è che soglie nuove fanno sparire o comparire qualcosa a una larghezza dove nient'altro si muove. Sono le stesse tre fasce già usate da `.colonne`, dai rientri e dai corpi in questo stesso foglio — 800 e 1300, misurate sul vivo il 6/8/2026 (v. la nota «800 E 1300 NON SONO NUMERI DI COMODO»), non i 767/1024 predefiniti di Elementor: telefono fino a 800px → `nascosto-telefono` tavoletta 801 – 1300px → `nascosto-tavoletta` schermo da 1301px → `nascosto-schermo` ⚠ Quindi **768 su questo sito è TELEFONO, non tavoletta**: un elemento `hide_tablet` a 768 si vede, e a 1000 no. Chi prova a 768 aspettandosi la tavoletta legge il numero al contrario. `display: none` e non `visibility: hidden`: l'elemento non deve occupare spazio, che è tutto il punto — con `hidden` i 125px sarebbero rimasti lì. ⛔ `!important`, E NON PER PIGRIZIA: È MISURATO. (15/8/2026.) Scritte senza, queste tre righe pesano (0,1,0) e **perdevano**: `.elemento` `:has(.larghezza-auto)`, poche righe più su, pesa (0,2,0) — `:has()` somma la specificità del suo argomento — e riportava a `display: contents` gli involucri che dovevano sparire. Misurato sulla home a 375: **5 elementi su 8 con `nascosto-telefono` restavano `display: contents`** invece di sparire. Non è un caso limite: una riga che dice «non mostrare» deve battere ogni riga che dice «come mostrare», perché sono due domande diverse e la prima viene prima. È anche quello che fa il sito di oggi, verificato sul vivo: `.elementor-hidden-desktop` a 1440 calcola `display: none`, altezza 0. */ @media (max-width: 800px) { .nascosto-telefono { display: none !important; } } @media (min-width: 801px) and (max-width: 1300px) { .nascosto-tavoletta { display: none !important; } } @media (min-width: 1301px) { .nascosto-schermo { display: none !important; } } /* 🚨 IL RIENTRO DELLA COLONNA NON LO LEGGEVA NESSUNO — NÉ DI LATO NÉ SOPRA. (7/8/2026.) `elementor-a-html.py` scriveva `--sx` e `--dx` su 25 colonne, e qui `.colonna` aveva **solo `min-width: 0`**: il dato arrivava fino al foglio e cadeva. Il verticale non usciva nemmeno dal convertitore, perché la funzione che lo scrive si chiama «l'imbottitura *laterale*» ed era davvero solo laterale (aggiunto nella copia di cantiere, `_conversione/elementor-a-html-cimiteri.py`). ⚠ **E il rientro laterale non è vestizione: è QUANTO È LARGO IL TESTO.** Su `la-tua-pubblicita` la colonna dichiara `padding: 20px 30px 20px 30px`. I 30 di lato fanno il testo **60px più stretto**, cioè una riga in più ogni tante; i 20 sopra e sotto sono 40px per colonna. Senza, la nostra pagina è più larga e quindi **più corta** del vivo — ed è il segno che mancava per capire perché le pagine con molti widget uscivano corte a 1440 (−12,6%, −12,4%, −11,7%). ⛔ Selettore di ATTRIBUTO, per la quarta volta stanotte: `--su` e `--giu` sono scritti sulla sezione madre e sulla riga, e si **ereditano**. `var(--su)` su `.colonna` prenderebbe i 50px della sezione su ogni colonna del sito. */ .colonna[style*="--sx:"] { padding-inline-start: var(--sx); } .colonna[style*="--dx:"] { padding-inline-end: var(--dx); } .colonna[style*="--su:"] { padding-block-start: max(0px, var(--su)); margin-block-start: min(0px, var(--su)); } .colonna[style*="--giu:"] { padding-block-end: max(0px, var(--giu)); margin-block-end: min(0px, var(--giu)); } .colonna--foto { background-position: center; background-size: cover; min-height: 240px; } /* 🚨 LA FOTOGRAFIA DELLA COLONNA ARRIVAVA FINO AL FOGLIO E CADEVA. (21/8/2026.) La riga qui sopra veste la posizione e il taglio di una fotografia **senza mai nominarla**: nessun `background-image`. Il convertitore scrive `--sfondo` sulle colonne dal 2/8/2026 (`elementor-a-html-cimiteri.py`, ramo `elType == "column"`), e quel dato non lo leggeva nessuno. Misurato sullo staging il 21/8/2026 a 1440, `getComputedStyle` sulla `.colonna--foto` della home: `--sfondo` = url(/wp-content/uploads/2021/10/sfondo-nuvole-home-page-cimiteri-online.webp) `background-image` = **none** E' la meta' dell'eroe che sul vivo e' cielo, e da noi era nera. ⚠ E la fotografia da sola non bastava: la colonna era **larga 0**. Dentro `.riga` (che e' `display: flex`) una colonna il cui unico figlio e' nascosto si stringe sul contenuto, cioe' su niente. Sul vivo la stessa colonna e' `elementor-col-100`, larga 1440 (misurato: `f1602ff`, w 1440, h 540). ⛔ Selettore di ATTRIBUTO come per `--fondo` (v. la nota alla riga 364): `--sfondo` e' una proprieta' personalizzata e si EREDITA — `.colonna--foto` senza attributo prenderebbe la fotografia della sezione madre. Perimetro: `colonna--foto` esce **una volta sola** in tutto il sito convertito (`_conversione/html/16515.html`), quindi queste righe toccano l'eroe della home e nient'altro. */ .colonna--foto[style*="--sfondo"] { background-image: var(--sfondo); background-repeat: no-repeat; } .riga > .colonna--foto { flex: 1 1 100%; } /* 🚨 UNA RIGA CON UNA COLONNA SOLA E' TUTTA DI QUELLA COLONNA. (21/8/2026, F12 secondo giro.) `.riga` e' `display: flex` e `.colonna` non dichiara `flex`, quindi vale il predefinito `0 1 auto`: la colonna **si stringe sul contenuto** invece di prendersi la riga. Dove dentro c'e' del testo non si vede, perche' il testo e' largo da se'. Dove dentro c'e' una figura dichiarata in percentuale il conto gira a vuoto e la colonna esce a meta' riga. Cosa costava, misurato a 1440 sui due siti: la freccia «scorri giu» vivo x=696..744, centro **720** = centro pagina noi x=396..444, centro **420**, decentrata di 300 (cinque frecce su sei; quella dell'eroe, che sta in una colonna larga 1200, era gia' al centro) il pulsante «Vai al Modulo» vivo x=646..794, centro **720** noi x=120..262, centro **191**, appiccicato a sinistra mentre il titolo e il testo sopra di lui sono centrati E' la voce 6 della scheda dello sguardo, «tre assi diversi nella stessa colonna»: non erano tre scelte del grafico, era una colonna che non prendeva la sua riga. ⛔ `:only-child` e non `.colonna` in generale: dove le colonne sono piu' di una si dividono la riga secondo quello che dichiarano, e quel conto qui non si tocca. Con una colonna sola non c'e' niente da dividere, e questo e' anche quello che fa Elementor — `_column_size` assente vuol dire 100. ⚠ E' la stessa forma della riga qui sopra, che per la colonna-fotografia questa cosa la diceva gia' dal 5/8. */ .riga > .colonna:only-child { flex: 1 1 100%; } /* Il taglio in diagonale dell'eroe. E' il blocco 1/11 di `16515` nel censimento `_calco/css-scritto-a-mano.md`, mai portato fin qui: @media screen and (min-width: 1200px) { .elementor-element-9823723 { background-image: url(...sfondo-nuvole...); background-position: center top; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 49%); } } piu' il `min-height: 60vh` che il vivo mette sul contenitore di quella sezione (misurato: h 540 su una finestra alta 900). ⚠ La soglia dei 1200 del vivo qui NON si riscrive: la sezione che porta questa colonna e' `.sezione--solo-largo`, che vive solo da 1301px in su (`nascosto-tavoletta` + `nascosto-telefono`). Una media query in piu' sarebbe una seconda soglia per lo stesso pixel. */ .sezione--solo-largo .riga > .colonna--foto { min-height: 60vh; background-position: center top; /* 🚨 REGOLA 2, SQUADRA S (26/8/2026) — IL 49% ERA UNA PERCENTUALE DELL'ALTEZZA, QUINDI L'ANGOLO CAMBIAVA CON LA LARGHEZZA. A 1920 il taglio usciva 8,16°, a 1440 10,83° (SISTEMA-ESTETICO.md §3): la stessa riga di CSS disegnava due tagli diversi solo perché lo schermo cambiava. L'unico angolo stabile misurato sul vivo è il 9,7° del `linear-gradient(189.7deg)`. Qui il punto in basso a sinistra non è più una quota dell'altezza della scatola (che vale «100%» in un polygon): è un'altezza VERA, calcolata da `100vw * tan(9,7°)` — e siccome questa colonna è larga esattamente 100vw (v. sotto), il rapporto fra il dislivello e la larghezza resta 9,7° a qualunque finestra, non solo alle quattro misurate. tan(9,7°) = 0,1709. ⛔ Questa sezione vive solo da 1301px in su (v. la nota sopra): non serve la variante 11° sotto i 768, che qui non si vede mai. */ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 100vw * 0.1709)); /* ⚠ E arriva ai bordi dello schermo: sul vivo quella sezione e' `elementor-section-full_width` e il cielo e' largo 1440, da noi la riga tappava a 1200 e restavano 120px di nero per lato (misurato: cielo da x=120 a x=1320). E' lo stesso scavalco gia' scritto per `.riga--intera` qui sotto — il convertitore su questa riga non scrive quella classe. La barra di scorrimento la taglia `.pagina__contenuto { overflow-x: clip }`. */ flex: none; width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); } .riga { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } /* ⛔ LO STACCO DICHIARATO: PROVATO, MISURATO, TOLTO. Non rifarlo così. (6/8/2026.) `elementor-a-html.py` scrive la classe `stacco` su ogni elemento che porta un respiro suo — il `_margin` del widget, o padding e margine sommati di una riga — e riempie tutta la scala (`--su`, `--su-t`, `--su-m`). Su cimiteri.online esce su **9 pagine** e nessuna regola la nomina: il dato è scritto e buttato all'ultimo passo. Sembrava una vestizione mancante. Vestito come lo veste il tema di Mancini — `margin-block: var(--su) var(--giu)` sulle tre larghezze — e misurato: **le pagine si sono allungate più di quanto il dato dichiari**. `la-tua-pubblicita` da +28,4% a **+40,3%** a 1440 (+97px dove i valori dichiarati sommano +20), `termini-uso` da +5,6 a **+10,5**, `sviluppo-siti-web` da dentro soglia a **+8,3**. A 375 invece migliorava (una pagina in meno fuori soglia). Verdetto misto, e a 1440 chiaramente in perdita: quello spazio nel tema **c'è già**, e arriva dai margini predefiniti di `

` e dei titoli. Quindi non è una vestizione che manca: è una vestizione che **raddoppia**. È la trappola «due correzioni per lo stesso pixel» che il tema di Mancini si è scritto in fronte. Per portare lo stacco davvero bisogna prima azzerare i margini predefiniti dentro `.colonna` — e quello è un pacchetto suo, che tocca tutte le pagine e vuole la sua misura. Non è un ritocco. ⚠ **RIAPERTO IL 7/8/2026, e la premessa di sopra era cambiata sotto i piedi.** Quella misura è stata presa quando i margini del tema erano **scelti a occhio** — titoli `0 0 .5em`, paragrafi `1em`, interlinea 1,6 — cioè più larghi di quelli del vivo. Sommarci sopra lo stacco raddoppiava davvero. Adesso i margini sono **quelli misurati sul vivo** (8/16 sui titoli, 14,4 sui paragrafi, interlinea 1,5), che è la stessa base su cui Elementor applica il `_margin` del widget — e fra il margine di un blocco e quello del figlio c'è l'**accorpamento**, che tiene il più grande, non la somma. E c'era una seconda ragione per riaprire, che nessuna misura aveva visto: **su 52 di questi respiri il valore è NEGATIVO**, e un valore negativo non raddoppia niente — accorcia. Su `mi-presento` a 375 sono −30, −34 e −45, cioè **109px** che la pagina deve perdere e non perdeva, su un +9,2% di troppo. ⛔ **E si legge con il selettore di attributo, per la terza volta stanotte**: `--su` si eredita dalla sezione madre, e `var(--su)` su `.stacco` prenderebbe i 50px della sezione. ⚠ RIAPERTO IL 28/8/2026 -- il doppione trovato sui servizi business. Un elemento che e' insieme .colonne e .stacco prendeva --su/--giu DUE VOLTE: come padding da :466-467 (.colonne[style*="--su:"]) e come margine da qui sotto. Sulla riga "Griglia->Accedi" di 16515.html (--giu:11%) uscivano 154px di padding PIU' 154px di margine -- 154 di troppo, contro il vivo che li' sta a 0 (sezione servizi: 900px = 100vh a 1440 e a 1920, la nostra arrivava a 1159/1280). :not(.colonne) chiude il doppione: chi e' .colonne prende solo il padding di :466-467, chi non lo e' (righe, elementi singoli) prende il margine di qui, come sempre. Tocca 8 occorrenze su 5 pagine (grep su _conversione/html/, 61 file): 16515.html (4, la sezione servizi e altre tre righe a colonne della stessa pagina), 295.html, 14092.html, 50.html, 291.html (1 ciascuna) -- su tutte il verso e' lo stesso, tolgono lo spazio doppiato, mai aggiunto: nessuna ragione per una via piu' stretta di questa. */ .stacco:not(.colonne)[style*="--su:"] { margin-block-start: var(--su); } .stacco:not(.colonne)[style*="--giu:"] { margin-block-end: var(--giu); } /* Una RIGA con la sua fotografia. Sulla home sono la fascia di foglie autunnali, le tombe col QR e gli amici animali: sul vivo sono sezioni annidate con `background_image`, e fino al 5/8/2026 il convertitore leggeva la foto delle sezioni di primo livello e delle colonne, ma non questa. */ .riga--foto, .colonne--foto { background-image: var(--sfondo); background-position: center; background-size: cover; background-repeat: no-repeat; } /* Una fascia è una riga che NON ha contenuto: c'è solo la fotografia, e senza un'altezza sua sarebbe alta zero. `--alta` arriva dal contenuto quando il grafico l'ha dichiarata; il ripiego è la proporzione della fascia sul vivo (1440×549). */ .riga--fascia { display: block; width: 100%; height: var(--alta, min(38vw, 549px)); flex: none; margin: 0; } /* 🚨 L'ALTEZZA DICHIARATA DI UNA RIGA CHE HA CONTENUTO. (21/8/2026, F12.) La fascia qui sopra è una riga SENZA contenuto e la sua altezza si leggeva. Le righe CON contenuto no: `custom_height_inner` arrivava dal JSON e cadeva nel convertitore (riparato lo stesso giorno, ramo `liv > 0`). È la causa delle bande vuote della home. Le sei sezioni di primo livello dichiarano tutte `100vh`, cioè **900 px di minimo** su uno schermo alto 900; se le righe dentro perdono la loro altezza, il contenuto si stringe e i 900 restano scoperti. Misurato sullo staging a 1440 prima della correzione, `getComputedStyle` sulle sezioni di primo livello: sezione altezza contenuto vuoto sotto 73b604d foglie 900 458 px **426 px** di bianco 96d9a7b QR 900 235 px **657 px** di grigio ⛔ SELETTORE DI ATTRIBUTO, non la classe nuda, ed è la quarta volta che questo foglio se lo scrive: `--alta` è una proprietà personalizzata e si EREDITA. `.riga { min-height: var(--alta) }` prenderebbe i `100vh` della sezione madre e farebbe **ogni riga della home alta 900 px** — cioè il difetto di partenza moltiplicato per il numero di righe. ⚠ `--alta-t` non si legge, qui come sulle sezioni (v. la nota a fondo foglio): il tema oggi porta solo il valore dello schermo e quello del telefono. Non è una dimenticanza di questa riga, è il comportamento che c'è. */ .riga[style*="--alta:"], .colonne[style*="--alta:"] { min-height: var(--alta); } /* `layout: full_width` sul vivo: la fascia arriva ai bordi dello schermo, non si ferma alla colonna del testo. Serve scavalcare il `max-width` che `.sezione > *` mette a tutti i figli. */ /* Senza `>`: la fascia non è sempre figlia diretta della sezione — sulla home sta dentro una colonna, e con il figlio diretto la regola non si applicava (fotografia larga 1200 invece dei 1440 del vivo). */ .sezione .riga--intera { max-width: none; width: 100vw; margin-inline: calc(50% - 50vw); /* 🚨 LA FOTOGRAFIA ARRIVA AI BORDI, IL TESTO NO. (21/8/2026, F12 secondo giro.) Le tre righe qui sopra portano la riga a 100vw, ed e' giusto: sul vivo quelle fasce sono `full_width` e la fotografia tocca i bordi. Solo che con la riga larga 1440 anche le sue COLONNE ripartono da x=0, e dentro ci sta del testo. Misurato a 1440 sullo staging del 21/8, tutti i blocchi della home: ogni sezione, ogni riga, ogni colonna con testo x = **120** la colonna del QR («Darai piu' valore…») x = **0**, larga 704 la colonna delle foglie (marchio + presentazione) x = **0**, larga 1440 Il testo del QR cominciava a 4 px dal bordo della finestra e finiva a 704, lasciando vuota tutta la meta' destra: e' l'unico blocco della pagina che non rispetta il margine di 120 che tiene insieme il resto. Il rapporto del primo giro lo elencava sotto «gusto, non difetto». Non lo e': un allineamento rotto rispetto a TUTTA la pagina e' la voce 6 della scheda dello sguardo. L'imbottitura ridà alla riga la gabbia della sezione senza toglierle la larghezza: lo sfondo si dipinge sulla scatola intera (l'imbottitura sta DENTRO, e `background-origin` predefinito e' `padding-box`, che qui coincide col bordo), il contenuto sta nei 1200 centrati come tutti. ⛔ `max(0px, …)` e non il conto nudo: sotto i 1200 px di finestra la sottrazione va sotto zero e un'imbottitura negativa non esiste. A 768 e a 375 questa riga vale zero e non cambia niente — verificato nelle catture. ⚠ Perimetro: `riga--intera` esce **3 volte su tutte e 61 le pagine**, e tutte e tre sulla home. Due hanno del testo dentro (foglie, QR), la terza e' `riga--fascia`, cioe' la sola fotografia degli animali: li' non c'e' contenuto e l'imbottitura non sposta niente. ⛔ **TOLTA IL 22/8/2026, F12 quarto giro: era una gronda inventata.** Il difetto era vero — il testo del QR cominciava a 4px dal bordo — ma la causa non era che alla riga mancasse la gabbia: era che al WIDGET dentro mancava la sua imbottitura, che il convertitore buttava. Rimessa quella (`--imb-*` e `--mrg-*`, v. in fondo al foglio), i 120px di qui si sommano e il testo si stringe. Misurato a 1440, «Nell'era digitale...»: vivo x=352 largo 736 con la gronda x=472 largo **496** (una gronda di troppo) senza x=352 largo **736** (uguale al vivo) e il paragrafo del QR: vivo x=864 largo 432, con la gronda x=736 largo 584, senza x=864 largo 432. 👉 Una compensazione scritta per un sintomo va tolta quando si trova il dato che mancava, altrimenti si correggono due volte gli stessi pixel. */ } /* ⚠ E il contenuto TAGLIA quello che esce di lato, perché `100vw` qui sopra comprende anche la barra di scorrimento: su un browser vero che la mostra, la fascia sarebbe ~15px più larga dello spazio disponibile e comparirebbe una barra ORIZZONTALE su tutto il sito. Misurato in headless non si vede — lì la barra non c'è — ed è esattamente il difetto che questa serata ha visto quattro volte: uno strumento che non ha la cosa che romperebbe non può dire che non si rompe. `clip` e non `hidden`: `hidden` creerebbe un contenitore di scorrimento e ammazzerebbe `position: sticky` dentro la pagina. */ .pagina__contenuto { overflow-x: clip; } /* --------------------------------------------------------------------------- I TRE TAGLI GRANDI DELLA HOME, MAI PORTATI. (26/8/2026, SQUADRA U.) Sono i blocchi 3, 5 e 6 di 11 censiti in `_calco/css-scritto-a-mano.md` (5/8/2026) dentro `post-16515.css`: `clip-path: polygon()` scritto a mano nel riquadro CSS di Elementor, per-elemento, in coppia `min-width:1200px`/`max-width:1199px`. Il convertitore (`elementor-a-html-cimiteri.py`, righe 3219-3314) legge solo `shape_divider_*` e non li ha mai tradotti — v. anche REGOLA 2 qui sopra, che ha risolto lo stesso problema sul quarto taglio (l'eroe, blocco 1/11). ⚠ QUI LA MATEMATICA È DIVERSA DA QUELLA DELL'EROE, E VA DETTO PERCHÉ. REGOLA 2 ha scoperto che il 49% dell'eroe era una percentuale dell'ALTEZZA della scatola, e siccome quella scatola è larga 100vw ma alta un `min-height: 60vh` che il contenuto poteva spingere oltre, la percentuale usciva un angolo diverso a ogni larghezza (8,16° a 1920, 10,83° a 1440) mentre il vivo mostra un angolo VERO stabile (9,7°, letto da un `linear-gradient` indipendente dalla scatola). Qui non c'è nessun gradiente esterno da cui leggere un angolo vero — solo gli angoli misurati sul vivo a due larghezze, dal brief: fascia id alta 1920 1440 foglie 89494df 540px 5,6° 7,5° lapide c5159bd 495px 1,9°/1,5° 2,6°/2,0° cane 47ad35a 549px 2,5°/2,1° 3,3°/2,8° Rifacendo il conto con le percentuali GREZZE di Elementor (v. sotto ogni regola) e l'altezza dichiarata dalla tabella, i sei angoli tornano ESATTI, alla prima cifra decimale, su tutte e tre le fasce — per esempio le foglie: atan(0,35×540 / 1920) = 5,63° ≈ 5,6°, atan(0,35×540 / 1440) = 7,48° ≈ 7,5°. Cosa vuol dire: qui l'altezza NON si muove con la larghezza (`--alta` è lo stesso vh a 1920 e a 1440, il contenuto non la spinge oltre come succedeva sull'eroe) — è la LARGHEZZA a cambiare da sola, e un dislivello che è una quota fissa dell'altezza dà per forza un angolo diverso a ogni larghezza. Non è il bug dell'eroe: è la trigonometria di una quota fissa vista da larghezze diverse. ⛔ Quindi qui `100vw × tan(angolo)` sarebbe SBAGLIATO: farebbe crescere il dislivello con la larghezza, mentre il vivo lo tiene fisso. Verificato coi due angoli insieme (non uno solo, come poteva sembrare bastasse): nessun angolo unico moltiplicato per `100vw` riproduce ENTRAMBI 5,6° a 1920 e 7,5° a 1440 — solo un dislivello fisso in pixel lo fa. La tecnica resta la stessa dell'eroe nello spirito (mai la percentuale della scatola, un numero calcolato e scritto in un `calc()`): cambia solo QUALE quantità è quella stabile — lì l'angolo, qui il pixel. ⚠ Sotto i 1200px non ci sono angoli misurati nel brief: i dislivelli lì sotto sono ricalcolati con lo stesso metodo (percentuale grezza × altezza dichiarata), non ri-misurati sul vivo. Se un giro futuro li misura e non tornano, si aggiorna solo quel numero. */ /* REGOLA 6, SQUADRA U — fascia delle foglie autunnali (89494df), verso basso-destra. Percentuali grezze: min-width:1200 → 35%/65% (dislivello simmetrico 0,35×540 = 189px); max-width:1199 → 0%/86% (nessun taglio in alto, 0,14×540 = 75,6px in basso). */ .riga--foto.riga--intera[style*="foglie-cimitero-autunno-2.webp"] { clip-path: polygon(0 0, 100% 189px, 100% 100%, 0 calc(100% - 189px)); } @media (max-width: 1199px) { .riga--foto.riga--intera[style*="foglie-cimitero-autunno-2.webp"] { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 75.6px)); } } /* SQ-HTML (33-gabriele/SQ-HTML.md, G6) — LO STACCO SPARITO CON IL TITOLO. G6 ha tolto l'`

` "Cimiteri.Online" fra il marchio e il paragrafo "Nell'era digitale…" di questa fascia (ordine di Gabriele: la scritta non torna, in nessuna forma). Quell'h2 portava anche l'aria: era `.stacco` con `--su:4rem`, lo stesso numero che questa pagina usa altrove per lo stacco sotto un marchio (l'h2 dell'eroe, `16515.html:5`, `--su:4rem`). Tolto il titolo, resta solo la regola generica fra `.elemento` fratelli (`.colonna > .elemento:not(:last-child)`, riga 288): **PRIMA 20px**, il paragrafo incollato al logo su una fascia alta 60vh. Non si rimette la scritta (sarebbe aggirare l'ordine con un `::before`): si rimette solo l'aria, con lo stesso numero che il titolo portava e che il resto del sito già usa per questo stacco. **DOPO 4rem (64px)**, mirato solo qui perché il resto del sito continua a usare i 20px generici fra elementi qualunque. */ .riga--foto.riga--intera[style*="foglie-cimitero-autunno-2.webp"] > .colonna > .elemento:first-child { margin-block-end: 4rem; } /* 🚨 30/8/2026 — TROVATO DAL CERTIFICATO (R2-BORDO), NON DA UN OCCHIO: L'AREA DI CLIC DEL MARCHIO TOCCA IL BORDO A 375, IL LOGO VISIBILE NO. Il logo qui dentro (``) si centra con `margin-inline:auto` sull'IMG (riga ~3510: serve a tutte le immagini `.elemento > a > img` del sito, 124 casi su 61 pagine — non si tocca, e' condivisa). Ma un margine automatico centra un box STRETTO dentro un contenitore LARGO: perche' funzioni, l'ancora attorno all'immagine resta `display:block` a piena larghezza — 363px a 375, fino al bordo (0px di margine a destra), mentre il logo dentro resta 150px e ben centrato. **Verificato aprendo l'immagine** (`verifica-logo-bordo-crop.png`): a schermo non si vede niente fuori posto, il logo e' centrato con margine su entrambi i lati — è un'area di click invisibile piu' larga del disegno, non un difetto visivo. Si stringe comunque, scoped alla sola ancora di questa fascia (non alla regola condivisa): l'ancora si centra da sola con `width:fit-content`, l'immagine dentro non ha piu' bisogno del proprio margine automatico ma lo tiene (l'altra regola non la vede piu', essendo gia' stretta) per non toccare le altre 123 immagini che la condividono. */ .riga--foto.riga--intera[style*="foglie-cimitero-autunno-2.webp"] > .colonna > .elemento:first-child > a { display: block; width: fit-content; margin-inline: auto; } /* REGOLA 7, SQUADRA U — fascia della lapide col QR (c5159bd), verso alto-destra. ⚠ NON è un parallelogramma: bordo sopra e sotto hanno dislivelli diversi (13% e 10%), un trapezio a imbuto — non si semplifica a un valore solo. Percentuali grezze: min-width:1200 → 13%/90% (0,13×495 = 64,35px sopra, 0,10×495 = 49,5px sotto); max-width:1199 → 6%/94% (0,06×495 = 29,7px, simmetrico). 🚨 FIX-1920 (28/8/2026): IL RITAGLIO TAGLIAVA ANCHE IL TITOLO, NON SOLO LA FOTO. Misurato via DOM su staging: l'h2 «Darai più valore…» sta a soli 8px dal bordo alto della riga (getBoundingClientRect), e la sua colonna comincia a x=50% del contenitore. A quell'x il ritaglio qui sopra toglie 64,35×(1-0,5)≈32px dall'alto — più degli 8px di margine dell'h2, quindi le lettere finiscono nella zona invisibile. Presente a QUALSIASI larghezza da 800px in su: anche a 1440 (misurato: taglia solo «DA» di «DARAI», poco visibile). Peggiora a 1920/2560 perché il titolo ha una lunghezza fissa in px (--corpo:30px, non risponde alla larghezza) mentre la colonna di testo cresce con la finestra: il testo, centrato nella colonna, si avvicina al centro della colonna — cioè più a fondo nella fascia tagliata — quanto più la finestra è larga, finché quasi tutto il titolo ci cade dentro. Il ritaglio era sul CONTENITORE intero (foto + le due colonne, titolo e paragrafo compresi): la foto va tagliata, il testo no. Si sposta la foto (e il suo ritaglio) su uno pseudo-elemento dietro al contenuto — stessa immagine, via `--sfondo` che il pseudo eredita, stesso poligono — e il contenuto vero resta sopra, fuori dal clip-path. `isolation: isolate` tiene lo z-index negativo del pseudo dentro questo contenitore, cosi' non dipende da quale antenato piu' in alto ha gia' un contesto di sovrapposizione. */ .colonne.riga--foto[style*="tombe-cimitero-lapidi-qr-code"] { position: relative; isolation: isolate; background-image: none; } .colonne.riga--foto[style*="tombe-cimitero-lapidi-qr-code"]::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--sfondo); background-position: center; background-size: cover; background-repeat: no-repeat; /* 🚨 G9(c), 28/8/2026 — IL TAGLIO SOPRA E QUELLO SOTTO TAGLIAVANO LO STESSO LATO: NON ERA UN TRAPEZIO A IMBUTO, ERA UN LATO PIENO E L'ALTRO NO. I quattro punti di prima — (0 64.35px), (100% 0), (100% 100%), (0 calc(100% - 49.5px)) — tagliano il TOP a sinistra e il BOTTOM di nuovo a sinistra: a destra (x=100%) i punti sono (100% 0) e (100% 100%), cioè altezza PIENA, zero taglio. Risultato: a destra il bordo inferiore combacia col rettangolo della scatola — non è «diagonale che si raddrizza», è proprio dritto, perché lì non c'è nessun taglio. Gabriele l'ha visto: «parte in diagonale da sinistra e poi si raddrizza a destra». Un imbuto vero taglia due angoli OPPOSTI (come la REGOLA 6 qui sopra: su a destra, giù a sinistra) — qui invece tagliava due angoli dallo STESSO lato. Si sposta il taglio del bordo inferiore sul lato destro (`100% calc(100% - 49.5px)` invece di `100% 100%`, e `0 100%` al posto del punto sinistro): stessi due dislivelli di sempre (64,35px sopra, 49,5px sotto — nessun numero nuovo, solo l'angolo giusto), ora un'unica diagonale per bordo, da bordo a bordo. */ clip-path: polygon(0 64.35px, 100% 0, 100% calc(100% - 49.5px), 0 100%); } @media (max-width: 1199px) { .colonne.riga--foto[style*="tombe-cimitero-lapidi-qr-code"]::before { clip-path: polygon(0 29.7px, 100% 0, 100% calc(100% - 29.7px), 0 100%); } } /* 🚨 G9(a), 28/8/2026 MATTINA — SBAGLIATO, RIAPERTO LA SERA STESSA. La nota che stava qui diceva che a questa larghezza il vivo non ha più due colonne, e collassava la griglia a UNA sola larga quanto la foto: il titolo e i due paragrafi finivano centrati sull'immagine INTERA, cioè sopra la lapide e sopra il QR, che restavano dietro le parole. Gabriele, guardando il risultato: «ho detto testo centrato alla foto, ma intendevo centrato nello spazio libero orizzontale, guarda come si vede sul mio sito live». E sul vivo è così: la lapide col QR sta nella metà sinistra, il testo nella metà destra, centrato dentro quella metà — mai sopra il disegno. Non mancava il collasso: mancava la lettura dell'ordine. Si toglie la riga di sopra e torna a valere `.colonne--2` (riga 475), che è la struttura che il convertitore scrive già (`16515.html:85`): la colonna sinistra `role="presentation"` resta vuota e riserva lo spazio della lapide, quella di destra prende testo e `a-centro` lo centra dentro sé stessa, non sull'immagine intera. ⛔ Solo sopra gli 800px: sotto, la riga già in fondo al foglio (26/8, «IL TESTO DEL QR PASSA SOTTO IL SUO STESSO GRAFICO») impila le colonne di proposito e sposta l'inquadratura della foto a destra per lo stesso motivo — quella non si tocca, ed è per questo che qui non serve una media query: il collasso di sopra era SENZA soglia e vinceva anche a 1920, dove le colonne sul vivo stanno affiancate. `align-items: center` in più: `.colonne` è una griglia (riga 442) e non centra da sola come fa `.riga` (flex, riga 746) — senza, il testo parte dall'alto del `min-height:55vh` (riga 843) invece di stare a mezza foto come sul vivo. Perimetro invariato: lo stesso selettore di REGOLA 7, una sola occorrenza su tutta la home. */ .colonne.riga--foto[style*="tombe-cimitero-lapidi-qr-code"] { align-items: center; } /* REGOLA 8, SQUADRA U — fascia del cane al tramonto (47ad35a), la sola fotografia senza testo sopra, verso basso-destra. Percentuali grezze: min-width:1200 → 15%/87% (0,15×549 = 82,35px sopra, 0,13×549 = 71,37px sotto); max-width:1199 → 8%/92% (0,08×549 = 43,92px, simmetrico). ⚠ Selettore su `[style*="tombe-animali-domestici"]`, non sull'URL intero: `.riga--fascia` esce una volta sola sulla home, ma il prefisso del file («tombe-animali-domestici…») è quello che la distingue dalla lapide qui sopra, che condivide la coda del nome («…qr-code-collegamento-cimiteri- online.webp»). */ /* 🚨 FOTO-CANE (28/8/2026) — LA DIAGONALE DI SOTTO USCIVA A SCALINO, NON DA BORDO A BORDO. Il `clip-path` era già giusto (stessi numeri del vivo, confermato da `getComputedStyle` su entrambi i siti a 1920: identico `polygon(0px 0px, 100% 82.35px, 100% calc(100% - 71.37px), 0px 100%)`). Non era un taglio sbagliato: era un ORDINE DI SOVRAPPOSIZIONE sbagliato. Questa riga non ha contenuto (`.riga--fascia`), quindi non ha una sua altezza dichiarata dai fratelli e sfora sotto la propria `
` di 15,6px (549 di foto contro 900 di `100vh`, con la sezione sopra di testo che ne mangia il resto). Quei 15,6px avanzano nel flusso normale, e la `
` SUCCESSIVA (Servizi Business) — anche lei senza `position`, cioè anche lei "statica" — si dipinge SOPRA quell'avanzo perché viene dopo nell'ordine del documento: le zone statiche si dipingono nell'ordine in cui compaiono, l'ultima vince. Risultato misurato pixel per pixel su `staging.cimiteri.online` a 1920: da x=0 a x≈1280 il confine appariva PIATTO a y=4389 (il bordo della sezione dopo, non la foto), e solo da x≈1280 a 1920 si vedeva la vera diagonale — lo scalino che ha visto Gabriele. Prova diretta: con `position:relative` la riga passa dal gruppo di disegno "blocchi statici in ordine di documento" al gruppo "elementi posizionati", che si dipinge DOPO — la sezione successiva (che resta statica) torna sotto, e la diagonale è tornata unica da bordo a bordo su tutta la larghezza (verificato: senza `z-index` non bastava, qualcosa lì sotto ha già uno z-index proprio; con `z-index:5` la foto vince in modo netto, sopra ai 2/3 che il foglio usa altrove per le fasce "davanti"). Non è la stessa causa del bug di REGOLA 7 (due angoli tagliati sullo stesso lato) né dei tagli in px fissi anziché in proporzione: qui il taglio era già corretto, era coperto. */ .riga--fascia[style*="tombe-animali-domestici"] { position: relative; z-index: 5; /* 🔁 29/8/2026 - IN PERCENTUALE, COME IL VIVO, NON IN PIXEL. Il commento qui sopra dice che il taglio era «già giusto, stessi numeri del vivo, confermato su entrambi i siti **a 1920**». Ed è lì l'errore: il vivo scrive `polygon(0 0, 100% 15%, 100% 87%, 0 100%)`, in PERCENTUALE; noi scrivevamo 82,35px e 71,37px. Su una foto alta 549px sono lo stesso taglio — 82,35/549 = 15%, 71,37/549 = 13% — e infatti a 1080 le due misure coincidevano. Su una finestra più bassa la foto si accorcia e i pixel no: il taglio resta grande mentre tutto il resto rimpicciolisce, e si somma alla fascia della sezione sotto. 👉 Verificare due valori a UNA sola risoluzione non dice se sono la stessa cosa: dice solo che in quel punto valgono uguale. */ clip-path: polygon(0 0, 100% 15%, 100% 87%, 0 100%); } @media (max-width: 1199px) { .riga--fascia[style*="tombe-animali-domestici"] { clip-path: polygon(0 0, 100% 43.92px, 100% calc(100% - 43.92px), 0 100%); } } /* 🚨 IL TITOLO DI «SERVIZI BUSINESS» SPARIVA SOTTO LA FOTO DEGLI ANIMALI. (30/8/2026, ZONA BASSA — segnalazione di Gabriele: testo nascosto/sbordante sulla fascia Servizi.) La foto qui sopra ha `position:relative;z-index:5` apposta (per il taglio diagonale che deve vincere sulla sezione dopo, v. il commento sopra REGOLA 8) e la sua riga (`.riga--fascia`, senza contenuto) e' piu' alta del rapporto d'aspetto che della sezione: sborda sotto il fondo della PROPRIA sezione (misurato a 375/768: foto fino a y=3809, sezione fino a 3766 — 43px di sconfino) ed entra nella sezione «Servizi business» (id=6) che viene subito dopo. `.sezione` ha `position:relative` ma `z-index:auto`, quindi NON isola un contesto di sovrapposizione proprio: lo z-index:5 della foto si confronta con quello del titolo (l'`.elemento` che avvolge l'h2, z-index:2, riga ~2360) nello stesso livello, e 5 batte 2 — sul pezzo di larghezza dove sconfina, la foto vince e copre l'inizio del titolo («SERVIZI BUSINESS P…» spariva, restava solo «…ER OPERATORI DI SETTORE»). Misurato con scroll vero (non solo con la geometria): la dicitura tagliata si vede identica dopo uno scroll reale, non e' un artefatto di cattura. 👉 Non si tocca la foto (REGOLA 8, sopra: serve cosi' per il taglio) ne' la sezione: si alza SOLO il titolo di «Servizi business», sopra il 5 della foto, scoping per id cosi' non cambia nessun altro dei nove h2 della home (`[id="6"]`, lo stesso schema gia' in uso qui sotto). ⛔ `!important` necessario: l'`.elemento` scrive `z-index:2` come STILE INLINE (Elementor), e l'inline vince su qualunque selettore esterno a parità di `!important` — senza, questa regola non si applicherebbe mai. 🚨 SEGUITO, 30/8/2026 (G7) — IL FIX DI SOPRA ALZAVA IL TITOLO SOPRA LA FOTO DEGLI ANIMALI, MA A 1920/1440 IL TITOLO RESTAVA ILLEGGIBILE LO STESSO, PER UNA CAUSA DIVERSA CHE IL Z-INDEX NON TOCCA. Misurato con `getBoundingClientRect`+`getComputedStyle` sullo staging: l'h2 sta a viewport-y 65-87px; il cuneo nero (`.colonne.sezione--fascia-su::before`, riga ~2412 sotto, `inset-block-start:-114.6px` + `height:10vw`≈192px alla larghezza di 1920) arriva **solo fino a y≈72-264** — e il cuneo è uno spicchio sottile a sinistra e profondo a destra (v. commento REGOLA 8): alla x dove comincia la parola "SERVIZI" lo spicchio non è ancora nero, sotto c'è il fondo chiaro dichiarato sulla `.colonna` (`--fondo:#F7F7F7`, 16515.html sezione id="6"). Testo bianco (`color:#F7F7F7` inline) su fondo quasi bianco: **le prime lettere sparivano per contrasto, non per z-index** — lo z-index vinto sopra faceva vedere il testo, ma sopra il colore sbagliato. Non si tocca il cuneo (stessa ragione di sopra: e' tarato sulle icone Free/Pro, cambiarlo ci farebbe perdere quella misura) e non si tocca l'allineamento del titolo (contenuto, fuori da questo foglio): si dà al RIQUADRO del titolo un fondo nero SUO, a piena larghezza della riga, indipendente dalla geometria del cuneo sotto — stesso nero (`--fascia-su-c`), quindi il bordo fra i due non si vede. */ [id="6"] .elemento:has(> h2.a-destra.m-centro.stacco) { z-index: 6 !important; /* 🚨 RICHIESTA DI GABRIELE, 30/8 — LA VERA FONTE DEL NERO DIETRO IL TITOLO NON ERA IL CUNEO DI R10 (quello si tocca poco sopra in questo stesso file), ERA QUESTO RIQUADRO: dato nero apposta il 28/8 perché doveva combaciare col cuneo sottostante (`--fascia-su-c`, qui sotto) senza far vedere il bordo fra i due. Con la sezione diventata chiara, il riquadro segue lo stesso colore del cuneo: stesso ragionamento di allora, colore diverso. Lo `z-index:6 !important` resta, e' di prima. */ background: #F7F7F7; } /* ------------------------------------------------------------------ testi */ /* 🚨 I TITOLI E I COLLEGAMENTI SONO #54595F, E SONO LETTI SUL VIVO. (15/8/2026.) Erano `var(--c-bianco)`, che con il fondo nero di tutto il sito stava in piedi. Con il fondo bianco — che è quello vero, v. `base.css` — sarebbero andati a **1,00:1**: bianco su bianco. Il valore giusto non è una scelta: `getComputedStyle` sul vivo, contando gli elementi del solo contenuto, /termini-uso/ h2 e h3 → rgb(84,89,95) a → rgb(84,89,95) p → rgb(127,127,127) /mi-presento…/ h2 e h3 → rgb(84,89,95) p → rgb(127,127,127) /?s=manifesto h3 ×10 → rgb(84,89,95) a ×20 → rgb(84,89,95) cioè `--c-secondario` per il colore forte e `--c-testo` per il corrente. Il contrasto, con la formula di WCAG, sui due fondi che il sito ha: #54595F su #FFFFFF → **7,07:1** ✓ (titoli e collegamenti, pagine chiare) #FFFFFF su #000000 → **21,0:1** ✓ (home, 404, sezioni scure) #7F7F7F su #FFFFFF → 4,00:1 = quello che fa il vivo sul suo corpo del testo. Non si «corregge»: si copia. `--c-inchiostro` vale #54595F sulle pagine chiare e #FFFFFF su quelle scure, e la riga qui sotto è una sola per tutte e due. */ .pagina h1, .pagina h2, .pagina h3, .pagina h4 { color: var(--c-inchiostro); } .pagina p, .pagina li { color: var(--c-testo); } /* 4/9/2026 (S-RESIDUI-1) — aggiunta `:not([class*="civ-bottone"])`, la stessa esclusione che `pagine-testo.css` §8 usa già per lo stesso motivo: un `` (il componente bottone dell'archivio civile, usato anche fuori dalle pagine di testo — es. `/memorie/`, l'archivio del plugin, che si avvolge in `.pagina` come ogni pagina) perdeva colore e sottolineatura locali contro questa regola, (0,3,1) contro la (0,2,1) del suo stile di componente: bottone d'inchiostro con testo sottolineato in grigio invece che bianco e pulito. */ .pagina a:not(.bottone):not(.pulsante):not([class*="civ-bottone"]) { color: var(--c-inchiostro); text-decoration: underline; text-underline-offset: .18em; } /* 🚨 REGOLA 4, SQUADRA S (26/8/2026) — I TITOLI DELLE SEI SCHEDE DEI SERVIZI ERANO SOTTOLINEATI, E SUL VIVO NON LO SONO MAI. Le sei schede della fascia servizi (MARKETPLACE, PIAZZA DEL CIMITERO, MANIFESTI FUNEBRI FREE, SVILUPPO WEB, PUBBLICITÀ, MANIFESTI FUNEBRI PRO — `_conversione/html/16515.html` righe 128, 135, 142, 150, 157, 164) hanno il titolo scritto come `

TITOLO

`: la regola qui sopra sottolinea ogni collegamento del contenuto, e un titolo-collegamento non fa eccezione. Un titolo non si sottolinea mai su questo sito — è la stessa voce 4 di `SISTEMA-ESTETICO.md` §6 (i titoli sono maiuscolo, mai altro trattamento) — e la regola vale per ogni titolo linkato, non solo per la home: non è mai stato un caso previsto finché nessuna pagina lo faceva. 🚨 PRIMO GIRO SBAGLIATO, TROVATO GUARDANDO LA CATTURA E NON IL CODICE: qui c'era solo `.pagina h2 a { text-decoration:none }`, specificità (0,1,2), e la regola qui sopra — coi suoi due `:not()` — pesa (0,3,1): vince lei, i titoli restavano sottolineati e la schermata lo diceva chiaro. Servono gli stessi due `:not()` anche qui per pareggiare le classi e vincere sugli elementi. */ .pagina h1 a:not(.bottone):not(.pulsante), .pagina h2 a:not(.bottone):not(.pulsante), .pagina h3 a:not(.bottone):not(.pulsante), .pagina h4 a:not(.bottone):not(.pulsante) { text-decoration: none; } .pagina img { margin-block: 1rem; } /* 🚨 GLI ELENCHI E I FILETTI SCRITTI NELL'EDITOR: IL RESPIRO SOPRA E SOTTO NON È NOSTRO. (8/8/2026, letto nei fogli del vivo, non dedotto.) reset.css dd, dl, dt, li, ol, ul { … margin-block: 0 } custom-frontend.min.css .elementor hr { background-color: transparent; margin: 0 } Sono due righe del sito vivo, e valgono su tutte le sue pagine. Da noi `base.css:113` dà a ogni elenco `margin: 0 0 1em` e il filetto si tiene il mezzo em del browser sopra e sotto: **13px per elenco, 13 per filetto**, e dentro un testo lungo diventano un conto vero. Su `politiche-sulla-privacy` il solo pannello aperto ne aveva **dieci elenchi e tre filetti**, più quelli annidati: **370px** dei 372 di troppo a 1440. ⚠ `:not([class])` non è prudenza, è la riga di confine: gli elenchi e i filetti **senza classe** sono l'HTML che il grafico ha scritto nell'editor, e lì il respiro lo deve mettere chi lo mette sul vivo, cioè nessuno. Quelli **con** una classe li ha costruiti il tema — `hr.separatore` (il widget `divider`, 56 sul sito), `ul.carosello`, `ul.elenco-voci`, `ul.social` sulla home, `ul.quattrocentoquattro__strade` sul 404 — e hanno il loro respiro scritto apposta. Contati: 59 elenchi su 64 e 9 filetti su 65 sono senza classe, e le cinque liste della home sono tutte del tema, quindi la home non si muove di un pixel. */ .pagina__contenuto ul:not([class]), .pagina__contenuto ol:not([class]), .pagina__contenuto hr:not([class]) { margin-block: 0; } /* 🚨 E IL RIENTRO DELL'ELENCO È QUELLO DEL BROWSER, NON UNO NOSTRO. (9/8/2026.) Sopra ho azzerato il margine degli elenchi dell'editor perché il vivo lo azzera. Il rientro no, e lì il vivo non tocca niente: `reset.css` gli leva il margine e gli lascia il `padding-inline-start: 40px` del browser. Noi diamo `1.4em` a ogni elenco del sito (`base.css:113`), cioè **18,2px** a 13px di corpo — venti di meno, testo più largo, meno righe. L'8/8 l'avevo misurato e lasciato stare, scrivendo che «va a nostro favore». Era vero e per questo era pericoloso: su `politiche-sulla-privacy` faceva coppia con i blocchi di testo a 14px, che tiravano dall'altra parte, e i due errori si annullavano dentro un numero buono. Chiudendone uno solo la pagina sarebbe uscita. Chiusi tutti e due: **+332px a 375 e +96 a 768** da questa riga, −38 e −49 dalla tipografia, e la pagina passa da −2,1% a +0,2%. ⚠ Stesso confine di sopra, e per la stessa ragione: `:not([class])` sono gli elenchi che il grafico ha scritto nell'editor. `ul.carosello`, `ul.elenco-voci`, `ul.social` e `ul.quattrocentoquattro__strade` sono del tema, hanno il rientro loro, e non si toccano. */ .pagina__contenuto ul:not([class]), .pagina__contenuto ol:not([class]) { padding-inline-start: 40px; } /* --------------------------------------------------------------- pulsanti */ /* 🚨 Censimento del 26/8, terzo giro: «Vai al Modulo» (home) e «Contattaci» (mi-presento, sviluppo-siti-web) usano QUESTA classe, non `.bottone` — sono «lo stesso mestiere» (v. nota sotto) ma due fogli diversi, e il fix di `.bottone` in base.css non li tocca. Stessa misura, stesso motivo: 40 e' sotto i 44 della scheda. */ .pulsante { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .55em 1.4em; /* 🚨 ERA `--c-testo`, E SONO 0,5 PUNTI DI CONTRASTO SOTTO LA SOGLIA. (21/8/2026, F12.) `.pulsante` e `.bottone` fanno lo stesso mestiere e avevano due fondi diversi: #7F7F7F qui, #767676 di la'. Misurato sul pixel della cattura della home, bianco sul fondo del pulsante: **4,00:1**, sotto il 4,5 di WCAG AA per un corpo di 15px. Con `--c-bottone` fa **4,54:1**. ⛔ Non e' un colore nuovo e non e' una scelta: `--c-bottone` sta in `base.css:39` con il conto scritto accanto — «il grigio piu' chiaro su cui il bianco arriva a 4,5:1». Era gia' calcolato, lo usava un componente su due. Adesso lo usano tutti e due. ⚠ Perimetro: `.pulsante` esce su **8 pagine** delle 61. Lo scarto e' di 9 punti per canale, cioe' sotto la soglia di 24 di `confronta-pixel.py`: il metro a pixel non lo vede, e infatti non si e' mosso. */ background: var(--c-bottone); color: var(--c-bianco); font-size: 15px; text-decoration: none; transition: background-color .18s ease; } .pulsante:hover, .pulsante:focus-visible { background: var(--c-secondario); } .pulsante__icona { line-height: 0; } /* --------------------------------------------------- carosello e galleria */ /* Il carosello dei manifesti: `scroll-snap`, zero JavaScript. Sostituisce i cinque `media-carousel` di Elementor Pro, che per scorrere cinque immagini caricavano Swiper. */ .carosello { display: flex; gap: 1rem; list-style: none; margin: 1.5rem 0; padding: 0 0 .75rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; overscroll-behavior-x: contain; } .carosello > li { flex: 0 0 clamp(220px, 30%, 320px); scroll-snap-align: start; } .carosello img { width: 100%; margin: 0; } .galleria { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); list-style: none; margin: 1.5rem 0; padding: 0; } .galleria img { width: 100%; margin: 0; } /* ------------------------------------------------- fisarmonica (`toggle`) */ /* Le guide del sito sono sei fisarmoniche. Con Elementor erano un widget `toggle` più il suo JavaScript; qui sono `
` nativi: si aprono col dito, col mouse e con la tastiera, e non c'è niente da caricare. */ .fisarmonica { margin: 1.5rem 0; border-top: 1px solid var(--c-separatori); } .fisarmonica__voce { border-bottom: 1px solid var(--c-separatori); } .fisarmonica__voce > summary { padding: 1rem .25rem; cursor: pointer; font-family: "Lusitana", serif; font-size: 16px; color: var(--c-inchiostro); list-style: none; } .fisarmonica__voce > summary::-webkit-details-marker { display: none; } .fisarmonica__voce > summary::after { content: "+"; float: inline-end; font-size: 20px; line-height: 1; } .fisarmonica__voce[open] > summary::after { content: "–"; } .fisarmonica__corpo { padding: 0 .25rem 1.25rem; } /* ------------------------------------------------- riquadri ed elenchi */ /* Il riquadro con l'icona (`icon-box`). Le misure arrivano dal contenuto, come per le sezioni: il grafico ha deciso 30px sopra e 40 sotto, 19 di stacco sotto il titolo, l'icona a 40px con 30 di aria, il fondo bianco al 58% e un'ombra. Erano tutte nel JSON e nessuna veniva letta: il riquadro usciva alto 129px dove il vivo ne fa 247, e la terza sezione di «Sviluppo siti Web» 433 contro 741. I valori qui sotto sono il ripiego di chi non porta il dato. */ .riquadro { display: block; padding: var(--su, 1.25rem) var(--dx, 1.25rem) var(--giu, 1.25rem) var(--sx, 1.25rem); text-decoration: none; background: var(--fondo, transparent); box-shadow: var(--ombra, none); } /* Le icone che erano di Font Awesome: il disegno lo fa `icone.css`, generato dal font che il sito aveva. Questa regola vale anche per la vecchia forma a ``, che resta per le icone caricate come file. */ .riquadro > img.riquadro__icona { width: 48px; height: auto; } .riquadro__icona { margin: 0 0 var(--icona-aria, .75rem); } .riquadro__titolo { margin: 0 0 var(--stacco, .5rem); font-size: var(--corpo, inherit); color: var(--c-inchiostro); } .riquadro__corpo { color: var(--c-testo); } .elenco-voci { list-style: none; margin: 1rem 0; padding: 0; } .elenco-voci li { margin: 0 0 .4rem; } .social { display: flex; flex-wrap: wrap; gap: .75rem; list-style: none; margin: 1rem 0; padding: 0; } .social__voce { text-decoration: none; } /* ---------------------------------------------------------- scheda doppia */ .scheda-doppia { position: relative; display: block; text-decoration: none; } .scheda-doppia__retro { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; background: rgba(0, 0, 0, .7); transition: opacity .2s ease; } .scheda-doppia:hover .scheda-doppia__retro, .scheda-doppia:focus-visible .scheda-doppia__retro { opacity: 1; } /* ------------------------------------------------------------ gli elenchi */ .elenco { display: grid; gap: 2rem; max-width: var(--larghezza-max); margin-inline: auto; padding: 3rem 1.25rem; } .elenco--risultati { gap: 1.5rem; } .scheda { display: grid; gap: .75rem; } .scheda__titolo { margin: 0; } .scheda__titolo a { color: var(--c-inchiostro); text-decoration: none; } /* A-028: il titolo della notizia reagisce al mouse e alla tastiera (prima nessun segno). */ .scheda__titolo a:hover, .scheda__titolo a:focus-visible { text-decoration: underline; text-underline-offset: 4px; } .scheda__data { margin: 0; font-size: 12px; color: var(--c-secondario); } .scheda__estratto { margin: 0; } .elenco__vuoto { max-width: var(--larghezza-max); margin-inline: auto; padding: 4rem 1.25rem; } /* ============================ la griglia di schede della ricerca (15/8/2026) 🚨 SUL VIVO LA RICERCA È UNA GRIGLIA, NON UN ELENCO — e valeva il 73,79% di pixel diversi a 1440, il confronto peggiore dopo la home. Tutti i numeri qui sotto sono `getComputedStyle` e `getBoundingClientRect` su `cimiteri.online/?s=manifesto`, alle tre larghezze del cancello: larghezza colonne contenitore scheda miniatura 1440 4 × 275,75px 1190px a x=125 276×336 190px 768 1 728px a x=20 728×493 364px 375 1 335px a x=20 335×314 168px stacco fra le schede: 35px sopra/sotto, 29px di fianco, a ogni larghezza Le tre misure del contenitore sono **la stessa regola**: `min(1190px, 100% − 40px)`. A 1440 fa 1190 e lo centra a 125; a 768 fa 728; a 375 fa 335. E le quattro colonne cadono esatte: (1190 − 3×29) / 4 = **275,75**. La miniatura non ha un'altezza in pixel ma una percentuale della larghezza della scheda, e il vivo ne usa due: 190/276 = **68,9%** sopra gli 800, 364/728 e 168/335 = **50%** sotto. (È il punto di rottura del sito, 800 e non 767: v. la nota sui punti di rottura più in alto.) ⚠ `object-fit: fill` e non `cover`, ed è misurato: il vivo stira la miniatura dentro il riquadro invece di ritagliarla. A 1440 le due cose coincidono quasi (l'immagine è 208×148, cioè 71,2%, contro un riquadro al 68,9%); a 768, dove il riquadro va al 50%, `cover` taglierebbe dove il vivo schiaccia, e sarebbe mezza miniatura diversa su dieci schede. */ .elenco--carte { display: grid; width: min(1190px, 100% - 40px); max-width: none; margin-inline: auto; padding: 0; grid-template-columns: 1fr; gap: 35px 29px; } @media (min-width: 801px) { .elenco--carte { grid-template-columns: repeat(4, 1fr); } } .scheda--carta { margin: 0; } /* Tutta la scheda è un collegamento solo: sul vivo lo sono la miniatura, il titolo e «Visita »», e tre collegamenti alla stessa pagina sono tre fermate inutili per chi naviga con la tastiera. */ .scheda__carta { display: block; height: 100%; background: var(--c-bianco); box-shadow: 0 0 10px rgba(0, 0, 0, .15); color: var(--c-secondario); text-decoration: none; } .scheda__miniatura { position: relative; display: block; padding-block-end: 50%; overflow: hidden; } @media (min-width: 801px) { .scheda__miniatura { padding-block-end: 68.9%; } } .scheda__miniatura img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; margin: 0; } /* 15px di fianco e 25 sopra: le due misure di `.elementor-post__text` sul vivo. Il titolo esce largo 246 su una scheda da 276, cioè 276 − 15 − 15. */ /* 45 e non 25, e i 45 stanno in un posto solo. Sul vivo la pila è: miniatura 190, `margin-bottom: 20px` del collegamento, `margin-top: 25px` del testo — ma due margini adiacenti si FONDONO, e scritti su due elementi darebbero 25, non 45. Il conto della scheda, letto riga per riga sul vivo: 190 + 45 + 36 (titolo su due righe) + 25 + 20 («Visita »») + 20 = **336**, che è l'altezza misurata. */ .scheda__carta-testo { display: block; padding: 0 15px 20px; margin-block-start: 45px; } .scheda__carta-titolo { display: block; font-family: "Poppins", sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--c-secondario); } .scheda__visita { display: inline-block; /* I 25px che sul vivo sono il `margin-bottom` del titolo. */ margin-block-start: 25px; font-size: 13px; color: var(--c-secondario); } /* --------------------------------------------- ricerca, 404 e impaginazione */ /* 🚨 `--articolo` MANCAVA DA QUESTO ELENCO, E SONO 116 PAGINE PIÙ GLI ARTICOLI. (8/8/2026, misurato da un'altra squadra.) `single.php` mette `pagina pagina--articolo` sull'`
`, e qui la parola non c'era: la pagina restava senza `max-width` e senza `padding`. Misurato: a 1280 il testo è largo **1265px**, a **375 tocca i due bordi** (0 e 0). La controprova è che le pagine dei comuni, che non passano da `single.php`, stanno a 20px dai bordi come devono. Non serviva una regola nuova: serviva una parola. È il template delle schede dei cimiteri. ⚠ Nessuna delle **20 pagine del metro** (`_calco/pagine.txt`) passa da `single.php`: sono tutte `page.php`, youzify, ricerca o 404. Quindi il Cancello A non si muove — ma le 116 schede sì, e vanno rimisurate con il loro strumento. */ /* 🚨 E LO STESSO BUCO SI È RIAPERTO CON UN ALTRO NOME: `--singola`. (19/8/2026.) Le tre pagine della porta pubblica delle imprese — rivendica, correggi, rimuovi — escono da `nexen-luoghi/imprese-pagine.php` con `class="pagina pagina--singola …"`. `--singola` non stava in questo elenco, quindi succedeva esattamente quello che l'8/8 succedeva a `--articolo`: nessuna gabbia e nessun respiro. Misurato a 1440 sulla resa vera: il testo partiva da **x=0** e arrivava a 1440, righe da ~230 caratteri. 👉 La lezione dell'8/8 non era «aggiungere `--articolo`»: era che questa riga è un **elenco chiuso di nomi**, e ogni template nuovo deve entrarci o nasce senza pagina. Un `:where(.pagina[class*="pagina--"])` avrebbe preso anche `--ricerca`, che la gabbia la rifiuta apposta (riga qui sotto): l'elenco resta esplicito, e questo commento è il promemoria di allungarlo. */ .pagina--ricerca, .pagina--404, .pagina--archivio, .pagina--articolo, .pagina--singola, .pagina--archivio-memorie { max-width: var(--larghezza-max); margin-inline: auto; padding: 4rem 1.25rem; } /* S-RIFINITURA, 4/9/2026 — `.pagina--archivio-memorie` (archive.php, l'indice `/memorie/`, CPT `nexen_lapide`) mancava da questo elenco chiuso: stesso buco già descritto qui sopra per `--articolo` e `--singola` (SGUARDO- TUTTO-20260903.md §2 "Memorie", gravità 2 e 3 — il titolo "Le memorie" partiva da x≈6 invece dei ~146px usati altrove). Un template nuovo, non entrato nella lista. */ /* ⚠ LA RICERCA NON PORTA LA GABBIA DELLE ALTRE TRE. (15/8/2026.) `--ricerca` sta nella riga qui sopra insieme a `--404`, `--archivio` e `--articolo`, e quella riga tappa a 1200px con 20px di respiro: il contenuto utile resta largo **1160**. La griglia del vivo ne vuole **1190**, e 30px in meno spostano tutte e quattro le colonne. Qui la gabbia si toglie e la larghezza la decidono i pezzi dentro, che la sanno per misura. Il respiro sopra e sotto resta, ed è quello delle altre pagine. */ .pagina--ricerca { max-width: none; padding-inline: 0; } /* 4/9/2026 (S-RESIDUI-1) — `.pagina--archivio-memorie` esce dalla gabbia generica per la STESSA ragione di `--ricerca` sopra: da oggi porta la sua testata vera (`.testata-pagina`, la stessa markup/foglio delle pagine di testo — v. `nexen-memoriale/template/archivio.php`) e il corpo nella griglia a 12 colonne di `pagine-testo.css` (`.pagina-testo__corpo`), che hanno GIA' il proprio `max-width`/ `margin-inline:auto`/`padding-inline` (`var(--ac-colonna)`/ `var(--pt-margine)`, unico anche per la testata). Una seconda gabbia qui sopra (1200px, 20px di respiro) restringerebbe la colonna di 40px in più di quella delle altre pagine della famiglia — non «uguali», solo vicine. Zero cage qui, esattamente come le pagine `pagina-testo` vere (`page.php` non porta nessuna classe `.pagina--*`). */ .pagina--archivio-memorie { max-width: none; padding: 0; } /* A-027 (checkup 15/10): `.pagina--archivio` ha gia' il suo respiro laterale (riga 1717): l'elenco e la paginazione dentro non ne aggiungono un secondo (a 375 px titolo a x=20, notizie a x=40). */ .pagina--archivio .elenco, .pagina--archivio .navigation.pagination { padding-inline: 0; } /* S-RIFINITURA, 4/9/2026 — pagina «Imprese» (ID 73584, /imprese/): unica fra le pagine `page.php` senza famiglia il cui `post_content` è un `

` nudo, senza `.sezione/.colonne` (lo scaffold che dà il respiro alle altre 55 pagine convertite da Elementor) — toccava il bordo sinistro a 1440 (SGUARDO-TUTTO-20260903.md §2 "Editoriali", gravità 2). Scelto un selettore per ID (`.post-73584`, da `post_class()`), non una regola generica su `.pagina__contenuto`: non si sa se le altre 55 pagine hanno già il proprio respiro dal loro `.sezione` interno, e allargare la regola a tutte rischiava di raddoppiare il margine dove già c'è. Stessa gabbia delle righe sopra. */ .pagina.post-73584 .pagina__contenuto { max-width: var(--larghezza-max); margin-inline: auto; padding-inline: 1.25rem; } /* Il titolo: `h2` a 20px Lusitana lo dà già il Kit, il colore la riga dei titoli. Restano il maiuscolo e il centro, che sul vivo `getComputedStyle` riporta come `text-transform: uppercase` e `text-align: center`. */ .ricerca__testa { margin-block-end: 2rem; } .ricerca__titolo { margin: 0; text-align: center; text-transform: uppercase; } .ricerca__parole { color: var(--c-inchiostro); } .ricerca__conto { color: var(--c-secondario); } .ricerca__modulo, .quattrocentoquattro__ricerca { margin-block: 1.5rem 2.5rem; } .quattrocentoquattro__spiega { max-width: 46ch; } /* Le sei strade che il vivo offre sotto «Forse stavi cercando:». Una lista, non sei pulsanti: sono collegamenti, e un elenco lo dice da solo a chi naviga con la tastiera o con un lettore di schermo. */ .quattrocentoquattro__errore { margin: 0; text-transform: uppercase; letter-spacing: .2em; } .quattrocentoquattro__numero { margin: 0; font-size: 72px; line-height: 1; color: var(--c-bianco); } .quattrocentoquattro__trovata { margin: 0 0 1rem; font-family: "Lusitana", serif; font-size: 20px; color: var(--c-bianco); } .quattrocentoquattro__forse { margin-block: 0 .75rem; color: var(--c-bianco); } .quattrocentoquattro__strade { margin: 0 0 2rem; padding: 0; list-style: none; } .quattrocentoquattro__strade li { margin-block: .35rem; } .quattrocentoquattro__strade a { color: var(--c-testo); text-decoration: underline; } .quattrocentoquattro__strade a:hover, .quattrocentoquattro__strade a:focus-visible { color: var(--c-bianco); } .navigation.pagination { max-width: var(--larghezza-max); margin-inline: auto; padding: 0 1.25rem 4rem; } .navigation.pagination .page-numbers { display: inline-block; padding: .4em .8em; color: var(--c-testo); text-decoration: none; } .navigation.pagination .current { color: var(--c-inchiostro); } /* ⚠ 800 E 1300 NON SONO NUMERI DI COMODO: SONO I PUNTI DI ROTTURA DI QUESTO SITO. (6/8/2026.) Fino a oggi il tema usava 767 e 1024, che sono i valori **predefiniti** di Elementor. cimiteri.online li ha cambiati nel Kit, e il foglio che il sito vivo serve lo dice apertamente: `.elementor-col-*` porta le sue percentuali dentro `@media (min-width: 801px)`, e le misure del tablet stanno in `(min-width: 801px) and (max-width: 1300px)`. Contate sul vivo: 173 regole a `(max-width: 800px)`, 98 a `(max-width: 1300px)`. Quindi sotto gli 801px il vivo IMPILA le colonne, e il tema — che aspettava 767 — le teneva affiancate proprio a **768**, che è una delle tre larghezze del cancello. Misurato lo stesso giorno su «Sviluppo siti web»: le due sezioni a colonne uscivano 722 invece di 1203 e 811 invece di 1538, cioè **−33% sulla pagina intera**. Non erano quattro pagine con quattro difetti: era questa riga. */ @media (max-width: 800px) { .colonne--2, .colonne--3, .colonne--4, .colonne--5, .colonne--6 { grid-template-columns: 1fr; } /* ⚠ `var(--su, 2.5rem)` e non `2.5rem` secco: il 2,5rem è il RIPIEGO di chi non dichiara niente, non un tetto che cancella quello che il grafico ha deciso. Con il punto di rottura a 767 la differenza non si vedeva — nessuna delle tre larghezze del cancello cadeva nella fascia stretta tranne 375. Portandolo a 800 il 2,5rem secco è arrivato su **768** e ha spento il respiro dichiarato di ogni sezione. ⚠ E il ripiego è **zero** anche qui, per la stessa ragione della riga larga: il predefinito di una sezione di Elementor è zero, e 2,5rem sopra più 2,5rem sotto su 96 sezioni erano 80px inventati a testa. Chi dichiara continua a essere servito da `--su`, `--su-t` e `--su-m`. */ .sezione { padding-block: max(0px, var(--su, 0px)) max(0px, var(--giu, 0px)); margin-block: min(0px, var(--su, 0px)) min(0px, var(--giu, 0px)); } /* `.sezione--eroe { min-height: 70vh; }` stava qui: tolta insieme al suo gemello desktop (v. la nota a :387), stessa regola morta, stesso motivo. */ /* 🚨 IL TESTO DEL QR PASSA SOTTO IL SUO STESSO GRAFICO, A 768 E A 375. (26/8/2026, cancello dello sguardo — «Tagli».) La riga delle «tombe col QR» tiene UNA fotografia sola dietro due colonne (`.colonne--2.riga--foto`): a 1440 le colonne stanno affiancate e il grafico del QR, cucito dentro la foto a sinistra (misurato sul file sorgente: x 598-970 su 1920), cade sotto la colonna SENZA testo. Qui sopra le colonne si impilano (`grid-template-columns: 1fr`), e la stessa foto — `background-position: center`, `cover` — resta UNA sola dietro il blocco impilato: la parte con la foto e la parte col testo non sono più due zone separate, sono la STESSA zona. Il testo, ora largo quanto tutta la colonna, ci finisce sopra. ⚠ **Non è il vivo a inventarlo**: il vivo ha lo stesso taglio (misurato il 26/8 su `cimiteri.online` a 375, stesso paragrafo sopra lo stesso QR) — ma è un difetto del disegno originale, non un capriccio nostro, e la regola già scritta per il piede (21/8) vale anche qui: si legge, e ci si allontana dal vivo dove il vivo sbaglia. La cura non è un velo più scuro sopra il testo (nasconderebbe il sintomo lasciando la causa) e non è un `overflow` (la foto è lo sfondo di riga, non un elemento che trabocca): è spostare l'INQUADRATURA della stessa fotografia, cosa che `background-position` fa da sempre, senza ridisegnare né tagliare nulla. Spostandola tutta a destra (`background-position: right center`), il ritaglio visibile — per qualunque altezza di riga, la foto essendo 1920×588, molto più larga che alta — parte da x≈1010 su 1920: il grafico del QR (598-970) resta fuori campo, e quello che si vede è il prato vuoto della stessa foto. Perimetro: **un solo elemento** ha questo sfondo su tutta la home (`grep -c` sul convertito, 1 su 1); nessun'altra riga fotografica (l'eroe con le foglie, la fascia degli animali) ha testo sopra un grafico cucito nella foto, quindi non tocca loro. 🚨 SQ-375-QR (28/8/2026, BANCO-8 punto 4) — SPENTA DA UN FIX DELLO STESSO POMERIGGIO SULLO STESSO ELEMENTO, PERCHÉ PUNTAVA UN CONTENITORE CHE NON DISEGNA PIÙ NIENTE. Questa regola e la REGOLA 7 (riga 1044) toccano lo STESSO elemento — un solo `.colonne.riga--foto[style*="tombe-cimitero-lapidi-qr-code"]` in tutta la home, verificato sul convertito. Il pomeriggio del 28/8 la REGOLA 7 gli ha tolto `background-image` (per salvare il titolo dal ritaglio, v. sopra) e ha spostato la foto su `::before`, dietro al contenuto. Spostare `background-position` sul CONTENITORE, come faceva questa regola da un'altra sessione (26/8), non serve più a niente: il contenitore non disegna più sfondo, e `::before` resta con `background-position: center` (riga 1055), MAI toccato da questa query. Due correzioni giuste ciascuna per il proprio giorno, scritte guardando solo il proprio sintomo: la prima spostava l'inquadratura sull'elemento che ALLORA disegnava la foto, la seconda ha cambiato quale elemento la disegna senza aggiornare chi altro la puntava. Risultato misurato: a 375 il titolo tornava a cadere sopra lapide e QR, come prima del 26/8. Si punta `::before` invece del contenitore: stessa specificità della regola base (riga 1049-1057), vince per ordine — questa query viene dopo nel foglio. Nessun numero nuovo, stesso `right center` di sempre. */ .colonne.riga--foto[style*="tombe-cimitero-lapidi-qr-code"]::before { background-position: right center; } } /* ------------------------------------------------- l'aiuto dei manifesti */ /* La barra sopra l'editor: avviso, primi passi, e i cinque tipi di modello. Sta in `template-parts/aiuto-manifesti.php` e vale sulle 52 pagine figlie della 288. Sparisce con L7, insieme a Photopea. */ .aiuto-manifesti { max-width: var(--larghezza-max); margin-inline: auto; padding: 1.5rem 1.25rem 0; } .aiuto-manifesti .sezione { padding-block: 0 1.5rem; } .aiuto-manifesti h3, .aiuto-manifesti h5 { margin: .5rem 0; } .aiuto-manifesti .fisarmonica { margin-block: 1rem; } .aiuto-manifesti .colonna--centra, .aiuto-manifesti .m-colonna--centra { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; } /* 🚨 IL RIQUADRO DELL'EDITOR È ALTO UNO SCHERMO, NON 690px. (6/8/2026.) `nexen-igiene` sostituisce l'iframe di Photopea con un riquadro che ne tiene l'altezza, e la legge dall'attributo: `height="690px"`. Quel numero è scritto nel `post_content`, quindi sembrava il dato. **Non lo è.** `height="690px"` non è HTML valido — l'attributo vuole un numero, non una lunghezza — e il browser lo butta via. L'altezza vera gliela dà una riga di CSS scritta a mano dal grafico dentro le impostazioni del template #5519 («Testata Manifesti»), che il vivo serve in `post-5519.css`: #manifesti { height: 100vh !important; width: 100vw !important; } Misurato sul vivo a 1440 (finestra 900): l'iframe è **900px**, non 690; il suo contenitore 906 (l'iframe è `display:inline`, sotto ci sta la riga di base); il widget 875, per un `_margin: top -31` del grafico. Da noi erano 690, cioè **185px in meno su 51 pagine**: −15,8% a 1440, −18,5% a 768, −21,6% a 375 sul manifesto civile, e le altre 50 sono la stessa pagina. ⚠ **E la lezione, che non riguarda i manifesti**: quel blocco sta in fondo al foglio del post, dentro due commenti che dicono «Start custom CSS» e «End custom CSS», cioè nelle **impostazioni di pagina** di Elementor Pro — NON dentro `_elementor_data`. L'estrazione legge `_elementor_data`, quindi **tutto il CSS scritto a mano dal grafico non è mai stato portato**, su nessuna pagina. Il censimento sta in `_calco/css-scritto-a-mano.md`. ⛔ E una trappola pagata scrivendo proprio questo commento: la prima versione **citava per esteso** i due delimitatori di Elementor, con le stelline e le barre. Un commento CSS che ne cita un altro **si chiude dove non deve**, e da lì in poi il foglio è spazzatura: la regola qui sotto non è mai arrivata al browser. Il file era giusto sul disco, giusto servito dall'indirizzo, e il numero non si muoveva di un decimale. Un `*` seguito da una barra non si scrive dentro un commento, nemmeno fra virgolette. L'`!important` non è pigrizia: il riquadro porta `--nexen-esterno-h:690px` in uno stile in linea, e sul vivo è esattamente un `!important` di foglio a scavalcare l'altezza dichiarata sull'elemento. Si riproduce quello. Vale su `body.sezione-manifesti`, cioè la 288 e le sue 52 figlie. La 288 non ha iframe (51 pagine su 61 ce l'hanno, lei no), quindi non la tocca. */ body.sezione-manifesti .nexen-esterno { --nexen-esterno-h: 100vh !important; } .manifesto__titolo { max-width: var(--larghezza-max); margin: 2rem auto .5rem; padding-inline: 1.25rem; color: var(--c-inchiostro); } /* ---------------------------------------------------- schede e avvisi */ /* Le schede di Elementor (`tabs`) diventano una pila di `

`, come le fisarmoniche: una fila di linguette che si scambiano vuole JavaScript e `aria-selected` scritti giusti, una pila no. Sulla pagina delle politiche sulla privacy dentro un solo widget c'era tutta la tabella dei cookie. 🚨 **MISURATO IL 7/8/2026, e il vivo fa due cose diverse a due larghezze.** Il widget `tabs` di `termini-uso`, letto sul sito di oggi: larghezza vivo noi 1440 294 552 linguette in FILA, un pannello aperto 768 585 734 fisarmonica, un pannello aperto 375 916 1070 fisarmonica, un pannello aperto Cioè: **sotto gli 801 anche il vivo è una pila** — la pila non era sbagliata, era sbagliata *a 1440*. E dove la pila è giusta restavamo comunque 150px più alti, perché la nostra riga misura **56px** e la sua **45**: padding `16px` invece di `10px`, e peso 400 invece di 600. I numeri qui sotto sono i suoi, letti con `getComputedStyle`, non scelti. E il pannello aperto è **uno solo**: `pannelli: 6, pannelli_visibili: 1` a tutte e tre le larghezze. Lo tiene il `name` sui `
`, che la copia di cantiere del convertitore adesso scrive — senza, la pila si apriva tutta e la pagina cresceva a ogni clic. */ /* ✅ LE LINGUETTE IN FILA, FATTE PER DAVVERO. (8/8/2026.) Il 7/8 erano state provate con `display: contents` sul `
` e tolte: quella dichiarazione porta via la scatola, e con lei **la regola del browser che nasconde il pannello chiuso** — `corpi_visibili: 6` invece di 1, `termini-uso` a +124,0% e `politiche-sulla-privacy` a +253,8%. Il markup adesso è **radio + etichette** (v. il ramo `tabs` del convertitore), e la ragione per cui regge è esattamente quella che faceva cadere l'altro tentativo, letta al contrario: a nascondere il pannello chiuso siamo **noi**, con un `display: none` scritto qui sotto, non il browser. Sciogliere le scatole non toglie più niente. I numeri sono quelli del vivo, letti con `getComputedStyle` l'8/8/2026 sul widget `tabs` di `termini-uso`, non scelti: larghezza blocco linguetta pannello 1440 294 58 = 20+16+20 +1sopra +1sotto 20+testo+20 +1sotto 768 585 45 = 10+24+10 +1sopra 10+testo+10 +1sopra (e 1px sotto l'involucro) Cioè **sotto gli 801 anche il vivo è una pila**, con l'imbottitura da 10px; sopra è una fila, con l'imbottitura da 20px. I `10px` che stavano qui prima erano il valore del vivo — ma quello della **linguetta del telefono**, non quello del pannello del desktop, che è 20. ⚠ Resta una differenza dichiarata, e va a nostro favore: dentro il pannello il vivo lascia agli elenchi il rientro predefinito del browser (**40px**), noi diamo `1.4em` (18,2px) a tutti gli elenchi del sito (`base.css:113`). Il testo nostro è più largo, va a capo di meno, e su `termini-uso` a 1440 il pannello aperto esce **19px più corto** del suo. È una scelta del tema su ogni elenco di ogni pagina: non si scavalca in un punto solo. */ .schede { position: relative; margin: 1.5rem 0; border-bottom: 1px solid var(--c-separatori); } /* La radio porta lo stato senza JavaScript. Resta raggiungibile da tastiera — le frecce scorrono il gruppo — e invisibile: non `display: none`, che la toglierebbe anche al percorso di tabulazione. */ .schede__scelta { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* ⚠ Il rientro sta sulla `