A parità di CSS la barra sembrava piena su Safari e trasparente su Chrome
Android. Il colore di fondo era lo stesso sui due: la differenza veniva tutta
dal blur. WebKit rende `backdrop-filter: blur()` molto più denso e "latteo"
di Blink, e `saturate(180%)` amplificava lo scarto — con un fondo al 72%
l'aspetto dipendeva quasi solo dal filtro, cioè dalla parte su cui i due
motori non sono d'accordo.
Il materiale ora si regge sul colore (85%) e usa il blur come rifinitura: la
profondità resta, la differenza fra i due motori quasi sparisce perché pesa
molto meno. `saturate` scende a 150% per la stessa ragione.
`color-mix` passa da `in oklab` a `in srgb`: mescolare con `transparent`, che
è nero con alpha 0, dipende da come il motore premoltiplica, e in srgb è
implementato in modo molto più uniforme.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
L'altezza della barra era dedotta dai padding delle voci e poi ricopiata a
occhio altrove: `pb-24` nel contenitore delle pagine, `pb-28` nella
celebrazione badge. Su iPhone i conti tornavano per 2 px — barra ~60 px più
34 px di safe area contro 96 px riservati — quindi bastava un inset diverso
(orizzontale, o un modello con home indicator più alta) perché l'ultimo
elemento della pagina finisse sotto la barra. Solo su iOS: su Android
avanzavano 36 px.
Ora la geometria sta in due token, `--altezza-nav` e `--pad-sicura-fondo`, e
le utility `spazio-nav` e `pad-sicura-fondo` la leggono da lì. La striscia
toccabile ha altezza fissa, così misura uguale sui due sistemi e sotto varia
solo l'inset: `max(env(safe-area-inset-bottom), 0.5rem)` dà ad Android un
respiro minimo dove iOS mette la home indicator. Identiche al pixel non
possono essere — quell'inset esiste per un motivo fisico che Android non ha —
ma la differenza è ora un margine in più, non un allineamento diverso.
`100vh` diventa `100dvh` ovunque: su iOS Safari `vh` misura il viewport con la
toolbar collassata, cioè più alto di quello visibile, e le schermate a tutta
altezza risultavano più lunghe dello schermo. `dvh` segue la toolbar.
Aggiunto il ripiego per Chrome su Android, che disattiva `backdrop-filter`
senza accelerazione hardware: senza, su quei device la barra restava
semitrasparente e il contenuto si leggeva attraverso.
Resta fuori portata una differenza sola: in Safari non installata la toolbar
di sistema sta in basso e collassa allo scroll, quindi la barra si muove con
essa. Su Chrome la toolbar è in alto. Si risolve installando la PWA.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
I colori di stato non passavano WCAG AA con il testo bianco sopra: success
3.39:1, training 3.49:1, info ~3.7:1 (chip «Presente», «Allenamento», celle
del calendario). Le luminosità sono abbassate fino a superare 4.5:1.
I gradi dei badge erano il caso peggiore: `text-oro` su bianco sta a 1.9:1 e
`text-argento` a 2.5:1, cioè illeggibili. Nascono i token `--oro-testo`,
`--argento-testo` e `--bronzo-testo` per il testo, mentre le varianti chiare
restano dove servono davvero, su sfondi e bordi.
Il blocco `.dark` non veniva mai applicato — nessun interruttore, nessun
`prefers-color-scheme` — ed era anche incoerente: l'accento diventava
grigio-blu e mancavano success, warning, info, training, i metalli, i due
gradienti e le due ombre. Un tema mai attivato non si accorge di rompersi,
quindi via, con `color-scheme: light` dichiarato esplicitamente.
Nello stesso file:
- `:focus-visible` globale, prima non c'era nessuna regola di focus;
- tracking del display specifico per taglia (`font-display-sm/lg`): un solo
valore per tutte le dimensioni è sbagliato da qualche parte;
- utility `materiale` e `bordo-sfumato` per la chrome traslucida, con
`prefers-reduced-transparency` e `prefers-contrast`;
- movimento ridotto: dissolvenza breve invece dell'azzeramento di ogni
transizione, così resta un feedback che spiega cosa è cambiato;
- rimossi i token di chart e sidebar (i componenti che li usavano non ci sono
più) e l'import di tw-animate-css, che non era usato da nessuna classe.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
La classifica e lo storico partite mostravano dati inventati (squadre e
risultati finti) come base, poi sovrascritti dai dati CSI quando
disponibili. Ora classifica, ultimi risultati, storico match e obiettivi
di squadra legati alle vittorie usano solo dati reali (CSI o scout live),
con stati vuoti quando i dati CSI non sono ancora disponibili.
Include anche la correzione di tutti gli errori di formattazione
prettier segnalati da `npm run lint` sul resto del codice sorgente.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
davideandClaude Opus 5