/* ============================================================
Design Scuole Italia — child "Formigine 2" · custom.css v8
Rispetta lo STILE NATIVO del tema. Regole:
- ZERO gradienti (appiattiti tutti)
- niente forme arrotondate aggiunte (raggi nativi del tema)
- colori COERENTI = valori ESATTI del sito live icpalazzosg.edu.it
(overrides.css live): blu #0000f5 su pre-header, footer e hero;
decorazioni hero #8080ff; il rosso resta quello nativo, uguale ovunque
- 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: #0000f5; /* icpalazzosg live: pre-header, footer, hero */
--f2-blue-decor: #8080ff; /* icpalazzosg live: fill decorazioni SVG hero */
--f2-ease: cubic-bezier(.16,1,.3,1);
--f2-shadow: 0 18px 36px -22px rgba(15,15,40,.30);
}
/* ---- ZERO GRADIENTI: appiattisci ogni gradiente del tema ---- */
[class*="gradient"]{ background-image: none !important; }
/* ---- COERENZA COLORE: petrol (grigino) -> blu icpalazzosg ---- */
/* slim header (pre-header) e footer restano blu */
.bg-petrol,
.footer-wrapper{ background-color: var(--f2-blue) !important; }
/* ============================================================
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: blu pieno come icpalazzosg (li gradiente ->#234a6d, qui flat) ---- */
.section-hero-left.bg-redbrown,
.main-container.redbrown .section-hero-left{ background: var(--f2-blue) !important; }
/* decorazioni SVG dell'hero: periwinkle come icpalazzosg */
.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 blu uniforme) */
.section-hero-left .hero-img{ background-color: transparent !important; }
/* bottoni outline legati alle vecchie bande (magenta/petrol) -> blu
nel tema il bordo e un box-shadow inset, non border-color */
.main-container .btn-outline-purplelight,
.main-container .btn-outline-petrol{
color: var(--f2-blue);
box-shadow: inset 0 0 0 1px var(--f2-blue);
}
.main-container .btn-outline-purplelight:hover,
.main-container .btn-outline-purplelight:focus,
.main-container .btn-outline-purplelight:not(:disabled):active,
.main-container .btn-outline-petrol:hover,
.main-container .btn-outline-petrol:focus,
.main-container .btn-outline-petrol:not(:disabled):active{
color: #fff; background-color: var(--f2-blue);
box-shadow: inset 0 0 0 1px var(--f2-blue);
}
/* ---- CARD: hover/focus deciso su TUTTE le card, raggio nativo ----
hover AND focus-within = stessa affordance da tastiera. `.main-container .card`
copre In evidenza (card-vertical-thumb), Novita/Eventi (card-thumb-rounded),
Servizi/Argomenti (card-noicon): il selettore discendente `.card-wrapper .card`
di prima NON matchava queste classi COMPOSTE (card+card-wrapper sullo stesso
elemento) -> restavano senza lift. focus-within scatta sia col link-titolo
interno (In evidenza/Novita) sia col link che avvolge la card (Servizi/Argomenti). */
.main-container .card{
transition: transform .38s var(--f2-ease), box-shadow .38s var(--f2-ease);
}
.main-container .card:hover,
.main-container .card:focus-within{ transform: translateY(-5px); box-shadow: var(--f2-shadow); }
/* titolo card: vira al blu 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' che avvolge la card. */
.main-container .card-content a,
.main-container .card-title a{ transition: color .2s ease; }
.main-container .card:hover .card-content a,
.main-container .card:focus-within .card-content a,
.main-container .card:hover .card-title a,
.main-container .card:focus-within .card-title a{ color: var(--f2-blue); }
.main-container .card-noicon .card-icon-content{ transition: color .2s ease; }
.main-container .card-noicon:hover .card-icon-content,
.main-container .card-noicon:focus-within .card-icon-content{ color: var(--f2-blue); }
/* ---- ARGOMENTI: segnalibro blu, niente grigio ---- */
.main-container .card-icon .icon.svg-marker-simple{ fill: var(--f2-blue); transition: transform .3s var(--f2-ease); }
.main-container .card-icon:hover .icon.svg-marker-simple{ transform: translateY(-2px); }
.main-container .card-vertical-thumb .card-comments-wrapper{ display:none !important; }
.main-container .card-vertical-thumb .card-thumb{ overflow:hidden; }
.main-container .card-vertical-thumb .card-thumb img{ transition: transform .7s var(--f2-ease); will-change:transform; }
.main-container .card-vertical-thumb:hover .card-thumb img{ transform: scale(1.06); }
/* ---- "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: transizione fluida (il movimento magnetico e in reveal.js) ---- */
.main-container .btn,
.section-hero-left .btn{
transition: transform .22s var(--f2-ease), box-shadow .22s var(--f2-ease), background-color .2s ease, color .2s ease, border-color .2s ease;
}
.main-container .btn:active,
.section-hero-left .btn:active{ transform: scale(.98); }
/* ---- 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; }
}