/* NAV */ nav{position:sticky;top:0;z-index:50;background:var(--shell-glass,rgba(255,255,255,.72));backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--border)} .nav-in{max-width:1240px;margin:0 auto;padding:8px 20px;display:flex;align-items:center;gap:12px;position:relative} .brand{display:flex;align-items:center;gap:11px;flex-shrink:0;text-decoration:none;border-radius:12px;padding:2px} .brand img{width:50px;height:50px;object-fit:contain;flex-shrink:0} .brand .brand-lockup{display:flex;flex-direction:column;line-height:1} .brand .brand-row{display:block;white-space:nowrap} .brand .brand-row-society{font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--on-shell,#1c2416)} .brand .brand-phai{background:linear-gradient(135deg,var(--gold-hi),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent} .brand .brand-society{color:var(--on-shell,#1c2416)} .brand .brand-row-diabete{display:flex;align-items:center;gap:5px;margin-top:4px;font-size:9px;font-weight:800;letter-spacing:.22em;color:var(--blu)} .brand .brand-product-mark{width:24px;height:24px;object-fit:contain;border-radius:6px;flex:0 0 24px;background:#fff;border:1px solid var(--leo-dk,#304024);padding:2px;box-sizing:border-box} .brand .brand-product-context{font-size:8px;letter-spacing:.16em;color:var(--blu);opacity:.82} nav .links{display:flex;align-items:center;gap:3px;margin-left:auto;flex-wrap:nowrap;min-width:0} nav .links a,nav .links button{position:relative;padding:9px 12px;border-radius:10px;font-size:13.2px;font-weight:600;color:var(--on-shell-mut,rgba(229,238,223,.70));text-decoration:none;white-space:nowrap;flex-shrink:0;transition:color .15s,background .15s} nav .links a:hover{color:var(--on-shell,#1c2416);background:rgba(60,80,45,.10)} nav .links a.active,nav .links a[aria-current=page]{color:var(--leo-lite,#304024);background:rgba(60,80,45,.12)} nav .links a.cta{background:linear-gradient(135deg,var(--leo),var(--leo-dk));color:#fff;font-weight:800;box-shadow:0 4px 14px rgba(60,80,45,.26)} nav .links a.cta:hover{filter:brightness(1.07);color:#fff;background:linear-gradient(135deg,var(--leo),var(--leo-dk))} nav .links a.cta.active,nav .links a.cta[aria-current=page]{color:#fff} /* "Installa l'app": nasce hidden, la scopre _install_js solo a chi non ce l'ha */ nav .links .pwa-inst{display:flex;align-items:center;gap:8px;width:auto;text-align:left;background:none;border:0;font-family:inherit;cursor:pointer} nav .links .pwa-inst[hidden]{display:none} nav .links .pwa-inst .pwa-ic{width:16px;height:16px;flex-shrink:0} nav .links a .out{display:inline-block;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round;opacity:.45;margin-left:7px;vertical-align:-1px} nav .research-menu{position:relative;flex-shrink:0} nav .research-menu summary{display:flex;align-items:center;gap:9px;min-height:38px;padding:9px 12px;border-radius:10px; color:var(--on-shell-mut,rgba(229,238,223,.70));font-size:13.2px;font-weight:600;cursor:pointer;list-style:none;white-space:nowrap} nav .research-menu summary::-webkit-details-marker{display:none} nav .research-menu summary::after{content:"";width:6px;height:6px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7;transition:transform .15s} nav .research-menu[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)} nav .research-menu summary:focus-visible{outline:2px solid var(--blu);outline-offset:2px} nav .research-menu .out{display:inline-block;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round;opacity:.45;margin-left:5px;vertical-align:-1px} nav .research-destination{display:inline-flex;align-items:center;color:var(--blu);font-family:inherit;font-size:1em;font-weight:700;letter-spacing:0} nav .research-submenu{list-style:none} nav:not(.appnav) .research-submenu{position:absolute;z-index:70;top:calc(100% + 8px);right:0;min-width:252px;padding:8px;background:var(--shell-glass-hi,rgba(255,255,255,.96));border:1px solid var(--border);border-radius:14px;box-shadow:0 18px 30px rgba(33,50,20,.14)} nav:not(.appnav) .research-submenu a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:9px;color:var(--text);font-size:13px;font-weight:700} nav:not(.appnav) .research-submenu a:hover{background:rgba(60,80,45,.10)} nav:not(.appnav) .research-menu[open]>summary{background:rgba(60,80,45,.10);color:var(--on-shell,#1c2416)} nav .rev{display:inline-block;transform:scaleX(-1)} nav .langsel{margin-left:6px;border:1px solid var(--border-hi);border-radius:9px;background:var(--card);color:var(--text);font-family:var(--font);font-weight:600;font-size:13px;padding:7px 8px;cursor:pointer;outline:none} nav .langsel:focus-visible{outline:2px solid var(--blu);outline-offset:2px} nav a:focus-visible,nav button:focus-visible{outline:2px solid var(--blu);outline-offset:2px} /* IL RITORNO A LEO NON PUO' STARE DENTRO IL MENU (22/08/2026). Sul telefono la vetrina mostra soltanto marchio + hamburger: «Coach Leo» stava nel pannello, e per giunta sotto la piega (dopo Home/Ricette/Alimenti/Studi/Protocollo/Indagini). Tre gesti, di cui uno e' CERCARE. Si vedeva solo scendendo dall'app: tocchi «Studi» dentro Leo, perdi la barra in basso e la strada di casa e' nascosta. La regola «la pelle segue l'indirizzo» (4 agosto) NON si tocca, ed e' giusta: queste pagine sono pubbliche, e chi arriva da una ricerca non deve vedere il guscio di un'app che non ha. Quello che era rotto non era la pelle, era il rientro. La stessa riga serve due persone diverse: chi e' uscito da Leo per consultare la biblioteca, e chi arriva dal sito e deve poter entrare nel prodotto (42 profili su 45 sono ospiti). Quando la riga completa e' visibile non serve: li' la voce e' gia' nel menu. */ nav .cta-m{display:none;text-decoration:none} @media(max-width:1600px){ nav .cta-m{display:inline-flex;align-items:center;margin-left:auto;flex-shrink:0; padding:10px 15px;border-radius:999px;font-size:13.5px;font-weight:800;white-space:nowrap; background:linear-gradient(135deg,var(--leo),var(--leo-dk));color:#fff; box-shadow:0 4px 14px rgba(60,80,45,.26)} nav .cta-m ~ .burger{margin-left:8px} /* nel pannello la voce resterebbe doppia: sul telefono e' gia' qui sopra */ nav .links a.cta{display:none} } /* A 320px la riga chiede 323px e ce ne sono 305. Cade la parola «Coach»: resta il marchio, che e' quello che deve dire dove porta. Misurato, non stimato. */ @media(max-width:359px){nav .cta-m .cw{display:none}nav .cta-m{padding:10px 13px}} .burger{display:none;width:44px;height:44px;border:1px solid var(--border-hi);border-radius:11px;background:var(--card);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex-shrink:0;margin-left:auto} .burger span{display:block;width:20px;height:2px;border-radius:2px;background:var(--text);transition:transform .22s,opacity .22s} nav.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} nav.open .burger span:nth-child(2){opacity:0} nav.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .m-only{display:none} /* La vetrina passa al menu prima di troncare una voce. A 1500px, con lingua e installazione visibili, la riga lunga supera lo spazio disponibile; a 1601px entra interamente. */ @media(max-width:1600px){ .burger{display:flex} nav .links{position:absolute;top:calc(100% + 1px);left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;margin:0;padding:8px;background:var(--shell-glass-hi,rgba(255,255,255,.96));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border);box-shadow:0 18px 30px rgba(33,50,20,.14);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s} nav.open .links{opacity:1;visibility:visible;transform:none} nav .links a{padding:14px 16px;font-size:15.5px;border-radius:10px} nav .research-menu{width:100%} nav .research-menu summary{min-height:44px;padding:14px 16px;font-size:15.5px} nav:not(.appnav) .research-submenu{position:static;margin:0 6px 6px;padding:6px;background:rgba(60,80,45,.06);border-radius:10px;box-shadow:none} nav:not(.appnav) .research-submenu a{padding:12px 14px;font-size:14px} nav .links a.cta{margin-top:4px;justify-content:center;text-align:center} nav .links .pwa-inst{width:100%} nav .langsel{width:100%;margin:6px 0 0;padding:12px} .m-only{display:block} } /* ACCOUNT sempre visibile: "Accedi" da anonimo, chip col nome + menu da loggato. L'utente deve SEMPRE sapere come entrare nel suo sistema, da qualunque pagina. */ nav .acct{display:inline-flex;align-items:center;gap:7px;margin-left:2px;border:1.5px solid var(--border-hi);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:700;color:var(--text);text-decoration:none;white-space:nowrap;background:var(--card);cursor:pointer} nav .acct:hover{border-color:var(--leo-dk);color:var(--leo-dk)} nav .acct.active{border-color:var(--leo-dk);color:var(--leo-dk)} nav .acct.in{background:rgba(138,174,111,.16);border-color:rgba(138,174,111,.5);color:var(--on-shell,#f1f6ee)} nav .acct .dot{width:8px;height:8px;border-radius:50%;background:var(--leo);box-shadow:0 0 0 3px rgba(60,80,45,.18);flex-shrink:0} nav .acct .acct-ic{width:15px;height:15px;flex-shrink:0} /* chip loggato: avatar OMINO + nome + badge giorni (coerente con la chat) */ nav .acct.in{padding:5px 13px 5px 6px} nav .acct .av{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--leo),var(--leo-dk));flex-shrink:0;box-shadow:0 2px 6px rgba(60,80,45,.3)} nav .acct .av svg{width:14px;height:14px;display:block} nav .acct .who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px} /* Il saluto su DUE RIGHE: "Ciao" sopra in piccolo, il NOME sotto con tutta la larghezza del chip. Serve a una cosa sola, e la piu' importante della testata: capire a colpo d'occhio se sei dentro o fuori. Da anonimo il chip e' un invito ("Accedi"/"Mese gratis"), da loggato e' il tuo nome — due oggetti diversi, non lo stesso con parole diverse. */ nav .acct .wh{display:flex;flex-direction:column;align-items:flex-start;justify-content:center; line-height:1.12;min-width:0;text-align:left} nav .acct .wh i{font-style:normal;font-size:9px;font-weight:700;text-transform:uppercase; letter-spacing:.07em;opacity:.72} nav .acct .wh b{font-size:12.5px;font-weight:800;max-width:168px;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} nav .acct .gg{background:var(--leo);color:#fff;border-radius:999px;padding:2px 7px;font-size:10px;font-weight:800;flex-shrink:0;line-height:1.5} nav .acct-menu{position:absolute;top:calc(100% + 8px);right:16px;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:0 18px 44px rgba(33,50,20,.20);min-width:238px;padding:8px;display:none;z-index:60} nav .acct-menu.on{display:block} nav .acct-menu .who{padding:9px 12px;border-bottom:1px solid var(--border);margin-bottom:6px} nav .acct-menu .who b{display:block;font-size:13px;word-break:break-all} nav .acct-menu .who span{font-size:11.5px;color:var(--leo-dk);font-weight:700} nav .acct-menu a,nav .acct-menu button{display:block;width:100%;text-align:left;background:none;border:none;font:inherit;font-size:13.5px;font-weight:600;color:var(--text);padding:9px 12px;border-radius:9px;text-decoration:none;cursor:pointer} nav .acct-menu a:hover,nav .acct-menu button:hover{background:rgba(60,80,45,.09)} nav .acct-menu .esci{color:#b3362a} /* Il chip account e' a tutta larghezza solo dentro il pannello a discesa. La vetrina apre quel pannello fino a 1600px: in una riga orizzontale il chip farebbe sbordare la pagina. */ /* `:not(.appnav)` perche' il chip a tutta larghezza vale SOLO dove sta DENTRO il pannello a discesa, cioe' nella vetrina. Nell'app il chip vive nella riga della testata (dev'essere visibile sempre: dice che sei dentro e quanti giorni ti restano), e li' un `width:100%` lo faceva sbordare di 221px spingendo fuori dal bordo perfino l'hamburger — cioe' l'unico modo di aprire la biblioteca. Stessa regola, due contenitori diversi: va scoperchiata. */ @media(max-width:1600px){nav:not(.appnav) .acct{width:100%;justify-content:center;margin:2px 0 0;padding:12px}nav .acct-menu{left:8px;right:8px}} /* NASTRO promo per gli ANONIMI: "primo mese gratis" ben in vista su ogni pagina. Chiudibile (localStorage), mai mostrato ai loggati ne' su /accedi e /benvenuto. */ .promo-strip{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;padding:10px 46px 10px 16px;background:linear-gradient(90deg,#304024,#3c502d);color:#fff;font-size:13.5px;font-weight:700;position:relative;text-align:center} .promo-strip a{background:#fff;color:#304024;border-radius:999px;padding:6px 15px;font-weight:800;text-decoration:none;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.15)} .promo-strip a:hover{transform:translateY(-1px)} .promo-strip .px{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:#fff;font-size:15px;cursor:pointer;opacity:.75;padding:5px 9px} .promo-strip .px:hover{opacity:1} @media(prefers-reduced-motion:reduce){nav .links,.burger span{transition:none}} /* ══ NAV "WOW": vetro condensante allo scroll, hairline aurora, pill animate, sweep CTA ══ */ nav{transition:background .3s ease,box-shadow .3s ease,padding .3s ease;border-bottom:none} nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;pointer-events:none; background:linear-gradient(90deg,transparent,var(--leo) 18%,var(--gold-hi) 50%,var(--blu) 82%,transparent); opacity:.5;transition:opacity .3s} nav::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;pointer-events:none;z-index:1; background:linear-gradient(90deg,transparent 20%,#3c502d 40%,#c9a24a 50%,#0d6fd0 60%,transparent 80%); background-size:200% 100%;animation:navSweep 5s ease-in-out infinite;opacity:.7} @keyframes navSweep{0%{background-position:100% 0}100%{background-position:-100% 0}} nav:not(.scrolled){background:var(--shell-glass,rgba(255,255,255,.66))} nav.scrolled{background:var(--shell-glass-hi,rgba(255,255,255,.9));box-shadow:0 10px 30px rgba(33,50,20,.10)} nav.scrolled::after{opacity:.85} .brand img{transition:width .3s,height .3s,filter .3s} nav.scrolled .brand img{width:40px;height:40px} .brand:hover img{filter:drop-shadow(0 4px 12px rgba(60,80,45,.35))} nav .links a:not(.cta):not(.acct){transition:color .18s,background .18s,transform .14s,box-shadow .18s} nav .links a:not(.cta):not(.acct):hover{transform:translateY(-1px)} nav .links a.active:not(.cta),nav .links a[aria-current=page]:not(.cta){ background:linear-gradient(135deg,rgba(138,174,111,.22),rgba(13,111,208,.16));color:var(--leo-lite,#8aae6f); box-shadow:inset 0 0 0 1px rgba(138,174,111,.3)} nav .links a.cta{position:relative;overflow:hidden} nav .links a.cta::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;transform:skewX(-18deg); background:linear-gradient(115deg,transparent,rgba(255,255,255,.55),transparent);animation:ctaSweep 5s ease-in-out infinite} @keyframes ctaSweep{0%,62%{left:-70%}82%,100%{left:135%}} @media(max-width:1600px){ nav .links{border-radius:0 0 20px 20px;box-shadow:0 26px 44px rgba(33,50,20,.20)} nav.open .links a{animation:navItem .32s cubic-bezier(.22,1,.36,1) backwards} nav.open .links a:nth-child(1){animation-delay:.03s} nav.open .links a:nth-child(2){animation-delay:.06s} nav.open .links a:nth-child(3){animation-delay:.09s} nav.open .links a:nth-child(4){animation-delay:.12s} nav.open .links a:nth-child(5){animation-delay:.15s} nav.open .links a:nth-child(6){animation-delay:.18s} } @keyframes navItem{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){nav .links a.cta::after{animation:none}nav.open .links a{animation:none}nav::before{animation:none;opacity:0}} /* ── IL PASSAGGIO FRA LE PAGINE (22/08/2026) ────────────────────────────────────────── Venti righe e zero JavaScript. Sta QUI, in `_NAV_STYLE`, perche' una transizione fra DOCUMENTI diversi funziona solo se ce l'hanno tutti e due — quello che si lascia e quello che arriva — e questo foglio e' l'unico che sta in ogni pagina. Tutto dentro `no-preference`: non e' «spegnere l'animazione se la chiedi», e' NON accenderla finche' non risulta che va bene. Chi ha chiesto meno movimento, e chi ha un browser che non la conosce (Firefox), naviga esattamente come oggi: e' una regola in piu' che viene ignorata, non un pezzo di cui la pagina ha bisogno. I NOMI del guscio stanno in `_APP_STYLE`, cioe' solo sulle pagine dell'app: uscendo verso la vetrina il guscio cambia davvero, e li' la dissolvenza semplice e' la cosa giusta — dice «hai cambiato mondo». */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } ::view-transition-old(root){animation:vt-esce .16s ease-in both} ::view-transition-new(root){animation:vt-entra .22s cubic-bezier(.22,1,.36,1) both} } @keyframes vt-esce{to{opacity:0}} @keyframes vt-entra{from{opacity:0;transform:translateY(6px)}} /* ── BOTTOM TAB BAR (app-like, stile investing.com) — SOLO mobile/tablet ─────────── */ /* Su desktop niente barra sotto: c'e' il menu in alto (evita la ridondanza). */ /* La tabbar E' un