/* Fa convivere il guscio del sito (Tailwind) col contenuto di dataroom (Bootstrap). * * Bootstrap non dichiara livelli: il suo CSS batte per regola qualunque CSS che * li dichiari, a prescindere dalla specificità. Il foglio del tema è tutto dentro * livelli. Senza accorgimenti il guscio arriva deformato — link sottolineati, * liste rientrate, campi coi caratteri sbagliati. * * L'ordine qui sotto è l'unico che funziona, ed è stato provato: * - bootstrap in fondo alla catena: le utility del tema lo battono nel guscio; * - `guscio` (l'azzeramento) DOPO bootstrap e PRIMA del tema: deve battere * Bootstrap e perdere contro il tema. Messo in fondo si mangia i colori del * tema — fascia blu bianca, bottoni spariti; * - il foglio del tema non porta il preflight (`assets/guscio.css`), quindi non * tocca il contenuto di dataroom. * * Banco di prova: FIASO/prove_guscio/. Manutenzione: l'azzeramento qui sotto è una * copia ridotta del preflight di Tailwind; se il tema cambia versione maggiore, * confrontarlo con prove_guscio/tema_base_estratto.css. * * `sovrascritture` è primo di proposito, e NON è un errore di battitura: per le * dichiarazioni `!important` l'ordine dei livelli si rovescia. Si legge sotto, * accanto al blocco. */ @layer sovrascritture, bootstrap, guscio, theme, base, components, utilities; @import url("../vendor/bootstrap/css/bootstrap.min.css") layer(bootstrap); @import url("./project.min.css") layer(bootstrap); /* Le poche regole che devono avere la meglio sugli `!important` storici di dataroom. * * Perché questo livello è dichiarato per PRIMO e non per ultimo, che è il contrario * di come funziona tutto il resto di questo foglio. * * Per le dichiarazioni normali l'ordine è quello che si immagina: vince l'ultimo * livello nominato, e chi sta fuori da ogni livello vince su tutti. Per le * dichiarazioni `!important` il browser **rovescia l'ordine**: vince il livello * nominato per PRIMO, e chi sta fuori da ogni livello perde contro tutti. * * `project.min.css` entra in `@layer bootstrap`, che è il primo livello dopo questo, * e porta con sé una ventina di `!important` scritti negli anni. Nessun `!important` * scritto dopo — né in `fiaso-tokens.css`, che pure è l'ultimo foglio e fuori dai * livelli, né in un livello più in là — riesce a batterli: l'unico posto che ci * riesce è un livello dichiarato prima del suo. * * Conseguenza da tenere a mente: qui dentro le dichiarazioni NORMALI sarebbero le * più deboli di tutta la cascata. Ci va solo roba con `!important`. * * I valori non si scrivono qui: le proprietà personalizzate si risolvono per conto * loro e il livello non c'entra, quindi `var(--bs-btn-bg)` legge quello che * `fiaso-tokens.css` ha impostato su `.btn-primary`. Il colore sta scritto in un * posto solo. */ @layer sovrascritture { /* `project.css:441-442` impone al bottone il blu vecchio di dataroom e un testo * azzurrino. Il fondo e il testo del sito arrivano da `fiaso-tokens.css`. * Lo stato di passaggio del mouse resta quello di oggi — cioè fermo, perché * l'`!important` storico già lo spegneva: è materiale del collaudo, non di qui. */ .btn-primary { background-color: var(--bs-btn-bg) !important; color: var(--bs-btn-color) !important; } /* ─── Le utility che Bootstrap e Tailwind chiamano con lo stesso nome ─── * * Questo è il difetto che il collaudo del 2026-09-17 ha misurato, e che nessun * ordine dei livelli può risolvere. * * Bootstrap scrive TUTTE le proprie utility con `!important`. Tailwind no. E fra * un `!important` e una dichiarazione normale vince sempre il primo, quali che * siano i livelli — i livelli ordinano importanti con importanti e normali con * normali, non le due schiere fra loro. Quindi ovunque il markup del guscio usi * una utility Tailwind il cui nome esiste anche in Bootstrap, vince Bootstrap. * * Le due scale coincidono fino a 2 e divergono da 3 in su: * * classe Bootstrap Tailwind (n × 0,25rem) * -2 0,5rem 0,5rem uguali * -3 1rem 0,75rem diverse * -4 1,5rem 1rem diverse * -5 3rem 1,25rem diverse * * Nel guscio servito il 2026-09-17 le classi condivise sono 24, e dieci hanno un * valore diverso: quelle qui sotto. Misurato sull'header: 145,5px di altezza * invece dei 137,5px del sito, imbottiture da 16px invece di 12px. * * Le regole sono delimitate al guscio: `.px-3` dentro un template di dataroom * continua a valere 1rem come ha sempre fatto. * * MANUTENZIONE: se il tema comincia a usare nel guscio una utility Tailwind che * collide con una di Bootstrap e non è in questo elenco, la differenza torna, in * silenzio. Il modo di accorgersene è rilanciare il confronto meccanico fra il * guscio sul sito e il guscio qui — `prove_guscio/confronta_guscio.py` — che deve * restare senza differenze. */ :is(#site-header, .topbar-top, footer, #site-header *, .topbar-top *, footer *).gap-3 { gap: .75rem !important; } :is(#site-header, .topbar-top, footer, #site-header *, .topbar-top *, footer *).gap-4 { gap: 1rem !important; } :is(#site-header, .topbar-top, footer, #site-header *, .topbar-top *, footer *).mt-3 { margin-top: .75rem !important; } :is(#site-header, .topbar-top, footer, #site-header *, .topbar-top *, footer *).pt-3 { padding-top: .75rem !important; } :is(#site-header, .topbar-top, footer, #site-header *, .topbar-top *, footer *).px-3 { padding-inline: .75rem !important; } :is(#site-header, .topbar-top, footer, #site-header *, .topbar-top *, footer *).px-4 { padding-inline: 1rem !important; } :is(#site-header, .topbar-top, footer, #site-header *, .topbar-top *, footer *).px-5 { padding-inline: 1.25rem !important; } :is(#site-header, .topbar-top, footer, #site-header *, .topbar-top *, footer *).py-3 { padding-block: .75rem !important; } :is(#site-header, .topbar-top, footer, #site-header *, .topbar-top *, footer *).py-4 { padding-block: 1rem !important; } :is(#site-header, .topbar-top, footer, #site-header *, .topbar-top *, footer *).text-muted { color: var(--color-muted) !important; } /* Le varianti responsive, che un `!important` secco spegnerebbe. * * Le regole qui sopra valgono a ogni larghezza, ma nel guscio parecchie di * quelle classi convivono con una variante che le cambia oltre una soglia — * l'header prende 40px di respiro da 1380 in su, il menu perde del tutto * l'imbottitura del cassetto mobile, la lista delle voci chiude il proprio * spazio. Senza queste righe l'aspetto sarebbe giusto sul telefono e sbagliato * sullo schermo largo, che è il modo più sgradevole di sbagliare. * * L'elenco è quello che il guscio usa davvero il 2026-09-17 — `hd:gap-0`, * `hd:mt-0`, `hd:p-0`, `hd:px-10`, `hd:py-5`, `lg:px-10`, `md:gap-40` — e si * ricava dal markup, non si indovina. Le soglie: `md` 768px e `lg` 1024px sono * quelle di Tailwind, `hd` 1380px è del tema. * * La selezione è sulla classe che porta la variante, non sull'elemento: così * regge anche se il tema sposta quella classe su un altro nodo del guscio. */ @media (min-width: 768px) { :is(#site-header, .topbar-top, footer, #site-header *, .topbar-top *, footer *).md\:gap-40 { gap: 10rem !important; } } @media (min-width: 1024px) { :is(#site-header, .topbar-top, footer, #site-header *, .topbar-top *, footer *).lg\:px-10 { padding-inline: 2.5rem !important; } } @media (min-width: 1380px) { :is(#site-header, .topbar-top, footer, #site-header *, .topbar-top *, footer *).hd\:px-10 { padding-inline: 2.5rem !important; } :is(#site-header, .topbar-top, footer, #site-header *, .topbar-top *, footer *).hd\:py-5 { padding-block: 1.25rem !important; } :is(#site-header, .topbar-top, footer, #site-header *, .topbar-top *, footer *).hd\:p-0 { padding: 0 !important; } :is(#site-header, .topbar-top, footer, #site-header *, .topbar-top *, footer *).hd\:gap-0 { gap: 0 !important; } :is(#site-header, .topbar-top, footer, #site-header *, .topbar-top *, footer *).hd\:mt-0 { margin-top: 0 !important; } } /* Lo stato «scorso» dell'header, che le righe qui sopra spegnevano. * * `shell.js` aggiunge `header--scrolled` dopo 30px di scorrimento, e il tema * rimpicciolisce l'header con `#site-header.header--scrolled{padding-top:0; * padding-bottom:0}`. È una regola **normale**: i nostri `!important` sulle * utility la coprivano, e l'header restava alto mentre sul sito si stringeva. * * Una cosa da non toccare, o la riga smette di funzionare in silenzio: la * specificità è `(1,2,0)` — un id e due classi — contro `(1,1,0)` della variante * `hd:py-5` qui sopra, e vince per quella, non per l'ordine. Chi togliesse una * delle due classi dal selettore scenderebbe a `(1,1,0)` e perderebbe. Resta * dentro `sovrascritture`, perché è l'unico livello che batte gli `!important` * che stiamo correggendo. * * Il resto dello stato scorso — sfondo grigio, logo che si scambia, payoff che * sparisce — funziona da sé: sono dichiarazioni normali del tema, non * stratificate, e nessuna regola nostra le contende. */ #site-header.header--scrolled.py-4 { padding-block: 0 !important; } /* `border-0` è il caso che non si cura ridichiarando Tailwind, perché sul sito * quella classe **perde**: il tema dà al campo di ricerca un bordo con una regola * non stratificata, che vince sulla utility. Bootstrap invece scrive * `border:0!important` e spegne tutto, bordo del tema compreso — ed è il motivo * per cui il campo di ricerca del guscio qui non si vedeva. Si ridichiara quindi * l'esito del sito, non la utility. È un valore del tema ricopiato: se il tema * cambia quel bordo, questa riga resta indietro (e il confronto meccanico lo * dice). */ #site-header.header--light input[type="search"] { border: 1px solid #1a1a1a26 !important; } } @layer guscio { #site-header, #site-header *, #site-header *::before, #site-header *::after, .topbar-top, .topbar-top *, footer, footer *, footer *::before, footer *::after { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; font: inherit; color: inherit; text-decoration: none; list-style: none; background-color: transparent; } /* Il preflight non tratta solo le immagini: mette fuori dal flusso in linea * tutta la famiglia dei contenuti sostituiti. La nostra copia ridotta si era * fermata a `img`, e gli `svg` del guscio — il logo e le icone della fascia — * restavano in linea, appoggiati alla riga di testo: bastava a cambiare la * larghezza del blocco del logo di 30px. Elenco preso da `preflight.css` * righe 214-218 di Tailwind 4.3.3. */ #site-header :is(img, svg, video, canvas, audio, iframe, embed, object), .topbar-top :is(img, svg, video, canvas, audio, iframe, embed, object), footer :is(img, svg, video, canvas, audio, iframe, embed, object) { display: block; vertical-align: middle; } #site-header :is(img, video), .topbar-top :is(img, video), footer :is(img, video) { max-width: 100%; height: auto; } /* Lo spazio che il guscio occupa senza stare nel flusso. * * La fascia in cima e l'header sono entrambi `position: fixed`: senza questo * rientro il contenuto di dataroom comincia sotto di loro e le prime righe di * ogni pagina restano coperte. * * I due valori sono MISURATI sulla pagina resa il 2026-09-17, non dedotti: * fascia 35px + header 145,5px da 1380px in su, fascia 35px + header 126px * sotto. La soglia è quella del tema (`--breakpoint-hd: 1380px`), ed è lì che * l'header cambia imbottitura. * * NON si usa `--app-page-top` del tema: vale 6,5rem — 104px — ed è un'altra * cosa, il supplemento ai 105px dello spacer delle pagine del sito, che qui non * c'è. Lo dice il commento che la definisce in `_layout.scss`. Rimisurare * quando il tema cambia l'altezza dell'header; una variabile che la esponga * ancora non esiste (TD-T20 del tema). * * Il rientro vale SOLO dove l'header fisso c'è davvero. Le pagine di * compilazione dei questionari usano `viewer_base.html`, che monta un header * ridotto — nessun menu mentre si compila — e quello sta nel flusso: lì il * rientro sarebbe un buco di 180px in cima alla pagina. `:has()` lo lega alla * presenza dell'header, invece che a un elenco di template da tenere * aggiornato a mano. */ body:has(#site-header) { padding-top: 161px; } @media (min-width: 1380px) { body:has(#site-header) { padding-top: 180.5px; } } }