/* =====================================================================
BRIXIA FLY — clone statico
Palette: verde scuro #1F2521 · oro #CDA434 · crema #EFE9DC · bianco
Font: Fraunces (titoli, variabile: opsz/wght/WONK) · Manrope (corpo)
===================================================================== */
/* =====================================================================
FONT
Serviti da qui, non da Google Fonts. Il foglio di stile di fonts.googleapis
era di terza parte e bloccava il rendering: due handshake in più prima che
comparisse una lettera. Ora i file stanno in assets/fonts/ e sono subset:
- intervallo unicode "latin" (lo stesso che serviva Google, copre àèéìòù,
virgolette tipografiche, — · … € ™);
- solo gli assi che il CSS usa davvero.
Sugli assi, tre decisioni prese misurando e non a occhio:
- `wght` limitato a 400-700: il sito non usa altro;
- `opsz` tenuto INTERO (9-144). È l'ottico automatico che fa sembrare
Fraunces disegnata apposta per ogni misura, cioè il motivo per cui si usa
Fraunces. Fissarlo risparmierebbe 10 KB e appiattirebbe display e testo;
- `SOFT` TOLTO (fissato a 0): da solo pesava 48 KB su 108, per ammorbidire
le grazie in una sola regola (`.statement`). Confrontate a 96px le due
versioni sono indistinguibili. `WONK` invece resta fissato a 1, che è il
suo valore predefinito: i glifi calligrafici non costano nulla e sono la
metà visibile di quell'effetto.
Da 288 KB per pagina a 81 (il corsivo lo scaricano solo index e contatti,
le uniche due pagine che hanno testo in corsivo serif).
Per rigenerarli: `strumenti/subset-font.py` — vedi CLAUDE.md.
===================================================================== */
@font-face {
font-family: "Fraunces";
src: url(../fonts/fraunces-latin.woff2) format("woff2");
font-weight: 400 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Fraunces";
src: url(../fonts/fraunces-italic-latin.woff2) format("woff2");
font-weight: 400 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Manrope";
src: url(../fonts/manrope-latin.woff2) format("woff2");
font-weight: 400 700;
font-style: normal;
font-display: swap;
}
/* Fraunces ha una e-commerciale calligrafica: un doppio occhiello chiuso. A
misura display è il glifo più bello del font — l'h1 «Termini & Condizioni»
la merita, ed è stato guardato prima di scrivere questa regola. A 22px però,
schiacciata fra due B, si legge come un timbro: «B&B Coco» veniva «B⊗B Coco».
Il glifo non manca e non è sbagliato, è il disegno; e l'asse WONK che lo
governa è stato FISSATO a 1 nel subset (vedi il blocco qui sopra), quindi da
CSS non si può ammorbidire.
Questa faccia non scarica niente di nuovo: punta al file Manrope che la
pagina ha già e lo limita alla sola U+0026. Messa PRIMA di Fraunces nella
pila dei font si prende la e-commerciale e lascia al serif tutto il resto.
Va usata solo sui titoli serif PICCOLI — a misura display Fraunces vince. */
@font-face {
font-family: "E-commerciale";
src: url(../fonts/manrope-latin.woff2) format("woff2");
font-weight: 400 700;
font-style: normal;
font-display: swap;
unicode-range: U+0026;
}
/* ----- Design tokens ----- */
:root {
--bg-dark: #1f2521;
--bg-darker: #171b18;
--bg-dark-2: #232a25;
--gold: #cda434;
--gold-dark: #c0a123;
/* oro per i fondi chiari: l'oro pieno su crema si ferma a 1.9:1, questo arriva
a 5.2:1 su crema e 6.2:1 su bianco (WCAG AA richiede 4.5:1) */
--gold-ink: #7a5c10;
--cream: #efe9dc;
--cream-dim: #d8d2c6;
/* rosso degli errori dei form, in coppia come tutti i colori del sito:
--error sui fondi scuri (7.7:1 sul verde), --error-ink sui fondi chiari
(5.4:1 su crema, 6.4:1 su bianco). Il modulo dei contatti sta su crema,
quindi quello che si vede di norma è il secondo. */
--error: #f2a2a2;
--error-ink: #b3261e;
--white: #ffffff;
--ink: #1a1d1b;
--ink-soft: #4a4f4b;
--line: rgba(205,164,52,.28);
--font-serif: "Fraunces", Georgia, "Times New Roman", serif;
--font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Scala tipografica fluida: sette gradini, un solo posto dove regolarli.
Ogni titolo del sito pesca da qui — niente più clamp() sparsi nel file o nell'HTML. */
--step-0: clamp(1rem, .94rem + .3vw, 1.2rem); /* occhiello dell'hero */
--step-1: clamp(1.1rem, 1.02rem + .35vw, 1.35rem); /* lead, occhielli lunghi */
--step-2: clamp(1.4rem, 1.25rem + .6vw, 1.9rem); /* h3: card, chip, travel, h2 legali */
--step-3: clamp(1.6rem, 1.35rem + 1.1vw, 2.6rem); /* h2 secondari, statement, citazione */
--step-4: clamp(2rem, 1.6rem + 1.7vw, 3.2rem); /* h2 di sezione, h1 pagine legali */
--step-5: clamp(2.4rem, 1.9rem + 2.1vw, 4rem); /* h1 pagine interne */
--step-6: clamp(2.8rem, 1.9rem + 4vw, 5.4rem); /* h1 hero della home */
--container: 1200px;
--gutter: clamp(1.25rem, 4vw, 3rem);
/* 86 e non 78: il marchio dell'header è cresciuto (vedi .brand) e sotto gli
80px la barra gli stava addosso. Ogni misura che dipende dall'altezza
dell'header — scroll-padding, hero, aggancio delle carte, colonna sticky
dei contatti — è scritta in funzione di questo token, quindi si regola qui
e basta. */
--header-h: 86px;
--radius: 30px;
--ease: cubic-bezier(.22,.61,.36,1);
/* colore dell'anello di focus: scuro di default, riassegnato in oro sui fondi scuri */
--focus: var(--gold-ink);
/* ritmo della comparsa parola per parola — vale sia per lo statement sia per l'h1 dell'hero */
--stagger: 38ms; /* ritardo fra una parola e la successiva */
--lead-in: 180ms; /* attesa prima che parta la prima parola */
/* spazio vuoto sopra e sotto il blocco statement — unica manopola */
--statement-space: clamp(2.5rem, 5vw, 4rem);
}
/* ----- Reset ----- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-sans);
font-size: 17px;
line-height: 1.7;
color: var(--ink);
background: var(--cream);
-webkit-font-smoothing: antialiased;
/* clip e non hidden: `hidden` trasformerebbe il body in un contenitore di
scorrimento e romperebbe le carte `sticky` del programma. `clip` taglia
l'eccedenza orizzontale senza creare il contenitore. */
overflow-x: clip;
}
img { max-width: 100%; display: block; height: auto; }
picture { display: block; }
p { text-wrap: pretty; } /* evita l'ultima riga con una parola sola */
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; }
/* Fraunces è variabile: 600 è un semibold reale, non il grassetto sintetico di prima.
font-optical-sizing assottiglia le grazie nei titoli grandi e le ingrossa in quelli piccoli. */
h1,h2,h3,h4 {
font-family: var(--font-serif); font-weight: 600;
line-height: 1.12; letter-spacing: -.01em;
font-optical-sizing: auto;
text-wrap: balance; /* distribuisce le righe invece di lasciare una parola orfana */
}
/* ----- Focus da tastiera ----- */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
/* sui fondi scuri l'anello passa all'oro pieno, sulle schede chiare torna scuro */
.dark, .darker, .hero, .site-header, .site-footer { --focus: var(--gold); }
.card--light, .card--photo, .tessera, .sponsor__corpo { --focus: var(--gold-ink); }
/* ----- Skip link ----- */
.skip-link {
position: fixed; top: .5rem; left: var(--gutter); z-index: 100;
transform: translateY(-250%);
padding: .7rem 1.2rem; border-radius: 10px;
background: var(--gold); color: #241d05;
font-weight: 700; font-size: .9rem;
transition: transform .25s var(--ease);
}
.skip-link:focus { transform: none; }
/* ----- Layout helpers ----- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(4rem, 9vw, 8rem); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.dark { background: var(--bg-dark); color: var(--cream); }
.darker { background: var(--bg-darker); color: var(--cream); }
/* .dark e .darker sono due fondi scuri diversi ma con lo stesso trattamento del testo:
ogni regola di colore va scritta per entrambi, altrimenti su .darker resta il colore
pensato per il fondo chiaro (era il caso di .lead e .section-head p: 2.05:1). */
.dark h1, .dark h2, .dark h3,
.darker h1, .darker h2, .darker h3 { color: var(--white); }
/* Grana finissima sulle sole sezioni scure: dà il senso della carta stampata e
maschera il banding dei gradienti. È un'immagine tassellata, non un filtro:
costa una rasterizzazione e basta. Non tocca body.dark delle pagine legali. */
.section.dark, .section.darker { position: relative; }
.section.dark::after, .section.darker::after {
content: ""; position: absolute; inset: 0; z-index: 0;
pointer-events: none; opacity: .04;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.section.dark > .container, .section.darker > .container { position: relative; z-index: 1; }
.eyebrow {
font-family: var(--font-sans);
font-size: .8rem; font-weight: 700;
letter-spacing: .28em; text-transform: uppercase;
color: var(--gold-ink); /* default = fondo chiaro */
margin-bottom: 1.1rem; display: inline-block;
}
.dark .eyebrow, .darker .eyebrow, .hero .eyebrow { color: var(--gold); }
/* le schede chiare restano chiare anche dentro una sezione scura */
.card--light .eyebrow, .card--photo .eyebrow { color: var(--gold-ink); }
.lead { font-size: var(--step-1); line-height: 1.65; color: var(--ink-soft); }
.dark .lead, .darker .lead { color: var(--cream-dim); }
/* attacco di pagina: stesso corpo del lead ma in semibold e col nero pieno,
perché il grigio del lead in grassetto sembrerebbe solo sporco */
.lead--strong { font-weight: 600; color: var(--ink); }
.dark .lead--strong, .darker .lead--strong { color: var(--white); }
.measure { max-width: 62ch; }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
/* Blocco di testo corrente: dà aria fra un paragrafo e l'altro senza dover
scrivere margini nell'HTML. */
.prose p + p { margin-top: 1rem; }
/* Link dentro a un paragrafo: sottolineato (il colore da solo non basta a
distinguerlo) e con l'oro giusto per il fondo, chiaro o scuro che sia.
Al passaggio del mouse ingrossa il filo invece di cambiare colore. */
.link { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }
.dark .link, .darker .link { color: var(--gold); }
.link:hover { text-decoration-thickness: 2px; }
/* ----- Buttons ----- */
.btn {
/* justify-content serve quando il bottone viene stirato dal contenitore —
nel form è una cella di griglia, quindi occupa tutta la larghezza e senza
questa riga il testo resterebbe agganciato a un lato invece che al centro */
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
padding: .85rem 1.8rem;
border-radius: var(--radius);
font-weight: 700; font-size: .95rem;
letter-spacing: .02em;
border: 1.5px solid transparent;
transition: transform .2s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
cursor: pointer;
}
.btn--gold { background: var(--gold); color: #241d05; }
.btn--gold:hover { background: var(--gold-dark); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.55); }
.btn--ghost:hover { background: rgba(255,255,255,.08); border-color: var(--white); transform: translateY(-2px); }
/* secondario su fondo CHIARO: --ghost è bianco, sulla scheda sparirebbe */
.btn--linea { background: transparent; color: var(--ink); border-color: rgba(31,37,33,.3); }
.btn--linea:hover { background: rgba(31,37,33,.05); border-color: var(--ink); transform: translateY(-2px); }
.dark .btn--linea, .darker .btn--linea { color: var(--cream); border-color: var(--line); }
.dark .btn--linea:hover, .darker .btn--linea:hover { background: rgba(255,255,255,.06); border-color: var(--gold); }
.btn--dark { background: var(--bg-dark); color: var(--cream); }
.btn--dark:hover { background: var(--bg-darker); transform: translateY(-2px); }
/* =====================================================================
HEADER
===================================================================== */
.site-header {
position: fixed; inset: 0 0 auto 0; z-index: 50;
height: var(--header-h);
display: flex; align-items: center;
transition: background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; }
/* Il marchio è la sola cosa che deve restare riconoscibile anche a colpo
d'occhio: a 1.3rem con l'angelo a 3.1rem si perdeva accanto a sei voci di
menu larghe quasi il doppio. Sopra i 960px sta a 1.55rem con l'angelo a
3.7rem; sotto, il blocco responsive lo riporta alla misura di prima perché
lì lo spazio in larghezza è tutto quello che c'è. */
.brand {
display: inline-flex; align-items: center; gap: .7rem;
font-family: var(--font-serif); font-weight: 600;
font-size: 1.55rem; letter-spacing: .1em; color: var(--white);
text-transform: uppercase; white-space: nowrap;
}
.brand span { color: var(--gold); }
/* Marchio e lockup sono due con il colore già scritto dentro all'SVG
(oro il marchio, crema il lockup), non maschere CSS colorate da currentColor.
La maschera sarebbe più elegante e in HTTP funziona, ma Chrome blocca
mask-image su file://, e questo sito deve aprirsi anche col doppio click:
in locale il logo sparirebbe. Header e footer sono entrambi scuri, quindi
una tinta fissa per ciascuno basta. Serve una versione su fondo chiaro?
Si aggiunge un file, non si torna alla maschera. */
.brand__mark { flex: none; width: 3.7rem; height: auto; }
.brand__lockup { display: block; width: 200px; max-width: 100%; height: auto; }
/* .92 e non .78: a tre quarti di opacità la fotografia sotto continuava a
trasparire e la barra sembrava sporca invece che scura, con le voci del menu
appoggiate su un fondo che cambiava colore riga per riga mentre si scorreva. */
.site-header.scrolled { background: rgba(23,27,24,.92); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
/* Velo scuro in cima: finché l'header è trasparente il menu bianco appoggia
direttamente sulla foto dell'hero, e su uno scatto luminoso sparisce.
Si dissolve quando l'header prende il suo fondo solido. */
.site-header::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 180%;
background: linear-gradient(180deg, rgba(10,13,11,.6), transparent);
pointer-events: none; z-index: -1;
transition: opacity .35s var(--ease);
}
.site-header.scrolled::before { opacity: 0; }
/* Filo d'oro di avanzamento lettura, legato allo scroll e senza una riga di JS.
Dove le scroll-driven animation non ci sono, semplicemente non compare. */
@supports (animation-timeline: scroll()) {
.site-header::after {
content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
background: var(--gold); transform: scaleX(0); transform-origin: 0 50%;
animation-name: read-progress;
animation-timing-function: linear;
animation-fill-mode: both;
animation-duration: auto;
animation-timeline: scroll(root block);
}
@keyframes read-progress { to { transform: scaleX(1); } }
}
.nav { display: flex; align-items: center; gap: 2rem; }
/* Il bianco all'82% è quello che faceva sembrare il menu spento: su una foto
luminosa (chi-siamo, location) le voci non selezionate sparivano quasi.
Al 94% restano chiaramente leggibili senza gridare più della voce corrente,
che è comunque distinta dal filo d'oro sotto. */
.nav a {
color: rgba(255,255,255,.94); font-weight: 600; font-size: .96rem;
letter-spacing: .02em; position: relative; padding: .3rem 0;
/* ombra sottilissima: non si vede su fondo scuro, ma stacca le voci quando
l'header è ancora trasparente sopra una fotografia chiara */
text-shadow: 0 1px 3px rgba(10,13,11,.45);
transition: color .2s var(--ease);
}
.nav a::after {
content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
background: var(--gold); transition: width .25s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--white); }
.nav a:hover::after, .nav a[aria-current="page"]::after { width: 100%; }
/* La coda del pannello (i due recapiti) esiste solo nel menu a tutto schermo:
da desktop il menu è una riga di voci e non c'è posto per altro. La vesto
nel blocco responsive, qui la spengo e basta. */
.nav__coda { display: none; }
/* Comparsa delle voci del menu a tutto schermo, una dopo l'altra. Muove solo
il `transform`: l'opacità qui non si tocca, se no un'animazione che non parte
lascia il menu vuoto (vedi la nota nel blocco responsive). */
@keyframes voce-entra { from { transform: translateX(1.6rem); } }
/* Il pulsante è una pastiglia e non tre righe nude: sopra al cielo chiaro degli
hero interni le righe bianche da 2px erano il punto meno visibile di tutta la
pagina. Il fondo velato le tiene staccate ovunque e dà anche un bersaglio
visibile ai 44px che il pulsante già occupava. */
.nav-toggle {
display: none; width: 44px; height: 44px; position: relative;
border: 1px solid rgba(255,255,255,.22); border-radius: 50%;
background: rgba(23,27,24,.45); backdrop-filter: blur(6px);
transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.nav-toggle:hover { background: rgba(23,27,24,.8); border-color: rgba(255,255,255,.5); }
/* Le due righe esterne sono pseudo-elementi della riga di mezzo, quindi il loro
contenitore è lei e non il pulsante: `left` va azzerato su di loro, non
ripetuto, altrimenti scivolano di lato della stessa quota. */
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
content: ""; position: absolute; width: 21px; height: 2px; background: var(--white);
border-radius: 2px;
transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span { top: 21px; left: 11px; }
.nav-toggle span::before { top: -7px; left: 0; }
.nav-toggle span::after { top: 7px; left: 0; }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); }
/* =====================================================================
HERO
===================================================================== */
/* isolation crea uno stacking context locale: sfondo e velo restano dentro l'hero
invece di finire dietro al body (com'era con gli z-index negativi) */
.hero {
position: relative; isolation: isolate; overflow: hidden; min-height: 100svh;
display: flex; align-items: center;
color: var(--white); text-align: center;
padding-top: var(--header-h);
}
.hero--inner { min-height: 68vh; }
.hero > .container { position: relative; z-index: 2; }
/* l'8% in più sopra e sotto è il margine di manovra della parallasse:
senza, scorrendo si scoprirebbe il bordo dello sfondo */
.hero__bg { position: absolute; inset: -8% 0; z-index: 0; }
.hero__bg picture { display: block; width: 100%; height: 100%; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
/* Video di sfondo: sta sopra il fermo immagine e compare in dissolvenza solo
quando ha davvero iniziato a scorrere, così non si vede mai un buco nero. */
.hero__video {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover;
opacity: 0; transition: opacity 1s var(--ease);
}
.hero__video.is-playing { opacity: 1; }
/* Comando di pausa del video (WCAG 2.2.2). 44px: è anche un bersaglio touch. */
.hero__motion {
position: absolute; z-index: 3;
right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
width: 44px; height: 44px; border-radius: 50%;
display: grid; place-items: center;
background: rgba(23,27,24,.55); border: 1px solid rgba(255,255,255,.35);
color: var(--white); backdrop-filter: blur(6px);
transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
/* Quarta volta che questo file paga la stessa trappola (dopo .nastro__lista,
.form-success e .cookie): `display: grid` è una regola d'autore e batte
l'[hidden] dello user agent, quindi il pulsante nasceva già acceso. Da
telefono il video non si scarica affatto (main.js lo carica solo sopra gli
820px), quindi restava per sempre un comando da 44px sopra all'hero che
metteva in pausa un video che non c'era. */
.hero__motion[hidden] { display: none; }
.hero__motion:hover { background: rgba(23,27,24,.85); border-color: var(--white); }
.hero__motion svg { width: 18px; height: 18px; }
.hero__motion .hero__motion-play { display: none; }
.hero__motion.is-paused .hero__motion-pause { display: none; }
.hero__motion.is-paused .hero__motion-play { display: block; }
/* Parallasse legata allo scroll: lo sfondo resta indietro rispetto al testo.
`exit` copre esattamente il tratto in cui l'hero esce dallo schermo. */
@supports (animation-timeline: view()) {
.hero__bg {
animation-name: hero-parallax;
animation-timing-function: linear;
animation-fill-mode: both;
animation-duration: auto;
animation-timeline: view();
animation-range: exit 0% exit 100%;
}
@keyframes hero-parallax { to { transform: translateY(8%); } }
}
/* Due strati: il velo verticale di sempre più una pozza d'ombra al centro.
Serve perché le fotografie degli hero vanno dal quasi nero della home al
fiume in pieno sole di chi-siamo: su quest'ultima il titolo bianco scendeva
a 2,2:1 sull'acqua schiarita dal sole, sotto il 3:1 richiesto per il testo
grande. La pozza scurisce solo dove cade il testo e lascia vivi i bordi. */
.hero::after {
content: ""; position: absolute; inset: 0; z-index: 1;
background:
radial-gradient(62% 58% at 50% 45%, rgba(15,18,16,.45), rgba(15,18,16,0) 72%),
linear-gradient(180deg, rgba(23,27,24,.55) 0%, rgba(23,27,24,.35) 40%, rgba(23,27,24,.85) 100%);
}
.hero__inner { max-width: 900px; margin-inline: auto; }
/* L'occhiello dell'hero è l'unico testo piccolo del sito appoggiato su una
fotografia. Ingrandito di un gradino e posato su una targa scura: l'oro da
solo, sull'acqua chiara di chi-siamo, stava a 0,9:1 e nessuna tinta d'oro
può arrivare a 4,5:1 su quei bianchi. Con la targa (e la sfocatura, che
spegne le macchie chiare sotto) arriva a 6:1 su tutte le pagine. */
.hero .eyebrow {
font-size: var(--step-0);
letter-spacing: .24em;
margin-bottom: 1.4rem;
padding: .5rem 1.15rem;
border: 1px solid rgba(205,164,52,.38);
border-radius: 999px;
background: rgba(23,27,24,.82);
backdrop-filter: blur(10px);
}
/* tracking negativo: su un serif da display la spaziatura larga sfilaccia la parola */
.hero h1 {
font-size: var(--step-6); font-weight: 700;
letter-spacing: -.015em; margin-bottom: 1rem;
--stagger: 55ms; --lead-in: 150ms;
}
.hero--inner h1 { font-size: var(--step-5); letter-spacing: -.01em; }
/* L'h1 è già in viewport al caricamento, quindi qui la comparsa è un'animazione
(parte da sola). Nello statement è invece una transizione, innescata dallo
scroll reveal. Nessun opacity:0 statico: se le animazioni sono disattivate
il titolo resta semplicemente visibile. */
.hero h1 .word {
animation: word-in .9s var(--ease) both;
animation-delay: calc(var(--lead-in) + var(--i) * var(--stagger));
}
@keyframes word-in {
from { opacity: 0; transform: translateY(.35em); filter: blur(8px); }
}
.hero__subtitle {
font-size: var(--step-1); font-weight: 500;
letter-spacing: .05em; color: var(--cream-dim); margin-bottom: .6rem;
}
.hero__sponsor { font-size: .8rem; letter-spacing: .32em; color: var(--gold); text-transform: uppercase; margin-bottom: 2.2rem; }
.hero__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.scroll-cue {
position: absolute; bottom: 26px; left: 50%; z-index: 2; transform: translateX(-50%);
width: 24px; height: 40px; border: 2px solid rgba(255,255,255,.5); border-radius: 14px;
}
.scroll-cue::after {
content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; border-radius: 2px;
background: var(--white); transform: translateX(-50%); animation: cue 1.6s var(--ease) infinite;
}
@keyframes cue { 0%{opacity:0;transform:translate(-50%,0)} 40%{opacity:1} 100%{opacity:0;transform:translate(-50%,12px)} }
/* =====================================================================
SECTION TITLES + GRIDS
===================================================================== */
.section-head { max-width: 760px; margin: 0 auto clamp(2.5rem,5vw,4rem); text-align: center; }
.section-head h2 { font-size: var(--step-4); margin-bottom: 1.1rem; }
.section-head p { color: var(--ink-soft); font-size: var(--step-1); }
/* Blocco di chiusura pagina: titolo + lead + bottone, centrati.
Sostituisce i clamp() e i margini che erano scritti inline nell'HTML. */
.cta h1 { font-size: var(--step-4); margin-bottom: 1rem; }
.cta h2 { font-size: var(--step-3); margin-bottom: 1rem; }
.cta .lead { margin-bottom: 2rem; }
/* prima sezione di una pagina senza hero (404, legali): scavalca l'header fisso */
.section--top { padding-top: calc(var(--header-h) + 5rem); }
.dark .section-head p, .darker .section-head p { color: var(--cream-dim); }
.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
/* Pillar / value cards */
.card {
background: rgba(255,255,255,.03); border: 1px solid var(--line);
border-radius: 16px; padding: 2.2rem 2rem;
transition: transform .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.dark .card:hover, .darker .card:hover { transform: translateY(-6px); border-color: var(--gold); background: rgba(205,164,52,.06); }
.card--light { background: var(--white); border-color: rgba(0,0,0,.06); border-radius: 16px; box-shadow: 0 10px 30px rgba(31,37,33,.06); }
.card--light:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(31,37,33,.12); }
.card h3 { color: var(--gold); font-size: var(--step-2); margin-bottom: .8rem; }
.card__icon {
width: 52px; height: 52px; margin-bottom: 1.2rem; color: var(--gold);
display: grid; place-items: center;
}
.card__icon svg { width: 34px; height: 34px; }
/* Le icone si disegnano invece di comparire. --len è la lunghezza reale del
tracciato e la calcola main.js; se manca — perché l'utente ha chiesto meno
animazioni o perché il JS non gira — il fallback 0 toglie il tratteggio e
l'icona è già intera. */
.card__icon svg :is(path, circle, line, rect, polyline, polygon) {
stroke-dasharray: var(--len, 0);
stroke-dashoffset: var(--len, 0);
transition: stroke-dashoffset 1.1s var(--ease) .15s;
}
.reveal.in .card__icon svg :is(path, circle, line, rect, polyline, polygon) { stroke-dashoffset: 0; }
/* dopo .card h3, altrimenti a parità di specificità vincerebbe il titolo oro */
.card--light h3 { color: var(--ink); font-size: var(--step-2); margin: .3rem 0 .8rem; }
.card--light p { color: var(--ink-soft); }
/* Photo card — foto in alto, titolo oro, testo (sezione "Il nostro spirito") */
.card--photo {
--card-pad: clamp(1rem, 1.6vw, 1.4rem); /* margine tra bordo scheda, foto e testo */
--card-ratio: 16 / 9; /* proporzione della foto */
display: flex; flex-direction: column;
background: var(--white);
border-color: transparent;
border-radius: 26px;
padding: var(--card-pad) var(--card-pad) calc(var(--card-pad) + .8rem);
box-shadow: 0 18px 40px rgba(0,0,0,.18);
}
.dark .card--photo:hover, .darker .card--photo:hover {
background: var(--white); border-color: transparent;
box-shadow: 0 26px 54px rgba(0,0,0,.26);
}
.card__media { border-radius: 16px; overflow: hidden; background: var(--bg-dark-2); }
.card__media img { width: 100%; aspect-ratio: var(--card-ratio); object-fit: cover; }
.card--photo h3 {
font-family: var(--font-serif); color: var(--gold-ink); /* scheda bianca */
font-size: var(--step-2);
margin: clamp(1.4rem, 2.4vw, 2rem) 0 0;
}
/* corpo in Manrope come tutto il resto del sito: il serif resta al titolo */
.card--photo p {
color: var(--ink-soft);
font-size: 1.02rem; line-height: 1.65;
margin: clamp(.9rem, 1.6vw, 1.3rem) 0 0;
}
/* Split (image + text) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split--reverse .split__media { order: 2; }
/* proporzione fissa: riserva lo spazio prima che la foto arrivi (niente salti di layout)
e tiene allineate le due colonne anche con sorgenti di formato diverso */
.split__media img {
width: 100%; border-radius: 14px; box-shadow: 0 20px 50px rgba(23,27,24,.25);
aspect-ratio: 3 / 2; object-fit: cover;
}
.split__media--tall img { aspect-ratio: 3 / 4; } /* foto verticali */
/* La mappa è un iframe, non un'immagine: le regole di .split__media img non lo
toccano, quindi va vestito a parte. width:100% annulla il width="600" del
codice di incorporamento, che altrimenti sfonda la colonna. */
.split__media--map iframe {
display: block; width: 100%; height: auto;
aspect-ratio: 3 / 2; border: 0;
border-radius: 14px; box-shadow: 0 20px 50px rgba(23,27,24,.25);
}
.split h2 { font-size: var(--step-3); margin-bottom: 1.2rem; }
.split .eyebrow + h2 { margin-top: 0; }
.split p + p { margin-top: 1rem; }
/* Indice degli approfondimenti del programma: numerale fantasma dietro il testo.
È decorativo (aria-hidden nell'HTML), serve solo a rompere la monotonia di
sei split identici uno dopo l'altro. */
.split__text { position: relative; }
.split__text > *:not(.split__num) { position: relative; z-index: 1; }
.split__num {
position: absolute; top: -.42em; left: -.05em; z-index: 0;
font-family: var(--font-serif); font-weight: 600;
font-size: clamp(4.5rem, 9vw, 7.5rem); line-height: 1;
color: var(--gold); opacity: .12;
pointer-events: none; user-select: none;
}
/* La foto si scopre dall'alto invece di salire in dissolvenza: il contenitore
.reveal viene neutralizzato, altrimenti sarebbero due movimenti sovrapposti.
Stessa tendina per la foto a tutta larghezza (.bleed). */
.split__media.reveal, .bleed.reveal { opacity: 1; transform: none; transition: none; }
.split__media.reveal img, .bleed.reveal img { clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--ease); }
.split__media.reveal.in img, .bleed.reveal.in img { clip-path: inset(0 0 0 0); }
/* Racconto con il marchio in filigrana — sezione di solo testo (Chi Siamo).
La Vittoria Alata sta dietro alla colonna, non accanto: è un timbro sulla
carta, non un'illustrazione. Nero all'8% su crema, quindi il testo resta
sopra i 12:1 e l'immagine è decorativa (aria-hidden nell'HTML). */
/* =====================================================================
MANIFESTO — le due sezioni di solo testo (chi-siamo, espositori)
Erano due muri di prosa senza un attacco: si cadeva dentro ai paragrafi
senza occhiello né titolo, e il marchio in filigrana faceva il decoro ma
non faceva da segno. Ora l'apertura è sempre la stessa, sulle due pagine:
── marchio ── emblema fra due filetti
prima frase in serif display, centrata
Ttesto testo corpo a sinistra, con capolettera
Il testo non è stato riscritto: la frase in evidenza è la stessa che prima
apriva il paragrafo, promossa a display, e il capolettera cade sul primo
paragrafo del corpo.
===================================================================== */
.manifesto { position: relative; overflow: hidden; }
.manifesto > .container { position: relative; z-index: 1; }
/* L'emblema: il marchio fra due filetti che sfumano verso l'esterno. Sui fondi
chiari usa marchio-brixiafly-ink.svg (oro scuro), non quello dell'header:
l'oro pieno su crema sta sotto ai 2:1 e il disegno sembrerebbe scolorito.
È decorativo, quindi alt="" e aria-hidden. */
.manifesto__emblema {
display: flex; align-items: center; justify-content: center;
gap: clamp(.9rem, 2.5vw, 1.6rem);
margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.manifesto__emblema::before, .manifesto__emblema::after {
content: ""; flex: 1 1 0; height: 1px; max-width: 9rem;
background: linear-gradient(90deg, transparent, rgba(122,92,16,.45));
}
.manifesto__emblema::after { background: linear-gradient(90deg, rgba(122,92,16,.45), transparent); }
.manifesto__emblema img { flex: none; width: clamp(54px, 7vw, 76px); height: auto; }
/* La frase d'attacco: serif, centrata, un gradino sotto agli h2 di sezione —
è un attacco, non un titolo, e infatti nell'HTML resta un