/* ============================================================= Nicola Notarnicola, portfolio Token e stili ricostruiti dal prototipo Claude Design (Portfolio Prototype.dc.html, export 2026-08-02) Tipografia sostituita il 2026-08-02: F37 Bolton + Suisse Int'l Mono Testo passato da Schibsted Grotesk a Geist il 2026-08-18 (serviva un Light) ============================================================= */ /* ---------- Caratteri ---------- */ /* Due famiglie, entrambe con licenza SIL Open Font 1.1, entrambe ospitate qui dentro: nessuna chiamata a Google, nessun canone da pagare, nessun dato dei visitatori che esce verso terzi. I testi delle licenze stanno in assets/fonts/, vanno tenuti li'. */ /* GEIST, la voce. Grotesca neutra disegnata da Vercel con Basement Studio, aperta in OFL nel 2023. Sostituisce Schibsted Grotesk il 2026-08-18 per una ragione precisa: Schibsted parte dal 400, non ha un Light, e il sottotitolo del caso lo chiede. Geist copre l'asse dei pesi da 100 a 900 in un solo file, quindi il Light c'e' davvero e non e' un finto assottigliamento del browser. Il disegno resta della stessa famiglia di forme: grotesca a contrasto basso, terminali orizzontali, cifre tabellari. Il sito non cambia voce, guadagna un registro in piu' verso l'alto. Un solo file per tutti i pesi: meno richieste al server e meno peso rispetto a quattro file separati. */ @font-face { font-family: 'Geist'; src: url('../fonts/geist-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } /* Il corsivo serve alla domanda che apre il caso. Geist lo ha come file variabile a se', stesso intervallo di pesi. */ @font-face { font-family: 'Geist'; src: url('../fonts/geist-var-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; } /* DM MONO, la struttura. Monospaziata di Colophon Foundry, OFL. Scelta al posto delle solite mono da programmatore perche' non ha vezzi da terminale: a corpo piccolo e tutto maiuscolo resta sobria, che e' quello che serve a date, ruoli ed etichette. */ @font-face { font-family: 'DM Mono'; src: url('../fonts/dm-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'DM Mono'; src: url('../fonts/dm-mono-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } :root { /* Inchiostri */ --ink: #0d0d0d; --ink-2: #3d3d3d; --ink-3: #5c5c5c; --muted: #737373; --muted-2: #a0a0a0; --muted-3: #8a8a8a; --hairline: #b8b4ae; /* Il nero di base steso sottile. Non sono grigi: sono trasparenze, quindi prendono il colore di quello che hanno sotto. Servono dove il fondo non e' sempre lo stesso (una campitura sopra la mappa, un'ombra sopra la pagina). */ --ink-wash: rgba(13, 13, 13, .045); --ink-shadow: rgba(13, 13, 13, .18); /* Superfici */ --surface: #ffffff; --surface-2: #f7f6f4; --surface-3: #f2f0ec; --line: #e6e4e0; /* ---------- Accenti ---------- L'ARANCIONE E LE SUE DERIVATE. Le quattro righe sotto --accent non sono colori indipendenti: sono lo stesso arancione scurito, schiarito e steso trasparente. Se un giorno l'accento cambia, vanno ricalcolate tutte e quattro, e stanno qui attaccate proprio per non farle dimenticare. E' gia' successo. Il 19/09/2026 l'accento e' passato da blu ad arancione, e quattro posti sono rimasti indietro fino al 20/09: la riga del piede, il pallino davanti alla mail, e due velature del navigatore dell'Atlante che erano scritte come rgba(51,85,238), cioe' il vecchio blu in cifre, dove nessuna ricerca di "--accent" poteva trovarle. --accent-soft e' anche il valore che i sei file di Claude Design usano in tutti i piedi: il design tiene apposta due dosi dello stesso colore, pieno sul pallino della nav che dice "sei qui", piu' chiaro sul piede che e' arredo. Su --surface-2 sta a 3,4:1, sopra il 3:1 che serve a un segno grafico e sotto il 4,5:1 che servirebbe a un testo: infatti non e' un testo. */ --accent: #e8551f; /* la sorgente. 3,65:1 su bianco */ --accent-hover: #ba4419; /* scurito, per il passaggio del mouse. 5,35:1 */ --accent-soft: #f0a882; /* schiarito, per i segni d'arredo. 1,98:1 */ --accent-wash: rgba(232, 85, 31, .07); /* steso al 7%, da mettere sotto un testo */ --accent-wash-2: rgba(232, 85, 31, .12); /* steso al 12%, per la casella corrente */ /* Il lilla delle cose ancora da fare, e un verde acido mai entrato in pagina. Non sono accenti di marca: il lilla e' un attrezzo di lavoro (vedi --text-todo), il verde e' un avanzo della prima tavolozza. */ --accent-2: #a99bf0; --accent-3: #d9f24e; /* Accento di pagina. I tre comandi di navigazione (Back in alto a sinistra, Resume in alto a destra, il rimando in fondo) cambiano colore da pagina a pagina: ogni progetto porta il suo. Chi non dichiara niente resta sul blu del sito. Vedi la regola [data-page] piu' sotto. */ --page-accent: var(--accent); --page-accent-hover: var(--accent-hover); /* La tinta del progetto. Serve a due cose: il nome nel titolo del caso ("Evvu | ...") e i passaggi di testo evidenziati dentro la pagina. E' un colore a se' rispetto all'accento di navigazione: possono coincidere o no. Chi non dichiara niente resta nero e la pagina non cambia aspetto. */ --page-tint: var(--ink); } /* Perche' il pannello qui sotto sta su "body" e non su ":root" insieme al resto. Una variabile CSS viene risolta sull'elemento dove e' scritta, non dove viene usata. Se qui dicessimo --text-command: var(--page-accent) dentro :root, cioe' su , il browser lo risolverebbe subito col blu di sito, perche' l'arancione di Evvu non ce l'ha: arriva dopo, sul , con [data-page="evvu"]. I comandi resterebbero blu su tutte le pagine progetto. Scritto sul body, invece, il pannello si risolve sullo stesso elemento su cui atterra il colore di pagina, e ogni progetto porta il suo. E' un errore che avevo gia' fatto e visto in faccia il 20/08/2026: se un giorno qualcuno riportasse questo blocco dentro :root, tornerebbe. */ body { /* =========================================================== PANNELLO DEI COLORI DI TESTO (introdotto il 20/08/2026) Per cambiare il colore di un testo del sito si viene qui, si cambia una riga, e si e' finito. Sotto ogni token c'e' scritto dove quel testo si vede. I colori qui sopra sono la tavolozza: dicono QUALI colori il sito possiede. I token qui sotto dicono A COSA servono. La distinzione non e' pedanteria, risolve due guai concreti: - prima un token solo serviva testi diversi. --ink-3 era il sottotitolo del caso ma anche il testo delle card e i paragrafi dell'impatto: non si poteva toccarne uno senza toccare gli altri tre; - prima gli stessi token servivano testo E grafica. --ink e' il nero dei titoli ma anche il filetto sopra le sezioni; --hairline e' il pallino degli elenchi ma anche il bordo dei segnaposto. Ora bordi e sfondi continuano a citare la tavolozza per conto loro, e i testi passano solo di qui. Regola della casa: ogni colore che finisce su un testo passa da un token --text-*. Nessuna eccezione, cosi' non c'e' nulla da ricordare. Ogni pagina progetto puo' sovrascrivere i token che vuole nel proprio blocco [data-page], piu' sotto. Per vedere tutti i ruoli affiancati, con il rapporto di contrasto di ognuno: aprire _tools/colori.html. =========================================================== */ /* I titoli grandi. Statement della home, titolo di caso, frasi in evidenza (.pull), titoli dei blocchi di impatto, testo delle citazioni, titoli delle card, nome del progetto nel carosello, righe del piede. E' separato da --text-strong qui sotto benche' oggi valgano lo stesso nero: serve a poter schiarire i titoloni tenendo nero il resto, che senza questa distinzione non si puo' fare. */ --text-display: var(--ink); /* Il nero di base, quello che tutti ereditano dal body senza dichiararlo: ruoli della timeline, valori delle schede, elenchi, domanda delle card, numerazione dell'impatto, frecce della striscia, voce attiva del menu. */ --text-strong: var(--ink); /* La prosa lunga: paragrafi ed elenchi delle sezioni di testo, paragrafi della riflessione finale. */ --text-body: var(--ink-2); /* Il testo di supporto, un gradino sotto la prosa: la domanda che apre il caso, il testo delle card, i paragrafi dei blocchi di impatto. */ --text-secondary: var(--ink-3); /* Barra e soggetto nel titolo di caso ("Evvu | soggetto"). */ --text-subject: var(--muted-3); /* Etichette e voci di servizio: menu, occhielli maiuscoli (.eyebrow), azienda nella timeline, descrizione del carosello, contatore della striscia, testo dei segnaposto. */ --text-label: var(--muted); /* Un gradino piu' tenue delle etichette: voci di menu non ancora attive, anni della timeline, meta del carosello, fonte delle citazioni. */ --text-faint: var(--muted-2); /* Il pallino degli elenchi puntati. */ --text-marker: var(--hairline); /* Testi nell'accento di sito, uguali su ogni pagina: LinkedIn nel piede, anno corrente della timeline, marchio e nome del progetto al passaggio del mouse. */ --text-link: var(--accent); --text-link-hover: var(--accent-hover); /* Annotazioni pubblicate: il "case study coming" accanto alla data, sulle card del carosello che non hanno ancora una pagina. E' testo che legge chi visita il sito, e dice una cosa utile: quel caso esiste ma non e' ancora scritto. Arancione dal 20/09/2026, scelto con Nicola: prima era il lilla qui sotto, che su bianco sta a 2,44:1 e si faticava a leggere. L'arancione pieno sta a 3,65:1. Sotto il 4,5:1 che un testo di 11px vorrebbe, quindi resta un punto aperto: l'unico dei tre arancioni che passa la soglia e' --accent-hover, a 5,35:1, ed e' li' se un giorno si decide che la leggibilita' viene prima del colore. */ --text-note: var(--accent); /* Il lilla dei segni di lavorazione: la sottolineatura dei testi non ancora scritti (.ph) e l'etichetta "Immagine da inserire" dentro un segnaposto vuoto (.slot__hint). Oggi non se ne vede nessuno in pagina, sono tutti e due dormienti, ma le regole restano pronte per la prossima pagina che nasce. Separato da --text-note dal 20/09/2026: prima era un token solo, e portare le annotazioni all'arancione avrebbe tinto di arancione anche questi, facendo sparire la differenza fra "non l'ho ancora scritto" e "non e' ancora pubblicato". */ --text-todo: var(--accent-2); /* I comandi che portano il colore del progetto: Back, Resume, link delle card, rimando in fondo. Seguono l'accento di pagina, ma passando da qui si potranno scurire per il contrasto senza spegnere anche il filetto della citazione, che l'accento lo prende per conto suo. */ --text-command: var(--page-accent); --text-command-hover: var(--page-accent-hover); /* Testi nella tinta del progetto: nome nel titolo di caso, etichetta del pattern nelle card, passaggi evidenziati. */ --text-tint: var(--page-tint); /* =========================================================== PANNELLO DELLE SUPERFICI E DEI SEGNI (20/09/2026) Il gemello del pannello qui sopra, per tutto quello che un colore ce l'ha ma testo non e': fondi, filetti, pallini, barre, anelli di fuoco, velature. PERCHE' E' NATO. Il pannello dei testi copriva i testi, e basta. Per tutto il resto ogni regola citava la tavolozza per conto suo, e nessuno teneva il conto di chi citava cosa. Quando l'accento e' passato da blu ad arancione, quattro posti sono rimasti indietro, e due di questi erano il vecchio blu scritto in cifre, rgba(51,85,238), dove cercare "--accent" non poteva trovarli. Non era distrazione: era che non esisteva un posto da cui passassero tutti. LA REGOLA DELLA CASA, ESTESA. Prima diceva: ogni colore che finisce su un TESTO passa da un token --text-*. Ora dice: ogni colore del sito passa da un token. I testi dai --text-*, tutto il resto da qui. Fuori dalla tavolozza non si scrive nessun colore in cifre. Come si cambia il colore del sito, adesso: si apre la tavolozza qui sopra, si riscrive --accent e le sue quattro derivate, e si e' finito. Non serve cercare niente. L'UNICA ECCEZIONE, dichiarata il 27/08/2026 e confermata oggi: il visualizzatore a tutto schermo dell'Atlante (.atlas-lb). E' una superficie scura sopra fotografie, con una sua scala di bianchi e di neri trasparenti che col resto del sito non c'entra e che un cambio di accento non tocca. Li' i valori restano letterali e scritti sul posto. Tirarli qui dentro vorrebbe dire dieci token per un componente solo: sarebbe rinominare, non semplificare. =========================================================== */ /* I tre fondi, dal piu' chiaro al piu' marcato. */ --ui-page: var(--surface); /* il fondo della pagina */ --ui-raised: var(--surface-2); /* piede, riquadri in rilievo, il rimando in fondo quando ci passi sopra */ --ui-sunken: var(--surface-3); /* il riquadro dell'immagine mentre arriva, le righe della tabella sotto il mouse */ /* I filetti. Sono due pesi, non due colori a caso: il nero apre una sezione, il chiaro separa due righe dentro la stessa. */ --ui-rule: var(--line); --ui-rule-strong: var(--ink); --ui-rule-dashed: var(--hairline); /* il bordo tratteggiato dei segnaposto immagine */ /* I segni nell'accento di sito, uguali su ogni pagina. */ --ui-mark: var(--accent); /* pallino della nav, contorno della casella dell'Atlante */ --ui-mark-soft: var(--accent-soft); /* riga in alto e pallino della mail, nel piede */ /* Separato da --ui-mark anche se oggi vale lo stesso arancione: l'anello di fuoco e' l'unica cosa che vede chi naviga con la tastiera, e se un giorno gli servisse piu' contrasto si scurisce qui senza spegnere anche i pallini. E' la stessa ragione per cui --text-display sta separato da --text-strong. */ --ui-focus: var(--accent); /* Le velature: colore steso sottile sotto un testo o dentro una casella, dove serve un segno che non copra quello che c'e'. */ --ui-wash: var(--accent-wash); --ui-wash-strong: var(--accent-wash-2); --ui-seen: var(--ink-wash); /* le tavole dell'Atlante gia' aperte */ --ui-shadow: var(--ink-shadow); /* l'unica ombra del sito, sotto l'anteprima dell'Atlante */ /* I segni che portano l'accento di PAGINA invece di quello di sito: filetto della citazione, barra della card, linguetta della fase aperta, anello di fuoco della striscia. Oggi le pagine non dichiarano piu' un accento proprio, quindi vale ovunque l'arancione; il canale resta perche' il giorno che una pagina volesse il suo colore, basta il suo [data-page]. */ --ui-command: var(--page-accent); } /* Da qui in poi token che non riguardano i colori: possono restare su :root. */ :root { /* Ritmo */ /* PUNTO APERTO (20/09/2026): questo e' il margine laterale della HOME, e li' e' corretto. Le cinque pagine di caso, nei loro file di design, ne hanno uno piu' largo: clamp(24px, 7.4vw, 120px). Il sito applica questo a tutte e sei. E' lo stesso schema di --lh-body, che vale 1.6 in home e 1.5 nei casi, ma li' e' gia' risolto e qui no. Quanto pesa: 3px per lato a 390, 8 a 1024, 12 a 1440, 24 sopra i 1621 dove i due tetti divergono (96 contro 120). Si vede sulle cose a piena larghezza, non sulla prosa, che ha gia' un tetto suo. Rimandato da Nicola il 20/09/2026. Per farlo: ridefinire --gutter dentro [data-page], come e' stato fatto per --lh-body. La riga e' una, il lavoro vero e' rimisurare le cinque pagine alle quattro larghezze, perche' sposta ogni elemento e restringe le immagini. Dettaglio e misure in _review/2026-09-20_piano-integrazione.md. */ --gutter: clamp(20px, 6.6vw, 96px); --section-gap: clamp(92px, 12vw, 168px); /* Tipografia. Due voci e basta. --font-body dice le cose, --font-mono le etichetta. I fallback sono caratteri di sistema con proporzioni simili, cosi' se il woff2 tarda la pagina non balla. */ --font-body: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Pesi, nominati per ruolo invece che per numero. Geist copre da 100 a 900, quindi il Light esiste. Usarlo pero' costa: sotto i 24px un 300 si sgrana sugli schermi non retina e il testo si legge peggio. Regola della casa: il Light solo nei corpi grossi, cioe' il sottotitolo del titolo di caso. Tutto il resto tiene il 400 e fa la gerarchia con corpo, colore e spazio. */ --w-light: 300; /* solo display, mai sotto i 24px */ --w-body: 400; /* testo corrente e titoloni */ --w-medium: 500; /* nome in testata, stato attivo, etichette in evidenza */ --w-strong: 600; /* enfasi dentro il testo, rara */ /* Spaziatura ottica: piu' il corpo cresce, piu' si stringe. Le maiuscole minute vanno invece allargate, altrimenti si impastano. */ --track-xl: -.035em; /* oltre i 48px */ --track-l: -.025em; /* 26-48px */ --track-m: -.012em; /* 17-25px */ --track-caps: .11em; /* etichette maiuscole sotto i 14px */ /* Interlinee: stretta sui titoli, larga sul testo che si legge davvero. --lh-body vale 1.6 QUI e 1.5 sulle pagine progetto, vedi [data-page] piu' sotto. Non e' una svista: i file di Claude Design usano davvero due valori diversi, 1.6 nella home e 1.5 nelle cinque pagine di caso. Verificato misurando i due rendering fianco a fianco il 20/09/2026, dopo averla portata a 1.5 per tutti e aver visto la home scostarsi dal suo file. La prosa lunga di un caso sta piu' fitta, le poche righe della home stanno piu' larghe. */ --lh-display: 1.04; --lh-title: 1.2; --lh-lead: 1.4; --lh-body: 1.6; --ease: cubic-bezier(.16, 1, .3, 1); } /* =========================================================== LE PAGINE PROGETTO (rifatto il 21/08/2026) Un solo blocco per tutte e tre. Il selettore e' l'attributo nudo, [data-page], senza valore: vale per qualunque pagina lo porti. Le pagine nuove (CER, CSC, ATM) erediteranno da qui senza che si debba scrivere altro. PRIMA erano tre blocchi, uno per progetto, e ognuno portava la sua tinta: Evvu arancione e verde, Nodes Now lilla e viola, Orsero petrolio e ambra. Il 21/08 Nicola ha provato Orsero quasi senza colore, gli e' piaciuta, e ha chiesto di portarla sulle altre due. I colori di progetto sono quindi spariti dal sito. Sono qui sotto, se un giorno si vogliono indietro: [data-page="evvu"] accento #ea5926 / #bb471e, tinta #50ac33 [data-page="nodes-now"] accento #b5b5f5 / #8a8ae0, tinta #a16cff [data-page="orsero"] accento #0f7b6c / #0b5c51, tinta #b45309 COME FUNZIONA ORA. Due livelli e basta: - nero, e lo prende solo chi conta: il nome nel titolo di caso e i passaggi evidenziati (.hi). Non c'e' una riga che lo dica, ed e' voluto: --page-tint non viene dichiarato, e il suo valore di riserva e' gia' --ink; - grigio #8a8a8a su tutto il resto del testo. Sono i cinque token qui sotto; - il blu di sito sui comandi, e anche questo senza scriverlo: senza --page-accent vale --accent. Regola: quando il valore di riserva dice gia' la cosa giusta, non lo si ripete. Una riga che ripete la riserva e' una riga che qualcuno dovra' leggere e verificare per niente. TRE TOKEN DI TESTO RESTANO FUORI, ognuno per un motivo suo: - --text-faint (#a0a0a0) tiene "Side Quests" e "My Desk", le voci di menu non ancora attive. Portarlo a #8a8a8a le renderebbe piu' scure di prima e identiche a "Work", che invece si clicca: sparirebbe l'unico segno che le distingue; - --text-marker e' il pallino degli elenchi, che e' grafica; - --text-tint e' quello che tiene neri nome e .hi. Toccarlo renderebbe la pagina monocroma. DUE COSE NON DI TESTO seguono l'accento e quindi ora sono blu dove prima erano arancione o lilla: il filetto della citazione (.quote__bar, su Evvu e Nodes Now) e il contorno di messa a fuoco della striscia di card. Voluto: erano l'accento di pagina, e l'accento di pagina ora e' il blu di sito. IL CONTO DEL CONTRASTO. #8a8a8a su bianco fa 3,45:1. Regge sui titoloni (sopra i 24px la soglia e' 3:1), sta sotto il 4,5:1 su tutto il resto, prosa lunga compresa, che prima stava a 10,9:1. E' il prezzo dei due livelli, messo davanti a Nicola coi numeri prima di procedere e accettato. Si rilegge in _tools/colori.html. Se un giorno una pagina volesse discostarsi, si rimette un blocco col suo nome DOPO questo: stessa specificita', vince l'ultimo. Per esempio: [data-page="cer"] { --text-body: #3d3d3d; } =========================================================== */ [data-page] { /* Vedi la nota su --lh-body fra le interlinee: le pagine di caso hanno la prosa piu' fitta della home, come nei rispettivi file di design. */ --lh-body: 1.5; --text-display: var(--muted-3); --text-strong: var(--muted-3); --text-body: var(--muted-3); --text-secondary: var(--muted-3); --text-label: var(--muted-3); } /* Testata e piede sono arredo di sito, non contenuto di pagina: devono essere identici ovunque, home compresa. Chiesto da Nicola il 21/08 guardando il piede di Orsero, dove "LET'S TALK" era grigio mentre sulla home e' nero. Qui i token tornano ai valori del pannello generale. Funziona perche' le variabili CSS si ereditano: il blocco [data-page] le schiarisce sul , queste due regole le riscrivono piu' in basso nell'albero, e da li' in giu' vale di nuovo il valore di partenza. Cosi' quello che la pagina schiarisce si ferma al contenuto, senza una sola dichiarazione di colore in piu'. Se un domani si aggiunge un token al pannello e una pagina lo sovrascrive, va aggiunto anche qui: e' l'unico punto da tenere allineato a mano. L'ultima riga, color, non e' di troppo: senza, meta' del lavoro non si vede. Il body dichiara color: var(--text-strong), e quella variabile viene risolta li', sul body. Quello che scende ai figli e' il risultato, cioe' un grigio gia' fatto, non la formula: rimettere a posto i token piu' in basso non lo ricalcola. Chi ha un colore suo (le righe del piede) tornava nero da solo, chi eredita e basta (il marchio, l'indirizzo mail) restava grigio. Questa riga fa ripartire l'ereditarieta' dal valore giusto. */ .site-header, .contact { /* Testata e piede restano arredo di sito: stessa interlinea ovunque, come i colori qui sotto. Senza questa riga, dentro una pagina progetto erediterebbero l'1.5 del contenuto e sarebbero leggermente piu' fitti che in home, contro la regola presa con Nicola il 21/08/2026. */ --lh-body: 1.6; --text-display: var(--ink); --text-strong: var(--ink); --text-body: var(--ink-2); --text-secondary: var(--ink-3); --text-label: var(--muted); color: var(--text-strong); /* La riga qui sopra rimette il token, ma da sola non basta: line-height e' dichiarato sul body, quindi li' si risolve una volta e i figli ereditano il RISULTATO, non la formula. Senza ridichiararlo qui, dentro una pagina progetto testata e piede restavano all'1.5 del contenuto. E' la stessa trappola dei colori annotata sopra, in un'altra proprieta'. */ line-height: var(--lh-body); } /* ---------- Reset essenziale ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ui-page); color: var(--text-strong); font-family: var(--font-body); font-weight: var(--w-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; padding: 0; } ul, ol { list-style: none; } img { max-width: 100%; display: block; } /* Un capoverso non deve finire con una parola sola sull'ultima riga, e un titolo breve va spezzato in righe di lunghezza simile. Sono le due impostazioni di text-wrap: pretty per il testo corrente, balance per i titoli. Fino al 20/09/2026 pretty era dichiarato componente per componente, venticinque volte, e cinque componenti erano rimasti scoperti per dimenticanza. Qui la regola e' una sola e vale per tutto: chi aggiunge un paragrafo domani non deve ricordarsi di niente. Perche' pretty e non balance sul testo corrente: balance pareggia le righe, e su un capoverso lungo le accorcia tutte, allargando il margine a destra. Serve sui titoli di poche righe, e infatti li' resta dichiarato a mano: .impact__title, .reflection__title, .cases__title, .slide__name. Quelle quattro vincono su questa regola perche' una classe conta piu' di un elemento, a prescindere dall'ordine nel file. Restano a mano anche .cases__pattern e .cases__q: sono , non paragrafi, e questa regola non li raggiunge. Dove pretty non e' supportato il testo va a capo come ha sempre fatto. Non c'e' niente da rimediare con JavaScript: riscrivere il contenuto dei paragrafi per incollare le ultime due parole staccherebbe i nodi che carousel.js e cards.js tengono in mano, e congelerebbe a una larghezza sola una scelta che deve seguire lo schermo. */ h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, dd { text-wrap: pretty; } a { color: inherit; text-decoration: none; transition: color .2s ease; } /* La freccia dei rimandi che portano fuori dalla pagina: RESUME nel menu e LINKEDIN nel piede. Sta qui in cima e non dentro uno dei due blocchi perche' la usano entrambi. Tre dettagli che sembrano pignoleria e non lo sono. La freccia e' un carattere di testo, non un'icona, quindi da sola non si puo' muovere: serve lo che la avvolge nel markup. Lo span va reso inline-block, perche' su un elemento inline puro transform non ha alcun effetto e niente segnala l'errore. E lo spazio fra la parola e la freccia sta fuori dallo span, altrimenti si muoverebbe anche lui e la parola sembrerebbe allungarsi. */ .link-arrow { display: inline-block; transition: transform .2s ease; } .site-nav .nav-resume:hover .link-arrow, .contact__social:hover .link-arrow { transform: translate(2px, -2px); } :focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 3px; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Impaginazione ---------- */ .wrap { padding-inline: var(--gutter); } /* Il piede va ancorato al fondo della finestra, non del contenuto: se la pagina e' piu' bassa della finestra (zoom ridotto, schermi alti), senza questo il piede finisce a meta' pagina e sotto resta uno spazio bianco vuoto invece che in fondo. .page si allunga almeno quanto la finestra e main si prende lo spazio in avanzo, cosi' il piede resta sempre giu'. */ .page { animation: pageIn .55s var(--ease) both; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } main { flex: 1 0 auto; } @keyframes pageIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* ---------- Testata ---------- */ .site-header { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-block: 26px; border-bottom: 1px solid var(--ui-rule); } .site-header__left { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); } .wordmark { font-size: clamp(16px, 1.5vw, 21px); font-weight: var(--w-medium); letter-spacing: .04em; } .wordmark:hover { color: var(--text-link); } /* Sta a riposo nello stesso grigio delle voci di menu e si scurisce al passaggio, perche' e' navigazione di servizio come loro, non un'azione. Sui 12px mono maiuscolo il grigio --muted vale 4,7:1 su bianco: passa la soglia dei testi piccoli, ma di poco, ed e' il testo piu' debole della testata. Se un giorno dovesse scendere ancora, va rivisto. */ .back-link { font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-label); white-space: nowrap; } .back-link:hover { color: var(--text-strong); } .site-nav { display: flex; align-items: center; gap: clamp(16px, 2.6vw, 36px); font-family: var(--font-mono); font-size: clamp(11px, 1vw, 13px); font-weight: var(--w-body); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-label); } .site-nav a:hover { color: var(--text-strong); } .site-nav .is-current { display: flex; align-items: center; gap: 8px; font-weight: var(--w-medium); color: var(--text-strong); } .site-nav .is-current::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ui-mark); flex: none; } /* Unica voce del menu che porta fuori dal sito, ed e' vestita esattamente come LINKEDIN nel piede: blu gia' da ferma, senza sottolineatura, con la freccia che scivola al passaggio. Il blu a riposo vuol dire sempre la stessa cosa nel sito, cioe' questo rimando ti porta via dalla pagina. PRIMA (fino al 21/08/2026) era nera con una riga di 1px sotto, disegnata come sfondo con un gradiente invece che con text-decoration, per non toccare la coda della g ne' la freccia. Tolta perche' il blu dice gia' che si clicca, e la riga faceva pesare questa voce piu' di tutte le altre del menu. Se dovesse tornare, era: background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; no-repeat. */ .site-nav .nav-resume { color: var(--text-link); } .site-nav .nav-resume:hover { color: var(--text-link-hover); } /* Voci presenti ma non ancora raggiungibili: si vedono, si capisce che arriveranno, non fingono di essere link. Sono , non , cosi' nessuno ci clicca sopra a vuoto e i lettori di schermo lo dicono. */ .site-nav .nav-soon { color: var(--text-faint); cursor: default; } /* ---------- Home: apertura ---------- */ .intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4.4vw, 64px); align-items: start; padding-block: clamp(32px, 3.6vw, 56px) clamp(20px, 2.2vw, 28px); } .statement { font-size: clamp(38px, 5.7vw, 82px); line-height: var(--lh-display); color: var(--text-display); font-weight: var(--w-body); letter-spacing: var(--track-xl); } /* Il sottotitolo sotto la frase d'apertura, dal 20/09/2026. --muted-3 e non --text-secondary: sulla home non c'e' data-page, quindi --text-secondary varrebbe --ink-3, piu' scuro di quanto serva qui. */ .intro__lead { margin-top: clamp(16px, 1.6vw, 20px); font-size: clamp(17px, 1.5vw, 21px); line-height: var(--lh-lead); color: var(--muted-3); letter-spacing: var(--track-m); max-width: 38ch; } .timeline__row { display: grid; /* Anno, poi ruolo, poi azienda. La colonna dell'anno e' larga abbastanza per un intervallo tipo 2022/24, non solo per un anno singolo. */ grid-template-columns: 76px 1fr 1fr; gap: 16px; align-items: baseline; padding-block: 20px; border-bottom: 1px solid var(--ui-rule); /* La scatola sborda 14px a sinistra: serve al rettangolo grigio dell'hover, che deve partire prima del testo invece di incollarcisi. Margine negativo per la scatola, imbottitura uguale e opposta per tenere fermo il testo. Sta qui, su TUTTE le righe, e non sulle sole righe collegate a un progetto: il filetto e' largo quanto la scatola, quindi se una riga sola non avesse il margine il suo filetto partirebbe 14px piu' a destra e sarebbe piu' corto. Succedeva all'ultima riga, quella del Politecnico, che non e' collegata a nessun progetto. Spostare queste due righe altrove riapre il difetto. */ padding-left: 14px; margin-left: -14px; } .timeline__year { font-family: var(--font-mono); font-size: 14px; color: var(--text-faint); } /* Sulla riga del ruolo attuale l'anno resta grigio come tutti gli altri: il segno di "e' questo che faccio ora" e' passato dall'anno al ruolo, che e' l'informazione che si vuole leggere per prima. Il peso medio viaggia col colore, non in aggiunta: e' la stessa compensazione di .hi, un blu su bianco rende meno segno di un nero a parita' di peso. */ .timeline__row--current .timeline__role { color: var(--text-link); font-weight: var(--w-medium); } /* Il ruolo e' la voce forte: la storia qui e' la progressione, non il logo. L'azienda resta piccola e in grigio, come un riferimento. */ .timeline__role { font-size: clamp(16px, 1.4vw, 18px); letter-spacing: var(--track-m); } .timeline__org { font-size: 14px; color: var(--text-label); } /* SPENTO IL 20/09/2026, SU RICHIESTA DI NICOLA. NON CANCELLATO. Righe collegate a un progetto del carosello (attributo data-slide): passandoci sopra il mouse lo sfondo si schiariva e il progetto andava in evidenza nel carosello (carousel.js). La riga della formazione non ha data-slide, quindi niente cursore ne stato hover: resta inerte, come deciso, ma la sua geometria e' la stessa delle altre (vedi .timeline__row). Lo stato hover stava dentro @media (hover: hover) perche' su touch :hover resta appiccicato. Il collegamento e' sospeso, non rimosso: l'attributo data-slide resta nell'HTML e il codice resta qui sotto e in carousel.js. Per riaccendere servono due gesti, e vanno fatti tutti e due: togliere i commenti qui e rimettere TIMELINE_SYNC a true in carousel.js. Spento solo di qua, la riga si schiarirebbe al passaggio del mouse senza che succeda niente nel carosello; spento solo di la', il cursore a manina prometterebbe un'azione che non c'e'. */ /* .timeline__row[data-slide] { cursor: pointer; transition: background-color .2s ease; } @media (hover: hover) { .timeline__row[data-slide]:hover { background: var(--ui-sunken); } } */ /* ---------- Home: carosello lavori ---------- */ .work { padding-bottom: clamp(24px, 3vw, 40px); } /* Regola .work__head rimossa il 2026-08-02 insieme all'intestazione visibile della sezione lavori. Lo spazio sopra il carosello resta garantito dal padding-top di .carousel. */ .eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-label); /* Il peso va dichiarato qui, altrimenti lo decide il browser. La meta' di queste etichette sono

o

, e i titoli nascono in grassetto: quelle finivano a 700, mentre le stesse etichette scritte come testo normale (BACK TO in fondo alla pagina, le voci del menu) restavano a 400. Stessa classe, stesso carattere, due pesi diversi a seconda di come era scritto il codice. Peggio: di DM Mono il sito carica il 400 e il 500, il 700 non esiste. Il browser prendeva il 500 e ispessiva lui il disegno delle lettere. Tenendo il 400 come riferimento: il 500 vero porta il 119,2% di inchiostro, quel 700 fabbricato il 124,4%. A 11px si legge come un impasto. Tutti e sei i file di design dichiarano 400. Corretto il 20/09/2026, su richiesta di Nicola. Nessuno spostamento: DM Mono e' monospaziato, la larghezza delle lettere non dipende dal peso. */ font-weight: var(--w-body); } .carousel { overflow: hidden; padding-top: clamp(10px, 1.4vw, 18px); } /* Le card stanno tutte in posizione assoluta, sovrapposte al centro della traccia: il JavaScript le sposta con translateX e le scala in base alla distanza dal centro (vedi carousel.js). Traslano e crescono davvero, invece di cambiare solo larghezza restando ferme come nella fisarmonica precedente. L'altezza deve bastare alla card grande piu' la sua didascalia sotto. */ .carousel__track { --slide-gap: 30px; /* spazio costante fra i bordi di due card vicine, letto dal JavaScript */ position: relative; /* Il pavimento e' passato da 430 a 450 il 21/08/2026. Sotto i 1075px il 40vw scende sotto il pavimento, che quindi resta fermo mentre la card continua a crescere con la finestra (0.3vw): lo spazio per la didascalia si stringe da solo. Fra 1011 e 1021px la card di Nodes Now sforava di 3px e la traccia le tagliava l'ultima riga. Il ritaglio non si vede, il testo sparisce e basta. Con 450 il punto peggiore avanza 17px. Sopra i 1125px non cambia niente: li' comanda il 40vw. */ height: clamp(450px, 40vw, 520px); } .slide { position: absolute; left: 50%; top: 0; width: clamp(240px, 30vw, 440px); /* Origine in alto: scalando, le card restano allineate al bordo superiore invece di centrarsi in verticale con le cime sfalsate. */ transform-origin: center top; display: flex; flex-direction: column; text-align: left; font: inherit; color: inherit; background: none; border: 0; padding: 0; will-change: transform, opacity; transition: transform .6s cubic-bezier(.65, 0, .35, 1), opacity .5s ease; } .slide--link:hover .slide__name { color: var(--text-link); } /* Zoom appena accennato sull'immagine al passaggio del mouse (21/08/2026). Solo su .slide--link, cioe' le tre card che portano davvero a una pagina: il movimento diventa il modo in cui la fila dice dove si puo' cliccare, invece di promettere una pagina che non esiste su CER, CSC e ATM. Cresce l'immagine, non la card: la didascalia non si muove di un pixel e la geometria della fila resta quella calcolata dal JavaScript. Il taglio lo fa .slide__frame, che ha gia' overflow: hidden. Il 4% e' voluto piccolo. Le card sono in movimento quasi sempre e si scalano gia' per distanza dal centro: uno zoom generoso qui si sommerebbe a quello e sembrerebbe un salto. La transizione sta sull'immagine e non sull'hover, cosi e' simmetrica anche in uscita. transform e' composito, non rifa' il layout: non puo' far sfarfallare il carosello, che a ogni fotogramma ridisegna gia' sei card. Dal 27/08/2026 la card ATM contiene un