` sono l'involucro che la specifica
ammette per tenere insieme dt e dd. */
.recensioni__numeri {
display: flex;
flex-wrap: wrap;
margin: 0 0 clamp(2rem, 1.5rem + 2vw, 3.25rem);
border-block-start: 3px solid var(--accento);
border-block-end: var(--bordo-spessore) solid var(--bordo);
}
/* `flex-basis` in rem e non in percentuale: sotto i 640px i tre numeri devono
poter andare a capo da soli, senza media query, e restare comunque larghi
abbastanza da tenere «Coppie che la consigliano» su due righe al massimo. */
.recensioni__numero {
display: flex;
flex: 1 1 13rem;
flex-direction: column-reverse; /* il valore sopra, l'etichetta sotto */
gap: 0.35rem;
padding: clamp(1rem, 0.8rem + 0.9vw, 1.6rem) clamp(1rem, 0.8rem + 0.9vw, 1.75rem);
}
/* Il divisorio è sul lato iniziale di ogni numero tranne il primo: così non
resta un filetto orfano quando la riga va a capo. */
.recensioni__numero + .recensioni__numero {
border-inline-start: var(--bordo-spessore) solid var(--bordo);
}
.recensioni__numero dt {
display: flex;
align-items: center;
gap: 0.45rem;
}
/* Anton grande, come il «5,0» dell'apertura e i dati della 6: in questa
pagina il numero è sempre in condensato. */
.recensioni__cifra {
margin: 0;
font-family: var(--font-titoli);
font-weight: 400;
font-size: clamp(2.5rem, 1.9rem + 3vw, 4.25rem);
line-height: 0.95;
font-variant-numeric: lining-nums;
}
/* L'accento pieno solo qui, e solo su un corpo enorme: #ee0000 misura 4,53:1
sul fondo, che è oltre il 3:1 richiesto dal testo grande e sarebbe stanco
su un paragrafo (§tokens.css, `corpo_saturo`). Un solo numero rosso in
tutta la sezione — è quello che deve arrivare per primo. */
.recensioni__cifra--accento {
color: var(--accento);
}
/* ——— Le due colonne di virgolettati ——————————————————————————————————————
`--soglia-switcher` alzata da 30rem a 46rem: col default le due colonne
restano affiancate fino a ~480px di contenitore, cioè colonne da 240px in
cui una citazione si spezza in righe da quattro parole. A 46rem impilano
quando la colonna scenderebbe sotto ~22rem, che è la misura minima in cui
un virgolettato resta leggibile. */
.recensioni__elenco {
--soglia-switcher: 46rem;
--gap: clamp(1.5rem, 0.9rem + 2.4vw, 3.5rem);
}
.recensioni__colonna {
margin: 0;
padding: 0;
list-style: none;
}
/* Il filetto sta SOPRA ogni voce, prima compresa: così le due colonne
attaccano allineate sullo stesso tratto e l'elenco si chiude senza un
filetto pendente in fondo. */
.recensioni__voce {
padding-block: clamp(1rem, 0.85rem + 0.7vw, 1.6rem);
border-block-start: var(--bordo-spessore) solid var(--bordo);
}
/* Tre righe, due colonne: le virgolette in una gronda stretta a sinistra, il
testo e la fonte nella colonna larga. `minmax(0, 1fr)` per la seconda
colonna, altrimenti una parola lunga la fa sfondare (§.studio__voci). */
.recensioni__citazione {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: clamp(0.6rem, 0.5rem + 0.4vw, 0.9rem);
row-gap: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
margin: 0;
}
.recensioni__virgolette {
--icona: 1.5rem;
margin-block-start: 0.15em;
color: var(--accento-inchiostro);
}
/* `--t-corpo` e non un corpo da citazione gonfiato: sono sei, e la densità
assegnata è «fitta». L'interlinea scende a 1,5 dall'1,78 del corpo — una
citazione di tre righe con l'interlinea del testo lungo si sfilaccia. */
.recensioni__testo {
margin: 0;
padding: 0;
border: 0;
font-size: var(--t-corpo);
line-height: 1.5;
text-wrap: pretty;
}
.recensioni__testo p {
margin: 0;
}
/* Le virgolette basse tipografiche disegnate dal CSS: nel markup il testo
della recensione è nudo, così resta identico alla fonte e chi lo copia non
si porta via i segni. */
.recensioni__testo p::before {
content: '\00AB';
}
.recensioni__testo p::after {
content: '\00BB';
}
/* «La fonte a fine riga», letteralmente: allineata al bordo destro della
colonna del testo, sotto l'ultima riga del virgolettato. È il gesto
editoriale che distingue una citazione attribuita da una scheda cliente —
e nessun'altra sezione della pagina allinea niente a destra. */
.recensioni__fonte {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: flex-end;
gap: 0.35rem 0.5rem;
grid-column: 2;
font-size: var(--t-piccolo);
line-height: 1.3;
text-align: end;
}
.recensioni__nome {
color: var(--testo);
font-weight: 500;
letter-spacing: 0.02em;
}
.recensioni__data,
.recensioni__portale {
color: var(--testo-tenue);
}
/* Il separatore sta su `::before` del pezzo che introduce, non su `::after`
del precedente: quando la fonte va a capo su schermo stretto, «· Matrimonio
.com» si legge, «27/08/2025 ·» lasciato in sospeso a fine riga no. Colore
`--bordo`: è punteggiatura di servizio, non testo. */
.recensioni__data::before,
.recensioni__portale::before {
content: '·';
margin-inline-end: 0.5rem;
color: var(--bordo);
}
/* ——— La pagella dei cinque assi ——————————————————————————————————————————
Chiude la sezione col dato che rende non generica la media. Fondo grigio
chiaro, che è l'unica campitura della sezione e serve a staccarla
dall'elenco filettato subito sopra. */
.recensioni__pagella {
margin-block-start: clamp(2rem, 1.5rem + 2vw, 3.25rem);
padding: clamp(1.15rem, 0.9rem + 1.1vw, 1.85rem) clamp(1.15rem, 0.9rem + 1.4vw, 2.25rem);
background: var(--fondo-alt);
border: var(--bordo-spessore) solid var(--bordo);
}
/* Roboto e non Anton: è un'etichetta, non un titolo — sopra ci sono già un h2
condensato e tre numeri condensati, e un quarto pezzo in Anton qui farebbe
della sezione un manifesto invece di una pagina di prove. */
.recensioni__pagella-titolo {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 clamp(0.85rem, 0.7rem + 0.5vw, 1.25rem);
}
.recensioni__pagella-titolo .icona {
color: var(--accento-inchiostro);
}
/* `auto-fit` con un minimo generoso: cinque voci stanno in riga sui monitor
larghi, diventano tre + due, poi due + due + una, poi una colonna. Le
`minmax(0, …)` per lo stesso motivo di sempre. */
.recensioni__assi {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
gap: 0.65rem clamp(1rem, 0.7rem + 1.2vw, 2rem);
margin: 0;
padding: 0;
list-style: none;
}
.recensioni__assi > li {
display: flex;
align-items: center;
gap: 0.5rem;
padding-block-end: 0.5rem;
border-block-end: var(--bordo-spessore) solid var(--bordo);
font-size: var(--t-piccolo);
line-height: 1.3;
}
.recensioni__assi .icona {
color: var(--testo-tenue);
}
/* `margin-inline-start: auto` spinge il voto al bordo destro della sua cella:
cinque «5,0» incolonnati sono la figura che dice «tutti pieni» prima che si
leggano le etichette. */
.recensioni__asse {
color: var(--testo-tenue);
}
.recensioni__voto {
margin-inline-start: auto;
}
/* ——— Sotto i 40rem —————————————————————————————————————————————————————
A 375px la gronda della citazione mangia un quinto della larghezza utile:
le virgolette passano sopra il testo, in flusso, e la fonte torna a
sinistra — allinearla a destra su una colonna da 300px la fa sembrare
staccata dalla citazione che attribuisce. */
@media (max-width: 40rem) {
.recensioni__citazione {
grid-template-columns: minmax(0, 1fr);
row-gap: 0.4rem;
}
.recensioni__virgolette {
--icona: 1.25rem;
margin-block-start: 0;
}
.recensioni__fonte {
grid-column: 1;
justify-content: flex-start;
text-align: start;
}
}
/* ============================================================================
8/11 — CINQUE ANNI DI WEDDING AWARDS
----------------------------------------------------------------------------
Impianto del piano, senza deroghe: fascia piena rossa a tutta larghezza
(`.su-scuro` su `--accento`) con le cinque annate in Anton grande.
Perché la campitura sta sulla `
` e non su un figlio: la sezione è
già larga quanto il documento, quindi il fondo arriva ai bordi da solo.
Nessun trucco a base di `100vw` e margini negativi — su un documento con la
barra di scorrimento visibile `100vw` è più largo del contenuto e produce
lo scorrimento orizzontale che il BRIEF conta come difetto.
Nessun contenitore interno, nessuna scheda, nessuna griglia di testo: un
asse verticale solo. È la forma più lontana possibile dalle due colonne di
virgolettati della 7 sopra e dalla lista di definizione della 9 sotto.
========================================================================= */
.premi {
background: var(--accento);
/* Il contrasto di questa sezione, che tokens.css aveva già previsto.
`.su-scuro` di base scrive `color: var(--su-scuro)`, cioè #f5f6f7: su
#ee0000 misura 4,19:1 e NON passa. Il bianco puro misura 4,53:1 ed è
l'unico inchiostro che regge su questo rosso, quindi qui dentro sia
`--su-scuro` sia `--su-scuro-tenue` (che `.su-scuro` rilega a
`--testo-tenue`) valgono #fff.
Conseguenza voluta: in questa sezione NON esiste un grigio di servizio.
La gerarchia secondaria la fanno corpo, spaziatura e dimensione
dell'icona — mai l'opacità, che rimetterebbe il contrasto sotto soglia
esattamente come il grigio che stiamo evitando. */
--su-scuro: #ffffff;
--su-scuro-tenue: #ffffff;
/* `--bordo` di default (#d3d8dc) è tarato sul fondo chiaro: sul rosso è un
filetto sporco. Qui i tratti sono bianchi trasparenti. Volutamente NON
`color-mix()`: un fondo scritto con `color-mix` esce dal renderer come
`color(srgb …)` e il misuratore di leggibilità lo legge come quasi nero.
Qui il valore è un filetto e non un fondo, ma la regola resta una sola
per tutto il file. */
--bordo: rgba(255, 255, 255, 0.45);
/* Densità RADA, ed è un vincolo del piano. `.u-sezione` dà
`var(--spazio-sezione)`: qui vale una volta e mezza, perché una lastra di
colore pieno stretta sul contenuto sembra un banner pubblicitario. La
regola sovrascrive `.u-sezione` per ordine nel file, non per specificità:
site.css viene dopo base.css. */
padding-block: calc(var(--spazio-sezione) * 1.5);
}
/* `rem` e non `ch`: il `ch` di questo blocco si misura sul Roboto ereditato,
non sull'Anton del titolo, e a 34ch il titolo si spezzerebbe in sei righe.
34rem tiene l'h2 su due righe piene al corpo massimo. */
.premi__testata {
max-inline-size: 34rem;
}
/* Stesso gesto dell'occhiello di tutte le sezioni precedenti — nessuna
sezione reinventa la sua etichetta. Cambia una cosa sola, e deve cambiare:
altrove l'occhiello è `--accento-inchiostro`, qui l'accento è il FONDO,
quindi eredita il bianco della sezione e non dichiara nessun colore. */
.premi__occhiello {
color: inherit; /* qui l'accento è il FONDO: l'inchiostro è il bianco */
}
/* ——— Le cinque annate ——————————————————————————————————————————————————
La figura della sezione. Cinque celle paritarie in UNA riga: il compito in
tre secondi è contare, e cinque cose in fila si contano senza leggerle.
Colonne esplicite e non `auto-fit`: con cinque tessere `auto-fit` passa da
5 a 4 e lascia un orfano in seconda riga per metà dei viewport. I due
gradini dichiarati qui sotto sono gli unici che non spaiano il conto — 5,
poi 3+2. `minmax(0, 1fr)` e non `1fr` perché una colonna a `min-content`
non scenderebbe mai sotto la larghezza di quattro cifre di Anton, e la
griglia sborderebbe dal contenitore invece di stringersi. */
.premi__annate {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: clamp(1.25rem, 0.5rem + 2.4vw, 2.5rem);
margin: 0;
padding: 0;
list-style: none;
}
/* Filetto bianco spesso SOPRA ogni cella, non fra una cella e l'altra: un
separatore verticale si spezzerebbe quando la riga va a capo, e la prima
cella della seconda riga si troverebbe un filetto in mezzo al niente. */
.premi__annata {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(0.6rem, 0.5rem + 0.5vw, 1rem);
padding-block-start: clamp(0.75rem, 0.6rem + 0.6vw, 1.25rem);
border-block-start: 2px solid currentColor;
}
.premi__trofeo {
--icona: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
/* Il corpo è calcolato sulla cella, non a occhio: a 1440px la colonna è
~192px e quattro cifre di Anton misurano ~0,55em l'una, cioè ~184px a 83px
di corpo. Il tetto a 5,5rem è il margine che tiene le cifre dentro la
colonna anche se entra in gioco il fallback (`Haettenschweiler`,
`Arial Narrow`), che ha metriche più larghe. */
.premi__anno {
font-family: var(--font-titoli);
font-weight: 400;
font-size: clamp(2.5rem, 0.9rem + 4.8vw, 5.5rem);
line-height: 0.9;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
/* ——— Il perché, e la fonte ——————————————————————————————————————————————
Due paragrafi e basta: la sezione è rada, e il lavoro visivo l'hanno già
fatto le annate. Il primo dice come si vince quel premio — senza quella
frase cinque numeri grossi sono cinque bollini. Il secondo elenca gli anni
per esteso, ed è lì per un motivo preciso: gli anni non sono consecutivi, e
un lettore veloce leggerebbe «dal 2020 al 2025». */
.premi__lead {
margin: var(--stacco-testata-rada) 0 0;
max-inline-size: var(--misura-guida);
font-size: var(--t-corpo);
line-height: 1.6;
}
/* La fonte segue la riga di coda comune, ma qui non c'è grigio di servizio:
su #ee0000 il bianco è l'unico inchiostro che regge (§.premi). */
.premi__fonte {
margin-block-start: var(--pad-filetto);
}
/* ——— Sotto i 52rem ——————————————————————————————————————————————————————
Cinque colonne diventano tre: a 832px la cella scende a ~132px e quattro
cifre a 58px di corpo ne misurano ~115. Più stretto di così le cifre
arriverebbero a toccarsi. Tre colonne (3 + 2) è l'unico gradino che non
lascia una cella sola in fondo. */
@media (max-width: 52rem) {
.premi__annate {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* ============================================================================
9/11 — PREZZI, MINIMI E TEMPI
----------------------------------------------------------------------------
Impianto del piano, senza deroghe: LISTA DI DEFINIZIONE a due colonne, col
prezzo come numero grande a sinistra e cinque condizioni a destra.
Le due colonne sono `20rem` e «il resto», non due percentuali: la targa deve
essere larga quanto basta a contenere la cifra al corpo massimo, e non un
terzo di qualunque schermo. È la differenza fra una misura e un rapporto, ed
è la ragione per cui questa sezione non è l'ennesima variante di 60/40.
Che cosa la distingue dalle vicine scorrendo senza leggere: la 8 sopra è una
lastra rossa piena, la 10 sotto sarà una colonna stretta di ``.
Qui c'è una targa grigia con dentro una cifra enorme e, accanto, sei filetti
orizzontali. Nessuna delle tre condivide una linea.
Densità FITTA, ed è un vincolo del piano: le righe del `` hanno il
respiro minimo che tiene separati sei blocchi di testo. La densità sta nella
spaziatura, MAI nel corpo del testo: le spiegazioni restano a `--t-corpo`
(≥16px anche sul telefono), perché una tabella di prezzi scritta a 13px è il
modo più rapido per far chiudere la pagina a chi sta facendo i conti.
========================================================================= */
/* ——— Testata ————————————————————————————————————————————————————————————
Stesso gesto delle sezioni precedenti: occhiello con icona in
`--accento-inchiostro`, h2 in Anton, paragrafo guida. Nessuna sezione
reinventa la propria etichetta. */
/* ——— Le due colonne —————————————————————————————————————————————————————
`minmax(0, 20rem)` e non `20rem` secco: senza il minimo a 0 la colonna non
scenderebbe mai sotto la larghezza della cifra in Anton, e sui viewport
intermedi la griglia sborderebbe dal contenitore invece di stringersi.
`align-items: start` tiene la targa alta quanto il suo contenuto: allungarla
fino in fondo al `` la trasformerebbe in una colonna di fondo grigio,
che è un'altra figura. */
.prezzi__quadro {
display: grid;
grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
align-items: start;
gap: clamp(1.5rem, 0.8rem + 2.4vw, 3rem);
}
/* ——— La targa del prezzo ————————————————————————————————————————————————
Fondo `--fondo-alt` (#eceff1) e filetto da un pixel: è l'unico piano
rialzato della sezione, e serve a staccare il numero dal `` senza dargli
un colore. Il rosso qui NON entra sulla cifra: la sezione sopra è una lastra
di `--accento` a tutta larghezza, e un numero rosso subito sotto si
leggerebbe come una colatura di quella. Il numero è già la cosa più grande
della sezione, non gli serve anche il colore.
Contrasti misurati su #eceff1: `--testo` 15,7:1, `--testo-tenue` 5,3:1,
`--accento-inchiostro` 6,0:1. Tutti sopra soglia. */
.prezzi__targa {
padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
background: var(--fondo-alt);
border: var(--bordo-spessore) solid var(--bordo);
}
.prezzi__targa-etichetta {
display: flex;
align-items: center;
gap: 0.45rem;
margin: 0;
}
/* Il corpo è calcolato sulla colonna, non a occhio. A 1440px il contenitore
dà 1120px di contenuto, la targa ne prende 320 e il padding ne toglie 64:
restano 256px. In Anton «2» e «8» avanzano ~0,55em l'una, il trattino
~0,4em, l'euro ~0,45em di un corpo già ridotto al 42%: a 6rem (96px) la riga
misura ~53+38+53+41 = 185px, con 71px di margine. Il tetto a 6rem è quel
margine, e serve al fallback (`Haettenschweiler`, `Arial Narrow`), che ha
metriche più larghe di Anton. */
.prezzi__forbice {
display: flex;
align-items: baseline;
margin: clamp(0.35rem, 0.25rem + 0.4vw, 0.6rem) 0 0;
font-family: var(--font-titoli);
font-weight: 400;
font-size: clamp(3.25rem, 1.8rem + 5.4vw, 6rem);
line-height: 0.86;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
.prezzi__trattino {
margin-inline: 0.06em;
color: var(--accento-inchiostro);
}
.prezzi__valuta {
margin-inline-start: 0.14em;
font-size: 0.42em;
letter-spacing: 0;
}
.prezzi__unita {
margin: 0.35rem 0 0;
}
/* La riga che rende il numero un'informazione invece che un cartellino: senza
di lei «2–8 €» è una forbice larga quattro volte e chi legge non sa da che
parte cadrà. `align-items: flex-start` più il micro-margine sull'icona la
riportano sulla linea di base della prima riga di testo. */
.prezzi__chiosa {
display: flex;
align-items: flex-start;
gap: 0.55rem;
}
.prezzi__chiosa .icona {
margin-block-start: 0.2em;
color: var(--accento-inchiostro);
}
/* ——— Il ``: sei filetti, cinque condizioni ——————————————————————————
Filetto SOPRA ogni riga più uno di chiusura sul ``: sei linee, il conto
di un listino. Un `border-block-end` per riga avrebbe lasciato il blocco
aperto in alto, staccato dalla targa che gli sta accanto. */
.prezzi__condizioni {
margin: 0;
border-block-end: var(--bordo-spessore) solid var(--bordo);
}
/* Termine a sinistra, valore a destra: la seconda coppia di colonne della
sezione, e quella che rende `` la semantica giusta e non un vezzo — ogni
riga è termine → valore, che è esattamente la matrice di un listino.
`10.5rem` è la misura di «Spedizione in Italia» su due righe con l'icona
davanti, cioè il termine più lungo dei cinque. */
.prezzi__voce {
display: grid;
grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr);
gap: clamp(0.75rem, 0.5rem + 0.8vw, 1.5rem);
padding-block: clamp(0.9rem, 0.75rem + 0.6vw, 1.35rem);
border-block-start: var(--bordo-spessore) solid var(--bordo);
}
.prezzi__termine {
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
.prezzi__segno {
--icona: 1.15rem;
margin-block-start: 0.05em;
color: var(--accento-inchiostro);
}
/* `margin-inline-start: 0` esplicito: il reset di base.css azzera i margini
con `* { margin: 0 }`, ma un `dd` senza rientro è troppo facile da perdere
in un refactor per lasciarlo implicito. */
.prezzi__definizione {
display: flex;
flex-direction: column;
gap: 0.3rem;
margin-inline-start: 0;
}
/* Anton anche qui: sono i cinque numeri che si scorrono senza leggere le
spiegazioni, e devono avere lo stesso segno della cifra nella targa — più
piccoli di un ordine di grandezza, così la gerarchia resta una sola.
`` e non ``: è rilievo tipografico, non enfasi di significato. */
.prezzi__spiega {
max-inline-size: var(--misura-guida);
color: var(--testo-tenue);
font-size: var(--t-corpo);
line-height: 1.55;
}
/* ——— La riga della fonte ————————————————————————————————————————————————
Come nella 7 e nella 8: la provenienza dei numeri si dichiara a parole, in
pagina, senza link in uscita verso il marketplace (STUDIO.md §3). Qui la
riga fa anche un secondo lavoro — dire per COSA valgono quelle cifre, cioè
le partecipazioni, così nessuno legge «2 €» pensando a un tableau. */
/* ——— Sotto i 58rem ——————————————————————————————————————————————————————
Le due colonne si impilano: a 928px la targa scenderebbe sotto i 20rem e la
cifra comincerebbe a stringersi mentre accanto il `` ha ancora spazio.
Impilata, la targa resta una fascia larga col numero al corpo pieno — che è
il compito in tre secondi, e sul telefono arriva per primo. */
@media (max-width: 58rem) {
.prezzi__quadro {
grid-template-columns: minmax(0, 1fr);
}
/* Da targa a fascia: cifra e chiosa vanno in riga finché ci stanno, invece
di lasciare mezzo schermo di grigio vuoto a destra del numero. Il
`min(16rem, 100%)` è la guardia che impedisce alla traccia di superare il
contenitore quando lo schermo è più stretto di 16rem. */
.prezzi__targa {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
gap: clamp(1rem, 0.7rem + 1.2vw, 1.75rem);
align-items: end;
}
.prezzi__chiosa {
margin-block-start: 0;
padding-block-start: 0;
border-block-start: 0;
}
}
/* ——— Sotto i 34rem ——————————————————————————————————————————————————————
A 544px la colonna del termine scende sotto 10,5rem e «Spedizione in
Italia» si spezzerebbe in tre righe accanto a un valore di due caratteri.
Il `` va in colonna: termine sopra, valore e spiegazione sotto. I
filetti restano, quindi la figura del listino non cambia. */
@media (max-width: 34rem) {
.prezzi__voce {
grid-template-columns: minmax(0, 1fr);
gap: 0.5rem;
}
}
/* ============================================================================
10/11 — DOMANDE FREQUENTI
----------------------------------------------------------------------------
Impianto del piano, senza deroghe: ACCORDION `` in COLONNA DI
LETTURA SINGOLA, larghezza contenuta.
«Larghezza contenuta» qui è una misura, non una percentuale: 44rem, poco
sopra la `--larghezza-lettura` (38rem) perché la riga della domanda deve
contenere icona + testo + freccia senza spezzarsi, e ben sotto le 78rem del
contenitore. La colonna è CENTRATA, ed è l'unica della pagina: tutte le
altre sezioni allineano a sinistra dentro `u-contenitore`. È la differenza
che si vede scorrendo senza leggere — sopra (9) una targa col numero enorme
e sei filetti lunghi quanto la pagina, sotto (11) tre pannelli paritari
affiancati, qui una pila stretta al centro di righe tutte uguali.
Densità FITTA, e sta nella spaziatura: le voci sono attaccate, divise da un
filetto da un pixel, senza gap e senza schede. Il corpo del testo NON si
riduce — le risposte restano a `--t-corpo` (≥16px anche sul telefono),
perché una risposta a 13px è una risposta che non si legge.
Nessuna animazione di apertura: l'altezza di `` non si anima senza
JS o senza `::details-content` (troppo recente per essere l'unica strada), e
una transizione a metà supporto è peggio di nessuna. L'unico movimento è la
freccia che ruota, 180ms — micro-interazione di stato, non movimento di
pagina: il movimento della pagina lo progetta la sessione di chiusura.
========================================================================= */
/* ——— La colonna ————————————————————————————————————————————————————————— */
.domande__colonna {
max-inline-size: 44rem;
margin-inline: auto;
}
/* ——— Testata ————————————————————————————————————————————————————————————
Stesso gesto delle sezioni precedenti — occhiello con icona in
`--accento-inchiostro`, h2 in Anton, paragrafo guida — ma allineato a
sinistra DENTRO la colonna stretta, non centrato: il testo centrato su tre
righe di paragrafo si legge peggio, e la colonna è già la figura. */
/* ——— La pila —————————————————————————————————————————————————————————————
Filetto sopra la prima voce e sotto ognuna: la pila si chiude da entrambi i
capi e si legge come un blocco unico invece che come sette righe sciolte. */
.domande__elenco {
border-block-start: var(--bordo-spessore) solid var(--bordo);
}
.domande__voce {
border-block-end: var(--bordo-spessore) solid var(--bordo);
}
/* ——— La domanda ——————————————————————————————————————————————————————————
`list-style: none` + `::-webkit-details-marker` è la coppia che serve: la
prima toglie il triangolo a Firefox e ai Chromium recenti, la seconda a
Safari, che il marker lo disegna ancora con lo pseudo-elemento suo. Senza la
seconda riga, su Safari resta un triangolino nero accanto all'icona.
`min-block-size: 44px`: la riga è il bersaglio da toccare, e 44 è il minimo
che una mano centra al primo colpo. Il padding la porta comunque oltre, ma
la guardia serve alla domanda corta.
`cursor: pointer` perché è un comando, non un paragrafo. */
.domande__domanda {
display: flex;
align-items: center;
gap: clamp(0.6rem, 0.5rem + 0.4vw, 0.9rem);
min-block-size: 44px;
padding-block: clamp(0.85rem, 0.7rem + 0.5vw, 1.15rem);
cursor: pointer;
list-style: none;
color: var(--testo);
font-size: var(--t-h4);
font-weight: 500;
line-height: 1.35;
transition: color var(--durata-breve) var(--curva);
}
.domande__domanda::-webkit-details-marker {
display: none;
}
/* L'anello di fuoco sta sulla riga intera, `inset` così non viene tagliato dal
filetto della voce sopra. `:focus-visible` e non `:focus`: al click del
mouse l'anello non deve comparire. */
.domande__domanda:focus-visible {
outline: 2px solid var(--accento);
outline-offset: -3px;
}
.domande__domanda:hover {
color: var(--accento-inchiostro);
}
/* Il segno di sinistra è l'icona iconoir della voce: dà alla riga chiusa un
appiglio che non è testo, e rende la pila scorribile a colpo d'occhio. Resta
in `--accento-inchiostro` (6,8:1 su --fondo) e non in `--accento`: a
1,15rem il rosso puro è il difetto `corpo_saturo` di tokens.css. */
.domande__segno {
--icona: 1.35rem;
color: var(--accento-inchiostro);
}
.domande__testo {
flex: 1 1 auto;
min-inline-size: 0;
text-wrap: pretty;
}
/* La freccia sta in fondo alla riga e ruota all'apertura. `flex-shrink: 0` è
già in `.icona`; qui serve solo il perno e la durata. */
.domande__freccia {
--icona: 1.25rem;
margin-inline-start: auto;
color: var(--testo-tenue);
transition: transform var(--durata-breve) var(--curva);
}
.domande__voce[open] .domande__freccia {
transform: rotate(180deg);
}
.domande__voce[open] .domande__domanda {
color: var(--accento-inchiostro);
}
/* ——— La risposta —————————————————————————————————————————————————————————
Rientrata quanto l'icona più il gap, così il testo parte sotto la domanda e
non sotto il segno: la colonna di lettura resta una sola linea verticale.
`--larghezza-lettura` la tiene sotto le ~70 battute anche quando la colonna
è al massimo. */
.domande__risposta {
padding-inline-start: calc(1.35rem + clamp(0.6rem, 0.5rem + 0.4vw, 0.9rem));
padding-block-end: clamp(1rem, 0.85rem + 0.6vw, 1.5rem);
}
.domande__risposta p {
margin: 0;
max-inline-size: var(--larghezza-lettura);
color: var(--testo-tenue);
font-size: var(--t-corpo);
line-height: 1.6;
}
/* ——— Il rimando ——————————————————————————————————————————————————————————
Non è un pulsante: è un link di servizio, e deve pesare meno della risposta.
La freccia scivola di 2px al passaggio — `transform` e non `margin`, così
non ridisegna il riquadro.
Il selettore è discendente (`.domande__risposta .domande__vai`) e non
`.domande__vai` secco: la regola `.domande__risposta p { margin: 0 }` qui
sopra ha specificità 0-1-1 e vincerebbe su una classe sola, lasciando il
rimando incollato alla risposta. Due classi, non un `!important`. */
.domande__risposta .domande__vai {
margin-block-start: clamp(0.65rem, 0.55rem + 0.4vw, 0.9rem);
}
.domande__vai a {
display: inline-flex;
align-items: center;
gap: 0.45rem;
color: var(--accento-inchiostro);
font-size: var(--t-piccolo);
font-weight: 500;
text-decoration: none;
border-block-end: var(--bordo-spessore) solid currentColor;
padding-block-end: 0.15rem;
}
/* ——— La riga della fonte ————————————————————————————————————————————————
Stessa figura delle sezioni 8 e 9: icona sospesa e testo tenue, sotto tutto.
`align-items: start` perché il testo è lungo e l'icona deve stare alla prima
riga, non al centro del blocco. */
/* ——— Sotto i 30rem ——————————————————————————————————————————————————————
A 480px il rientro della risposta si mangia due battute per riga senza dare
niente in cambio: la linea verticale la fa già il bordo dello schermo. Le
domande restano rientrate, le risposte no. */
@media (max-width: 30rem) {
.domande__risposta {
padding-inline-start: 0;
}
}
/* ============================================================================
11 — DOVE SIAMO E COME SI PRENOTA
----------------------------------------------------------------------------
Impianto: `.u-switcher` del pavimento, tre pannelli paritari. La regola non
si riscrive: si tocca solo `--soglia-switcher`, che è la larghezza sotto la
quale i tre vanno in colonna TUTTI E TRE INSIEME. A 54rem i pannelli in riga
restano sopra i 17rem l'uno — sotto quella misura «Via Mater Gratiae 31» e
«393 181 4389» in Anton comincerebbero a spezzarsi, ed è il punto in cui la
colonna diventa più leggibile della riga.
Perché non somiglia alla 10 (accordion) né alla 2 (bento): quella sopra è una
colonna di lettura stretta che si apre e si chiude; questa è una fascia larga
di tre riquadri fermi, ognuno con un'icona grande in testa e un filetto rosso
sul bordo alto — il segno di taglio di un foglio, non un bordo di scheda. Il
bento ha tessere unite da un filo di 1px; qui i pannelli sono staccati e
respirano: la densità assegnata è RADA.
Il terzo pannello è pieno di rosso perché è l'ultimo atto della pagina: il
compito di questa sezione è far telefonare, e su tre riquadri identici il
telefono non pesa più dell'indirizzo.
========================================================================= */
/* Il filetto in alto stacca l'ultima sezione dalla coda delle FAQ, che
finiscono con una riga di fonte tenue e nessun bordo. */
.dove-siamo {
border-block-start: var(--bordo-spessore) solid var(--bordo);
}
/* ——— I tre pannelli ——————————————————————————————————————————————————————
Solo custom property: `.u-switcher` sta in base.css e non si riscrive. */
.dove-siamo__pannelli {
--soglia-switcher: 54rem;
--gap: clamp(1rem, 0.6rem + 1.6vw, 2rem);
align-items: stretch;
}
/* Colonna flessibile e non griglia, per una ragione sola: l'azione va spinta in
fondo con `margin-block-start: auto`, e in una griglia con `align-content:
start` quel margine non ha spazio libero da mangiare. I pannelli sono
paritari in larghezza per via dello switcher, e devono esserlo anche nel
punto in cui cade il link. */
.dove-siamo__pannello {
display: flex;
flex-direction: column;
gap: clamp(0.5rem, 0.4rem + 0.4vw, 0.85rem);
padding: clamp(1.5rem, 1.15rem + 1.6vw, 2.5rem);
background: var(--fondo-alt);
border-block-start: 3px solid var(--accento);
}
/* L'icona grande è l'appiglio dei tre secondi: si riconosce il pannello prima
di leggerlo. In `--accento-inchiostro` (6,8:1 su --fondo-alt) e non
nell'accento puro, che a questo corpo squillerebbe sopra al dato. */
.dove-siamo__simbolo {
--icona: clamp(2.25rem, 1.8rem + 1.8vw, 3.25rem);
margin-block-end: clamp(0.25rem, 0.15rem + 0.4vw, 0.6rem);
color: var(--accento-inchiostro);
}
/* L'etichetta è un h3, ma non deve sembrare un titolo: sta in Roboto maiuscolo
spaziato, tenue, e lascia tutto il peso al dato sotto. */
.dove-siamo__etichetta {
margin: 0;
}
/* Il dato. `font-style: normal` non è pignoleria: nasce in corsivo
nel foglio di stile del browser, e un Anton finto-corsivo è inclinato dal
motore, non disegnato. */
.dove-siamo__valore {
font-style: normal; /* nasce in corsivo: Anton non ha il corsivo */
}
.dove-siamo__nota {
margin: 0;
display: flex;
align-items: start;
gap: 0.5rem;
color: var(--testo-tenue);
font-size: var(--t-piccolo);
line-height: 1.6;
}
.dove-siamo__nota .icona {
--icona: 1.1rem;
margin-block-start: 0.2em;
}
/* L'azione cade in fondo al pannello, alla stessa altezza in tutti e tre: i
pannelli si stirano all'altezza della riga (`align-items: stretch`, il
default dello switcher) e `auto` si mangia lo spazio che avanza. Quando i tre
vanno in colonna ognuno è alto quanto il proprio contenuto, non avanza
niente, e il margine si comporta come uno zero: nessuna media query. */
.dove-siamo__azione {
margin: 0;
margin-block-start: auto;
padding-block-start: clamp(0.4rem, 0.3rem + 0.4vw, 0.75rem);
}
/* I due link di servizio (mappa e rimando ai tempi): stesso trattamento del
rimando nelle FAQ, ma con 44px di altezza di presa perché sono i due
bersagli piccoli della sezione. La riga sotto è `text-decoration` e non un
`border-block-end`: il bordo si disegnerebbe sul fondo della scatola da
44px, staccato dalle lettere di una decina di pixel. */
.dove-siamo__azione a:not(.bottone) {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-block-size: 44px;
color: var(--accento-inchiostro);
font-size: var(--t-piccolo);
font-weight: 500;
text-decoration: underline;
text-decoration-thickness: var(--bordo-spessore);
text-underline-offset: 0.35em;
}
.dove-siamo__azione a:not(.bottone):hover {
text-decoration-color: transparent;
}
/* ——— Il pannello del telefono ————————————————————————————————————————————
Fondo `--accento`. Come nella fascia dei premi, --su-scuro e --su-scuro-tenue
si rilegano a bianco puro: su #ee0000 il bianco misura 4,53:1 ed è l'unico
inchiostro che passa. Il grigio chiaro dei token (#b3b9c0) qui darebbe 1,9:1.
`.su-scuro` sul tag rilega da solo --testo-tenue. */
.dove-siamo__pannello--chiamare {
--su-scuro: #ffffff;
--su-scuro-tenue: #ffffff;
background: var(--accento);
border-block-start-color: var(--testo);
}
.dove-siamo__pannello--chiamare .dove-siamo__simbolo,
.dove-siamo__pannello--chiamare .dove-siamo__valore {
color: var(--su-accento);
}
.dove-siamo__pannello--chiamare .dove-siamo__etichetta {
color: var(--su-accento);
}
/* Il numero è il dato più grande dei tre: è la cosa che la sezione chiede di
fare. Resta un link, non un pulsante — il pulsante sta sotto, per chi cerca
un bersaglio invece di un numero da copiare. */
.dove-siamo__numero {
font-size: var(--t-h2);
line-height: 1.05;
letter-spacing: 0.01em;
}
.dove-siamo__numero a {
display: inline-flex;
align-items: center;
min-block-size: 44px;
color: inherit;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 0.16em;
}
.dove-siamo__numero a:hover {
text-decoration-color: transparent;
}
/* `.bottone--vuoto` nasce col filetto in `--testo`: su rosso sarebbe un bordo
quasi nero. Qui prende currentColor, e al passaggio si riempie di bianco col
testo nell'accento scurito (7:1 sul bianco) invece di scurirsi. */
.dove-siamo__pannello--chiamare .bottone--vuoto {
border-color: currentColor;
color: var(--su-accento);
}
.dove-siamo__pannello--chiamare .bottone--vuoto:hover {
background: var(--su-accento);
border-color: var(--su-accento);
color: var(--accento-inchiostro);
}
/* ——— La riga della fonte ————————————————————————————————————————————————
Stessa figura delle sezioni 8, 9 e 10: icona sospesa alla prima riga e testo
tenue sotto tutto. */
/* ——— L'anello di fuoco dentro il pannello rosso ——————————————————————————
La regola qui sopra dà `outline: 2px solid var(--accento)`: dentro il
pannello rosso sarebbe rosso su rosso, cioè cieco. base.css ha già
`.su-scuro :focus-visible { outline-color: var(--su-scuro) }`, ma pesa 0-2-0
e la mia pesa 0-2-1: vince la mia, e il caso va riscritto per esteso.
L'anello sta a 2px dal link e resta dentro il pannello: la gronda interna è
almeno 1,5rem, quindi non tocca mai lo spigolo. */
.dove-siamo__pannello--chiamare a:focus-visible {
outline: 2px solid var(--su-accento);
outline-offset: 2px;
}