vive in layouts/base.njk (prima cosa nel body, prima della navbar), la logica in js/page-loader.js: velo a tinta unita che copre l'intera pagina (navbar inclusa: z-index 9999, sopra ai 40 della navbar) finche' la pagina non e' DAVVERO pronta E non e' passato un tempo minimo garantito (altrimenti su una pagina gia' in cache il velo sparirebbe troppo in fretta per essere percepito -- bug riscontrato da Anna: "non c'è nessun velo di caricamento"). Risolve anche, sulla homepage, il problema dei tempi di caricamento diversi delle immagini di sfondo: restano nascoste tutte insieme finche' non sono TUTTE pronte, invece di comparire una alla volta in ordine imprevedibile. */ .page-loader { position: fixed; inset: 0; z-index: 9999; background: var(--color-bg); pointer-events: none; opacity: 1; transition: opacity 0.6s ease; } .page-loader--hidden { opacity: 0; } @media (prefers-reduced-motion: reduce) { .page-loader { transition: none; } } .page { position: relative; min-height: 100vh; /* La navbar e' un overlay (position:fixed, sezione qui sotto), quindi non occupa piu' spazio "reale" nel flusso: questo padding-top ricrea lo spazio per lei in cima a ogni pagina, cosi' i contenuti non ci finiscono sotto. L'unica eccezione e' .hero della home, che lo annulla apposta per estendere il suo sfondo fin sotto la navbar (vedi sezione 4, HOMEPAGE). */ padding-top: var(--nav-height); } .container { max-width: var(--page-max-width); margin: 0 auto; padding-left: var(--page-padding); padding-right: var(--page-padding); } /* Figma: 528:840 "NavBar" — px-[120px] py-[48px]. Il valore di Figma per il blur di sfondo era 0.5px (quasi nulla); su richiesta di Anna è stato sostituito con un blur "progressivo": più intenso vicino al bordo superiore della navbar, che sfuma fino a zero verso il bordo inferiore. Così, quando un testo di pagina scrolla e comincia a "spuntare" da sotto la navbar, non si trova subito completamente sfocato (effetto brusco) — la sfocatura aumenta gradualmente solo mentre il testo scorre più in profondità sotto la navbar. Il colore/sfondo vive nello pseudo-elemento ::before qui sotto, separato dal contenuto (testo/link), che altrimenti verrebbe sfumato via insieme allo sfondo dalla maschera. */ /* Anna ("torniamo alla versione della navbar precedente a questa"): ripristinata la ricostruzione a 5 layer + fill sul modello Figma di Anna (h:136px poi ridotta a 116px, fill+blur progressivo separati in .navbar__blur-layer/.navbar__fill, vedi partials/navbar.njk), annullando il precedente ritorno alla versione con un solo pseudo- elemento (.navbar::before, blur fisso 14px). */ .navbar { /* position:fixed invece di sticky: la navbar diventa un vero overlay, sempre sopra al contenuto anche in cima alla pagina (prima, con sticky, "si attaccava" solo una volta superata la sua posizione naturale in-flow — che coincideva comunque con l'inizio pagina, quindi visivamente identico finora). Serve ora perche' lo sfondo della homepage deve estendersi ed essere visibile ANCHE sotto la navbar fin dal primo caricamento, non solo scrollando. Resta full-bleed (niente max-width qui) SOLO per questo: lo sfondo/blur deve coprire tutta la larghezza schermo, non solo la colonna centrale -- il contenuto vero e proprio (testi/link) e' invece dentro .navbar__inner qui sotto, che e' lui a allinearsi a .container. */ position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height); /* Anna: h:136px esatta dal suo Figma. */ z-index: 40; } /* Anna: "i testi della navbar sono allineati a sx/dx in modo diverso rispetto al testo delle pagine [su schermi più grandi del mio Mac]... il margine sx/dx della navbar deve aumentare all'aumentare dello schermo" -- prima .navbar applicava var(--page-padding) direttamente al bordo VERO dello schermo (essendo lei stessa position:fixed, full-bleed): su schermi più larghi del frame Figma (--page-max-width, 1728px) questo NON coincide più col bordo di .container, che invece smette di crescere oltre quella soglia e si centra (margin:0 auto) -- i due margini divergevano proprio li'. Fix: .navbar__inner replica ESATTAMENTE la stessa ricetta di .container (max-width + margin:0 auto + stesso padding-left/right), quindi i suoi bordi restano sempre identici a quelli del testo di pagina, qualunque sia la larghezza dello schermo -- non solo entro i 1728px del frame originale. display:flex/align-items/justify-content/padding verticale erano prima su .navbar stessa, spostati qui pari pari. */ .navbar__inner { display: flex; align-items: flex-start; justify-content: space-between; max-width: var(--page-max-width); margin: 0 auto; height: 100%; /* Anna: "ne ho fatto uno su Figma che mi piace di piu'" -- la storia di aggiustamenti su padding-top/bottom (40/48 -> 26.67/32 -> 20/62, vari giri di "riduci", "rendi piu' spesso", "aggiungi 30px sotto") e' superata: ora .navbar ha un'altezza fissa (h:136px, --nav-height). Poi: "il padding superiore deve essere di 24px" -- allineamento tornato ad flex-start + padding-top esplicito (non piu' align-items:center) cosi' il valore e' quello dettato da Anna, indipendente da quanto spazio resta sotto. */ padding: 30px var(--page-padding) 0; } /* Anna: "eliminiamo anche il backgroundblur della navbar e usiamo la stessa strategia del colore da 100 a 0 anche per quella" -- via tutto l'approccio a blur progressivo (5 layer con backdrop-filter impilati + velo piatto sopra, con l'estensione oltre il bordo per evitare la riga netta -- una tecnica necessaria SOLO per i backdrop-filter, che hanno un artefatto di rendering quando la maschera arriva a zero esattamente sul bordo del box). Sostituito con un unico rettangolo piatto (stessa ricetta di .hero__fade-overlay in sezione 4 HOMEPAGE): nessun blur, solo un gradiente lineare dell'ALPHA dello stesso colore #f7f7f7, dal 100% (opaco, vicino al testo della navbar) allo 0% (trasparente, in fondo alla navbar) -- direzione opposta a quella della homepage (li' si andava da 0 a 100 scendendo, qui da 100 a 0), stessa tecnica. Un semplice background (nessun backdrop-filter) non ha l'artefatto di bordo netto: puo' quindi restare esattamente dentro i confini della navbar (inset:0, nessuna estensione necessaria) senza alcun rischio di riga visibile, ed essendo un velo di colore (non un blur) non "sfoca" piu' nulla sotto di se' -- il problema del testo introduttivo di Sense-making/Reacting blurrato dalla navbar (che aveva richiesto di accorciare la zona di sfumatura fino a 100px) non si pone piu': qui sotto la navbar non c'e' piu' nessun blur da propagare. Markup: vedi partials/navbar.njk (un solo div .navbar__fill, non piu' 5 layer). */ .navbar__fill { position: absolute; inset: 0; z-index: -1; pointer-events: none; /* Anna: "vorrei che la sfumatura cominciasse più in basso e ci fosse più opacità sotto i testi della navbar, occupando però lo stesso spazio di adesso" -- il rettangolo resta grande esattamente quanto prima (inset:0, stessa altezza navbar). Due tentativi con una zona "piena" netta seguita da una rampa lineare (prima 65%, poi 35%) creavano pero' un gomito visibile nel punto esatto in cui la zona piatta finisce e la rampa comincia (derivata che cambia di colpo da zero a costante) -- Anna: "sembra solo che tu abbia spostato il gradino più in alto, voglio un gradino più diffuso". Fix: niente piu' un tratto piatto seguito da una rampa dritta, ma una curva a piu' tappe (stessa tecnica gia' usata altrove nel sito per le sfumature, es. .viz-page__intro-blur::before) che resta alta ma non perfettamente ferma nella prima meta', poi scende via via piu' ripida verso il centro e si distende di nuovo avvicinandosi allo zero: nessun punto in cui la pendenza cambia bruscamente, quindi nessun gomito percepibile, pur restando piu' opaca piu' a lungo (sotto il testo) di quanto non fosse la rampa dritta originale. */ background: linear-gradient( to bottom, rgba(245, 245, 243, 1) 0%, rgba(245, 245, 243, 0.97) 20%, rgba(245, 245, 243, 0.88) 35%, rgba(245, 245, 243, 0.7) 50%, rgba(245, 245, 243, 0.46) 65%, rgba(245, 245, 243, 0.24) 80%, rgba(245, 245, 243, 0.08) 92%, rgba(245, 245, 243, 0) 100% ); } /* Figma: 528:842 (istanza dentro NavBar) — Inter Tight Regular 24px, tracking 3%, line-height 24px (compatto). NB: nella navbar il wordmark è minuscolo ("Stubborn, nerfed, paranoid"); nell'hero della home è invece Title Case e molto più grande (vedi .hero__title). */ .navbar__brand { font-family: var(--font-display); font-weight: 400; font-size: var(--navbar-brand-size); line-height: 1; letter-spacing: var(--tracking-normal); text-decoration: none; /* Outline (.text-outline, sezione 5): 1px a riposo, ESPRESSO IN EM rispetto alla dimensione ATTUALE del font (var(--navbar-brand-size), 24px su desktop) così scala in proporzione quando il testo si rimpicciolisce in responsive: 1/24 = 0.0417em. In hover sale a 2px (2/24 = 0.0833em), sempre con lo stesso criterio di proporzionalità — vedi regola :hover qui sotto. */ --outline-width: 0.0417em; transition: text-shadow 0.2s ease; } .navbar__brand:hover { --outline-width: 0.0833em; } .navbar__links { display: flex; align-items: center; gap: 20px; list-style: none; margin: 0; padding: 0; /* Anna: "il titolo sembra più in alto" -- .navbar__inner usa align-items:flex-start, quindi titolo e link partono dallo stesso bordo superiore come CASELLE, ma ogni link (.navbar__links a) ha un padding-top di 8px (--nav-link-pad-y qui sotto, serve al calcolo della sottolineatura, non va toccato) che il titolo non ha: il testo dei link finiva quindi visibilmente più in basso. Margine negativo qui (sull'intera riga, non sui singoli link) compensa esattamente quegli 8px così i due testi tornano alla stessa altezza. NB: -8px è un valore fisso (non un var()) perché --nav-link-pad-y è dichiarata su .navbar__links a, un discendente — le custom property in CSS non risalgono dai figli al genitore. Se cambi 8px lì, aggiorna anche questo -8px. */ margin-top: -8px; } /* Figma: 528:845 ecc. — Inter Medium 16px (qui leggermente ridotto a var(--navbar-link-size), vedi TOKEN), line-height 24px. --nav-link-pad-y è lo stesso valore della padding verticale: serve alla sottolineatura qui sotto per calcolare la distanza reale dal testo (senza, "bottom" si misura dal bordo del padding, non dal testo, ed è per questo che sembrava "lontana" nonostante il valore fosse 1px). */ .navbar__links a { --nav-link-pad-y: 8px; display: inline-block; padding: var(--nav-link-pad-y) 0; font-family: var(--font-body); font-weight: 500; font-size: var(--navbar-link-size); /* Prima era 24px fisso: con il font ridotto a 15px lasciava ~4-5px di interlinea "invisibile" sopra e sotto il testo (24-15=9px, metà per lato), che si sommava al calcolo del padding qui sotto e teneva la sottolineatura lontana nonostante il valore fosse "1px". Con line-height proporzionale (1.2) l'interlinea in eccesso è minima e il calcolo torna preciso. */ line-height: 1.2; text-decoration: none; } .navbar__divider { display: inline-block; padding: 8px 0; opacity: 0.6; } /* Sottolineatura animata: a riposo niente linea; in hover CRESCE da sinistra verso destra; quando il mouse esce SPARISCE anch'essa da sinistra verso destra (non semplicemente al contrario). Il trucco: due transform-origin diversi a seconda dello stato — "left" mentre si cresce (in hover), "right" quando si torna a riposo. Dato che transform-origin non viene animato (solo "transform" ha una transition), il browser usa il nuovo origin per l'intera animazione di rimpicciolimento, che quindi si "richiude" verso destra: il lato sinistro sparisce per primo, il destro per ultimo, cioè sempre da sx a dx. Sulla pagina attiva resta fissa, niente animazione. NB: il bottone "Legend" NON usa più questa regola — ha la sua versione dedicata (.legend-toggle__label, qualche riga più sotto) che copre solo la parola "Legend" e non la freccia. Tenerlo qui duplicato causava proprio il bug della freccia sottolineata. */ .navbar__links a { position: relative; text-decoration: none; } .navbar__links a::after { content: ""; position: absolute; left: 0; right: 0; /* Distanza dal testo: un'unica variabile, così se vuoi ancora più vicina (o più staccata) basta cambiare questo numero. */ --underline-gap: 1px; bottom: calc(var(--nav-link-pad-y, 0px) - var(--underline-gap)); height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; /* stato di riposo/uscita: si richiude verso dx */ transition: transform 0.25s ease; } .navbar__links a:hover::after, .navbar__links a.is-clicking::after { transform: scaleX(1); transform-origin: left; /* comparsa: cresce verso dx */ } .navbar__links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; transition: none; } /* Bottone "sandwich" — nascosto di default, compare solo sotto i 768px (vedi media query più sotto). 3 barre che diventano una X quando aperto. Rimpicciolito su richiesta di Anna (prima 32px). */ .navbar__toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 20px; height: 20px; padding: 0; border: none; background: none; color: inherit; cursor: pointer; } .navbar__toggle span { display: block; width: 100%; height: 1.2px; background: currentColor; transition: transform 0.25s ease, opacity 0.2s ease; } .navbar__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.2px) rotate(45deg); } .navbar__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .navbar__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.2px) rotate(-45deg); } /* Sotto i 768px ("più piccolo di un iPad", che in portrait è tipicamente 768–834px) le voci del menu non hanno più spazio per stare in riga a una dimensione leggibile: si raccolgono in un pannello a tendina sotto la navbar, aperto/chiuso dal bottone sandwich qui sopra. */ @media (max-width: 768px) { .navbar__toggle { display: flex; } .navbar__links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; /* l'interlinea qui è tutta nel padding di ogni voce, vedi sotto */ background: var(--color-bg); padding: 0 var(--page-padding); max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; } .navbar__links.is-open { max-height: 320px; padding: 4px var(--page-padding) 16px; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.15); } .navbar__links a { width: 100%; font-size: 16px; /* in colonna c'è spazio: torna a una dimensione comoda da toccare */ /* Meno interlinea tra le voci impilate (prima 8px sopra/sotto = 16px tra due voci consecutive, ora 5px = 10px tra due voci). */ padding-top: 5px; padding-bottom: 5px; } /* Il separatore decorativo "––––" tra Reacting e About non ha senso impilato in verticale. */ .navbar__divider { display: none; } } /* 4. HOMEPAGE ---------------------------------------------------------------- */ /* margin-top negativo = annulla il padding-top che .page (sezione 3) mette in cima a ogni pagina per la navbar-overlay: cosi' .hero (e il suo sfondo) parte da y:0, estendendosi fin sotto alla navbar trasparente. padding-top qui dentro ripristina poi lo spazio per il TITOLO, che deve comunque restare sotto alla navbar e non nasconderlesi dietro. */ .hero { position: relative; margin-top: calc(-1 * var(--nav-height)); /* Anna: "distanza contenuto pagina-footer di 60px" -- il padding-bottom (18vh) si sommava al margin-top:60px del footer, producendo uno spazio ben piu' grande di 60px sulla homepage. Azzerato: la distanza dai tasti preview al footer e' ora data SOLO dal margin-top del footer stesso. */ /* Anna: le didascalie non devono essere tagliate -- con il parallasse i pallozzi scendono sotto il fondo di .hero (overflow:hidden): 160px di padding-bottom compensati dal margin-bottom negativo, cosi' la distanza dal footer non cambia. */ padding: calc(var(--nav-height) + 8vh) var(--page-padding) 160px; margin-bottom: -160px; text-align: center; overflow: hidden; } /* Composizione di immagini di sfondo, dati in src/_data/homepageBg.json (sezione 4 del README ha i dettagli). Posizionate in percentuale rispetto a .hero: restano proporzionate a qualunque larghezza, non c'e' bisogno di ricalcolare nulla nei breakpoint responsive. */ /* Anna, sequenza di apertura homepage (dopo vari tentativi con le immagini di sfondo animate -- dissolvenza, deblur -- che risultavano "a scatti" per via del peso delle immagini enormi, e poi "sgranate" una volta ridimensionate per alleggerire l'animazione: Anna ha deciso di eliminare l'animazione delle immagini e tenerle a piena risoluzione): 1. navbar e 4 immagini di sfondo sono gia' presenti da subito, nessuna animazione (Anna: "le immagini non compaiono, sono gia' li' insieme alla navbar"); 2. poi titolo+sottotitolo, alla velocita' che avevano gia' (800ms di distanza tra i due, stessa cadenza parola-per-parola); 3. poi, INSIEME, il testo introduttivo e i 2 tasti-preview. Titolo/sottotitolo e testo introduttivo/tasti-preview restano agganciati alla classe .hero--loaded (aggiunta via JS sull'evento "load" della finestra, vedi index.njk), cosi' il loro t=0 e' sempre "pagina davvero pronta", non il momento in cui il CSS viene applicato. */ .hero__bg-item { position: absolute; z-index: 0; pointer-events: none; will-change: transform; /* Anna: "opacità delle immagini di sfondo all'85%". */ opacity: 0.85; /* Anna: "fai la navbar piu' corta di 20px, ma fai come il background scorresse piu' in alto di 20px senza modificare il suo aspetto" -- .hero si sposta in giu' di 20px per via del margin-top legato a --nav-height (vedi .hero qui sopra), e queste immagini (posizionate in assoluto rispetto a .hero) si sposterebbero in giu' insieme a lui. Il compenso di -20px NON puo' stare qui in CSS: lo script di parallasse in fondo a index.njk sovrascrive style.transform su questi elementi ad ogni scroll (anche a scrollY=0), cancellerebbe subito questo valore -- il -20px e' quindi dentro la formula di quello script, non qui. */ } /* Titolo e sottotitolo (.reveal-word, sezione 9): l'animazione parola- per-parola parte "da sola" appena reveal-text.js aggiunge gli span (script condiviso da altre pagine, non tocchiamo la sua logica). La teniamo in pausa (animation-play-state:paused blocca anche il conteggio del proprio animation-delay, non solo il fotogramma) finche' non arriva .hero--loaded -- cosi' data-reveal-delay="0"/"800" su h1/p (index.njk) e' contato da quel momento (pagina caricata), non da quando la pagina viene disegnata. */ .hero__title .reveal-word, .hero__tagline .reveal-word { animation-play-state: paused; } .hero--loaded .hero__title .reveal-word, .hero--loaded .hero__tagline .reveal-word { animation-play-state: running; } .hero__bg-item img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Segnaposto (finche' non c'e' il PNG reale in "src"): stesso ingombro e posizione, pattern a puntini invece dell'immagine. */ .hero__bg-item--placeholder { border-radius: 50%; background-image: radial-gradient(currentColor 2px, transparent 2.4px); background-size: 14px 14px; color: var(--color-accent); opacity: 0.55; } /* Anna: "centra il titolo nel viewport verticalmente" + "il testo introduttivo deve essere fuori dal viewport quando apro la homepage" -- questo blocco centra .hero__heading al suo interno. min-height sottrae il padding-top che .hero (sezione qui sopra) mette GIA' sopra questo blocco (calc(nav-height + 8vh)): senza sottrarlo il blocco risultava piu' alto di un intero schermo, e centrare un elemento dentro un box piu' alto del previsto lo spingeva visibilmente verso il basso (bug segnalato da Anna: "il titolo non e' centrato, e' allineato in basso") -- ora il box corrisponde esattamente allo spazio rimasto nel primo schermo, quindi il centraggio e' quello vero. */ .hero__above-fold { position: relative; z-index: 2; min-height: calc(100dvh - (var(--nav-height) + 8vh)); display: flex; align-items: center; justify-content: center; } /* Avvolge titolo+tagline in un blocco largo quanto la riga piu' larga del titolo (width: fit-content): la tagline, con max-width:100% qui sotto, non puo' mai superare quella larghezza e va a capo prima invece di allungarsi per conto suo. */ .hero__heading { width: fit-content; max-width: 100%; margin: 0 auto; /* Anna: dimensione del blocco titolo+sottotitolo al 90% -- transform (non un semplice cambio di font-size) cosi' tutto il blocco -- testo, spaziatura tra titolo e tagline, spessore dell'outline (in em, quindi legato al font-size) -- si riduce insieme, mantenendo le stesse proporzioni. "tira su il titolo di 30px" poi "spostalo un pochino piu' in alto" (-30px -> -50px): translateY PRIMA di scale nell'elenco, cosi' lo spostamento resta in px reali sullo schermo, non scalato insieme al resto (l'ordine conta: le funzioni si applicano da destra a sinistra). */ transform: translateY(-60px) scale(0.9); /* Anna: "in hover su titolo e sottotitolo il cursore deve restare freccia" -- niente I-beam del testo selezionabile. "Sposta poco piu' in alto il blocco": -50px -> -70px. */ cursor: default; } .hero__heading * { cursor: default; } /* Figma: 528:818 — Inter Tight Regular 140px, line-height 140px (nessuno spazio extra tra le righe), tracking 3%. Il peso è Regular, non Bold: l'effetto "pieno" viene dal doppio layer con contorno (.text-outline, sezione 5) che Anna ha fatto in Figma. Nota per Anna: il tool che leggo da Figma (conversione in Tailwind) non riesce a portare via il valore ESATTO dello spessore di quel contorno — Tailwind non ha una classe nativa per lo stroke del testo, quindi Figma Dev Mode lo scarta in fase di conversione. È esattamente il tipo di valore che conviene prendere tu da Dev Mode (proprietà "stroke" del testo, sezione destra) e incollare qui sotto in --outline-width. */ .hero__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(50px, 8.5vw, 126px); /* Anna: "riduci leggermente l'interlinea del titolo" -- era 1 (Figma: 140px/140px, nessuno spazio extra tra le righe), ora leggermente sotto per avvicinare le 3 righe. */ line-height: 0.9; letter-spacing: var(--tracking-normal); margin: 0 0 32px; /* --outline-width: ...px; <- valore esatto da Figma Dev Mode, se diverso dal default */ /* In hover lo stroke sale a 8px (0.0571em = 8/140, riferito alla dimensione piena desktop): scala in proporzione col resto del testo a ogni breakpoint, stessa logica di .navbar__brand. */ transition: text-shadow 0.2s ease; /* Comparsa parola per parola come tutti gli altri testi principali del body (vedi .reveal-word, sezione 9): data-reveal-text in index.njk. (In precedenza c'era un'animazione di blur-in a blocco unico, tolta su richiesta di Anna.) */ } .hero__title:hover { --outline-width: 0.0571em; } /* Figma: 528:882 "Mapping human-AI relations..." — Inter Tight Regular 30px, tracking 1% (nota: qui il tracking è quello "tight", diverso dal resto dei testi). */ .hero__tagline { font-family: var(--font-display); font-weight: 400; font-size: clamp(16px, 2.07vw, 27px); line-height: 1.4; letter-spacing: var(--tracking-tight); margin: 0; /* Non puo' mai superare la larghezza del titolo: vedi .hero__heading (width: fit-content) qui sopra. */ max-width: 100%; /* Outline 0.5px (0.0167em = 0.5/30, riferito alla dimensione piena desktop), proporzionale come il resto. Va aggiunta anche la classe .text-outline in index.njk perche' questa regola scatti. */ --outline-width: 0.0167em; } /* Anna: "elimina il backgroundblur della homepage, crea un rettangolo largo quanto lo schermo di colore #f7f7f7 che inizia ad opacita' 0% appena sotto il sottotitolo e progressivamente arriva al 100%, raggiungendo il 100% sopra l'inizio del testo introduttivo, restando al 100% per il resto della homepage verso il basso" -- sostituisce l'intero effetto precedente (velo bianco + backdrop-filter blur, sfumato con una maschera) con un rettangolo PIATTO (nessun blur): un solo gradiente lineare dell'ALPHA del colore stesso, da trasparente a pieno #f7f7f7, niente piu' backdrop-filter/mask-image. Copre l'intero .hero (inset:0, che essendo .hero position:relative/overflow:hidden coincide sempre con la sua altezza reale, quindi il tratto "100% per il resto della homepage" e' automatico: il rettangolo si estende fino in fondo a .hero, che contiene tutto il contenuto della home). Sta SOPRA le immagini di sfondo (.hero__bg-item, z-index:0) ma SOTTO al testo/bottoni (.hero__above-fold/.hero__intro/.hero__previews, tutti z-index:2) grazie al suo z-index:1, invariato dalla versione precedente. --fade-start (bordo inferiore del sottotitolo) e --fade-end (bordo superiore del testo introduttivo) sono impostati via JS (vedi lo script in fondo a index.njk) come distanza reale in px dal bordo superiore di .hero, misurati con getBoundingClientRect cosi' restano corretti a qualunque dimensione di schermo/testo -- niente piu' stime a percentuale. I fallback (400px/700px) valgono solo per il brevissimo istante prima che lo script giri. */ .hero__fade-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( to bottom, rgba(245, 245, 243, 0) 0px, rgba(245, 245, 243, 0) var(--fade-start, 400px), rgba(245, 245, 243, 1) var(--fade-end, 700px), rgba(245, 245, 243, 1) 100% ); } /* Anna: "aggiorna il contenuto sotto il titolo con quanto e' presente nel Figma" (nodo 885:2). .hero__intro raggruppa ora TUTTO il contenuto sotto il titolo: colonna di testo larga 732px centrata (Inter Tight 32px/40px, tracking 1%, blu), placeholder video, collage di 5 post Reddit, due pallozzi-bottone con didascalia. Spaziature dal Figma: 80px tra testo e immagine/collage che lo seguono, 160px dopo. */ .hero__intro { position: relative; z-index: 2; /* Anna: "il rettangolo segnaposto deve essere largo quanto la colonna di testo" -- l'intero blocco e' largo 6 colonne reali della griglia (732px a 1728px), quindi testo, placeholder, collage e pallozzi condividono la stessa larghezza a qualunque schermo. */ width: calc((min(100vw, var(--page-max-width)) - 2 * var(--page-padding) - 264px) / 2 + 120px); --col8: calc((min(100vw, var(--page-max-width)) - 2 * var(--page-padding) - 264px) * 2 / 3 + 168px); max-width: 100%; margin: calc(12vh + 140px) auto 0; padding: 0; text-align: left; font-family: var(--font-display); font-weight: 400; /* Anna: "il corpo del testo e' troppo grande, vai a 24px con interlinea 28" (nel Figma era 32/40). */ /* Anna: "allora fai testo 18 interlinea 20" (prima 24/28, nel Figma 32/40). */ /* Anna: "fai corpo del testo 20px con interlinea 24" (prima 18/20). */ font-size: 20px; line-height: 24px; letter-spacing: 0.01em; color: var(--color-blue); /* Compare in dissolvenza dopo titolo+sottotitolo (vedi il blocco .reveal-word, sezione 9): opacity:0 di riposo, animazione vera solo sotto .hero--loaded, cosi' il delay e' contato da t=0 (pagina caricata). */ opacity: 0; } .hero--loaded .hero__intro { animation: hero-fade-in 0.5s ease forwards; animation-delay: 1600ms; } @keyframes hero-fade-in { to { opacity: 1; } } /* Anna: "riduci la larghezza della colonna di testo a 2 colonne di layout in meno, una a dx e una a sx" -- 6 colonne della griglia a 12 (Anna: "vai a 6"; 4 era troppo stretto) (colonna = (contenuto - 11*24px)/12): 4 colonne + 3 gap. Il testo resta centrato nella colonna da 732px che contiene anche video/collage/ pallozzi, che non cambiano. */ .hero__text { /* NB: il 100% di una percentuale qui sarebbe la larghezza di .hero__intro (732px), non del contenuto di pagina -- per questo si parte dalla larghezza reale del contenuto (viewport - padding). */ width: calc((min(100vw, var(--page-max-width)) - 2 * var(--page-padding) - 264px) / 2 + 120px); margin: 0 auto; cursor: default; } .hero__text b { font-weight: 700; } /* Spaziature verticali tra i blocchi (Figma, frame 1728px): 80px da un testo all'elemento visivo che lo segue, 160px dall'elemento visivo al testo successivo. */ /* Anna: "riduci il padding sopra e sotto un pochino" -- 80px -> 64px e 160px -> 120px. */ /* Anna: 3 blocchi testo+immagine; distanza x tra testo e la sua immagine, 2x tra l'immagine e il testo del blocco successivo (x = 80px). */ .hero__intro { --gap-x: 80px; } .hero__text + .hero__video-placeholder, .hero__text + .hero__posts, .hero__text + .hero__previews { margin-top: var(--gap-x); } .hero__video-placeholder + .hero__text, .hero__posts + .hero__text { margin-top: calc(2 * var(--gap-x)); } /* Placeholder del video (Figma: 731x451, #d9d9d9) -- da sostituire. */ .hero__video-placeholder { /* 8 colonne, centrato rispetto alla colonna di testo (6) */ width: var(--col8); max-width: 100vw; margin-left: calc((100% - var(--col8)) / 2); aspect-ratio: 731 / 451; background: var(--color-grey-placeholder); } /* Collage dei 5 post Reddit (Figma 894:97): box di 1093x435 centrato (piu' largo della colonna di testo), ogni post e' posizionato in % rispetto al box cosi' scala in proporzione. Contorno nero 1px come nel Figma. */ .hero__posts { position: relative; /* Anna: "le immagini devono occupare solo 6 colonne, non essere piu' larghe del testo" -- era 1093px (piu' larga della colonna): ora occupa la larghezza della colonna (6 colonne), stesse proporzioni. */ width: var(--col8); margin-left: calc((100% - var(--col8)) / 2); aspect-ratio: 1093 / 435; } .hero__post { position: absolute; display: block; border: 1px solid #000; box-sizing: border-box; max-width: none; } .hero__post--1 { left: 13.17%; top: 40.92%; width: 48.03%; height: 59.08%; } .hero__post--2 { left: 34.58%; top: 0; width: 51.97%; height: 22.07%; } .hero__post--3 { left: 0; top: 16.55%; width: 51.97%; height: 21.15%; } .hero__post--4 { left: 48.03%; top: 36.55%; width: 51.97%; height: 16.78%; } .hero__post--5 { left: 60.38%; top: 58.39%; width: 32.48%; height: 23.68%; } /* Pallozzi-bottone alle due visualizzazioni (Figma: cerchi di 250px con didascalia 18px/24px sotto, due colonne di 354px a 24px di distanza). */ .hero__previews { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .hero__preview-col { display: flex; flex-direction: column; align-items: flex-start; } .hero__preview-col--blue { color: var(--color-blue); } .hero__preview-col--pink { color: var(--color-pink); } /* Anna: "applica ai pallozzi la stessa interazione delle viz" poi "voglio che solo il testo sopra si ingrandisca, il pallozzo resta fermo" -- in hover cresce solo la label (1.2x, come nelle viz). */ .hero__preview { position: relative; display: block; align-self: center; width: min(250px, 100%); aspect-ratio: 1; margin-bottom: 48px; border-radius: 50%; text-decoration: none; transition: transform 0.2s ease; } .hero__preview-image { position: absolute; inset: 0; display: block; } .hero__preview-image img { width: 100%; height: 100%; object-fit: contain; display: block; } .hero__preview-label { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 28px; letter-spacing: 0.03em; --outline-width: 0.03em; transition: transform 0.2s ease; } .hero__preview:hover .hero__preview-label { transform: scale(1.2); } .hero__preview-label__text { position: relative; display: inline-block; isolation: isolate; } /* Anna: "outline bianco intorno ai testi dei pallozzi" -- copia del testo (data-text) dietro all'originale, con solo il contorno bianco. */ .hero__preview-label__text::before { content: attr(data-text); position: absolute; inset: 0; z-index: -1; color: #fff; -webkit-text-stroke: 10px #fff; paint-order: stroke fill; text-shadow: none; stroke-linejoin: round; pointer-events: none; } .hero__preview-caption { margin: 0; width: 100%; font-size: 16px; line-height: 20px; letter-spacing: 0.01em; cursor: default; } @media (max-width: 900px) { .hero__intro { padding: 0; width: 100%; --col8: 100%; } .hero__text { width: 100%; } .hero__previews { grid-template-columns: 1fr; } .hero__preview-col { align-items: center; } .hero__preview-caption { width: 100%; } } /* 5. VIZ (area della visualizzazione) ----------------------------------------- */ /* L'intera pagina viz (titolo + diagramma + pannello caso) è vincolata all'altezza dello schermo: niente scroll per vedere il diagramma intero. Il footer resta subito sotto, raggiungibile scrollando se serve. */ .viz-page { position: relative; display: flex; flex-direction: column; height: calc(100dvh - var(--nav-height)); padding-top: 6px; /* più vicino alla navbar (era 20px) */ padding-bottom: 20px; } .viz-page__header { flex: 0 0 auto; /* Griglia a 12 colonne: il testo introduttivo occupa le colonne 1-9 (comprese), la definizione le colonne 1-6 (comprese, riga 2), il bottone Legend le colonne 10-12 allineato a destra sulla riga 1 con la STESSA BASELINE del titolo (align-items:baseline). row-gap: 16px e' la distanza REALE, costante, tra il testo del titolo e quello della definizione -- misurata dal testo vero, non da uno spazio riservato dentro il titolo (quello era l'errore prima: Anna, "quello che ti ho chiesto di dimezzare non era un padding, era lo spazio lasciato per la riga di testo quando il testo occupa più righe" -- riservare spazio DENTRO al titolo/definizione per il caso peggiore creava un vuoto visibile sotto un testo più corto). Il pezzo che DEVE restare fisso e' invece dove comincia il diagramma sotto: min-height (impostato via JS, reserveHeaderHeight in viz.js) blocca l'altezza di QUESTO contenitore al caso peggiore assoluto -- 3 righe di titolo + 16px + 3 righe di definizione, Anna: "la viz dovra' stare alla massima distanza possibile" -- cosi' il diagramma non si sposta mai, qualunque sia la lunghezza REALE del testo in un dato momento. align-content:start (invece del default, che su alcuni motori CSS puo' STIRARE le righe della grid per riempire lo spazio in piu' anziche' lasciarlo vuoto in fondo) fa si' che l'eventuale spazio avanzato tra la fine della definizione vera e il bordo inferiore riservato resti vuoto DOPO la definizione, senza allargare né il titolo né la definizione stessi. */ display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 16px; align-items: baseline; align-content: start; } /* Applicata a ENTRAMBE le pagine (vedi il tag

in reacting.njk E in sense-making.njk -- Anna: "fai che anche introtext di sense-making si comporta in questo stesso modo", quindi non e' piu' "Reacting soltanto" come nel giro precedente). Anna (rifinitura finale, testo originale riferito a Reacting ma ora valido per entrambe): "Tratta il blocco introblock come uno sticky, ma non legend. Solo il testo introduttivo e la definizione sono sticky." -- .legend-wrap e' un fratello INDIPENDENTE (vedi reacting.njk / sense-making.njk), fuori da .viz-page__header, quindi resta in flusso normale e scorre via con la pagina. Perche' .viz-page diventa una griglia (non piu' flex) per queste pagine: .viz-page__header e .legend-wrap devono restare AFFIANCATI sulla stessa riga/baseline (come a riposo, invariato visivamente), ma .viz-page__header deve anche avere un contenitore "alto" per la sua posizione sticky -- per funzionare per TUTTA la lunghezza della pagina (il diagramma puo' essere molto piu' alto di uno schermo), il "contenitore" giusto e' .viz-page stesso (che con .viz-page--scroll ha height:auto, quindi alto quanto header+diagramma insieme), NON un header-wrapper piu' corto -- per questo header/legend/body sono ora TUTTI e tre item diretti della STESSA griglia (righe diverse: riga 1 header+legend, riga 2 il diagramma), invece di stare header dentro un altro contenitore. */ .viz-page--sticky-header { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: baseline; } /* .viz-page__header (Reacting): ora contiene SOLO .viz-page__intro-blur (titolo+definizione, vedi reacting.njk) -- non piu' un proprio grid a 12 colonne al suo interno (non serve piu': ha un solo figlio, che occupa tutta la sua larghezza). E' LUI ad avere min-height (via JS, reserveHeaderHeight in viz.js, invariato) e a diventare sticky: - grid-column:1/10 nella griglia ESTERNA di .viz-page-sticky-header (le stesse 9 tracce che aveva il solo titolo prima). - top: calc(--nav-height + 6px) = la stessa identica distanza a cui si trova già oggi A RIPOSO (.viz-page ha padding-top:6px) -- lo sticky si "aggancia" dal primissimo pixel di scroll, senza scatti, e la mantiene COSTANTE per sempre dopo. - z-index:35, tra .navbar (40) e tutto il resto del contenuto di pagina (diagramma, pallozzi, z-index:auto) -- risultato: lo sfondo sfocato di .viz-page__intro-blur qui dentro (sotto) sta SOTTO la navbar, SOPRA tutto il resto, esattamente come richiesto. */ .viz-page--sticky-header .viz-page__header { /* display:block sovrascrive il grid a 12 colonne della regola base (quella regola resta come fallback per qualunque pagina viz senza .viz-page--sticky-header) -- qui header ha un solo figlio (.viz-page__intro-blur, vedi sotto), che riempie semplicemente il 100% della sua larghezza in flusso normale, senza bisogno di alcun grid interno. */ display: block; grid-column: 1 / 10; grid-row: 1; align-self: start; position: sticky; top: calc(var(--nav-height) + 6px); z-index: 35; } /* .legend-wrap: item DIRETTO della stessa griglia esterna di .viz-page__header (non piu' figlio suo) -- stessa colonna/riga di sempre (10/13, riga 1), quindi a riposo appare ESATTAMENTE come prima. Anna (rifinitura successiva): "rendi anche legend sticky con introtext" -- ora e' sticky ANCH'ESSO, con lo stesso top di .viz-page__header cosi' restano affiancati sulla stessa riga per tutta la durata dello scroll, esattamente come lo sono a riposo (prima invece scorreva via con la pagina, vedi commento superato qui sotto). z-index qui sotto: il rettangolo di sfondo/blur di .viz-page__intro-blur (vedi piu' sotto) e' largo quanto tutto lo schermo e passa ANCHE sotto quest'area (Anna: "passa sotto legend"), quindi .legend-wrap ha bisogno di un proprio z-index piu' alto di quello di .viz-page__header (35), altrimenti -- essendo ora anche lui positioned (sticky) ma dichiarato DOPO nel DOM -- il suo ordine di stacking non e' garantito sopra quello dell'header. 36 = un solo passo sopra i 35 dell'header, cosi' il bottone Legend resta sempre leggibile sopra al blur. */ .viz-page--sticky-header .legend-wrap { grid-column: 10 / 13; grid-row: 1; align-self: start; position: sticky; top: calc(var(--nav-height) + 6px); z-index: 36; } .viz-page--sticky-header .viz-page__body { grid-column: 1 / 13; grid-row: 2; } /* viz-page__intro-blur: wrapper interno a .viz-page__header, attorno a SOLO titolo+definizione. Ha una sua griglia interna a 9 colonne (non 12) per titolo(riga1)/definizione(riga2) -- 9 tracce con lo stesso column-gap (24px) di quella esterna a 12 producono tracce della STESSA identica larghezza in pixel (N*W + (N-1)*G = larghezza totale; qui la larghezza totale e' la stessa, 9 colonne esterne, quindi W torna identico), percio' le regole .viz-page__title (grid-column:1/10 = tutte e 9 le tracce) e .viz-page__definition (grid-column:1/7 = 6 di 9 tracce) NON hanno bisogno di essere toccate. ALTEZZA REALE (auto, non min-height, a differenza di .viz-page__header che invece riserva SEMPRE il caso peggiore): quando la definizione e' vuota/nascosta resta alta solo quanto il titolo; quando compare una definizione vera, si allarga -- Anna: "quando compare la definizione, questo rettangolo di background blur diventa più alto, andando in basso 36px oltre la fine del testo della definizione." Per questo lo sfondo/blur (sotto, ::before) vive su QUESTO elemento e non direttamente su .viz-page__header. */ .viz-page--sticky-header .viz-page__intro-blur { position: relative; display: grid; grid-template-columns: repeat(9, 1fr); column-gap: 24px; row-gap: 16px; align-content: start; } /* Lo sfondo/blur vero e proprio vive in questo pseudo-elemento (stessa tecnica di .navbar::before e di .legend-panel::before), NON sul contenitore stesso, per poterlo estendere OLTRE il testo senza spostarlo (titolo/definizione restano allineati pixel-per-pixel alle colonne) e per applicare una maschera sfumata senza tagliare via il testo vero (che e' un fratello di questo pseudo, non dentro). Anna (rifinitura finale), i quattro lati: - top: sborda verso l'alto fino a "finire sotto la navbar" -- risale di (nav-height + 6px), che porta esattamente a y:0 (il bordo superiore della navbar), + un margine extra cosi' da finire davvero SOTTO di lei, non solo toccarne il bordo. Invisibile comunque sotto la navbar stessa (z-index 40, piu' alto). - left E right: Anna (rifinitura successiva): "fai che il rettangolo backgroundblur di introtext e' largo quanto tutto lo schermo e passa sotto legend" -- entrambi i lati ora usano lo stesso overshoot enorme (-100vw), tagliato via al vero bordo dello schermo da overflow-x:hidden su (sezione 2 BASE), che e' un ancestor. Il rettangolo passa quindi anche sotto .legend-wrap (che per restare leggibile sopra ha un proprio z-index piu' alto, vedi il commento su .viz-page--sticky-header .legend-wrap qui sopra). - bottom: eccede oltre il bordo REALE (non il caso peggiore) del testo attualmente visibile, della stessa misura della zona di sfumatura qui sotto (64px) -- vedi il commento su .viz-page__intro-blur sopra per il perche' funziona automaticamente quando compare la definizione. mask-image a DUE livelli (verticale + orizzontale) con mask-composite:intersect, stessa tecnica di .legend-panel::before: sfuma su TUTTI E QUATTRO i lati (Anna: "tutti i lati che diminuiscono progressivamente di opacità... come fa la navbar... come anche fa la legenda"). Anna (rifinitura successiva): "vorrei che lo stacco... fosse ancora più sfumato e meno netto" -- due cambi rispetto a prima (era un singolo gradiente lineare 0->36px): 1. zona di sfumatura allargata, 36px -> 64px per lato; 2. curva ad accelerazione variabile (5 stop intermedi, non piu' un solo gradiente lineare) che replica esattamente la stessa "forma" della sfumatura di .navbar::before (stessa progressione di opacità 0/0.14/0.36/0.62/0.88/1, qui semplicemente percorsa in 64px invece che sull'intera altezza navbar) -- risultato uno stacco molto più morbido, coerente con l'altra sfumatura di pagina invece di un semplice fade lineare. A sinistra/destra la sfumatura non si vede mai in pratica (tagliata via dal clip dello schermo), in alto e' coperta dalla navbar: resta comunque la stessa regola per tutti e quattro i lati, senza casi speciali. Anna ("si crea un leggero gradino tra i due backgroundblur, come se la fine della navbar si sovrapponesse al bg blur... quando dovrebbero essere in continuità"): la sfumatura d'apertura in ALTO (verso la navbar) arrivava a piena intensità già 64px dopo l'inizio del box -- cioe' a y≈44px nella viewport (box inizia a y≈-20, nascosto sotto la navbar) -- mentre il blur della navbar (col vecchio approccio a 5 layer) era ancora forte fino a y≈90-100px: tra 44 e 100 i due si sommavano (doppio blur), poi sparendo di colpo la navbar a 100 l'intensita' totale scendeva bruscamente. Fix di allora: la sfumatura restava a zero fino a y≈70, poi saliva a piena intensita' proprio nella finestra in cui la navbar sfumava via (70->100), passandosi il testimone nello stesso intervallo. Anna (dopo aver eliminato il blur della navbar, sostituendolo con un velo piatto a gradiente di opacita'): "adesso abbiamo un altro problema: gestire lo stacco tra navbar aggiornata e background blur dei testi introduttivi... estendere il bg blur più in su rispetto al testo introduttivo, mandandolo sotto la navbar fino a Y=0 dello schermo". Motivo: la navbar non blurra piu' nulla, e' solo un velo di colore che diventa via via piu' trasparente scendendo -- nella zona in cui e' trasparente, prima si vedeva il contenuto SOTTO di lei ancora nitido (il blocco sticky era trasparente li', partiva a piena intensita' solo a y≈70-100), creando uno stacco di nitidezza (nitido sotto la navbar che sfuma -> sfocato sotto). Fix: il blocco sticky e' ormai OPACO fin dall'inizio del suo box (gia' oltre lo schermo, a y≈-20, quindi invisibile prima di y=0) -- niente piu' tratto trasparente ne' rampa iniziale: da y=0 in giu' il contenuto dietro la navbar e' SEMPRE gia' sfocato, quindi qualunque punto in cui la navbar diventa trasparente rivela sfondo gia' sfocato, non piu' nitido. La sfumatura in BASSO (verso il diagramma sotto, non legata alla navbar) resta invariata (64px), quindi il gradiente verticale non e' simmetrico: i due lati sono scritti con valori distinti. */ .viz-page--sticky-header .viz-page__intro-blur::before { content: ""; position: absolute; top: calc(-1 * (var(--nav-height) + 6px + 20px)); left: -100vw; right: -100vw; bottom: -64px; z-index: -1; background: rgba(247, 247, 247, 0.45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 64px), rgba(0, 0, 0, 0.88) calc(100% - 48px), rgba(0, 0, 0, 0.62) calc(100% - 34px), rgba(0, 0, 0, 0.36) calc(100% - 21px), rgba(0, 0, 0, 0.14) calc(100% - 10px), transparent 100%), linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.14) 10px, rgba(0, 0, 0, 0.36) 21px, rgba(0, 0, 0, 0.62) 34px, rgba(0, 0, 0, 0.88) 48px, #000 64px, #000 calc(100% - 64px), rgba(0, 0, 0, 0.88) calc(100% - 48px), rgba(0, 0, 0, 0.62) calc(100% - 34px), rgba(0, 0, 0, 0.36) calc(100% - 21px), rgba(0, 0, 0, 0.14) calc(100% - 10px), transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 64px), rgba(0, 0, 0, 0.88) calc(100% - 48px), rgba(0, 0, 0, 0.62) calc(100% - 34px), rgba(0, 0, 0, 0.36) calc(100% - 21px), rgba(0, 0, 0, 0.14) calc(100% - 10px), transparent 100%), linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.14) 10px, rgba(0, 0, 0, 0.36) 21px, rgba(0, 0, 0, 0.62) 34px, rgba(0, 0, 0, 0.88) 48px, #000 64px, #000 calc(100% - 64px), rgba(0, 0, 0, 0.88) calc(100% - 48px), rgba(0, 0, 0, 0.62) calc(100% - 34px), rgba(0, 0, 0, 0.36) calc(100% - 21px), rgba(0, 0, 0, 0.14) calc(100% - 10px), transparent 100%); mask-composite: intersect; } /* Rimpicciolito su richiesta di Anna rispetto al valore Figma (era 36px) e vincolato alle colonne 1-9 (vedi .viz-page__header sopra) invece che a un max-width fisso. */ .viz-page__title { /* Colonne 1-9 comprese (Anna) = 9 track = dalla linea di griglia 1 alla 10, non alla 9 (che fermerebbe la colonna 9 esclusa, solo 8 track). */ grid-column: 1 / 10; grid-row: 1; font-family: var(--font-display); font-weight: 300; /* Anna: "fallo di corpo 28 con interlinea 32" -- valori fissi, non più clamp responsive (era clamp(20px, 1.7vw, 28px) / line-height 1.3). */ font-size: 28px; line-height: 32px; letter-spacing: var(--tracking-normal); margin: 0; } .viz-page__title b, .viz-page__title strong { font-weight: 500; } .viz-page__title .is-adjective { font-weight: 500; /* Anna: "la frase introduttiva mantiene l'outline stroke nell'underline, non voglio che l'underline sia più spesso, deve rimanere senza stroke". text-decoration:underline was NOT enough even after nesting the outline (.text-outline) onto an INNER span (see buildTitle in viz.js): Chrome still let that inner span's text-shadow (the outline halo, see .text-outline below) bleed into the outer decoration line. border-bottom is a completely different paint mechanism (box model, not text-decoration/text-shadow), so it structurally cannot pick up a descendant's shadow, whatever Chrome's exact propagation behaviour is for the other technique. display:inline-block makes the border-box (and its padding-bottom, the 4px gap Anna asked for) actually count towards this line's height, instead of just overflowing invisibly the way inline elements' vertical padding does. */ display: inline-block; text-decoration: none; /* Anna: 0.5px -> 1px (probabilmente arrotondato a invisibile da Chrome, i border sub-pixel non renderizzano in modo affidabile a tutti gli zoom/DPI) -> 2px. */ border-bottom: 2px solid currentColor; padding-bottom: 2px; } .viz-page__definition { /* Colonne 1-6 comprese (Anna) = 6 track = dalla linea di griglia 1 alla 7. La distanza dal titolo sopra e' il row-gap: 16px di .viz-page__header, non un margin qui. */ grid-column: 1 / 7; grid-row: 2; margin: 0; /* Anna: "corpo 16 e interlinea 20" per il testo della definizione (ridotto da un iniziale 20/24). */ font-size: 16px; line-height: 20px; /* Nessun min-height qui apposta: l'elemento e' alto quanto il suo testo VERO (Anna sta accorciando ogni definizione per stare entro 3 righe a questa impaginazione) -- lo spazio per il caso peggiore (3 righe) e' riservato dal CONTENITORE (.viz-page__header, min-height via JS), non da questo elemento, altrimenti un testo più corto lascerebbe di nuovo un vuoto sotto se stesso invece che comprimersi naturalmente. display:-webkit-box + line-clamp resta comunque una rete di sicurezza: un testo più lungo di 3 righe viene troncato, non trabocca oltre lo spazio riservato dal contenitore. */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; /* Niente attributo HTML "hidden" (display:none, che lo toglierebbe dal flusso): resta sempre nel layout, cambia solo visibility, cosi' l'aggiunta della definizione al click non sposta mai il testo sotto di lei (che qui non c'e' comunque altro, ma per coerenza col titolo). */ visibility: hidden; } /* Occupa le 3 colonne intere (10-12) — non solo la larghezza del bottone — cosi' il pannello della legenda qui sotto puo' essere largo esattamente 3 colonne. Il bottone dentro si allinea a destra da solo via flexbox (justify-content:flex-end), visivamente identico a prima. */ .legend-wrap { grid-column: 10 / 13; grid-row: 1; display: flex; justify-content: flex-end; position: relative; } /* Figma: 569:292 (chiuso, freccia ↖) / 611:295 (aperto, freccia ↙) — Inter Tight BOLD 16px, line-height 20px, tracking 3%, uppercase. */ .legend-toggle { display: inline-flex; align-items: baseline; gap: 6px; background: none; border: none; padding: 0; font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 18px; letter-spacing: var(--tracking-normal); text-transform: uppercase; color: inherit; cursor: pointer; } .legend-toggle__label { position: relative; } .legend-toggle__label::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; /* praticamente a contatto col testo (prima -1px) */ height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; /* riposo/uscita: si richiude verso dx, stessa logica della navbar */ transition: transform 0.25s ease; } .legend-toggle:hover .legend-toggle__label::after, .legend-toggle.is-clicking .legend-toggle__label::after { transform: scaleX(1); transform-origin: left; /* comparsa: cresce verso dx */ } .legend-toggle[aria-expanded="true"] .legend-toggle__label::after { transform: scaleX(1); transform-origin: left; transition: none; } /* Freccia della legenda: stesso trattamento delle frecce dell'indice about (nessun outline a riposo, cresce in hover della stessa quantita', 1.5px). */ .legend-toggle [data-legend-arrow] { --outline-width: 0; transition: text-shadow 0.2s ease; } .legend-toggle:hover [data-legend-arrow] { --outline-width: 1.5px; } /* Ancorata a .legend-wrap (non più a .viz-page): si riposiziona da sola qualunque sia la posizione del bottone. Il CONTENUTO (i .legend-item, vedi padding sotto) è largo esattamente le 3 colonne di .legend-wrap (10-12); il pannello stesso si estende OLTRE quelle 3 colonne di --legend-air su ogni lato — margine negativo bilanciato da un padding della stessa misura — per dare respiro al contenuto senza restringerlo. z-index sotto quello della navbar (40): scorrendo la pagina il pannello deve passarci SOTTO, non sopra. Niente bordo: solo sfondo semi-trasparente + blur, come la navbar. */ .legend-panel { --legend-air: 24px; --legend-air-bottom: 40px; /* più aria sotto l'ultimo blocco che sugli altri lati */ position: absolute; top: calc(100% + 10px); left: calc(-1 * var(--legend-air)); right: calc(-1 * var(--legend-air)); font-family: var(--font-display); font-size: 15px; border-radius: 8px; padding: var(--legend-air) var(--legend-air) var(--legend-air-bottom) var(--legend-air); z-index: 30; } /* Sfondo + blur separati in uno pseudo-elemento (stessa tecnica di .navbar::before) cosi' possiamo sfumarne i bordi con una maschera SENZA sfumare anche il testo sopra: niente piu' rettangolo netto, il pannello si dissolve gradualmente verso il blur su tutti e 4 i lati. */ .legend-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 8px; background: rgba(247, 247, 247, 0.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%), linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%), linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); mask-composite: intersect; } /* Ogni voce (adjective/cluster ecc.) è un blocco immagine+testo: immagine a sx larga 1/3, definizione a dx larga 2/3, più blocchi impilati uno sotto l'altro. L'immagine è centrata nel suo terzo, il testo allineato a sx (come richiesto). */ .legend-item { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; align-items: start; text-align: left; } .legend-item + .legend-item { margin-top: 16px; } /* Anna: immagini reali in src/images/legend-images/ (sensemaking-1/2, reacting-1/2/3 -- gia' texture/outline/blob dei pallozzi/cluster/aspetti reali, sfondo trasparente) al posto del cerchio placeholder colorato di prima. Niente crop/border-radius: le immagini hanno gia' la propria forma (alcune sono un cerchio pieno, altre un contorno tratteggiato, altre una macchia irregolare per "system aspect") -- object-fit:contain le mostra intere, senza tagliarle né deformarle. */ .legend-item__media { width: 60%; aspect-ratio: 1 / 1; margin: 0 auto; /* centrata nel suo terzo di colonna */ } .legend-item__media img { width: 100%; height: 100%; object-fit: contain; display: block; } .legend-item__text { margin: 0; } /* Il

con

forzato su riga propria). Solo le due etichette hanno l'outline (0.5px, via --outline-width inline su ciascuna, vedi .text-outline). */ .viz-fixed-panel--info p { font-family: var(--font-display); /* "Inter Tight" */ font-weight: 400; /* regular */ font-size: 16px; line-height: 20px; margin: 0; } /* 4px tra "User request" e "Model behaviour" -- solo sopra il secondo paragrafo, non sopra il primo. */ .viz-fixed-panel--info p + p { margin-top: 4px; } /* Blocco 2 (citazione): Inter Tight LIGHT, corpo 24/interlinea 28, outline 0.5px su tutto il testo (impostato inline in viz.js, non solo sulle etichette come nel blocco 1). */ .viz-fixed-panel--quote blockquote { font-family: var(--font-display); font-weight: 300; /* light */ font-size: 24px; line-height: 28px; margin: 0; } /* Riga previous/next: e' anche il punto di ancoraggio dell'intero gruppo (block1.col/row in panelLayouts.js -- vedi il commento in renderFixedPanelsGrid, viz.js). Font Inter (non Inter Tight), semi-bold, maiuscolo, corpo 12. */ .panel-nav { display: flex; align-items: baseline; gap: 24px; font-family: var(--font-body); /* "Inter" */ font-weight: 600; /* semi-bold */ font-size: 12px; letter-spacing: var(--tracking-normal); text-transform: uppercase; } /* Anna: "i tasti sono un po' difficili da cliccare, vorrei che diventassero dei veri e propri tasti" -- prima le "[ ]" erano solo caratteri di testo attorno alla freccia (vedi viz.js), non un vero riquadro cliccabile: ora un bordo reale di 1px racchiude l'intero