/* ========================================================================== TelaStampiamo — Home (scroll experience) Stage pinnato + layer impilati. Stati guidati da JS via classi su . Fallback (no-js / reduced-motion / mobile / no-webgl): capitoli in flusso normale, leggibili, senza pin ne' canvas. ========================================================================== */ #ts-home { position: relative; background: var(--ts-black); } #ts-stage { position: relative; width: 100%; height: 100vh; height: 100svh; overflow: hidden; } /* --- Canvas layer --- */ .ts-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: var(--ts-z-canvas); display: block; } #ts-hero-canvas { z-index: calc(var(--ts-z-canvas) + 2); } #ts-print-canvas { z-index: var(--ts-z-canvas); } #ts-web-canvas { z-index: calc(var(--ts-z-canvas) + 1); } #ts-3d-canvas { z-index: calc(var(--ts-z-canvas) + 3); } /* CAP3: sopra gli altri quando attivo */ .ts-canvas--hidden { opacity: 0; } /* --- Chapter content --- */ .ts-chapter { display: flex; align-items: center; padding: var(--ts-header-h) var(--ts-gutter) var(--ts-space-xl); } .ts-chapter-content { max-width: 38rem; display: grid; gap: var(--ts-space-md); } .ts-chapter-content--right { margin-left: auto; text-align: right; justify-items: end; } /* Testo 3D: in basso a sinistra, fuori dal centro (il logo animato resta protagonista) */ .ts-chapter-content--3d { align-self: end; justify-items: start; text-align: left; max-width: 28rem; margin: 0; padding-bottom: var(--ts-space-lg); } .ts-chapter-title { font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.6rem); } .ts-chapter-body { color: var(--ts-text-dim); font-size: var(--ts-text-base); max-width: 42ch; } /* --- Hero (CAP 0): il logo 3D occupa il centro; testo ai poli --- */ #ts-hero { display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; padding: calc(var(--ts-header-h) + 4vh) var(--ts-gutter) var(--ts-space-lg); } .ts-hero-bottom { display: grid; gap: var(--ts-space-md); justify-items: center; } .ts-hero-sub { color: var(--ts-text-dim); font-family: var(--ts-font-mono); font-size: var(--ts-text-sm); letter-spacing: 0.08em; text-transform: uppercase; } /* Lockup statico del brand: solo nel fallback (MODE B) */ .ts-hero-fallback { display: none; } html.ts-static .ts-hero-fallback, html.ts-no-js .ts-hero-fallback { display: grid; position: absolute; inset: 0; place-content: center; justify-items: center; gap: 0.6rem; text-align: center; } .ts-hf-bar { width: clamp(120px, 30vw, 220px); height: 8px; background: var(--ts-red); border-radius: 2px; } .ts-hf-word { font-family: var(--ts-font-display); font-size: var(--ts-text-display); text-transform: uppercase; letter-spacing: 0.02em; line-height: 0.9; color: var(--ts-white); } .ts-hf-word span { color: inherit; } /* testo tutto bianco: solo la barra e' rossa */ .ts-hf-tag { font-family: var(--ts-font-mono); font-size: var(--ts-text-sm); letter-spacing: 0.1em; color: var(--ts-text-dim); text-transform: uppercase; } .ts-scroll-hint { display: grid; justify-items: center; gap: var(--ts-space-2xs); font-family: var(--ts-font-mono); font-size: var(--ts-text-xs); letter-spacing: var(--ts-tracking-wide); text-transform: uppercase; color: var(--ts-text-dim); } .ts-scroll-hint-line { width: 1px; height: 2.5rem; background: linear-gradient(var(--ts-red), transparent); } /* --- Overlay CRT: spegnimento TV catodica --- */ #ts-crt { position: absolute; inset: 0; z-index: 8; /* sopra i canvas, sotto la riga e i contenuti */ background: #000; pointer-events: none; } /* Stella a 4 punte (twinkle stile cartone) al punto di spegnimento. Contenitore = ALONE (radial-gradient bianco->rosso, reso affidabile ovunque). Figlio = stella bianca SOTTILE. */ .ts-crt-star { position: absolute; top: 50%; left: 50%; width: 320px; height: 320px; margin: -160px 0 0 -160px; z-index: 10; pointer-events: none; display: flex; align-items: center; justify-content: center; /* alone discreto (meno "finto"): core bianco tenue + accenno rosso */ background: radial-gradient(circle, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.10) 12%, rgba(193, 39, 45, 0.30) 26%, rgba(193, 39, 45, 0.10) 42%, transparent 58%); } .ts-crt-star-shape { width: 96px; height: 96px; background: #fff; /* punte sottili: i punti interni sono vicini al centro */ clip-path: polygon(50% 0%, 52.5% 47.5%, 100% 50%, 52.5% 52.5%, 50% 100%, 47.5% 52.5%, 0% 50%, 47.5% 47.5%); filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.95)); } /* Il canvas che collassa verso il centro allo spegnimento CRT (CAP3 = #ts-3d-canvas) */ #ts-hero-canvas, #ts-3d-canvas { transform-origin: 50% 50%; } /* --- Finale (CAP 4) / CTA --- */ #ts-finale { justify-content: center; } .ts-finale-content { display: grid; gap: var(--ts-space-md); justify-items: center; text-align: center; max-width: 46rem; margin-inline: auto; } .ts-finale-tagline { font-family: var(--ts-font-display); font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.9rem); line-height: 0.96; text-transform: uppercase; letter-spacing: 0.02em; } .ts-finale-tagline span { color: var(--ts-red); } .ts-finale-sub { color: var(--ts-text-dim); font-size: var(--ts-text-base); max-width: 40ch; } /* Il bottone .ts-cta-final e' un componente globale: vedi main.css */ /* --- Stampa Digitale: fondo nero, inchiostro bianco (testo bianco di default) --- */ #ts-print .ts-chapter-body { color: var(--ts-white); } /* ========================================================================== MODE A — Esperienza attiva (JS + motion + webgl) I capitoli sono impilati e nascosti: la timeline ne guida opacita'/posizione. ========================================================================== */ /* NIENTE transform/will-change sugli antenati di #ts-stage: romperebbero il position:fixed usato dal pin di ScrollTrigger (perdita dello scroll-lock). */ /* I capitoli sono impilati a tutto schermo. Le SEZIONI restano presenti (niente visibility:hidden sul genitore, altrimenti coprirebbe il testo): a comparire/sparire e' il CONTENUTO interno, guidato dalla timeline (gsap autoAlpha). */ html.ts-js:not(.ts-static) .ts-chapter { position: absolute; inset: 0; z-index: var(--ts-z-content); pointer-events: none; } .ts-chapter-content, .ts-finale-content { pointer-events: auto; } /* Contenuti non-hero invisibili all'avvio (evita FOUC prima che parta gsap) */ html.ts-js:not(.ts-static) #ts-print .ts-chapter-content, html.ts-js:not(.ts-static) #ts-web .ts-chapter-content, html.ts-js:not(.ts-static) #ts-3d .ts-chapter-content, html.ts-js:not(.ts-static) #ts-finale .ts-finale-content { opacity: 0; } /* La sezione 3D non ha sfondo proprio: lascia vedere il canvas hero condiviso */ html.ts-js:not(.ts-static) #ts-3d { background: transparent; } /* Scrim morbido dietro il testo SOLO nel cap. 2 (Servizi Web): la' il codice neon passa dietro/sopra al testo. Negli altri capitoli i testi non sono coperti. */ #ts-web .ts-chapter-content { position: relative; } #ts-web .ts-chapter-content::before { content: ''; position: absolute; z-index: -1; inset: -2rem -2.75rem; background: radial-gradient(115% 130% at 50% 50%, rgba(8, 8, 8, 0.92), rgba(8, 8, 8, 0.55) 52%, transparent 78%); pointer-events: none; } /* ========================================================================== MODE B — Fallback statico (no-js / reduced-motion / mobile / no-webgl) Capitoli in flusso, ognuno a tutta altezza, scroll nativo, niente canvas. ========================================================================== */ html.ts-no-js #ts-stage, html.ts-static #ts-stage { height: auto; overflow: visible; } html.ts-no-js .ts-canvas, html.ts-static .ts-canvas { display: none; } html.ts-no-js #ts-crt, html.ts-static #ts-crt, html.ts-no-js .ts-crt-star, html.ts-static .ts-crt-star { display: none; } html.ts-no-js .ts-chapter, html.ts-static .ts-chapter { position: relative; min-height: 100vh; min-height: 100svh; opacity: 1; } html.ts-no-js #ts-loader, html.ts-static #ts-loader { display: none; } /* Sfondi differenziati nel fallback per dare ritmo */ html.ts-static #ts-print, html.ts-no-js #ts-print { background: #0a0a0a; } html.ts-static #ts-web, html.ts-no-js #ts-web { background: #060606; } html.ts-static #ts-3d, html.ts-no-js #ts-3d { background: radial-gradient(120% 80% at 50% 30%, #161616 0%, var(--ts-black) 70%); } /* --- Reduced motion: forza il fallback statico ed elimina l'hint animato --- */ @media (prefers-reduced-motion: reduce) { .ts-scroll-hint-line { background: var(--ts-red); } } /* --- Mobile: niente scroll-hint sovrapposto, padding piu' arioso --- */ @media (max-width: 768px) { .ts-chapter { padding-inline: var(--ts-gutter); } .ts-chapter-content--right { text-align: left; justify-items: start; margin-left: 0; } .ts-scroll-hint { display: none; } /* Su mobile (esperienza attiva, MODE A) i capitoli dividono lo schermo in due fasce: testo in una metà, animazione nell'altra (vedi section-print/web/3d-printer-scene per il lato canvas). Cosi' testo e animazione non si sovrappongono mai. I padding del .ts-chapter (header-h sopra, space-xl sotto) restano i "bordi di sicurezza". */ html.ts-js:not(.ts-static) #ts-print .ts-chapter-content { align-self: start; } /* CAP1: testo in ALTO, biglietti in basso */ html.ts-js:not(.ts-static) #ts-web .ts-chapter-content { align-self: end; } /* CAP2: testo in BASSO, keyword in alto */ html.ts-js:not(.ts-static) #ts-3d .ts-chapter-content { align-self: end; } /* CAP3: testo in BASSO, logo showoff in alto */ /* Compattiamo i blocchi testo cosi' restano nella loro fascia con respiro. */ #ts-print .ts-chapter-content, #ts-web .ts-chapter-content, #ts-3d .ts-chapter-content { gap: var(--ts-space-sm); max-width: 30rem; } #ts-web .ts-chapter-body, #ts-3d .ts-chapter-body, #ts-print .ts-chapter-body { font-size: var(--ts-text-sm); max-width: 40ch; } /* Spegnimento CRT (stella) -40% su mobile: alone + forma piu' piccoli. */ .ts-crt-star { width: 192px; height: 192px; margin: -96px 0 0 -96px; } .ts-crt-star-shape { width: 58px; height: 58px; } }