/* ========================================================================= 03-layout.css — contenitore, sezioni, fondi, ancore. 03/09/2026. ⚠️ NON USARE .container DENTRO .lc-page. USARE .lc-container. Non e' una preferenza di stile: .container se la contendono TRE fogli diversi e il vincitore cambia a seconda del breakpoint. Misurato in pagina il 03/09/2026: - Enfold grid.css .container max-width 1010px, padding 0 50px - Enfold grid.css .responsive .container 782px fra 768 e 989px - Enfold grid.css #top #wrap_all .container 85% sotto i 767px (3 id/classi) - bootstrap-grid 1320px da 1400px in su Il risultato calcolato era 1320px con 72px di padding: un valore che non corrisponde a nessuna delle intenzioni. CLAUDE.md §2.3 l'aveva gia' dichiarata vietata, ma nel markup e' finita comunque 27 volte. .lc-container non la contende nessuno. ========================================================================= */ /* --- Contenitore -------------------------------------------------------- ⚠️ IL GUTTER DI .container NON E' QUELLO DI BOOTSTRAP, ed e' la ragione per cui questo blocco esiste. Le pagine migrate usano ancora .container di Bootstrap, ma con il gutter ridefinito: 40px, e 144px da 1200px in su. Bootstrap ricava il padding come meta' del gutter, quindi 20px e 72px. Quei 72px sono la rientranza con cui le pagine sono state disegnate e approvate. Le due righe stavano dentro longevity.css, MESCOLATE al Bootstrap compilato e non fra le regole di pagina: eliminando quel file sono sparite con esso, e la Longevity si e' ritrovata 60px piu' larga per lato — il difetto segnalato il 03/09/2026. Sono qui, e non nel foglio di una pagina, perche' valgono per ogni pagina che usa .container. Su una pagina che non usa .container queste regole sono inerti. */ .lc-page .container { --bs-gutter-x: 40px; } @media (min-width: 1200px) { .lc-page .container { --bs-gutter-x: 144px; } } /* ⚠️ E QUI STA LA PARTE CHE NON SI VEDE: LE max-width VANNO RIDICHIARATE. Non e' una duplicazione inutile di bootstrap-grid. Prima della migrazione Bootstrap era COMPILATO E SCOPED sotto #lc-longevity, quindi ogni sua regola valeva "un id piu' una classe" e batteva Enfold sempre. Da CDN le stesse regole valgono "una classe": Enfold, che stila .container in grid.css, torna a vincere. Misurato il 03/09/2026 su un viewport da 1996px: max-width 1310px (il valore di Enfold) invece dei 1320px di Bootstrap, e la pagina risultava larga diversamente dalla produzione. Ridichiarandole su ".lc-page .container" tornano a due classi, che battono la singola classe di Enfold. I valori sono quelli di Bootstrap 5.3, non scelti da noi: servono a far combaciare le pagine migrate con la produzione, non a introdurre un'altra misura. */ @media (min-width: 576px) { .lc-page .container { max-width: 540px } } @media (min-width: 768px) { .lc-page .container { max-width: 720px } } @media (min-width: 992px) { .lc-page .container { max-width: 960px } } @media (min-width: 1200px) { .lc-page .container { max-width: 1140px } } @media (min-width: 1400px) { .lc-page .container { max-width: 1320px } } /* Il contenitore delle pagine NUOVE. Stesse misure di .container qui sopra, in modo che una pagina nuova e una migrata abbiano la stessa larghezza utile: a 1200px 1140-144 = 996px, da 1400px 1320-144 = 1176px. Cambia solo il nome, che qui non se lo contende nessuno (vedi l'avvertenza in testa al file). */ .lc-page .lc-container { width: 100%; margin-inline: auto; padding-inline: 20px; } @media (min-width: 576px) { .lc-page .lc-container { max-width: 540px } } @media (min-width: 768px) { .lc-page .lc-container { max-width: 720px } } @media (min-width: 992px) { .lc-page .lc-container { max-width: 960px } } @media (min-width: 1200px) { .lc-page .lc-container { max-width: 1140px; padding-inline: 72px } } @media (min-width: 1400px) { .lc-page .lc-container { max-width: 1320px } } /* Colonna di sola lettura. In px e non in em: in em si accorcerebbe insieme al font, proprio dove il testo e' piu' grande e il cap servirebbe di piu' — la trappola gia' incontrata sull'hero della Longevity (§7.3). */ .lc-page .lc-testo { max-width: var(--lc-larghezza-testo); } /* Contenuto centrato nella pagina, non nel suo blocco. */ .lc-page .lc-centrato { margin-inline: auto; } /* --- Sezioni ------------------------------------------------------------ Il respiro verticale sta qui e non nelle utility py-* di Bootstrap: cosi' e' un valore solo, cambiabile in un punto, e il markup non deve ricordare quale coppia di classi mettere su ogni sezione. */ .lc-page .lc-sezione { padding-block: 48px; } @media (min-width: 992px) { .lc-page .lc-sezione { padding-block: 96px; } } /* Fascia bassa da infilare FRA due sezioni: deve restare bassa, altrimenti diventa una sezione e perde la sua funzione. */ .lc-page .lc-sezione--fascia { padding-block: 40px; } @media (min-width: 992px) { .lc-page .lc-sezione--fascia { padding-block: 56px; } } /* --- Fondi -------------------------------------------------------------- ⚠️ In LiveCanvas una
NON puo' portare classi custom: l'editor le rimuove. Per questo i fondi si agganciano all'ID, che invece sopravvive. E' la convenzione gia' in uso su #cta-finale (CLAUDE.md §7.1). Qui sono selettori ATTRIBUTO e non id letterali, cosi' valgono su tutte le pagine senza riscrivere il blocco 120 volte. Le convenzioni sono due: id="lc-fascia…" → fascia blu intermedia id="cta-finale" → pannello blu di chiusura id="lc-alt…" → sezione a fondo chiaro alternato */ .lc-page :is([id^="lc-fascia"], #cta-finale) { background-color: var(--lc-blu); color: var(--lc-bianco); } .lc-page [id^="lc-alt"] { background-color: var(--lc-fondo-alt); } /* Su fondo blu quasi tutti i colori di testo vanno invertiti. Raccolti qui invece che ripetuti dentro ogni componente: un componente non deve sapere su che fondo verra' messo. */ .lc-page :is([id^="lc-fascia"], #cta-finale) .lc-eyebrow { color: var(--lc-azzurro-tenue); } #top .lc-page :is([id^="lc-fascia"], #cta-finale) :is(.lc-h2, .lc-h2--compatto, .lc-h3, .lc-h4) { color: var(--lc-bianco); } .lc-page :is([id^="lc-fascia"], #cta-finale) :is(.lc-corpo, .lc-corpo-intro, .lc-corpo-card) { color: var(--lc-testo-su-blu); } /* L'outline azzurro di base stacca poco sul blu (3,6:1); l'azzurro tenue fa 5,12:1. Pubblico over 40. */ .lc-page :is([id^="lc-fascia"], #cta-finale) { --lc-focus: var(--lc-azzurro-tenue); } /* --- Ancore ------------------------------------------------------------- L'header di Enfold e' fisso: senza questo ogni ancora atterra dietro. ⚠️ QUESTA REGOLA NON BASTA, E SAPERLO EVITA UN POMERIGGIO PERSO. Enfold intercetta i click sulle ancore interne e scrolla con un offset suo: sui link cliccati la scroll-margin-top non viene nemmeno letta (CLAUDE.md §8.1). Vale per gli arrivi da URL con hash e come rete di sicurezza. Una pagina con una nav ad ancore deve caricare js/ancore.js, che gestisce il click in capture e poi si autocorregge. */ .lc-page section[id] { scroll-margin-top: var(--lc-header-h-mob); } @media (min-width: 990px) { .lc-page section[id] { scroll-margin-top: var(--lc-header-h); } } /* --- La fascia bianca sopra la prima sezione ---------------------------- Fra header e prima sezione compaiono 90px di bianco, ma SOLO sotto i 990px. La causa e' in style.css del child, che per tutto il sito fa "#top #main { padding-top: 90px !important }" per compensare l'header: da 990px in su l'header non occupa spazio nel flusso e quei 90px compensano davvero, sotto invece l'header sta nel flusso e si prende i suoi, quindi i 90 si sommano (CLAUDE.md §7.4). La causa non si corregge: style.css e' fra i file da non toccare e quella regola vale su tutto il sito. Si rimedia solo dove si vede, cioe' quando la prima sezione ha un fondo colorato: le si aggiunge la classe .lc-sezione--recupera-header e si prende quei 90px con il proprio fondo. Su una prima sezione bianca non serve, perche' e' bianco su bianco. */ @media (max-width: 989.98px) { .lc-page .lc-sezione--recupera-header { margin-top: -90px; padding-top: calc(48px + 90px); } }