/* ============================================================
REPLICA DEL READYMAG
============================================================
Obiettivo: fedelta al sito originale. Le misure non sono
stimate, sono lette dal sito live e annotate in
SPECIFICA-READYMAG.md — se un numero qui non torna, si
controlla li.
COME FUNZIONA
-------------
Readymag impagina su una tela fissa di 1024 px mettendo a ogni
elemento left/top/width/height in pixel. Qui si fa uguale: ogni
elemento porta le sue quattro coordinate in --x --y --w --h e
il CSS le trasforma in posizione assoluta. Cosi l'HTML resta
leggibile e i numeri sono quelli della specifica, non calcoli.
Sotto i 1024 px la tela si scioglie: gli elementi tornano nel
flusso, in colonna, a tutta larghezza meno il margine che
lascia respirare le linee di costruzione. I riquadri tengono la
loro proporzione con aspect-ratio, ricavata dalle stesse due
variabili --w e --h. Nessun numero viene scritto due volte.
============================================================ */
/* ---------- Carattere ------------------------------------- */
/* Il Readymag usa Courier New, che e di Microsoft e non si puo
ridistribuire: su un telefono Android non c'e e il browser
mette un ripiego a caso. Courier Prime e il suo equivalente
libero, disegnato apposta, e sta nei nostri file. */
@font-face {
font-family: 'Courier Prime';
src: url('../font/courier-prime.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Courier Prime';
src: url('../font/courier-prime-bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* ---------- Colori e misure, misurati dal sito ------------ */
:root {
--blu: #0020f0; /* rgb(0,32,240) fondo dell'indice */
--verde: #04ff00; /* rgb(4,255,0) bottone acceso */
--verde-link: #00ff15; /* rgb(0,255,21) link acceso */
--grigio: #282828; /* rgb(40,40,40) scritte di sfondo */
--nero: #000000;
--bianco: #ffffff;
--tela: 1024px; /* la larghezza della tela Readymag */
/* Il tratteggio: lunghezza del trattino e passo (trattino +
spazio). Erano 1 e 3; i trattini adesso sono il doppio, il
ritmo resta fitto. Cambiando qui cambiano tutte le linee,
orizzontali e verticali, su tutte le pagine. */
--trattino: 2px;
--passo-tratteggio: 5px;
--margine: 16px; /* respiro laterale sul telefono */
--mono: 'Courier Prime', 'Courier New', ui-monospace, monospace;
}
/* ---------- Azzeramenti ----------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* Il ritaglio va su html E su body: solo sul body il documento
si allarga lo stesso e compare la barra orizzontale. */
html {
-webkit-text-size-adjust: 100%;
overflow-x: clip;
}
body {
margin: 0;
background: var(--nero);
color: var(--bianco);
font-family: var(--mono);
/* Niente scroll orizzontale, mai: e il difetto numero uno del
sito vecchio sul telefono in verticale.
Ed e qui che si ritaglia, non sulla tela. Readymag NON
ritaglia ai 1024 px della tela ma alla finestra: gli elementi
che sbordano si vedono finche lo schermo e largo abbastanza.
Ritagliando a 1024 sparirebbero del tutto — su Dyelit sono
cinque, fra cui il titolo LOGO. */
overflow-x: clip;
}
/* ---------- Il passaggio fra indice e stanza --------------- */
/* Entrando in una sezione la pagina che lasci si avvicina, sfuma e
si sfoca, e quella nuova arriva da piu indietro: uno zoom dentro.
Tornando all-indice succede il contrario, un dezoom. Stessa durata
e stessa accelerazione nei due versi, come vuole STILE.md: il
passaggio e guscio, non stanza.
IL FUOCO
--------
Lo zoom non punta al centro dello schermo ma al **riquadro che hai
scelto**: js/passaggio.js scrive in `--fuoco` il suo centro, e qui
diventa il `transform-origin`. Tornando indietro il fuoco e il
riquadro della stanza da cui vieni. Se il punto manca si torna al
centro e la transizione funziona lo stesso.
Lo fa il browser da solo (View Transitions fra documenti): niente
JavaScript, e vale anche col tasto indietro. Dove non e supportato
non succede niente e la navigazione resta secca come prima.
Chi decide il verso e la pagina di ARRIVO, perche la transizione
viene disegnata nel documento nuovo: se ha `data-pagina` stai
entrando in una stanza, se non ce l-ha stai tornando all-indice. */
@view-transition { navigation: auto; }
:root { --passaggio: 0.75s; }
@media (prefers-reduced-motion: no-preference) {
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: var(--passaggio);
animation-timing-function: ease-in-out;
animation-fill-mode: both;
transform-origin: var(--fuoco, 50% 50%);
}
/* La pagina che se ne va tiene l-opacita per meta corsa e poi
sfuma: con uno zoom cosi profondo, se sfumasse subito si vedrebbe
solo la dissolvenza e non il tuffo. */
/* IL LAMPO VERDE
Dietro alle due pagine, per un attimo, resta solo il verde lime:
lo stesso dei tasti quando ci passi sopra, cioe il colore del
«sto per entrare qui», che continua dentro il passaggio come un
microcaricamento.
Non e un velo sopra: e il fondo di `::view-transition`, la
scatola che tiene le due istantanee. Si vede perche la pagina che
esce e gia sparita e quella che entra non e ancora comparsa —
la finestra in mezzo la aprono le due opacita qui sotto.
Il fondo si accende e si spegne da solo, e non tocca le
istantanee, che sono figlie.
Solo in ENTRATA: tornando all-indice non c-e lampo, e le due
opacita si incrociano invece di darsi il cambio, cosi non si apre
nessuna finestra vuota. */
:root:has(body[data-pagina])::view-transition {
animation: lampo-verde var(--passaggio) ease-in-out both;
}
/* si entra in una stanza: la pagina di prima si avvicina e sfuma,
la nuova arriva da dietro */
:root:has(body[data-pagina])::view-transition-old(root) {
animation-name: sezione-avvicina;
}
:root:has(body[data-pagina])::view-transition-new(root) {
animation-name: sezione-arriva-da-dietro;
}
/* si torna all-indice: il contrario */
:root:not(:has(body[data-pagina]))::view-transition-old(root) {
animation-name: sezione-allontana;
}
:root:not(:has(body[data-pagina]))::view-transition-new(root) {
animation-name: sezione-arriva-da-davanti;
}
}
/* Con «riduci movimento» il cambio di pagina e secco: niente
nemmeno la dissolvenza che il browser farebbe da solo. */
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
}
/* La sfocatura fa la profondita: quello che si allontana o si
avvicina troppo esce di fuoco, come in una ripresa. */
/* L-opacita ha i suoi tempi, diversi da quelli dello zoom: chi se ne
va resta pieno per meta corsa e poi sfuma, chi arriva si scopre
presto e continua a crescere. Cosi si vede il movimento, non una
dissolvenza. Lo zoom invece corre per tutta la durata: e definito
solo agli estremi, quindi non lo tocca il fotogramma di mezzo. */
@keyframes lampo-verde {
0%, 100% { background-color: transparent; }
32%, 58% { background-color: var(--verde); }
}
/* Le due opacita si danno il cambio invece di incrociarsi: chi esce
e finito al 42%, chi entra comincia a comparire dal 52%. In quel
decimo di secondo non c-e nessuna delle due e resta solo il verde.
Lo zoom intanto corre per tutta la durata: e definito solo agli
estremi, quindi i fotogrammi di mezzo non lo toccano. */
@keyframes sezione-avvicina {
42%, 100% { opacity: 0; }
to { scale: 1.85; filter: blur(7px); }
}
@keyframes sezione-arriva-da-dietro {
from { opacity: 0; scale: 0.58; filter: blur(7px); }
52% { opacity: 0; }
to { opacity: 1; }
}
/* Il ritorno non ha il lampo, quindi le due si sovrappongono: chi
esce tiene l-opacita fino a meta e poi sfuma sopra chi arriva. */
@keyframes sezione-allontana {
45% { opacity: 1; }
to { opacity: 0; scale: 0.58; filter: blur(7px); }
}
@keyframes sezione-arriva-da-davanti {
from { opacity: 0; scale: 1.85; filter: blur(7px); }
45% { opacity: 1; }
}
/* ---------- Il puntatore ----------------------------------- */
/* Un mirino al posto della freccia: cerchio e quattro tacche, bianchi
con il contorno **rosso**. Il punto attivo e il centro (16 16).
In coda c-e `crosshair`, il mirino di sistema, per chi non carica
l-immagine.
Premendo il tasto si accende: un pallino rosso al centro e un
secondo cerchio rosso attorno a quello bianco. E `:active` sul
body, che vale finche il tasto resta giu: niente JavaScript. */
body {
cursor: url("data:image/svg+xml,") 16 16, crosshair;
}
body:active {
cursor: url("data:image/svg+xml,") 16 16, crosshair;
}
/* Sopra a cio che si clicca il mirino resta, ma il sistema
direbbe `pointer`: qui vince il mirino, che e il punto. */
a, button { cursor: inherit; }
/* ---------- Un puntatore per sezione ----------
Il mirino resta dove non si dice altro: Il Mostro, che e il suo
posto, Dyelit e Streetwear. Le altre hanno il loro:
indice una freccia a pixel dentro un adesivo
street art una bomboletta; premendo spruzza (js/spruzzo.js)
illustrazioni una matita bianca, che premendo diventa pennello
huddler una ruota; premendo accelera (js/ruota.js)
expi una freccia di vetro, che premendo si schiaccia
Il punto attivo e dove lavora l-attrezzo: la punta della mina e
del pennello (2 30, gli stessi, cosi premendo non salta),
l-ugello della bomboletta (8 4), il mozzo della ruota.
Matita e pennello sono bianchi col contorno nero, per vedersi sui
fondi neri come su quelli bianchi. La bomboletta e una da graffiti
disegnata come in foto (vedi sotto). La ruota ha i colori e le
forme piene di Huddler.
In coda `auto`: la freccia di sistema, per chi non carica
l-immagine. */
/* Una bomboletta da graffiti, sul modello delle Kobra: lattina alta
e stretta, fascia del colore in alto, etichetta nera lucida con la
scritta bianca e il campione del colore, cupola e fondo di
alluminio, e sulla valvola l-erogatore bianco con l-ugello di lato:
senza tappo, pronta a spruzzare. Nessun marchio vero, solo la forma
di una scritta.
Perche sembri una foto e non un disegno: ombreggiata come un
cilindro in una foto di prodotto (riflesso morbido e riflesso
netto a sinistra, luce di ritorno a destra), vista un poco
dall-alto (i bordi delle fasce curvano come ellissi), l-ombra
della cupola sull-etichetta e dell-erogatore sulla cupola,
riflessi sfocati invece che tracciati, una grana leggera.
Disegnata su 24 x 48 e mostrata a 16 x 32, piccola come un
puntatore. Il punto attivo (8 4) e l-ugello. */
body[data-pagina="street-art"] {
cursor: url("data:image/svg+xml,") 8 4, auto;
}
/* Premendo l-erogatore si abbassa di un soffio (0,6): lo spruzzo vero
e proprio lo fa js/spruzzo.js. */
body[data-pagina="street-art"]:active {
cursor: url("data:image/svg+xml,") 8 4, auto;
}
body[data-pagina="illustrazioni"] {
cursor: url("data:image/svg+xml,") 2 30, auto;
}
body[data-pagina="illustrazioni"]:active {
cursor: url("data:image/svg+xml,") 2 30, auto;
}
/* PUNTATORI NITIDI A OGNI SCALA DELLO SCHERMO
Uno schermo al 125% mette 1,25 pixel reali in ogni pixel della
pagina: un disegno a pixel da 1 finisce a cavallo fra i pixel dello
schermo e le righe diventano irregolari e sfocate. Per questo i due
puntatori qui sotto hanno QUATTRO versioni — per 100, 125, 150 e
200% — e `image-set()` fa scegliere al browser quella giusta, che
viene disegnata direttamente ai pixel dello schermo. La prima riga
`cursor` e la scorta per chi `image-set` non lo conosce.
Sono piu grandi di 32 px: vicino ai bordi della finestra Chrome li
sostituisce con la freccia di sistema. E il prezzo di averli grandi. */
/* L-INDICE — una freccia a pixel, in un adesivo
La freccia classica dei vecchi computer, 12 x 19 pixel. Ogni suo
pixel e un numero INTERO di pixel dello schermo: 2 a 100, 125 e 150%,
3 a 200% — cioe circa 1,6 px della pagina, un po- piu grande di
prima. Attorno il bordo bianco dell-adesivo, angoli tondi, e
un-ombra morbida. Premendo l-ombra sparisce e la freccia scende di
un pixel. Punto attivo: la punta (4 4). L-indice e l-unica pagina
senza `data-pagina`: da qui il selettore. */
body:not([data-pagina]) {
cursor: url("data:image/svg+xml,") 4 4, auto;
cursor: image-set(url("data:image/svg+xml,") 1x, url("data:image/svg+xml,") 1.25x, url("data:image/svg+xml,") 1.5x, url("data:image/svg+xml,") 2x) 4 4, auto;
}
body:not([data-pagina]):active {
cursor: url("data:image/svg+xml,") 4 4, auto;
cursor: image-set(url("data:image/svg+xml,") 1x, url("data:image/svg+xml,") 1.25x, url("data:image/svg+xml,") 1.5x, url("data:image/svg+xml,") 2x) 4 4, auto;
}
/* L-INDICE — la manina a pixel, nelle due posizioni
Sopra a tutto quello che si clicca (tasti, riquadri, contatti) la
freccia diventa la manina dei vecchi computer, nello stesso adesivo:
16 x 20 pixel, ognuno un numero intero di pixel dello schermo, bordo
bianco e ombra morbida.
1. dito puntato — passandoci sopra;
2. dito che preme — tenendo premuto: il dito si accorcia di tre
pixel e l-adesivo si appiattisce, senza ombra.
Il punto attivo e la punta del dito (16 4), lo stesso nelle due
posizioni, cosi il clic cade dove stava il dito. La punta non e
nell-angolo come nella freccia: in ogni versione il disegno e
spostato per farla cadere li. In coda `pointer`: la manina di
sistema, per chi non carica l-immagine. */
body:not([data-pagina]) a {
cursor: url("data:image/svg+xml,") 16 4, pointer;
cursor: image-set(url("data:image/svg+xml,") 1x, url("data:image/svg+xml,") 1.25x, url("data:image/svg+xml,") 1.5x, url("data:image/svg+xml,") 2x) 16 4, pointer;
}
body:not([data-pagina]) a:active {
cursor: url("data:image/svg+xml,") 16 4, pointer;
cursor: image-set(url("data:image/svg+xml,") 1x, url("data:image/svg+xml,") 1.25x, url("data:image/svg+xml,") 1.5x, url("data:image/svg+xml,") 2x) 16 4, pointer;
}
/* L-INDICE — le mani per gli adesivi
Sopra a un adesivo la freccia diventa una mano aperta, pronta ad
afferrare; mentre lo trascini, o lo porti agganciato col clic, la
mano si chiude. Stesso adesivo della freccia e della manina: 16 x 17
pixel, ognuno un numero intero di pixel dello schermo, bordo bianco
e ombra. Il punto attivo e il centro del palmo (22 24).
Il selettore porta `body:not([data-pagina])` per battere le regole
generali degli adesivi (`grab` / `grabbing`), che restano come
scorta in coda. */
body:not([data-pagina]) .sticker {
cursor: url("data:image/svg+xml,") 22 24, grab;
cursor: image-set(url("data:image/svg+xml,") 1x, url("data:image/svg+xml,") 1.25x, url("data:image/svg+xml,") 1.5x, url("data:image/svg+xml,") 2x) 22 24, grab;
}
body:not([data-pagina]) .sticker[data-preso],
body:not([data-pagina]) .sticker[data-agganciato] {
cursor: url("data:image/svg+xml,") 22 24, grabbing;
cursor: image-set(url("data:image/svg+xml,") 1x, url("data:image/svg+xml,") 1.25x, url("data:image/svg+xml,") 1.5x, url("data:image/svg+xml,") 2x) 22 24, grabbing;
}
/* EXPÌ — una freccia di vetro, tondeggiante
Una lastra spessa e trasparente, sul modello dei puntatori «glass»:
faccia quasi invisibile, fianco della lastra a sinistra, riflessi.
Angoli smussati ognuno col suo raggio, coda piena. Ingrandita del
15% (36 px). Il bordo bianco della faccia e sottile (0,7, non piu
1,3) e il contorno scuro e leggero: prima coprivano il vetro invece
di disegnarlo. Premendo la faccia si schiaccia verso il fianco.
Punto attivo: la punta arrotondata (8 6). */
body[data-pagina="expi"] {
cursor: url("data:image/svg+xml,") 8 6, auto;
cursor: image-set(url("data:image/svg+xml,") 1x, url("data:image/svg+xml,") 1.25x, url("data:image/svg+xml,") 1.5x, url("data:image/svg+xml,") 2x) 8 6, auto;
}
body[data-pagina="expi"]:active {
cursor: url("data:image/svg+xml,") 8 6, auto;
cursor: image-set(url("data:image/svg+xml,") 1x, url("data:image/svg+xml,") 1.25x, url("data:image/svg+xml,") 1.5x, url("data:image/svg+xml,") 2x) 8 6, auto;
}
/* La ruota serve due volte: come puntatore del CSS, ferma, e come
immagine dell-elemento che gira (js/ruota.js). Quando lo script
parte mette `ruota-attiva` su html e il puntatore di sistema si
nasconde: al suo posto c-e l-elemento. */
body[data-pagina="huddler"] {
/* Nello stile del marchio: forme piene, niente contorni, i tre
colori di Huddler. Gomma petrolio con il battistrada appena piu
scuro, cerchio giallo con cinque fori tondi, mozzo arancio. Il
filo bianco attorno serve solo a staccarla dai fondi petrolio. */
--ruota: url("data:image/svg+xml,");
cursor: var(--ruota) 16 16, auto;
}
html.ruota-attiva body[data-pagina="huddler"] { cursor: none; }
.ruota-cursore {
position: fixed;
left: 0;
top: 0;
z-index: 10000;
width: 32px;
height: 32px;
background: var(--ruota) center / 32px 32px no-repeat;
pointer-events: none;
will-change: transform;
}
/* ---------- Quando i puntatori si spengono da soli ----------
Il tasto per tornare alla freccia di sistema e stato tolto su
richiesta di Leonardo (12 settembre 2026). Resta lo spegnimento
automatico dove serve davvero: con i colori forzati del sistema
(alto contrasto di Windows, e simili) chi ha un puntatore suo lo
riavrebbe coperto dai nostri disegni.
`!important` perche deve battere le regole delle pagine e
`body:active`; `auto` e non `default` cosi il browser rimette la
manina sui collegamenti. */
@media (forced-colors: active) {
body,
body:active,
a,
button { cursor: auto !important; }
.ruota-cursore { display: none; }
}
/* Lo spruzzo: nebbia, gocce e puntini (js/spruzzo.js), tutti del
verde del tappo. Partono dall-ugello insieme e vanno ognuno per la
sua strada (--gx, --gy) con la sua misura, sfocatura, durata e
opacita. Le gocce hanno il bordo sfumato, come vernice nebulizzata;
i puntini sono pieni e nitidi. */
.spruzzo {
--vernice: 62 214 58;
position: fixed;
z-index: 10000;
width: 0;
height: 0;
pointer-events: none;
}
.spruzzo i {
position: absolute;
left: calc(var(--gd) / -2);
top: calc(var(--gd) / -2);
width: var(--gd);
height: var(--gd);
border-radius: 50%;
background: radial-gradient(circle, rgb(var(--vernice) / var(--op)) 0 40%, rgb(var(--vernice) / 0) 72%);
filter: blur(var(--sfoca));
animation: spruzzo var(--dura) cubic-bezier(0.15, 0.7, 0.3, 1) forwards;
}
.spruzzo .spruzzo__puntino { background: rgb(var(--vernice) / var(--op)); }
@keyframes spruzzo {
from { translate: 0 0; scale: 0.3; opacity: 1; }
60% { opacity: 1; }
to { translate: var(--gx) var(--gy); scale: 1; opacity: 0; }
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
/* ---------- La freccia per tornare all-indice -------------- */
/* Fissa nell-angolo, sopra a tutto, cliccabile in qualunque momento.
Sta fuori dalla tela apposta: dentro, lo `zoom` la ingrandirebbe
con il resto e `position: fixed` si ancorerebbe alla tela invece
che alla finestra.
Il tratto e 3 e non 2: a 2 spariva sui fondi carichi. */
.indietro {
position: fixed;
top: 16px;
right: 16px;
z-index: 1000;
width: 56px;
height: 56px;
display: grid;
place-items: center;
}
.indietro svg {
width: 44px;
height: 44px;
fill: none;
stroke: currentColor;
stroke-width: 3;
}
/* ---------- La tela --------------------------------------- */
.tela {
position: relative;
width: var(--tela);
margin: 0 auto;
background: var(--blu);
/* La tela fa contesto a se stante. Senza, i suoi elementi con z
alto (la grana di Dyelit sta a 308, certe cornici a 999)
scavalcano la freccia, che sta fuori: si vedeva sotto le
immagini e non si poteva cliccare. Isolandola, tutto quel
traffico resta dentro e la freccia gli passa sopra. */
isolation: isolate;
}
/* ---------- La tela si ingrandisce per riempire lo schermo ----
E questo il pezzo che mancava, e senza il quale tutto il resto
sembrava sbagliato.
Readymag non tiene la tela a 1024 px centrata: la INGRANDISCE
fino a riempire la finestra, con `zoom`. Misurato sul sito:
finestra 1920 -> zoom 1,875
finestra 1440 -> zoom 1,40625
finestra 900 -> zoom 0,878906
cioe sempre e solo `larghezza finestra / 1024`, senza limiti,
anche in riduzione.
Conferma: la pagina Dyelit e alta 2282 px di tela; sul sito il
contenitore risulta alto 3209 px, che e 2282 x 1,40625.
Perche cambia tutto: senza lo zoom, su uno schermo largo la
tela resta una colonna stretta in mezzo e attorno compare tutto
il materiale che sborda — schede, cornici, illustrazioni — che
invece deve stare fuori campo. Con lo zoom ogni cosa cresce
insieme: le proporzioni restano quelle e non si sovrappone
niente.
`calc(... / 1024px)` divide una lunghezza per una lunghezza e
da un numero puro, che e quello che `zoom` vuole. Dove non
fosse capito, la riga viene ignorata e si torna alla tela a
1024 centrata: la pagina resta usabile, solo piu piccola.
ATTENZIONE ALLA BARRA DI SCORRIMENTO
------------------------------------
`100vw` comprende la barra di scorrimento. Su Windows la barra
e larga 15 px e occupa spazio davvero: la finestra dice 1440,
ma lo spazio utile e 1425. Con `100vw` la tela veniva disegnata
larga 1440 dentro 1425 e il bordo destro finiva tagliato — e
siccome `html` e in `overflow-x: clip` non compariva nemmeno la
barra orizzontale a segnalarlo: la pagina sembrava solo storta.
Nel pannello di sviluppo non si vede, perche li le barre sono
sovrapposte e non tolgono spazio.
`100cqw` invece misura la larghezza del `body`, che la barra
l-ha gia tolta. Le due righe restano tutte e due: chi non capisce
`cqw` usa `100vw` e sta come prima, chi lo capisce sta giusto.
Dove `cqw` e capito ma manca il `container-type`, `100cqw` vale
quanto `100vw`, quindi non peggiora niente.
DOVE SI FERMA — 900, non 600
----------------------------
Sotto i 900 px non si applica: li vale la colonna.
La soglia del Readymag, misurata, era 600 (a 600 px tiene ancora la
tela da 1024 rimpicciolita, a 580 passa a una tela sua da 320).
Qui e stata alzata a 900 **per lo zoom del browser**: con la tela
che si rimpicciolisce esattamente di quanto lo zoom la ingrandisce,
premere Ctrl + non cambiava niente fino al 240%. Con la soglia a
900, su una finestra da 1440 la colonna arriva al 160% e da li il
testo cresce davvero (15 px invece di 9 px scalati).
Le WCAG chiedono il 200% (SC 1.4.4): con 600 non c-era, con 900 c-e.
Il prezzo, misurato: le finestre fra 600 e 899 px, che prima
vedevano la tela rimpicciolita, ora vedono la colonna; e a quelle
larghezze la colonna e alta circa il doppio che a 390, perche le
immagini vanno a tutta larghezza.
Scelta di Leonardo, 12 settembre 2026, dopo aver provato anche la
strada opposta (assecondare lo zoom ingrandendo la tela): li
rimpicciolendo si vedevano troppe cose che devono restare
nascoste fuori dai bordi.
-------------------------------------------------------------- */
@media (min-width: 900px) {
/* il body diventa il contenitore da misurare: la sua larghezza
e quella utile, senza la barra di scorrimento */
body { container-type: inline-size; }
.tela {
zoom: calc(100vw / 1024px);
zoom: calc(100cqw / 1024px);
/* Taglio SOLO in verticale, e solo qui: e la tela a misura
fissa, quella da schermo largo.
Sul Readymag la pagina ha un-altezza fissa e chi sborda
sotto lo trova tagliato dalla finestra (`.content-bounds`
e in `overflow: hidden`). Senza questo taglio gli elementi
che escono sotto allungano il documento e si scorre nel
vuoto: erano 262 px di nero dopo la fine di Dyelit e 40
dopo Huddler.
In orizzontale resta `visible`, perche li si sborda per
davvero (vedi la nota su `body`). `visible` e `clip`
insieme sono ammessi: nessuno dei due fa scorrere, quindi
il browser non li converte in `auto`/`hidden` come farebbe
accostandoli a `scroll`.
Sul telefono no: li la tela e una colonna ad altezza
automatica, non c-e niente da tagliare, e le linee di
costruzione sono `fixed` — tagliarle le farebbe sparire. */
overflow-x: visible;
overflow-y: clip;
}
}
.tela--indice { height: 1704px; }
/* Ogni elemento posizionato porta le sue coordinate.
Un contenitore senza position non fa da riferimento, quindi i
figli si posizionano rispetto alla tela: e quello che serve. */
.el {
position: absolute;
/* Il margine va azzerato qui, una volta per tutte. Un
o un
si porta dietro il margine che gli da il browser — 11 px su un
paragrafo da 11, 27 su un h1 — e siccome la posizione la danno
--x e --y, quel margine sposta l-elemento rispetto alla misura
rilevata. Su Huddler spingeva le tre colonne della testata 11 px
piu in basso, tanto che le linee di costruzione le
attraversavano; su Street art erano 19 elementi fuori posto. */
margin: 0;
left: calc(var(--x) * 1px);
top: calc(var(--y) * 1px);
width: calc(var(--w) * 1px);
height: calc(var(--h) * 1px);
}
/* ---------- Le animazioni, tre sole forme ------------------
------------------------------------------------------------
Le 219 animazioni del Readymag si riducono a tre comportamenti.
Ogni elemento porta i suoi numeri nello stile, presi dal modello
del progetto (vedi SPECIFICA-ANIMAZIONI.md), e la classe dice
quale delle tre e:
.entra parte al caricamento e si ferma (`load`)
.deriva va e torna, all-infinito (`load` con loop)
.scorre si muove mentre scorri la pagina (`scroll`)
In tutte e tre l-elemento nell-HTML sta nella posizione **di
arrivo**, e --dx/--dy dicono da dove viene. Cosi se l-animazione
non parte — browser vecchio, movimento ridotto — resta dov-e
giusto che sia invece di sparire fuori campo.
Uso `translate`, `scale` e `rotate` come proprieta separate e non
`transform`: cosi non si pestano i piedi con la rotazione che
alcuni elementi hanno gia addosso (gli sticker, i nastri). */
.entra, .deriva, .scorre { translate: 0 0; }
.entra {
animation: entra-in-scena var(--durata, 0.6s) var(--acc, ease-in-out) var(--ritardo, 0s) backwards;
}
@keyframes entra-in-scena {
from {
translate: calc(var(--dx, 0) * -1px) calc(var(--dy, 0) * -1px);
opacity: var(--op-da, 1);
scale: var(--sc-da, 1);
rotate: var(--rot-da, 0deg);
}
to {
translate: 0 0;
opacity: var(--op-a, 1);
scale: var(--sc-a, 1);
rotate: var(--rot-a, 0deg);
}
}
/* Chi finisce trasparente ci resta: `backwards` tiene il primo
fotogramma prima di partire, `forwards` l-ultimo dopo. */
.entra { animation-fill-mode: both; }
/* Va e torna, senza fine. Qui --dx/--dy sono l-escursione, non una
provenienza: parte da dov-e scritto e ci ritorna. */
.deriva {
animation: deriva-avanti-indietro var(--durata, 10s) var(--acc, ease-in-out) var(--ritardo, 0s) infinite alternate;
}
@keyframes deriva-avanti-indietro {
from { translate: 0 0; }
to { translate: calc(var(--dx, 0) * 1px) calc(var(--dy, 0) * 1px); }
}
@media (prefers-reduced-motion: reduce) {
/* Fermi al loro posto, che e quello buono, e nello stato FINALE:
chi doveva sparire sfumando resta sparito, se no resterebbe li
per sempre a coprire quello che sta sotto. */
.entra, .deriva {
animation: none;
translate: 0 0;
opacity: var(--op-a, 1);
scale: var(--sc-a, 1);
rotate: var(--rot-a, 0deg);
}
}
/* Due elementi di Streetwear non entrano e basta: **pulsano**
quattro volte e poi spariscono. Sono cinque passi da mezzo
secondo — 100→70, 70→100, 100→70, 70→100, e l-ultimo sfuma a
zero — che una animazione sola con partenza e arrivo non sa
raccontare: si vedrebbe solo un rimpicciolimento e via.
--sc-fine e la scala dell-ultimo passo, che cambia fra i due. */
.pulsa {
animation: pulsa-e-sparisci 2.5s ease-in-out var(--ritardo, 0s) both;
}
@keyframes pulsa-e-sparisci {
0% { scale: 1; opacity: 1; }
20% { scale: 0.7; }
40% { scale: 1; }
60% { scale: 0.7; }
80% { scale: 1; opacity: 1; }
100% { scale: var(--sc-fine, 0.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.pulsa { animation: none; scale: 1; opacity: 0; }
}
/* ---------- Chi entra scorrendo ---------------------------- */
/* Sul Readymag diversi elementi non stanno fermi dove sono scritti:
una animazione legata allo scroll li porta da li fino al loro
posto. Nel modello del progetto e `type: "scroll"` con un `dx/dy`.
COME E FATTO QUI, E PERCHE COSI
--------------------------------
Nell-HTML l-elemento sta nella posizione **di arrivo**, che e
quella giusta da fermi. `--dx`/`--dy` dicono da dove viene, e
l-animazione lo fa partire da li: `translate` va da −dx,−dy a 0,0.
Il vantaggio e che se il movimento non parte — browser che non
conosce `animation-timeline`, oppure chi ha chiesto meno
movimento — l-elemento resta dov-e giusto che sia, visibile. Il
contrario (scriverlo alla partenza e portarlo a destinazione)
lascerebbe mezza pagina fuori campo, che e quello che succedeva.
`view()` lega l-animazione all-attraversamento della finestra da
parte dell-elemento: comincia quando entra dal basso, come dice
`start_point: "bottom"` del modello.
COME LO FA IL READYMAG — misurato sull-originale
------------------------------------------------
Sulla pagina Dyelit dal vivo, a 1440 × 900, un giro di rotella alla
volta. Tre regole, e tornano su tutti gli elementi misurati:
1. PARTE da scroll 0 se l-elemento sta gia nella prima schermata,
altrimenti quando il suo bordo alto entra dal fondo della
finestra. A pagina aperta e quindi ALLA PARTENZA, anche se si
vede gia.
2. DURA (spostamento / speed) px di scroll: il graffito 752 / 2 =
376, le foto 643 / 1,5 = 429, il logo bianco 123 / 0,5 = 246.
Nell-HTML e `--corsa`.
3. ACCELERA come easeInOutQuad: e questo l-«ease-both» del
modello, non l-`ease-in-out` dei CSS.
Qui: `.scorre--rm` segue lo scroll della pagina da 0 a --corsa
(regola 1, prima schermata); con anche `.scorre--sotto` segue
invece il proprio ingresso, da quando entra dal fondo a --corsa px
dopo. Le lunghezze in `animation-range` sono in px di tela: il
browser le scala con lo `zoom`, come il Readymag scala le sue.
Chi non ha `--rm` usa ancora tutto l-attraversamento (`cover`).
`--scala-a` e la scala d-arrivo, per chi oltre a spostarsi si
ingrandisce (il logo bianco di Dyelit: da 100 a 119%). Sta anche
fuori dall-animazione, perche e la misura a riposo. */
.scorre {
translate: 0 0;
scale: var(--scala-a, 1);
}
@supports (animation-timeline: view()) {
.scorre {
animation: entra-scorrendo linear both;
animation-timeline: view();
/* `cover` invece di `entry`: il movimento dura tutto il tempo in
cui l-elemento attraversa la finestra, non solo mentre entra
dal basso. Con `entry` chi sta gia in cima alla pagina aveva
finito di muoversi prima ancora che tu potessi vederlo — il
graffito di Dyelit sembrava fermo. */
animation-range: cover 0% cover 100%;
}
.scorre--rm {
animation-timeline: scroll(root);
animation-range: 0px calc(var(--corsa) * 1px);
animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.scorre--rm.scorre--sotto {
animation-timeline: view();
animation-range: entry 0% entry calc(var(--corsa) * 1px);
}
}
/* FERMI A CENTRO PAGINA: .scorre--al-centro
Per gli elementi che devono essere gia al loro posto quando li
hai davanti. Il movimento parte quando entrano dal fondo della
finestra e finisce quando sono centrati (`cover 50%`: meta
dell-attraversamento, cioe il loro centro sul centro della
finestra), a qualunque altezza di schermo. Accelerazione
easeInOutQuad, quella del Readymag. Usato su Huddler per il titolo
«Logo» e per il riquadro della palette, che a centro pagina erano
ancora a meta corsa. */
@supports (animation-timeline: view()) {
.scorre--al-centro {
animation-timeline: view();
animation-range: entry 0% cover 50%;
animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
}
@keyframes entra-scorrendo {
from {
translate: calc(var(--dx, 0) * -1px) calc(var(--dy, 0) * -1px);
scale: var(--scala-da, 1);
}
to {
translate: 0 0;
scale: var(--scala-a, 1);
}
}
@media (prefers-reduced-motion: reduce) {
/* niente movimento: restano al loro posto, che e gia quello buono */
.scorre { animation: none; translate: 0 0; }
}
/* ---------- Linee di costruzione -------------------------- */
/* Sul Readymag sono SVG con stroke bianco 1px e trattini "1 2"
(trattino 1 px, spazio 2 px), dentro una scatola alta 8 px.
Qui la stessa cosa con un gradiente ripetuto: nessun file da
scaricare e il disegno e identico. */
.linea {
position: absolute;
pointer-events: none;
z-index: 2;
}
.linea--oriz {
left: calc(var(--x) * 1px);
top: calc(var(--y) * 1px + var(--mezza, 4px));
width: calc(var(--w) * 1px);
height: 1px;
background-image: repeating-linear-gradient(
to right,
var(--tratto, var(--bianco)) 0 var(--trattino),
transparent var(--trattino) var(--passo-tratteggio));
}
/* Con --y comincia piu in basso e con --h finisce prima. Servono
tutte e due: sul Readymag queste linee sono rettangoli lunghi
ruotati di 90 gradi, e coprono una fascia precisa, non tutta la
pagina. Su Huddler stanno solo attorno alla testata, su
Illustrazioni partono sotto al titolo. Farle correre da cima a
fondo, com-era, taglia scritte e immagini.
L-altezza si puo fermare prima del fondo con --h: sull-indice le
verticali arrivano a 1288 e non attraversano il riquadro dei
contatti, che sta sotto da 1304 a 1435. Senza --h vanno fino in
fondo, come prima. */
.linea--vert[style*="--h"] { --altezza-linea: calc(var(--h) * 1px); }
.linea--vert {
left: calc(var(--x) * 1px + var(--mezza, 4px));
top: calc(var(--y, 0) * 1px);
width: 1px;
height: var(--altezza-linea, 100%);
background-image: repeating-linear-gradient(
to bottom,
var(--tratto, var(--bianco)) 0 var(--trattino),
transparent var(--trattino) var(--passo-tratteggio));
}
/* Sul Readymag una linea non e una linea: e un rettangolo alto 8 o
16 px con dentro un tratteggio, e il tratto sta nel mezzo. Quindi
la coordinata scritta e il bordo della scatola, non la linea:
--mezza e meta di quell-altezza. Sull-indice le scatole sono
alte 8 (default, +4), su tutte le altre pagine 16 (+8).
Non e un dettaglio: 4 px di scarto bastavano a far passare il
tratteggio dentro la prima riga di testo della testata Huddler. */
/* ---------- Cornice tratteggiata --------------------------- */
/* `border: 1px dashed` lo disegna il browser come gli pare: i
trattini non sono quelli delle linee di costruzione e cambiano da
browser a browser. Qui la cornice e fatta con gli stessi gradienti
delle linee, quindi ha lo stesso ritmo — `--trattino` e
`--passo-tratteggio` — su tutti e quattro i lati. */
.tratteggiato {
--riga-oriz: repeating-linear-gradient(
to right,
var(--tratto, var(--bianco)) 0 var(--trattino),
transparent var(--trattino) var(--passo-tratteggio));
--riga-vert: repeating-linear-gradient(
to bottom,
var(--tratto, var(--bianco)) 0 var(--trattino),
transparent var(--trattino) var(--passo-tratteggio));
background-image: var(--riga-oriz), var(--riga-oriz), var(--riga-vert), var(--riga-vert);
background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
background-position: 0 0, 0 100%, 0 0, 100% 0;
background-repeat: no-repeat;
}
/* ---------- Intestazione ---------------------------------- */
/* Courier New 12 px, interlinea 14, spaziatura 3 px, bianco.
`>`: solo le due righe, non lo span che sta dentro alla seconda. */
.intestazione > span {
position: absolute;
top: 30px;
font-size: 12px;
line-height: 14px;
letter-spacing: 3px;
color: var(--bianco);
white-space: nowrap;
}
.int-nome { left: 44px; width: 185px; }
.int-riga { left: 272px; width: 801px; }
/* ---------- Bottoni del menu ------------------------------ */
/* Misurati: 224x80, bordo 2 px bianco, fondo trasparente, testo
Courier New 18 px centrato con line-height pari all'altezza.
Acceso: fondo #04FF00, bordo e testo neri. */
/* ---------- La colonna che scorre di lato ------------------
Tasti e about sono un blocco solo (`.colonna`, un `.el` come gli
altri) che si sposta in giu mentre la pagina scorre: 0 a pagina in
cima, 280 px di tela a pagina in fondo. Cosi in cima il primo tasto
sta allineato al riquadro di Dyelit (64) e in fondo l-about al fondo
del riquadro di Expì (1528), e in mezzo passa in modo continuo.
Lo guida lo scorrimento della pagina (`scroll(root)`), che va
sempre da 0 a 100% qualunque sia l-altezza della finestra: per
questo le due posizioni tornano esatte a ogni larghezza, senza
JavaScript. La corsa e in px di tela e lo `zoom` la scala insieme
al resto.
Chi ha chiesto meno movimento, o un browser che non conosce le
animazioni legate allo scroll, vede la colonna ferma in cima: al
suo posto originale, niente di rotto. */
.colonna { z-index: 30; }
@media (min-width: 900px) {
/* dentro al blocco le coordinate ripartono da zero, e i tasti sono
un po- piu bassi: 64 invece di 80 */
.colonna .tasto {
left: 0;
height: 64px;
line-height: 61px; /* 64 meno 1,5 + 1,5 del bordo */
}
}
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {
.colonna {
animation: colonna-scende linear both;
animation-timeline: scroll(root);
}
}
}
@keyframes colonna-scende {
from { translate: 0 0; }
to { translate: 0 280px; } /* 1528 - 64 - 1184 */
}
.tasto {
position: absolute;
left: 24px;
top: calc(var(--y) * 1px);
width: 224px;
height: 80px;
/* Il filo bianco era 2 px: piu sottile su richiesta di Leonardo,
1,5 px, qui come sui riquadri e sull-about. */
border: 1.5px solid var(--bianco);
color: var(--bianco);
background: transparent;
font-size: 18px;
line-height: 77px; /* 80 meno 1,5 + 1,5 del bordo */
text-align: center;
white-space: nowrap;
transition: background-color 0.15s, color 0.15s, border-color 0.15s;
z-index: 10;
}
.tasto:hover,
.tasto:focus-visible {
background: var(--verde);
border-color: var(--nero);
color: var(--nero);
}
/* Sul tocco il :hover resta appiccicato dopo il tap. */
@media (hover: none) {
.tasto:hover { background: transparent; border-color: var(--bianco); color: var(--bianco); }
.tasto:active { background: var(--verde); border-color: var(--nero); color: var(--nero); }
}
/* ---------- Riquadri delle anteprime ---------------------- */
/* Le anteprime cliccabili portano la stessa cornice dei bottoni del
menu — 2 px bianchi — e si accendono uguale al passaggio del
mouse: la cornice diventa verde lime. Sui bottoni il verde riempie
il fondo perche dentro c-e solo testo; qui dentro c-e l-immagine,
quindi si accende il bordo e resta visibile quello che si sta per
aprire. */
.riq,
a.manca {
position: absolute; /* gia dato da .el: qui serve perche il nome
sovrapposto si misuri su di loro */
border: 1.5px solid var(--bianco);
overflow: hidden;
z-index: 5;
transition: border-color 0.15s, box-shadow 0.15s;
}
/* Acceso: come i bottoni del menu, il riquadro si riempie di verde
lime, il bordo diventa nero e al centro compare il nome della
sezione. L-immagine resta sotto, coperta. */
.riq__nome {
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding: 8px;
background: var(--verde);
color: var(--nero);
font-size: 18px;
line-height: 1.3;
text-align: center;
opacity: 0;
transition: opacity 0.15s;
}
.riq:hover, .riq:focus-visible,
a.manca:hover, a.manca:focus-visible { border-color: var(--nero); }
.riq:hover .riq__nome, .riq:focus-visible .riq__nome,
a.manca:hover .riq__nome, a.manca:focus-visible .riq__nome { opacity: 1; }
/* Sul tocco il :hover resta appiccicato dopo il tap. */
@media (hover: none) {
.riq:hover, a.manca:hover { border-color: var(--bianco); }
.riq:hover .riq__nome, a.manca:hover .riq__nome { opacity: 0; }
.riq:active, a.manca:active { border-color: var(--nero); }
.riq:active .riq__nome, a.manca:active .riq__nome { opacity: 1; }
}
.riq img, .riq video {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ---------- Riquadro segnaposto --------------------------- */
/* Dove manca un materiale (un video che non c'e tra i file) resta
un riquadro della misura esatta che dichiara cosa manca, invece
di un buco o di un rimpiazzo inventato. */
.manca {
--retino: repeating-linear-gradient(
45deg, rgba(255,255,255,0.05) 0 10px, transparent 10px 20px);
--riga-oriz: repeating-linear-gradient(
to right,
var(--tratto, var(--bianco)) 0 var(--trattino),
transparent var(--trattino) var(--passo-tratteggio));
--riga-vert: repeating-linear-gradient(
to bottom,
var(--tratto, var(--bianco)) 0 var(--trattino),
transparent var(--trattino) var(--passo-tratteggio));
background-image: var(--riga-oriz), var(--riga-oriz), var(--riga-vert), var(--riga-vert), var(--retino);
background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%, auto;
background-position: 0 0, 0 100%, 0 0, 100% 0, 0 0;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
display: grid;
place-content: center;
gap: 6px;
padding: 12px;
text-align: center;
font-size: 11px;
line-height: 1.5;
letter-spacing: 1px;
color: var(--bianco);
}
.manca strong {
display: block;
font-weight: 700;
font-size: 12px;
letter-spacing: 2px;
}
/* Il nome della sezione e anche lui uno dentro .manca, ma
non e la nota del segnaposto: deve restare invisibile finche non
ci passi sopra il mouse. Senza :not() questa riga lo accendeva al
75% e il riquadro Streetwear risultava verde in permanenza. */
.manca span:not(.riq__nome) { opacity: 0.75; }
/* Un riquadro basso (la barra LOADING e alta 44 px) non tiene la
nota alla misura normale: stessa nota, corpo ridotto, cosi resta
dentro la sagoma invece di sbordare sopra a quello che sta sotto. */
.manca--stretta {
padding: 4px;
gap: 2px;
font-size: 8px;
line-height: 1.3;
letter-spacing: 0.5px;
}
.manca--stretta strong { font-size: 9px; line-height: 1.2; letter-spacing: 1px; }
/* ---------- Il bottone del menu a scomparsa ---------------- */
/* Esiste solo sul telefono e solo con lo script (le regole che lo
mostrano sono nel blocco della colonna): sulla tela non c'e.
Tondo da 56 come la freccia indietro delle sezioni, filo bianco
da 1,5 come i tasti, sul blu. Le tre righe diventano una X. */
.menu-apri {
display: none;
position: fixed;
top: 12px;
right: 12px;
z-index: 95;
width: 56px;
height: 56px;
place-items: center;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--blu);
box-shadow: inset 0 0 0 1.5px var(--bianco);
color: var(--bianco);
cursor: pointer;
}
.menu-apri__righe,
.menu-apri__righe::before,
.menu-apri__righe::after {
display: block;
width: 22px;
height: 2px;
background: currentColor;
transition: translate 0.25s ease, rotate 0.25s ease, opacity 0.2s;
}
.menu-apri__righe { position: relative; }
.menu-apri__righe::before,
.menu-apri__righe::after { content: ""; position: absolute; left: 0; }
.menu-apri__righe::before { translate: 0 -7px; }
.menu-apri__righe::after { translate: 0 7px; }
.menu-apri[aria-expanded="true"] .menu-apri__righe { background: transparent; }
.menu-apri[aria-expanded="true"] .menu-apri__righe::before { translate: 0 0; rotate: 45deg; background: var(--bianco); }
.menu-apri[aria-expanded="true"] .menu-apri__righe::after { translate: 0 0; rotate: -45deg; background: var(--bianco); }
.menu-apri:active { background: var(--verde); color: var(--nero); }
/* Il menu a scomparsa esiste solo sul telefono: le regole stanno
nella colonna, «Il menu a scomparsa». Qui e spento. */
.cassetto { display: none; }
/* ---------- Il tasto grande dell-about --------------------- */
/* Stessa faccia dei sei del menu — cornice bianca 2 px, fondo
trasparente sul blu — ma alto fino al tratteggio. A riposo porta
solo la scritta; col mouse sopra si accende di verde lime, il
bordo diventa nero e compaiono la foto e la presentazione.
Niente piu `overflow: hidden`: il foglio e la foto proiettano
l'ombra fuori dal tasto, e la foto inclinata e la graffetta
sporgono un poco. Il testo sta comunque dentro. */
/* Il filo bianco qui NON e un `border` ma un'ombra interna: il bordo
il browser lo arrotonda ai pixel dello schermo (1,5 px diventano 1,08
a una larghezza, 1,23 a un'altra) e lo spazio dentro cambia con lui —
e con lo spazio la larghezza del foglio a righe, e le righe
scivolavano sotto al testo fino a 2 px in fondo. L'ombra interna si
vede uguale ma non occupa posto: dentro restano sempre 224 px, e le
coordinate di foto e testo si contano dal bordo esterno. */
.about-tasto {
border: 0;
box-shadow: inset 0 0 0 1.5px var(--bianco);
background: transparent;
z-index: 8;
transition: background-color 0.15s, box-shadow 0.15s;
}
.about-etichetta {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-size: 18px;
color: var(--bianco);
transition: opacity 0.15s;
}
/* Foto e testo stanno gia al loro posto, ma invisibili: cosi non
c-e niente da spostare quando si accende, solo da scoprire. */
.about-tasto .about-foto,
.about-tasto .about-testo {
opacity: 0;
transition: opacity 0.15s;
}
/* LA FOTO APPOGGIATA SUL FOGLIO (scelta di Leonardo)
Niente cornice nera: una stampa fotografica col suo bordo bianco,
girata di 3 gradi, con una graffetta di metallo sul bordo alto.
L'ombra e quella degli adesivi (stessa luce in alto a sinistra:
contatto corto e ombra lunga), e sta su `.about-foto`, che resta
dritto; la rotazione sta su `.about-inclinata`, dentro. Un filtro
si calcola prima della rotazione dello stesso elemento: se stessero
insieme l'ombra girerebbe con la foto (vedi gli adesivi).
La graffetta e in due pezzi: quella intera DIETRO alla stampa — se
ne vede solo la parte sopra al bordo — e davanti il filo che passa
sulla foto, con la sua piccola ombra. */
.about-foto {
filter:
drop-shadow(1px 1.5px 0.8px rgba(0, 0, 0, 0.45))
drop-shadow(5px 9px 8px rgba(0, 0, 0, 0.32));
}
.about-inclinata {
position: absolute;
inset: 0;
rotate: -3deg;
}
/* Senza bordo bianco (Leonardo): la foto e solo l'immagine. */
.about-stampa {
position: absolute;
inset: 0;
}
.about-stampa img { width: 100%; height: 100%; object-fit: cover; }
/* la luce che scivola sulla carta lucida */
.about-stampa::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 45%);
pointer-events: none;
}
.graffetta {
position: absolute;
left: 132px;
top: -17px; /* il bordo della foto passa a 17 px dalla cima della graffetta */
rotate: 6deg;
transform-origin: 50% 36%;
overflow: visible;
}
.graffetta--davanti { filter: drop-shadow(0.5px 1px 0.5px rgba(0, 0, 0, 0.45)); }
/* Courier New 15 px, interlinea 20.
ATTENZIONE ALLA SPAZIATURA: qui e **normale**, non 4,9 px come
negli altri testi della pagina. Il widget di Readymag dichiara
4,9 px sullo span ma non la applica: misurando la parola
«comunicazione» sul sito viene 8,80 px per carattere, cioe la
sola larghezza del monospaziato (0,6 em = 9 px), senza aggiunte.
Non e un dettaglio: con 4,9 px ogni riga tiene 16 caratteri
invece di 25, il testo diventa lungo un terzo di piu e sfonda il
suo riquadro. */
/* Sul Readymag questo testo e 15/20. Qui e **13/18**: dentro al
riquadro verde, a 15, le righe arrivavano a filo del bordo e si
leggeva male. Rimpicciolito e rientrato di 8 px per lato, respira.
E una scelta di leggibilita, non una misura rilevata. */
.about-testo {
font-size: 13px;
line-height: 18px;
letter-spacing: normal;
color: var(--bianco);
}
.about-testo p { margin: 0; }
.about-testo p + p { margin-top: 18px; }
/* ---- acceso ----
IL BIGLIETTO (scelta di Leonardo, al posto del verde lime): col
mouse sopra il tasto diventa un foglio a righe — la texture
«texture biglietto» (originale in `sorgenti/immagini/`, 1390 x 4762).
L'immagine non si taglia e non si deforma: larga quanto il tasto
dentro al bordo (220), alta in proporzione (754), appoggiata in alto;
la parte che non entra resta sotto al bordo.
Sta su un `::before` e non sul `background` del tasto per due
ragioni: si scarica gia con la pagina (niente foglio che arriva in
ritardo al primo passaggio del mouse) e puo sfumare come la foto e
il testo. */
.about-tasto::before {
content: "";
position: absolute;
/* 2 px dal bordo esterno per lato: largo 220 esatti, a ogni zoom,
come le misure delle righe. */
inset: 2px;
background: url("../rm/biglietto.webp") left top / 100% auto no-repeat;
/* Un foglio appoggiato sul blu: ombra di contatto e ombra morbida,
con la stessa luce degli adesivi ma piu bassa, perche la carta sta
piatta. E un `drop-shadow` e non un `box-shadow`: segue la forma
dell'immagine, quindi anche i fori hanno il loro bordo d'ombra. */
filter:
drop-shadow(0.6px 1px 0.6px rgba(0, 0, 0, 0.4))
drop-shadow(3px 6px 6px rgba(0, 0, 0, 0.28));
opacity: 0;
transition: opacity 0.15s;
pointer-events: none;
}
/* Acceso, il filo sparisce: resta solo il foglio. */
.about-tasto:hover,
.about-tasto:focus-visible {
box-shadow: inset 0 0 0 1.5px transparent;
}
.about-tasto:hover::before,
.about-tasto:focus-visible::before { opacity: 1; }
/* IL TESTO SULLE RIGHE
Solo sulla tela: in colonna il biglietto non c'e.
Le misure vengono dall'immagine, riportate ai 220 px del tasto:
- righe rosa ogni 125,46 px dell'originale, la prima a 41;
- riga blu del margine a 186; fori da 21 a 99.
L'interlinea diventa quindi il passo delle righe (19,86) e ogni riga
di testo appoggia sulla sua; il testo parte dopo il margine blu,
come su un quaderno, invece che sopra ai fori. Fra i due paragrafi
resta una riga vuota, come prima. Carattere e parole non cambiano. */
@media (min-width: 900px) {
.about-tasto {
--riga-biglietto: calc(220px * 125.46 / 1390);
}
.about-testo {
line-height: var(--riga-biglietto);
}
.about-testo p + p { margin-top: var(--riga-biglietto); }
}
.about-tasto:hover .about-etichetta,
.about-tasto:focus-visible .about-etichetta { opacity: 0; }
.about-tasto:hover .about-foto,
.about-tasto:hover .about-testo,
.about-tasto:focus-visible .about-foto,
.about-tasto:focus-visible .about-testo { opacity: 1; }
.about-tasto:hover .about-testo,
.about-tasto:focus-visible .about-testo { color: var(--nero); }
/* Sul tocco il :hover resta appiccicato dopo il tap: li vale
:active, come per i bottoni del menu. */
@media (hover: none) {
.about-tasto:hover { box-shadow: inset 0 0 0 1.5px var(--bianco); }
.about-tasto:hover::before { opacity: 0; }
.about-tasto:hover .about-etichetta { opacity: 1; }
.about-tasto:hover .about-foto, .about-tasto:hover .about-testo { opacity: 0; }
.about-tasto:active { box-shadow: inset 0 0 0 1.5px transparent; }
.about-tasto:active::before { opacity: 1; }
.about-tasto:active .about-etichetta { opacity: 0; }
.about-tasto:active .about-foto, .about-tasto:active .about-testo { opacity: 1; }
.about-tasto:active .about-testo { color: var(--nero); }
}
/* ---------- Sticker --------------------------------------- */
/* Immagini ruotate appoggiate sopra il resto. */
/* Adesivi appoggiati sopra al resto: si possono spostare col mouse
e hanno un-ombra che li stacca dal fondo.
`drop-shadow` e non `box-shadow`: sono ritagli con lo sfondo
trasparente, e l-ombra deve seguire il contorno della sagoma, non
il rettangolo dell-immagine.
Lo spostamento sta in `translate`, proprieta separata: cosi non
pesta i piedi alla rotazione, che resta in `transform`. */
.sticker {
position: absolute;
left: calc(var(--x) * 1px);
top: calc(var(--y) * 1px);
width: calc(var(--w) * 1px);
height: calc(var(--h) * 1px);
translate: calc(var(--sposta-x, 0) * 1px) calc(var(--sposta-y, 0) * 1px);
/* Sopra a tutto quello che sta nella tela, colonna che scorre
compresa (30): un adesivo appoggiato non va mai sotto a niente. */
z-index: 50;
/* L-EFFETTO 3D — una luce sola, per tutti gli adesivi
---------------------------------------------------
Tre strati, con la luce in alto a sinistra:
1. un filo chiaro sul bordo in alto a sinistra: lo spessore del
vinile che prende la luce;
2. il contatto, corto e scuro, in basso a destra;
3. l-ombra ambiente, lunga e morbida, nella stessa direzione.
Col mouse sopra l-adesivo si alza un poco, in mano si solleva
del tutto: cresce e l-ombra si allontana.
PERCHE LE OMBRE ERANO INCOERENTI: la rotazione stava sullo stesso
elemento del `filter`, e un filtro si calcola PRIMA della
rotazione, quindi l-ombra girava con l-adesivo — con -22, 13, -28
e 10 gradi ognuna puntava da un-altra parte. Ora la rotazione sta
sull-immagine dentro (`.sticker img`) e il foglio resta dritto:
tutte le ombre cadono nello stesso verso. E la bomboletta non ha
piu l-ombra disegnata nel file, che andava a sinistra. */
filter:
drop-shadow(-0.6px -0.6px 0 rgba(255, 255, 255, 0.55))
drop-shadow(1px 1.5px 0.8px rgba(0, 0, 0, 0.45))
drop-shadow(5px 9px 8px rgba(0, 0, 0, 0.32));
transition: scale 0.18s ease-out, filter 0.18s ease-out;
cursor: grab;
touch-action: none; /* se no il dito scorre la pagina invece di trascinare */
user-select: none;
}
.sticker img {
pointer-events: none; /* si trascina il foglio, non la figura */
rotate: calc(var(--rot, 0) * 1deg); /* la rotazione sta qui, non sul foglio: vedi sopra */
}
.sticker:hover {
scale: 1.05;
filter:
drop-shadow(-0.6px -0.6px 0 rgba(255, 255, 255, 0.55))
drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.35))
drop-shadow(8px 14px 12px rgba(0, 0, 0, 0.32));
}
.sticker[data-preso],
.sticker[data-agganciato] {
cursor: grabbing;
z-index: 60;
scale: 1.12;
filter:
drop-shadow(-0.6px -0.6px 0 rgba(255, 255, 255, 0.55))
drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.2))
drop-shadow(14px 24px 18px rgba(0, 0, 0, 0.36));
}
/* Agganciato col clic: segue il puntatore senza che tu tenga premuto,
e un altro clic lo posa. Serve alle WCAG 2.2 (SC 2.5.7): quello che
si fa trascinando si deve poter fare anche senza trascinare.
Niente riquadro tratteggiato attorno (tolto su richiesta di Leonardo,
13 settembre): che e in mano lo dicono gia l-adesivo che si solleva
e l-ombra che si allontana, come quando lo trascini. */
.sticker img { width: 100%; height: 100%; object-fit: cover; }
/* ---------- Piede ----------------------------------------- */
.piede-riquadro { z-index: 4; }
/* Courier New 10 px, interlinea 20, spaziatura 4,9 px. */
.piede-testo {
z-index: 6;
font-size: 10px;
line-height: 20px;
letter-spacing: 4.9px;
color: var(--bianco);
white-space: pre;
}
.piede-testo a { color: var(--bianco); }
.piede-testo a:hover { color: var(--verde-link); }
/* ---------- Il caricamento --------------------------------- */
/* Copre tutto per tre secondi e mezzo, poi se ne va da solo.
E un-animazione CSS e non JavaScript: se lo script non parte non
resta un velo nero incollato sopra al portfolio. `visibility`
nell-ultimo fotogramma lo toglie anche a chi legge con lo schermo
spento, non solo alla vista.
Con `prefers-reduced-motion` la durata scende a zero (regola in
fondo al foglio): l-attesa resta, la dissolvenza no. */
/* Gia visto in questa sessione: niente velo, nemmeno per un
fotogramma. La classe la mette lo script nella testa dell-indice. */
.senza-caricamento .caricamento { display: none; }
/* L-INGRESSO, COM-E SUL READYMAG
------------------------------------------------------------
Il modello del progetto (rilievi/readymag/rm-indice.json) dice
che il caricamento non sfuma: **scorre via verso destra**. I tre
elementi dell-intro hanno `dx 1128` in 0,5 s dopo 5 s di attesa,
e nello stesso momento i sei bottoni del menu partono da x −376
e si spostano di `dx 400` in 1,5 s, arrivando a 24.
QUANTO DURA
-----------
Con JavaScript il velo dura **quanto il caricamento**: lo script
nella testa dell-indice mette `con-script` subito e `pronto` quando
la pagina e carica, e il velo parte da li. `--attesa` resta la
strada senza script: 3,5 s fissi, e il velo se ne va lo stesso.
1128 px di tela sono il 110% della tela stessa: uso quello, cosi
il velo esce di scena a qualunque ingrandimento. */
:root {
--attesa: 3.5s; /* sul Readymag: 5s */
--uscita: 0.5s;
--entrata-menu: 1.5s;
}
.caricamento {
position: fixed;
inset: 0;
z-index: 100;
background: var(--nero);
display: grid;
grid-auto-rows: min-content;
justify-items: center;
align-content: center;
gap: 24px;
padding: 24px;
}
/* Senza script: tempo fisso, come prima. */
html:not(.con-script) .caricamento {
animation: caricamento-via var(--uscita) ease var(--attesa) forwards;
}
/* Con lo script: il velo resta finche la pagina non e pronta. */
html.con-script.pronto .caricamento {
animation: caricamento-via var(--uscita) ease forwards;
}
@keyframes caricamento-via {
to { transform: translateX(110%); visibility: hidden; pointer-events: none; }
}
/* I bottoni entrano da sinistra mentre il velo esce a destra, e con
loro il tasto grande dell-about, che sta nella stessa colonna: 400
px bastano a tenerlo fuori campo (parte da x −376, largo 224).
Solo alla prima apertura: se il caricamento e gia stato visto,
sono al loro posto dall-inizio e non si muove niente. */
html:not(.con-script):not(.senza-caricamento) .tasto,
html:not(.con-script):not(.senza-caricamento) .about-tasto {
animation: menu-entra var(--entrata-menu) ease var(--attesa) backwards;
}
html.con-script.pronto:not(.senza-caricamento) .tasto,
html.con-script.pronto:not(.senza-caricamento) .about-tasto {
animation: menu-entra var(--entrata-menu) ease backwards;
}
@keyframes menu-entra {
from { transform: translateX(-400px); }
to { transform: translateX(0); }
}
/* Chi ha chiesto meno movimento non se li vede scorrere: il velo
sparisce e basta, i bottoni sono gia dove devono stare. La regola
generale in fondo al foglio azzera le durate, qui tolgo anche lo
spostamento perche non parta e si fermi a meta. */
@media (prefers-reduced-motion: reduce) {
html:not(.senza-caricamento) .tasto,
html:not(.senza-caricamento) .about-tasto,
html.con-script.pronto:not(.senza-caricamento) .tasto,
html.con-script.pronto:not(.senza-caricamento) .about-tasto { animation: none; }
/* niente scorrimento: il velo se ne va sfumando, senza muoversi.
Un nome diverso invece di ridefinire lo stesso keyframe: due
@keyframes con lo stesso nome sono un guaio che si paga dopo. */
.caricamento { animation-name: caricamento-sfuma; }
}
@keyframes caricamento-sfuma {
to { opacity: 0; visibility: hidden; pointer-events: none; }
}
.intro-titolo {
margin: 0;
font-size: 22px;
line-height: 34px;
letter-spacing: 6px;
text-align: center;
color: var(--bianco);
}
/* Il fiore e un video verticale (1080 x 1920): dentro un riquadro
orizzontale in `cover` veniva tagliato ai lati e sopra. Qui il
riquadro prende la proporzione del file e il video ci sta dentro
intero. */
.intro-video {
width: min(60vw, 260px);
aspect-ratio: 1080 / 1920;
max-height: 52vh;
}
.intro-video video {
width: 100%;
height: 100%;
object-fit: contain;
}
/* LA BARRA LOADING / COMPLETED
Larga quanto il video. Un binario con il filo bianco sottile delle
cornici (1,5 px); dentro, il pieno verde lime dei tasti accesi, con
strisce diagonali che scorrono — si vede che sta lavorando anche
quando avanza piano. A fine corsa le strisce si fermano, il pieno
fa un lampo e la scritta passa da LOADING 00% a COMPLETED.
L'avanzamento e `--avanzamento` (0–1), scritto dallo script. Senza
script lo fa un'animazione CSS nei 3,5 s di `--attesa`. */
.barra-carica {
width: min(60vw, 260px);
display: grid;
gap: 10px;
}
.barra-carica__binario {
height: 14px;
padding: 2px;
box-shadow: inset 0 0 0 1.5px var(--bianco);
overflow: hidden;
}
.barra-carica__pieno {
height: 100%;
width: calc(var(--avanzamento, 0) * 100%);
background-color: var(--verde);
background-image: repeating-linear-gradient(
-45deg,
rgb(0 0 0 / 22%) 0 5px,
transparent 5px 10px);
background-size: 14.14px 14.14px; /* un passo diagonale esatto: le strisce si ripetono senza salti */
animation: barra-strisce 0.6s linear infinite;
}
@keyframes barra-strisce {
to { background-position: 14.14px 0; }
}
html:not(.con-script) .barra-carica__pieno {
animation:
barra-strisce 0.6s linear infinite,
barra-riempi var(--attesa) cubic-bezier(0.25, 0.7, 0.3, 1) forwards;
}
@keyframes barra-riempi {
from { width: 0; }
to { width: 100%; }
}
.barra-carica--completa .barra-carica__pieno {
background-image: none;
animation: barra-lampo 0.25s ease-out;
}
@keyframes barra-lampo {
0% { filter: brightness(1.8); }
100% { filter: brightness(1); }
}
/* Courier New 12 px, spaziatura 4,9, come le scritte della tela; le
cifre hanno tutte la stessa larghezza e la scritta non balla. */
.barra-carica__scritta {
margin: 0;
font-size: 12px;
line-height: 14px;
letter-spacing: 4.9px;
color: var(--bianco);
text-align: center;
font-variant-numeric: tabular-nums;
}
.barra-carica--completa .barra-carica__scritta { color: var(--verde); }
@media (prefers-reduced-motion: reduce) {
.barra-carica__pieno { animation: none; }
html:not(.con-script) .barra-carica__pieno { animation: barra-riempi var(--attesa) linear forwards; }
}
/* ============================================================
TELEFONO — sotto la larghezza della tela
------------------------------------------------------------
La tela si scioglie e tutto torna in colonna, nell'ordine in
cui sta nell'HTML. Larghezza piena meno il margine che lascia
in vista le linee di costruzione ai lati. I riquadri tengono
la loro proporzione, ricavata da --w e --h.
============================================================ */
@media (max-width: 899px) {
/* ---------- NIENTE COREOGRAFIA IN COLONNA ----------
Le animazioni sono impaginazione da tela: gli spostamenti sono
in pixel di quella tela (dx 643, 480, 1128...) e in colonna
buttano gli elementi centinaia di px fuori dallo schermo — su
Dyelit finivano a x −627, su Huddler a +854.
Qui si spengono tutte e si azzera quello che avevano messo:
posizione, scala, rotazione e opacita. In colonna il contenuto
deve solo esserci, in ordine, leggibile. */
.entra, .deriva, .scorre, .pulsa {
animation: none !important;
translate: none !important;
scale: none !important;
rotate: none !important;
opacity: 1 !important;
}
.tela,
.tela--indice {
width: 100%;
height: auto;
padding: 0 var(--margine);
/* IL TETTO DELLA COLONNA (TELEFONO.md §2, misura scelta da
Leonardo): fino a 480 px la colonna prende tutta la larghezza;
oltre — telefono ruotato, tablet — si ferma a 480 e si centra.
Senza tetto, a 780 px la pagina di Dyelit era alta il doppio
che a 390, con immagini enormi. */
max-width: 480px;
margin-inline: auto;
}
/* Ai lati della colonna centrata si vede il fondo della pagina: su
tutte le stanze e gia dello stesso colore della tela, sull-indice
no (tela blu, pagina nera). Qui torna blu. */
body:not([data-pagina]) { background: var(--blu); }
/* ---------- IL RITORNO ALL-INDICE RESTA ----------
Il guscio non cambia fra telefono e schermo grande: la freccia
sta nello stesso angolo, con la stessa forma, sopra a tutto.
Prima spariva sotto la soglia della colonna, e dalle pagine
progetto si tornava indietro solo col tasto del browser.
`a.indietro` e non `.indietro`: serve a battere le regole delle
pagine (`.d-indietro`, `.h-indietro`...) che in colonna rimettono
tutto nel flusso.
Il dischetto dietro prende il fondo della pagina — `inherit`,
perche la freccia e figlia del body — e serve solo qui, dove la
colonna la porta sopra a foto e titoli. 56 x 56 e piu dei
44 x 44 che servono a un dito. */
a.indietro {
position: fixed;
top: 12px;
right: 12px;
width: 56px;
height: 56px;
display: grid;
place-items: center;
border-radius: 50%;
background-color: inherit;
}
/* La colonna comincia sotto la freccia, cosi in cima non le finisce
niente sotto. L-indice non ha la freccia e resta com-e. */
body[data-pagina] .tela { padding-top: 76px; }
/* La colonna non scorre piu di lato: in verticale i tasti stanno
in fila come tutto il resto. */
.colonna {
animation: none !important;
translate: none !important;
}
/* Tutto torna nel flusso e si impila. */
.el,
.tasto,
.sticker {
position: static;
width: auto;
height: auto;
}
/* Le due linee verticali ai bordi diventano la cornice della
colonna: il tratteggio resta, come chiedeva il disegno. */
.linea--vert {
position: fixed;
top: 0;
height: 100%;
left: auto;
}
/* Le linee seguono la colonna (scelta di Leonardo): a 7 px dai
suoi bordi, non da quelli dello schermo. Finche la colonna e
larga quanto la finestra le due misure coincidono; quando si
ferma a 480 le linee le restano attorno e fanno da cornice al
contenuto. `100%` qui e la larghezza della finestra: le linee
sono `fixed`. */
.linea--vert[data-bordo="sinistra"] { left: max(7px, calc((100% - 480px) / 2 + 7px)); }
.linea--vert[data-bordo="destra"] { right: max(7px, calc((100% - 480px) / 2 + 7px)); left: auto; }
.linea--vert:not([data-bordo]) { display: none; }
/* Le orizzontali escono dallo schermo da tutti e due i lati, come
sulla tela larga (scelta di Leonardo): larghe quanto la finestra
piu 48 px, e tirate a sinistra dal centro della colonna. Il
margine a sinistra e 50% (meta colonna) meno meta finestra: la
colonna e centrata, quindi la linea parte 24 px prima del bordo
sinistro. `html` e in `overflow-x: clip`: non si scorre di lato. */
.linea--oriz {
position: static;
width: calc(100vw + 48px);
margin: 12px 0 12px calc(50% - 50vw - 24px);
}
/* L'intestazione: due righe una sotto l'altra, ognuna fra due
orizzontali (scelta di Leonardo): linea, nome, linea, linea,
riga, linea. Le linee sono dentro l'intestazione e portano i loro
12 px sopra e sotto; fra la seconda e la terza si fondono. */
.intestazione {
display: block;
}
.intestazione > span {
position: static;
display: block;
width: auto;
white-space: normal;
}
/* I bottoni in colonna, piu bassi ma della stessa faccia. */
.menu { display: grid; gap: 8px; margin: 12px 0; }
/* IL MENU A SCOMPARSA (scelte di Leonardo)
Con lo script, sul telefono la colonna dei tasti e l'about non
stanno piu in cima all'indice: le loro voci passano nel
pannello blu a tutto schermo che apre il bottone con le tre
righe in alto a destra. Tre voci — Work, About me, Contatti —
con la faccia dei tasti; ognuna apre la sua tendina, una alla
volta. Aperto, le voci entrano da sinistra una dopo l'altra.
Senza script (niente `con-script`) resta tutto com'era. */
html.con-script .colonna { display: none; }
html.con-script .cassetto {
display: block;
position: fixed;
inset: 0;
z-index: 90;
padding: 88px max(24px, calc((100% - 432px) / 2)) 32px;
overflow-y: auto;
overscroll-behavior: contain;
background: var(--blu);
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
html.con-script .cassetto[data-aperto] {
opacity: 1;
visibility: visible;
transition: opacity 0.25s ease, visibility 0s;
}
.cassetto__menu { display: grid; gap: 10px; }
.cassetto__voce {
translate: -24px 0;
opacity: 0;
transition: translate 0.35s ease, opacity 0.35s ease;
}
.cassetto[data-aperto] .cassetto__voce { translate: 0 0; opacity: 1; }
.cassetto[data-aperto] .cassetto__voce:nth-child(2) { transition-delay: 0.05s; }
.cassetto[data-aperto] .cassetto__voce:nth-child(3) { transition-delay: 0.1s; }
/* La voce ha la faccia dei tasti: filo bianco 1,5 px, scritta al
centro, verde quando si tocca. A destra un + che, aperta la
tendina, perde il tratto verticale e diventa un −. */
.cassetto__tasto {
position: relative;
display: block;
width: 100%;
height: 60px;
padding: 0 48px;
border: 1.5px solid var(--bianco);
background: transparent;
color: var(--bianco);
font: inherit;
font-size: 17px;
text-align: center;
cursor: pointer;
transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.cassetto__tasto:active,
.cassetto__tasto:focus-visible {
background: var(--verde);
border-color: var(--nero);
color: var(--nero);
}
.cassetto__segno,
.cassetto__segno::after {
position: absolute;
top: 50%;
right: 20px;
width: 14px;
height: 1.5px;
margin-top: -0.75px;
background: currentColor;
}
.cassetto__segno::after {
content: "";
right: 0;
rotate: 90deg;
transition: rotate 0.25s ease;
}
.cassetto__tasto[aria-expanded="true"] .cassetto__segno::after { rotate: 0deg; }
/* La tendina si apre in altezza: la riga della griglia va da 0fr a
1fr, e l'altezza la decide il contenuto. Chiusa e anche
`visibility: hidden`, cosi i link dentro non prendono il fuoco. */
.tendina {
display: grid;
grid-template-rows: 0fr;
visibility: hidden;
transition: grid-template-rows 0.3s ease, visibility 0s linear 0.3s;
}
.tendina[data-aperta] {
grid-template-rows: 1fr;
visibility: visible;
transition: grid-template-rows 0.3s ease, visibility 0s;
}
.tendina__dentro {
min-height: 0;
overflow: hidden;
margin: 0;
padding: 0;
transition: padding 0.3s ease;
}
/* Il respiro sopra e sotto il contenuto non si schiaccia con la
riga a 0fr: chiusa, la tendina restava alta 14-20 px. Si toglie
qui, e torna insieme all'apertura. */
.tendina:not([data-aperta]) .tendina__dentro { padding-top: 0; padding-bottom: 0; }
/* Work: i sette progetti, rientrati di 20 px e piu bassi della voce
che li apre, come i tasti della tela in piccolo. */
.tendina__progetti {
display: grid;
gap: 8px;
padding: 10px 0 4px 20px;
list-style: none;
}
.tendina__progetti a {
display: block;
height: 48px;
border: 1.5px solid var(--bianco);
color: var(--bianco);
font-size: 15px;
line-height: 45px;
text-align: center;
text-decoration: none;
transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.tendina__progetti a:active,
.tendina__progetti a:focus-visible {
background: var(--verde);
border-color: var(--nero);
color: var(--nero);
}
/* About me: il quaderno degli appunti (scelta di Leonardo), lo
stesso foglio che sulla tela compare col mouse sopra l'about.
Le misure sono quelle della tela, in px da 224 x 680: foto a
18,20 (188 x 178), testo a 38,212,3 (176 largo), righe del
biglietto ogni 19,86. Il foglio intero poi si ingrandisce con
`zoom` fino alla larghezza del menu, cosi righe e testo crescono
insieme e restano allineati. Largo al piu 340 px, se no a 700 px
il testo diventava enorme; 14 px in meno della tendina lasciano
entrare l'ombra a destra, che `overflow: hidden` taglierebbe. */
.tendina__about {
container-type: inline-size;
padding: 16px 0 14px;
}
.quaderno {
position: relative;
width: 224px;
height: 680px;
margin-inline: auto;
zoom: 1.4;
zoom: calc(min(100cqw - 14px, 340px) / 224px);
--riga-biglietto: calc(220px * 125.46 / 1390);
}
/* il foglio: 2 px dentro per lato, largo 220 come sulla tela */
.quaderno::before {
content: "";
position: absolute;
inset: 2px;
background: url("../rm/biglietto.webp") left top / 100% auto no-repeat;
filter:
drop-shadow(0.6px 1px 0.6px rgba(0, 0, 0, 0.4))
drop-shadow(3px 6px 6px rgba(0, 0, 0, 0.28));
}
.quaderno__foto {
position: absolute;
left: 18px;
top: 20px;
width: 188px;
height: 178px;
filter:
drop-shadow(1px 1.5px 0.8px rgba(0, 0, 0, 0.45))
drop-shadow(5px 9px 8px rgba(0, 0, 0, 0.32));
}
.quaderno__inclinata { position: absolute; inset: 0; rotate: -3deg; }
.quaderno__stampa { position: absolute; inset: 0; }
.quaderno__stampa img { display: block; width: 100%; height: 100%; object-fit: cover; }
.quaderno__stampa::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 45%);
}
.quaderno__graffetta {
position: absolute;
left: 132px;
top: -17px;
rotate: 6deg;
transform-origin: 50% 36%;
overflow: visible;
}
.quaderno__graffetta--davanti { filter: drop-shadow(0.5px 1px 0.5px rgba(0, 0, 0, 0.45)); }
.quaderno__testo {
position: absolute;
left: 38px;
top: 212.3px;
width: 176px;
font-size: 13px;
line-height: var(--riga-biglietto);
letter-spacing: normal;
color: var(--nero);
}
.quaderno__testo p { margin: 0; }
.quaderno__testo p + p { margin-top: var(--riga-biglietto); }
/* Contatti: le quattro voci del piede, etichetta piccola sopra e
valore sotto. L'indirizzo mail e lungo: va a capo dove serve. */
.tendina__contatti {
padding: 14px 0 6px;
color: var(--bianco);
}
.tendina__contatti dt {
font-size: 11px;
line-height: 14px;
letter-spacing: 3px;
text-transform: uppercase;
}
.tendina__contatti dd {
margin: 2px 0 14px;
font-size: 15px;
line-height: 20px;
overflow-wrap: anywhere;
}
.tendina__contatti dd:last-child { margin-bottom: 0; }
.tendina__contatti a { color: var(--bianco); }
.tendina__contatti a:active,
.tendina__contatti a:focus-visible { color: var(--verde-link); }
/* aperto, la pagina sotto non scorre */
html.menu-aperto, html.menu-aperto body { overflow: hidden; }
html.con-script .menu-apri { display: grid; }
/* il bottone sta sopra all'intestazione: le scritte non ci devono
finire sotto. Il margine va sul nome e non sull'intestazione:
le linee si misurano dalla sua larghezza, e con 64 px in meno
a destra non uscivano piu dallo schermo da quella parte. */
html.con-script .int-nome { padding-right: 64px; }
/* La seconda riga comincia sotto al bottone (a 77, il bottone finisce
a 68) e prende tutta la larghezza.
«but still in beta» sul telefono non c'e (scelta di Leonardo):
la riga resta «Graphic designer & skilled in other design things».
Le due linee attorno seguono da sole: stanno a 12 px dal testo. */
.int-beta { display: none; }
.tasto {
height: 56px;
line-height: 52px;
font-size: 16px;
}
/* I riquadri grossi: larghezza piena, altezza in proporzione. */
.anteprime { display: grid; gap: 8px; margin: 12px 0; }
.riq, .manca {
aspect-ratio: var(--w) / var(--h);
}
/* In colonna i riquadri tornano statici: senza `relative` il nome
sovrapposto (position: absolute, inset 0) si misurerebbe sulla
tela intera e al tocco coprirebbe tutta la pagina di verde.
Ma `relative` da solo non basta: riaccende anche il `left` e il
`top` che l-elemento porta dalla tela, e i riquadri finiscono
spinti a destra di 264, 464, 696 px — fuori dalla colonna e
tagliati. Vanno azzerati tutti e due. */
.riq, a.manca { position: relative; left: auto; top: auto; }
/* In colonna il tasto non ha senso: niente cornice, niente
etichetta, foto e testo sempre in vista. */
.about-tasto {
display: grid;
gap: 12px;
margin: 12px 0;
border: 0;
box-shadow: none;
overflow: visible;
}
.about-etichetta { display: none; }
.about-tasto::before { display: none; }
.about-tasto .about-foto, .about-tasto .about-testo { opacity: 1; }
.about-foto { aspect-ratio: var(--w) / var(--h); }
/* In colonna non c'e il foglio: la foto resta com'era, dritta, con
la cornice nera e senza graffetta. */
/* `relative` serve alla stampa dentro, ma si porterebbe dietro il
left/top della tela (18, 20): la foto finiva spostata a destra e
usciva dalla colonna. Vanno azzerati. */
.about-foto { position: relative; left: auto; top: auto; filter: none; }
.about-inclinata { rotate: none; }
.about-stampa { padding: 0; background: none; border: 2px solid var(--nero); overflow: hidden; }
.about-stampa::after, .graffetta { display: none; }
.about-testo { padding: 16px 0; }
/* GLI ADESIVI IN COLONNA (scelta di Leonardo, TELEFONO.md §4.1)
Tornano, trascinabili col dito come col mouse (js/sticker.js usa
gia gli eventi pointer, e in colonna lo zoom e 1). Stanno dentro
.anteprime, che qui fa da riferimento e da contenitore: 100cqw e
la larghezza della colonna. Ogni adesivo porta nell-HTML dove cade
il suo centro (--tel-x, --tel-y), a cavallo del bordo fra due
riquadri: coprono un angolo, mai i nomi o il centro delle
anteprime, e quelli a sinistra sporgono nel margine.
Grandi il 120% della misura sulla tela (prima il 60%, raddoppiati
su richiesta di Leonardo): fra 116 e 169 px. */
.anteprime {
position: relative;
container-type: inline-size;
}
.anteprime .sticker {
--scala-telefono: 1.2;
position: absolute;
width: calc(var(--w) * var(--scala-telefono) * 1px);
height: calc(var(--h) * var(--scala-telefono) * 1px);
left: calc(var(--tel-x) - var(--w) * var(--scala-telefono) * 0.5px);
top: calc(var(--tel-y) - var(--h) * var(--scala-telefono) * 0.5px);
}
/* col dito il :hover resta appiccicato dopo il tocco: niente
ingrandimento a riposo */
@media (hover: none) {
.anteprime .sticker:hover:not([data-preso]):not([data-agganciato]) { scale: none; }
}
/* Il piede: il riquadro tratteggiato attorno al testo. */
.piede { margin: 12px 0 32px; }
.piede-riquadro { display: none; }
/* In colonna il riquadro del piede sparisce e la cornice la porta
il testo: stessa cornice tratteggiata, stesso ritmo. */
.piede-testo {
--riga-oriz: repeating-linear-gradient(
to right,
var(--tratto, var(--bianco)) 0 var(--trattino),
transparent var(--trattino) var(--passo-tratteggio));
--riga-vert: repeating-linear-gradient(
to bottom,
var(--tratto, var(--bianco)) 0 var(--trattino),
transparent var(--trattino) var(--passo-tratteggio));
background-image: var(--riga-oriz), var(--riga-oriz), var(--riga-vert), var(--riga-vert);
background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
background-position: 0 0, 0 100%, 0 0, 100% 0;
background-repeat: no-repeat;
padding: 16px;
white-space: pre-wrap;
overflow-wrap: anywhere;
/* Sulla tela sono 10 px con 4,9 di spaziatura: su un telefono
non si leggono e i link non si prendono col dito. Qui 14/28
con spaziatura ridotta, e i link diventano righe intere. */
font-size: 14px;
line-height: 28px;
letter-spacing: 1px;
}
.piede-testo a {
display: inline-block;
padding: 6px 0;
}
/* Il caricamento e gia una colonna centrata: sul telefono cambia
solo la misura del video. */
.intro-video, .barra-carica { width: min(70vw, 220px); }
}
/* ---------- Movimento ridotto ----------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
}
}