/* L'INTRO DEL CAVEAU */ /* ------------------------------------------------ */ /* Il foglio della sola sezione d'apertura della home. Non e' caricato da base.html: lo chiama index.html, perche' nessun'altra pagina ha questa sezione e otto fogli su ogni pagina bastano gia'. Qui dentro non c'e' nessuna animazione temporizzata. Tutto quello che si muove e' pilotato da cinque variabili che intro-caveau.js riscrive a ogni fotogramma sulla sezione: --intro-velo da 1 a 0: sfocatura e velo scuro --intro-scritta da 1 a 0: la scritta AVRVM EVOLUTION --intro-corsa da 0 a 1: il giro del medaglione verso il centro --intro-fiore da 1 a 0: la dissolvenza del medaglione --intro-invito da 1 a 0: la riga «Scorri per aprire» --intro-nota da 0 a 1: l'avvertenza, che compare dopo il velo Le scritture da JavaScript con setProperty non sono soggette alla direttiva del CSP che vieta gli stili in linea: sono gia' usate in alone.js e in numeri.js e sono gia' state verificate con la politica attiva. Il controllo che conta gli attributi style= nel sito generato continua a dare zero, perche' legge i file di Zola e non lo stato del documento in esecuzione. */ /* LA DECISIONE */ /* ------------------------------------------------ */ /* La sezione e' nascosta di partenza e la mostra soltanto intro-decisione.js, scrivendo data-intro su . Senza JavaScript, con il movimento ridotto, alla seconda visita nella stessa scheda o arrivando su un'ancora, la home e' quella di sempre e questa sezione non esiste. La regola e' scritta al contrario — nascondi se NON c'e' l'attributo — perche' cosi' il caso predefinito e' quello sicuro: un errore nello script lascia la pagina di oggi, non un palco nero. */ html:not([data-intro]) .intro { display: none; } /* LA SEZIONE E IL PALCO */ /* ------------------------------------------------ */ /* Cinque schermate di sezione e un palco appiccicato alto esattamente una schermata. Le quattro schermate di differenza sono la corsa utile, e il numero e' grosso di proposito: a 300svh l'animazione rispondeva a ogni minimo scatto di rotella e finiva prima di essere capita. Adesso circa quattordici pixel di scorrimento per fotogramma, e piu' di un terzo della corsa e' speso sul marchio fermo, che sono qualche secondo di lettura prima che si muova qualcosa. svh e non vh: su un telefono vh misura la finestra con la barra degli indirizzi ritirata, quindi il palco sporgerebbe sotto il bordo finche' non si scorre. */ .intro { height: 520svh; position: relative; background: var(--fondo-scuro); /* Il raggio della sfocatura iniziale. Ha un nome perche' vale due numeri diversi: il velo sfoca pixel dello SCHERMO, e i due girati non arrivano sullo schermo alla stessa scala. Vedi il velo qui sotto e il blocco del telefono in fondo. */ --intro-sfocatura: 12px; } .intro__palco { position: sticky; top: 0; height: 100svh; overflow: hidden; /* Il fondo non si vede piu' da nessuna parte, ora che la tela riempie anche in verticale. Resta perche' e' quello che si vede nel mezzo secondo fra il disegno del palco e l'arrivo del poster: quasi nero, che e' il colore verso cui la scena sfuma. */ background: #0b0906; } /* GLI STRATI */ /* ------------------------------------------------ */ /* LE NON DEVONO ESISTERE COME RIQUADRI. Servono solo a far scegliere al browser un indirizzo fra due, e quella scelta e' fatta prima del disegno: lasciarle nel documento aggiungerebbe un riquadro in linea fra il palco e le immagini, che qui sono tutte fuori dal flusso e si aspettano il palco come riferimento. Con display:contents il riquadro sparisce e l' si comporta esattamente come quando non c'era nessuna intorno. */ .intro picture { display: contents; } .intro__poster, .intro__tela, .intro__velo, .intro__marchio { position: absolute; inset: 0; } /* Il poster e' li' solo finche' il primo fotogramma non e' arrivato. Ha lo stesso ritaglio della tela, altrimenti il passaggio dall'uno all'altra si vedrebbe come uno scatto. */ .intro__poster { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--durata-rapida) linear; } .intro[data-intro-pronta] .intro__poster { opacity: 0; } .intro__tela { width: 100%; height: 100%; display: block; /* La tela non e' un comando: chi naviga da tastiera non ci deve finire dentro. */ outline: none; } /* IL VELO. Sfoca il fotogramma e lo scurisce insieme: l'oro del marchio non si stacca da solo su un bronzo di mezzo tono. Le due cose sono una sola variabile perche' devono finire insieme — un velo che si schiarisce restando sfocato sembra un difetto di caricamento. Dodici pixel e non piu' ventisei, dal 14 settembre 2026. A ventisei la porta dietro al marchio era una macchia scura e la prima schermata non diceva dove ci si trova: si vedeva un marchio su un fondo, e il caveau cominciava a esistere solo dopo aver scorso. A dodici il disco, le sue corone di cilindri e la parete rivettata si leggono tutti, restando fuori fuoco. Piu' in giu' non si va: sotto i dieci il fotogramma smette di sembrare sfocato e comincia a sembrare mosso, che e' un difetto e non un'intenzione. Quei dodici valgono ALLA SCALA DEL DESKTOP, ed e' il motivo per cui il raggio e' diventato una variabile: vedi il blocco del telefono. */ .intro__velo { backdrop-filter: blur(calc(var(--intro-velo, 1) * var(--intro-sfocatura))); -webkit-backdrop-filter: blur(calc(var(--intro-velo, 1) * var(--intro-sfocatura))); background: rgb(var(--rgb-ombra) / calc(var(--intro-velo, 1) * 0.42)); pointer-events: none; } /* IL MARCHIO ORIZZONTALE. Fratello del velo e non figlio: dentro sarebbe lui stesso sfocato. Non ha nessuna animazione d'ingresso — e' fermo, e si muove solo quando si scorre. Non e' piu' un'immagine sola. Il marchio ha due pezzi che fanno due mestieri diversi: la scritta e' un nome e se ne va per dissolvenza, il medaglione e' un cerchio con due ghiere concentriche e un reticolo radiale — cioe' la stessa figura del volantino che riempie il fotogramma sotto. Separarli permette di far girare il secondo e di posarlo sul mozzo, cosi' il marchio non sparisce: si siede sulla serratura. */ .intro__marchio { margin: auto; /* Tre quarti della larghezza della pagina, senza tetto: e' il primo elemento che si vede del sito e deve pesare quanto un'intestazione, non quanto un'etichetta. Nessun min() con un valore in rem, che su uno schermo largo lo rimpicciolirebbe proprio dove c'e' spazio. */ width: 75vw; /* Le proporzioni del file. Servono dichiarate perche' questo non e' piu' un e non ha un'altezza propria da cui partire: senza, il margin auto non avrebbe niente da centrare in verticale. */ aspect-ratio: 2000 / 528; pointer-events: none; } /* LE DUE FINESTRE. Ognuna ritaglia la sua meta' del file, che dentro e' largo quanto il marchio intero e sporge dai bordi. Tutte le percentuali qui sotto sono pixel del file divisi per la misura del pezzo che li contiene: 525 e 1475 sui 2000 della larghezza. */ .intro__fiore, .intro__scritta { position: absolute; top: 0; height: 100%; overflow: hidden; } .intro__fiore img, .intro__scritta img { position: absolute; top: 0; height: auto; display: block; /* SENZA QUESTA RIGA NON RITAGLIA NIENTE. base.css da' max-width: 100% a ogni immagine del sito, che qui e' esattamente il contrario di quel che serve: l'immagine DEVE sporgere dalla finestra che la contiene, o non c'e' niente da ritagliare. Il tetto schiacciava il 380% a 100% e si vedevano due marchi interi rimpiccioliti invece di due meta'. */ max-width: none; } .intro__fiore { left: 0; width: 26.25%; } .intro__scritta { left: 26.25%; width: 73.75%; } .intro__fiore img { left: 0; width: 380.952%; } /* 2000/525 */ .intro__scritta img { left: -35.593%; width: 135.593%; } /* 2000/1475 */ /* IL MEDAGLIONE. Ruota di un giro esatto e si ferma al centro del palco, che e' dove sta il mozzo del volantino. L'origine non e' il centro della finestra di ritaglio ma il centro VERO del cerchio, misurato sul file: 270,5 su 525 e 256,5 su 528. Con l'origine al centro della finestra il medaglione oscillerebbe di qualche pixel per tutto il giro, e si vedrebbe. La corsa e' la distanza fra quel centro e il centro del marchio, riportata sulla misura della finestra: 1000 - 270,5 = 729,5 su 525 in orizzontale, 264 - 256,5 = 7,5 su 528 in verticale. Un giro ESATTO, non uno storto: il marchio si posa dritto come era partito. Mezzo giro lo lascerebbe capovolto, e un marchio capovolto e' un marchio rotto. La scala scende di poco meno di un quinto perche' senza, il cerchio arriva al centro della stessa misura di prima e sembra un adesivo che scivola invece di un pezzo che si siede. */ .intro__fiore { transform-origin: 51.524% 48.580%; transform: translate(calc(var(--intro-corsa, 0) * 138.952%), calc(var(--intro-corsa, 0) * 1.420%)) rotate(calc(var(--intro-corsa, 0) * 1turn)) scale(calc(1 - var(--intro-corsa, 0) * 0.18)); opacity: var(--intro-fiore, 1); } /* LA SCRITTA. Si dissolve e basta, con una deriva a destra di un soffio: serve solo a far leggere la separazione come un distacco e non come una meta' che sparisce. Due per cento della propria larghezza sono una quindicina di pixel, che e' il minimo che l'occhio registra come direzione. */ .intro__scritta { transform: translateX(calc((1 - var(--intro-scritta, 1)) * 2%)); opacity: var(--intro-scritta, 1); } /* I DUE TESTI */ /* ------------------------------------------------ */ .intro__invito, .intro__nota { position: absolute; left: 0; right: 0; margin: 0; text-align: center; color: var(--testo-su-scuro-tenue); pointer-events: none; } .intro__invito { bottom: var(--sp-14); font-family: var(--font-testo); font-size: var(--testo-s); letter-spacing: .16em; text-transform: uppercase; opacity: var(--intro-invito, 1); } /* La freccia e' un quadrato ruotato di cui si vedono due lati: un carattere «giu» vero cambierebbe forma con il carattere, e un SVG per due linee non vale una richiesta. */ .intro__freccia { display: block; width: 10px; height: 10px; margin: var(--sp-3) auto 0; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); } /* L'AVVERTENZA compare DOPO il velo, non insieme al marchio: sotto il velo non si vedrebbe, e messa li' sembrerebbe una didascalia del marchio invece che della scena. Resta poi per tutta l'intro, che e' il punto — e' un'azienda vigilata che parla di custodia fisica. */ .intro__nota { bottom: var(--sp-5); font-family: var(--font-testo); font-size: var(--testo-xs); color: rgb(var(--rgb-testo-su-scuro) / .38); opacity: var(--intro-nota, 0); } /* IL TELEFONO */ /* ------------------------------------------------ */ /* Dal 15 settembre 2026 una finestra piu' alta che larga non riceve piu' il girato orizzontale ritagliato: riceve un secondo girato, ripreso in verticale, che intro-caveau.js sceglie con questa stessa riga di media letta da matchMedia. Il fotogramma e' 9:16 e il telefono e' quasi 9:20, quindi il ritaglio resta ma e' un'inezia — meno di un quinto della larghezza — e gli scaffali con i lingotti si vedono da entrambi i lati. Prima di oggi qui arrivava il fotogramma 16:9: riempiendo uno schermo 9:20 se ne vedeva circa un quarto della larghezza, gli scaffali restavano fuori e per giunta l'immagine veniva ingrandita due volte e mezzo invece di una e un terzo. ATTENZIONE alla riga del media: e' scritta identica in tre posti — qui, nei due del template e nel matchMedia dello script. Cambiarne uno solo significa il marchio di una forma sopra al girato dell'altra. */ @media (max-aspect-ratio: 1 / 1) { .intro { /* Meno corsa che sul desktop: il dito ha meno strada della rotella, e quattro schermate e mezzo di pollice sono gia' tante. */ height: 450svh; /* LA STESSA SFOCATURA, NON LO STESSO NUMERO. Il velo sfoca pixel dello schermo, ma i due girati non ci arrivano alla stessa scala: misurato in pagina, il desktop disegna 1,25 pixel CSS per ogni pixel del filmato e il telefono 0,66. Sono 1,9 volte, quindi dodici pixel qui varrebbero ventitre' di la' — peggio dei ventisei che il 14 settembre erano stati scartati proprio perche' riducevano la porta a una macchia scura. Sei e mezzo e' quel rapporto riportato indietro. Non contraddice la soglia dei dieci scritta sopra: quella soglia e' misurata alla scala del desktop, e qui la scena e' disegnata piu' piccola. Chi cambia il ritaglio in disegna() cambia anche questo, e il modo di accorgersene e' guardare se dietro al marchio si riconosce una porta. */ --intro-sfocatura: 6.5px; } /* Sul telefono il tetto e' la larghezza, non l'altezza: 75vw di uno schermo stretto e' gia' un marchio grande. */ .intro__marchio { width: 82vw; /* Le proporzioni del file verticale, gia' ritagliato dei suoi margini trasparenti. Senza, il margin auto continuerebbe a centrare un riquadro 2000/528 e il marchio si troverebbe parecchio piu' in alto del centro del palco. */ aspect-ratio: 1682 / 1371; } /* IL MARCHIO VERTICALE E' UN PEZZO SOLO. Il file lo porta gia' composto — il medaglione sopra, la scritta sotto — quindi qui non c'e' niente da ritagliare e niente da separare: sparisce la finestra della scritta, e quella del medaglione diventa larga quanto il marchio e smette di far sporgere l'immagine. La scritta resta nel documento e non costa una richiesta: la sua risolve allo stesso indirizzo di quella accanto. */ .intro__scritta { display: none; } .intro__fiore { left: 0; width: 100%; /* Niente giro e niente corsa verso il mozzo: il marchio resta dov'e' e se ne va per dissolvenza. --intro-corsa continua ad arrivare dallo script a ogni fotogramma e qui non la legge nessuno, che e' il modo piu' economico di spegnere una coreografia: una riga di CSS invece di un ramo nel JavaScript. */ transform: none; } .intro__fiore img { position: static; width: 100%; height: auto; } .intro__invito { bottom: var(--sp-10); } }