/* guscio verde: gli stessi token della nav del sito, con altri valori */ .appnav,.appnav ~ .tabbar{ --shell-glass:rgba(48,64,36,.97);--shell-glass-hi:rgba(38,105,27,.99); --on-shell:#f4fbef;--on-shell-mut:rgba(235,247,226,.78);--leo-lite:#bacfaa; --card:rgba(255,255,255,.12);--text:#f4fbef; --border:rgba(255,255,255,.16);--border-hi:rgba(255,255,255,.28)} /* Verde PIENO, non una diagonale. Su una barra larga e bassa un gradiente a 135 gradi diventa quasi orizzontale e si legge come uno sporco, non come una sfumatura voluta. Resta un velo di luce dall'alto per lo spessore. */ .appnav{background:#3c502d;background-image:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 62%); color:var(--on-shell);box-shadow:0 1px 0 rgba(0,0,0,.20),0 10px 26px rgba(26,45,12,.10)} .appnav:not(.scrolled),.appnav.scrolled{background:#3c502d} .appnav.scrolled{box-shadow:0 1px 0 rgba(0,0,0,.20),0 12px 30px rgba(33,50,20,.24)} /* Il filo verde/oro/blu sopra e sotto e' la firma della VETRINA, dove corre su fondo bianco. Sul verde scuro dell'app diventa una riga gialla e blu che non appartiene a niente: qui i due pseudo-elementi si spengono e lo stacco lo fa l'ombra. */ .appnav::before,.appnav::after{content:none} /* stesso passo della testata della chat (`header{gap:13px}` in chat_styles.py): con 12 il marchio cadeva 2px piu' a sinistra passando da /leo a /me/*. */ .appnav .nav-in{gap:13px} /* USCITA verso la vetrina, SEMPRE la prima cosa a sinistra: dentro Leo non si resta in trappola. Rifatta il 22/08/2026 insieme a quella della chat (`.home-link` in chat_styles.py): le due barre sono lo STESSO guscio, se cambi qui cambia anche li'. Il disco bianco col simbolo e' stato tolto — era l'unica superficie piena e chiara della barra, e l'occhio ci andava prima che sul marchio; e dentro non si leggeva niente (il triangolo faceva 0,45px di tratto a schermo). Ora: freccia, simbolo MONOCROMO col tratto ingrossato perche' regga a 15px, e il nome del posto dove si torna. */ .appnav .back{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex-shrink:0; min-height:40px;padding:0 12px;border-radius:999px;border:1px solid transparent; background:transparent;color:rgba(244,251,239,.62);font-size:12px;font-weight:700; white-space:nowrap;text-decoration:none;transition:background .15s,color .15s} .appnav .back:hover{background:rgba(255,255,255,.12);color:#fff} .appnav .back .ar{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4; stroke-linecap:round;stroke-linejoin:round;flex-shrink:0} .appnav .back .sy{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:24; stroke-linejoin:round;flex-shrink:0} /* il filo: da qui in poi si e' dentro Leo */ .appnav .nav-sep{width:1px;height:20px;background:rgba(244,251,239,.16);flex-shrink:0;margin:0 1px} /* L'ANELLO DI FUOCO, misurato (22/08/2026). `nav a:focus-visible` usa `--blu` (#0d6fd0), scelto per la vetrina BIANCA e mai riguardato qui: su #3c502d fa **1,77:1**, cioe' chi naviga con la tastiera non vede dov'e'. WCAG 2.4.11 chiede almeno 3:1 contro il colore adiacente. La crema del marchio ne fa **8,37:1**. E' la stessa forma del difetto gia' scritto qualche riga piu' su — «fondo verde nuovo, voci rimaste da fondo chiaro» — solo che questa volta riguardava una cosa che si vede solo se usi la tastiera, ed e' per questo che era rimasta li'. Il doppio anello (verde dentro, crema fuori) tiene lo stacco anche quando la voce e' gia' chiara perche' e' quella attiva. */ .appnav a:focus-visible,.appnav button:focus-visible,.appnav .langsel:focus-visible, .appnav ~ .tabbar a:focus-visible{outline:2px solid #f4fbef;outline-offset:2px} .appnav ~ .tabbar a:focus-visible{outline-offset:-3px} /* QUANDO L'ETICHETTA SPARISCE, e perche' e' in DUE pezzi. Misurato sulla barra vera, con il pulsante anonimo vero («Mese gratis», che in francese e' «Mois gratuit» — il caso peggiore delle quattro lingue) e guardando se il marchio viene strozzato: «PhAI Society — Diabete» intero -> il marchio si strozza fino a 430px, pulito da 440. «PhAI» corto -> pulito da 400px in su. sotto i 400px -> niente etichetta: il pulsante e il Menu si prendono tutto. Da 1200px in su c'e' spazio per il nome intero in ogni stato. La forma corta non e' un ripiego: accanto al simbolo, «PhAI» E' il marchio. Il default e' nascosto apposta, cosi' la regola che sbaglia non puo' che togliere, mai strozzare il marchio a larghezza zero. */ .appnav .back .hl,.appnav .back .hl-x{display:none} @media(min-width:400px){.appnav .back .hl{display:inline}} @media(min-width:1200px){.appnav .back .hl-x{display:inline}} /* `flex-shrink:0` e' la riga che tiene in piedi il marchio. Senza, e' un elemento flex come gli altri: quando la riga si affolla — e da LOGGATO si affolla, perche' il chip col nome e il badge dei giorni e' largo il doppio di "Accedi" — il browser lo stringe fino a larghezza ZERO e le tre lettere si impilano una sotto l'altra. Misurato: 0x67px invece di 70x22, cioe' il logo diventava una colonna L/Ǝ/O. Il marchio dice DOVE SEI: e' l'ultima cosa che puo' cedere, mai la prima. */ .appnav .brand-leo{display:flex;flex-direction:column;line-height:1.12;text-decoration:none; color:var(--on-shell);min-width:0;flex-shrink:0} /* LA SPAZIATURA DEL MARCHIO, misurata sul logo (assets/leo-logo-official.png). Nel logo le tre lettere sono STACCATE: il vuoto vale 0.30 dell'altezza delle maiuscole fra L e Ǝ, 0.35 fra Ǝ e O. Qui valeva 0.06 e 0.12 — L e Ǝ si toccavano e si leggevano come un blocco solo. Due colpe sommate: `letter-spacing:.01em` piu' un margine NEGATIVO sulla E rovesciata, che tirava addosso le vicine da tutti e due i lati. Con .16em e senza margine la parola torna larga 3.17 volte l'altezza delle maiuscole, che e' esattamente il logo. Le proporzioni delle lettere erano gia' giuste: Montserrat 800 e' il carattere giusto, era solo troppo stretto. Stesso valore in `chat_styles.py`: se cambia uno, cambia l'altro. */ .appnav .brand-leo b{font-size:20px;font-weight:800;letter-spacing:0;white-space:nowrap} /* L'INSEGNA ha la spaziatura LARGA del logo — un'altra cosa dal marchio dentro una frase. Vuoti misurati 0.309 e 0.349 dell'altezza delle maiuscole, contro 0.304 e 0.348 del logo vero; diversi fra loro perche' lo sono anche nel logo (la O tonda vuole piu' aria della Ǝ squadrata). MARGINI e non `letter-spacing` perche' la Ǝ e' un `inline-block` ribaltato: il tracking del contenitore finisce dentro il riquadro e lo specchio se lo porta dal lato sbagliato, e dopo un inline-block non si somma affatto. Il perche' esteso in marchio.py. */ .appnav .brand-leo b .rev{margin:0 .15em 0 .175em} /* `>span` e non `span`: dentro c'e' anche E, la E rovesciata del marchio. Con il selettore largo si prendeva font 9px + maiuscoletto, e al `display:none` sotto i 430px spariva del tutto: il logo diventava «L O». Il figlio diretto e' solo il sottotitolo. */ /* 9px con .14em di spaziatura era al limite del leggibile: lettere cosi' distanti non fanno piu' parola. Un filo piu' grandi e piu' vicine si legge, e piu' velate stanno SOTTO al marchio invece di competerci. */ .appnav .brand-leo>span{font-size:10px;letter-spacing:.085em;text-transform:uppercase;font-weight:600; color:rgba(239,250,231,.60);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ── DUE FILE DI VOCI, come sul telefono ──────────────────────────────────────────── `.quick` = i gesti di OGNI GIORNO (Leo, Piano, Ricette, Glicemia, Mappa): sono gli stessi cinque della barra in basso, ed e' giusto cosi' — sopra i 900px la barra non c'e', e prima di questa riga da desktop NON si arrivava piu' ne' al piano ne' alla glicemia: stavano solo nella barra nascosta. Il buco piu' grosso di tutta la navigazione, e l'avevo lasciato io. `.links` = la BIBLIOTECA (alimenti, studi, indagini, la conoscenza, riepilogo): roba da sfogliare, non da fare tutti i giorni, quindi sta dietro l'hamburger a QUALSIASI larghezza. Cosi' la riga non puo' piu' affollarsi: cinque voci corte e il chip, punto — ed era l'affollamento a schiacciare il marchio e a far sbordare la testata da loggato. */ /* LE VOCI STANNO A SINISTRA, subito dopo il marchio — non spinte al bordo destro. Con il marchio a un capo e tutto il resto all'altro restava un vuoto in mezzo, ed e' quello a far sembrare storta la barra prima ancora dei singoli pezzi. `margin-right:auto` manda di la' l'account e l'hamburger: due gruppi, uno per lato. */ .appnav .quick{display:flex;align-items:center;gap:2px;margin-left:10px;margin-right:auto;min-width:0} .appnav .quick a,.appnav .quick button{position:relative;padding:9px 13px;border-radius:11px;font-size:13.5px; font-weight:600;color:rgba(235,247,226,.74);text-decoration:none;white-space:nowrap; transition:color .15s,background .15s} .appnav .quick a:hover,.appnav .quick button:hover{color:#fff;background:rgba(255,255,255,.14)} .appnav .quick a.active,.appnav .quick a[aria-current=page]{ background:rgba(255,255,255,.18);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)} .appnav .acct{margin-left:8px;flex-shrink:0} /* l'hamburger della biblioteca c'e' SEMPRE, anche su desktop */ /* IL GUSCIO HA UN NOME, e per questo smette di essere ridipinto: il browser lo riconosce nella pagina nuova e lo lascia dov'e'. Oggi a ogni tocco la barra verde sparisce e ricompare identica — e' l'unico punto in cui l'app sembra un sito. La linguetta ce l'ha SOLO la voce attiva: cambiando pagina cambia chi la porta, e il browser la accompagna. Un nome dev'essere unico nella pagina, ed e' il motivo per cui le due righe stanno in due media query che non si sovrappongono mai: sopra i 900px esiste solo `.quick`, sotto solo `.tabbar`. */ @media (prefers-reduced-motion: no-preference) { .appnav{view-transition-name:guscio-sopra} .appnav ~ .tabbar{view-transition-name:guscio-sotto} ::view-transition-group(dove-sono){animation-duration:.22s; animation-timing-function:cubic-bezier(.22,1,.36,1)} } @media (prefers-reduced-motion: no-preference) and (max-width:900px){ .appnav ~ .tabbar a.active::after{view-transition-name:dove-sono} } @media (prefers-reduced-motion: no-preference) and (min-width:901px){ .appnav .quick a.active{view-transition-name:dove-sono} } .appnav .burger{display:flex;margin-left:8px;flex-shrink:0} /* SUL TELEFONO il chip si stringe. Da loggato porta nome + badge dei giorni ed e' largo ~220px: sommato al ritorno e al marchio non ci sta in 390px, e spingeva fuori dal bordo proprio l'hamburger — cioe' l'unico modo di aprire la biblioteca. Sotto i 600px resta il nome accorciato, sotto i 460 solo l'omino e i giorni: quello che conta e' vedere CHE sei dentro e quanto ti resta, non rileggere il tuo nome. */ @media(max-width:600px){.appnav .acct .wh b{max-width:88px}} @media(max-width:460px){.appnav .acct .wh{display:none}.appnav .acct{padding:5px 9px 5px 5px}} @media(max-width:900px){ /* sul telefono i gesti di ogni giorno li fa la BARRA IN BASSO: qui sarebbero un doppione */ .appnav .quick{display:none} } .appnav .burger{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22)} .appnav .burger span{background:#f4fbef} /* IL MENU DICE DOVE PORTA (22/08/2026). Quattro voci su sei — alimenti, studi, indagini, la conoscenza — non sono pagine dell'app: sono la biblioteca, e stanno nella VETRINA, con la sua testata bianca. La regola «la pelle segue l'indirizzo» resta quella decisa il 4 agosto e non si tocca; quello che mancava era dirlo PRIMA di cliccare. Ora le voci sono in due gruppi — sopra quelle che restano dentro Leo, sotto quelle che portano fuori, sotto un titoletto che usa lo STESSO nome del tasto di uscita — e ognuna di quelle porta la freccina. Il rientro esisteva gia': nella vetrina c'e' il bottone verde «Coach LEO». Mancava solo l'avviso all'andata. */ .appnav .links .lgroup{display:block;margin:7px 0 1px;padding:10px 13px 4px; border-top:1px solid rgba(255,255,255,.13);font-size:10px;font-weight:800;letter-spacing:.12em; text-transform:uppercase;color:rgba(235,247,226,.42);white-space:nowrap} .appnav .links .lgroup[data-brand]{text-transform:none;letter-spacing:.08em} /* il PRIMO titoletto non ha il filo sopra: sarebbe una riga sospesa in cima al pannello */ .appnav .links .lgroup-1{border-top:0;margin-top:0;padding-top:4px} /* «LE TUE CHAT» STA IN DUE PUNTI, e non e' un doppione: `.quick` sparisce sotto i 900px (li' i gesti quotidiani li fa la barra in basso), ma la cronologia della chat nella barra in basso non c'e'. Quindi sopra i 900px si vede quella in riga, sotto quella nel pannello. Mai tutte e due. Stesso schema del ritorno a Leo in vetrina (`nav .cta-m`). */ @media(min-width:901px){.appnav .links .l-hist{display:none}} .appnav .research-menu summary{color:rgba(235,247,226,.78)} .appnav .research-menu summary:hover,.appnav .research-menu[open]>summary{background:rgba(255,255,255,.14);color:#fff} .appnav .research-destination{color:#bacfaa} .appnav .research-submenu{margin:2px 4px 6px;padding:5px;background:rgba(0,0,0,.14);border-radius:10px} .appnav .research-submenu a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 11px;border-radius:8px;color:rgba(235,247,226,.82);font-size:13.5px;font-weight:700} .appnav .links a:hover .out{opacity:.85} .appnav .links a:hover,.appnav .links button:hover{color:#fff;background:rgba(255,255,255,.14)} .appnav .links a.active,.appnav .links a[aria-current=page]{ background:rgba(255,255,255,.18);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)} .appnav .acct{background:rgba(255,255,255,.10);color:var(--on-shell);border-color:rgba(255,255,255,.20)} .appnav .acct:hover,.appnav .acct.active{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.34);color:#fff} .appnav .acct .av{background:rgba(255,255,255,.20);box-shadow:none} /* i giorni di prova che restano: bianco pieno era l'oggetto piu' acceso di tutta la barra, piu' del marchio. Il verde chiaro della scala lo tiene leggibile e dentro la famiglia. */ .appnav .acct .gg{background:#bacfaa;color:#26331c} .appnav .langsel{background:rgba(255,255,255,.10);color:var(--on-shell);border-color:rgba(255,255,255,.20)} .appnav .langsel option{color:#1c2416} /* il menu a tendina dell'account resta CHIARO: e' un pannello sopra la pagina, non il guscio */ .appnav .acct-menu{--text:#1c2416;--card:#fff;--border:rgba(33,50,20,.12);color:#1c2416} /* CTA da anonimo ("mese gratis"): sul verde il pulsante verde spariva nel fondo. Bianco su verde, che e' anche il verso giusto per un invito all'azione: e' la cosa piu' in vista. */ .appnav .acct:not(.in){background:#fff;color:#26331c;border-color:#fff;font-weight:800; box-shadow:0 4px 14px rgba(26,45,12,.22)} .appnav .acct:not(.in):hover{background:#f4fbef;color:#1d2716;border-color:#f4fbef} .appnav .acct:not(.in) .acct-ic{stroke:#26331c} @media(max-width:900px){ .appnav .links{background:linear-gradient(180deg,#304024,#26331c);box-shadow:0 26px 44px rgba(26,45,12,.36)} .appnav .brand-leo b{font-size:17px} } /* La BIBLIOTECA resta un pannello a discesa anche SOPRA i 900px, dove le regole condivise la rimetterebbero in riga: e' quella riga a essersi affollata fino a schiacciare il marchio e a far sbordare la testata da loggato. */ @media(min-width:901px){ .appnav .links{position:absolute;top:calc(100% + 6px);right:12px;left:auto;flex-direction:column; align-items:stretch;gap:2px;min-width:212px;margin:0;padding:8px;border-radius:16px; background:linear-gradient(180deg,#304024,#26331c);box-shadow:0 22px 40px rgba(26,45,12,.34); opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .2s,transform .2s,visibility .2s} .appnav.open .links{opacity:1;visibility:visible;transform:none} .appnav .links a{padding:11px 13px;font-size:14px;border-radius:9px} .appnav .langsel{width:100%;margin:6px 0 0;padding:9px} } /* Sui telefoni stretti il sottotitolo del marchio veniva tagliato a meta' ("IL TUO COACH DEL DIABE…"): un'etichetta troncata è peggio di un'etichetta assente. Sotto i 430px sparisce e resta il marchio, che è quello che deve dire dove sei. */ @media(max-width:430px){ .appnav .brand-leo>span{display:none} .appnav .back{padding:0 10px 0 8px;font-size:11px} } /* barra in basso: stesso verde della testata, cosi' testata e barra sono UN guscio solo */ .appnav ~ .tabbar{border-top-color:rgba(255,255,255,.16)} .appnav ~ .tabbar a.active{color:#fff} .appnav ~ .tabbar a.active::after{background:#bacfaa} .appnav ~ .tabbar a:active{background:rgba(255,255,255,.14)} @media(max-width:900px){ .appnav,.appnav:not(.scrolled),.appnav.scrolled{background:#3c502d} .appnav ~ .tabbar{background:#2c3b21} /* lo spazio in fondo perche' l'ultima riga di contenuto non finisca sotto la barra. Vive QUI e non nel foglio condiviso: solo l'app ha la barra. */ body{padding-bottom:calc(62px + env(safe-area-inset-bottom))} /* con la tastiera aperta la barra si ritira: lo spazio che le era riservato va restituito, se no resta una fascia vuota sopra la tastiera */ body.kb-open{padding-bottom:0} }