` dentro il titolo e' il modo in cui il cliente evidenzia una parola:
nell'editor si seleziona il testo e si usa il pulsante del colore. */
.lb-titolo-sezione .elementor-heading-title {
/* Giro 6 (decisione 276): ExtraWide su richiesta del cliente, corpo ridotto perché
l'ExtraWide è largo 1,7 volte il Regular. Era Regular, clamp(1.5rem, 3.3vw, 2.8rem), 24ch. */
font-family: var(--lb-titolo-famiglia);
font-weight: 700;
font-size: clamp(1.3rem, 2.7vw, 2.3rem);
line-height: 1.14;
letter-spacing: -.01em;
text-transform: uppercase;
color: var(--lb-titolo);
text-wrap: balance;
max-width: 20ch;
/* Nessun margine sotto. Nel prototipo il titolo è un e porta il margine di
default del browser, che però COLLASSA con quello del blocco successivo:
l'effetto reale è la distanza maggiore fra i due, non la loro somma. Qui i
blocchi sono elementi flex e i margini non collassano — sommarli
allungherebbe ogni sezione di una quarantina di pixel. La distanza la
dichiara il blocco che segue. */
margin: 22px 0 0;
}
/* Variante larga: nelle sezioni Lavori e Servizi il titolo è più piccolo e non
viene strozzato a 24 caratteri. Sono due valori diversi nel prototipo, non una
svista: il titolo che sta sopra una griglia respira in orizzontale, quello che
apre una sezione di testo respira in verticale. */
.lb-titolo-sezione--largo .elementor-heading-title {
font-size: clamp(1.55rem, 3.4vw, 2.5rem);
line-height: 1.04;
max-width: none;
margin: 16px 0 0;
}
/* Sopra la galleria il titolo sta su una riga sola e l'interlinea è compatta. */
.lb-lavori .lb-titolo-sezione--largo .elementor-heading-title { line-height: 1; }
/* Nei Servizi il titolo va a capo: nel prototipo la larghezza è `60ch` misurata
sul contenitore a 16px, cioè ~580px. Espressa in `em` del titolo resta stabile
quando la dimensione cambia con la finestra. */
.lb-servizi .lb-titolo-sezione--largo .elementor-heading-title { max-width: 14.5em; }
.lb-titolo-sezione .elementor-heading-title span,
.lb-titolo-sezione .elementor-heading-title em { color: var(--lb-arancio); font-style: normal; }
/* Titolo grande: ExtraWide, per l'hero e la CTA di chiusura. */
.lb-titolo-grande .elementor-heading-title {
font-family: var(--lb-extrawide);
font-weight: 700;
font-size: clamp(1.9rem, 4.6vw, 3.4rem);
line-height: 1.02;
letter-spacing: .02em;
text-transform: uppercase;
color: var(--lb-titolo);
text-wrap: balance;
max-width: 16ch;
margin: 0;
}
.lb-titolo-grande .elementor-heading-title span,
.lb-titolo-grande .elementor-heading-title em { color: var(--lb-arancio); font-style: normal; }
/* Titolo della CTA di chiusura: stessa misura del titolo grande, ma famiglia dei
testi. Nel prototipo `.cta-h` usa `--font-body`, non `--font-head`. */
.lb-titolo-cta .elementor-heading-title {
/* Giro 6: ExtraWide (decisione 276). Era Regular, clamp(1.9rem, 4.6vw, 3.4rem), 16ch. */
font-family: var(--lb-titolo-famiglia);
font-weight: 700;
font-size: clamp(1.6rem, 3.7vw, 2.75rem);
line-height: 1.02;
letter-spacing: -.01em;
text-transform: uppercase;
color: var(--lb-titolo);
text-wrap: balance;
max-width: 15ch;
margin: 0;
}
.lb-titolo-cta .elementor-heading-title em { color: var(--lb-arancio); font-style: normal; }
/* --- Pulsante ----------------------------------------------------------
I selettori portano davanti `.elementor-widget-button` per una ragione
precisa, non per abitudine: Elementor stampa
`.elementor-widget-button .elementor-button{background-color:var(--e-global-color-accent)}`
come stile di default del widget, DOPO il CSS del kit e con la stessa
specificità del nostro. Senza quel prefisso ogni pulsante del sito diventa
grigio-beige — il colore del testo attenuato — e sembra un errore di stampa.
Un selettore più specifico risolve senza `!important`. */
.elementor-widget-button.lb-cta .elementor-button,
.lb-cta .elementor-button {
background: var(--lb-arancio);
color: var(--lb-su-arancio);
font-family: var(--lb-regular);
font-weight: 700;
font-size: .82rem;
letter-spacing: .02em;
/* **L'interlinea va ridichiarata, e non è una rifinitura: è 7px su ogni
pulsante del sito.** Elementor scrive l'interlinea del kit in `em`, quindi
diventa una lunghezza già sul widget e i figli la ereditano come tale; sul
pulsante invece non arriva affatto e resta 1,0. Nel prototipo il pulsante
non dichiara interlinea e prende quella del corpo, 1,55: la pillola grande
è alta 50px e non 43, quella compatta dell'intestazione 37 e non 31.
Da qui **l'intestazione torna alta 79px come nel prototipo** sopra i 600,
e smette di essere uno scostamento da spiegare. Trovato da `dev-servizi`
misurando il footer e l'intestazione sulla sua pagina. */
line-height: 1.55;
padding: 15px 28px;
/* Giro 6 (B1): il raggio dei pulsanti lo decide il Kit di Elementor (oggi 0). Il tema
non lo dichiara più, altrimenti il pannello «Pulsanti» del Kit non cambierebbe niente. */
border: none;
transition: transform .2s, filter .2s;
}
.elementor-widget-button.lb-cta .elementor-button:hover,
.lb-cta .elementor-button:hover { transform: translateY(-2px); filter: brightness(1.08); }
.elementor-widget-button.lb-cta--compatta .elementor-button,
.lb-cta--compatta .elementor-button {
padding: 10px 20px;
font-size: .68rem;
text-transform: uppercase;
letter-spacing: .12em;
}
/* Sotto i 600px il prototipo toglie la CTA dall'header e lascia solo il menu.
Il design system segnala che così su mobile sparisce l'unico modo esplicito di
contattare dall'alto: resta come nel prototipo, ma è annotato come domanda aperta. */
@media (max-width: 600px) { .lb-cta--compatta { display: none; } }
/* --- Sezioni ----------------------------------------------------------- */
.lb-sezione { padding-block: var(--lb-respiro-sezione); }
/* --- Header ------------------------------------------------------------ */
.lb-top {
position: fixed;
inset-inline: 0;
top: 0;
z-index: 120;
}
/* Scrim: sopra l'hero l'header non ha fondo, ma una sfumatura che parte dal nero
e svanisce. Senza, logo e menu spariscono quando la foto sotto è chiara. */
.lb-top::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 190%;
pointer-events: none; z-index: -1; opacity: 1; transition: opacity .4s ease;
background: linear-gradient(180deg, rgba(10, 9, 8, .72) 0%, rgba(10, 9, 8, .34) 46%, rgba(10, 9, 8, 0) 100%);
}
/* `.lb-top--fondo` la mette comportamenti.js dopo 24px di scroll: da lì in poi
serve un fondo vero, e la sfumatura si spegne.
🔴 **Il fondo sfocato sta su `::after` e NON sull'header, e non è una
preferenza di stile: spostarlo sull'header rompe il velo dei due pannelli.**
Chiude **G3-13②**, «l'overlay sfocato e scuro a volte si applica solo alla
testata». Il «a volte» era «da 24 px di scorrimento in poi».
La catena. I due Off-Canvas — menu e cassetto del modulo — sono widget
**dentro ``**. Un elemento con `backdrop-filter` è
**blocco contenitore per i `position: fixed` che ha dentro**, e crea un
**backdrop root**: da lì in giù la sfocatura campiona solo ciò che sta dentro
quell'elemento. Quindi appena l'header prendeva `backdrop-filter`, il
`.e-off-canvas` (che è `position: fixed; height: 100%`) smetteva di misurarsi
sulla finestra e si misurava sull'header. Misurato in browser, stessa pagina,
stesso pannello:
pagina in cima velo 1873 × 1000 px pixel che cambiano lontano
dalla testata: 100%
scorsa di 900 px velo 1873 × 78,9 px pixel che cambiano: 0%
78,9 px è **l'altezza dell'header**. Non era una sfocatura debole: era un velo
grande quanto la testata.
Su uno pseudo-elemento la resa è identica al pixel — stesso colore, stessa
sfocatura, stessa dissolvenza — ma l'header torna un elemento qualunque e il
`position: fixed` dentro di lui torna a misurarsi sulla finestra.
Lo pseudo-elemento non ha discendenti, quindi il blocco contenitore che crea
lui non riguarda nessuno. */
.lb-top--fondo { border-bottom: 1px solid var(--lb-filo); }
.lb-top::after {
content: ""; position: absolute; inset: 0; z-index: -1;
pointer-events: none; opacity: 0;
background: color-mix(in srgb, var(--lb-fondo) 80%, transparent);
-webkit-backdrop-filter: blur(14px) saturate(1.08);
backdrop-filter: blur(14px) saturate(1.08);
transition: opacity .3s ease;
}
.lb-top--fondo::after { opacity: 1; }
.lb-top--fondo::before { opacity: 0; }
/* L'header su una riga sola non sta più qui: è un'impostazione del Container,
in `costruisci-tema-builder.php`. La regola che c'era cadeva su `.e-con`
invece che su `.e-con-inner` — in un Container `boxed` il contenitore flex è
il secondo — e comunque perdeva contro `.e-con.e-flex > .e-con-inner` di
Elementor, che ha una classe in più. A 390px l'intestazione veniva **122px
invece di 73**, con «Menu» a capo sotto il logo e sopra la prima riga di
contenuto. Si vedeva solo su una pagina senza hero a tutta altezza — cioè
su Lavori, che è dove è saltata fuori. Trovato da `dev-lavori`. */
/* Il widget Logo del sito impone `width:100%` all'immagine: il logo e' un
lockup orizzontale 300x37, e con la larghezza forzata si schiaccia. Qui comanda
l'altezza e la larghezza segue le proporzioni. */
.lb-logo img,
.elementor-widget-theme-site-logo.lb-logo img {
/* 23px nell'header, 26px nel footer: sono i due valori del prototipo. */
height: 23px; width: auto; max-width: none; display: block;
}
.lb-foot .lb-logo img { height: 26px; }
/* --- Pulsante del menu ---
Nel prototipo accanto all'icona c'è la parola «Menu»: su un sito dove la
navigazione è tutta dentro un pannello, l'icona da sola lascia il visitatore
a indovinare. Elementor emette solo l'icona, l'etichetta la mette il tema.
`aria-label` sul pulsante lo mette già Elementor, quindi per chi usa uno
screen reader non cambia niente: questa parola è per chi guarda. */
.lb-menu .elementor-menu-toggle {
display: flex; align-items: center; gap: 11px;
background: none; border: none; color: var(--lb-titolo);
}
.lb-menu .elementor-menu-toggle::before {
content: "Menu";
font-family: var(--lb-extrawide);
font-weight: 700; text-transform: uppercase;
letter-spacing: .16em; font-size: .68rem;
}
.lb-menu .elementor-menu-toggle i,
.lb-menu .elementor-menu-toggle svg { font-size: 22px; width: 26px; height: auto; fill: currentColor; }
/* Il widget Logo del sito rende `, non sul link: Elementor usa già `::before` e `::after`
dell'`.elementor-item` per gli effetti del puntatore, e il suo `content:""`
vince sul nostro. Sul il campo è libero. */
.lb-voci-menu .elementor-nav-menu { counter-reset: lb-voce; }
.lb-voci-menu .elementor-nav-menu > li {
counter-increment: lb-voce;
display: flex;
align-items: center;
gap: 26px;
}
.lb-voci-menu .elementor-nav-menu > li::before {
content: counter(lb-voce, decimal-leading-zero);
font-family: var(--lb-extrawide);
font-weight: 700;
font-size: .78rem;
letter-spacing: .1em;
color: var(--lb-arancio);
flex: 0 0 auto;
}
.lb-voci-menu .elementor-nav-menu .elementor-item {
padding: 10px 0;
font-family: var(--lb-extrawide);
font-weight: 700;
font-size: clamp(2rem, 6vw, 4.6rem);
line-height: 1.06;
letter-spacing: .01em;
text-transform: uppercase;
color: var(--lb-titolo);
transition: color .25s ease, transform .25s ease;
}
.lb-voci-menu .elementor-nav-menu .elementor-item:hover,
.lb-voci-menu .elementor-nav-menu .elementor-item:focus-visible {
color: var(--lb-arancio);
transform: translateX(14px);
}
/* Il pulsante di chiusura: in alto a destra, come nel prototipo, e dice «Chiudi»
e non solo una crocetta — una parola costa niente e toglie un'incertezza. */
.lb-menu-chiudi {
position: absolute;
top: clamp(18px, 3vw, 30px);
right: clamp(22px, 4vw, 54px);
width: auto !important;
}
.elementor-widget-button.lb-menu-chiudi .elementor-button,
.lb-menu-chiudi .elementor-button {
background: none; border: none; padding: 0;
color: var(--lb-titolo);
font-family: var(--lb-extrawide);
font-weight: 700; text-transform: uppercase;
letter-spacing: .14em; font-size: .68rem;
}
.lb-menu-chiudi .elementor-button::after { content: "✕"; margin-left: 10px; font-size: .9rem; }
.lb-menu-chiudi .elementor-button:hover { color: var(--lb-arancio); }
.lb-pannello-menu__dentro { position: relative; }
/* =====================================================================
I DUE PANNELLI A SCOMPARSA — menu e cassetto del modulo
---------------------------------------------------------------------
Sono due Off-Canvas di Elementor con lo stesso involucro, quindi la resa
condivisa sta qui una volta sola. Chiude G2-26, G2-27, G2-28, G2-30 e G2-31.
===================================================================== */
/* **G2-26 e G2-28/G2-30: il velo dietro il pannello.** Fabrizio: «non è stato
applicato l'effetto sfocato e scurente al resto della pagina», e «manca il
fadeout» sia alla chiusura del cassetto sia a quella del menu.
Misurato: il velo **c'era già ed era del colore giusto** — `rgba(6,5,4,.48)`
sul cassetto, identico al prototipo — ma con `backdrop-filter: none` e
`transition: 0s`. Mancavano quindi **lo sfocato** e **il tempo**: appariva e
spariva di scatto, ed è quello che si legge come «poco armonico».
I valori vengono dal prototipo, `.lb-drawer-scrim`:
`backdrop-filter: blur(9px) saturate(.92)` e `transition: opacity .4s ease`.
La leggera desaturazione conta quanto la sfocatura: senza, le fotografie
dietro restano vivaci e il pannello sembra appoggiato invece che davanti. */
.lb-pannello-menu .e-off-canvas__overlay,
.lb-cassetto-contatti .e-off-canvas__overlay {
-webkit-backdrop-filter: blur(9px) saturate(.92);
backdrop-filter: blur(9px) saturate(.92);
transition: opacity .4s ease;
}
/* 🔴 **G4-09: su un telefono vero il pulsante «Invia» non si raggiunge, e non
perché il cassetto non scorra.** Fabrizio: «lo slider funziona bene ma anche
se scrollo non riesco a raggiungere il pulsante per inviare il messaggio».
⚠️ **Il primo rilievo puntava l'elemento sbagliato**, ed è la famiglia della
decisione 176 — numero giusto, oggetto sbagliato. `.e-off-canvas` è
`overflow-y: visible` con `scrollHeight == clientHeight`, quindi letto da lì
sembra che non ci sia niente da scorrere. **A scorrere non è lui: è
`.e-off-canvas__content`**, che ha già `overflow-y: auto` e 253 px di corsa.
Il «+166 px sotto il bordo» del triage è esatto — 825 − 659 — ma è la
posizione dell'invio a corsa NON fatta.
La causa vera è l'unità di misura. Il cassetto è alto
`--e-off-canvas-height: 100vh`, valore che mette Elementor sul contenitore
`lbmod` (`post-57.css`). **Su iOS `vh` non è l'area visibile: è l'area
visibile PIÙ la barra degli indirizzi** — nella specifica si chiama *large
viewport* ed è fissa, non si accorcia quando la barra c'è. Quindi il cassetto
è più alto della finestra, **la sua corsa di scorrimento si accorcia della
stessa quantità**, e il fondo del modulo resta sotto il bordo anche dopo aver
scorso tutto.
Misurato in WebKit emulando la geometria di iOS (cassetto = finestra + barra),
con lo stato opposto misurato dalla stessa sonda:
finestra 659 · cassetto 745 corsa 167 invio a 705 -> 46 px FUORI
finestra 629 · cassetto 711 corsa 201 invio a 671 -> 42 px FUORI
finestra 659 · cassetto 659 corsa 253 invio a 619 -> dentro
finestra 629 · cassetto 629 corsa 283 invio a 589 -> dentro
`dvh` è l'unità che vale l'area visibile **adesso**: con la barra a schermo il
cassetto si accorcia insieme a lei e la corsa torna intera. La riga `100vh`
resta sopra come ripiego per Safari < 15.4, che ignora la seconda.
⚠️ **Dentro WebKit sul Mac `dvh` e `vh` valgono lo stesso**, perché non c'è
nessuna barra che si ritrae: le quattro righe qui sopra sono l'emulazione
della geometria, **non la prova sul telefono**. Su iOS vero la verifica finale
è Fabrizio.
La variabile si **definisce**, non si combatte (trappola 4): Elementor la mette
sul contenitore e la fa ereditare, quindi dichiararla sull'`.e-off-canvas`
stesso la batte senza alzare la specificità. Stessa forma già in uso per il
pannello del menu, venti righe più su. */
.lb-cassetto-contatti .e-off-canvas {
--e-off-canvas-height: 100vh;
--e-off-canvas-height: 100dvh;
}
/* **Il margine di sicurezza sotto l'ultimo campo non è respiro: è la rete se
`dvh` non c'è.** Safari lo conosce dalla 15.4; sotto quella versione la riga
qui sopra cade su `100vh` e il difetto tornerebbe intero.
La quantità non è scelta a occhio, è l'aritmetica del caso peggiore. Con una
spaziatura `P`, a cassetto alto quanto finestra+barra la corsa vale `167 + P`
e il fondo dell'invio finisce a `705 − P`; deve stare dentro 659, quindi
**`P ≥ 46`**. Sull'iPhone 12 Mini lo stesso conto dà `P ≥ 42`. **56 px
coprono entrambi** e non dipendono da `dvh`: verificato forzando il cassetto
alla geometria di iOS **con `dvh` fuori gioco**.
Solo su telefono: sul desktop il cassetto non scorre e la riga non serve. */
@media (max-width: 767px) {
.lb-cassetto-contatti .e-off-canvas__content { padding-bottom: 56px; }
}
/* **G2-27: il pulsante «chiudi» del modulo era diverso dal prototipo perché non
aveva nessuno stile nostro.** Cercato in questo foglio: `.lb-cassetto__chiudi`
non compariva da nessuna parte, quindi usciva col vestito predefinito del
widget Pulsante — fondo, bordo e spaziatura di Elementor.
I valori sono quelli di `.lb-drawer-x` nel prototipo. Il colore parte da
`--lb-tenue` e va a `--lb-titolo` al passaggio del mouse: un comando di
servizio che non deve competere col titolo del modulo. */
.elementor-widget-button.lb-cassetto__chiudi .elementor-button,
.lb-cassetto__chiudi .elementor-button {
background: none; border: none; padding: 4px 0;
color: var(--lb-tenue);
font-family: var(--lb-regular);
font-weight: 700; text-transform: uppercase;
letter-spacing: .14em; font-size: .68rem;
transition: color .2s;
}
/* **Il pulsante «chiudi» andava a capo: «CHIUDI» sopra, la «✕» sotto.**
Visto in Chrome vero a 1873px, non a 1440: a 1440 il riquadro era più
stretto e la parola ci stava comunque, quindi il difetto non si vedeva.
Ci sono arrivato in tre passi, e i primi due erano sbagliati:
1. `align-self: flex-end`, preso dal prototipo (`.lb-drawer-x`). **Fa danno
qui:** il widget smette di occupare la riga e si stringe a 46px, così il
testo esce dal pulsante. Nel prototipo è un `` nudo dentro una
colonna flex; qui è un widget Elementor con un involucro in mezzo, e la
stessa dichiarazione dà un risultato diverso. L'allineamento a destra il
widget ce l'ha già: bastava non toglierlo.
2. `white-space: nowrap` da solo. **Non poteva bastare:** dentro
`.elementor-button` la parola sta in un `.elementor-button-content-wrapper`
che Elementor rende **flex di livello blocco**, e il nostro `::after` gli
sta dopo. Fra due box di blocco non c'è riga da spezzare — `nowrap` non ha
voce in capitolo.
3. Quella che funziona: **il pulsante diventa lui stesso una riga flex**, così
involucro e crocetta sono due elementi affiancati.
Il resto del blocco — colore, corpo, spaziatura — è di `.lb-drawer-x`. */
.lb-cassetto__chiudi .elementor-button {
display: inline-flex; align-items: center; white-space: nowrap;
}
.lb-cassetto__chiudi { margin-bottom: 18px; }
.lb-cassetto__chiudi .elementor-button::after { content: "✕"; margin-left: 10px; font-size: .9rem; }
.lb-cassetto__chiudi .elementor-button:hover { color: var(--lb-titolo); }
/* **Occhiello del cassetto («Iniziamo»).** Nel tema non esisteva nessuna regola
per `lb-cassetto__occhiello`: usciva con la tipografia del kit (16px,
letter-spacing -0.5px) attaccato al titolo, a tutte le larghezze. Valori del
prototipo, `.lb-drawer-eyebrow` (site.css r.163): maiuscolo, .3em, .6rem, 700,
arancione, a blocco; il margine sotto e' il `margin-top: 14px` di
`.lb-drawer-title`. NON riuso `.lb-eyebrow`: ha il filo davanti e .32em, che
qui il prototipo non ha. Tre classi sul widget (Elementor stampa la tipografia
del kit a due), e il margine sul titolo del widget e non sul widget. */
.elementor-widget-heading.lb-cassetto__occhiello .elementor-heading-title {
display: block;
font-family: var(--lb-regular);
font-weight: 700;
font-size: .6rem;
letter-spacing: .3em;
line-height: 1.55;
text-transform: uppercase;
color: var(--lb-arancio);
margin: 0 0 14px;
}
/* **G2-31: alle voci di menu mancavano le frecce.** Nel prototipo
(`site.css`, `.site .overlay nav a`) ogni voce ha una freccia arancione che
**entra da sinistra** al passaggio del mouse, la voce stessa scivola a destra,
e **le altre voci si spengono a .38** — è quest'ultimo dettaglio a far sembrare
il menu una scelta e non un elenco.
La freccia sta sul link e non sul ``: il `::before` del ` ` porta già
il numero progressivo, e i due non si contendono lo stesso pseudo-elemento. */
/* **G3-15: la freccia finiva all'inizio della voce, sopra il testo.**
Fabrizio, 2026-08-26: *«dovrebbe stare dopo la scritta invece qui appare
sovrapposta al testo all'inizio»*. Riprodotto e misurato aprendo il menu in
browser: in hover lo `::after` risultava a **x=204** e la parola «Chi siamo»
comincia a **x=204**. Esattamente sopra.
**La causa: lo pseudo-elemento non era nostro da solo.** Elementor lo usa per
l'effetto «pointer» delle voci di menu e lo dichiara
`position: absolute; inset: 10px 570px 10px 0; width: 70px; height: 78px;
background-color: …`. Noi ci scrivevamo dentro `content` e `color`, cioè le
due cose che *non* decidono dove sta: il posto lo decidevano le sue. Con
`opacity: 0` a riposo non si vedeva niente, e in hover comparivano insieme la
freccia arancione **e il rettangolo grigio del pointer**.
Quindi la geometria va **riportata a noi tutta**, non ritoccata: `static`
rimette lo pseudo nel flusso — e dentro una voce che Elementor rende
`display: flex` questo vuol dire «l'ultimo elemento della riga», cioè dopo la
scritta, come nel prototipo (`site.css`, `.site .overlay nav a::after`).
`background: none` spegne la barra del pointer, che non è mai stata nostra.
⚠️ Stessa famiglia di G3-01: **su un componente di Elementor uno pseudo-
elemento ha già un proprietario**, e le proprietà che non dichiari resta lui
a dichiararle. */
.lb-voci-menu .elementor-nav-menu .elementor-item::after {
content: "\2192";
position: static;
inset: auto;
width: auto; height: auto;
background: none;
display: inline-block;
flex: 0 0 auto;
margin-left: .38em;
color: var(--lb-arancio);
opacity: 0;
transform: translateX(-16px);
transition: opacity .4s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
}
/* **La barra del pointer resiste anche a `background: none`, e non per ordine
di sorgente: per specificità.** Misurata sul reso dopo la prima correzione —
`backgroundColor: rgb(140, 132, 120)` ancora addosso allo pseudo-elemento.
La dichiara il **foglio della pagina**, `post-57.css`, con
`.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed)
.elementor-item::after { background-color: var(--e-global-color-accent) }`:
**quattro classi**, mentre la regola qui sopra ne ha tre. Con `opacity: 0` a
riposo non si vedeva, e in hover comparivano insieme la freccia e un
rettangolo grigio da 70×78.
Le cinque classi qui sotto stanno tutte su **quei due elementi**, non su
antenati: `lb-voci-menu` ed `elementor-widget-nav-menu` sul widget,
`elementor-nav-menu--main` ed `elementor-nav-menu__container` sul ``,
`elementor-item` sul link. Nessuna dipende da dove il menu è appeso, quindi
la regola non smette di applicarsi se il pannello cambia involucro. */
.lb-voci-menu.elementor-widget-nav-menu
.elementor-nav-menu--main.elementor-nav-menu__container
.elementor-item::after { background-color: transparent; }
.lb-voci-menu .elementor-nav-menu .elementor-item:hover {
color: var(--lb-arancio);
transform: translateX(clamp(8px, 1.4vw, 20px));
}
.lb-voci-menu .elementor-nav-menu .elementor-item:hover::after {
opacity: 1;
transform: translateX(0);
}
/* Le altre si spengono: e' il gesto che rende il menu una scelta. */
.lb-voci-menu .elementor-nav-menu:hover .elementor-item:not(:hover) { opacity: .38; }
.lb-voci-menu .elementor-nav-menu .elementor-item { transition: color .3s ease, opacity .3s ease, transform .45s cubic-bezier(.16, 1, .3, 1); }
/* Il pulsante che lo apre: «Menu» più le due barre del prototipo (due, non tre). */
.elementor-widget-button.lb-menu-apri .elementor-button,
.lb-menu-apri .elementor-button {
background: none; border: none; padding: 0;
color: var(--lb-titolo);
font-family: var(--lb-extrawide);
font-weight: 700; text-transform: uppercase;
letter-spacing: .16em; font-size: .68rem;
}
.lb-menu-apri .elementor-button-content-wrapper { display: flex; align-items: center; gap: 12px; }
.lb-menu-apri .elementor-button-text { flex: 0 0 auto; }
/* **Il pulsante è un contenitore flex, e senza questa riga le due barre non si
vedono.** Le barre sono un `::after` con larghezza e altezza: dentro un
`inline-block` — il valore predefinito di `.elementor-button` — lo
pseudo-elemento è un box **in linea**, e su un box in linea non replaced
larghezza e altezza non si applicano. La regola c'era, il disegno no: nel
prototipo accanto alla parola «Menu» ci sono due trattini da 26px
(`partials/header.html`, `.menu-btn .ln i`). Trovato da `dev-servizi`
affiancando i due screenshot. */
.elementor-widget-button.lb-menu-apri .elementor-button,
.lb-menu-apri .elementor-button { display: inline-flex; align-items: center; gap: 12px; }
.lb-menu-apri .elementor-button::after {
content: "";
width: 26px; height: 11px;
border-top: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
flex: 0 0 auto;
}
/* --- Hero -------------------------------------------------------------- */
.lb-hero {
position: relative;
min-height: 100svh;
overflow: hidden;
padding: 0;
}
/* Lo sfondo dell'hero deve arrivare ai bordi dello schermo: il Container di
Elementor e la griglia di JetEngine portano entrambi una spaziatura di default
che qui lascerebbe una cornice nera intorno alla foto. */
.lb-hero__sfondo { position: absolute; inset: 0; z-index: 0; padding: 0; }
.lb-hero__sfondo > .e-con-inner,
.lb-hero__sfondo .elementor-widget-container,
.lb-hero__sfondo .jet-listing-grid,
.lb-hero__sfondo .jet-listing-grid__items,
.lb-hero__sfondo .jet-listing-grid__item { padding: 0; margin: 0; }
.lb-hero__sfondo > .e-con-inner { height: 100%; }
.lb-hero__sfondo .elementor-widget,
.lb-hero__sfondo .elementor-widget-container { height: 100%; }
/* La catena di contenitori fra il Container e la foto: se anche uno solo non è
alto quanto il padre, l'hero mostra una banda nera invece della fotografia.
Su desktop reggeva per caso, su mobile no. */
.lb-hero__sfondo .jet-listing-grid,
.lb-hero__sfondo .jet-listing-grid__slider,
.lb-hero__sfondo .jet-listing-grid__items,
.lb-hero__sfondo .jet-listing-grid__item,
.lb-hero__sfondo .swiper,
.lb-hero__sfondo .swiper-wrapper,
.lb-hero__sfondo .swiper-slide { height: 100%; }
/* Nell'hero la card del progetto serve solo per la foto: titolo e tipologia
li mostra la barra sotto il claim, non la slide. */
.lb-hero__sfondo .lb-card__meta { display: none; }
/* **G2-03: l'«ombreggiatura strana ai margini dx e sx» dell'hero era il velo
della card.** Nell'hero la card serve solo per la fotografia: nome, categoria
e link li mostra la barra sotto il claim, ed è per questo che due righe sopra
la meta è nascosta. Il velo invece era rimasto acceso, e al passaggio del
mouse dipingeva il suo gradiente scuro sulla diapositiva sotto il puntatore —
comprese quelle di fianco, che nel ciclo continuo affacciano ai due bordi. Da
qui i «margini dx e sx».
Nel prototipo l'hero è uno sfondo, non una scheda: nessun velo. */
.lb-hero__sfondo .lb-card__vai { display: none; }
/* Nell'hero la foto riempie lo schermo: va tolto il rapporto 4:5 che la card usa
nella griglia, o l'immagine si ridimensiona su quello e lascia il resto nero. */
.lb-hero__sfondo .lb-card,
.lb-hero__sfondo .lb-card__foto { height: 100%; gap: 0; aspect-ratio: auto; border-radius: 0; }
/* Posizionata in assoluto invece che con `height:100%`: fra il Container e
l'immagine ci sono tre involucri di Elementor e di JetEngine, e basta che uno
non propaghi l'altezza perché la foto torni alle sue proporzioni e lasci
metà schermo nero. Così l'unico riferimento è il riquadro dell'hero. */
/* Fra la slide e la foto ci sono sei involucri — due di Elementor, tre di
JetEngine, uno del template del listing — e l'altezza si propaga solo se la
dichiarano tutti. Basta che uno resti `auto` perché l'immagine torni alle sue
proporzioni e l'hero mostri una banda nera. */
.lb-hero__sfondo .elementor,
.lb-hero__sfondo .lb-card,
.lb-hero__sfondo .lb-card__foto,
.lb-hero__sfondo .lb-card__immagine,
.lb-hero__sfondo .jet-listing-dynamic-image,
.lb-hero__sfondo .jet-listing-dynamic-image__link { height: 100%; }
.lb-hero__sfondo .lb-card__foto img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover; border-radius: 0;
animation: lb-ken 6.5s ease forwards;
}
@keyframes lb-ken { from { transform: scale(1.03); } to { transform: scale(1.15); } }
/* **Il parallasse non è in ritardo: è in transizione.** G2-07 e G2-15, e sono
la stessa cosa — Fabrizio le ha viste su Chi siamo e su Splendide, «come ci
sia un ritardo».
La causa non è nel nostro JavaScript, che scrive il `transform` a ogni
fotogramma dentro `requestAnimationFrame`. È che questi elementi sono
**Container di Elementor**, e `.e-con` porta di serie
`transition: background, border, box-shadow, transform` con **0,4s sul
transform**. Misurato sul sito servito, identico su tutti e tre gli hero.
Ogni valore che il JS scrive viene quindi **interpolato per quattro decimi di
secondo** prima di arrivare a schermo: la foto insegue lo scroll invece di
seguirlo. È l'unico caso in cui una transizione, che di solito addolcisce,
fa il contrario — perché qui il valore cambia già sessanta volte al secondo e
non ha bisogno di essere addolcito da nessuno.
Si spegne **solo sul transform e solo dove il JS lo guida**: il resto delle
transizioni di Elementor su questi contenitori resta, e gli altri contenitori
del sito non vengono toccati. `.lb-ss-hero__media img` non è in elenco perché
è un `img` e non un Container: lì la transizione non c'era, ed è il motivo
per cui il parallasse di Packaging non era stato segnalato. */
.lb-hero__sfondo,
.lb-cs-hero__sfondo,
.lb-im-hero__sfondo,
.lb-im-hero__testo,
.lb-cs-duo__foto img,
.lb-prossimo__foto {
transition-property: none;
}
/* **Uno dei sei strati perdeva, e l'ha trovato la riverifica del 2026-08-26.**
Cinque su sei calcolavano `none`; `.lb-prossimo__foto` no, e rendeva
`background, border, border-radius, box-shadow, transform` — cioe' la
transizione di serie dei Container, che era proprio quello che G2-07/15
toglieva. La riga sopra e' **(0,1,0)** e perde contro
.elementor-element:where(...):where(...):not(:has(.elementor-widget-container))
di `frontend.min.css`, che vale **(0,2,0)**: `:where()` non conta niente,
ma `:not(:has(.classe))` conta come una classe. Gli altri cinque reggono solo
perche' quel selettore non li intercetta — non perche' siano piu' forti.
Qui serve **(0,3,0)**, non (0,2,0): a parita' deciderebbe l'ordine di
caricamento, e l'ordine fra tema e Kit **cambia da pagina a pagina** — e'
la stessa cosa che ci ha fatto uscire il titolo del piede arancione.
Gli altri cinque restano dove sono: alzarli tutti sarebbe debito su un
problema che oggi non hanno. */
.lb-prossimo .elementor-element.lb-prossimo__foto { transition-property: none; }
/* **Gli altri tre, trovati cercando per sintomo invece che per elenco.**
La passata del lead ha posto la domanda giusta — «chi porta ancora una
transizione?» — invece di controllare i selettori che gia' conoscevamo. Un
elenco verifica solo cio' che qualcuno ha pensato di metterci dentro.
Filtrati per **durata**, perche' una `transition-property: all` con durata
`0s` non ritarda niente e correggerla sarebbe rumore. Ne restano tre veri:
/chi-siamo/ .lb-cs-duo__testo 0,4s
/progetto/splendide/ .lb-split__cornice--parallasse img 0,7s
/progetto/alto/ .lb-bleed ... jet-listing-dynamic-image 0,4s
⚠️ **Quella da 0,7s e' nostra, non di Elementor**, ed e' la piu' istruttiva:
la riga 1610 di questo foglio mette `transition: transform .7s` per lo zoom
al passaggio del mouse. Sulla stessa immagine il JavaScript scrive `transform`
a ogni scatto di scroll — quindi **lo zoom dell'hover ritardava il parallasse
di sette decimi**. E' letteralmente la frase di Fabrizio: «come ci sia un
ritardo». Non «come»: c'era, e l'avevamo scritto noi.
Lo zoom su quelle immagini non si perde perche' **non funzionava gia'**: il
JavaScript scrive un `transform` in linea, che batte la regola `:hover` del
foglio. Una cornice in parallasse non ha mai avuto lo zoom.
Le prime due sono la transizione di serie dei Container e vogliono (0,3,0),
per la ragione di sempre: a (0,2,0) deciderebbe l'ordine di caricamento. */
/* Due classi e non una: `.lb-split__cornice img` (riga 1610) ha la **stessa**
specificita' (0,1,1) e sta **piu' in basso** nel foglio, quindi vincerebbe per
ordine. L'ho caricata cosi' e infatti restava a 0,7s: una sola pagina su nove
ancora in ritardo. Con la classe ripetuta si passa a (0,2,1) e l'ordine non
conta piu'. */
.lb-split__cornice.lb-split__cornice--parallasse img { transition-property: none; }
.lb-cs-duo .elementor-element.lb-cs-duo__testo,
.lb-bleed .elementor-element.elementor-widget-jet-listing-dynamic-image {
transition-property: none;
}
.lb-hero__velo {
position: absolute; inset: 0; z-index: 2; padding: 0; pointer-events: none;
background: linear-gradient(180deg,
rgba(10, 9, 8, .60) 0%, rgba(10, 9, 8, .12) 24%, rgba(10, 9, 8, .30) 50%,
rgba(10, 9, 8, .74) 74%, rgba(10, 9, 8, .95) 100%);
}
/* --- Il velo di leggibilità sotto il testo che sta su fotografia ----------
**Una regola sola per i tre hero fotografici del sito**, ed è dichiarata qui
e non tre volte perché il problema non è di una pagina: è di chiunque metta
testo piccolo sopra una foto che non ha scelto lui.
Da cosa nasce. La revisione di accessibilità del 2026-08-25 ha misurato il
contrasto **sui pixel della fotografia**, non sul CSS: reso il testo
trasparente, fotografata la sua area, calcolato il rapporto sullo sfondo che
c'era sotto. Quattro occhielli fuori soglia — `/progetto/splendide-royal/`
**1,14:1**, `/chi-siamo/` **1,30:1** e i due arancioni a 2,56 e 3,13 contro i
4,5:1 richiesti — e uno praticamente invisibile.
**La cosa che conta più dei quattro casi**: `/progetto/alto-cocktail-bar/` ha
lo stesso componente con la stessa regola e passa (4,73:1) **solo perché la
sua foto è scura**. L'occhiello non aveva nessuna protezione: né velatura, né
ombra del testo. Reggeva o no a seconda della fotografia — e le sette
diapositive dell'hero della home **le cambia il cliente dalla bacheca**,
come le foto delle dieci schede progetto non ancora pubblicate. Correggere le
foto di oggi non sarebbe stato correggere niente.
Perché legato al blocco di testo e non al velo dell'hero. Il velo è una
gradazione sull'**altezza della sezione**: rinforzarlo vorrebbe dire scurire
la foto dove il testo non c'è, e resterebbe tarato sull'impaginazione di
oggi. Questo invece si aggancia al riquadro che **contiene** il testo: se il
cliente sposta o allunga il blocco, la protezione lo segue.
La forma: nasce trasparente 200px sopra il blocco e arriva a coprire dove sta
l'occhiello, che è la riga piccola in cima. Il titolo sotto è tipografia
gigante (fino a 7rem) e la soglia dei testi grandi la passa da sé; la riga da
10,6px no, ed è quella che va protetta. `-1`: sta dietro al testo e davanti
al velo, dentro il contesto di sovrapposizione che lo `z-index: 3` del blocco
crea già. Stesso inchiostro dei tre veli — `rgba(10, 9, 8, …)`, nessun colore
nuovo — così il raccordo non si vede. */
.lb-hero__fold,
.lb-cs-hero__fold,
.lb-im-hero__testo { isolation: isolate; }
.lb-hero__fold::before,
.lb-cs-hero__fold::before,
.lb-im-hero__testo::before {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
top: -200px;
/* **G3-01 e G3-02: senza questa riga il velo finisce 200px prima del fondo.**
Segnalazione di Fabrizio del 2026-08-26, e le sue parole erano esatte al
pixel: *«ora arriva dalla scritta creative factory al copy dalla prima
idea»*. Misurato in browser sull'hosting: la sfumatura si spegneva a
**y=800** su tutte e due le pagine — che sulla home è dove finisce il copy
«Dalla prima idea…» e su Chi siamo è un gradino netto a metà fotografia.
**La causa non è in questa dichiarazione, è in una che non c'è.**
`elementor/assets/css/frontend.min.css` dichiara
`.e-con:before { height: max(100% + …, 100%) }` con specificità **(0,1,0)**,
la stessa di questo selettore. `top` e `bottom` li scriviamo noi e vincono
per ordine di sorgente; **`height` non lo scrivevamo**, quindi l'altezza la
decideva Elementor: `100%` del contenitore, cioè 410px sulla home e 510 su
Chi siamo — che partendo da `top:-200px` finiscono **200px sopra** il fondo
del blocco. `bottom: 0` c'era e non serviva a niente.
`height: auto` restituisce la geometria alle due dichiarazioni che la
descrivono: `top` e `bottom`. Misurato dopo: 390→1000 sulla home (era
390→800) e 290→1000 su Chi siamo (era 290→800), cioè fino a «Guarda il
progetto» e fino allo «Scorri».
⚠️ **La classe di errore vale per ogni `::before` su un contenitore
Elementor**: se scrivi `top`/`bottom`/`left`/`right` e non `height`/`width`,
le due che mancano te le scrive `.e-con:before`. */
height: auto;
z-index: -1;
pointer-events: none;
/* Le prime tre fermate sono in **pixel** e non in percentuale, di proposito:
devono cadere dentro i 200px di rincorsa, che sono una lunghezza fissa. In
percentuale si sposterebbero al variare dell'altezza del blocco, cioè della
lunghezza del titolo — e la protezione dell'occhiello dipenderebbe da
quante righe scrive il cliente.
**I valori vengono dal caso peggiore, non dalle foto di oggi.** Con .80 a
200px i numeri sulle foto attuali erano buoni — 5,53:1 sulla home, 4,52:1
su Chi siamo — ma sostituendo la diapositiva con un **bianco pieno**, cioè
il peggio che il cliente possa caricare dalla bacheca, scendevano a
**4,43** e **4,04**: sotto la soglia di 4,5. Un trattamento tarato sulle
foto in libreria non è un trattamento, è una coincidenza che dura fino al
prossimo caricamento.
A .90 sul bordo alto del blocco l'inchiostro complessivo, sommato al velo
della sezione, tiene il fondo abbastanza scuro perché `--lb-tenue` a
10,6px passi **anche sul bianco pieno**. Chi ritocca questi numeri li
riprovi così: si sostituisce la foto con un rettangolo bianco e si
rimisura, non si guarda la pagina com'è oggi. */
background: linear-gradient(180deg,
rgba(10, 9, 8, 0) 0,
rgba(10, 9, 8, .34) 96px,
rgba(10, 9, 8, .66) 150px,
rgba(10, 9, 8, .90) 200px,
rgba(10, 9, 8, .94) 100%);
}
/* **G2-01: la piega si mangiava i clic sulla slide.**
Diagnosi di `dev-wp`, misurata con una griglia di dodici punti sull'hero:
sei navigavano e sei no, e i sei muti erano tutti nella fascia **590-879**,
dove l'ancora della slide c'e' ma la piega le sta sopra con `z-index: 3`.
Sopra i 853px la piega **non contiene niente di interattivo**: occhiello,
claim, sottotitolo, barra. Sono duecentosessanta pixel di testo che
bloccavano il clic all'immagine che sta sotto.
`pointer-events: none` fa passare il clic attraverso la piega; la riga dopo
**riaccende i suoi quattro comandi veri** — il nome del progetto, «Guarda il
progetto» e le due frecce — che restano cliccabili come prima. Il contatore
non e' un comando e resta trasparente ai clic, che e' giusto.
⚠️ Vale solo per la piega dell'hero, dove sotto c'e' una slide da aprire.
Non e' un rimedio da spargere: altrove `pointer-events: none` renderebbe il
testo non selezionabile senza che nessuno ne guadagni niente. */
.lb-hero__fold {
position: relative; z-index: 3;
width: 100%;
padding-bottom: clamp(40px, 7vh, 80px);
pointer-events: none;
}
.lb-hero__fold a,
.lb-hero__fold button,
.lb-hero__fold input,
.lb-hero__fold [role="button"] { pointer-events: auto; }
.lb-hero__fold .lb-eyebrow .elementor-heading-title { margin-bottom: 20px; }
.lb-claim .elementor-heading-title {
font-family: var(--lb-extrawide);
/* 700, non 300: nel prototipo il peso è dichiarato 300 in cima al file e
ridichiarato 700 più in basso. Vince l'ultima regola. */
font-weight: 700;
font-size: clamp(2.1rem, 6vw, 5rem);
line-height: 1.02;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--lb-titolo);
text-wrap: balance;
max-width: 15ch;
margin: 0 0 18px;
}
/* Solo : il claim viene spezzato riga per riga in ,
quindi colorare gli colorerebbe tutto il titolo. */
.lb-claim .elementor-heading-title em { color: var(--lb-arancio); font-style: normal; }
.lb-claim .lb-riga { display: block; white-space: nowrap; line-height: .92; }
@media (max-width: 700px) { .lb-claim .lb-riga { white-space: normal; } }
.lb-hero__sottotitolo {
color: rgba(255, 255, 255, .82);
font-size: clamp(1rem, 1.5vw, 1.25rem);
line-height: 1.4;
max-width: 34ch;
margin-bottom: 40px;
}
.lb-hero__barra {
border-top: 1px solid rgba(255, 255, 255, .2);
padding-top: 22px;
flex-wrap: wrap;
}
.lb-hero__progetto { min-width: 260px; width: auto; }
.lb-hero__progetto .lb-categoria {
font-size: .64rem; text-transform: uppercase; letter-spacing: .22em; color: var(--lb-arancio);
}
.lb-hero__progetto .lb-nome {
font-weight: 400; letter-spacing: .02em; color: var(--lb-titolo);
font-size: clamp(1.3rem, 2.4vw, 1.9rem);
}
.lb-hero__progetto .lb-vai {
display: inline-flex; align-items: center; gap: 9px; margin-top: 4px;
font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
color: rgba(255, 255, 255, .85);
}
.lb-hero__progetto .lb-vai::after { content: "→"; color: var(--lb-arancio); }
/* I comandi di un carosello: una forma sola per i due che il sito ha.
Erano scritti solo per `.lb-hero__comandi`; dalla decisione 134c li porta
anche la giostra dei progetti, e due caroselli sulla stessa pagina con due
disegni diversi sarebbero peggio che uno senza comandi.
`:is()` prende la specificità del suo argomento più alto — qui una classe —
quindi il peso delle regole resta quello di prima. */
.lb-hero__comandi { width: auto; }
/* **`flex: 0 0 46px` fa il cerchio: senza, erano ovali.** G2-02, prima metà.
Misurato: **58×46** con `border-radius: 50%`, che su un rettangolo disegna
un'ellisse — ed era proprio «ora è un ovale».
`width: 46px` c'era già e non bastava: come elemento flex il pulsante ha
`min-width: auto`, cioè un minimo pari al proprio contenuto, e il glifo del
segno in Roc Grotesk è più largo di 46 px. La larghezza dichiarata perdeva
contro il minimo automatico. `flex-basis` fisso più `min-width: 0` tolgono la
questione: il cerchio è 46×46 qualunque cosa ci sia dentro.
La seconda metà di G2-02 — il segno che deve essere un'icona SVG e non un
carattere di font — sta in `comportamenti.js`, dove i pulsanti vengono
costruiti. Con l'icona il glifo sparisce, ma queste due righe restano: se un
domani qualcuno rimette del testo, il cerchio non torna ovale. */
.lb-hero__comandi .lb-freccia {
width: 46px; height: 46px; flex: 0 0 46px; min-width: 0; padding: 0; border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .28);
background: rgba(255, 255, 255, .04);
color: var(--lb-titolo); font-size: 1.4rem; line-height: 1;
display: flex; align-items: center; justify-content: center;
transition: border-color .2s, color .2s, background .2s, transform .15s;
}
.lb-hero__comandi .lb-freccia:hover {
border-color: var(--lb-arancio); color: var(--lb-arancio); background: rgba(242, 87, 31, .09);
}
.lb-hero__comandi .lb-freccia:active { transform: scale(.9); }
.lb-hero__comandi .lb-contatore {
font-size: .72rem; letter-spacing: .16em; color: rgba(255, 255, 255, .7);
font-variant-numeric: tabular-nums;
}
.lb-hero__comandi .lb-contatore b { color: var(--lb-titolo); font-weight: 400; }
.lb-hero__comandi .lb-avanzamento {
width: 120px; height: 2px; background: rgba(255, 255, 255, .2);
position: relative; overflow: hidden;
}
.lb-hero__comandi .lb-avanzamento i {
position: absolute; inset-block: 0; left: 0; width: 0; background: var(--lb-arancio);
}
/* --- Statement --------------------------------------------------------- */
.lb-statement__colonne { margin-top: 60px; align-items: flex-start; }
.lb-statement__colonne .elementor-widget-text-editor p,
.lb-statement__colonne p { color: var(--lb-tenue); font-size: 1.02rem; max-width: 46ch; margin: 0; }
.lb-statement__colonne b { color: var(--lb-titolo); font-weight: 600; }
@media (max-width: 900px) { .lb-statement__colonne { flex-direction: column; } }
/* --- Muro clienti ---------------------------------------------------------
Widget Galleria di Elementor. Le linee di separazione non sono bordi ma il
fondo che si vede attraverso un `gap` di 1px: e' il modo in cui il prototipo
le fa, e regge qualunque numero di loghi per riga senza doppie linee agli
incroci. `object-fit: contain`, mai `cover`: 24 loghi hanno 24 proporzioni
diverse, e ritagliarli per riempire la cella li mutila. */
.lb-muro-clienti { margin-top: 52px; }
.lb-muro-clienti > .elementor-widget-container { padding: 0; }
.lb-muro-clienti .elementor-image-gallery .gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 1px;
background: var(--lb-filo);
border: 1px solid var(--lb-filo);
border-radius: 0;
overflow: hidden;
margin: 0;
}
/* WordPress mette `max-width:16.66%` su ogni cella della galleria a 6 colonne.
Dentro una griglia CSS quel 16,66% si calcola sulla cella e non sulla riga: il
logo si riduceva a 34px e la parete sembrava vuota. */
.lb-muro-clienti .elementor-image-gallery .gallery-item {
margin: 0 !important; width: auto !important; max-width: none !important; float: none;
background: var(--lb-fondo);
min-height: 140px;
display: flex; align-items: center; justify-content: center;
padding: 20px;
transition: background .25s ease;
}
.lb-muro-clienti .elementor-image-gallery .gallery-item:hover { background: var(--lb-superficie); }
.lb-muro-clienti .elementor-image-gallery .gallery-icon {
width: auto; display: flex; align-items: center; justify-content: center;
}
/* **Il trattamento comune del muro, dichiarato — e dichiarato anche cosa non
copre.** Prima non ce n'era nessuno (né `filter`, né `opacity` normalizzante,
né `mix-blend-mode`): la resa dipendeva interamente dal file che il cliente
aveva caricato, e con ventiquattro loghi arrivati come sono arrivati si vedeva.
`grayscale(1)` toglie la dominante cromatica, ed è la parte che **funziona
per costruzione**: nessun logo può più stonare per colore, nemmeno quello che
il cliente caricherà domani senza chiedere niente a nessuno. Misurato su
«TRECCANI», l'unico colorato della griglia: saturazione media dei suoi pixel
di inchiostro **da 0,543 a 0,014**, cioè dentro il rumore degli altri
ventitré (il secondo più colorato sta a 0,036).
**Quello che il codice qui NON risolve, e non lo finge.** Gli altri due
rilievi della revisione — il logo a scudo che «si intuisce che c'è qualcosa,
non che cosa», e «ACQUOLINA» e «So Chic» al limite — sembrano un problema di
luminosità e non lo sono: misurati, quei loghi sono **già bianchi**, e a
renderli deboli è il tratto sottile visto attraverso `opacity: .72`. Un
`brightness()` su del bianco non ha niente da sollevare: provato a 1,9 e
misurato **inerte** su ventitré celle su ventiquattro. Toglierlo è preferibile
a lasciarlo lì a somigliare a una correzione.
La via giusta il prototipo ce l'ha già, ed è **per singolo logo**:
`#v4 .cwall .cell--ext img { filter: brightness(0) invert(1) }`
(`lion-brand-home.html:141`) appiattisce a silhouette bianca **solo** le celle
che ne hanno bisogno. Applicarlo a tutte non si può: «Il Pensiero Scientifico
Editore» è un PNG **senza canale alfa**, e brightness(0)+invert(1) ne farebbe
un rettangolo bianco pieno — si scambierebbe un difetto con uno più grosso.
Il Widget Galleria di WordPress non dà nessun aggancio per cella, quindi il
`--ext` qui richiede una scelta sul markup **e** i file monocromatici dal
cliente: due cose che non stanno in questo foglio. Segnalate, non nascoste. */
/* Giro 8: i loghi arrivano già equilibrati, tutti sulla stessa tela 480×300 con la
superficie pesata da `ambiente/build/normalizza-loghi.py`. Il peso visivo sta nel
file, quindi qui si dà a tutti la stessa larghezza: un tetto in altezza li
rimpicciolirebbe di nuovo in modo diseguale. */
.lb-muro-clienti .elementor-image-gallery img {
width: 100%; max-width: 200px; height: auto;
object-fit: contain; border: none;
filter: grayscale(1);
opacity: .72; transition: opacity .25s ease, transform .25s ease;
}
/* Il grigio resta anche al passaggio del mouse. La tentazione era restituire il
colore su hover — sembra generoso col marchio del cliente — ma il criterio di
chiusura della revisione dice «nella griglia nessun logo ha una dominante
cromatica diversa dagli altri», e una parete uniforme che diventa a chiazze
sotto il puntatore lo rispetta solo da ferma. */
.lb-muro-clienti .elementor-image-gallery .gallery-item:hover img { opacity: 1; transform: scale(1.06); }
@media (max-width: 600px) {
.lb-muro-clienti .elementor-image-gallery .gallery { grid-template-columns: 1fr 1fr; }
.lb-muro-clienti .elementor-image-gallery .gallery-item { min-height: 120px; }
}
/* Giro 8: la cella arancione che chiude l'ultima riga del muro. In pagina è un
Container Elementor (`.lb-muro-cta`, link al cassetto del modulo) messo dopo la
galleria, così il cliente ne cambia il testo dall'editor. `pagine.js` la sposta
dentro la griglia solo se l'ultima riga è incompleta e le dà `span` pari alle
celle vuote. Non `grid-column: auto / -1`: quello occupa UNA colonna in fondo,
non tutte quelle libere (misurato a 1024 px: 1 su 3). Senza script non compare:
il muro resta com'era, con la cella vuota. */
.lb-muro-cta { display: none !important; }
.elementor-editor-active .lb-muro-cta,
.lb-muro-clienti .gallery > .lb-muro-cta { display: flex !important; }
.lb-muro-clienti .gallery > .lb-muro-cta[hidden] { display: none !important; }
.lb-muro-clienti .gallery > .lb-muro-cta {
flex-direction: column; align-items: center; justify-content: center; gap: 6px;
min-height: 140px; padding: 20px; text-align: center;
background: var(--lb-arancio); color: var(--lb-su-arancio);
transition: filter .25s ease;
}
.lb-muro-clienti .gallery > .lb-muro-cta:hover { filter: brightness(1.08); }
/* Una riga sola, nel carattere dei titoli: in una cella larga quanto un logo
due righe in maiuscoletto a .7rem non si leggevano (Fabrizio, 2026-10-13). */
.lb-muro-cta .elementor-heading-title {
margin: 0; color: var(--lb-su-arancio);
font-family: var(--lb-titolo-famiglia); font-weight: 700;
font-size: clamp(.95rem, 1.25vw, 1.15rem); line-height: 1.15; text-transform: uppercase;
}
.lb-muro-cta__vai .elementor-heading-title::after { content: " \2192"; }
@media (max-width: 600px) { .lb-muro-clienti .gallery > .lb-muro-cta { min-height: 120px; } }
/* Giro 8: il rimando dalla home alla pagina Clienti. Stessa voce di «Guarda il
progetto» nell'hero (`.lb-vai`): un link, non un secondo pulsante arancione che
faccia concorrenza a «Raccontaci il tuo progetto». */
.lb-link-vai { margin-top: 28px; }
.elementor-widget-button.lb-link-vai .elementor-button,
.lb-link-vai .elementor-button {
display: inline-flex; align-items: center; gap: 9px; padding: 0;
background: none; border: 0; border-radius: 0;
font-family: var(--lb-regular); font-size: .72rem; font-weight: 400;
text-transform: uppercase; letter-spacing: .14em; color: var(--lb-titolo);
transition: color .2s ease;
}
.lb-link-vai .elementor-button::after { content: "\2192"; color: var(--lb-arancio); }
.elementor-widget-button.lb-link-vai .elementor-button:hover,
.lb-link-vai .elementor-button:hover { color: var(--lb-arancio); transform: none; filter: none; }
/* --- Lavori: testata e carosello --------------------------------------- */
.lb-lavori { padding-bottom: clamp(70px, 9vw, 120px); }
.lb-lavori__indizio .elementor-heading-title {
font-size: .66rem; text-transform: uppercase; letter-spacing: .2em;
color: var(--lb-tenue); display: flex; align-items: center; gap: 10px; margin: 0;
white-space: nowrap;
}
.lb-lavori__indizio { flex: 0 0 auto; }
.lb-lavori__indizio .elementor-heading-title::after { content: "→"; color: var(--lb-arancio); }
.lb-lavori__pista { margin-top: 48px; padding-left: var(--lb-margine); }
@media (max-width: 900px) { .lb-lavori__testata { flex-direction: column; align-items: flex-start; } }
/* **G4-01: il carosello veniva tagliato a sinistra prima del bordo dello
schermo, e non è una preferenza — è uno scostamento dal prototipo.**
Fabrizio, da telefono: «a sinistra vengono tagliati prima della fine dello
schermo. il carosello dovrebbe avere i margini dello schermo come limiti».
Nel prototipo le due cose stanno **sullo stesso elemento**
(`lion-brand-home.html:108-110`):
#v4 .gwrap { overflow: hidden; padding-left: clamp(22px,4vw,54px); }
e `.gwrap` è largo quanto lo schermo. `overflow` ritaglia sul **riquadro di
riempimento**, non su quello del contenuto: quindi la prima card comincia al
margine, ma trascinando le card scorrono *dentro* il riempimento e si
tagliano **al bordo dello schermo**.
Qui invece le due cose erano finite su elementi diversi — il riempimento sulla
`.lb-lavori__pista`, il ritaglio sullo `.jet-listing-grid__slider` che ci sta
dentro — e il riquadro di ritaglio cominciava a 22 invece che a 0. Misurato su
iPhone 15: **slider 22 → 393**, cioè 22 px di schermo a sinistra in cui una
card sparisce pur avendo ancora spazio.
Il rimedio ricompone la coppia **senza toccare il trascinamento e senza
cambiare le misure che Swiper legge**: margine negativo per portare il
riquadro a 0, riempimento uguale e contrario per lasciare il contenuto a 22.
Swiper sottrae il riempimento quando calcola la larghezza delle card, quindi
la card resta larga come prima — verificato, non dedotto.
⚠️ **A riposo non cambia niente**, e per questo vale a tutte le larghezze e
non solo su telefono: la differenza si vede solo mentre si trascina. */
.lb-lavori__pista .jet-listing-grid__slider {
margin-left: calc(-1 * var(--lb-margine));
padding-left: var(--lb-margine);
}
/* Il carosello di JetEngine deve sbordare a destra, come nel prototipo: le card
continuano oltre il bordo dello schermo invece di fermarsi al contenitore. */
.lb-carosello .jet-listing-grid__slider { overflow: visible; }
.lb-carosello .swiper { overflow: visible; }
/* 🔴 **L'offset delle griglie JetEngine, tolto in un posto solo invece che in
sei.** Richiesta di Fabrizio del 2026-08-26 dopo G4-07: *«allinea tutti i
margini»*.
`frontend.css` di JetEngine impagina ogni griglia con una coppia:
.jet-listing-grid__items { width: calc(100% + 20px); margin: 0 -10px; }
È il vecchio trucco delle gutter — si allarga di 20 e si riprendono 10 per
lato — e **le due righe vanno insieme o non funziona nessuna delle due**. Le
nostre regole per blocco ne hanno neutralizzata una alla volta, e il
censimento su otto pagine mostra che ne erano nate **due famiglie di guasto**:
margine tolto, larghezza no -> 20 px tutti a destra (era G4-07)
margine intatto, larghezza no -> 10 px fuori per lato, SIMMETRICI
⚠️ **La seconda famiglia è la più insidiosa: essendo simmetrica non sembra
rotta**, e infatti in tre giri di revisione nessuno l'ha segnalata. Si trova
solo misurando, ed è il motivo per cui Fabrizio ha chiesto un allineamento e
non una correzione.
**Una riga per tutte invece di una per blocco**, perché è esattamente la forma
della decisione 167: una neutralizzazione scritta a mano in più punti e
dimenticata in alcuni. Scritta qui, chi aggiunge domani una griglia nuova la
trova già allineata e non deve sapere niente di tutto questo.
Due scelte di forma, e nessuna delle due è cosmetica:
**① `.jet-listing-grid .jet-listing-grid__items` e non il selettore nudo.**
Il nudo sarebbe `(0,1,0)`, identico a quello di JetEngine, e vincerebbe solo
perché `tema.css` è servito dopo (indice 27 contro 4). Con l'involucro è
`(0,2,0)` e vince **per specificità** — trappola 2.
**② Sta qui in alto apposta.** Le due piste trascinabili dichiarano la propria
larghezza più giù nel foglio con la stessa specificità `(0,2,0)`:
`.lb-pezzi__pista` vuole `width: max-content` perché deve essere più larga
della finestra. **A parità di specificità vince chi viene dopo**, quindi
mettendo questa regola PRIMA le piste continuano a vincere e restano
trascinabili. Spostarla in fondo al foglio le romperebbe tutte e due. */
.jet-listing-grid .jet-listing-grid__items {
width: 100%;
margin-left: 0;
margin-right: 0;
}
.lb-carosello .jet-listing-grid__items { margin: 0; }
/* --- La pista continua dei progetti (decisione 152) -----------------------
Il prototipo (`#v4 .gtrack`) non usa un carosello: usa **una fila sola che
scorre da sola**, `display:flex; width:max-content`, mossa da JavaScript. Da
noi c'era il carosello di JetEngine, che va a scatti di una scheda — e
accanto c'era scritto «SCORRE DA SOLO · TRASCINA →», cioè il sito dichiarava
un comportamento che non aveva.
`overflow: hidden` sostituisce qui il `visible` di due righe più su, e vale
**solo** quando la pista è viva: serviva a Swiper, che teneva le schede
dentro con la sua matematica. Una fila larga `max-content` invece esce
davvero dal contenitore, e senza ritaglio si stenderebbe su tutta la pagina.
Il taglio cade esattamente sul bordo destro della finestra, perché la pista
parte da `--lb-margine` e il contenitore è largo il resto.
⚠️ Niente `cursor: grab`: su questo sito il puntatore è disegnato da noi, e
un cursore di sistema sopra quello dipinto se ne vedrebbero due. */
.lb-carosello .swiper.lb-vista-continua {
overflow: hidden;
/* **G3-03: perché la pista non si trascinava.** Il codice del trascinamento
c'era già; il gesto glielo rubava il browser. Le schede sono `` con
dentro una ` `. Un solo link vuol dire anche una sola fermata col Tab. */
.lb-card__vai { position: absolute; inset: 0; z-index: 2; }
/* **`width` e `border-radius` chiudono G2-10, e il difetto era letterale.**
Fabrizio: «in hover appare un overlay strano con un'ombra che taglia a metà
la foto». Misurato su `/lavori/`: il link del velo era **190×471 dentro una
foto di 379×473** — largo esattamente metà. Il gradiente è identico a quello
del prototipo (`transparent 45%` → `rgba(10,9,8,.75)`), quindi il difetto non
era nel colore: era che il velo copriva **mezza foto**, e il suo bordo dritto
in mezzo all'immagine si legge come un taglio.
L'` ` aveva `height: 100%` e nessuna larghezza: come elemento flex si
dimensionava sul contenuto, cioè sulla parola «Guarda il progetto».
`border-radius: inherit` è la seconda metà: il velo era a spigoli vivi
(`0px`) sopra una foto con angoli da 14px, e negli angoli sbordava.
**È la terza volta oggi che lo stesso difetto si presenta con tre facce
diverse:** un'immagine che non copre il riquadro, un velo che ne copre metà,
due frecce ovali. Ogni volta un elemento che non riceve una larghezza e se la
prende dal contenuto. Vale la pena cercarlo quando qualcosa «non copre». */
/* Il riquadro da riempire e' il wrapper di JetEngine, non solo il link: misurato
`.jet-listing.jet-listing-dynamic-link` a **190x471** dentro una foto di 379.
Portare al 100% solo l'` ` non serviva a niente — restava il 100% di 190.
`border-radius: inherit` scende in catena dalla foto fino al link. */
.lb-card__vai,
.lb-card__vai .jet-listing-dynamic-link,
.lb-card__vai .elementor-widget-container {
width: 100%; height: 100%; border-radius: inherit;
}
.lb-card__vai .jet-listing-dynamic-link__link {
display: flex;
align-items: flex-end;
width: 100%;
height: 100%;
border-radius: inherit;
padding: 16px;
background: linear-gradient(transparent 45%, rgba(10, 9, 8, .75));
opacity: 0;
transition: opacity .45s ease;
font-size: .66rem;
text-transform: uppercase;
letter-spacing: .14em;
color: #fff;
}
.lb-card:hover .lb-card__vai .jet-listing-dynamic-link__link,
.lb-card__vai .jet-listing-dynamic-link__link:focus-visible { opacity: 1; }
.lb-card__vai .jet-listing-dynamic-link__label { transform: translateY(8px); transition: transform .45s ease; }
.lb-card:hover .lb-card__vai .jet-listing-dynamic-link__label,
.lb-card__vai .jet-listing-dynamic-link__link:focus-visible .jet-listing-dynamic-link__label { transform: none; }
.lb-card__vai .jet-listing-dynamic-link__label::after { content: "→"; color: var(--lb-arancio); margin-left: 8px; }
.lb-card__meta {
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid var(--lb-filo);
transition: border-color .3s ease;
}
.lb-card:hover .lb-card__meta { border-color: color-mix(in srgb, var(--lb-arancio) 55%, var(--lb-filo)); }
/* **`:is(h1…h6)` e non `h3`: la tipografia non deve dipendere dal livello del
titolo.** `dev-wp` deve correggere otto salti `h1`→`h3` girando i tag, e con
un selettore che nomina `h3` la regola smetterebbe di agganciare nel momento
esatto in cui il tag cambia — misurato dal suo tentativo di stamattina, poi
annullato. `:is()` prende la specificità del suo argomento più alto: qui sono
tutti selettori di tipo, quindi il peso resta **identico a `h3`** e nessun
equilibrio della cascata si sposta. È l'unica ragione per cui si può fare
adesso senza rimisurare tutto.
Vale per le tre regole marcate così in questo foglio. **Non** per
`.lb-ss-mat__titolo h3`: promuovendo il dittico a `h2`, gli `h3` dei
materiali si trovano sotto un `h2` e il salto sparisce da sé — girarli
sarebbe lavoro che si disfa da solo. */
.lb-card__titolo .jet-listing-dynamic-field__content,
.lb-card__titolo :is(h1, h2, h3, h4, h5, h6) {
font-family: var(--lb-regular);
font-weight: 700; text-transform: uppercase; letter-spacing: -.01em;
color: var(--lb-titolo); font-size: 1.02rem; line-height: 1.04; margin: 0;
/* Il content model consiglia titoli entro 34 caratteri e dice che oltre si
tronca a due righe: qui succede, invece di spingere i tag fuori dalla card. */
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lb-card__tag { margin-top: 11px; }
/* **Una pillola per termine, e la pillola sta sul termine, non sul contenitore.**
Corretto da `dev-lavori`: prima la stessa regola vestiva sia
`.jet-listing-dynamic-terms` (l'involucro) sia `__link` (il singolo termine).
Con un termine solo — il caso della home — non si vedeva; nella griglia
Lavori, dove i termini sono due o tre, diventava una pillola grande con due
pilloline dentro e una virgola in mezzo. */
.lb-tag .jet-listing-dynamic-terms {
display: flex; flex-wrap: wrap; gap: 6px;
border: 0; padding: 0;
}
.lb-tag .jet-listing-dynamic-terms__link {
font-size: .55rem; text-transform: uppercase; letter-spacing: .12em;
color: var(--lb-tenue);
border: 1px solid var(--lb-filo);
padding: 4px 9px; border-radius: 0; white-space: nowrap;
display: inline-block;
}
/* La virgola che JetEngine mette fra un termine e l'altro: qui i termini sono
pillole affiancate, il separatore lo fa lo spazio. */
.lb-tag .jet-listing-dynamic-terms__delimiter { display: none; }
.lb-tag--settore .jet-listing-dynamic-terms__link {
color: var(--lb-arancio);
border-color: color-mix(in srgb, var(--lb-arancio) 42%, transparent);
}
/* Nella variante piena si vedono settore e tutte le tipologie; la versione a un
termine solo serve alla home. Vedi il commento in costruisci-listing.php: il
numero di termini è un'impostazione del widget, non una proprietà CSS. */
.lb-tag--tipologia-una { display: none; }
/* --- G6-E1: le etichette nella griglia Lavori (decisione 280) ---------------
Con i nomi nuovi delle tipologie («Allestimento visivo degli spazi», «Packaging &
Cartotecnica») una card portava 1, 2 o 3 righe di pillole, e il blocco dei tag era ancorato
in fondo alla card mentre il titolo stava in cima: nella stessa fila titolo ed etichette
finivano ad altezze diverse (52 card su 170 misurate, anteprima `etichette-b.css`).
Tre mosse:
1. la meta si impila dall'alto con un passo fisso, così la distanza titolo → etichette è la
stessa su ogni card (quattro classi per battere il `--gap` che Elementor scrive a (0,3,0));
2. il settore esce dalle pillole e diventa una riga di testo arancione, la stessa voce delle
sezioni «Progetti di …» delle schede servizio;
3. le tipologie restano pillole ma compatte, così due nomi lunghi stanno su una riga anche a
1024, dove la card è larga 300 px. Sotto i 560 vale la regola a colonna singola più giù. */
.lb-lv-griglia .e-con.elementor-element.lb-card__meta {
/* G6-E2 (decisione 281): le righe della griglia erano tutte alte uguali, quindi la riga del
titolo (17 px) prendeva l'altezza del blocco tag (42): 25 px vuoti + 10 di passo = 35 fra
titolo ed etichette. Righe alte quanto il contenuto e passo di 8 px. */
grid-auto-rows: auto; grid-template-rows: none;
align-content: start;
--gap: 8px 8px; --row-gap: 8px; --column-gap: 8px;
}
.lb-lv-griglia .lb-card__titolo { align-self: start; }
.lb-lv-griglia .lb-card__tag { margin-top: 0; min-height: 42px; }
.lb-lv-griglia .lb-tag--settore { flex: 0 0 100%; width: 100%; }
.lb-lv-griglia .lb-tag--settore .jet-listing-dynamic-terms__link {
border: 0; padding: 0;
font-size: .6rem; letter-spacing: .16em;
color: var(--lb-arancio);
}
.lb-lv-griglia .lb-tag--tipologia .jet-listing-dynamic-terms { gap: 5px; }
.lb-lv-griglia .lb-tag--tipologia .jet-listing-dynamic-terms__link {
font-size: .52rem; letter-spacing: .03em;
padding: 3px 6px; white-space: nowrap;
}
/* La variante si applica dal contenitore, non dalla card: la card è un Listing
condiviso e non può portare classi diverse a seconda di dove viene inserita. */
/* --- Variante compatta: la galleria della home ---
Nel prototipo (`.gcard`) la card ha angoli più morbidi, niente bordo, niente
velo, e la meta è una riga sola con nome a sinistra e categoria a destra. */
.lb-card-compatta-dentro .lb-card__foto { border-radius: 0; border: none; background: none; }
.lb-card-compatta-dentro .lb-card__vai { display: none; }
/* **`display` esplicito, ed è la correzione del difetto 1 della revisione di
resa** (decisione 133): l'altra faccia dello stesso interruttore che rompeva
il processo di Servizi, vista da sopra il confine dei 768 px.
La meta è un Container di Elementor e non dichiarava il proprio `display`:
restava flex, e da 768 px in su `flex-wrap` torna `nowrap`. Il titolo è un
widget JetEngine la cui catena interna è `display:inline` — non ha nessuna
larghezza intrinseca su cui ripiegare — quindi come elemento flex in una riga
che deve stare dentro si stringeva a **zero**: misurato 0×48 dentro un
genitore di 349 px, 20 titoli su 20 a 768, 1024 e 1440. Il nome del progetto
era nel DOM e non veniva dipinto. Sotto i 768 il `wrap` lo mandava a capo e
se ne salvavano 9 su 18: rotto in due modi diversi, non funzionante a metà.
Una griglia toglie la domanda invece di rispondere: `minmax(0, 1fr)` dà al
titolo una traccia che **non può scendere sotto la sua riga**, e `auto` dà
alla pillola esattamente quello che le serve. `space-between` non serve più —
lo fa la traccia `1fr` — ed è per questo che sparisce da qui.
Resa identica al prototipo (`#v4 .gcard .meta`, `lion-brand-home.html:116`):
nome a sinistra, categoria a destra, allineati sulla linea di base. */
.lb-card-compatta-dentro .lb-card__meta {
margin-top: 18px; padding-top: 0; border-top: none;
display: grid; grid-template-columns: minmax(0, 1fr) auto;
align-items: baseline; gap: 14px;
}
/* **Questa è la riga che rompeva la home, ed è il motivo per cui i tag non si
girano da soli.** Il titolo della scheda vive in **un Listing solo**, usato
da `/lavori/` e dal carosello della home. Su Lavori il cambio di tag
sopravvive perché lassù c'è anche un selettore per classe; qui la variante
compatta era scritta **solo sul tag**, quindi girando l'`h3` la home perdeva
14 px di corpo — misurato — mentre Lavori restava a posto. Un difetto che si
manifesta su una pagina sola è il modo più caro di sbagliare. Vedi la nota
su `:is()` più sopra. */
.lb-card-compatta-dentro .lb-card__titolo :is(h1, h2, h3, h4, h5, h6) {
font-family: var(--lb-regular); font-weight: 400; text-transform: none;
letter-spacing: .02em; font-size: 1.15rem; line-height: 1.3;
}
.lb-card-compatta-dentro .lb-card__tag { margin-top: 0; flex: 0 0 auto; }
.lb-card-compatta-dentro .lb-tag--settore,
.lb-card-compatta-dentro .lb-tag--tipologia { display: none; }
.lb-card-compatta-dentro .lb-tag--tipologia-una { display: block; }
.lb-card-compatta-dentro .lb-tag .jet-listing-dynamic-terms__link {
border: none; padding: 0; font-size: .64rem; letter-spacing: .16em;
color: var(--lb-arancio);
}
/* G6-E1 (decisione 280): sotto i 600 px la tipologia lunga sulla riga del titolo lo stringeva
su due righe e la card cresceva di 48 px (515 → 563 a 390). Qui la meta diventa una colonna:
titolo, poi tipologia sotto, a sinistra. Da 600 in su resta la riga del prototipo. Media query
del tema (ne usa già a 560 e 600), non breakpoint di Elementor. */
@media (max-width: 600px) {
.lb-card-compatta-dentro .lb-card__meta { grid-template-columns: minmax(0, 1fr); gap: 6px; align-items: start; }
.lb-card-compatta-dentro .lb-card__tag { justify-self: start; }
.lb-card-compatta-dentro .lb-tag .jet-listing-dynamic-terms__link { white-space: nowrap; }
}
/* --- Servizi ------------------------------------------------------------ */
.lb-servizi__elenco { margin-top: 52px; border-top: 1px solid var(--lb-filo); }
.lb-servizio {
padding: 30px 6px;
border-bottom: 1px solid var(--lb-filo);
transition: padding-left .35s ease, background .35s ease;
}
/* Hover e freccia solo dove la riga è un link (`a`, contenitore Elementor con link): dal
giro 7 le righe della home sono un elenco, e un hover su una cosa che non si clicca mente. */
a.lb-servizio:hover { padding-left: 22px; background: var(--lb-superficie); }
.lb-servizio__numero {
width: 64px; flex: 0 0 64px;
}
.lb-servizio__numero .elementor-heading-title {
color: var(--lb-arancio); font-size: .8rem; font-variant-numeric: tabular-nums; margin: 0;
}
.lb-servizio__nome { flex: 1 1 auto; }
.lb-servizio__nome .elementor-heading-title {
/* Giro 6: ExtraWide (decisione 276). Era Regular, .02em, clamp(1.4rem, 3.2vw, 2.4rem), interlinea 1. */
font-family: var(--lb-titolo-famiglia); font-weight: 700; text-transform: uppercase;
letter-spacing: -.01em; color: var(--lb-titolo);
font-size: clamp(1.15rem, 2.5vw, 1.9rem); line-height: 1.05; margin: 0;
}
.lb-servizio__descrizione { flex: 0 1 40ch; }
.elementor-widget-text-editor.lb-servizio__descrizione p,
.lb-servizio__descrizione p {
color: var(--lb-tenue); font-size: .9rem; text-align: right; margin: 0;
}
/* G6-F1 (giro 5, G5-01): era `max-width: 760px`, ma Elementor passa al layout mobile a 767.
Fra 761 e 767 la riga dei servizi usava le regole di una larghezza e il contenitore quelle
dell'altra, e raddoppiava d'altezza. Le tre soglie a 760 di questo file diventano 767. */
@media (max-width: 767px) { .lb-servizio__descrizione { display: none; } }
/* Giro 6 (decisione 276): con i nomi nuovi in ExtraWide, «Allestimento visivo degli spazi» non
sta accanto alla descrizione nemmeno a 1440. Sopra i 767 la descrizione scende sotto il nome,
allineata al suo inizio (88 = numero 64 + spazio 24), com'era già il disegno sotto i 760.
La freccia dell'hover è un elemento flex (`::after`): con `order` resta sulla riga del nome
invece di finire da sola in fondo. Sotto i 767 non cambia niente: vale G4-02 qui sotto. */
@media (min-width: 768px) {
.lb-servizi__elenco .e-con.elementor-element.lb-servizio {
--flex-wrap: wrap;
--row-gap: 10px;
}
.lb-servizio__nome { flex: 1 1 calc(100% - 64px - 26px - 48px); order: 0; }
.lb-servizio::after { order: 1; }
.lb-servizio__descrizione { flex: 0 0 100%; order: 2; padding-left: 88px; }
.elementor-widget-text-editor.lb-servizio__descrizione p,
.lb-servizio__descrizione p { text-align: left; max-width: 56ch; }
}
/* **G4-02: due titoli di servizio su sei finivano su una seconda riga, e non
perché il testo andasse a capo.** Fabrizio, da telefono: «alcuni servizi vanno
su due righe, proviamo a ridurre lo spazio del titolo dai numeri. se ancora
non si riesce a mettere su una sola riga, ridurre eccezionalmente il corpo del
carattere».
⚠️ **Il testo non andava a capo: andava a capo la riga.** Misurato con un
`Range` sui titoli, ciascuno occupava **una sola riga di testo**; a scendere
era il riquadro `.lb-servizio__nome` intero, che il contenitore Elementor
mandava sotto al numero perché è `flex-wrap: wrap`. Guardando l'altezza del
titolo non si vedeva niente — si vede solo guardando **da dove comincia**:
x=116 quando sta in riga, x=28 quando è sceso.
Nel prototipo non può succedere: `.srv-row` è una **griglia**
`64px 1fr auto 26px`, e sotto i 760 diventa `44px 1fr 22px`
(`lion-brand-home.html:124` e `:132`). Una colonna `1fr` non scende mai: al
massimo manda a capo il proprio testo. Da noi la griglia è diventata un flex
che va a capo, **e la stretta del numero a 44px sotto i 760 non era stata
portata**.
Il conto dello spazio, misurato e non stimato. La riga contiene numero,
titolo, descrizione (nascosta sotto i 760) e la freccia `::after` da 26px,
quindi lo spazio del titolo è
`riga − 12 di riempimento − numero − 2 spazi − 26 di freccia`:
PRIMA numero 64, spazio 24 iPhone 15 199 iPhone 12 Mini 181
DOPO numero 44, spazio 14 iPhone 15 239 iPhone 12 Mini 221
**Il primo passo che Fabrizio ha chiesto non basta, e si dimostra con
l'aritmetica invece che con un tentativo.** Il titolo più lungo,
«PROGETTAZIONE GRAFICA», misura **298 px a 22,4** — cioè **13,30 px di
larghezza per ogni px di corpo**. Anche portando lo spazio a zero e il numero
a 44, sull'iPhone 12 Mini restano 249 px: **48 in meno del necessario.**
Quindi si scende di corpo, ed è **l'eccezione che ha autorizzato lui**.
Il vincolo stringente è il Mini: `13,30 × corpo ≤ 221` dà **corpo ≤ 16,6 px**.
`clamp(.95rem, 4.2vw, 1.4rem)` sta sotto quel tetto dove serve e **risale da
sé a 22,4** — il valore di prima — da 533 px di larghezza in su, quindi il
desktop non cambia di un pixel.
⚠️ **Sotto i 360 px il titolo lungo torna a spezzarsi in due righe di testo**,
e va bene così: con `--flex-wrap: nowrap` si spezza **dentro la sua colonna**,
restando accanto al proprio numero. È il modo in cui degrada il prototipo, ed
è anche la rete se il cliente rinomina un servizio con qualcosa di più lungo.
Sul contenitore si **definiscono le variabili** invece di combattere la regola
(trappola 4): Elementor dichiara `gap: var(--row-gap) var(--column-gap)` e
`flex-wrap: var(--flex-wrap)`, e il valore vive in `--gap: 24px 24px` scritto
da `post-59.css` su `.elementor-element-lbsrv1`, che è **(0,3,0)**. Per batterlo
serve un gradino vero, non l'ordine dei fogli: da qui le quattro classi.
⚠️ **E `--gap` da solo non basta: non è la variabile che `gap` legge.** Scritta
quella e misurata, lo spazio calcolato restava **24 px**. La catena è
`gap: var(--row-gap) var(--column-gap)`, e `--gap` sta un anello più in su:
chi ridefinisce solo il capostipite non tocca i due anelli che contano. Si
scrivono tutt'e tre — `--gap` per coerenza con quello che Elementor mostra in
bacheca, `--row-gap` e `--column-gap` perché sono quelli che agiscono. */
@media (max-width: 767px) {
.lb-servizi__elenco .e-con.elementor-element.lb-servizio {
--gap: 14px 14px;
--row-gap: 14px;
--column-gap: 14px;
--flex-wrap: nowrap;
}
.lb-servizio__numero { width: 44px; flex: 0 0 44px; }
.lb-servizio__nome .elementor-heading-title { font-size: clamp(.85rem, 3.6vw, 1.15rem); }
}
/* **G3-04: la freccia in hover che mancava.** Segnalazione di Fabrizio del
2026-08-26 — *«non appare la freccia come nel prototipo in hover. Vedi come
funziona la voce in hover del servizio Packaging. Quella è la versione
corretta»*. Aperta e misurata: nel prototipo `.srv-row` è una griglia
`64px 1fr auto 26px` e la quarta colonna è `→ `,
arancione, `opacity:0` e `translateX(-8px)` a riposo, `opacity:1` e nessuna
traslazione in hover. Da noi quella colonna **non esisteva**: misurato
`content: none` sullo `::after` di `.lb-servizio`, cioè nessun elemento.
**Pseudo-elemento e non widget**, per due ragioni: la riga è già un ` ` e
un widget in più sarebbe una quinta cosa che il cliente può cancellare per
sbaglio; e la freccia non è contenuto, è la stessa affordance che il tema
disegna con `content: "→"` in altri sei punti.
Le misure vengono dal prototipo, non dal gusto: larghezza 26px, corpo
1,2rem, `translateX(-8px)`, transizione .3s. In hover la punta cade a
**x=1531** nel prototipo. */
.lb-servizio::after {
content: "→";
flex: 0 0 26px;
align-self: center;
text-align: right;
color: var(--lb-arancio);
font-size: 1.2rem; line-height: 1;
opacity: 0;
transform: translateX(-8px);
transition: opacity .3s ease, transform .3s ease;
}
a.lb-servizio:hover::after,
a.lb-servizio:focus-visible::after { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.lb-servizio::after { transition: opacity .2s ease; transform: none; }
}
/* --- Footer -------------------------------------------------------------
Le misure vengono da `site.css` del prototipo (`.foot` e discendenti). Il
footer non ha padding proprio: ha un margine sopra e una spaziatura interna
sul blocco, ed è quella differenza che teneva la sezione 300px più alta. */
.lb-foot {
position: relative;
overflow: hidden;
padding-block: 0;
margin-top: clamp(60px, 9vw, 120px);
background: linear-gradient(180deg, var(--lb-fondo), var(--lb-superficie));
}
/* La spaziatura interna del footer, e perché il selettore che c'era prima non
agganciava niente.
`.lb-foot` è un Container **`e-con-full`**: un `.e-con-inner` ce l'hanno solo
i Container «boxed». La regola precedente — `.lb-foot > .e-con-inner >
*:first-child` — cadeva nel vuoto, e il footer partiva incollato al blocco
sopra e finiva incollato al bordo della pagina. **116px persi su ogni
pagina** (72 sopra, 44 sotto). Trovato da `dev-servizi` misurando il footer
sulla *sua* pagina: seconda volta che un difetto del footer condiviso lo
trova chi lavora su un'altra pagina.
Perché 72/44 e non zero, visto che in cinque prototipi su otto il footer non
ha spaziatura: `site.css` la dichiara nel footer stesso
(`.site .foot .wrap{padding-top:clamp(46px,6vw,72px);padding-bottom:44px}`),
e le pagine che la perdono la perdono **per effetto collaterale** — scrivono
`#id .wrap{padding: 0 clamp(22px,4vw,54px)}` per dare il margine laterale al
proprio contenuto, e con la scorciatoia `padding` azzerano anche il verticale
di un blocco che non stavano guardando. Nessuno ha deciso che il footer della
home non debba respirare sopra: è semplicemente successo (decisione 33).
Qui il footer è **un template solo** e ha una spaziatura sola, che è quella
che il footer dichiara per sé. */
.lb-foot > *:first-child { padding-top: clamp(46px, 6vw, 72px); }
.lb-foot > *:last-child { padding-bottom: 44px; }
.lb-foot__cta { text-align: center; }
.lb-foot__cta .lb-eyebrow .elementor-heading-title {
/* Nel footer l'etichetta è centrata e senza il filo davanti: la riga
orizzontale funziona a inizio riga, non in mezzo a un blocco centrato. */
display: block; letter-spacing: .3em; font-size: .62rem; margin-bottom: 14px;
}
.lb-foot__cta .lb-eyebrow .elementor-heading-title::before { display: none; }
/* Il prefisso `.elementor-widget-heading` sulla famiglia, e stavolta si vedeva
solo su una pagina. `.lb-titolo-cta .elementor-heading-title` ha la stessa
specificità di `.elementor-widget-heading .elementor-heading-title`, che
Elementor stampa **dentro la pagina** con la tipografia del kit: vince chi
arriva dopo, e su `/servizi/` quel blocco viene stampato una terza volta
**dopo** `tema.css`. Risultato: il titolo della CTA del footer in ExtraWide,
`max-width: 20ch` che diventa 606px invece di 337, e il titolo su cinque
righe invece di tre — 57px di footer in più su quella pagina sola.
Quarta occorrenza della stessa famiglia su questo progetto. */
.elementor-widget-heading.lb-titolo-cta .elementor-heading-title,
.lb-titolo-cta .elementor-heading-title { font-family: var(--lb-titolo-famiglia); }
.lb-foot__cta .lb-titolo-cta .elementor-heading-title {
/* Giro 6: era clamp(1.7rem, 4.4vw, 3rem) in Regular. */
font-size: clamp(1.45rem, 3.5vw, 2.4rem);
line-height: 1.05;
letter-spacing: -.01em;
max-width: 20ch;
margin: 0 auto;
}
.lb-foot__cta .lb-cta { margin-top: 24px; }
.lb-foot__griglia {
/* 80px, non i 72 di site.css: la home lo sovrascrive nel suo blocco di stile. */
margin-top: 80px; padding-top: 44px; border-top: 1px solid var(--lb-filo);
gap: 40px;
}
.lb-foot__identita { flex: 1.3 1 0; }
.lb-foot__link { flex: 1 1 0; gap: 56px; }
/* Tablet (768-1024): le due colonne di link vanno una sotto l'altra e la colonna
di destra diventa alta ~720px; con l'allineamento centrale ereditato il logo
restava a meta' altezza con un vuoto sopra. Identita' in alto, solo in questa
fascia: a 1440 il desktop e' approvato, sotto 768 la griglia e' gia' in colonna.
`--align-self` definita oltre a `align-self`, perche' Elementor dichiara
`align-self: var(--align-self)` sui container figli. */
@media (min-width: 768px) and (max-width: 1024px) {
.lb-foot__griglia > .e-con-inner > .lb-foot__identita {
--align-self: flex-start;
align-self: flex-start;
}
}
.elementor-widget-text-editor.lb-foot__descrizione p,
.lb-foot__descrizione p { color: var(--lb-tenue); font-size: .95rem; max-width: 38ch; margin: 18px 0 0; }
.lb-foot__descrizione b { color: var(--lb-titolo); font-weight: 600; }
/* **Il Kit di Elementor batte il tema sui titoli, e solo su certe pagine.**
Il Kit emette in **ogni** `post-*.css`:
.elementor-widget-heading .elementor-heading-title { color: … } (0,2,0)
Il tema dichiara `.lb-qualcosa .elementor-heading-title`, che è **la stessa
specificità**. A parità decide l'ordine di caricamento, e l'ordine cambia da
pagina a pagina: sulle pagine servite da un template **Single** il `post-*.css`
arriva **dopo** il tema e vince lui.
**Censito il 2026-08-25**, misurando le pagine invece di dedurre dall'ordine:
**13 regole `.lb-*` a (0,2,0)** che colorano un `.elementor-heading-title`,
tutte in questo foglio — in `pagine.css` zero, lì sono già tutte a (0,3,0).
Di quelle 13, **due perdono davvero**, e sono le due qui alzate:
.lb-foot__titolo arancione invece di crema su /servizi/ e su ogni
scheda servizio o progetto (2 elementi per pagina)
[class*="-hero__cue"] arancione invece di bianco al 60% su
/progetto/splendide-royal/
Le altre 11 reggono **solo perché su quelle pagine non ci sono**. Non sono
state alzate di proposito: alzarle tutte sarebbe debito su un problema che
oggi non esiste. **Quando una finisce su una pagina Single, si alza allora** —
e il sintomo da cercare è sempre lo stesso: un titolo del tema che diventa
arancione. Lo `scorri` è arrivato lì il giorno dopo il censimento.
Come si alza: si aggiunge `.elementor-widget-heading` davanti, perché la
classe del tema sta **sul widget**, non su un contenitore intermedio. Da
(0,2,0) a (0,3,0), che è quanto basta: niente `!important`. */
.elementor-widget-heading.lb-foot__titolo .elementor-heading-title,
.lb-foot__titolo .elementor-heading-title {
font-family: var(--lb-extrawide); font-weight: 700; text-transform: uppercase;
letter-spacing: .16em; font-size: .62rem; color: var(--lb-titolo); margin: 0;
}
.lb-foot__elenco .elementor-icon-list-items { margin: 0; }
.lb-foot__elenco .elementor-icon-list-item { margin-top: 10px; }
.lb-foot__elenco .elementor-icon-list-text { color: var(--lb-tenue); font-size: .9rem; }
.lb-foot__elenco .elementor-icon-list-item a:hover .elementor-icon-list-text { color: var(--lb-titolo); }
/* I selettori portano davanti `.elementor-widget-text-editor` per la stessa
ragione dei pulsanti: Elementor stampa la tipografia «Testo» del kit sul
widget con la nostra stessa specificità e dopo di noi. Senza il prefisso questi
due blocchi restano a 16px invece che a 12, e in fondo alla pagina si vede. */
.lb-foot__coda { margin-top: 48px; }
.elementor-widget-text-editor.lb-foot__coda p,
.lb-foot__coda p { color: var(--lb-tenue); font-size: .76rem; margin: 0; }
/* `line-height:0` sul contenitore del widget, non sul testo: il div che
Elementor mette attorno al paragrafo eredita l'interlinea del corpo (16×1.55)
e diventa più alto del testo che contiene. È lo stesso motivo per cui
l'etichetta arancione è `display:flex` invece che `inline-flex`. */
.lb-foot__firma {
margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--lb-filo);
line-height: 0;
}
.lb-foot__coda { line-height: 0; }
.lb-foot__coda p, .lb-foot__firma p { line-height: 1.55; }
.elementor-widget-text-editor.lb-foot__firma p,
.lb-foot__firma p { color: var(--lb-tenue); font-size: .72rem; letter-spacing: .04em; margin: 0; }
.lb-foot__firma b { color: var(--lb-titolo); font-weight: 700; }
.lb-cuore { color: var(--lb-arancio); }
@media (max-width: 900px) {
.lb-foot__griglia { flex-direction: column; }
.lb-foot__link { flex-wrap: wrap; }
}
/* --- Intro loader (solo home) ---------------------------------------------
L'animazione sta QUI e non nel JavaScript, di proposito: il pannello copre
tutto lo schermo, e se la sua chiusura dipendesse da uno script che non parte
la home tornerebbe a essere un rettangolo nero. È già successo una volta.
Il JavaScript aggiunge solo il contatore percentuale, che è un di più. */
.lb-intro {
position: fixed;
inset: 0;
z-index: 1200;
background: var(--lb-fondo);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 26px;
animation: lb-intro-esce .8s cubic-bezier(.76, 0, .24, 1) 1.38s forwards;
}
@keyframes lb-intro-esce {
to { transform: translateY(-100%); visibility: hidden; }
}
.lb-intro__logo { height: clamp(44px, 8vw, 68px); width: auto; display: block; }
.lb-intro__barra {
width: min(300px, 60vw);
height: 1px;
background: var(--lb-filo);
position: relative;
overflow: hidden;
}
.lb-intro__barra i {
position: absolute;
inset-block: 0;
left: 0;
width: 0;
background: var(--lb-arancio);
animation: lb-intro-barra 1.2s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes lb-intro-barra { to { width: 100%; } }
.lb-intro__pct {
font-size: .7rem;
letter-spacing: .2em;
color: var(--lb-tenue);
font-variant-numeric: tabular-nums;
}
/* --- Payoff «Creative Factory» animato (giro 9) -----------------------------
L'animazione «Lettere che saltano» scelta da Fabrizio sull'anteprima del
giro 7: le lettere compaiono, poi un'onda di piccoli salti da sinistra a
destra con ritorno elastico. Solo opacità e pochi pixel di spostamento.
Nel pannello d'intro parte da sola e finisce (~1,26 s) prima che il pannello
salga (1,38 s). In pagina la fa partire lo script quando il payoff entra
nello schermo: fino ad allora `--attesa` tiene le lettere spente, e senza
script nessuna delle due classi arriva e il payoff resta fermo e visibile.
In pagina la comparsa avviene UNA volta; poi si ripete solo l'onda, ogni 3 s
(Fabrizio: «in loop solo il movimento, senza che riparta da zero»). */
.lb-payoff { --lb-logo: #e95c0c; display: block; }
.lb-payoff__svg { display: block; width: 100%; height: auto; overflow: visible; }
.lb-payoff__svg path, .lb-payoff__svg polygon { fill: var(--lb-logo); }
.lb-payoff__svg .lt, .lb-payoff__svg .testa { transform-box: fill-box; transform-origin: center; }
.lb-payoff--attesa .lt, .lb-payoff--attesa .testa { opacity: 0; }
.lb-payoff--intro .lt {
animation: lb-salta-entra 240ms ease-out backwards, lb-salta-onda 360ms ease-out backwards;
animation-delay: calc(var(--i) * 22ms), calc(520ms + var(--i) * 24ms);
}
.lb-payoff--salta .lt {
animation: lb-salta-entra 240ms ease-out backwards, lb-salta-onda-ciclo 3s linear infinite backwards;
animation-delay: calc(var(--i) * 22ms), calc(520ms + var(--i) * 24ms);
}
/* `--onda` (hero della home): sempre visibile, solo il salto ogni 3 s. Il primo
parte a 2,25 s, appena il pannello d'intro ha finito di salire (1,38 s + 0,8 s):
prima era a 1,4 s e cadeva mentre il pannello copriva ancora la hero. */
.lb-payoff--onda .lt {
animation: lb-salta-onda-ciclo 3s linear infinite backwards;
animation-delay: calc(2250ms + var(--i) * 24ms);
}
.lb-payoff--intro .testa, .lb-payoff--salta .testa { animation: lb-salta-entra 300ms ease-out 300ms backwards; }
@keyframes lb-salta-entra { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes lb-salta-onda {
0% { transform: none; }
35% { transform: translateY(-8px); }
62% { transform: translateY(1.6px); }
82% { transform: translateY(-.6px); }
100% { transform: none; }
}
/* Lo stesso salto dentro un periodo di 3 s (7 s fino al 13/10, poi 4 s): l'onda occupa il primo 12% (360 ms), poi quiete.
Le percentuali dipendono dal periodo: se lo si cambia, vanno ricalcolate (ms del salto / periodo). */
@keyframes lb-salta-onda-ciclo {
0% { transform: none; animation-timing-function: ease-out; }
4.2% { transform: translateY(-8px); animation-timing-function: ease-in-out; }
7.43% { transform: translateY(1.6px); animation-timing-function: ease-in-out; }
9.83% { transform: translateY(-.6px); animation-timing-function: ease-in-out; }
12% { transform: none; }
100% { transform: none; }
}
}
}
.lb-intro .lb-payoff { width: min(78vw, 440px); }
/* Nelle hero di Chi siamo e Metodo (decisione 309) prende il posto dell'occhiello
«… · Creative Factory». Lì non c'è il pannello d'intro: compare all'apertura
della pagina e poi ripete l'onda, come nel footer. */
.lb-hero-interna__payoff.elementor-widget { width: clamp(230px, 25vw, 360px); margin: 0 0 clamp(12px, 1.4vw, 20px); }
/* Nella hero prende il posto dell'occhiello «Creative Factory»: stessa riga,
largo quanto basta a leggersi senza contendere la scena al titolo. */
.lb-hero__fold .lb-hero__payoff.elementor-widget { width: clamp(250px, 29vw, 400px); margin: 0 0 clamp(14px, 1.6vw, 22px); }
/* In cima al footer, sopra «Iniziamo», su tutte le pagine: piccolo, centrato.
Fa branding prima della chiamata all'azione, senza contenderle la scena. */
/* Doppia classe: la regola di Elementor sul margine dei widget è più specifica
di una classe sola e azzerava lo spazio (misurato: payoff attaccato a «Iniziamo»). */
.lb-foot__cta .lb-foot__payoff.elementor-widget { width: min(340px, 70vw); margin: 0 auto clamp(36px, 5vw, 56px); }
@media (prefers-reduced-motion: reduce) {
.lb-payoff .lt, .lb-payoff .testa { animation: none !important; opacity: 1 !important; }
}
/* --- Cursore personalizzato ------------------------------------------------
Il cursore di sistema sparisce solo dove ha senso: su un dispositivo a tocco
non c'è un puntatore da sostituire, e nasconderlo lascerebbe l'utente senza
niente. La protezione c'era già nel prototipo e resta.
Nasconderlo è comunque una scelta con un costo: chi naviga da tastiera non
vede il puntatore ma deve vedere dove sta. Per questo il focus visibile
(in fondo a questo foglio) non è una rifinitura ma la contropartita. */
@media (pointer: fine) {
body.lb-cursore-custom,
body.lb-cursore-custom a,
body.lb-cursore-custom button,
body.lb-cursore-custom [role="button"] { cursor: none; }
}
.lb-cursore { position: fixed; top: 0; left: 0; z-index: 1100; pointer-events: none; }
.lb-cursore__punto {
position: absolute; width: 7px; height: 7px; margin: -3.5px;
border-radius: 50%; background: var(--lb-arancio); transition: opacity .2s;
}
.lb-cursore__anello {
position: absolute; width: 40px; height: 40px; margin: -20px;
border-radius: 50%; border: 1px solid var(--lb-arancio);
display: flex; align-items: center; justify-content: center;
transition: width .22s, height .22s, margin .22s, background .22s, border-color .22s;
}
.lb-cursore__etichetta {
font-family: var(--lb-extrawide);
font-size: .55rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .06em; color: var(--lb-su-arancio);
opacity: 0; max-width: 70px; text-align: center; line-height: 1.02;
transition: opacity .2s;
}
.lb-cursore--sopra .lb-cursore__anello { width: 54px; height: 54px; margin: -27px; }
.lb-cursore--sopra .lb-cursore__punto { opacity: 0; }
.lb-cursore--etichettato .lb-cursore__anello {
width: 84px; height: 84px; margin: -42px;
background: var(--lb-arancio); border-color: var(--lb-arancio);
}
.lb-cursore--etichettato .lb-cursore__etichetta { opacity: 1; }
@media (pointer: coarse) { .lb-cursore { display: none; } }
/* --- Grana da stampa ----------------------------------------------------
Una texture fissa sopra tutta la pagina. Non è decorazione gratuita: è quello
che dà al fondo nero l'aspetto di carta stampata invece che di schermo spento.
La inserisce comportamenti.js una volta sola, fuori dal contenuto. */
.lb-grana {
position: fixed; inset: 0; z-index: 600; pointer-events: none;
opacity: .05; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8, in render: vedi lb_evidenzia(). */
.lb-lead em { color: var(--lb-arancio); font-style: normal; }
.lb-kick p { color: var(--lb-tenue); font-size: 1.05rem; max-width: 52ch; margin-top: 24px; }
/* --- Immagine a tutta larghezza --- */
.lb-bleed { padding: 0; position: relative; }
.lb-bleed img { width: 100%; height: clamp(60vh, 80vh, 860px); object-fit: cover; display: block; }
.lb-bleed::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, rgba(10,9,8,.25), transparent 30%, transparent 70%, rgba(10,9,8,.5));
}
/* --- Split testo/immagine: la classe più riusata del sito --- */
.lb-split__testo { flex: 1 1 0; }
.lb-split__cornice {
flex: 1 1 0; aspect-ratio: 4/5; border-radius: 0; overflow: hidden;
border: 1px solid var(--lb-filo); padding: 0;
}
.lb-split__cornice img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.lb-split__cornice:hover img { transform: scale(1.05); }
.lb-split .lb-titolo-sezione h2 {
/* Giro 6: ExtraWide. Era Regular, clamp(1.7rem, 3.6vw, 2.9rem). */
font-family: var(--lb-titolo-famiglia);
font-weight: 700; text-transform: uppercase; letter-spacing: -.01em;
color: var(--lb-titolo); font-size: clamp(1.45rem, 2.9vw, 2.35rem); line-height: 1.02;
max-width: none; margin: 16px 0 0;
}
.lb-split__paragrafo p { color: var(--lb-tenue); font-size: 1.02rem; margin-top: 18px; max-width: 44ch; }
/* Il blocco «La produzione» ha immagine a sinistra: è l'alternanza del prototipo. */
.lb-split--rovescio { flex-direction: row-reverse; }
@media (max-width: 900px) {
.lb-split, .lb-split--rovescio { flex-direction: column; }
.lb-split__cornice { width: 100%; }
}
/* --- Le foto dentro il racconto: il `.duo` del prototipo -------------------
Due per riga, subito dopo «L'idea». Valori presi dal prototipo: griglia a due
colonne, stesso gap della galleria, e un rapporto **4/3** — piu' larghe di
quelle della galleria, che sono 4/5.
**La sezione sparisce se il ripetitore e' vuoto** (decisione 26). Non c'e' un
interruttore per farlo: un Listing con zero elementi stampa comunque il suo
contenitore, e quello che resta e' una sezione alta quanto il suo padding.
Lo chiude `:has()`, che qui e' lo strumento giusto perche' la condizione la
detta il **contenuto**, e il contenuto lo conosce solo il browser. */
.lb-duo { margin-top: clamp(20px, 3vw, 32px); }
/* **Le colonne le fa la griglia del tema, e la misura del plugin va neutralizzata.**
Non e' una scelta: e' il motivo per cui la galleria qui sotto funziona da sempre.
JetEngine impagina in flex, con questa regola nel suo `frontend.css`:
.jet-listing-grid__items > .jet-listing-grid__item {
max-width: calc(100% / var(--columns));
flex: 0 0 calc(100% / var(--columns));
}
E' un **`max-width`**, non un `width`. Dentro una griglia CSS quel `100%/2`
diventa meta' *traccia* invece di meta' riga: la foto usciva **282px in una
colonna da 563**.
Un `width: 100%` non lo tocca — un massimo non si vince con una larghezza. E
nemmeno rimettere `--columns: 1`, perche' la regola del plugin arriva da un
selettore col figlio diretto (`>`) che pesa piu' del nostro. Le due righe qui
sotto sono la **stessa forma** che il tema usa gia' per `.lb-galleria__griglia`
e per `.lb-lv-griglia`: si spegne il massimo, e le colonne restano quelle
dichiarate qui. */
.lb-duo__griglia .jet-listing-grid__items {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(14px, 2vw, 26px);
}
.lb-duo__griglia .jet-listing-grid__items > .jet-listing-grid__item {
max-width: none; flex: none; width: auto; margin: 0; padding: 0;
}
.lb-duo__foto { padding: 0; }
.lb-duo__img {
display: block; aspect-ratio: 4/3; border-radius: 0; overflow: hidden;
border: 1px solid var(--lb-filo);
}
.lb-duo__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.lb-duo__foto:hover .lb-duo__img img { transform: scale(1.05); }
/* Se il ripetitore e' vuoto la sezione non compare (decisione 26). Un Listing a
zero elementi stampa comunque il suo contenitore: a farlo sparire e' `:has()`,
perche' la condizione la detta il contenuto e il contenuto lo sa il browser. */
.lb-duo:not(:has(.jet-listing-grid__item)) { display: none; }
@media (max-width: 700px) {
.lb-duo__griglia .jet-listing-grid__items { grid-template-columns: 1fr; }
}
/* --- La galleria: tante foto quante ne servono, nessun tetto (decisione 25) --- */
.lb-galleria__griglia { margin-top: 52px; }
/* **G4-07: le foto de «Il sistema» avevano 22 px di margine a sinistra e 2 a
destra**, e la riga che le sbilanciava è la `width` qui sotto — che prima non
c'era. Fabrizio: «le foto de "il sistema" hanno margini differenti a dx e sx.
manterrei la stessa distanza di tutta la pagina, prendi da esempio la foto de
"la produzione"».
La causa sta in `frontend.css` di JetEngine, che impagina le sue griglie con
una coppia:
.jet-listing-grid__items { width: calc(100% + 20px); margin: 0 -10px; }
È il vecchio trucco delle gutter: si allarga di 20 e si riprendono 10 per
lato col margine negativo, così le colonne restano allineate al contenitore.
**Le due righe vanno insieme o non funziona nessuna delle due.** Qui il
`margin: 0` toglieva la metà che rientra e lasciava la metà che sborda: i
20 px in più finivano **tutti a destra**.
Misurato su tre larghezze, con «La produzione» come riferimento (è la foto che
Fabrizio ha indicato, ed è un `.lb-split__cornice`, non una griglia JetEngine):
produzione Il sistema PRIMA Il sistema DOPO
393 px 22 / 22 22 / 2 22 / 22
1024 px 41 / 41 41 / 21 41 / 41
1440 px 154 / 154 154 / 134 154 / 154
⚠️ **Non è un difetto del telefono: erano 20 px a ogni larghezza**, desktop
compreso, e tre giri di revisione su desktop non l'avevano visto. Per questo la
correzione non sta in una fascia: la simmetria dei margini non è una scelta
responsive.
✅ **La larghezza non si corregge più qui.** Il 2026-08-26, su richiesta di
Fabrizio di allineare *tutti* i margini, il censimento ha trovato **sei
griglie** con lo stesso offset e la neutralizzazione è diventata **una riga
sola per tutte** — cercala come «L'offset delle griglie JetEngine», molto più
su in questo foglio. Qui resta la spiegazione del caso che l'ha fatta
scoprire, e **nient'altro**: dichiarare la stessa larghezza anche qui
significherebbe averla in due posti che col tempo divergono.
⚠️ **Un'ultima cosa che il numero dell'oracolo non dice.** Dopo la correzione
la sezione risulta **−9 px** contro il prototipo, mentre prima era **−1**: la
misura sembra peggiorata. Non lo è. Griglia e fotografie ora combaciano col
prototipo **al pixel** — `154 → 1286`, foto larga 360 e alta 450 di qua e di
là — e ogni componente della sezione è identico (riempimento 140/140,
occhiello 16, stacco 52, griglia 480, didascalia 18). I 9 px sono
nell'**occhiello del prototipo**, che è uno `` in linea e occupa una
riga di 25 px invece dei 16 del nostro widget. Prima **due errori si
annullavano**: la griglia larga 20 di troppo compensava quei 9. Togliendone
uno, l'altro è venuto a galla. **Il difetto esposto non l'ha creato questa
correzione.** */
.lb-galleria__griglia .jet-listing-grid__items {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: clamp(14px, 2vw, 26px); margin: 0;
}
.lb-galleria__griglia .jet-listing-grid__item { margin: 0 !important; padding: 0 !important; width: auto !important; max-width: none !important; }
.lb-galleria__foto { padding: 0; }
.lb-galleria__img {
display: block; aspect-ratio: 4/5; border-radius: 0; overflow: hidden;
border: 1px solid var(--lb-filo);
}
.lb-galleria__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.lb-galleria__foto:hover .lb-galleria__img img { transform: scale(1.05); }
.lb-galleria__didascalia {
margin-top: 12px; font-size: .72rem; text-transform: uppercase;
letter-spacing: .14em; color: var(--lb-tenue);
}
@media (max-width: 900px) { .lb-galleria__griglia .jet-listing-grid__items { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .lb-galleria__griglia .jet-listing-grid__items { grid-template-columns: 1fr; } }
/* --- Scheda tecnica --- */
.lb-scheda { border-top: 1px solid var(--lb-filo); margin-top: 8px; padding-block: 0 clamp(72px, 10vw, 140px); }
/* La riga è un Container flex: l'etichetta ha larghezza fissa e il valore
prende il resto. Nel prototipo è una griglia `200px 1fr`, che in flex si
ottiene con `flex: 0 0 200px` sull'etichetta — senza forzare `display:grid`
su un elemento che Elementor gestisce come flex. */
.lb-scheda__riga { border-bottom: 1px solid var(--lb-filo); align-items: flex-start; }
.lb-scheda__chiave { flex: 0 0 200px; }
.lb-scheda__valore { flex: 1 1 auto; }
/* **Tre classi, non due, e per la stessa ragione dell'eyebrow.** La regola che
Elementor scrive in ogni foglio di blocco di libreria dichiara `line-height` e
`letter-spacing` con la stessa specificità di questa, e quei fogli si caricano
dopo il tema: le due dichiarazioni contese le perdeva, le altre no.
Si vedeva solo a 390, dove la riga si impila e l'altezza dell'etichetta entra
nel conto — a 1440 l'etichetta è più bassa del valore e non sposta niente.
È lo stesso guasto due volte: quando una regola del tema riguarda un widget
dentro un blocco di libreria, due classi non bastano. */
.elementor-widget.lb-scheda__chiave .elementor-heading-title {
font-size: .7rem; text-transform: uppercase; letter-spacing: .18em;
line-height: 1.55;
color: var(--lb-arancio); padding-top: 4px; margin: 0;
font-family: var(--lb-regular); font-weight: 400;
}
.lb-scheda__valore { color: var(--lb-titolo); font-size: 1.05rem; }
/* Una riga senza valore non compare vuota: sparisce (decisione 26). Il widget
dentro si nasconde da sé con `hide_if_empty`; qui sparisce anche l'etichetta. */
.lb-scheda__riga:not(:has(.jet-listing-dynamic-field, .jet-listing-dynamic-repeater)) { display: none !important; }
/* A 860 la riga della scheda si impila, e lo stacco fra etichetta e valore
scende da 24 a 6: sono due dichiarazioni del prototipo
(`@media (max-width:860px){ .facts .row{ grid-template-columns:1fr; gap:6px } }`)
che il tema non aveva mai ricevuto. Valgono su tutti e due i layout, perché il
blocco è lo stesso — ed è così che il difetto si è fatto trovare: usciva
identico, +12, su entrambe le schede. */
@media (max-width: 860px) {
/* **Si scrive la variabile, non la proprietà** — ed è la quarta volta in un
giorno che questa distinzione decide l'esito.
Elementor non mette `flex-direction: row` sul contenitore: mette
`--flex-direction: row`, e poi una sua regola fa
`flex-direction: var(--flex-direction)`. Una dichiarazione del tema che
scriva direttamente `flex-direction: column` perde da quella, perché la
regola di Elementor ha una classe in più — e i fogli dei blocchi si
caricano **dopo** il tema, quindi a pari specificità vincono comunque.
`row-gap: 6px` passava e `flex-direction: column` no: due dichiarazioni
nella stessa regola, una applicata e l'altra scartata in silenzio.
Qui si scrive la variabile che Elementor legge, con **quattro classi** —
una più di `.elementor-87 .elementor-element.elementor-element-lbschcl`.
Funziona anche `flex-direction: column !important`, misurato: dà lo stesso
risultato al pixel. Si preferisce questa perché usa il meccanismo invece di
scavalcarlo, e perché un `!important` qui insegnerebbe a metterne altri. */
.single-progetto .lb-scheda .lb-scheda__riga.e-con {
--flex-direction: column;
--gap: 6px 6px; --row-gap: 6px; --column-gap: 6px;
}
/* In colonna, `flex: 0 0 200px` sull'etichetta varrebbe sull'ALTEZZA. */
.lb-scheda__chiave { flex: 0 0 auto; }
}
/* --- CTA di chiusura --- */
.lb-cta-progetto { padding-block: 0 clamp(72px, 10vw, 140px); }
.lb-cta-progetto .lb-cta { margin-top: 30px; }
/* --- G3-09 e G3-12: «Il risultato» allineato a sinistra ------------------
La stessa segnalazione sulle due schede, editoriale e immersiva, il
2026-08-26: *«la tabella ha spazio vuoto a sinistra rispetto
all'allineamento di titolo e copy. Lo stesso vale per la CTA che è molto in
basso e spostata ancora più a destra»*. Due difetti, non uno, e nessuno dei
due era di gusto.
**① I 54px a sinistra: il gutter pagato due volte.** `.lb-risultato` è un
contenitore «boxed», e il gutter glielo mettiamo **noi** in testa a questo
foglio — `.e-con-boxed > .e-con-inner { padding-inline: var(--lb-margine) }`,
che a 1873px vale 54px. Occhiello, frase e copy cadono così a **x=371**, che
è il valore del prototipo. Ma la scheda tecnica e la CTA arrivano dal blocco
di libreria #87, e **anche loro sono contenitori boxed**: la stessa regola li
prende una seconda volta e aggiunge altri 54px sul già rientrato. Non è un
difetto di quella regola — è giusta per un contenitore di primo livello, ed è
sbagliata solo quando due si annidano.
Misurato sull'hosting, identico sulle due pagine — tabella e pulsante a
**x=425** contro i **371** di titolo e copy, e 1449 invece di 1503 a destra.
Nel prototipo `.facts` e `.btn` stanno **dentro lo stesso `.wrap`** del
titolo, quindi il gutter lo pagano una volta sola.
**② I 130px sotto: la scheda paga uno stacco da sezione che qui non è.**
`.lb-scheda` porta `padding-bottom: clamp(72px, 10vw, 140px)` perché **è**
una sezione — un blocco di libreria di Elementor non può essere altro. Dentro
«Il risultato» però non è una sezione: è la tabella prima del pulsante. Fra
la fine della tabella e il pulsante c'erano **170px** (140 di stacco + 30 di
`margin-top` della CTA); nel prototipo di Splendide il bottone ha
`margin-top: 40px` e basta. È lo stesso argomento dei due casi nominati qui
sotto, e questo è il terzo. */
.lb-risultato .lb-scheda > .e-con-inner,
.lb-risultato .lb-cta-progetto > .e-con-inner { padding-inline: 0; }
.lb-risultato .lb-scheda { padding-bottom: 0; }
.lb-risultato .lb-cta-progetto .lb-cta { margin-top: 40px; }
/* --- Lo stacco fra blocchi che il prototipo tiene dentro una sezione --------
**La struttura è imposta, il `padding` no**, e la differenza fra le due cose è
quello che questo blocco corregge.
Un blocco di libreria di Elementor **è** una sezione: non c'è modo di
appoggiarne uno dentro un'altra senza che sia un contenitore. Quella parte non
si discute. Ma ogni sezione porta con sé `padding-block`, e dove il prototipo
tiene due blocchi **dentro la stessa sezione** noi paghiamo lo stacco due
volte — una in fondo al primo e una in cima al secondo.
Costava **+287 px** sulle foto dentro il racconto e **+104** in chiusura di
pagina: da soli, i due terzi dei 568 px per cui la scheda editoriale era la
sola pagina del sito fuori riga (+7,0%, contro un +0,2/+4% di tutte le altre).
Non è una deviazione legittima e non è una scelta di design: **niente ce lo
impediva, era lavoro non fatto** (decisione 83). Rivede la decisione 102, che
era stata scritta quando sembrava riguardare la sola scheda immersiva — cambia
perché è cambiato quanto sapevamo, non perché abbiamo cambiato idea.
⚠️ **Non si azzera lo stacco fra due sezioni qualsiasi.** Le sezioni che il
prototipo tiene davvero separate lo stacco lo devono pagare, e infatti sono già
a −36 (140 contro 150): togliere altro le porterebbe fuori dall'altra parte.
Si nominano i due casi, uno per uno. */
/* 1. Le foto dentro il racconto continuano la sezione «L'idea»: nel prototipo
stanno dentro quel ``, separate solo da un margine. */
.single-progetto .lb-sezione:has(+ .lb-duo) { padding-bottom: 0; }
.single-progetto .lb-duo { padding-top: 0; }
/* 2. Il pulsante di chiusura sta dentro «Il risultato», su tutti e due i layout:
la sezione paga già il proprio stacco in fondo, il blocco non lo paga una
seconda volta. Vale per entrambi perché il template immersivo è stato
allineato all'editoriale — il widget è dentro la sezione, non un fratello. */
.single-progetto .lb-risultato .lb-cta-progetto { padding-bottom: 0; }
/* --- Le tre cose che si muovono solo qui ---------------------------------
Parallassi e barra di avanzamento esistono **solo nel prototipo immersivo**:
quello editoriale non ha nessun movimento allo scroll, e le classi che
servirebbero — `.lb-split__cornice`, `.lb-prossimo__foto` — sono le stesse dei
due layout. Da qui i modificatori: `--parallasse` sta sul contenitore della
scheda immersiva, non dentro il blocco condiviso, così l'editoriale non li
vede nemmeno. Stesso schema di `.lb-lead--immersivo`.
Le trasformazioni le scrive `comportamenti.js`, e sono tutte sotto
`prefers-reduced-motion`: qui c'è solo lo spazio in cui possono muoversi. */
/* La fotografia deve essere più alta del riquadro, o non ha dove scorrere. */
.lb-split__cornice--parallasse img {
height: 118%; margin-top: -9%; will-change: transform;
}
/* Lo sfondo di «Prossimo progetto» esce di un decimo sopra e sotto. */
.lb-prossimo--parallasse .lb-prossimo__foto {
inset: -10% 0; opacity: .32; will-change: transform;
}
/* La barra di avanzamento in cima. La costruisce `comportamenti.js` e la mette
fuori dal contenuto, come la grana: se fosse un Container il cliente potrebbe
cancellarla per sbaglio senza capire cosa è cambiato. */
.lb-prog {
position: fixed; top: 0; left: 0; height: 3px; width: 100%;
background: var(--lb-arancio);
transform: scaleX(0); transform-origin: 0 50%;
z-index: 700; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.lb-split__cornice--parallasse img,
.lb-prossimo--parallasse .lb-prossimo__foto { transform: none !important; }
}
/* --- Le sei descrizioni del processo: generica, o quella del servizio -----
Il blocco è **uno solo** ed è condiviso fra la pagina Servizi e le sette
schede. I sei **titoli** sono struttura — sono il processo dell'azienda, e se
cambiano devono cambiare ovunque senza eccezioni. Le sei **descrizioni** no:
quattro su sei divergono già oggi fra Servizi e Packaging, e divergono di
proposito (content model §7).
Perciò ogni fase porta due descrizioni: quella generica, scritta nel blocco, e
quella specifica, letta da `processo_0N` del servizio corrente. Questa regola
nasconde la generica quando la specifica ha reso qualcosa.
**Lo stesso meccanismo serve i due casi senza un interruttore.** Sulla pagina
Servizi quei campi non esistono, restano vuoti, `hide_if_empty` non stampa
niente e la generica resta al suo posto. È il ripiego di «Cliente», applicato
sei volte. */
.lb-processo__corpo:has(.lb-processo__testo--specifico .jet-listing-dynamic-field__content)
.lb-processo__testo--generico { display: none; }
/* --- «Cliente»: il campo, e il titolo come ripiego ------------------------
Due widget nella stessa riga: il primo legge il campo `cliente` e sparisce se
e' vuoto, il secondo stampa il titolo del progetto. Questa regola nasconde il
secondo quando il primo ha reso qualcosa.
Non e' un ripiego per mancanza di alternative, e le due che sembrano ovvie non
funzionano: `field_fallback` di JetEngine prende **una stringa fissa** —
`wp_kses_post( $settings['field_fallback'] )` alla riga 282 di
`listings/render/dynamic-field.php` — e non puo' contenere il titolo; e un
`filter_callback` non viene **mai chiamato su un valore vuoto**, perche' il
controllo su vuoto sta prima, alla riga 277, e fa `return null`.
Il selettore verifica il **contenuto reso**, non il widget: con `hide_if_empty`
JetEngine non stampa nessun `__content`, quindi «il primo ha reso qualcosa» e
«esiste un `__content` dentro `.lb-cliente`» sono la stessa cosa. */
.lb-scheda__riga:has(.lb-cliente .jet-listing-dynamic-field__content) .lb-cliente--ripiego {
display: none;
}
/* --- Prossimo progetto --- */
.lb-prossimo { position: relative; overflow: hidden; padding: 0; }
.lb-prossimo__card { padding: 0; }
/* Lo sfondo del prossimo progetto: stessa catena di altezze dell'hero. Fra il
widget e la foto ci sono tre involucri, e basta che uno resti `auto` perché
la fotografia non si veda affatto. */
.lb-prossimo__foto { position: absolute; inset: 0; z-index: 0; opacity: .35; }
.lb-prossimo__foto,
.lb-prossimo__foto .elementor-widget-container,
.lb-prossimo__foto .jet-listing-dynamic-image { height: 100%; width: 100%; }
/* Il selettore passa da `.jet-listing-dynamic-image` perché JetEngine stampa
una propria regola sull'immagine e vince su un selettore più corto: senza,
la foto resta larga quanto la sua proporzione e lascia il resto nero. */
.lb-prossimo__foto .jet-listing-dynamic-image img,
.lb-prossimo__foto img { width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }
/* **G2-17, le «barre quadrate nere»: cercato, e dalla nostra parte non c'è.**
La segnalazione descrive bene quello che si vede, ma la causa non è CSS. Ho
provato ad aggiungere il velo del prototipo convinto che mancasse: **c'era
già**, venti righe più sotto, identico. La mia sonda non l'aveva trovato
perché guardava gli **elementi** e un velo è uno **pseudo-elemento**.
La prova che ha chiuso la questione: luminanza media dello stesso riquadro
fotografato prima e dopo l'aggiunta — **19,3 e 19,3**, deviazione 25,05 e
25,05. Identiche: la regola in più non dipingeva niente.
Cosa sono davvero i rettangoli: la fotografia è un piano di carte da lettera
su fondo scuro, e a `opacity:.32` sotto il velo i fogli restano più chiari
dello sfondo. Quelle sono le carte, non delle bande. Ci si aggiunge che la
sorgente è verticale (1200x1440) dentro una fascia 2,25:1, quindi se ne vede
un terzo scarso. **È il materiale**: non si corregge da qui, e infilare altro
nero sopra spegnerebbe anche il poco che si legge. */
/* Il separatore fra le voci degli elenchi della scheda tecnica. */
/* Le voci degli elenchi della scheda tecnica vanno su una riga sola, separate da
un punto medio. JetEngine le stampa come `` dentro `
`, e quello
interno è `display:flex`: senza portare in linea anche lui, «Brand Identity ·
Progettazione grafica · …» diventa un elenco verticale di sette righe. */
.lb-scheda__valore .jet-listing-dynamic-repeater__items,
.lb-scheda__valore .jet-listing-dynamic-repeater__item,
.lb-scheda__valore .jet-listing-dynamic-repeater__delimiter { display: inline; }
/* **`inline-block`, non `inline`, e la differenza vale 26px.** Con `inline` la
prima voce si spezzava a metà — «Oro» su una riga e «satinato» sulla
successiva, con la prima riga larga 32px su 346 disponibili — e la scheda
usciva a tre righe invece di due. Con `inline-block` ogni voce è un blocco
atomico e l'a capo cade fra una voce e l'altra: 124,4px da entrambe le parti,
e due righe come nel prototipo.
⚠️ **Non so spiegare perché `inline` rompa la prima riga**, e lo scrivo invece
di inventare un meccanismo: il contenitore `__items` misura 351px dentro un
genitore da 346, quindi qualcosa deborda, ma non ho isolato cosa. Il rimedio è
verificato per misura su sei candidati — è l'unico che dà insieme l'altezza
giusta e il numero di righe giusto.
C'è anche una ragione di merito, ed è quella per cui il rimedio è accettabile
e non solo funzionante: in una scheda tecnica una voce è un'unità, e
«Cartotecnica su / misura» spezzata a metà si legge peggio. `inline-block` lo
garantisce; il prototipo, che ha un testo unico, ci arriva per fortuna. */
.lb-scheda__valore .jet-listing-dynamic-repeater__item > div { display: inline-block; }
.lb-prossimo__card::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(180deg, rgba(10,9,8,.85), rgba(10,9,8,.75));
}
.lb-prossimo__testo {
position: relative; z-index: 2; text-align: center;
padding-block: clamp(80px, 12vw, 170px);
}
.lb-prossimo__testo .lb-eyebrow .elementor-heading-title { justify-content: center; }
.lb-prossimo__titolo h2 {
/* Giro 6: ExtraWide. Era Regular, clamp(2rem, 6vw, 4.4rem). */
font-family: var(--lb-titolo-famiglia);
font-weight: 700; text-transform: uppercase; letter-spacing: -.01em;
color: var(--lb-titolo); font-size: clamp(1.7rem, 4.8vw, 3.5rem); line-height: 1; margin: 14px 0 0;
}
.lb-prossimo__vai .jet-listing-dynamic-link__link {
display: inline-flex; align-items: center; gap: 10px; margin-top: 26px;
font-size: .78rem; text-transform: uppercase; letter-spacing: .14em;
color: var(--lb-titolo); border-bottom: 1px solid var(--lb-arancio); padding-bottom: 7px;
}
.lb-prossimo__vai .jet-listing-dynamic-link__link::after { content: "→"; color: var(--lb-arancio); }
/* Se la cascata di §3.5 non trova nessun progetto — portfolio con una scheda
sola — la griglia resta vuota e la sezione sparisce, invece di mostrare un
link che rimanda a se stesso. */
.lb-prossimo:not(:has(.lb-prossimo__card)) { display: none; }
/* =====================================================================
SCHEDA PROGETTO — LAYOUT IMMERSIVO
---------------------------------------------------------------------
Misure prese dal blocco `