/* ========================================================================== PASSATA TABLET DELL'8 SETTEMBRE 2026 — da 768 a 1023 -------------------------------------------------------------------------- Le richieste che Andrea ha elencato sotto «MODIFICHE TABLET [da 768 a 1024px]», raccolte in un file solo come si e fatto per la passata mobile del 7 (responsive/45-…). ⚠️ LA FASCIA E CHIUSA SOPRA E SOTTO: `min-width: 768px` non e decorativo. Quasi tutte queste regole hanno una specificita piu alta di quelle dei fogli di blocco, quindi senza il limite inferiore scavalcherebbero il riflusso del telefono — che e gia stato deciso, verificato e approvato il giorno prima. E' esattamente l'errore fatto il 7 set con la griglia di MRF: una regola pensata per il tablet finiva per governare anche i 360px. Il file si chiama 46- per arrivare dopo il 45-: dove le due passate toccano la stessa cosa, comanda l'ultima. REGOLA INVIOLABILE: nessuna riga fuori da @media. Sopra i 1024 non cambia niente. ========================================================================== */ /* -------------------------------------------------------------------------- 768-1023 · LE RECENSIONI NON HANNO PIU UN'ALTEZZA MINIMA «Rimuovere la proprieta min-height dai div della recensione e del riassunto dell'azienda», su tutte le pagine. I 400px vengono dal mockup, dove le tre colonne — foto, citazione, recap — stanno in riga e devono essere alte uguale. Su tablet la riga e gia diventata una colonna: la card e larga quanto lo schermo, il testo ne riempie meta e i 400 diventano un fondo vuoto. Senza minimo ogni card e alta quanto il suo testo. -------------------------------------------------------------------------- */ /* ⚠️ 9 set 2026 — LA FASCIA ERA SBAGLIATA E IL SELETTORE INCOMPLETO. Andrea: «da mobile E tablet (da 0 a 1024px) va ancora rimossa la min-height dai div della recensione e del riassunto — SU TUTTE LE PAGINE». Due errori miei, tutti e due misurabili e non misurati: 1. la regola stava dentro `min-width: 768px`, quindi sul telefono non succedeva niente. A 390px maintenance, compliance e monitoring avevano ancora 400px di pavimento; 2. sulle pagine interne il pavimento non lo mette `.story-card`, lo mette `.storia1--cta .story-card` in blocchi/storia-singola.css, che ha specificita piu alta. Spegnere solo `.story-card` non bastava, e infatti sul telefono la card restava a 400. Percio la regola vive qui fuori dalla fascia del tablet, e nomina anche `.story__row`: quei tre selettori sono dichiarati insieme nel foglio del blocco, e lasciarne uno acceso rimetterebbe il pavimento per riga. PERCHE. I 400 vengono dal mockup a 1512, dove foto, citazione e riassunto stanno in RIGA e devono essere alti uguale. Sotto i 1024 la riga e gia diventata una colonna: ogni card e larga quanto lo schermo, il testo ne riempie meta e i 400 diventano un fondo vuoto. Sopra i 1024 non cambia niente: li la riga c'e ancora e il pavimento serve. */ @media (max-width: 1023px) { .story-card--quote, .story-card--recap, .storia1--cta .story__row, .storia1--cta .story-card { min-height: 0; } /* ⚠️ 9 set 2026 (secondo giro) — E ANCHE IL CAROSELLO DELLA HOME. Andrea: «modifica la sezione recensioni della home con lo stesso stile delle altre pagine». Il pavimento sulla Home non lo mette nessuno dei selettori qui sopra: lo mette `.story__slides:has(.storia1__cta) .story-card` in sections/10a-…, che ha due classi in piu e quindi vince. E — questo e' il punto — quel selettore si accende SOLO quando la testimonianza ha il video. Le pagine che i controlli rendevano non ce l'avevano, quindi la Home risultava a posto e sul sito non lo sara'. E' la terza volta in due giorni che una verifica gira sulla strada che in linea non viene percorsa: ora tablet.mjs misura anche le pagine rese con il database acceso. PERCHE il pavimento c'e' in origine: a 1512 le tre colonne stanno in riga e devono essere alte uguale, e il riquadro non deve cambiare altezza cambiando slide. Sotto i 1024 la riga e' gia' una colonna e le slide sono sovrapposte in una cella di griglia, che prende da se' l'altezza della piu alta: il pavimento non serve piu a niente e lascia solo dei fondi vuoti. Sopra i 1024 non si tocca. */ .story__slides:has(.storia1__cta) .story__row, .story__slides:has(.storia1__cta) .story-card { min-height: 0; } } /* -------------------------------------------------------------------------- 768-1023 · TITOLI E PARAGRAFI CENTRATI Le stesse sezioni gia centrate sul telefono il 7 set: su tablet valgono le stesse ragioni — il blocco di testo occupa tutta la larghezza e non ha piu niente accanto a cui allinearsi. ⚠️ Le centrature COMUNI a telefono e tablet stanno nel foglio 45-, che ora arriva fino a 1023. Qui restano solo quelle che il tablet ha in piu: i PULSANTI. Sul telefono erano gia centrati dal blocco che li contiene; qui i blocchi restano `space-between` e vanno detti a parte. -------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) { /* MAINTENANCE — «Know what needs attention…»: titolo E pulsanti. */ .mnt-outcome__testo .btn-group { justify-content: center; width: 100%; } /* MONITORING — «See what is happening…»: titolo, paragrafo e pulsanti. ⚠️ La centratura del testo NON sta qui ma nel blocco piu in basso, sul `.domande__testo`: la colonna diventa `display: contents` per poter spostare i pulsanti in coda, e una scatola che non esiste non centra niente. */ .domande__colonna .btn-group { justify-content: center; width: 100%; } } /* -------------------------------------------------------------------------- 768-1023 · MONITORING — I PULSANTI DOPO LE CARD BLU «Sezione "See what is happening…" — spostare CTA dopo le card blu». In riga i pulsanti stanno in fondo alla colonna di sinistra, accanto alle domande. Impilata, la colonna diventa: testo, pulsanti, domande — e i pulsanti si trovano in mezzo, prima ancora di aver letto di che si tratta. Spostandoli in coda tornano a essere quel che sono: la conclusione. `order` e non un cambio di marcatura: l'ordine di lettura da tastiera e da lettore di schermo resta quello del documento, che e gia giusto. -------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) { .domande__row { flex-direction: column; align-items: center; } /* ⚠️ `display: contents` E' LA CHIAVE, e la prima versione non ce l'aveva. `order` ordina i FIGLI DIRETTI del contenitore flex. I pulsanti stanno dentro `.domande__colonna`, insieme al testo: `order: 3` li metteva in fondo alla COLONNA — cioe esattamente dove erano gia — e la lista di domande, che e sorella della colonna, restava sotto. Misurato: la CTA a 4107 e la lista a 4743, cioe 636px PRIMA. Il controllo in tablet.mjs nasce da qui. Con `display: contents` la scatola della colonna sparisce e i suoi due figli diventano figli della riga: adesso testo, lista e pulsanti sono sullo stesso piano e `order` li dispone davvero. */ .domande__colonna { display: contents; } .domande__testo { order: 1; } .domande__lista { order: 2; } .domande__colonna .btn-group { order: 3; margin-top: var(--space-5); /* 40 */ } /* La centratura stava sulla colonna, che ora non ha piu una scatola: va rimessa sui due pezzi che sono rimasti. */ .domande__testo { text-align: center; width: 100%; } } /* -------------------------------------------------------------------------- 768-1023 · HOME — «Connect people…»: le tre card tornano in riga Sul telefono si impilano; su tablet ci stanno, e affiancate raccontano meglio la sequenza (guida → registra → usa). ⚠️ Torna anche il `margin-top: auto` sull'immagine, che il riflusso mobile spegne: in riga le tre card sono alte uguale ma i testi no, quindi senza quella riga le tre schermate partirebbero da altezze diverse. E' la stessa correzione chiesta per il desktop il 7 set — «la card 3 con il testo in alto e l'immagine in fondo» — e qui vale per lo stesso motivo. -------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) { .wf__step { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wf-step { padding: var(--space-3); } /* 40 -> 16: su 218px servono */ .wf-step__media { margin-top: auto; } } /* -------------------------------------------------------------------------- 768-1023 · HOME — le foto delle recensioni alte 1200 Numero dato da Andrea. Il ritratto e 346x400 (rapporto 0.865): su una colonna da 688px un'altezza di 1200 vuol dire che il `cover` ritaglia sui lati e mostra la fascia centrale del ritratto, a figura quasi intera. -------------------------------------------------------------------------- */ /* ⚠️ 9 set 2026 — VALEVA SOLO SULLA HOME E SU MRF, non su tutte le pagine. Andrea: «MODIFICA DA FARE ALLE RECENSIONI DI TUTTE LE PAGINE». Misurato a 768, 900 e 1023: front-page e mrf a 1200, maintenance, compliance e monitoring fermi a 400. Il motivo e lo stesso del blocco qui sopra: su quelle tre pagine la recensione ha il pulsante dell'intervista, quindi porta la classe `.storia1--cta`, e `.storia1--cta .story__photo` (blocchi/storia-singola.css) vince su `.story__photo` a parita di tutto il resto. Bastava una classe in piu, ed e bastato non guardare le pagine giuste per non vederlo. Ora il selettore le nomina tutte e due. Il numero e quello dato da Andrea. Il ritratto e 346x400 (rapporto 0,865): su una colonna da 688px un'altezza di 1200 vuol dire che il `cover` ritaglia sui lati e mostra la fascia centrale del ritratto, a figura quasi intera. */ @media (min-width: 768px) and (max-width: 1023px) { .story__photo, .storia1--cta .story__photo, /* Terzo selettore: la Home quando la testimonianza ha il video. Senza, restava a 400 — vedi la nota del blocco delle min-height. */ .story__slides:has(.storia1__cta) .story__photo { height: 1200px; min-height: 1200px; aspect-ratio: auto; } } /* -------------------------------------------------------------------------- 768-1023 · GLI HERO DELLE PAGINE INTERNE «Spostare l'immagine sotto la CTA» e «centrare titolo, paragrafo e CTA». Le due regole stanno in responsive/26-hero-interno.css, dove vivono gia le altre dell'hero: sono la stessa scelta del telefono, estesa a questa fascia. Qui non c'e niente perche non serve niente. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 768-1023 · I NUMERI TORNANO TRE IN RIGA «Sezione "A Measurable Impact" — mettere le 3 card in riga», su Maintenance, Compliance e MRF. ⚠️ E QUI SERVE UN ACCORGIMENTO, altrimenti si rifa il danno di ieri. A 768 la card vale (688 - 32) / 3 = 218px, e alla didascalia — che sta ACCANTO a un'icona da 40 — ne restano 122. La parola italiana piu lunga di quelle didascalie, «NELL'INSERIMENTO», ne chiede 152: si spezzerebbe a meta, che e esattamente cio che Andrea ha segnalato sulle card di MRF il 7 set. Invece di rimpicciolire il testo, l'icona passa SOPRA la didascalia: la colonna torna larga 170 e la parola ci sta intera. Lo verifica parole-spezzate.mjs a 768, 900 e 1024. -------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) { /* ⚠️ 9 set 2026 — QUESTO FILTRO ERA SBAGLIATO E SPEGNEVA PROPRIO LE SEZIONI DA CORREGGERE. Andrea: «le card dei numeri sono ancora su 2 righe diverse». Il filtro di ieri era `:not(:has(> :nth-child(4)))`, cioe «solo le griglie con meno di quattro FIGLI». Ma i figli non sono solo le card: in fondo alla