/* ===== INCISIONE LASER DEL TITOLO ===== Il titolo si scrive da solo un secondo dopo il caricamento, come inciso da un raggio che solleva polvere di metallo. Resta testo vero, selezionabile. */ /* Il colore: sfumatura dal verde acqua all'ambra, dipinta dentro le lettere. Prende il posto del grigio "acciaio" di steel-title.css, che dipinge gli stessi titoli: stesso `padding-bottom`, cosi' l'ingombro resta identico a prima e nulla si sposta nella pagina. Quel padding serve perche' la pittura arrivi alle code di "p" e "g", che con line-height stretto sporgono sotto il riquadro. Il selettore e' ripetuto apposta: senza quel peso in piu' vincerebbe il grigio. */ [data-laser][data-laser]{ background-image:linear-gradient(100deg,var(--teal,#16C9B0),var(--amber,#E0934E)); -webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent; padding-bottom:.2em} /* Nelle pagine dove il titolo non era dipinto (elenco prodotti, progetti, contatti, pagine legali) quel padding non c'era: si toglie l'ingombro in piu' con un margine negativo, altrimenti la pagina si allunga di 15 px. */ .phero [data-laser],.pj-hero [data-laser],.chero [data-laser], .legal [data-laser],.pd-hero [data-laser]{margin-bottom:-.2em} /* La tela sta sopra la pagina, non dentro il titolo: nessun bordo la ritaglia e la polvere passa davanti a quello che trova. Le misure arrivano dalle percentuali: 100vw comprenderebbe anche la barra di scorrimento. */ .laser-cv{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9999} /* Prima del passaggio del raggio il titolo non si deve leggere: nemmeno la prima lettera. Il ritaglio parte da larghezza zero e si allarga da sinistra; essendo piu' alto del riquadro non tocca le code delle lettere. La classe la mette una riga di script nel , prima che il titolo venga disegnato: senza JavaScript non arriva mai e il titolo resta visibile. */ .laser-si [data-laser]{clip-path:polygon(-6% -60%, 0% -60%, 0% 160%, -6% 160%)} @media(prefers-reduced-motion:reduce){ .laser-si [data-laser]{clip-path:none} .laser-cv{display:none} }