: passerebbe sotto e
sopra i fondi alternati in modo incoerente. Ogni sezione disegna il
PROPRIO segmento da top:0 a bottom:0, e le giunzioni combaciano da
sole. Così una sezione può decidere di non averlo (la hero), di
averlo spezzato (il problema) o di chiuderlo in arco (l'invito).
============================================================== */
.sez,.invito{position:relative; isolation:isolate}
/* L'asse sta nella GRONDA della colonna di testo, non appiccicato al
bordo della finestra: su uno schermo largo un filo a 40px dal vetro
non appartiene a niente. Il `max()` lo tiene a --asse-x finché la
finestra è stretta, e da lì in poi lo aggancia al margine del testo. */
.sez::before{
content:""; position:absolute; z-index:0; pointer-events:none;
left:max(var(--asse-x), calc(50% - var(--larghezza)/2 + var(--lato)));
top:0; bottom:0; width:1px;
background:var(--linea-oro);
transform-origin:top; transform:scaleY(1);
transition:transform 1.4s var(--lento);
}
/* la losanga: sta sull'asse, all'altezza dell'occhiello */
.sez::after{
content:""; position:absolute; z-index:1; pointer-events:none;
left:max(var(--asse-x), calc(50% - var(--larghezza)/2 + var(--lato)));
top:var(--s-9); width:7px; height:7px;
margin-left:-3px; margin-top:-3px;
background:var(--carta); border:1px solid var(--oro-luce);
transform:rotate(45deg) scale(1);
transition:transform .7s var(--ease) .35s, background .7s var(--ease) .35s;
}
@media (min-width:900px){ .sez::after{top:var(--s-10)} }
/* Lo stato «non ancora disegnato» esiste SOLO se il JS è vivo (regola 4). */
html.js .sez:not(.in)::before{transform:scaleY(0)}
html.js .sez:not(.in)::after{transform:rotate(45deg) scale(0)}
.sez.in::after{background:var(--oro-luce)}
/* 🔴 IL FILO SI SPEZZA. Nella sezione in cui si dice che il corpo si è
bloccato, l'asse ha un vuoto in mezzo. Non è un effetto: è la frase
detta con una linea invece che con una parola. Si ricompone da solo
nella sezione dopo, perché ogni sezione disegna il proprio segmento. */
.sez--notte::before{
background:linear-gradient(180deg,
var(--notte-linea) 0, var(--notte-linea) 34%,
transparent 34%, transparent 66%,
var(--notte-linea) 66%, var(--notte-linea) 100%);
}
.sez--notte::after{background:var(--notte); border-color:var(--notte-oro)}
.sez--notte.in::after{background:var(--notte-oro)}
/* l'olio è una notte tranquilla: filo intero */
.sez--notte.sez--intera::before{background:var(--notte-linea)}
/* =========================== 6 · HERO ===========================
🔴 RIFATTA IL 16/08 — via la fotografia, dentro il SIGILLO.
Prima la hero era a due colonne: parole a sinistra, fotografia dentro
la volta a destra. Domenico l'ha bocciata su due punti insieme, e
avevano tutti e due la stessa causa: «la prima immagine mi fa cagare»
e «sembra messa a sinistra». Le fotografie che il cliente ci ha dato
sono mediocri e non ne arriveranno di migliori: appoggiare la prima
schermata su una di quelle era il difetto di impianto. E una hero a
due colonne con un blocco di testo allineato a sinistra e una foto
staccata a destra, senza una foto forte che tenga la destra, si legge
come una composizione sbilanciata — non come una scelta.
Il pezzo migliore che abbiamo è il MARCHIO. Quindi la hero adesso è
costruita su quello: il simbolo dentro due anelli d'oro concentrici,
tutto centrato e simmetrico, su carta. Il marchio è un albero dentro
un arco d'oro aperto: gli anelli sono lo stesso segno che continua
fuori dal file, e il risultato è un sigillo, che è esattamente quello
che uno studio deve sembrare. Zero fotografie sopra la piega, zero
asimmetrie da spiegare.
============================================================== */
.hero{position:relative; padding-top:var(--testata); overflow:hidden}
.hero .parola{position:relative; isolation:isolate;
display:flex; flex-direction:column; align-items:center; text-align:center;
padding:var(--s-7) var(--lato) var(--s-6); max-width:var(--larghezza); margin-inline:auto}
/* IL SIGILLO — il marchio dentro l'anello.
Il simbolo NON viene ingrandito oltre il suo peso: cresce l'aria che
ha intorno, non lui. È la differenza tra «grande» ed «elegante», che
al giro scorso avevo sbagliato. */
.sigillo{position:relative; display:grid; place-items:center;
width:min(48vw,190px); aspect-ratio:1}
.sigillo .stemma{width:64%; height:auto; position:relative; z-index:1}
/* l'anello interno: 1px d'oro, concentrico all'arco stampato nel logo */
.sigillo::before{content:""; position:absolute; inset:0; border-radius:50%;
border:1px solid var(--linea-oro)}
/* l'anello esterno, più largo e più tenue: dà profondità senza rumore */
.sigillo::after{content:""; position:absolute; inset:-13px; border-radius:50%;
border:1px solid var(--linea-oro); opacity:.45}
/* la luce calda dietro: stacca il sigillo dalla carta senza una scatola */
.hero .parola::before{content:""; position:absolute; z-index:-1;
left:50%; top:0; width:min(150vw,860px); aspect-ratio:1; translate:-50% -32%;
background:radial-gradient(circle at center,
rgba(197,166,119,.20) 0, rgba(197,166,119,.07) 42%, transparent 68%);
pointer-events:none}
@media (min-width:900px){
.sigillo{width:214px}
.sigillo::after{inset:-17px}
}
/* misura larga: il titolo dice il nome intero dello studio, quindi è
lungo. A 13ch cadeva in cinque righe. */
.hero h1{font-size:var(--t-display); color:var(--inchiostro); margin-top:var(--s-6); max-width:16ch}
.hero h1 em{font-style:normal; color:var(--oro)}
/* le quattro parole del marchio, staccate dal titolo da un filo d'oro
corto: sono la didascalia del nome, non una frase a sé */
.quattro{position:relative; display:flex; flex-wrap:wrap; justify-content:center;
gap:.5rem var(--s-4); margin-top:var(--s-6); padding-top:var(--s-6);
font-size:.6875rem; letter-spacing:.24em; text-transform:uppercase; color:var(--salvia)}
.quattro::before{content:""; position:absolute; top:0; left:50%; translate:-50% 0;
width:34px; height:1px; background:var(--oro-luce)}
.quattro span{display:inline-flex; align-items:center; gap:.5rem var(--s-4)}
.quattro span:not(:last-child)::after{content:"·"; color:var(--oro-luce)}
/* sotto i 430px le quattro parole andavano a capo e lasciavano il punto
di separazione appeso a fine riga. Si stringono, non si spezzano. */
@media (max-width:429px){
.quattro{letter-spacing:.14em; gap:.38rem .6rem}
.quattro span{gap:.38rem .6rem}
}
.hero .sotto{margin-top:var(--s-5); font-size:var(--t-guida); color:var(--inchiostro-2);
max-width:32ch; line-height:1.6}
.hero .azioni{display:flex; flex-direction:column; align-items:center;
margin-top:var(--s-6); width:100%; max-width:22rem}
/* la certificazione respira da sola: dentro la stessa scatola del
pulsante si schiacciava contro il bordo e si leggeva come una postilla */
.hero .cred{display:block; margin-top:var(--s-6); font-size:.6875rem; letter-spacing:.14em;
text-transform:uppercase; line-height:1.9; color:var(--inchiostro-3); text-align:center}
.hero .cred b{display:block; font-weight:400; color:var(--salvia)}
/* IL FILO — la hero non finisce con un vuoto: un capello d'oro scende
verso la prima sezione e dice «si continua sotto». Si disegna una
volta sola all'ingresso, non si muove più: niente frecce che
rimbalzano in eterno. */
.hero .filo{display:block; width:1px; height:var(--s-9); margin-top:var(--s-7);
background:linear-gradient(180deg, var(--oro-luce), transparent);
transform-origin:top; transform:scaleY(0);
transition:transform 1.4s var(--lento) 1s}
.hero.mostra .filo{transform:scaleY(1)}
@media (min-width:900px){
.hero{display:flex; align-items:center; justify-content:center; min-height:100svh}
.hero .parola{padding-block:var(--s-6)}
/* misura più larga: a 16ch il nome cadeva in tre righe e da solo
mangiava sessanta pixel della prima schermata */
.hero h1{max-width:19ch}
/* 🔴 IL FILO SPARISCE SU SCHERMO LARGO, e non è una resa.
In colonna aggiungeva 132px e su un portatile da 900px spingeva il
pulsante WhatsApp SOTTO LA PIEGA — il difetto peggiore che una hero
possa avere. Appeso in fondo con `position:absolute` risolveva
l'altezza ma passava dritto sopra la riga della certificazione.
Su desktop lo spazio per un invito a scendere sotto la credenziale
semplicemente non c'è: la hero occupa già esattamente una schermata.
Quindi lì non si mette, e resta dov'è utile davvero — sul telefono. */
.hero .filo{display:none}
}
/* l'entrata: il sigillo, poi il titolo, poi il resto. Una volta sola. */
html.js .hero:not(.mostra) .sigillo{opacity:0; transform:translateY(12px) scale(.96)}
html.js .hero:not(.mostra) h1{opacity:0; transform:translateY(14px)}
html.js .hero:not(.mostra) .quattro{opacity:0}
html.js .hero:not(.mostra) .sotto,
html.js .hero:not(.mostra) .azioni,
html.js .hero:not(.mostra) .cred{opacity:0; transform:translateY(12px)}
.hero .sigillo{transition:opacity 1.2s var(--lento) .05s, transform 1.2s var(--lento) .05s}
.hero h1{transition:opacity .9s var(--ease) .34s, transform .9s var(--ease) .34s}
.hero .quattro{transition:opacity 1s var(--ease) .56s}
.hero .sotto{transition:opacity .9s var(--ease) .66s, transform .9s var(--ease) .66s}
.hero .azioni{transition:opacity .9s var(--ease) .78s, transform .9s var(--ease) .78s}
.hero .cred{transition:opacity .9s var(--ease) .88s, transform .9s var(--ease) .88s}
/* =========================== 7 · SEZIONI ======================== */
.sez{padding-block:4.25rem}
@media (min-width:900px){ .sez{padding-block:var(--s-10)} }
.sez--carta{background:var(--carta-2)}
.sez > .wrap{position:relative; z-index:1}
/* LA NOTTE — tre stanze scure dentro una pagina chiara: il problema,
l'olio, il piede. Servono a dare profondità e a spezzare la corsa. */
/* Il filetto sopra e sotto delimita la stanza in TUTTI E DUE i temi: nel
tema scuro il fondo della notte e quello della pagina si somigliano
troppo, e senza questo la stanza sparirebbe — cioè il ritmo che la
giustifica non esisterebbe più proprio per chi sceglie lo scuro. */
.sez--notte{background:var(--notte); color:var(--notte-testo-2);
border-block:1px solid var(--notte-linea)}
:root[data-tema="scuro"] .sez--notte,
:root[data-tema="scuro"] .piede{background:#0D110B}
:root[data-tema="scuro"] .sez--notte::after{background:#0D110B}
/* IL BOSCO — il capitolo verde. Terza terra della pagina. */
.sez--bosco{background:var(--bosco); color:var(--bosco-testo-2);
border-block:1px solid var(--bosco-linea)}
.sez--bosco .occhiello{color:var(--bosco-oro)}
.sez--bosco h2{color:var(--bosco-testo)}
.sez--bosco h2 em{color:var(--bosco-oro)}
.sez--bosco .intro{color:var(--bosco-testo-2)}
.sez--bosco::before{background:var(--bosco-linea)}
.sez--bosco::after{background:var(--bosco); border-color:var(--bosco-oro)}
.sez--bosco.in::after{background:var(--bosco-oro)}
:root[data-tema="scuro"] .sez--bosco{background:#2C3425}
.sez--notte .occhiello{color:var(--notte-oro)}
.sez--notte h2{color:var(--notte-testo)}
.sez--notte h2 em{color:var(--notte-oro)}
.sez--notte .intro{color:var(--notte-testo-2)}
.sez--notte .filetto{background:linear-gradient(90deg, transparent 0, var(--notte-linea) 22%, var(--notte-linea) 78%, transparent 100%)}
.sez--notte .filetto::after{background:var(--notte-oro)}
.testa{max-width:var(--stretta)}
.testa h2{font-size:var(--t-titolo); margin-top:var(--s-4)}
.testa h2 em{font-style:normal; color:var(--oro)}
.testa .intro{margin-top:var(--s-5); font-size:var(--t-guida); color:var(--inchiostro-2);
line-height:1.7; max-width:34ch}
/* 🔴 QUESTE DUE RIGHE STANNO QUI, DOPO `.testa .intro`, E NON PIÙ SU.
Messe insieme al resto del blocco notte/bosco avevano la stessa
specificità di `.testa .intro` ma venivano PRIMA, quindi perdevano:
l'introduzione delle stanze scure restava color inchiostro su fondo
scuro. Misurato: 2,2:1 sulla notte e 1,2:1 sul verde — cioè invisibile.
Un contrasto non si giudica a occhio su uno screenshot: si calcola. */
.sez--notte .testa .intro{color:var(--notte-testo-2)}
.sez--bosco .testa .intro{color:var(--bosco-testo-2)}
/* stessa storia per la parola in evidenza dentro il titolo: `.testa h2 em`
ha la stessa specificità di `.sez--notte h2 em` e viene dopo, quindi
vinceva lei e l'oro chiaro tornava oro scuro su fondo scuro (3:1). */
.sez--notte .testa h2 em{color:var(--notte-oro)}
.sez--bosco .testa h2 em{color:var(--bosco-oro)}
/* Testa a due colonne: il titolo a sinistra, l'introduzione a destra.
Serve a NON avere otto sezioni con la stessa identica testata. */
@media (min-width:1000px){
.testa--larga{max-width:none; display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s-8);
align-items:end}
.testa--larga .occhiello{grid-column:1}
.testa--larga h2{grid-column:1; margin-top:var(--s-4)}
.testa--larga .intro{grid-column:2; grid-row:1 / span 2; margin-top:0; align-self:end}
}
/* IL MOMENTO A TUTTA PAGINA — «il problema» e «l'olio».
Non sono sezioni con una testata: sono due respiri, in cui il testo
che c'è già diventa l'unico elemento in campo. Non ho aggiunto una
parola: ho tolto tutto il resto. */
.sez--respiro{padding-block:var(--s-9)}
/* era `--s-10 × 1.35` (162px sopra e sotto): su schermo largo la stanza
dell'olio diventava 620px di nero per una frase sola, e non leggeva
come una pausa — leggeva come un buco. Con 120px resta il respiro e
sparisce il vuoto. */
@media (min-width:900px){ .sez--respiro{padding-block:var(--s-10)} }
/* La misura è larga apposta: stretta, il titolo si spezzava in sei righe
e diventava un manifesto funebre — che su un pubblico di provincia è
esattamente l'effetto da non fare. Così cade in due o tre righe. */
.sez--respiro .testa{max-width:34rem; margin-inline:auto; text-align:center}
.sez--respiro .testa h2{font-size:clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
line-height:1.25; letter-spacing:.03em; margin-top:var(--s-5)}
.sez--respiro .testa .intro{margin-top:var(--s-6); margin-inline:auto; max-width:30ch;
font-size:var(--t-guida); text-wrap:balance}
.sez--respiro .testa .filetto{margin:var(--s-6) auto 0; width:min(180px,40%)}
/* ============= 8 · I QUATTRO PILASTRI (dal marchio) =============
🔴 RIFATTA AL SECONDO GIRO. Prima erano quattro colonne di testo
piccolo con un filetto sopra: la sezione più debole della pagina, e
soprattutto una che un visitatore qualunque scorreva senza vedere.
CORPO · MENTE · ENERGIA · EQUILIBRIO sono già scritte sotto il marchio
del cliente. Qui diventano quattro PAROLE GRANDI su fondo verde: un
capitolo che si riconosce da lontano, senza leggere niente. La parola
fa da titolo e da immagine insieme — è l'unico modo di dare peso a una
sezione che di fotografie non ne ha nemmeno una. */
.pilastri{display:grid; grid-template-columns:1fr; gap:0; margin-top:var(--s-8)}
.pilastro{padding-block:var(--s-6); border-top:1px solid var(--bosco-linea);
display:grid; grid-template-columns:1fr; gap:var(--s-3); align-items:baseline}
.pilastro:first-child{border-top:0; padding-top:0}
/* Le quattro parole restano il centro del capitolo, ma a MISURA PICCOLA
e molto spaziate: a 4,4rem erano un manifesto, e su un massaggiatore
di provincia un manifesto sembra una svendita. In capitali incise
spaziate, la stessa parola dice «studio» invece di «offerta». */
.pilastro h3{font-family:var(--f-titolo); font-weight:400;
font-size:clamp(1.05rem, .95rem + .4vw, 1.3rem); line-height:1.3;
letter-spacing:.24em; text-transform:uppercase; color:var(--bosco-oro); margin:0}
.pilastro p{font-size:var(--t-piccolo); color:var(--bosco-testo-2); line-height:1.75; max-width:46ch}
@media (min-width:900px){
.pilastri{margin-top:var(--s-9)}
/* La parola in una colonna stretta a sinistra, il testo a destra: è
l'impaginazione di un indice o di un glossario, ed è lì che questa
sezione trova il suo tono. La colonna dell'etichetta resta larga
uguale per tutte e quattro, così i testi partono tutti dalla stessa
verticale: l'allineamento è quello che fa sembrare curata una pagina. */
.pilastro{grid-template-columns:13rem minmax(0,1fr); gap:var(--s-7);
padding-block:var(--s-6); align-items:baseline}
}
/* =========================== 9 · BIVIO ==========================
Sul telefono le due fotografie ESCONO a tutta finestra: è il primo
momento di pelle grande, e l'antidoto al «freddo» di una pagina di
sola tipografia. Lo sconfinamento si fa annullando padding che
esistono davvero — mai con 100vw, che sbaglia sempre di quanto è
larga la barra di scorrimento. */
.bivio{display:grid; grid-template-columns:1fr; gap:var(--s-8); margin-top:var(--s-8)}
@media (min-width:760px){ .bivio{grid-template-columns:1fr 1fr; gap:var(--s-6)} }
.strada{display:flex; flex-direction:column; text-decoration:none}
/* Niente più sconfinamento a tutta finestra. Era la cosa che faceva
sembrare il sito «pieno di foto enormi»: un'immagine che tocca i due
bordi dello schermo non ha scampo, si legge come un cartellone.
Adesso è una tavola dentro la gabbia, come tutte le altre. */
.strada .foto{overflow:hidden; width:min(100%,270px); aspect-ratio:4/5;
background:var(--carta-3); border-radius:var(--volta-alta); margin-inline:0}
@media (min-width:760px){ .strada .foto{width:min(100%,220px)} }
.strada .foto img{width:100%; height:100%; object-fit:cover}
.strada .dentro{padding-top:var(--s-5)}
.strada h3{font-family:var(--f-titolo); font-size:1.3rem; font-weight:400; letter-spacing:.02em;
margin-block:var(--s-3)}
.strada p{font-size:var(--t-piccolo); color:var(--inchiostro-2); line-height:1.7}
.strada .vai{display:inline-flex; align-items:center; gap:.55em; margin-top:var(--s-4);
min-height:44px; font-size:var(--t-occhiello); letter-spacing:.16em;
text-transform:uppercase; color:var(--oro)}
.strada .vai svg{width:1.05em; transition:transform .45s var(--ease)}
.strada:hover .vai svg{transform:translateX(7px)}
/* ======================= 10 · TRATTAMENTI =======================
Nove voci non possono essere nove riquadri identici in fila: era un
muro. Le prime due — quelle su cui il cliente punta, drenaggio e
madera — si distendono su tutta la riga con la fotografia larga e il
testo a fianco. Le altre sette restano in griglia. Il numero d'ordine
esce dalla fotografia e diventa una cifra editoriale sulla carta. */
/* 🔴 LA BARRA DELLE FAMIGLIE, AGGANCIATA — 16/08.
I nove trattamenti sono 5.177px sul telefono: il 42% dell'intera
pagina, dodici schermate di rettangoli. L'unico strumento che li
riduce a due o quattro è questa barra — e finora sembrava una
didascalia grigia (--inchiostro-3, 4,37:1: sotto soglia) che scorreva
via dopo mezza schermata, cioè spariva proprio quando cominciava a
servire. Adesso resta incollata sotto la testata per tutta la sezione:
il muro smette di essere un muro perché acquista una testata corrente.
Il fondo è --carta-2 come la sezione, così le schede scorrono sotto
senza un gradino di colore, e il segno che c'è una barra lo dà il
filetto d'oro, non un rettangolo diverso.
⚠️ La calotta che copre il gioco fra testata e barra è una box-shadow
e NON uno ::before: sotto i 600px la barra diventa un contenitore di
scorrimento, e uno pseudo-elemento a bottom:100% verrebbe ritagliato
via proprio sul telefono — cioè nell'unico caso in cui serve. */
.filtri{
position:sticky; top:calc(var(--testata) - 2px); z-index:40;
display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-3);
margin-top:var(--s-7);
padding-block:var(--s-2);
background:var(--carta-2);
border-bottom:1px solid var(--oro);
box-shadow:0 -1.5rem 0 var(--carta-2);
margin-inline:calc(-1 * (var(--lato) + var(--gronda))) calc(-1 * var(--lato));
padding-inline:calc(var(--lato) + var(--gronda)) var(--lato);
scroll-padding-inline:var(--lato);
}
@media (min-width:600px){ .filtri{padding-block:var(--s-3)} }
/* Quattro comandi in 12px grigio senza bordo sembrano una didascalia.
Pastiglia a spigolo vivo col filo d'oro: è lo stesso segno che il sito
usa già sui `.tondo` della testata, non una forma nuova.
Bordo --oro e non --linea-oro: 4,69:1 contro 1,47:1, e la WCAG 1.4.11
chiede 3:1 al contorno di un comando. */
.filtro{
display:inline-flex; align-items:center; min-height:44px;
padding:0 .95em; cursor:pointer;
background:transparent; border:1px solid var(--oro); border-radius:0;
font-family:var(--f-testo); font-size:var(--t-occhiello);
letter-spacing:.16em; text-transform:uppercase;
color:var(--inchiostro-2);
transition:color .3s var(--ease), background .3s var(--ease),
border-color .3s var(--ease);
}
.filtro::after{display:none} /* la sottolineatura non serve più */
.filtro:hover{color:var(--oro)}
/* var(--carta) e non il crema fisso: col crema fisso, in tema scuro,
sarebbe 2,09:1 — lo stesso difetto trovato oggi sul pulsante. */
.filtro[aria-pressed="true"]{background:var(--salvia); border-color:var(--salvia);
color:var(--carta)}
/* il fuoco da tastiera va DENTRO la pastiglia: dentro un contenitore con
overflow-x:auto un outline sfalsato in fuori viene ritagliato ai due
estremi della fila. */
.filtro:focus-visible{outline:2px solid var(--oro); outline-offset:-4px}
/* Sotto i 600px i quattro filtri andavano a capo e la barra diventava
alta 100px: un ottavo di schermo mangiato per tutto il catalogo.
Restano su una riga sola e si sfogliano di lato — scorrimento
orizzontale DENTRO il componente, mai sul corpo della pagina. */
@media (max-width:599px){
.filtri{flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain;
scrollbar-width:none}
.filtri::-webkit-scrollbar{display:none}
.filtro{flex:none; white-space:nowrap; letter-spacing:.1em; padding-inline:.75em}
}
/* con le schede chiuse dal bordo il vuoto fra una e l'altra non serve
più a separarle: si stringe, e la griglia diventa una griglia. */
.elenco{display:grid; grid-template-columns:1fr; gap:var(--s-5); margin-top:var(--s-7)}
@media (min-width:760px){ .elenco{grid-template-columns:1fr 1fr; gap:var(--s-5)} }
@media (min-width:1100px){ .elenco{grid-template-columns:repeat(3,1fr)} }
/* 🔴 LE NOVE SCHEDE SONO SCATOLE, DAL 16/08.
Prima erano nove blocchi di testo sciolti sul fondo della sezione, con
una fotografia stretta appoggiata a sinistra e un buco di 130px alla
sua destra. Nove volte lo stesso vuoto: da lontano non sembrava una
griglia, sembrava una pagina non finita — ed era lo stesso difetto che
Domenico aveva già segnalato sulla hero («sembra messa a sinistra»).
Adesso ogni trattamento sta dentro una scheda con il suo bordo e la
sua carta, e la fotografia occupa tutta la larghezza interna: niente
più spazio morto, e la griglia si legge come una griglia.
La carta della scheda è l'OPPOSTO di quella della stanza (scheda su
`--carta`, sezione su `--carta-2`), la stessa logica dei tre passaggi.
Una regola sola, applicata ovunque, e il sito sembra pensato. */
.voce{display:flex; flex-direction:column; position:relative;
background:var(--carta); border:1px solid var(--linea); padding:var(--s-5)}
.voce[hidden]{display:none}
/* ⚠️ come per i passi: longhand obbligatorio, altrimenti `.rv` vince e
il bordo del passaggio del mouse eredita i suoi tempi d'ingresso. */
.elenco .voce{
transition-property:opacity, transform, border-color;
transition-duration:.9s,.9s,.45s;
transition-timing-function:var(--lento),var(--lento),var(--ease);
transition-delay:0s,0s,0s}
@media (hover:hover){ .elenco .voce:hover{border-color:var(--linea-oro)} }
/* 4/3 e non 4/5: la fotografia adesso è larga quanto la scheda, e in
verticale sarebbe diventata il muro di immagini che avevamo già tolto.
Bassa e larga resta una tavola, con la volta in cima a fare da firma. */
.voce .foto{position:relative; width:100%; aspect-ratio:16/10;
overflow:hidden; background:var(--carta-3); border-radius:var(--volta-alta)}
/* sul telefono le schede stanno in colonna singola — 4/3 a tutta
larghezza faceva nove immagini da 250px una sotto l'altra, cioè sei
schermate di sole fotografie. Da 760px in su, dove la scheda è larga
un terzo di pagina, la tavola può tornare più alta. */
@media (min-width:760px){ .voce .foto{aspect-ratio:4/3} }
.voce .foto img{width:100%; height:100%; object-fit:cover;
transition:transform 1.4s var(--lento)}
@media (hover:hover){ .elenco .voce:hover .foto img{transform:scale(1.045)} }
/* LA SEGNATURA — la cifra e la famiglia stanno sulla carta, sotto la
fotografia, separate da un filetto d'oro: una didascalia da catalogo.
Prima erano appoggiate SOPRA l'immagine con un'ombra nera pesante,
cioè con la prova che lì non avevano contrasto. */
/* `flex:none` e `margin-top:0` sono obbligatori: la segnatura è un e
senza questi la regola `.voce p{flex:1}` la faceva CRESCERE fino a
111px invece di 44, e i titoli delle schede uscivano sfalsati di 67px
fra una colonna e l'altra. Qui l'eleganza è l'allineamento. */
.voce .segna{display:flex; align-items:baseline; gap:var(--s-4); flex:none; margin-top:0;
padding-top:var(--s-3); border-top:1px solid var(--linea-oro)}
/* IL NUMERO A SCALA DA STAMPA. Al primo giro era un 16px educato che
nessuno notava. Nove trattamenti numerati grandi si vedono scorrendo
veloce e dicono da soli «qui c'è un repertorio»: è tipografia che fa
il lavoro di un'immagine, in una griglia dove le immagini si
somigliano per forza. */
/* Numero di catalogo, non numerone: a 2,6rem rubava la scena al nome del
trattamento, che è la cosa che conta. Piccolo e spaziato fa il suo
mestiere — dire che siamo in un repertorio ordinato — e sparisce.
`--oro` e non `--oro-luce`: l'oro chiaro sul crema misura 2:1. */
.voce .num{font-family:var(--f-titolo); font-size:.9375rem;
letter-spacing:.14em; color:var(--oro); flex:none}
.voce .fam{font-size:.625rem; letter-spacing:.2em; text-transform:uppercase;
color:var(--inchiostro-2)} /* era --inchiostro-3: 4,4:1, sotto soglia per un pelo */
.voce .testo{padding-top:var(--s-4); display:flex; flex-direction:column; flex:1}
.voce .segna + h3{margin-top:var(--s-4)}
.voce h3{font-family:var(--f-titolo); font-size:1.25rem; font-weight:400; letter-spacing:.02em}
/* LA RIGA «PER COSA SERVE» — è la cosa che la persona sta cercando
(«ho la cellulite, cosa mi togli?»), quindi si deve leggere, non
decifrare. Prima era 11px in maiuscoletto spaziato: bella da vedere e
faticosa da leggere. Ora è una frase normale, in oro, sotto il nome. */
.voce h3 em{display:block; font-family:var(--f-testo); font-size:.9375rem; font-style:normal;
font-weight:400; letter-spacing:0; text-transform:none; color:var(--oro);
margin-top:.45rem; line-height:1.45}
.voce p{font-size:var(--t-piccolo); color:var(--inchiostro-2); line-height:1.7; margin-top:var(--s-3); flex:1}
.voce p b{font-weight:400; color:var(--inchiostro)}
.voce .scrivi{align-self:flex-start; margin-top:var(--s-4); font-size:var(--t-occhiello);
letter-spacing:.16em; text-transform:uppercase; text-decoration:none; color:var(--oro);
position:relative; padding-block:.75em; min-height:44px; display:inline-flex; align-items:center}
.voce .scrivi::after{content:""; position:absolute; left:0; right:0; bottom:.9em; height:1px;
background:var(--oro); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease)}
.voce:hover .scrivi::after{transform:scaleX(1); transform-origin:left}
/* --inchiostro-2 e non -3: sulla carta-2 nuova il -3 scende a 4,07:1 su
un testo da 17px. Oggi questo messaggio non si vede mai (ogni famiglia
ha almeno un trattamento), ma è una mina innescata. */
.vuoto{grid-column:1/-1; padding-block:var(--s-7); color:var(--inchiostro-2)}
/* `.voce--distesa` (le due schede a tutta riga) è stata tolta il 16/08:
la classe non esisteva più nell'HTML da due riscritture, quindi erano
trenta righe di foglio che nessun elemento poteva mai incontrare. */
/* =================== 11 · I VIDEO DEL CLIENTE ===================
Tre clip verticali impilate su un telefono fanno più di due schermi
di dito per trenta secondi di ripresa. Diventano una fila che si
sfoglia, con l'aggancio: zero JS in più, e l'osservatore che carica i
video pigri continua a funzionare — anzi meglio, perché quelli fuori
dalla fila non si scaricano finché non li si raggiunge. */
/* Tre clip verticali a tutta colonna erano tre muri: a 74% di larghezza
una clip 9:16 diventava alta mezzo metro. Ridotte a 50% sul telefono e
a 200px su schermo largo: si sfogliano come provini, non come manifesti. */
.video-fila{display:grid; grid-auto-flow:column; grid-auto-columns:50%;
gap:var(--s-4); margin-top:var(--s-8);
overflow-x:auto; overscroll-behavior-x:contain;
scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
padding-bottom:var(--s-4); scrollbar-width:thin;
margin-right:calc(-1 * var(--lato)); padding-right:var(--lato)}
.clip{scroll-snap-align:start}
@media (min-width:760px){
.video-fila{grid-auto-flow:row; grid-template-columns:repeat(3,minmax(0,200px));
grid-auto-columns:auto; justify-content:start;
overflow:visible; margin-right:0; padding-right:0; gap:var(--s-6)}
}
/* niente fondo sul `.clip`: la didascalia ora sta FUORI dal video, e su
quel fondo sabbia l'oro scendeva a 3,9:1. Il fondo di attesa serve solo
al riquadro del video, che ce l'ha già per conto suo. */
/* colonna flex: serve all'etichetta «senza audio», che con `align-self`
si stringe sul proprio testo invece di stirarsi per tutta la clip. */
.clip{position:relative; margin:0; overflow:visible;
display:flex; flex-direction:column}
.clip video{border-radius:var(--volta-clip)}
.clip video{display:block; width:100%; height:auto; aspect-ratio:480/848; object-fit:cover;
background:var(--carta-3)}
/* la didascalia sta sulla carta, sotto: il gradiente nero sopra il video
era il segno più riconoscibile del template */
.clip figcaption{padding:var(--s-4) 0 0; font-size:var(--t-piccolo);
color:var(--inchiostro-2); line-height:1.5}
.clip figcaption b{display:block; font-family:var(--f-titolo); font-size:var(--t-occhiello);
letter-spacing:.16em; text-transform:uppercase; color:var(--oro); font-weight:400; margin-bottom:.35rem}
/* 🔴 16/08 — IL RETTANGOLO NERO ESCE DALLA VOLTA.
Era l'unico pieno scuro di una pagina fatta di capelli d'oro e
capitali, ed era appoggiato ESATTAMENTE sulla curva della volta del
video: la tagliava e sbordava sulla carta, su tutte e tre le clip.
Scende sotto la clip e diventa un'etichetta della stessa famiglia dei
filtri e delle famiglie di trattamento: il sito torna a parlare una
lingua sola. Contrasto: inchiostro-2 su carta = 7,57:1. */
.clip .muto{
position:static; align-self:flex-start;
margin-top:var(--s-3); padding:.32em .7em;
display:inline-flex; align-items:center; gap:.4em;
background:transparent; border:1px solid var(--linea-oro);
color:var(--inchiostro-2);
font-size:.625rem; letter-spacing:.14em; text-transform:uppercase}
.clip .muto svg{width:12px; height:12px; color:var(--oro)}
/* =========================== 12 · PASSI =========================
🔴 RIFATTI IL 16/08. Prima erano tre colonne di testo con un numerino
e un filetto sopra: «fatto brutto, non c'è animazione, non si capisce»
— ed era vero. Tre paragrafi affiancati non si leggono come una
sequenza, si leggono come tre paragrafi.
Adesso sono tre SCHEDE costruite, ognuna con il suo numero dentro una
medaglia d'oro appoggiata sul bordo superiore, e un filo che collega
la medaglia di una alla successiva. Il filo entra insieme alla scheda
a cui appartiene: siccome le schede entrano sfalsate (0 · .09s · .18s)
il collegamento si disegna da sinistra a destra, 1 → 2 → 3. È la
sequenza fatta vedere, non scritta.
============================================================== */
.passi{display:grid; grid-template-columns:1fr; gap:var(--s-8); margin-top:var(--s-9)}
@media (min-width:860px){ .passi{grid-template-columns:repeat(3,1fr); gap:var(--s-7)} }
/* 🔴 SECONDA CORREZIONE, STESSA NOTTE — VIA LA SCATOLA, ENTRA L'ARCO.
Tre paragrafi affiancati non si leggono come una sequenza: vero, ed è
per questo che poche ore fa erano diventati schede. Ma tre schede
subito sotto NOVE schede si leggono come la stessa sezione due volte,
e col pollice sono dodici rettangoli consecutivi.
La sequenza non la faceva la scatola: la fanno il numero, il filo e
adesso l'arco. Ogni passaggio è una volta d'oro aperta con la medaglia
numerata appoggiata sulla chiave. La medaglia sta già a `top:0` con
`translate:-50%`, cioè esattamente sulla chiave: diventa la chiave di
volta senza spostare una riga di HTML.
Dichiarazione onesta: questa volta è VOLUTAMENTE RIBASSATA, non è
l'arco a tutto sesto del marchio. L'imposta è fissa a 78px perché il
filo che unisce 1→2→3 deve cadere alla stessa altezza su tutte e tre
le colonne, che hanno testi di lunghezza diversa; un arco a tutto
sesto qui vorrebbe 118-173px di imposta, cioè mezza schermata di
telefono di aria vuota sopra ogni passaggio. L'arco tondo del marchio
sta sull'invito, dove il raggio è calcolato sulla metà della larghezza
e non deve allinearsi con nient'altro. */
.passo{position:relative; text-align:center;
background:transparent; border:0;
padding:calc(var(--imposta) + var(--s-5)) var(--s-5) var(--s-6)}
.passo h3,.passo p{position:relative; z-index:1}
/* LA VOLTA. `#metodo` è una `.sez` senza `.sez--carta`, quindi il fondo
è --carta come la medaglia: la medaglia continua a bucare la chiave
invece di sembrarci incollata sopra. */
.passo::before{
content:""; position:absolute; z-index:0; pointer-events:none; inset:0;
border:1px solid var(--arco); border-bottom:0;
border-radius:50% 50% 0 0 / var(--imposta) var(--imposta) 0 0;
transform-origin:bottom center; transform:scaleY(1);
transition:transform 1s var(--lento) .3s}
html.js .passo.rv:not(.in)::before{transform:scaleY(0)}
/* ⚠️ TRANSIZIONI SCRITTE PER ESTESO, E NON È PEDANTERIA.
Le schede sono anche `.rv`, e più in basso nel foglio ci sono
`.rv{transition:…}` e `html.js .rv[data-ritardo]{transition-delay:…}`.
Con la scorciatoia `transition:` quelle regole vincevano e finivano
per ritardare ANCHE il passaggio del mouse: la scheda si schiariva
due decimi dopo il puntatore. Qui ogni proprietà ha il suo tempo, e
il ritardo d'ingresso tocca solo entrata e salita. */
.passi .passo{
transition-property:opacity, transform, background-color, border-color;
transition-duration:.9s,.9s,.5s,.5s;
transition-timing-function:var(--lento),var(--lento),var(--ease),var(--ease);
transition-delay:0s,0s,0s,0s}
html.js .passi .passo[data-ritardo="1"]{transition-delay:.14s,.14s,0s,0s}
html.js .passi .passo[data-ritardo="2"]{transition-delay:.28s,.28s,0s,0s}
/* la medaglia: appoggiata a cavallo del bordo, sul fondo della PAGINA e
non su quello della scheda — così sembra bucata dentro, non incollata */
.passo .n{position:absolute; top:0; left:50%; translate:-50% -50%;
display:grid; place-items:center; width:52px; height:52px; border-radius:50%;
background:var(--carta); border:1px solid var(--linea-oro);
font-family:var(--f-titolo); font-size:.9375rem; font-weight:400;
letter-spacing:.08em; line-height:1; color:var(--oro);
transition:border-color .5s var(--ease), color .5s var(--ease)}
.passo h3{font-family:var(--f-titolo); font-size:1.15rem; font-weight:400; letter-spacing:.03em;
margin-bottom:var(--s-4)}
.passo p{font-size:var(--t-piccolo); color:var(--inchiostro-2); line-height:1.7;
max-width:30ch; margin-inline:auto}
/* IL FILO CHE COLLEGA — verticale sul telefono, orizzontale da 860px.
Sta sull'altezza esatta della medaglia, quindi i tre numeri stanno su
una riga sola e il percorso si legge senza spiegazioni. */
.passo:not(:last-child)::after{content:""; position:absolute; pointer-events:none;
background:var(--linea-oro);
top:100%; left:50%; translate:-50% 0; width:1px; height:var(--s-8);
transform:scaleY(1); transform-origin:top;
transition:transform .8s var(--lento) .4s}
html.js .passo.rv:not(.in)::after{transform:scaleY(0)}
.passo[data-ritardo="1"]::after{transition-delay:.62s}
@media (min-width:860px){
/* ⚠️ `top:var(--imposta)` e non `top:0`: a 0 il filo passava sopra le
SPALLE degli archi, cioè restava sospeso in aria sopra la curva.
All'imposta l'arco è già verticale, quindi il filo unisce gamba a
gamba e i tre archi stanno su un'unica architrave. */
.passo:not(:last-child)::after{top:var(--imposta); left:100%; translate:0 0;
width:var(--s-7); height:1px; transform:scaleX(1); transform-origin:left}
html.js .passo.rv:not(.in)::after{transform:scaleX(0)}
}
/* il tocco: non reagisce la scheda (non c'è più), reagisce la SEQUENZA.
Si accende l'arco. Niente ombre, niente sollevamenti da template. */
@media (hover:hover){
.passo:hover::before{border-color:var(--oro-luce)}
.passo:hover .n{border-color:var(--oro); color:var(--oro)}
}
/* ================= 13 · MOTIVI, AFFIANCO ======================== */
.motivi{display:grid; grid-template-columns:1fr; gap:0; margin-top:var(--s-7)}
@media (min-width:760px){ .motivi{grid-template-columns:1fr 1fr; gap:0 var(--s-7)} }
.motivo{padding:var(--s-5) 0; border-top:1px solid var(--linea)}
.motivo h3{font-family:var(--f-titolo); font-size:1.1rem; font-weight:400; letter-spacing:.03em;
margin-bottom:var(--s-3)}
.motivo p{font-size:var(--t-piccolo); color:var(--inchiostro-2); line-height:1.7}
/* 🔴 Quando i motivi finiscono sul VERDE vanno ricolorati, altrimenti
restano color inchiostro su fondo scuro: misurato 1,2:1, cioè
illeggibili. È la seconda volta che succede spostando una sezione su
una terra diversa: **ogni volta che una sezione cambia fondo si
ricontrolla il contrasto di TUTTO quello che contiene**, non solo dei
titoli. */
.sez--bosco .motivo{border-top-color:var(--bosco-linea)}
.sez--bosco .motivo h3{color:var(--bosco-testo)}
.sez--bosco .motivo p{color:var(--bosco-testo-2)}
.sez--bosco .affianco .intro{color:var(--bosco-testo-2)}
.sez--bosco .affianco h2{color:var(--bosco-testo)}
.sez--bosco .affianco h2 em{color:var(--bosco-oro)}
.affianco{display:grid; grid-template-columns:1fr; gap:var(--s-7); align-items:center}
.affianco > *{min-width:0}
@media (min-width:900px){
.affianco{grid-template-columns:.95fr 1.05fr; gap:var(--s-9)}
.affianco--destra{grid-template-columns:1.05fr .95fr}
.affianco--destra .scatto{order:2}
}
.affianco .scatto{position:relative; width:min(100%,270px); aspect-ratio:4/5;
overflow:hidden; background:var(--carta-3); border-radius:var(--volta-alta); margin-inline:0}
@media (min-width:900px){
/* niente sconfinamento verso il bordo dello schermo: anche qui la
fotografia resta dentro la gabbia, piccola, con la carta intorno */
.affianco{grid-template-columns:minmax(0,300px) minmax(0,1fr)}
.affianco--destra{grid-template-columns:minmax(0,1fr) minmax(0,300px)}
.affianco .scatto{width:min(100%,300px)}
}
.affianco .scatto img{width:100%; height:100%; object-fit:cover}
.affianco h2{font-size:var(--t-titolo); margin-top:var(--s-4)}
.affianco h2 em{font-style:normal; color:var(--oro)}
.affianco .intro{margin-top:var(--s-5); font-size:var(--t-guida); color:var(--inchiostro-2);
line-height:1.7; max-width:34ch}
.affianco .motivi{margin-top:var(--s-6)}
/* ========================== 14 · INVITO =========================
🔴 QUI L'ASSE SI RICHIUDE IN ARCO. È il punto d'arrivo del filo che
scende da tutta la pagina: la volta del marchio si ricompone intorno
all'invito. Il corpo ha ritrovato il suo centro — che è esattamente
quello che dice il titolo in cima alla pagina. */
.invito{background:var(--carta-2); padding-block:var(--s-10) var(--s-9); text-align:center;
position:relative; overflow:hidden}
@media (min-width:900px){ .invito{padding-block:calc(var(--s-10) * 1.2) var(--s-10)} }
/* 🔴 IL DISALLINEAMENTO, PRIMA DI TUTTO — 16/08.
`.wrap` ha padding-left = --lato + --gronda e padding-right = --lato:
su 1425px il contenuto «centrato» cadeva 40px a DESTRA del centro
dell'arco, che invece è centrato sulla sezione. Il risultato era un
arco e un contenuto che non condividevano l'asse. `.invito` non è una
`.sez` e non ha l'asse d'oro, quindi lì la gronda non serve a niente.
⚠️ Su desktop il blocco si sposta di 40px a sinistra rispetto a ieri:
è la correzione, non un errore nuovo. */
.invito .wrap{padding-inline:var(--lato)}
/* 🔴 L'ARCO ARRIVA A TERRA. Era il difetto più grave della pagina.
Con `aspect-ratio:1/1.15` su un contenuto molto più alto, l'arco si
interrompeva a mezz'aria: sul telefono le due gambe si fermavano poco
dopo il titolo e il pulsante WhatsApp restava fuori, con due
stanghette appese nel nulla. Legge «sito non finito» — la peggiore
sensazione possibile su un pubblico che deve fidarsi per farsi mettere
le mani addosso.
Due cose insieme: (1) via l'aspect-ratio, l'arco è tenuto da `top` e
`bottom`, quindi le gambe toccano terra qualunque sia l'altezza del
contenuto; (2) il raggio verticale è metà della larghezza, quindi la
curva è a TUTTO SESTO a ogni misura di schermo — è l'arco del marchio,
non un'ellisse che cambia forma col contenuto. */
.invito::before{
content:""; position:absolute; z-index:0; pointer-events:none;
left:50%; transform:translateX(-50%);
top:var(--s-6); bottom:0;
width:min(84vw,560px);
border:1px solid var(--arco); border-bottom:0;
border-radius:50% 50% 0 0 / calc(min(84vw,560px) / 2) calc(min(84vw,560px) / 2) 0 0;
transform-origin:bottom center;
transition:transform 1.6s var(--lento), opacity 1.2s var(--ease);
}
html.js .invito:not(.in)::before{transform:translateX(-50%) scaleY(.02); opacity:0}
/* IL SECONDO ARCO — più largo, più tenue, sfalsato di 15px: sono
esattamente i due anelli del sigillo della hero, stessa forma ma
aperta. L'uscita rima con l'entrata, ed è l'unico posto della pagina
dove il marchio si ricompone a scala di architettura.
Se dovessero sembrare pesanti si porta l'opacità dell'esterno a .28:
NON si toglie: uno solo è un arco qualunque, due sono il sigillo. */
.invito::after{
content:""; position:absolute; z-index:0; pointer-events:none;
left:50%; transform:translateX(-50%);
top:calc(var(--s-6) - 15px); bottom:0;
width:calc(min(84vw,560px) + 30px); opacity:.42;
border:1px solid var(--arco); border-bottom:0;
border-radius:50% 50% 0 0 / calc((min(84vw,560px) + 30px) / 2) calc((min(84vw,560px) + 30px) / 2) 0 0;
transform-origin:bottom center;
transition:transform 1.6s var(--lento) .14s, opacity 1.2s var(--ease) .14s;
}
html.js .invito:not(.in)::after{transform:translateX(-50%) scaleY(.02); opacity:0}
.invito .wrap{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center}
.invito .stemma{width:64px; margin-bottom:var(--s-5)}
.invito h2{font-size:var(--t-titolo); max-width:17ch; margin-top:var(--s-4)}
.invito h2 em{font-style:normal; color:var(--oro)}
.invito p{margin-top:var(--s-5); max-width:30ch; color:var(--inchiostro-2);
font-size:var(--t-guida); line-height:1.65}
/* 🔴 SENZA QUESTA MISURA L'ARCO VIENE TAGLIATO IN DUE DAL PULSANTE.
Sotto i 600px `.btn` è flex a larghezza piena e la colonna di testo
misura 100vw − 44px, cioè SEMPRE 18px più larga degli 84vw dell'arco
interno, a qualunque misura di schermo. `max-width:19rem` da solo non
basta: a 360px sborda ancora. Misurato: 360 → 288 dentro 302 ·
375 → 300 dentro 315 · 390 → 304 dentro 328 · 430 → 304 dentro 361.
Mai allargare l'arco oltre 84vw per fare spazio al pulsante. */
.invito .btn{margin-top:var(--s-7); max-width:min(19rem, 80vw)}
/* =========================== 15 · FAQ =========================== */
/* 🔴 RIFATTE IL 16/08 — LE DOMANDE ESCONO DALLA SCATOLA.
Ieri erano sei scatole col bordo, come i nove trattamenti e come i tre
passaggi: diciotto rettangoli bordati sulla stessa pagina. Da lontano
il sito si leggeva «griglia di scatole → fila di scatole → elenco di
scatole», ed è esattamente il difetto che il brief vieta.
Adesso: chiuse sono sei RIGHE appoggiate a un filo — calme, e in una
schermata di telefono se ne vedono sei invece di due, quindi «Quanto
costa?» e «Dove si trova lo studio?» si trovano subito. Il riquadro
pieno esiste SOLO quando la risposta è aperta: diventa la ricompensa
del tocco invece che lo stato di riposo. È l'esatto opposto dei
trattamenti, che sono scatole sempre chiuse — due sezioni vicine con
due logiche diverse, ed è tutto quello che serve per non sembrare un
catalogo di componenti.
⚠️ Dipende dai token nuovi (--carta-2 #EFE9DA): sulla carta-2 vecchia
il riquadro della risposta era invisibile. Mai uno senza l'altro. */
.faq{margin-top:var(--s-7); max-width:46rem; display:block;
border-top:1px solid var(--linea-oro)}
.faq details{background:transparent; border:0;
border-bottom:1px solid var(--linea); padding-inline:0;
transition:border-color .45s var(--ease)}
.faq details[open]{border-bottom-color:var(--linea-oro)}
@media (hover:hover){ .faq details:hover{border-bottom-color:var(--linea-oro)} }
/* Sotto i 19px il maiuscoletto del Cinzel smette di essere elegante e
diventa faticoso — e «BISOGNA ESSERE SPORTIVI PER IL MASSAGGIO
SPORTIVO?» era una riga di 46 caratteri tutta in capitali, proprio
l'ultima obiezione prima di WhatsApp. Le domande sono domande: Jost,
minuscolo, 19px. */
.faq summary{cursor:pointer; list-style:none;
min-height:48px; padding-block:var(--s-4);
display:flex; align-items:center; gap:var(--s-4);
font-family:var(--f-testo); font-weight:400; font-size:1.1875rem;
letter-spacing:0; line-height:1.45; color:var(--inchiostro);
transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--oro)}
.faq details[open] summary{color:var(--oro)}
/* LA V RESTA. È l'unico segno che dice «toccami» e lo capiscono tutti:
si gira, non si sostituisce con un ornamento — men che meno nella
sezione dove stanno il prezzo e l'indirizzo. */
.faq summary::after{content:""; margin-left:auto; flex:none; width:9px; height:9px;
border-right:1px solid var(--oro); border-bottom:1px solid var(--oro);
transform:rotate(45deg) translateY(-20%); transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-20%)}
/* IL RIQUADRO ESISTE SOLO DA APERTA.
Nessuna transizione, e non è una dimenticanza: un nativo non
rende il contenuto da chiuso, quindi non c'è nessuno stato di partenza
da cui interpolare — «la risposta scende invece di sbattere» sarebbe
una promessa che il browser non mantiene, e nel foglio non ci vanno. */
.faq .risposta{margin:0 0 var(--s-5); padding:var(--s-5);
background:var(--carta-2); border-left:2px solid var(--oro-luce);
color:var(--inchiostro-2); max-width:32rem;
font-size:var(--t-piccolo); line-height:1.8}
/* =========================== 16 · PIEDE ========================= */
.piede{background:var(--notte); color:var(--notte-testo-2); padding-block:var(--s-9) var(--s-6);
position:relative}
.piede .marchione{font-size:clamp(1.15rem, .95rem + .9vw, 1.7rem); line-height:1.35;
color:var(--notte-testo); margin-bottom:var(--s-8); letter-spacing:.12em;
text-transform:uppercase}
.piede .righe{display:grid; grid-template-columns:1fr; gap:var(--s-6)}
@media (min-width:760px){ .piede .righe{grid-template-columns:1.5fr 1fr 1fr} }
.piede b{display:block; font-size:var(--t-occhiello); font-weight:400; letter-spacing:.2em;
text-transform:uppercase; color:var(--notte-oro); margin-bottom:var(--s-4)}
.piede, .piede a{color:var(--notte-testo-2); font-size:var(--t-piccolo); text-decoration:none}
.piede a{transition:color .3s; display:inline-block; padding-block:.35em}
.piede a:hover{color:var(--notte-oro)}
.piede li{margin-bottom:var(--s-2)}
.piede .legale{margin-top:var(--s-8); padding-top:var(--s-5); border-top:1px solid var(--notte-linea);
display:flex; flex-wrap:wrap; gap:var(--s-4); justify-content:space-between;
font-size:var(--t-occhiello); letter-spacing:.08em; color:var(--notte-testo-2)}
/* la firma OnlinePerTutti — codice e misure dalla procedura 13 §6 */
.credit{font-size:.82rem; opacity:.6; margin-top:1.25rem}
.credit a{color:inherit; text-decoration:underline; text-underline-offset:2px}
.credit a:hover{opacity:1}
/* ==================== 17 · BARRA E BISCOTTI ===================== */
.barra{position:fixed; left:0; right:0; bottom:0; z-index:70; display:block;
padding:.6rem var(--lato) calc(.6rem + env(safe-area-inset-bottom));
background:var(--carta); border-top:1px solid var(--linea);
transition:transform .5s var(--ease)}
/* In cima alla pagina la barra sta giù: il pulsante WhatsApp della hero è
a due centimetri e i due si vedevano come un doppione. Lo spazio resta
comunque prenotato (`body{padding-bottom}`), quindi niente sobbalzo. */
html.js.con-hero:not(.scorso) .barra{transform:translateY(105%)}
/* 🔴 …TRANNE SUI TELEFONI BASSI, dove il pulsante della hero sta sotto la
piega comunque: lì non c'è nessun doppione da evitare, c'è solo una
prima schermata senza inviti. Chiuso anche in max-width perché
`max-height:720px` da solo prenderebbe un portatile 1440×700 e un
tablet in orizzontale. Sta QUI, subito dopo la regola che annulla:
stessa specificità (0,4,1), vince l'ultima scritta. */
@media (max-width:999px) and (max-height:720px){
html.js.con-hero:not(.scorso) .barra{transform:none}
}
.barra .btn{padding-block:.95em; min-height:50px}
body{padding-bottom:5rem}
@media (min-width:1000px){ .barra{display:none} body{padding-bottom:0} }
/* z-index 94: sotto il pannello del menu (95), che prima si vedeva coperto */
.biscotti{position:fixed; left:var(--lato); right:var(--lato); bottom:5.2rem; z-index:94;
padding:var(--s-5); background:var(--carta); border:1px solid var(--linea-oro);
box-shadow:0 18px 40px -30px rgba(43,50,42,.55); display:none; gap:var(--s-4); flex-direction:column}
.biscotti[data-mostra="true"]{display:flex}
.biscotti p{font-size:var(--t-piccolo); color:var(--inchiostro-2); line-height:1.65}
.biscotti a{color:var(--oro)}
.biscotti .scelte{display:flex; gap:var(--s-3); flex-wrap:wrap}
.biscotti .btn{width:auto; flex:1 1 auto; padding:.75em 1.2em; font-size:.75rem; min-height:44px}
@media (min-width:1000px){ .biscotti{left:auto; right:var(--s-6); bottom:var(--s-6); max-width:24rem} }
/* ========================== 18 · REVEAL =========================
🔴 Lo stato invisibile vive SOLO sotto `html.js` (regola 4 del foglio).
Se main.js non parte, `html` non prende mai la classe `js` e questa
regola non si applica: la pagina è intera, ferma e leggibile. Non
serve nessun ripescaggio, e nessuno deve ricordarsi di aggiungerlo
quando in futuro nascerà un elemento nuovo. */
.rv{transition:opacity .9s var(--lento), transform .9s var(--lento)}
html.js .rv:not(.in){opacity:0; transform:translateY(16px)}
html.js .rv[data-ritardo="1"]{transition-delay:.09s}
html.js .rv[data-ritardo="2"]{transition-delay:.18s}
html.js .rv[data-ritardo="3"]{transition-delay:.27s}
/* le fotografie non salgono: si aprono dal basso, come una stampa che
emerge nel bagno di sviluppo. Un secondo gesto oltre alla dissolvenza,
così non è tutto lo stesso movimento ripetuto quarantasette volte. */
.strada .foto,.voce .foto,.affianco .scatto{
clip-path:inset(0 0 0 0); transition:clip-path 1.1s var(--lento)}
html.js .rv:not(.in) .foto,html.js .rv:not(.in) .scatto{clip-path:inset(0 0 100% 0)}
@media (prefers-reduced-motion:reduce){
html.js .rv:not(.in){opacity:1 !important; transform:none !important}
html.js .rv:not(.in) .foto,html.js .rv:not(.in) .scatto{clip-path:none !important}
html.js .sez:not(.in)::before{transform:scaleY(1) !important}
html.js .sez:not(.in)::after{transform:rotate(45deg) scale(1) !important}
html.js .invito:not(.in)::before{transform:translateX(-50%) !important; opacity:1 !important}
html.js .hero:not(.mostra) .sigillo,html.js .hero:not(.mostra) h1,
html.js .hero:not(.mostra) .quattro,html.js .hero:not(.mostra) .sotto,
html.js .hero:not(.mostra) .azioni,html.js .hero:not(.mostra) .cred{
opacity:1 !important; transform:none !important}
.hero .filo{transform:scaleY(1) !important}
html.js .passo.rv:not(.in)::after{transform:none !important}
.marchio > span{max-width:none !important; opacity:1 !important}
*{animation-duration:.001ms !important; transition-duration:.001ms !important}
}
/* ===================== 19 · PAGINE DI TESTO ===================== */
.testo-lungo{max-width:38rem; padding-block:var(--s-9) var(--s-8)}
.testo-lungo h1{font-size:var(--t-titolo); margin-bottom:var(--s-5)}
.testo-lungo h2{font-family:var(--f-titolo); font-size:1.1rem; font-weight:400; letter-spacing:.04em;
margin-top:var(--s-7); margin-bottom:var(--s-3)}
.testo-lungo p,.testo-lungo li{color:var(--inchiostro-2); font-size:var(--t-piccolo); line-height:1.8}
.testo-lungo ul{margin-top:var(--s-3)}
.testo-lungo li{position:relative; padding-left:1.5em; margin-bottom:var(--s-3)}
.testo-lungo li::before{content:""; position:absolute; left:0; top:.85em; width:13px; height:1px;
background:var(--oro)}
.testo-lungo a{color:var(--oro)}
.errore{text-align:center; padding-block:var(--s-10)}
.errore .numero{font-size:clamp(3rem, 2rem + 6vw, 6rem); line-height:1; color:var(--oro)}
/* ═══════════════════════════════════════════════════════════════════
20 · GIRO DEL 16/08 — CODA DEL FOGLIO
───────────────────────────────────────────────────────────────────
🔴 QUESTI BLOCCHI DEVONO STARE QUI, IN FONDO, E IN QUEST'ORDINE.
Metà delle regole di questo foglio ha specificità (0,1,0): funzionano
solo in base a DOVE sono scritte. In particolare `.rv{transition:…}`
nella §18 vince su `.btn` e `.tondo` a parità di peso — se il blocco
del tocco fosse scritto più in alto, il pulsante più importante del
sito affonderebbe sotto il dito in 900 millesimi invece di 90.
Chi sposta questi blocchi a metà foglio consegna un lavoro che non
si vede. ═══════════════════════════════════════════════════════ */
/* ─── 20.1 · IL TELEFONO: LA PRIMA SCHERMATA DEVE VENDERE ───────────
Sullo screenshot a 390px il pulsante WhatsApp della hero cadeva a
~810px dal bordo alto. In Safari su iPhone 13 lo schermo utile
all'apertura è ~700px, su un SE ~553: su metà dei telefoni la prima
schermata non aveva NESSUN invito a scrivere — e la barra verde fissa
in basso è nascosta apposta finché non si scorre.
Non si toglie una parola e non si rimpicciolisce il titolo: si stringe
l'aria e il sigillo cala del 14%. Tutto chiuso sotto i 599px: su
desktop non cambia una virgola.
4,25rem = 68px: la testata sul telefono è alta 66,4px misurati
(padding .7rem × 2 + il logo da 44px), non 73,6. */
@media (max-width:599px){
.hero{padding-top:4.25rem}
.hero .parola{padding-top:var(--s-5)}
.sigillo{width:min(42vw, 164px)}
.sigillo::after{inset:-10px}
.hero h1{margin-top:var(--s-5)}
.quattro{margin-top:var(--s-5); padding-top:var(--s-5)}
.hero .sotto{margin-top:var(--s-4); color:var(--inchiostro)}
.hero .azioni{margin-top:var(--s-5)}
.hero .cred{margin-top:var(--s-5); line-height:1.7}
.hero .filo{height:var(--s-8); margin-top:var(--s-6)}
}
/* IL NOME CADE SEMPRE IN TRE RIGHE, COME NEL MARCHIO.
Sotto i 430px `max-width:16ch` spezzava il nome in QUATTRO righe e la
terza usciva metà nera e metà oro («OLISTICA DEL»). Il marchio del
cliente spezza sempre fra «OLISTICA» e «DEL BENESSERE»: era l'unico
punto in cui il sito contraddiceva il logo, ed era il primo che si
vede. Chiuso in max-width:899px perché la regola desktop (19ch) ha la
stessa specificità e in coda vincerebbe anche lì. */
@media (max-width:899px){
.hero h1{max-width:20ch}
.hero h1 em{display:block}
}
@media (max-width:420px){ .hero h1{max-width:none; letter-spacing:.03em} }
/* LA CREDENZIALE CONI. È la prova del mestiere e sta SOTTO il pulsante,
quindi non lo spinge giù di un pixel: a 11px in grigio chiaro non la
leggeva proprio il pubblico che ha bisogno di fidarsi. Il peso 500 non
costa un download: Jost è variabile. */
.hero .cred{font-size:.75rem; letter-spacing:.12em; color:var(--inchiostro-2)}
.hero .cred b{font-weight:500; color:var(--inchiostro)}
/* IL PAESE TORNA NELLA TESTATA. «Villa Literno · Caserta» è già scritto
nell'HTML e sotto i 600px era solo `display:none`. Per uno studio di
paese il nome del paese è la seconda parola più importante dopo il
nome. Non si aggiunge una parola: si toglie un display:none. */
@media (max-width:599px){
.marchio > span > span{display:block; font-size:.5625rem; letter-spacing:.2em;
text-transform:uppercase; color:var(--inchiostro-2); margin-top:2px;
white-space:nowrap}
}
/* A 390px lo spazio libero per la scritta è 181px, ma «OLISTICA DEL
BENESSERE» in Cinzel 13px con .09em ne chiede ~209: `.marchio b` ha
`overflow:hidden` e il nome dello studio veniva tagliato di netto,
senza nemmeno i puntini, nella barra sempre visibile. Misurato. */
@media (max-width:420px){
.testata .wrap{gap:var(--s-3)}
.marchio{gap:.5rem}
.marchio img{width:32px}
.marchio b{font-size:.6875rem; letter-spacing:.06em}
}
/* a 360px il nome ci sta in 150px su 150 ESATTI: misurato, margine zero.
Basta un pixel di differenza nel disegno del carattere su un telefono
vero e torna tagliato. Tre centesimi di spaziatura in meno sono quattro
pixel di riserva, e a occhio non si vedono. */
@media (max-width:380px){ .marchio b{letter-spacing:.03em} }
/* ─── 20.2 · IL TOCCO CHE SI SENTE ─────────────────────────────────
In tutto il foglio non esisteva UN SOLO `:active`, e ogni riscontro
viveva dentro `@media (hover:hover)`, cioè non arrivava mai al
telefono — che qui è quasi tutto il pubblico. Chi apre da WhatsApp
toccava nove schede, quattro filtri, sei domande e tre pulsanti senza
che niente rispondesse: un'interfaccia che non risponde al dito si
legge come rotta. Novanta millesimi per gesto.
Solo sugli elementi che un `:active` lo ricevono davvero: togliere il
riscontro nativo a TUTTI gli spegnerebbe l'unico segnale che hanno
i link del piede e del menu. */
.btn,.tondo,.filtro,.faq summary,.voce,.voce .scrivi{-webkit-tap-highlight-color:transparent}
.btn{transition:background .4s var(--ease), color .4s var(--ease),
border-color .4s var(--ease), transform .09s var(--ease)}
.btn:active{transform:translateY(1px) scale(.988)}
.btn:active::after{transform:translate(4px,4px); opacity:1;
transition-duration:.09s,.09s}
.tondo{transition:border-color .3s, background .3s, transform .1s var(--ease)}
.tondo:active{transform:scale(.9); background:rgba(var(--oro-rgb),.14);
border-color:var(--oro)}
.filtro:active{border-color:var(--oro); color:var(--oro)}
.faq summary:active{color:var(--oro)}
/* I NOVE «SCRIVI» ERANO INVISIBILI COME LINK SUL TELEFONO: la riga
d'oro sotto la parola esisteva solo al passaggio del mouse. Dove il
mouse non arriva la riga c'è già, corta e ferma, e sul tocco si
distende. L'icona è una maschera CSS — nessuna modifica all'HTML e
nessuna parola aggiunta: è lo stesso glifo dei pulsanti verdi, e
prende il colore del link. */
.voce .scrivi{font-weight:500}
.voce .scrivi::before{content:""; flex:none; width:1.05em; height:1.05em;
margin-right:.5em; background:currentColor;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15L2 22l5.2-1.4A10 10 0 1 0 12 2Zm5.8 14.2c-.2.7-1.4 1.3-2 1.4-.5.1-1.2.1-1.9-.1-.4-.1-1-.3-1.8-.6-3-1.3-5-4.4-5.2-4.6-.1-.2-1.2-1.6-1.2-3s.8-2.1 1-2.4c.3-.3.6-.4.8-.4h.6c.2 0 .4 0 .7.5l.9 2.2c.1.2.1.4 0 .6l-.4.5-.3.4c-.1.1-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.2 1.4 2.5 1.5.3.1.4.1.6-.1l.9-1c.2-.2.4-.2.6-.1l2 1c.3.1.5.2.5.3.1.2.1.7 0 1.2Z'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15L2 22l5.2-1.4A10 10 0 1 0 12 2Zm5.8 14.2c-.2.7-1.4 1.3-2 1.4-.5.1-1.2.1-1.9-.1-.4-.1-1-.3-1.8-.6-3-1.3-5-4.4-5.2-4.6-.1-.2-1.2-1.6-1.2-3s.8-2.1 1-2.4c.3-.3.6-.4.8-.4h.6c.2 0 .4 0 .7.5l.9 2.2c.1.2.1.4 0 .6l-.4.5-.3.4c-.1.1-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.2 1.4 2.5 1.5.3.1.4.1.6-.1l.9-1c.2-.2.4-.2.6-.1l2 1c.3.1.5.2.5.3.1.2.1.7 0 1.2Z'/%3E%3C/svg%3E") center/contain no-repeat}
@media (hover:none){
.voce .scrivi::after{transform:scaleX(.32); transform-origin:left; opacity:.6}
.voce .scrivi:active::after{transform:scaleX(1); opacity:1}
}
/* TRE FILE, TRE REAZIONI — la monotonia grafica era raddoppiata da
quella del gesto: schede, passaggi e domande reagivano tutte e tre
con lo stesso identico `border-color` da --linea a --linea-oro.
1 · IL CATALOGO — il filetto sotto la fotografia RESTA ACCESO (era una
didascalia da catalogo: spegnerlo per riaccenderlo solo col mouse
vorrebbe dire toglierlo per sempre a chi sta sul telefono). Sopra
ci corre un filo d'oro pieno che si accende da sinistra. */
.voce .segna{position:relative}
.voce .segna::before{content:""; position:absolute; left:0; right:0; top:-1px;
height:1px; background:var(--oro);
transform:scaleX(0); transform-origin:left;
transition:transform .55s var(--ease)}
@media (hover:hover){ .elenco .voce:hover .segna::before{transform:scaleX(1)} }
.elenco .voce:active .segna::before{transform:scaleX(1)}
.elenco .voce:active{border-color:var(--linea-oro)}
/* 2 · I PASSAGGI — avanza la sequenza: la medaglia si riempie d'oro e il
filo verso il passo dopo si accende con lei. Numero color notte su
oro chiaro ≈ 9:1.
⚠️ Servono DUE valori di transizione sul filo, non uno: con un
valore solo l'oro arriverebbe mezzo secondo dopo il puntatore,
perché erediterebbe il ritardo d'ingresso. */
.passo .n{transition:border-color .5s var(--ease), color .5s var(--ease),
background-color .5s var(--ease)}
.passo:not(:last-child)::after{
transition:transform .8s var(--lento) .4s, background-color .5s var(--ease) 0s}
.passo[data-ritardo="1"]::after{transition-delay:.62s, 0s}
@media (hover:hover){
.passo:hover .n{background:var(--oro-luce); border-color:var(--oro-luce);
color:var(--notte)}
.passo:hover::after{background:var(--oro-luce)}
}
.passo:active .n{background:var(--oro-luce); border-color:var(--oro-luce);
color:var(--notte)}
/* 3 · LE DOMANDE — il loro gesto è il riquadro che compare (§15).
Una si sottolinea, una avanza, una si apre. */
/* ─── 20.3 · I VIDEO ────────────────────────────────────────────────
Misurato a 390px: clip 1 da 22 a 195, clip 2 da 211 a 384, bordo a
390. La terza cominciava a x400, cioè fuori schermo, senza un
millimetro di anteprima — e su iOS la barra di scorrimento non si vede
finché non si trascina: non sapeva nessuno che i video fossero tre. E
i tre video girati in studio sono la prova migliore che questo posto e
questa persona esistono davvero. Al 46% la terza spunta di 18px.
⚠️ Rientro in dieci secondi: se sembrassero piccoli, si rimette 50% e
si perde solo l'anteprima. */
@media (max-width:759px){ .video-fila{grid-auto-columns:46%} }
/* DESKTOP: tre provini da 200px su una colonna da 1024 lasciavano 361px
di carta vuota a destra — lo stesso «sembra messa a sinistra» già
bocciato sulla hero. Centrata, il vuoto è simmetrico e legge come una
scelta. Le clip NON cambiano misura: nessun min-width che rimpicciolisce. */
@media (min-width:1100px){ .video-fila{justify-content:center} }
/* ─── 20.4 · LA TIPOGRAFIA: IL CINZEL RESPIRA ───────────────────────
Cinzel è un alfabeto di sole CAPITALI ed era tracciato a .02em quasi
ovunque, cioè trattato come un serif qualunque: le lettere si toccano.
La prova sta dentro il sito — il marchione del piede a .12em è il
pezzo di Cinzel che si legge meglio di tutti.
Il tracking va a scala INVERSA: più le capitali rimpiccioliscono, più
aria vogliono. Nel foglio era il contrario. Il `word-spacing` serve
perché, tracciando le lettere, gli spazi fra le parole restano
indietro e le parole si incollano fra loro. */
:root{ --tr-titolo:.05em; --tr-scheda:.07em }
.testa h2,.affianco h2,.invito h2,.sez--respiro .testa h2,.testo-lungo h1{
letter-spacing:var(--tr-titolo); word-spacing:.09em; line-height:1.24}
.voce h3,.pannello a:not(.btn){letter-spacing:var(--tr-scheda); word-spacing:.07em}
.voce h3 em{letter-spacing:0; word-spacing:normal} /* è Jost: non eredita */
/* IL CINZEL NON SCENDE SOTTO I 19px. Resta su tutto ciò che è MARCHIO —
titolo, titoli di sezione, titoli di scheda, numeri di catalogo,
marchione del piede — e sparisce dove faceva danno.
Effetto collaterale voluto: trattamenti, passaggi e domande smettono
di avere lo stesso titolo, oltre che lo stesso bordo. */
.passo h3{font-family:var(--f-testo); font-weight:500; font-size:1.125rem;
letter-spacing:.01em; line-height:1.4; color:var(--inchiostro);
margin-bottom:var(--s-4)}
/* il colore sul verde NON si tocca qui: lo dà già `.sez--bosco .motivo h3`
con specificità più alta. */
.motivo h3{font-family:var(--f-testo); font-weight:500; font-size:1.125rem;
letter-spacing:.01em; line-height:1.4; margin-bottom:var(--s-3)}
/* LE DIDASCALIE DEI VIDEO smettono di travestirsi da occhiello: in oro
maiuscolo Cinzel erano indistinguibili dall'occhiello di una sezione,
e per mezzo secondo si credeva che fosse cominciato un capitolo.
⚠️ Da dichiarare al cliente: sei parole passano da «MADEROTERAPIA ·
GAMBE» a «Maderoterapia · gambe». L'HTML non cambia — erano già
scritte in minuscolo, era il foglio a gridarle. */
.clip figcaption b{font-family:var(--f-testo); font-weight:500; font-size:1rem;
letter-spacing:0; text-transform:none; color:var(--inchiostro);
margin-bottom:.25rem}
.testo-lungo h2{font-family:var(--f-testo); font-weight:500; font-size:1.125rem;
letter-spacing:.01em}
/* LA GERARCHIA DELLA SCHEDA SI RADDRIZZA. «Per la cellulite su glutei e
gambe» è la riga per cui la persona è arrivata sul sito, ed era a 15px
SOTTO una descrizione da 16px: la gerarchia era capovolta proprio dove
il sito converte. Oro su carta (la scheda è su --carta) = 5,36:1. */
.voce h3 em{font-size:1.0625rem; line-height:1.4; margin-top:.55rem}
.voce p{margin-top:var(--s-4)}
/* ─── 20.5 · LE NOVE FOTOGRAFIE DIVENTANO UNA FAMIGLIA ──────────────
Nove scatti di banca con nove dominanti diverse: arancione su
linfodrenaggio e sportivo, ocra su madera, rosa su coppettazione, blu
e magenta sul taping, freddo su relax. Da lontano la griglia si legge
come «nove ricerche diverse su un archivio». Le foto non si possono
cambiare — è un vincolo — ma si possono portare sullo stesso tono.
Niente velo colorato (rischio «foto finte» su un sito dove uno ti
mette le mani addosso) e niente mix-blend-mode: solo tono.
⚠️ NON si applica ai VIDEO: quelli li ha girati il cliente nel suo
studio, sono materiale vero, e restano come sono. */
.voce .foto img,.affianco .scatto img{filter:saturate(.86) contrast(1.04)}
/* ─── 20.6 · MOVIMENTO RIDOTTO ─────────────────────────────────────
Ogni animazione nuova ha il suo spegnimento. Va per ultimo, dopo
tutto il resto. */
@media (prefers-reduced-motion:reduce){
html.js .passo.rv:not(.in)::before{transform:none !important}
html.js .invito:not(.in)::before{transform:translateX(-50%) !important; opacity:1 !important}
html.js .invito:not(.in)::after{transform:translateX(-50%) !important; opacity:.42 !important}
}