/* ============================================================ Design Scuole Italia — child "Formigine 2" · custom.css v9 Rispetta lo STILE NATIVO del tema. Regole: - ZERO gradienti (appiattiti tutti) - niente forme arrotondate aggiunte (raggi nativi del tema) - UN SOLO ROSSO in tutto il sito: il rosso #d8333a (rosso Ferrari moderno nella resa scelta il 01/08/2026, misurato 4,71:1 su bianco, sopra il minimo di legge). Vale per pre-header, footer, hero, logo, bottoni E per l'amaranto nativo del tema (#d1344c, sezione Scuola): erano due rossi diversi che litigavano. Scuro #af2127, decorazioni #eb9498, tinte #fcf0f1 / #f6d2d4. Gli altri colori di SEZIONE del modello (verde Novita', fucsia Servizi, blu elettrico Didattica, petrolio Argomenti) restano quelli ufficiali. - animazioni sobrie ma vive (hover card, decorazione hero, count-up; i pulsanti magnetici in reveal.js) Additivo: nessun override di struttura/markup/data-element. GPU-safe. ============================================================ */ :root{ --f2-blue: #d8333a; /* rosso SF-26 istituzionale (livrea F1 2026, al limite AA) (nome storico: nasceva blu) */ --f2-blue-decor: #eb9498; /* fill decorazioni SVG hero, tinta chiara dell'istituzionale */ --f2-ease: cubic-bezier(.16,1,.3,1); --f2-shadow: 0 18px 36px -22px rgba(15,15,40,.30); } /* ============================================================ ACCENTO DI SEZIONE — i nostri blocchi prendono il colore della pagina ============================================================ Nel modello ministeriale ogni sezione ha un colore, e il tema lo dichiara mettendo una classe sul contenitore principale (misurato sul sito): redbrown -> home, documenti, contatti, pagine libere purplelight -> La scuola, I servizi greendark -> Novita' bluelectric -> La didattica petrol -> Argomenti, circolari, eventi (nessuna) -> pagine di servizio: resta il rosso istituzionale La mappa e' rifatta il 31/07/2026 leggendo la classe su ogni pagina, non a memoria: la versione precedente dava «redbrown» alla Scuola e «greendark» a circolari ed eventi, e sono due sezioni su cinque sbagliate. I componenti aggiunti da noi (Ascolta la pagina, anteprima dei documenti, calendario, bacheca) erano blu SEMPRE: dentro una pagina verde o rossa sembravano incollati da un altro sito. Qui prendono il colore della sezione in cui si trovano, ereditandolo da `#main-container`. Tre valori per ogni sezione, non uno solo, per una ragione di contrasto: - `--f2-acc` il colore della sezione. Su bianco e con bianco sopra sta sempre sopra 4.5:1 (misurato: verde 4.58, rosso 4.88, viola 5.28, blu elettrico 8.53, rosso istituto 4.51). - `--f2-acc-scuro` la stessa tinta al 78%. Serve per il passaggio del mouse e, soprattutto, per il testo colorato SOPRA il fondo tenue: li' l'accento pieno scenderebbe a 4.2:1 (verde), lo scuro resta a 6.3:1. - `--f2-acc-tenue` e `--f2-acc-bordo`: fondo e filo del blocco, tinte chiare della stessa famiglia. ============================================================ */ /* Riserva su :root. Misurato su /didattica il 06/08/2026: quel carosello sta FUORI da #main-container, quindi le sue schede non ereditavano nessun `--f2-acc` e il filo sarebbe uscito con la parola chiave `initial`, cioe' niente. */ :root{ --f2-acc: #d8333a; --f2-acc-scuro: #af2127; --f2-acc-tenue: #fcf0f1; --f2-acc-bordo: #f6d2d4; } #main-container{ --f2-acc: #d8333a; --f2-acc-scuro: #af2127; --f2-acc-tenue: #fcf0f1; --f2-acc-bordo: #f6d2d4; } #main-container.greendark{ --f2-acc: #0e865c; --f2-acc-scuro: #0a6847; --f2-acc-tenue: #f4f9f7; --f2-acc-bordo: #cee6de; } #main-container.redbrown{ --f2-acc: #d8333a; --f2-acc-scuro: #af2127; --f2-acc-tenue: #fcf0f1; --f2-acc-bordo: #f6d2d4; } #main-container.purplelight{ --f2-acc: #b21dd0; --f2-acc-scuro: #8a16a2; --f2-acc-tenue: #fbf4fc; --f2-acc-bordo: #efd1f5; } #main-container.bluelectric{ --f2-acc: #0d00ff; --f2-acc-scuro: #0a00c6; --f2-acc-tenue: #f4f3ff; --f2-acc-bordo: #ceccff; } /* Petrolio: mancava, e non era un dettaglio. Le tre sezioni che lo usano (Argomenti, circolari, eventi) ricadevano sul blu di riserva, quindi i nostri blocchi restavano blu dentro pagine grigio-petrolio. Contrasto su bianco: 4,9:1 l'accento, 7,2:1 la sua versione scura. */ #main-container.petrol{ --f2-acc: #51758d; --f2-acc-scuro: #3f5b6e; --f2-acc-tenue: #f5f7f9; --f2-acc-bordo: #d6dfe6; } /* ---- ZERO GRADIENTI: appiattisci ogni gradiente del tema ---- */ [class*="gradient"]{ background-image: none !important; } /* ---- COERENZA COLORE: petrol (grigino) -> rosso istituzionale ---- */ /* slim header (pre-header) e footer nel rosso Ferrari */ .bg-petrol, .footer-wrapper{ background-color: var(--f2-blue) !important; } /* ---- LOGO: stemma e nome scuola nel rosso istituzionale ---- Il tema padre riempie lo stemma di slate (#455b71): l'id vince e lo porta al rosso; il nome accanto resta scuro neutro per non fare rosso-su-rosso. */ #main-header .logo-header svg{ fill: var(--f2-blue); } #main-header .logo-header p.h1, #main-header .logo-header .h1{ color: #1b1b2b; } /* ============================================================ BANDE HOME — ritmo del design system ufficiale (come icpalazzosg): hero BLU · In evidenza BIANCO (il colore lo danno le cover) · Servizi VIOLA nativo · Didattica BIANCO · Argomenti PETROL · footer BLU. Bande flat (il gradient-killer toglie le sfumature), cerchi concentrici nativi (.purple-oval-forms) al loro posto col fill originale. ============================================================ */ :root{ --f2-petrol: #51758d; /* petrol nativo del tema */ } /* Argomenti -> PETROL flat: esplicito perche il gradiente nativo e uno shorthand `background:` che azzera il bg-color quando si spegne l'immagine */ .bg-petrolgradient{ background-color: var(--f2-petrol) !important; } /* ---- HERO: rosso Ferrari pieno, flat */ .section-hero-left.bg-redbrown, .main-container.redbrown .section-hero-left{ background: var(--f2-blue) !important; } /* decorazioni SVG dell'hero: tinta chiara del rosso */ .section-hero-left .decoration-01 svg path, .section-hero-left .decoration-02 svg path{ fill: var(--f2-blue-decor) !important; } /* hero senza immagine: il blocco slate a destra sparisce (banda rossa uniforme) */ .section-hero-left .hero-img{ background-color: transparent !important; } /* ============================================================ OGNI BOTTONE PORTA IL COLORE DELLA SUA SEZIONE ============================================================ C'era qui un blocco che riportava al blu del sito i due outline colorati (`purplelight` dei Servizi, `petrol` degli Argomenti). Era sbagliato, e si vedeva: la banda «Servizi» e' #b21dd0 (misurato sul pixel, non dedotto) e subito sotto il «Scopri di piu'» usciva blu. Il colore e' l'unica cosa che dice a chi guarda in che sezione si trova, e il bottone e' proprio il punto in cui quella promessa va mantenuta. Nel modello ogni sezione ha il suo: Scuola rossobruno, Servizi viola, Novita' verde, Didattica blu elettrico, Argomenti petrolio. E il colore va sul PULSANTE, non sul suo contorno. Il tema padre li lascia vuoti col filo colorato: da lontano restano bianchi, e in fondo a una banda viola il richiamo non si vede. Diventano pieni come «Vai al calendario», che e' l'unico che il modello riempiva davvero, cosi' i quattro inviti di fine sezione si somigliano invece di essere tre vuoti e uno pieno. Contrasto verificato su fondo bianco: #b21dd0 = 5,3:1 e #51758d = 4,9:1, sopra il 4,5:1 delle WCAG AA per il testo e sopra il 3:1 del bordo. */ .main-container .btn-outline-purplelight{ color: #fff; background-color: #b21dd0; box-shadow: inset 0 0 0 1px #b21dd0; } .main-container .btn-outline-petrol{ color: #fff; background-color: #51758d; box-shadow: inset 0 0 0 1px #51758d; } .main-container .btn-outline-bluelectric{ color: #fff; background-color: #0d00ff; box-shadow: inset 0 0 0 1px #0d00ff; } /* Essendo pieni si comportano come gli altri pieni: sul passaggio del mouse si scuriscono, non si riempiono. La regola generale piu' sotto li salta perche' guarda il nome della classe, e «outline» ce l'hanno ancora: si elencano qui. */ .main-container .btn-outline-purplelight:hover, .main-container .btn-outline-purplelight:focus-visible, .main-container .btn-outline-petrol:hover, .main-container .btn-outline-petrol:focus-visible, .main-container .btn-outline-bluelectric:hover, .main-container .btn-outline-bluelectric:focus-visible{ color: #fff; filter: brightness(.86); } /* Il colore pieno da solo non basta a segnalare il fuoco da tastiera: serve l'anello esterno, altrimenti chi naviga con il tabulatore vede solo un filo di scurimento. */ .main-container .btn-outline-purplelight:focus-visible{ box-shadow: inset 0 0 0 1px #b21dd0, 0 0 0 .2rem rgba(178,29,208,.5); } .main-container .btn-outline-petrol:focus-visible{ box-shadow: inset 0 0 0 1px #51758d, 0 0 0 .2rem rgba(81,117,141,.5); } .main-container .btn-outline-bluelectric:focus-visible{ box-shadow: inset 0 0 0 1px #0d00ff, 0 0 0 .2rem rgba(13,0,255,.5); } /* ============================================================ CARD — la scheda intera e' il bersaglio, e il passaggio del mouse si vede ============================================================ Rifatto il 06/08/2026 partendo da tre difetti MISURATI sul sito vero, non ipotizzati (Chrome, https://formigine2.thevincenzolambiase.com): 1) IL SOLLEVAMENTO NON AVVENIVA QUASI MAI. `reveal.js` lascia sulla scheda uno stile in linea `transform: none` a fine animazione d'ingresso, e lo stile in linea batte qualunque regola del foglio: su 35 schede della home, 24 erano gia' state rivelate e quindi ignoravano `translateY(-5px)`. Si sollevavano solo quelle sopra la piega, mai toccate dallo script. Corretto in `reveal.js` (a fine ingresso gli stili in linea si tolgono). 2) L'OMBRA SI SBIADIVA DAVVERO, non era un'impressione. A riposo il tema mette `rgba(0,0,0,.17) 0 2px 7px`; il passaggio del mouse la sostituiva con `0 18px 36px -22px rgba(15,15,40,.30)`, che con 22px di raggio NEGATIVO e' piu' chiara della prima lungo il bordo. Cioe': la scheda si alzava e l'ombra diventava piu' debole. Ora l'ombra del mouse CONTIENE quella di riposo (primo strato quasi identico) e ci aggiunge sotto uno strato ampio: puo' solo crescere. In piu' la `transition` in linea di `reveal.js` elencava solo opacity e transform, quindi l'ombra scattava di colpo invece di accompagnare. 3) SI POTEVA PREMERE SOLO SUL TITOLO. Su 35 schede, 17 avevano il collegamento nel solo `h3` (In evidenza, Novita', Eventi, Circolari, Documenti): il resto della scheda era inerte. Servizi, Argomenti e «I progetti delle classi» (.card-noicon, .card-icon-main) erano gia' cliccabili per intero, ed e' proprio l'incoerenza che si notava. Ora il collegamento del titolo si allarga a coprire la scheda con uno strato invisibile: stessa tecnica di `.stretched-link` di Bootstrap Italia, ZERO markup nuovo, un solo collegamento per scheda. Per la tastiera e per lo screen reader non cambia niente: il nome accessibile resta il titolo. Nota: le schede SENZA collegamento (le tre «Scuola chiusa» del calendario, che sono dati e non destinazioni) prima si sollevavano lo stesso, promettendo un click che non esisteva. `:has(a[href])` le esclude. Dove `:has()` non c'e' non si solleva nessuna scheda: si perde un ornamento, non una funzione. */ :root{ --f2-ease-ui: cubic-bezier(.2,.6,.35,1); /* per il mouse: parte subito, si posa */ /* Il primo strato copre quello di riposo del tema (che e' .17 su 0 2px 7px): stessa geometria, un filo piu' scuro, cosi' l'ombra del mouse non puo' risultare piu' chiara di quella ferma da nessuna parte. Il secondo da' la profondita'. I NUMERI DEL SECONDO STRATO SONO VINCOLATI, non estetici: nei caroselli la slide successiva dista 24px dal bordo del ritaglio (misurato), quindi l'ombra non puo' sporgere di piu' sui fianchi senza far spuntare la scheda dopo. Con -12px di raggio su 32 di sfocatura sporge 20px di lato e 38 sotto: profonda dove si vede, stretta dove darebbe fastidio. E' anche piu' giusta cosi': una scheda sollevata getta l'ombra in basso, non intorno. */ --f2-shadow-card: 0 2px 7px rgba(15,15,40,.18), 0 18px 32px -12px rgba(15,15,40,.30); } /* ponytail: si anima `box-shadow`, non l'opacita' di uno strato finto, perche' le .card-vertical-thumb hanno `overflow:hidden` dal tema e un finto strato interno verrebbe tagliato. Passa una scheda alla volta sotto il mouse: costo trascurabile. */ .main-container .card, section.section .card{ position: relative; transition: transform .24s var(--f2-ease-ui), box-shadow .24s var(--f2-ease-ui); } /* Il filo del colore di sezione: strato a parte, si accende in opacita' (GPU). `pointer-events:none` perche' non deve mai rubare un click. */ .main-container .card:has(a[href])::before, section.section .card:has(a[href])::before{ content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px var(--f2-acc-scheda, var(--f2-acc)); opacity: 0; transition: opacity .24s var(--f2-ease-ui); } .main-container .card:has(a[href]):focus-within, section.section .card:has(a[href]):focus-within{ transform: translateY(-6px); box-shadow: var(--f2-shadow-card); } .main-container .card:has(a[href]):focus-within::before, section.section .card:has(a[href]):focus-within::before{ opacity: .38; } @media (hover: hover) and (pointer: fine){ .main-container .card:has(a[href]):hover{ transform: translateY(-6px); box-shadow: var(--f2-shadow-card); } .main-container .card:has(a[href]):hover::before{ opacity: .38; } } /* La pressione si sente: la scheda rientra invece di restare sospesa. 🔴 FUORI dal blocco `hover: hover`, e non e' un dettaglio: dentro, valeva solo col mouse, quindi chi tocca la scheda dal telefono non riceveva NESSUN ritorno fino al cambio di pagina. Sul telefono e' l'unico ritorno che esiste, perche' il sollevamento del passaggio del mouse li' non c'e' per definizione. */ .main-container .card:has(a[href]):active, section.section .card:has(a[href]):active{ transform: translateY(-2px); box-shadow: 0 2px 6px rgba(15,15,40,.16), 0 6px 14px -4px rgba(15,15,40,.22); transition-duration: .09s; } /* Sul tocco il filo si accende con la pressione: senza mouse non si accenderebbe mai. */ @media (hover: none){ .main-container .card:has(a[href]):active::before{ opacity: .38; } } /* ---- Il collegamento del titolo copre la scheda ---- Vale per il markup reale del tema: `h3.h5 > a` dentro .card-content (In evidenza, Novita', Eventi, Circolari) e dentro .card-icon-content (Documenti); i Progetti usano `a.project-card-title`. Servizi/Argomenti/card-icon-main sono esclusi: li' l' avvolge gia' tutto e un secondo strato sarebbe un doppione. */ .main-container .card .card-body h3 > a[href]::after, section.section .card .card-body h3 > a[href]::after, .main-container .card a.project-card-title::after, section.section .card a.project-card-title::after{ content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; cursor: pointer; } /* Dove c'e' JavaScript lo strato smette di intercettare il puntatore e il click lo gestisce il copione. Serve a restituire tre cose che lo strato si mangiava: - la SELEZIONE del testo dentro la scheda (sulle circolari la descrizione e' lunga e chi la deve girare a qualcuno la copia); - il click centrale, cioe' aprire in una scheda nuova; - ctrl+click e cmd+click, che facevano la stessa cosa solo se si azzeccava il titolo. Senza JavaScript non cambia niente: lo strato resta al suo posto e tutta la scheda e' cliccabile come prima. */ html.f2-js .main-container .card .card-body h3 > a[href]::after, html.f2-js .main-container .card a.project-card-title::after{ pointer-events: none; } html.f2-js .main-container .card:has(.card-body h3 > a[href]), html.f2-js .main-container .card:has(a.project-card-title){ cursor: pointer; } /* Tutto cio' che nella scheda e' cliccabile resta SOPRA lo strato: i tag argomento, il nome dell'autore, i pulsanti, il «Leggi di piu'». Senza questa riga lo strato se li mangerebbe. Regola generale, non un elenco: vale anche per i collegamenti che verranno aggiunti domani. */ .main-container .card a[href], section.section .card a[href], .main-container .card button, section.section .card button{ position: relative; z-index: 2; } /* ...tranne il collegamento del titolo, che deve restare `static`: se diventasse posizionato, il suo strato si misurerebbe su di lui invece che sulla scheda. */ .main-container .card .card-body h3 > a[href], section.section .card .card-body h3 > a[href], .main-container .card a.project-card-title, section.section .card a.project-card-title{ position: static; z-index: auto; } /* titolo card: vira al colore della sezione su hover/focus. Markup reale = h3.h5>a in .card-content (NON `.card-title`, che su questo tema non esiste -> la regola vecchia era morta); Servizi/Argomenti = testo in .card-icon-content dentro l'. */ .main-container .card-content a, section.section .card-content a, .main-container .card-title a, section.section .card-title a{ transition: color .2s ease; } .main-container .card:hover .card-content a, section.section .card:hover .card-content a, .main-container .card:focus-within .card-content a, section.section .card:focus-within .card-content a, .main-container .card:hover .card-title a, section.section .card:hover .card-title a, .main-container .card:focus-within .card-title a, section.section .card:focus-within .card-title a{ color: var(--f2-acc-scheda, var(--f2-acc)); } .main-container .card-noicon .card-icon-content, section.section .card-noicon .card-icon-content, .main-container .card-icon-main .card-icon-content, section.section .card-icon-main .card-icon-content{ transition: color .2s ease; } .main-container .card-noicon:hover .card-icon-content, section.section .card-noicon:hover .card-icon-content, .main-container .card-noicon:focus-within .card-icon-content, section.section .card-noicon:focus-within .card-icon-content, .main-container .card-icon-main:hover .card-icon-content, section.section .card-icon-main:hover .card-icon-content, .main-container .card-icon-main:focus-within .card-icon-content, section.section .card-icon-main:focus-within .card-icon-content{ color: var(--f2-acc-scheda, var(--f2-acc)); } /* ============================================================ RESPONSIVE — le cure misurate sulla matrice pagina x apparecchio ============================================================ 1008 combinazioni (24 carte x 42 apparecchi, da 280px a 3840px, con gli ingrandimenti del browser e i rapporti di pixel), Chrome headless, controllo vivo superato 84 volte su 84. Ogni riga qui sotto nasce da un numero, non da un sospetto. Il banco sta in projects/ddformigine2/qa/, si rifa' con `node tagli.mjs`. ============================================================ */ /* --- IL MENU LATERALE E' LARGO 320px FISSI --- `.cbp-spmenu{ width: 320px }` sta in scuole.css del tema padre. Su uno schermo da 280px (Galaxy Fold chiuso, e non e' un caso di scuola: e' l'apparecchio piu' stretto in circolazione) il pannello sborda di 40px, e con lui la pagina: misurato `scrollWidth` 331 contro 280 su /la-scuola, 292 contro 280 su amministrazione trasparente. Da li' vengono anche le voci di menu tagliate col telefono coricato («Tutti gli argomenti» mozzato di 30px, «Didattica» di 34). `min()` non cambia niente sopra i 320: morde solo dove mordeva la misura fissa. */ .cbp-spmenu, .cbp-spmenu-vertical{ width: min(320px, 100vw); } /* --- IL CORPO DEI TITOLI SI CONGELA E LA FRASE DIVENTA UNA TORRE --- Misurato sul sito: la citazione di apertura de «La scuola» resta a 56px anche a 280 e a 390px di larghezza. In una colonna da 366px fanno NOVE caratteri per riga, dove una riga di prosa ne vuole almeno 45: la frase diventa una colonna di parole alta mezzo schermo. E' il caso classico del fondo di `clamp()` scelto su uno schermo grande, che sotto una certa misura smette di scendere. Si tocca solo sotto i 576px, e solo dove il testo e' LUNGO: i titoli brevi non ci guadagnano niente a rimpicciolire, e la gerarchia va difesa. Sopra quella soglia il valore resta esattamente quello del modello. */ @media (max-width: 575.98px){ .big-quote h2, .big-quote .h2, .big-quote .h3{ font-size: clamp(22px, 7.2vw, 34px); line-height: 1.2; } .title-content h1, .title-content h1.h2{ font-size: clamp(24px, 8vw, 36px); line-height: 1.15; } .hero-title p.h4, .hero-title h2.h4{ font-size: clamp(16px, 4.6vw, 21px); } } /* --- UNA PAROLA CHE NON SI SPEZZA ALLARGA TUTTA LA PAGINA --- Trovata per bisezione (qa/bisezione.mjs) su /la-scuola/ a 280px: il titolo `div.big-quote > h2.h3` misura 256px di larghezza ma ne chiede 319 di contenuto, e i 51px di differenza sono ESATTAMENTE l'allargamento del documento (331 contro 280). Sul telefono piu' stretto in circolazione tutta la pagina veniva rimpicciolita da una parola sola. `break-word` e non `anywhere`: spezza soltanto quando la parola non ci sta in nessun modo, invece di andare a capo dove capita. Sui titoli e' la differenza fra una cura e un danno. Vale per i titoli e per le citazioni, dove le parole lunghe stanno di casa (nomi di procedure, indirizzi di posta, sigle). */ .big-quote h2, .big-quote .h3, .big-quote p, .main-container h1, .main-container h2, .main-container h3, section.section h1, section.section h2, section.section h3{ overflow-wrap: break-word; } /* --- LE VOCI DEL MENU LATERALE SONO MOZZATE COL TELEFONO CORICATO --- Misurato: «Tutti gli argomenti» tagliato di 30px a 844x390 e a 683x384 (1366 al 175%), «Didattica» di 34px a 568x320. Il pannello e' alto quanto lo schermo e le voci non vanno a capo: quello che avanza sparisce, e con esso la navigazione. Le voci vanno a capo e il pannello scorre: nessuna voce si perde piu'. */ .cbp-spmenu-vertical a, .cbp-spmenu-vertical label{ white-space: normal; overflow-wrap: anywhere; } .cbp-spmenu-vertical{ overflow-y: auto; -webkit-overflow-scrolling: touch; } /* --- L'IMMAGINE DELLE SCHEDE A LINGUETTA SBORDA DI 38px --- Su iPad, in piedi e coricato (misurato a 1024x1366, 1024x768, 1180x820, 1194x834). 🔴 NON e' un'immagine senza tetto, ed e' l'errore che avevo fatto: il tema la posiziona in assoluto e la TIRA FUORI di proposito, come decorazione — `.responsive-tabs-wrapper .tabs-img{ width:290px; position:absolute; left:-50px }` dentro una @media da 992px in su (scuole.css). Il mio primo rimedio le imponeva `width: auto`, e su un elemento in assoluto con `left` e `right` entrambi dichiarati quello vuol dire «riempi»: da 290px larghi diventava 1000, cioe' un difetto molto peggiore di quello che curava. Misurato, non dedotto. La cura giusta e' lasciare intatti larghezza e posizione, e togliere il tiro a sinistra solo dove non c'e' spazio per sostenerlo: sotto i 1400px il contenitore ha circa 30px di margine e i 50 del tiro non ci stanno. Sopra, la decorazione resta come l'ha voluta il modello. */ @media (min-width: 992px) and (max-width: 1399.98px){ .responsive-tabs-wrapper .tabs-img{ left: 0; } } /* --- IL NOME DELLA SCUOLA IN TESTATA SCENDE A 10px --- Da 390 a 834 di larghezza, cioe' su tutti i telefoni grandi e su tutti i tablet: «Direzione Didattica» e «FORMIGINE 2» rimpicciolivano sotto la soglia leggibile. E' l'identita' dell'istituto, ed e' la prima riga che si legge aprendo il sito. */ /* 🔴 Sta nel PIE' DI PAGINA, non in testata: il primo tentativo lo cercava sotto `#main-header` e non matchava niente (misurato, la catena reale e' FOOTER#footer-wrapper > DIV.logo-footer > A.logo-header > SPAN.h1 > SPAN). Senza vincolo di antenato copre tutte e due le occorrenze. */ .logo-header .h1 span, .logo-header p.h1 span, .logo-header span.h1 span{ font-size: max(0.75rem, 1em); } /* --- BERSAGLI DI TOCCO: i comandi di testo restano alti 20-23px --- Misurati: «Il curricolo verticale» 245x21, l'indirizzo in fondo 238x21, «Apri a schermo intero» 123x20, «Mostra sulla mappa» 111x20, il nome del DSGA 292x23. Sono comandi, non rimandi dentro una riga di prosa, quindi l'eccezione delle WCAG non li copre. Si alza l'area, non il carattere: l'impaginazione non si muove. */ /* Senza il vincolo `.main-container`: l'indirizzo della scuola e i recapiti stanno nel pie' di pagina, che sta FUORI dal contenitore principale (misurato: dentroMain false), e il primo tentativo li lasciava indietro. */ a.read-more, a.text-underline-hover, .main-container dt > a, #footer-wrapper dt > a, .f2pdfdoc-open, .f2pdfdoc-dl, .f2pdfdoc-listen, .f2-card-locate, .f2ra-btn{ display: inline-flex; align-items: center; min-height: 24px; } /* --- TESTI NOSTRI SOTTO LA SOGLIA --- Il nome della festivita' nel calendario scendeva a 10,9px sui tablet, e l'etichetta dell'ordine di scuola nelle schede dei luoghi a 10,6px sugli schermi molto grandi (dove il corpo e' legato a `vw` e quindi si comporta al contrario di come ci si aspetta). Dodici pixel e' il minimo sotto cui una parola non si legge piu'. */ /* Specificita': la regola del calendario e' `.f2cl-cella .f2cl-festa` (0,2,0) e un selettore semplice non la batte. Misurato: restava 10,9px anche dopo la prima cura. */ .f2cl-cella .f2cl-festa, .f2cl-giorno .f2cl-festa, .f2-card-body .f2-card-badge, .f2cl-festa, .f2-card-badge{ font-size: max(12px, 0.72rem); } /* ============================================================ L'INDICATORE DEL CAROSELLO: SEGMENTI, NON PALLINI ============================================================ I pallini erano 12x12 con 5px di margine: piccoli da centrare col dito, e soprattutto non dicono NIENTE. Sei pallini identici non fanno capire quanto manca ne' quanto si e' letto: comunicano solo «ci sono altre cose», che e' l'informazione meno utile. Diventano segmenti affiancati che riempiono una riga, come un avanzamento: si legge a colpo d'occhio a che punto si e' e quanto resta. Il markup e' quello del modello ministeriale, non cambia una riga di HTML: cambia solo il disegno, quindi il carosello continua a funzionare e a essere navigabile da tastiera esattamente come prima. Il segmento attivo prende il colore della sezione. */ .splide .splide__pagination{ display: flex; gap: 6px; flex-wrap: nowrap; padding: 0; margin: 1rem auto 0; max-width: 260px; list-style: none; } .splide .splide__pagination li{ flex: 1 1 0; display: block; margin: 0; } .splide .splide__pagination .splide__pagination__page{ display: block; width: 100%; height: 3px; margin: 0; border: 0; border-radius: 2px; opacity: 1; transform: none; background: #d9dadb; transition: background-color .24s var(--f2-ease-ui); } .splide .splide__pagination .splide__pagination__page.is-active{ background: var(--f2-acc); transform: none; } @media (hover: hover) and (pointer: fine){ .splide .splide__pagination .splide__pagination__page:hover{ background: var(--f2-acc-scuro, var(--f2-acc)); } } /* L'area che risponde al dito resta 24px alta anche se il segno e' alto 3: lo strato invisibile la allarga sopra e sotto senza toccare il disegno. */ .splide .splide__pagination .splide__pagination__page{ position: relative; } .splide .splide__pagination .splide__pagination__page::after{ content: ""; position: absolute; left: 0; right: 0; top: -11px; bottom: -11px; } .splide .splide__pagination .splide__pagination__page:focus-visible{ outline: 2px solid var(--f2-acc); outline-offset: 4px; } /* ============================================================ BERSAGLI DI TOCCO — 24x24 come minimo (WCAG 2.5.8, AA) ============================================================ Misurato il 06/08/2026 sul sito, a 390px: - i puntini di navigazione dei caroselli sono 12x12, con 5px di margine per lato: 22px di passo, quindi anche l'eccezione della spaziatura non li salva; - il collegamento «Ministero dell'Istruzione e del Merito» in testata e' alto 21px. Sono i due comandi che su un telefono si sbagliano piu' spesso: il primo perche' e' piccolo, il secondo perche' e' la prima cosa che si tocca aprendo il sito. Il puntino resta grande 12px: cambia solo l'AREA che risponde, allargata con uno strato invisibile. Cosi' il disegno del modello ministeriale non si tocca e il dito trova comunque il bersaglio. */ /* (l'indicatore del carosello e' rifatto piu' sopra: segmenti invece di pallini, con l'area di tocco a 24px) */ /* Il collegamento del Ministero: alto 24, centrato, senza alzare la fascia. */ #main-header .col-8 > a[href], .it-header-slim-wrapper .col-8 > a[href]{ display: inline-flex; align-items: center; min-height: 24px; } /* ---- L'OMBRA NON DEVE ESSERE TAGLIATA, SU NESSUN LATO ---- Misurato sul sito il 06/08/2026: le schede dentro un carosello stanno in `.splide__track`, che ha `overflow: hidden` su tutti e due gli assi (gli serve per nascondere le slide fuori quadro). L'ombra si disegna FUORI dalla scheda, quindi il ritaglio la mozza netta. Spazio che c'era davvero attorno alla scheda «Chiusure prefestivi A.S. 2026/2027»: 2px a sinistra, 28 sotto. Ne servivano 24 e 32. Il taglio piu' evidente era quello VERTICALE A SINISTRA, non quello sotto. `overflow: clip` invece di `hidden` e' la differenza che risolve. `hidden` obbliga tutti e due gli assi (se uno e' hidden, l'altro non puo' restare `visible`); `clip` no: si puo' ritagliare in orizzontale, dove serve davvero per nascondere le slide, e lasciare libero il verticale, dove non serve a niente. Cosi' sotto e sopra l'ombra non incontra piu' nessun bordo, e cade il bisogno di imbottiture e margini negativi che spostavano il contorno del carosello. Di lato il ritaglio deve restare, e allora si allarga di 20px con `overflow-clip-margin`, che sposta il taglio senza toccare l'impaginazione di un pixel. Perche' 20 e non di piu': la slide successiva comincia 24px dopo il bordo, misurato; oltre i 24 farebbe capolino. Ed e' il motivo per cui l'ombra e' stata stretta a 20px sui fianchi (vedi `--f2-shadow-card`): i due numeri sono la stessa decisione presa da due parti. Browser vecchi: `overflow-x: clip` non e' valido, la dichiarazione viene ignorata e resta l'`hidden` del carosello. Si torna a com'era, non si rompe niente. */ /* 🔴 IMBOTTITURA E MARGINE NELLO STESSO BLOCCO, E CON LA SPECIFICITA' CHE VINCE. Il difetto che ha prodotto: le schede finivano SOPRA «Vedi tutti» e sopra i puntini. Misurato il 07/08/2026: `.splide .splide__track{ padding-bottom: 20px }` sta in scuole.css e vale 0,2,0; la mia `.splide__track{ padding-bottom: 46px }` vale 0,1,0 e perdeva. I MARGINI negativi invece vincevano, perche' nessun altro li dichiara. Risultato: il carosello si tirava su di 46 avendo solo 20 di respiro, cioe' 26px di risalita a vuoto, e tutto quello che veniva dopo saliva a infilarsi sotto le schede («Vedi tutti» a 16px SOPRA il fondo della scheda, i puntini dentro la scheda stessa). Regola generale che questo caso insegna: un margine negativo e l'imbottitura che lo compensa vanno dichiarati INSIEME e con la stessa specificita'. Se si separano, basta che uno dei due perda il duello della cascata e il compenso diventa uno spostamento. */ .splide .splide__track, .carousel-notice .splide__track, .it-carousel-wrapper .splide__track{ padding-top: 30px; margin-top: -30px; /* Sotto NON si compensa tutto: l'ombra della scheda sollevata scende 32px sotto il suo fondo, e quello spazio deve esistere NEL FLUSSO, non solo dentro il riquadro di ritaglio. Compensando 46 su 46 il carosello tornava a filo e l'ombra finiva sopra l'indicatore e sopra «Vedi tutti» (misurato: 8px di sovrapposizione). 46 - 32 = 14: si compensa fino a li' e i 32 restano come respiro vero. */ padding-bottom: 46px; margin-bottom: -14px; } /* ORIZZONTALE: non si fa, e non e' una rinuncia comoda, e' una misura. 🔴 Provate il 06/08/2026 tre strade, tutte sul sito vero: `overflow: clip` col margine di ritaglio, il ritaglio spostato sul `.splide` genitore, e l'imbottitura orizzontale sul track. Tutte e tre portano lo `scrollWidth` del documento da 390 a 398 su telefono, cioe' una barra di scorrimento orizzontale su OGNI telefono. Le ragioni sono diverse ma la causa e' una: dentro un telefono la scheda arriva a 2px dal bordo del ritaglio, spazio da prendere non ce n'e'. E `overflow: clip`, a differenza di `hidden`, non contiene l'eccedenza: la lascia salire agli antenati. Provata anche la versione con l'imbottitura solo sopra i 992px: niente barra, ma le slide cambiavano larghezza (388px invece di 375 a 1440), perche' splide calcola la misura delle slide dal `clientWidth` del track, che l'imbottitura gonfia. Otto pixel di scorrimento su ogni telefono, o un carosello che si reimpagina sul desktop, sono due danni peggiori di un'ombra smussata sul fianco DENTRO i caroselli. Fuori dai caroselli, che e' la gran parte delle schede del sito, l'ombra e' intera. */ /* ---- Sottolineatura del titolo: si accende sotto il mouse ---- E' il dettaglio che fa sembrare la scheda una cosa sola invece di un riquadro con dentro un link. Fatta con `text-decoration-color` e non con un filo disegnato a parte per due motivi: segue il testo quando va a capo, e non richiede di rendere posizionato il collegamento del titolo (che deve restare `static`, altrimenti lo strato invisibile si misurerebbe su di lui invece che sulla scheda). Il tratto c'e' sempre, solo trasparente: cosi' l'altezza della riga non balla. */ .main-container .card .card-body h3 > a, section.section .card .card-body h3 > a, .main-container .card a.project-card-title, section.section .card a.project-card-title{ text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: .19em; transition: color .22s var(--f2-ease-ui), text-decoration-color .22s var(--f2-ease-ui); } .main-container .card:hover .card-body h3 > a, section.section .card:hover .card-body h3 > a, .main-container .card:focus-within .card-body h3 > a, section.section .card:focus-within .card-body h3 > a, .main-container .card:hover a.project-card-title, section.section .card:hover a.project-card-title, .main-container .card:focus-within a.project-card-title, section.section .card:focus-within a.project-card-title{ text-decoration-color: currentColor; } /* Il fuoco da tastiera deve vedersi sulla SCHEDA, non solo sulla riga di testo: il bersaglio adesso e' la scheda intera, e l'anello deve dirlo. */ .main-container .card:has(a[href]:focus-visible), section.section .card:has(a[href]:focus-visible){ outline: 2px solid var(--f2-acc-scheda, var(--f2-acc)); outline-offset: 3px; } /* Con «riduci le animazioni» la scheda non si muove: restano ombra, filo e sottolineatura, che dicono la stessa cosa senza spostare niente sotto gli occhi di chi legge. */ @media (prefers-reduced-motion: reduce){ .main-container .card:has(a[href]):hover, .main-container .card:has(a[href]):focus-within, .main-container .card:has(a[href]):active{ transform: none; } } /* ---- ARGOMENTI: il segnalibro prende il colore della sezione ---- Era fissato sul blu del sito: nella pagina Argomenti, che e' petrolio, restava l'unico elemento blu della schermata. `--f2-acc` lo lega alla sezione, e nelle pagine senza colore vale comunque il blu, quindi non si perde niente. */ .main-container .card-icon .icon.svg-marker-simple, section.section .card-icon .icon.svg-marker-simple{ fill: var(--f2-acc); transition: transform .3s var(--f2-ease); } .main-container .card-icon:hover .icon.svg-marker-simple, section.section .card-icon:hover .icon.svg-marker-simple{ transform: translateY(-2px); } .main-container .card-vertical-thumb .card-comments-wrapper, section.section .card-vertical-thumb .card-comments-wrapper{ display:none !important; } .main-container .card-vertical-thumb .card-thumb, section.section .card-vertical-thumb .card-thumb{ overflow:hidden; } /* La copertina si avvicina insieme alla scheda, non dopo: a .7s partiva col mouse gia' fermo e sembravano due animazioni scollegate. Ingrandimento ridotto da 1.06 a 1.04, che su una foto di 190x290 e' la differenza fra un movimento e uno scatto. */ /* `will-change` SOLO sotto il mouse. Dichiarato sempre, come stava prima, obbliga il browser a tenere un livello di composizione in memoria video per OGNI copertina della pagina: sull'archivio delle notizie sono una dozzina di immagini promosse a vuoto, per un'animazione che riguarda una scheda sola alla volta. Si annuncia quando serve. */ .main-container .card-vertical-thumb .card-thumb img, section.section .card-vertical-thumb .card-thumb img{ transition: transform .5s var(--f2-ease-ui); } @media (hover: hover) and (pointer: fine){ .main-container .card-vertical-thumb:hover .card-thumb img{ will-change: transform; } } .main-container .card-vertical-thumb:hover .card-thumb img, section.section .card-vertical-thumb:hover .card-thumb img{ transform: scale(1.04); } /* ---- "Seguici su:" nascosto finche' non ci sono account reali ---- il blocco social senza link mostra un'etichetta vuota; si ri-mostra da solo appena il template renderizza almeno un (account social reali). */ .header-social:not(:has(a)){ display: none !important; } /* ============================================================ BOTTONI — UNA grammatica per TUTTO il sito (richiesta Vincenzo): ogni bottone, ovunque, al passaggio CAMBIA COLORE visibilmente. - outline -> si RIEMPIE (bianco->blu, blu->pieno, ecc.) - pieni -> si SCURISCONO (filter: funziona anche sui background inline) + transizione condivisa, attivo scale, focus-visible = hover. Il movimento magnetico e' in reveal.js (tutti i .btn). ============================================================ */ .btn{ transition: transform .22s var(--f2-ease), box-shadow .22s var(--f2-ease), background-color .2s ease, color .2s ease, border-color .2s ease, filter .2s ease; } .btn:active{ transform: scale(.98); } /* — PIENI del CONTENUTO: scurimento generico su hover/focus (vale per QUALSIASI colore, compreso btn-bluelectric col background inline nel template). I bottoni dell'hero sono gestiti a parte (invertono, sotto). — */ .main-container .btn:not([class*="outline"]):hover, .main-container .btn:not([class*="outline"]):focus-visible{ filter: brightness(.86); } /* — OUTLINE: riempimento pieno per variante — (purplelight e petrol stanno nel blocco dei colori di sezione, piu' sopra) */ .btn-outline-secondary:hover, .btn-outline-secondary:focus{ color:#fff !important; background-color:#5c6f82 !important; } /* outline-white (hero e bande scure): riempie bianco, testo blu — gia' definito sotto */ /* — NESSUN AZZURRO ESTRANEO — `btn-primary` di Bootstrap e' #0066cc: un azzurro che non appartiene alla palette del sito (il rosso istituzionale di testata e piede e' #d8333a). Lo riportiamo al rosso del sito ovunque compaia, cosi' anche i bottoni che arrivano dal tema padre (es. la finestra "Accedi") somigliano agli altri. */ .btn-primary{ background-color:#d8333a !important; border-color:#d8333a !important; color:#fff !important; } .btn-outline-primary:hover, .btn-outline-primary:focus{ color:#fff !important; background-color:#d8333a !important; border-color:#d8333a !important; } /* — "Aggiungi al calendario" in fondo alla pagina del singolo evento — Sta sotto tutti i paragrafi, subito sopra il piede "Pubblicato / Revisione". Un filo sopra e aria intorno lo staccano dall'ultimo paragrafo: si legge come AZIONE della pagina, non come coda del testo. Il colore e' quello della sezione Novita'/Eventi (btn-greendark), non un azzurro estraneo. La specificita' e' `.article-wrapper .f2-ics-add` perche' il tema imposta `.article-wrapper p{ margin:0 0 20px }`, che altrimenti vince. */ .article-wrapper .f2-ics-add{ margin: 0; padding-top: 2rem; border-top: 1px solid #e3e7eb; margin-bottom: 2rem; } @media (max-width: 575.98px){ .article-wrapper .f2-ics-add .btn{ display:block; width:100%; text-align:center; } } /* ============================================================ ETICHETTE SOTTO IL TITOLO ("Argomenti", "Tipologia", "Materie", "Classi") — IN RIGA, non incolonnate. Nel tema sono blocchi sovrapposti: su schermo stretto la colonna e' a piena larghezza e i due blocchi sprecano ~100px di altezza avendo spazio orizzontale libero. Qui la colonna che li contiene diventa una riga che manda a capo SOLO se non ci stanno. `:has()` limita l'effetto alle colonne che contengono davvero questi blocchi; dove non e' supportato resta il comportamento di oggi. ============================================================ */ .main-container .row > [class*="col-"]:has(> .badges-wrapper.badges-main){ display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: .5rem; row-gap: 1.25rem; } /* "Stampa / Condividi" tiene la riga tutta per se' */ .main-container .row > [class*="col-"]:has(> .badges-wrapper.badges-main) > .actions-wrapper{ flex: 0 0 100%; } /* ogni blocco larga quanto il suo contenuto, a capo SOLO se non ci sta. La distanza fra due blocchi la danno i 15px di padding che il tema mette a ciascuno: cambiarli sposterebbe l'allineamento col titolo. */ .main-container .row > [class*="col-"]:has(> .badges-wrapper.badges-main) > .badges-wrapper.badges-main{ flex: 0 1 auto; margin-top: 0 !important; min-width: 0; } /* eccezione: il blocco con la scheda della persona ("Insegnante") non e' fatto di pill: stretto a misura del contenuto il nome andava a capo. Gli si da' una larghezza minima leggibile. */ .main-container .row > [class*="col-"]:has(> .badges-wrapper.badges-main) > .badges-wrapper.badges-main:has(.card-avatar){ min-width: 15rem; } /* etichetta attaccata ai suoi pill: 15px fra "Argomenti" e il suo tag erano aria persa */ .badges-wrapper.badges-main > h2, .badges-wrapper.badges-main > h3{ margin-bottom: .4rem; } /* i pill non strabordano quando la colonna e' stretta */ .badges-wrapper.badges-main .badge{ white-space: normal; } /* ---- HERO: presenza tipografica piu decisa (solo home) ---- nel tema il font-size sta su .hero-title h1, non sul wrapper */ .home .section-hero-left .hero-title h1, .home .section-hero-left .hero-title .h1{ font-size: clamp(2.9rem, 5.5vw, 4.5rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.04; } /* ============================================================ HEADER — comportamento NATIVO del tema (IDENTICO a icpalazzosg) 🔴 NIENTE forzature mie su posizione/altezza dell'header. Il farfallio in apertura/chiusura era causato dal mio `position:sticky`: tenendo l'header NEL FLUSSO, compattandosi spostava il contenuto e ri-triggerava lo stato -> sfarfallio. RIMOSSO: l'header usa il `position:fixed` nativo del tema (fuori dal flusso, stabile) con la compensazione padding nativa (`#main-wrapper.sticked-menu`). Stesso tema, stesse regole di icpalazzosg -> comportamento identico, niente sfarfallio. Qui restano SOLO due rifiniture di CONTENUTO in compatto (non toccano il movimento dell'header): 1) "Tutti gli argomenti" nascosto; 2) bridge hover per cliccare "Panoramica". */ /* compatto: "Tutti gli argomenti" (nav-list-secondary) nascosto nell'header (non il footer). Al top resta visibile. */ #main-header.is-sticky .nav-list-secondary{ display: none !important; } /* compatto: bridge hover voce->tendina. C'e' un gap (~16px) tra la voce e la sua tendina: attraversandolo si perde l'hover e la tendina si chiude, quindi "Panoramica" (prima voce) non e' cliccabile. Questo ::after e' DENTRO la tendina (reso solo quando aperta -> nessun clic bloccato da chiusa) e copre il gap. */ .sticky-main-nav .menu-dropdown-simple::after, .sticky-main-nav .menu-dropdown-megamenu::after{ content: ''; position: absolute; left: 0; right: 0; top: -18px; height: 18px; } /* ---- MOTION ---- */ @media (prefers-reduced-motion: no-preference){ .section-hero-left .decoration-01{ animation: f2spin 120s linear infinite; transform-origin:50% 50%; } .section-hero-left .decoration-02{ animation: f2float 7s ease-in-out infinite alternate; } @keyframes f2spin{ from{transform:rotate(0)} to{transform:rotate(360deg)} } @keyframes f2float{ from{transform:translateY(0)} to{transform:translateY(-9px)} } } @media (prefers-reduced-motion: reduce){ .main-container *, #main-header #sub-nav, #main-header .header-top, #main-header .logo-header svg, #main-header .logo-header .h1, #main-header .logo-header h1, .section-hero-left .decoration-01, .section-hero-left .decoration-02{ transition:none !important; animation:none !important; } .main-container .card-vertical-thumb .card-thumb img{ transition:none !important; transform:none !important; } } /* ---- CWV / anti-CLS (audit §10 A3) ---- Riservo lo spazio dell'immagine PRIMA che carichi, cosi il layout non salta. Rinforza i width/height ora emessi via wp_get_attachment_image (cover + banner): se un attributo mancasse, l'aspect-ratio tiene comunque lo spazio. */ .main-container .card-thumb img, section.section .card-thumb img{ aspect-ratio:190/290; width:100%; height:auto; } .carousel-notice .banner figure img{ aspect-ratio:469/250; width:100%; height:auto; } /* ============================================================ STAMPA — foglio pulito per circolari, atti e pagine. I genitori stampano le circolari/moduli: via il chrome, testo nero su bianco, niente sfondi/ombre, URL dei link ESTERNI esposti nel contenuto, niente tagli a meta' di card/tabelle. Solo @media print: zero effetto a schermo. ============================================================ */ @media print { #main-header, .it-header-slim-wrapper, .cookiebar, #cookiebar, .skiplinks, #skiplinks, .back-to-top, #torna-su, .footer-social, .header-social, .it-carousel-wrapper .splide__arrows, .splide__pagination, .sharethis-inline-share-buttons, .no-print, .section-hero-left .decoration-01, .section-hero-left .decoration-02 { display: none !important; } html, body { background: #fff !important; color: #000 !important; } body { font-size: 12pt; line-height: 1.5; } *, *::before, *::after { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; } .main-container, .container, .section { padding: 0 !important; margin: 0 auto !important; } .card, .section, figure, table, .accordion-large, .accordion-large-content, li { page-break-inside: avoid; } h1, h2, h3, h4 { page-break-after: avoid; } img { max-width: 100% !important; height: auto !important; } a { text-decoration: underline; } /* esponi l'URL solo dei link ESTERNI del contenuto (non nav, non bottoni, non link interni) */ .main-container a[href^="http"]:not(.btn):not([href*="formigine2.thevincenzolambiase"]):not([href*="ddformigine2"])::after { content: " [" attr(href) "]"; font-size: 9pt; word-break: break-all; } } /* ---- BOTTONI HERO: due bottoni accoppiati, GERARCHIA CHIARA (pieno vs vuoto) ---- Sinistra "Accesso rapido" = PRIMARIO pieno bianco (testo rosso); destra "Vai alla scuola" = SECONDARIO outline bianco. Non si confondono. Entrambi reagiscono al passaggio (invertono i colori) e sono magnetici (reveal.js). */ /* PRIMARIO: pieno bianco -> su hover inverte (rosso pieno, testo bianco) */ .section-hero-left .btn-white{ background:#fff; color:var(--f2-blue); box-shadow:none; transition: transform .22s var(--f2-ease), box-shadow .22s var(--f2-ease), background-color .2s ease, color .2s ease; } .section-hero-left .btn-white:hover, .section-hero-left .btn-white:focus{ background-color:var(--f2-blue); color:#fff; box-shadow: inset 0 0 0 1px #fff, 0 12px 26px -14px rgba(60,0,0,.55); } /* dimensione e distanza dei due bottoni hero: un po' piu' grandi del btn-sm, piu' distanziati (non si sovrappongono), ma senza esagerare. */ .section-hero-left .f2-hero-btn{ padding: .62rem 1.4rem; font-size: 1.02rem; line-height: 1.2; } .section-hero-left .f2-hero-btn + .f2-hero-btn{ margin-left: 1.1rem; } @media (max-width: 575.98px){ .section-hero-left .f2-hero-btn + .f2-hero-btn{ margin-left: 0; } /* in colonna: gap dato da mt-4 */ } /* SECONDARIO: outline bianco -> su hover si riempie di bianco (testo rosso) */ .section-hero-left .btn-outline-white{ color:#fff; background:transparent; box-shadow: inset 0 0 0 1px #fff; transition: transform .22s var(--f2-ease), box-shadow .22s var(--f2-ease), background-color .2s ease, color .2s ease; } .section-hero-left .btn-outline-white:hover, .section-hero-left .btn-outline-white:focus{ background-color:#fff; color:var(--f2-blue); box-shadow: inset 0 0 0 1px #fff, 0 12px 26px -14px rgba(60,0,0,.55); } /* ============================================================ COPERTINE UNIFORMI — resa corretta ovunque. Sorgente quadrata 1200x1200: le card ritagliano col ratio del tema (object-fit evita lo stiramento), l'header dell'articolo la centra (background inline del tema: qui solo size/position, mai l'URL). ============================================================ */ .main-container .card-thumb img, section.section .card-thumb img{ object-fit: cover; } .article-title .title-img, .title-img{ background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; } /* Guida "Iscrizioni passo dopo passo": elenco dei documenti da preparare. */ .f2-step-list { margin: .2rem 0 0; padding-left: 1.2rem; } .f2-step-list li { margin-bottom: .35rem; line-height: 1.55; } /* Home — «Che cosa ti serve?»: il rimando alla pagina completa dell'accesso rapido. */ .f2-quick-tutto{ margin:1.1rem 0 0; font-size:.92rem; } .f2-quick-tutto a{ color:var(--f2-blue,#d8333a); font-weight:600; } /* --------------------------------------------------------------------------- «Area riservata» in alto a destra (template-parts/header/header-anon.php). Il tema padre metteva li' un