/* STRUTTURA */
/* ------------------------------------------------ */
/* Testata, piede di pagina, respiro delle sezioni e le griglie che
dispongono i blocchi. Il vestito dei singoli pezzi sta invece in
componenti.css.
Il foglio e' scritto PARTENDO DAL TELEFONO: le regole di base sono
quelle della colonna singola, e le griglie dello schermo grande
arrivano dentro @media (min-width: 900px). Cosi' un telefono
interpreta soltanto quello che usa, e c'e' un punto solo in tutto il
progetto in cui la disposizione cambia. */
/* LA BARRA A ISOLA */
/* ------------------------------------------------ */
.sentinella {
position: fixed;
top: 0;
left: 0;
z-index: var(--z-sentinella);
width: 100%;
height: 46px;
/* Trasparente e inerte finche' la barra e' visibile: e' lo script a
renderla sensibile al puntatore quando la barra si nasconde. */
pointer-events: none;
}
.sentinella[data-attiva] {
pointer-events: auto;
}
.testata {
position: fixed;
top: var(--sp-4);
left: 50%;
z-index: var(--z-testata);
width: min(1180px, calc(100% - var(--sp-8)));
transform: translateX(-50%);
transition: transform var(--durata-lenta) ease,
opacity var(--durata-lenta) ease;
}
.testata[data-nascosta] {
opacity: 0;
transform: translateX(-50%) translateY(-140px);
pointer-events: none;
}
/* Il vetro della barra sta su uno strato SOTTO, non sulla barra
stessa. Il motivo e' preciso: un elemento con backdrop-filter
diventa la radice di sfondo per tutto quello che contiene, e i suoi
discendenti che a loro volta chiedono un backdrop-filter finiscono
per sfocare il vuoto. Con la sfocatura sulla barra, la tendina e il
menu del telefono restavano semitrasparenti senza sfocare niente, e
sopra un testo diventavano illeggibili.
Spostandola su ::before, la barra non e' piu' radice di sfondo e i
due pannelli possono avere la loro sfocatura vera. Il risultato e'
che barra e pannelli hanno esattamente lo stesso aspetto, che e'
il punto. */
.testata__isola {
position: relative;
display: flex;
align-items: center;
gap: var(--sp-5);
padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5);
border-radius: var(--raggio-pillola);
box-shadow: var(--ombra-barra);
}
.testata__isola::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: var(--vetro-scuro);
-webkit-backdrop-filter: var(--sfocatura-vetro);
backdrop-filter: var(--sfocatura-vetro);
}
.testata__marchio {
flex: none;
line-height: 0;
}
.testata__marchio img {
width: auto;
height: 30px;
}
/* --- Il menu --- */
/* Sul telefono il menu e' un pannello che scende da sotto la barra,
chiuso finche' non si tocca il bottone. Sopra i 900 pixel torna una
riga di voci: vedi in fondo al file. */
.menu {
position: absolute;
top: calc(100% + var(--sp-3));
right: 0;
left: 0;
display: none;
flex-direction: column;
gap: var(--sp-1);
padding: var(--sp-3);
border: 1px solid var(--bordo-su-scuro);
border-radius: var(--raggio-m);
background: var(--vetro-scuro);
box-shadow: var(--ombra-card-scura);
list-style: none;
-webkit-backdrop-filter: var(--sfocatura-vetro);
backdrop-filter: var(--sfocatura-vetro);
}
.testata[data-menu-aperto] .menu {
display: flex;
}
.menu__voce {
position: relative;
}
.menu__collegamento {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
padding: var(--sp-2) 0;
color: var(--testo-su-scuro-attenuato);
font-size: var(--testo-xs);
letter-spacing: var(--traccia-m);
text-transform: uppercase;
white-space: nowrap;
transition: color var(--durata-media) ease;
}
.menu__collegamento:hover,
.menu__voce--tendina[data-aperta] .menu__collegamento--tendina {
color: var(--accento-tenue);
}
.menu__accesso {
display: inline-block;
padding: var(--sp-3) var(--sp-6);
border-radius: var(--raggio-pillola);
background: var(--grad-accento-superficie);
color: var(--fondo-scuro);
font-size: var(--testo-xs);
font-weight: var(--peso-medio);
letter-spacing: var(--traccia-l);
text-transform: uppercase;
white-space: nowrap;
transition: box-shadow var(--durata-media) ease;
}
.menu__accesso:hover {
box-shadow: var(--ombra-passaggio);
color: var(--fondo-scuro);
}
/* --- La tendina --- */
.gallone {
width: 1em;
height: 1em;
transition: transform var(--durata-rapida) ease;
}
.menu__voce--tendina[data-aperta] .gallone {
transform: rotate(180deg);
}
/* Sul telefono la tendina e' un rientro dentro il pannello del menu,
non un riquadro sospeso: non c'e' spazio per farlo galleggiare. */
.tendina {
display: none;
padding-left: var(--sp-4);
list-style: none;
opacity: 0;
transition: opacity var(--durata-rapida) ease,
transform var(--durata-rapida) ease;
}
.menu__voce--tendina[data-aperta] .tendina {
display: block;
opacity: 1;
pointer-events: auto;
}
.tendina__collegamento {
display: block;
padding: var(--sp-3) var(--sp-4);
border-radius: var(--raggio-s);
color: var(--testo-su-scuro-attenuato);
font-size: var(--testo-xs);
letter-spacing: var(--traccia-s);
transition: background var(--durata-media) ease,
color var(--durata-media) ease;
}
.tendina__collegamento:hover {
background: rgb(var(--rgb-accento-tenue) / .08);
color: var(--accento-tenue);
}
/* --- Il bottone del menu, solo sul telefono --- */
.testata__interruttore {
display: grid;
place-items: center;
width: 40px;
height: 40px;
margin-left: auto;
border-radius: var(--raggio-cerchio);
color: var(--testo-su-scuro-attenuato);
}
.testata__hamburger,
.testata__hamburger::before,
.testata__hamburger::after {
display: block;
width: 18px;
height: 1.5px;
background: currentColor;
transition: transform var(--durata-rapida) ease,
opacity var(--durata-rapida) ease;
}
.testata__hamburger::before,
.testata__hamburger::after {
content: "";
position: absolute;
}
.testata__hamburger::before { transform: translateY(-6px); }
.testata__hamburger::after { transform: translateY(6px); }
.testata__interruttore[aria-expanded="true"] .testata__hamburger {
background: transparent;
}
.testata__interruttore[aria-expanded="true"] .testata__hamburger::before {
transform: rotate(45deg);
}
.testata__interruttore[aria-expanded="true"] .testata__hamburger::after {
transform: rotate(-45deg);
}
/* IL RESPIRO DELLE SEZIONI */
/* ------------------------------------------------ */
/* Ogni sezione della home porta la classe .sezione oltre alla sua.
Qui c'e' cio' che hanno in comune: il fondo del proprio contesto,
il margine laterale e il respiro sopra e sotto. */
.sezione {
position: relative;
padding: var(--sezione-y) var(--gutter);
background: var(--fondo);
color: var(--testo);
overflow: hidden;
}
.sezione__intestazione {
position: relative;
z-index: var(--z-contenuto);
margin-bottom: var(--sp-14);
}
.sezione__intestazione--centrata {
text-align: center;
}
.sezione__titolo {
max-width: 22ch;
margin-top: var(--sp-3);
font-size: var(--titolo-m);
}
.sezione__intestazione--centrata .sezione__titolo {
max-width: none;
margin-inline: auto;
}
.sezione__sottotitolo {
max-width: 56ch;
margin-top: var(--sp-4);
color: var(--testo-attenuato);
font-size: var(--testo-m);
}
.sezione__intestazione--centrata .sezione__sottotitolo {
margin-inline: auto;
}
/* L'EROE */
/* ------------------------------------------------ */
/* L'eroe e' alto esattamente una schermata, sempre.
Qui c'era un tetto a 860 pixel, messo contro il vuoto che lasciava
min-height: 100svh su uno schermo alto. Curava il vuoto e apriva il
difetto opposto: su una finestra da 945 pixel l'eroe si fermava 85
pixel prima del bordo e lasciava intravedere il marrone della
sezione successiva; a 1080 erano 220 pixel, a 1300 erano 440.
Senza tetto quei pixel se li prende la fotografia, che e' fuori dal
flusso e ritagliata con object-fit: cresce l'immagine, non il
vuoto. Perche' questo non tagli la fascia certificazioni sui
portatili bassi, il contenuto deve poter rientrare, e i suoi spazi
verticali diventano fluidi nella media query dei 900 pixel. */
.eroe {
display: grid;
/* Il contenuto prende lo spazio, la fascia certificazioni resta
incollata in fondo invece di galleggiare. */
grid-template-rows: 1fr auto;
min-height: 100svh;
padding-top: 128px;
padding-bottom: 0;
background: var(--bagliore-contesto), var(--fondo);
}
.eroe__decoro,
.eroe__pattern {
position: absolute;
inset: 0;
z-index: var(--z-sfondo);
pointer-events: none;
}
/* Lo strato del fiore sfuma sopra e sotto, cosi' il disegno non
finisce di netto contro il bordo della sezione. La maschera che
segue il puntatore sta invece sul fiore: due elementi, due
maschere, nessuna composizione da mettere d'accordo. */
.eroe__pattern {
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}
.eroe__griglia {
position: relative;
z-index: var(--z-contenuto);
display: grid;
/* Centrato nello spazio disponibile, ma la riga resta alta quanto
il suo contenuto: se si stirasse, si stirerebbe con lei anche la
colonna dell'immagine. */
align-content: center;
gap: var(--sp-10);
padding-bottom: var(--sp-14);
}
.eroe__titolo {
margin-top: var(--sp-6);
font-size: var(--titolo-xl);
}
.eroe__citazione {
max-width: 44ch;
margin-top: var(--sp-6);
color: var(--accento-su-chiaro);
font-size: var(--testo-l);
font-style: italic;
line-height: var(--interlinea-media);
}
.eroe__corpo {
max-width: 46ch;
margin-top: var(--sp-6);
color: var(--testo-attenuato);
}
.eroe__azioni {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-6);
margin-top: var(--sp-10);
}
.eroe__nota {
max-width: 40ch;
margin-top: var(--sp-5);
color: var(--testo-tenue);
font-size: var(--testo-s);
line-height: var(--interlinea-media);
}
/* Lo strato del fiore, dentro la griglia. Riquadro suo per non far
fondere il fiore con il testo: mix-blend-mode ha bisogno di un
contesto di sovrapposizione tutto suo, e questo glielo da'. */
.eroe__pattern {
position: absolute;
inset: 0;
z-index: var(--z-sfondo);
pointer-events: none;
}
/* Testo e figura sopra il pattern. */
.eroe__testo,
.eroe__figura {
position: relative;
z-index: var(--z-contenuto);
}
.eroe__immagine {
position: relative;
margin: 0;
}
/* La cornice avvolge la sola fotografia, didascalia esclusa: e' il
riferimento delle due targhette, che devono stare sul bordo
dell'immagine e non su quello della figura. */
.eroe__cornice {
position: relative;
}
.eroe__immagine img {
width: 100%;
border-radius: var(--raggio-l);
box-shadow: var(--ombra-rilievo);
}
/* Lo stacco e' largo quanto serve alla targhetta che sporge sotto
l'immagine: con meno, la prima riga finisce sotto la targhetta. */
.eroe__didascalia {
margin-top: var(--sp-10);
color: var(--testo-tenue);
font-size: var(--testo-xxs);
line-height: var(--interlinea-media);
}
/* LA CITAZIONE */
/* ------------------------------------------------ */
/* Imbottitura sua e non quella condivisa: --sezione-y-stretta e' gia'
la ridotta, ma resta pensata per una sezione che contiene qualcosa.
Qui dentro c'e' un paragrafo e basta, e con l'imbottitura comune la
fascia scura risultava alta il doppio del testo che ospita. */
.citazione {
padding-block: clamp(32px, 4.5vh, 56px);
text-align: center;
}
/* IL CORPO E' CALCOLATO SULLA RIGA PIU' LUNGA
Il testo e' scritto in quattro versi separati da
, e i versi
vanno tenuti interi: spezzato in otto righe questo blocco perde
meta' del suo effetto, ed e' l'unica cosa sullo schermo.
Il numero 5.2vw non e' scelto a occhio. Il verso piu' lungo — «Ma a
te dicono di restare su fondi» — misura sempre 15,5 volte il corpo,
qualunque esso sia, ed e' una proporzione del carattere, non una
stima: verificata a 18, 20, 22, 24, 26 e 30 pixel. Lo spazio
disponibile e' 86vw, cioe' la pagina meno i due margini da 7vw. A
5,2vw il verso occupa 80,6vw: sta dentro con un margine costante di
poco piu' di cinque punti percentuali, su OGNI larghezza.
Prima qui c'era --titolo-m, cioe' clamp(30px, 3.1vw, 46px). Il
termine in vw smette di comandare sotto i 968 pixel di larghezza, e
da li' in giu' il corpo restava inchiodato a 30: su un telefono da
390 il verso lungo misurava 465 pixel contro 335 disponibili, si
spezzava in due, e la fascia scura diventava alta 413 pixel — piu'
che sul desktop.
Il tetto e' 36 e non 46 perche' a 46 la citazione competeva con i
titoli di sezione, che a 1440 stanno a 44,6. L'interlinea scende a
1,15: su quattro righe di carattere display 1,3 e' interlinea da
paragrafo, e valeva sessanta pixel di aria. */
.citazione__testo {
font-family: var(--font-display);
font-size: clamp(16px, 5.2vw, 36px);
line-height: var(--interlinea-stretta);
}
/* I DUE PROFILI */
/* ------------------------------------------------ */
.profili__griglia {
display: grid;
gap: var(--sp-6);
}
/* IL PERCHÉ */
/* ------------------------------------------------ */
.perche {
background: var(--bagliore-contesto), var(--fondo);
}
.perche__decoro {
position: absolute;
inset: 0;
z-index: var(--z-sfondo);
pointer-events: none;
}
.perche__capo {
position: relative;
z-index: var(--z-contenuto);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--sp-5);
padding-bottom: var(--sp-5);
border-bottom: 1px solid var(--bordo-tenue);
}
.perche__capo--secondo {
margin-top: var(--sp-18);
}
.perche__numero {
color: var(--accento);
}
.ragioni {
position: relative;
z-index: var(--z-contenuto);
display: grid;
gap: var(--sp-8);
margin-top: var(--sp-8);
list-style: none;
}
.eccellenza {
position: relative;
z-index: var(--z-contenuto);
display: grid;
gap: var(--sp-4);
margin-top: var(--sp-8);
}
/* I NUMERI */
/* ------------------------------------------------ */
.numeri__intestazione {
display: grid;
gap: var(--sp-8);
}
.numeri__scelta {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-3);
}
.numeri__indizio {
max-width: 34ch;
color: var(--testo-tenue);
font-size: var(--testo-s);
line-height: var(--interlinea-media);
text-align: center;
}
.numeri__vista--nascosta {
display: none;
}
.numeri__richiamo {
margin-top: var(--sp-10);
font-family: var(--font-display);
font-size: var(--titolo-s);
text-align: center;
}
.retro__capo {
display: grid;
gap: var(--sp-6);
align-items: end;
margin-bottom: var(--sp-8);
}
.retro__titolo {
margin-top: var(--sp-2);
font-size: var(--titolo-s);
}
.retro__sottotitolo {
max-width: 46ch;
margin-top: var(--sp-3);
color: var(--testo-attenuato);
font-size: var(--testo-s);
}
.simulatore {
display: grid;
gap: var(--sp-8);
}
.simulatore__comandi {
display: grid;
gap: var(--sp-8);
align-content: start;
}
/* I PIANI */
/* ------------------------------------------------ */
.piani {
background: var(--bagliore-contesto), var(--fondo);
}
.piani__griglia {
display: grid;
gap: var(--sp-5);
align-items: stretch;
}
.piani__nota {
margin-top: var(--sp-10);
color: var(--testo-attenuato);
font-size: var(--testo-s);
text-align: center;
}
/* GOLD WAY */
/* ------------------------------------------------ */
.percorso {
position: relative;
}
.percorso__passi {
display: grid;
gap: var(--sp-8);
list-style: none;
}
.goldway__richiamo {
margin-top: var(--sp-14);
text-align: center;
}
/* GOLD RAIN */
/* ------------------------------------------------ */
.goldrain {
display: flex;
flex-direction: column;
gap: var(--sp-18);
min-height: 100svh;
justify-content: center;
background: var(--bagliore-contesto), var(--fondo);
}
.goldrain__pioggia {
position: absolute;
inset: 0;
z-index: var(--z-sfondo);
pointer-events: none;
}
/* I tre segmenti fissi. Stessa materia delle gocce — un filo di un
pixel con il gradiente che sfuma alle due estremita' — ma fermi:
una goccia si legge come caduta solo se accanto c'e' qualcosa che
non cade. Le tre altezze sono diverse di proposito, e nessuna
coincide con la meta' della sezione. */
.goldrain__aste {
position: absolute;
inset: 0;
z-index: var(--z-sfondo);
pointer-events: none;
}
.asta {
position: absolute;
width: 1px;
color: var(--accento-tenue);
background: var(--grad-divisore);
opacity: .55;
}
/* Il segmento di mezzo e' l'unico che passerebbe dentro la colonna
centrata, cioe' sopra il testo e i due pulsanti. La sua posizione
non e' una percentuale ma una distanza dal centro: la fila dei due
pulsanti e' larga 620 pixel fissi, quindi comincia a meta' meno
310, e 340 lascia trenta pixel d'aria. Il 4% e' il pavimento per
le finestre strette, dove meta' meno 340 uscirebbe dallo schermo:
li' i pulsanti si impilano e lo spazio libero torna ai lati. */
.asta:nth-child(1) { left: 13%; top: 8%; height: 26%; }
.asta:nth-child(2) { left: max(4%, calc(50% - 340px)); top: 44%; height: 38%; }
.asta:nth-child(3) { left: 81%; top: 20%; height: 18%; }
.goldrain__centro {
position: relative;
z-index: var(--z-contenuto);
text-align: center;
}
.goldrain__titolo {
margin-top: var(--sp-3);
font-size: var(--titolo-l);
}
.goldrain__claim {
margin-top: var(--sp-4);
font-family: var(--font-display);
font-size: var(--testo-xl);
}
/* Sessantadue caratteri e non cinquantasei. Il paragrafo e' scritto
in due righe separate da un
, e la prima — «Gli acquisti di
Aurum Evolution avvengono in due sole giornate al mese: il 10 e il
25.» — al corpo --testo-s ne misura 467 di pixel. A 56ch il
riquadro ne offriva 448 e quella riga si spezzava dopo «e il»,
lasciando «25.» da solo su una terza riga. Il valore non e' scelto
tondo: e' il primo che sta largo abbastanza, con una dozzina di
pixel di margine.
Sul telefono resta su due righe, e non e' una dimenticanza. A 390
pixel di schermo ne restano 335 di larghezza: per far stare quella
frase su una riga sola servirebbe il corpo a 9 pixel, contro i 13
di adesso e i 10 della misura piu' piccola dell'intero progetto.
Anche a margini azzerati ne servirebbero 10,5. L'unica leva vera
sarebbe accorciare la frase, ed e' una decisione editoriale: posta
al proprietario il 31 agosto 2026, che ha scelto di tenere il testo
intero e le due righe. */
.goldrain__testo {
max-width: 62ch;
margin: var(--sp-5) auto 0;
color: var(--testo-attenuato);
font-size: var(--testo-s);
}
.goldrain__centro .etichetta {
margin-top: var(--sp-10);
}
.goldrain__azioni {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-4);
margin-top: var(--sp-10);
}
/* Tre righe: il titolo, il nastro delle card, e in fondo i comandi.
Le aree hanno un nome perche' sullo schermo grande la stessa riga
di comandi si scioglie — le frecce spariscono e «Vedi tutti» risale
accanto al titolo — e un riordino per aree evita di scrivere due
volte lo stesso collegamento nel modello per poi nasconderne uno. */
.appuntamenti {
position: relative;
z-index: var(--z-contenuto);
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas:
"capo capo"
"lista lista"
"frecce tutti";
gap: var(--sp-5);
padding-top: var(--sp-8);
border-top: 1px solid var(--bordo-tenue);
}
.appuntamenti__capo { grid-area: capo; }
.appuntamenti__finestra { grid-area: lista; }
.appuntamenti__frecce { grid-area: frecce; }
.appuntamenti__tutti {
grid-area: tutti;
justify-self: end;
align-self: center;
}
.appuntamenti__titolo {
margin: var(--sp-2) 0 var(--sp-3);
font-size: var(--testo-xl);
}
/* Lo stesso contenitore a scorrimento con aggancio del carousel degli
articoli: cosi' il dito e le frecce muovono la stessa cosa e non
serve una seconda implementazione per il tocco.
Il respiro verticale c'e' perche' la card cambia bordo al passaggio
del puntatore e un asse qui e' `auto`: il CSS impone allora che
l'altro non possa restare `visible`, e senza margine interno il
bordo superiore verrebbe tagliato via. */
.appuntamenti__finestra {
padding-block: var(--sp-2);
margin-block: calc(var(--sp-2) * -1);
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scrollbar-width: none;
overscroll-behavior-x: contain;
}
.appuntamenti__finestra::-webkit-scrollbar {
display: none;
}
/* Colonne di larghezza calcolata e non `1fr`: dentro un contenitore a
scorrimento `1fr` misura il contenuto, non la finestra, e le card
si stringerebbero tutte dentro lo schermo invece di sporgere. Due
card intere per schermata piu' lo stacco fra loro. */
.appuntamenti__pista {
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - var(--sp-4)) / 2);
gap: var(--sp-4);
align-items: stretch;
}
.appuntamenti__frecce {
display: flex;
gap: var(--sp-2);
}
/* GOLD INSIGHT */
/* ------------------------------------------------ */
.goldinsight__decoro {
position: absolute;
inset: 0;
z-index: var(--z-sfondo);
pointer-events: none;
}
/* Un blocco solo, non piu' due colonne: la pillola e' salita
accanto all'occhiello e la destra resta libera per l'anello. */
.goldinsight__capo {
position: relative;
z-index: var(--z-contenuto);
margin-bottom: var(--sp-10);
}
/* L'occhiello e la pillola sulla stessa riga: "Formazione" dice di
cosa si tratta, la pillola cosa ci trovi. Separate erano due
frammenti agli angoli opposti dello schermo. */
.goldinsight__riga {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-3);
}
/* Qui la pillola non e' piu' una pillola: e' la seconda meta' di
una didascalia sola. Via il margine interno che la teneva
staccata, e un punto mediano a legare le due parti. */
.goldinsight__riga .pillola {
padding-inline: 0;
}
.goldinsight__riga .pillola::before {
content: "\00B7";
margin-right: var(--sp-3);
}
.goldinsight__titolo {
margin-top: var(--sp-3);
font-size: var(--titolo-m);
}
.goldinsight__claim {
margin-top: var(--sp-3);
color: var(--testo-attenuato);
font-style: italic;
}
.canali {
display: grid;
gap: var(--sp-3);
margin-bottom: var(--sp-14);
list-style: none;
}
/* PARTNERSHIP */
/* ------------------------------------------------ */
.partnership__capo {
display: grid;
gap: var(--sp-6);
align-items: start;
margin-bottom: var(--sp-10);
}
.partnership__griglia {
display: grid;
gap: var(--sp-5);
}
/* La Gold Academy e' la quarta cella della griglia dei partner, non
un blocco appeso sotto: sul telefono deve poter stare accanto alle
altre. Da 600 pixel in su riprende la riga intera — vedi
grid-column piu' avanti — e torna la fascia larga di sempre. */
.accademia {
display: grid;
gap: var(--sp-5);
padding: var(--sp-6);
border: 1px solid var(--bordo);
border-radius: var(--raggio-m);
background: var(--velo-chiaro);
}
.accademia__titolo {
margin-top: var(--sp-2);
font-size: var(--testo-xl);
}
.accademia__testo {
color: var(--testo-attenuato);
font-size: var(--testo-s);
}
/* Da 600 pixel in su la Gold Academy riprende la riga intera e torna
la fascia larga: imbottitura e raggio maggiori delle card, e il
titolo su una riga sola. Il margine ricostruisce lo stacco che
aveva quando stava fuori dalla griglia — quattro pixel in piu' del
distacco fra le righe. */
@media (min-width: 600px) {
.accademia {
grid-column: 1 / -1;
margin-top: var(--sp-1);
padding: var(--sp-8);
border-radius: var(--raggio-l);
}
.accademia__titolo {
white-space: nowrap;
}
}
/* LA CHIUSURA */
/* ------------------------------------------------ */
.chiusura {
background: var(--bagliore-contesto), var(--fondo);
text-align: center;
}
.chiusura__decoro {
position: absolute;
inset: 0;
z-index: var(--z-sfondo);
pointer-events: none;
}
/* Il marchio e il manifesto si contendono la stessa schermata: qui il
logo cresce e il testo scende di un gradino, cosi' l'ultima cosa
che si vede e' il marchio e non un paragrafo. Il tetto resta sotto
i 420px del file, che non va ingrandito oltre il suo vero. */
.chiusura__logo {
position: relative;
z-index: var(--z-contenuto);
width: min(290px, 60vw);
margin: 0 auto;
}
.chiusura__manifesto {
position: relative;
z-index: var(--z-contenuto);
max-width: 26ch;
margin: var(--sp-10) auto 0;
font-size: var(--titolo-sm);
line-height: var(--interlinea-media);
}
.chiusura .bottone {
position: relative;
z-index: var(--z-contenuto);
margin-top: var(--sp-10);
}
.chiusura__chiosa {
position: relative;
z-index: var(--z-contenuto);
margin-top: var(--sp-8);
font-family: var(--font-display);
font-size: var(--testo-xl);
}
.chiusura__nota {
position: relative;
z-index: var(--z-contenuto);
margin-top: var(--sp-3);
color: var(--testo-tenue);
font-size: var(--testo-s);
}
/* IL PIEDE DI PAGINA */
/* ------------------------------------------------ */
.pie {
padding: var(--sp-18) var(--gutter) var(--sp-8);
background: var(--fondo);
color: var(--testo);
}
.pie__griglia {
display: grid;
gap: var(--sp-10);
}
.pie__logo {
width: 150px;
}
.pie__descrizione {
margin-top: var(--sp-5);
color: var(--testo-attenuato);
font-size: var(--testo-s);
line-height: var(--interlinea-media);
}
.pie__dati {
margin-top: var(--sp-4);
color: var(--testo-tenue);
font-size: var(--testo-xs);
line-height: var(--interlinea-media);
}
.pie__titolo {
margin-bottom: var(--sp-5);
color: var(--accento-tenue);
font-family: var(--font-testo);
font-size: var(--testo-xxs);
font-weight: var(--peso-medio);
letter-spacing: var(--traccia-xl);
text-transform: uppercase;
}
.pie__elenco {
display: grid;
gap: var(--sp-2);
list-style: none;
}
.pie__elenco a {
color: var(--testo-su-scuro-attenuato);
font-size: var(--testo-s);
}
.pie__elenco a:hover {
color: var(--accento-tenue);
}
.pie__elenco--trust a {
border-bottom: 1px solid var(--bordo-tenue);
}
.pie__barra {
display: grid;
gap: var(--sp-3);
margin-top: var(--sp-14);
padding-top: var(--sp-5);
border-top: 1px solid var(--bordo-tenue);
color: var(--testo-su-scuro-tenue);
font-size: var(--testo-xs);
}
.pie__recapiti {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
}
/* LO SCHERMO GRANDE */
/* ------------------------------------------------ */
/* Da qui in giu' c'e' tutto e solo cio' che cambia sopra i 900 pixel.
Un telefono legge queste regole ma non le applica mai. */
@media (min-width: 900px) {
.testata__interruttore { display: none; }
/* La barra si stringe su quello che contiene invece di occupare
tutta la larghezza. Con width: max-content il riquadro e' largo
esattamente quanto le voci piu' il pulsante, e il
translateX(-50%) della regola di base lo tiene al centro dello
schermo qualunque larghezza risulti.
Prima era largo 1180 pixel fissi: il pulsante Login finiva
all'estremo destro e in mezzo restava un vuoto che non diceva
niente. */
.testata {
width: max-content;
max-width: calc(100% - var(--sp-8));
}
/* Il menu smette di essere un pannello e torna una riga di voci.
flex: none, non flex: 1: se il menu si allargasse a riempire, la
barra tornerebbe larga quanto lo spazio disponibile. */
.menu {
position: static;
display: flex;
flex: none;
flex-direction: row;
align-items: center;
gap: var(--sp-5);
padding: 0;
border: 0;
background: none;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
/* Uno stacco misurato prima del pulsante, non tutto lo spazio
rimasto. */
.menu__voce--accesso { margin-left: var(--sp-2); }
/* La tendina torna un pannello sospeso sotto la sua voce. Resta nel
documento anche da chiusa — invisibile e inerte — perche' la
comparsa deve poter sfumare, e display:none non sfuma.
Stesso vetro della barra: deve sembrare la barra che si allunga,
non un secondo oggetto appoggiato sopra. */
.tendina {
position: absolute;
top: calc(100% + var(--sp-3));
left: 50%;
display: flex;
flex-direction: column;
min-width: 190px;
padding: var(--sp-2);
border: 1px solid var(--bordo-su-scuro);
border-radius: var(--raggio-m);
background: var(--vetro-scuro);
box-shadow: var(--ombra-card-scura);
transform: translateX(-50%) translateY(-8px);
pointer-events: none;
-webkit-backdrop-filter: var(--sfocatura-vetro);
backdrop-filter: var(--sfocatura-vetro);
}
.menu__voce--tendina[data-aperta] .tendina {
transform: translateX(-50%) translateY(0);
}
/* GLI SPAZI VERTICALI DELL'EROE SEGUONO LA FINESTRA
Il contenuto dell'eroe e' alto 700 pixel su una finestra larga
1280 e 725 da 1600 in su. Su una finestra alta 625 — un portatile
1366x768, o un Full HD con Windows al 150% — sfondava, e la
fascia certificazioni finiva sotto il bordo: 83 pixel invisibili,
cioe' le quattro autorizzazioni che danno credito al sito.
Ogni misura qui sotto e' un intervallo: minimo, quota
proporzionale all'altezza della finestra, massimo. Il massimo e'
sempre il valore fisso di prima, quindi da 860 pixel di finestra
in su non cambia niente. Sotto, l'eroe si stringe per gradi
togliendo aria e non contenuto: circa 115 pixel recuperati sulla
finestra piu' bassa, che bastano fino a 590. */
.eroe {
padding-top: clamp(92px, 15svh, 128px);
}
.eroe__titolo,
.eroe__citazione,
.eroe__corpo {
margin-top: clamp(15px, 2.8svh, 24px);
}
.eroe__azioni {
margin-top: clamp(25px, 4.6svh, 40px);
}
.eroe__nota {
margin-top: clamp(13px, 2.3svh, 20px);
}
/* Solo la fascia dentro l'eroe: e' l'unica che deve stare sopra il
bordo della finestra. */
.eroe .fascia {
padding-block: clamp(10px, 1.8svh, 16px);
}
.eroe__griglia {
padding-bottom: clamp(35px, 6.5svh, 56px);
grid-template-columns: 1.1fr 0.9fr;
gap: var(--sp-18);
/* stretch e non center: la colonna dell'immagine deve essere alta
quanto quella del testo, non galleggiarci accanto. */
align-items: stretch;
}
/* L'IMMAGINE SEGUE IL TESTO, NON VICEVERSA
L'immagine e' un ritratto 896x1200: lasciata alla sua proporzione
naturale diventava molto piu' alta della colonna di testo accanto,
e l'eroe risultava sbilanciato.
Il modo per farle seguire il testo e' toglierla dal flusso: cosi'
non ha voce in capitolo sull'altezza della riga, che viene decisa
dalla sola colonna di testo. La figura, che resta nel flusso, si
stira fino a quell'altezza, e l'immagine la riempie ritagliandosi
con object-fit invece di deformarsi. */
.eroe__immagine {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
}
.eroe__cornice {
flex: 1;
display: flex;
/* Senza questo un elemento flessibile non scende sotto la propria
altezza naturale, e tutto il ragionamento salta. */
min-height: 0;
}
.eroe__immagine img {
flex: 1;
min-height: 0;
height: 100%;
object-fit: cover;
}
/* Due colonne di larghezza fissa e centrate, non due meta' della
sezione. Con 1fr 1fr su un monitor da 1440 ogni card superava i
settecento pixel: il testo dentro andava a capo dopo un centinaio
di caratteri e la card si leggeva come una fascia orizzontale,
non come una scheda. La misura e' quella di una colonna di
lettura, e lo stacco fra le due sale di conseguenza — a 24 pixel
le due card sembravano un blocco solo diviso da una riga. */
.profili__griglia {
grid-template-columns: repeat(2, minmax(0, 400px));
justify-content: center;
gap: var(--sp-18);
}
.ragioni { grid-template-columns: repeat(4, 1fr); }
.eccellenza {
grid-template-columns: repeat(4, 1fr);
/* Righe alte quanto il loro contenuto, senza minimi imposti: a
decidere sono le quattro schede, e la card del caveau si adatta
perche' la sua immagine e' fuori dal flusso. */
grid-auto-rows: auto;
}
.eccellenza__caveau {
grid-column: span 2;
grid-row: span 2;
}
.numeri__intestazione { grid-template-columns: 1.2fr 0.8fr; }
.retro__capo { grid-template-columns: 1.4fr auto; }
.simulatore { grid-template-columns: 1fr 1fr; }
.piani__griglia { grid-template-columns: repeat(3, 1fr); }
.percorso__passi { grid-template-columns: repeat(4, 1fr); }
.goldrain__azioni { flex-direction: row; justify-content: center; }
/* Le quattro card ci stanno tutte su una riga: niente da scorrere,
quindi niente frecce. Il titolo passa a riga intera e «Vedi
tutti» gli si mette accanto, allineato al suo piede. */
.appuntamenti {
grid-template-columns: 1fr auto;
grid-template-areas:
"capo tutti"
"lista lista";
}
.appuntamenti__frecce {
display: none;
}
.appuntamenti__tutti {
align-self: end;
}
/* Fuori dal contenitore a scorrimento la finestra non ha piu' nulla
da contenere, e `visible` restituisce alla card l'ombra e il
bordo che il ritaglio le toglieva. */
.appuntamenti__finestra {
overflow: visible;
}
.appuntamenti__pista {
grid-auto-flow: row;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--sp-5);
}
.canali { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.partnership__capo { grid-template-columns: 1fr auto; align-items: center; }
.partnership__griglia { grid-template-columns: repeat(3, 1fr); }
.accademia { grid-template-columns: auto 1fr auto; align-items: center; }
.pie__griglia { grid-template-columns: 1.5fr 1.1fr 1fr 1.1fr; }
.pie__elenco--due { grid-template-columns: 1fr 1fr; }
.pie__barra {
grid-template-columns: 1fr auto;
align-items: center;
}
}
/* LA SOGLIA INTERMEDIA */
/* ------------------------------------------------ */
/* Le griglie a quattro colonne devono passare da quattro a due prima
di arrivare a una: schiacciate direttamente in colonna singola
perdono il ritmo, e in due stanno bene gia' da 600 pixel. */
@media (min-width: 600px) and (max-width: 899px) {
.ragioni,
.eccellenza,
.canali,
.partnership__griglia,
.profili__griglia {
grid-template-columns: 1fr 1fr;
}
/* Il nastro degli eventi ne mostra tre invece di due: a 800 pixel
due card sole diventano larghe quanto una fascia. */
.appuntamenti__pista {
grid-auto-columns: calc((100% - 2 * var(--sp-4)) / 3);
}
.pie__griglia { grid-template-columns: 1fr 1fr; }
}