/* ============================================================ FRANCESCO — XR ARCHIVE · stylesheet Design system: Phantom Studios (strict) ------------------------------------------------------------ INDICE (cerca l'etichetta per saltare alla sezione) 1. TOKENS & BASE ............ @font-face, :root (variabili), reset 1b. DESIGN SYSTEM ........... tipografia h1–h6/body + griglia 12-col 2. PRELOADER 3. MODAL (generico) 4. PAGE FX ................... edge blur + vignette 5. TOP BAR .................. logo centrato 6. ARCHIVE / HUD ............ canvas griglia + caption hover 7. STATUS ................... fusi orari + audio 8. FILTERS .................. pannello filtri archivio 9. COOKIE BANNER 10. SECTIONS (shell) ......... contenitore pagine interne 11. ABOUT 12. INDEX LIST ............... liste journal/work 13. JOURNAL .................. griglia + hero 14. CONTACT 15. ARTICLE .................. lettura articolo 16. PROJECT ................. case study 17. LEGAL ................... privacy / cookie 18. CTA / BUTTONS 19. CASE ANATOMY ............ blocchi case study 20. TITLES .................. normalizzazione pesi (ULTIMO blocco) Ogni sezione è marcata da un header di commento con il suo NOME. Le VARIABILI di design (colori, spaziature, type scale) stanno in :root, quindi per ritoccare il look parti da lì. ============================================================ */ /* ---- TIPOGRAFIA: Helvetica Neue LT Pro (webfont) ---- UNA sola famiglia su tutto il sito — testo, etichette, titoli, canvas delle card. Niente font di sistema, niente secondo carattere: se serve un contrasto lo danno corpo, peso, maiuscolo e tracking, non un'altra faccia. Tre tagli in licenza, convertiti in woff2 (~22KB l'uno): 45 Light → 300 55 Roman → 400–500 ← il peso di lavoro del sito 85 Heavy → 700–900 Il Roman copre un INTERVALLO 400–500 apposta: il design system chiede 500 per i titoli (--w-semibold) e senza l'intervallo il browser lo risolverebbe sintetizzando o ripiegando, con un peso incerto fra i due. Dichiarandolo, un font-weight:var(--w-semibold) è esattamente il Roman, senza finte grassettature. Se un giorno vuoi i titoli più decisi, punta --w-semibold a 700 e prende l'Heavy: il file è già qui. `sans-serif` in coda NON è una seconda scelta tipografica: è la rete se un .woff2 non arriva, per non lasciare la pagina senza testo. */ /* ── ZURICH SANS — tre facce reali, tre pesi distinti ── I file dichiarano internamente usWeightClass 375 / 475 / 775, valori fuori scala che non significano niente per il CSS: qui li rimappo sui gradini standard 300 / 400 / 600, ed è questa mappatura a contare per il browser. NIENTE range di peso (il vecchio "400 500"): un range dice al browser che una faccia copre due gradini, ed è il motivo per cui prima ogni titolo a 500 usciva identico al testo. Un peso, una faccia. */ @font-face{ font-family:'ZurichSans'; src:url('../assets/fonts/ZurichSans-Light.woff2') format('woff2'), url('../assets/fonts/ZurichSans-Light.ttf') format('truetype'); font-weight:300;font-style:normal;font-display:swap; } @font-face{ font-family:'ZurichSans'; src:url('../assets/fonts/ZurichSans-Regular.woff2') format('woff2'), url('../assets/fonts/ZurichSans-Regular.ttf') format('truetype'); font-weight:400;font-style:normal;font-display:swap; } @font-face{ font-family:'ZurichSans'; src:url('../assets/fonts/ZurichSans-SemiBold.woff2') format('woff2'), url('../assets/fonts/ZurichSans-SemiBold.ttf') format('truetype'); font-weight:600;font-style:normal;font-display:swap; } :root{ color-scheme:dark; /* ── colors ── */ --bg:#000000; --ink:#ffffff; --border:rgba(255,255,255,0.1); --muted:#666666; --accent:#ff6347; /* ── type families ── */ --font:'ZurichSans',sans-serif; /* --serif e --mono NON sono altre famiglie: sono alias della stessa, tenuti perché mezzo stylesheet li nomina. Le "etichette mono" restano etichette per maiuscolo + tracking + corpo, non per cambio di faccia. */ --serif:var(--font); --mono:var(--font); /* ════ TYPE SYSTEM ════ 3 title sizes · 2 letter-spacings · 2 weights · 2 styles (uppercase/normal) */ --fs-display:46px; /* hero titles, big stats */ --fs-title: 24px; /* section/card headings */ --fs-sub: 17px; /* legal sections, HUD, list titles */ --fs-body: 16px; /* body text */ --fs-small: 14px; /* nav, CTA, buttons */ --fs-label: 12px; /* etichette maiuscole con tracking */ --ls-title: -0.5px; /* titles, buttons, UI text */ --ls-label: 0.1em; /* uppercase mono labels */ /* ── pesi ── Tre facce vere, quindi tre gradini che si vedono davvero. Prima --w-regular e --w-semibold erano 400 e 500 ma puntavano allo STESSO file: la gerarchia stava in piedi solo sulle dimensioni. Ora 600 è una faccia a sé. USALI CON PARSIMONIA — la regola del sito è: 400 regular → tutto il testo. È il valore di default, non si dichiara. 600 semibold → titoli, pulsanti, etichette che devono pesare. 300 light → SOLO sul display (46px), dove il chiaro fa eleganza e non fragilità. Sotto i 30px non usarlo: si sfarina. */ --w-light:300; --w-regular:400; --w-semibold:600; /* ── line-heights ── */ --lh-tight:1.08; --lh-snug:1.25; --lh-normal:1.5; --lh-relaxed:1.65; /* ── legacy aliases (components still referencing old names) ── */ --t-display:var(--fs-display); --t-hero: var(--fs-display); --t-h: var(--fs-title); --t-lg: 20px; /* lead text — kept at 20px for reading comfort */ --t-body: var(--fs-body); --t-sm: var(--fs-small); --t-cap: 12px; --t-mono: var(--fs-label); --t-md: var(--fs-body); /* was undefined; maps to body */ /* ── spacing (base-8) ── */ --s8:8px;--s12:12px;--s16:16px;--s24:24px;--s32:32px;--s40:40px;--s48:48px;--s62:62px;--s88:88px; /* ── fascia header ── --topbar-h è l'altezza della topbar; --rail-top è la riga su cui si appoggia TUTTO il resto della chrome fissa in alto (filtri, orologi, handtrack, tasto indietro). Prima erano tutti a top:24px, cioè DENTRO la topbar: si sovrapponevano al logo e alle azioni, e la topbar — che è larga quanto la finestra — si prendeva i loro click. */ --topbar-h:62px; --rail-top:calc(var(--topbar-h) + var(--s16)); /* ── margine orizzontale della chrome fissa ── UNA sola misura per header, menu, footer, banner e dock: 82px. Cambiala qui e tutta la cornice del sito si riallinea insieme. Su mobile scende a --grid-margin-sm (vedi le media query in fondo alle rispettive sezioni). */ --pad-x:62px; /* dock in basso al centro: distanza dal fondo + altezza dei bottoni */ --dock-bottom:62px; --dock-h:48px; /* DESIGN RULE: media & containers are square-cornered (0). Interactive pills (nav, CTA, chips) keep their own border-radius:999px on purpose. */ --radius:0px; /* ════ LAYOUT GRID (Bootstrap-style, internal pages) ════ 12 columns, container up to 1440px, 16px gutter, 48px outer margin. */ --grid-cols:12; --grid-gutter:16px; /* gap between columns */ --grid-margin:48px; /* outer page margin (desktop) */ --grid-margin-sm:24px; /* tablet/mobile margin (still base-8) */ --maxw:1440px; /* container max width */ --ease:cubic-bezier(.22,.61,.36,1); /* la curva del vetro: parte decisa e si posa lenta, come una massa che si ferma da sé. Serve una seconda curva perché --ease è tarata sulle entrate di pagina — su un hover di 400ms leggeva molle. */ --ease-glass:cubic-bezier(1,0,.4,1); /* ═══════ LIQUID GLASS ═══════ I comandi in vetro del sito (switch lingua, tondo XR, LinkedIn, banner cookie) prima erano un gradiente bianco al 16% più un bordo al 10%: da lontano è grigio, non vetro. Il vetro vero non si legge dal fondo, si legge dal BORDO — la luce che entra nello spessore e si accumula su due lati opposti mentre gli altri due restano in ombra. Da qui in poi il bordo lo fa una PILA di ombre interne, non un `border`. Un border è una cornice di spessore costante: gira tutto intorno con la stessa forza e per questo legge come contorno disegnato. Le ombre interne, invece, si possono spingere ognuna da una direzione diversa — ed è l'asimmetria fra loro (luce da sopra-sinistra, rientro da sotto-destra) a dare lo spessore. Le due manopole: --gl-light quanto è forte la luce sui bordi accesi --gl-dark quanto è profonda l'ombra sui bordi in ombra In chiaro si invertono di peso (vedi il blocco [data-theme="light"]): su fondo chiaro il vetro riceve meno luce di taglio e più ombra propria, e tenere gli stessi valori del tema scuro lo farebbe sparire nel fondo. color-mix() invece di rgba() letterali: così UN numero cambia tutta la pila invece di dover riscrivere dodici alfa a mano. */ --gl-tint:#bfc2c8; /* la tinta del vetro: grigio appena freddo, non bianco puro */ --gl-light:#ffffff; --gl-dark:#000000; --gl-reflex-light:1; /* moltiplicatore luce */ --gl-reflex-dark:1; /* moltiplicatore ombra */ --gl-fill:14%; /* quanto la lastra vela il fondo */ --gl-blur:14px; --gl-sat:180%; /* ───── ARCHIVE FX — tweak these freely ───── */ --edge-blur:3px; /* outer edge blur strength */ --edge-blur-start:63%; /* where the blur begins (higher = only the outer frame blurs) */ --vignette-start:50%; /* fin dove il centro resta pulito (↑ = vignetta più stretta) */ --vignette-alpha:.26; /* vignette darkness 0–1 — buio massimo agli angoli */ --vignette-rgb:0,0,0; /* vignette colour (RGB) */ } /* ───── LIGHT THEME ───── */ :root[data-theme="light"]{ color-scheme:light; --bg:#fbfbfb; --ink:#0b0b0b; --border:rgba(0,0,0,.16); --muted:#8a8a86; --accent:#ff6347; --vignette-rgb:120,118,112; /* soft light vignette instead of black */ --vignette-alpha:.30; /* sul chiaro serve un filo in più che sul nero */ /* vetro in chiaro: si scambiano i pesi. Su fondo bianco un bordo bianco non esiste — quello che si vede di una lastra su carta è la sua OMBRA, non il suo colmo. Quindi la luce cala e l'ombra raddoppia. Il velo invece sale (14% → 22%): senza, la lastra su fondo chiaro non si stacca affatto. */ --gl-tint:#ffffff; --gl-reflex-light:.55; --gl-reflex-dark:2; --gl-fill:22%; } *{margin:0;padding:0;box-sizing:border-box;} html,body{height:100%;} body{ background:var(--bg); color:var(--ink); font-family:var(--font); font-size:var(--fs-body); font-weight:var(--w-regular); line-height:var(--lh-normal); /* i tre pesi di Zurich Sans sono disegnati: se una regola ne chiede uno che non c'è, il browser deve scendere sulla faccia più vicina, non inventarne una ingrassando i contorni. */ font-synthesis-weight:none; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow:hidden; /* archive default */ } body[data-view="about"], body[data-view="journal"], body[data-view="contact"], body[data-view="project"], body[data-view="article"], body[data-view="legal"]{overflow-y:auto;overflow-x:hidden;} a{color:inherit;text-decoration:none;} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;} .mono{font-family:var(--mono);font-size:var(--fs-label);line-height:1.1;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);} ::selection{background:var(--accent);color:#000;} /* ============================================================ DESIGN SYSTEM — TYPOGRAPHY & 12-COL GRID (pagine interne) ------------------------------------------------------------ • Gerarchia titoli: h1–h6 (o classi .t-h1 … .t-h6) • Body: .body-lg / .body-md / .body-sm / .body-xs • Pesi: .w-light (300) · .w-regular (400) · .w-semibold (600) — Zurich Sans • Layout: .container (boxed ≤1440, margine 48) + .grid (12 col, gap 16) con .col-1 … .col-12 ; .full-bleed per le hero a tutta viewport. ============================================================ */ /* — gerarchia titoli: 3 size (display · title · sub), 2 pesi, tracking stretto — */ h1,h2,h3,h4,h5,h6, .t-h1,.t-h2,.t-h3,.t-h4,.t-h5,.t-h6{ font-family:var(--font);font-weight:var(--w-semibold); line-height:var(--lh-tight);letter-spacing:var(--ls-title); text-transform:none; } /* il display è l'UNICO posto dove entra il Light: a 46px il chiaro legge come eleganza, e il contrasto col 600 dei titoli minori dà la gerarchia che prima mancava. Sotto i ~30px il Light si sfarina: non estenderlo. */ h1,.t-h1{font-size:var(--fs-display);font-weight:var(--w-light);} h2,.t-h2{font-size:var(--fs-title);} h3,.t-h3{font-size:var(--fs-title);line-height:var(--lh-snug);} h4,.t-h4{font-size:var(--fs-sub);line-height:var(--lh-snug);} h5,.t-h5{font-size:var(--fs-sub);line-height:var(--lh-snug);} h6,.t-h6{font-size:var(--fs-small);line-height:var(--lh-snug);} /* — body tiers — */ .body-lg{font-size:20px;line-height:var(--lh-relaxed);font-weight:var(--w-regular);} .body-md{font-size:var(--fs-body);line-height:var(--lh-normal);font-weight:var(--w-regular);} .body-sm{font-size:var(--fs-small);line-height:var(--lh-normal);font-weight:var(--w-regular);color:var(--muted);} .body-xs{font-size:12px;line-height:var(--lh-normal);font-weight:var(--w-regular);color:var(--muted);} /* — pesi — */ .w-light{font-weight:var(--w-light);} .w-semibold{font-weight:var(--w-semibold);} .w-regular{font-weight:var(--w-regular);} /* — container: boxed fino a 1440, centrato, margine 48 (24 su mobile) — */ .container{width:100%;max-width:var(--maxw);margin-inline:auto; padding-inline:var(--grid-margin);} /* — grid 12 colonne, gutter 16, contenuto a bandiera (allineato a sinistra) — */ .grid{display:grid;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr)); gap:var(--grid-gutter);align-items:start;} /* column-span helpers */ .col-1{grid-column:span 1}.col-2{grid-column:span 2}.col-3{grid-column:span 3} .col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6} .col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-9{grid-column:span 9} .col-10{grid-column:span 10}.col-11{grid-column:span 11}.col-12{grid-column:span 12} /* — full-bleed: rompe il box e va a tutta larghezza viewport (solo hero/immagini) — */ .full-bleed{width:100vw;margin-left:calc(50% - 50vw);} /* tablet: la griglia collassa a 6, poi a 1 su mobile (resta base-8) */ @media (max-width:1000px){ .grid{grid-template-columns:repeat(6,minmax(0,1fr));} [class*="col-"]{grid-column:span 6;} } @media (max-width:640px){ .container{padding-inline:var(--grid-margin-sm);} .grid{grid-template-columns:1fr;gap:var(--grid-gutter);} [class*="col-"]{grid-column:span 1;} } /* ============================================================ PHANTOM PATTERNS — pattern editoriali condivisi (project/article/about) ------------------------------------------------------------ • .rule divider orizzontale 1px • .spec riga "specifica": label sx (col 1–3) / valore dx (col 4–12) • .lead-xl caption editoriale sotto l'hero (24–32px) • .case-gal/.case-pair galleria verticale singola/coppia • .sr/.sr-hero scroll-reveal (IntersectionObserver, vedi main.js) • .subnav tab secondarie (About) ============================================================ */ .rule{border:0;height:1px;background:var(--border);margin:0;width:100%;} /* riga spec — il pattern label-sinistra/valore-destra che si ripete identico */ .spec{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gutter); padding:var(--s40) 0;text-align:left;} .spec__label{grid-column:1/4;font-family:var(--mono);font-size:var(--fs-label);text-transform:uppercase; letter-spacing:var(--ls-label);color:var(--muted);font-weight:var(--w-regular);padding-top:6px; align-self:start;position:sticky;top:calc(var(--s88) + var(--s24));} .spec__value{grid-column:4/13;} /* variante prosa: piena larghezza del valore (4–12), testo secondario, highlight finale bold */ .spec__prose{grid-column:4/13;font-size:var(--fs-body);line-height:var(--lh-relaxed); color:color-mix(in srgb, var(--ink) 86%, transparent);} .spec__prose p+p{margin-top:var(--s16);} .spec__hl{display:block;margin-top:var(--s32);font-size:var(--fs-sub);font-weight:var(--w-semibold); line-height:var(--lh-snug);color:var(--ink);} /* sub-griglia del valore: le 9 colonne 4→12 replicate 1:1 (stessi track, stesso gutter), così ogni blocco interno cade esatto sulle colonne della griglia madre */ .spec__value--grid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr)); gap:var(--grid-gutter);align-items:start;} @media (max-width:1000px){ .spec{grid-template-columns:1fr;gap:var(--s8);padding:var(--s32) 0;} .spec__label,.spec__value,.spec__prose{grid-column:auto;position:static;} .spec__value--grid{grid-template-columns:repeat(6,minmax(0,1fr));} } @media (max-width:640px){ .spec__value--grid{grid-template-columns:1fr;} } /* galleria case: sequenza verticale, singole 16/9 + coppie 4/3 (boxed; solo l'hero è full-vw) */ .case-gal{display:flex;flex-direction:column;gap:var(--grid-gutter);margin:var(--s48) 0;} .case-gal .plx{aspect-ratio:16/9;} .case-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gutter);} .case-pair .plx{aspect-ratio:4/3;} @media (max-width:640px){.case-pair{grid-template-columns:1fr;}} /* scroll-reveal — fade + rise all'ingresso in viewport (~85%), easing morbido */ .sr{opacity:0;transform:translateY(36px);transition:opacity .8s var(--ease),transform .8s var(--ease);} .sr.is-in{opacity:1;transform:none;} /* hero: fade + leggero scale-in (1.04 → 1) */ .sr-hero{opacity:0;transform:scale(1.04);transition:opacity 1s var(--ease),transform 1.2s var(--ease);} .sr-hero.is-in{opacity:1;transform:none;} /* stagger nei gruppi (pillole, coppie, card related): ritardo crescente sui figli */ .sr-stag>*:nth-child(2){transition-delay:.09s;} .sr-stag>*:nth-child(3){transition-delay:.18s;} .sr-stag>*:nth-child(4){transition-delay:.27s;} .sr-stag>*:nth-child(5){transition-delay:.36s;} .sr-stag>*:nth-child(6){transition-delay:.45s;} @media (prefers-reduced-motion:reduce){.sr,.sr-hero{opacity:1;transform:none;transition:none;}} /* ── TEXT ENTRANCE — l'ingresso del testo di pagina ── Titoli, paragrafi, liste e didascalie entrano tutti così: fade + rise di 14px + micro-blur che si scioglie. initTextReveal() (main.js) mette la classe e poi .is-in quando il blocco entra in viewport, una volta sola. Non tocca il contenuto — funziona anche dove dentro ci sono link. */ .tr-fade{opacity:0;transform:translateY(14px);filter:blur(6px); transition:opacity .7s var(--ease),transform .9s cubic-bezier(.16,1,.3,1),filter .7s var(--ease);} .tr-fade.is-in{opacity:1;transform:none;filter:none;} @media (prefers-reduced-motion:reduce){ .tr-fade{opacity:1;transform:none;filter:none;transition:none;} } /* ---------- PRELOADER ---------- Solo due cose: il marchio 3D che gira e la parola "Welcome" sotto, che compare col fade gentile del resto del sito. Niente più colonne di frasi: il boot dura quanto la parola e non chiede di essere letto. USCITA: il nero sfuma e basta — niente sipario che scorre. Lo slide tradiva il trucco (si vedeva un pannello muoversi); il fade lascia solo il buio che si dirada mentre sotto il sito entra in zoom (enterZoom). */ .preloader{ /* nero appena schiarito, non nero assoluto: è il fondo su cui si legge l'ombra del marchio. DEVE combaciare con `stageColor` in js/logo3d.js — è quello il colore con cui il canvas del logo pulisce il fotogramma, e se i due divergono si vede il quadrato del canvas. */ position:fixed;inset:0;z-index:9999;background:#0d0d0f; display:flex;align-items:center;justify-content:center; transition:opacity .85s cubic-bezier(.4,0,.2,1);will-change:opacity; } .preloader.is-done{opacity:0;pointer-events:none;} /* il contenuto lascia la scena un filo prima del nero, così non "galleggia" nel fade */ .preloader.is-done .preloader__stage{opacity:0;transition:opacity .35s var(--ease);} .preloader__stage{ display:flex;flex-direction:column;align-items:center;gap:var(--s32); padding:0 var(--s24); } .preloader__logo{ display:block;width:120px;height:120px; /* il marchio entra per primo, la parola lo segue */ animation:preMark .9s var(--ease) both; } @keyframes preMark{from{opacity:0;transform:scale(.9);}to{opacity:1;transform:none;}} .preloader__welcome{ margin:0; font-size:clamp(24px,4.4vw,var(--fs-display));font-weight:var(--w-semibold); line-height:var(--lh-tight);letter-spacing:var(--ls-title);color:var(--ink); /* segue il marchio: stesso fade + rise dei testi di pagina (.tr-fade) */ opacity:0;transform:translateY(14px);filter:blur(6px); transition:opacity .7s var(--ease) .34s, transform .9s cubic-bezier(.16,1,.3,1) .34s, filter .7s var(--ease) .34s; } .preloader.is-ready .preloader__welcome{opacity:1;transform:none;filter:none;} /* ---------- la barra di avanzamento ---------- Sottile, larga poco, centrata sotto il marchio. Il binario è quasi invisibile (bianco al 10%): quello che si vede è il riempimento. */ .preloader__bar{ position:relative; width:132px;height:2px; border-radius:999px; overflow:hidden; /* il riempimento non esce dagli angoli */ background:rgba(255,255,255,.10); /* entra dopo il marchio, come faceva la parola: prima il soggetto, poi il servizio. Senza il ritardo comparirebbero insieme e la barra ruberebbe l'attenzione proprio mentre il marchio si sta presentando. */ opacity:0; animation:preBarIn .6s var(--ease) .5s forwards; } @keyframes preBarIn{to{opacity:1;}} .preloader__fill{ position:absolute;inset:0; transform-origin:left center; border-radius:inherit; /* il gradiente ha un colmo più chiaro al bordo destro: è la TESTA della barra, il punto che avanza. Una barra di colore uniforme si legge come un rettangolo che si allunga; con la testa accesa si legge come qualcosa che corre. */ background:linear-gradient(90deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,.75) 82%, #ffffff 100%); /* scaleX e non `width`: la larghezza è una proprietà di layout e il browser rifà la geometria a ogni fotogramma; il transform lo gestisce il compositore. Su un preloader, dove nello stesso momento si compilano le shader di WebGL, è la differenza fra una barra fluida e una a scatti. La curva parte svelta e rallenta verso la fine — come un caricamento vero, che fa presto sul facile e si siede sull'ultimo pezzo. */ animation:preFill 5.5s cubic-bezier(.35,.55,.45,1) both; } @keyframes preFill{ from{transform:scaleX(0);} /* si ferma al 96%, non al 100%: l'ultimo 4% lo chiude la sparizione della barra stessa. Una barra che tocca il fondo e POI resta lì ferma per un istante è la cosa che fa sembrare un caricamento più lento di quanto sia. */ to {transform:scaleX(.96);} } /* in uscita la barra se ne va per prima, insieme al resto del contenuto */ .preloader.is-done .preloader__bar{opacity:0;transition:opacity .3s var(--ease);} @media (max-width:720px){ .preloader__stage{gap:var(--s24);} .preloader__logo{width:88px;height:88px;} .preloader__welcome{font-size:clamp(22px,7vw,32px);} .preloader__bar{width:104px;} } @media (prefers-reduced-motion:reduce){ .preloader{transition:opacity .3s linear;} .preloader__logo{animation:none;} .preloader__welcome{opacity:1;transform:none;filter:none;transition:none;} /* la barra resta e resta INFORMATIVA — si riempie, senza la partenza scattante della curva. Toglierla del tutto lascerebbe chi ha il motion ridotto davanti a cinque secondi di nero senza spiegazione. */ .preloader__bar{opacity:1;animation:none;} .preloader__fill{animation:preFill 5.5s linear both;} } /* ---------- MODAL (drone capability, generic) ---------- */ .modal{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center; opacity:0;transition:opacity .3s var(--ease);} .modal.is-open{opacity:1;} .modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.7); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);} .modal__panel{position:relative;z-index:1;max-width:520px;width:calc(100% - var(--s48)); background:var(--bg);border:1px solid var(--border);padding:var(--s40); transform:translateY(12px);transition:transform .3s var(--ease);} .modal.is-open .modal__panel{transform:none;} .modal__x{position:absolute;top:var(--s16);right:var(--s16);color:var(--muted);font-size:var(--fs-small); width:32px;height:32px;border:1px solid var(--border);border-radius:999px;cursor:pointer;transition:color .2s var(--ease),border-color .2s var(--ease);} .modal__x:hover{color:var(--ink);border-color:var(--ink);} .modal__eyebrow{color:var(--muted);} .modal__title{font-size:var(--fs-title);font-weight:var(--w-semibold);line-height:1.05;letter-spacing:var(--ls-title);margin:var(--s16) 0 var(--s16);} .modal__body{font-size:var(--t-body);line-height:1.6;color:var(--muted);margin-bottom:var(--s32);} .modal__cta{display:flex;flex-wrap:wrap;gap:var(--s16);} /* site entrance — il sito entra in ZOOM mentre il nero del preloader sfuma: parte appena rimpicciolito e si apre fino a riempire il viewport. Curva lenta in uscita (niente rimbalzo) — è il gesto che regge il "premium". */ @keyframes chromeRise{from{opacity:0;}to{opacity:1;}} @keyframes enterZoom{ from{opacity:0;transform:scale(.94);} to {opacity:1;transform:none;} } body.is-entered .archive{animation:enterZoom 1.15s var(--ease) backwards;} body.is-entered .topbar, body.is-entered .dock{animation:chromeRise .8s .34s var(--ease) backwards;} @media (prefers-reduced-motion:reduce){ body.is-entered .archive{animation:chromeRise .5s linear backwards;} } /* ---------- PAGE FX: edge blur + vignette ---------- both ON TOP of the UI (z 99/100) so the edge frame covers the chrome too; the radial falloff keeps the centre (cards) clear. pointer-events:none → clicks pass through. */ .edge-blur{ position:fixed;inset:0;z-index:11;pointer-events:none; -webkit-backdrop-filter:blur(var(--edge-blur));backdrop-filter:blur(var(--edge-blur)); -webkit-mask:radial-gradient(ellipse at 50% 50%,transparent var(--edge-blur-start),#000 100%); mask:radial-gradient(ellipse at 50% 50%,transparent var(--edge-blur-start),#000 100%); } /* Vignetta a gradiente, non box-shadow: lo spread dell'ombra creava una banda quasi netta: da qui l'effetto "marcato". La rampa a più stop (.14 → .40 → .72 → 1) approssima una smoothstep, così la caduta verso gli angoli è graduale e senza bordo visibile. Per dosarla tocca --vignette-alpha (buio agli angoli) e --vignette-start (dove comincia a scurire). */ .vignette{ position:fixed;inset:0;z-index:12;pointer-events:none; background: radial-gradient(ellipse at 50% 50%, rgba(var(--vignette-rgb),0) 0%, rgba(var(--vignette-rgb),0) var(--vignette-start), rgba(var(--vignette-rgb),calc(var(--vignette-alpha) * .14)) 66%, rgba(var(--vignette-rgb),calc(var(--vignette-alpha) * .40)) 81%, rgba(var(--vignette-rgb),calc(var(--vignette-alpha) * .72)) 92%, rgba(var(--vignette-rgb),var(--vignette-alpha)) 100%); /* il velo sotto la topbar sta in .top-distort, non qui: raddoppiarlo scuriva */ } /* ---- EDGE DISTORTION (alto + basso) ---- Stessa ricetta ai due bordi: il backdrop viene sfocato e increspato dal feTurbulence (#bottom-distort), poi una mask lo fa comparire in modo graduale e un velo scuro chiude il bordo. In BASSO ora è molto più corta e meno nera di prima (finiva a #000 pieno, mangiava una fascia di griglia). In ALTO serve a staccare header e menu dalle card che ci scorrono sotto. */ .top-distort, .bottom-distort{ position:fixed;left:0;right:0;z-index:88;pointer-events:none; -webkit-backdrop-filter:url(#bottom-distort) blur(7px); backdrop-filter:url(#bottom-distort) blur(7px); } /* --- basso: ridotta da 320px e non arriva più al nero pieno --- */ .bottom-distort{ bottom:-2px;height:220px; -webkit-mask:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.18) 34%,rgba(0,0,0,.62) 62%,#000 88%); mask:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.18) 34%,rgba(0,0,0,.62) 62%,#000 88%); } .bottom-distort::after{ content:""; position:absolute;inset:0; background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.05) 30%, rgba(0,0,0,.16) 50%, rgba(0,0,0,.34) 68%, rgba(0,0,0,.54) 84%, rgba(0,0,0,.68) 100%); } /* --- alto: copre i 62px della topbar + la coda di sfumatura --- */ .top-distort{ top:0;height:150px; -webkit-mask:linear-gradient(to top,transparent 0%,rgba(0,0,0,.18) 32%,rgba(0,0,0,.62) 60%,#000 86%); mask:linear-gradient(to top,transparent 0%,rgba(0,0,0,.18) 32%,rgba(0,0,0,.62) 60%,#000 86%); } .top-distort::after{ content:""; position:absolute;inset:0; background:linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 32%, rgba(0,0,0,.20) 54%, rgba(0,0,0,.38) 74%, rgba(0,0,0,.52) 100%); } /* ---------- TOP BAR (mark + orologi a sinistra, azioni a destra) ---------- z sits ABOVE the menu overlay on purpose: the mark and the Menu/Close toggle stay live while the full-screen menu is open. Il padding è --pad-x (82px): la stessa gabbia di menu, footer e banner. */ /* ---------- switch lingua ---------- Sta in style.css e non in mvp.css perché deve restare al suo posto anche quando togli data-mvp e riaccendi il sito completo. In basso a destra: in alto ci sono già la barra di stato e la topbar, e il piede a sinistra è occupato dal blocco contatti. z-index 210 lo tiene sopra la vignettatura, come il pulsante primario. */ /* ═══════════ LA RICETTA DEL VETRO ═══════════ Una classe sola, .glass, indossata da ogni comando in vetro: switch lingua, tondo XR, LinkedIn, bottoni del banner cookie. Prima ognuno riscriveva la propria pila di ombre — quattro ricette leggermente diverse, che è il motivo per cui l'insieme non sembrava fatto dello stesso materiale. Le dieci ombre non sono dieci decisioni: sono TRE gruppi. 1. il filo (1ª riga) — un capello di luce tutto intorno, che chiude la forma. È l'unica ombra simmetrica. 2. i colmi (righe 2-4) — la luce che entra nello spessore e si posa sopra-sinistra e sotto-destra. Raggi NEGATIVI: contraggono l'ombra fino a lasciarne solo il bordo, altrimenti sarebbe una macchia al centro invece di un filo. 3. i rientri (righe 5-8) — le stesse posizioni in ombra: dove il vetro si incurva via dalla luce. Sono loro a dare lo SPESSORE; senza, restano solo dei bordi chiari e la lastra torna piatta. 4. le portate (ultime 2) — l'unica coppia non-inset: staccano il pezzo dal fondo. Corta e stretta la prima (il contatto), lunga e larga la seconda (il peso). I decimali (1.8px, -6.5px, 2.5px) sono voluti: su valori interi i quattro colmi cadono esattamente sugli stessi pixel dei rientri e si annullano a vicenda, e il bordo torna piatto. Mezzo pixel di sfasamento basta perché ognuno resti visibile accanto all'altro. Deve stare su un elemento con un `border-radius` e SENZA `border`: lo spessore lo fanno le ombre, e una cornice vera ci passerebbe sopra coprendo proprio i colmi che fanno il lavoro. */ .glass{ position:relative; border:0; background-color:color-mix(in srgb,var(--gl-tint) var(--gl-fill),transparent); -webkit-backdrop-filter:blur(var(--gl-blur)) saturate(var(--gl-sat)); backdrop-filter:blur(var(--gl-blur)) saturate(var(--gl-sat)); box-shadow: /* il contorno: mezzo pixel, non uno. È la differenza fra "questa forma finisce qui" e "questa forma ha una cornice". */ inset 0 0 0 .5px color-mix(in srgb,var(--gl-light) calc(var(--gl-reflex-light) * 16%),transparent), /* il colmo in alto e il rientro in basso: DUE, non otto. Sfocati (2px di blur) invece che netti, e senza componente orizzontale — un filo che sfuma legge come curvatura, un filo netto legge come linea disegnata. È qui che stava il peso di prima: quattro colmi e quattro rientri, tutti a fuoco, facevano un bordo sbalzato invece di una lastra. */ inset 0 1px 2px -1px color-mix(in srgb,var(--gl-light) calc(var(--gl-reflex-light) * 60%),transparent), inset 0 -1px 2px -1px color-mix(in srgb,var(--gl-dark) calc(var(--gl-reflex-dark) * 14%),transparent), /* UNA portata sola, ampia e tenue: appoggia il pezzo sul fondo senza disegnargli sotto una seconda forma. Le due di prima (una corta e stretta, una lunga) si sommavano in un alone che si vedeva a colpo d'occhio prima del pulsante. */ 0 2px 10px -2px color-mix(in srgb,var(--gl-dark) calc(var(--gl-reflex-dark) * 12%),transparent); transition:background-color .4s var(--ease-glass), box-shadow .4s var(--ease-glass), transform .4s var(--ease-glass), color .25s var(--ease-glass); } /* al passaggio il vetro si SCHIARISCE, non si muove e basta: sale il velo (+8 punti) e salgono le due portate, come se la lastra si alzasse di un millimetro dal fondo. Le ombre interne restano identiche — sono lo spessore del materiale, e il materiale non cambia perché ci passi sopra il mouse. */ .glass:hover{ background-color:color-mix(in srgb,var(--gl-tint) calc(var(--gl-fill) + 8%),transparent); } /* pressione: la lastra torna a contatto col fondo. Spariscono le due portate e resta un solo alone corto — la scorciatoia visiva per "schiacciato". */ .glass:active{ transform:translateY(1px) scale(.985); } /* Chrome e Safari non compongono `backdrop-filter` allo stesso modo: su Safari un elemento che lo usa crea un contesto di impilamento che TAGLIA le ombre portate dei figli. Isolandolo qui, il taglio non risale al genitore. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ /* niente sfocatura disponibile: il vetro diventa una lastra opaca, o il testo sopra finirebbe illeggibile su una griglia di immagini */ .glass{background-color:color-mix(in srgb,var(--gl-tint) 72%,transparent);} } /* Riga dei comandi in alto a destra: lingua + modalità immersiva. In ALTO e non in basso: sul fondo ci sono .bottom-distort (250px di backdrop-filter) e il piede contatti, e i comandi finivano sepolti sotto entrambi — cliccabili in teoria, non in pratica. z-index 260 li porta sopra la topbar (210): devono restare raggiungibili da qualsiasi vista. align-items:center allinea i due elementi sulla stessa mezzeria anche se uno dei due cambia altezza. */ .topctl{ /* UN numero solo per l'altezza dei due comandi: cambiarlo qui li muove insieme, invece di doverli tenere allineati a mano in due punti. */ --ctl-h:44px; position:fixed; right:var(--pad-x,24px); top:calc(env(safe-area-inset-top,0px) + 32px); z-index:260; pointer-events:auto; display:flex;align-items:center;gap:10px; } .langswitch{ /* pointer-events esplicito e non ridondante: se un giorno un antenato passa a none (come fa .topbar), i figli lo ereditano. */ pointer-events:auto; /* riferimento per la pastiglia in ::after, che è in position:absolute */ position:relative; display:inline-flex;align-items:center; /* altezza DICHIARATA e non dedotta dal padding: così combacia col pulsante tondo al pixel, invece di avvicinarcisi */ height:var(--ctl-h,44px); padding:4px;border-radius:999px; /* niente gap: le due celle si toccano, e la pastiglia che scorre sotto passa dall'una all'altra senza un salto vuoto in mezzo. La distanza fra IT ed EN la fa il loro padding interno. */ gap:0; /* --lang-w è la larghezza di UNA cella. La usano tre regole: la cella stessa, la pastiglia, e la corsa della pastiglia. Un numero solo, così non possono sfasarsi. */ --lang-w:42px; } /* la pastiglia: il pezzo di vetro più denso che scorre sotto la lingua attiva. Non è un `background` sul bottone premuto — un fondo che si accende e si spegne non ha direzione, e qui la direzione è tutto: vedere la pastiglia ANDARE da IT a EN è ciò che dice che le due sono la stessa cosa in due stati, invece di due bottoni separati. z-index 0 con le etichette a 1: sta sotto il testo, sopra il fondo. */ .langswitch::after{ content:''; position:absolute; left:4px;top:4px; width:var(--lang-w); height:calc(100% - 8px); border-radius:999px; z-index:0; background-color:color-mix(in srgb,var(--gl-tint) 38%,transparent); /* pila ridotta rispetto a .glass: la pastiglia è PICCOLA e dentro un altro vetro. Le dieci ombre della lastra grande, su 42px, si accavallerebbero fino a impastarsi in una macchia grigia. Restano il filo, due colmi e due rientri — quel tanto che basta a leggerla come un pezzo solido. */ /* stessa grammatica ridotta della lastra: contorno, colmo, rientro, una portata. Su 42px anche solo sei ombre facevano una pastiglia bombata — qui deve leggersi come un pezzo di vetro più denso, non come un tasto. */ box-shadow: inset 0 0 0 .5px color-mix(in srgb,var(--gl-light) calc(var(--gl-reflex-light) * 18%),transparent), inset 0 1px 2px -1px color-mix(in srgb,var(--gl-light) calc(var(--gl-reflex-light) * 55%),transparent), inset 0 -1px 2px -1px color-mix(in srgb,var(--gl-dark) calc(var(--gl-reflex-dark) * 12%),transparent), 0 1px 4px -1px color-mix(in srgb,var(--gl-dark) calc(var(--gl-reflex-dark) * 14%),transparent); /* `translate` e non `transform`: il transform su questo pseudo-elemento è già impegnato dallo scatto di scaleToggle, e le due proprietà separate non si sovrascrivono a vicenda. */ translate:0 0; transition:translate .44s var(--ease-glass), background-color .4s var(--ease-glass), box-shadow .4s var(--ease-glass); } /* dove va la pastiglia lo decide aria-pressed, la STESSA fonte che lo dice allo screen reader: lo stato visivo non può divergere da quello dichiarato. :has() sul contenitore invece di una classe messa dal JS — nessuno deve ricordarsi di sincronizzare una classe in più ad ogni cambio lingua. */ .langswitch:has(button:nth-of-type(2)[aria-pressed="true"])::after{ translate:var(--lang-w) 0; } /* lo scatto: mentre corre, la pastiglia si allunga nel verso del moto e poi rientra. È il dettaglio che la fa sembrare liquida invece che rigida — un solido che trasla resta un rettangolo che si sposta. Solo scaleX: allungare anche in altezza la farebbe uscire dal vetro. */ @keyframes lang-thumb-stretch{ 0% {scale:1 1;} 50% {scale:1.14 1;} 100%{scale:1 1;} } .langswitch:has(button[aria-pressed="true"])::after{ animation:lang-thumb-stretch .44s var(--ease-glass); } .langswitch button{ position:relative;z-index:1; /* sopra la pastiglia */ font:inherit;font-size:11.5px;font-weight:var(--w-regular);letter-spacing:.06em; /* larghezza dichiarata e uguale per le due: la pastiglia si sposta di una misura fissa, e se una cella fosse più larga dell'altra la corsa la lascerebbe fuori registro. */ width:var(--lang-w); line-height:1;padding:0;height:100%; border:0;border-radius:999px;cursor:pointer; background:transparent;color:rgba(255,255,255,.58); transition:color .3s var(--ease-glass); } .langswitch button:hover{color:rgba(255,255,255,.92);} /* la lingua attiva è marcata da aria-pressed: lo stato accessibile e quello visivo vengono dalla STESSA fonte, così non possono divergere. Qui resta SOLO il colore: il fondo è la pastiglia che scorre. */ .langswitch button[aria-pressed="true"]{ color:#fff; cursor:default; } .langswitch button:focus-visible{outline:2px solid rgba(255,255,255,.6);outline-offset:2px;} .langswitch__sep{width:0.5px;height:12px;background:rgba(255,255,255,.18);} /* chi non ha :has() (Firefox < 121) non vede la pastiglia muoversi: senza il selettore, resta ferma su IT e l'inglese sembrerebbe non selezionato mai. Meglio spegnerla del tutto e tornare al fondo acceso sul bottone premuto — meno bello, ma sempre corretto. */ @supports not selector(:has(*)){ .langswitch::after{display:none;} .langswitch button[aria-pressed="true"]{ background:color-mix(in srgb,var(--gl-tint) 38%,transparent); } } /* motion ridotto: la pastiglia c'è e sta al posto giusto, ci arriva istantaneamente invece di scorrere */ @media (prefers-reduced-motion:reduce){ .langswitch::after{transition:none;animation:none;} } /* ---------- pulsante modalità immersiva ---------- Stessa altezza dello switch lingua (36px) e larghezza uguale all'altezza: un cerchio esatto. Il valore è dichiarato e non dedotto dal contenuto — con l'icona dentro, un padding avrebbe dato un ovale. */ .xrbtn{ /* 44px: la misura minima raccomandata per un bersaglio tattile, e la stessa del pulsante LinkedIn nel piede. Lo switch lingua ci si allinea da sé grazie a --ctl-h. */ --xr-size:var(--ctl-h,44px); width:var(--xr-size);height:var(--xr-size);flex:none; display:inline-flex;align-items:center;justify-content:center; padding:0;border-radius:50%;cursor:pointer; color:rgba(255,255,255,.72); position:relative; /* fondo, bordo, ombre e transizione arrivano da .glass (vedi la ricetta sopra). Qui resta solo quello che è PROPRIO di questo pulsante: la misura, il cerchio e il colore dell'icona. Prima ognuno riscriveva la sua pila, ed è per questo che i comandi non sembravano lo stesso materiale. */ } .xrbtn svg{display:block;flex:none; /* l'icona segue la lastra: al passaggio si scosta di un capello verso l'alto, come se galleggiasse dentro il vetro invece di esserci stampata sopra */ transition:transform .4s var(--ease-glass);} .xrbtn:hover{color:#fff;} /* ── SIAMO SU UN VISORE ── La classe la mette il JS quando navigator.xr dichiara di poter aprire una sessione immersiva. Su un monitor questo stato non esiste mai, quindi qui si può spingere senza rischiare di gridare a chi non può farci niente. Tre segnali, in ordine di forza: 1. il colore passa all'accent — è l'unico comando colorato in pagina 2. un alone che pulsa piano dietro il tondo 3. l'icona un filo più grande, come un pulsante già premuto a metà Niente scatti né rimbalzi: è un invito, non una notifica. */ .xrbtn.is-ready{ /* PIENO, non tinto. Al 16% l'accent si leggeva come un'ombra rossastra sotto il vetro: da lontano restava un tondo grigio come gli altri. A questo punto il comando smette di essere vetro e diventa un pulsante colorato — che è esattamente ciò che serve quando è l'azione principale della pagina e sei sul dispositivo che può eseguirla. */ color:#fff; background-color:color-mix(in srgb,var(--accent) 92%,transparent); /* il glifo bianco su arancione ha bisogno di un filo di peso in più */ animation:xr-ready-pulse 2.4s var(--ease-glass) infinite; } /* un secondo anello, più largo e più lento del primo: due onde sfasate leggono come "sta chiamando", una sola come un bordo che lampeggia */ .xrbtn.is-ready::before{ content:'';position:absolute;inset:0;border-radius:inherit; pointer-events:none; animation:xr-ready-ring 2.4s var(--ease-glass) .5s infinite; } @keyframes xr-ready-ring{ 0% {box-shadow:0 0 0 0 rgba(255,99,71,.34);} 70% {box-shadow:0 0 0 16px rgba(255,99,71,0);} 100%{box-shadow:0 0 0 0 rgba(255,99,71,0);} } .xrbtn.is-ready:hover{ color:#fff; /* più chiaro, non più scuro: su un fondo già pieno l'unico modo di dire "sei sopra" è schiarire. Scurendo sembrerebbe premuto. */ background-color:color-mix(in srgb,#ff8566 100%,transparent); transform:scale(1.06); animation-play-state:paused; /* al passaggio smette di chiamare: l'hai visto */ } .xrbtn.is-ready:hover::before{animation-play-state:paused;} .xrbtn.is-ready svg{transform:scale(1.06);} /* L'alone è un box-shadow e NON un elemento sfocato: un filter:blur() su un elemento che anima viene rasterizzato in un layer e la sfocatura si taglia netta ai suoi bordi — si vedrebbe un quadrato attorno alla luce. Il colore è l'accent literal (#ff6347) perché rgba() non accetta una variabile: se un giorno cambi --accent, questi valori vanno rifatti. */ @keyframes xr-ready-pulse{ 0%,100%{box-shadow:0 0 0 0 rgba(255,99,71,.55), 0 4px 16px -2px rgba(255,99,71,.45);} 50% {box-shadow:0 0 0 10px rgba(255,99,71,0), 0 4px 20px -2px rgba(255,99,71,.65);} } /* il tooltip di un comando che invita resta aperto un attimo da solo, così l'invito si legge anche senza avvicinare il puntatore */ .xrbtn.is-ready::after{ animation:xr-ready-tip .6s var(--ease-glass) 1.2s both; } @keyframes xr-ready-tip{ 0% {opacity:0;transform:translateY(-4px);} 30% {opacity:1;transform:none;} 85% {opacity:1;transform:none;} 100%{opacity:0;transform:translateY(-4px);} } @media (prefers-reduced-motion:reduce){ /* resta l'evidenza (colore e alone fermo), sparisce il battito */ .xrbtn.is-ready{animation:none;box-shadow:0 0 0 4px rgba(255,99,71,.30),0 4px 16px -2px rgba(255,99,71,.4);} .xrbtn.is-ready::before, .xrbtn.is-ready::after{animation:none;} } .xrbtn:hover svg{transform:translateY(-1px) scale(1.06);} .xrbtn:focus-visible{outline:2px solid rgba(255,255,255,.6);outline-offset:2px;} /* Tooltip su data-tip invece del `title` nativo: quello compare dopo oltre un secondo, non si può stilare e su touch non esiste. Qui la risposta è immediata e coerente col resto dell'interfaccia. Sta SOTTO il pulsante perché sopra c'è il bordo della finestra. */ .xrbtn::after{ content:attr(data-tip); position:absolute;top:calc(100% + 8px);right:0; padding:6px 10px;border-radius:8px;white-space:nowrap; font-size:11.5px;line-height:1;letter-spacing:.01em; color:rgba(255,255,255,.92); background:rgba(20,20,23,.88); border:0.5px solid rgba(255,255,255,.14); -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px); opacity:0;transform:translateY(-4px);pointer-events:none; transition:opacity .2s var(--ease),transform .2s var(--ease); } .xrbtn:hover::after, .xrbtn:focus-visible::after{opacity:1;transform:none;} /* su touch il tooltip non ha senso: non c'è hover, e resterebbe attaccato dopo il tocco */ @media (hover:none){ .xrbtn::after{display:none;} } /* in chiaro cambia SOLO il colore dell'icona: fondo, bordo e ombre li rifà da sé la ricetta, leggendo i token --gl-* che il tema ha già ribaltato. Prima qui c'era una seconda pila di ombre scritta a mano, che è il motivo per cui i due temi non sembravano lo stesso pulsante. */ :root[data-theme="light"] .xrbtn{color:rgba(0,0,0,.62);} :root[data-theme="light"] .xrbtn:hover{color:#111;} :root[data-theme="light"] .xrbtn::after{ color:#111;background:rgba(255,255,255,.94);border-color:rgba(0,0,0,.1); } /* ---------- avviso "serve un visore" ---------- */ .xrmodal{ position:fixed;inset:0;z-index:400; display:flex;align-items:center;justify-content:center;padding:24px; /* Velo più deciso di prima (era .22). La scheda ora è una FINESTRA, e una finestra ha bisogno che dietro ci sia stanza buia: è il contrasto col fondo a darle il distacco fisico. Al 22% la griglia restava vivace e la modale ci galleggiava sopra senza peso. Il blur resta alto: è lui a isolare, il nero serve solo a spegnere. */ background:rgba(6,6,10,.58); -webkit-backdrop-filter:blur(34px) saturate(1.15) brightness(.62); backdrop-filter:blur(34px) saturate(1.15) brightness(.62); /* Il velo entra per primo e in fretta: è la stanza che si spegne, e deve essere già buia quando la finestra si materializza. Se i due partono insieme, la scheda arriva su un fondo ancora chiaro e si vede "attraverso" invece che davanti. La curva è quasi lineare in uscita (.4,0,.2,1): un buio che accelera sembra un taglio, non una dissolvenza. */ animation:xrmodal-in .34s cubic-bezier(.4,0,.2,1) both; } /* `hidden` da solo non basta: display:flex della regola sopra lo sovrascriverebbe e la modale resterebbe visibile all'avvio */ .xrmodal[hidden]{display:none;} @keyframes xrmodal-in{from{opacity:0;}to{opacity:1;}} /* ── LA FINESTRA ── L'obiettivo non è più "una scheda di vetro" ma un OGGETTO con spessore, come una finestra di visionOS: qualcosa che sta a mezz'aria davanti al contenuto e proietta la propria ombra sulla stanza. Tre cose lo fanno leggere come fisico, e sono tutte e tre necessarie: · l'ombra portata lunga e morbida, che la stacca dal fondo · il bordo luminoso in alto e scuro in basso: è lo SPESSORE del vetro colpito dalla luce d'ambiente · l'ingresso in profondità (vedi xrcard-in), che le dà una posizione nello spazio invece di farla comparire e basta */ .xrmodal__card{ width:min(400px,100%); /* niente padding qui: lo porta .xrmodal__body. Serve perché il video in cima deve toccare i bordi, e un padding sulla scheda lo rientrerebbe. */ padding:0; text-align:center; border-radius:30px; /* raggio ampio: è la firma di visionOS */ overflow:hidden; /* il video si taglia sugli angoli tondi */ background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.055) 100%); -webkit-backdrop-filter:blur(60px) saturate(1.9) brightness(1.02); backdrop-filter:blur(60px) saturate(1.9) brightness(1.02); border:0; /* La pila che fa lo spessore. Il bordo NON è un `border` — una cornice di spessore costante legge come contorno disegnato; queste ombre interne spingono da direzioni diverse, ed è l'asimmetria a dare il volume. Le due portate hanno ruoli distinti: la corta è il contatto, la lunga è il peso della finestra sospesa nella stanza. */ box-shadow: inset 0 0 0 .5px rgba(255,255,255,.20), inset 0 1.5px 1px -1px rgba(255,255,255,.65), inset 0 -1.5px 2px -1px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.30), 0 40px 90px -20px rgba(0,0,0,.75); /* 0.72s e non 0.62, e soprattutto una curva diversa. La (.16,1,.3,1) di prima era troppo frontale: misurandola, in 200ms era già a scala 0.986 — cioè arrivava quasi subito e poi passava 400ms a non muoversi. Il risultato era uno scatto seguito da un'attesa. La (.34,1.06,.34,1) distribuisce il movimento su tutta la durata e supera di un soffio il valore finale (1.06) prima di rientrare: non è un rimbalzo — è l'assestamento di un oggetto che si ferma, la stessa cosa che fa una finestra di visionOS quando si posa. Il ritardo di 90ms la fa arrivare DOPO che la stanza si è spenta. */ /* La curva è il punto. Misurando la precedente: scala 0.959 a 300ms, poi 0.972 a 450ms — trecento millisecondi passati a non muoversi, che a occhio si leggono come "arriva e poi si impunta". Neutro, appunto. La (.2,.9,.25,1.14) fa il contrario: parte più decisa, arriva quasi in posizione, e SUPERA il valore finale (1.14) prima di rientrare. Quel sorpasso è l'assestamento — l'oggetto che si posa e si stabilizza — ed è tutto ciò che separa un movimento fisico da una dissolvenza con la scala. */ animation:xrcard-in .68s cubic-bezier(.2,.9,.25,1.14) 60ms both; position:relative;isolation:isolate; } /* la scheda riceve il fuoco all'apertura ma non deve mostrarne l'anello: è un contenitore, non un comando. Il fuoco visibile ricompare al primo Tab, sul pulsante, dove serve. */ .xrmodal__card:focus{outline:none;} .xrmodal__card::before{ content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1; /* Alleggerita (era .34/.52). Serve a garantire un fondo minimo al testo bianco quando la finestra capita sopra una card chiara, ma a quei valori rendeva la scheda quasi opaca: il backdrop-filter dietro non aveva più niente da mostrare e il vetro tornava lastra grigia. Più scura in basso che in alto: è sotto che sta il testo. */ background:linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.30) 55%, rgba(0,0,0,.38) 100%); } /* L'ingresso: arriva da LONTANO, non dal basso. Prima saliva di 12px e scalava di .97 — un movimento da tooltip. Una finestra di visionOS si materializza in profondità: parte più piccola e dietro, e viene avanti fermandosi con una decelerazione lunga. Il blur che si dissolve è ciò che vende la distanza: quello che è lontano è fuori fuoco. La curva (.16,1,.3,1) non ha rimbalzo — un oggetto pesante non rimbalza, si posa. */ @keyframes xrcard-in{ from{ opacity:0; /* parte più piccola e un filo più in basso: la combinazione legge come "lontana", non come "spostata". La traslazione è piccola apposta — tanta traslazione è un pannello che scorre, poca traslazione con molta scala è un oggetto che viene avanti. */ transform:translate3d(0,18px,0) scale(.78); filter:blur(14px) brightness(1.5); } /* Il fuoco si risolve PRIMA della geometria: a 45% la finestra è già leggibile mentre sta ancora arrivando. È come si comporta qualcosa che si avvicina, e toglie la sensazione di dissolvenza. `brightness` che scende da 1.5 a 1 è un colmo di luce che attraversa il vetro mentre si posa — il lampo che un materiale riflettente dà quando ruota nella luce. Costa nulla ed è la cosa che si nota di più. */ 45%{ opacity:1; filter:blur(0) brightness(1.14); } to{ opacity:1; transform:none; filter:blur(0) brightness(1); } } /* Il contenuto entra DOPO il contenitore, e appena appena da sotto. È il dettaglio che fa sembrare la finestra un oggetto invece che un'immagine: prima arriva il vetro, poi ci si posa dentro quello che contiene. 40ms di scarto fra i due blocchi bastano — di più si legge come ritardo, di meno non si legge affatto. */ @keyframes xrcontent-in{ from{opacity:0;transform:translate3d(0,10px,0) scale(.985);} to {opacity:1;transform:none;} } /* Motion ridotto: la finestra COMPARE, non arriva. Il movimento in profondità con blur è esattamente il tipo di animazione che dà fastidio a chi soffre di motion sickness — e qui non porta informazione, solo carattere. Il materiale, l'ombra e lo spessore restano: quelli non si muovono. */ @media (prefers-reduced-motion:reduce){ .xrmodal{animation:xrmodal-in .2s linear both;} .xrmodal__card{animation:xrmodal-in .2s linear both;} /* niente scaglionamento e niente scorrimento: compaiono insieme al vetro */ .xrmodal__media, .xrmodal__body{animation:none;} } /* ── il video di anteprima ── A filo: niente padding sopra e ai lati, il contenuto tocca la cornice. 16:10 invece di 16:9: un filo più alto tiene la finestra compatta e assomiglia alle proporzioni delle finestre di sistema. */ .xrmodal__media{ position:relative; animation:xrcontent-in .5s cubic-bezier(.16,1,.3,1) .20s both; /* 21:9 e non 16:10. A 16:10 su una scheda da 400px il video prendeva 250px, cioè metà finestra: l'anteprima diventava il soggetto e il messaggio un sottotitolo. Una fascia panoramica dice "ecco com'è" senza rubare la scena. */ aspect-ratio:21/9; width:100%; /* il placeholder: un cielo da visore, coerente col logo 3D del preloader. Sostituendolo con un