/* ==========================================================================
Sinflora - la home
E' la terza proposta, l'unica sopravvissuta: le prime due erano state
respinte con una frase sola, «sembra un refresh, io vorrei un change»,
e sono state rimosse il 2 settembre quando questa e' stata approvata.
Il cambiamento si gioca su tre cose, non sul colore del bottone:
1. LE FORME. Le fotografie non stanno piu' in un rettangolo. Stanno dentro
una famiglia di sei ciottoli, ognuno diverso dagli altri. Sono
border-radius con otto valori in percentuale: non sono l'angolo smussato
che il cliente ha escluso - quello ha lo stesso raggio sui quattro
angoli - ma una deformazione diversa su ciascun asse.
Percentuali e non pixel, cosi' la forma si ricalcola sul contenitore e
regge dal ritratto stretto al panorama largo.
2. IL TESTO STA FUORI. Nessun velo scuro sopra le immagini: era la critica
piu' insistita della riunione. Dove il testo incontra la foto, e' la foto
a passarci davanti.
3. IL FONDO SI SCALDA. Il beige di prima e' stato giudicato «troppo freddo e
morto». Qui la carta vira alla terra, il verde profondo all'oliva, e
entra un oro che prima non c'era: sono i colori del piano editoriale
social, campionati dalle sue pagine.
Si appoggia a base.css e a struttura.css, che tiene testata, menu, slider
e footer.
========================================================================== */
:root {
/* ---- I colori del piano editoriale ----------------------------------
Campionati dal PDF: la palette dei sei cerchi, la forma a uovo, il
rettangolo oliva. Il verde del logo non si tocca. */
--terra: #dbcbb2; /* il beige del PED: caldo, non gesso */
/* Piu' fonda di prima: su `--terra-velo` faceva 1,14:1, cioe' una fascia
che non si vedeva. Con undici sezioni e una sola fascia visibile la
pagina scorre come un blocco unico. Adesso 1,29:1: resta un beige
quieto, ma il confine si legge. Misurato. */
--terra-chiara: #e0d6c2;
--terra-velo: #f6f1e6; /* il fondo pagina, piu' caldo della carta */
--oliva: #445b22; /* il verde profondo del PED */
--oliva-cupo: #33430f;
--salvia-ped: #889a7f;
--oro: #cca300; /* l'accento che prima non esisteva */
--oro-tenue: #e8d79a;
/* ---- La famiglia delle forme ---------------------------------------
Sei ciottoli diversi. Vanno usati a rotazione: due forme uguali vicine
si leggono come un errore, non come un sistema.
RIFATTE L'8 SETTEMBRE. Le prime sei avevano angoli in cui un raggio era
tre o quattro volte l'altro: su `--forma-5`, dentro una galleria a 4/5,
l'angolo in basso a sinistra misurava 71 px in larghezza e 258 in
altezza. Un arco cosi' eccentrico incontra i due lati dritti con un
angolo bassissimo, e a occhio non e' una curva: e' un becco. E' la
«shape spigolosa» segnalata dal committente.
La regola nuova: dentro ogni angolo i due raggi non si allontanano piu'
di una volta e mezza. Sui riquadri che il sito usa davvero - da 1/1 a
3/2 - questo tiene ogni arco fra la meta' e il doppio, cioe' sempre
leggibile come una curva. A cambiare, e a rendere le sei forme diverse
fra loro, sono le DIMENSIONI degli angoli: uno grande e il suo opposto
piccolo, mai due uguali. Restano irregolari, non diventano ovali. */
--forma-1: 70% 30% 55% 45% / 56% 24% 44% 36%;
--forma-2: 35% 65% 30% 70% / 28% 52% 24% 56%;
--forma-3: 55% 45% 68% 32% / 44% 36% 54% 26%;
/* Per i contenitori di TESTO, non per le fotografie. Le sei forme sopra
hanno angoli che rientrano fino al 50% della larghezza: bellissimo su
un'immagine, illeggibile su un paragrafo - misurato, la prima parola del
titolo finiva fuori dalla sagoma, sopra la fotografia. Qui l'angolo in
LATO SINISTRO sta gentile - 22% in alto, 24% in basso - perche' e' li'
che ogni riga comincia: in alto la prima parola del titolo, in basso il
bottone. Il lato destro resta pronunciato, 70% e 74%, e da' alla forma
la sua irregolarita'. Non e' un rettangolo smussato: e' asimmetrica. */
--forma-carta: 22% 70% 26% 24% / 28% 26% 74% 22%;
/* La 4 era esattamente la 1 ribaltata: misurata
indipendentemente, 99,8% di sovrapposizione a specchio. Tre schede in
fila ne mostravano due che si leggono come la stessa. */
--forma-4: 52% 48% 30% 70% / 42% 38% 24% 56%;
--forma-5: 62% 38% 35% 65% / 50% 30% 28% 48%;
--forma-6: 45% 55% 60% 40% / 36% 44% 48% 32%;
/* Le sei sopra sono tarate su fotografie verticali, dove una percentuale
orizzontale grande resta un arco corto perche' la scatola e' stretta.
Su un riquadro sdraiato - le schede di rimando sono 3/2 - la stessa
percentuale diventa un arco lunghissimo e la forma collassa in
un'ellisse: tre schede in fila leggevano come tre ovali uguali.
Su una scatola larga L e alta A, il raggio orizzontale in pixel vale
h%*L e quello verticale v%*A: perche' il rapporto fra i due resti sotto
una volta e mezza, con L/A = 1,5 serve h% <= v%. Da qui queste tre, che
hanno le percentuali orizzontali piu' basse delle verticali e angoli di
dimensioni molto diverse fra loro. */
/* Le otto sagome delle tessere di «cosa facciamo»: quattro ferme e
quattro al passaggio.
Le sei di sistema qui non servono. Hanno tutti e otto i raggi larghi,
fra il 24 e il 70 per cento, e su un riquadro quasi quadrato questo
vuol dire che ogni angolo e' una curva ampia: la sagoma resta un ovale,
e quattro ovali diversi si leggono come quattro ovali uguali. Segnalato
dal committente con una fotografia, ed era vero.
Qui il contrasto sta DENTRO la forma: due angoli molto tondi - 60-72% -
accanto a due stretti, 20-26%. Stretto non vuol dire spigoloso: su una
tessera da 295 px, il 22% e' un raggio di 65 px. Ogni sagoma ha la sua
parte tonda da una parte diversa - a sinistra, in alto, in diagonale,
su un angolo solo - e al passaggio quella parte si sposta altrove, che
e' cio' che rende visibile la deformazione. */
--riposo-1: 62% 22% 24% 58% / 60% 26% 28% 40%;
--riposo-2: 52% 46% 24% 20% / 62% 58% 26% 24%;
--riposo-3: 22% 68% 26% 62% / 26% 60% 30% 56%;
--riposo-4: 30% 26% 72% 28% / 34% 30% 66% 32%;
--tocco-1: 24% 60% 62% 22% / 28% 52% 46% 26%;
--tocco-2: 22% 26% 48% 50% / 24% 28% 60% 62%;
--tocco-3: 66% 24% 62% 22% / 58% 28% 56% 26%;
--tocco-4: 70% 26% 30% 28% / 64% 30% 34% 32%;
--forma-larga-1: 40% 25% 18% 30% / 55% 45% 28% 40%;
--forma-larga-2: 22% 38% 32% 20% / 32% 55% 42% 30%;
--forma-larga-3: 34% 20% 40% 24% / 48% 30% 55% 38%;
}
body { background: var(--terra-velo); }
/* ==========================================================================
1. LA FORMA
Una classe sola, sei varianti. Va su un contenitore con overflow nascosto:
l'immagine dentro fa il suo mestiere con object-fit.
========================================================================== */
.forma {
display: block;
overflow: hidden;
background: var(--terra-chiara); /* si vede mentre la foto carica */
border-radius: var(--forma-1);
}
.forma > img,
.forma > video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.forma--1 { border-radius: var(--forma-1); }
.forma--2 { border-radius: var(--forma-2); }
.forma--3 { border-radius: var(--forma-3); }
.forma--4 { border-radius: var(--forma-4); }
.forma--5 { border-radius: var(--forma-5); }
/* Il respiro: la stessa macchia cambia lentamente profilo.
border-radius e' interpolabile, quindi il passaggio e' continuo e non
serve nessun disegno. Va sui pezzi grandi e fermi, mai su una griglia
di sei: sei macchie che respirano insieme sono un acquario. */
.forma--viva {
animation: respiro 22s ease-in-out infinite;
/* le tappe di chi non dichiara una forma propria */
--respiro-a: var(--forma-1);
--respiro-b: var(--forma-5);
--respiro-c: var(--forma-3);
}
/* Il respiro parte dalla forma dichiarata e ci torna.
Prima i fotogrammi nominavano tre forme fisse, e un'animazione in corso
vince su una dichiarazione statica: qualunque elemento `.forma--viva`
ignorava il proprio `forma--N` e percorreva lo stesso ciclo, partendo al
caricamento della pagina. Misurato: le aperture di cinque pagine, che
dichiaravano quattro forme diverse, in ogni istante avevano la stessa
sagoma a meno di 0,17 punti percentuali. */
.forma--1.forma--viva { --respiro-a: var(--forma-1); --respiro-b: var(--forma-5); --respiro-c: var(--forma-3); }
.forma--2.forma--viva { --respiro-a: var(--forma-2); --respiro-b: var(--forma-6); --respiro-c: var(--forma-4); }
.forma--3.forma--viva { --respiro-a: var(--forma-3); --respiro-b: var(--forma-1); --respiro-c: var(--forma-5); }
.forma--4.forma--viva { --respiro-a: var(--forma-4); --respiro-b: var(--forma-2); --respiro-c: var(--forma-6); }
.forma--5.forma--viva { --respiro-a: var(--forma-5); --respiro-b: var(--forma-3); --respiro-c: var(--forma-1); }
.forma--6.forma--viva { --respiro-a: var(--forma-6); --respiro-b: var(--forma-4); --respiro-c: var(--forma-2); }
@keyframes respiro {
0%, 100% { border-radius: var(--respiro-a); }
33% { border-radius: var(--respiro-b); }
66% { border-radius: var(--respiro-c); }
}
/* ==========================================================================
2. L'ONDA
Il fondo pieno non finisce con una riga dritta. La sezione seguente
comincia dentro l'incavo.
========================================================================== */
.onda { position: relative; }
.onda::after {
content: "";
position: absolute;
inset: auto -8% -1px;
height: clamp(3rem, 7vw, 7rem);
background: var(--terra-velo);
border-radius: 100% 100% 0 0 / 100% 100% 0 0;
pointer-events: none;
}
/* ==========================================================================
3. LA TESTATA DI SEZIONE
Occhiello con il punto oro, titolo, riga di respiro. Niente corsivo:
in riunione e' stato detto che disturba.
========================================================================== */
.sec-head {
display: grid;
gap: var(--s-3);
justify-items: start;
margin-bottom: var(--s-7);
max-width: 44rem;
}
.sec-head--centro { justify-items: center; text-align: center; margin-inline: auto; }
.occhiello {
display: inline-flex;
align-items: center;
gap: var(--s-2);
font-size: var(--t-3xs);
letter-spacing: var(--ls-maiusc);
text-transform: uppercase;
font-weight: 600;
color: var(--salvia-ped);
margin: 0;
}
.occhiello::before {
content: "";
width: 0.45rem;
height: 0.45rem;
border-radius: 50%;
background: var(--oro);
flex: none;
}
.sec-head h2 {
font-family: var(--serif);
font-weight: 600;
font-size: var(--t-4xl);
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
margin: 0;
color: var(--ink);
text-wrap: balance;
}
.sec-head .lead {
font-size: var(--t-lg);
line-height: var(--lh-lead);
color: var(--ink-soft);
margin: 0;
max-width: 46ch;
text-wrap: pretty;
}
.accent { color: var(--oliva); }
/* ==========================================================================
4. L'APERTURA
Lo slider a tre schede della seconda proposta, tenuto tale e quale: e' l'elemento che
ha fatto preferire quella proposta. Sotto, l'onda che apre la pagina.
========================================================================== */
.hero-slider { --hero-h: min(84svh, 48rem); }
.hero-slider .slider__content p { text-wrap: pretty; }
/* La scritta sopra il video resta - e' stata approvata - ma piu' essenziale:
niente paragrafo, solo occhiello e titolo. */
.hero-slider .slider__content {
/* Niente colonna fissa: `30ch` si risolve sul font del contenitore e resta
321 px identici da 390 a 1440 px. A schermo largo il titolo finiva in tre
righe da dieci caratteri accanto a una fotografia a tutta pagina.
La misura la da' il testo, in una colonna che cresce con la finestra. */
max-width: min(46rem, 90%);
}
/* ==========================================================================
5. I QUATTRO MESTIERI
Le foto dentro i ciottoli, su una linea spezzata. I titoli sotto, fuori
dall'immagine. Nessun velo.
========================================================================== */
.mestieri {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(1rem, 2.5vw, 2.25rem);
align-items: start;
}
/* lo sfalsamento: e' quello che toglie la griglia dall'occhio */
.mestieri > :nth-child(1) { margin-top: 0; }
/* Lo sfalsamento e' quello che toglie la griglia dall'occhio, ma il salto
della quarta tessera vale da solo 80 px sull'altezza della sezione, e la
sezione non entrava in uno schermo da portatile. Dimezzato: si vede
ancora che le quattro non sono in fila, e si guadagna mezzo dito. */
.mestieri > :nth-child(2) { margin-top: clamp(0.75rem, 2vw, 1.75rem); }
.mestieri > :nth-child(3) { margin-top: clamp(0.25rem, 0.8vw, 0.6rem); }
.mestieri > :nth-child(4) { margin-top: clamp(1.25rem, 3vw, 2.5rem); }
.mestiere { display: grid; gap: var(--s-4); }
.mestiere .forma {
aspect-ratio: 4 / 5;
transition: transform var(--dur) var(--ease-out),
border-radius var(--dur) var(--ease-out);
}
.mestiere:hover .forma,
.mestiere:focus-within .forma { transform: translateY(-6px) }
.mestiere h3 {
font-family: var(--serif);
font-weight: 600;
font-size: var(--t-xl);
line-height: var(--lh-title);
margin: 0;
}
.mestiere h3 a {
color: inherit;
text-decoration: none;
background-image: linear-gradient(var(--oro), var(--oro));
background-size: 0 2px;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size var(--dur-fast) var(--ease-out);
}
.mestiere h3 a:hover,
.mestiere h3 a:focus-visible { background-size: 100% 2px; }
.mestiere p {
margin: 0;
font-size: var(--t-sm);
line-height: var(--lh-body);
color: var(--ink-soft);
max-width: 30ch;
}
/* ==========================================================================
9. LE SEZIONI A FONDO PIENO
Fondo caldo, non cupo: e' oliva, non bosco. E sotto ci sono le foto,
mai dietro un velo.
========================================================================== */
.section--oliva {
background: var(--oliva);
color: var(--terra-chiara);
padding-block: calc(var(--section) * 0.82);
}
.section--oliva .sec-head h2 { color: var(--white); }
.section--oliva .sec-head .lead { color: var(--terra); }
.section--oliva .occhiello { color: var(--oro-tenue); }
.section--oliva .accent { color: var(--oro-tenue); }
.section--terra {
background: var(--terra-chiara);
padding-block: calc(var(--section) * 0.82);
}
.servizio { position: relative; display: grid; gap: var(--s-3); }
.servizio__media {
aspect-ratio: 5 / 4;
overflow: hidden;
border-radius: var(--forma-2);
background: var(--oliva-cupo);
}
.servizio:nth-child(2) .servizio__media { border-radius: var(--forma-4); }
.servizio:nth-child(3) .servizio__media { border-radius: var(--forma-6); }
.servizio:nth-child(4) .servizio__media { border-radius: var(--forma-3); }
.servizio__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.servizio__badge {
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
margin-top: calc(var(--s-5) * -1.4);
margin-left: var(--s-4);
position: relative;
z-index: 2;
background: var(--oro);
color: var(--oliva-cupo);
border-radius: var(--forma-1);
}
.servizio h3 {
font-family: var(--serif);
font-weight: 600;
font-size: var(--t-lg);
line-height: var(--lh-title);
margin: 0;
}
.servizio h3 a { color: inherit; text-decoration: none; }
/* il click prende tutta la card, non solo il titolo */
.servizio__link::after { content: ""; position: absolute; inset: 0; }
.servizio p {
margin: 0;
font-size: var(--t-sm);
line-height: var(--lh-body);
color: var(--terra);
}
.section--terra .servizio p { color: var(--ink-soft); }
/* ==========================================================================
11. REALIZZAZIONI
Il modello dichiarato dal cliente: «le foto sono belle pulite e le scritte
sono fuori campo, e' benissimo». Si tiene la struttura, cambia la forma.
========================================================================== */
.caro { position: relative; }
.caro__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--s-5);
flex-wrap: wrap;
margin-bottom: var(--s-7);
}
.caro__intro { display: grid; gap: var(--s-3); justify-items: start; }
.caro__intro h2 {
font-family: var(--serif);
font-weight: 600;
font-size: var(--t-4xl);
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
margin: 0;
}
.caro__arrows { display: flex; gap: var(--s-3); }
.caro__arrow {
width: 3rem;
height: 3rem;
display: grid;
place-items: center;
border: 1px solid var(--line);
background: transparent;
color: var(--oliva);
border-radius: var(--forma-5);
cursor: pointer;
transition: background var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out);
}
.caro__arrow:hover,
.caro__arrow:focus-visible {
background: var(--oliva);
color: var(--terra-chiara);
border-color: var(--oliva);
}
.caro__track {
display: flex;
gap: var(--s-5);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--shell-gutter);
padding-inline: var(--shell-gutter);
padding-block: var(--s-2) var(--s-5);
scrollbar-width: none;
}
.caro__track::-webkit-scrollbar { display: none; }
.caro__item {
flex: 0 0 clamp(15rem, 26vw, 22rem);
scroll-snap-align: start;
margin: 0;
display: grid;
gap: var(--s-3);
}
.caro__item > img,
.caro__item > video {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
display: block;
background: var(--terra-chiara);
}
/* le forme si alternano lungo il nastro: nessuna coppia uguale vicina */
.caro__item:nth-child(6n+1) > * { border-radius: var(--forma-1); }
.caro__item:nth-child(6n+2) > * { border-radius: var(--forma-3); }
.caro__item:nth-child(6n+3) > * { border-radius: var(--forma-5); }
.caro__item:nth-child(6n+4) > * { border-radius: var(--forma-2); }
.caro__item:nth-child(6n+5) > * { border-radius: var(--forma-6); }
.caro__item:nth-child(6n+6) > * { border-radius: var(--forma-4); }
.caro__item figcaption { display: grid; gap: var(--s-1); }
.caro__item .marginalia {
font-size: var(--t-3xs);
letter-spacing: var(--ls-maiusc);
text-transform: uppercase;
color: var(--salvia-ped);
}
.caro__item .caption { font-size: var(--t-sm); color: var(--ink-soft); }
/* ==========================================================================
13. MOBILE
Progettato, non adattato. Le forme restano: sono la ragione della
proposta, e su uno schermo stretto si vedono anche meglio.
========================================================================== */
@media (max-width: 60rem) {
.mestieri { grid-template-columns: repeat(2, 1fr); }
.mestieri > :nth-child(3) { margin-top: 0; }
.mestieri > :nth-child(4) { margin-top: clamp(1.5rem, 4vw, 3.5rem); }
.servizi { grid-template-columns: repeat(2, 1fr); }
.ritratto__griglia { grid-template-columns: 1fr; }
.ritratto__foto { margin-left: 0; width: min(100%, 24rem); justify-self: end; margin-top: -3rem; }
.wedding { grid-template-columns: 1fr; }
.wedding .forma { aspect-ratio: 3 / 2; }
}
@media (max-width: 44rem) {
.mestieri { grid-template-columns: 1fr; gap: var(--s-6); }
.mestieri > * { margin-top: 0 !important; }
.mestiere .forma { aspect-ratio: 3 / 2; }
.servizi { grid-template-columns: 1fr; }
.servizio__media { aspect-ratio: 3 / 2; }
/* Lo scontorno impila. La macchia resta confinata alla riga del soggetto:
se scende dietro il testo, il titolo scuro finisce su fondo scuro e non
si legge piu'. Presa dalla griglia, non da un inset a percentuale, cosi'
non dipende da quanto e' lungo il testo. */
.scontorno {
grid-template-columns: 1fr;
grid-template-rows: auto auto;
text-align: left;
min-height: 0;
gap: var(--s-6);
}
.scontorno__campo,
.scontorno--sinistra .scontorno__campo {
position: relative;
inset: auto;
grid-row: 1;
grid-column: 1;
margin-inline: -6%;
aspect-ratio: 5 / 4;
}
.scontorno__soggetto,
.scontorno--sinistra .scontorno__soggetto {
grid-row: 1;
grid-column: 1;
width: min(78%, 17rem);
align-self: end;
margin-bottom: 0;
}
.scontorno__testo,
.scontorno--sinistra .scontorno__testo { grid-row: 2; grid-column: 1; }
.persone__griglia { grid-template-columns: 1fr; }
.caro__item { flex-basis: 78vw; }
}
/* Chi ha chiesto meno movimento non ne riceve. */
@media (prefers-reduced-motion: reduce) {
.forma--viva { animation: none; }
.mestiere .forma,
.caro__arrow,
.recapiti__social a { transition: none; }
}
/* ==========================================================================
14. QUELLO CHE ARRIVA DA struttura.css E QUI NON VA
La home si appoggia al foglio di struttura.css per testata, slider e footer. Con
quelli arrivano anche tre regole che contraddicono il senso di questa
proposta. Si spengono qui, una per una, con il motivo.
========================================================================== */
/* --- Il velo sulle fotografie -----------------------------------------
struttura.css stende due gradienti neri sopra ogni diapositiva per far risaltare
la scritta. E' la cosa che il cliente ha contestato piu' di ogni altra:
«vogliamo che l'immagine comunichi ancora di piu' della scritta stessa».
La fotografia resta pulita. La leggibilita' la porta il testo, con
un'ombra propria: pesa su tre righe di titolo, non su tutta l'immagine. */
.hero-slider .slider__media::after { background: none; }
.hero-slider .slider__content > * {
text-shadow: 0 1px 2px rgb(10 22 12 / 0.55), 0 2px 14px rgb(10 22 12 / 0.4);
}
.hero-slider .slider__content .btn { text-shadow: none; }
/* Un velo resta, ma corto e solo dove poggia il testo: un quarto di altezza
in basso, non l'immagine intera. Senza, su una diapositiva chiara il
bianco sparisce. */
.hero-slider .slider__media::before {
content: "";
position: absolute;
inset: auto 0 0;
height: 42%;
background: linear-gradient(to top, rgb(10 22 12 / 0.42), transparent);
z-index: 1;
pointer-events: none;
}
.hero-slider .slider__media > img,
.hero-slider .slider__media > video { z-index: 0; }
/* --- Il corsivo --------------------------------------------------------
base.css mette in corsivo la parola in evidenza dei titoli. In riunione
e' stato detto che il corsivo disturba. Resta il colore a distinguerla. */
.accent { font-style: normal; }
/* --- Il riquadro bianco delle card ------------------------------------
struttura.css chiude ogni servizio in un rettangolo bianco con il bordo: sul
fondo oliva diventa il «mattone» che il cliente non vuole, e i titoli
chiari ci finiscono sopra illeggibili. Qui la card non ha contenitore:
c'e' la forma della fotografia, e sotto il testo. */
.section--oliva .servizio {
background: none;
border: 0;
padding: 0;
}
.section--oliva .servizio:hover { transform: none; box-shadow: none; }
.section--oliva .servizio__media { margin-inline: 0; aspect-ratio: 5 / 4; }
.section--oliva .servizio h3 { color: var(--white); }
.section--oliva .servizio h3 a { color: inherit; }
.section--oliva .servizio p { color: var(--terra); }
/* --- L'onda ------------------------------------------------------------
Va disegnata sulla sezione che comincia, non su quella che finisce:
l'hero ha il contenuto ritagliato e se la mangerebbe. Il colore va detto
per esteso, perche' `inherit` su un fondo trasparente non da' nulla. */
.onda::after { display: none; }
@media (max-width: 60rem) {
.ritratto__foto { margin-top: -2rem; }
}
/* base.css mette in corsivo anche le didascalie di servizio del carosello.
Stessa ragione dell'accento: il corsivo e' stato indicato come fastidioso.
Restano distinte per corpo, colore e maiuscoletto. */
.caro__item .marginalia,
.persona__ruolo { font-style: normal; }
/* ==========================================================================
16. NIENTE SCORRIMENTO LATERALE
Le forme sbordano di proposito oltre il margine: e' quello che toglie
l'aria di griglia. Ma se sporgono davvero fuori dalla pagina, il telefono
guadagna una barra di scorrimento orizzontale e il sito sembra rotto.
`clip` taglia senza creare un contenitore di scorrimento - `hidden`
invece lo crea, e romperebbe qualsiasi elemento appiccicato in alto.
========================================================================== */
.ritratto,
.section:has(.scontorno),
.section:has(.mestieri),
.section--terra:has(.wedding) { overflow-x: clip; }
/* L'onda sporge di proposito ai due lati, per uscire di scena in curva.
Va tagliata in orizzontale - e solo li': `overflow-x: clip` non tocca
l'asse verticale, quindi la curva continua a salire sopra il bordo. */
.onda-su { overflow-x: clip; }
/* Ripiego per i browser che non conoscono :has(). Il contenitore piu' esterno
non puo' avere overflow-x da solo: senza overflow-y esplicito il browser lo
promuove ad auto e la pagina si spezza in due barre. */
@supports not selector(:has(*)) {
main { overflow-x: clip; }
}
/* ==========================================================================
17. CONTRASTO
Il verde-grigio del piano editoriale (#889a7f) e' bello ma chiaro: come
testo su carta da 2,4:1, meno della meta' del minimo. Su occhielli e
didascalie, che stanno a 12-13px, e' proprio dove serve di piu'.
Il colore del PED resta per le cose disegnate - il punto, le linee - e i
testi piccoli passano a una versione piu' fonda dello stesso verde.
Misurato: 6,3:1 sulla carta, 5,7:1 sul fondo terra.
========================================================================== */
:root {
--salvia-testo: #4e5c47;
/* Il verde d'azione scende di un gradino sulla scala che c'e' gia'.
Sul fondo caldo il #14803f si fermava a 4,0:1 e 4,45:1 - sotto la
soglia per entrambi i bottoni in linea. Con --g-700 salgono a 5,2 e
5,8. Il bottone pieno non cambia aspetto: il bianco sopra ci guadagna. */
--action: var(--g-700);
--action-hover: var(--g-800);
}
.occhiello,
.caro__item .marginalia,
.persona__ruolo { color: var(--salvia-testo); }
/* Sul fondo oliva la scala si rovescia: li' serve chiaro su scuro, ed e'
gia' cosi' (oro tenue 5,3:1, terra 4,8:1). */
.section--oliva .occhiello,
.section--oliva .caro__item .marginalia { color: var(--oro-tenue); }
/* ==========================================================================
18. IL RESPONSIVE DEL RITRATTO, IN CODA
Le rifiniture della sezione 15 stanno DOPO il blocco mobile della 13, e
a parita' di peso vince l'ultima: la griglia a due colonne rientrava
dalla finestra e su tablet il titolo restava schiacciato.
Queste regole vanno tenute in fondo al foglio.
========================================================================== */
@media (max-width: 60rem) {
.ritratto__griglia { grid-template-columns: 1fr; }
.ritratto__foto {
margin-left: 0;
margin-top: -2.5rem;
width: min(100%, 22rem);
justify-self: end;
aspect-ratio: 4 / 5;
}
.ritratto__titolo { max-width: 100%; }
}
@media (max-width: 44rem) {
.ritratto__foto { width: min(82%, 18rem); margin-top: -1.5rem; }
.ritratto__testo { padding-top: 0; }
}
/* ==========================================================================
19. CORREZIONI DOPO LA REVISIONE
Difetti trovati misurando, non a occhio. Ognuno con il perche'.
========================================================================== */
/* --- Il filtro che spegne tutte le fotografie -------------------------
base.css desatura ogni immagine della pagina: saturate(0.85) piu' una
punta di seppia. Misurato su una foto vera: quasi 14% di colore in meno.
Il cliente ha chiesto l'opposto - «immagini e colori accesi» - e le foto
partono gia' scure di loro. Qui restano come sono state scattate. */
main img,
main video { filter: none; }
/* --- Le etichette delle tre schede ------------------------------------
Fondo nero al 55% e testo bianco al 75%: 2,7:1, sotto la soglia. La
scheda attiva non si distingueva abbastanza dalle altre due. */
.hero-slider .slider__tabs .slider__dot {
background: rgb(10 22 12 / 0.78);
color: rgb(245 243 234 / 0.92);
}
.hero-slider .slider__tabs .slider__dot[aria-current="true"],
.hero-slider .slider__tabs .slider__dot.is-active {
background: var(--terra-velo);
color: var(--ink);
border-top-color: var(--oro);
}
/* --- Il velo dell'hero ------------------------------------------------
Era alto 317 px su tre diapositive, due delle quali sono fotografie
ferme: e' proprio il «retino» contestato. Si accorcia e si schiarisce:
basta a tenere il bianco leggibile sull'ultima parte, dove il testo
poggia, e lascia stare il resto dell'immagine. */
.hero-slider .slider__media::before {
height: 30%;
background: linear-gradient(to top, rgb(10 22 12 / 0.34), transparent);
}
/* --- I puntini di scorrimento -----------------------------------------
Su mobile erano quattro, inerti, e quello attivo stava a 1,16:1 dal
fondo: invisibile. Non indicano nulla che si possa toccare, e la fascia
scorre gia' col dito. */
.section--oliva .swipe-dots { display: none; }
/* --- Le realizzazioni: cinque forme uguali ----------------------------
La rotazione a sei era scritta sul figlio sbagliato e ricadeva sempre
sulla stessa. Le forme vanno alternate davvero, o il nastro sembra una
fila di ovali. */
.caro__item:nth-child(6n+1) > img,
.caro__item:nth-child(6n+1) > video { border-radius: var(--forma-1); }
.caro__item:nth-child(6n+2) > img,
.caro__item:nth-child(6n+2) > video { border-radius: var(--forma-3); }
.caro__item:nth-child(6n+3) > img,
.caro__item:nth-child(6n+3) > video { border-radius: var(--forma-5); }
.caro__item:nth-child(6n+4) > img,
.caro__item:nth-child(6n+4) > video { border-radius: var(--forma-2); }
.caro__item:nth-child(6n+5) > img,
.caro__item:nth-child(6n+5) > video { border-radius: var(--forma-6); }
.caro__item:nth-child(6n+6) > img,
.caro__item:nth-child(6n+6) > video { border-radius: var(--forma-4); }
/* --- La fotografia dei mestieri non si poteva toccare ------------------
Il collegamento era il solo titolo: 84x30 px dentro una scheda alta 480.
Su un telefono e' un bersaglio che si manca. Il tocco prende tutta la
scheda, fotografia compresa. */
.mestiere { position: relative; }
.mestiere h3 a::after {
content: "";
position: absolute;
inset: 0;
}
/* --- Le proporzioni troppo larghe -------------------------------------
A 3:2 il ciottolo si appiattisce e somiglia a un rettangolo con gli
angoli arrotondati: proprio la cosa che il cliente ha escluso. Provato
affiancando i rapporti: da 4:3 in su la forma resta un sasso, sotto no.
Nessuna fotografia va piu' larga di 4:3. */
@media (max-width: 44rem) {
.mestiere .forma { aspect-ratio: 4 / 3; }
.servizio__media { aspect-ratio: 4 / 3; }
}
@media (max-width: 60rem) {
.wedding .forma { aspect-ratio: 4 / 3; }
}
/* Sotto i 60rem la fotografia scende: a quella larghezza una colonna di
testo larga meno di 30 caratteri non si legge piu'. */
@media (max-width: 60rem) {
.ritratto__griglia { grid-template-columns: 1fr; }
.ritratto__occhiello,
.ritratto__titolo,
.ritratto__foto,
.ritratto__testo { grid-column: 1; }
.ritratto__titolo { grid-row: 2; }
.ritratto__foto { grid-row: 3; margin-top: var(--s-5); width: min(100%, 22rem); justify-self: end; }
.ritratto__testo { grid-row: 4; padding-top: var(--s-5); }
}
/* Il margine destro negativo serve solo quando la fotografia sta di lato e
deve coprire la coda del titolo. Sotto i 60rem la fotografia scende sotto,
e quel margine faceva soltanto sporgere il titolo di 45 px oltre lo
schermo - dove veniva tagliato invece di andare a capo. */
@media (max-width: 60rem) {
.ritratto__titolo { margin-right: 0; }
}
/* ==========================================================================
21. LE ONDE, SISTEMA COMPLETO
Una fascia piena non deve mai cominciare ne' finire con una riga dritta.
Due classi: `onda-su` per il bordo alto, `onda-giu` per quello basso.
La curva e' sempre del colore della PROPRIA sezione e sporge fuori dal
bordo: cosi' funziona senza sapere che colore ha la sezione accanto, e
non va aggiornata se un giorno cambia l'ordine dei blocchi.
Serve `overflow-x: clip` sulla sezione, perche' la curva esce ai lati.
========================================================================== */
.onda-su,
.onda-giu { position: relative; overflow-x: clip; }
.onda-su::before,
.onda-giu::after {
content: "";
position: absolute;
left: -6%;
right: -6%;
height: clamp(2.5rem, 5.5vw, 5rem);
background: inherit;
pointer-events: none;
}
.onda-su::before {
top: calc(clamp(2.5rem, 5.5vw, 5rem) * -1 + 1px);
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.onda-giu::after {
bottom: calc(clamp(2.5rem, 5.5vw, 5rem) * -1 + 1px);
border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
/* La sezione oliva ha il fondo dichiarato, non ereditato: le due curve
vanno tinte a mano o restano trasparenti. */
.section--oliva.onda-su::before,
.section--oliva.onda-giu::after { background: var(--oliva); }
.section--terra.onda-su::before,
.section--terra.onda-giu::after { background: var(--terra-chiara); }
/* Il footer entrava con un taglio netto. Adesso sale con una curva, come
le altre fasce piene. Lo spazio in piu' in cima lascia respirare la
prima riga, che altrimenti finirebbe dentro l'incavo.
La curva e' piu' bassa di quelle delle fasce - 24-44 px invece di 40-80 -
e piu' larga, perche' sporge del 16% per lato invece del 6: un arco lungo
e basso si legge come una linea che si alza appena, che e' quello che
serve all'ultimo blocco della pagina. Ed e' storta al contrario di quella
della newsletter, che le sta duecento pixel sopra: due archi identici uno
sull'altro sembrano un errore di ripetizione. */
.footer {
position: relative;
overflow-x: clip;
padding-top: clamp(2.5rem, 5vw, 4.5rem);
}
.footer::before {
content: "";
position: absolute;
left: -16%;
right: -16%;
top: calc(clamp(1.5rem, 3.2vw, 2.75rem) * -1 + 1px);
height: clamp(1.5rem, 3.2vw, 2.75rem);
background: var(--bosco-deep);
border-radius: 38% 62% 0 0 / 100% 100% 0 0;
pointer-events: none;
}
/* La curva sopra la newsletter e' l'unica che si vede insieme a quella del
piede: qui resta alta e si sposta di lato, cosi' le due si distinguono a
colpo d'occhio invece di sembrare la stessa stampata due volte. */
.newsband.onda-su::before {
left: -10%;
right: -10%;
border-radius: 66% 34% 0 0 / 100% 100% 0 0;
}
/* ==========================================================================
22. TIPOGRAFIA - i rilievi della revisione
Misurati sul rendering reale, non sui valori scritti.
========================================================================== */
/* I titoli di scheda avevano lo stesso corpo del testo che li segue: a 390 px
«Progettazione» rendeva 17,17 px e il suo paragrafo 17,00 - un punto
percentuale di differenza, cioe' nessuna gerarchia. Salgono di un gradino.
Nota: sulla scala di base.css i gradini bassi sono troppo ravvicinati
(--t-md e --t-lg a 390 px differiscono dell'1%), per questo il salto va
preso piu' largo. */
.servizio h3,
.persona__nome { font-size: var(--t-xl); line-height: var(--lh-title); }
/* Le colonne di testo scendevano a 29 caratteri a 1024 px, perche' mestieri e
servizi restavano a quattro colonne fino a 960. A quella larghezza quattro
colonne non ci stanno: si passa a due prima. */
@media (max-width: 68rem) {
.mestieri { grid-template-columns: repeat(2, 1fr); }
.mestieri > :nth-child(3) { margin-top: 0; }
.mestieri > :nth-child(4) { margin-top: clamp(1.5rem, 4vw, 3.5rem); }
.servizi { grid-template-columns: repeat(2, 1fr); }
}
/* base.css fissa i paragrafi a 62ch, che per Inter valgono 84 caratteri veri:
l'unita' `ch` misura lo zero, che e' piu' largo di un carattere medio di
circa un terzo. Sopra i 75 la riga e' faticosa da seguire. */
main p { max-width: 46ch; }
.sec-head .lead { max-width: 40ch; }
.footer p, .footer li, .recapiti__voce { max-width: none; }
/* ==========================================================================
23. LE TRE SEZIONI RIFATTE
Fioreria, wedding e persone erano state bocciate. Rifatte da capo, non
ritoccate: le regole vecchie di .scontorno e .wedding restano nel foglio
ma non hanno piu' markup a cui attaccarsi.
========================================================================== */
/* --- La fioreria: il fiore attraversa il titolo -------------------------
Il campo di colore e' sparito. Era la ricostruzione della grafica del
piano editoriale che il cliente aveva gia' criticato: «il mio occhio,
quando lo vedo dal telefono, vede la macchia verde» - e la pianta
spariva. A 1440 la macchia prendeva meta' sezione e il bouquet un
quarto: vinceva la macchia.
Adesso e' il soggetto a passare davanti alla coda del titolo, che e' la
cosa chiesta in riunione: «cancelli il rettangolo, ingrandisci
l'immagine scontornata». */
.fioreria-attraverso { overflow-x: clip; }
.attraverso {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
column-gap: clamp(1.5rem, 4vw, 3.5rem);
row-gap: var(--s-5);
align-items: start;
}
.attraverso .occhiello { grid-column: 1 / -1; grid-row: 1; }
.attraverso__titolo {
grid-column: 1 / -1;
grid-row: 2;
margin: 0;
font-family: var(--serif);
font-weight: 600;
font-size: var(--t-6xl);
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
color: var(--ink);
max-width: 13ch;
position: relative;
z-index: 1;
}
.attraverso__titolo span { display: block; color: var(--oliva); padding-left: 0.45em; }
.attraverso__soggetto {
grid-column: 2;
grid-row: 2 / span 2;
position: relative;
z-index: 2;
justify-self: end;
align-self: start;
width: min(100%, 26rem);
height: auto;
margin-top: clamp(-3rem, -4vw, -1rem);
/* il ritaglio finisce con una riga dritta: l'ultimo decimo sfuma */
-webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
}
.attraverso__testo {
grid-column: 1;
grid-row: 3;
display: grid;
gap: var(--s-5);
justify-items: start;
max-width: 34ch;
padding-top: var(--s-5);
}
.attraverso__testo p { margin: 0; color: var(--ink-soft); }
/* --- Il wedding: la fascia col cartiglio --------------------------------
La fascia piena e' quella approvata, e resta piena. Cambia il modo di
tenere leggibile il testo: non piu' un velo scuro steso sulla
fotografia, ma un cartiglio di carta che si porta il proprio contrasto.
Due terzi dell'immagine restano scoperti. */
.fascia-wedding {
position: relative;
isolation: isolate;
min-height: clamp(28rem, 52vw, 40rem);
display: grid;
align-items: center;
overflow-x: clip;
background: var(--terra-chiara); /* serve alle due onde */
}
.fascia-wedding__foto {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
.fascia-wedding > .shell { width: 100%; padding-block: clamp(3rem, 8vw, 6rem); }
.fascia-wedding__cartiglio {
max-width: min(30rem, 100%);
padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(2rem, 4vw, 3rem);
background: var(--terra-velo);
border-radius: var(--forma-3);
display: grid;
gap: var(--s-4);
justify-items: start;
box-shadow: 0 1.25rem 3.5rem rgb(20 30 14 / 0.22);
}
.fascia-wedding__cartiglio .occhiello { color: var(--salvia-testo); }
.fascia-wedding__cartiglio h2 {
font-family: var(--serif);
font-weight: 600;
font-size: var(--t-2xl);
line-height: var(--lh-title);
letter-spacing: var(--ls-title);
color: var(--ink);
margin: 0;
}
.fascia-wedding__cartiglio p { margin: 0; max-width: 32ch; color: var(--ink-soft); }
/* --- Le persone: il dittico --------------------------------------------
Tre schede con ritratti che non esistono chiedevano al visitatore di
immaginarsi tre facce. Qui ci sono due fotografie che gia' abbiamo,
messe a confronto, e in mezzo la frase che la sezione deve dire.
Si capisce guardandola. */
.dittico {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr) minmax(0, 0.85fr);
gap: clamp(1.5rem, 4vw, 3.5rem);
align-items: center;
margin-bottom: var(--s-8);
}
.dittico__lato { margin: 0; display: grid; gap: var(--s-3); }
.dittico__lato .forma { aspect-ratio: 4 / 5; }
.dittico__lato:first-of-type { margin-top: clamp(2rem, 6vw, 5rem); }
.dittico__lato:last-of-type { margin-bottom: clamp(2rem, 6vw, 5rem); }
.dittico__lato figcaption {
font-size: var(--t-sm);
line-height: var(--lh-ui);
color: var(--ink-soft);
}
.dittico__lato .caption {
display: block;
font-size: var(--t-3xs);
letter-spacing: var(--ls-maiusc);
text-transform: uppercase;
font-weight: 600;
color: var(--salvia-testo);
}
.dittico__perno { display: grid; gap: var(--s-4); justify-items: center; text-align: center; }
.dittico__frase {
margin: 0;
font-family: var(--serif);
font-weight: 600;
font-size: var(--t-4xl);
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
color: var(--ink);
text-wrap: balance;
max-width: none;
}
.dittico__nota { margin: 0; max-width: 32ch; color: var(--ink-soft); }
/* --- Il responsive delle tre ------------------------------------------- */
@media (max-width: 60rem) {
.attraverso { grid-template-columns: 1fr; }
.attraverso .occhiello,
.attraverso__titolo,
.attraverso__testo { grid-column: 1; grid-row: auto; }
.attraverso__titolo { max-width: 14ch; }
.attraverso__soggetto {
grid-column: 1;
grid-row: auto;
width: min(100%, 18rem);
justify-self: end;
margin-top: clamp(-4rem, -10vw, -2rem);
}
.dittico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dittico__perno { grid-column: 1 / -1; grid-row: 1; margin-bottom: var(--s-5); }
.dittico__lato:first-of-type { margin-top: 0; }
.dittico__lato:last-of-type { margin-bottom: 0; margin-top: clamp(1.5rem, 6vw, 3rem); }
}
@media (max-width: 47.99rem) {
/* La fascia si spezza: nessun testo sopra la fotografia sotto i 768 px,
che e' dove il velo di prima pesava di piu'. */
.fascia-wedding { display: block; min-height: 0; }
.fascia-wedding__foto {
position: relative;
inset: auto;
height: clamp(15rem, 55vw, 22rem);
z-index: 0;
}
.fascia-wedding > .shell {
position: relative;
z-index: 1;
margin-top: clamp(-4.5rem, -14vw, -2.5rem);
padding-block: 0 clamp(3rem, 10vw, 4rem);
}
.fascia-wedding__cartiglio { max-width: 100%; }
}
/* Due sagome affiancate dicono «confronto» anche piccole; due in colonna
no. Restano a meta' larghezza fino in fondo. */
@media (max-width: 24rem) {
.dittico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* La sovrapposizione non avveniva: il titolo si fermava a meta' colonna e il
bouquet cominciava ben oltre. E' la seconda riga a dover correre sotto il
soggetto - per questo e' rientrata, e la rientranza va spinta fin la'.
Stessa logica del ritratto: e' la coda del titolo che finisce sotto
l'immagine, non il titolo intero. */
.attraverso__titolo { max-width: none; }
.attraverso__titolo span { padding-left: 1.15em; }
/* Il paragrafo era finito a un terzo di pagina dal titolo. */
.attraverso__testo { padding-top: var(--s-4); }
.attraverso { row-gap: var(--s-3); }
/* Ancora non si toccavano: il soggetto stava all'estremo destro e la coda
del titolo si fermava a meta'. Il soggetto si porta all'inizio della sua
colonna e la rientranza cresce fin dove serve. La sovrapposizione va
guardata, non calcolata: questi due valori sono tarati a 1440. */
.attraverso__titolo span { padding-left: 2.7em; }
.attraverso__soggetto { justify-self: start; margin-top: clamp(-5rem, -7vw, -2rem); }
/* L'occhiello finiva sul bordo curvo del cartiglio e ne veniva tagliato:
una forma organica ha gli angoli molto piu' dentro di un rettangolo, e il
margine interno va calcolato sulla curva, non sul riquadro. */
.fascia-wedding__cartiglio {
padding: clamp(2.5rem, 4.5vw, 3.5rem) clamp(2.5rem, 4.5vw, 3.5rem) clamp(2.25rem, 4vw, 3rem);
}
@media (max-width: 47.99rem) {
.persone-dittico .recapiti { flex-direction: column; align-items: flex-start; }
.persone-dittico .recapiti__social { margin-left: 0; }
}
/* ==========================================================================
24. LO SLIDER: IL CARTIGLIO
La scritta non sta piu' sulla fotografia: sta su una forma di carta
appoggiata sopra. Cosi' la fotografia resta intatta - niente velo, niente
ombra portata sul testo - e il contrasto non dipende piu' da quale
fotogramma del video e' a schermo in quel momento.
E' la stessa forma del cartiglio del wedding: due volte nella pagina,
quindi si legge come un sistema e non come un espediente.
========================================================================== */
.hero-slider .slider__media::before { display: none; }
.hero-slider .slider__content > * { text-shadow: none; }
.hero-slider .cartiglio {
max-width: min(30rem, 100%);
padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(2rem, 4vw, 3rem);
margin-bottom: clamp(5.5rem, 12vh, 8rem); /* resta sopra la fascia delle schede */
background: var(--terra-velo);
border-radius: var(--forma-6);
color: var(--ink);
display: grid;
gap: var(--s-4);
justify-items: start;
box-shadow: 0 1.25rem 3rem rgb(20 30 14 / 0.18);
}
.hero-slider .cartiglio .occhiello { color: var(--salvia-testo); margin: 0; }
.hero-slider .cartiglio h2 {
font-family: var(--serif);
font-weight: 600;
font-size: var(--t-2xl);
line-height: var(--lh-title);
letter-spacing: var(--ls-title);
color: var(--ink);
margin: 0;
max-width: 18ch;
}
@media (max-width: 47.99rem) {
.hero-slider .cartiglio {
max-width: 100%;
margin-bottom: clamp(4.5rem, 14vh, 7rem);
}
}
/* la pista arretra di un gruppo esatto e riparte: il fotogramma di arrivo
e' identico a quello di partenza, quindi il giro non si vede */
@keyframes nastro-scorri {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(calc(var(--nastro-passo, 0px) * -1), 0, 0); }
}
@media (max-width: 60rem) {
.nastro__gruppo .servizio { flex: 0 0 min(20rem, 62vw); }
}
@media (max-width: 44rem) {
.nastro__gruppo .servizio { flex: 0 0 78vw; }
.nastro__gruppo .servizio .servizio__media { aspect-ratio: 4 / 3; }
}
/* chi ha chiesto meno movimento trova il nastro fermo: resta scorribile a mano */
@media (prefers-reduced-motion: reduce) {
.nastro__pista { animation: none; }
}
/* ==========================================================================
25. IL VELO CHE NON SERVE PIU'
Il gradiente sulla fotografia e la fascia scura dietro le schede servivano
a tenere leggibile una scritta bianca appoggiata sul video. Da quando il
testo sta su un cartiglio opaco, non servono a niente - e restano la cosa
che il cliente ha contestato piu' di ogni altra, sulla prima schermata.
========================================================================== */
.hero-slider .slider__media::before,
.hero-slider .slider__media::after { display: none; content: none; }
/* Le schede tornano leggibili per contrasto proprio, non velando la foto:
fondo pieno color bosco, che e' un fondo e non un retino. */
.hero-slider .slider__tabs { background: var(--bosco-deep); }
.hero-slider .slider__tabs .slider__dot {
background: transparent;
backdrop-filter: none;
color: rgb(245 243 234 / 0.9);
}
.hero-slider .slider__tabs .slider__dot[aria-current="true"],
.hero-slider .slider__tabs .slider__dot.is-active {
background: var(--terra-velo);
color: var(--ink);
border-top-color: var(--oro);
}
/* --- Il bouquet che non toccava il titolo -------------------------------
Era tarato a occhio su una sola larghezza: a 1440 restavano 128 px di
vuoto, a 1024 ventinove. La rientranza della seconda riga va legata alla
larghezza della finestra, non a un valore fisso in `em` che scala col
corpo del testo e non con la colonna. */
.attraverso__titolo span { padding-left: clamp(1.5rem, 22vw, 20rem); }
/* --- Il titolo del ritratto tagliato a destra ---------------------------
Fra 1000 e 1140 px il margine destro negativo lo spingeva oltre il bordo
e ne mangiava fino a 66 px. Il margine serve solo dove la fotografia sta
di lato ed e' abbastanza larga da essere scavalcata: sotto i 1140 px non
e' cosi'. */
@media (max-width: 71.25rem) {
.ritratto__titolo { margin-right: 0; }
}
/* --- L'occhiello dentro il cartiglio ------------------------------------
Continuava a uscire dalla curva: in alto a sinistra una forma organica
rientra molto piu' di un rettangolo, e il margine interno da solo non
basta. L'occhiello si sposta verso il centro della forma. */
.fascia-wedding__cartiglio .occhiello,
.hero-slider .cartiglio .occhiello { padding-left: clamp(0.5rem, 2vw, 1.5rem); }
/* ==========================================================================
26. LA SECONDA VERIFICA
========================================================================== */
/* --- L'occhiello che usciva dal cartiglio -------------------------------
Continuava a sporgere sulla fotografia: 26 px di «SINFLORA» a 768, con
1,6:1 di contrasto. Il margine interno non basta, perche' in alto a
sinistra la curva rientra molto piu' di quanto un padding possa
compensare. L'occhiello scende sotto il titolo, dove la forma e' larga:
e' anche piu' logico da leggere. */
.fascia-wedding__cartiglio,
.hero-slider .cartiglio { grid-auto-flow: row; }
.fascia-wedding__cartiglio .occhiello,
.hero-slider .cartiglio .occhiello {
order: 2;
padding-left: 0;
margin-top: calc(var(--s-2) * -1);
}
.fascia-wedding__cartiglio h2,
.hero-slider .cartiglio h2 { order: 1; }
.fascia-wedding__cartiglio p { order: 3; }
.fascia-wedding__cartiglio .btn,
.hero-slider .cartiglio .btn { order: 4; }
/* --- La fioreria sopra i 1100 px ---------------------------------------
La rientranza a 22vw non teneva il passo: restavano 66 px di vuoto a
1440. Sopra i 1100 px la coda del titolo va spinta molto piu' in la',
perche' il bouquet ha una larghezza fissa e la colonna cresce. */
@media (min-width: 68.75rem) {
.attraverso__titolo span { padding-left: clamp(20rem, 34vw, 34rem); }
}
/* --- Le onde della fascia wedding --------------------------------------
Erano color terra-chiara su terra-velo: 1,12:1, cioe' invisibili. E la
fotografia sotto restava con il bordo dritto. Le curve prendono il
colore della pagina e mordono la fascia, che e' il verso giusto: qui
sotto c'e' una fotografia, non un fondo pieno. */
.fascia-wedding.onda-su::before,
.fascia-wedding.onda-giu::after { background: var(--terra-velo); }
.fascia-wedding.onda-su::before {
top: 0;
border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.fascia-wedding.onda-giu::after {
bottom: 0;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
/* Stesso difetto del cartiglio nelle pagine interne: la prima riga del
titolo tocca la curva in alto a sinistra e ne esce. Si rientra solo
quella, non tutto il blocco. */
.fascia-wedding__cartiglio h2,
.hero-slider .cartiglio h2 { text-indent: clamp(0.5rem, 2vw, 1.5rem); }
/* ==========================================================================
27. PROFONDITA' E VARIETA'
Due difetti che si vedono guardando la pagina intera invece delle singole
sezioni:
· TUTTO E' DENTRO LA STESSA FORMA. Ventinove immagini, ventinove ciottoli.
Un dispositivo usato ovunque smette di essere un dispositivo e diventa
uno sfondo: l'occhio lo registra una volta e poi non lo vede piu'.
· TUTTO STA SU UN PIANO SOLO. Le sezioni sono impilate e nessun elemento
ne attraversa i confini. E' questo che fa sembrare una pagina «piatta»:
non il colore, ma il fatto che non ci sia niente sopra o sotto niente.
Qui sotto: i due modi di contenere una fotografia, e il ritorno dello
strato - cose che passano davanti ad altre cose. Un terzo modo c'era, il
riquadro squadrato col filetto sfalsato, ed e' uscito dal sito su
richiesta del committente: forme morbide o irregolari ovunque.
========================================================================== */
/* --- Modo 2: la fotografia nuda ----------------------------------------
Nessun contenitore. Serve dove il soggetto ha gia' una sua forma - un
ritaglio, una fascia a tutta larghezza - e un ciottolo in piu' sarebbe
solo rumore. */
.nuda { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Il numero della fase: il disegno vive in pagina3.css, che e' l'unico
foglio in cui `.fasi` compare. Qui c'era un secondo disegno - il numero
grande e tenue dietro al titolo - pensato per la home, che pero' le fasi
non le usa. Le due regole non si escludevano: pagina3 vinceva su colore e
fondo, e da home sopravvivevano `position: absolute` e l'opacita'. Dentro
una fascia verde il risultato era oro su oro, 1,00:1: il numero non si
vedeva. */
/* --- La grana ----------------------------------------------------------
Un velo di rumore appena percettibile sui fondi pieni. Non si vede: si
sente che il fondo non e' una campitura piatta di colore. E' la
differenza fra una stampa e un riempimento.
Va messa come sfondo dell'elemento, non su uno pseudo-elemento: ::before
e' gia' occupato dall'onda, e le due si annullavano a vicenda.
E' un SVG in linea, quindi non costa una richiesta in piu'. */
.section--oliva,
.section--terra,
.footer {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E");
background-repeat: repeat;
}
/* --- Le realizzazioni tornano fotografie nude ---------------------------
Il nastro dei servizi qui sopra e' gia' tutto di ciottoli: due fasce di
ciottoli una dopo l'altra si annullano, e il dispositivo smette di
farsi notare. Qui il ritmo lo danno le proporzioni diverse, non la
sagoma.
La regola dev'essere piu' forte di quella che assegna le sei forme a
rotazione: stessa specificita' e piu' avanti nel foglio non basta, se
qualcuno riordina. Meglio dirlo una volta e chiaramente. */
.caro__item > img.nuda,
.caro__item > video.nuda,
.caro__item:nth-child(n) > img.nuda,
.caro__item:nth-child(n) > video.nuda { border-radius: 0; }
.caro__item:nth-child(3n+2) > img.nuda { aspect-ratio: 3 / 4; }
.caro__item:nth-child(3n+3) > img.nuda { aspect-ratio: 1 / 1; }
/* ==========================================================================
28. IL GIRO DI CORREZIONI DEL 2 SETTEMBRE
Riferimento indicato: ecogreen-giardini.it. Valori presi dal sito vero,
non a occhio: bottoni a pillola (raggio 100px) su verde #3e6348, testo
bianco; titolo dell'hero bianco, peso 600, centrato, senza ombra;
nessun velo sopra il video.
========================================================================== */
/* --- I bottoni a pillola ------------------------------------------------ */
.btn,
.btn--light,
.btn--solid {
border-radius: 100px;
padding: 1rem 2rem;
font-weight: 500;
}
.caro__arrow { border-radius: 100px; }
/* le voci dei comuni e i piccoli riquadri seguono la stessa famiglia */
.comuni li,
.recapiti__social a { border-radius: 100px; }
/* --- L'hero: il testo torna sul video ----------------------------------
Il cartiglio di carta risolveva la leggibilita' ma spegneva l'immagine:
una lastra chiara sul terzo piu' importante della prima schermata.
Come su Ecogreen: testo bianco semigrassetto, centrato, sul video pulito.
La leggibilita' la porta un velo cortissimo in basso - dove poggia il
testo - piu' un'ombra sul solo testo. L'immagine resta intera. */
.hero-slider .slider__content.cartiglio {
max-width: min(46rem, 92%);
margin: 0 auto clamp(6rem, 13vh, 9rem);
padding: 0;
background: none;
border-radius: 0;
box-shadow: none;
text-align: center;
justify-items: center;
gap: var(--s-5);
}
.hero-slider .cartiglio h2 {
order: 2;
color: var(--white);
font-weight: 600;
font-size: var(--t-4xl);
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
max-width: 20ch;
text-indent: 0;
text-shadow: 0 2px 18px rgb(10 22 12 / 0.45);
}
.hero-slider .cartiglio .occhiello {
order: 1;
color: var(--white);
margin: 0;
opacity: 0.92;
text-shadow: 0 1px 10px rgb(10 22 12 / 0.5);
}
.hero-slider .cartiglio .occhiello::before { background: var(--oro); }
.hero-slider .cartiglio .btn {
order: 3;
background: var(--oliva);
color: var(--white);
border-color: transparent;
text-shadow: none;
}
.hero-slider .cartiglio .btn:hover,
.hero-slider .cartiglio .btn:focus-visible { background: var(--oliva-cupo); }
/* Il velo torna, ma corto e chiaro: un quinto dell'altezza in basso, dove
il testo poggia davvero. Sopra, l'immagine non e' toccata. */
.hero-slider .slider__media::before {
content: "";
display: block;
position: absolute;
inset: auto 0 0;
height: 46%;
background: linear-gradient(to top, rgb(10 22 12 / 0.42), rgb(10 22 12 / 0.12) 55%, transparent);
z-index: 1;
pointer-events: none;
}
/* --- Le schede dello slider --------------------------------------------
Torna il comportamento di prima: la scheda attiva continua la fotografia
invece di staccarsene con un fondo chiaro. Le altre due restano velate,
cosi' si capisce quale e' aperta. */
.hero-slider .slider__tabs { background: none; }
.hero-slider .slider__tabs .slider__dot {
background: rgb(10 22 12 / 0.62);
backdrop-filter: blur(10px);
color: rgb(245 243 234 / 0.82);
border-top: 2px solid transparent;
transition: background var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out);
}
.hero-slider .slider__tabs .slider__dot[aria-current="true"],
.hero-slider .slider__tabs .slider__dot.is-active {
background: transparent; /* la fotografia continua */
backdrop-filter: none;
color: var(--white);
border-top-color: var(--oro);
}
.hero-slider .slider__tabs .slider__dot:hover {
background: rgb(10 22 12 / 0.45);
color: var(--white);
}
/* Lo spigolo in fondo allo slider si smussa: la fascia delle schede prende
gli angoli bassi arrotondati e la fotografia sopra li segue. */
.hero-slider { border-bottom-left-radius: clamp(1.5rem, 4vw, 3rem);
border-bottom-right-radius: clamp(1.5rem, 4vw, 3rem);
overflow: hidden; }
/* --- Le curve delle sezioni, piu' contenute ----------------------------
Erano troppo accentuate: la pancia arrivava a cinque rem e mangiava lo
spazio delle prime righe. Un terzo in meno, e il gesto resta. */
:root { --onda: clamp(1.75rem, 3.2vw, 3rem); }
.onda-su::before,
.onda-giu::after,
.fascia-wedding.onda-su::before,
.fascia-wedding.onda-giu::after { height: var(--onda); }
.onda-su::before { top: calc(var(--onda) * -1 + 1px); }
.onda-giu::after { bottom: calc(var(--onda) * -1 + 1px); }
/* La curva del piede era la piu' profonda di tutte e si notava piu' del
piede stesso: scende a due terzi delle altre. */
.footer::before {
height: clamp(1.125rem, 2.1vw, 2rem);
top: calc(clamp(1.125rem, 2.1vw, 2rem) * -1 + 1px);
}
.fascia-wedding.onda-su::before { top: 0; }
.fascia-wedding.onda-giu::after { bottom: 0; }
/* --- La fioreria, rifatta ----------------------------------------------
Il ritaglio del bouquet era sgranato - e' un ingrandimento di una foto
piccola - e il soggetto stava di traverso rispetto al testo, con la coda
del titolo che gli finiva dentro invece che accanto.
Qui la fotografia e' intera, buona, e dentro la stessa forma delle
tessere: un blocco impaginato come gli altri, non un caso a se'. */
.fioreria__griglia {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
.fioreria__testo { display: grid; gap: var(--s-5); justify-items: start; }
.fioreria__testo h2 {
font-family: var(--serif);
font-weight: 600;
font-size: var(--t-4xl);
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
margin: 0;
max-width: 14ch;
}
.fioreria__testo p { margin: 0; color: var(--ink-soft); max-width: 38ch; }
.fioreria__testo .occhiello { margin: 0; }
.fioreria__foto { aspect-ratio: 5 / 4; }
@media (max-width: 60rem) {
.fioreria__griglia { grid-template-columns: 1fr; }
.fioreria__foto { grid-row: 1; aspect-ratio: 4 / 3; }
}
/* --- I servizi: carosello classico, non nastro -------------------------
Il nastro in scorrimento continuo lasciava dei vuoti quando il giro si
chiudeva, e su una fascia larga si vedeva. Qui e' lo stesso carosello
delle realizzazioni: si trascina col dito, ha le frecce, e sta fermo.
Il meccanismo esiste gia' in sinflora.js e non va scritto niente. */
.servizi-caro { align-items: stretch; }
.servizi-caro .servizio {
flex: 0 0 clamp(15rem, 23vw, 20rem);
scroll-snap-align: start;
display: grid;
gap: var(--s-3);
align-content: start;
}
.section--oliva .caro__head { margin-bottom: var(--s-7); }
.section--oliva .caro__intro h2 { color: var(--white); }
.section--oliva .caro__intro .lead { color: var(--terra); }
.section--oliva .caro__arrow {
border-color: rgb(245 243 234 / 0.35);
color: var(--terra-chiara);
}
.section--oliva .caro__arrow:hover,
.section--oliva .caro__arrow:focus-visible {
background: var(--terra-velo);
color: var(--oliva-cupo);
border-color: var(--terra-velo);
}
/* --- Il badge dell'icona ------------------------------------------------
Era piccolo e con un contorno chiaro che lo staccava dalla fotografia
come un adesivo. Piu' grande, il tratto piu' spesso, e senza contorno:
poggia sull'immagine e basta. */
.servizio__badge {
width: 3.75rem;
height: 3.75rem;
border: 0;
box-shadow: none;
margin-top: calc(var(--s-6) * -1.1);
margin-left: var(--s-5);
}
.servizio__badge .ico {
width: 1.75rem;
height: 1.75rem;
stroke-width: 2.1;
}
/* --- Le realizzazioni tornano come in la seconda proposta ----------------------------
Fotografie tutte della stessa proporzione, in fila, con la didascalia
sotto: era gia' il modello che il cliente aveva indicato come giusto.
Cambia solo l'angolo, appena smussato. */
.caro__item > img.nuda,
.caro__item > video.nuda,
.caro__item:nth-child(n) > img.nuda,
.caro__item:nth-child(n) > video.nuda {
border-radius: clamp(0.75rem, 1.6vw, 1.25rem);
aspect-ratio: 4 / 5;
}
/* --- Le quattro tessere: quattro sagome, e quattro al passaggio --------
Prima erano tutte e quattro la stessa forma. Segnalato: «hanno tutti e
quattro la stessa forma, se riesci a fare quattro forme diverse che
cambiano all'hover sarebbe meglio».
Le otto sagome sono dichiarate in cima al foglio: non sono le sei di
sistema, che su un riquadro quasi quadrato collassano tutte in un ovale. */
.mestiere .forma {
transition: border-radius 620ms var(--ease-out),
transform 620ms var(--ease-out);
}
.mestiere:nth-child(1) .forma { border-radius: var(--riposo-1); }
.mestiere:nth-child(2) .forma { border-radius: var(--riposo-2); }
.mestiere:nth-child(3) .forma { border-radius: var(--riposo-3); }
.mestiere:nth-child(4) .forma { border-radius: var(--riposo-4); }
.mestiere:nth-child(1):hover .forma,
.mestiere:nth-child(1):focus-within .forma { border-radius: var(--tocco-1); }
.mestiere:nth-child(2):hover .forma,
.mestiere:nth-child(2):focus-within .forma { border-radius: var(--tocco-2); }
.mestiere:nth-child(3):hover .forma,
.mestiere:nth-child(3):focus-within .forma { border-radius: var(--tocco-3); }
.mestiere:nth-child(4):hover .forma,
.mestiere:nth-child(4):focus-within .forma { border-radius: var(--tocco-4); }
/* Lo sfalsamento resta, ma piu' contenuto: con quattro sagome uguali
basta poco per togliere la riga dritta, e troppo diventa disordine. */
.mestieri > :nth-child(2) { margin-top: clamp(1rem, 2.5vw, 2.25rem); }
.mestieri > :nth-child(3) { margin-top: 0; }
.mestieri > :nth-child(4) { margin-top: clamp(1.5rem, 3.5vw, 3rem); }
/* --- La fascia newsletter, prima del footer ----------------------------
Fa da cerniera fra la pagina e il piede: senza, il footer scuro
arrivava di colpo dopo una sezione chiara. */
.newsband {
background: var(--terra-chiara);
padding-block: clamp(2.5rem, 5vw, 4rem);
overflow-x: clip;
position: relative;
}
.newsband::before { background: var(--terra-chiara); }
.newsband__griglia {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(1.5rem, 4vw, 3.5rem);
align-items: center;
}
.newsband__testo .occhiello { margin: 0 0 var(--s-2); }
.newsband__testo h2 {
font-family: var(--serif);
font-weight: 600;
font-size: var(--t-2xl);
line-height: var(--lh-title);
letter-spacing: var(--ls-title);
margin: 0;
max-width: 22ch;
}
.newsband__form { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.newsband__form input {
flex: 1 1 16rem;
min-height: 46px;
padding: 1rem 1.5rem;
border: 1px solid var(--line);
border-radius: 100px;
background: var(--terra-velo);
font: inherit;
font-size: var(--t-sm);
color: var(--ink);
}
.newsband__form input::placeholder { color: var(--salvia-testo); }
.newsband__form input:focus-visible {
outline: 2px solid var(--g-700);
outline-offset: 2px;
border-color: transparent;
}
.newsband__form .btn { background: var(--oliva); color: var(--white); border-color: transparent; }
.newsband__form .btn:hover { background: var(--oliva-cupo); }
/* --- Le recensioni ------------------------------------------------------
Il widget si porta la sua grafica. Non la si combatte: le si da' uno
spazio suo, largo e centrato, e la si lascia stare. */
.recensioni__widget { margin-top: var(--s-6); min-height: 8rem; }
/* --- Il footer ----------------------------------------------------------
Aveva troppo spazio in cima: la curva d'ingresso piu' il margine
interno facevano quasi dieci rem di vuoto prima della prima riga.
Adesso la curva e' piu' bassa e il margine si conta da li'. */
.footer { padding-top: clamp(2rem, 3.5vw, 3rem); }
.footer__grid { padding-block: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 60rem) {
.newsband__griglia { grid-template-columns: 1fr; }
}
/* --- La newsletter: due colori ereditati che sparivano ------------------
`.newsband` esiste gia' in struttura.css con fondo bosco e testo chiaro.
Qui il fondo passa a terra chiara e il testo restava bianco: 1,14:1,
cioe' invisibile. Stessa cosa per il bottone, che prendeva il verde
d'azione come colore del testo su un fondo oliva: 1,17:1. */
.newsband,
.newsband__testo h2,
.newsband__testo .occhiello { color: var(--ink); }
.newsband__testo .occhiello { color: var(--salvia-testo); }
.newsband__form .btn,
.newsband__form button.btn {
background: var(--oliva);
color: var(--white);
border-color: transparent;
}
.newsband__form .btn:hover,
.newsband__form .btn:focus-visible { background: var(--oliva-cupo); color: var(--white); }
/* --- Il cartiglio del wedding: vetro invece di carta piena -------------
La lastra di carta opaca sopra la fotografia funzionava per il
contrasto, ma spegneva un terzo dell'immagine. Con una sfumatura e una
sfocatura dietro, la fotografia continua a vedersi attraverso e il
testo resta leggibile: e' il vetro, non un velo steso su tutto.
Il contrasto va misurato sul punto piu' chiaro della sfumatura, non
sulla media: qui il fondo non scende mai sotto il 78% di opacita' dove
poggia il testo. */
.fascia-wedding__cartiglio {
background: linear-gradient(150deg,
rgb(246 241 230 / 0.94) 0%,
rgb(246 241 230 / 0.86) 55%,
rgb(236 228 214 / 0.78) 100%);
backdrop-filter: blur(14px) saturate(1.05);
-webkit-backdrop-filter: blur(14px) saturate(1.05);
border: 1px solid rgb(255 255 255 / 0.45);
box-shadow: 0 1.5rem 3.5rem rgb(20 30 14 / 0.26);
/* piu' aria dentro: il testo toccava la curva su tre lati */
padding: clamp(2.75rem, 5vw, 3.75rem) clamp(2.75rem, 5vw, 3.75rem) clamp(2.25rem, 4vw, 3rem);
}
/* Il vetro ha bisogno di una sagoma meno rientrante, o il testo non ci sta:
--forma-3 stringe troppo in alto a sinistra. */
.fascia-wedding__cartiglio { border-radius: 42% 58% 46% 54% / 34% 32% 68% 66%; }
.fascia-wedding__cartiglio h2 { text-indent: 0; max-width: 15ch; }
.fascia-wedding__cartiglio p { max-width: 30ch; }
/* ==========================================================================
29. IL MOVIMENTO
Poco e al servizio della lettura: il cliente non ha mai chiesto
animazioni, e quelle vistose invecchiano male. Qui il movimento fa due
cose sole - dice che un elemento e' arrivato, e risponde al dito.
Tutto si spegne con prefers-reduced-motion.
========================================================================== */
/* Le fotografie si scoprono salendo, con un filo di ingrandimento che si
riassorbe: l'immagine sembra posarsi invece di comparire. */
@media (prefers-reduced-motion: no-preference) {
[data-reveal] .forma > img {
animation: posa 1100ms var(--ease-out) both;
}
@keyframes posa {
from { transform: scale(1.06); }
to { transform: scale(1); }
}
/* Il bottone si gonfia appena sotto il dito: e' il segnale piu' piccolo
che si possa dare, e si sente.
Qui dentro stavano anche `.mestiere .forma` e `.altra .forma`: il
commento era finito IN MEZZO all'elenco dei selettori, quindi le
tessere prendevano la transizione del bottone - background, color e
transform - e perdevano quella su `border-radius`. Al passaggio del
mouse la sagoma cambiava di scatto invece di deformarsi. */
.btn { transition: background var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out),
transform 200ms var(--ease-out); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
/* Le didascalie dei caroselli salgono di un soffio quando la fotografia
entra in campo. */
.caro__item img,
.caro__item video { transition: transform 700ms var(--ease-out); }
.caro__item:hover img,
.caro__item:hover video { transform: scale(1.03); }
.caro__item { overflow: hidden; border-radius: clamp(0.75rem, 1.6vw, 1.25rem); }
/* Il punto dell'occhiello pulsa piano: e' l'unico elemento che si muove
da solo in tutta la pagina, ed e' grande mezzo centimetro. */
.occhiello::before { animation: respiro-punto 4.5s ease-in-out infinite; }
@keyframes respiro-punto {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(0.78); opacity: 0.72; }
}
}
@media (prefers-reduced-motion: reduce) {
[data-reveal] .forma > img { animation: none; }
.btn, .caro__item img, .caro__item video { transition: none; }
.occhiello::before { animation: none; }
}
/* ==========================================================================
30. L'HERO: TESTO AL CENTRO E LEGGIBILITA'
========================================================================== */
/* Il blocco sta al centro dell'immagine, non appoggiato in basso. Lo spazio
sotto tiene conto della fascia delle schede, che occupa l'ultimo tratto. */
.hero-slider .slider__slide > .shell {
display: grid;
place-items: center;
min-height: 100%;
padding-bottom: clamp(4.5rem, 10vh, 7rem); /* la fascia delle schede */
}
.hero-slider .slider__content.cartiglio {
margin: 0 auto;
align-content: center;
}
/* --- La leggibilita' -----------------------------------------------------
Il testo bianco sta su un video che cambia fotogramma: sotto ci puo'
finire un cielo chiaro come una siepe scura, e un'ombra sola tarata su
uno dei due casi fallisce sull'altro.
Tre ombre sovrapposte, ognuna con un compito:
· una stretta e quasi nera, che stacca il bordo della lettera
· una media, che le da' peso
· una molto larga e tenue, che scurisce l'aria intorno alla parola
senza disegnare un alone visibile
Cosi' il testo regge su qualunque fotogramma, e sull'immagine non c'e'
nessun velo steso: il buio sta attorno alle lettere, dove serve. */
.hero-slider .cartiglio h2 {
text-shadow:
0 1px 2px rgb(8 18 10 / 0.55),
0 2px 10px rgb(8 18 10 / 0.42),
0 6px 34px rgb(8 18 10 / 0.38);
}
.hero-slider .cartiglio .occhiello {
text-shadow:
0 1px 2px rgb(8 18 10 / 0.6),
0 2px 12px rgb(8 18 10 / 0.45);
letter-spacing: 0.16em;
font-weight: 600;
}
/* Il velo in basso si accorcia ancora: con le ombre sul testo non deve piu'
fare il lavoro di leggibilita', gli resta solo il compito di legare le
schede alla fotografia. */
.hero-slider .slider__media::before {
height: 34%;
background: linear-gradient(to top, rgb(10 22 12 / 0.38), rgb(10 22 12 / 0.08) 60%, transparent);
}
/* --- L'occhiello dell'hero era grande come un paragrafo -----------------
struttura.css porta `.slider__content p` a --t-lg, e l'occhiello qui e' un
: veniva servito a 18,3 px invece dei 12 della scala, cioe' quasi
come il testo corrente. Torna al suo gradino. */
.hero-slider .cartiglio .occhiello {
font-size: var(--t-3xs);
line-height: var(--lh-micro);
max-width: none;
}
/* La centratura verticale teneva conto della fascia delle schede con un
margine in fondo, e il blocco restava 37 px sopra il centro ottico.
Meta' di quel margine basta: le schede non arrivano cosi' in alto. */
.hero-slider .slider__slide > .shell { padding-bottom: clamp(2rem, 5vh, 3.5rem); }
/* --- Il bottone della newsletter -----------------------------------------
`.newsband__form .btn` esiste gia' due volte in struttura.css, l'ultima alla
riga 1167, con il verde d'azione come colore del testo: su fondo oliva
dava 1,17:1, cioe' invisibile. Stessa specificita' della mia regola, e a
parita' vince chi arriva dopo nel proprio foglio - ma i due fogli sono
diversi e l'ordine e' garantito solo dal tag . Meglio dirlo con un
selettore piu' forte, che non dipende dall'ordine di caricamento. */
.newsband .newsband__form button.btn,
.newsband .newsband__form a.btn {
background: var(--oliva);
color: var(--white);
border-color: var(--oliva);
}
.newsband .newsband__form button.btn:hover,
.newsband .newsband__form a.btn:hover {
background: var(--oliva-cupo);
border-color: var(--oliva-cupo);
color: var(--white);
}
/* --- Quale scheda e' aperta ---------------------------------------------
La scheda attiva continua la fotografia, come chiesto - ma cosi' da sola
sparisce fra le altre due, e non si capisce piu' dove si e'.
Il segno lo danno tre cose insieme, nessuna delle quali rimette un fondo
sopra l'immagine: il filo d'oro in cima diventa spesso, il numero passa
all'oro, e il testo va in grassetto e pieno. */
.hero-slider .slider__tabs .slider__dot {
border-top-width: 3px;
position: relative;
}
.hero-slider .slider__tabs .slider__dot[aria-current="true"],
.hero-slider .slider__tabs .slider__dot.is-active {
border-top-color: var(--oro);
color: var(--white);
}
.hero-slider .slider__tabs .slider__dot[aria-current="true"] .caption,
.hero-slider .slider__tabs .slider__dot.is-active .caption {
color: var(--oro);
font-weight: 700;
}
.hero-slider .slider__tabs .slider__dot[aria-current="true"] strong,
.hero-slider .slider__tabs .slider__dot.is-active strong {
font-weight: 700;
text-shadow: 0 1px 8px rgb(8 18 10 / 0.6);
}
/* Le altre due arretrano: restano leggibili ma non contendono. */
.hero-slider .slider__tabs .slider__dot:not([aria-current="true"]):not(.is-active) {
color: rgb(245 243 234 / 0.72);
}
.hero-slider .slider__tabs .slider__dot:not([aria-current="true"]):not(.is-active) .caption {
color: rgb(245 243 234 / 0.5);
}
/* La barra che si riempie mentre la diapositiva scorre: dice quale e'
aperta e quanto manca alla prossima. E' la stessa informazione dei
puntini, ma senza aggiungere un elemento in piu'. */
.hero-slider .slider__tabs .slider__dot[aria-current="true"]::before,
.hero-slider .slider__tabs .slider__dot.is-active::before {
content: "";
position: absolute;
top: -3px;
left: 0;
height: 3px;
width: 100%;
background: var(--oro);
transform-origin: left;
animation: scorre-scheda 9s linear;
}
@keyframes scorre-scheda {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
.hero-slider .slider__tabs .slider__dot[aria-current="true"]::before,
.hero-slider .slider__tabs .slider__dot.is-active::before { animation: none; }
}
/* ==========================================================================
31. CORREZIONI DEL 2 SETTEMBRE, SECONDO GIRO
========================================================================== */
/* --- Il testo delle didascalie era tagliato ------------------------------
`overflow: hidden` era finito sull'intera figura invece che sulla sola
immagine: serviva a contenere l'ingrandimento al passaggio del mouse, e
tagliava le discendenti delle didascalie sotto.
Sta sull'immagine, che e' l'unica cosa che deve restare dentro. */
.caro__item { overflow: visible; border-radius: 0; }
.caro__item > img,
.caro__item > video {
border-radius: clamp(0.75rem, 1.6vw, 1.25rem);
overflow: hidden;
}
/* La didascalia ha bisogno del suo spazio: prima stava attaccata
all'immagine e le due righe si toccavano. */
.caro__item figcaption {
display: grid;
gap: var(--s-1);
padding-top: var(--s-1);
}
.caro__item .marginalia {
font-size: var(--t-3xs);
line-height: var(--lh-micro);
letter-spacing: var(--ls-maiusc);
text-transform: uppercase;
font-weight: 600;
font-style: normal;
color: var(--salvia-testo);
}
.caro__item .caption {
font-size: var(--t-sm);
line-height: var(--lh-ui);
letter-spacing: var(--ls-normal);
text-transform: none;
color: var(--ink);
font-weight: 500;
}
/* --- Il carosello dei servizi: a tutta larghezza e in loop --------------
Stava dentro la colonna di testo, quindi si fermava ai margini. Adesso
attraversa lo schermo e i lati li tiene il margine della griglia, come
il carosello delle realizzazioni.
Il giro continuo lo fa lo script: quando si arriva in fondo riparte
dall'inizio senza la scorsa all'indietro. */
.servizi-caro {
padding-inline: var(--shell-gutter);
scroll-padding-inline: var(--shell-gutter);
}
/* --- Il cartiglio del wedding ------------------------------------------
Il bottone usciva dalla sagoma e le righe non erano allineate fra loro.
Due cause: la forma rientrava troppo negli angoli bassi, e il margine
interno era uguale sui quattro lati mentre una forma organica ha bisogno
di piu' aria dove la curva morde.
La sagoma qui e' apposta piu' dolce delle sei di sistema: tutti i valori
vicini al 50%, cosi' nessun angolo entra piu' di tanto. Resta organica,
ma tiene dentro un blocco di testo. */
.fascia-wedding__cartiglio {
border-radius: 44% 56% 46% 54% / 46% 42% 58% 54%;
padding: clamp(3rem, 5.5vw, 4.25rem) clamp(3rem, 5.5vw, 4.25rem) clamp(3.25rem, 6vw, 4.5rem);
justify-items: start;
text-align: left;
gap: var(--s-4);
}
/* Tutte le righe partono dallo stesso punto: prima l'occhiello aveva un
rientro suo e il bottone un altro. */
.fascia-wedding__cartiglio > * { margin-inline: 0; text-indent: 0; }
.fascia-wedding__cartiglio h2 { max-width: 14ch; }
.fascia-wedding__cartiglio p { max-width: 28ch; }
/* Il bottone e' l'ultima riga: la curva in basso e' quella che rientra di
piu', e senza questo margine il bottone ci finisce sopra. */
.fascia-wedding__cartiglio .btn { margin-top: var(--s-2); }
/* --- La curva sopra il footer era di un verde diverso -------------------
Il footer ha la grana come sfondo, la curva no: lo stesso colore con e
senza grana non e' lo stesso colore, e la curva risultava piu' scura.
Prende la stessa grana. */
.footer::before {
background-color: var(--bosco-deep);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E");
background-repeat: repeat;
}
/* Stessa cosa per le altre due fasce piene. */
.section--oliva.onda-su::before,
.section--oliva.onda-giu::after,
.section--terra.onda-su::before,
.section--terra.onda-giu::after,
.newsband::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E");
background-repeat: repeat;
}
.section--oliva.onda-su::before,
.section--oliva.onda-giu::after { background-color: var(--oliva); }
.section--terra.onda-su::before,
.section--terra.onda-giu::after,
.newsband::before { background-color: var(--terra-chiara); }
/* --- La newsletter non era centrata nella propria fascia ---------------
La curva d'ingresso occupa spazio in cima ma non in fondo, quindi il
margine uguale sopra e sotto lasciava il contenuto piu' vicino al piede.
Il margine in cima tiene conto della curva. */
.newsband {
padding-block: calc(clamp(2.5rem, 5vw, 4rem) + clamp(1.75rem, 3.2vw, 3rem))
clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 47.99rem) {
}
/* ==========================================================================
32. UN VERDE SOLO, E LA SCHEDA ATTIVA
========================================================================== */
/* --- La scheda aperta ----------------------------------------------------
Trasparente del tutto era un buco: la fascia sembrava rotta proprio dove
si sta guardando. Adesso ha un velo suo, molto piu' chiaro degli altri
due: la fotografia si intravede - che era la richiesta - ma la scheda
resta una scheda. Le altre due arretrano nel buio. */
.hero-slider .slider__tabs .slider__dot[aria-current="true"] {
background: rgb(10 22 12 / 0.24);
backdrop-filter: blur(3px);
color: var(--white);
border-top-color: var(--oro);
}
.hero-slider .slider__tabs .slider__dot:not([aria-current="true"]) {
background: rgb(10 22 12 / 0.72);
backdrop-filter: blur(10px);
}
/* --- Un verde solo per le azioni ---------------------------------------
In pagina se ne contavano quattordici. Fra questi due che facevano lo
stesso mestiere e non si somigliavano: il «Contattaci» della testata sul
verde del marchio, i bottoni della pagina sull'oliva del piano
editoriale. Due bottoni uguali di due colori diversi.
La regola, da qui in avanti:
· VERDE DEL MARCHIO (--azione) - tutto cio' che si clicca: bottoni,
collegamenti, icone attive. E' il verde del logo un gradino piu'
fondo, perche' quello originale su carta calda si ferma a 4,4:1.
· OLIVA - le superfici: le fasce piene, i fondi. Mai un'azione.
· ORO - l'accento che segnala, non che si clicca: il punto
dell'occhiello, il filo della scheda aperta, i numeri.
Il marchio nel logo resta il suo, che non si tocca. */
:root {
--azione: #116c37;
--azione-fonda: #0e502a;
--action: var(--azione);
--action-hover: var(--azione-fonda);
--link: var(--azione);
--focus: var(--azione);
}
.btn--solid,
.header__cta,
.newsband .newsband__form button.btn,
.newsband .newsband__form a.btn,
.hero-slider .cartiglio .btn {
background: var(--azione);
border-color: var(--azione);
color: var(--white);
}
.btn--solid:hover,
.header__cta:hover,
.newsband .newsband__form button.btn:hover,
.newsband .newsband__form a.btn:hover,
.hero-slider .cartiglio .btn:hover {
background: var(--azione-fonda);
border-color: var(--azione-fonda);
color: var(--white);
}
/* I collegamenti in linea e le frecce */
.linea, .caro__arrow { color: var(--azione); }
.caro__arrow:hover { background: var(--azione); border-color: var(--azione); color: var(--white); }
/* Il verde acceso #69e89e restava in giro da base.css su occhielli e icone
di servizio: e' un verde da schermo, fuori dalla famiglia calda. */
.section--bosco .eyebrow,
.section--bosco .linea,
.newsband .eyebrow,
.footer__item .ico { color: var(--oro-tenue); }
/* Il bottone secondario, cioe' `.btn` senza modificatori. Nasce con
`border: 1px solid transparent` e nessun fondo: da solo e' testo, non un
bottone. C'era la regola per le fasce scure e mancava quella per i fondi
chiari, che sono la maggioranza - cinquantotto inviti su settanta si
leggevano come una frase qualunque, e due pagine intere non avevano un
solo bottone visibile. */
.btn:not(.btn--solid):not(.btn--light) {
color: var(--azione);
border-color: var(--azione);
}
.btn:not(.btn--solid):not(.btn--light):hover,
.btn:not(.btn--solid):not(.btn--light):focus-visible {
background: var(--azione);
border-color: var(--azione);
color: var(--white);
}
/* Sulle fasce scure il verde d'azione non si legge: li' il bottone e'
chiaro su fondo scuro, che e' l'unico rovesciamento ammesso. */
.section--oliva .btn:not(.btn--solid) {
color: var(--terra-chiara);
border-color: rgb(236 228 214 / 0.5);
}
.section--oliva .btn:not(.btn--solid):hover {
background: var(--terra-velo);
color: var(--oliva-cupo);
border-color: var(--terra-velo);
}
.section--oliva .linea { color: var(--oro-tenue); }
/* Il bottone dell'hero era diventato vuoto: la regola dei bottoni di
contorno ha la stessa forza e arriva dopo. Su una fotografia un bottone
di contorno non si vede - qui va pieno. */
.hero-slider .slider__content .btn,
.hero-slider .slider__content .btn:not(.btn--solid):not(.btn--light) {
background: var(--azione);
border-color: var(--azione);
color: var(--white);
}
.hero-slider .slider__content .btn:hover,
.hero-slider .slider__content .btn:not(.btn--solid):not(.btn--light):hover {
background: var(--azione-fonda);
border-color: var(--azione-fonda);
color: var(--white);
}
/* ==========================================================================
33. LE DECORAZIONI
Piccole cose che si notano solo se mancano. Nessuna aggiunge un file,
nessuna aggiunge una richiesta: sono tutte disegnate col CSS.
========================================================================== */
/* --- Il filetto sotto le testate di sezione ----------------------------
Una riga corta che parte da sinistra, oro, spessa un pelo. Chiude il
titolo e apre quello che viene dopo. */
.sec-head::after,
.caro__intro::after {
content: "";
display: block;
width: 3.5rem;
height: 2px;
margin-top: var(--s-4);
background: linear-gradient(to right, var(--oro), transparent);
border-radius: 2px;
}
.sec-head--centro::after { margin-inline: auto;
background: linear-gradient(to right, transparent, var(--oro), transparent); }
.section--oliva .sec-head::after,
.section--oliva .caro__intro::after { background: linear-gradient(to right, var(--oro), transparent); }
/* --- Il contorno delle fotografie --------------------------------------
Un filo sottilissimo dentro il bordo dell'immagine. Non si vede da
lontano: serve a staccare la fotografia dalla carta quando i due
hanno la stessa luminosita', che con foto chiare succede spesso. */
.forma,
.caro__item > img,
.caro__item > video,
.testata__foto,
.fioreria__foto { box-shadow: inset 0 0 0 1px rgb(32 38 30 / 0.07); }
/* --- Le virgolette del racconto ----------------------------------------
Nel chi siamo la frase in mezzo e' quasi una citazione: due virgolette
grandi e tenui, dietro, la trattano come tale. */
.dittico__perno { position: relative; }
.dittico__perno::before {
content: "\201C";
position: absolute;
top: -2.5rem;
left: 50%;
transform: translateX(-50%);
font-family: var(--serif);
font-size: 7rem;
line-height: 1;
color: var(--oro);
opacity: 0.22;
pointer-events: none;
}
/* --- Il numero delle schede del carosello ------------------------------
Le realizzazioni prendono un numero d'ordine, piccolo e in oro, davanti
alla didascalia: da' un ordine a quello che altrimenti e' un mucchio. */
.caro__item .marginalia { display: flex; align-items: baseline; gap: var(--s-2); }
.caro__item .marginalia::before {
content: counter(opera, decimal-leading-zero);
counter-increment: opera;
color: var(--oro);
font-weight: 700;
letter-spacing: 0;
}
.caro__track { counter-reset: opera; }
/* --- Il bordo delle fasce piene ----------------------------------------
Un filo chiarissimo lungo il taglio superiore e inferiore: separa la
fascia dalla carta senza disegnare una linea vera. */
.section--oliva { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08),
inset 0 -1px 0 rgb(255 255 255 / 0.08); }
/* --- Le foglioline nei margini -----------------------------------------
Due segni botanici disegnati col bordo, appoggiati ai lati delle sezioni
chiare. Sono grandi e tenui: si notano solo quando l'occhio ci passa
sopra, e danno alla pagina qualcosa da guardare nei vuoti.
Su schermo stretto spariscono: li' i vuoti non ci sono. */
@media (min-width: 68rem) {
.fioreria::before,
.persone-dittico::after {
content: "";
position: absolute;
width: 16rem;
height: 16rem;
border: 1px solid var(--salvia-ped);
opacity: 0.16;
border-radius: var(--forma-2);
pointer-events: none;
z-index: 0;
}
.fioreria { position: relative; overflow-x: clip; }
.fioreria::before { left: -7rem; top: 12%; }
.persone-dittico { position: relative; overflow-x: clip; }
.persone-dittico::after { right: -6rem; bottom: 8%; border-radius: var(--forma-5); }
}
/* --- Lo stacco fra le schede era troppo netto --------------------------
Attiva al 24% di velo, spente al 72%: quasi cinquanta punti di
differenza, che si leggono come due fasce diverse messe una accanto
all'altra invece che come tre schede della stessa fila.
Adesso lo scarto e' di venti punti - abbastanza per capire quale e'
aperta, poco perche' la fascia resti una cosa sola. Il segno forte lo
danno il filo d'oro e il grassetto, non il fondo. */
.hero-slider .slider__tabs .slider__dot[aria-current="true"] {
background: rgb(10 22 12 / 0.42);
backdrop-filter: blur(6px);
}
.hero-slider .slider__tabs .slider__dot:not([aria-current="true"]) {
background: rgb(10 22 12 / 0.62);
backdrop-filter: blur(8px);
}
.hero-slider .slider__tabs .slider__dot:not([aria-current="true"]):hover {
background: rgb(10 22 12 / 0.5);
}
/* --- Le schede: un fondo solo ------------------------------------------
Qualunque differenza di velo fra la scheda aperta e le altre spezzava la
fascia in tre pezzi. Il fondo e' lo stesso per tutte e tre: quello che
cambia e' il filo in cima e il colore dei testi.
Il segno piu' forte e piu' economico che ci sia. */
.hero-slider .slider__tabs .slider__dot,
.hero-slider .slider__tabs .slider__dot[aria-current="true"],
.hero-slider .slider__tabs .slider__dot:not([aria-current="true"]) {
background: rgb(10 22 12 / 0.58);
backdrop-filter: blur(8px);
}
.hero-slider .slider__tabs .slider__dot:hover {
background: rgb(10 22 12 / 0.46);
}
/* La `.galleria` non e' piu' roba della home: la sezione delle attivita'
adesso usa `.diario`. Qui c'era un blocco di regole scritte per quella
sezione, fra cui `border-radius: clamp(1rem, 2vw, 1.75rem)` sulle
fotografie - «angoli morbidi», del 2 settembre.
La home non la usa piu' da un pezzo, ma home.css lo caricano tutte le
pagine: quelle regole arrotondavano gli angoli delle gallerie di DODICI
pagine interne, coprendo le forme organiche e producendo esattamente il
rettangolo con gli angoli smussati che il cliente ha vietato - chiesto e
confermato in riunione. Il disegno vero sta in pagina3.css. */
/* ==========================================================================
34. RITOCCHI DEL 2 SETTEMBRE, TERZO GIRO
========================================================================== */
/* --- Il chi siamo torna alle sagome ------------------------------------
Le cornici squadrate qui stonavano: e' la sezione piu' emotiva della
pagina, e due rettangoli la irrigidivano. */
.dittico__lato .forma,
.dittico__lato .forma > img { aspect-ratio: 4 / 5; }
.galleria .marginalia { color: var(--salvia-testo); }
/* --- La newsletter e il footer, spaziati davvero -----------------------
La curva d'ingresso occupa spazio in cima ma non in fondo: contando i
margini uguali, il contenuto restava schiacciato verso il basso in una
fascia e verso l'alto nell'altra. Qui il margine superiore comprende
sempre l'altezza della curva. */
.newsband {
--curva: clamp(1.75rem, 3.2vw, 3rem);
padding-block: calc(var(--curva) + clamp(3rem, 5.5vw, 4.5rem)) clamp(3rem, 5.5vw, 4.5rem);
}
.footer {
--curva: clamp(1.75rem, 3.2vw, 3rem);
padding-top: calc(var(--curva) + clamp(1.5rem, 2.5vw, 2.25rem));
}
.footer__grid { padding-block: 0 clamp(2rem, 3.5vw, 3rem); }
.footer__legal { padding-block: clamp(1.25rem, 2vw, 1.75rem); }
/* ==========================================================================
35. IL MOVIMENTO ALLO SCORRIMENTO
Tre cose, tutte legate a dove si e' arrivati leggendo. Nessuna libreria:
`animation-timeline: view()` fa il lavoro nel compositore, senza un
ascoltatore di scroll che gira a ogni fotogramma.
Dove non e' supportato non succede niente e la pagina resta ferma: e'
un miglioramento, non un requisito.
========================================================================== */
@media (prefers-reduced-motion: no-preference) {
/* 1. La sagoma della fioreria respira e ruota appena mentre le si passa
davanti. E' la fotografia piu' grande della pagina e sta ferma da
sola per mezzo schermo: un movimento lentissimo la tiene viva. */
.fioreria__foto {
animation: fioreria-vive linear both;
animation-timeline: view();
animation-range: entry 10% exit 90%;
}
@keyframes fioreria-vive {
from { border-radius: var(--forma-2); transform: rotate(-2.2deg) scale(0.97); }
50% { border-radius: var(--forma-5); transform: rotate(0deg) scale(1); }
to { border-radius: var(--forma-6); transform: rotate(2deg) scale(0.98); }
}
/* 2. Le sezioni entrano salendo di poco e schiarendosi. Sostituisce il
vecchio `reveal` a scatto: qui il movimento segue lo scorrimento
invece di partire tutto insieme al primo incontro. */
.sec-head,
.caro__intro,
.fioreria__testo,
.dittico__perno,
.newsband__griglia {
animation: sale-piano linear both;
animation-timeline: view();
animation-range: entry 0% entry 55%;
}
/* Nessuna opacita' qui dentro: se `view()` non si risolve - e dentro un
contenitore con `overflow: clip` non si risolve - l'elemento resta sul
primo fotogramma per sempre. Con l'opacita' a zero significa contenuto
invisibile: e' successo alla fascia newsletter, misurata a 0,006.
Il movimento da solo, se fallisce, non nasconde niente. */
@keyframes sale-piano {
from { transform: translateY(1.75rem); }
to { transform: none; }
}
/* 3. Le fotografie delle griglie si scoprono una dopo l'altra, ognuna al
proprio passaggio: non tutte insieme come farebbe un ritardo fisso. */
.mestiere,
.galleria figure,
.dittico__lato {
animation: scopri linear both;
animation-timeline: view();
animation-range: entry 5% entry 60%;
}
@keyframes scopri {
from { transform: translateY(2rem) scale(0.985); }
to { transform: none; }
}
/* 4. La fascia oliva NON si stringe entrando.
C'era un'animazione che la restringeva con `clip-path: inset()`, e
quel ritaglio taglia al bordo della sezione: le due curve stanno
FUORI da quel bordo, disegnate da ::before e ::after con un margine
negativo, e venivano tagliate via. Ogni fascia verde del sito aveva
i bordi dritti - contro la regola che una fascia piena non comincia
ne' finisce mai con una riga dritta.
Misurato: la curva restava alta 1 px invece di 38. Sulle fasce
color terra, che non avevano questa animazione, i 38 px c'erano.
La curva vale piu' dell'ingresso: l'ingresso e' andato. */
}
/* Dove `view()` non c'e', il vecchio reveal continua a fare il suo lavoro:
le due cose non si pestano i piedi perche' agiscono su elementi diversi. */
@supports not (animation-timeline: view()) {
.fioreria__foto { animation: respiro 22s ease-in-out infinite; }
}
/* --- Le realizzazioni tornano dentro la colonna ------------------------
Due nastri a tutta larghezza uno sotto l'altro erano troppo: quello dei
servizi resta a filo di schermo, questo parte da sotto il titolo. */
/* Il nastro sta dentro una colonna: i margini li mette quella, e quello che
esce dalla colonna viene tagliato invece di spuntare sul bordo. */
#opere .caro__track {
padding-inline: 0;
scroll-padding-inline: 0;
padding-block: var(--s-2) 0;
}
/* --- Le schede dei servizi rispondono al passaggio --------------------- */
.servizi-caro .servizio {
transition: transform 420ms var(--ease-out);
}
.servizi-caro .servizio__media {
overflow: hidden;
transition: border-radius 620ms var(--ease-out);
}
.servizi-caro .servizio__media img {
transition: transform 700ms var(--ease-out);
}
.servizi-caro .servizio:hover,
.servizi-caro .servizio:focus-within { transform: translateY(-6px); }
.servizi-caro .servizio:hover .servizio__media img,
.servizi-caro .servizio:focus-within .servizio__media img { transform: scale(1.05); }
/* la sagoma cambia sotto il dito, come nelle tessere dei mestieri */
.servizi-caro .servizio:nth-child(4n+1):hover .servizio__media { border-radius: var(--forma-5); }
.servizi-caro .servizio:nth-child(4n+2):hover .servizio__media { border-radius: var(--forma-1); }
.servizi-caro .servizio:nth-child(4n+3):hover .servizio__media { border-radius: var(--forma-3); }
.servizi-caro .servizio:nth-child(4n+4):hover .servizio__media { border-radius: var(--forma-6); }
/* il badge si alza insieme alla scheda, ma un po' meno: si stacca */
.servizi-caro .servizio__badge { transition: transform 420ms var(--ease-out); }
.servizi-caro .servizio:hover .servizio__badge { transform: translateY(-3px) rotate(-6deg); }
/* il titolo si sottolinea */
.servizi-caro .servizio h3 a {
background-image: linear-gradient(var(--oro), var(--oro));
background-size: 0 2px;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size 320ms var(--ease-out);
}
.servizi-caro .servizio:hover h3 a { background-size: 100% 2px; }
@media (prefers-reduced-motion: reduce) {
.servizi-caro .servizio,
.servizi-caro .servizio__media,
.servizi-caro .servizio__media img,
.servizi-caro .servizio__badge,
.servizi-caro .servizio h3 a { transition: none; }
}
/* --- Lo scorrimento del nastro in giro continuo ------------------------
`scroll-snap-type: x mandatory` obbliga il browser ad agganciare la
scheda piu' vicina alla fine di OGNI micro-scorrimento. Su un nastro
normale non si nota; su uno che si ricolloca da solo, l'aggancio e il
riporto si contendono la stessa posizione e vengono fuori gli scatti.
`proximity` aggancia solo quando si e' gia' vicini, e lascia correre lo
slancio del dito. */
[data-loop] { scroll-snap-type: x proximity; }
[data-loop] > * { scroll-snap-align: center; }
/* la ricollocazione non deve mai capitare durante un'animazione morbida */
[data-loop] { scroll-behavior: auto; }
/* --- La fascia newsletter, spaziata davvero ----------------------------
Misurato: 146 px sopra contro 44 sotto. La curva d'ingresso sta FUORI
dalla fascia (`top` negativo), quindi non occupa spazio dentro e
sommarla al margine superiore era una compensazione sbagliata.
Margini uguali, e basta. */
.newsband { padding-block: clamp(3rem, 5.5vw, 4.5rem); }
/* --- Il cartiglio del wedding, centrato --------------------------------
Allineato a sinistra il testo seguiva un bordo che e' curvo: le righe
partivano tutte dallo stesso punto ma la sagoma no, e sembravano
spostate. Centrato dentro una forma tonda il testo si appoggia
all'asse della forma, che e' l'unica linea dritta che c'e'. */
.fascia-wedding__cartiglio {
justify-items: center;
text-align: center;
}
.fascia-wedding__cartiglio h2 { max-width: 16ch; }
.fascia-wedding__cartiglio p { max-width: 30ch; }
/* Con il testo centrato la forma va piu' rotonda, o l'asimmetria della
sagoma litiga con la simmetria del testo. */
.fascia-wedding__cartiglio { border-radius: 48% 52% 47% 53% / 49% 46% 54% 51%; }
/* --- Le realizzazioni: pagine intere, non un nastro tagliato -----------
Il nastro lasciava sempre una fotografia mozzata sul bordo destro: si
capisce che continua, ma si guarda male. Qui le schede si dividono in
pagine da tre - quattro su schermo largo - e ogni scorsa ne mostra un
gruppo intero. Sotto, i pallini dicono a che punto si e'. */
#opere .caro__track {
scroll-snap-type: x mandatory;
gap: clamp(1.25rem, 2.5vw, 2rem);
}
#opere .caro__item {
flex: 0 0 calc((100% - clamp(1.25rem, 2.5vw, 2rem) * 3) / 4);
scroll-snap-align: start;
}
#opere .caro__item:nth-child(4n+1) { scroll-snap-stop: always; }
@media (max-width: 68rem) {
#opere .caro__item { flex-basis: calc((100% - clamp(1.25rem, 2.5vw, 2rem) * 2) / 3); }
#opere .caro__item:nth-child(3n+1) { scroll-snap-stop: always; }
}
@media (max-width: 47.99rem) {
#opere .caro__item { flex-basis: calc((100% - clamp(1.25rem, 2.5vw, 2rem)) / 2); }
}
@media (max-width: 34rem) {
#opere .caro__item { flex-basis: 100%; }
}
/* I pallini sotto: gia' governati dallo script, qui solo vestiti. */
#opere .swipe-dots {
display: flex;
justify-content: center;
gap: var(--s-2);
margin-top: var(--s-6);
}
/* I puntini sono bottoni veri: sul telefono sono l'unico comando visibile
del nastro, e chi li vede prova a premerli. Il bersaglio e' 24x32 px
anche se il segno ne misura otto. */
#opere .swipe-dots button {
position: relative;
width: 0.5rem;
height: 0.5rem;
padding: 0;
border: 0;
border-radius: 100px;
background: var(--line);
cursor: pointer;
transition: background 260ms var(--ease-out), width 260ms var(--ease-out);
}
#opere .swipe-dots button::after {
content: "";
position: absolute;
inset: -12px -8px;
}
#opere .swipe-dots button.is-on {
background: var(--azione);
width: 1.5rem;
}
#opere .swipe-dots button:focus-visible {
outline: 2px solid var(--azione);
outline-offset: 4px;
}
/* ==========================================================================
36. L'HERO, RIMISURATO
Andando a misurare Ecogreen sul serio: sopra il video c'e' un velo
BIANCO su tutto il fotogramma, e il titolo e' a 23 px senza ombre. Loro
la leggibilita' la prendono schiarendo l'immagine - che e' una delle due
soluzioni che il cliente aveva accettato in riunione.
Qui il testo e' bianco, quindi schiarire non serve: serve il contrario.
Ma un velo scuro steso su tutto e' esattamente cio' che e' stato
contestato. La via di mezzo che funziona davvero: un alone scuro
ELLITTICO centrato dietro il testo, che si spegne prima di arrivare ai
bordi. Sull'immagine si legge come una vignettatura naturale, non come
un retino - e sta solo dove serve.
Misurato sui fotogrammi peggiori del video: il titolo passa da 2,3:1 a
oltre 7:1 senza toccare gli angoli dell'inquadratura.
========================================================================== */
.hero-slider .slider__media::before {
content: "";
position: absolute;
inset: 0;
height: 100%;
background:
radial-gradient(ellipse 56% 40% at 50% 48%,
rgb(8 18 10 / 0.60) 0%,
rgb(8 18 10 / 0.44) 40%,
rgb(8 18 10 / 0.14) 72%,
transparent 100%),
linear-gradient(to top, rgb(10 22 12 / 0.34), transparent 32%);
z-index: 1;
pointer-events: none;
}
/* Con l'alone dietro, le ombre sul testo tornano a fare il loro mestiere -
staccare il bordo della lettera - invece di reggere da sole tutto il
contrasto. */
.hero-slider .cartiglio h2 {
text-shadow: 0 1px 2px rgb(8 18 10 / 0.45), 0 2px 12px rgb(8 18 10 / 0.35);
}
/* Qui c'era «Le attivita': schede tipo articolo»: `.galleria figure`
diventava un riquadro bianco smussato, e `.galleria .cornice`,
`.cornice > img` e `.forma` prendevano `border-radius: 0`.
Era stato scritto per la sezione attivita' della home, che il cliente
voleva «tipo blog, ma smussati». Quella sezione adesso usa `.diario`, e la
home non ha piu' nessuna `.galleria` - ma home.css lo caricano tutte le
pagine. Il risultato: le gallerie di DODICI pagine interne erano riquadri
con gli angoli arrotondati e le fotografie squadrate dentro, cioe'
esattamente la sagoma che il cliente ha vietato, chiesta e confermata in
riunione, e le sei forme organiche non si vedevano da nessuna parte.
Il riquadro smussato resta dov'era stato chiesto: sulle schede datate
di `.diario`. */
/* --- La sagoma del wedding: meno uovo, piu' carattere ------------------
Con tutti i valori vicini al 50% veniva un ovale, che e' la forma piu'
banale che esista. Qui due angoli restano larghi e due si stringono, ma
sui due assi in modo diverso: viene un petalo storto, asimmetrico, che
si riconosce.
Non e' una delle sei di sistema perche' quelle sono tarate su fotografie
verticali; questa deve contenere un blocco di testo largo. */
.fascia-wedding__cartiglio {
border-radius: 62% 38% 55% 45% / 38% 58% 42% 62%;
padding: clamp(3.25rem, 6vw, 4.75rem) clamp(3rem, 5.5vw, 4.25rem);
}
/* Con una forma asimmetrica il testo centrato ha bisogno di un filo di
spostamento, o sembra fuori asse rispetto alla pancia della sagoma. */
.fascia-wedding__cartiglio > * { transform: translateX(0.5%); }
/* --- L'ingrandimento delle realizzazioni --------------------------------
La fotografia cresceva al passaggio, ma a ritagliarla era il nastro:
l'eccedenza spariva oltre il bordo della scheda accanto invece che dentro
il proprio riquadro. Serviva un contenitore, e adesso c'e'. */
#opere .caro__media {
display: block;
overflow: hidden;
border-radius: clamp(0.75rem, 1.6vw, 1.25rem);
box-shadow: inset 0 0 0 1px rgb(32 38 30 / 0.07);
}
#opere .caro__media > img,
#opere .caro__media > video {
display: block;
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: 0;
transition: transform 760ms var(--ease-out);
}
#opere .caro__item:hover .caro__media > img,
#opere .caro__item:focus-within .caro__media > img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
#opere .caro__media > img { transition: none; }
}
/* Rete di sicurezza: qualunque cosa vada storto con le linee temporali
dello scorrimento, il contenuto resta visibile. */
.sec-head, .caro__intro, .fioreria__testo, .dittico__perno,
.newsband__griglia, .mestiere, .galleria figure, .dittico__lato { opacity: 1; }
/* --- La newsletter, spazio davvero pari -------------------------------
I margini erano 72 e 72, eppure sotto sembrava stretto: la curva del
footer non sta dentro il footer, sale DENTRO questa fascia e le mangia
la parte bassa. Quaranta e passa pixel che il conto non vedeva perche'
appartengono all'elemento dopo.
Il margine in fondo comprende l'altezza di quella curva. */
.newsband {
padding-bottom: calc(clamp(3rem, 5.5vw, 4.5rem) + clamp(1.75rem, 3.2vw, 3rem));
}
/* ==========================================================================
37. IL DIARIO DELLE ATTIVITA'
Voci di calendario, non reparti: data, categoria, titolo, una riga. E' la
forma che avranno quando diventeranno articoli veri.
Spazio stretto fra le schede, perche' un elenco di appuntamenti si legge
come un elenco, non come tre riquadri distanti.
========================================================================== */
.diario {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
gap: clamp(0.75rem, 1.6vw, 1.25rem);
margin-top: var(--s-7);
}
.voce {
position: relative;
display: grid;
grid-template-rows: auto 1fr;
background: var(--white);
border: 1px solid var(--line);
border-radius: clamp(0.875rem, 1.8vw, 1.25rem);
overflow: hidden;
transition: transform 380ms var(--ease-out),
box-shadow 380ms var(--ease-out),
border-color 380ms var(--ease-out);
}
.voce:hover,
.voce:focus-within {
transform: translateY(-5px);
border-color: var(--terra);
box-shadow: 0 1.25rem 2.5rem rgb(32 38 30 / 0.11);
}
.voce__media { display: block; overflow: hidden; aspect-ratio: 16 / 10; }
.voce__media img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform 760ms var(--ease-out);
}
/* Solo se la scheda porta da qualche parte: su `attivita` le tre voci del
diario hanno la fotografia e nessun collegamento, e lo zoom prometteva un
clic che non esisteva. */
.voce:has(a):hover .voce__media img,
.voce:has(a):focus-within .voce__media img { transform: scale(1.05); }
.voce__corpo {
display: grid;
gap: var(--s-2);
align-content: start;
padding: clamp(1.1rem, 2.2vw, 1.5rem);
}
/* La riga di servizio: data e categoria, separate da un punto oro. */
.voce__meta {
display: flex;
align-items: center;
gap: var(--s-2);
margin: 0;
font-size: var(--t-3xs);
letter-spacing: var(--ls-maiusc);
text-transform: uppercase;
font-weight: 600;
color: var(--salvia-testo);
}
.voce__meta time { color: var(--azione); }
.voce__meta .voce__cat::before {
content: "";
display: inline-block;
width: 0.3rem; height: 0.3rem;
border-radius: 50%;
background: var(--oro);
margin-right: var(--s-2);
vertical-align: 0.15em;
}
.voce h3 {
font-family: var(--serif);
font-weight: 600;
font-size: var(--t-lg);
line-height: var(--lh-title);
margin: 0;
}
.voce h3 a { color: inherit; text-decoration: none; }
.voce h3 a::after { content: ""; position: absolute; inset: 0; } /* tutta la scheda cliccabile */
.voce__corpo > p:last-child {
margin: 0;
font-size: var(--t-sm);
line-height: var(--lh-body);
color: var(--ink-soft);
}
/* --- Le due curve in fondo non devono essere gemelle -------------------
Newsletter e footer avevano la stessa identica sagoma, una sopra
l'altra: due archi uguali a poca distanza si leggono come un errore di
ripetizione. E tutte e due erano troppo pronunciate.
Qui sono piu' basse, e ognuna ha il proprio profilo: la prima sale
spostata a sinistra, la seconda a destra. */
.newsband::before {
height: clamp(1.25rem, 2.2vw, 2rem);
top: calc(clamp(1.25rem, 2.2vw, 2rem) * -1 + 1px);
border-radius: 62% 38% 0 0 / 100% 100% 0 0;
}
.footer::before {
height: clamp(1.5rem, 2.6vw, 2.25rem);
top: calc(clamp(1.5rem, 2.6vw, 2.25rem) * -1 + 1px);
border-radius: 34% 66% 0 0 / 100% 100% 0 0;
}
.newsband { padding-bottom: calc(clamp(3rem, 5.5vw, 4.5rem) + clamp(1.5rem, 2.6vw, 2.25rem)); }
.footer { padding-top: calc(clamp(1.5rem, 2.6vw, 2.25rem) + clamp(1.5rem, 2.5vw, 2.25rem)); }
/* --- Il vuoto sopra le recensioni --------------------------------------
Il dittico aveva un margine sotto di 4rem: serviva a staccarlo dal
riquadro dei recapiti, che stava nella stessa sezione. I recapiti sono
passati nel footer, il margine e' rimasto - e sommato al margine della
sezione faceva 165 px contro i 101 di tutte le altre.
Era l'unico salto di ritmo della pagina. */
.dittico { margin-bottom: 0; }
/* ==========================================================================
38. LA FORMA DELLA FIORERIA CHE SI DEFORMA
Prima il movimento era legato allo scorrimento e appena accennato: chi
restava fermo a guardarla non vedeva niente.
Adesso e' un giro continuo, e la deformazione e' ampia - gli otto valori
del raggio si spostano di venti-trenta punti a ogni tappa, non di due.
Sei tappe invece di tre, cosi' il giro non si legge come un avanti e
indietro. Trentadue secondi: abbastanza lento da sembrare respiro e non
un'animazione, abbastanza mosso da vedersi.
Costo: border-radius e transform stanno sul compositore, quindi e' un
solo elemento animato senza ridisegno del testo attorno.
========================================================================== */
.fioreria__foto {
animation: fioreria-morph 32s ease-in-out infinite;
animation-timeline: auto;
animation-range: normal;
will-change: border-radius, transform;
}
@keyframes fioreria-morph {
0% {
border-radius: 62% 38% 46% 54% / 54% 42% 58% 46%;
transform: rotate(-2.5deg) scale(1);
}
17% {
border-radius: 34% 66% 28% 72% / 66% 30% 70% 34%;
transform: rotate(1.5deg) scale(1.02);
}
34% {
border-radius: 78% 22% 58% 42% / 38% 62% 38% 62%;
transform: rotate(3deg) scale(0.985);
}
50% {
border-radius: 26% 74% 66% 34% / 40% 26% 74% 60%;
transform: rotate(-1deg) scale(1.03);
}
67% {
border-radius: 50% 50% 22% 78% / 72% 28% 72% 28%;
transform: rotate(-3.5deg) scale(0.99);
}
84% {
border-radius: 41% 59% 33% 67% / 58% 36% 64% 42%;
transform: rotate(2deg) scale(1.015);
}
100% {
border-radius: 62% 38% 46% 54% / 54% 42% 58% 46%;
transform: rotate(-2.5deg) scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
.fioreria__foto { animation: none; }
}
/* ==========================================================================
39. IL WEDDING SU TELEFONO
Sotto i 768 px la fascia si spezzava: la fotografia diventava una striscia
alta 240 px e il cartiglio scendeva sotto, su carta. Misurato: la sezione
e' alta 599 px e la fotografia ne copriva 240.
Era stato fatto per non avere testo sopra un'immagine su schermo stretto.
Ma il cartiglio e' una forma opaca, non un velo - e il senso della sezione
e' la fotografia piena. Torna com'e' su schermo largo: immagine a tutta
sezione, cartiglio sopra.
========================================================================== */
@media (max-width: 47.99rem) {
.fascia-wedding {
display: grid;
align-items: center;
min-height: clamp(30rem, 92vw, 38rem);
}
.fascia-wedding__foto {
position: absolute;
inset: 0;
height: 100%;
width: 100%;
object-fit: cover;
z-index: -1;
}
.fascia-wedding > .shell {
position: static;
margin-top: 0;
padding-block: clamp(2.5rem, 8vw, 4rem);
}
/* Il cartiglio non copre piu' tutta la fotografia: lascia respirare i
bordi, cosi' si vede che sta appoggiato sopra e non che e' il fondo. */
.fascia-wedding__cartiglio {
max-width: min(23rem, 88%);
margin-inline: auto;
padding: clamp(2.25rem, 8vw, 3rem) clamp(2rem, 7vw, 2.75rem);
}
}
/* ==========================================================================
40. LE ATTIVITA': GRIGLIA SU SCHERMO LARGO, CAROSELLO SU TELEFONO
Tre schede in colonna su un telefono sono tre schermate di scorrimento
per tre voci. Meglio affiancarle e farle trascinare: si vede subito che
ce n'e' piu' di una, e si passano col dito.
Su schermo largo restano una griglia: li' ci stanno tutte e tre e un
carosello nasconderebbe quello che c'e' gia' spazio per mostrare.
========================================================================== */
/* Su schermo largo il nastro si comporta da griglia: si spengono le
proprieta' di scorrimento che la classe .caro__track porta con se'. */
/* 17rem lasciava la colonna delle schede a 273 px a 1280 e a 296 a 1024:
piu' stretta dei 398 che aveva a 900, cioe' si restringeva mentre lo
schermo cresceva, e a 1280 la data andava a capo su cinque schede su sei.
Da 768 in su la misura minima sale a 21rem: la colonna non scende mai
sotto i 339 px, e le sei schede di `corsi` fanno 3+3 invece di 4+2.
Sotto i 768 resta 17rem, perche' li' 21rem darebbe una colonna sola. */
@media (min-width: 48rem) {
.diario { grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }
}
@media (min-width: 48rem) {
.diario.caro__track {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
overflow-x: visible;
scroll-snap-type: none;
padding-inline: 0;
padding-block: 0;
}
}
@media (max-width: 47.99rem) {
.diario.caro__track {
display: flex;
gap: var(--s-4);
overflow-x: auto;
scroll-snap-type: x proximity;
scroll-padding-inline: var(--shell-pad);
padding-inline: var(--shell-pad);
padding-block: var(--s-2) var(--s-5);
margin-inline: calc(var(--shell-pad) * -1);
scrollbar-width: none;
}
.diario.caro__track::-webkit-scrollbar { display: none; }
.diario .voce {
flex: 0 0 min(78vw, 20rem);
scroll-snap-align: start;
}
/* Le frecce su telefono non servono: si trascina. Ma serve dire che si
puo' fare - i puntini lo dicono senza occupare spazio. */
.attivita .caro__arrows { display: none; }
}
/* --- Il campo email era alto 256 px su telefono -----------------------
Il modulo su schermo stretto va in colonna, e in colonna `flex-basis`
non e' piu' la larghezza ma l'ALTEZZA: quel `16rem` pensato per la
larghezza del campo diventava 256 px di altezza.
In colonna il campo prende la sua altezza dal contenuto. */
.newsband__form { align-items: center; }
.newsband__form input {
flex: 1 1 auto;
width: 100%;
min-height: 3.25rem;
height: 3.25rem;
}
/* Qui il modulo veniva impilato su telefono, perche' campo e bottone erano
due pillole separate e affiancate non ci stavano. Adesso la pillola e'
una sola e ci stanno: a 390 px il campo prende 220 px e il bottone 110.
Impilarli spezzerebbe proprio l'unita' che si voleva. */
@media (max-width: 47.99rem) {
.newsband__form .btn { padding-inline: 1.1rem; }
}
/* Su iOS, toccare un campo con il testo sotto i 16 px fa ingrandire tutta
la pagina, e da li' non torna piu' indietro da sola. Sedici esatti: e'
la soglia, non una scelta estetica. */
.newsband__form input { font-size: 16px; }
/* ==========================================================================
41. IL FOOTER
Quattro colonne di pari peso, tutte con la stessa voce in maiuscoletto
sopra: nessuna prevale, e quello che serve davvero - a che ora aprono e
come ci si arriva - sta in fondo a destra come l'ultima cosa.
Tre interventi:
· gli orari dicono se oggi e' aperto, che e' l'unica cosa che si cerca
davvero in un footer di un negozio
· la colonna «Esplora» torna su telefono, dove era spenta
· i recapiti diventano il blocco piu' forte, non il secondo
========================================================================== */
/* --- Gli orari: il giorno di oggi si vede --------------------------------
Lo script sa gia' che giorno e' - lo usa per la riga in testata. Qui la
riga di oggi prende un filo d'oro a sinistra e il testo pieno; le altre
arretrano. Chi guarda trova subito la sua. */
.footer__orari { display: grid; gap: var(--s-3); margin: 0; }
.footer__orari > div {
display: grid;
gap: 0.1rem;
padding-left: var(--s-3);
border-left: 2px solid transparent;
transition: border-color var(--dur-fast) var(--ease-out);
}
/* L'etichetta del giorno stava a 0,45 di alfa, cioe' 3,95:1 sul verde del
piede: sotto il minimo, e su un maiuscoletto da 12 px. In struttura.css
era 0,62 e andava bene; questa regola, che arriva dopo, l'aveva
abbassata. Tornata a 0,62 vale 6,27:1. */
.footer__orari dt {
font-size: var(--t-3xs);
letter-spacing: var(--ls-maiusc);
text-transform: uppercase;
font-weight: 600;
color: rgb(245 243 234 / 0.62);
}
.footer__orari dd {
margin: 0;
font-size: var(--t-xs);
color: rgb(245 243 234 / 0.7);
font-variant-numeric: tabular-nums; /* le cifre in colonna */
}
.footer__orari > div.is-oggi { border-left-color: var(--oro); }
.footer__orari > div.is-oggi dt { color: var(--oro); }
.footer__orari > div.is-oggi dd { color: var(--white); font-weight: 500; }
/* --- I recapiti pesano di piu' -----------------------------------------
Sono la ragione per cui si scende in fondo a un sito di un negozio.
Il telefono si legge come un numero da chiamare, non come una riga. */
.footer__col--contatti .footer__item span { font-size: var(--t-sm); }
/* Il telefono era in serif a 19 px mentre indirizzo e WhatsApp stanno a 15
in sans: si leggeva come un errore di impaginazione, non come un rilievo.
Adesso e' della stessa taglia e della stessa famiglia dei fratelli, e si
distingue per peso e colore - che basta, ed e' quello che si fa quando
una voce conta piu' delle altre senza doverlo gridare. */
/* Il numero di telefono aveva un peso suo - 600 e bianco pieno - fra
l'indirizzo e il WhatsApp che stanno a 400: nella stessa colonna di tre
righe si leggeva come se fosse un'altra cosa. Adesso pesa come gli altri
due, e a distinguerlo restano le cifre allineate. */
.footer__col--contatti a[href^="tel:"] span {
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
}
.footer__col--contatti .ico { color: var(--oro-tenue); }
/* --- Le colonne respirano ------------------------------------------------
Le quattro voci in maiuscoletto erano tutte identiche e allo stesso
livello. Un filo sopra ognuna le separa senza aggiungere una linea. */
.footer__title {
padding-bottom: var(--s-2);
border-bottom: 1px solid rgb(245 243 234 / 0.12);
margin-bottom: var(--s-3);
}
/* --- Su telefono ---------------------------------------------------------
La colonna «Esplora» resta spenta. L'avevo riaccesa con l'idea che su un
telefono servisse, perche' il menu in cima e' chiuso - ma il menu si apre
con un tocco ed e' sempre li': la colonna e' una seconda navigazione che
allunga il piede e ripete quello che c'e' gia'. Decisione del 08/09. */
@media (max-width: 47.99rem) {
.footer__grid { gap: var(--s-6); }
}
/* ==========================================================================
42. I BERSAGLI DA TOCCARE
Nove elementi stavano sotto i 24 px di altezza - la soglia minima - e
quasi tutti erano numeri di telefono: la cosa che da un telefono si tocca
piu' spesso su un sito di un negozio.
Non si ingrandisce il testo: si allarga l'area sensibile attorno, che e'
la stessa cosa per il dito e non cambia niente all'occhio.
========================================================================== */
/* `:not(.topbar__hide-m)` perche' la regola che nasconde quella voce sotto i
1088 px ha la stessa specificita' di questa e arriva prima: senza
l'esclusione, WhatsApp riappariva sul telefono e spingeva la fascia fuori
dallo schermo da tutt'e due i lati. */
.topbar__item:not(.topbar__hide-m),
.menu__riga,
.footer__item,
.footer__col--nav a,
.footer__legal a,
.recapiti__voce a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
/* Nella topbar le voci stanno su una riga alta 40: li' i 44 px si prendono
allargando il tocco oltre il testo, senza gonfiare la fascia. */
.topbar__item {
min-height: 0;
position: relative;
padding-block: 0.35rem;
}
.topbar__item::after {
content: "";
position: absolute;
inset: -0.7rem -0.5rem;
}
/* Il marchio in testata: 26 px di altezza sono pochi per il dito */
.header__logo { display: inline-flex; align-items: center; min-height: 44px; }
/* Le voci del menu a tendina hanno gia' il loro spazio, ma il numero di
telefono dentro il menu no. */
.menu__riga { padding-block: 0.55rem; }
/* ==========================================================================
43. TIPOGRAFIA: LE CORREZIONI CHE NON ASPETTANO LA SCALA
Dall'audit in docs/28_TIPOGRAFIA.md. Sono i rilievi che si sistemano
dove nascono, senza toccare i token di base.css - che e' caricato da
tutte le pagine e va rifatto a parte, con calma.
========================================================================== */
/* --- Le tessere dei mestieri a una colonna sotto i 640 px ---------------
Restavano due colonne anche su un telefono: 156 px di larghezza, e il
testo andava su quattro righe da ventuno caratteri. Sotto i quarantacinque
una riga si legge a fatica, e a ventuno si legge a scatti. */
@media (max-width: 40rem) {
.mestieri { grid-template-columns: 1fr; gap: var(--s-6); }
.mestieri > * { margin-top: 0 !important; }
.mestiere .forma,
.mestiere p { max-width: none; }
}
/* --- L'occhiello non dichiarava la propria interlinea -------------------
Ereditava 1,60 dal corpo del documento: un'etichetta da 12 px finiva in
un cassetto piu' alto di una da 13. E' la classe piu' usata del sistema,
trentatre' volte in pagina, quindi lo sbaglio si moltiplica. */
.occhiello { line-height: var(--lh-micro); }
/* --- Il sommario aveva lo stesso corpo del testo corrente ---------------
`--t-lg` e `--t-md` a 390 px valgono 17,17 e 17,00: un centesimo di
differenza, cioe' nessuna. Il sommario scende al gradino sotto, e la
differenza torna a farla il colore e la larghezza della colonna. */
.sec-head .lead { font-size: var(--t-md); }
/* --- I titoli delle schede attivita' erano piu' piccoli degli altri -----
Stavano a `--t-lg`, cioe' come il sommario, mentre gli altri titoli di
scheda stanno a 20 px. Un titolo non puo' pesare come un sommario. */
.voce h3 { font-size: var(--t-xl); }
/* --- Il piede aveva righe da 110 caratteri a 768 px ---------------------
La regola che toglie il tetto ai paragrafi del footer serviva ai
recapiti, ma valeva per tutti. */
.footer__brand p,
.footer__col p { max-width: 42ch; }
/* ==========================================================================
44. DOVE NON C'E' UN PUNTATORE
I titoli delle tessere sono collegamenti, ma si annunciano con una
sottolineatura che cresce al passaggio del mouse. Su un telefono il
passaggio del mouse non esiste: quei titoli restavano dello stesso colore
del testo attorno, senza decorazione, e non c'era modo di sapere che si
potevano toccare. Misurato nel referto mobile: quattro reparti e dodici
servizi non sembravano collegamenti.
Qui la sottolineatura c'e' e basta, ferma. Non e' un ripiego: su una
superficie che si tocca l'affordance deve essere gia' visibile.
========================================================================== */
@media (hover: none) {
.mestiere h3 a,
.servizi-caro .servizio h3 a,
.famiglia h3 a,
.altra h3 a,
.voce h3 a {
background-image: linear-gradient(var(--oro), var(--oro));
background-size: 100% 2px;
background-position: 0 100%;
background-repeat: no-repeat;
transition: none;
}
}
/* ==========================================================================
45. IL PIEDE, RIVISTO IL 08/09
Otto rilievi puntuali. Le regole stanno tutte qui invece che sparse:
`.footer` aveva tre dichiarazioni di `padding-top` in tre punti diversi
del foglio, e vinceva l'ultima - trovarlo richiedeva tre ricerche.
========================================================================== */
/* --- Meno alto sopra e sotto --------------------------------------------
La curva d'ingresso occupa gia' uno spazio suo: sommata al margine
interno faceva 71 px prima della prima riga, e altrettanti in fondo. */
.footer {
--curva: clamp(1.75rem, 3.2vw, 3rem);
padding-top: calc(var(--curva) + clamp(0.75rem, 1.4vw, 1.25rem));
}
.footer__grid { padding-block: 0 clamp(1.5rem, 2.6vw, 2.25rem); }
/* --- Le voci di Esplora piu' vicine --------------------------------------
Stavano a 36 px di passo per via del bersaglio da dito. Dove un dito non
c'e', il bersaglio non serve: il passo scende a 28. */
@media (hover: hover) and (pointer: fine) {
.footer__col--nav a { padding-block: 0.2rem; min-height: 0; }
}
/* --- Gli orari: le etichette si staccano dagli orari ---------------------
Erano 12 px in maiuscoletto grassetto contro 14 in tondo: sulla carta
diversi, all'occhio lo stesso peso, perche' il maiuscoletto spaziato
pesa quanto un corpo piu' grande. Adesso l'etichetta e' leggera e
l'orario ha un gradino in piu', e fra una riga e l'altra c'e' aria. */
.footer__orari { gap: var(--s-4); }
.footer__orari dt {
font-weight: 500;
color: rgb(245 243 234 / 0.58);
}
.footer__orari dd {
font-size: var(--t-sm);
font-weight: 500;
color: rgb(245 243 234 / 0.92);
}
/* --- La riga legale, allineata ------------------------------------------
La riga del copyright e l'elenco dei link stavano su due basi diverse:
`space-between` li allinea in orizzontale e nessuno li allineava in
verticale. */
.footer__legal {
align-items: center;
padding-block: clamp(1rem, 1.6vw, 1.4rem);
}
.footer__legal ul { align-items: center; }
/* ==========================================================================
46. LE QUATTRO TESSERE, ALLA STESSA ALTEZZA
La griglia e' a quattro colonne fisse: a 1400 px la colonna e' larga 284
e i testi stanno in due righe, ma fra i 1100 e i 1280 - cioe' sui
portatili - scende a 227 e due dei quattro passano a tre. Le tessere
diventano disallineate proprio dove si guardano di piu'.
Due cose insieme, perche' una sola non basta: i testi stanno adesso in
una fascia di lunghezza che fa due righe a QUALUNQUE larghezza della
colonna, e `min-height: 2lh` garantisce il pareggio anche se un domani
qualcuno scrive piu' corto.
========================================================================== */
.mestiere p {
min-height: 2lh;
}
/* --- Le dodici voci: descrizione piu' piccola e sempre di due righe ------
Erano a 15 px con interlinea 1,6, che sotto un titolo da 24 e' quasi la
stessa aria del testo corrente: la voce sembrava un paragrafo invece di
una didascalia. Scesa a 14 con interlinea 1,5, il titolo si stacca.
`min-height: 2lh` perche' i testi vanno da 41 a 65 caratteri e a seconda
della larghezza qualcuno cadeva su una riga e qualcuno su tre: le voci
affiancate devono avere la stessa altezza o la fila si sfilaccia. */
.servizio p {
font-size: var(--t-xs);
line-height: 1.5;
min-height: 2lh;
}
/* ==========================================================================
47. LE SEZIONI ENTRANO IN UNO SCHERMO DA PORTATILE
Su un 1440×900 lo spazio utile in finestra e' circa 780 px, e quattro
sezioni su nove ne chiedevano fra gli 840 e i 950: si vedeva sempre
mezza sezione, mai una intera. Il margine verticale e' gia' sceso da
100 a 75 px per lato in base.css e lo sfalsamento delle tessere e' stato
dimezzato; qui si taglia l'ultimo pezzo, che sono le proporzioni.
Vale solo da 64rem in su, cioe' dove il problema c'e': su un telefono le
tessere vanno in colonna e la proporzione alta serve.
========================================================================== */
@media (min-width: 64rem) {
/* Qui c'era anche `.mestiere .forma { aspect-ratio: 1/1 }`, per far
entrare la sezione in un portatile. Non ha mai funzionato: un commento
era finito in mezzo all'elenco dei selettori e la regola si era fusa
con quella sotto. Sistemata la sintassi toglieva 74 px alle fotografie
senza far entrare la sezione, e la home con le tessere 4/5 e' quella
approvata dal cliente: la regola e' uscita. */
/* La testata di sezione respirava 48 px sotto: ne bastano 32. */
.sec-head { margin-bottom: var(--s-6); }
}
/* --- La testata con il rimando sulla stessa riga del titolo --------------
«Tutte le attività» stava su una riga sua, sotto il sommario: una riga
intera piu' il suo spazio, per cinque parole. Sulla stessa riga del
titolo, allineato a destra, non costa niente in altezza ed e' dove
l'occhio lo cerca - e' il «vedi tutto» di quella sezione.
Sotto i 48rem torna sotto, perche' li' accanto non ci sta. */
.sec-head--riga { max-width: none; }
.sec-head__riga {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s-5);
width: 100%;
}
.sec-head--riga .lead { max-width: 46ch; }
@media (max-width: 47.99rem) {
.sec-head__riga {
flex-direction: column;
align-items: flex-start;
gap: var(--s-3);
}
}
@media (min-width: 64rem) {
/* Gli ultimi trenta pixel delle due sezioni piu' alte. La testata del
carosello respirava 48 px sotto e i pallini 32 sopra: sono due spazi
che servono a separare, non a far respirare, e 32 e 20 bastano. */
.caro__head,
.section--oliva .caro__head { margin-bottom: var(--s-6); }
#opere .swipe-dots { margin-top: var(--s-5); }
}
/* ==========================================================================
48. IL MODULO DELLA NEWSLETTER, UN PEZZO SOLO
Erano due pillole separate da dodici pixel: il campo con bordo e fondo
suoi, e il bottone accanto. Adesso la pillola e' una - la porta il
modulo - e dentro ci stanno il campo, trasparente e senza bordo, e il
bottone pieno appoggiato a destra. E' la forma che ha un modulo di
iscrizione: si vede che le due cose vanno insieme.
========================================================================== */
.newsband__form {
display: flex;
align-items: stretch;
gap: 0;
flex-wrap: nowrap;
background: var(--terra-velo);
border: 1px solid var(--line);
border-radius: 100px;
padding: 0.3rem;
transition: border-color var(--dur-fast) var(--ease-out);
}
/* Il fuoco si vede sulla pillola intera, non sul campo dentro: e' quello
che l'occhio riconosce come «sto scrivendo qui». */
.newsband__form:focus-within {
border-color: var(--azione);
box-shadow: 0 0 0 3px rgb(17 108 55 / 0.14);
}
.newsband__form input {
flex: 1 1 auto;
min-width: 0;
min-height: 46px;
padding: 0.6rem 1.25rem;
border: 0;
border-radius: 100px 0 0 100px;
background: transparent;
font: inherit;
font-size: var(--t-md); /* 17 px: sotto i 16 iOS ingrandisce la pagina */
color: var(--ink);
}
.newsband__form input:focus,
.newsband__form input:focus-visible { outline: none; }
.newsband__form .btn,
.newsband__form button.btn {
flex: 0 0 auto;
min-height: 46px;
padding-inline: clamp(1.25rem, 2.4vw, 2rem);
border-radius: 100px;
}
/* --- La fascia meno alta ------------------------------------------------
Erano 72 px sopra e altrettanti sotto per una riga di titolo e un
modulo: la fascia sembrava una sezione, e invece e' una cerniera fra la
pagina e il piede. */
/* Sotto, il modulo toccava quasi la curva del piede: il margine di sotto
tiene conto anche di quanto la curva sale dentro la fascia. */
.newsband { padding-block: clamp(2.25rem, 3.8vw, 3.25rem) calc(clamp(2.25rem, 3.8vw, 3.25rem) + var(--onda)); }
/* ==========================================================================
49. IL WEDDING SU TELEFONO: IL TITOLO E L'INVITO DENTRO LA SAGOMA
Segnalato: «da mobile font-size troppo grande, idem le CTA da mobile
dovrebbero essere piu' piccole e infatti esce dalla shape».
Misurato con `scripts/sagoma.py` (che controlla la sagoma, non il
riquadro): a 360 px il bottone sfondava la curva di 33 px, a 390 di 29,
a 414 di 24. Non era il bottone a essere fuori posto: e' la stessa
percentuale di raggio che su un riquadro quasi quadrato toglie molto
piu' che su uno largo. A 390 il cartiglio e' 308x331 e l'angolo in basso
a sinistra vale 139 px in larghezza e 205 in altezza: due terzi
dell'altezza del cartiglio sono curva.
Qui la sagoma resta storta - asimmetrica sui due assi, come chiesto -
ma il morso di sotto si accorcia, il margine interno cresce dove la
curva entra, e titolo e invito scendono di un gradino.
========================================================================== */
@media (max-width: 47.99rem) {
.fascia-wedding__cartiglio {
/* I raggi verticali erano bassi - 28 e 24 per cento - quindi in mezzo
ai due fianchi restava un tratto dritto lungo, e il cartiglio si
leggeva come una macchia tagliata di netto ai lati. Adesso ogni
angolo ha i due raggi quasi uguali in pixel, cioe' un arco tondo: i
fianchi sono curvi per tutta la loro altezza. */
border-radius: 62% 38% 46% 54% / 50% 48% 50% 44%;
padding: clamp(2.75rem, 8vw, 3.25rem) clamp(2.125rem, 6vw, 2.5rem)
clamp(2.5rem, 8vw, 3.25rem);
}
/* Un gradino sotto: --t-2xl vale 24 px a 390, e in una colonna di 242
un titolo di 24 px riempie la riga da bordo a bordo. */
.fascia-wedding__cartiglio h2 {
font-size: var(--t-xl); /* 20 px sotto i 768 */
line-height: 1.18;
/* Il rientro della prima riga serviva a scansare la curva in alto a
sinistra. Adesso la curva morde meno, e su un testo centrato quel
rientro sposta solo la prima riga fuori asse rispetto alla seconda. */
text-indent: 0;
}
/* L'invito era largo 239 px su 242 disponibili: sembrava un bottone a
tutta larghezza schiacciato dentro una forma tonda. */
.fascia-wedding__cartiglio .btn {
font-size: var(--t-xs);
padding-inline: 1.05rem;
}
}
/* Sotto i 352 px il cartiglio non e' piu' quasi quadrato: e' alto e stretto,
246x344, e le stesse percentuali diventano un morso di 133 px su 246 di
larghezza. Qui la sagoma si calma ancora, e il cartiglio si prende quasi
tutta la fotografia perche' non c'e' altro modo di far stare quattro righe
dentro una curva. */
/* Sotto i 376 px il cartiglio si prende quasi tutta la fotografia: non c'e'
altro modo di far stare quattro righe dentro una curva. E gli angoli si
accorciano un poco, perche' su un riquadro piccolo la stessa percentuale
toglie di piu'. */
@media (max-width: 23.5rem) {
.fascia-wedding__cartiglio {
max-width: 96%;
border-radius: 48% 40% 44% 40% / 46% 42% 42% 40%;
padding-inline: clamp(1.5rem, 5vw, 2rem);
}
}
/* ==========================================================================
50. IL TELEFONO: UN CORPO SOLO PER LA PROSA, E IL RITMO VERTICALE
Nasce dallo studio in docs/riferimenti/STUDIO-MOBILE.md, che ha misurato
quattro pagine a 360 · 390 · 414 · 768 con la larghezza vera (dentro un
iframe: Chrome headless sotto i 500 px calcola il layout a 500).
Le tre osservazioni arrivate - «il testo sembra grande», «troppo spazio
fra sub-title, title, description e button», «troppo poco spazio fra le
sezioni» - sono lo stesso difetto visto da tre lati: sul telefono si
accorciava solo la distanza FRA le sezioni, e nessuna di quelle DENTRO.
Il token --section e' gia' stato rimesso a posto in struttura.css. Qui
c'e' il resto: un corpo solo per la prosa, la catena della testata, e le
raccolte piu' strette del capitolo che le contiene.
========================================================================== */
@media (max-width: 47.99rem) {
/* --- Un corpo solo per il testo corrente ------------------------------
Sulla home convivevano QUATTRO corpi di prosa: 17 (sommari e testi
lunghi), 15 (tessere dei mestieri), 14 (schede del carosello) e 12
(righe di servizio). Su un telefono la colonna e' una sola e i blocchi
finiscono uno sotto l'altro: si vedevano quattro misure per lo stesso
mestiere. A 17 px la riga tiene 44 caratteri, sotto la soglia di 45 che
il progetto si e' dato; a 16 ne tiene 47. */
body { font-size: var(--t-testo); }
/* Le esclusioni non sono un dettaglio: `.occhiello`, `.caption`,
`.marginalia` e `.voce__meta` sono
e
veri, e senza i :not()
un'etichetta da 12 px diventava grande come un paragrafo. */
main p:not(.occhiello, .caption, .marginalia, .voce__meta, .dittico__frase, .lente__corpo p),
main li:not(.comuni li, .voce__meta, .briciole li),
.lead,
.sec-head .lead,
.caro__intro .lead,
.mestiere p:not(.occhiello),
.servizio p:not(.occhiello),
.voce p:not(.voce__meta, .occhiello),
.fioreria__testo p:not(.occhiello),
.dittico__nota,
.fascia-wedding__cartiglio p:not(.occhiello) { font-size: var(--t-testo); }
/* --- Sopra il titolo di sezione, non sotto ----------------------------
A 1440 la testata di sezione ha 12 px sopra l'h2 e 8 sotto, che e' il
verso giusto: il titolo sta piu' vicino a cio' che spiega. A 390 il
rapporto si rovesciava - 8 sopra e 14 sotto - perche' il gap e' uno
solo e le due righe che lo circondano hanno interlinee molto diverse.
Qui la differenza la fanno due margini, non un secondo gap. */
.sec-head .occhiello { margin-bottom: 0.35rem; }
/* --- Il titolo di pagina ----------------------------------------------
--t-6xl vale 49,8 px a 390: su 350 px di colonna sono 9,7-12,5
caratteri per riga misurati, e «Giardini su misura, dal progetto alla
manutenzione» esce in quattro righe da dodici caratteri, 209 px prima
di qualunque cosa. Un gradino sotto non toglie righe quasi mai - le
parole sono quelle - ma abbassa il blocco del 13%, e su wedding lo
dimezza (tre righe che diventano due). */
h1,
.testata__titolo,
.attraverso__titolo {
font-size: var(--t-5xl);
line-height: 1.10; /* 1,05 e' per una riga sola; qui sono tre */
}
/* --- La catena dentro la testata --------------------------------------
Occhiello, titolo, sommario e bottone erano distanziati tutti uguali, e
con quattro schemi diversi a seconda del blocco: 12 px nella .sec-head,
24 nella fioreria e nella chiusura, 16 nel dittico, 8 nella newsband.
Dentro la .sec-head i due valori erano perfino INVERTITI: 12 px sopra
il titolo e 9,4 sotto, cioe' il sommario si appoggiava alle discendenti
del titolo mentre l'occhiello galleggiava.
Qui l'occhiello sta stretto al titolo (8) perche' non e' un livello, e'
l'etichetta di quello che segue; tutto il resto prende il passo (16). */
.sec-head,
.caro__intro,
.fioreria__testo,
.chiusura__corpo,
.dittico__perno,
.richiamo__cartiglio,
.newsband__testo,
.fascia-wedding__cartiglio,
.attraverso__testo { row-gap: var(--v-legatura); }
.sec-head > :is(h1, h2, .sec-head__riga) ~ *,
.caro__intro > :is(h1, h2) ~ *,
.fioreria__testo > :is(h1, h2) ~ *,
.chiusura__corpo > :is(h1, h2) ~ *,
.dittico__perno > :is(h1, h2, .dittico__frase) ~ *,
.richiamo__cartiglio > :is(h1, h2) ~ *,
.newsband__testo > :is(h1, h2) ~ *,
.fascia-wedding__cartiglio > :is(h1, h2) ~ *,
.attraverso__testo > :is(h1, h2) ~ * {
margin-top: calc(var(--v-passo) - var(--v-legatura)); /* 8 + 8 = 16 */
}
/* Il sommario e' l'unico di questi fratelli con un'interlinea larga: ai
suoi 8 px di margine aggiunge quattro di mezza interlinea, e sotto il
titolo se ne vedono quattordici contro gli otto sopra. Qui il margine
scende a quattro perche' la distanza vista resti otto. */
.sec-head > :is(h1, h2, .sec-head__riga) ~ .lead { margin-top: 0.25rem; }
/* --- Lo stacco fra testata e contenuto --------------------------------
Resta 48: non era sbagliato, era indistinguibile dai 60 px che
separavano due sezioni intere. Con il capitolo a 96 il rapporto passa
da 1 : 1,27 a 1 : 2, e si vede a colpo d'occhio quale dei due e' un a
capo e quale un cambio di discorso. */
.sec-head,
.caro__head { margin-bottom: var(--v-stacco); }
/* --- Le raccolte -------------------------------------------------------
Le tessere dei mestieri stavano a 32 px l'una dall'altra dentro sezioni
separate da 60: non c'era modo di sapere se la fotografia sotto fosse
una quinta tessera o un capitolo nuovo. A 24 il rapporto col capitolo
passa da 1 : 1,9 a 1 : 4.
`.galleria` non e' qui perche' `pagina3.css` le da' gia' 20 px sul
telefono, e `.diario` perche' sul telefono e' un nastro orizzontale. */
.mestieri { gap: var(--v-grado); }
/* --- Le fasce colorate -------------------------------------------------
Avevano il trattamento opposto a quello giusto: il cambio di fondo
separa gia' da solo, eppure erano loro a prendere piu' aria (109-161 px
misurati) mentre due sezioni su carta, che non hanno nessun altro
segnale, ne prendevano 60.
Non ci sono `.fascia-wedding` e `.richiamo`: quelle due non hanno un
`padding` di sezione, si reggono su `min-height` e sul margine del
guscio, e aggiungergliene uno sposterebbe la fotografia. */
.section--bosco,
.section--oliva,
.section--terra,
.banner { padding-block: calc(var(--section) * 0.5); }
/* --- La scheda del carosello -------------------------------------------
`flex: 0 0 clamp(15rem, 23vw, 20rem)` si ferma a 240 px da 390 fino a
1043: la scheda restava piu' stretta di mezzo schermo per tutto l'arco
del telefono e del tablet, e il testo ci girava a 27 caratteri. */
.servizi-caro .servizio { flex: 0 0 min(19rem, 78vw); }
}
/* Sotto i 640 px le tessere dei mestieri stanno su una colonna sola: li'
`min-height: 2lh` non allinea piu' niente rispetto a nessuno, e teneva
una riga vuota sotto ognuna delle quattro. Le schede del carosello no:
quelle restano affiancate e l'altezza uguale serve ancora. */
@media (max-width: 40rem) {
.mestiere p { min-height: 0; }
}
/* L'occhiello dei cartigli sta sotto il titolo e aveva un margine negativo
di 8 px, messo quando il gap valeva 16: serviva a non farlo galleggiare.
Adesso il gap vale 8 e quel margine lo incolla alla riga sopra. */
@media (max-width: 47.99rem) {
.hero-slider .cartiglio .occhiello { margin-top: 0; }
}
/* --- Il collegamento del carosello va con le frecce --------------------
«Tutte le realizzazioni» stava sotto il titolo, da solo su una riga: 27
px di testo piu' 12 di distanza dentro la sezione piu' alta della home
(807 px, contro i 780 che entrano in un portatile da 1440x900). Il
titolo non puo' stargli accanto - a 1440 il carosello lascia 631 px
all'introduzione e «Giardini e terrazzi realizzati» a 52 px ne occupa
gia' quasi altrettanti - ma le frecce sono a destra e sono basse. */
.caro__coda {
display: flex;
align-items: center;
gap: clamp(1rem, 2.4vw, 2rem);
}
@media (max-width: 47.99rem) {
/* Sul telefono la testata si impila: qui il collegamento torna a
sinistra, sopra le frecce, invece di stringersi accanto a loro. */
.caro__coda {
flex-direction: column;
align-items: flex-start;
gap: var(--v-passo);
}
}
/* --- Il bottone non si rimpiccioliva mai --------------------------------
Misurato: `.btn` rende 15 px di corpo e 54 px di altezza
identici a 390 e a 1440, perche' il giro di correzioni del 2 settembre
(sezione 30, `padding: 1rem 2rem`) non ha nessun gradino sul telefono.
Il caso peggiore misurato: «Prenota allo 051 739090» largo 240 px su 350
di colonna, cioe' il 69% dello schermo.
Qui scende a 14 px di corpo e a un margine interno piu' stretto: restano
48 px di altezza, sopra i 44 del bersaglio tattile minimo. */
@media (max-width: 47.99rem) {
.btn,
.btn--light,
.btn--solid {
padding: 0.8rem 1.35rem;
font-size: var(--t-xs);
}
}
/* --- Le schede del diario, sul telefono ---------------------------------
12 px fra due schede dove la testata sta a 48 dal suo contenuto: le
schede si toccavano quasi, e non si capiva dove finisse una. Il grado
della scala e' 24. Dove il diario e' un nastro orizzontale (corsi, home)
questa riga non tocca niente, perche' li' conta il gap fra le colonne. */
@media (max-width: 47.99rem) {
.diario { row-gap: var(--v-grado); }
}
/* --- Il maiuscoletto della data aveva l'interlinea della prosa ----------
`.voce__meta` non dichiara `line-height` e prende --lh-body: 19,2 px su
un'etichetta di 12. `docs/28` § 3.2: sul maiuscoletto sempre --lh-micro,
mai altri. */
.voce__meta { line-height: var(--lh-micro); }
/* --- La scheda che si alza al passaggio e non porta da nessuna parte ----
`.voce:hover` solleva la scheda di 5 px e le mette un'ombra: e' il segno
che si puo' cliccare. Su alcune schede del diario non c'e' nessun
collegamento - sono appuntamenti passati, ed e' una scelta giusta - ma
l'affordance diceva il contrario. */
.voce:hover,
.voce:focus-within {
transform: none;
box-shadow: none;
}
.voce:has(a):hover,
.voce:has(a):focus-within {
transform: translateY(-5px);
box-shadow: 0 14px 30px rgb(22 48 29 / 0.10);
border-color: var(--terra);
}
/* --- La didascalia di galleria era piu' grande della prosa -------------
17 px serif contro i 16 del testo corrente sul telefono: una didascalia
non puo' pesare piu' del paragrafo che le sta sopra. */
@media (max-width: 47.99rem) {
.galleria .caption { font-size: var(--t-testo); }
}
/* --- L'onda si mangia il margine della sezione che segue ----------------
La curva sporge sotto la fascia di `clamp(2.5rem, 5.5vw, 5rem)` - 79 px a
1440 - e quello che sporge sta DENTRO la sezione dopo. Il margine alto
della sezione seguente e' 75 px: sotto la cupola dell'onda non ne resta
niente, e il titolo si legge attaccato al fondo verde. Segnalato sulla
home fra la fascia dei servizi e «Giardini e terrazzi realizzati».
Stessa cosa in verticale rovesciata per chi precede un'onda che sale. */
.onda-giu + .section,
.onda-giu + .richiamo,
.onda-giu + .fascia-wedding { padding-top: calc(var(--section) + var(--onda) * 0.62); }
.section:has(+ .onda-su) { padding-bottom: calc(var(--section) + var(--onda) * 0.62); }
/* --- «Cambiato il negozio. / Non chi c'e' dentro.» ----------------------
La frase e' scritta su due righe, con l'a capo nel sorgente. Ma la
colonna di mezzo del dittico misurava 439 px e la prima riga, a 52,6 px
di corpo, ne chiede 520: andava a capo da sola e le righe diventavano
tre. La colonna centrale si allarga, le due laterali si stringono - le
fotografie sono verticali e ci guadagnano anche loro. */
@media (min-width: 68rem) {
.dittico {
grid-template-columns: minmax(0, 0.73fr) minmax(0, 1fr) minmax(0, 0.73fr);
column-gap: clamp(1.5rem, 2.8vw, 2.5rem);
}
/* L'a capo qui lo decide il sorgente, non il bilanciatore. */
.dittico__frase { text-wrap: wrap; }
/* Fra 1180 e 1366 px la prima riga chiede piu' di quanto la colonna
centrale possa dare senza rubarlo alle fotografie: 436 px contro 405 a
1180. Invece di stringere ancora i lati, qui il titolo scende quel
tanto che basta - il 4% a 1280, l'8% a 1180 - e le due righe reggono.
Da 1366 in su `min()` sceglie la scala normale e non cambia niente. */
.dittico__frase { font-size: min(var(--t-4xl), 3.98vw - 2.96px); }
}
/* ==========================================================================
I QUATTRO MESTIERI SUL TELEFONO
Segnalato con una fotografia: a una colonna sola il titolo e la
descrizione allineati a sinistra sotto un ciottolo largo quanto lo
schermo restano appesi in basso a sinistra, e fra i due c'e' lo stesso
spazio che c'e' fra la fotografia e il titolo.
Qui vanno al centro - sotto un'immagine centrata e a tutta colonna e'
l'unico asse che esiste - e l'etichetta si stringe al suo titolo.
========================================================================== */
@media (max-width: 40rem) {
/* Anche la testata della sezione: con quattro schede centrate sotto, un
titolo appoggiato a sinistra resta l'unica cosa fuori asse. */
.section:has(.mestieri) .sec-head { justify-items: center; text-align: center; }
.section:has(.mestieri) .sec-head::after { margin-inline: auto; }
.mestiere {
text-align: center;
align-items: center;
gap: var(--s-4);
}
.mestiere h3 + p { margin-top: calc(var(--s-4) * -1 + var(--s-2)); }
.mestiere p { max-width: 30ch; }
}
/* --- La riga di rimando senza freccia -----------------------------------
«Tutte le realizzazioni» sta sulla stessa riga delle due frecce del
nastro: la freccina del collegamento faceva tre frecce in venti pixel.
Sulle altre `.linea` resta, perche' li' e' l'unico segno di direzione. */
.linea--nuda::after { content: none; }
/* --- Sul telefono il nastro dei reparti si scorre col dito ---------------
Segnalato: «da reparti e servizi togliere le frecce da mobile, si scorre
con il dito». Due bottoni da 40 px su una riga loro costano 56 px di
pagina e non servono a nessuno. */
@media (max-width: 47.99rem) {
.section--oliva .caro__arrows,
.caro:has(.servizi-caro) .caro__arrows { display: none; }
}
/* --- Le frecce del carosello, dove ci sono gia' i pallini ---------------
Sul telefono si scorre col dito, e i pallini dicono a che punto si e':
due bottoni da 40 px su una riga loro sono un'affordance in piu' che
costa 56 px di pagina. Restano dove i pallini non ci sono. */
@media (max-width: 47.99rem) {
.section:has(.swipe-dots) .caro__arrows { display: none; }
}
/* --- Le recensioni: la testata sta piu' vicina al riquadro --------------
I 48 px dello stacco valgono fra una testata e un contenuto che comincia
con del testo. Il riquadro delle recensioni comincia con il suo margine
interno, quindi allo stacco se ne sommano altri venti e sembra staccato
dal titolo che lo annuncia. */
@media (max-width: 47.99rem) {
.recensioni .sec-head { margin-bottom: var(--v-grado); }
}
/* --- Anche nel cartiglio del wedding l'etichetta sta sopra il titolo ----
Stessa correzione fatta sul richiamo delle pagine interne: era finita
sotto quando la sagoma rientrava troppo in alto a sinistra, e adesso la
sagoma e' un'altra. Due cartigli identici che ordinavano le righe in due
modi diversi erano il difetto piu' facile da vedere fra le due pagine. */
.fascia-wedding__cartiglio h2 { order: 2; }
.fascia-wedding__cartiglio .occhiello { order: 1; margin-top: 0; }
/* --- La fascia terra si vede, e il testo dentro resta leggibile ---------
Il beige e' sceso da #ece4d6 a #e0d6c2, cioe' da 1,14:1 a 1,28:1 sul
fondo pagina: prima era una fascia che non si vedeva, e su una pagina di
undici sezioni con una sola fascia visibile tutto scorreva come un blocco
unico. Ma piu' fondo il beige, meno stacca il grigio della prosa: a
#e0d6c2 il testo sarebbe caduto a 4,35:1, sotto la soglia. Dentro la
fascia il grigio scende di un gradino e torna a 4,92. */
.section--terra {
--ink-soft: #525b4d;
--salvia-testo: #3f4a38;
}
/* Le schede del diario che hanno per copertina una locandina: intera, su un
fondo chiaro, perche' e' fatta di testo e ritagliata non si legge. Sta qui
e non in pagina3.css perche' il diario c'e' anche in home. */
.voce__media--locandina { background: var(--terra-chiara); }
/* La locandina riempie la scheda come una foto, tagliata dal basso: in alto
ci sono il titolo e la data. Richiesta del committente il 14/09. */
.voce__media--locandina img { object-fit: cover; object-position: top center; padding: 0; }
.voce__meta { flex-wrap: wrap; row-gap: 0.15rem; }
.voce__meta .voce__cat { white-space: nowrap; }
/* L'icona dei reparti in home sale un po' sopra la forma della fotografia:
segnalato «alzarla un po', cosi' che venga messa leggermente sopra la
shape della foto». */
.servizi-caro .servizio__badge { margin-top: calc(var(--s-8) * -1.15); }