:root { --bar-w: 1px; /* Palette: directing/editing/about condividono lo stesso blu notte quasi nero ("midnight cobalt", non nero assoluto); musing è l'unica eccezione, rosso scuro profondo — è la sezione che si "accende" rispetto alle altre. */ --c-directing: #000103; --c-editing: #000103; /* **Musing è carta.** Era `#1f0303`, rosso notte, per tutta la costruzione del sito: dal 10 agosto la sezione ha un fondo chiaro, ed è l'unico — non c'è più un secondo stato né un interruttore. Resta l'eccezione fra le quattro sezioni, solo nell'altra direzione: le altre tre sono notte, questa è giorno. Il valore è quello della carta, e passa da `--c-paper` invece di essere riscritto: la superficie è la stessa del segnaposto di DUST GIRL e della card che chiede un pensiero, e devono restare la stessa cosa. */ --c-musing: var(--c-paper); --c-about: #000103; /* **Il rosso notte che era il fondo di musing** fino al 10 agosto, quando quella pagina è passata alla carta. È sopravvissuto in about, dove era il colore che si intravedeva fra una foto del ritratto e l'altra — scelto lì *perché* era il rosso di musing, cioè un rimando fra due pagine. Quando musing è diventata carta il rimando è caduto, e il 17 agosto è caduto anche il colore: il riquadro del ritratto è passato al bianco, insieme al filo del suo hover. **Le due variabili rosse non le usa più nessuno**, e restano dichiarate qui e basta. Non sono un residuo da ripulire: sono l'unico punto del foglio in cui è scritto quanto costa quel rosso, ed è una misura che è servita due volte. `--c-ember` non si vede come tratto (1,07:1 su `--c-base`, cioè nulla: è nato come colore di SFONDO di una pagina); `--c-musing-line` è lo stesso rosso alzato di chiarezza fino a 1,95:1, che come linea da un pixel si vedeva ma appena — ed è il motivo per cui è uscito. Provati a confronto, ingranditi 3x su fondo di pagina: #5c1111 (1,53) è ancora un sussurro, #b52626 (3,25) è già acceso. Se serve di nuovo un rosso, la scala sta qui e non va rifatta. */ --c-ember: #1f0303; --c-musing-line: #7a1717; /* Base scura del documento: evita il flash bianco tra una pagina e l'altra. Ogni pagina ripete il proprio colore in uno style inline su , perché l'attributo viene applicato prima che styles.css sia scaricato. */ --c-base: #000103; /* Fallback di sicurezza: testo NERO. Vale solo se non porta nessuna classe theme-* (tutte le pagine ne hanno una statica, quindi in pratica non dovrebbe mai servire). Nero perché l'unico sfondo non noto in anticipo è il video della home, che è chiaro: nel dubbio si legge nero su chiaro, mai bianco su chiaro. Non invertirlo senza aver riletto CLAUDE.md § Contrasto. */ --ink: #000000; --ink-dim: rgba(0, 0, 0, 0.65); /* Bordi interni dei due blocchi fissi ai lati: dove finisce la nav a sinistra e dove cominciano i testi ruotati a destra. Sono stime di ripiego — initFixedEdges() in script.js le sostituisce con le misure vere, perché la larghezza di quei blocchi dipende dal testo e dal font. Le usano la colonna del mosaico e il breadcrumb, che devono risultare centrati sulla stessa cosa. */ /* --- Superficie "carta" --- Bianco sporco e il suo nero, definiti come COPPIA: dove va uno va l'altro, e su questa superficie il nero è scritto a mano perché --ink qui è bianco (le pagine sono theme-dark) e non c'entra niente. Non è bianco netto per una ragione già stabilita: accanto alle superfici morbide del sito il #fff sembra carta fotografica in mezzo a carta da lettera. **Ed è neutro, non più panna** (era `#f6f3ed`, cioè nove punti di blu in meno degli altri due canali). Il motivo non è di gusto ed è misurato: il bianco della **home** — che è l'unica altra superficie chiara del sito — è perfettamente neutro, R=G=B in ogni punto, campionato sui pixel resi del video di sfondo. Fra due pagine chiare una panna e una neutra il salto si vedeva passando dall'una all'altra, e la panna era musing. Portata qui la media della home, `#f6f6f6`. **Da sapere per il giorno in cui si tocca il video**: quel bianco non è un colore ma un fotogramma — va da 240 a 254 attraverso il frame, più chiaro a destra, e cambia con la clip. `#f6f6f6` ne è la media, non un valore che si possa rileggere da qualche parte. Se `bg.mp4` viene riesportato con un'altra gradazione, questa riga va ricampionata (§ HANDOFF, Come guardare le pagine). Lo usano il fondo di musing e la tile segnaposto di DUST GIRL. Sta qui, e non nei due posti, perché cambiarlo deve essere una riga sola e non una caccia: le due cose condividono il colore per scelta, non per caso. */ --c-paper: #f6f6f6; --c-paper-ink: #14100e; /* --- La misura che centra i due blocchi fissi nella loro fascia nera --- Una sola distanza, usata DUE volte per lato: quanto il blocco fisso dista dal bordo del foglio, e quanto il mosaico dista dal blocco. Le due cose uguali sono esattamente la condizione perché il blocco risulti centrato nella fascia fra il bordo del foglio e l'inizio dei video — non c'è nessun calcolo da fare, e resta vero a qualunque larghezza di finestra, perché la fascia cresce di quanto cresce il mosaico. Perciò: se cambi questo numero cambiano insieme la posizione della nav, quella dei link laterali e la larghezza della colonna. Se ne cambiassi uno solo (per esempio riportando la nav a 6vw, dov'era) i blocchi tornerebbero fuori asse. */ --gutter: 64px; /* La stanghetta e il suo spazio, presi insieme. Servono come misura perché la centratura si fa sul TESTO, non sul blocco: la barra è 1px, di inchiostro non ne ha, e contarla dentro sposta la parola di 4,5px fuori asse — si vede. I due blocchi fissi arretrano quindi di questa misura verso il bordo del foglio, e la barra resta fuori dal conto, appoggiata al bordo. */ --bar-gap: 8px; --bar-lead: calc(var(--bar-w) + var(--bar-gap)); --nav-edge: calc(6vw + 66px); --side-edge: 60px; --content-center: 50%; /* senza JS: centro finestra, come prima */ } /* --- Tema testo adattivo: lo script.js imposta una di queste classi su in base alla luminosità dello sfondo (video/immagine) o, sulle pagine con sfondo piatto noto, la classe è scritta staticamente nel markup. --- */ html.theme-dark { --ink: #ffffff; --ink-dim: rgba(255, 255, 255, 0.65); } html.theme-light { --ink: #000000; --ink-dim: rgba(0, 0, 0, 0.65); } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } /* Base scura su : è la superficie che il browser dipinge mentre la vecchia pagina viene scaricata e la nuova non ha ancora reso il proprio sfondo. Senza questo si vede il bianco di default a ogni navigazione. color-scheme:dark allinea anche il canvas e gli elementi di sistema (scrollbar). */ html { background: var(--c-base); color-scheme: dark; } body { background: var(--c-base); color: var(--ink); /* Lo stack sans del sito, e si scrive **in un modo solo**: per un periodo è esistito anche come `'Helvetica Neue', Helvetica, Arial, sans-serif`, in sei punti su dodici. Rendevano identico — su macOS "Helvetica" è un alias di Arial, misurato — quindi non si vedeva, ma erano due scritture della stessa cosa e prima o poi sarebbero divergute. Unificate il 19 agosto. */ font-family: 'Helvetica Neue', Arial, sans-serif; position: relative; overflow-y: auto; overflow-x: hidden; } /* Pagine a schermo pieno senza scroll (home, musing) */ body.no-scroll { overflow: hidden; } /* --- Sfondo --- */ /* **Il poster non è un attributo, è questo sfondo**, e la ragione è che i poster sono DUE — uno per formato, come i video (vedi i due in index.html). L'attributo `poster` invece è uno solo e non si può condizionare a una media query, quindi con due fondi diversi mostrerebbe per forza quello sbagliato su uno dei due. Il risultato visivo è identico: il video è opaco e con `object-fit: cover` riempie la stessa scatola, quindi appena decodifica un fotogramma copre lo sfondo — esattamente quello che faceva il poster. Il browser scarica **solo** l'immagine la cui regola vale. La soglia è la stessa dei (`1/1`, più alto che largo) e le due cose vanno cambiate INSIEME: un poster orizzontale sopra un video verticale si vedrebbe per il secondo che passa fra il primo pixel e il primo fotogramma. */ .bg-media { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; /* mai #fff: sarebbe un lampo bianco mentre il video carica */ background-color: var(--c-base); background-image: url('bg.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; } @media (max-aspect-ratio: 1/1) { .bg-media { background-image: url('bg-vert.jpg'); /* **Il ritaglio resta centrato.** Per un giorno è stato al 30%, per allontanare le clip dalla nav quando la firma era in cima: le clip del montaggio verticale sono tutte centrate su x 613,5 del fotogramma (misurato su dieci campioni), cioè 73,5px a destra del centro. Tornata la firma al bordo, quello spostamento non serve più. Se dovesse riservire, il verso è controintuitivo: `object-position` sposta la *finestra di ritaglio*, non la clip, quindi per allontanare dalla nav si **scende** sotto il 50%, non si sale. Il pavimento è 18%, dove il bianco a destra scende ai 16px del gutter; a 0% la clip tocca il bordo destro dello schermo. */ } } /* Il video di sfondo è cliccabile: click al centro schermo mette in pausa/riprende esattamente sul frame corrente (vedi script.js). */ video.bg-media { cursor: pointer; } /* Sfondo piatto (directing, editing, musing, about) */ .bg-flat { position: fixed; inset: 0; width: 100%; height: 100%; } /* Blocco colore pieno mostrato in hover sulla nav: sostituisce visivamente lo sfondo reale (video/foto/pagina) senza anticipare il contenuto vero. */ .hover-color-block { position: fixed; inset: 0; opacity: 0; transition: opacity 0.25s ease; pointer-events: none; /* **2, non 1**: deve passare davanti anche al filtro, che sta a 1. Sopra ci restano solo le cose che devono restare leggibili mentre il blocco è acceso — nav, link laterali, social e l'anteprima — che sono a 2 come lui ma vengono dopo nel markup. */ z-index: 2; } .hover-color-block.visible { opacity: 1; } .hover-color-block[data-color="directing"] { background: var(--c-directing); } .hover-color-block[data-color="editing"] { background: var(--c-editing); } .hover-color-block[data-color="musing"] { background: var(--c-musing); } /* **Il blocco chiaro non si dissolve: appare.** È l'unico dei quattro che costringe il testo a invertirsi (nero su carta, mentre gli altri tre restano bianco su notte), e una dissolvenza incrociata fra due stati opposti passa per il punto in cui **coincidono**: a metà strada il fondo è grigio medio (123,122,120) e le voci di nav, che hanno la loro transizione di 0,2s sul colore, sono a metà fra bianco e nero (128,128,128). Contrasto misurato in quel punto: **1,09:1**, cioè la nav sparisce per un decimo di secondo — proprio la voce su cui il cursore sta sopra. Si vedeva su tutte le pagine, ma su about, che è una pagina di testo su un fondo piatto, l'intera superficie diventava grigia e sembrava un difetto (ed era un difetto). Togliendo la transizione **al solo blocco chiaro** il fondo salta diretto alla carta, e quello che resta è il testo che passa da bianco a nero sopra la carta: il suo punto peggiore è grigio medio su carta, **3,9:1**, che si legge. Uscendo, specularmente, grigio medio sul fondo notte, 5,3:1. Gli altri tre blocchi tengono la dissolvenza: fra scuro e scuro il testo resta bianco dall'inizio alla fine e non c'è nessun punto di mezzo da attraversare. **Se un domani un'altra sezione diventa chiara, questa regola vale anche per lei** — e la coppia da tenere insieme è sempre la stessa: `colorTheme` in `script.js` e questa riga. */ .hover-color-block[data-color="musing"] { transition: none; } .hover-color-block[data-color="about"] { background: var(--c-about); } /* --- Anteprima all'hover sulla nav --------------------------------------- Una clip sola, uguale su tutte e quattro le voci: non è l'anteprima di *dove stai andando* (a quello pensa il colore, che è diverso per sezione), è la sola cosa che compare quando tocchi la nav. Per questo non c'è nessuna pesca casuale e nessun `data-` da tenere allineato — il file sta scritto in un punto solo, in `script.js`. **Il riquadro non ha fondo, ed è il punto.** La clip è nera per quasi tutta la sua superficie, quindi sui tre fondi notte i bordi non si vedono e quello che resta è il punto di luce, come se fosse ritagliato. Un `background` qui — fosse anche `--c-base` — glieli restituirebbe. Su musing, che è carta, il quadrato invece si vede: è l'unica sezione dove ha una forma, ed è accettato. 200×200: la clip è 720×720, quindi il riquadro è quadrato e non ritaglia niente (`object-fit: cover` è lì per il giorno in cui la clip cambia rapporto, non per ritagliare questa). Sta su `--content-center` come tutto quello che appartiene alla colonna dei contenuti — 17px a destra del centro della finestra — e a `z-index: 2`, sopra il blocco colore che è 1. La nav è 2 anche lei, ma sta a sinistra e non si sovrappone: l'ordine nel markup basta. `.visible` non la mette l'hover: la mette l'evento `playing` del video (vedi `initNavPreview()`). Col preload a `none` il primo passaggio deve prima scaricare, e comparire subito vorrebbe dire un riquadro vuoto sul colore pieno — che qui si vedrebbe più che nel mosaico, dove sotto c'è sempre la copertina. */ .nav-preview { position: fixed; left: var(--content-center, 50%); top: 50%; width: 200px; height: 200px; transform: translate(-50%, -50%); z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.25s ease; } .nav-preview.visible { opacity: 1; } .nav-preview video { display: block; width: 100%; height: 100%; object-fit: cover; background: transparent; } /* --- Navigazione --- */ .main-nav { position: fixed; /* Non 6vw: la distanza dal bordo del foglio è la stessa che il mosaico tiene dalla nav, ed è quello che la centra nella fascia nera (vedi --gutter). Il --bar-lead tira fuori la stanghetta dal conto: a essere centrate sono le parole. */ left: calc(var(--gutter) - var(--bar-lead)); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 20px; z-index: 2; } .nav-item { display: flex; align-items: center; gap: var(--bar-gap); text-decoration: none; color: var(--ink-dim); } .nav-bar { width: var(--bar-w); height: 9px; background: var(--ink-dim); /* `margin` sta nella transizione insieme a `height`, e **non è decorativo**: la regola accesa più sotto alza la barra a 14 e le fa restituire 5px al flusso con un margine negativo. Se solo l'altezza fosse animata, il margine scatterebbe subito a -2,5 e per due decimi di secondo la riga si **rimpicciolirebbe** — il difetto che stiamo togliendo, al contrario. Animate tutte e due con la stessa durata e la stessa curva, l'altezza esterna resta 9 a ogni fotogramma: h = 9 → 14 m = 0 → −2,5 → h + 2m = 9 sempre, perché entrambe lineari. **Se un giorno una delle due cambia durata o easing, l'invariante salta.** */ transition: height 0.2s ease, margin 0.2s ease, background 0.2s ease; } .nav-label { font-size: 11px; letter-spacing: 0.4px; transition: color 0.2s ease; white-space: nowrap; } /* La barra accesa: all'hover, col fuoco da tastiera, e sulla voce della pagina in cui sei. Sale da 9 a 14 — è il segno che dice "questa" e "sei qui". **`margin-block: -2.5px` è quello che le impedisce di spostare la pagina.** La barra disegna 14px ma ne occupa 9, cioè quanti ne occupava da spenta: la riga non cresce, la nav non cresce, e le voci sotto non si muovono. Senza, il difetto era doppio e c'era da sempre: - **all'hover la nav tremava.** È centrata con `translateY(-50%)`, quindi i 3px in più si aprivano 1,5 sopra e 1,5 sotto e **tutte** le voci si spostavano ogni volta che il puntatore ne toccava una. Sul computer erano 3px su 110 e non si notava; in verticale sono 3 su 92 e si vede. - **la nav era più alta sulle quattro pagine con una voce corrente** (95 contro 92 in verticale, 110 contro 108 sul computer): passando dalla home ad about il blocco cambiava misura, ed è quello che si vedeva a occhio. Provate anche: la barra ferma a 11 (segnale dimezzato) e più spessa invece che più alta (sposta l'etichetta di 1px, perché allarga la riga). Questa non costa niente — misurato, **nessun numero cambia rispetto a una voce spenta tranne la barra resa**. La strada che sembra ovvia, `position: absolute`, **non va**: uscendo dal flusso la barra si porta via anche gli 8px di `--bar-gap` e l'etichetta le scivola addosso. */ .nav-item:hover .nav-bar, .nav-item:focus-visible .nav-bar, .nav-item[aria-current="page"] .nav-bar { height: 14px; margin-block: -2.5px; background: var(--ink); } /* La voce della sezione in cui sei resta accesa. Da quando i chooser non ci sono più la nav è l'unica navigazione del sito, ed è l'unica cosa in pagina che dice dove sei: il breadcrumb ha lasciato il posto al filtro, e il colore di sfondo è lo stesso su directing, editing e about. Il trattamento non è nuovo — è quello dell'hover, tenuto acceso. */ .nav-item[aria-current="page"] .nav-label { color: var(--ink); } .nav-item:hover .nav-label, .nav-item:focus-visible .nav-label { color: var(--ink); } .nav-item:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; } /* --- Link laterali: "directed by lorenzofiale" (-> homepage, sempre presente) e "previous" (-> un livello sopra, assente in home), stesso stile ruotato --- */ /* Colonne parallele, non una sotto l'altra: row-reverse tiene "directed by lorenzofiale" (primo nel markup) attaccato al bordo destro e mette "previous" alla sua sinistra. align-items:center li centra verticalmente tra loro. */ .side-links { position: fixed; /* Stessa misura del lato opposto, e per la stessa ragione: a restare centrato fra la fine dei video e il bordo del foglio è il TESTO, con la stanghetta fuori dal conto (vedi --gutter e --bar-lead). Meno --sbw, cioè la larghezza della barra di scorrimento: `right` si misura dal bordo dell'AREA UTILE, che sulle pagine che scorrono finisce prima della barra, mentre l'occhio confronta col bordo dello schermo. Senza la sottrazione lo stesso blocco cadeva a 64px dal bordo in home e su musing (che non scorrono) e a 79 su directing, editing e about — e la nav, ancorata a sinistra, non se ne accorgeva: il difetto si vedeva su una colonna sola. La misura la scrive initFixedEdges(); dove la barra è a scomparsa (macOS di serie) vale 0 e non cambia niente. Il blocco resta comunque a 40px dalla barra, non ci va sotto. */ /* **Niente --bar-lead qui**, e non è una dimenticanza: quella misura serviva a tirare fuori dal conto la stanghetta, che adesso non c'è più. Tolta la stanghetta e lasciata la sottrazione, il testo scivolerebbe di 9px verso il bordo del foglio. Così invece il TESTO resta esattamente dove stava, a --gutter dal bordo — che è l'invariante di questa pagina, e vale ancora identica per la nav dall'altro lato, che la stanghetta ce l'ha e continua a scontarla. */ right: calc(var(--gutter) - var(--sbw, 0px)); top: 50%; transform: translateY(-50%); display: flex; flex-direction: row-reverse; align-items: center; gap: 14px; z-index: 2; } /* **Il link è solo testo ruotato: la stanghetta è uscita il 20 agosto**, e su tutto il sito, non solo in verticale. C'era per una ragione scritta — *un testo ruotato al bordo dello schermo, senza, sembra una firma e basta* — e la ragione era vera quando il segno serviva a dire "si preme". Vale la pena tenere cos'era, perché è una misura: 1px di larghezza, alta 9px a riposo e 14 all'hover, cioè lo stesso rapporto 9/11 della nav, che il suo segno ce l'ha ancora. **Quello che resta a dire che si preme è l'inchiostro che si accende all'hover**, che è la stessa cosa che fanno i social e le voci del filtro. */ .side-link { display: flex; align-items: center; text-decoration: none; cursor: pointer; } .side-link-text { writing-mode: vertical-rl; font-size: 11px; letter-spacing: 0.5px; color: var(--ink-dim); transition: color 0.2s ease; } .side-link:hover .side-link-text, .side-link:focus-visible .side-link-text { color: var(--ink); } .side-link:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; } /* --- Link social, centrati in basso: "instagram | email" --- **La barra non è il `//` del sito, ed è una distinzione voluta.** Il `//` lega parti di una cosa sola — anno, testata e titolo di una voce di press; nome della sezione e opzioni del filtro — mentre qui ci sono due destinazioni diverse, che non compongono niente insieme. Un segno per unire, uno per separare. Vale su tutte e due le pagine che hanno questa riga, home e about: le classi sono le stesse, e il carattere sta nel markup di ognuna — se cambia, cambia in due posti. --- */ .social-links { position: fixed; /* **Sull'asse della finestra, ed è l'unico caso del sito.** Ovunque altrove il centro è --content-center (il punto di mezzo fra i due blocchi fissi), che a 1440 cade a 737 invece che a 720: la nav è più larga dei testi ruotati, quindi lo scarto è costante e vale (--nav-edge − --side-edge)/2 = 17px. Qui vince la finestra perché **sotto c'è il video**, e il riquadro dipinto dentro bg.mp4 è centrato sul fotogramma: su --content-center questa riga si leggeva fuori asse rispetto all'unica cosa che si vede in pagina. **Ed è gratis, da quando about non ha più la sua riga in fondo**: i social di about stanno di fianco alla mail (vedi .contact-social), quindi non c'è più nessun altro oggetto in questo slot con cui questa riga possa disallinearsi. Prima invece la stessa riga saltava di 17px passando da una pagina all'altra, ed era un difetto vero. Le sigle di musing stanno sì in fondo al centro e sì su --content-center, ma sono un altro oggetto — non è la stessa riga che si sposta. **Se un domani about rimette una riga social in fondo, queste due tornano a dover stare sullo stesso asse** e la scelta va rifatta. */ left: 50%; bottom: 24px; transform: translateX(-50%); /* **1 come il filtro, non 2 come la nav**: in hover sulla nav questa riga va coperta dal blocco colore (che sta a 2), o resterebbe l'unica cosa al centro insieme all'anteprima — e le due non sono nemmeno sullo stesso asse (17px, vedi sopra). Sotto il blocco, home si comporta come le altre quattro: restano la nav e "directed by lorenzofiale", e basta. Sopra l'1 non c'è niente da scavalcare: la home non scorre e il video di fondo è fisso e viene prima nel markup. */ z-index: 1; display: flex; align-items: baseline; gap: 5px; white-space: nowrap; font-size: 11px; letter-spacing: 0.4px; } .social-sep { color: var(--ink-dim); } .social-link { text-decoration: none; color: var(--ink-dim); transition: color 0.2s ease; /* **Il bersaglio cresce in altezza, il testo e la riga no.** L'inchiostro e' alto 13px e la scatola era esattamente quella: un tocco un filo sopra o sotto cadeva fuori. Con 12px per lato passa a **37px**. **Il padding e' annullato da un margine negativo uguale**, ed e' quello che lo rende gratis: la scatola cresce per il dito, il flusso non se ne accorge. Serviva perche' questa riga sta in due posti che reagirebbero in due modi diversi — in home e' ancorata con `bottom: 24px`, quindi il padding sotto spingerebbe l'inchiostro in su; su about sta in una colonna flex, quindi allungherebbe la colonna di sinistra e **sposterebbe la soglia di impilamento**, che va rimisurata a ogni cambio li' dentro (§ About). Annullandolo non succede ne' l'una ne' l'altra cosa, e la regola resta una sola per tutti e due i posti. E' la stessa costruzione del padding orizzontale delle voci del filtro. */ padding-block: 12px; margin-block: -12px; } .social-link:hover, .social-link:focus-visible { color: var(--ink); } .social-link:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; } /* --- Breadcrumb (pagine di contenuto/leaf) --- */ /* Stessa tipografia delle intestazioni di about (.about-block h2): maiuscoletto 12px, tracking largo, peso 500. Il markup resta minuscolo, il maiuscolo è solo di resa (text-transform). */ /* --- La velatura in cima, e vale su tutti e due i formati ------------------------- **Nata per il verticale il 22 agosto, estesa al computer il 24**, e la ragione e' una misura: sul computer non c'era mai stata, e il filtro e' fisso mentre il mosaico gli scorre sotto. Su tutti gli scorrimenti raggiungibili, con l'inchiostro composto sul fondo: directing nome sezione 1,00:1 nel peggiore, 25,1% sotto 4,5 directing opzioni 1,00:1 nel peggiore, 29,0% sotto 4,5 editing nome sezione 1,04:1 nel peggiore, 54,9% sotto 4,5 editing opzioni 1,03:1 nel peggiore, 76,5% sotto 4,5 Cioe' su editing il filtro era illeggibile per tre quarti della pagina. Si vedeva a occhio solo sopra il foglio bianco di DUST GIRL, che e' il caso limite, ma il difetto era generale: bastano le copertine chiare di short docs. **Le misure del verticale reggono qui senza toccarle**, ed e' il motivo per cui la regola e' una sola invece di due: il filtro cade alla stessa y sui due formati (nome 22-42, opzioni 46-66), quindi vede la stessa alfa — 0,736 e 0,718 — e su un fondo quasi bianco da' 10,2:1 e 5,07:1. **Il prezzo, dichiarato**: la fascia scurisce i primi 220px di qualunque cosa stia li' sotto, e su un segnaposto — che e' carta bianca — si vede come una sfumatura grigia in cima al foglio. Non e' un secondo difetto da chiudere: **e' il modo in cui il primo si chiude**. L'unica cosa che lo attenua e' che la velatura sia lunga e morbida invece che corta e scura, che e' gia' cosi'. Sta su `.content-page` perche' ce l'hanno solo directing ed editing, cioe' le sole pagine dove sotto quella fascia scorre un'immagine: su about il fondo e' piatto, su musing non si scorre, in home non c'e' filtro. Un pseudo `fixed` dentro un elemento non trasformato si ancora al viewport, quindi resta fermo mentre il mosaico scorre. **0,76 e' costato tre misure, e le prime due erano sbagliate.** Vale la pena tenerle, perche' l'errore e' ripetibile: 1. **0,56** — contava l'inchiostro come bianco pieno. Ma `--ink-dim` e' bianco al 65%, e un inchiostro semitrasparente si porta il fondo dentro di se': piu' il fondo e' chiaro, piu' l'inchiostro schiarisce con lui. 2. **0,70** — l'inchiostro composto sul fondo, ma guardando la sola firma. **Nel filtro e' bianco pieno solo l'opzione attiva**: le altre e il separatore sono `--ink-dim`, e sono la banda piu' larga e piu' in basso, dove la velatura e' gia' scemata. 3. **0,74** e' il pavimento vero, **0,76** quello con un margine — la misura dipende dalle copertine di oggi, e un progetto nuovo piu' chiaro la sposta. La regola generale, che vale oltre questa riga: **il contrasto si misura sull'inchiostro reso, e su questo sito quasi niente e' bianco pieno.** --------------------------------------------------------------------------------- */ /* Spenta quando non c'e' niente che possa arrivare sotto il filtro: il conto lo fa `aggiornaVelo()` in projects.js e lo scrive qui come classe. Vale su "videoclip", che e' un foglio bianco alto meno di una schermata — la velatura non lo protegge da niente e gli lascerebbe solo una macchia grigia in cima. */ html.senza-velo .content-page::after { display: none; } .content-page::after { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 220px; /* **0 e non 1**, ed è la trappola degli strati già presa due volte (§ Gli strati). `.breadcrumb` sta a 1 e viene PRIMA nel markup, quindi a pari numero la velatura gli passava sopra: il filtro veniva velato insieme al fondo, e restava illeggibile come prima — la misura sul fondo diceva 5:1 mentre a schermo non si leggeva. A 0 la velatura sta sopra il mosaico (che non ha z-index) e sotto tutto l'arredo: filtro a 1, nav e firma a 2. **Chi vela deve stare sotto chi è velato.** */ z-index: 0; pointer-events: none; /* **Sei fermate e non tre, e la coda è lunga il doppio.** Con 130px e una sola spezzata il bordo inferiore si vedeva: una velatura che finisce netta è una riga orizzontale sull'immagine, e su una pagina che scorre quella riga sta ferma mentre tutto il resto si muove — è la cosa che la fa notare. **Allungata, non alzata**: il picco resta 0,76 e la fascia dove cade il testo (0→80) tiene lo stesso nero di prima; quello che cambia è la coda, che scende con una curva a esse invece che con una retta e si spegne a 220 invece che a 130. Le fermate approssimano uno smoothstep — il ginocchio a 120 e la parte quasi piatta in fondo sono quello che toglie il bordo. */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.76) 0%, rgba(0, 0, 0, 0.70) 36%, rgba(0, 0, 0, 0.52) 55%, rgba(0, 0, 0, 0.28) 73%, rgba(0, 0, 0, 0.11) 86%, rgba(0, 0, 0, 0) 100%); } /* Centrato sulla colonna dei contenuti, non sulla finestra: a sinistra la nav occupa molto più spazio di quanto occupino i testi ruotati a destra, quindi il centro vero della finestra cadrebbe una sessantina di pixel fuori asse rispetto alle tile sotto. Vedi --content-center in :root. */ .breadcrumb { position: fixed; left: var(--content-center); top: 24px; transform: translateX(-50%); /* **1, in mezzo, e i due lati contano tutti e due.** Sopra il contenuto, perché il filtro è fisso e il mosaico gli scorre sotto: senza un numero più alto di `.content-page` le copertine gli passerebbero davanti scorrendo (non è l'hover, è lo scroll — ed è la ragione per cui questo z-index esiste). Sotto il blocco colore, che sta a 2: passando sulla nav il filtro se ne va insieme al mosaico, e le cinque pagine si comportano uguali. Sparisce anche sopra la voce della pagina in cui sei — voluto. */ z-index: 1; font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase; font-weight: 500; color: var(--ink-dim); white-space: nowrap; } /* Il filtro sta dove stava il breadcrumb e ne eredita il trattamento, ma su DUE righe: sopra il nome della sezione, sotto le opzioni. In fila unica il nome sembrava la prima di quattro cose cliccabili; staccato dice quello che deve dire — dove sei, non dove puoi andare. */ .project-filter { display: flex; flex-direction: column; align-items: center; /* **4 e non 10, e il vuoto che si vede resta 10.** Le opzioni hanno 6px di padding sopra (vedi .filter-item): il gap misura fra le scatole, l'occhio fra gli inchiostri, quindi `gap + padding-top` = 10. **Le due misure vanno insieme** — e' la stessa costruzione della nav in verticale, dove il vuoto visto e' `gap + 2 x padding`. */ gap: 4px; } .project-filter .filter-section { /* Il nome è l'unica riga che non si preme: nessun hover, nessun cursore. */ cursor: default; } .project-filter .filter-row { display: flex; align-items: baseline; /* **La barra fra le opzioni**, e con lei il `//` è uscito da tutto il sito: la distinzione fra un segno che lega e uno che separa non c'è più, il segno è uno — qui, nei link social, nelle voci di press e awards, nelle due righe scandite della bio. Vedi .list-sep, dov'è scritto cosa è stato lasciato indietro. **Il gap è 5px**, lo stesso di `.social-links`, che è la stessa costruzione (parola, barra, parola) e l'unico posto in cui questa misura era già stata scelta. Due valori per la stessa cosa divergono; questo è uno. Sono passati da 18 a 8 a 5 in un giro solo, e i tre numeri dicono la stessa regola: **18 è lo spazio senza segno, 5 è lo spazio attorno a un segno**. Se la barra un giorno esce, il gap torna a 18 — mai lasciare l'uno senza l'altro. Nota che qui il corpo è 12px e nei social 11: proporzionalmente sarebbero 5,5. Vince il numero tondo condiviso, perché mezzo pixel di aria non si vede e due misure diverse per lo stesso segno sì. Il caso limite resta `SHORT DOCS`, due parole con dentro uno spazio di ~4px: con la barra a distinguere le voci non è più l'aria, quindi quel confronto non vincola più il gap. */ gap: 5px; } /* La barra non è cliccabile e va più spenta di quello che separa, come `.social-sep` e `.list-sep`: è la stessa regola scritta tre volte in tre punti del foglio, e se una cambia vanno cambiate tutte. `aria-hidden` nel markup, perché a chi ascolta la fila i tre bottoni arrivano già distinti. */ .filter-sep { color: var(--ink-dim); user-select: none; } /* Il nome della sezione in bianco pieno, non spento come i separatori: spento aveva esattamente il colore delle opzioni non attive, cioè di quattro parole che si premono, e si leggeva come la prima di quelle. Il bianco lo stacca — dice dove sei, e la riga sotto dice dove puoi andare. Che sia lo stesso bianco dell'opzione attiva non confonde: stanno su due righe diverse, e nessuna delle due è ambigua da sola. */ .project-filter .filter-section { color: var(--ink); } /* I bottoni non ereditano niente dal body: font, corpo e tracking vanno ridetti, o il filtro esce in Helvetica di sistema a 13px in mezzo alla riga. */ .filter-item { border: 0; /* **Il bersaglio scende sotto la scritta.** L'inchiostro e' alto 14px (12 su mobile) e la scatola era esattamente quella: un tocco un filo basso — che e' il modo naturale di premere una riga di testo col pollice — cadeva fuori e non succedeva niente. Con 6 sopra e 14 sotto la scatola passa a **34px**, e la corsa in piu' sta dalla parte da cui il dito sbaglia. **In larghezza il padding c'e' ma non si vede**, ed e' il punto: 6px per lato annullati da un margine negativo uguale. Serviva perche' 5px e' lo spazio attorno alla barra (vedi .filter-row) e un padding scoperto lo porterebbe a 11, cambiando un segno di punteggiatura in un vuoto — mentre il bersaglio di ALL, che e' tre lettere, era largo **23,6px**. Cosi' la riga resta identica al pixel e le scatole arrivano ad abbracciare la barra da tutte e due le parti: chi mira in mezzo prende una voce invece di non prendere niente, che e' la stessa ragione per cui in verticale i bersagli della nav si toccano. Il padding sopra e' compensato dal gap della colonna, che scende a 4. */ padding: 6px 6px 14px; margin-inline: -6px; background: none; font: inherit; font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase; font-weight: 500; color: var(--ink-dim); cursor: pointer; transition: color 0.2s ease; } .filter-item:hover, .filter-item.is-active { color: var(--ink); } .filter-item:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; } /* --- Pagine di contenuto (leaf) --- */ .content-page { position: relative; /* **Niente z-index, ed è una correzione.** Con `z-index: 1` questo blocco finiva nello STESSO strato di `.hover-color-block`, e stando dopo nel markup ci passava sopra: il blocco colore non copriva più niente. Sulle pagine del mosaico restavano le tile, su about restava tutta la pagina, e l'anteprima della nav si piantava in mezzo a quello che stavi guardando. Il fondo di pagina (`.bg-flat`/`.bg-media`) sta comunque sotto senza bisogno di un numero, perché è fisso e viene prima nel markup. È lo stesso difetto già preso sulle frecce di musing (HANDOFF, 12 agosto): qualunque cosa arrivi a 1 o più si ritrova davanti al blocco. */ min-height: 100%; /* padding-left generoso per non finire mai sotto la nav fissa mentre si scorre */ padding: 96px 0 0 240px; } /* I link social stanno SOLO in home. Sulle pagine di sezione sono stati provati sopra il mosaico e tolti: una riga in cima a una pagina che scorre per otto schermate è fuori vista dopo il primo scatto di rotella, e in fondo si intravedeva sotto le tile. Se dovessero rientrare, la costruzione era `margin: 0 0 28px -240px` più i due padding di --nav-edge/--side-edge: il margine negativo annulla il padding di .content-page, o `margin: auto` centrerebbe a x 840 invece che sui 772 della colonna. */ /* --- Griglia progetti: thumbnail a contatto, dimensioni uniformi --- */ .project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0; align-items: start; } .project-cell { display: flex; flex-direction: column; } .project-tile { position: relative; aspect-ratio: 4 / 3; overflow: hidden; cursor: pointer; background-color: #15181c; /* fondo mentre la thumbnail reale carica (oEmbed) */ background-size: cover; background-position: center; } /* Editing // social: contenuti Instagram Reels, nativamente verticali */ .project-tile.aspect-9-16 { aspect-ratio: 9 / 16; } /* Velatura e testo sono due strati distinti: nel mosaico si comportano in modo opposto (la velatura si apre all'hover, il testo compare) e servono separati. */ .project-tile-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); opacity: 0; transition: opacity 0.2s ease; pointer-events: none; } .tile-caption { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 16px; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; } .tile-caption-text { display: flex; flex-direction: column; gap: 4px; } .project-tile:hover .project-tile-overlay, .project-tile:focus-visible .project-tile-overlay, .project-tile:hover .tile-caption, .project-tile:focus-visible .tile-caption { opacity: 1; } /* Progetto ancora senza link: niente cursore a mano, perché non c'è niente da aprire. **Questa e' l'unica cosa che `placeholder` dice ancora.** Il foglio bianco, la didascalia sempre accesa e l'inchiostro scuro sono passati a `senza-copertina` (qui sotto): erano nella stessa regola finché un progetto senza link era per forza anche senza immagine, e DUST GIRL ha separato i due stati portandosi una copertina vera prima del suo link. Un progetto puo' ora avere l'una senza l'altro. */ .project-tile.placeholder { cursor: default; } /* Nessuna copertina sotto: il riquadro resta vuoto in attesa del video, e la didascalia sta sempre in vista invece di comparire all'hover — sotto non c'è nessuna thumbnail, e un rettangolo scuro e muto si leggerebbe come una tile rotta, non come un segnaposto. Il fondo è quello che la tile ha già mentre aspetta l'oEmbed: qui non arriverà. **Con una copertina vera nessuna di queste regole si applica**, e la tile torna quella di tutte le altre: sfumatura nera in fondo e inchiostro bianco. */ .project-tile.senza-copertina .tile-caption { opacity: 1; /* Sopra la carta la didascalia va invertita anche lei, o non si vede: il titolo è #fff e la fascia sotto è una sfumatura nera al 75%, che su un foglio chiaro diventerebbe una banda scura in fondo — il contrario di quello che serve. Via la sfumatura, e inchiostro scuro. */ background: none; } .project-tile.senza-copertina .tile-name { color: var(--c-paper-ink); } /* Le righe di servizio restano più spente del titolo, come sul fondo scuro. Il valore è lo stesso che la card bianca di musing usa sulla stessa carta: è nero a percentuale, quindi segue --c-paper-ink senza doverne dichiarare una versione smorzata. */ .project-tile.senza-copertina .tile-category, .project-tile.senza-copertina .tile-year, .project-tile.senza-copertina .tile-note { /* **0,62 e non 0,45** (24 agosto). Sul foglio bianco quel 45% dava **3,32:1**, cioe' sotto soglia — ed e' lo stesso difetto, rovesciato, dei secondari sulle copertine scure: un inchiostro a percentuale si porta dentro il fondo che ha sotto, e su una carta a 246 il nero al 45% resta un grigio chiaro. A 0,62 sono **5,9:1**, e restano comunque piu' spenti del titolo, che qui e' nero pieno. */ color: rgba(0, 0, 0, 0.62); } .project-tile.senza-copertina .tile-note a { color: var(--c-paper-ink); } /* Scritta al centro del riquadro in attesa ("OUT SOON"). Non è più un buco scuro nella pagina ma un foglio: la stessa struttura di prima — un layer a tutta tile con la scritta al centro — con i colori rovesciati. Il corpo resta quello del sottotitolo dell'etichetta, così non introduce un trattamento tipografico nuovo. Le misure sono ripetute e non ereditate perché .tile-category le prende dentro .project-stack, e questa sta al centro della tile, fuori dalla caption. pointer-events: none — non deve rubare l'hover al riquadro. */ .tile-pending { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase; background: var(--c-paper); color: var(--c-paper-ink); pointer-events: none; } .tile-name { color: #fff; font-size: 13px; letter-spacing: 0.4px; } .tile-category, .tile-year { color: rgba(255, 255, 255, 0.7); font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; } /* --- Variante a mosaico edge-to-edge --- Si attiva aggiungendo `project-stack` accanto a `project-grid` nel markup della singola pagina: non è il default, le altre sezioni restano sulla griglia sopra. Regge lo stesso array di progetti e lo stesso markup generato da projects.js. Una riga per progetto; `half: true` nell'array mette due progetti sulla stessa riga, dentro un `.project-row` che projects.js crea da sé. */ .project-grid.project-stack { display: grid; grid-template-columns: 1fr; /* Nessuna distanza, in nessuna direzione: le tile si toccano. */ gap: 0; /* La colonna è centrata fra i due elementi fissi — la nav a sinistra e i testi ruotati a destra — non fra i bordi della finestra: --column-gap è la stessa aria da entrambe le parti. Il margine negativo annulla il padding-left di .content-page: quel padding è una misura fissa pensata per stare larghi dalla nav, mentre la nav sta a 6vw e quindi si sposta con la finestra. Senza annullarlo, sotto una certa larghezza il padding richiesto sarebbe minore di 240px, e un padding non può essere negativo: il bordo resterebbe inchiodato lì. */ margin-left: -240px; padding-left: calc(var(--nav-edge) + var(--column-gap)); padding-right: calc(var(--side-edge) + var(--column-gap)); padding-bottom: 96px; /* --nav-edge e --side-edge arrivano da :root, misurati da initFixedEdges() in script.js. NON vanno ridichiarati qui: una dichiarazione locale vincerebbe su quella scritta su , e la colonna tornerebbe alle stime di ripiego mentre il breadcrumb userebbe le misure vere — cioè due centrature diverse. */ --column-gap: var(--gutter); } /* --- Il cambio di gruppo: si spegne, si salta in cima, si riaccende --- Il filtro nasconde e rimostra, quindi cambiando gruppo la pagina si accorcia sotto i piedi e bisogna tornare in cima (vedi `initProjectFilter()`). Il salto però è secco, e su una pagina alta sette schermate si legge come uno scatto. La strada NON presa è `scroll-behavior: smooth`: da 1500px la scorsa dura più di un secondo e fa sfilare davanti agli occhi tutto il mosaico che stai lasciando — e quello che sfila è già il gruppo nuovo, perché il filtro si applica prima. Molto movimento per niente. Qui invece il mosaico si spegne, il salto avviene **mentre non si vede**, e il gruppo nuovo si riaccende dall'alto. Il viaggio sparisce: quello che resta è un cambio di stato, che è quello che è davvero. 0,22s per lato — la stessa lingua dello 0,25 del blocco colore e dell'anteprima. Si spegne solo la griglia: nav, filtro e link laterali restano accesi, o il cambio sembrerebbe un caricamento di pagina. */ .project-stack { transition: opacity 0.22s ease; } .project-stack.is-swapping { opacity: 0; } /* Rapporto reale del video, in forma numerica. Sta sulla CELLA e non sulla tile perché serve a due cose: la tile se lo eredita per il proprio aspect-ratio, e la cella lo usa come peso per dividersi la riga quando è affiancata a un'altra. projects.js lo sovrascrive col valore letto dall'oEmbed; questo è il ripiego finché la risposta non arriva — all'arrivo le altezze si assestano, ed è l'unico sussulto di layout al caricamento. */ .project-stack .project-cell { --tile-ratio: 1.7778; } /* Riga con più progetti affiancati, di formato anche diverso. `flex-grow: var(--tile-ratio)` con base 0 divide la larghezza in proporzione ai rapporti: ogni cella riceve W · r_i/Σr, che è esattamente r_i · H con H = W/Σr. Ne segue che le tile vengono alte uguali qualunque siano i formati — la più larga è quella col rapporto maggiore — senza nessun calcolo in JS e senza scalini. Vale per qualsiasi numero di tile, non solo per le coppie. min-width: 0 è obbligatorio: senza, la larghezza minima del contenuto vince sulla base 0 e la proporzione salta. */ .project-stack .project-row { display: flex; align-items: flex-start; /* Tetto all'altezza della riga. Serve per i verticali: due 9:16 affiancati a piena larghezza vengono alti W/(0,5625+0,5625) = 0,89·W, cioè quasi il doppio di una schermata — inguardabili anche se affiancati. La riga non si può schiacciare in altezza, o le proporzioni salterebbero: si restringe. A un'altezza massima H corrisponde una larghezza H·Σr, e dentro quella le proporzioni interne restano identiche. Sotto il tetto vale 100% e la riga resta edge-to-edge come nel resto del mosaico — è il caso di tutte le righe orizzontali già in pagina, che non cambiano di un pixel. Il tetto vale solo per le righe affiancate: una tile a piena larghezza non è vincolata, perché lì restringere vorrebbe dire rinunciare all'edge-to-edge su cui è costruito tutto il mosaico. Un 9:16 da solo a piena larghezza resta quindi inguardabile: va messo in riga, non a tutta pagina. */ --row-max-h: 76vh; --row-ratio: 3.5556; /* ripiego: due 16:9. projects.js scrive la somma vera */ width: min(100%, calc(var(--row-max-h) * var(--row-ratio))); margin-inline: auto; } /* `hidden` da solo non basta, e la specificità nemmeno: il `display: flex` qui sopra è (0,2,0) come lo sarebbe `.project-row[hidden]`, quindi a parità vince l'ultima scritta. Questa regola deve stare DOPO quella che accende il flex ed essere più specifica di lei — è la stessa trappola di .project-player-nav[hidden], presa una seconda volta. Vale sulle righe e sulle celle a piena larghezza: sono le due cose che il filtro nasconde. Mai una cella dentro una riga, o le superstiti si allargherebbero. */ .project-stack .project-row[hidden], .project-stack > .project-cell[hidden] { display: none; } .project-stack .project-row > .project-cell { flex: var(--tile-ratio) 1 0; min-width: 0; } .project-stack .project-tile { /* Qui il vincolo è la LARGHEZZA: la tile riempie la sua colonna e l'altezza discende dal rapporto. Un 4:3 viene alto, un 2.39:1 basso, larghi uguale. È l'opposto della versione precedente, dove comandava l'altezza. */ width: 100%; height: auto; aspect-ratio: var(--tile-ratio); } /* Nel mosaico la velatura resta spenta in entrambi gli stati: al suo posto ora parte l'anteprima, e scurirla la sprecherebbe. Il contrasto del testo lo dà la sfumatura della caption, non lei. Nelle altre sezioni continua a funzionare come prima — la regola qui sopra vale solo dentro .project-stack. */ .project-stack .project-tile-overlay, .project-stack .project-tile:hover .project-tile-overlay, .project-stack .project-tile:focus-visible .project-tile-overlay { opacity: 0; } /* L'anteprima copre la thumbnail: stesso riquadro, ritagliata a coprire perché la clip non ha per forza il rapporto della tile. Il fondo scuro non è decorativo: un elemento video senza fotogrammi mostra il canvas del browser, che è bianco (CLAUDE.md § Palette). */ .tile-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--c-base); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .tile-preview.visible { opacity: 1; } /* Il testo si stacca dal centro e va in fondo al riquadro: titolo a sinistra, nota a destra, allineati sulla stessa base. */ .project-stack .tile-caption { inset: auto 0 0 0; flex-direction: row; align-items: flex-end; justify-content: space-between; text-align: left; gap: 32px; padding: 22px 26px; /* **Sempre accesa, anche sul computer** (23 agosto). Era a comparsa sull'hover, e in verticale era gia' accesa perche' li' l'hover non esiste: due comportamenti per la stessa cosa, e quello del computer nascondeva il titolo del lavoro finche' non ci passavi sopra. Ora il mosaico si legge fermo. **La sfumatura viene con lei, e non e' un di piu'**: sopra una copertina chiara il titolo e' bianco su bianco: e' la sola cosa che regge il contrasto, visto che nel mosaico la velatura piena resta spenta in tutti e due gli stati (qui sopra). Accesa la didascalia, va accesa anche quella — **le due cose vanno insieme**. Niente transizione: non c'e' piu' niente che passi da uno stato all'altro. */ opacity: 1; } /* **La sfumatura sotto il testo, e non e' piu' il fondo della didascalia.** Era `background` del contenitore, quindi alta quanto lui: 77px, cioe' il testo piu' i suoi 22 di padding. Bastava finche' compariva sull'hover e la si guardava un momento; sempre accesa non basta piu', ed e' stato **misurato sulla copertina piu' chiara del sito** (KETTLEBAG, che e' quasi bianca): il titolo stava a **4,48:1** e la categoria a **1,97:1**, cioe' illeggibile. Nel mosaico la velatura piena resta spenta in tutti e due gli stati, quindi qui non c'e' nient'altro a reggere il contrasto. **320px ancorati al fondo, nero 0,85**, che sono gli stessi 0,85 del verticale. La fascia sborda sopra il contenitore — un assoluto non e' ritagliato dal genitore — e questo e' il punto: il testo sta nei primi 50px, il resto e' la coda che serve a non far vedere dove la velatura finisce (§ la velatura in cima, stessa lezione). **In px e non in percentuale**, al contrario del verticale: li' la fascia e' una frazione di tile perche' le tile hanno rapporti diversi; qui la didascalia e' della stessa misura su tutte — una 2.39 alta 304 e una 16:9 alta 634 portano lo stesso testo — quindi vuole la stessa fascia. **Da 160 a 320, e non piu' una retta: allungata, non schiarita** (24 agosto). A 160px con una spezzata sola il bordo si vedeva — la stessa cosa gia' successa alla velatura in cima, e si chiude allo stesso modo. Una retta ha una pendenza sola: dove il nero e' quasi finito continua a calare alla stessa velocita' e arriva a zero di scatto, che e' il punto in cui l'occhio vede una riga. Le otto fermate qui sotto disegnano una S — scende in fretta dove sta il testo, poi si appiattisce in una coda lunga che arriva a zero senza toccarlo. **E il contrasto non e' sceso, e' salito di un filo**: alle due righe che contano l'alfa passa da 0,688 a 0,711 (titolo, 30px dal fondo) e da 0,588 a 0,610 (categoria, 49px). E' la regola della velatura in cima, riscritta qui perche' vale ogni volta: **allungare non costa contrasto, alzare l'alfa costa immagine.** Se un domani si toccano queste fermate, quello che va tenuto sono i due valori a 9,5% e 15,4% — il resto e' coda. */ .project-stack .tile-caption::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 320px; background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.72) 9%, rgba(0, 0, 0, 0.60) 16%, rgba(0, 0, 0, 0.45) 25%, rgba(0, 0, 0, 0.29) 38%, rgba(0, 0, 0, 0.15) 54%, rgba(0, 0, 0, 0.06) 72%, rgba(0, 0, 0, 0.015) 88%, rgba(0, 0, 0, 0) 100%); pointer-events: none; } /* **LA TRAPPOLA DEGLI STRATI, quinta volta — e questa e' stata prevista invece che presa.** `::before` e' `position: absolute`, quindi dipinge nello strato dei posizionati, cioe' **sopra** il testo, che e' statico: il nero all'85% coprirebbe le lettere e i titoli, dichiarati `rgb(255,255,255)`, arriverebbero a schermo intorno a 98. E' successo davvero sul verticale il 22 agosto. Basta rendere posizionati anche i due blocchi di testo: a pari z-index vince chi viene dopo nel DOM, e loro vengono dopo. Finche' la sfumatura era il `background` del contenitore il problema non esisteva — un fondo sta sotto i propri figli per costruzione. */ .project-stack .tile-caption-text, .project-stack .tile-note { position: relative; } /* Il segnaposto e' carta bianca con inchiostro scuro: una fascia nera li' sopra sarebbe il contrario di quello che serve. Prima bastava il `background: none` della regola del segnaposto, perche' la sfumatura stava sul contenitore; ora sta sullo pseudo e va spenta a parte. */ .project-tile.senza-copertina .tile-caption::before { display: none; } /* Le due righe riprendono trattamenti già in uso nel sito invece di introdurne di nuovi: sopra la resa delle voci di nav, sotto quella delle intestazioni di about (le stesse del breadcrumb — se cambia una, vanno allineate tutte). */ .project-stack .tile-category, .project-stack .tile-year { font-size: 11px; letter-spacing: 0.4px; text-transform: none; /* **0,85 e non il 65% di --ink-dim**, che e' la stessa correzione gia' fatta in verticale e per la stessa ragione, ora che vale anche qui: --ink-dim e' nato per un testo che compare quando lo chiedi, su un fondo che sai. Queste righe stanno sempre accese sopra un'immagine qualunque, e un inchiostro semitrasparente si porta il fondo dentro di se' — su una copertina chiara schiarisce con lei e sparisce (misurato: 1,97:1 sulla piu' chiara). Il titolo resta bianco pieno, quindi la gerarchia regge lo stesso: 1 contro 0,85 invece di 1 contro 0,65. */ color: rgba(255, 255, 255, 0.85); } /* Dall'alto: anno, sottotitolo, titolo. Ottenuto con `order` invece che riordinando il markup, che resta com'è per le sezioni ancora a griglia. */ .project-stack .tile-year { order: -2; } .project-stack .tile-category { order: -1; } .project-stack .tile-name { font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase; font-weight: 500; color: var(--ink); } .project-stack .tile-caption-text { gap: 6px; } /* Su una riga da tre o quattro la tile si stringe e la didascalia su una riga sola non ci sta più: su quattro verticali la tile è larga 279px, e il titolo di LAZZA con la sua nota ne chiede 339. Da tre in su titolo e nota si impilano. La soglia è il numero di celle e non una media query, perché non dipende dalla finestra ma da quante ne ha la riga: renderProjectGrid scrive data-count. */ .project-row[data-count="3"] .tile-caption, .project-row[data-count="4"] .tile-caption { flex-direction: column; align-items: flex-start; gap: 8px; } .project-row[data-count="3"] .tile-note, .project-row[data-count="4"] .tile-note { max-width: 100%; text-align: left; } /* La nota non è più un blocco fra una riga e l'altra — lì spezzava l'edge-to-edge — ma sta dentro la tile, in fondo a destra, e compare col titolo. Stessa resa del sottotitolo: è informazione di servizio, non deve competere col titolo. */ .project-stack .tile-note { max-width: 42%; text-align: right; font-size: 11px; line-height: 1.5; letter-spacing: 0.4px; /* Come la categoria qui sopra: sempre accesa sopra un'immagine, quindi 0,85. */ color: rgba(255, 255, 255, 0.85); } /* --- I crediti: DOP e PROD, e sono la sola cosa che compare all'hover --------- Tutto il resto della didascalia sta sempre acceso (vedi .project-stack .tile-caption): questa e' l'unica riga che si mostra passandoci sopra, ed e' quello che rende di nuovo l'apparizione un'informazione invece di un effetto. **Stanno a destra, nello stesso posto della nota**, e possono farlo perche' nessun progetto ha una nota e dei crediti insieme — verificato su tutti e diciotto. Uno slot, due informazioni, mai contemporaneamente (il vincolo e' scritto anche in projects.js, dove si costruisce). **La resa e' quella del blocco di sinistra, rovesciata**: il ruolo ha il trattamento della categoria e il nome quello del titolo, con lo stesso vuoto di 6px in mezzo che .tile-caption-text usa fra le sue righe. Non e' una somiglianza, sono le stesse tre misure — se cambia una di quelle, cambia anche questa. */ .project-stack .tile-credits { /* LA TRAPPOLA DEGLI STRATI, che qui e' scattata in prova: la sfumatura e' un ::before assoluto e dipinge sopra i figli statici. Senza questa riga i crediti non comparivano affatto — non spenti, proprio coperti. */ position: relative; display: flex; /* I due crediti si allineano in basso, cosi' i due nomi cadono sulla stessa base del titolo a sinistra: e' quello che tiene insieme le due meta' della riga. */ align-items: flex-end; /* 18px, "lo spazio senza segno" della convenzione del sito (§ Filtro): fra i due crediti non c'e' nessun segno, e le due sigle separano gia' da se'. Serve anche a non introdurre una seconda barra sulla riga, visto che una ci sta gia' dentro un valore ("chimera studios | parallelia"). */ gap: 18px; text-align: right; opacity: 0; transition: opacity 0.2s ease; } .project-stack .project-tile:hover .tile-credits, .project-stack .project-tile:focus-visible .tile-credits { opacity: 1; } .tile-credit { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } /* Il ruolo: la resa della categoria (.project-stack .tile-category). Maiuscolo di resa e non nel dato, perche' qui il dato e' una sigla di tre lettere. */ .credit-role { font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); } /* Il nome: la resa del titolo (.project-stack .tile-name). Bianco pieno, come lui — sono due nomi affiancati, non uno subordinato all'altro. */ .credit-name { font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase; font-weight: 500; color: var(--ink); white-space: nowrap; } /* La caption ha pointer-events: none per non rubare l'hover alla tile, ma i link dentro la nota devono restare cliccabili. Il click non si propaga alla tile (vedi projects.js), altrimenti aprirebbe il player mentre si segue il link. */ .project-stack .tile-note a { color: var(--ink); pointer-events: auto; } /* --- Player fullscreen (click su una thumbnail nella griglia progetti) --- */ .project-player-overlay { position: fixed; inset: 0; z-index: 30; /* Opaco, non semitrasparente: sotto l'overlay c'è sempre una pagina scura, ma il fondo del player non deve dipendere da cosa c'è sotto. */ background: var(--c-base); display: none; align-items: center; justify-content: center; padding: 4vh 4vw; } .project-player-overlay.visible { display: flex; } .project-player-body { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--c-base); } /* L'iframe segue l'aspect ratio del video invece di riempire il riquadro: così non restano bande di fondo sopra e sotto. Essendo un elemento replaced, i vincoli max-* mantengono il rapporto invece di schiacciarlo. Il background scuro è la seconda rete di sicurezza: il documento del player Vimeo è trasparente, quindi senza di esso si vedrebbe il canvas bianco dell'iframe (color-scheme:dark non attraversa i confini di origine). */ .project-player-body iframe:not(.instagram-media) { width: 100%; height: auto; aspect-ratio: 16 / 9; max-width: 1400px; max-height: 100%; border: 0; background: var(--c-base); } /* Social verticale (9:16): Vimeo/YouTube in formato ritratto, non vanno allargati */ .project-player-body.portrait iframe:not(.instagram-media) { width: auto; height: 100%; aspect-ratio: 9 / 16; max-width: 500px; max-height: 100%; } /* Instagram si dimensiona da solo (embed.js aggiorna l'altezza via postMessage): niente aspect-ratio imposto, altrimenti la card viene schiacciata. La card resta bianca — è il loro design, non è modificabile da fuori l'iframe. */ .project-player-body .instagram-media { margin: 0 auto !important; max-height: 100%; } /* Il testo resta 11px — e' il corpo dell'arredo, non si tocca. Quello che cresce e' il bersaglio: senza padding la scatola era alta quanto l'inchiostro (13px), e 13px col dito si mancano. Stessa correzione gia' fatta sulla nav (11 -> 23) e sulla firma (9 -> 33 x 114). **E va compensata**, come sulla firma: il padding spingerebbe l'inchiostro 15px verso l'interno, mentre l'invariante e' che a stare a 24px dai due bordi sia il TESTO e non la scatola. Quindi top e right scontano il padding — 24 - 15 = 9 — e l'inchiostro resta dov'era. **Le due righe vanno insieme.** */ .project-player-close { position: fixed; top: 9px; right: 9px; padding: 15px; z-index: 31; background: none; border: none; color: #fff; font-size: 11px; letter-spacing: 0.5px; cursor: pointer; font-family: 'Helvetica Neue', Arial, sans-serif; } /* Frecce di navigazione fra i progetti della sezione, ai due lati dello schermo. Le costruisce projects.js, non stanno nel markup delle pagine. Il bianco è scritto a mano e non è --ink: l'overlay è sempre scuro, qualunque sia il tema della pagina sotto (in home non c'è player, ma la regola vale). Il riquadro è più grande del glifo perché 44px è il bersaglio minimo di un dito: la freccia sta al centro, l'area cliccabile le sta intorno. */ .project-player-nav { position: fixed; top: 50%; transform: translateY(-50%); z-index: 31; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: none; border: none; color: #fff; font-family: 'Helvetica Neue', Arial, sans-serif; /* 30px e non i 22 della freccia che c'era prima: il guillemet è otticamente molto più piccolo del glifo che sostituisce, e alla stessa misura sparirebbe. È il corpo del segno, non del testo — il riquadro cliccabile resta 44px. */ font-size: 30px; line-height: 1; cursor: pointer; /* Discrete a riposo: a fianco del video acceso non devono chiedere attenzione, ma restano visibili senza puntatore — su touch l'hover non esiste. */ opacity: 0.35; transition: opacity 0.2s ease; } /* Va dichiarato: il display: flex qui sopra vince sul display: none che il browser dà all'attributo hidden, e la freccia di troppo resterebbe in vista sul primo e sull'ultimo progetto. */ .project-player-nav[hidden] { display: none; } .project-player-nav:hover { opacity: 1; } /* Da tastiera l'opacità piena non basta a dire dove si è — è lo stesso stato che si vede passandoci sopra col mouse. Serve un anello suo. */ .project-player-nav:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 2px; } .project-player-nav.prev { left: 24px; } .project-player-nav.next { right: 24px; } /* --- About --- */ /* La pagina è un blocco centrato fra i due elementi fissi — la nav a sinistra e i testi ruotati a destra — non fra i bordi della finestra: stessa costruzione della colonna del mosaico (vedi .project-grid.project-stack), stessa aria da entrambe le parti. Il centro della finestra cadrebbe una sessantina di pixel fuori asse, perché la nav occupa molto più spazio dei testi ruotati. A essere centrato è il BLOCCO, non le righe: dentro, il testo è allineato a sinistra. L'unica eccezione è la riga di stato in fondo. --nav-edge e --side-edge arrivano da :root, misurati da initFixedEdges() in script.js: NON vanno ridichiarati qui, o si otterrebbero due centrature diverse fra questa pagina e le altre. */ .about-content { position: relative; /* **Niente z-index, ed è una correzione.** Con `z-index: 1` questo blocco finiva nello STESSO strato di `.hover-color-block`, e stando dopo nel markup ci passava sopra: il blocco colore non copriva più niente. Sulle pagine del mosaico restavano le tile, su about restava tutta la pagina, e l'anteprima della nav si piantava in mezzo a quello che stavi guardando. Il fondo di pagina (`.bg-flat`/`.bg-media`) sta comunque sotto senza bisogno di un numero, perché è fisso e viene prima nel markup. È lo stesso difetto già preso sulle frecce di musing (HANDOFF, 12 agosto): qualunque cosa arrivi a 1 o più si ritrova davanti al blocco. */ min-height: 100%; padding: 96px calc(var(--side-edge) + var(--column-gap)) 24px calc(var(--nav-edge) + var(--column-gap)); --column-gap: 40px; display: flex; flex-direction: column; align-items: center; gap: 48px; text-align: left; } /* Quattro caselle in due righe: bio + contatto | ritratto press | awards Tracce `auto`: le larghezze le decide il contenuto, senza misure scritte a mano. A sinistra comanda la bio (394,6px a 13,5). A destra comandava la voce più lunga degli awards (237,5), e da quando il contatto è sceso nella colonna di sinistra non più: la riga in alto è cresciuta, il ritratto la pareggia in altezza e la sua larghezza discende da lì — 348,7px, cioè molto più delle voci degli elenchi. **È il ritratto a dettare la colonna di destra**, ed è anche il motivo per cui la soglia di impilamento si sposta ogni volta che quella colonna cambia altezza (vedi in fondo). Ne segue anche l'allineamento chiesto: le voci partono dallo stesso asse verticale dell'iniziale della loro etichetta, perché etichetta ed elenco sono figli dello stesso blocco e nessuno dei due porta rientro — l'