/* ============================================================================
* Craglia Marmi Group — ricostruzione header Helix3 -> Helix Ultimate
* 2026-07-20
*
* COM'ERA L'ORIGINALE (vedi migrazione/baseline-before/desktop/home.jpg):
* riga a tutta larghezza (fluidrow), colonna logo `col-sm-3` con classe
* `bg-logo` (fondo nero #171717, padding-left 3.5vw) + colonna menu `col-sm-9`
* su fondo bianco, menu Cormorant Garamond su UNA riga, "EN" all'estrema destra.
* Nessuna topbar.
*
* PERCHE' SI ERA ROTTO:
* 1. Helix Ultimate ha un sistema di header diverso (predefined_header) e la
* struttura a colonne di Helix3 — con la classe `bg-logo` — non esiste piu':
* va ricostruita in CSS.
* 2. HU attivava di default una TOPBAR con dati demo (social + telefoni finti).
* Disattivata nei params: contactinfo=0, show_social_icons=0, enable_search=0.
* 3. Il markup HU e' flexbox, il custom_css originale usa float+width% (BS3):
* mescolati mandano l'header a capo.
*
* ATTENZIONE ALLA CASCATA:
* il `custom_css` dello stile viene stampato INLINE nel , DOPO il
* a questo file. A parita' di specificita' vince l'ultimo dichiarato, quindi
* qui servono selettori PIU' SPECIFICI (es. `#sp-header div#sp-logo` = 2 id).
* Aggiungere solo !important non basta.
* ========================================================================= */
/* --- -3. Spaziature dei caroselli come in Bootstrap 3 --------------------- */
/* Bootstrap 5 azzera `margin-top` sui titoli (`h1-h6{margin-top:0}`), mentre
Bootstrap 3 dava `margin-top:10px` (h5). Per questo in "Materiali in evidenza"
i titoli sono finiti appiccicati all'immagine. Ripristiniamo lo stacco. */
#servizi-carousel .banneritem h5 {
margin-top: 10px;
margin-bottom: 10px;
}
/* --- -2.8 Footer: titoli e voci di menu come in Helix3 -------------------- */
/* I due template stilano il footer in modo diverso:
* titolo modulo — Helix3: `font-size:24px; font-weight:400; text-transform:none`
* HU : `font-size:18px; font-weight:700`
* voci menu — Helix3: `line-height:36px; padding:2px 0` + bordo sotto → righe attaccate
* HU : `margin-bottom:15px` senza bordo → voci staccate,
* da cui l'effetto "bottoni" segnalato dal cliente.
* Qui si ripristina la geometria Helix3. Specificita' alta (1 id + 2 classi) perche'
* craglia.css, caricato dopo, impone `h1-h6{font-weight:800}` a tutti i titoli. */
#sp-bottom .sp-module .sp-module-title {
font-size: 24px;
font-weight: 400;
text-transform: none;
margin: 0 0 20px;
}
/* Separatore NERO su richiesta del cliente (2026-07-20).
NB: campionando la baseline le righe dell'originale risultavano piu' CHIARE
dello sfondo (luminosita' ~60 contro i 23 del fondo #171717), cioe' un bianco
molto trasparente — valore che era stato impostato prima di questa richiesta.
Se si volesse tornare all'originale misurato: rgba(255,255,255,.15). */
#sp-bottom .sp-module ul > li {
display: block;
margin-bottom: 0;
border-bottom: 1px solid rgba(0, 0, 0, .55);
transition: 300ms;
}
#sp-bottom .sp-module ul > li:last-child {
border-bottom: none;
margin-bottom: 0;
}
/* Passo fra le voci misurato sulla baseline: **31px**.
(Non 36px come la regola generica di Helix3 `.sp-module ul>li>a{line-height:36px}`,
che nel footer non era quella effettiva; ne' 26px, valore a cui ero sceso
correggendo troppo.) 26px di interlinea + 2px di padding sopra/sotto + 1px di bordo. */
#sp-bottom .sp-module ul > li > a {
display: block;
padding: 2px 0;
line-height: 26px;
font-size: 13px;
}
#sp-bottom .sp-module-content {
font-size: 13px;
}
/* Helix Ultimate aggiunge 30px sotto ogni modulo: non c'erano nell'originale
e allungavano il footer. */
#sp-bottom .sp-module {
margin-bottom: 0;
}
/* Allineamento orizzontale delle colonne.
craglia.css da' a #sp-bottom `margin:0 3.5vw` + `padding:100px 3.5vw`, quindi il
contenuto parte a 2x3.5vw = ~90px (misurato 89px nell'originale). Bootstrap 5
aggiunge pero' 12px di padding sul `.container`, spostando le colonne a ~105px.
Azzerandolo, il padding delle colonne (+12) e i margini negativi della row (-12)
si annullano e le colonne tornano esattamente a ~90px. */
#sp-bottom > .container {
padding-left: 0;
padding-right: 0;
/* La larghezza fissa di craglia.css (fino a 1700px) e' PIU' LARGA dello spazio
utile dentro #sp-bottom (che ha margin+padding di 3.5vw per lato): il
contenuto sforava a destra, lasciando 68px di vuoto a sinistra e solo 35 a
destra. Facendola adattare al contenitore i due vuoti tornano uguali. */
width: 100%;
max-width: 100%;
}
/* Helix Ultimate mette `#sp-footer .container-inner{padding:30px 0}`: e' il
padding verticale di troppo attorno alla riga di copyright. L'originale aveva
solo i 15px di `#sp-footer` (craglia.css). */
#sp-footer .container-inner {
padding-top: 0;
padding-bottom: 0;
border-top: none;
}
/* Barra copyright a tutta larghezza come nell'originale: Helix Ultimate la chiude
in un `.container` con max-width (1140px a lg), cosi' la riga andava a capo e
"Privacy Policy" finiva sotto. Il resto del sito usa 3.5vw di margine laterale. */
/* NB sulla larghezza del footer: NON forzarla a 100%.
craglia.css (caricato per ultimo) imposta la larghezza del container come
nell'originale: 1170px sopra i 1200px di viewport, poi 1370/1400/1700px ai
breakpoint 1400/1600/1900. E' il comportamento voluto: forzare `width:100%`
allontanerebbe dall'originale invece di avvicinarlo.
Qui azzeriamo solo i gutter di Bootstrap 5, che restringevano la riga del
copyright rispetto a Bootstrap 3. */
#sp-footer .row {
margin-left: 0;
margin-right: 0;
}
/* Il copyright era finito troppo a sinistra: allineiamolo alle colonne del
footer, che partono a 7vw dal bordo (= `margin:0 3.5vw` + `padding:100px 3.5vw`
di #sp-bottom). Prima si appoggiava al bordo del container. */
#sp-footer .row > [class*="col-"],
#sp-footer .sp-column {
padding-left: 0;
padding-right: 0;
}
/* Copyright centrato rispetto alla pagina (richiesta cliente 2026-07-20). */
#sp-footer .sp-copyright {
display: block;
text-align: center;
padding-left: 0;
padding-right: 0;
}
/* Helix Ultimate imposta `#sp-footer{font-size:14px}`, l'originale 13px
(craglia.css). Lo ridichiariamo sullo span per sicurezza: a 13px la riga
sta su una sola riga come nell'originale. */
#sp-footer .sp-copyright {
font-size: 13px;
}
/* --- -2.5 Carosello News: geometria identica a Bootstrap 3 ---------------- */
/* Serviva un `.row` per affiancare le colonne in BS5 (vedi il layout
html/mod_articles_category/news.php), ma il `.row` porta con se' una geometria
diversa da quella dell'originale:
BS3 (originale): colonne con padding 15px/lato, nessun margine negativo
(l'originale non aveva `.row`)
BS5 (default): colonne con padding 12px/lato + `.row` con margini -12px/lato
Risultato: ogni colonna si allarga di ~15px per lato e le immagini, essendo al
100% della colonna, risultano piu' grandi. Qui si ripristina la geometria BS3. */
#news-carousel .row.news-row {
--bs-gutter-x: 30px; /* 15px per lato, come Bootstrap 3 */
margin-left: 0; /* l'originale non aveva margini negativi */
margin-right: 0;
align-items: flex-start; /* testo allineato in ALTO, non centrato sull'immagine */
}
/* --- -2. Colore dei link come nell'originale ------------------------------ */
/* Il vecchio Helix3 usava `preset1` (`a{color:#171717}`, `a:hover{color:#000}`),
Helix Ultimate usa `preset2` che colora TUTTI i link di arancione #ec430f.
Si vedeva bene su "Vai alla sezione"/"Trova Trasformatore" nella fascia Neolith:
scuri nell'originale, arancioni dopo la migrazione.
Questo file viene caricato DOPO presets/preset2.css, quindi basta ridichiararlo. */
a {
color: #171717;
}
a:hover,
a:focus,
a:active {
color: #000000;
}
/* --- -1. Frecce dello slider hero: NON impostare il colore qui ------------ */
/* Il grigio originale e' gia' in craglia.css:
.container-slidehome .sppb-carousel-arrow.right.sppb-carousel-control,
.container-slidehome .sppb-carousel-arrow.left.sppb-carousel-control
{ text-shadow:none; color:#9c9c9c!important; } (dentro @media min-width:1110px)
Qui c'era una regola che forzava il bianco sull': nata dall'ipotesi sbagliata
che le frecce fossero diventate scure, quando il problema vero era l'immagine di
sfondo `bg-slide.jpg` mancante (vedi knowledge/04 punto 9). Rimossa: craglia.css
deve restare l'unica fonte per il colore delle frecce.
ATTENZIONE: craglia.css colora l'; una regola su `... .sppb-carousel-arrow i`
scritta qui vincerebbe comunque, perche' colpisce l'elemento direttamente invece
di lasciarlo ereditare. */
/* --- -0.5 Frecce sottili come nell'originale (Font Awesome 4) ------------- */
/* Il sito usava Font Awesome 4, dove `fa-angle-left/right` e' un tratto sottile.
SPPB6 carica Font Awesome 6, che ha solo lo stile *solid* (peso 900) per queste
icone nella versione free: stesso simbolo, ma molto piu' spesso ("cicciotto").
Non e' regolabile con font-weight — in un icon-font il peso non assottiglia il
glifo, va usato proprio l'altro font. I codepoint sono identici (\f104 / \f105),
quindi basta ridichiarare il font sui soli delle frecce.
File font ripresi da templates/shaper_helix3/fonts/. */
@font-face {
font-family: 'FontAwesome4';
src: url('../fonts/fontawesome-webfont.woff2') format('woff2'),
url('../fonts/fontawesome-webfont.woff') format('woff'),
url('../fonts/fontawesome-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
.container-slidehome .sppb-carousel-arrow i,
.container-pcrt-slideinterno .sppb-carousel-arrow i {
font-family: 'FontAwesome4' !important;
font-weight: normal !important;
}
/* --- -0.2 Larghezza dei container come nell'originale --------------------- */
/* craglia.css dichiara le larghezze volute dal sito:
>=1200px -> 1170px >=1400px -> 1370px
>=1600px -> 1400px >=1900px -> 1700px
ma le dichiara con `width`, e **Bootstrap 5 impone anche un `max-width`**
(1140px a >=1200, 1320px a >=1400) che ha la precedenza. Bootstrap 3, usato da
Helix3, non aveva `max-width`: per questo nell'originale quelle larghezze si
vedevano davvero. Senza questa correzione, su schermi larghi il contenuto (e in
particolare le colonne del footer) resta compresso al centro lasciando bordi vuoti.
Neutralizziamo il max-width SOLO da 1200px in su, cioe' dove craglia.css
definisce una larghezza esplicita: sotto quella soglia i max-width di Bootstrap
servono e vanno lasciati stare. */
@media (min-width: 1200px) {
.container,
.sppb-row-container {
max-width: none;
}
}
/* --- -0.1 Badge Neolith fisso: dimensione dell'originale ------------------ */
/* Misurato sulla baseline: l'area gialla e' larga 204px e alta 55px, mentre con
il `max-width:246px` di craglia.css veniva resa a 240x63 (circa il 16% in piu').
L'immagine nativa e' 320x82. */
/* `body #sp-fisso` (2 selettori) e non `#sp-fisso`: craglia.css dichiara
`#sp-fisso{max-width:246px; left:10px}` e, caricandosi DOPO questo file,
vincerebbe a parita' di specificita'. */
body #sp-fisso {
max-width: 209px;
left: 25px;
}
/* Con social e contatti disattivati Helix Ultimate stampa comunque il
contenitore #sp-top-bar, che resta come striscia scura sopra l'header. */
#sp-top-bar {
display: none !important;
}
/* --- 1. Header a tutta larghezza (l'originale era fluidrow) --------------- */
#sp-header > .container,
#sp-header > .container > .container-inner {
max-width: 100%;
width: 100%;
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
/* l'altezza va propagata da #sp-header (100px) fino alla colonna del logo,
altrimenti la riga si adatta al contenuto e il blocco nero si riduce
all'altezza dell'immagine (82px) */
height: 100%;
}
/* L'header e' alto 130px, ma il blocco nero del logo ne riempie solo i primi 100px:
sotto restano 30px di sfondo BIANCO DELL'HEADER, ed e' da li' che nasce lo stacco
prima dello slider.
Misure sulla baseline (home, larghezza 1280):
- fascia cookie y 0-71
- blocco nero logo y 72-171 (100px)
- bianco dell'header y 172-201 ( 30px)
- contenuto/hero da y 202
- testo menu centrato a y=137, cioe' al centro dei 130px dell'header
Nell'originale (Helix3) il nero stava su `.bg-logo`, che NON dichiarava altezza:
si adattava al contenuto (logo 82px + padding = ~100px), lasciando 30px bianchi
sotto il logo DENTRO la navbar.
SCELTA DEL CLIENTE (2026-07-24): quella fascia bianca NON deve esserci. Il blocco
nero riempie quindi tutta l'altezza della navbar (`align-items:stretch` sulla riga
+ `height:100%` sulla colonna). E' una differenza voluta rispetto all'originale.
L'hero resta comunque nella posizione originale (y=202): non va aggiunto alcun
margine sotto l'header — vedi la nota in fondo al file. */
#sp-header .container-inner > .row {
flex-wrap: nowrap !important;
align-items: stretch;
height: 100%;
margin-left: 0;
margin-right: 0;
}
/* --- 2. Colonna logo: blocco nero, come `.bg-logo` dell'originale --------- */
#sp-header div#sp-logo {
float: none !important;
background: #171717;
padding-left: 3.5vw !important;
padding-right: 20px !important;
display: flex;
align-items: center;
flex: 0 0 auto;
/* Il nero riempie tutta la navbar, a ogni larghezza: niente fascia bianca
sotto il logo (richiesta del cliente). */
height: 100%;
}
/* Sotto il desktop l'originale ha header e blocco nero entrambi a 90px
(baseline mobile 390px: fascia header y=183-272). Senza questa regola qui
risultavano 100px, con tutto il contenuto sottostante spostato di 10px. */
@media (max-width: 991px) {
#sp-header,
#sp-header div#sp-logo,
#sp-header div#sp-logo .logo {
height: 90px;
}
}
/* NB: qui c'era una regola che teneva il blocco nero a 100px da desktop in su,
riproducendo i 30px bianchi sotto il logo dell'originale. Rimossa il 2026-07-24
su richiesta del cliente: quella fascia non deve esserci. */
/* Il contenitore del logo riempie i 100px del blocco nero. */
#sp-header div#sp-logo .logo {
height: 100px;
display: flex;
align-items: center;
}
#sp-header .logo img.logo-image,
#sp-header .logo img.logo-image-phone {
height: 82px !important;
width: auto;
max-width: 100%;
}
/* --- 3. Colonna menu: bianca, occupa il resto ----------------------------- */
#sp-header div#sp-menu {
float: none !important;
flex: 1 1 auto;
min-width: 0;
background: #ffffff;
padding-right: 3.5vw;
}
/* Menu subito dopo il logo (a sinistra), lingua all'estrema destra.
Nell'originale le voci partivano attaccate al blocco nero del logo. */
#sp-header #sp-menu .sp-column {
justify-content: space-between;
flex-wrap: nowrap;
height: 100%;
}
#sp-header #sp-menu .sp-megamenu-wrapper {
flex: 1 1 auto;
justify-content: flex-start;
min-width: 0;
}
/* Larghezza della colonna logo: nell'originale era `col-sm-3`, cioe' il **25%
fisso** della riga (che era fluidrow, quindi 25% del viewport). Il fondo nero
proseguiva percio' oltre la fine del testo del logo, fino a quel limite.
Ricostruendola come `col-auto` si restringeva sul contenuto: a 1280 la
differenza e' di pochi px, ma a 1920 il blocco finiva a 417px invece che a 480,
perdendo la fascia scura a destra del logo. */
@media (min-width: 768px) {
#sp-header div#sp-logo {
flex: 0 0 25% !important;
width: 25% !important;
max-width: 25%;
}
#sp-header div#sp-menu {
flex: 0 0 75% !important;
width: 75% !important;
max-width: 75%;
}
}
/* --- 4. Menu su UNA sola riga --------------------------------------------- */
/* La ul ha classe Bootstrap `d-lg-block`: e' un blocco con inline-block,
quindi i 9 item vanno a capo quando non ci stanno. La rendiamo flex nowrap. */
@media (min-width: 1110px) {
#sp-header ul.sp-megamenu-parent {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center;
float: none !important;
margin: 0;
white-space: nowrap;
}
#sp-header ul.sp-megamenu-parent > li {
flex: 0 0 auto;
}
}
/* Sotto i 1440px rimpicciolisce invece di andare a capo (come l'originale) */
@media (min-width: 1110px) and (max-width: 1440px) {
#sp-header ul.sp-megamenu-parent > li > a,
#sp-header ul.sp-megamenu-parent > li > span {
font-size: 17px !important;
padding: 0 1.1vw !important;
}
}
@media (min-width: 1110px) and (max-width: 1279px) {
#sp-header ul.sp-megamenu-parent > li > a,
#sp-header ul.sp-megamenu-parent > li > span {
font-size: 16px !important;
padding: 0 0.8vw !important;
}
}
/* --- 5. Font del menu: Cormorant Garamond (HU inietta Arial) -------------- */
#sp-header .sp-megamenu-parent > li,
#sp-header .sp-megamenu-parent > li > a,
#sp-header .sp-megamenu-parent > li > span {
font-family: 'Cormorant Garamond', serif !important;
}
/* NB sui titoli: NON impostarli qui. I font di h1-h6 arrivano da
`css/craglia.css` (Cormorant Garamond 800), il foglio di stile su misura del
sito, che viene caricato dall'after_body e quindi DOPO questo file. */
/* --- 6. Selettore lingua all'estrema destra, non a capo ------------------- */
/* NB: il posizionamento di `.lingua` NON va toccato qui.
`css/craglia.css` (il foglio originale del sito) la posiziona con
`position:absolute; right:4.5vw; top:24px` — e' cosi' che stava nell'originale.
Regole piu' specifiche scritte qui la disallineano. Qui sotto solo il minimo
che serve per il markup nuovo di Joomla 4+. */
/* `.lingua` in craglia.css e' `position:absolute; top:24px`, pensato per il
markup Helix3 dove il riferimento era #sp-header. In Helix Ultimate il
riferimento diventa la colonna del menu, quindi EN finiva 24px SOTTO la riga
del menu. Qui torniamo al flusso normale e lo centriamo con il flex del
contenitore: serve specificita' maggiore di `.lingua` (2 id vs 1 classe)
perche' craglia.css viene caricato DOPO questo file. */
#sp-header #sp-menu .sp-module.lingua {
position: static;
margin-left: 1.5rem;
flex: 0 0 auto;
display: flex;
align-items: center;
}
#sp-header #sp-menu .sp-module.lingua ul.lang-inline {
display: flex;
gap: .5rem;
list-style: none;
white-space: nowrap;
}
/* Etichetta "Select your language" letta dagli screen reader: non a video */
#sp-header #sp-menu .sp-module.lingua .mod-languages p {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* --- 7. Mobile: header piu' basso, logo + hamburger sulla stessa riga ----- */
@media (max-width: 1109px) {
#sp-header div#sp-logo {
width: auto !important;
flex: 0 0 auto;
}
#sp-header div#sp-menu {
width: auto !important;
flex: 1 1 auto;
}
}
@media (max-width: 767px) {
#sp-header div#sp-logo {
padding-left: 20px !important;
padding-right: 20px !important;
}
#sp-header .logo img.logo-image,
#sp-header .logo img.logo-image-phone {
height: 52px !important;
}
}
@media (max-width: 539px) {
#sp-header .logo img.logo-image,
#sp-header .logo img.logo-image-phone {
height: 44px !important;
}
}
/* --- Modulo "Contatti Craglia Group": interlinea del paragrafo introduttivo ---
Richiesta cliente 2026-07-20: piu' spazio fra le righe del testo
"Il Gruppo Craglia opera nel settore dei lapidei dal 1963...".
E' l'INTERLINEA INTERNA di quel paragrafo (le righe distavano 20px), non lo
spazio fra le righe di telefono/fax/email/indirizzo — quelle restano invariate,
per questo il selettore usa `:first-of-type`.
Vale sia per la versione IT (mod 94) sia per quella EN (mod 132). */
#sp-bottom .sp-module-content .mod-custom p:first-of-type {
line-height: 1.85;
}
/* --- Sezioni SPPB: il contenuto occupa tutta la larghezza della fascia -----
Le sezioni "Craglia Marmi Group" ed "Estrazione" avvolgono il contenuto in
`.sppb-row-container`, a cui craglia.css assegna una larghezza FISSA
(1370px >=1400, 1400px >=1600, 1700px >=1900). Lo sfondo della fascia e'
invece a tutta larghezza: il contenuto risultava percio' centrato con bordi
vuoti ai lati. Su richiesta del cliente lo portiamo a tutta larghezza.
NB: scavalca volutamente le larghezze fisse di craglia.css. — 2026-07-20 */
/* Selettore a 2 classi (`.sppb-section .sppb-row-container`): con la sola
`.sppb-row-container` vincerebbe craglia.css, che si carica DOPO questo file. */
@media (min-width: 1200px) {
.sppb-section .sppb-row-container,
.sppb-container-inner .sppb-row-container {
width: 100%;
max-width: none;
/* non a filo del bordo: un po' di spazio ai lati */
padding-left: 3vw;
padding-right: 3vw;
}
}
/* --- Splash iniziale con logo centrato (Helix3 `preloader_animation = logo`) ---
Helix Ultimate non ha il tipo "logo" fra i suoi preloader e il suo CSS usa la
classe `.sp-preloader`, mentre il markup stampa `.sp-pre-loader`: di fatto lo
splash era invisibile. Qui riportiamo gli stili originali di Helix3
(templates/shaper_helix3/css/template.css). Il markup e' in index.php e
l'animazione in js/custom.js. — 2026-07-20 */
.sp-pre-loader {
background: #171717;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 99999;
}
.sp-pre-loader .sp-loader-with-logo {
top: 0;
left: 0;
width: 100%;
height: 105px;
right: 0;
bottom: 0;
margin: auto;
text-align: center;
position: absolute;
}
.sp-pre-loader .sp-loader-with-logo .logo {
display: inline-block;
width: auto;
}
.sp-pre-loader .sp-loader-with-logo .line {
background: #ffffff;
bottom: 0;
height: 5px;
left: 0;
position: absolute;
top: auto;
width: 1%;
}
/* --- Freccette negli elenchi dei moduli (sidebar) --------------------------
Helix3 aveva in template.css:
.sp-module ul >li >a:before { font-family: FontAwesome; content: "\f105"; margin-right: 8px; }
Helix Ultimate non ha nulla di equivalente, quindi negli elenchi (es. "Tutte le
Collezioni" nella colonna destra) le freccette erano sparite.
Usiamo il font 'FontAwesome4' gia' dichiarato piu' sopra: in Font Awesome 6 lo
stesso codepoint esiste, ma il glifo e' molto piu' spesso.
Eccezioni identiche all'originale: offcanvas e selettore lingua. Il footer e'
gia' escluso da craglia.css (`#sp-bottom .sp-module ul >li >a:before{display:none}`),
che essendo caricato dopo vince su questa regola. — 2026-07-20 */
.sp-module ul > li > a:before {
font-family: 'FontAwesome4';
content: "\f105";
margin-right: 8px;
}
.offcanvas-menu .sp-module ul > li > a:before,
.sp-module-content .mod-languages ul.lang-inline li > a:before,
.sp-megamenu-parent li > a:before {
display: none;
}
/* --- Stacco sotto l'header: NON serve alcuna regola -----------------------
Qui c'era `#sp-header{margin-bottom:30px}`, aggiunto il 2026-07-20 per ricreare
lo stacco bianco fra header e contenuto. RIMOSSO il 2026-07-24: lo stacco esiste
gia' da solo, perche' l'header e' alto 130px mentre il blocco nero del logo ne
occupa solo 100 (vedi la nota alla sezione 1). Il margine si sommava a quei 30px
e spingeva il contenuto 30px sotto la posizione dell'originale — era la "fascia
bianca fra menu e hero" segnalata dal cliente.
Se lo stacco dovesse sparire, la causa e' l'altezza del blocco nero, non un
margine mancante. */
/* --- Colonna destra: larghezza e niente riquadro ---------------------------
1) LARGHEZZA — nel layout Helix3 la riga "Main Body" era `col-sm-3 | col-sm-6 |
col-sm-3`: con la colonna sinistra vuota, il contenuto occupava il 75% e la
destra il 25%. Helix Ultimate calcola le classi da solo e assegna
col-lg-8 / col-lg-4, cioe' 67% / 33%: la sidebar risultava piu' larga.
2) RIQUADRO — Helix Ultimate decora i moduli di sidebar con
`border:1px solid #f3f3f3; padding:30px; border-radius:3px; margin-top:50px`.
Helix3 non aveva nulla di simile: i moduli erano "nudi". — 2026-07-20 */
/* ⚠️ Vincolare alle classi che Helix Ultimate assegna QUANDO c'e' la sidebar
(col-lg-8 / col-lg-4). Senza questo vincolo la regola colpiva anche le pagine
SENZA sidebar — come la home, dove #sp-component e' col-lg-12 — comprimendo il
contenuto al 75% e restringendo tutte le fasce. */
@media (min-width: 992px) {
#sp-right.col-lg-4 {
flex: 0 0 25%;
max-width: 25%;
}
#sp-component.col-lg-8 {
flex: 0 0 75%;
max-width: 75%;
}
}
#sp-left .sp-module,
#sp-right .sp-module {
border: none;
padding: 0;
border-radius: 0;
margin-top: 0;
margin-bottom: 40px;
}
/* HU mette anche un bordo sotto il titolo dei moduli di sidebar: non c'era */
#sp-left .sp-module .sp-module-title,
#sp-right .sp-module .sp-module-title {
border-bottom: none;
padding-bottom: 0;
}
/* Spaziatura delle voci nei menu di sidebar.
craglia.css vuole `.menudestra.sp-module ul >li a{padding:20px 0; font-size:15px;
line-height:1.4em}` (2 classi), ma Helix Ultimate dichiara
`#sp-right .sp-module ul>li>a{padding:2px 0; line-height:36px}` con un ID e quindi
vince, comprimendo l'elenco. Qui ripristiniamo i valori originali con un
selettore che include l'id. — 2026-07-20 */
#sp-right .menudestra.sp-module ul > li > a,
#sp-left .menudestra.sp-module ul > li > a {
padding: 20px 0;
font-size: 15px;
line-height: 1.4em;
}
/* --- Miniature dei cataloghi nella sidebar --------------------------------
L'addon `feature` mette l'immagine in un float con `.sppb-img-responsive
{width:100%}`: la dimensione finale dipende quindi dalla larghezza che il
float riesce a prendersi, non dall'immagine (tutte native ~50x65px).
Le immagini sono native **50x65px**. Con `.sppb-img-responsive{width:100%}` la
dimensione dipende dalla larghezza che il float riesce a prendersi: dopo la
migrazione uscivano a 19px, e anche negli screenshot della baseline risultano
~30px — cioe' gia' rimpicciolite rispetto all'originale.
Su indicazione del cliente le portiamo alla loro DIMENSIONE NATIVA (50px),
senza ingrandimenti: e' la resa piu' fedele possibile dell'immagine.
NB: il valore va messo sull'IMG, non sul float che la contiene (verificato
con una sonda: l'area visibile coincide con la larghezza dell'immagine). */
#sp-right .sppb-addon-feature .sppb-img-container img,
#sp-left .sppb-addon-feature .sppb-img-container img {
width: 50px;
max-width: none;
}
/* --- Dimensioni dei titoli come Bootstrap 3 -------------------------------
Bootstrap 5 ha aumentato tutte le dimensioni dei titoli rispetto alla 3 usata
da Helix3, e per h1-h4 usa anche misure responsive con calc()+vw:
h1 36->40px h2 30->32px h3 24->28px h4 18->24px h5 14->20px h6 12->16px
Effetto: tutti i titoli del sito piu' grandi dell'originale, con testi che
vanno a capo dove prima stavano su una riga (evidente nel modulo "Cataloghi
Neolith", dove i titoli passavano da 2 a 4 righe).
Qui si ripristinano i valori di Bootstrap 3. Le dimensioni impostate a mano
nei singoli addon SPPB continuano a prevalere, perche' generate come CSS
specifico per addon. — 2026-07-20 */
h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 12px; }
/* Contenuto SPPB dentro i moduli di sidebar: SPPB inserisce i propri gutter
(`.sppb-row{margin:0 -15px}` + padding sulle colonne e sul container-inner),
che nella colonna stretta spostavano il contenuto ~37px a destra rispetto
all'originale, facendo andare a capo i titoli dei cataloghi. */
#sp-right .mod-sppagebuilder .sppb-row,
#sp-left .mod-sppagebuilder .sppb-row {
margin-left: 0;
margin-right: 0;
}
#sp-right .mod-sppagebuilder [class*="sppb-col-"],
#sp-left .mod-sppagebuilder [class*="sppb-col-"],
#sp-right .mod-sppagebuilder .sppb-container-inner,
#sp-left .mod-sppagebuilder .sppb-container-inner,
#sp-right .mod-sppagebuilder .sppb-row-container,
#sp-left .mod-sppagebuilder .sppb-row-container {
padding-left: 0;
padding-right: 0;
}
/* --- Link "Leggi Informativa" nei form ------------------------------------
craglia.css lo posiziona con `a.privacy{position:relative; top:-20px; left:26px}`:
era tarato sul markup di ChronoForms 6, dove la casella di consenso aveva
un'altezza diversa. Con il markup di ChronoForms 8 quello scarto negativo lo
fa finire SOPRA l'etichetta della casella, con i due testi sovrapposti.
Qui lo riportiamo nel flusso normale, allineato sotto la casella.
Serve specificita' maggiore di `a.privacy` (craglia.css e' caricato dopo). */
.modale-info a.privacy,
#sp-form a.privacy,
.sppb-addon-module a.privacy {
position: static;
display: inline-block;
margin: -6px 0 14px 26px;
font-size: 12px;
color: #171717;
}
/* --- Modale dei form sopra l'header ---------------------------------------
L'header in modalita' sticky ha `z-index:9999` (template.css di Helix Ultimate),
mentre le modali di Bootstrap 5 stanno a 1055: aprendo il form, la barra
superiore lo copriva. Alziamo modale e sfondo sopra l'header. — 2026-07-20 */
.modal {
z-index: 10050;
}
.modal-backdrop {
z-index: 10040;
}
/* --- Modale del form: aspetto di Bootstrap 3, come nell'originale ----------
Il markup della modale viene dal form ChronoForms 6 originale ed e' scritto
per Bootstrap 3. In Bootstrap 5 diverse cose sono cambiate:
- la classe `.close` NON esiste piu' (rinominata `.btn-close`, con icona SVG):
il carattere × restava quindi non stilizzato e, dato che `.modal-header` in
BS5 e' un contenitore flex, il `float:right` veniva ignorato e finiva
in alto a SINISTRA
- padding e larghezze sono diversi (`.modal-lg` 800px invece di 900px)
Qui si ripristinano i valori di Bootstrap 3, limitatamente a questa modale
per non toccare quelle di Joomla. — 2026-07-20 */
.bd-example-modal-lg .modal-header {
display: block; /* in BS5 e' flex: annullerebbe il float del pulsante */
padding: 15px;
border-bottom: 1px solid #e5e5e5;
border-radius: 0;
}
.bd-example-modal-lg .modal-header .close {
float: right;
margin-top: -2px;
padding: 0;
font-size: 21px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
background: transparent;
border: 0;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
opacity: .2;
}
.bd-example-modal-lg .modal-header .close:hover,
.bd-example-modal-lg .modal-header .close:focus {
color: #000;
text-decoration: none;
opacity: .5;
}
.bd-example-modal-lg .modal-title {
margin: 0;
line-height: 1.42857143;
}
.bd-example-modal-lg .modal-body {
padding: 15px;
}
.bd-example-modal-lg .modal-footer {
display: block;
padding: 15px;
text-align: right;
border-top: 1px solid #e5e5e5;
}
@media (min-width: 992px) {
.bd-example-modal-lg .modal-dialog.modal-lg {
--bs-modal-width: 900px; /* BS3 aveva 900px, BS5 ne mette 800 */
max-width: 900px;
}
}
/* --- Casella di consenso privacy: spazio fra casella e testo ---------------
Il markup di ChronoForms 8 mette l'etichetta a filo della casella. — 2026-07-20 */
.bd-example-modal-lg .field label > svg.fasvg,
.nui.form .field label > svg.fasvg {
margin-right: 8px;
vertical-align: -3px;
}