/* ==========================================================================
Giubbolini snc - fase grafica (indicazioni del PDF)
I colori ripetuti nel tema sono stati sostituiti direttamente nella nostra
copia di assets/css/style.css (il template/ resta intatto):
verde scuro #0b332a -> #0E3F43
bottoni #DFFC8E -> #E5A901
hover bottoni #C8E27F -> #CB9501
sfondi chiari #DDEBEA -> #E8EEF2
box servizi #eef3e1 -> #E8EEF2
Qui restano solo gli override puntuali.
========================================================================== */
/* Fascia scorrevole di "Chi siamo": da PDF sfondo #E8EEF2 */
#marquee-2.marquee-wrap {
background: #E8EEF2;
}
/* Anno di fondazione: da PDF #CB9501 */
.founder-year-wrap h1 {
color: #CB9501;
}
/* ==========================================================================
Giubbolini snc - override sito
========================================================================== */
/* Realizzazioni: sotto ogni progetto una descrizione testuale
(il titolo resta sulla foto) */
.project-wrap .single-project-item {
margin-bottom: 20px;
}
.project-text {
margin-bottom: 40px;
}
/* ==========================================================================
Giubbolini snc - fase 2 (allaccio al gestionale)
Due sole aggiunte, entrambe rese necessarie dal passaggio al pannello.
========================================================================== */
/* Elenchi puntati dentro il testo ricco.
In fase 1 l'elenco di "Chi siamo" portava style="list-style-type: disc; margin-left: 20px"
scritto in linea. Il sanificatore del testo ricco (SanitizzatoreHtml) scarta l'attributo
style — a ragione: è un vettore di iniezione — ma lascia passare class. Stesso risultato,
scritto una volta qui. */
.about-content-wrap ul.elenco-puntato {
list-style-type: disc;
margin-top: 1rem;
margin-left: 20px;
}
.about-content-wrap ul.elenco-puntato li {
margin-bottom: .5rem;
}
/* Spunta del consenso privacy nei form.
In fase 1 i form non inviavano nulla e non avevano la spunta; il gestionale la pretende
(GestoreForm rifiuta lato server chi non acconsente), quindi il campo è nuovo e il tema non
ha uno stile per lui. */
.contact-form-wrap .form-privacy {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 20px;
font-size: 14px;
line-height: 1.5;
cursor: pointer;
}
.contact-form-wrap .form-privacy input[type="checkbox"] {
width: auto;
margin: 4px 0 0;
flex: 0 0 auto;
}
.contact-form-wrap .form-privacy a {
text-decoration: underline;
}
/* Link sul verde scuro (fascia alta e piede).
In fase 1 email, telefoni e indirizzo erano testo morto; ora arrivano dalle Impostazioni e
sono cliccabili. Il tema pero' non ha mai previsto un su .theme-bg: la regola globale
`a { color: #181818 }` li rende NERI, e `a:hover { color: #0E3F43 }` li fa diventare del
colore esatto dello sfondo, cioe' invisibili.
Si adotta la convenzione che il tema usa gia' per le icone social su verde scuro
(.header-top-area.theme-bg .social-area a i): bianco, oro #E5A901 al passaggio del mouse. */
.header-top-area.theme-bg a,
#footer-1.footer-area p a,
#footer-1 .phone-number p a,
#footer-1 .footer-up .social-area a,
.footer-bottom .privacy a,
.footer-bottom .copyright-line a {
color: #fff;
}
.header-top-area.theme-bg a:hover,
#footer-1.footer-area p a:hover,
#footer-1 .phone-number p a:hover,
#footer-1 .footer-up .social-area a:hover,
.footer-bottom .privacy a:hover,
.footer-bottom .copyright-line a:hover {
color: #E5A901;
}
/* L'icona social del piede sta dentro l' insieme all'etichetta: segue il testo, invece di
restare del suo #eee mentre la parola accanto diventa oro. */
#footer-1 .footer-up .social-area a:hover i {
color: #E5A901;
}
/* L'indirizzo della sede e' un link alla mappa: si distingue dal testo intorno, che nel piede
e' bianco anch'esso, con la stessa sottolineatura discreta che il tema da' all'email.
La classe sta nel markup e non su `p a` perche' quel selettore prenderebbe anche i tre
numeri di telefono, e sottolinearli tutti e tre farebbe rumore. */
.footer-indirizzo a {
text-decoration: underline;
text-underline-offset: 3px;
}
/* ==========================================================================
Giubbolini snc - realizzazioni filtrabili per servizio (ottobre 2026)
========================================================================== */
/* Barra dei filtri sopra la griglia delle realizzazioni.
Il tema non ha un filtro di portfolio: i bottoni riprendono forma, peso e colori dei suoi
(.theme-btn): pillola, verde scuro, oro #CB9501 al passaggio del mouse. Il filtro attivo e'
pieno, gli altri solo bordati, cosi' si legge al volo quale servizio si sta guardando. */
.filtro-realizzazioni {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin: 0 0 50px;
padding: 0;
list-style: none;
}
.filtro-realizzazioni a {
display: inline-flex;
padding: 14px 26px;
border: 1px solid #0E3F43;
border-radius: 50px;
color: #0E3F43;
font-size: 15px;
font-weight: 600;
line-height: 14px;
transition: 0.3s;
}
.filtro-realizzazioni a:hover {
background: #CB9501;
border-color: #CB9501;
color: #181818;
}
.filtro-realizzazioni a.attivo {
background: #0E3F43;
border-color: #0E3F43;
color: #fff;
}
@media (max-width: 767px) {
.filtro-realizzazioni a {
padding: 12px 18px;
}
}
/* Servizio senza lavori pubblicati: compare al posto della griglia vuota. */
.filtro-realizzazioni-vuoto {
text-align: center;
margin-bottom: 40px;
}
/* Foto delle realizzazioni da ingrandire.
Un link trasparente copre tutta la fotografia della scheda e apre il lightbox del tema
(Magnific Popup). In alto a destra una pillola dice che la foto si ingrandisce e, se le foto
sono piu' d'una, quante sono; al passaggio del mouse diventa oro come i bottoni del tema. */
.single-project-item .realizzazione-zoom {
position: absolute;
inset: 0;
z-index: 2;
cursor: zoom-in;
}
.realizzazione-zoom-icona {
position: absolute;
top: 18px;
right: 18px;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 7px 12px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.9);
color: #0E3F43;
font-size: 14px;
font-weight: 600;
line-height: 1;
transition: 0.3s;
}
.realizzazione-zoom-icona i {
font-size: 18px;
}
.single-project-item:hover .realizzazione-zoom-icona,
.realizzazione-zoom:focus-visible .realizzazione-zoom-icona {
background: #E5A901;
color: #181818;
}