dentro
`.service-item-3 .title` e `.banner-process-title` (eredita il bianco dal
contenitore), ma `a{text-decoration:none}` e nient'altro. Si esplicita.
Sono controlli autonomi (l'unico link della card): MISURATI 36-39px a
tutte le larghezze -> inline-block con il padding che li porta a 44. */
.service-item-3 .service-content .title a,
.banner-process-title a,
.project-item-3 .project-content .title a{
color: inherit;
display: inline-block;
padding: 8px 0; /* il titolo ha line-height:1 (28px): 8 + 28 + 8 = 44 — MISURATO 36 con 4px */
}
/* 8.6 Il badge «2 sedi» dell'about-section-3: nel tema il numero e' un
con dentro l'odometer; qui e' un STATICO (niente numeri che salgono da
zero) e il carattere dei titoli va ridichiarato (selettore di elemento). */
.about-img-wrap-3 .about-counter p.title{
font-family: var(--tl-ff-heading);
color: var(--tl-color-common-white);
font-size: 120px;
font-weight: 400;
margin-bottom: 10px;
line-height: 1;
}
@media only screen and (max-width: 767px){ .about-img-wrap-3 .about-counter p.title{ font-size: 40px; } }
/* il badge del tema ha il fondo in accento e il testo bianco a 18px: bianco su
#2E8C86 = 4,03:1, sotto i 4,5 del testo normale. Fondo con la variante da
componente (4,52). Stessa specificita' del tema (0,2,0). */
.about-img-wrap-3 .about-counter{ background-color: var(--sav-accento-fondo); }
/* 8.7 (rimossa il 2026-09-07) le voci dell'about sono tornate DUE, come nel
tema: il filetto da 330px del tema va bene cosi' (art-direction §2.6). */
/* 8.8 Le card SENZA foto (Domus Traversari 13 e 17) in HOME: lo STESSO
componente del catalogo (§10.2, `.project-item.eg-card-vuota`) sulla card
di index-3 (`.project-item-3`): tinta chiara (la soft dell'accento) con il
NUMERO CIVICO in grande nell'accento; due «D» gemelle su fondo scuro
leggevano come due errori di caricamento (art-direction §2.5, ux §1.9). Il
testo della card e' visibile sempre (nel tema compare al passaggio del
mouse sopra la foto): senza foto non c'e' niente da scoprire, e su tinta
chiara il testo e le pillole passano allo scuro. Il civico e' aria-hidden:
#2E8C86 su #E8F7F6 e' 3,6:1, sopra la soglia dei segni grafici. */
.project-item-3.eg-card-vuota .project-img{
background-color: var(--sav-accento-soft);
display: flex;
align-items: center;
justify-content: center;
}
.project-item-3.eg-card-vuota .project-img:before{ content: none; }
.project-item-3.eg-card-vuota .eg-card-vuota__iniziale{
font-family: var(--tl-ff-heading);
font-size: 180px;
line-height: 1;
color: var(--tl-color-theme-primary);
user-select: none;
/* il civico sta nel terzo alto: sotto c'e' il testo della card */
margin-bottom: 150px;
}
.project-item-3.eg-card-vuota .project-content{ visibility: visible; opacity: 1; bottom: 50px; }
/* 8.8bis B5 (qa §6.5, MISURATO a 1280 e a 390): sulle due card CON foto il
nome dell'appartamento, le pillole e la riga dei dati sono
`visibility:hidden; opacity:0` e il tema li rivela SOLO su `:hover`
(main.css `.project-item-3 .project-content` / `.project-item-3:hover
.project-content`). Su telefono e tablet il `:hover` non arriva mai: la
card era una fotografia e basta, senza nome, senza dati e senza un segnale
che fosse un link. Nemmeno il fuoco da tastiera la apriva.
Due estensioni della stessa dichiarazione gia' scritta due righe sopra per
le card Traversari, e nessun altro cambiamento:
1) SOTTO i 1024px il contenuto e' sempre visibile — 1024 e' la soglia
oltre la quale il puntatore c'e' quasi sempre, ed e' la stessa che
main.js usa per il pin della colonna sticky;
2) a QUALUNQUE larghezza, `:focus-within` fa lo stesso lavoro di
`:hover` per chi naviga da tastiera.
Sopra i 1024 col mouse l'effetto del tema resta intatto: il velo
`.project-img:before` continua a comparire all'hover, e il contenuto
continua a salire da 40 a 50px. */
@media only screen and (max-width: 1023px){
.project-item-3 .project-img:before{ visibility: visible; opacity: 1; bottom: 0; }
.project-item-3 .project-content{ visibility: visible; opacity: 1; bottom: 50px; }
}
.project-item-3:focus-within .project-img:before{ visibility: visible; opacity: 1; bottom: 0; }
.project-item-3:focus-within .project-content{ visibility: visible; opacity: 1; bottom: 50px; }
.project-item-3.eg-card-vuota .project-content .title,
.project-item-3.eg-card-vuota .project-content .title a,
.project-item-3.eg-card-vuota .project-content > span{ color: var(--tl-color-heading-primary); }
.project-item-3.eg-card-vuota .project-content ul li span{
color: var(--tl-color-heading-primary);
/* la pillola col fondo verde di B1 sta sulla FOTOGRAFIA; qui il fondo e'
gia' la tinta soft e il testo e' scuro (15,96:1 misurato): il fondo
pieno si toglie, se no si sovrappongono due verdi. */
background-color: transparent;
border-color: var(--tl-color-heading-primary);
}
@media only screen and (max-width: 767px){
.project-item-3.eg-card-vuota .eg-card-vuota__iniziale{ font-size: 120px; margin-bottom: 110px; }
}
/* il bottone di sezione sotto il carosello degli appartamenti (copy §2.6) */
.eg-sezione-btn{ margin-top: 40px; }
/* 8.9 La riga per chi investe sotto i due tondi della CTA (copy §2.7): bianca
sulla fotografia velata, con il link sottolineato. E' un link in una frase,
ma e' l'UNICA uscita per il terzo pubblico da questa fascia: 44px. */
.eg-cta-riga{
margin: 34px 0 0;
color: rgba(255, 255, 255, .86);
line-height: 1.6;
}
/* le due frasi su due righe anche sotto i 768, dove il tema spegne i dopo la
chiocciola che scrive linkMail() nel guscio. */
}
/* il tema scrive `.side-menu-content .side-menu-contact .side-menu-list li a.mail`
a 26px (0,4,1): MISURATO a 390, l'indirizzo usciva su due righe da 40px.
Stessa specificita' del tema piu' la classe. */
.side-menu-content .side-menu-contact .side-menu-list li a.mail{ font-size: 16px; line-height: 1.3; }
/* l'indirizzo del pannello e' un DATO su due righe: il ; le nostre (non c'e' una pagina per
categoria): stessa veste, stessa specificita' del tema (0,4,0)+. */
/* B1 (qa §6.5, MISURATO a 1280 e a 390 sulle quattro pillole delle due
schede vere: «Soggiorni di lavoro» 1,42 e 1,07 · «Piccoli gruppi» 1,51 ·
«Coppie e singoli» 1,48 · «Famiglie» 1,50-2,78; mediane 2,11-3,11. Serve
4,5). La pillola del tema e' bianca con bordo bianco e NIENTE fondo, e sta
in ALTO sulla foto, dove il velo del tema (`.project-img:before`, gradiente
dal basso) non arriva: su una camera chiara sparisce.
Fondo pieno `--sav-accento-fondo` #2B837D, che e' il token nato per
«fondo di componente col bianco sopra»: 4,52:1 misurato, e non dipende
piu' da quale fotografia c'e' sotto. Bordo dello stesso verde per non
lasciare un filo bianco intorno. Corpo, raggio, maiuscoletto e passo del
tema non cambiano. */
.project-item .project-img ul li span{
font-family: var(--tl-ff-heading);
color: var(--tl-color-common-white);
font-size: 13px;
padding: 5px 15px;
text-transform: uppercase;
background-color: var(--sav-accento-fondo);
border: 1px solid var(--sav-accento-fondo);
border-radius: 100px;
display: flex;
align-items: center;
justify-content: center;
}
/* il titolo e' l'unico link testuale della card, controllo autonomo:
MISURATO 30px (line-height:1 del tema) -> 7 + 30 + 7 = 44 */
.project-item .project-content .title a{
color: inherit;
display: inline-block;
padding: 7px 0;
}
.project-item .project-content .title a:hover{ color: var(--sav-accento-scuro); }
.project-item .project-content > span{
display: block;
line-height: 1.6;
color: var(--tl-color-text-body);
}
.project-item .project-content .eg-card-testo{ margin: 12px 0 0; }
.project-item .project-content .eg-card-azione{ margin-top: 22px; }
/* LA CARD SENZA FOTO (Domus Traversari 13 e 17). Tinta piatta CHIARA (la
variante soft dell'accento, gia' variabile di §1) con il numero civico in
grande nell'accento: due card scure gemelle di fila leggono come errori di
caricamento (art-direction §2.5), due numeri diversi come una scelta.
Il velo nero del tema (.project-img:before, opacita' .11) serve sulla
foto e qui non c'e' foto. Le pillole passano a testo scuro: bianco su
#E8F7F6 non si vede. Il civico e' aria-hidden: #2E8C86 su #E8F7F6 e' 3,6:1,
sopra la soglia dei segni grafici. */
.project-item.eg-card-vuota .project-img{
background-color: var(--sav-accento-soft);
display: flex;
align-items: center;
justify-content: center;
}
.project-item.eg-card-vuota .project-img:before{ content: none; }
.project-item.eg-card-vuota .eg-card-vuota__iniziale{
font-family: var(--tl-ff-heading);
font-size: 180px;
line-height: 1;
color: var(--tl-color-theme-primary);
user-select: none;
}
.project-item.eg-card-vuota .project-img ul li span{
color: var(--tl-color-heading-primary);
/* niente fondo verde qui: la card senza foto e' gia' tinta soft e le
pillole sono scure sopra (15,96:1 misurato) */
background-color: transparent;
border-color: var(--tl-color-heading-primary);
}
@media only screen and (max-width: 767px){
.project-item.eg-card-vuota .eg-card-vuota__iniziale{ font-size: 120px; }
}
/* --- 10.3 Le schede (portfolio-details.html) -------------------------
IL RIEPILOGO A SEI CAMPI: e' un (sono dati) nel .project-details-meta
del tema, che e' un flex `space-between` senza a-capo: a 360 sei voci su
una riga sforavano il viewport. A capo con il gap del tema, e sotto i 768
una griglia a due colonne. L'etichetta del tema e' #9F9FA4 sul fondo
#F6F6F6 = 2,3:1: passa a --tl-color-grey-1 (6,6:1). Il valore e' un
e non l'
del tema (divergenza 8 del generatore): stessa geometria. */
.project-details-wrap .project-details-meta.eg-riepilogo{
flex-wrap: wrap;
gap: 24px 30px;
align-items: flex-start;
}
.eg-riepilogo .details-meta{ min-width: 0; }
.eg-riepilogo dt,
.eg-riepilogo dd{ margin: 0; font-weight: inherit; }
.project-details-wrap .project-details-meta .details-meta span{ color: var(--tl-color-grey-1); }
.project-details-wrap .project-details-meta .details-meta .eg-meta-valore{
font-family: var(--tl-ff-p);
font-size: 18px;
font-weight: 500;
line-height: 1.4;
color: var(--tl-color-heading-primary);
margin-bottom: 0;
}
@media only screen and (max-width: 767px){
.project-details-wrap .project-details-meta.eg-riepilogo{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px 24px;
}
}
/* i sottotitoli h3 della scheda: il tema da' 30px sotto e niente sopra
(nel demo c'e' sempre un paragrafo prima). Qui «Servizi inclusi» stava a
10px dall'elenco precedente (MISURATO). L'elenco che segue subito il
titolo non aggiunge i suoi 30px. */
.project-details-wrap .details-title-2{ margin-top: 50px; }
.project-details-wrap .details-title-2 + .project-details-list{ margin-top: 0; }
.project-details-wrap .project-details-list ul{ margin: 0; padding: 0; }
@media only screen and (max-width: 767px){
.project-details-wrap .project-details-list{ flex-direction: column; row-gap: 10px; }
.project-details-wrap .details-title-2{ font-size: 34px; }
.project-details-wrap .details-title{ font-size: 40px; }
}
/* I SERVIZI INCLUSI: elenco con le icone FontAwesome del copy. Senza veste
erano dieci righe con l'icona incollata alla parola (MISURATO). Il tondo
e' quello che il tema mette davanti alle voci di service-details
(`.service-details-item .icon`: tondo pieno da 80px con l'icona dentro),
in scala: 44px, fondo soft, icona nell'accento scuro (5,1:1). */
.eg-servizi{
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px 30px;
}
@media (min-width: 992px){ .eg-servizi{ grid-template-columns: repeat(3, 1fr); } }
@media only screen and (max-width: 575px){ .eg-servizi{ grid-template-columns: 1fr; } }
.eg-servizi li{
display: flex;
align-items: center;
gap: 14px;
font-family: var(--tl-ff-heading);
font-size: 16px;
line-height: 1.3;
color: var(--tl-color-heading-primary);
min-width: 0;
}
.eg-servizi li i{
flex: 0 0 auto;
width: 44px;
height: 44px;
border-radius: 50%;
background-color: var(--sav-accento-soft);
color: var(--sav-accento-scuro);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
/* LA GALLERIA STATICA: `.gallary-inner-item-2 a{height:477px}` del tema e'
pensata per tre colonne a 1280. Nelle nostre colonne (col-6 a 360: 156px
di larghezza) diventava una fetta verticale 156x477 (MISURATO). La
proporzione sostituisce l'altezza fissa: 4:5 come le foto verticali. */
.eg-galleria-scheda .gallary-inner-item-2 a{
display: block;
height: auto;
aspect-ratio: 4 / 5;
}
.eg-galleria-scheda .gallary-inner-item-2 a:focus-visible{ outline-offset: 4px; border-radius: 24px; }
/* i bottoni Booking/Airbnb (bottoni del tema, `rel=external`) e la riga che
dichiara che sono siti esterni */
.eg-nota-esterni{
margin: 20px 0 0;
font-size: 15px;
line-height: 1.5;
color: var(--tl-color-text-body);
}
.eg-nota-esterni a{
color: var(--sav-accento-scuro);
text-decoration: underline;
text-underline-offset: 3px;
display: inline-block;
padding: 10px 0;
}
/* LE RECENSIONI: dentro la scheda bianca di §7.4. Il tema veste
`blockquote` come la citazione grande del blog (fondo #EFEBE8, 45px di
padding, testo centrato): dentro una card da 30px di padding era una
scatola nella scatola (MISURATO a 1280). Qui la citazione e' testo, e
la card prende tutta l'altezza della colonna (quattro card a due a due,
pari altezza per riga). Niente voti, niente stelline. */
.eg-scheda.eg-recensione{
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
.eg-recensione blockquote{
background: none;
padding: 0;
margin: 0 0 22px;
border-radius: 0;
text-align: left;
flex: 1 1 auto;
}
.eg-recensione blockquote p{ color: var(--tl-color-text-body); margin-bottom: 0; }
.eg-recensione blockquote .eg-recensione__titolo{
font-family: var(--tl-ff-heading);
font-size: 20px;
line-height: 1.3;
color: var(--tl-color-heading-primary);
margin-bottom: 12px;
}
.eg-recensione__nome{
font-family: var(--tl-ff-heading);
font-size: 16px;
line-height: 1.2;
color: var(--tl-color-heading-primary);
display: flex;
align-items: center;
gap: 12px;
}
/* il filetto orizzontale, il segno che sostituisce il motivo a punta */
.eg-recensione__nome::before{
content: "";
flex: 0 0 auto;
width: 24px;
height: 2px;
background-color: var(--tl-color-theme-primary);
}
/* I DUE RIMANDI in fondo alla scheda: due frasi-link in una scheda bianca,
con il filetto davanti. Controlli autonomi: 20px di corpo + 10 + 10 = 46. */
.eg-rimandi-lista{
list-style: none;
margin: 0;
padding: 30px;
border: 1px solid var(--tl-color-border-1);
border-radius: 24px;
background-color: var(--tl-color-common-white);
display: grid;
gap: 8px;
}
.eg-rimandi-lista li{ position: relative; padding-left: 38px; }
.eg-rimandi-lista li::before{
content: "";
position: absolute;
left: 0;
top: 22px;
width: 24px;
height: 2px;
background-color: var(--tl-color-theme-primary);
}
.eg-rimandi-lista a{
display: inline-block;
padding: 10px 0;
font-family: var(--tl-ff-heading);
font-size: 20px;
line-height: 1.3;
color: var(--tl-color-heading-primary);
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-color: var(--tl-color-theme-primary);
}
.eg-rimandi-lista a:hover{ color: var(--sav-accento-scuro); }
/* --- 10.4 Le pagine servizio (service-details.html) ------------------
L'INDICE della colonna sticky: `.list-title` e' un (e' l'etichetta di
un indice, non un titolo della pagina) e il carattere dei titoli arriva
da un selettore di elemento che sul
non aggancia (stesso difetto della
pillola, §2). Corpo e margine li da' gia' la classe del tema. */
.service-details-left-content .service-category-list.eg-indice .list-title{
font-family: var(--tl-ff-heading);
color: var(--tl-color-heading-primary);
}
/* IL BOX CONTATTO sotto l'indice: nel tema il box che segue la lista
(`.service-details-cta`) porta 30px di margine sopra. Il nostro
`.eg-box-contatto` lo sostituisce e non li aveva: i due box si toccavano
(segnalazione del committente, 2026-10-04). Stessa misura del tema. */
.service-details-left-content .service-category-list + .eg-box-contatto{ margin-top: 30px; }
/* il titolo h2 di ogni blocco: il tema da' 15px sotto e niente sopra (nel
demo prima di ogni titolo c'e' una fotografia con il suo margine). Qui
«Studenti e lavoratori» stava attaccato ai bottoni delle formule. */
.service-details-content > * + .details-title{ margin-top: 50px; }
.service-details-content .service-faq{ margin-top: 50px; }
/* LE QUATTRO CARD «FARE DA SOLI» E LE DUE FORMULE. Il tema scrive
.service-details-item{display:grid;grid-template-columns:80px 1fr}
con gli 80px per il tondo dell'icona. Le nostre voci hanno UN solo
figlio (.content), che finiva nella colonna da 80px: MISURATO a 1280,
testo a una parola per riga («Un / prezzo / sbagliato»). Stessa
specificita' del tema (0,3,0) piu' la classe nostra. Sono card: la scheda
bianca di §7.4, e il `max-width:334px` del tema sul
se ne va. */
.service-details-content .service-details-items .service-details-item.eg-problema,
.service-details-content .service-details-items .service-details-item.eg-formula{
display: block;
border: 1px solid var(--tl-color-border-1);
border-radius: 24px;
padding: 30px;
background-color: var(--tl-color-common-white);
}
.service-details-content .service-details-items .service-details-item.eg-problema .content p,
.service-details-content .service-details-items .service-details-item.eg-formula .content p{
max-width: none;
}
.service-details-content .service-details-items .service-details-item.eg-problema .content .title{ margin-bottom: 12px; }
/* le due formule affiancate a pari peso: stessa altezza (la griglia del
tema le stira), stessi campi nello stesso ordine, bottone allineato in
fondo. Sotto i 768 una sotto l'altra (§7.2). */
.service-details-content .service-details-items .service-details-item.eg-formula .content{
display: flex;
flex-direction: column;
height: 100%;
}
.service-details-content .service-details-items .service-details-item.eg-formula .content .title{
font-size: 30px;
line-height: 1.1;
margin-bottom: 16px;
}
.eg-formula__frase{
color: var(--tl-color-heading-primary);
font-weight: 500;
margin-bottom: 4px;
}
.eg-formula__voci{ margin: 0; }
.eg-formula__voci dt{
font-family: var(--tl-ff-heading);
font-size: 13px;
font-weight: 400;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--tl-color-grey-1);
margin: 18px 0 6px;
}
.eg-formula__voci dd{ margin: 0; color: var(--tl-color-text-body); }
.service-details-content .service-details-items .service-details-item.eg-formula .eg-cta-btn-wrap{
margin-top: auto;
padding-top: 28px;
}
/* --- 10.5 Contatti (contact.html) ------------------------------------
I CINQUE RECAPITI nei `.request-item` del tema: `.request-item-wrap` e'
un flex a due voci con 65px di gap, e con cinque voci il quinto usciva
dalla colonna e finiva SOTTO il titolo del modulo (MISURATO a 1280).
Griglia a due colonne, una sotto i 576. Stessa specificita' del tema
(0,2,0) piu' la classe nostra. */
.request-content .request-item-wrap.eg-recapiti-wrap{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 34px 40px;
margin-bottom: 0;
}
@media only screen and (max-width: 575px){
.request-content .request-item-wrap.eg-recapiti-wrap{ grid-template-columns: 1fr; row-gap: 30px; }
}
.request-content .request-item-wrap.eg-recapiti-wrap .request-item{ min-width: 0; }
/* l'etichetta: il tema la scrive #9F9FA4 (2,3:1 sul fondo): grey-1 (6,6:1),
con l'icona FontAwesome nell'accento (segno grafico, 3,7:1) */
.request-content .request-item-wrap.eg-recapiti-wrap .request-item span{
display: flex;
align-items: center;
gap: 10px;
color: var(--tl-color-grey-1);
margin-bottom: 12px;
}
.request-content .request-item-wrap.eg-recapiti-wrap .request-item span i{
color: var(--tl-color-theme-primary);
font-size: 16px;
width: 20px;
text-align: center;
}
.request-content .request-item-wrap.eg-recapiti-wrap .request-item p{
margin-bottom: 8px;
line-height: 1.5;
}
/* i link dei recapiti sono controlli autonomi: 18px x 1,4 = 25 + 10 + 10 = 45.
Il tema li scrive neri con (0,4,1): qui (0,5,1). */
.contact-page-area .request-content .request-item-wrap.eg-recapiti-wrap .request-item a{
color: var(--sav-accento-scuro);
text-decoration: underline;
text-underline-offset: 4px;
width: fit-content;
padding: 10px 0;
line-height: 1.4;
overflow-wrap: anywhere;
}
.contact-page-area .request-content .request-item-wrap.eg-recapiti-wrap .request-item a:hover{ color: var(--tl-color-heading-primary); }
.eg-dati-fiscali{
margin: 30px 0 0;
font-size: 15px;
line-height: 1.5;
color: var(--tl-color-grey-1);
}
.contact-page-area .request-content .contact-img{ margin-top: 30px; }
/* sotto i 992 il modulo scende sotto i recapiti: gli serve aria */
@media only screen and (max-width: 991px){
.contact-page-area .request-form-wrap{ margin-top: 60px; }
}
/* LA MAPPA SENZA IFRAME (divergenza 7 del generatore): al posto del
riquadro di Google da 24px di raggio, una scheda bianca con lo stesso
raggio: indirizzo nel carattere dei titoli, la nota, il bottone del tema
che apre Maps solo se lo si clicca. */
.eg-mappa{
background-color: var(--tl-color-common-white);
border: 1px solid var(--tl-color-border-1);
border-radius: 24px;
padding: 50px 40px;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
column-gap: 40px;
}
.eg-mappa__titolo,
.eg-mappa address,
.eg-mappa__nota{ grid-column: 1; }
.eg-mappa__titolo{
font-family: var(--tl-ff-heading);
font-size: 13px;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--tl-color-grey-1);
margin: 0 0 12px;
}
.eg-mappa address{
font-family: var(--tl-ff-heading);
font-size: 30px;
line-height: 1.2;
font-style: normal;
color: var(--tl-color-heading-primary);
margin: 0 0 12px;
}
.eg-mappa__nota{ margin: 0; color: var(--tl-color-text-body); }
.eg-mappa .tl-primary-btn{
grid-column: 2;
grid-row: 1 / 4;
align-self: center;
max-width: 100%;
}
@media only screen and (max-width: 767px){
.eg-mappa{ grid-template-columns: 1fr; padding: 30px; }
.eg-mappa .tl-primary-btn{ grid-column: 1; grid-row: auto; width: fit-content; margin-top: 24px; }
.eg-mappa address{ font-size: 24px; }
}
/* --- 10.6 Correzioni MISURATE a 360 dopo la prima veste ---------------
Le pillole della card: la
del tema e' un flex senza a-capo, e a 360
«Coppie e singoli» + «Soggiorni di lavoro» non ci stanno in 300px: la
seconda pillola si spezzava su due righe e usciva dal riquadro. A capo
con lo stesso passo (10px) del tema, e ogni pillola resta su una riga. */
.project-item .project-img ul{
flex-wrap: wrap;
gap: 8px 10px;
right: 30px;
}
.project-item .project-img ul li:not(:last-of-type){ margin-right: 0; }
.project-item .project-img ul li span{ white-space: nowrap; }
/* Il tema spegne TUTTI i . */
.eg-consenso{ display: flex; gap: .75rem; align-items: flex-start; margin: 0 0 24px; }
/* 24x24 e non 20: e' la misura minima di un bersaglio puntato (WCAG 2.5.8),
MISURATA a 390 e a 1280 con tools/shoot.mjs, che a 20px la segnalava. */
.eg-consenso input[type="checkbox"]{
flex: 0 0 auto; width: 24px; height: 24px; margin-top: 1px;
accent-color: var(--sav-accento-fondo);
}
/* la label del tema dentro `.form-item` e' un'etichetta di campo (piccola,
spaziata): qui e' una FRASE da leggere, e torna testo normale. */
.eg-modulo .eg-consenso label{
margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400;
text-transform: none; letter-spacing: 0; display: inline;
}
.eg-modulo--chiara .eg-consenso label{ color: var(--tl-color-text-body); }
.eg-modulo--chiara .eg-consenso a{ color: var(--sav-accento-scuro); text-decoration: underline; }
.eg-modulo--scura .eg-consenso a{ color: var(--sav-accento-su-scuro); text-decoration: underline; }
.eg-consenso input[type="checkbox"]:focus-visible{
outline: 2px solid var(--sav-accento-scuro); outline-offset: 2px;
}
/* La riga sotto il tasto («Per esteso: informativa privacy»): il tema
veste `.eg-form-hint` come testo di servizio e il suo nasceva dello
stesso colore del testo, cioe' non si vedeva che era un link. */
.eg-modulo--chiara .eg-form-hint a{ color: var(--sav-accento-scuro); text-decoration: underline; }
.eg-modulo--scura .eg-form-hint a{ color: var(--sav-accento-su-scuro); text-decoration: underline; }
/* Il riquadro Cloudflare: `data-size="flexible"` lo fa largo quanto la
colonna. I 65px di altezza minima sono la misura del widget montato e
servono a non far saltare il layout mentre arriva (CLS). */
.eg-turnstile{ margin-bottom: 24px; min-height: 65px; }
/* L'esito. Vuoto non si vede: `:empty` prima, o resterebbe un filetto
colorato sotto al tasto anche a pagina appena aperta. */
.eg-lead-esito:empty{ display: none; }
.eg-lead-esito{
margin-top: 20px; padding: 14px 18px;
border-left: 3px solid var(--sav-accento-fondo);
background: #EEEEEE;
font-size: 15px; line-height: 1.55; color: var(--tl-color-heading-primary);
}
/* verde e rosso solo come SEGNO accanto al testo, mai come unico
portatore dell'informazione (WCAG 1.4.1): la frase dice gia' tutto. */
.eg-lead-esito--ok{ border-left-color: #2E7D32; }
.eg-lead-esito--errore{ border-left-color: #C62828; }
.eg-lead-esito:focus{ outline: 2px solid var(--sav-accento-scuro); outline-offset: 2px; }
.eg-modulo--scura .eg-lead-esito{ background: rgba(255,255,255,.08); color: #fff; }
/* A invio riuscito i campi se ne vanno e resta la risposta: un modulo
vuoto sotto un «richiesta inviata» invita a rimandarla. */
form[data-eg-stato="inviato"] .eg-lead-campi{ display: none; }
/* --- la pagina dell'informativa -------------------------------------
Solo testo: si allunga la misura di riga e si stringe l'interlinea dei
titoli, che il tema dimensiona per una pagina di servizio. Niente
tipografia nuova: sono le stesse classi del tema. */
.eg-legale p{ max-width: 68ch; }
.eg-legale .details-title{ margin-top: 48px; }
.eg-legale .details-title:first-child{ margin-top: 0; }
/* GERARCHIA: dentro `.service-details-content` il tema fa `.details-title-2`
(l'h3) di 50px e `.details-title` (l'h2) di 40 — su una pagina di servizio
l'h3 e' un titolo di apertura, qui sarebbe un sottotitolo piu' grande del
titolo, cioe' un errore che si legge. Si riporta sotto: MISURATO a 1280
e a 390 con tools/shoot.mjs. */
.eg-legale .details-title-2{ font-size: 26px; line-height: 1.25; margin: 28px 0 14px; }
/* MENU A TENDINA: freccia giu' a menu chiuso, su a menu aperto (richiesta
del committente 2026-10-03: senza segno la select sembrava un campo di
testo come gli altri). E' un segno d'interfaccia, non il motivo a punta
del marchio. La classe `eg-select--aperto` la mette lead.js (tools/lib/
lead-form.js). Tre classi come la regola del tema `.request-form-wrap
.form-item .form-control`, che altrimenti azzera lo sfondo e con lui la
freccia (succedeva qui: la .eg-select a una classe perdeva). Il colore e'
scritto a mano: un `data:` non legge le variabili CSS. */
.request-form-wrap .form-item .eg-select{
appearance: none;
-webkit-appearance: none;
padding-right: 52px;
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%232B837D' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 22px center;
}
.request-form-wrap .form-item .eg-select.eg-select--aperto{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 8l6-6 6 6' fill='none' stroke='%232B837D' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* PRELOADER SENZA BARRA DI SCORRIMENTO: il tema scrive
`.preloader span{ overflow-x: hidden }` per la sua scritta «ANTRA»; sugli
span del marchio, con l'asse verticale che per regola CSS diventa `auto`,
il testo (piu' alto della sua riga a line-height 1) mostrava per una
frazione di secondo un riquadro con la barra (segnalazione del
committente, 2026-10-03). Gli span del marchio non hanno nulla da tagliare. */
.preloader .eg-site-name span{ overflow: visible; }
/* PRELOADER CENTRATO come sul portale (richiesta del committente,
2026-10-04): il tema centra la scritta con `align-content` su un blocco;
il marchio qui e' un flex in colonna, e su un flex quella proprieta' non
agisce: restava in alto. Lo centra `justify-content`. */
.preloader .eg-site-name{ justify-content: center; }
/* ============================================================
11. GLI ANNUNCI AIRBNB (2026-10-04)
Il catalogo passa da 4 a 17 case in due zone, e ogni scheda porta i
dettagli dell'annuncio (regole, cosa manca, sicurezza, registrazione)
e la mappa. Classi scritte da tools/build-savorani-pages.mjs.
============================================================ */
/* --- 11.1 L'intestazione di zona nel catalogo -------------------------
Un h3 con la geometria di `details-title-2` del tema, staccato dalla
griglia sopra: la prima zona segue l'intestazione di sezione, la
seconda arriva dopo nove card. */
.project-section-inner .eg-zona-titolo{ margin: 70px 0 40px; }
.project-section-inner .section-heading-wrap + .eg-zona-titolo{ margin-top: 60px; }
/* --- 11.2 Le righe di dettaglio della scheda --------------------------
«Non presenti:», «Compresi:», «A richiesta:» e le regole scritte
dall'host: paragrafi del tema, con l'etichetta nel colore dei titoli. */
.project-details-wrap .eg-dettaglio{ margin: 0 0 14px; }
.project-details-wrap .eg-dettaglio strong{ color: var(--tl-color-heading-primary); font-weight: 600; }
.project-details-wrap .eg-servizi + .eg-dettaglio{ margin-top: 30px; }
/* --- 11.3 La mappa della scheda ---------------------------------------
Stessa scheda bianca di contatti (§10.5, `.eg-mappa`), con due azioni
invece di una e la cornice dove mappa.js monta l'iframe di Google SOLO
dopo il clic. Senza JavaScript il bottone non c'e': resta il link. */
.eg-mappa--scheda{ margin-top: 30px; }
.eg-mappa__azioni{
grid-column: 2;
grid-row: 1 / 4;
align-self: center;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.eg-mappa .eg-mappa__azioni .tl-primary-btn{ grid-column: auto; grid-row: auto; }
.eg-mappa__apri{ border: 0; cursor: pointer; }
.no-js .eg-mappa__apri{ display: none; }
.eg-mappa__link{ text-decoration: underline; text-underline-offset: 4px; }
.eg-mappa__cornice{ grid-column: 1 / -1; margin-top: 30px; }
.eg-mappa__cornice[hidden]{ display: none; }
.eg-mappa__cornice iframe{
display: block;
width: 100%;
height: 440px;
border: 0;
border-radius: 16px;
}
@media only screen and (max-width: 767px){
.eg-mappa__azioni{ grid-column: 1; grid-row: auto; margin-top: 24px; }
.eg-mappa .eg-mappa__azioni .tl-primary-btn{ margin-top: 0; }
.eg-mappa__cornice iframe{ height: 340px; }
}
/* le regole scritte dall'host seguono la lista a due colonne: un respiro */
.project-details-wrap .project-details-list + .eg-dettaglio{ margin-top: 20px; }