/* ============================================================ Wanderlust: bottom bar (foglio del componente globale) ============================================================ Coppia inseparabile di `bottom-bar.js`. Vive in un file suo, non dentro `home.css`, perche' lo carica anche il pannello admin, che di `home.css` non prende nulla: e' il modo per avere davvero la stessa barra in ogni pagina invece di due ricette gemelle che divergono. Qui vivono SOLO materiale e geometria, uguali ovunque; quali icone mostrare lo decide la pagina, passando la sua lista di azioni al componente (vedi sideActions() in home.js, adminBarActions() in admin.js). Tre strati sovrapposti, tutti con la stessa sagoma: .wl-bbar-plate il vetro (backdrop-filter), ritagliato da una maschera SVG generata col path della sagoma; .wl-bbar-shape velo colorato, ombra esterna e UN SOLO bordo (niente border CSS: un bordo rettangolare sopra una sagoma ritagliata darebbe il doppio bordo); .wl-bbar-row le icone, che non sanno niente della sagoma. La tasca centrale non e' una valle disegnata a mano: e' la barra meno un cerchio piu' grande del pulsante (72 contro 54px, 9px di gap su tutto l'arco), concentrico al pulsante e raccordato al bordo alto da due archi tangenti. Le misure stanno nelle variabili qui sotto, il JS le legge e ne ricava il path: cambiare una taglia si fa da qui, in un posto solo. ============================================================ */ .wl-bbar { /* Variabili del progetto che il componente usa. Le ridichiara qui con lo stesso valore che hanno nel tema: home.css le dà solo alle viste dell'app, e admin.html non carica home.css. Chi include questo file ha la barra completa senza altre dipendenze; una pagina che definisce le proprie le sovrascrive normalmente. */ /* ---- Materiale "vetro clear" (13/8/2026) ------------------------ Ricetta di riferimento del progetto, calibrata sulla barra e da estendere poi al resto (menu, toolbar, pannelli). Tre ingredienti, ognuno con un mestiere preciso: blur(10px) diffusione. Era 40px: talmente largo da ridurre qualsiasi contenuto a una macchia uniforme, cioe' il motivo per cui "non si vedeva cosa c'e' sotto". iOS 27 ha ridotto il raggio proprio per questo. saturate(200%) e' quello che fa leggere il vetro come trasparente invece che sporco: il colore di cio' che sta sotto arriva su, invece di spegnersi nel grigio. brightness(0.78) smorzamento. Prende il posto del velo: invece di stendere una vernice piatta sopra tutto, abbassa il contenuto campionato in proporzione a quanto e' chiaro. E' cosi' che una facciata assolata non acceca le icone senza che il vetro debba diventare opaco. Apple chiede uno strato di smorzamento proprio quando si usa il materiale Clear: e' questo. Due giri, e la storia serve. Il primo (`blur(20px) saturate(180%) brightness(0.82)`, velo 0.20-0.30) era il "Regular" prescritto da Apple per le barre persistenti, scelto perche' reggeva anche sul fondo piatto della Home. Visto sul telefono vero l'utente ha chiesto di piu': questa e' la variante Clear, e il compromesso e' esplicito. Sul contenuto (Esplora, foto che scorrono) si legge cosa c'e' sotto; sulla Home, dove il fondo blueprint e' quasi piatto e sotto la barra non c'e' niente da mostrare, la barra si appoggia quasi solo al filo del bordo. Per questo i due fili (chiaro sopra, scuro fuori) sono stati alzati insieme al resto: con un velo cosi' leggero sono loro a dire dove finisce la barra. Misurato sugli scatti (scripts/glass-lab.mjs --vivo): della struttura che sta sotto la barra ne sopravvive il 18% (era il 12% con blur 40 e velo 0.50-0.68, il 15% col Regular) e il contrasto peggiore tra icone e vetro resta 5.4:1, sopra il minimo di 3:1 per un elemento di interfaccia (WCAG 1.4.11). Chi tocca questi valori rifaccia quella misura: il vetro e' bello finche' le icone restano leggibili sul caso peggiore, non sul fondo comodo della Home. Sullo smorzamento si e' tornati due volte: 0.82 col Regular, 0.68 al primo Clear, 0.78 adesso. E' la manopola della trasmissione (quanto del fondo arriva in superficie): 0.30 a 0.68, 0.41 a 0.78, misurata con scripts/glass-transmittance.mjs. Il blur invece e' la manopola del dettaglio, cioe' se sotto si riconosce qualcosa o si vede solo una macchia di colore. Due manopole diverse: prima di girarne una, sapere quale delle due cose non va. */ --wl-glass-blur: blur(10px) saturate(200%) brightness(0.78); --wl-accent: #e2652b; --wl-sans: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif; /* Geometria, letta da bottom-bar.js via getComputedStyle. */ --wl-bbar-h: 64px; --wl-bbar-corner: 32px; /* Pulsante centrale, terzo giro con l'utente (12/8): 66 -> 60 -> 54px. Ogni volta il glifo dentro e' cresciuto invece di rimpicciolirsi: e' l'aria attorno che si toglie, non il disegno. Il monogramma occupa ora il 78% del diametro contro il 67% di due giri fa. La tasca segue sempre il pulsante, 9px di gap tutt'intorno: 54 + 2x9 = 72. */ --wl-bbar-center-size: 54px; --wl-bbar-cutout-size: 72px; --wl-bbar-fillet: 12px; /* Riquadro delle icone laterali per i glifi non elencati piu' sotto: quelli noti hanno una taglia propria, misurata (vedi .wl-bbar-btn svg). */ --wl-bbar-ic: 31px; /* Apertura reale della tasca: riscritta dal JS ad ogni ridisegno, questo e' solo il valore prima del primo calcolo. */ --wl-bbar-notch-w: 93px; /* Materiale: dark navy in vetro, la stessa famiglia del resto dell'app (--wl-glass-blur e' condiviso con toolbar e tendine). */ /* Velo ridotto all'osso (era 0.50-0.68, poi 0.20-0.30 col Regular). Con lo smorzamento nel filtro non serve un velo denso per tenere le icone leggibili, e un velo denso e' esattamente cio' che trasforma il vetro in plastica colorata. Resta verticale, piu' chiaro in alto e piu' scuro in basso: e' il verso in cui la luce cade. */ --wl-bbar-tint-a: rgba(20, 48, 80, 0.08); --wl-bbar-tint-b: rgba(6, 24, 42, 0.16); /* Filo chiaro superiore (specular highlight), il piu' brillante finora: iOS 27 alza proprio questo perche' con un velo piu' leggero e' il bordo a dare spessore al vetro. Con la ricetta Clear e' anche cio' che tiene in piedi la barra sul fondo piatto della Home, dove il materiale da solo non ha niente da mostrare. */ --wl-bbar-edge-a: rgba(255, 255, 255, 0.8); --wl-bbar-edge-b: rgba(255, 255, 255, 0.28); --wl-bbar-edge-c: rgba(255, 255, 255, 0.12); /* Filo scuro esterno (iOS 27, "darkened edge"): sta mezzo pixel sotto quello chiaro e da' al vetro uno spessore invece di un contorno. Serve soprattutto quando sotto scorre una foto chiara: senza, il bordo alto si perde nel contenuto. */ --wl-bbar-edge-dark: rgba(0, 0, 0, 0.42); --wl-bbar-shadow: rgba(4, 14, 25, 0.45); --wl-bbar-icon: rgba(255, 255, 255, 0.66); --wl-bbar-icon-active: #ffffff; /* Accento del pulsante centrale: definito dal tema, non dal componente. 12/8: torna la tinta accent (era un cerchio navy trasparente dal 9/8), ma in vetro come la barra, non piena. */ /* 13/8: il pulsante passa allo stesso sistema della barra, ma con la densita' di un'azione primaria, non con quella della cornice. Apple chiama "prominente" questo vetro: piu' pieno del materiale attorno, perche' l'azione principale deve restare inequivocabile. Due tarature, non una. Prima il velo, da 0.84-0.93 a 0.66-0.82: misurata la trasmissione (quanto del fondo arriva in superficie, 0 = opaco, 1 = nessun materiale) passa da 0.11 a 0.24, contro lo 0.31 della barra. Scendere fino al velo della barra era la strada sbagliata: a quella densita' il cerchio smette di essere arancione, vira al marrone sul fondo scuro (misurato rgb 91,42,20) e si slava su quello chiaro (saturazione da 0.66 a 0.31). Poi la tinta, ed e' il passaggio che si dimentica: lasciar passare piu' fondo, su un fondo SCURO, vuol dire diventare piu' scuri. Con i colori di prima il pulsante si spegneva (rgb 149,82,57 contro 187,96,54). I due capi del gradiente sono quindi piu' chiari e piu' carichi di croma, cosi' il risultato composito torna dov'era: rgb 173,91,55, saturazione 0.68 contro 0.71 di prima, luminosita' 106 contro 112. Il colore del brand e' un vincolo, non un effetto: chi ritocca l'alpha ritocchi anche questi due colori, o l'arancione se ne va senza che nessuno abbia deciso di cambiarlo. */ --wl-bbar-center-a: rgba(255, 154, 84, 0.66); --wl-bbar-center-b: rgba(232, 90, 26, 0.82); --wl-bbar-center-ring: rgba(255, 255, 255, 0.62); position: fixed; z-index: 80; left: 50%; transform: translateX(-50%); /* 4/9, richiesta utente: la barra scende verso il fondo. Il 3/9 sommava 12px alla safe area, cioe' 46px dal bordo su un iPhone: la barra galleggiava a meta' strada invece di appoggiarsi in fondo come nel concept, dove sta a ~18 CSS dal bordo e l'home indicator le passa sotto. Il limite non e' l'home indicator, e' lo SCHERMO: gli angoli sono stondati con un raggio fra 47 e 55 CSS a seconda del modello, e la barra e' larga quanto la vista meno 32, cioe' 16 per lato. L'angolo basso esterno della barra sta dentro la curva finche' vale (R-16)^2 + (R-y)^2 <= R^2: con R uguale a 55, il caso peggiore, serve y >= 16.2. Da qui i 20px sotto, che lasciano ~4 CSS di margine sul modello piu' stondato e molti di piu' sugli altri. La formula toglie 14 alla safe area invece di sommarci: su iPhone 34 - 14 fa 20, verificato dentro la curva sia a R uguale a 47 sia a 55 (scripts/diag-bbar-angoli.mjs). Dove la safe area non c'e' resta il minimo di 12, e li' i 55 di raggio non esistono: un raggio cosi' e' di un iPhone con home indicator, che quindi non passa mai da questo ramo. Serve viewport-fit=cover in index.html, senza env() vale 0 e questa riga sarebbe inerte. */ bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) - 14px)); width: calc(100% - 32px); max-width: 398px; height: var(--wl-bbar-h); /* Niente sfondo, bordo o ombra sul contenitore: li disegna la sagoma, altrimenti si vedrebbe il rettangolo dietro il ritaglio. */ background: none; border: 0; filter: none; } /* Strato del vetro: la maschera (data URI col path della sagoma) la scrive il JS, qui restano solo le proprieta' fisse. */ .wl-bbar-plate { position: absolute; inset: 0; pointer-events: none; -webkit-backdrop-filter: var(--wl-glass-blur); backdrop-filter: var(--wl-glass-blur); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* Velo, ombra e bordo. L'SVG deborda di 40px per lato (stesso margine di SHADOW_PAD in bottom-bar.js) per non tagliare l'ombra sfocata. */ .wl-bbar-shape { position: absolute; left: -40px; top: -40px; width: calc(100% + 80px); height: calc(100% + 80px); pointer-events: none; overflow: visible; } /* Velo e bordo prendono il gradiente da un attributo di presentazione scritto dal JS, non da qui: con piu' barre nella stessa pagina ogni istanza ha i propri id, e una regola CSS con un id fisso vincerebbe sull'attributo mandandole tutte a pescare dai gradienti della prima. */ .wl-bbar-edge { fill: none; stroke-width: 1.1; } /* Il filo scuro usa un colore pieno, non un gradiente: puo' quindi stare nel CSS senza il problema degli id per istanza. Il mezzo pixel di scarto verso il basso e' quello che lo fa leggere come spessore del vetro invece che come secondo contorno disegnato. */ .wl-bbar-edge-dark { fill: none; stroke: var(--wl-bbar-edge-dark); stroke-width: 1.4; transform: translateY(0.6px); } .wl-bbar-tint-a { stop-color: var(--wl-bbar-tint-a); } .wl-bbar-tint-b { stop-color: var(--wl-bbar-tint-b); } .wl-bbar-edge-a { stop-color: var(--wl-bbar-edge-a); } .wl-bbar-edge-b { stop-color: var(--wl-bbar-edge-b); } .wl-bbar-edge-c { stop-color: var(--wl-bbar-edge-c); } .wl-bbar-drop { flood-color: var(--wl-bbar-shadow); flood-opacity: 1; } /* Senza blur disponibile il velo deve reggere da solo la leggibilita' delle icone (stessa logica del vecchio fallback della tab bar). */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .wl-bbar { --wl-bbar-tint-a: rgba(16, 44, 74, 0.94); --wl-bbar-tint-b: rgba(6, 24, 42, 0.96); } } /* Riga delle icone: due gruppi simmetrici e, in mezzo, lo spazio della tasca. Cosi' nessuna icona finisce sotto il pulsante centrale, con qualsiasi numero di azioni e a qualsiasi larghezza di schermo. */ .wl-bbar-row { position: relative; z-index: 2; display: flex; align-items: center; height: 100%; padding: 0 4px; } .wl-bbar-side { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: space-evenly; } .wl-bbar-notch { flex: 0 0 var(--wl-bbar-notch-w); } .wl-bbar-btn { position: relative; display: grid; place-items: center; width: 46px; height: 46px; /* Un