/* ========================================================================== Kefero — Macchina 02: i tarocchi -------------------------------------------------------------------------- Due pagine: quella della macchina (scelta della domanda e gettone) e quella della lettura. La cornice del mobile, le sue luci e la vignetta arrivano da `home.css`: è lo stesso oggetto sullo schermo, e duplicarne lo stile vorrebbe dire tenerne allineate due copie. ── UNA REGOLA PER SELETTORE ────────────────────────────────────────────── Questo foglio aveva ventidue selettori dichiarati due o tre volte, e in ogni caso l'ultima occorrenza annullava le precedenti — comprese quelle scritte per correggere un difetto. La lente ne aveva tre: l'altezza dell'immagine tornava a 78vh, il pulsante di chiusura tornava `absolute`, e la centratura verticale si perdeva. Tre bug che il foglio conteneva già la cura, scritta più sopra. ========================================================================== */ /* ========================================================================== 1 · LA MACCHINA ========================================================================== */ .tarot-hero { max-width: 62rem; margin: 0 auto; padding: 0 1.25rem 5rem; text-align: center; } /* La cornice è quella della home; qui si stringe soltanto, perché sopra non c'è il cielo a tenere il campo. ── SI LIMITA L'ALTEZZA, NON LA LARGHEZZA ───────────────────────────────── Qui c'era `max-width: 34rem`, e si comportava bene quasi ovunque. Ma la regola comune fissa l'ALTEZZA (`min(82svh, 820px)`) e lascia che sia il rapporto 3/4 a ricavarne la larghezza: quando `max-width` entra in gioco stringe la larghezza e l'altezza resta dov'era, cioè la cornice smette di essere 3/4. E il video, che è 810x1080, con `object-fit: contain` si adatta al lato corto e lascia due bande nere. Su un monitor da 1440 pixel di altezza erano quarantasette pixel sopra e sotto: la fessura della moneta si spostava di altrettanto rispetto alla cornice, e con lei la freccia, il ticker e il contatore — che sono tutti posizionati in percentuale SULLA CORNICE. Misurare la fessura al centesimo non serve a niente se la cornice e il filmato non coincidono. 45,333rem è 34rem diviso 0,75: l'altezza massima che produce esattamente la larghezza voluta. Così il rapporto non si rompe mai e `max-width` non deve più intervenire — resta per sicurezza. ── E VALE SOLO SOPRA I 900 PIXEL ───────────────────────────────────────── Sotto, `home.css` passa la cornice a `height: auto; width: 100%` e lascia che sia il rapporto a decidere l'altezza: lì un'altezza dichiarata è esattamente ciò che NON ci vuole. Senza questa condizione la regola qui sotto vinceva anche su telefono — arriva da un foglio caricato dopo, a parità di peso — e la cornice diventava 350x692 invece di 350x467: centotredici pixel di banda nera sopra e sotto, cioè il difetto che si voleva togliere, spostato sugli schermi piccoli. */ .machine-frame--tarot { max-width: 34rem; margin: 0 auto 1.5rem; } @media (min-width: 901px) { .machine-frame--tarot { height: min(82svh, 45.333rem); } } /* ══ SU SCHERMO LARGO, IL TESTO STA ACCANTO ════════════════════════════════ ── IL DIFETTO ─────────────────────────────────────────────────────────── Impilati, la macchina e il testo non ci stanno. La cornice e' alta quanto l'82% della finestra, e sotto servono altri trecento pixel per titolo, promessa e invito: su un portatile da 1366x768 il prezzo cadeva a 865 pixel, su un 1440x900 a 960. Su OGNI misura comune di desktop il costo restava oltre il bordo, e per vederlo bisognava sapere che c'era. ── PERCHE' NON SI RIMPICCIOLISCE LA MACCHINA ───────────────────────────── Perche' per far entrare tutto sopra la piega a 768 pixel di altezza la cornice dovrebbe scendere a circa 380: meno della meta'. La macchina e' il prodotto, e rimpicciolirla per far posto al cartellino del prezzo e' esattamente il contratto sbagliato. Lo spazio c'e' gia', ed e' orizzontale: a 1440 pixel la cornice ne occupa 544 e i restanti novecento sono vuoti. Il testo ci va dentro. Sotto i 900 pixel non cambia niente: `home.css` li' allarga la cornice a tutta la pagina, e due colonne non ci starebbero. Resta l'impilato, dove il prezzo si vede gia'. */ @media (min-width: 901px) { .tarot-hero { display: flex; align-items: center; justify-content: center; gap: clamp(2rem, 4vw, 4rem); max-width: 72rem; /* Incolonnato il testo era centrato; affiancato deve avere un bordo sinistro comune, o titolo, promessa e invito partono da tre punti diversi e la colonna si sfilaccia. */ text-align: left; } /* In riga il margine sotto non serve piu': lo spazio fra le due colonne lo tiene `gap`. */ .machine-frame--tarot { flex: none; margin: 0; } .tarot-testo { /* Una misura di lettura, non tutto lo spazio che avanza: oltre i trentacinque caratteri per riga la promessa si legge peggio. */ max-width: 26rem; } /* I tre elementi sono centrati con `margin: auto` per l'impilato: qui devono allinearsi a sinistra insieme al resto. */ .tarot-hero .lingue-macchina { justify-content: flex-start; } .tarot-hero .tarot-lead, .tarot-hero .tarot-azione { margin-left: 0; margin-right: 0; } .tarot-hero .tarot-azione { margin-bottom: 0; } } /* ── LA MACCHINA DA SOLA ────────────────────────────────────────────────── Chi ha gia' un gettone non vede titolo, promessa ne' invito: ha deciso, e davanti deve avere la macchina e la sua fessura. Restano due cose da sistemare, e sono entrambe spazi. In fondo alla fascia c'erano cinque rem per staccare l'invito da «Cosa ricevi»: senza invito diventano un buco. E la cornice porta un margine sotto che serviva a staccarla dal testo, che adesso non c'e'. */ .tarot-hero--sola-macchina { padding-bottom: var(--space-8); } .tarot-hero--sola-macchina .machine-frame--tarot { margin-bottom: 0; } /* A schermo intero la cornice torna a coprire tutto: la riga non deve centrarla ne' limitarla. */ body[data-machine] .tarot-hero { display: block; max-width: none; } /* `home.css` porta la cornice a `position: fixed; inset: 0` quando la macchina è in moto, ma non le toglie il margine, che lì non esiste e qui sì. Su un elemento fisso con tutti gli scostamenti a zero un margine in basso non viene ignorato: accorcia il riquadro, e sotto il video a tutto schermo restava una striscia di pagina con dentro il titolo e il piede. */ body[data-machine] .machine-frame--tarot { margin: 0; max-width: none; } /* ── E IL RESTO DELL'ATRIO SI SPEGNE ────────────────────────────────────── `home.css` elenca uno per uno i pezzi da spegnere mentre il filmato gira — luci, insegna, ticker, contatore, sezioni, piede — ma quell'elenco è fatto di classi della PRIMA macchina. Titolo, promessa, lingue e invito di questa pagina non ci sono dentro. Finché erano testo non si notava: la cornice diventa fissa a tutto schermo e li copre. Un PULSANTE no. Coperto non vuol dire spento: resta nel giro del tabulatore, e premerlo mentre il filmato scorre aprirebbe il cassetto sopra un gettone già inserito. ── PERCHÉ `visibility` E NON `opacity` ────────────────────────────────── Perché è la differenza fra nascondere e spegnere. `opacity: 0` toglie l'elemento alla vista e lo lascia raggiungibile da tastiera — è quello che fa l'elenco di `home.css`, e lì è così anche per la gettoniera, che è un pulsante pure lei. `visibility: hidden` lo toglie davvero: niente fuoco, niente lettore di schermo, niente tabulatore. Qui si può usare perché nessuno di questi elementi ha una dissolvenza da rispettare. Il contatore dei gettoni, che ce l'ha (`transition: opacity`), resta fuori da questa regola e continua a sfumare come prima. La gettoniera e il ticker, che hanno lo stesso difetto ma stanno DENTRO la cornice, sono spenti da `home.css`: quel difetto è di entrambe le macchine e si chiude in un posto solo. Non è un secondo elenco da tenere allineato: mentre la macchina lavora, dell'atrio non deve restare vivo niente tranne la macchina. Il giorno che si aggiunge una riga a questa pagina, si spegne da sola. */ body[data-machine] .tarot-hero > :not(.machine-frame) { visibility: hidden; pointer-events: none; } /* ══ DOVE STANNO LE COSE SULLA MACCHINA ════════════════════════════════════ Ticker, contatore, freccia e gettoniera sono posizionati in percentuale sulla cornice — e la cornice ha le stesse proporzioni del video (3/4 in entrambi i casi), quindi il filmato la riempie esattamente e una percentuale vale su qualunque schermo. ── PERCHE' QUI E NON IN `home.css` ─────────────────────────────────────── Perche' le due macchine hanno DUE ARTWORK DIVERSI. Misurato sui due poster, la differenza media e' di trentasette livelli: non sono la stessa immagine con un'insegna cambiata, sono due mobili. I numeri di `home.css` sono tarati sul primo, e li' restano. ── E I NUMERI SONO MISURATI, NON A OCCHIO ──────────────────────────────── Sul poster della macchina 02, leggendo il colore riga per riga: 59,8% – 62,3% lo spessore del tavolo, la fascia di legno chiaro 62,7% – 64,3% la barra di ottone 64,5% – 68,0% il pannello verde con gli ornamenti 19,8% – 32,5% il pannello rosso della gettoniera 22,3% – 25,3% la fessura della moneta Il ticker stava al 64-67%, cioe' sugli ornamenti del pannello: una scritta al neon in mezzo a un fregio dipinto, che non e' un posto. ========================================================================== */ /* Nello spessore del tavolo, centrata sulla fascia. `translate` su tutti e due gli assi perche' la scritta stia in mezzo al legno invece di appoggiarcisi sopra: la fascia e' alta poco piu' del testo, e un paio di pixel si vedono. */ .machine-frame--tarot .insert-coin { top: 61%; transform: translate(-50%, -50%); } /* Sotto la gettoniera, allineato al suo asse: il contatore dice quante monete si hanno, e sta accanto al posto in cui si infilano. Era all'altezza del tavolo, dall'altra parte della macchina. */ .machine-frame--tarot .coin-counter { top: 36.2%; left: 82%; right: auto; transform: translate(-50%, -50%); } /* ── LA FESSURA DI QUESTA MACCHINA ───────────────────────────────────────── Rimisurata sul poster pixel per pixel, come per l'altra. Su `tarot-poster.webp` (810x1080): fessura x 659-665 px = 81,36% - 82,10% (centro 81,73%) y 234-269 px = 21,67% - 24,91% (centro 23,29%) piastra x 626-693 px = 77,3% - 85,6% y 223-355 px = 20,7% - 32,9% I valori precedenti erano vicini ma non giusti: la freccia stava al 79% e la sua punta finiva SOPRA il foro invece che accanto, e mezzo punto piu' in basso del centro; il bersaglio partiva dal 74%, cioe' tre punti prima della piastra, e finiva al 90%, cinque oltre. Qui si dichiarano solo `left` e `top`: i due margini che fanno di `left` la PUNTA della freccia stanno nella regola comune di `home.css`, e valgono per entrambe le macchine. */ .machine-frame--tarot .coin-arrow { left: 81.36%; top: 23.29%; } .machine-frame--tarot .coin-slot { left: 77.2%; top: 20.7%; width: 8.5%; height: 12.3%; } /* L'avviso di macchina nascosta deve stonare: è una pagina che il pubblico non deve vedere, e chi ci lavora non deve dimenticarsene. */ .tarot-badge { display: inline-block; margin: 0 0 1.5rem; padding: 0.35rem 0.9rem; border: 1px solid var(--accent-dim); border-radius: 999px; color: var(--accent); font-family: var(--type-family-utility); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; } /* ── LE LINGUE FANNO DA ETICHETTA AL TITOLO ──────────────────────────────── `home.css` le stacca di uno spazio pieno sopra, perche' li' chiudono un blocco. Qui lo aprono: si avvicinano al titolo e si allontanano dalla macchina, cosi' si leggono come una riga sola con quello che segue invece che come un pezzo appeso al filmato. */ .tarot-hero .lingue-macchina { margin: 0 0 var(--space-3); } .tarot-title { margin: 0 0 0.5rem; font-family: var(--type-family-display); font-size: clamp(2rem, 6vw, 3.25rem); font-weight: 400; color: var(--text); } .tarot-lead { margin: 0 auto 1.75rem; max-width: 34rem; color: var(--text-dim); font-size: 1.05rem; line-height: 1.6; } /* ══ IL PREZZO E L'INVITO ══════════════════════════════════════════════════ Sotto la promessa, prima di qualunque altra cosa da leggere. Sopra la piega il costo stava solo dentro il ticker della macchina — sette pixel di font arcade, sfumati ai lati — e le card leggibili erano in fondo alla pagina, dopo la sezione «cosa ricevi». ========================================================================== */ .tarot-azione { margin: 0 auto 3rem; } /* ── PERCHE' ORO E NON ROSSO ─────────────────────────────────────────────── Il primo taglio usava `--accent-warm`, che e' un cremisi. Su un pulsante il rosso non invita: e' il colore con cui un'interfaccia dice ferma, annulla, errore — e chiedere di spendere con lo stesso colore con cui altrove si dice «non farlo» lavora contro. L'oro e' l'accento del sito ed e' il colore della moneta che si sta per comprare: la stessa cosa detta due volte, una con la parola e una col colore. Il testo va scuro, non chiaro: bianco su oro sta a 2,2 contro 1 e non passa nessuna soglia di leggibilita'; `--text-inverse` sta a circa 9 contro 1. */ .tarot-azione__cta { display: inline-flex; align-items: center; gap: var(--space-3); background: var(--accent); color: var(--text-inverse); transition: background 160ms ease, transform 160ms ease; } .tarot-azione__cta:hover { background: var(--accent-bright); } /* Il pulsante si alza di un pelo al passaggio: e' l'unica cosa cliccabile di questa fascia, e deve rispondere. Chi ha chiesto meno movimento non lo riceve — la regola sta in fondo al foglio, con le altre. */ @media (prefers-reduced-motion: no-preference) { .tarot-azione__cta:hover { transform: translateY(-1px); } } .tarot-azione__cta:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; } /* Il prezzo dentro il pulsante, in una pastiglia: si legge come parte dell'invito e non come una postilla. Numeri in tipo monospazio, come ovunque nel sito si conti qualcosa. Il fondo scuro serve al contrasto: sull'oro una pastiglia chiara sparirebbe. */ .tarot-azione__prezzo { padding: 0.1rem 0.6rem; border-radius: var(--radius-full); background: rgba(0, 0, 0, 0.22); color: var(--text-inverse); font-family: var(--type-family-utility); font-size: 0.92em; letter-spacing: 0.02em; } /* ── IL MARCHIO DEL PAGAMENTO ────────────────────────────────────────────── Accanto al prezzo: dice con che cosa si paga prima che si prema, non dopo. E' l'informazione che toglie il dubbio a chi non conosce il sito. Compare solo se il file c'e' davvero: lo decide il controller con un `is_file()`, come gia' fa per le immagini di condivisione dei regali. Un marchio altrui non si disegna a mano — o e' quello ufficiale, o non c'e'. */ .tarot-azione__paypal { display: block; height: 1.15em; width: auto; /* Il marchio e' blu su fondo chiaro: sull'oro si legge, ma un filo di stacco lo tiene separato dalla pastiglia del prezzo. */ margin-left: calc(var(--space-1) * -1); opacity: 0.92; } .tarot-azione__nota { margin: var(--space-3) 0 0; color: var(--text-faint); font-size: 0.86rem; } /* ── LA RIGA CHE TOGLIE IL DUBBIO ───────────────────────────────────────── Va letta, non ammirata: è un'informazione, non una promessa da vendere. Un gradino sotto la nota per dimensione, ma con un colore un po' più vivo — perché se resta della stessa tinta del testo sbiadito nessuno la vede, e una riga che nessuno vede è come non averla scritta. Il puntino la stacca dalla nota di sopra senza aggiungere una riga vuota: sono due informazioni diverse, non un paragrafo di due frasi. */ .tarot-azione__ospite { position: relative; margin: var(--space-2) 0 0; padding-top: var(--space-2); color: var(--text-dim); font-size: 0.82rem; line-height: 1.4; } .tarot-azione__ospite::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 18px; height: 1px; background: var(--border); } /* Il trattino resta centrato a ogni misura: `.tarot-hero` porta `text-align: center` e la disposizione a due colonne sposta i margini del blocco, non l'allineamento del testo dentro. */ /* ── SU SCHERMO STRETTO SI VA A CAPO DOVE HA SENSO ───────────────────────── I tre pezzi — etichetta, prezzo, marchio — misurano insieme circa trecento pixel. Su un telefono da 320 ne restano duecentottanta, e non c'e' imbottitura da togliere che basti: «Compra un gettone» e' lungo, e in spagnolo e francese lo e' di piu'. Quindi non si combatte l'andare a capo: si decide DOVE. L'etichetta non si spezza mai a meta' frase; se lo spazio non basta, scendono insieme il prezzo e il marchio, che sono una cosa sola. Due righe ordinate si leggono; «Compra un / gettone €0,99» no. */ @media (max-width: 560px) { .tarot-azione__cta { flex-wrap: wrap; justify-content: center; gap: var(--space-2); padding: var(--space-4) var(--space-5); } .tarot-azione__testo { white-space: nowrap; } .tarot-azione__paypal { height: 1em; } } /* Il video finisce in un bianco pieno: è il fotogramma da cui, sulla macchina 1, esce la scena. Qui la scena non c'è ancora, e un filmato fermo su un bianco pieno sembra un blocco. Si spegne, invece di restare lì acceso. */ .tarot-hero.is-handed-over .machine-frame { opacity: 0; transform: scale(0.98); transition: opacity 0.9s ease, transform 0.9s ease; pointer-events: none; } /* ========================================================================== 2 · IL CASSETTO -------------------------------------------------------------------------- `home.css` fa già quasi tutto: il fondo sfocato, il pannello che sale, il pulsante di chiusura, il blocco dello scorrimento, la gestione della tastiera su telefono. Qui si dice solo quale dei due passi si vede. ========================================================================== */ .drawer-panel[data-step='domanda'] .drawer-step--domanda { display: block; } .drawer-panel[data-step='domanda'] .drawer-step--sound { display: none; } .drawer-panel[data-step='sound'] .drawer-step--domanda { display: none; } .drawer-panel[data-step='sound'] .drawer-step--sound { display: block; } /* La lingua si sceglie qui e non solo nel piede della pagina perché decide la VOCE del film, non l'etichetta dei pulsanti: cambiarla dopo aver inserito il gettone sarebbe troppo tardi. */ .tarot-lang { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin: 0 0 var(--space-4); } .tarot-lang__item { padding: 0.3rem 0.75rem; border: 1px solid var(--void-600); border-radius: 999px; color: var(--text-dim); font-size: 0.82rem; text-decoration: none; transition: color 160ms ease, border-color 160ms ease; } .tarot-lang__item:hover, .tarot-lang__item:focus-visible { color: var(--text); border-color: var(--accent); } /* Quella in uso non è un pulsante: è uno stato. */ .tarot-lang__item[aria-current='true'] { color: var(--accent); border-color: var(--accent); pointer-events: none; } /* ── Le categorie di domanda ─────────────────────────────────────────────── Vivono nel cassetto, dove lo spazio è poco e va speso tutto qui: sono la sola scelta che questa macchina chiede. C'era anche una seconda dichiarazione, a griglia `auto-fit`, di quando le domande stavano nella pagina: markup che non esiste più, e regole che la cascata scartava comunque. */ .tarot-questions { display: grid; gap: 0.6rem; margin: 0 0 var(--space-4); } .tarot-question { display: block; width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--void-600); border-radius: 0.7rem; background: transparent; color: var(--text); text-align: left; cursor: pointer; transition: border-color 160ms ease, background 160ms ease; } .tarot-question:hover, .tarot-question:focus-visible { border-color: var(--accent); } /* La scelta si vede da due segnali insieme — bordo e fondo — e non dal solo colore: chi non distingue l'oro dal grigio deve capire comunque quale delle quattro ha toccato. */ .tarot-question.is-chosen { border-color: var(--accent); background: rgba(224, 165, 60, 0.08); } .tarot-question__title { display: block; font-family: var(--type-family-display); font-size: 1.02rem; line-height: 1.25; } .tarot-question__hint { display: block; margin-top: 0.2rem; color: var(--text-dim); font-size: 0.85rem; line-height: 1.4; } /* La nota sparisce appena si sceglie: dice solo cosa manca. */ .tarot-coin__note { margin: 0.75rem 0 0; color: var(--text-dim); font-size: 0.85rem; text-align: center; } /* ========================================================================== 3 · IL VELO FRA IL FILM E LA LETTURA -------------------------------------------------------------------------- Cambiare pagina di colpo taglia il film a metà di un respiro. Il velo sale, copre, e solo allora si cambia: il taglio avviene dietro un colore. ========================================================================== */ .tarot-velo { position: fixed; inset: 0; z-index: calc(var(--layer-modal) + 10); background: #07070c; opacity: 0; pointer-events: none; transition: opacity 430ms ease; } .tarot-velo[data-state='on'] { opacity: 1; pointer-events: auto; } /* ========================================================================== 4 · LA PAGINA DELLA LETTURA ========================================================================== */ .tarot-reading { max-width: 68rem; margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-8); /* Sale dal nero in cui il film si è chiuso, così le due cose sembrano una sola. */ /* `backwards` e non `both`: con `both` la dichiarazione dell'ultimo fotogramma resta applicata per sempre, e siccome tocca `transform` questa sezione restava un riquadro di riferimento per ogni discendente in `position: fixed`. `backwards` applica il primo fotogramma prima che l'animazione parta e non lascia niente dopo. */ animation: tarot-entra 900ms ease backwards; } @keyframes tarot-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .tarot-reading__head { text-align: center; margin-bottom: var(--space-6); } .tarot-reading__title { margin: 0.3rem 0 0.4rem; font-family: var(--type-family-display); font-size: clamp(1.7rem, 4.5vw, 2.6rem); line-height: 1.15; } .tarot-reading__hint { margin: 0; color: var(--text-dim); font-size: 0.98rem; } /* ── La lettura sotto la cinematica ──────────────────────────────────────── Il film si monta sopra questa pagina, che è già resa e già completa. Ma «sopra» non basta: la pagina scorrerebbe sotto ai bordi del film, e chi preme «salta» troverebbe la lettura già letta invece di scoprirla. Si nasconde soltanto: non si smonta e non si rimanda. La transizione entra solo in uscita, così la lettura riappare insieme al film che se ne va e non lampeggia all'avvio. */ body.con-cinematica > .tarot-reading, body.con-cinematica > footer, body.con-cinematica > header { opacity: 0; pointer-events: none; /* Se il modulo non gira — errore, rete caduta, blocco degli script — nessuno toglierebbe più la classe, e una lettura pagata resterebbe invisibile per sempre. Dopo dodici secondi la pagina riappare da sola: molto più del tempo che serve al film per montarsi, molto meno di quanto qualcuno resti davanti a uno schermo vuoto. */ animation: kefero-riapparizione 600ms ease-in 12s forwards; } @keyframes kefero-riapparizione { to { opacity: 1; } } .tarot-reading, body > footer, body > header { transition: opacity 700ms ease-in; } /* ========================================================================== 5 · IL CONGEDO, SU PERGAMENA -------------------------------------------------------------------------- Sopra la stesa, non in fondo: condividere o rifare una lettura è la prima cosa che ha senso offrire a chi ha appena visto le sue carte. Era un titolo, un paragrafo e quattro pillole: tipograficamente un pannello di sistema. È una lettera, e una lettera sta su un foglio e porta una firma. ========================================================================== */ .tarot-grazie { margin-top: var(--space-8); text-align: center; } .tarot-grazie--alto { margin-top: 0; margin-bottom: var(--space-8); } /* ── IL CONGEDO, SEMPLICE ────────────────────────────────────────────── Un titolo, una riga e i pulsanti. La pergamena non sta qui: sta sulla lettura, che è la cosa per cui si è speso il gettone. Un foglio firmato sopra due righe di ringraziamento sarebbe cerimonia su niente. */ .tarot-grazie__title { margin: 0; font-family: var(--type-family-display); font-size: 1.3rem; } .tarot-grazie__intro { margin: 0.5rem auto var(--space-5); max-width: 34rem; color: var(--text-dim); font-size: 0.95rem; line-height: 1.55; } /* ── I pulsanti, FUORI dal foglio ────────────────────────────────────────── Dentro, la pergamena tornerebbe a essere un'interfaccia. */ .tarot-grazie__azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); } .tarot-grazie__card { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1.2rem; border: 1px solid var(--void-600); border-radius: 999px; background: transparent; color: var(--text); font-size: 0.92rem; text-decoration: none; cursor: pointer; transition: border-color 160ms ease, color 160ms ease; } .tarot-grazie__card:hover, .tarot-grazie__card:focus-visible { border-color: var(--accent); color: var(--accent); } .tarot-grazie__ico { display: inline-flex; } /* Il pulsante del silenzio nasce nascosto: lo accende `tarot-cinema.js` quando il brano suona davvero. Un pulsante che zittisce il nulla è una domanda senza risposta. */ #tarot-silenzio[hidden] { display: none; } /* ========================================================================== 6 · LA PERGAMENA — LA LETTURA DELL'IA -------------------------------------------------------------------------- Le carte sopra sono l'estrazione; questa è la lettura, ed è la cosa per cui si è pagato. Un foglio con una firma in fondo dice da solo che qualcuno l'ha scritta. ── PERCHE' `border-image` E NON UNO SFONDO ─────────────────────────────── Il testo è lungo qualche centinaio di parole e la sua altezza non si sa in anticipo: cambia con la lingua e con quanto il modello ha scritto. Uno sfondo tirato a coprirlo stira i bordi strappati finché non sembrano gomma; uno sfondo in tre pezzi sovrapposti obbliga il padding a valere esattamente quanto una fetta, e basta una misura fuori posto perché resti una striscia scoperta o perché la fascia centrale risalga dentro lo strappo. `border-image` è il meccanismo scritto per questo caso. Si dichiara quanto è profondo lo strappo — `border-image-slice` — e il browser tiene i quattro angoli intatti, ripete i lati e riempie il centro. Non c'è nessuna misura da tenere allineata a mano, e una giuntura visibile non può formarsi. ── E I DUE VERSI SI COMPORTANO DIVERSAMENTE ────────────────────────────── `stretch round`: i lati alto e basso si tirano in orizzontale — la larghezza è quasi quella dell'immagine, quindi non si vede — mentre i lati sinistro e destro si RIPETONO in verticale, perché lì il blocco può diventare tre volte più alto dell'immagine e uno strappo stirato per millecinquecento pixel si smaglia. ========================================================================== */ .pergamena { position: relative; box-sizing: border-box; /* Il testo sta sulla carta, quindi è scuro: le variabili del sito qui non valgono, e nemmeno il fondo della scheda. */ color: #3a2c1c; background: transparent; /* La pergamena è chiara e la pagina è scura: senza un'ombra sembrerebbe ritagliata e incollata. */ filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55)); } .pergamena--lunga { margin: 0 auto var(--space-8); max-width: 46rem; /* Il bordo è lo spessore su cui il foglio viene disegnato. Il testo comincia dopo di esso, quindi non finisce mai sopra lo strappo, e non c'è nessun conto da tenere in piedi fra le due misure. */ border: clamp(2.5rem, 8vw, 4rem) solid transparent; padding: clamp(1rem, 3vw, 2rem) clamp(0.5rem, 2vw, 1.5rem); /* ── SE IL FOGLIO NON ARRIVA, IL TESTO RESTA LEGGIBILE ──────────────── Il testo qui è scuro perché sta sulla carta. Ma `border-image` non ha un ripiego: finché l'immagine non è decodificata — o se la richiesta fallisce del tutto — il blocco è trasparente, e testo a #3a2c1c sulla pagina notturna è testo invisibile. Non è un problema estetico: è la lettura che sparisce. Un fondo color carta sotto, ritagliato al contenuto. Quando l'immagine arriva le ci si disegna sopra e questo non si vede; quando non arriva, la lettura sta su un foglio senza strappo invece che sul nulla. */ background-color: #e4d5b9; background-clip: content-box; /* ── L'INDIRIZZO LO PASSA LA VISTA, NON QUESTO FOGLIO ───────────────── Scritto qui, l'indirizzo sarebbe senza marca di versione. E `public/assets/.htaccess` tiene le immagini SEI MESI: chi ha in cache una pergamena vecchia se la tiene fino all'anno prossimo, comunque la si cambi. È lo stesso buco che `Assets` esiste per chiudere. La vista scrive `--pergamena` con `$asset()`, che aggiunge la data di modifica. Il ripiego serve solo se quella variabile manca — pagina vecchia rimasta in cache — e vale meglio di nessun foglio. */ border-image-source: var(--pergamena, url('/assets/img/pergamena.webp')); border-image-slice: 12.1% 11.7% 14.1% 12.9% fill; border-image-repeat: stretch round; } /* Dentro il foglio tutto è scuro: i capitoli ereditano i colori della lettura, che sono pensati per il fondo notturno della pagina. */ .pergamena--lunga .eyebrow { color: #7a5c32; } .pergamena--lunga .chapter-title { color: #2e2114; } .pergamena--lunga .chapter p, .pergamena--lunga .chapters-attesa, .pergamena--lunga .chapters-progress { color: #3a2c1c; } /* Le righe che separavano i capitoli sul fondo scuro qui non si vedrebbero: sulla carta un filo chiaro sparisce e uno scuro sembra una piega. */ .pergamena--lunga .chapter-carta { border-top-color: rgba(58, 44, 28, 0.18); } .pergamena--lunga .chapter-carta__cap { color: #7a5c32; } /* ── La firma ────────────────────────────────────────────────────────────── Nome proprio: non si traduce. Il carattere è quello del marchio, già caricato dal guscio della pagina: un font calligrafico direbbe meglio «firma», ma costerebbe una richiesta di font in più su OGNI pagina del sito per tre parole che compaiono su una sola. A destra e un po' inclinata, come si firma in fondo a un foglio. */ .pergamena__firma { margin: 2.4rem 0 0; font-family: 'Cinzel Decorative', var(--type-family-display), serif; font-weight: 700; font-size: clamp(1.1rem, 3.2vw, 1.35rem); letter-spacing: 0.04em; line-height: 1; text-align: right; color: #4a3721; transform: rotate(-2.5deg); transform-origin: right center; } /* Un filo sopra la firma: è il gesto che chiude una lettera. */ .pergamena__firma::before { content: ''; display: block; width: 3.2rem; height: 1px; margin: 0 0 0.5rem auto; background: currentColor; opacity: 0.35; } /* ========================================================================== 7 · LA STESA, NELLA FORMA DEL TAVOLO -------------------------------------------------------------------------- Le carte non stanno in fila: ognuna ha il suo posto, nella figura che il film ha disegnato sul tavolo. La croce, la forcella e lo specchio dicono qualcosa con la loro forma, e in fila quella forma sparisce. ── LA GEOMETRIA ARRIVA DAL SERVER ──────────────────────────────────────── `--x` e `--y` sono il centro di ogni carta, in centesimi del riquadro; `--sp-ar` è la proporzione del riquadro e `--sp-carta` la larghezza di una carta. Li calcola `TarotReadingController::geometriaStesa()`, perché dipendono da QUALE stesa è uscita: scritti qui, una stesa nuova vorrebbe dire toccare anche questo foglio. Prima erano numeri fissi — riquadro `1 / 0.845`, carta `13.4%` — che disegnavano lo spazio 0..1 delle coordinate del tavolo. Ma nessuna stesa lo riempie: `Il Momento` va da 0.21 a 0.79, quindi il quarantadue per cento della larghezza era margine vuoto e le carte si stringevano nel mezzo. Su un telefono restavano larghe cinquanta pixel. ========================================================================== */ .tarot-spread { position: relative; width: 100%; margin: 0 auto var(--space-7); padding: 0; list-style: none; } .tarot-spread--tavolo { /* ── LA MISURA È IL MINORE FRA DUE VINCOLI ──────────────────────────── La larghezza disponibile, e l'altezza che si può occupare senza uscire dallo schermo. Le stese larghe e basse (`Il Momento`) sono limitate dalla larghezza; quelle strette e alte (la forcella, lo specchio) lo sarebbero dall'altezza, e senza questo limite scenderebbero per settecento pixel costringendo a scorrere per vedere la figura intera. */ --sp-altezza: min(82vh, 56rem); aspect-ratio: var(--sp-ar, 1.2); width: min(100%, calc(var(--sp-altezza) * var(--sp-ar, 1.2))); max-width: 72rem; } .tarot-spread--tavolo .tarot-spread__item { position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: var(--sp-carta, 20%); /* Il punto di riferimento è il CENTRO della carta: le coordinate dicono dove sta la carta, non dove comincia. */ transform: translate(-50%, -50%); margin: 0; } .tarot-spread__fig { position: relative; margin: 0; text-align: center; } .tarot-spread--tavolo .tarot-spread__fig { margin: 0; } /* La carta si può ingrandire: a questa misura si riconosce ma non si legge, e queste carte sono fatte di dettagli. Il pulsante non si vede: è la carta. */ .tarot-spread__zoom { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 0.6rem; background: none; cursor: zoom-in; transition: transform 220ms ease, box-shadow 220ms ease; /* La prospettiva del giro sta qui e non sul contenitore della stesa: lì varrebbe per tutte e cinque insieme, e le carte ai bordi si girerebbero oblique. Su ognuna, il giro è frontale. */ perspective: 900px; } .tarot-spread__zoom:hover, .tarot-spread__zoom:focus-visible { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55); } .tarot-spread__img { display: block; width: 100%; height: auto; border-radius: 0.6rem; } /* ══ LE CARTE DA SCOPRIRE ══════════════════════════════════════════════════ Chi preme «salta» a metà film non ha visto le carte che mancavano: restano coperte e si scoprono con un tocco. Non è una modalità — è il conto esatto di cosa il film ha fatto in tempo a girare. ── PERCHE' UN GIRO VERO E NON UNA DISSOLVENZA ──────────────────────────── Una dissolvenza fra due immagini dice «cambio di contenuto». Un giro dice «c'era già, ed era girata»: è la differenza fra mostrare una carta e scoprirla, e qui è tutto il punto. ========================================================================== */ .tarot-spread__flip { display: block; position: relative; transform-style: preserve-3d; /* Lento: una carta che si gira in un decimo di secondo si è scambiata, non si è scoperta. */ transition: transform 760ms cubic-bezier(0.22, 0.68, 0.24, 1); } .tarot-spread__img, .tarot-spread__dorso { backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* Il dorso è la faccia dietro: sta sempre nel markup, ed è girato di mezzo giro perché a carta coperta — quando il contenitore è a sua volta girato — si veda dritto. */ .tarot-spread__dorso { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0.6rem; transform: rotateY(180deg); } .tarot-spread__item.is-coperta .tarot-spread__flip { transform: rotateY(180deg); } /* Una carta coperta si scopre, non si ingrandisce. */ .tarot-spread__item.is-coperta .tarot-spread__zoom { cursor: pointer; } /* ── E NON DEVE DIRE COSA C'E' SOTTO ─────────────────────────────────────── Il numero romano da solo dice già quale arcano è, e la pillola «rovesciata» toglie metà della rivelazione. La POSIZIONE invece resta: è il posto nella stesa, non la carta, ed è quella a rendere il tocco significativo — si scopre «il Passato», non un rettangolo qualunque. */ .tarot-spread__item.is-coperta .tarot-spread__num, .tarot-spread__item.is-coperta .tarot-spread__name, .tarot-spread__item.is-coperta .tarot-spread__rev { opacity: 0; transition: none; } .tarot-spread__num, .tarot-spread__name, .tarot-spread__rev { transition: opacity 400ms ease 380ms; } /* Un respiro lentissimo sul dorso: dice che è viva senza chiedere di essere guardata. La riga d'invito fa il lavoro vero. */ @keyframes tarot-respiro { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.14); } } .tarot-spread__item.is-coperta .tarot-spread__dorso { animation: tarot-respiro 3.4s ease-in-out infinite; } /* ── L'INVITO ────────────────────────────────────────────────────────────── Cinque dorsi senza una parola sono un vicolo cieco. Sparisce da sé quando non resta niente da scoprire. */ .tarot-spread__invito { margin: 0 auto var(--space-4); color: var(--accent); font-family: var(--type-family-utility); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; } .tarot-spread__invito[hidden] { display: none; } /* Una carta rovesciata è girata davvero, come sul tavolo. Si ruota il PULSANTE, che contiene immagine e numero: ruotando la sola immagine il numero restava dritto su una carta a testa in giù. */ .tarot-spread__item.is-reversed .tarot-spread__zoom { transform: rotate(180deg); } .tarot-spread__item.is-reversed .tarot-spread__zoom:hover, .tarot-spread__item.is-reversed .tarot-spread__zoom:focus-visible { transform: rotate(180deg) translateY(4px); } /* La rotazione la fa già il pulsante: qui resta solo il centramento sul punto. Due rotazioni da mezzo giro ne fanno una intera, e le carte rovesciate si vedrebbero dritte. */ .tarot-spread--tavolo .tarot-spread__item.is-reversed { transform: translate(-50%, -50%); } /* ── LA DIDASCALIA SI VEDE ANCHE NELLA FORMA DEL TAVOLO ──────────────────── Era nascosta agli occhi e lasciata ai soli lettori di schermo: il nome stava nella lente, e per sapere che carta fosse bisognava toccarla. Ma una stesa si legge guardandola — «il Passato è la Torre» è la prima cosa che si vuole sapere, e chiederla con un tocco per carta sono cinque tocchi per leggere quello che dovrebbe essere già lì. Lo spazio c'è: `geometriaStesa()` sul server distanzia le righe di 1,62 altezze di carta invece di 1,24, e aggiunge in fondo al riquadro lo spazio della didascalia dell'ultima riga. Le due misure stanno insieme — cambiarne una qui senza cambiare l'altra là fa sovrapporre le righe. */ .tarot-spread--tavolo .tarot-spread__cap { position: absolute; top: 100%; left: 50%; /* Piu' stretta del passo fra due carte (1,22 volte la carta, vedi `geometriaStesa()`): a 132% due didascalie vicine si sovrapponevano. I nomi lunghi vanno a capo, che e' la cosa giusta. */ width: 108%; transform: translateX(-50%); text-align: center; pointer-events: none; /* ── LO SPAZIO DEL NUMERO SI RISERVA SEMPRE ─────────────────────────── Il numero è appeso alla carta e si capovolge con lei: su una rovesciata finisce sotto, cioè dove sta la didascalia, e la didascalia deve scendere per non finirci sotto. Facendolo scendere SOLO alle rovesciate, i nomi delle cinque carte stavano su altezze diverse — una riga a scalini, e lo sguardo non trova più il filo. Lo spazio si riserva a tutte: quelle col numero sopra ne lasciano uno vuoto, e in cambio i cinque nomi stanno in linea. */ margin-top: 1.5rem; } /* Le misure scalano con la finestra, non con la carta: una carta larga settantatré pixel e una larga duecentosedici stanno sulla stessa pagina — su schermi diversi — e un testo proporzionale alla carta sarebbe illeggibile sulla prima. */ .tarot-spread--tavolo .tarot-spread__pos { font-size: clamp(0.52rem, 1.5vw, 0.68rem); letter-spacing: 0.1em; } .tarot-spread--tavolo .tarot-spread__name { margin-top: 0.1rem; font-size: clamp(0.66rem, 1.9vw, 0.92rem); line-height: 1.25; } .tarot-spread--tavolo .tarot-spread__rev { margin-top: 0.2rem; padding: 0.05rem 0.35rem; font-size: clamp(0.5rem, 1.3vw, 0.62rem); } .tarot-spread__cap { display: block; margin-top: 0.55rem; line-height: 1.35; } .tarot-spread__pos { display: block; color: var(--accent); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; } .tarot-spread__name { display: block; margin-top: 0.15rem; font-family: var(--type-family-display); font-size: 0.95rem; } .tarot-spread__rev { display: inline-block; margin-top: 0.25rem; padding: 0.1rem 0.45rem; border: 1px solid var(--void-600); border-radius: 999px; color: var(--text-dim); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; } /* Il numero dell'arcano, lo stesso che il film ancora alla carta. I numeri romani sono nati con le grazie, e ogni mazzo li stampa così: un carattere geometrico li farebbe sembrare la numerazione di un parcheggio. */ .tarot-spread__num { position: absolute; top: -1.15rem; left: 50%; transform: translateX(-50%); z-index: 2; pointer-events: none; font-family: 'Times New Roman', Times, serif; font-weight: 600; font-size: 0.92rem; letter-spacing: 0.06em; line-height: 1; color: #eaf6ff; text-shadow: 0 0 4px rgba(150, 215, 255, 0.9), 0 0 12px rgba(90, 175, 255, 0.6), 0 0 24px rgba(60, 140, 255, 0.32); } /* ========================================================================== 8 · LA LENTE -------------------------------------------------------------------------- Una carta ingrandita, col significato del posto e il blocco che l'IA ha scritto per QUESTA carta in QUESTA stesa. ── PERCHE' NON E' PIU' UNA LASTRA SCURA ────────────────────────────────── Era un rettangolo nero al 92% sopra tutto, con l'immagine al centro e due righe di testo sotto: il modale generico che si vede ovunque. Non aveva niente della pagina in cui vive e, soprattutto, niente del FILM da cui si arriva — dove ogni carta ha un numero appeso sopra e un alone che la circonda. Adesso ripete quel linguaggio: il fondo si sfoca invece di coprire, dietro la carta c'è la stessa luce calda dell'alone, e il numero dell'arcano c'è anche qui. Chi tocca una carta ritrova la carta che ha appena visto. ── ED E' UNA COLONNA CHE SCORRE ────────────────────────────────────────── Non una griglia centrata: da quando sotto l'immagine c'è anche il testo i figli sono due, e centrarli entrambi li impilava oltre l'altezza dello schermo. Ciò che usciva sopra e sotto non si raggiungeva in nessun modo. ========================================================================== */ /* `display: flex` vincerebbe su `hidden`: la lente resterebbe distesa su tutta la pagina, invisibile ma presente, prendendosi tutti i clic. Le carte sembrerebbero non cliccabili, senza alcun errore da nessuna parte. */ /* `display: flex` vincerebbe su `hidden`: la lente resterebbe distesa su tutta la pagina, invisibile ma presente, prendendosi tutti i clic. Vale per il ripiego; un `` chiuso è già `display: none` per suo conto, e quella regola qui sotto lo riaprirebbe. */ .tarot-lente[hidden] { display: none; } /* Un `` non aperto non si disegna: senza questa riga la regola `display: flex` più sotto lo renderebbe visibile anche da chiuso. */ dialog.tarot-lente:not([open]) { display: none; } /* Il fondo lo disegna il browser, nel top layer, sotto il dialog. Prima era il fondo dell'elemento stesso: adesso quello resta trasparente e la sfocatura va qui, dove copre davvero tutta la finestra. */ .tarot-lente::backdrop { background: radial-gradient(70% 50% at 50% 38%, rgba(224, 165, 60, 0.10) 0%, transparent 70%), rgba(8, 6, 18, 0.88); backdrop-filter: blur(16px) saturate(0.85); -webkit-backdrop-filter: blur(16px) saturate(0.85); opacity: 0; transition: opacity 240ms ease; } .tarot-lente[data-state='on']::backdrop { opacity: 1; } /* ── UN ``, NON UN RIQUADRO FISSO ────────────────────────────────── Era `position: fixed`. Ma «fisso» vuol dire fisso rispetto alla FINESTRA solo finché nessun antenato ha una trasformazione: basta un `transform`, un `filter` o un'animazione che ne tocchi uno perché quell'antenato diventi il riquadro di riferimento, e il modale si ancori a lui. `.tarot-reading` ha `animation: tarot-entra ... both` e quel fotogramma tocca `transform`: il modale si apriva ancorato alla sezione, si muoveva con la pagina e veniva tagliato sopra il suo bordo. Aperto con `showModal()` vive nel top layer: fuori dall'albero di impaginazione, irraggiungibile da qualunque trasformazione di qualunque antenato. `position: fixed` resta per i browser che non conoscono il ``, dove il modale continua a funzionare come prima. Le tre righe che seguono azzerano l'aspetto che il browser dà a un dialog aperto: senza, sarebbe una scatola bianca centrata, larga quanto il contenuto e con un bordo. */ .tarot-lente { position: fixed; inset: 0; z-index: calc(var(--layer-modal) + 5); max-width: none; max-inline-size: none; border: 0; color: inherit; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--space-3); /* In alto si lascia posto al pulsante di chiusura, che è fisso. */ padding: 4.5rem var(--space-4) var(--space-6); /* Con `inset: 0` la lente è alta quanto la finestra, ma senza dichiararlo la colonna si misurerebbe sull'altezza del DOCUMENTO: su una pagina lunga la carta finiva a mille pixel dall'alto, cioè fuori schermo. Il fondo si vedeva, la X anche, e la carta no. */ height: 100%; max-height: 100svh; overflow: auto; overscroll-behavior: contain; /* Lo slancio su iOS, e nessuna barra visibile: la lente è una lastra sopra la pagina, e una barra di sistema in mezzo la romperebbe. */ scrollbar-width: none; -webkit-overflow-scrolling: touch; /* ── IL FONDO SI SFOCA, NON COPRE ───────────────────────────────────── Un nero al 92% cancella la pagina, e con lei il senso di essere ancora dentro la propria lettura. Sfocata, la stesa resta riconoscibile sotto: si è guardato una carta da vicino, non si è cambiato posto. Il colore sopra la sfocatura è tinto di viola, non neutro: è la stessa tinta del cielo del film. `color-mix` con `--bg-deep` lo prende dal tema invece di ripeterlo a mano. */ /* Il ripiego per chi non ha il ``: dove c'è, questo fondo resta sotto quello del `::backdrop` e non si vede. */ background: radial-gradient(70% 50% at 50% 38%, rgba(224, 165, 60, 0.10) 0%, transparent 70%), color-mix(in srgb, var(--bg-deep) 88%, transparent); backdrop-filter: blur(16px) saturate(0.85); -webkit-backdrop-filter: blur(16px) saturate(0.85); opacity: 0; transition: opacity 240ms ease; } /* Dove il top layer c'è, il fondo lo disegna il `::backdrop`: quello dell'elemento diventa solo la sfumatura calda dietro la carta. */ dialog.tarot-lente { background: radial-gradient(70% 50% at 50% 38%, rgba(224, 165, 60, 0.10) 0%, transparent 70%); backdrop-filter: none; -webkit-backdrop-filter: none; } .tarot-lente::-webkit-scrollbar { width: 0; height: 0; } .tarot-lente[data-state='on'] { opacity: 1; } /* ── LA CARTA ENTRA ──────────────────────────────────────────────────────── Prima compariva insieme al fondo, cioè non compariva: si accendeva. Adesso sale e cresce di un soffio, e l'animazione si riavvia a ogni cambio di carta — con le frecce si scambiava solo la sorgente dell'immagine, e il contenuto saltava senza che niente dicesse che era successo qualcosa. */ @keyframes tarot-lente-entra { from { opacity: 0; transform: translateY(18px) scale(0.965); } to { opacity: 1; transform: none; } } .tarot-lente.is-entrata .tarot-lente__fig, .tarot-lente.is-entrata .tarot-lente__testo { animation: tarot-lente-entra 380ms cubic-bezier(0.22, 0.61, 0.36, 1) both; } /* Il testo segue la carta di un soffio: due cose che arrivano insieme sono una cosa sola, due che arrivano in fila sono un gesto. */ .tarot-lente.is-entrata .tarot-lente__testo { animation-delay: 80ms; } /* ── PERCHE' QUI NON SI CENTRA PIU' NIENTE ───────────────────────────────── C'era `margin: auto 0 0`, per centrare la carta quando il contenuto ci sta e lasciarlo scorrere quando non ci sta. Ma un margine automatico dentro un contenitore che SCORRE ha un difetto noto: quando il contenuto sfora, l'eccedenza finisce sopra il punto zero dello scorrimento, e quella parte NON SI PUO' RAGGIUNGERE. La carta risultava tagliata in alto, e nessuna rotellina la riportava giù. Qui il contenuto sfora quasi sempre — un'immagine grande più il testo della carta — quindi il centraggio serviva a poco e costava tutto. Si parte dall'alto, sotto lo spazio della X, e si scorre. Non c'è nessuna posizione in cui qualcosa possa restare fuori portata. */ .tarot-lente__fig { position: relative; margin: 0; text-align: center; } /* ── L'ALONE, COME NEL FILM ──────────────────────────────────────────────── Nel filmato ogni carta scoperta è circondata da una luce calda che la stacca dal buio. Qui c'era solo un'ombra portata, cioè il contrario: la carta sprofondava invece di emettere. Sta dietro l'immagine e deborda da tutti i lati. Non è un bordo: si spegne prima di arrivare a un confine, o tornerebbe a essere un riquadro. */ .tarot-lente__fig::before { content: ''; position: absolute; inset: -12% -18%; z-index: 0; pointer-events: none; background: radial-gradient(closest-side ellipse, rgba(255, 226, 170, 0.30) 0%, rgba(224, 165, 60, 0.16) 42%, transparent 72%); } .tarot-lente__img { position: relative; z-index: 1; display: block; max-width: min(92vw, 30rem); /* ── L'IMMAGINE CEDE ALTEZZA AL TESTO ───────────────────────────────── Qui c'erano tre dichiarazioni: 52vh, poi 44vh per il telefono, poi 78vh in fondo al foglio. Vinceva l'ultima, e la media query non aggiunge specificità: su mobile la carta si prendeva quattro quinti dello schermo e la spiegazione finiva sotto la piega, dove nessuno la cercava. Il modale sembrava rotto. */ max-height: 52vh; width: auto; height: auto; margin: 0 auto; border-radius: 0.8rem; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.75); } .tarot-lente__img.is-reversed { transform: rotate(180deg); } /* ── IL NUMERO DELL'ARCANO ───────────────────────────────────────────────── Lo stesso che il film appende alla carta e che il riepilogo mostra sopra di lei. Qui non c'era: si toccava una carta per vederla meglio e si perdeva un pezzo del suo nome. I numeri romani sono nati con le grazie, e ogni mazzo li stampa così: un carattere geometrico li farebbe sembrare la numerazione di un parcheggio. */ .tarot-lente__num { position: absolute; top: -1.9rem; left: 50%; transform: translateX(-50%); z-index: 2; pointer-events: none; font-family: 'Times New Roman', Times, serif; font-weight: 600; font-size: 1.35rem; letter-spacing: 0.08em; line-height: 1; color: #eaf6ff; text-shadow: 0 0 5px rgba(150, 215, 255, 0.9), 0 0 16px rgba(90, 175, 255, 0.6), 0 0 32px rgba(60, 140, 255, 0.32); } .tarot-lente__num[hidden] { display: none; } /* Su una carta rovesciata il numero sta sotto e capovolto, come nel film: è appeso a lei, non allo schermo. */ .tarot-lente.is-reversed .tarot-lente__num { top: auto; bottom: -1.9rem; transform: translateX(-50%) rotate(180deg); } /* ── LA DIDASCALIA ───────────────────────────────────────────────────────── Tre informazioni con tre pesi diversi: dove sta la carta, come si chiama, e se è capovolta. Erano una riga sola separata da un punto mediano — tutto allo stesso livello, quindi niente in evidenza. */ .tarot-lente__cap { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; margin-top: var(--space-4); } /* Il posto, in oro: è la stessa marca che il riepilogo dà alla posizione, e ritrovarla qui dice che si sta guardando la stessa cosa da vicino. */ .tarot-lente__pos { color: var(--accent); font-family: var(--type-family-utility); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; } .tarot-lente__nome { font-family: var(--type-family-display); font-size: clamp(1.35rem, 4.5vw, 1.8rem); line-height: 1.15; color: var(--text); } .tarot-lente__rev { padding: 0.15rem 0.6rem; border: 1px solid var(--void-600); border-radius: 999px; color: var(--text-dim); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; } .tarot-lente__rev[hidden] { display: none; } /* Righe corte: oltre una settantina di caratteri si rilegge male, e qui si legge da fermi. */ .tarot-lente__testo { max-width: 34rem; margin: 0 auto; padding: var(--space-4) 1.25rem calc(env(safe-area-inset-bottom, 0px) + 2rem); text-align: center; } /* Un filo sopra il testo separa la carta dalla sua lettura senza aggiungere un riquadro. Sfuma ai lati: una riga netta su fondo sfocato è un taglio. */ .tarot-lente__testo::before { content: ''; display: block; width: 6rem; height: 1px; margin: 0 auto var(--space-4); background: linear-gradient(90deg, transparent, var(--accent-dim), transparent); } .tarot-lente__senso { margin: 0 0 0.6rem; color: var(--text-dim); font-size: 0.88rem; letter-spacing: 0.04em; text-transform: uppercase; } .tarot-lente__spiega { margin: 0; font-size: 1.02rem; line-height: 1.7; } /* Più spenta del testo, e in corsivo: non è la lettura, è una nota su di essa. Il capitolo carta per carta lo scrive l'IA e può non essere ancora pronto quando si tocca una carta; dirlo è meglio di uno spazio vuoto. */ /* Il capitolo carta per carta lo scrive l'IA e può non essere ancora pronto quando si tocca una carta. Con il solo testo sembrava una frase e basta — qualcosa che è, non qualcosa che sta succedendo. Il girello dice che si sta lavorando, ed è lo stesso dei capitoli in pagina: una sola forma per una sola idea. */ .tarot-lente__attesa { margin: 0; font-style: italic; opacity: 0.55; } .tarot-lente__attesa::before { content: ''; display: inline-block; width: 0.7em; height: 0.7em; margin-right: 0.55em; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: tarot-gira 900ms linear infinite; vertical-align: -0.05em; } /* ── E QUANDO INVECE NON STA ARRIVANDO ──────────────────────────────────── Esaurita l'attesa, la riga smette di essere un'attesa e diventa una spiegazione: via il girello, che promette che qualcosa sta succedendo. È lo stesso gesto di `.chapters-attesa--tarda` in fondo alla pagina, e per la stessa ragione: la pagina e il modale non devono dire due cose diverse sulla stessa attesa. */ .tarot-lente__attesa--tarda { line-height: 1.55; opacity: 0.45; } .tarot-lente__attesa--tarda::before { content: none; } .tarot-lente__testo p[hidden] { display: none; } /* ── I COMANDI ───────────────────────────────────────────────────────────── Chiusura e frecce condividono la stessa forma: sono la stessa classe di oggetto, e due forme diverse per lo stesso ruolo si leggono come due sistemi. Restano fissi alla finestra — dentro un contenitore che scorre se ne andrebbero fuori schermo appena si scende nel testo, e da lì non ci sarebbe più modo di chiudere. Gli scostamenti tengono conto delle zone di sistema: su iPhone il notch si mangia l'angolo in alto a destra. Il bersaglio è 3rem, sopra i 44 punti che servono perché un dito ci arrivi senza sbagliare. */ .tarot-lente__chiudi, .tarot-lente__nav { position: fixed; z-index: 2; width: 3rem; height: 3rem; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--bg-deep) 72%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--text-dim); cursor: pointer; transition: color 160ms ease, border-color 160ms ease, transform 160ms ease; } .tarot-lente__chiudi:hover, .tarot-lente__chiudi:focus-visible, .tarot-lente__nav:hover, .tarot-lente__nav:focus-visible { color: var(--accent); border-color: var(--accent); } .tarot-lente__chiudi:active, .tarot-lente__nav:active { transform: scale(0.92); } .tarot-lente__chiudi { top: calc(env(safe-area-inset-top, 0px) + 0.9rem); right: calc(env(safe-area-inset-right, 0px) + 0.9rem); font-size: 1.5rem; line-height: 1; } /* Cinque carte, e per passare dalla seconda alla terza bisognava chiudere, ritrovare la carta piccola sul tavolo e riaprire. Le frecce stanno ai lati, fuori dall'immagine, e rispondono anche ai tasti. */ .tarot-lente__nav { top: 50%; transform: translateY(-50%); } .tarot-lente__nav:active { transform: translateY(-50%) scale(0.92); } .tarot-lente__nav--prec { left: calc(env(safe-area-inset-left, 0px) + 0.6rem); } .tarot-lente__nav--succ { right: calc(env(safe-area-inset-right, 0px) + 0.6rem); } .tarot-lente__nav[hidden] { display: none; } /* ========================================================================== 9 · I CAPITOLI ========================================================================== */ .tarot-reading .chapters { display: grid; gap: var(--space-6); } /* Righe corte: oltre i settanta caratteri l'occhio perde il capo della riga successiva, ed è il motivo per cui un testo largo stanca. */ .tarot-reading .chapter { max-width: 42rem; margin: 0 auto; } .tarot-reading .chapter-title { margin: 0 0 var(--space-3); font-family: var(--type-family-display); font-size: clamp(1.35rem, 3vw, 1.8rem); line-height: 1.2; } .tarot-reading .chapter p { margin: 0 0 1.05em; font-size: 1.02rem; line-height: 1.72; } /* Il capitolo carta per carta scrive un paragrafo per carta: affiancati, non si deve tornare in cima per ricordarsi quale fosse. I lati si alternano — cinque blocchi tutti uguali diventano un elenco, e un elenco non si legge. */ .chapter--accoppiato { max-width: 54rem; } .chapter-carta { display: grid; grid-template-columns: 150px 1fr; gap: var(--space-4); align-items: start; padding: var(--space-4) 0; border-top: 1px solid var(--void-600); } .chapter-carta:first-of-type { border-top: 0; } .chapter-carta--destra { grid-template-columns: 1fr 150px; } .chapter-carta--destra .chapter-carta__fig { order: 2; } .chapter-carta__fig { margin: 0; } .chapter-carta__fig img { display: block; width: 100%; height: auto; border-radius: 0.5rem; } /* Rovesciata davvero, come sul tavolo e come in cima alla pagina. */ .chapter-carta.is-reversed .chapter-carta__fig img { transform: rotate(180deg); } .chapter-carta__cap { margin-top: 0.45rem; color: var(--accent); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; } .chapter-carta__nome { margin: 0 0 0.5rem !important; font-family: var(--type-family-display); font-size: 1.1rem !important; } /* Chi preme «salta» arriva prima che i capitoli siano scritti. Un riquadro vuoto sembra rotto; una riga che dice a che punto è, no. */ .chapters-attesa { margin: var(--space-4) auto 0; max-width: 42rem; color: var(--text-dim); font-size: 0.92rem; text-align: center; } .chapters-attesa::before { content: ''; display: inline-block; width: 0.7em; height: 0.7em; margin-right: 0.55em; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: tarot-gira 900ms linear infinite; vertical-align: -0.05em; } .chapters-attesa::after { content: ' ' attr(data-pronti); opacity: 0.65; } @keyframes tarot-gira { to { transform: rotate(360deg); } } /* ── QUANDO IL TESTO TARDA ──────────────────────────────────────────────── La riga smette di essere un'attesa e diventa una spiegazione: via la rotellina, che promette che sta succedendo qualcosa, e via il contatore, che prometteva di sapere quanto manca. Restano le parole, un po' piu' larghe perche' adesso sono una frase e non un'etichetta. */ .chapters-attesa--tarda { max-width: 34rem; line-height: 1.55; color: var(--text-faint); } .chapters-attesa--tarda::before, .chapters-attesa--tarda::after { content: none; } /* ========================================================================== 10 · SCHERMI STRETTI ========================================================================== */ @media (max-width: 700px) { .tarot-reading { padding: var(--space-5) var(--space-4) var(--space-7); } /* La stesa è la cosa che si guarda per prima: esce dai margini della pagina e prende tutta la finestra. Le carte crescono con lei, restando alle stesse distanze relative. */ .tarot-spread--tavolo { --sp-altezza: 86svh; max-width: 100vw; margin-left: 50%; transform: translateX(-50%); } .tarot-lente { padding: 4rem var(--space-3) var(--space-5); } /* ── LA CARTA LASCIA POSTO ALLE FRECCE ──────────────────────────────── A 92vw di larghezza una carta non lascia niente ai lati, e le frecce ci finivano sopra. A 74vw restano cinquanta pixel per parte: abbastanza per un bersaglio da 42, e la carta resta comunque il triplo di com'era nel riepilogo. */ .tarot-lente__img { max-width: min(74vw, 22rem); max-height: 44vh; } .tarot-lente__nav { width: 2.6rem; height: 2.6rem; } .tarot-lente__nav--prec { left: 0.35rem; } .tarot-lente__nav--succ { right: 0.35rem; } .tarot-lente__num { font-size: 1.15rem; top: -1.6rem; } .tarot-lente.is-reversed .tarot-lente__num { bottom: -1.6rem; } /* Su schermo stretto il foglio esce dai margini della pagina: prende tutta la finestra, e il testo respira dentro i suoi bordi invece di stare in una colonna dentro una colonna. */ .pergamena--lunga { margin-left: calc(var(--space-4) * -1); margin-right: calc(var(--space-4) * -1); max-width: none; } /* Il capitolo dentro la pergamena non ha più bisogno del proprio margine: ce l'ha già il bordo del foglio. */ .pergamena--lunga .chapter { max-width: none; } } @media (max-width: 640px) { .chapter-carta, .chapter-carta--destra { grid-template-columns: 1fr; } .chapter-carta--destra .chapter-carta__fig { order: 0; } .chapter-carta__fig { max-width: 190px; } } /* ========================================================================== 11 · MENO MOVIMENTO ========================================================================== */ @media (prefers-reduced-motion: reduce) { .tarot-hero.is-handed-over .machine-frame { transition: none; } .tarot-reading { animation: none; } .tarot-velo { transition: none; } .tarot-spread__zoom, .tarot-lente { transition: none; } .tarot-lente.is-entrata .tarot-lente__fig, .tarot-lente.is-entrata .tarot-lente__testo { animation: none; } .chapters-attesa::before { animation: none; } .tarot-lente__attesa::before { animation: none; } .tarot-spread__item.is-coperta .tarot-spread__dorso { animation: none; } .tarot-spread__flip { transition: none; } .pergamena__firma { transform: none; } body.con-cinematica > .tarot-reading, body.con-cinematica > footer, body.con-cinematica > header { animation-delay: 3s; } } /* ── La via di ritorno ───────────────────────────────────────────────────── Finita la lettura non c'era nessun modo di tornare alle proprie: si chiudeva la scheda, o si scriveva l'indirizzo a mano. Chi ha appena speso un gettone deve poter vedere quelli che gli restano. Discreta: è un'uscita, non un invito ad andarsene. */ .tarot-grazie__ritorno { margin: 0 0 var(--space-5); font-size: 0.9rem; } .tarot-grazie__ritorno a { color: var(--text-dim); text-decoration: none; border-bottom: 1px solid var(--void-600); padding-bottom: 2px; transition: color 160ms ease, border-color 160ms ease; } .tarot-grazie__ritorno a:hover, .tarot-grazie__ritorno a:focus-visible { color: var(--accent); border-color: var(--accent-dim); } /* ══ COSA RICEVI ═══════════════════════════════════════════════════════════ La pagina finiva con l'insegna e la macchina: chi arrivava senza sapere cos'è vedeva un gettone da infilare e nient'altro. Quattro voci, ognuna con la sua immagine a sinistra e il testo a destra. Su schermo stretto vanno in colonna, con l'immagine sopra: è l'unico adattamento che serve, e nasce da sé. */ /* La larghezza, il margine e il titolo li da' `home-section` di `home.css`: e' la stessa impaginazione della prima macchina, ed e' quello che serve perche' le due pagine si assomiglino invece di somigliarsi a meta'. Qui resta solo cio' che quella sezione non sa: il titolo va centrato. */ .ricevi h2 { text-align: center; } .ricevi__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-7); } .ricevi__voce { display: grid; /* Era `13rem`: bastava alle figure disegnate — tre carte da due centimetri, cinque righe grigie. Una fotografia della pergamena a tredici rem e' un rettangolo beige: si vede che c'e' qualcosa e non si capisce cosa. Adesso la colonna e' la meta' della riga, che e' la misura a cui uno scatto si guarda senza doverlo aprire. */ grid-template-columns: minmax(0, 20rem) 1fr; gap: var(--space-6); align-items: center; } .ricevi__testo h3 { margin: 0 0 0.5rem; font-family: var(--type-family-display); font-size: 1.12rem; font-weight: 400; color: var(--accent); } .ricevi__testo p { margin: 0; color: var(--text-dim); font-size: 0.95rem; line-height: 1.65; } /* ── Le figure ───────────────────────────────────────────────────────────── Erano composte a mano con le carte del mazzo. Adesso sono fotografie del prodotto vero: il film mentre gira, la stesa coi nomi delle posizioni, la pergamena scritta. Chi arriva da una pubblicità ha visto un video e non sa ancora cosa riceve: un foglio disegnato con cinque righe grigie non glielo dice, una fotografia della pergamena sì. */ .ricevi__figura { position: relative; display: flex; justify-content: center; align-items: center; gap: var(--space-3); min-height: 9rem; } .ricevi__figura img { border-radius: 0.4rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); } /* Due scatti nello stesso blocco: si dividono la colonna. Il film ne ha due perché è una cosa che accade, e un fotogramma solo la fa sembrare ferma. */ .ricevi__figura--doppia { flex-direction: column } /* ── LO SCATTO, PREMIBILE ────────────────────────────────────────────────── È un `