/* =========================================================================
VALERIO PORTFOLIO — minimal editorial developer portfolio
Foglio unico. Nomenclatura italiana, BEM leggero: blocco / blocco__elemento
/ .is-stato.
Ordine: 1 font · 2 token · 3 reset · 4 griglia · 5 tipografia
6 componenti · 7 testa · 8 home · 9 pagine · 10 piede
11 breakpoint · 12 motion
Regole del sistema, valide ovunque:
- raggio uguale ovunque (--r 16px, --r-s 8px sui dettagli): lo spigolo si
smussa, il blocco resta duro. A tenere il registro sono il contorno pieno
e l'ombra a blur zero, non l'angolo vivo;
- un solo gesto per quello che si puo' premere: l'oggetto scende NELLA sua
ombra (--premi*), non si solleva. Quello che non e' cliccabile non ha
gesto;
- contorno pieno di 3px in --line, e ombra netta a blur zero. Nessuna
ombra morbida, nessun bagliore, nessun gradiente;
- il colore non fa da fondo alle sezioni. Le sezioni stanno su --bg, e i
colori della palette servono a numeri, marcatori, badge e stati;
- ogni oggetto colorato si porta dietro il proprio contrasto: fondo della
palette, contorno nero e testo #111. Vale identico nei due temi, perche'
le tinte non cambiano fra chiaro e scuro;
- asimmetria in grande (sfalsamenti, rotazioni minime), allineamento
meccanico in piccolo: etichette, campi e bottoni non ballano mai.
========================================================================= */
/* ---------- 1. FONT --------------------------------------------------- */
/* Satoshi porta la voce editoriale dei titoli; IBM Plex Sans mantiene
leggibili testi e interfaccia. Entrambe sono variabili e self-hosted. */
@font-face {
font-family: "Satoshi";
src: url("../fonts/Satoshi-Variable.woff2") format("woff2");
font-weight: 300 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "IBM Plex Sans";
src: url("../fonts/IBMPlexSans-Variable.woff2") format("woff2");
font-weight: 100 700;
font-style: normal;
font-display: swap;
}
/* ---------- 2. TOKEN -------------------------------------------------- */
:root {
color-scheme: light;
/* --- sistema editoriale, tema chiaro --- */
--color-bg: #F3F0E8;
--color-surface: #FCFBF7;
--color-text: #1B1B1B;
--color-muted: #67645F;
--color-border: #2E2E30;
--color-blue: #79CFE6;
--color-yellow: #FFD756;
--color-mint: #BFE8D8;
--color-lilac: #C9B8F4;
--color-coral: #F29B83;
/* Alias temporanei: i componenti storici migrano senza perdere struttura. */
--bg: var(--color-bg);
--surface: var(--color-surface);
--text: var(--color-text);
--text-muted: var(--color-muted);
--line: var(--color-border);
--ombra-colore: var(--color-border);
/* PALETTE — tre accenti principali e due tinte di supporto. Il colore
resta confinato a marcatori, stati e piccoli accenti: non diventa il
fondo generico delle sezioni.
lime evidenza
rosa stato / UI
viola comando / sviluppo
giallo accessibilita' nel Metodo
azzurro performance e SEO
Tutte e cinque reggono #111111 come testo normale. Sul viola il nero
arriva a 5.07:1, mentre il bianco si ferma a 3.72:1: anche bottoni e CTA
usano quindi l'inchiostro scuro. */
--lime: var(--color-mint);
--rosa: var(--color-blue);
--viola: var(--color-blue);
--giallo: var(--color-yellow);
--azzurro: var(--color-blue);
/* VELI — gli accenti principali a bassa opacita', per stati che devono
colorare senza pesare.
Sono rgba e non colori pieni apposta: sopra la carta danno una tinta
tenue, sopra il fondo notturno si scuriscono da soli e restano tenui
anche li', senza bisogno di una seconda serie di valori. */
--velo-lime: rgba(183, 239, 57, .42);
--velo-viola: rgba(143, 108, 246, .30);
--velo-rosa: rgba(242, 121, 147, .34);
/* Misurati, non stimati: ogni tinta si porta il testo che regge. */
--on-lime: #111111; /* 13.86:1 */
--on-rosa: #111111; /* 7.13:1 */
--on-viola: #111111; /* 5.07:1 */
--on-giallo: #111111; /* 16.53:1 */
--on-azzurro: #111111; /* 10.97:1 */
--accento: var(--color-yellow); /* evidenza */
--on-accento: var(--on-lime);
--comando: var(--color-blue); /* azione */
--on-comando: var(--on-viola);
--stato: var(--color-mint); /* in corso, conferme */
--on-stato: var(--on-rosa);
/* Il focus e' un ANELLO fuori dall'oggetto, mentre lo stato attivo e' una
CAMPITURA dentro: forma diversa, quindi non si confondono anche a
parita' di tinta. */
--focus: #16718B;
/* Il viola come INCHIOSTRO, non come campitura. #7B52F6 e' tarato per
stare DIETRO a un testo, non per esserlo: scritto sul fondo si ferma a
4.36:1, sotto la soglia. Per scrivere serve la versione scura in chiaro
(6.55:1) e quella chiara al buio (6.85:1). Stessa tinta, due valori, un
ruolo solo. */
--viola-testo: #12667D;
--velo: rgba(0, 0, 0, .05);
--griglia: rgba(0, 0, 0, .055);
/* --- tipografia --- */
--font-display: "Satoshi", "Helvetica Neue", Arial, sans-serif;
--font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
--f-display: var(--font-display);
--f-corpo: var(--font-body);
/* Il carattere dei dati: stessa famiglia del display, altro trattamento. */
--f-dato: var(--f-display);
/* L'unico monospace del sito, e vive in un posto solo: la finestrella di
codice della hero. Font di sistema, nessun file da scaricare — dentro a
una scatola da 250px conta la forma della riga, non la personalita' del
carattere. */
--f-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
/* Tarato sulla colonna vera, non a occhio. In minuscolo "Frontend,
WordPress" misura 11.21em (in maiuscolo erano 14.06: togliere il
maiuscolo ha liberato un quarto della riga, e il corpo e' salito di
conseguenza). La colonna di copy vale 0.574 del contenitore, cioe'
0.574 x (100vw - 60px): da qui il corpo massimo, 0.574 / 9.98 = 0.0575
per pixel di finestra, meno un margine di sicurezza. */
/* Gli estremi BASSI di queste curve sono saliti: sono quelli che valgono
sul telefono, dove il testo era tarato sul minimo di leggibilita' e non
su quanto si legge comodo a un braccio di distanza. Sopra i 700px circa
le curve incrociano i valori di prima, quindi il desktop non cambia. */
--t-h1: clamp(2.125rem, 5.6vw - 3.4px, 6rem);
--t-h2: clamp(1.875rem, 1rem + 2.4vw, 3.25rem);
--t-h3: clamp(1.1875rem, 1rem + .45vw, 1.375rem);
--t-lead: clamp(1.125rem, 1rem + .35vw, 1.25rem);
--t-corpo: clamp(1.0625rem, .96rem + .22vw, 1.0625rem);
--t-ui: 0.875rem;
--t-label: 0.75rem;
--t-micro: 0.6875rem;
--lh-display: 1;
--lh-corpo: 1.55;
/* CURVE
Le easing native del browser sono deboli: `ease` parte e finisce quasi
lineare, e su un gesto da 120ms non si sente. Due curve sole, forti, e
una regola per sceglierle: quello che ENTRA o si SOLLEVA usa --ease-out
(parte veloce, cioe' risponde subito); quello che cambia colore o si
scambia sul posto usa --ease-mite. Niente ease-in: comincia piano
proprio nell'istante in cui si sta guardando. */
--ease-out: cubic-bezier(.22, 1, .36, 1);
--ease-mite: cubic-bezier(.4, 0, .2, 1);
/* --- misure --- */
--b: 1px;
/* Le superfici editoriali grandi (skills, progetti, card blog) usano un
filo piu' leggero del resto dell'interfaccia. Il brutalismo resta sui
controlli piccoli; le card grandi respirano e non sembrano pulsanti. */
--b-card: 1px;
--ombra-card-hover: 2px 2px 0 0 var(--ombra-colore);
/* Raggio delle scatole, e va solo sugli OGGETTI: schede, immagini,
bottoni. Le sezioni editoriali non hanno raggio, perche' non hanno
campitura ne' contorno — quello che le separa e' un filo, non una
scatola.
A 6px il contorno da 3px faceva ancora angolo vivo; a 16px la scheda
cominciava a somigliare a un UI kit. 12px e' il punto in cui lo spigolo
e' smussato ma la scatola resta dura: a tenerla su sono il contorno
pieno e l'ombra a blur zero, non l'angolo. Il raggio piccolo serve a
badge e targhette, che piu' grandi diventano pastiglie. */
--r: 8px;
--r-s: 4px;
/* OMBRE
Offset netto, blur zero, stessa tinta del contorno. Quattro gradini:
dettagli, standard, hover/pannelli, eroe. */
--ombra-s: 2px 2px 0 0 var(--ombra-colore);
--ombra: 3px 3px 0 0 var(--ombra-colore);
--ombra-l: 4px 4px 0 0 var(--ombra-colore);
--ombra-xl: 6px 6px 0 0 var(--ombra-colore);
/* PRESSIONE
Un oggetto premuto scende NELLA sua ombra: trasla esattamente
dell'offset e l'ombra sparisce. Se i due numeri non coincidono
l'oggetto scivola invece di schiacciarsi, ed e' il dettaglio che fa la
differenza fra un bottone neubrutalista e un bottone con un'ombra. */
--premi-xs: translate(2px, 2px);
--premi-s: translate(3px, 3px);
--premi: translate(5px, 5px);
/* Ombra sempre nera, per gli oggetti che stanno su una campitura della
palette: li' il bianco caldo della notturna sparirebbe. Sono token e non
valori scritti a mano perche' devono accorciarsi con gli altri sotto i
900px, altrimenti la pressione non copre piu' l'ombra. */
--ombra-n: 5px 5px 0 0 #000;
--ombra-n-s: 3px 3px 0 0 #000;
/* Contenitore unico del sito: calc(100% - 60px), max 2200px. */
--gutter: 30px;
--max: 2200px;
--colonna: clamp(20px, 2.2vw, 40px);
--sezione: clamp(72px, 8vw, 128px);
--h-testa: 72px;
}
/* TEMA SCURO
Il contorno e l'ombra si ribaltano: da nero a bianco caldo. E' l'unico modo
onesto di portare il brutalismo al buio, perche' senza il contorno gli
oggetti smettono di esistere. Le tinte della palette restano identiche: sono
oggetti che si portano dietro il proprio contrasto. */
[data-theme="dark"] {
color-scheme: dark;
--color-bg: #111111;
--color-surface: #191919;
--color-text: #F3F0E8;
--color-muted: #B8B4AA;
--color-border: #383838;
--bg: var(--color-bg);
--surface: var(--color-surface);
--text: var(--color-text);
--text-muted: var(--color-muted);
--line: var(--color-border);
--ombra-colore: var(--color-border);
/* Al buio il viola pieno si ferma a 3.89:1: per scrivere serve schiarirlo. */
--viola-testo: #79CFE6;
--velo: rgba(245, 244, 240, .07);
--griglia: rgba(245, 244, 240, .065);
}
/* ---------- 3. RESET -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-padding-top: calc(var(--h-testa) + 24px);
}
body.admin-bar { scroll-padding-top: calc(var(--h-testa) + 56px); }
body {
min-width: 320px;
margin: 0;
overflow-x: clip;
background: var(--bg);
color: var(--text);
font-family: var(--f-corpo);
font-size: var(--t-corpo);
font-weight: 400;
line-height: var(--lh-corpo);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-synthesis-weight: none;
}
/* Il cambio di tema si accompagna: tutto quello che cambia campitura o
contorno lo fa nello stesso tempo, altrimenti la pagina si ricolora a
scatti diversi. */
body, .testa, .nav-mobile, section, footer, .tool, .nota__link,
.tema-btn, .scheda-lavoro__media, .vicini a {
transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
/* Il raggio sta sugli oggetti, non sui contenitori di sezione. Prima la
stessa regola lo dava anche a body, section e footer: non si vedeva —
quelle non hanno campitura — ma era un raggio ereditato da mezza pagina,
e bastava una sezione con un fondo per vederselo comparire. */
/* .nota__link e' fuori di proposito: in forma di ELENCO il suo hover e' una
campitura a tutta riga, e con il raggio gli angoli tondi andavano a
sfiorare il filo nero del divisore — due geometrie diverse a due pixel
l'una dall'altra. Da riga la campitura e' un rettangolo a filo; il raggio
ce l'ha solo la versione a scheda, che lo dichiara per conto suo. */
.tool, .tema-btn, .scheda-lavoro__media, .vicini a {
border-radius: var(--r);
}
img, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
::selection { background: var(--accento); color: var(--on-accento); }
/* Focus: contorno viola a 3px, sempre lo stesso, mai il colore del
componente. Cosi' "ho il focus" e "sono attivo" non si confondono mai. */
:focus-visible {
outline: var(--b) solid var(--focus);
outline-offset: 3px;
}
/* Foglio a quadretti: lo porta ogni sezione, non il corpo della pagina.
Attaccato al corpo e fissato al viewport scorreva sotto al contenuto come
una texture staccata; qui ogni sezione ha il suo foglio, che parte dal suo
bordo alto e finisce dove finisce lei. Le superfici (--surface) sono opache
e ci si appoggiano sopra. */
main > section,
.piede,
.pagina-testa,
.archivio {
background-image:
linear-gradient(var(--griglia) 1px, transparent 1px),
linear-gradient(90deg, var(--griglia) 1px, transparent 1px);
background-size: 22px 22px;
}
/* ---------- 4. GRIGLIA ------------------------------------------------ */
.vv-contenitore {
width: calc(100% - var(--gutter) * 2);
max-width: var(--max);
margin-inline: auto;
}
.griglia {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--colonna);
row-gap: clamp(32px, 4vw, 64px);
}
.contenuto { display: block; }
.screen-reader-text {
position: absolute; width: 1px; height: 1px; padding: 0;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.salta {
position: fixed; z-index: 999; top: -100px; left: 16px;
padding: 12px 18px;
background: var(--accento); color: var(--on-accento);
border: var(--b) solid #000;
box-shadow: var(--ombra-s);
font-family: var(--f-dato); font-size: var(--t-label); font-weight: 700;
text-transform: uppercase; letter-spacing: .06em;
border-radius: var(--r);
}
.salta:focus { top: 12px; }
/* ---------- 5. TIPOGRAFIA --------------------------------------------- */
/* Satoshi costruisce la gerarchia con scala e pesi controllati. */
.display {
font-size: var(--t-h2);
font-family: var(--f-display);
font-weight: 700;
line-height: 1.04;
letter-spacing: -.02em;
text-wrap: balance;
}
.display--xl {
font-size: var(--t-h1);
font-family: var(--f-display);
font-weight: 700;
line-height: var(--lh-display);
letter-spacing: -.025em;
/* Due righe sul desktop, mai tre. La riga lunga ("Frontend, WordPress")
misura 9.98em: sotto quella soglia la parola va a capo e il titolo
diventa di tre righe. 10.6em lasciano il margine che serve senza
permettere a una terza parola di salire (servirebbero 11.2em). */
max-width: 10.6em;
}
.display--m {
font-size: clamp(1.5rem, 1rem + 1.7vw, 2.25rem);
font-family: var(--f-display);
font-weight: 700;
line-height: 1.04;
letter-spacing: -.02em;
text-wrap: balance;
max-width: 20ch;
}
/* L'H1 di una PAGINA e' il titolo di quella pagina, non un sottotitolo di
qualcos'altro: deve stare sulla stessa scala di quello della hero. A
.display--m "Progetti" usciva a 36px, cioe' piu' piccolo dell'h2 di una
sezione della home, e la gerarchia si leggeva al contrario.
Non e' --t-h1 secco ma un filo sotto: la hero ha una colonna da sette
dodicesimi e una riga sola, queste pagine hanno tutta la larghezza e a
96px un titolo corto come "Contatti" diventa un cartellone. */
.display--pagina {
font-size: clamp(2.5rem, 1.4rem + 4.4vw, 5rem);
font-family: var(--f-display);
font-weight: 700;
line-height: var(--lh-display);
letter-spacing: -.03em;
text-wrap: balance;
max-width: 14ch;
}
/* Etichetta tecnica: stessa famiglia del titolo, altro trattamento.
Piccola, maiuscola e molto spaziata: senza il monospazio a dire "questo e'
un dato", il lavoro lo deve fare la spaziatura. */
.etichetta {
display: flex;
align-items: center;
gap: .7em;
font-family: var(--f-dato);
font-size: var(--t-label);
font-weight: 700;
letter-spacing: .12em;
line-height: 1.3;
text-transform: uppercase;
color: var(--text-muted);
}
.etichetta--testo { color: var(--text); }
.etichetta a { text-decoration: underline; text-underline-offset: 3px; }
/* Il numero di sezione e' un blocchetto di colore, non un testo colorato:
fondo dalla palette, testo nero, contorno nero, ombra corta. */
.etichetta__n {
padding: 3px 8px;
background: var(--accento);
color: var(--on-accento);
border: 2px solid #000;
box-shadow: 2px 2px 0 0 #000;
font-variant-numeric: tabular-nums;
letter-spacing: .02em;
border-radius: var(--r-s);
}
.etichetta__punto {
width: 10px; height: 10px;
flex: none;
background: var(--stato);
border: 2px solid #000;
border-radius: var(--r-s);
}
.testo-lead {
font-size: var(--t-lead);
line-height: 1.5;
max-width: 52ch;
text-wrap: pretty;
min-height: 3em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
p { text-wrap: pretty; }
/* Sottolineatura a pennarello: il modo in cui la palette entra nel testo
corrente senza toccare il contrasto del testo stesso. E' una barra SOTTO
la riga, non dietro: per questo puo' usare anche il viola, che come
campitura di un testo nero non passerebbe. Lime di default (evidenza),
viola dove il ruolo e' "questo e' il punto". */
.segno--comando { --accento: var(--comando); }
/* Marcatore pieno: un blocco di colore dietro alla frase, non una riga
sotto. Serve dove il testo e' lungo e va scremato a colpo d'occhio. */
.marcato {
padding: .1em .35em;
background: var(--accento);
color: var(--on-accento);
border-radius: var(--r-s);
/* Il filo nero e l'ombra netta sono la firma della hero: le tessere
accanto al modello sono fatte cosi'. Il marcatore le aveva perse ed
era l'unico oggetto colorato del sito senza contorno — una campitura
piatta in mezzo a un sistema di blocchi bordati. Sono due ombre e non
un border perche' box-shadow non occupa spazio: il filo puo' comparire
senza spostare di un pixel la riga in cui il marcatore vive. */
box-shadow: 0 0 0 2px var(--line), 3px 3px 0 0 var(--line);
/* Il filo e l'ombra escono dal riquadro del testo e si mangiano lo spazio
prima e dopo la parola: senza questi due margini il marcatore finisce
appiccicato alla parola che segue. Sono esattamente quanto sporgono le
due ombre, 2px a sinistra e 2+3 a destra. */
margin-inline: 2px 5px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
font-weight: 700;
}
/* Due soli marcatori: lime e rosa tengono il testo scuro nettamente leggibile
e restano gli accenti editoriali principali del Manifesto. */
.marcato--lime { background: var(--lime); color: var(--on-lime); }
.marcato--rosa { background: var(--rosa); color: var(--on-rosa); }
.segno {
background-image: linear-gradient(var(--accento), var(--accento));
background-repeat: no-repeat;
background-position: 0 88%;
background-size: 100% .34em;
padding-inline: .06em;
}
/* --- Icone ---------------------------------------------------------------
Una famiglia sola per tutto il sito (Phosphor Bold, inline). La misura e'
in em e non in pixel: l'icona segue il corpo del testo che accompagna,
quindi la stessa freccia sta bene dentro a un bottone da 12px e dentro a
una riga di elenco da 21 senza una regola per ciascuno.
flex:none perche' quasi sempre sta accanto a del testo dentro a un flex,
e senza si schiaccerebbe quando il testo va a capo. */
.icona {
width: 1em;
height: 1em;
flex: none;
/* Allineata alla riga di base del testo, non al fondo della scatola. */
vertical-align: -.14em;
}
/* ---------- 6. COMPONENTI --------------------------------------------- */
/* Il gesto del sistema, uno solo: l'oggetto premuto scende NELLA sua ombra.
Trasla esattamente dell'offset e l'ombra sparisce. */
.bottone {
display: inline-flex;
align-items: center;
gap: .6em;
min-height: 52px;
padding: 13px 24px;
background: var(--comando);
color: var(--on-comando);
border: var(--b) solid #000;
box-shadow: var(--ombra-n);
font-family: var(--f-dato);
font-size: var(--t-label);
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
border-radius: var(--r);
}
/* Premuto, non sollevato: l'oggetto scende nella sua ombra. Era il contrario
— saliva di 2px e l'ombra cresceva — e il gesto raccontava una cosa che
nel resto del sistema non succede mai. */
.bottone:hover, .bottone:focus-visible, .bottone:active { transform: var(--premi); box-shadow: 0 0 0 0 #000; }
/* Il comando che APRE la pagina e' lime, quello che la CHIUDE resta viola:
il blocco della CTA in fondo e' viola pieno, e un bottone viola dentro a
una hero che punta a quel blocco diceva la stessa cosa due volte. Il lime
e' gia' l'evidenza del sistema (numeri di sezione, marcatori, tab attiva)
e regge il nero a 15.94:1, quindi non serve una tinta nuova: serve usare
quella giusta. Resta un solo bottone lime in tutto il sito. */
.bottone--evidenza {
background: var(--accento);
color: var(--on-accento);
}
.bottone--vuoto {
background: var(--surface);
color: var(--text);
border-color: var(--line);
box-shadow: var(--ombra);
}
.bottone--vuoto:hover, .bottone--vuoto:focus-visible {
background: var(--comando);
color: var(--on-comando);
border-color: #000;
box-shadow: 0 0 0 0 #000;
}
.bottoni { display: flex; flex-wrap: wrap; gap: 14px; }
.targhetta {
display: inline-block;
padding: 5px 10px;
background: var(--surface);
border: 2px solid var(--line);
box-shadow: 2px 2px 0 0 var(--ombra-colore);
font-family: var(--f-dato);
font-size: var(--t-micro);
font-weight: 700;
letter-spacing: .12em;
line-height: 1.4;
text-transform: uppercase;
white-space: nowrap;
border-radius: var(--r-s);
}
.targhetta--attiva { background: var(--accento); color: var(--on-accento); border-color: #000; box-shadow: 2px 2px 0 0 #000; }
/* Testata di sezione: sempre lo stesso impianto, sempre sulle stesse linee
di griglia. E' quello che tiene insieme una pagina fatta di blocchi duri. */
.sezione__testa {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--colonna);
row-gap: clamp(16px, 2vw, 28px);
align-items: end;
padding-block: var(--sezione) clamp(32px, 3.6vw, 60px);
}
.sezione__titolo { grid-column: span 7; }
.sezione__titolo .etichetta { margin-bottom: clamp(16px, 1.8vw, 26px); }
.sezione__lato { grid-column: 9 / -1; justify-self: start; align-self: end; }
.sezione__lato--azione { justify-self: end; }
.sezione__nota {
margin-top: clamp(14px, 1.6vw, 22px);
max-width: 46ch;
/* Filo viola: accompagna ogni testata di sezione e da' al viola un
ruolo anche fuori dai comandi. */
padding-left: clamp(14px, 1.4vw, 20px);
border-left: 5px solid var(--comando);
font-size: var(--t-lead);
line-height: 1.5;
}
.avviso {
padding: 20px 22px;
background: var(--accento);
color: var(--on-accento);
border: var(--b) solid #000;
box-shadow: var(--ombra-s);
font-size: 1rem;
border-radius: var(--r);
}
.vuoto { padding-block: clamp(40px, 6vw, 80px); color: var(--text-muted); font-size: var(--t-lead); }
/* ---------- 7. TESTA -------------------------------------------------- */
/* Niente vetro smerigliato: fondo pieno e una trave nera sotto. */
/* La testata si ritira mentre si scende e torna appena si risale: mentre
leggi non ruba la riga in cima, e quando serve e' gia' li'. La classe la
mette site.js; senza JavaScript resta semplicemente sempre visibile. */
.testa {
position: sticky;
top: 0;
z-index: 50;
background: var(--bg);
border-bottom: var(--b) solid var(--line);
transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.testa--nascosta { transform: translateY(-100%); }
body.admin-bar .testa--nascosta { transform: translateY(calc(-100% - 32px)); }
body.admin-bar .testa { top: 32px; }
.testa__interno {
display: flex;
align-items: center;
gap: clamp(8px, 1.4vw, 20px);
min-height: var(--h-testa);
}
.marchio { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; }
.marchio__sigla {
display: grid;
place-items: center;
width: 38px; height: 38px;
background: var(--text);
color: var(--bg);
border: var(--b) solid var(--line);
box-shadow: var(--ombra-s);
font-family: var(--f-dato);
font-size: .8125rem;
font-weight: 700;
letter-spacing: 0;
transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease;
/* Quadrato smussato, non pastiglia: a 16px su 44px il marchio diventava
un cerchio, e un cerchio in mezzo a scatole squadrate e' un altro
sistema. */
border-radius: var(--r-s);
}
.marchio:hover .marchio__sigla {
background: var(--accento);
color: var(--on-accento);
transform: var(--premi-s);
box-shadow: 0 0 0 0 transparent;
}
.marchio__nome {
font-family: var(--f-display);
font-size: .9375rem;
font-weight: 700;
letter-spacing: -.01em;
}
.nav__lista { display: flex; align-items: center; gap: clamp(4px, .8vw, 12px); }
.nav__lista a {
display: block;
padding: 8px 12px;
border: 2px solid transparent;
font-family: var(--f-dato);
font-size: var(--t-label);
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
transition: background-color .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease, transform .12s ease;
border-radius: var(--r-s);
}
.nav__lista a:hover, .nav__lista a:focus-visible,
.nav__lista .current-menu-item > a, .nav__lista [aria-current="page"] {
background: var(--comando);
color: var(--on-comando);
border-color: #000;
}
/* Avanzamento di lettura: animazione scroll-driven nativa, zero JavaScript. */
/* Niente bordo proprio: la trave sotto all'intestazione e' gia' quella di
.testa, e sommandole veniva una doppia riga non voluta. */
.avanzamento { display: none; height: 6px; background: var(--bg); }
.avanzamento span {
display: block;
height: 100%;
background: var(--accento);
transform: scaleX(0);
transform-origin: 0 50%;
}
@supports (animation-timeline: scroll()) {
.avanzamento { display: block; }
.avanzamento span { animation: avanza linear both; animation-timeline: scroll(root block); }
}
@keyframes avanza { to { transform: scaleX(1); } }
.tema-btn, .nav-btn {
display: grid;
place-items: center;
flex: none;
width: 44px; height: 44px;
color: var(--text);
background: var(--surface);
border: var(--b) solid var(--line);
box-shadow: var(--ombra-s);
transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease;
border-radius: var(--r);
}
.tema-btn svg { width: 18px; height: 18px; }
.tema-btn:hover, .nav-btn:hover, .tema-btn:active, .nav-btn:active {
background: var(--comando);
color: var(--on-comando);
border-color: #000;
transform: var(--premi-s);
box-shadow: 0 0 0 0 #000;
}
.nav-btn { display: none; }
.nav-btn__icona { display: grid; gap: 4px; width: 18px; }
.nav-btn__icona i { display: block; height: 3px; background: currentColor; transition: transform .16s ease; }
.nav-btn[aria-expanded="true"] { background: var(--comando); color: var(--on-comando); border-color: #000; }
.nav-btn[aria-expanded="true"] .nav-btn__icona i:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-btn[aria-expanded="true"] .nav-btn__icona i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.nav-mobile {
background: var(--bg);
border-top: var(--b) solid var(--line);
animation: pannello .16s ease-out;
}
.nav-mobile[hidden] { display: none; }
.nav-mobile__lista a {
display: flex;
align-items: center;
min-height: 64px;
padding: 10px 12px;
border-bottom: var(--b) solid var(--line);
font-family: var(--f-display);
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -.02em;
}
.nav-mobile__lista a:hover { background: var(--comando); color: var(--on-comando); }
.nav-mobile__email {
display: inline-block;
padding: 20px 0 24px;
color: var(--text-muted);
font-family: var(--f-dato);
font-size: var(--t-label);
text-decoration: underline;
text-underline-offset: 4px;
}
@keyframes pannello { from { opacity: 0; transform: translateY(-6px); } }
/* ---------- 8. HOME --------------------------------------------------- */
/* --- Hero: 7 colonne di copy, 5 di visuale --- */
.hero {
padding-block: clamp(48px, 6.5vw, 112px) clamp(56px, 7vw, 124px);
}
.hero__griglia { align-items: center; row-gap: clamp(40px, 5vw, 64px); }
.hero__copy { grid-column: span 7; }
.hero__visuale { position: relative; grid-column: 8 / -1; }
/* Una tessera sola, appoggiata sopra alla cella del modello. Ce n'erano
quattro: con la barra WebGL, l'adesivo "Trascinami" e il riquadro delle
iniziali facevano sette oggetti bordati in una schermata sola, e la hero
non respirava piu'. Resta questa, che porta il colore dove il resto della
colonna e' nero su crema. Sotto i 640px sparisce: su schermo stretto non
c'e' margine in cui sporgere. */
.deco {
position: absolute;
z-index: 2;
display: grid;
place-items: center;
padding: 10px 14px;
border: var(--b) solid #000;
box-shadow: 5px 5px 0 0 #000;
border-radius: var(--r);
font-family: var(--f-dato);
font-size: clamp(.9rem, .8rem + .4vw, 1.15rem);
font-weight: 700;
letter-spacing: .02em;
color: var(--on-accento);
pointer-events: none;
}
/* Il badge sta a DESTRA, agganciato al filo con uno sporgere misurato e non
con un -28px scelto a occhio: la colonna del modello arriva al filo del
contenitore, e sporgere di meta' (28px) piu' i 5px d'ombra faceva
scrollare la pagina di lato a 1440 e a 1280. Cosi' sporge sempre 12px
meno del margine di pagina, ombra compresa.
Prima qui c'era il terminale >_ e il badge stava a sinistra: due glifi di
codice affiancati dicevano la stessa cosa due volte, e a sinistra ora c'e'
una finestrella che quella cosa la mostra invece di alluderci. */
.deco--codice {
top: 15%;
right: calc(12px - var(--gutter));
background: var(--accento);
color: var(--on-accento);
/* La spaziatura estesa serviva alla parola in maiuscoletto: su tre segni
di codice allarga solo le fessure. */
letter-spacing: 0;
rotate: 5deg;
}
/* --- La finestrella di codice --------------------------------------------
Costruita con i pezzi del sistema e non con pezzi nuovi: contorno nero,
raggio --r, ombra netta, e in cima gli stessi tre quadretti della cornice
del modello. Il fondo viola e' l'unica superficie piena della hero, come
il blocco della CTA e' l'unica in fondo alla pagina.
Sporge dal fianco SINISTRO della colonna: li' c'e' la gronda fra le due
colonne, quindi puo' uscire senza rischiare l'overflow.
Il testo dentro usa l'inchiostro #111, che sul nuovo viola arriva a
5.07:1; la sintassi resta monocromatica e il commento si distingue in
corsivo, che e' come lo si e' sempre distinto prima che esistessero gli
editor a colori.
Lime, rosa e giallo restano dentro alla finestrella, ma nei tre
quadretti della barra, dove il fondo e' chiaro e reggono benissimo. */
.editor {
position: absolute;
z-index: 3;
/* Quanto sporge a sinistra non e' un valore a occhio: la figura dentro
alla finestra e' stata misurata sullo screenshot del sito vero, e dal
busto ai piedi occupa il 39-58% della larghezza della cornice. La
finestrella deve chiudere PRIMA di quel 39%, o le finisce sulla gamba.
Con questo scarto il suo filo destro si ferma intorno al 36-37% a ogni
larghezza da 1024 in su. Sporge verso l'interno della pagina, nella
gronda fra le due colonne, quindi non puo' causare overflow. */
left: clamp(-84px, -6.2vw, -34px);
bottom: 9%;
width: clamp(196px, 19vw, 286px);
overflow: hidden;
background: var(--comando);
color: var(--on-comando);
border: var(--b) solid #000;
box-shadow: 5px 5px 0 0 #000;
border-radius: var(--r);
rotate: -2deg;
pointer-events: none;
}
/* La barra e' carta FISSA, non var(--bg): la finestrella e' un oggetto a
campitura piena come le tessere e i bottoni, e quelli non si ribaltano
col tema — hanno gia' il contorno in #000 per la stessa ragione. Con
var(--bg) al buio la barra diventava quasi il colore della pagina e la
scheda sembrava bucata in cima. */
.editor__barra {
display: flex;
align-items: center;
gap: 6px;
height: 28px;
padding-inline: 11px;
background: #F3F0E8;
border-bottom: var(--b) solid #000;
}
.editor__barra i { width: 8px; height: 8px; border: 2px solid #000; border-radius: 2px; }
.editor__barra i:nth-child(1) { background: var(--lime); }
.editor__barra i:nth-child(2) { background: var(--rosa); }
.editor__barra i:nth-child(3) { background: var(--giallo); }
.editor__codice {
margin: 0;
padding: 14px 15px 16px;
font-family: var(--f-mono);
/* Non e' testo da leggere ma da riconoscere: sotto gli 11px diventa una
texture, sopra i 13 la scatola cresce e copre il modello. */
font-size: clamp(11px, .78vw, 13px);
font-weight: 600;
line-height: 1.6;
white-space: pre;
}
.editor__nota { font-style: italic; }
.editor__chiave { font-weight: 700; }
.hero__saluto {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: clamp(24px, 2.6vw, 36px);
}
/* Il nome in viola: distingue il saluto dal titolo senza metterci intorno
una cornice. Prima accanto c'era un riquadro con le iniziali, cioe'
un altro blocco bordato sopra a un titolo gia' grosso. */
.hero__saluto-testo { color: var(--viola-testo); }
/* La manina del saluto: l'unico emoji del sito, e saluta davvero. Grande
quanto una riga di testo, non quanto l'etichetta accanto: in em ereditava
dal paragrafo e a 41px diventava lui il primo elemento della hero.
Saluta TRE volte e si ferma. Era in loop infinito: un elemento che si
muove per sempre tiene sveglio il compositore per tutta la sessione e,
dopo il terzo giro, non e' piu' personalita' — e' un tic. */
.saluto {
display: inline-block;
line-height: 1;
font-size: clamp(1.5rem, 1.3rem + .6vw, 2rem);
transform-origin: 70% 80%;
animation: saluta 3.2s ease-in-out 1s 3;
}
@keyframes saluta {
0%, 60%, 100% { transform: rotate(0deg); }
65% { transform: rotate(14deg); }
70% { transform: rotate(-8deg); }
75% { transform: rotate(14deg); }
80% { transform: rotate(-4deg); }
85% { transform: rotate(10deg); }
}
.hero__intro { margin-top: clamp(22px, 2.4vw, 32px); max-width: 50ch; }
.hero__azioni {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px clamp(14px, 1.6vw, 20px);
margin-top: clamp(28px, 3vw, 40px);
}
.hero__social { display: flex; align-items: center; gap: 10px; }
.hero__social a {
display: grid;
place-items: center;
width: 46px; height: 46px;
color: var(--text);
background: var(--surface);
border: var(--b) solid var(--line);
box-shadow: var(--ombra-s);
transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease;
border-radius: var(--r);
}
.hero__social svg { width: 19px; height: 19px; }
.hero__social a:hover, .hero__social a:focus-visible {
background: var(--comando);
color: var(--on-comando);
border-color: #000;
transform: var(--premi-s);
box-shadow: 0 0 0 0 #000;
}
/* --- Modello 3D --- */
.modello {
position: relative;
display: flex;
flex-direction: column;
background: var(--surface);
border: var(--b) solid var(--line);
box-shadow: var(--ombra-xl);
border-radius: var(--r);
}
/* Tre quadretti al posto di tre etichette: la cornice resta una cornice, ma
smette di descrivere a parole quello che il modello fa da solo. E' anche
piu' bassa, e quei quindici pixel vanno al modello. */
.modello__barra {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-bottom: var(--b) solid var(--line);
}
.modello__barra i { width: 11px; height: 11px; border: 2px solid var(--line); border-radius: 3px; }
.modello__barra i:nth-child(1) { background: var(--lime); }
.modello__barra i:nth-child(2) { background: var(--stato); }
.modello__barra i:nth-child(3) { background: var(--comando); }
/* Il raggio interno e' quello esterno meno il contorno. Senza, gli spigoli
vivi di questo riquadro pieno spuntavano sopra alla curva nera del
riquadro che lo contiene: si vedeva a 16px, non si vedeva a 6px. */
.modello3d {
position: relative;
/* Il modello e' il protagonista della meta' destra: il riquadro si allunga
e prende piu' schermo in verticale. Era 60svh e la figura galleggiava in
mezzo a un terzo di vuoto. */
aspect-ratio: 5 / 6.4;
max-height: 74svh;
overflow: hidden;
background: var(--surface);
border-radius: 0 0 calc(var(--r) - var(--b)) calc(var(--r) - var(--b));
}
.modello3d canvas { width: 100%; height: 100%; touch-action: pan-y; }
.modello3d__stato {
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding: 20px;
color: var(--text-muted);
font-family: var(--f-dato);
font-size: var(--t-micro);
font-weight: 700;
letter-spacing: .12em;
text-align: center;
text-transform: uppercase;
}
.modello3d.is-caricato .modello3d__stato { display: none; }
/* --- Stack: tre tab da quattro voci --- */
/* Dodici schede tutte aperte erano leggibili una per una, ma come blocco
unico chiedevano una schermata di scorrimento per dire una cosa sola. Con
tre gruppi da quattro il pannello e' sempre una riga. */
/* Il distacco fra sezioni appartiene alla testata che segue. Queste sezioni
non aggiungono una seconda coda uguale, altrimenti due token consecutivi
raddoppiano il vuoto fra contenuto e titolo successivo. */
.tools, .metodo, .percorso { padding-bottom: 0; }
.tools__barra {
display: flex;
gap: clamp(8px, 1vw, 14px);
margin-bottom: clamp(24px, 2.8vw, 40px);
padding-bottom: 6px;
overflow-x: auto;
scrollbar-width: none;
}
.tools__barra::-webkit-scrollbar { display: none; }
.tools__tab {
flex: none;
padding: 13px clamp(16px, 1.6vw, 22px);
background: var(--surface);
color: var(--text);
border: var(--b) solid var(--line);
box-shadow: var(--ombra-s);
border-radius: var(--r);
font-family: var(--f-dato);
font-size: var(--t-ui);
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
white-space: nowrap;
transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease, border-color .12s ease;
}
.tools__tab:hover, .tools__tab:focus-visible { transform: var(--premi-s); box-shadow: 0 0 0 0 transparent; }
/* La tab scelta e' campitura piena e ombra assente. Non la sposto di 3px
come gli altri elementi premuti: e' il primo elemento della colonna, e
traslata usciva dalla linea di griglia. */
.tools__tab[aria-selected="true"] {
background: var(--accento);
color: var(--on-accento);
border-color: #000;
box-shadow: 0 0 0 0 transparent;
}
/* La tab scelta e' gia' premuta: passarci sopra non la sposta di altri 3px,
o esce dalla linea di griglia. */
.tools__tab[aria-selected="true"]:hover { transform: none; }
/* Senza JavaScript la barra non compare e i tre gruppi restano impilati,
ognuno col proprio titolo. Con .js succede l'opposto. */
.tools__barra { display: none; }
.js .tools__barra { display: flex; }
.tools__pannello + .tools__pannello { margin-top: clamp(32px, 3.6vw, 52px); }
.js .tools__pannello + .tools__pannello { margin-top: 0; }
.tools__pannello[hidden] { display: none; }
.tools__pannello:focus-visible { outline-offset: 6px; }
.tools__titolo {
margin-bottom: clamp(16px, 1.8vw, 24px);
font-family: var(--f-display);
font-size: var(--t-h3);
font-weight: 700;
letter-spacing: -.02em;
}
.js .tools__titolo {
position: absolute;
width: 1px; height: 1px;
margin: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
/* Corta e su una proprieta' sola: uno scostamento faceva ballare la griglia
mentre l'opacita' saliva. */
.js .tools__pannello.is-entra { animation: toolsEntra .14s ease-out both; }
@keyframes toolsEntra { from { opacity: 0; } to { opacity: 1; } }
.tools__griglia {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(14px, 1.5vw, 20px);
}
/* Piu' respiro e meno densita': il nome sale, la descrizione scende.
Le card grandi hanno un solo bordo leggero e nessuna ombra a riposo:
il carattere neo-brutalist entra solo nell'hover. */
.tool {
display: grid;
align-content: start;
gap: clamp(12px, 1.1vw, 16px);
min-height: 152px;
padding: clamp(24px, 2.1vw, 32px) clamp(22px, 1.9vw, 30px);
background: var(--surface);
border: var(--b-card) solid var(--line);
box-shadow: none;
border-radius: var(--r);
transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), border-color .22s var(--ease-out);
}
/* Loghi a colore di marchio e alla loro misura vera. La variante scura entra
solo dove il colore originale sparirebbe sul fondo notturno. */
.tool__logo { width: 36px; height: 36px; flex: none; color: var(--logo, currentColor); }
[data-theme="dark"] .tool__logo { color: var(--logo-scuro, var(--logo, currentColor)); }
/* Marchi fatti di piu' forme: si stampano interi, coi colori loro. */
.tool__logo--intero { color: inherit; }
/* Chi un logo non ce l'ha porta una sigla, ma senza campitura: contorno e
basta, cosi' sta sulla stessa riga visiva dei loghi. */
.tool__sigla {
display: grid;
place-items: center;
min-width: 40px; height: 36px;
padding-inline: 6px;
flex: none;
background: transparent;
color: var(--text);
border: 2px solid var(--line);
border-radius: var(--r-s);
font-family: var(--f-dato);
font-size: 11px;
font-weight: 700;
}
.tool__testa { display: flex; align-items: center; gap: 14px; }
.tool__nome { font-size: clamp(1.125rem, 1.05rem + .25vw, 1.3125rem); font-weight: 700; letter-spacing: -.02em; }
/* 18px pieni da 933px in su, cioe' su tutto il desktop: a 15 la descrizione
era una didascalia sotto al nome, non una riga da leggere. Sul telefono
scende a 16, dove la colonna e' una sola e 18 porterebbe ogni scheda a
quattro righe. La curva e' tarata per arrivare a 18 PRIMA dei 1024, non
dopo: a 1024 la griglia e' gia' a quattro colonne. */
.tool__testo { color: var(--text-muted); font-size: clamp(1rem, .95rem + .3vw, 1.125rem); line-height: 1.5; text-wrap: pretty; }
/* Al passaggio la scheda si solleva di pochi pixel e compare una sola
ombra netta, piccola. NON e' il gesto di pressione del sistema — quello dice
"questo si preme", e una scheda di strumento non si preme: dice solo
"sei qui sopra". Niente scala e niente cambio di colore, o la griglia
comincia a respirare mentre ci passi in mezzo.
Solo dove c'e' un puntatore vero: sul touch il tap lascerebbe la scheda
sollevata dopo il dito. */
@media (hover: hover) {
.tool:hover {
transform: translateY(-3px);
box-shadow: var(--ombra-card-hover);
}
}
/* --- Selected work: pista orizzontale -------------------------------
Non una fila di "card" chiuse: ogni progetto e' composto da una cornice
immagine identica e da un blocco editoriale sotto. Il bordo sta sulla
preview — l'oggetto visuale — non intorno a immagine + testo. Cosi' titoli
e descrizioni di lunghezza diversa non producono scatole di altezze diverse. */
.lavori { overflow: hidden; }
.lavori__controlli { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 24px); }
.lavori__frecce { display: flex; gap: 8px; }
.freccia {
display: grid;
place-items: center;
width: 48px; height: 48px;
color: var(--text);
background: var(--surface);
border: var(--b) solid var(--line);
box-shadow: var(--ombra-s);
transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease, opacity .12s ease;
border-radius: var(--r);
}
.freccia svg { width: 18px; height: 18px; }
.freccia:hover, .freccia:focus-visible, .freccia:active {
background: var(--comando);
color: var(--on-comando);
border-color: #000;
transform: var(--premi-s);
box-shadow: 0 0 0 0 #000;
}
.freccia[disabled] { opacity: .35; pointer-events: none; box-shadow: none; }
.lavori__vuoto { padding-bottom: var(--sezione); }
.lavori__vista {
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding-bottom: 0;
}
.lavori__vista::-webkit-scrollbar { display: none; }
.lavori__pista {
--lavori-gap: clamp(14px, 1.15vw, 20px);
display: flex;
gap: var(--lavori-gap);
align-items: stretch;
width: max-content;
padding-inline: max(var(--gutter), (100% - var(--max)) / 2);
padding-block: 8px 26px;
scroll-padding-inline: max(var(--gutter), (100% - var(--max)) / 2);
}
/* La pista e' volutamente piu' larga del viewport: due card abbondanti + la
terza ben visibile danno piu' peso alle immagini e rendono evidente che la
sezione e' scorrevole. Il gap resta contenuto: massimo 20px, sufficiente a separare le card senza spezzare il ritmo della pista. */
.lavori__pista > li {
flex: 0 0 clamp(560px, 35vw, 720px);
min-width: 0;
scroll-snap-align: start;
}
.scheda-lavoro {
--scheda-accento: var(--viola);
position: relative;
display: grid;
gap: 0;
width: 100%;
min-width: 0;
height: 100%;
background: var(--surface);
border: var(--b-card) solid var(--line);
border-radius: var(--r);
box-shadow: none;
overflow: hidden;
transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), border-color .22s var(--ease-out);
}
.scheda-lavoro--accento-lime { --scheda-accento: var(--lime); }
.scheda-lavoro--accento-rosa { --scheda-accento: var(--rosa); }
.scheda-lavoro--accento-viola { --scheda-accento: var(--viola); }
.scheda-lavoro--accento-azzurro { --scheda-accento: var(--azzurro); }
@media (hover: hover) {
.scheda-lavoro:hover {
transform: translateY(-3px);
box-shadow: 5px 5px 0 #000;
border-color: var(--scheda-accento);
}
}
.scheda-lavoro:focus-within { border-color: var(--scheda-accento); }
.scheda-lavoro__media {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
display: grid;
place-items: center;
padding: 0;
background: #fff;
color: inherit;
border: 0;
border-bottom: var(--b-card) solid var(--line);
border-radius: 0;
box-shadow: none;
cursor: pointer;
appearance: none;
}
.scheda-lavoro__vuoto { color: #1B1B1B; }
.scheda-lavoro__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
transition: transform .35s cubic-bezier(.22,1,.36,1);
}
@media (hover: hover) {
.scheda-lavoro:hover .scheda-lavoro__media img { transform: scale(1.012); }
}
.scheda-lavoro__media:focus-visible {
outline: var(--b) solid var(--focus);
outline-offset: -3px;
}
.scheda-lavoro__vuoto {
display: grid;
place-items: center;
width: 100%;
height: 100%;
color: var(--text);
font-family: var(--f-display);
font-size: clamp(2.5rem, 6vw, 4.5rem);
font-weight: 700;
letter-spacing: -.03em;
text-transform: uppercase;
}
.scheda-lavoro__corpo {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: 14px;
row-gap: 8px;
align-content: start;
padding: clamp(18px, 1.7vw, 22px);
}
.scheda-lavoro__numero {
grid-row: 1 / span 3;
align-self: start;
margin-top: 1px;
padding: 3px 8px;
background: var(--text);
color: var(--bg);
font-family: var(--f-dato);
font-size: var(--t-label);
font-weight: 700;
font-variant-numeric: tabular-nums;
border-radius: var(--r-s);
}
.scheda-lavoro__categoria {
grid-column: 2;
justify-self: start;
padding: 3px 8px;
background: var(--scheda-accento);
color: #111111;
border: 1px solid #000;
border-radius: 4px;
font-family: var(--f-dato);
font-size: var(--t-ui);
font-weight: 700;
letter-spacing: .06em;
line-height: 1.3;
text-transform: uppercase;
}
.scheda-lavoro__titolo {
grid-column: 2;
min-width: 0;
margin: 0;
font-size: clamp(1.35rem, 1.04rem + .75vw, 1.72rem);
font-family: var(--f-display);
font-weight: 700;
letter-spacing: -.03em;
line-height: 1.04;
}
.scheda-lavoro__apri {
max-width: 100%;
display: inline-flex;
align-items: center;
gap: .48em;
padding: 0;
background: none;
border: 0;
color: inherit;
font: inherit;
letter-spacing: inherit;
text-align: left;
cursor: pointer;
}
.scheda-lavoro__apri:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 4px;
border-radius: 4px;
}
.scheda-lavoro__nome { min-width: 0; }
.scheda-lavoro__freccia {
flex: none;
display: inline-grid;
place-items: center;
width: 22px;
height: 22px;
transform: translateY(.04em);
transition: transform .18s var(--ease-out);
}
.scheda-lavoro__freccia svg { width: 18px; height: 18px; }
.scheda-lavoro__apri:hover .scheda-lavoro__freccia,
.scheda-lavoro__apri:focus-visible .scheda-lavoro__freccia { transform: translate(4px, .04em); }
.scheda-lavoro__breve {
grid-column: 2;
margin: 0;
max-width: 34ch;
min-height: 3em;
color: var(--text-muted);
font-size: clamp(1rem, .97rem + .14vw, 1.0625rem);
line-height: 1.5;
text-wrap: pretty;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* --- Archivio progetti ------------------------------------------------
L'archivio pubblico e' disabilitato: queste regole restano solo come rete
di sicurezza se il componente viene riusato in una preview editoriale. */
.archivio-lavori { padding-bottom: var(--sezione); }
.lavori__griglia {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(24px, 3vw, 48px);
margin-top: clamp(28px, 3.2vw, 48px);
}
.lavori__griglia > li { min-width: 0; }
.paginazione {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: clamp(32px, 4vw, 56px);
font-family: var(--f-dato);
font-size: var(--t-label);
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
}
.paginazione .page-numbers {
display: grid;
place-items: center;
min-width: 46px;
min-height: 46px;
padding-inline: 12px;
background: var(--surface);
color: var(--text);
border: var(--b) solid var(--line);
box-shadow: var(--ombra-s);
border-radius: var(--r-s);
text-decoration: none;
transition: transform .12s var(--ease-out), box-shadow .12s var(--ease-out);
}
.paginazione .page-numbers:hover,
.paginazione .page-numbers:focus-visible { transform: var(--premi-s); box-shadow: 0 0 0 0 var(--ombra-colore); }
.paginazione .current {
background: var(--accento);
color: var(--on-accento);
border-color: #000;
box-shadow: 0 0 0 0 transparent;
}
/* --- Finestra di dettaglio ---------------------------------------------
Desktop: immagine ferma a sinistra, contenuto che scorre a destra.
Mobile: immagine in alto e una sola area di contenuto scrollabile. Il
pulsante di chiusura resta sempre raggiungibile perche' il pannello non e'
l'elemento che scorre. */
.dett {
width: min(1320px, calc(100vw - var(--gutter) * 2));
max-width: none;
height: min(90svh, 900px);
max-height: 90svh;
padding: 0;
background: transparent;
border: 0;
overflow: visible;
}
.dett::backdrop { background: rgba(10, 10, 14, .74); }
.dett__pannello {
position: relative;
display: grid;
grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
width: 100%;
height: 100%;
max-height: inherit;
overflow: hidden;
background: var(--surface);
color: var(--text);
border: var(--b) solid var(--line);
box-shadow: var(--ombra-xl);
border-radius: var(--r);
}
.dett__pannello:focus { outline: none; }
.dett__chiudi {
position: absolute;
z-index: 6;
top: 14px;
right: 14px;
display: grid;
place-items: center;
width: 44px;
height: 44px;
background: var(--bg);
color: var(--text);
border: var(--b) solid var(--line);
box-shadow: var(--ombra-s);
border-radius: var(--r-s);
cursor: pointer;
transition: transform .12s var(--ease-out), box-shadow .12s var(--ease-out), background-color .12s var(--ease-mite), color .12s var(--ease-mite);
}
.dett__chiudi svg { width: 20px; height: 20px; }
.dett__chiudi:hover, .dett__chiudi:focus-visible {
background: var(--text);
color: var(--bg);
transform: var(--premi-s);
box-shadow: 0 0 0 0 var(--ombra-colore);
}
.dett__media {
min-width: 0;
height: 100%;
overflow: auto;
display: grid;
align-content: start;
gap: 18px;
padding: clamp(22px, 2vw, 28px);
background: #fff;
border-right: var(--b) solid var(--line);
}
.dett__mockup {
margin: 0;
display: grid;
gap: 0;
background: var(--surface);
border: 2px solid var(--line);
border-radius: var(--r-s);
overflow: hidden;
}
.dett__mockup--desktop { min-height: 0; }
.dett__mockup--mobile {
width: min(100%, 280px);
justify-self: end;
border-radius: 26px;
}
.dett__mockup-barra {
display: flex;
gap: 8px;
align-items: center;
padding: 12px 14px;
background: var(--bg);
border-bottom: 2px solid var(--line);
}
.dett__mockup-barra span {
width: 10px;
height: 10px;
border-radius: 999px;
border: 2px solid var(--line);
}
.dett__mockup-barra span:nth-child(1) { background: var(--lime); }
.dett__mockup-barra span:nth-child(2) { background: var(--rosa); }
.dett__mockup-barra span:nth-child(3) { background: var(--viola); }
.dett__mockup-schermo {
display: grid;
place-items: center;
text-align: center;
gap: 10px;
padding: clamp(18px, 3vw, 26px);
background-image: linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px);
background-size: 22px 22px;
}
.dett__mockup-schermo--desktop { aspect-ratio: 4 / 5; }
.dett__mockup-schermo--mobile { aspect-ratio: 9 / 16; }
.dett__mockup-kicker {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 10px;
background: var(--lime);
color: var(--on-lime);
border: 2px solid var(--line);
border-radius: 999px;
font-family: var(--f-dato);
font-size: .78rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.dett__mockup strong {
display: block;
max-width: 14ch;
font-family: var(--f-display);
font-size: clamp(1.2rem, 1rem + .8vw, 1.8rem);
line-height: 1.04;
letter-spacing: -.03em;
}
.dett__mockup small {
display: block;
max-width: 28ch;
color: var(--text-muted);
font-size: .98rem;
line-height: 1.45;
}
.dett__corpo {
min-width: 0;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
scrollbar-width: thin;
display: grid;
align-content: start;
gap: clamp(16px, 1.6vw, 22px);
padding: clamp(30px, 3vw, 46px) clamp(24px, 3vw, 44px) clamp(34px, 3.4vw, 54px);
}
.dett__categoria { color: var(--text-muted); padding-right: 60px; }
.dett__titolo {
margin: 0;
padding-right: 56px;
font-family: var(--f-display);
font-size: clamp(2rem, 1.25rem + 1.8vw, 3.1rem);
font-weight: 700;
line-height: 1.02;
letter-spacing: -.04em;
text-wrap: balance;
}
.dett__occhiello {
margin: 0;
max-width: 50ch;
font-size: var(--t-lead);
line-height: 1.48;
text-wrap: pretty;
}
.dett__sezione {
display: grid;
gap: 12px;
padding-top: clamp(8px, 1vw, 14px);
border-top: 2px solid var(--line);
}
.dett__testo {
max-width: 64ch;
color: var(--text-muted);
font-size: var(--t-corpo);
line-height: 1.72;
text-wrap: pretty;
}
.dett__testo p { margin: 0 0 1em; }
.dett__testo > :first-child { margin-top: 0; }
.dett__testo > :last-child { margin-bottom: 0; }
.dett__sottotitolo {
margin: 0 0 10px;
font-family: var(--f-display);
font-size: var(--t-h3);
font-weight: 700;
letter-spacing: -.02em;
}
.dett__punti { display: grid; gap: 0; }
.dett__punti ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.dett__punti li {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 10px;
align-items: start;
padding: 10px 12px;
background: var(--bg);
border: 2px solid var(--line);
border-radius: var(--r-s);
font-size: var(--t-corpo);
line-height: 1.4;
text-wrap: pretty;
}
.dett__punti svg { width: 16px; height: 16px; margin-top: .16em; color: var(--viola-testo); }
.dett__dati {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 14px 20px;
margin: 2px 0 0;
padding-top: clamp(14px, 1.5vw, 20px);
border-top: 2px solid var(--line);
}
.dett__dati dt { margin-bottom: 4px; color: var(--text-muted); }
.dett__dati dd { margin: 0; font-weight: 700; letter-spacing: -.01em; }
.dett__stack { display: grid; gap: 10px; }
.dett__stack .etichetta { color: var(--text-muted); }
.dett__azione { margin: 4px 0 0; }
.dett__galleria {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 4px;
padding: 0;
list-style: none;
}
.dett__galleria li {
overflow: hidden;
display: grid;
background: #fff;
border: 2px solid var(--line);
border-radius: var(--r-s);
}
.dett__galleria img {
width: 100%;
height: 100%;
aspect-ratio: 16 / 10;
object-fit: contain;
object-position: center top;
display: block;
background: #fff;
}
/* Il corpo non scorre dietro alla finestra. showModal() rende inerte il
resto della pagina ma non ferma lo scorrimento, e su iOS il fondo
scivolerebbe sotto al pannello. */
html.is-bloccato { overflow: hidden; }
/* --- Percorso --- */
/* Tre colonne: quando / chi-dove / cosa. Prima era due, e il testo finiva
tutto a sinistra lasciando mezza riga vuota a destra. */
.tappa {
position: relative;
display: grid;
grid-template-columns: minmax(150px, 1.6fr) minmax(0, 3fr) minmax(0, 4.4fr);
column-gap: clamp(20px, 2.6vw, 48px);
padding: clamp(32px, 3.4vw, 52px) 0;
border-top: var(--b) solid var(--line);
}
/* Il primo elemento non porta un filo in cima: la testata e il suo spazio
inferiore separano gia' titolo ed elenco senza una linea decorativa. */
.tappa:first-child { border-top: 0; }
/* Il padding della riga sta FRA due righe. In fondo all'elenco non c'e' piu'
niente da separare, e sommandosi a quello della sezione portava la coda del
Percorso a 137px contro i 97px di ogni altra sezione. */
.tappa:last-child { padding-bottom: 0; }
.tappa__quando {
display: flex;
align-items: center;
gap: 10px;
align-self: start;
font-family: var(--f-dato);
font-size: var(--t-ui);
font-weight: 700;
letter-spacing: .02em;
font-variant-numeric: tabular-nums;
text-transform: uppercase;
}
/* La tappa in corso porta il quadrato rosa, la stessa lingua dello stato
nella hero e del blocco "In questo periodo". */
.tappa--ora .tappa__quando::before {
content: "";
width: 11px; height: 11px;
flex: none;
background: var(--stato);
border: 2px solid #000;
border-radius: 3px;
}
.tappa__corpo { display: grid; gap: 8px; align-content: start; }
.tappa__testi { display: grid; gap: clamp(14px, 1.4vw, 20px); align-content: start; }
.tappa__ruolo {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px 14px;
font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem);
font-family: var(--f-display);
font-weight: 700;
letter-spacing: -.02em;
line-height: 1.12;
}
/* L'azienda era un badge a campitura piena: pesava piu' del ruolo, e il
ruolo e' l'informazione. Ora e' testo, secondario per colore e corpo. */
.tappa__dove {
justify-self: start;
color: var(--text-muted);
font-family: var(--f-dato);
font-size: var(--t-ui);
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
}
.tappa__testo { max-width: 56ch; line-height: 1.55; color: var(--text-muted); text-wrap: pretty; }
/* --- Stack: i marchi, non le parole ------------------------------------
Prima erano pastiglie di testo in maiuscoletto con un velo di colore
dietro. Dicevano "WORDPRESS": una parola da leggere per un'informazione
che il marchio da' in un colpo d'occhio, e su quattro voci facevano una
riga di rumore sotto al titolo. Ora sono i loghi veri, ai colori loro,
senza campitura e senza contorno — non sono pulsanti, sono un elenco.
Chi un logo non ce l'ha (WP-CLI, REST API, un webhook) resta testo, e si
distingue proprio per questo: e' una parola in mezzo a dei segni. */
.stack-loghi {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 16px;
margin-top: 6px;
}
.stack-loghi__logo { display: grid; place-items: center; }
/* 32px. Provate tre misure affiancate: a 26 i marchi piu' disegnati — la
mascotte GSAP, la sigla ACF — diventano una macchia e si riconoscono
solo quelli con una lettera dentro; a 40 comandano la riga piu' del
titolo del progetto. */
.stack-loghi__logo .tool__logo { width: 32px; height: 32px; }
.stack-loghi__testo {
color: var(--text-muted);
font-family: var(--f-dato);
font-size: var(--t-micro);
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
}
/* --- Manifesto --- */
/* Un poster tipografico, non una sezione con titolo e paragrafo. Niente
eyebrow, niente titolo di sezione, niente etichette a margine: quello che
c'e' e' la frase, e la frase e' la sezione.
Il peso 600 resta editoriale senza diventare il secondo hero. */
/* Il respiro del manifesto se lo porta il manifesto: sommare anche il
padding di sezione faceva due volte lo stesso vuoto in fondo. */
.manifesto {
display: grid;
justify-items: center;
text-align: center;
padding-block: clamp(64px, 9vw, 168px);
}
.manifesto__frase {
/* Piu' largo e leggermente piu' piccolo del giro precedente: la frase e'
cresciuta da otto a diciotto parole, e a 72px su 1100 sarebbero state
cinque righe. Cosi' ne restano tre, che e' il ritmo giusto per un
manifesto: abbastanza da essere una frase, non tante da essere un
paragrafo. */
/* A 1920px il font raggiunge il massimo: fermare la misura a 1200px lo
riportava a quattro righe, una in piu' che a 1440px. I 1320px tengono
tre righe anche sul monitor largo senza cambiare i breakpoint minori. */
max-width: 1320px;
font-family: var(--f-display);
/* La curva parte piu' bassa e sale piu' in fretta: con il minimo a 32px
la frase andava a SETTE righe su un telefono, e l'ultima restava una
parola sola. A 26px ne fa cinque e text-wrap: balance torna a lavorare
(oltre una certa quantita' di righe il browser lo abbandona). */
font-size: clamp(1.625rem, 1rem + 2.6vw, 3.75rem);
font-weight: 600;
line-height: 1.22;
letter-spacing: -.03em;
text-wrap: balance;
}
/* Nel Manifesto sono evidenziatori editoriali: nessun bordo o ombra da
controllo, solo una campitura stretta dietro alle parole. */
.manifesto__frase .marcato {
padding: .02em .12em;
margin-inline: .04em;
border-radius: 2px;
box-shadow: none;
}
/* --- Metodo: accordion a colore pieno ---------------------------------
La sezione cambia mestiere: dove Strumenti e' neutra e tecnica — schede
bianche, loghi, contorni — qui la pagina prende colore, e poi i Progetti
tornano alle immagini. E' un'alternanza voluta: tre sezioni di fila
costruite allo stesso modo si leggono come una sola.
Una scatola sola, con UN raggio esterno e cinque bande dentro. Le righe non
hanno raggio proprio: se ce l'avessero, la scatola smetterebbe di essere
una scatola e diventerebbe una pila di schede, che e' esattamente la
forma che sta sopra. */
/* La testata e' centrata, ed e' l'unico blocco della pagina che lo e'. Sotto
c'e' una campitura a tutta larghezza divisa in bande: un titolo allineato
a sinistra ci sarebbe caduto sopra di sbieco. */
.metodo__testa {
max-width: 62ch;
margin-inline: auto;
padding-block: var(--sezione) clamp(28px, 3.2vw, 46px);
text-align: center;
}
.metodo__testa .etichetta { justify-content: center; }
.metodo__intro {
max-width: 54ch;
margin: clamp(16px, 1.8vw, 24px) auto 0;
font-size: var(--t-lead);
line-height: 1.5;
text-wrap: pretty;
}
.metodo__elenco {
overflow: hidden;
border: var(--b) solid #000;
border-radius: var(--r);
box-shadow: none;
}
/* Il contorno e' #000 e non --line perche' le cinque bande NON si ribaltano
col tema: sono le stesse al chiaro e al buio, come i bottoni e le
tessere della hero. Un filo crema fra due bande colorate sarebbe un
terzo colore che non c'entra niente. */
.passo {
--riga: var(--surface);
--su-riga: var(--text);
border-bottom: var(--b) solid #000;
}
.passo:last-child { border-bottom: 0; }
/* Ogni banda corrisponde alla sua area: accessibilita', UX, performance,
design su misura e SEO. Il testo resta #111 su tutte le tinte: e' la
combinazione con contrasto migliore anche sul viola. */
.passo:nth-child(5n+1) { --riga: var(--giallo); --su-riga: var(--on-giallo); }
.passo:nth-child(5n+2) { --riga: var(--rosa); --su-riga: var(--on-rosa); }
.passo:nth-child(5n+3) { --riga: var(--lime); --su-riga: var(--on-lime); }
.passo:nth-child(5n+4) { --riga: var(--viola); --su-riga: var(--on-viola); }
.passo:nth-child(5n+5) { --riga: var(--azzurro); --su-riga: var(--on-azzurro); }
.passo__rubrica { margin: 0; font-size: inherit; font-weight: inherit; }
.passo__testa {
width: 100%;
min-height: 92px;
display: grid;
grid-template-columns: 68px minmax(240px, 380px) minmax(0, 1fr) 46px;
gap: clamp(14px, 1.8vw, 26px);
align-items: center;
padding: 16px clamp(18px, 2vw, 28px);
background: var(--riga);
color: var(--su-riga);
border: 0;
text-align: left;
cursor: pointer;
/* Solo il colore, e solo per l'hover: la riga non si muove e non cambia
misura, o cinque bande affiancate ballerebbero al passaggio del mouse. */
transition: filter .2s var(--ease-out);
}
@media (hover: hover) {
.passo__testa:hover { filter: brightness(1.06); }
}
/* Il focus resta nero e inset: funziona sia sulla banda chiara sia sui
colori sociali e non dipende dal solo colore per essere percepito. */
.passo__testa:focus-visible {
outline: var(--b) solid #000;
outline-offset: calc(var(--b) * -2);
}
.passo__n {
font-family: var(--f-dato);
font-size: var(--t-label);
font-weight: 700;
letter-spacing: .08em;
font-variant-numeric: tabular-nums;
}
.passo__titolo {
font-family: var(--f-display);
font-size: clamp(1.375rem, 1rem + 1.1vw, 2.125rem);
font-weight: 700;
line-height: 1.05;
letter-spacing: -.03em;
}
/* Niente opacita': la micro-frase e' piu' piccola, non piu' sbiadita. */
.passo__sintesi {
font-size: var(--t-corpo);
line-height: 1.35;
text-wrap: pretty;
}
/* Il titolo della riga aperta prende la sottolineatura: lo stato non e'
affidato al solo simbolo in fondo alla riga. */
.passo__testa[aria-expanded="true"] .passo__titolo {
text-decoration: underline;
text-decoration-thickness: 3px;
text-underline-offset: 6px;
}
/* Il + e il − sono due linee disegnate, non il carattere tipografico: il
glifo "+" di una variabile grottesca non e' mai centrato otticamente nel
suo quadratello, e a fianco di cinque righe si vede. Quando la riga si apre
la linea verticale non ruota: si chiude su se' stessa dal centro, e
resta il meno. */
.passo__piu {
position: relative;
width: 40px;
height: 40px;
justify-self: end;
border: 2px solid currentColor;
border-radius: 50%;
}
.passo__piu::before,
.passo__piu::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 14px;
height: 2px;
margin: -1px 0 0 -7px;
background: currentColor;
border-radius: 2px;
transition: transform .32s var(--ease-out), opacity .2s var(--ease-out);
}
.passo__piu::after { transform: rotate(90deg); }
.passo__testa[aria-expanded="true"] .passo__piu::after {
opacity: 0;
transform: rotate(90deg) scaleX(0);
}
/* L'apertura: 0fr → 1fr su una riga di griglia. E' l'unico modo di animare
"da zero all'altezza del contenuto" senza misurare niente in JavaScript e
senza il salto di height:auto. visibility toglie il pannello chiuso
anche dall'albero di accessibilita', e cambia SENZA transizione in
apertura e a fine transizione in chiusura, o il contenuto resterebbe
leggibile da tastiera mentre si richiude. */
.passo__pannello {
display: grid;
grid-template-rows: 1fr;
background: var(--riga);
color: var(--su-riga);
visibility: visible;
transition: grid-template-rows .52s var(--ease-out), visibility 0s;
}
.passo__pannello[data-chiuso] {
grid-template-rows: 0fr;
visibility: hidden;
transition: grid-template-rows .42s var(--ease-out), visibility 0s linear .42s;
}
.passo__clip { min-height: 0; overflow: hidden; }
.passo__dentro {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(220px, 30%);
gap: clamp(24px, 3vw, 56px);
/* Allineato al titolo, non al numero: la colonna del numero e' larga 54px
piu' la gronda, e il testo che riparte da li' sembrerebbe una nota. */
padding-inline: clamp(18px, 2vw, 28px);
padding-left: calc(68px + clamp(18px, 2vw, 28px) + clamp(14px, 1.8vw, 26px));
padding-block: clamp(18px, 2vw, 26px) clamp(24px, 2.8vw, 38px);
/* Solo opacita' e spostamento. Il padding NON entra qui: la riga di
griglia a 0fr porta gia' il contenitore a zero e .passo__clip lo
ritaglia, quindi animare anche il padding sarebbe una seconda
proprieta' di layout sullo stesso elemento per un effetto che non si
vede. */
transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.passo__pannello[data-chiuso] .passo__dentro {
opacity: 0;
transform: translateY(-8px);
}
.passo__testo {
margin: 0;
max-width: 62ch;
font-size: var(--t-lead);
line-height: 1.55;
text-wrap: pretty;
}
.passo__concreto { border-left: 4px solid currentColor; padding-left: 16px; }
/* L'occhiello nasce grigio (--text-muted): su una banda corallo o viola
quel grigio non e' piu' un secondario, e' un colore che non c'entra. Qui
prende il testo della riga, che e' gia' quello misurato per quella
tinta. */
.passo__concreto .etichetta { margin-bottom: 8px; color: inherit; }
.passo__concreto ul {
margin: 0;
padding-left: 18px;
font-size: var(--t-corpo);
line-height: 1.7;
}
/* --- Appunti: indice editoriale --- */
.note { padding-bottom: var(--sezione); }
.note__elenco { border-top: 0; }
/* Nell'archivio del blog non c'e' una testata di sezione sopra: li' il filo
in cima serve ad aprire l'elenco. */
.archivio .note__elenco { border-top: var(--b) solid var(--line); }
.note__elenco > li { border-bottom: var(--b) solid var(--line); }
.nota__link {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 10px clamp(16px, 2.4vw, 40px);
--nota-bleed: clamp(10px, 1.2vw, 18px);
padding: clamp(20px, 2.1vw, 30px) var(--nota-bleed);
margin-inline: calc(var(--nota-bleed) * -1);
transition: background-color .14s ease, color .14s ease;
}
/* Miniatura sempre presente: con l'immagine in evidenza quando c'e',
altrimenti con l'illustrazione di riserva del tema. Un elenco che alterna
righe con e senza immagine perde il ritmo. */
.nota__media {
grid-row: 1 / span 2;
display: grid;
place-items: center;
width: clamp(92px, 11vw, 132px);
aspect-ratio: 3 / 2;
overflow: hidden;
background: var(--surface);
border: var(--b-card) solid var(--line);
box-shadow: none;
border-radius: var(--r-s);
}
.nota__media img { width: 100%; height: 100%; object-fit: cover; }
.nota__media .nota__riserva { padding: 8px; object-fit: contain; }
.nota__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
font-family: var(--f-dato);
font-size: var(--t-micro);
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.nota__meta > * + *::before { content: "/"; margin-right: 14px; opacity: .5; }
.nota__titolo {
font-size: clamp(1.0625rem, .9rem + .7vw, 1.5rem);
font-family: var(--f-display);
font-weight: 700;
letter-spacing: -.02em;
line-height: 1.14;
text-wrap: balance;
transition: transform .16s ease;
}
.nota__freccia {
grid-column: 3;
grid-row: 1 / span 2;
align-self: center;
display: grid;
place-items: center;
font-size: 1.35rem;
transition: transform .16s var(--ease-out);
}
/* Riga intera in viola: lo stesso gesto del bottone, alla scala di un elenco. */
.nota__link:hover, .nota__link:focus-visible { background: var(--comando); color: var(--on-comando); }
.nota__link:hover .nota__titolo, .nota__link:focus-visible .nota__titolo { transform: translateX(8px); }
.nota__link:hover .nota__freccia, .nota__link:focus-visible .nota__freccia { transform: translate(5px, -5px); }
/* --- Appunti in home: schede, non righe --------------------------------
Stesso markup dell'elenco, altra composizione. Serve a rompere una
sequenza: Metodo, Percorso e Appunti erano tre elenchi di righe uno sotto
l'altro, e tre sezioni costruite allo stesso modo si leggono come una
sola. Nel blog e negli archivi le righe restano, perche' li' l'elenco e'
la pagina.
Le regole stanno tutte su due classi (0,2,0) apposta: devono vincere sugli
assestamenti di .nota__link che vivono dentro alle media query, senza
doverli riscrivere breakpoint per breakpoint. */
.note__elenco--schede {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(14px, 1.15vw, 20px);
border-top: 0;
}
.note__elenco--schede > li { border-bottom: 0; }
.note__elenco--schede .nota { height: 100%; }
.note__elenco--schede .nota__link {
grid-template-columns: minmax(0, 1fr) auto;
align-content: start;
height: 100%;
margin-inline: 0;
padding: 0;
overflow: hidden;
background: transparent;
border: 0;
box-shadow: none;
border-radius: 0;
transition: transform .18s var(--ease-out), border-color .18s var(--ease-out), background-color .18s var(--ease-out);
}
/* La copertina diventa la fascia alta della scheda: perde contorno, ombra e
raggio propri, perche' dentro a una scatola bordata sarebbero un secondo
contorno a pochi pixel dal primo. */
.note__elenco--schede .nota__media {
grid-column: 1 / -1;
grid-row: 1;
width: auto;
aspect-ratio: 16 / 9;
border: 0;
border-bottom: var(--b-card) solid var(--line);
box-shadow: none;
border-radius: 0;
}
.note__elenco--schede .nota__meta {
grid-column: 1 / -1;
grid-row: 2;
padding: clamp(18px, 1.9vw, 28px) clamp(18px, 1.9vw, 28px) 0;
}
/* Il titolo spinge in basso la freccia: cosi' le tre schede chiudono alla
stessa altezza anche con titoli di due o tre righe. */
.note__elenco--schede .nota__titolo {
grid-column: 1;
grid-row: 3;
align-self: start;
padding: 10px 0 clamp(18px, 1.9vw, 28px) clamp(18px, 1.9vw, 28px);
}
.note__elenco--schede > li { display: grid; }
.note__elenco--schede .nota__freccia {
grid-column: 2;
grid-row: 3;
align-self: end;
padding: 0 clamp(18px, 1.9vw, 28px) clamp(18px, 1.9vw, 28px) 10px;
}
/* La riga del titolo si prende lo spazio che avanza: le schede finiscono
tutte sullo stesso filo. */
.note__elenco--schede .nota__link { grid-template-rows: auto auto 1fr; }
/* Le card editoriali non si "premono" come i bottoni: al passaggio si
sollevano appena. Niente ombra permanente e niente offset marcato, cosi'
l'illustrazione e la tipografia restano protagoniste. */
.note__elenco--schede .nota__link:hover,
.note__elenco--schede .nota__link:focus-visible {
background: var(--surface);
color: var(--text);
transform: translateY(-2px);
box-shadow: none;
}
.note__elenco--schede .nota__link:hover .nota__titolo,
.note__elenco--schede .nota__link:focus-visible .nota__titolo { transform: none; }
.note__elenco--schede .nota__link:hover .nota__freccia,
.note__elenco--schede .nota__link:focus-visible .nota__freccia { transform: translate(3px, -3px); }
/* --- Pagina contatti ---------------------------------------------------
Una colonna sola, centrata. Era a due — testo a sinistra, modulo a
destra — e su una pagina che ha UNA cosa da far fare due colonne
dividono l'attenzione fra le due meta' senza che nessuna vinca. In
colonna l'ordine e' quello in cui si legge: chi sono, come mi trovi, e
qui sotto il modulo. */
.contatta { padding-bottom: var(--sezione); }
.contatta__griglia {
display: grid;
justify-items: center;
gap: clamp(36px, 4.5vw, 64px);
}
.contatta__lato {
display: grid;
justify-items: center;
gap: clamp(20px, 2.4vw, 30px);
max-width: 56ch;
text-align: center;
}
.contatta__intro {
margin: 0;
font-size: var(--t-lead);
line-height: 1.55;
text-wrap: pretty;
}
.contatta__recapiti {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px;
font-style: normal;
}
.contatta__email {
display: inline-flex;
align-items: center;
min-height: 60px;
padding: 14px 22px;
background: var(--surface);
color: var(--text);
border: var(--b) solid var(--line);
box-shadow: var(--ombra);
border-radius: var(--r);
font-size: var(--t-lead);
font-weight: 700;
letter-spacing: -.01em;
text-decoration: none;
overflow-wrap: anywhere;
transition: transform .12s var(--ease-out), box-shadow .12s var(--ease-out), background-color .12s var(--ease-mite), color .12s var(--ease-mite);
}
.contatta__email:hover, .contatta__email:focus-visible {
background: var(--text);
color: var(--bg);
transform: var(--premi);
box-shadow: 0 0 0 0 var(--ombra-colore);
}
.contatta__profili { display: flex; gap: 12px; }
.contatta__profili a {
display: grid;
place-items: center;
width: 60px; height: 60px;
background: var(--surface);
color: var(--text);
border: var(--b) solid var(--line);
box-shadow: var(--ombra-s);
border-radius: var(--r);
transition: transform .12s var(--ease-out), box-shadow .12s var(--ease-out), background-color .12s var(--ease-mite), color .12s var(--ease-mite);
}
.contatta__profili svg { width: 24px; height: 24px; }
.contatta__profili a:hover, .contatta__profili a:focus-visible {
background: var(--text);
color: var(--bg);
transform: var(--premi-s);
box-shadow: 0 0 0 0 var(--ombra-colore);
}
.contatta__stato {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
font-family: var(--f-dato);
font-size: var(--t-label);
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
}
.contatta__testo { line-height: 1.6; color: var(--text-muted); }
/* La testata sta nella stessa colonna centrata del resto. */
.contatta .pagina-testa { text-align: center; }
.contatta .pagina-testa .etichetta { justify-content: center; }
.contatta .pagina-testa .display--pagina { margin-inline: auto; }
.contatta__modulo {
/* Il riquadro non prende tutta la larghezza: un campo lungo 1300px si
attraversa con gli occhi due volte per capire dove finisce. 720 e' la
misura oltre la quale un modulo smette di sembrare un modulo. */
width: 100%;
max-width: 720px;
text-align: left;
padding: clamp(26px, 3.4vw, 48px);
background: var(--surface);
border: var(--b) solid var(--line);
box-shadow: var(--ombra-l);
border-radius: var(--r);
}
.contatta__modulo-titolo {
margin: 0 0 clamp(24px, 2.8vw, 34px);
font-family: var(--f-display);
font-size: var(--t-h3);
font-weight: 700;
letter-spacing: -.02em;
}
/* --- Contact Form 7 ----------------------------------------------------
CF7 non porta CSS proprio salvo qualche regola sui messaggi: quello che
si vede e' il foglio del tema applicato ai suoi campi. Niente reset di
stili altrui, niente !important — si scrive sugli elementi veri.
I selettori restano sui TAG dentro al modulo invece che sulle classi di
CF7: le classi cambiano tra versioni del plugin, e