/* =============================================================
Parea Sons — pagine di collezione
Nautica, Heritage e Golf condividono impalcatura e stili: cambia
il contenuto, non la forma. Tutti i posti per le fotografie sono
lastre di lino tessuto — quando arrivano gli scatti si sostituisce
il contenuto di .posto con un ![]()
e non serve toccare altro.
============================================================= */
/* --- Ritmo delle sezioni -------------------------------------
Nessun margine fra i blocchi: si alternano il fondo e un filetto
da 1px, come fa il resto del sito. */
.blocco {
padding-block: var(--s-96);
border-top: 1px solid var(--filetto);
}
.blocco__inner {
max-width: var(--larghezza-max);
margin-inline: auto;
padding-inline: var(--bordo-pagina);
}
.blocco--chiaro { background: var(--bianco-lino); }
/* Un solo blocco scuro per pagina: è il colpo di scena, e vale solo
se resta solo. */
.blocco--scuro {
background: var(--capo-blu);
color: var(--bianco-lino);
border-top-color: transparent;
}
.blocco__testa {
display: grid;
justify-items: start;
gap: var(--s-24);
margin-bottom: var(--s-64);
max-width: 62ch;
}
.blocco__titolo {
font-family: var(--font-testo);
font-weight: 300;
font-size: clamp(var(--t-32), 4vw, var(--t-48));
line-height: 1.08;
letter-spacing: -0.01em;
text-wrap: balance;
}
.blocco__testo {
font-size: var(--t-20);
line-height: 1.5;
color: color-mix(in srgb, var(--inchiostro) 78%, transparent);
}
.blocco--scuro .blocco__testo { color: color-mix(in srgb, var(--bianco-lino) 82%, transparent); }
.blocco--scuro .occhiello { color: color-mix(in srgb, var(--bianco-lino) 72%, transparent); }
.blocco--scuro .filetto { background: color-mix(in srgb, var(--bianco-lino) 40%, transparent); }
/* --- Apertura della pagina ----------------------------------- */
.cop {
padding: calc(var(--header-h) + var(--s-96)) 0 var(--s-96);
background: var(--bianco-lino);
}
.cop__inner {
max-width: var(--larghezza-max);
margin-inline: auto;
padding-inline: var(--bordo-pagina);
display: grid;
justify-items: start;
gap: var(--s-24);
}
.cop__titolo {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(var(--t-48), 6vw, var(--t-96));
line-height: 1.02;
letter-spacing: 0.01em;
}
.cop__claim {
font-family: var(--font-testo);
font-style: italic;
font-weight: 300;
font-size: clamp(var(--t-20), 2.4vw, var(--t-32));
line-height: 1.25;
color: var(--rosso);
max-width: 30ch;
}
.cop__testo {
font-size: var(--t-20);
line-height: 1.5;
color: color-mix(in srgb, var(--inchiostro) 78%, transparent);
max-width: 58ch;
}
.cop__scena {
margin-top: var(--s-48);
padding-inline: var(--bordo-pagina);
max-width: var(--larghezza-max);
margin-inline: auto;
}
/* --- Il posto della fotografia -------------------------------
Lino tessuto finché non arriva lo scatto. La trama e le tinte
vengono da tokens.css: un solo posto dove cambiarle. */
.posto {
position: relative;
overflow: hidden;
background-color: var(--tinta, var(--capo-tortora));
background-image: var(--trama-lino);
border: 1px solid var(--filetto);
}
.posto[data-tinta="bianco"] { --tinta: var(--capo-bianco); --filo: rgba(26, 29, 36, .11); }
.posto[data-tinta="blu"] { --tinta: var(--capo-blu); --filo: rgba(250, 249, 247, .30); }
.posto[data-tinta="beige"] { --tinta: var(--capo-beige); --filo: rgba(26, 29, 36, .15); }
.posto[data-tinta="tortora"] { --tinta: var(--capo-tortora); --filo: rgba(26, 29, 36, .14); }
.posto--largo { aspect-ratio: 21 / 9; }
.posto--capo { aspect-ratio: 3 / 4; }
/* La forma delle documentarie di assets/inside/: sono scatti larghi
attorno al 4:3, e un ritaglio 3:4 li girerebbe di novanta gradi. */
.posto--quadro { aspect-ratio: 4 / 3; }
/* UNA LASTRA SENZA PROPORZIONE COLLASSA, e va detto perché non si
vede leggendo: l'immagine dentro è `position: absolute`, quindi non
sorregge niente, e la lastra resta alta quanto i suoi due bordi —
2px. Misurato il 15 agosto 2026 su artigianato.html, dove il
ravvicinato del ricamo era sparito così. Ogni .posto deve dichiarare
la sua forma: --largo, --capo, --ritratto, --tavola, oppure
riceverla da fuori come fa .tinta__lastra.
--ritratto è la lastra verticale in mezzo a un blocco: 3:4 come nel
catalogo, ma larga quanto una colonna di testo. A piena larghezza
sarebbe alta 1835px su un desktop, e la pagina diventerebbe una
scala da scendere. */
.posto--ritratto {
aspect-ratio: 3 / 4;
max-width: min(100%, 34ch);
margin-inline: auto;
}
.posto img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Una lastra che contiene un DISEGNO e non una fotografia.
`cover` qui è sbagliato e si è visto: la tavola del cofanetto è
753×651, la lastra larga è 21/9, e il ritaglio si mangiava metà
altezza — di una scatola disegnata restava una fascia. Una
fotografia ritagliata resta una fotografia; un disegno ritagliato è
un disegno rotto. Quindi la tavola sta INTERA, in mezzo, e attorno
si vede la trama del lino della lastra. I PNG hanno l'alfa, per
questo non serve nessuna fusione: la carta non c'è. */
/* NIENTE `aspect-ratio` QUI, ed è il contrario della regola di sopra:
la lastra la fa alta il disegno. Se ne dichiarasse una, servirebbe
un `max-height` in percentuale sull'immagine per tenerla dentro —
e quella percentuale NON si risolve, perché l'altezza del genitore
viene a sua volta da `aspect-ratio`. Misurato a 375px: lastra 343×147
e disegno 259×224, cioè settantasette pixel fuori dalla cornice.
Qui l'immagine è `position: static`, quindi sorregge la lastra come
farebbe in un flusso normale, e il bordo le sta sempre attorno. */
.posto--tavola {
display: grid;
place-items: center;
padding: var(--s-32);
}
/* Il deve sparire dalla griglia, se no l'elemento centrato è
LUI e l'immagine dentro resta dov'è: misurato, il disegno finiva
fuori asse. Con `display: contents` la cella la occupa l'![]()
.
E allora il diventa a sua volta una cella: non disegna
niente ma occupa, e spinge l'immagine di lato. Va tolto dal flusso a
mano, perché non tutti i browser gli danno display:none — è la
stessa riga che serve alle tavole in home, in css/pregi.css. */
.posto--tavola picture { display: contents; }
.posto--tavola source { display: none; }
.posto--tavola img {
position: static;
grid-area: 1 / 1;
width: auto;
height: auto;
max-width: min(100%, 38ch);
object-fit: contain;
}
/* --- Il testo e la sua fotografia -----------------------------
Due colonne uguali con 64px in mezzo: da una parte quello che c'è
da leggere, dall'altra una lastra. Sotto i 900px vanno in colonna,
e allora la fotografia viene DOPO il testo — chi legge su un
telefono vuole prima sapere di cosa si parla.
Le larghezze che ne escono stanno in MISURE['duo'], dentro
tools/capi.py: la formula è questa griglia scritta com'è, e se un
giorno cambia lo spazio in mezzo va rifatta anche lì.
L'ORDINE NON SI RISCRIVE, e non c'è una classe per rovesciarlo: da
che parte sta la fotografia lo dice il corpo, scrivendola prima o
dopo. Con `order` si otterrebbe la stessa figura a schermo largo e
una lettura diversa a voce — è lo scarto fra sequenza vista e
sequenza letta di cui parla il criterio 1.3.2, e non vale il prezzo.
Le tre coppie di ogni pagina alternano da sole: testo, testo,
fotografia. */
.duo {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--s-64);
align-items: center;
margin-bottom: var(--s-64);
}
/* Quando la coppia è tutto il blocco non c'è niente da distanziare, e
quel margine diventerebbe aria in fondo alla sezione. */
.duo:last-child { margin-bottom: 0; }
/* Dentro mezza colonna la metrica non può restare a due colonne: la
cifra è alta 11rem e accanto non ci starebbe una riga di testo. */
.duo .metrica { grid-template-columns: minmax(0, 1fr); gap: var(--s-32); }
/* La testa dentro una coppia non ha bisogno del suo margine: a
separarla dal resto c'è già la colonna accanto. */
.duo .blocco__testa { margin-bottom: 0; }
@media (max-width: 900px) {
.duo { grid-template-columns: minmax(0, 1fr); gap: var(--s-32); }
/* IN COLONNA LA LASTRA SI STRINGE, ed è la stessa ragione per cui
.posto--ritratto esiste: a 900px una 3:4 a piena larghezza è alta
1136 pixel, e la pagina diventa una scala da scendere. 480 è il
numero che sta anche in MISURE['duo'] — se si cambia qui va
cambiato là, se no il browser scarica il livello sbagliato.
`width` e `justify-self`, NON `max-width` e `margin-inline: auto`:
la prima versione era quella, e le tre lastre sono collassate a
2x3 pixel. Un margine automatico su un elemento di griglia gli
toglie lo stiramento e lo fa largo quanto il contenuto — e qui
dentro il contenuto è `position: absolute`, quindi non misura
niente. È la stessa trappola del .posto senza proporzione, presa
dall'altro lato. */
.duo .posto { width: min(100%, 480px); justify-self: center; }
}
/* --- Tre fotografie in fila ----------------------------------
Stessa forma della griglia dei capi — `auto-fit` con un minimo di
240px e 32px di spazio — ma le lastre sono tre e non quattro,
quindi a 1440 sono larghe 437 e non 320. È il motivo per cui
MISURE['trittico'] esiste accanto a MISURE['mondo']: un `sizes`
che dichiara meno di quanto la lastra misura fa scaricare il
livello sotto, e la fotografia arriva sgranata. */
.trittico {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--s-32);
margin-bottom: var(--s-64);
}
/* --- La banda che chiude la pagina ---------------------------
Una fotografia del LUOGO, larga quanto la finestra, fra la tabella
dei modelli e la chiusura: è l'unico punto in cui una lastra esce
dalla colonna, e vale come respiro dopo una tabella.
È anche l'unica fotografia di ogni pagina che NON è nostra — vedi
assets/luoghi/LEGGIMI.md, che dice da dove viene e con che licenza.
La regola sta lì e si ripete qui perché è una regola di forma, non
di licenza: una fotografia di stock serve al luogo e non veste mai
un capo.
Si apre col ritaglio, come l'apertura in cima: la pagina comincia e
finisce con lo stesso gesto. Niente `.blocco__inner`, quindi il
`sizes` di queste è 100vw e non la larghezza del contenuto. */
.banda {
border-top: 1px solid var(--filetto);
}
.posto--banda {
aspect-ratio: 21 / 9;
border-inline: 0;
}
@media (max-width: 768px) {
.posto--banda { aspect-ratio: 3 / 2; }
}
/* --- I pregi del lino ---------------------------------------- */
.pregi {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--s-48) var(--s-64);
}
.pregio {
display: grid;
gap: var(--s-8);
align-content: start;
padding-top: var(--s-24);
border-top: 1px solid var(--filetto);
}
.pregio__nome {
font-family: var(--font-display);
font-size: var(--t-12);
letter-spacing: var(--tracking-medio);
text-transform: uppercase;
}
.pregio__nota {
font-size: var(--t-20);
line-height: 1.45;
color: var(--greige);
}
.blocco--scuro .pregio { border-top-color: color-mix(in srgb, var(--bianco-lino) 28%, transparent); }
.blocco--scuro .pregio__nota { color: color-mix(in srgb, var(--bianco-lino) 76%, transparent); }
/* --- I pregi con la fotografia in testa ----------------------------
Una variante e non una riscrittura di `.pregi`: quella griglia la
usano sei pagine, quattro con quattro pregi e tre con cinque, e
`auto-fit` ci sta bene finché sotto ogni filetto c'è solo prosa.
Con una fotografia in testa no: `auto-fit, minmax(260px, 1fr)` dentro
1376px fa TRE colonne, e quattro fotografie in 3+1 leggono come una
fila incompleta invece che come un campionario di dettagli. Qui le
colonne si dichiarano — quattro, due sotto i 1024, una sotto i 640 —
e le tre soglie sono quelle in cui cambia `--bordo-pagina`, così il
`sizes` di `MISURE['pregio']` in tools/capi.py si chiude esatto. Se
una di queste due misure si muove, va rifatta anche l'altra. */
.pregi--lastre {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--s-32);
}
@media (max-width: 1024px) {
.pregi--lastre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.pregi--lastre { grid-template-columns: minmax(0, 1fr); }
}
/* La lastra è 4:3, cioè COLTA e non alta: è il verso opposto alle 3:4
del resto del sito, ed è voluto. Una 3:4 larga 320 viene alta 427 e
quattro in fila fanno una parete di fotografie sopra quattro
paragrafi di tre righe; una 4:3 viene 240 e resta la didascalia di
quel paragrafo, che è il suo mestiere. Il ritaglio lo fa il file —
escono già 1200x900 da tools/prepara-artigianato.py — e `cover` qui
è solo la rete di sicurezza. */
.pregio__lastra {
position: relative;
aspect-ratio: 4 / 3;
margin-bottom: var(--s-8);
overflow: hidden;
background: var(--fondo-scatto);
border: 1px solid var(--filetto);
}
.pregio__lastra img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* La dichiarazione ex art. 50: piccola, ma leggibile davvero. `--greige`
e non un grigio più leggero perché una riga che dice «questa immagine
è generata» sotto la soglia di contrasto è una riga che non c'è. */
.pregi__nota {
margin-top: var(--s-24);
font-family: var(--font-dato);
font-size: var(--t-13);
line-height: 1.5;
color: var(--greige);
}
/* --- La metrica ---------------------------------------------- */
.metrica {
display: grid;
grid-template-columns: minmax(0, auto) minmax(0, 1fr);
gap: var(--s-64);
align-items: center;
}
.metrica__cifra {
display: flex;
align-items: baseline;
gap: var(--s-16);
}
.metrica__numero {
font-family: var(--font-testo);
font-weight: 300;
font-size: clamp(var(--t-72), 12vw, 11rem);
line-height: .86;
letter-spacing: -0.02em;
}
.metrica__unita {
font-family: var(--font-dato);
font-size: var(--t-13);
letter-spacing: var(--tracking-largo);
text-transform: uppercase;
color: color-mix(in srgb, var(--bianco-lino) 72%, transparent);
}
/* --- La collezione, capo per capo ---------------------------- */
.capi {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--s-48) var(--s-32);
}
.capo { display: grid; gap: var(--s-16); align-content: start; }
.capo__nome {
font-family: var(--font-display);
font-size: var(--t-20);
letter-spacing: 0.02em;
margin-top: var(--s-8);
}
.capo__nota {
font-size: var(--t-20);
line-height: 1.45;
color: var(--greige);
}
.capo__taglio {
font-family: var(--font-dato);
font-size: var(--t-12);
letter-spacing: var(--tracking-dato);
color: var(--greige);
}
/* --- La lastra del capo, e la porta alla scheda ---------------
Le quattro lastre della collezione sono LA LASTRA DEL LISTINO: le
scrive capi.lastra() attraverso il segnaposto @capo, quindi arrivano
con le classi .articolo__scatto--fermo e --indossato. Qui si dice
solo come si comportano dentro .posto — la forma 3:4 e il ritaglio
ce li ha già.
La porta è UNA SOLA per scheda: prende la lastra e il nome, così per
la tastiera e per chi legge a voce la fermata è una, e il nome che si
sente è il nome del capo. Nel listino sono due perché lì il nome
ha il suo filetto e un ::after si ancorerebbe a quello; qui il nome
sta dentro la porta e il problema non esiste. */
.capo__porta {
display: grid;
gap: var(--s-16);
color: inherit;
text-decoration: none;
}
.capo__porta:focus-visible {
outline: 2px solid var(--rosso);
outline-offset: 4px;
}
/* Il nome si sottolinea col filetto che si apre dal centro, il gesto
unico del sito: non con `text-decoration`, che è una riga sola e
arriva tutta insieme. */
.capo__porta .capo__nome {
position: relative;
justify-self: start;
}
.capo__porta .capo__nome::after {
content: "";
position: absolute;
left: 50%;
right: 50%;
bottom: -2px;
height: 1px;
background: currentColor;
transition: left var(--t-medio) var(--ease), right var(--t-medio) var(--ease);
}
.capo__porta:hover .capo__nome::after,
.capo__porta:focus-visible .capo__nome::after { left: 0; right: 0; }
/* Dove c'è una fotografia il fondo è quello DENTRO lo scatto, non la
tinta del capo: se no, per il tempo che la lastra ci mette a
caricare, si vede un rettangolo blu che diventa avorio. La tinta
piatta resta a chi la fotografia non ce l'ha, ed è la ragione per cui
la regola si scrive con :has() e non togliendo `data-tinta`.
Fuori --tavola, che una fotografia non la contiene: lì dentro c'è un
disegno con l'alfa, e la trama del lino attorno è quello che si deve
vedere. */
.posto:has(img):not(.posto--tavola) {
background-color: var(--fondo-scatto);
background-image: none;
}
.articolo__scatto {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity var(--t-lento) var(--ease);
}
.articolo__scatto--indossato { opacity: 0; }
/* LO SCAMBIO SI FA SOLO SE C'È DAVVERO IL SECONDO SCATTO. Senza il
controllo, una lastra che ha il solo manichino si svuoterebbe al
passaggio del cursore: la prima immagine sparisce e sotto non c'è
niente. Nel listino la guardia è `data-indossato`, che lo scrive il
generatore; qui il corpo è scritto a mano, e a dirlo è la pagina
stessa — c'è o non c'è quell'elemento. */
.capo__porta:hover .posto:has(.articolo__scatto--indossato) .articolo__scatto--fermo,
.capo__porta:focus-visible .posto:has(.articolo__scatto--indossato) .articolo__scatto--fermo {
opacity: 0;
}
.capo__porta:hover .articolo__scatto--indossato,
.capo__porta:focus-visible .articolo__scatto--indossato { opacity: 1; }
/* --- Indice delle collezioni (mondi.html) -------------------- */
.collezioni {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--s-64) var(--s-32);
}
.collezione {
display: grid;
gap: var(--s-16);
align-content: start;
justify-items: start;
}
.collezione__nome {
font-family: var(--font-display);
font-size: var(--t-20);
letter-spacing: 0.02em;
margin-top: var(--s-8);
}
.collezione__nota {
font-size: var(--t-20);
line-height: 1.45;
color: var(--greige);
}
/* --- La palette ---------------------------------------------- */
/* 148 e non 160, ed è un pixel che conta: a 375px la riga di contenuto
è 343, e due colonne da 160 con 24 in mezzo ne vogliono 344. Per un
pixel i quattro filati si incolonnavano, cioè quattro quadrati da
343 uno sotto l'altro. Con 148 stanno in due e in due. */
.palette {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
gap: var(--s-24);
}
.tinta { display: grid; gap: var(--s-16); }
.tinta__lastra {
aspect-ratio: 1 / 1;
background-color: var(--tinta);
background-image: var(--trama-lino);
border: 1px solid var(--filetto);
}
.tinta__nome {
font-family: var(--font-dato);
font-size: var(--t-13);
letter-spacing: var(--tracking-dato);
}
.tinta__codice {
font-family: var(--font-dato);
font-size: var(--t-12);
letter-spacing: var(--tracking-dato);
color: var(--greige);
}
/* --- Elenco dei dettagli ------------------------------------- */
.dettagli { display: grid; gap: var(--s-32); max-width: 76ch; }
.dettaglio {
display: grid;
gap: var(--s-8);
padding-top: var(--s-24);
border-top: 1px solid var(--filetto);
}
.dettaglio__nome {
font-family: var(--font-display);
font-size: var(--t-12);
letter-spacing: var(--tracking-medio);
text-transform: uppercase;
}
.dettaglio__nota {
font-size: var(--t-20);
line-height: 1.5;
color: var(--greige);
}
/* --- Catalogo e specifiche -----------------------------------
Una tabella vera: sono dati, e vanno letti anche da chi usa uno
screen reader. Su schermo stretto scorre invece di spezzarsi. */
.tabella-scorre { overflow-x: auto; }
.tabella {
width: 100%;
min-width: 40rem;
border-collapse: collapse;
font-family: var(--font-dato);
font-size: var(--t-13);
letter-spacing: var(--tracking-dato);
}
.tabella th,
.tabella td {
padding: var(--s-16) var(--s-16) var(--s-16) 0;
text-align: left;
border-bottom: 1px solid var(--filetto);
vertical-align: top;
}
.tabella thead th {
font-weight: 400;
text-transform: uppercase;
color: var(--greige);
border-bottom-color: var(--filetto-forte);
}
.tabella tbody th {
font-weight: 400;
font-family: var(--font-display);
letter-spacing: var(--tracking-medio);
text-transform: uppercase;
}
/* --- Chiusura ------------------------------------------------ */
.chiusura {
padding-block: var(--s-96);
border-top: 1px solid var(--filetto);
background: var(--bianco-lino);
}
.chiusura__inner {
max-width: var(--larghezza-max);
margin-inline: auto;
padding-inline: var(--bordo-pagina);
display: grid;
justify-items: start;
gap: var(--s-24);
}
.chiusura__payoff {
font-family: var(--font-testo);
font-weight: 300;
font-size: clamp(var(--t-32), 4.4vw, var(--t-72));
line-height: 1.05;
letter-spacing: -0.015em;
max-width: 20ch;
}
.contatti {
display: flex;
flex-wrap: wrap;
gap: var(--s-16) var(--s-32);
font-family: var(--font-dato);
font-size: var(--t-13);
letter-spacing: var(--tracking-dato);
}
/* Il filetto che si apre dal centro, come ovunque nel sito. */
.contatti a {
position: relative;
padding-bottom: 2px;
}
.contatti a::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: center;
transition: transform var(--t-medio) var(--ease);
}
.contatti a:hover::after,
.contatti a:focus-visible::after { transform: scaleX(1); }
/* --- Ritorno ai mondi ---------------------------------------- */
.ritorno {
display: inline-flex;
align-items: center;
gap: var(--s-16);
font-family: var(--font-display);
font-size: var(--t-12);
letter-spacing: var(--tracking-medio);
text-transform: uppercase;
color: var(--greige);
transition: color var(--t-medio) var(--ease);
}
.ritorno i {
display: block;
width: 24px;
height: 1px;
background: currentColor;
transition: width var(--t-medio) var(--ease);
}
.ritorno:hover { color: var(--inchiostro); }
.ritorno:hover i { width: 40px; }
/* --- Comparsa allo scroll ------------------------------------ */
[data-rivela][data-anima="sì"] > * {
opacity: 0;
transform: translateY(14px);
}
[data-rivela][data-anima="sì"][data-visibile="sì"] > * {
opacity: 1;
transform: none;
transition:
opacity var(--t-lento) var(--ease) calc(var(--i, 0) * 70ms),
transform var(--t-lento) var(--ease) calc(var(--i, 0) * 70ms);
}
[data-rivela] > *:nth-child(1) { --i: 0; }
[data-rivela] > *:nth-child(2) { --i: 1; }
[data-rivela] > *:nth-child(3) { --i: 2; }
[data-rivela] > *:nth-child(4) { --i: 3; }
[data-rivela] > *:nth-child(5) { --i: 4; }
/* --- Il movimento delle fotografie ---------------------------
Tre gesti, e sono tutti e tre gesti che il sito ha già: non se ne
inventa uno per queste pagine. Nessun ascoltatore di `scroll` — la
comparsa la governa l'osservatore di js/rivela.js, che qui non è
stato toccato, e il respiro lo governa il browser. */
/* 1. IL FILETTO SI APRE DAL CENTRO, ed è il gesto unico del sito —
il menu, le icone, i link dei mondi, il footer. Sotto una testa di
blocco arrivava sbiadendo insieme al resto, cioè come una riga
qualunque. Vince sulla regola generica di [data-rivela] > * perché
ha una classe in più: le due non possono convivere sullo stesso
elemento, `transform` è una proprietà sola.
1100ms, la durata del listino, e per la stessa ragione: qui non si
sta rispondendo a un dito, si sta aprendo una pagina. */
[data-rivela][data-anima="sì"] .filetto {
opacity: 0;
transform: scaleX(0);
transform-origin: center;
}
[data-rivela][data-anima="sì"][data-visibile="sì"] .filetto {
opacity: 1;
transform: scaleX(1);
transition:
opacity var(--t-medio) var(--ease) calc(var(--i, 0) * 70ms),
transform 1100ms var(--ease) calc(var(--i, 0) * 70ms);
}
/* 2. L'APERTURA SI SPACCA IN DUE, come l'orizzonte dei mondi: la
fotografia esce da una riga a metà altezza e si distende ai due
bordi (`orizzonte-sipario`, css/orizzonti.css). Chi arriva qui ha
appena premuto «Scopri di più» sopra quella stessa fotografia, e
quel pannello si era aperto proprio così.
Niente dissolvenza e niente salita: il gesto è il taglio, e due
gesti insieme non si leggono. */
[data-rivela][data-anima="sì"] > .posto--apre {
opacity: 1;
transform: none;
clip-path: inset(50% 0 50% 0);
}
[data-rivela][data-anima="sì"][data-visibile="sì"] > .posto--apre {
clip-path: inset(0 0 0 0);
transition: clip-path 1100ms var(--ease);
}
/* 3. IL RESPIRO, gli stessi numeri del listino e non altri: scala
1,08 lascia il 4% di fotografia fuori dalla lastra per lato, e
l'escursione è 2,5% — resta un 1,5% di margine, quindi il bordo del
capo non scopre mai il fondo. Quei due numeri si cambiano insieme o
non si cambiano.
Fuori i quadretti della palette, che sono campioni di stoffa e un
campione sta fermo; e fuori --tavola, dove l'immagine è in flusso e
`contain`: ingrandirla la porterebbe oltre la cornice. */
@keyframes respiro-lastra {
from { transform: scale(1.08) translateY(-2.5%); }
to { transform: scale(1.08) translateY(2.5%); }
}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.posto:not(.tinta__lastra):not(.posto--tavola) img {
animation: respiro-lastra linear both;
animation-timeline: view();
animation-range: cover 0% cover 100%;
}
}
}
/* --- Larghezze minori ---------------------------------------- */
@media (max-width: 1024px) {
.blocco, .chiusura { padding-block: var(--s-64); }
.cop { padding-top: calc(var(--header-h) + var(--s-64)); }
.blocco__testa { margin-bottom: var(--s-48); }
.metrica { gap: var(--s-32); }
}
@media (max-width: 768px) {
.metrica { grid-template-columns: minmax(0, 1fr); }
.posto--largo { aspect-ratio: 4 / 3; }
}
/* --- Movimento ridotto --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
[data-rivela][data-anima="sì"] > * { transform: none; }
[data-rivela][data-anima="sì"][data-visibile="sì"] > * {
transition: opacity var(--t-medio) var(--ease);
}
/* Resta la sola dissolvenza: il filetto non si apre, la fotografia
dell'apertura non si spacca. Il ritaglio va rimesso a `none` e non
lasciato al valore di partenza, se no la lastra resta una riga. */
[data-rivela][data-anima="sì"] .filetto { transform: none; }
[data-rivela][data-anima="sì"][data-visibile="sì"] .filetto {
transition: opacity var(--t-medio) var(--ease);
}
[data-rivela][data-anima="sì"] > .posto--apre,
[data-rivela][data-anima="sì"][data-visibile="sì"] > .posto--apre {
clip-path: none;
transition: none;
}
}