/* ========================================================= Livello presenza — i due utenti nel "file" Vedi docs/superpowers/specs/2026-08-08-figma-presence-design.md ========================================================= */ :root { /* Stessa glide del resto del sito: il cursore di Matteo deve muoversi con la stessa fisica delle card e della navbar, altrimenti si legge come un elemento estraneo incollato sopra. */ --presence-ease: cubic-bezier(0.32, 0.72, 0, 1); /* Scostamento della PUNTA del pennino dall'angolo alto-sinistro dell'asset (assets/pennino.svg, viewBox 0 0 146 57 — width/height dell' combaciano 1:1, nessuna scala di mezzo). Misurato dal bounding box del corpo della matita (getBBox() del path col fill bianco che va dalla punta al corpo, non l'altro path bianco che e' la gomma): x 5.4..39.0, y 6.2..39.8 — la matita e' in diagonale con la punta in basso a sinistra, a circa (7, 39). Il commento precedente ("nessuno scostamento, la punta sta in alto a sinistra") era sbagliato — correzioni B1. Se pennino.svg cambia, rimisurare. */ /* La mano chiusa, per tutto cio' che si prende e si sposta. Una sola definizione: la usano sia about-me.css (grab/grabbing) sia la regola piu' sotto per i riquadri cliccabili che ci stanno dentro. */ --cursore-mano: url("../assets/Cursor-mano.svg") 12 15, grab; --presence-cursor-tip-x: 7; --presence-cursor-tip-y: 39; /* MANOPOLA — dimensione del cursore di Matteo (pennino + etichetta). A 1 l'asset e' alla sua misura nativa, 146x57, che dal vivo risulta ingombrante rispetto al resto della pagina. Cambiando questo valore si scalano INSIEME l'immagine e lo scostamento della punta qui sopra: e' l'unico modo di rimpicciolire il cursore senza far scollare la punta dal tratto che disegna. Non toccare le due misure della punta per aggiustare la dimensione: si rompe la calibrazione. Il valore e' calibrato sulla FRECCETTA del visitatore, cosi' i due utenti hanno cursori della stessa taglia invece che uno grande il doppio dell'altro: la freccia disegnata in assets/Cursor.svg misura 14.4x16px, la matita in assets/pennino.svg 33.6x37.4px, e 0.44 le porta alla stessa altezza. */ --presence-cursor-scale: 0.44; /* Il riquadro della sola matita dentro l'asset: serve a ritagliarla via dall'etichetta, che viene ridisegnata come testo vero (vedi .presence__cursor-name). Scalare tutto insieme rendeva l'etichetta illeggibile a queste dimensioni. */ --presence-pen-box: 46; } /* Il cursore del visitatore e' quello di sistema, ridisegnato: la proprieta' CSS `cursor` la compone il sistema operativo, quindi ha ritardo ZERO. Un
che insegue il mouse in JavaScript e' sempre un fotogramma indietro e si vede subito che e' finto. Il numero dopo l'URL e' il punto attivo (la punta della freccia). Sotto .js e non su `body` nudo: senza JavaScript il secondo utente (Matteo) non esiste mai, quindi una freccia da Figma senza nessuno con cui condividere il file sarebbe solo un cursore strano — e il vincolo di progetto vuole il sito identico alla versione attuale senza JS. La classe .js viene impostata nell'inline script in , prima del primo paint (stesso meccanismo di `.js [data-reveal]` in page.css), quindi non c'e' nessun lampo del cursore di sistema al caricamento. */ .js body { cursor: url("../assets/Cursor.svg") 6 4, auto; } /* Link e bottoni: gia' pointer di default (i link lo sono nativamente, i bottoni del sito lo sono gia' via .btn/.photo-stack__nav/ .photo-stack__play in button.css e photo-carousel.css). Restano fuori dal gate perche' non cambiano nulla senza il cursore personalizzato: gate inutile e' solo rumore. */ a, button { cursor: pointer; } /* Input e textarea: cursore di testo, gia' il default nativo del browser — stesso motivo, fuori dal gate. */ input, textarea { cursor: text; } /* Label e [role="button"]: qui invece il pointer NON e' il default del browser (una