: così lo strato di uscita (`.uscita`, più sotto) può essere posizionato a `inset: 0` dentro

e coincidere al pixel con la schermata che sta entrando. Con il margine su

sarebbe risultato spostato di 18 px a ogni cambio. */ main { padding: 0; position: relative; } /* Il margine di fondo è SOLO il respiro fra l'ultima card e la barra delle schede: l'ingombro della barra è già in `body`. Erano 34 px e sommati ai 68 della barra facevano oltre cento pixel di vuoto scorribile sotto l'ultima riga di ogni schermata — si scorreva e non arrivava più niente. */ .schermata { display: none; padding: 14px 18px 16px; } .schermata.attiva { display: block; } /* Caricamento iniziale ed errori vengono messi direttamente in

. */ #vista > .caricamento, #vista > .vuoto { margin: 14px 18px; } /* L'intestazione arriva un soffio prima del corpo: dà il senso della gerarchia. SI MUOVE NELLA STESSA DIREZIONE DEL CORPO, non più verso il basso. Prima la testata scendeva di 10 px mentre la schermata entrava di lato: due movimenti ortogonali nello stesso istante si leggono come uno scatto, non come una transizione. Con la stessa `--verso-x` (dimezzata, perché la testata è più vicina all'occhio e un movimento pieno sembrerebbe eccessivo) testata e contenuto arrivano da destra o da sinistra insieme: il gesto è uno solo. */ #cima > .intesta { animation: entra-schermata var(--t-veloce) var(--e) both; } @keyframes entra-schermata { from { opacity: 0; transform: translate3d(calc(var(--verso-x) * .5), 0, 0); } to { opacity: 1; transform: none; } } /* Aggiornamento dell'intestazione al cambio giorno: mai un lampeggio bianco, solo un cambio di quota di pochi pixel. */ .intesta.cambia { animation: cambia-testa var(--t-veloce) var(--e) both; } @keyframes cambia-testa { from { opacity: .25; transform: translateY(-5px); } to { opacity: 1; transform: none; } } /* ---------- CAMBIO DI SCHERMATA (direzionale) ---------- Le schede hanno un ordine — Oggi, Scheda, Dieta, Progressi, Altro — e quindi hanno una posizione nello spazio: spostandosi verso destra nella barra la schermata nuova entra da destra, tornando indietro entra da sinistra. È l'unica cosa che, senza leggere niente, dice al dito in che direzione si è mosso. `--verso-x` è la sola manopola: le animazioni la leggono e basta. Si animano SOLO `transform` e `opacity`: nessun ricalcolo di layout, tutto sul compositore, 60 fps anche mentre la schermata nuova finisce di montarsi. Nessuna istantanea, nessun top layer: l'impilamento resta quello normale del documento e la barra delle schede (z-index 40) sta sopra per costruzione. Vedi il commento esteso in js/app.js per il perché non si usano le View Transitions. */ :root { --verso-x: 22px; } html[data-verso="indietro"] { --verso-x: -22px; } .schermata.attiva { animation: sch-entra var(--t) var(--e) both; } @keyframes sch-entra { from { opacity: 0; transform: translate3d(var(--verso-x), 0, 0); } to { opacity: 1; transform: none; } } /* Quando le card arrivano a cascata la schermata rinuncia alla propria dissolvenza (sarebbe una seconda opacità sopra quella delle card) e tiene solo lo scorrimento laterale, che è ciò che comunica la direzione. */ .schermata.attiva.con-cascata { animation-name: sch-entra-piano; } @keyframes sch-entra-piano { from { transform: translate3d(var(--verso-x), 0, 0); } to { transform: none; } } /* ---------- I BLOCCHI CONDIVISI NON SI MUOVONO, PUNTO ---------- Scheda e Dieta sono due viste dello stesso giorno e mostrano gli STESSI elementi in cima: la riga della settimana e la striscia dei sette giorni. Passando dall'una all'altra quegli elementi non cambiano — quindi non devono nemmeno spostarsi. Prima scorrevano di 22 px insieme al resto della schermata, e in mezzo alla transizione erano l'unica cosa che l'occhio poteva agganciare: si leggeva come uno scatto, non come un cambio di sezione. COME. Il blocco dichiara `data-fisso` (js/vistagiorno.js) e riceve l'animazione ESATTAMENTE INVERSA di quella della schermata: stessa durata, stessa curva, stesso valore cambiato di segno. Le due trasformazioni si compongono a ogni fotogramma e la somma è zero — non «quasi zero»: zero, in ogni istante, perché a interpolare è la stessa funzione. E poiché una dissolvenza non si può annullare allo stesso modo (l'opacità si moltiplica, non si somma), una schermata che contiene blocchi fissi rinuncia alla propria dissolvenza e tiene solo lo scorrimento: la classe `con-fissi` la mette js/app.js quando trova un `data-fisso`. */ .schermata.attiva.con-fissi { animation-name: sch-entra-piano; } .schermata.attiva [data-fisso] { animation: sch-resta var(--t) var(--e) both; } @keyframes sch-resta { from { transform: translate3d(calc(var(--verso-x) * -1), 0, 0); } to { transform: none; } } /* Strato della schermata che se ne va: ritagliato all'altezza dello schermo (`overflow: clip` non crea un contenitore di scorrimento, quindi la pagina continua a scorrere normalmente e le barre appiccicate restano tali) e senza eventi, così un tocco durante l'uscita colpisce già la schermata nuova. PERCHÉ `fixed` E NON PIÙ `absolute` (il salto fra Scheda e Dieta). Le testate delle schermate NON sono alte uguale — misurate: Oggi 127 px, Scheda 185, Dieta 190, Progressi 84 — perché il contenuto è diverso davvero (un titolo di seduta su due righe, una riga di pillole che va a capo). Con lo strato ancorato a `main`, cambiare testata spostava anche LUI: la schermata che stava uscendo scivolava in giù di 5 px passando da Scheda a Dieta, e di 58 px passando da Oggi a Scheda — e quello scatto, dipinto sopra tutto per 110 ms, era esattamente il «salto» segnalato. Fissato alla finestra, e piazzato da js/app.js alle coordinate che la vista aveva PRIMA del cambio, lo strato non si muove di un pixel: la schermata vecchia sfuma esattamente dov'era, la nuova arriva di lato con la sua testata. Nessuno dei due contenuti «scatta» di posizione. `top`, `left`, `width` e `height` sono scritti inline: sono misure, non stile. Ancorato alla finestra non contribuisce più nemmeno all'area scorribile: la pagina non si allunga per 110 ms sotto l'ultima card. */ .uscita { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; /* `hidden` è la riserva per Safari 15 e precedenti, che non conoscono `clip` e scarterebbero la riga; `clip` è preferibile perché non crea un contenitore di scorrimento. Lo strato vive 110 ms, quindi anche la riserva è innocua. */ overflow: hidden; overflow: clip; pointer-events: none; z-index: 1; } /* Uscita RAPIDA (110 ms) contro entrata distesa (250 ms): è la «dissolvenza attraverso» dei sistemi operativi. Farle durare uguale significa avere due schermate diverse al 50% di opacità nello stesso istante — e due schermate dense sovrapposte non sono un effetto, sono confusione. Così la vecchia sgombra subito e la nuova arriva su fondo pulito. */ .uscita > .schermata.esce { animation: sch-esce var(--t-lampo) var(--e) both; } @keyframes sch-esce { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(calc(var(--verso-x) * -.55), 0, 0); } } @media (prefers-reduced-motion: reduce) { .schermata.attiva, .schermata.attiva [data-fisso], .uscita > .schermata.esce, #cima > .intesta, .intesta.cambia { animation: none; } } .sez-tit { font-size: var(--f-s); font-weight: var(--peso-forte); letter-spacing: -.01em; color: var(--txt); margin: var(--sp-5) 4px var(--sp-2); display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); } /* Titolo e coda possono essere entrambi lunghi: nessuno dei due deve mai costringere l'altro a incolonnarsi una parola per riga. */ .sez-tit > span:first-child { min-width: 0; overflow-wrap: break-word; } .sez-tit:first-child { margin-top: 4px; } /* Avanzamento vivo della seduta: «4/7 esercizi · 12/21 serie». Sta nel titolo di sezione perché è la risposta a «quanto manca?» e deve trovarsi dove l'occhio già passa scorrendo, non in un riquadro in più. */ .avanz-seduta { letter-spacing: -.01em; transition: color var(--t) var(--e); } .avanz-seduta.piena { color: var(--ok-txt); } .sez-tit .sez-fine { display: flex; align-items: baseline; gap: var(--sp-2); flex: 0 1 auto; min-width: 0; } /* ---------- BARRA DI NAVIGAZIONE ---------- */ .tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--max-w); z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--sup); border-top: 1px solid var(--bordo); box-shadow: var(--ombra-alta); padding-bottom: var(--safe-bot); } .tabbar button { min-height: var(--tab-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--txt-3); font-size: 10.5px; font-weight: var(--peso-forte); letter-spacing: .04em; position: relative; /* `transform` va elencato qui o la scalatura al tocco della regola generale scatterebbe di colpo invece di seguire la stessa curva di tutto il resto. */ transition: color var(--t-tocco) var(--e), transform var(--t-tocco) var(--e); } .tabbar button svg { width: 23px; height: 23px; transition: transform var(--t-molla) var(--e-molla); } .tabbar button[aria-current="page"] { color: var(--txt); } .tabbar button[aria-current="page"] svg { transform: translateY(-2px) scale(1.1); } .tabbar button:active svg { transform: scale(.88); } /* ---------- CURSORE DELLA SCHEDA ATTIVA ---------- Una pillola sola che SCORRE da una voce all'altra, invece di cinque punti che si accendono e si spengono. È il dettaglio che lega il tocco alla transizione: la pillola parte nel frame del `pointerdown` (js/app.js), la schermata arriva subito dopo dalla stessa parte, e il gesto sembra uno. `--tab-i` è l'indice della scheda attiva, scritto da js/app.js; la larghezza del 20% è una delle cinque colonne della griglia. */ .tab-cursore { position: absolute; top: 6px; left: 0; width: 20%; height: 3px; display: flex; justify-content: center; pointer-events: none; transform: translate3d(calc(var(--tab-i, 0) * 100%), 0, 0); } /* La transizione si accende solo dopo il primo posizionamento: all'apertura dell'app la pillola deve essere già sotto la scheda giusta, non arrivarci scivolando da «Oggi». */ .tabbar.pronta .tab-cursore { transition: transform var(--t-molla) var(--e-molla); } .tab-cursore i { display: block; width: 26px; height: 3px; border-radius: var(--r-pill); background: var(--grad-caldo); /* Un alone appena percettibile: sul nero della barra una pillola di 3 px senza luce si legge come una riga stampata, non come un indicatore acceso. */ box-shadow: 0 0 10px -1px color-mix(in srgb, var(--acc) 75%, transparent); } /* ---------- SCORRIMENTO CONTINUO SULLE SCHEDE ---------- Il dito appoggiato sulla barra la percorre e attraversa le sezioni in anteprima (js/app.js). Tutto ciò che si muove qui sotto è `transform` o `opacity`: il gesto deve restare a 60 fps mentre il dito è ancora giù. `touch-action: none` sulla barra è ciò che rende il gesto POSSIBILE: senza, il browser interpreta lo scorrimento orizzontale come uno scorrimento della pagina e ruba il pointer a metà strada. La barra non ha nulla da scorrere, quindi non si toglie nessuna funzione. */ .tabbar { touch-action: none; } /* Durante il gesto la pillola smette di inseguire con la molla e incolla il dito: una molla che rincorre un dito che si muove sembra elastico rotto. */ .tabbar.scorre .tab-cursore { transition: transform var(--t-veloce) linear; } .tabbar.scorre button svg { transition: none; } /* La targhetta con il nome della destinazione: compare sopra la barra solo durante lo scorrimento. È l'unica cosa che dice DOVE si sta andando prima di arrivarci, ed è ciò che permette di non disegnare cinque schermate. */ .tab-anteprima { position: absolute; bottom: calc(100% + 10px); left: 50%; padding: 7px 16px; border-radius: var(--r-pill); background: var(--sup-alta, var(--sup)); border: 1px solid var(--bordo-forte); box-shadow: var(--ombra-alta); color: var(--txt); font-size: var(--f-s); font-weight: var(--peso-forte); white-space: nowrap; pointer-events: none; opacity: 0; transform: translate3d(-50%, 6px, 0) scale(.94); transition: opacity var(--t-veloce) var(--e), transform var(--t-molla) var(--e-molla); } .tabbar.scorre .tab-anteprima { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); } /* La vista arretra di un soffio mentre si sceglie: dice «sotto sta per cambiare» senza costare un solo ricalcolo di impaginazione. */ .anteprima-sezione #vista { opacity: .48; transform: scale(.985); transition: opacity var(--t-veloce) var(--e), transform var(--t-veloce) var(--e); } #vista { transform-origin: 50% 30%; } /* Con il movimento ridotto resta tutto tranne il movimento: la targhetta compare senza scivolare e la vista non si ridimensiona. La funzione non si toglie mai, si toglie solo l'animazione. */ @media (prefers-reduced-motion: reduce) { .tab-anteprima { transition: none; transform: translate3d(-50%, 0, 0); } .anteprima-sezione #vista { transform: none; transition: none; } } /* L'icona della scheda attiva è accesa, non solo più chiara. */ .tabbar button[aria-current="page"] svg { filter: drop-shadow(0 3px 8px color-mix(in srgb, var(--acc) 42%, transparent)); } /* ---------- STATO VUOTO ---------- */ .vuoto { text-align: center; padding: 40px 22px; background: var(--sup); border: 1px dashed var(--bordo-forte); border-radius: var(--r); color: var(--txt-2); } /* L'icona dello stato vuoto è un SVG: eredita il colore del testo, quindi resta leggibile in entrambi i temi senza doppie regole. */ .vuoto .ic { display: flex; justify-content: center; margin-bottom: 12px; color: var(--txt-3); } .vuoto .ic svg { width: 34px; height: 34px; } .vuoto h3 { font-size: var(--f-m); font-weight: var(--peso-forte); color: var(--txt); margin-bottom: 8px; letter-spacing: -.02em; } .vuoto p { font-size: var(--f-s); line-height: 1.55; } /* Messaggio con JavaScript disattivato: unico contenuto statico dell'app. */ .senza-js { margin: 46px 18px; } /* ---------- CARICAMENTO ---------- */ .caricamento { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 80px 20px; color: var(--txt-3); } .caricamento .anello { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--velo-2); border-top-color: var(--acc); animation: gira 800ms linear infinite; } @keyframes gira { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .caricamento .anello { animation-duration: 2s; } }