/* ========================================================================= L'INTESTAZIONE DELLE PAGINE INTERNE — pretitolo + H1. ========================================================================= Questo file governa due cose sole: il **pretitolo** (la riga sopra l'H1) e il **corpo dell'H1**, per le pagine che hanno quella coppia. Nasce da una diagnosi e da due correzioni di mie sviste: context §7.49. ------------------------------------------------------------------------ ANCHE LA 404, CHE NON E' UNA PAGINA ELEMENTOR Il 2026-08-24 sono state aggiunte le classi della pagina 404 (`.lds-404__occhiello` e `.lds-404__titolo`): il suo disegno usa **lo stesso occhiello a 36 px** e **lo stesso H1 a 96** delle altre pagine interne, quindi la scala resta dichiarata qui, in un posto solo, invece di essere ricopiata in `404.css` e divergere in silenzio. Una divergenza dichiarata: sul telefono il frame della 404 vuole l'occhiello a **28 px**, mentre le altre pagine lo vogliono a **24** — il disegno non e' coerente con se stesso. Vale il 24 condiviso, perche' l'utente aveva chiesto proprio che i pretitoli fossero uguali fra le pagine. Da dire al collaudo: se i creativi vogliono 28 sulla 404, e' una riga. ------------------------------------------------------------------------ IL DISEGNO, LETTO DAI NODI FIGMA E NON DEDOTTO Misurati quattro nodi, due pagine diverse per due larghezze: archivio prodotti 1920 pretitolo 36px Archivo Medium #012F2B centrato H1 96px Archivo SemiBold #012F2B centrato stampa online 1920 pretitolo 36px Archivo Medium #012F2B centrato H1 96px Archivo SemiBold #012F2B centrato stampa online 430 pretitolo 24px Archivo Medium #012F2B centrato H1 56px Archivo Bold #012F2B centrato Due conseguenze che decidono tutto: 1. **Il pretitolo e' verde e grande**, non grigio e piccolo. `#012F2B`, 36px, peso 500. Le pagine del configuratore e «chi siamo» lo avevano a **18px grigio**, e la categoria — che era l'unica **giusta** — l'ho allineato io per errore alle altre il 2026-08-24, credendo di renderlo coerente. Coerente lo era: al disegno sbagliato. 2. **L'H1 delle pagine interne e' 96px come quello della home.** L'archivio prodotti aveva 72. E la scala 96 → 56 fra 1920 e 430 e' **identica** a quella del kit, quindi il 74 intermedio non e' inventato: e' l'unico valore coerente con due estremi confermati. ------------------------------------------------------------------------ LA DISTANZA FRA I DUE Nel disegno i centri del pretitolo e dell'H1 distano **105 px** sul desktop e **111 px** sul mobile: praticamente costante. Sul sito quella distanza c'era **gia'**, e la fa il `gap` da 20 px del contenitore Elementor: misurati **102 px** fra i centri con margini a zero. Non era lo spazio il problema — era il **corpo** del pretitolo, meno della meta' del dovuto, a far sembrare diverso il blocco. ------------------------------------------------------------------------ IL PESO, E UNA SCELTA DICHIARATA Il disegno non e' coerente con se stesso: lo **stesso** H1 e' `SemiBold` (600) sul frame 1920 e `Bold` (700) su quello 430. Qui si tiene **700 su tutte le larghezze**, perche' un peso che cambia con la larghezza sarebbe una nuova incoerenza al posto di quella vecchia — e 700 e' anche quello della home, che e' confermato Bold su desktop. **Se i creativi vogliono 600 sul desktop e' una riga**: va detto al collaudo. ------------------------------------------------------------------------ PERCHE' `:has()` INVECE DEGLI IDENTIFICATIVI Il pretitolo e' un widget «titolo» come tanti: non ha una classe sua. L'unica cosa che lo distingue e' **dove sta**: e' il titolo immediatamente seguito da quello che contiene l'H1. Verificato sul sito che i due widget sono sempre fratelli consecutivi, e che il selettore prende **esattamente un elemento** su `/stampa-online/`, `/stampa-tesi/` e `/chi-siamo/`. L'alternativa era scrivere gli identificativi dei widget — `ldsc1b1` e compagnia — cioe' legare il foglio a nomi che cambiano se qualcuno ricostruisce la sezione in Elementor. Questo selettore invece descrive la **struttura**, che e' la cosa che non cambia. E `!important` perche' le regole per-elemento di Elementor valgono **(0,4,0)**: vedi la nota nel blocco dell'H1. ========================================================================= */ /* ----------------------------------------------------------- il pretitolo --- */ .elementor-widget-heading:has(+ .elementor-widget-heading h1) .elementor-heading-title, .categoria-genitore, .lds-404__occhiello { color: #012F2B !important; font-family: Archivo, sans-serif !important; font-size: 36px !important; font-weight: 500 !important; line-height: 1.2 !important; letter-spacing: normal !important; text-align: center !important; text-transform: none !important; /* * MARGINE ZERO, e il numero viene da una misura. * * Il disegno vuole i centri dei due testi a **105 px**. Sul sito il * contenitore Elementor mette gia' **20 px di `gap`** fra i due widget, e con * le interlinee 1,2 quei 20 px da soli portano i centri a **102 px** — tre di * scarto sul disegno, invisibili. Al primo tentativo avevo aggiunto 26 px di * margine: sommati al `gap` facevano **128**, misurati, cioe' 23 di troppo. * * Quindi lo stacco lo fa il contenitore, che e' il suo lavoro, e questo foglio * si limita a non intralciarlo. */ margin: 0 !important; } @media (max-width: 1024px) { .elementor-widget-heading:has(+ .elementor-widget-heading h1) .elementor-heading-title, .categoria-genitore, .lds-404__occhiello { /* 36 x 0,77: la fascia intermedia non e' disegnata, vedi §7.49. */ font-size: 28px !important; } } @media (max-width: 767px) { .elementor-widget-heading:has(+ .elementor-widget-heading h1) .elementor-heading-title, .categoria-genitore, .lds-404__occhiello { font-size: 24px !important; } } /* ------------------------------------------------------------------ l'H1 --- */ /* * L'ARCHIVIO PRODOTTI ALLINEATO ALLE ALTRE PAGINE INTERNE: 96 / 74 / 56. * * Aveva 72 sul desktop e 40 sul telefono, cioe' una scala sua che il disegno non * chiede: il frame 1920 dell'archivio dice **96**, esattamente come «stampa * online» e come la home. * * Vale per **tutti** gli archivi prodotto, non solo le categorie: `/negozio/` e' * un `post-type-archive-product` e aveva anch'esso 72. Sono la stessa pagina agli * occhi di chi la guarda, e il disegno ne ha un frame solo. * * `:not(.product_title)` NON E' UN DETTAGLIO: senza, questa regola colpiva anche i * **titoli delle schede** nella griglia, che il widget «Titolo prodotto» stampa con * quella classe. Il 2026-08-24 li ha portati tutti a 96 px — venti titoli enormi in * pagina — ed e' stato quel sintomo a far scoprire il difetto vero: erano **H1**. * Vedi il blocco 15 di `inc/single-product.php`. * * `!important` perche' la regola di Elementor per quel titolo vale **(0,4,0)** — * documento, `.elementor-element`, id del widget, `.elementor-heading-title` — * e batterla con la specificita' richiederebbe l'**id del widget** dentro questo * foglio, cioe' un CSS che salta in silenzio se qualcuno ricostruisce la sezione. * Con `!important` si aggancia la **classe del body**, che dice che tipo di * pagina e'. Fra le due fragilita' si e' scelta la meno probabile. */ body.tax-product_cat h1.elementor-heading-title:not(.product_title), body.post-type-archive-product h1.elementor-heading-title:not(.product_title), body.error404 .lds-404__titolo { font-size: 96px !important; } @media (max-width: 1024px) { body.tax-product_cat h1.elementor-heading-title:not(.product_title), body.post-type-archive-product h1.elementor-heading-title:not(.product_title), body.error404 .lds-404__titolo { font-size: 74px !important; } } @media (max-width: 767px) { body.tax-product_cat h1.elementor-heading-title:not(.product_title), body.post-type-archive-product h1.elementor-heading-title:not(.product_title), body.error404 .lds-404__titolo { font-size: 56px !important; } } /* * FAQ: nella fascia intermedia restava a 96 mentre le pagine del kit scendono a * 74. Il corpo desktop e quello mobile sono suoi e non si toccano. */ @media (min-width: 768px) and (max-width: 1024px) { body.page-id-305 h1.elementor-heading-title { font-size: 74px !important; } } /* * Scheda prodotto: QUI NON C'E' PIU' NIENTE, E LA NOTA RESTA PERCHE' NON CI TORNI. * * C'era un `font-size: 48px !important` nella fascia 768-1024, messo per appiattire * l'unico punto del sito in cui un titolo **cresceva** su tablet — 56 px — per poi * rimpicciolirsi sul telefono. La nota diceva «da sottoporre ai creativi al * collaudo, non da correggere qui»: **al collaudo del 2026-09-10 creative ha * risposto**, e la scala del titolo prodotto e' 38 px su desktop e laptop, 30 su * tablet, 24 su mobile. * * La regola e' stata tolta perche' era diventata l'ostacolo: con `!important` su * `body.single-product h1.elementor-heading-title` vinceva sia sui 56 di Elementor * sia sui 30 nuovi, e su tablet il titolo restava a 48. **Se ne e' accorta la * misura, non la lettura**: a 900 px il corpo calcolato era 48, cioe' un valore che * non compariva in nessuna delle due fonti che stavo guardando. * * Le tre misure nuove stanno in `single-product.css`, accanto alla regola sulla * spezzatura delle parole lunghe, e vincono per specificita' senza `!important`. * Un secondo posto dove definire lo stesso corpo tornerebbe a essere un ostacolo. */ /* * IL CLAIM DEL FOOTER SU MOBILE — QA 2026-09-10, punto 7. * * «Tutto per lo studio: stampa, tesi, libri, cartoleria e articoli sanitari.» * Era **48 px su mobile** — sette righe, 364 px d'altezza su uno schermo da 375 — * e creative l'ha portato a **32**. Su tablet resta 48, confermato dall'utente: * il foglio QA marca la sola colonna Mobile, e oggi la stessa misura serve * entrambe le fasce, quindi il valore andava chiesto invece che dedotto. * * L'INTERLINEA SI CAMBIA INSIEME AL CORPO, E NON E' UNA LIBERTA' CHE MI SONO PRESO. * Elementor dichiara l'interlinea di base in modo **relativo** (`1.15em`), ma nella * sola fascia mobile la fissa a **52 px assoluti**, cioe' un rapporto di 1,08 — * piu' stretto del normale, evidentemente scelto per un titolo grande. Portando il * corpo a 32 e lasciando i 52 px, il rapporto diventerebbe **1,63**: righe larghissime * e un blocco arioso che nessuno ha chiesto. Qui si mantiene **il rapporto** invece * del valore assoluto — 1,08 — cosi' la resa e' quella di prima, in piccolo. Scritto * come numero puro e non in px anche per un'altra ragione: se domani il corpo cambia * di nuovo, l'interlinea segue da sola. * * L'ID DEL WIDGET QUI SERVE, ED E' LA SCELTA OPPOSTA A QUELLA SPIEGATA SOPRA. * Nel blocco degli archivi si e' preferito `!important` piu' la classe del body * proprio per **non** dipendere dall'id del widget, che salta in silenzio se * qualcuno ricostruisce la sezione. Nel footer quella strada non c'e': il footer sta * su ogni pagina, quindi nessuna classe di `body` isola questo titolo, e agganciare * `.elementor-location-footer .elementor-heading-title` colpirebbe anche «Contattaci», * «Email», «Tel/Fax» e «Cellulare», che hanno misure loro. L'id e' l'unico appiglio * che individua **questo** titolo e nessun altro. * * Percio' la fragilita' va detta invece che nascosta: **se il footer viene * ricostruito, questa regola smette di valere senza avvisare**. Il testo del claim * e' scritto qui sopra per esteso proprio per poterla ritrovare cercando la frase. * * Niente `!important`: la regola di Elementor vale (0,4,0), `body` davanti porta a * (0,4,1) e basta. */ @media (max-width: 767px) { body .elementor-184 .elementor-element.elementor-element-9a45ef5 .elementor-heading-title { font-size: 32px; line-height: 1.08; } } /* ------------------------------------------------------------- il peso --- */ /* * Un peso solo per tutti gli H1: 700. Vedi la nota in cima sul disegno che * alterna SemiBold e Bold per lo stesso titolo. */ body.page-id-305 h1.elementor-heading-title, body.tax-product_cat h1.elementor-heading-title:not(.product_title), body.post-type-archive-product h1.elementor-heading-title:not(.product_title), body.error404 .lds-404__titolo { font-weight: 700 !important; } /* ------------------------------------------------- dove comincia il blocco --- */ /* * TUTTE LE INTESTAZIONI COMINCIANO ALLA STESSA ALTEZZA. * * Segnalato che i pretitoli non stanno nello stesso punto. Sistemati corpo e * colore restava questo, e misurando si scopre che il colpevole non e' quello che * sembrava: * * pagina imbottitura in cima il pretitolo comincia a Figma * archivio 100 px 252 254 * stampa online 60 px 212 272 * stampa tesi 60 px 212 — * chi siamo 60 px 212 — * * Cioe' **l'archivio era quello giusto** — 252 contro i 254 del disegno — e le * altre tre stanno **60 px troppo in alto**. L'istinto era di abbassare * l'archivio: sarebbe stato allineare al difetto, per la seconda volta in questo * file. * * Portate quindi a 100 px anche le altre tre. Il massimo scarto dal disegno * diventa 20 px (su «stampa online», che nel suo frame sta a 272), contro i 60 di * prima, e le quattro pagine cominciano tutte allo stesso punto. * * IL SELETTORE descrive la struttura: «il contenitore interno che ha, fra i suoi * figli diretti, due titoli consecutivi di cui il secondo contiene l'H1». Nessun * identificativo di widget. Nota tecnica: `:has()` **non si annida**, quindi la * condizione e' scritta come un unico selettore relativo — verificato che prende * esattamente un elemento, e che quell'elemento contiene l'H1. * * Solo sul desktop: le fasce tablet e telefono hanno spaziature loro che nessuno * ha segnalato, e toccarle senza un frame di riferimento vorrebbe dire inventare. */ @media (min-width: 1025px) { .e-con-inner:has(> .elementor-widget-heading + .elementor-widget-heading h1) { padding-top: 100px; } }