/* ============================================================ Fondale di particelle dietro la home di xsyte.it — PROVA. Foglio di SOLE aggiunte: si carica per ultimo e non tocca `xsyte.css`. Per tornare indietro basta togliere questo file e il . ============================================================ */ /* Il canvas sta dietro a tutto. Il fondo del body deve lasciarlo vedere: era una sfumatura opaca. */ #particelle{ position:fixed;inset:0;width:100%;height:100%; z-index:0;pointer-events:none;display:block; } body{ background:#030510 !important; } /* 🚨 NIENTE regola a tappeto tipo `body > *`. xsyte.it ha un CURSORE PERSONALIZZATO (`.xsyte-cursor-dot` / `-ring`) che il JS appende al body con `position:fixed`, e la pagina nasconde quello di sistema con `cursor:none`: forzandogli `position:relative` finisce nel flusso e sparisce, lasciando la pagina SENZA cursore. Si elencano solo i contenitori veri. */ .site-header, .hero, .services-section, .portfolio-section, .about-section, .process-section, .contact-section, .site-footer{ position:relative; z-index:1; } /* L'apertura: al posto della foto del portatile c'e` l'anello. La foto resta nel codice ma non si vede, così il ritorno indietro è una riga di CSS. */ .hero-visual{ display:none !important; } .hero::after{ opacity:.35 !important; } /* il velo dell'eroe si alleggerisce */ /* Le sezioni hanno fondali semitrasparenti: li tengo, servono a leggere il testo, ma li apro quel tanto che basta a far passare le particelle. */ .services-section{ background:linear-gradient(125deg, rgba(12,15,35,.72), rgba(4,6,18,.62)) !important; } /* ---- pagina SERVIZI: l'eroe ospita la doppia elica ---- */ .page-hero{ position:relative; z-index:1; } .page-hero::after{ opacity:.30 !important; } .offer-studio{ position:relative; z-index:1; } .offer-card, .offer-panel, .offer-studio-heading{ position:relative; z-index:1; } .process-section, .contact-section{ backdrop-filter:blur(10px); } /* Le schede restano piene: il testo non deve mai stare sopra le particelle nude. */ .service-card, .portfolio-card, .value-card, .process-card{ background-color:rgba(9,12,28,.86) !important; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); } /* Alone scuro sotto i titoli grandi: invisibile su fondo pieno, tiene leggibile la riga se ci passa dietro una cresta accesa. */ /* 🚨 NIENTE text-shadow sui titoli col testo sfumato (`background-clip: text` + `color:transparent`): l'ombra si vede ATTRAVERSO le lettere trasparenti e la sfumatura sparisce. Su xsyte.it succede a `.hero h1` e a ogni titolo con colorato. Qui l'alone non serve comunque: l'anello sta a destra, fuori dal testo. */ .hero p, .about-copy > p, .process-intro{ text-shadow:0 0 26px rgba(3,5,16,.92); } /* 🚨 Il piede con un fondo pieno diventa un RETTANGOLO con lo spigolo netto contro il campo di particelle: si vede la cucitura. Lo si rende trasparente e si mette dietro una sfumatura A TUTTA LARGHEZZA che spegne il fondale scendendo — nessun bordo, nessun angolo. */ .site-footer{ background:transparent !important; } .site-footer::before{ content:""; position:absolute; left:50%; translate:-50% 0; top:-220px; bottom:-40px; width:100vw; z-index:-1; pointer-events:none; background:linear-gradient(180deg, rgba(3,5,16,0) 0%, rgba(3,5,16,.55) 38%, rgba(3,5,16,.88) 70%, #030510 100%); } /* 🚨 CHI NON HA WEBGL. Il JavaScript mette `no-webgl` su quando il contesto non c'e` o gli shader non compilano (browser vecchi, accelerazione hardware disattivata, Tor in modalita` sicura) — ma fino al 02/09/2026 NESSUNA regola la ascoltava: il canvas restava vuoto e l'immagine grande dell'apertura era gia` nascosta qui sotto, quindi quel visitatore perdeva il pezzo senza avere niente al suo posto. Si torna al sito di prima. */ .no-webgl .hero-visual{ display:block !important; } .no-webgl #particelle{ display:none; } @media (prefers-reduced-motion:reduce){ #particelle{ display:none; } .hero-visual{ display:block !important; } /* torna la foto */ }