/* ═══════════════════════════════════════════════════════════════════════════ LA VESTE DEL SITO — «baropodometria», dal 09/10/2026 Si sovrappone a sito.css, prova.css e legale.css. Non li sostituisce. ═══════════════════════════════════════════════════════════════════════════ QUESTA E' LA VESTE DEL SITO, su tutte le pagine. Nata come prototipo (sitotest.php) il 09/10/2026 e approvata in giornata: «metti online intanto la landing che e' bellissima e fai tutte le altre». Resta un foglio A PARTE e non fuso dentro a sito.css: finche' la veste e' giovane, poterla togliere con una riga vale piu' dell'eleganza di avere un file solo. Il punto di ripristino sta in backups/sito-prima-veste-*. PERCHE' SOVRAPPOSTO. La struttura di quella pagina funziona — l'ordine delle sezioni e' ragionato, l'impaginato regge su ogni schermo, i contenuti sono stati scritti e riscritti. Quello che e' generico e' il VESTITO: fasce alternate crema/verde/scura, angoli tondi, un verde istituzionale. Riscrivere 125 KB di CSS per cambiare il colore sarebbe rischiare l'impaginato per guadagnare un'atmosfera. Qui si riscrive solo lo strato estetico. TRE IDEE, E BASTA. 1 · IL FONDO E' UNA BAROPODOMETRIA, resa come curve di livello e non come macchia di calore: una chiazza blu-giallo-rossa somiglia al sito del meteo, le isobare somigliano a uno strumento di misura. E' l'immagine che appartiene solo a questo mestiere. 2 · LE FASCE SPARISCONO. Il fondo diventa uno solo e continuo, e il campo scorre sotto a tutta la pagina. Le fasce alternate servivano a dare ritmo a una pagina lunga; qui il ritmo lo da' la linea del passo, che non taglia la pagina a strisce. 3 · LO SCORRIMENTO MUOVE LE COSE, non le fa comparire e basta. Il sito di oggi rivela i blocchi una volta sola quando entrano; qui le schermate sono agganciate alla rotellina — vai avanti e girano, torni indietro e tornano. E' quello che fa Apple, e si chiama scroll-scrubbing: si fa in CSS con animation-timeline, senza una riga di libreria, e gira fuori dal thread principale. LA SCALA DI PRESSIONE (--p1..--p5) SOLO PER IL CALORE E PER I DATI. Mai un bordo, mai un pulsante, mai un fondo. Un colore che misura, appena lo si usa per decorare, smette di voler dire qualcosa. ═══════════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────────────── 1 · I COLORI ───────────────────────────────────────────────────────────────────────── sito.css e' quasi tutto scritto su variabili: ridefinendole qui si gira l'intera pagina con venti righe, invece di rincorrere ogni regola. E' il motivo per cui quel foglio e' fatto bene, e si vede solo adesso. */ :root { /* Il nero ha una deriva verde: un grigio neutro accanto al verde del marchio sembra sporco, non neutro. */ --fondo: #070D0C; --fondo-alto: #0C1514; /* UNA SCHEDA DEVE ESSERE UNA SUPERFICIE, NON UN VELO. Era rgba(255,255,255,.034): il 3,4% di bianco su fondo scuro non e' un pannello, e' niente. Le schede sparivano e il testo restava appoggiato direttamente sulle curve di livello, che si muovono: da li' «una trasparenza generale ovunque che rende orribili le foto e molti dei testi» (il titolare, 09/10/2026), ed e' esattamente quello che era. Ora e' un pannello quasi pieno, con dentro un soffio del fondo: il campo si vede FRA le schede, non ATTRAVERSO. */ --carta: rgba(13, 22, 21, .93); --crema: transparent; --grigio: transparent; --verde-nebbia: transparent; --verde-velo: rgba(51, 181, 165, .13); --bordo: rgba(147, 166, 162, .17); --bordo-grigio: rgba(147, 166, 162, .17); --inchiostro: #F1F6F4; --inchiostro-2: #AFC0BC; /* 9,4:1 sul fondo */ --tenue: #93A6A2; /* 7,2:1 — e' lo stesso grigio della fascia scura */ /* Su fondo scuro un'ombra nera non esiste: separa col bordo, non con l'ombra. */ --ombra: 0 1px 2px rgba(0, 0, 0, .34), 0 14px 36px rgba(0, 0, 0, .34); --ombra-alta: 0 2px 10px rgba(0, 0, 0, .44), 0 36px 72px rgba(0, 0, 0, .50); --scocca: #0E1817; --scocca-barra: #121E1C; --scocca-bordo: rgba(147, 166, 162, .20); --ombra-scocca: 0 2px 14px rgba(0, 0, 0, .5), 0 44px 90px rgba(0, 0, 0, .6); /* La scala di pressione. Gli stessi cinque valori stanno anche in nuovo.js, dentro allo shader: lo shader non legge le variabili CSS, e non c'e' modo di evitarlo. Se si cambiano qui, vanno cambiati anche la'. */ --p1: #1B3A6B; --p2: #1F8A7A; --p3: #8DC63F; --p4: #F2C53D; --p5: #E8603C; } /* IL FONDO STA SU , NON SU , e non e' un dettaglio: il campo di pressione sta sotto a tutto con z-index -1, e un fondo pieno su body glielo coprirebbe. Cosi' invece il colore e' dietro al campo, il campo e' dietro al contenuto, e non serve nessuna regola che alzi il contenuto. */ /* Le colonne che entrano da fuori lo fanno DA FUORI: a scena ferma stanno a -58px, cioe' oltre il bordo sinistro, e il browser ci metteva una barra di scorrimento orizzontale su tutta la pagina. Su un telefono quella barra significa che la pagina si trascina di lato col dito: sembra rotta. `clip` e non `hidden`, perche' hidden farebbe di un contenitore di scorrimento e fermerebbe di nuovo tutte le scene (ci siamo gia' cascati una volta oggi, con .apertura). */ html, body { overflow-x: clip; } html { background: var(--fondo); } body { background: transparent; color: var(--inchiostro); /* Serve da riferimento al tracciato del passo, che e' alto quanto la pagina. */ position: relative; } /* Le fasce spariscono: una pagina sola, un fondo solo. */ .fascia-crema, .fascia-grigia, .fascia-velo, .fascia-scura { background: none; } .fascia-scura { color: var(--inchiostro); } .fascia-scura .titolo p, .fascia-scura p { color: var(--inchiostro-2); } .fascia-scura .punti li { color: var(--inchiostro-2); } /* Le curve che separavano una fascia dall'altra non hanno piu' niente da separare: erano il bordo fra due colori che adesso sono lo stesso. */ .curve::before, .fascia-verde.curve::before { display: none; } /* IL RIGHELLO SOPRA AI TITOLI, VIA (09/10/2026). `.metro` e' una riga di trattini verde al 50%, sfumata da un lato. Sul sito chiaro e' un bel dettaglio; qui finisce sopra un fondo che e' GIA' fatto di linee, e il suo contrasto non regge: se ne vedono due, in basso a sinistra, isolati in mezzo allo spazio fra una sezione e l'altra. Il titolare: «spazio abbondante e dei trattini piccolini in basso a sinistra» — e due trattini isolati non si leggono come un righello, si leggono come sporco. Non si rinforza: si toglie. L'idea del misurare in questa veste la porta gia' il fondo, che e' letteralmente una misura. Due motivi dello stesso genere sovrapposti si annullano. */ .metro, .metro.centro { display: none; } /* La fascia verde resta l'unico accento, ma come pannello appena acceso invece che come muro di colore: su un fondo scuro il verde pieno diventa la cosa piu' luminosa della pagina e si mangia l'attenzione del titolo. */ .fascia-verde { background: linear-gradient(180deg, rgba(51, 181, 165, .085), rgba(51, 181, 165, .028)); border-block: 1px solid rgba(51, 181, 165, .20); } .fascia-verde::before { display: none; } .fascia-verde h2, .fascia-verde h3 { color: var(--inchiostro); } .fascia-verde p { color: var(--inchiostro-2); } .fascia-verde .etichetta { color: var(--verde); } .fascia-verde .punti li { color: var(--inchiostro-2); } .fascia-verde .punti svg { color: var(--verde); } /* QUI AVEVO MESSO UNA RIDUZIONE DELLO SPAZIO FRA LE SEZIONI, ED ERA UN DANNO. Pensavo che sul telefono valessero i 96px di `section`, e ho scritto 62. sito.css scende GIA' da solo: 68 sotto gli 980, 52 sotto i 620. La mia regola, arrivando dopo e pesando uguale, sostituiva i loro 52 coi miei 62 — misurato: i vuoti sono passati da ~105 a ~124 pixel. Volevo stringere e ho allargato. E' la terza volta oggi che inciampo nello stesso scalino (la pastiglia dell'occhiello, l'alone dei passi, questo): UN FOGLIO SOVRAPPOSTO NON EREDITA LE ECCEZIONI DI QUELLO SOTTO, LE SOSTITUISCE. Prima di scrivere una regola su un selettore che esiste gia', si va a vedere se ha delle media query — e se le ha, o le si ripete o non la si tocca. Qui la risposta giusta era: non toccarla. */ /* ───────────────────────────────────────────────────────────────────────── 2 · IL CAMPO DI PRESSIONE ───────────────────────────────────────────────────────────────────────── Fisso dietro a tutto, non intercetta niente. Il canvas lo crea nuovo.js; se WebGL non c'e', resta il gradiente qui sotto e nessuno se ne accorge. */ .veste-campo { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 50% at 30% 38%, rgba(31, 138, 122, .15), transparent 70%), radial-gradient(52% 46% at 78% 66%, rgba(27, 58, 107, .18), transparent 72%); } .veste-campo canvas { display: block; width: 100%; height: 100%; } /* QUI C'ERA UNA REGOLA CHE HA SVUOTATO LA PAGINA (09/10/2026). Diceva: «ogni figlio di body che non sia il campo va messo position:relative e z-index 1», per tenerlo sopra al fondo. Ma `body > div:not(.veste-campo)` pesa (0,1,1) e `.veste-traccia` pesa (0,1,0): vinceva lei, e la linea del passo — che deve stare ASSOLUTA fuori dal flusso — diventava un blocco in colonna alto duemilacentocinquanta pixel in cima alla pagina. Si arrivava sul sito e non si vedeva niente: non era niente di rotto, era tutto spinto piu' giu' di due schermate. La lezione non e' «aggiungi :not(.veste-traccia)»: e' che una regola larga su `body > *` prima o poi incontra un elemento che aveva bisogno del contrario, e lo scopri da un sintomo che non la nomina. Via del tutto: il campo e' sceso a z-index -1 e il contenuto gli sta sopra da solo, senza che nessuno debba dichiararlo. */ /* ───────────────────────────────────────────────────────────────────────── 3 · LA LINEA DEL PASSO — TOLTA (09/10/2026) ───────────────────────────────────────────────────────────────────────── Qui c'era un tracciato verticale alto quanto la pagina, che si disegnava scorrendo. Il titolare: «non sono sicuro che quelle righe diano valore aggiunto, anzi forse sembrano difetti grafici». Ha ragione, e il motivo e' preciso: una riga da un pixel e mezzo, senza niente intorno che la spieghi, non viene letta come un'idea — viene letta come un artefatto. Gli mancavano i segni d'appoggio che la rendevano un passo, e per giunta arrivava dentro al piede di pagina. L'idea non e' morta: e' andata dove ha qualcosa da raccontare, cioe' nei quattro passi di «Come si parte» (vedi piu' sotto). Una metafora vale dove descrive qualcosa, non come fondale. /* ───────────────────────────────────────────────────────────────────────── 4 · TIPOGRAFIA ───────────────────────────────────────────────────────────────────────── LA CRENATURA ERA TROPPO STRETTA e sul titolo grande la "r" e la "t" di "ortopedia" si toccavano. Poppins e' geometrica: ha gia' le sue distanze, e stringere oltre -0,02em a 60 pixel non e' piu' "titolo compatto", e' un errore di stampa. Le lettere che si toccano sono la prima cosa che fa sembrare dilettante una pagina altrimenti curata. */ h1 { letter-spacing: -.018em; } h2, .titolo h2 { letter-spacing: -.015em; } h3, .dettaglio h3 { letter-spacing: -.012em; } .etichetta { color: var(--verde); } .titolo p { color: var(--inchiostro-2); } /* UN'OMBRA SOTTO AI TESTI PICCOLI. Questa pagina ha una cosa che un sito normale non ha: il fondo non e' un colore, e' un disegno con dentro linee chiare. Un testo da 13-15px che capita sopra una curva di livello perde il contrasto proprio sul tratto, e non si vede misurando il colore — il colore e' giusto, e' il FONDO che cambia sotto le lettere. L'ombra non e' decorazione: e' il modo in cui si stacca un testo da uno sfondo non uniforme, ed e' lo stesso motivo per cui i sottotitoli dei film ce l'hanno. Due pixel, nera, morbida: non si nota, e il testo smette di dipendere da cosa gli passa dietro. NON sui titoli: sono grossi e pieni, si staccano da soli, e un'ombra li farebbe sembrare un biglietto da visita degli anni Novanta. */ p, li, small, figcaption, .etichetta, .occhiello i, .sotto-azioni, .oggi-chiusura, .passo-chi, .piano-invece, .piano-voce, .piano-chi, .monitor-indirizzo { text-shadow: 0 1px 2px rgba(0, 0, 0, .55); } /* Dentro alle schermate e ai riquadri pieni il fondo e' uniforme: li' l'ombra non serve a niente e sporca. */ .scheda-modulo *, .domande *, .monitor * { text-shadow: none; } /* ───────────────────────────────────────────────────────────────────────── 5 · SUPERFICI ───────────────────────────────────────────────────────────────────────── Su un fondo scuro una scheda non si stacca con l'ombra — il nero su nero non si vede — ma con un velo chiarissimo e un filo di bordo. */ .oggi-carta, .pezzo, .scheda-modulo, .accento, .gruppo, .piano, .tappa, .citazione { background: var(--carta); border-color: var(--bordo); } /* I BIANCHI SCRITTI A MANO. Quasi tutto sito.css passa dalle variabili, e infatti si e' girato da solo. Restano sette punti dove il bianco e' scritto come "#fff" perche' li' non c'era niente da parametrizzare — e su fondo scuro diventano buchi di luce. Il piu' grave era la scheda delle domande: un pannello bianco pieno, col testo chiaro sopra, cioe' undici righe illeggibili proprio dove uno cerca la risposta che gli manca per decidere. Quando questa direzione si porta dentro a sito.css, questi sette diventano una variabile --superficie e il problema non si ripresenta piu'. */ .domande.scheda { background: var(--carta); border-color: var(--bordo); } .campo input:focus, .campo textarea:focus { background: rgba(0, 0, 0, .42); box-shadow: 0 0 0 3px rgba(51, 181, 165, .22); } .bottone.chiaro { background: var(--verde); color: #04110F; box-shadow: 0 10px 28px color-mix(in srgb, var(--verde) 26%, transparent); } /* ── Il velo sotto al testo corrente ─────────────────────────────────────── Le curve di livello passavano dietro ai titoli e ai paragrafi e li rendevano faticosi: una riga che attraversa una parola la fa rileggere, e un effetto che costa una rilettura al visitatore ha gia' perso. Non si spegne il campo: si mette un velo del colore del fondo sotto alle SOLE colonne di testo. Le isobare continuano a correre ovunque e si ritirano dove c'e' da leggere. */ /* isolation: isolate tiene il velo DENTRO all'elemento. Senza, uno z-index -1 scappa al primo antenato che fa contesto — e con .moto quell'antenato cambia da solo quando l'opacita' torna a 1, cioe' il velo finirebbe dietro al campo a rivelazione avvenuta. Un difetto che compare mezzo secondo dopo. */ .titolo, .apertura-testa, .oggi-chiusura { position: relative; isolation: isolate; } .titolo::after, .apertura-testa::after, .oggi-chiusura::after { content: ""; position: absolute; inset: -40px -60px; z-index: -1; pointer-events: none; background: radial-gradient(68% 64% at 50% 50%, color-mix(in srgb, var(--fondo) 88%, transparent) 0%, color-mix(in srgb, var(--fondo) 58%, transparent) 48%, transparent 76%); } /* NIENTE backdrop-filter su niente che scorra: e' il difetto dei modal lenti di ieri, 12 fotogrammi al secondo invece di 40. La testata e' l'unica che se lo puo' permettere, perche' sta ferma. */ .testata { background: color-mix(in srgb, var(--fondo) 70%, transparent); border-bottom-color: var(--bordo); } .testata.giu { background: color-mix(in srgb, var(--fondo) 88%, transparent); border-bottom-color: var(--bordo); box-shadow: 0 6px 24px rgba(0, 0, 0, .4); } .menu a { color: var(--inchiostro-2); } .menu a:hover { color: var(--inchiostro); } .domanda { border-bottom-color: var(--bordo); } .piano-testa { border-bottom-color: var(--bordo); } /* ───────────────────────────────────────────────────────────────────────── 6 · LO SCORRIMENTO MUOVE LE COSE ───────────────────────────────────────────────────────────────────────── E' la parte nuova, ed e' tutta dentro a @supports: dove le animazioni legate allo scorrimento non esistono, la pagina si comporta esattamente come oggi — le rivelazioni di moto.js restano al loro posto e non manca niente. Perche' non GSAP: queste animazioni girano sul compositore, cioe' restano fluide MENTRE la pagina scarica le schermate. E' precisamente il momento in cui un visitatore nuovo la sta guardando. */ @supports (animation-timeline: view()) { /* ── 6· PRIMA DI TUTTO: overflow: clip, NON hidden ─────────────────────── Costato mezz'ora, e non si vede guardando la pagina — si vede solo misurando: la scena era agganciata, l'animazione esisteva, e restava inchiodata all'81% qualunque cosa facesse la rotellina. Il motivo: `overflow: hidden` fa dell'elemento un CONTENITORE DI SCORRIMENTO, anche se non scorre mai. E view() si aggancia al contenitore di scorrimento piu' vicino, non alla pagina. Quindi l'apertura — che ha overflow: hidden da sempre, per tenere dentro i suoi bagliori — faceva da timeline a se' stessa, e una timeline che non scorre e' ferma. `overflow: clip` taglia allo stesso modo ma NON crea un contenitore di scorrimento. Una parola, e la scena si muove. Vale per le tre sezioni che hanno hidden: l'apertura e le due fasce colorate. */ .apertura, .fascia-verde, .fascia-scura { overflow: clip; } /* ── 6a · Il monitor dell'apertura si raddrizza ────────────────────────── Parte inclinato all'indietro, come un portatile appena aperto, e si raddrizza mentre scendi. Non e' una comparsa: vai avanti e gira, torni indietro e torna indietro — la rotellina la stai girando tu, e la pagina risponde. E' la differenza fra un'animazione e un comando. */ .apertura-schermo { perspective: 1800px; perspective-origin: 50% 0%; } .apertura-schermo .monitor { transform-origin: 50% 0%; animation: raddrizza linear both; animation-timeline: view(block); animation-range: entry 6% cover 46%; } @keyframes raddrizza { from { transform: rotateX(13deg) scale(.885) translateY(16px); } to { transform: rotateX(0deg) scale(1) translateY(0); } } /* ── 6b · Le schermate girano entrando ─────────────────────────────────── Nelle righe a due colonne il testo e l'immagine arrivano gia' da parti opposte — c'era gia', ed e' giusto. Qui quel movimento smette di essere una comparsa che scatta una volta e diventa una manovra agganciata alla rotellina, con un filo di rotazione sull'asse verticale perche' la schermata sembri un oggetto che si gira e non un'immagine che scivola. Le colonne: la prima da sinistra, la seconda da destra. Nei blocchi rovesciati si specchia, o l'immagine attraverserebbe il testo. */ @media (min-width: 981px) { .dettaglio { perspective: 2000px; } .dettaglio > * { animation: entra-da-sinistra linear both; animation-timeline: view(block); animation-range: entry 4% cover 40%; } .dettaglio > :last-child, .dettaglio.rovescio > :first-child { animation-name: entra-da-destra; } .dettaglio.rovescio > :last-child { animation-name: entra-da-sinistra; } @keyframes entra-da-sinistra { from { transform: translate3d(-58px, 0, 0) rotateY(7deg); } to { transform: translate3d(0, 0, 0) rotateY(0deg); } } @keyframes entra-da-destra { from { transform: translate3d(58px, 0, 0) rotateY(-7deg); } to { transform: translate3d(0, 0, 0) rotateY(0deg); } } } /* ── 6c · La coppia di telefoni si apre a ventaglio ────────────────────── Due telefoni appaiati sono due rettangoli. Scendendo si scostano e si inclinano l'uno verso l'altro, come due oggetti posati sul banco: la sequenza — prima il cliente prenota, poi l'appuntamento e' in agenda — si legge perche' il secondo arriva dopo. */ @media (min-width: 981px) { .monitor-coppia { perspective: 1400px; } .monitor-coppia > * { animation: ventaglio-sinistra linear both; animation-timeline: view(block); animation-range: entry 10% cover 44%; } .monitor-coppia > :nth-child(2) { animation-name: ventaglio-destra; } @keyframes ventaglio-sinistra { from { transform: rotateY(12deg) translateX(18px) scale(.93); } to { transform: rotateY(3.5deg) translateX(0) scale(1); } } @keyframes ventaglio-destra { from { transform: rotateY(-12deg) translateX(-18px) scale(.93); } to { transform: rotateY(-3.5deg) translateX(0) scale(1); } } } /* ── 6c-bis · «COME SI PARTE»: LA PAGINA SI FERMA E I PASSI ARRIVANO ───── ───────────────────────────────────────────────────────────────────────── Il titolare: «arrivo in quel punto e la pagina smette di scendere, ma ogni giro di rotellina mi fa comparire uno dei passi; arrivato al 4 torna a scendere». E' una cosa diversa da una comparsa sfalsata — che e' quello che avevo fatto prima, e infatti la pagina continuava a correre. COME SI TIENE FERMA UNA PAGINA SENZA RUBARE LO SCORRIMENTO. Non si intercetta la rotellina (quello fa litigare la pagina col dito e col lettore di schermo): si fa alta la sezione — tre schermate e mezza — e dentro si appiccica il contenuto. Lo scorrimento resta quello vero del browser, ma per tutta l'altezza della sezione quello che si vede non si muove: cambia la SCENA. Arrivati in fondo, il contenuto si stacca e la pagina riprende da sola. La scena ha un suo orologio — `view-timeline: --scena` sulla sezione alta — e ogni passo si prende la sua fetta. Cosi' il quarto passo non e' legato a un ritardo ma a un punto della pagina: chi scorre piano li vede uno per uno, chi corre arriva in fondo e li trova tutti. Perche' e' qui e non altrove: di tutta la pagina questa e' l'unica sezione che e' davvero una SEQUENZA. Fermare la pagina per mostrare quattro cose che si leggono in parallelo sarebbe solo un ostacolo. */ #partenza { /* L'ancoraggio dello scorrimento del browser qui va spento: quando la scena si chiude, la compensazione la fa nuovo.js su un riferimento misurato, e due correzioni che non si parlano fanno saltare la pagina. */ overflow-anchor: none; /* QUANTO SI SCORRE PER OGNI PASSO NON PUO' ESSERE UNA MISURA SOLA. Una tacca di rotellina sono un centinaio di pixel; una spinta col pollice ne copre dieci volte tanti. Con un valore unico o si saltano due passi col dito, o col mouse si scorre una vita per vederne uno — e il titolare le ha incontrate tutte e due, in quest'ordine. L'altezza vera la decidono le media query qui sotto: 240vh col mouse, 340 col dito. E i passi da rivelare sono TRE, non quattro: il primo c'e' gia' quando arrivi. */ min-height: 340vh; padding-block: 0; view-timeline: --scena block; } #partenza > .dentro { position: sticky; top: 0; /* svh e non vh: su iOS la barra degli indirizzi che si ritira cambia vh a meta' gesto, e la scena saltella. */ min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: 32px; } /* I passi, uno alla volta. Su schermo largo restano accesi — stanno in riga e si confrontano; sul telefono, dove sono in colonna e non ci starebbero mai tutti e quattro, ognuno lascia il posto al prossimo. */ #partenza .passo { animation: passo-arriva linear both; animation-timeline: --scena; } @keyframes passo-arriva { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } } /* IL PRIMO PASSO C'E' GIA'. «se no mi trovo davanti a una schermata vuota e non capisco come mai» — ed e' precisamente cosi': una scena che si apre sul niente non si legge come «sta per succedere qualcosa», si legge come una pagina rotta, e chi non insiste a scorrere se ne va. Il primo passo e' anche quello che spiega cos'e' la sezione: deve esserci all'arrivo. */ #partenza .passo:nth-child(1) { animation: none; opacity: 1; transform: none; } /* Le fette degli altri tre stanno dentro alle media query — TUTTE E DUE, mai una sola: un passo senza intervallo suo si prende quello di serie (l'intera scena) e sale insieme agli altri. Ci sono gia' cascato stamattina. */ @media (min-width: 981px) { /* COL MOUSE SI SCORRE MENO. 240vh di sezione fanno 140 di finestra bloccata per tre passi: una quarantina di vh ciascuno, cioe' tre o quattro tacche di rotellina. Con 460 ce ne volevano venti a passo, e infatti sembrava di non arrivare mai. */ #partenza { min-height: 240vh; } #partenza .passo:nth-child(2) { animation-range: cover 34% cover 42%; } #partenza .passo:nth-child(3) { animation-range: cover 46% cover 54%; } #partenza .passo:nth-child(4) { animation-range: cover 58% cover 66%; } #partenza .passi-nota, #partenza .passi-azione { animation-range: cover 64% cover 70%; } /* Il metro fra un'icona e l'altra si riempie NEGLI INTERVALLI: prima arriva il passo, poi la linea lo collega al prossimo. E' l'ordine in cui si racconta, non una decorazione in piu'. */ #partenza .passo::before { transition: none; /* la transizione di sito.css litigherebbe */ transform-origin: left center; animation: passo-metro linear both; animation-timeline: --scena; } #partenza .passo:nth-child(1)::before { animation-range: cover 30% cover 34%; } #partenza .passo:nth-child(2)::before { animation-range: cover 42% cover 46%; } #partenza .passo:nth-child(3)::before { animation-range: cover 54% cover 58%; } @keyframes passo-metro { from { transform: scaleX(0); } to { transform: scaleX(1); } } } /* ── Sul telefono: SI ACCUMULANO, non si scacciano ───────────────────── Il titolare: «ogni scroll aggiunge un pezzo ma lasciando visibili i precedenti». Ha ragione, ed e' il motivo per cui prima non andava: quattro passi che si danno il cambio nello stesso riquadro non sono una sequenza che si costruisce, sono quattro diapositive — e alla fine non ti resta niente sotto gli occhi. Per farceli stare tutti e quattro in una schermata la scheda si stringe: il segno va di fianco invece che sopra, e i corpi scendono di un gradino. Si perde un po' d'aria, si guadagna di vederli insieme — che e' il punto della sezione. */ @media (max-width: 980px) { /* Col dito si scorre di piu': 340vh di sezione fanno 240 di finestra per tre passi, ottanta ciascuno. Una spinta, un passo. */ #partenza .passo:nth-child(2) { animation-range: cover 30% cover 40%; } #partenza .passo:nth-child(3) { animation-range: cover 46% cover 56%; } #partenza .passo:nth-child(4) { animation-range: cover 62% cover 72%; } #partenza .passi-nota, #partenza .passi-azione { animation-range: cover 70% cover 76%; } #partenza:not(.scena-fatta) .passi { grid-template-columns: 1fr; gap: 14px; } /* TRE RIGHE, NON DUE CELLE E DUE MARGINI. Qui avevo messo l'etichetta e il titolo nella STESSA area di griglia e provato a scostarli con un margine. Due elementi nella stessa cella si sovrappongono, punto: il margine sposta il blocco, non lo toglie di sotto all'altro. Sul telefono si leggeva «UN MINUTO, O TRENTA» stampato sopra «Scegli il pacchetto». Ognuno la sua riga, e il segno che le attraversa tutte. Nessun margine magico da riaggiustare se un domani il testo cresce. */ #partenza:not(.scena-fatta) .passo { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: start; text-align: left; padding-top: 0; } #partenza:not(.scena-fatta) .passo-marca { grid-column: 1; grid-row: 1 / span 3; width: 44px; height: 44px; margin: 0; border-radius: 13px; } #partenza:not(.scena-fatta) .passo-chi { grid-column: 2; grid-row: 1; margin: 0 0 5px; justify-self: start; } #partenza:not(.scena-fatta) .passo h3 { grid-column: 2; grid-row: 2; margin: 0 0 4px; font-size: 16.5px; } #partenza:not(.scena-fatta) .passo p { grid-column: 2; grid-row: 3; margin: 0; font-size: 13.5px; line-height: 1.45; } /* Il metro collegava due colonne affiancate: in colonna non collega nulla. */ #partenza:not(.scena-fatta) .passo::before, #partenza:not(.scena-fatta) .passo::after { content: none; } #partenza:not(.scena-fatta) .passo li::before { top: 4px; } } /* La riga sull'assistenza e i due inviti arrivano quando la sequenza e' finita: prima sarebbero una distrazione nel mezzo di un racconto. */ #partenza .passi-nota, #partenza .passi-azione { animation: passo-arriva linear both; animation-timeline: --scena; } /* ── FINITA UNA VOLTA, FINITA ───────────────────────────────────────── «l'animazione e' finita se torno su e giu'. no?» — si', ed e' la differenza fra legare un'animazione alla POSIZIONE (reversibile: risali e si smonta) e farla succedere UNA VOLTA. Un racconto che si riavvolge ogni volta che torni indietro non e' un racconto, e' un ostacolo: hai gia' letto, e ti tocca riscorrere. nuovo.js mette .scena-fatta quando la sezione e' stata attraversata tutta, e da li' in poi questa torna una sezione normale: altezza vera, niente blocco, i quattro passi tutti in vista. Risalendo si vede il risultato, non di nuovo il meccanismo. */ #partenza.scena-fatta { min-height: 0; padding-block: 96px; } #partenza.scena-fatta > .dentro { position: static; min-height: 0; display: block; padding-block: 0; } #partenza.scena-fatta .passo, #partenza.scena-fatta .passo::before, #partenza.scena-fatta .passi-nota, #partenza.scena-fatta .passi-azione { animation: none; opacity: 1; transform: none; } /* ── 6d · I pacchetti salgono sfalsati ─────────────────────────────────── Quattro colonne che arrivano tutte insieme sono un muro. Sfalsate di un soffio si leggono da sinistra a destra, che e' l'ordine in cui sono pensate — dal piu' piccolo al piu' grande. */ @media (min-width: 981px) { .piano { animation: sale linear both; animation-timeline: view(block); } .piano:nth-child(1) { animation-range: entry 0% cover 34%; } .piano:nth-child(2) { animation-range: entry 4% cover 38%; } .piano:nth-child(3) { animation-range: entry 8% cover 42%; } .piano:nth-child(4) { animation-range: entry 12% cover 46%; } @keyframes sale { from { transform: translate3d(0, 46px, 0); opacity: .35; } to { transform: none; opacity: 1; } } } } /* ───────────────────────────────────────────────────────────────────────── 7 · DETTAGLI ───────────────────────────────────────────────────────────────────────── */ /* La riga sotto la parola accesa del titolo toccava le lettere. Un sottolineato che sfiora la base del carattere non si legge come un accento, si legge come un errore di impaginazione. */ .apertura-testa h1 em::after, h1 em::after { bottom: -.1em; } /* LA PASTIGLIA SOLO DOVE SITO.CSS LA VUOLE. Sotto i 560 quel foglio la SPEGNE apposta (background:none, border:0) — ci erano gia' arrivati il 28/09: una pastiglia che va a capo non e' piu' larga quanto il suo contenuto, si prende tutta la riga, e diventa un rettangolone alto due righe che da lontano sembra un pezzo di pagina rotto. Rimettendole il fondo senza media query gliel'ho riacceso: la mia regola arriva dopo e vince anche dentro la loro. Un foglio sovrapposto non eredita le eccezioni di quello sotto — le deve ripetere. */ @media (min-width: 561px) { .occhiello { background: var(--carta); border-color: var(--bordo); } } .occhiello b { color: var(--inchiostro); } .occhiello i { color: var(--tenue); } .monitor { border: 1px solid var(--scocca-bordo); } .monitor-barra i { background: rgba(147, 166, 162, .22); } /* ── I QUATTRO PASSI ─────────────────────────────────────────────────────── Due difetti, stessa radice: ho reso traslucidi dei token che in quel componente servivano PIENI. 1 · IL METRO PASSAVA ATTRAVERSO LE ICONE. Il commento di sito.css lo dice in chiaro — «l'alone bianco lo stacca dal metro che gli passa dietro» — e quell'alone e' un box-shadow di 6px fatto con --carta. Io --carta l'ho messo al 93% di opacita': un alone trasparente non nasconde la linea, la mostra. E lo stesso valeva per il fondo dell'icona, che era --verde-velo, anche lui traslucido: la riga verde si vedeva passare dentro al quadrato. Qui servono due colori PIENI, e il colore giusto non e' quello della scheda ma quello della PAGINA: e' sopra alla pagina che corre il metro. 2 · LE ETICHETTE ERANO ILLEGGIBILI. «UN MINUTO, O TRENTA», «MEZZ'ORA»: in sito.css sono #1f7a6b, un verde cupo scelto misurandolo su un velo verde CHIARO (4,70:1, e c'e' scritto che non e' stato scelto a occhio). Su fondo scuro quello stesso verde fa poco piu' di 2:1. Si ribalta: fondo appena acceso, testo verde chiaro. */ .passo-marca { background: #122320; color: var(--verde); box-shadow: 0 0 0 6px var(--fondo), 0 8px 18px -10px rgba(0, 0, 0, .7); } .passo-numero { box-shadow: 0 0 0 3px var(--fondo); } .passo-chi { background: rgba(51, 181, 165, .15); color: #7FD9CC; /* 9,6:1 sul fondo: si legge da lontano */ } .passo-chi.tuo { background: rgba(147, 166, 162, .14); color: var(--inchiostro-2); } .passo h3 { color: var(--inchiostro); } .passo p { color: var(--inchiostro-2); } /* ── Contrasti rimasti sotto soglia (misurati con Playwright, 09/10/2026) ─── Tre dei nove che il controllo segnalava erano falsi suoi: il titolo col gradiente ritagliato (color: transparent per forza) e le etichette del deviatore mensile/annuale, che stanno sopra un cursore verde — un FRATELLO, non un antenato, e un controllo che risale solo gli antenati non lo vede. Questi sei invece sono veri. */ /* MIO: verde scuro pensato per fondo chiaro, su nero fa 2,67. */ .uno-occhiello { color: var(--verde); } /* MIO: stesso grigio che a luglio era gia' stato scartato a 4,48 per le voci assenti dei piani, e qui era rimasto sui prezzi sbarrati. Stesso rimedio. */ .piano-prezzo .p-prima { color: #7E918D; } /* NON MIO, viene dal sito vero: bianco su --verde-cupo fa 3,33 e su --tinta-cupa 3,65, sotto la soglia di 4,5 che vale per undici-dodici pixel in grassetto (per WCAG «testo grande» parte da 18,66). Scurire il verde di un gradino tiene il bianco e porta il rapporto sopra 5: il colore del marchio resta, cambia la tonalita' del fondino. Da portare anche nel sito vero, dove il difetto c'e' identico. */ .occhiello b { background: var(--verde-scuro); } .piano-badge { background: color-mix(in srgb, var(--tinta-cupa) 72%, #04110F); } /* I PACCHETTI AL PASSAGGIO DEL MOUSE. sito.css disegna il bordo col trucco dei due sfondi (padding-box sopra, border-box sotto), e il colore di riposo del bordo e' #e9e7e0 scritto a mano: un beige da fondo chiaro, che su nero diventa un anello luminoso intorno alla scheda. La regola normale la sovrascrivo gia' piu' su, ma quella di :hover no — e il difetto compariva solo passandoci sopra, cioe' dove nessuno lo cerca. */ @media (hover: hover) and (pointer: fine) { .piano:hover { background: var(--carta); border-color: color-mix(in srgb, var(--verde) 50%, transparent); box-shadow: 0 3px 8px rgba(0, 0, 0, .4), 0 26px 54px -18px rgba(51, 181, 165, .3); } } /* Il pulsante vuoto su fondo chiaro era un bordo scuro su bianco; qui va rovesciato, o sparisce. */ .bottone.vuoto { background: var(--carta); color: var(--inchiostro); border-color: var(--bordo); } .bottone.vuoto:hover { background: rgba(255, 255, 255, .08); } /* I campi del modulo: su fondo scuro un input bianco e' un buco di luce. */ input[type="text"], input[type="tel"], input[type="email"], textarea, select { background: rgba(0, 0, 0, .3); border-color: var(--bordo); color: var(--inchiostro); } input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--tenue) 70%, transparent); } /* IL PIEDE DI PAGINA NON DEVE ESSERE UN BLOCCO A PARTE. sito.css gli da' #16211f: sul chiaro e' il modo giusto di chiudere la pagina, ma qui e' un grigio piu' CHIARO del fondo, quindi diventava una fascia netta che taglia il disegno — un cambio di colore che non vuol dire niente. Il campo passa anche dietro al piede e la chiusura la fa un filo, non un rettangolo. */ .piede { background: transparent; border-top: 1px solid var(--bordo); color: var(--inchiostro-2); } .piede a { color: var(--inchiostro-2); } .piede a:hover { color: var(--inchiostro); } .piede-nota { color: var(--tenue); border-top-color: var(--bordo); } /* Il pulsante che resta sotto il pollice sul telefono. */ .cta-fissa { background: color-mix(in srgb, var(--fondo) 92%, transparent); border-top: 1px solid var(--bordo); } /* ───────────────────────────────────────────────────────────────────────── 8 · CHI HA CHIESTO MENO MOVIMENTO ───────────────────────────────────────────────────────────────────────── Tutto fermo, e niente fuori posto. Il campo di pressione nuovo.js lo disegna una volta sola e si ferma: resta l'immagine, se ne va l'animazione — che e' la richiesta, non "togli la grafica". */ @media (prefers-reduced-motion: reduce) { /* NIENTE SCENA BLOCCATA a chi ha chiesto meno movimento: una pagina che smette di scendere e' esattamente il tipo di cosa che da fastidio a chi soffre il movimento. Torna una sezione normale, coi quattro passi tutti visibili e nessuna altezza finta da attraversare. */ #partenza { min-height: 0; padding-block: 96px; } #partenza > .dentro { position: static; min-height: 0; display: block; padding-block: 0; } #partenza .passi > .passo { grid-column: auto; grid-row: auto; } .passo, .passo::before, #partenza .passi-nota, #partenza .passi-azione { animation: none; opacity: 1; transform: none; } .apertura-schermo .monitor, .dettaglio > *, .monitor-coppia > *, .piano { animation: none; transform: none; opacity: 1; } } /* ═══════════════════════════════════════════════════════════════════════════ 9 · LE ALTRE PAGINE — prova.css e legale.css (09/10/2026) ═══════════════════════════════════════════════════════════════════════════ La veste e' nata sulla landing; qui copre il resto del sito: le sei pagine di prova/acquisto/attivazione (prova.css) e le quattro legali, che passano tutte da lib-legale.php (legale.css). Sono quasi tutte scritte su variabili, quindi si sono girate da sole quando ho ridefinito i token. Restano tre categorie di punti da sistemare a mano, e sono sempre le stesse tre — vale la pena saperle a memoria: a) i COLORI SCRITTI A MANO (#fff e compagnia), che nessuna variabile raggiunge; b) i `var(--x, #ripiego)` dove il token NON ESISTE: sul sito chiaro il ripiego andava bene e nessuno se n'era accorto, qui il ripiego e' chiaro e sballa. Si definisce il token, una volta, e si sistemano tutti insieme; c) i token di TESTO usati come SFONDO. `--inchiostro` sul chiaro e' quasi nero e legale.css lo usa per la fascia scura della testata; nella veste e' il colore del testo, cioe' chiarissimo — e quella fascia diventava bianca con sopra scritto in bianco. ═══════════════════════════════════════════════════════════════════════════ */ /* (b) I token che prova.css si aspettava e che non c'erano. */ :root { --velo: rgba(255, 255, 255, .05); --fondo-campo: rgba(0, 0, 0, .30); --bordo-campo: var(--bordo); } /* ── Le pagine di prova, acquisto e attivazione ──────────────────────────── */ /* I campi: su fondo scuro un input chiaro e' un buco di luce, e --grigio nella veste e' trasparente (serviva a spegnere le fasce), quindi senza questo il campo non si vedrebbe proprio. */ .pv-campo { background: var(--fondo-campo); border-color: var(--bordo); color: var(--inchiostro); } .pv-campo:focus { background: rgba(0, 0, 0, .42); box-shadow: 0 0 0 3px rgba(51, 181, 165, .22); } /* L'errore: rosso leggibile sullo scuro, non il rosa da fondo bianco. */ .pv-campo.male { border-color: #E8603C; background: rgba(232, 96, 60, .13); } .pv-campo::placeholder { color: color-mix(in srgb, var(--tenue) 70%, transparent); } .cassa-avvio { background: var(--velo); border-color: var(--bordo); } .avvio-offerta { background: color-mix(in srgb, var(--verde) 13%, transparent); border-color: color-mix(in srgb, var(--verde) 34%, transparent); } .campo-dominio { background: var(--fondo-campo); border-color: var(--bordo); } .campo-dominio-coda { background: var(--velo); border-left-color: var(--bordo); } /* ── Le pagine legali ────────────────────────────────────────────────────── */ /* (c) Qui `--inchiostro` faceva da fondo scuro della testata. Nella veste e' il colore del testo: la fascia diventava chiara col testo bianco sopra. */ .lg-testata { background: var(--fondo-alto); border-bottom: 1px solid var(--bordo); } .lg-corpo { background: transparent; } /* I riquadri e le tabelle stavano su --crema e --verde-nebbia, che nella veste sono trasparenti: senza un fondo loro diventavano testo nudo sul disegno. */ .lg-riquadro, .lg-tabella th { background: var(--carta); border-color: var(--bordo); } .lg-nota { background: color-mix(in srgb, var(--verde) 11%, transparent); border-color: color-mix(in srgb, var(--verde) 26%, transparent); } .lg-indice { background: var(--carta); border-color: var(--bordo); } .lg-tabella td, .lg-tabella th { border-color: var(--bordo); } .lg-testo a, .lg-indice a:hover { color: var(--verde); } .lg-testo h2, .lg-testo h3, .lg-testo strong, .lg-tabella td:first-child { color: var(--inchiostro); } .lg-testo, .lg-sotto { color: var(--inchiostro-2); } /* In stampa la veste non c'entra: sulla carta il fondo e' bianco e basta. */ @media print { .veste-campo { display: none !important; } .lg-testata, .lg-corpo, .lg-riquadro, .lg-indice { background: #fff !important; } .lg-testo, .lg-sotto, .lg-testo h2, .lg-testo h3 { color: #000 !important; } } /* ── Due cose trovate dal controllo automatico sulle nove pagine ─────────── */ /* IL VELO DEL MENU ERA CHIARO. Aprendo il menu sul telefono, sito.css stende un velo quasi bianco sopra la pagina (serviva a smorzare un sito chiaro); qui faceva un lampo di luce in mezzo al buio, e per di piu' proprio mentre uno sta cercando una voce. Stessa funzione, colore opposto. */ .menu-velo { background: rgba(4, 9, 8, .62); } @media (max-width: 760px) { .menu-velo { background: rgba(4, 9, 8, .72); } } /* La terza scheda della fascia verde aveva un fondo suo, scritto a mano col bianco al 13% per staccarsi dal verde pieno. Il verde pieno non c'e' piu', e quella scheda restava diversa dalle altre due senza motivo. */ .accento:nth-child(3) { background: var(--carta); border-color: var(--bordo); } /* I verdi dei link e dei dettagli: --verde-cupo e' tarato per fondo chiaro e sullo scuro fa 3,64. Sulle pagine di acquisto e benvenuto e' il colore dell'indirizzo email a cui scrivere quando qualcosa non va — cioe' proprio quello che deve leggersi. */ .pv-piede a, .pv-q-segno, .pv-risparmio, .pv-occhiello, .vicolo a, .bv-scheda a { color: var(--verde); } /* ═══════════════════════════════════════════════════════════════════════════ 10 · LE SCHEDE DEI PACCHETTI IN FONDO ALL'INTERVISTA (10/10/2026) ═══════════════════════════════════════════════════════════════════════════ Segnalato da iPhone: «nero su nero non si vede nulla». Erano tre cose diverse nello stesso punto, e vale la pena tenerle distinte perche' si ripresentano sempre uguali. 1 · L'ORDINE DEI FOGLI. Su quattro pagine — prova, attiva, basta, perche — prova.css veniva caricato DOPO la veste, e a parita' di specificita' vinceva lui. Un overlay che non e' l'ultimo non e' un overlay: adesso la riga della veste sta in fondo su tutte e otto le pagine. 2 · LA CAUSA DEL NERO SU NERO non era qui ma in sito.css: `.v-anno` senza `.periodo` davanti colorava di quasi-nero tutto il sito, e l'intervista riusa quel nome per la versione annuale del prezzo. Corretto alla sorgente — il prezzo adesso eredita il colore del testo come tutto il resto, e non c'e' niente da riscrivere qui. 3 · LE TINTE DEI QUATTRO PACCHETTI, che e' quello che si vede adesso. prova.css usa come `--tinta` gli stessi quattro colori che la landing chiama `--tinta-cupa`: tarati per stare su una scheda bianca, dove devono essere scuri per leggersi. Qui la scheda e' scura e vanno all'incontrario — «Enterprise» faceva 3,27. Non ne invento di nuovi: prendo quelli che la landing usa gia' sul fondo scuro per gli stessi quattro nomi (--tinta, sito.css:1721-1724). Stessi pacchetti, stessi colori, due pagine. ═══════════════════════════════════════════════════════════════════════════ */ .pv-piano:nth-child(1) { --tinta: #8FD9CC; } .pv-piano:nth-child(2) { --tinta: #45CBB4; } .pv-piano:nth-child(3) { --tinta: #FFC46B; } .pv-piano:nth-child(4) { --tinta: #B79CFF; } /* L'etichetta «Consigliato per te» sta SOPRA la tinta, non dentro: col colore chiaro nuovo, il bianco di prova.css sopra ci faceva 1,6. Scuro sulla tinta, come il «Piu' venduto» della landing. */ .pv-etichetta-scelto { color: #04110F; } /* --verde-scuro resta quello del sito chiaro (1c6d60): sullo scuro fa 2,98. E' il colore dei mesi in regalo e del titolo della garanzia — due cose che esistono per essere lette. */ .pv-anno b, .pv-patto h2, .pv-motivi b, .cassa-patto b { color: var(--verde); } /* Gli ultimi due --verde-scuro / --verde-cupo rimasti sulla cassa, trovati dal controllo del contrasto con l'annuale scelto (e' il caso in cui il bollo del risparmio compare, e prima non l'avevo guardato). */ .avvio-solo-adesso strong { color: var(--verde); } /* Il bollo «Risparmi …»: bianco su --verde-cupo fa 3,64, e sono dodici pixel e mezzo. Scuro sul verde chiaro — come il «Piu' venduto» dei pacchetti. */ .avvio-bollo { background: var(--verde); color: #04110F; }