:root{ color-scheme: light; /* ======================================================================== PALETTE "SABBIA" — adottata l'8/09/2026 ======================================================================== Prima l'app usava neutri FREDDI (#FAFAF9, #ECECEE, #8E8E93) con un rosso-corallo acceso sopra. Seb ha portato sei riferimenti e in tutti i neutri erano CALDI: il cambio di temperatura, da solo, fa metà del lavoro. L'arancio resta ma smette di essere un riempimento acceso e diventa soprattutto luce (aloni sfumati) e accento di stato. Il fondo NON è quasi bianco per un motivo preciso, vedi il blocco RILIEVO qui sotto: su una superficie quasi bianca un riflesso bianco non ha spazio per vedersi. ------------------------------------------------------------------ */ --bg:#F0E8DC; --bg-2:#E7DDCC; /* Le superfici sono UGUALI al fondo: nel rilievo è l'ombra a creare la forma, non un colore diverso. Una card bianca su fondo sabbia può solo avere un'ombra sotto, non può sporgere. */ --surface:#F0E8DC; --surface-2:#E9E0D2; --border:#E0D5C3; --text:#191713; --text-muted:#6B645A; /* caldo, non grigio freddo */ --text-faint:#A2988A; --accent:#F3701E; --accent-2:#FF9A5B; --accent-ink:#FFFFFF; --sakura:#E8A0A0; --amber:#E09B2D; --indigo:#4B607F; --fogblue:#8FA3AD; --good:#43A06B; --glass:rgba(255,255,255,.65); --glass-strong:rgba(255,255,255,.88); /* ======================================================================== RILIEVO — LO STANDARD DELL'APP (neumorfismo) ======================================================================== Calibrato sul telefono vero l'8/09/2026 con rilievo.html, esattamente come si era fatto col vetro. Come per il vetro: QUESTA È LA REGOLA, nessun elemento si inventa numeri propri. Si ricalibra riaprendo rilievo.html e si cambiano SOLTANTO le righe qui sotto. Quattro cose imparate calibrando, che non vanno rifatte da capo: 1. La luce NON è il gemello dell'ombra. All'inizio erano identiche e speculari: veniva un alone bianco enorme. La luce va RIMPICCIOLITA (offset e sfocatura), non solo resa più trasparente. 2. Il tono del fondo è la leva vera. Su un fondo quasi bianco il riflesso bianco non ha margine: per questo --bg è #F0E8DC e non #FAFAF9. 3. L'ombra va scalata con l'oggetto. Quella giusta su una scheda da 350px è una macchia su una pillola da 46px: servono due misure. 4. Nell'INCASSO la direzione si inverte. Da fuori la luce sta in alto a sinistra; da dentro ci sta l'ombra, perché è lì che il bordo rialzato le fa ombra. Ribaltare mantenendo la direzione dà una cosa che sembra sporgere e affondare insieme. L'ombra è un bruno caldo e non nero: il nero puro sulla sabbia diventa grigio fango e spegne tutta la temperatura della palette. ------------------------------------------------------------------ */ --rilievo: -2px -2px 5px rgba(255,255,255,.60), 7px 7px 12px rgba(146,127,103,.20); --rilievo-p: -2px -2px 4px rgba(255,255,255,.67), 4px 4px 9px rgba(146,127,103,.28); /* La TERZA misura, per le tessere dell'itinerario. Calibrata da Seb sul telefono il 9/09/2026 con tessere.html. Serve perché su quelle tessere l'illustrazione arriva a filo: il bordo è scuro, e accanto a quel salto di contrasto un'ombra al 20% sparisce. Il verdetto del banco è stato più preciso di quello che avevo provato io a occhio: NON va ingrandita l'ombra, va solo resa più densa. Stessa geometria del rilievo generale (7/7/12), forza da .20 a .36 — e la luce addirittura RIDOTTA a 1px, perché su un bordo scuro un alone bianco largo si legge come una sbavatura invece che come luce. Cioè: la regola "l'ombra si scala con l'oggetto" vale per la FORZA, non automaticamente per la misura. */ --rilievo-g: -1px -1px 5px rgba(255,255,255,.60), 7px 7px 12px rgba(146,127,103,.36); --incasso: inset 7px 7px 12px rgba(146,127,103,.24), inset -2px -2px 5px rgba(255,255,255,.60); --incasso-p: inset 4px 4px 9px rgba(146,127,103,.39), inset -2px -2px 4px rgba(255,255,255,.67); /* ======================================================================== VETRO — LO STANDARD DELL'APP ("glass stile Apple") ======================================================================== Calibrato sul telefono vero il 03/09/2026 con pillola.html, muovendo i cursori sopra contenuti chiari, scuri e colorati. Codice scelto: SB-22-5-170-25-30 velo scuro 22% · sfocatura 5px · colore 170% ombra 25% · bordo 30% · testo bianco QUESTA È LA REGOLA, non un valore di comodo: ogni elemento di vetro dell'app usa queste variabili e nessuno reintroduce numeri propri. Se un giorno il vetro va rivisto, si riapre pillola.html, si ricalibra guardando, e si cambiano SOLTANTO le righe qui sotto: tutto il resto dell'app si adegua da solo. Perché funziona, per non rifare l'errore: la sfocatura è BASSA (5px). Sfocare molto (20-40px) sembra più "vetro" ma riduce ciò che sta sotto a una macchia di colore uniforme, e il vetro diventa una superficie piatta e opaca. Sfocando poco si riconoscono le forme che scorrono sotto: è quello che rende l'effetto vivo invece che finto. ------------------------------------------------------------------ */ --vetro-bg: rgba(30,30,32,.22); --vetro-filtro: blur(5px) saturate(170%); --vetro-bordo: 1px solid rgba(255,255,255,.30); --vetro-ombra: 0 12px 32px -8px rgba(20,14,10,.25), 0 3px 8px -2px rgba(20,14,10,.10); --vetro-testo: #FFFFFF; /* Variante chiara: stessa fisica (sfocatura, bordo, ombra), velo chiaro e testo scuro. Da usare SOLO dove il vetro sta stabilmente su contenuti scuri e serve un elemento chiaro per contrasto — non come alternativa a piacere allo standard qui sopra. */ --vetro-chiaro-bg: rgba(255,251,244,.62); --vetro-chiaro-testo: #4A2E20; /* --shadow-1 era l'ombretta sotto le card bianche. Ora che le superfici hanno lo stesso colore del fondo, quel ruolo lo fa il rilievo: si ridefinisce qui una volta sola e tutti i componenti che la usavano si adeguano da soli, senza toccarne uno. --shadow-2 resta invece un'ombra vera, perché serve a cose che GALLEGGIANO sopra lo sfondo scuro (fogli, pillola di navigazione): lì il rilievo non ha senso, l'elemento non poggia sulla sabbia. */ --shadow-1: var(--rilievo); --shadow-2: 0 2px 8px rgba(60,45,30,.10), 0 16px 36px rgba(60,45,30,.16); --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; /* TIPOGRAFIA — come da design system originale (03/09/2026): SF Pro Display ovunque, non più Fraunces serif. Su iPhone -apple-system È SF Pro, e iOS passa da solo alla variante "Display" (lettere più strette e crenatura più fitta) sopra i 20px circa: per questo display e interfaccia possono condividere la stessa famiglia senza appiattirsi. Scala dal design system — usare queste, non numeri a occhio: Display Large 34/40 600 Body 17/24 400 Headline 28/34 600 Callout 15/20 400 Title 1 22/28 600 Footnote 13/18 400 Title 2 17/22 500 Caption 11/16 400 */ --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", sans-serif; --t-display: 600 34px/40px var(--font-display); --t-headline: 600 28px/34px var(--font-display); --t-title1: 600 22px/28px var(--font-display); --t-title2: 500 17px/22px var(--font-display); --t-body: 400 17px/24px var(--font-ui); --t-callout: 400 15px/20px var(--font-ui); --t-footnote: 400 13px/18px var(--font-ui); --t-caption: 400 11px/16px var(--font-ui); --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --hero-h: 424px; /* altezza totale della foto in home */ /* Qui c'era --hero-sliver (132px): lo scampolo di foto che restava incollato in alto durante lo scroll. Quel comportamento è stato tolto il 4/09/2026 perché la foto ferma finiva sopra le card della Home. */ --hero-bleed: 320px; /* quanto la foto sbocca oltre il bordo superiore, per il rimbalzo elastico */ } /* Travi keeps questa palette chiara indipendentemente dal tema di sistema — è un mondo visivo unico e disegnato, non un'utility light/dark. :root[data-theme="dark"] resta solo per un eventuale toggle futuro in-app. */ :root[data-theme="dark"]{ color-scheme: dark; --bg:#161616; --bg-2:#0E0E0E; --surface:#232323; --surface-2:#2B2B2B; --border:#363636; --text:#F2F2F2; --text-muted:#A3A3A3; --text-faint:#6E6E6E; --accent:#FF6B4E; --accent-2:#FF8F6B; --accent-ink:#1C1C1E; --sakura:#D9A0A0; --amber:#E7B978; --indigo:#8BA0BE; --fogblue:#7E97A2; --good:#79C48F; --glass:rgba(30,30,30,.55); --glass-strong:rgba(30,30,30,.8); --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.32); --shadow-2: 0 2px 6px rgba(0,0,0,.35), 0 20px 48px rgba(0,0,0,.4); } *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;} html,body{margin:0; padding:0;} html{ height:100%; touch-action:pan-y; /* niente pinch-zoom / doppio-tap-zoom in giro per l'app */ background: var(--bg); /* fondamentale in una PWA iOS standalone: senza questo l'elemento html è trasparente/bianco di default, e la WKWebView di iOS dipinge il proprio sfondo (bianco) sotto/oltre il body. */ } body{ background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size:17px; /* Body dello spec: 17/24 (era 15/1.4) */ line-height:24px; min-height:100vh; /* 100vh, non 100%: lo sfondo deve coprire tutti i 956px veri dello schermo, non fermarsi a 894 (vedi la nota su .stage) */ touch-action:pan-y; /* PRIMA qui c'erano overflow:hidden + position:fixed;inset:0 + overscroll-behavior:none, per bloccare del tutto lo scroll della pagina (solo i .scroll interni potevano scorrere). Bloccando anche il "rimbalzo" nativo della pagina a livello di documento, però, iOS sembra non dipingere mai correttamente lo sfondo di html nella striscia riservata all'home indicator in fondo allo schermo — resta sul bianco di default della WKWebView, indipendentemente da qualunque colore impostato via CSS: è la banda bianca fissa che vediamo da giorni. L'app di riferimento (senza questo blocco) non ha questo problema. Ora la pagina può scorrere/rimbalzare normalmente a livello di documento come una pagina web qualunque — nella pratica non si vede nessuno scroll in più, perché .stage riempie già esattamente lo schermo, ma permette a iOS di dipingere quella striscia col colore giusto invece del bianco di default. "height:100%" e non "min-height:100%": serve perché i figli (#app-root, .stage) usano a loro volta height:100% per riempire lo schermo — una percentuale di altezza funziona solo se il genitore ha un'altezza "definita", non "min-height" (che per le percentuali dei figli conta come "auto"). Non toglie la scorribilità: se mai ci fosse contenuto più alto di 100%, uscirebbe comunque visivamente invece di essere tagliato, perché qui non c'è overflow:hidden. */ } #app-root{ height:100vh; /* 100vh e non 100%: vedi la nota lunga su .stage — 100% qui varrebbe 894px invece dei 956px reali dello schermo. NIENTE overflow:hidden qui: l'avevo aggiunto per "contenere" il link di uscita che spuntava fuori, ma bloccare lo scroll/rimbalzo su QUALSIASI contenitore tra html e lo schermo — anche un livello sotto al body — fa tornare la striscia bianca in fondo. Il link di uscita ora sta dentro .scroll della Home (vedi index.html), quindi qui non serve più nessun taglio: .stage/.shell restano già esattamente alti quanto lo schermo da soli, senza bisogno di essere "tagliati" da un contenitore intorno. */ } h1,h2,h3,.display{ font-family: var(--font-display); font-weight:600; letter-spacing:-.01em; text-wrap:balance; } button{ font-family:inherit; } .num{ font-variant-numeric: tabular-nums; } ::selection{ background: var(--accent); color: var(--accent-ink); } @media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } } /* ---------- app shell ---------- */ /* CAUSA DELLA BANDA BIANCA, MISURATA (test.html, 03/09): su questo iPhone in PWA standalone iOS assegna alla pagina un'area di lavoro di 894px ancorata in alto, mentre lo schermo fisico è 956px. La differenza, 62px, è esattamente env(safe-area-inset-top) — l'altezza della barra di stato. Misurato sul device, la stessa altezza vale: 100% -> 894 (e così anche il vecchio --app-vh via JS) 100dvh -> 894 100svh -> 894 -webkit-fill-available -> 894 100vh -> 956 <-- l'unica (con 100lvh) che arriva in fondo Quindi qualunque cosa dimensionata in percentuale si ferma 62px prima del bordo inferiore reale, e quei 62px restano dipinti solo dallo sfondo del body: è la "banda" che sembrava spostarsi da .hero alla pillola al padding, mentre in realtà nessuno di quelli c'entrava — era sempre il contenitore ancorato all'unità sbagliata. NON rimettere 100%/dvh/svh qui, e non rimettere il calcolo JS. */ .stage{ height: 100vh; display:flex; justify-content:center; background: var(--bg-2); padding: 28px 0; overflow:hidden; } .shell{ position:relative; width:100%; max-width:448px; height: 100%; background: var(--bg); box-shadow: var(--shadow-2); border-radius: 34px; overflow:hidden; display:flex; flex-direction:column; } @media (max-width:560px){ .stage{ padding:0; } .shell{ border-radius:0; height:100%; box-shadow:none; max-width:100%; } } /* position:relative + overflow:hidden servono ai FONDALI: stanno su .view e non su .scroll, altrimenti allungano l'area scorribile oltre il contenuto e in fondo alla pagina resta una banda vuota colorata. Qui invece restano fermi mentre il contenuto scorre — che e' anche il comportamento giusto per un fondale. */ .view{ display:none; flex:1; flex-direction:column; min-height:0; position:relative; overflow:hidden; } .view.active{ display:flex; } .scroll{ overflow-y:auto; /* I fondali ambientali sono piu' larghi dello schermo apposta (la sfumatura deve spegnersi PRIMA del bordo del suo riquadro, vedi in fondo). Senza questo, quella larghezza in eccesso rendeva la pagina scorribile di lato e l'app sembrava una pagina web trascinabile a destra e sinistra. */ overflow-x:hidden; flex:1; min-height:0; padding-bottom: calc(88px + env(safe-area-inset-bottom) + var(--sp-4)); /* la pillola galleggia sopra il contenuto, quindi lo scroll le passa sotto: serve questo spazio in coda perché l'ultimo blocco possa arrivare sopra la pillola invece di restarci nascosto dietro. 88px = altezza della pillola (68) + i suoi 10+10 di padding; vedi .tabbar */ overscroll-behavior-y:contain; /* il rimbalzo elastico resta (sta bene), ma non "sfonda" nella pagina sotto */ scrollbar-width:none; /* Firefox: nessuna barra di scroll visibile */ } .scroll::-webkit-scrollbar{ display:none; } /* Safari/Chrome: nessuna barra di scroll visibile */ /* ---------- topbar ---------- */ /* Usata da Itinerario e Mappa (la Home ha la sua .hero-topbar sopra la foto): il padding-top tiene il testo e la lente sotto orario/batteria dell'iPhone. */ .topbar{ display:flex; align-items:center; justify-content:space-between; padding: calc(env(safe-area-inset-top) + 14px) 20px 4px; } .brand{ display:flex; align-items:center; gap:8px; color:var(--text); } .brand svg{ width:20px; height:20px; } .brand span{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; } .icon-btn{ width:38px; height:38px; border-radius:50%; background:var(--surface); box-shadow: var(--rilievo-p); display:flex; align-items:center; justify-content:center; color:var(--text-muted); cursor:pointer; border:none; } .icon-btn svg{ width:17px; height:17px; } /* ---------- Home hero ---------- */ /* La foto occupa tutta la larghezza fin dal bordo superiore, sotto la status bar (grazie a apple-mobile-web-app-status-bar-style=black-translucent). Doveva restare "incollata" in cima con position:sticky (top negativo), ma su questo iPhone la sola presenza di un elemento sticky dentro l'area che scorre fa tornare la banda bianca in fondo, confermato due volte con un solo cambio alla volta: iOS sembra trattare un elemento sticky come segnale per riservare spazio in stile "barra degli strumenti che si nasconde", proprio come quella di Safari — anche qui, standalone o no. Stesso identico effetto visivo, ottenuto invece con un piccolo script (vedi index.html, in fondo) che sposta la foto via transform mentre si scorre: niente position:sticky, niente banda. */ .hero{ position:relative; /* NON static: la foto (.hero-photo) e gli altri elementi dentro sono position:absolute e devono ancorarsi ai bordi di QUESTO box (424px). Con "static" non contano come "genitore di riferimento", quindi finivano per ancorarsi al box grande quanto tutto lo schermo (.shell) invece che alla foto — la foto si spostava fuori vista e si vedeva il colore di riserva pesca al posto suo. "relative" risolve senza riportare "sticky" (che è la causa della banda). */ z-index:2; margin:0; border-radius: 0 0 var(--r-xl) var(--r-xl); height: var(--hero-h); background: #E9A583; box-shadow: 0 14px 28px -10px rgba(20,14,10,.28); } /* La foto (un unico elemento, mai duplicato) è deliberatamente più grande del riquadro hero e sbocca oltre il bordo superiore di --hero-bleed: "background-size" è un valore fisso (non "cover"), quindi ingrandire il margine di sbocco non forza mai un nuovo ricalcolo dello zoom — la foto resta sempre alla stessa scala. A riposo l'eccedenza sta semplicemente sopra, fuori dallo schermo; durante il rimbalzo elastico si vede lei, non il vuoto bianco. */ .hero-photo{ position:absolute; top: calc(-1 * var(--hero-bleed)); left:0; right:0; bottom:0; background-repeat:no-repeat; background-position: center bottom; background-size: auto calc(var(--hero-h) + var(--hero-bleed)); background-image:url('assets/img/hero.jpg'); border-radius: 0 0 var(--r-xl) var(--r-xl); } /* Stessa altezza di sbocco della foto, per non lasciare uno "stacco" netto: sopra al bordo normale della hero resta un tono scuro piatto (uguale al punto più scuro della sfumatura sotto), non un salto da trasparente a scuro. */ .hero-topfade{ position:absolute; z-index:1; top: calc(-1 * var(--hero-bleed)); left:0; right:0; height: calc(var(--hero-bleed) + env(safe-area-inset-top) + 90px); background: linear-gradient(to bottom, rgba(20,14,10,.42) 0, rgba(20,14,10,.42) var(--hero-bleed), rgba(20,14,10,0) calc(var(--hero-bleed) + env(safe-area-inset-top) + 90px)); pointer-events:none; } .hero-topbar{ position:absolute; z-index:4; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding: calc(env(safe-area-inset-top) + 10px) 18px 0; } .hero-topbar .brand{ color:#FFF9EE; } /* Stesso vetro della pillola (blocco VETRO in :root): sta anche lui sopra la foto, con icona chiara. Prima aveva numeri suoi (blur 14, velo bianco 20%) e si vedeva: due vetri diversi nella stessa schermata. */ .icon-btn.glass{ background: var(--vetro-bg); border: var(--vetro-bordo); color: var(--vetro-testo); backdrop-filter: var(--vetro-filtro); -webkit-backdrop-filter: var(--vetro-filtro); } /* Meteo: prima era una pillola piccola, poco leggibile — ingrandita su richiesta (4/09) in una vera card, stesso vetro chiaro standard ma più spazio per temperatura e condizione, icona più grande e riconoscibile. */ .weather-card{ position:absolute; z-index:3; top: calc(env(safe-area-inset-top) + 58px); left:16px; display:flex; align-items:center; gap:12px; background: var(--vetro-chiaro-bg); backdrop-filter: var(--vetro-filtro); -webkit-backdrop-filter: var(--vetro-filtro); border: var(--vetro-bordo); box-shadow: var(--vetro-ombra); border-radius: var(--r-lg); padding:12px 18px 12px 12px; } .weather-card .w-icon{ width:36px; height:36px; flex:none; } .weather-card .w-body{ display:flex; flex-direction:column; } .weather-card .t{ font-family:var(--font-display); font-size:1.5rem; font-weight:600; line-height:1.05; color: var(--vetro-chiaro-testo); } .weather-card .cap{ font-size:.72rem; color:#8A5A42; margin-top:2px; } .hero-botfade{ position:absolute; z-index:1; left:0; right:0; bottom:0; height:58%; background: linear-gradient(to top, rgba(38,22,26,.6), rgba(38,22,26,0) 88%); border-radius: 0 0 var(--r-xl) var(--r-xl); pointer-events:none; } /* Il blocco di testo ha sia un top che un bottom fissi (quindi un'altezza massima certa): non può mai salire sopra la topbar/il meteo, anche con un testo reale più lungo del previsto — semmai si "accorcia" da sopra (overflow:hidden), perdendo per prima la riga meno importante (l'eyebrow), non la città o il conto alla rovescia che contano di più. Il bottom era calc(--hero-sliver + 16px) per lasciare spazio alla foto che si "raccoglieva" in alto durante lo scroll: quel comportamento non c'è più (vedi index.html), e teneva il testo così in alto da finire sotto la card del meteo. Ora il testo sta appoggiato in fondo alla foto, che è anche dove ha senso leggerlo. */ .hero-scrim{ position:absolute; z-index:2; left:0; right:0; top: calc(env(safe-area-inset-top) + 130px); bottom: 20px; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; padding: 0 18px; } .hero-eyebrow{ font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:#F4E6D6; } .hero-city{ font-size:2.05rem; margin:3px 0 0; color:#FFF9EE; } .hero-date{ font-size:.85rem; color:#F4E6D6; margin-top:2px; } .hero-count{ position:relative; margin-top:16px; } .hero-count .big{ font-size:2.5rem; line-height:1; color:#FFF9EE; } .hero-count .lbl{ font-size:.85rem; color:#F4E6D6; margin-top:4px; max-width:250px; } .next-card-DISMESSA{ position:relative; z-index:0; margin: 18px 16px 0; background: var(--glass-strong); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border:1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding:16px; display:flex; gap:12px; align-items:center; } .next-card .glyph{ width:52px; height:52px; border-radius:16px; flex:none; background: linear-gradient(155deg, var(--amber), var(--accent)) center/cover; display:flex; align-items:center; justify-content:center; color:#fff; } .next-card .glyph.has-img svg{ display:none; } .next-card .glyph svg{ width:22px; height:22px; } .next-card .body{ flex:1; min-width:0; } .next-card .eyebrow{ font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); } .next-card .title{ font-family:var(--font-display); font-size:1.15rem; font-weight:600; margin-top:1px; } .next-card .meta{ font-size:.8rem; color:var(--text-muted); margin-top:2px; } .next-card .chev{ color:var(--text-faint); flex:none; } .home-section{ margin: 22px 16px 0; } /* Stessa etichetta piccola in maiuscoletto delle altre sezioni: prima erano titoli grossi in nero che competevano col titolo di pagina. */ .home-section h2{ font-size:.66rem; text-transform:uppercase; letter-spacing:.11em; color:var(--text-muted); font-weight:700; margin:0 0 10px 6px; font-family:var(--font); } /* "Oggi in itinerario": un anello di avanzamento invece della semplice barra piatta di prima — più leggibile a colpo d'occhio, meno "banale". */ .progress-card{ background:var(--surface); border-radius: var(--r-xl); padding:16px; box-shadow: var(--rilievo); display:flex; align-items:center; gap:16px; } .ring-wrap{ position:relative; width:64px; height:64px; flex:none; } .ring{ width:64px; height:64px; transform:rotate(-90deg); } .ring-bg{ fill:none; stroke:var(--surface-2); stroke-width:9; } .ring-fg{ fill:none; stroke:var(--accent); stroke-width:9; stroke-linecap:round; stroke-dasharray:263.9; stroke-dashoffset:263.9; transition: stroke-dashoffset .5s ease; } .ring-pct{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:.95rem; font-weight:600; } .progress-text{ flex:1; min-width:0; } .progress-text .n{ font-family:var(--font-display); font-size:1.2rem; } .progress-text .n small{ font-family:var(--font-ui); font-size:.76rem; color:var(--text-muted); font-weight:500; } .progress-sub{ font-size:.78rem; color:var(--text-muted); margin-top:3px; } /* "Il viaggio in breve": ogni numero ha ora un'icona in un badge colorato, invece di tre numeri nudi affiancati. */ .stat-row{ display:flex; justify-content:space-around; text-align:center; background:var(--surface); border-radius: var(--r-xl); padding:18px 8px; box-shadow: var(--rilievo); } .stat{ display:flex; flex-direction:column; align-items:center; gap:6px; } /* Erano tre pastiglie a gradiente (blu, rosa, ambra): tre colori che non aggiungevano informazione al numero che stava sotto. Monocrome. */ .stat-ico{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--text); background:var(--surface); box-shadow: var(--incasso-p); } .stat-ico svg{ width:16px; height:16px; } .stat-n{ font-family:var(--font-display); font-size:1.25rem; } .stat-l{ font-size:.7rem; color:var(--text-muted); } /* Budget extra: stesso linguaggio del next-card della Home (glifo + info + freccia), invece del box generico di prima. */ .budget-card{ display:flex; align-items:center; gap:13px; cursor:pointer; background:var(--surface); border-radius: var(--r-xl); padding:15px 17px; box-shadow: var(--rilievo); } .budget-ico{ width:26px; flex:none; color:var(--text); display:flex; align-items:center; justify-content:center; } .budget-ico svg{ width:19px; height:19px; } .budget-info{ flex:1; min-width:0; } .budget-info .n{ font-family:var(--font-display); font-size:1.2rem; } .budget-info .budget-sub{ font-size:.78rem; color:var(--text-muted); margin-top:1px; } .budget-card .chev{ color:var(--text-faint); flex:none; } .banner{ margin: 16px 16px 0; background: var(--surface-2); border:1px dashed var(--border); border-radius: var(--r-md); padding: 12px 14px; font-size:.8rem; color:var(--text-muted); } .banner b{ color:var(--text); } /* ---------- day selector ---------- */ /* Ogni giorno è una pillola a sé, con lo standard VETRO esatto — lo stesso materiale della pillola di navigazione in fondo allo schermo (vedi il blocco VETRO in :root e STILE-VETRO.md). Nessun numero locale: se un giorno il vetro si ricalibra, questi si adeguano da soli. Il padding in fondo è generoso di proposito: l'ombra del vetro deve spegnersi sullo sfondo della pagina e non cadere sulla card sotto — era quello a far sembrare le pillole "appiccicate" a un altro piano. */ /* Lo spazio per l'ombra delle pillole sta DENTRO la riga come padding, non fuori come margine: la riga scorre in orizzontale, e il CSS non lascia tagliare su un asse solo — chi scorre in orizzontale taglia anche in verticale. Con overflow:hidden qui, l'ombra delle pillole veniva tranciata di netto sul bordo (8/09/2026). */ .dayrow{ display:flex; gap:9px; overflow-x:auto; padding: 14px 20px 18px; scrollbar-width:none; touch-action:pan-x; } .dayrow::-webkit-scrollbar{ display:none; } /* Le pillole dei giorni erano di vetro come la pillola di navigazione: su fondo chiaro venivano blob grigi enormi. Ora sono di sabbia come tutto il resto e sporgono col rilievo — misura piccola, tarata a parte. Il giorno SCELTO non sporge: SPROFONDA. È la differenza fra un tasto da premere e un tasto premuto, e si capisce a colpo d'occhio quale giorno stai guardando senza affidarsi al solo colore. */ .daypill{ position:relative; overflow:hidden; /* per l'interruttore aptico steso sopra */ flex:none; width:46px; padding:13px 0 12px; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--rilievo-p); text-align:center; cursor:pointer; transition: box-shadow .16s ease; } .daypill .dw{ font-size:.57rem; text-transform:uppercase; letter-spacing:.05em; color: var(--text-faint); font-weight:600; } .daypill .dn{ font-family:var(--font-display); font-size:1.02rem; margin-top:3px; color: var(--text-muted); } .daypill.active{ background: var(--accent); box-shadow: inset 4px 4px 11px rgba(150,58,4,.74), inset -2px -2px 6px rgba(255,220,190,.28); } .daypill.active .dw{ color: rgba(255,255,255,.75); } .daypill.active .dn{ color:#fff; } /* il dito che preme affonda qualsiasi pillola, per un attimo */ .daypill:active{ box-shadow: var(--incasso-p); } /* riga con il tasto Cammina */ .azioni-giorno{ display:flex; gap:8px; align-items:center; padding: 2px 20px 0; } /* ---------- LE TESSERE DELLA GIORNATA ---------- La riga con la miniatura a sinistra e il testo a destra è sparita: era il contenitore più visto del mondo, diceva solo "qui dentro c'è qualcosa". Adesso l'illustrazione È la tappa, a tutta larghezza, e l'ALTEZZA della tessera è la durata — mezz'ora è bassa, due ore sono alte. La forma della giornata si legge senza numeri. Una tappa FATTA perde l'illustrazione e resta incassata nella pagina: l'ingombro c'è ancora (quel tempo è stato speso) ma non chiede più attenzione. */ /* Il respiro fra una tessera e l'altra e' SEMPRE questo, che ci sia o no uno spostamento in mezzo. Prima lo spazio lo faceva la riga dello spostamento: dove non c'era (due tappe di fila senza viaggio) le tessere si toccavano. */ .stoplist{ padding: 14px 20px 0; display:flex; flex-direction:column; gap:14px; } /* Stesso rilievo di tutto il resto: le tessere illustrate non sono un materiale a parte, sporgono dalla pagina come i gruppi e le pillole. */ /* IL RILIEVO SU UNA TESSERA CON L'ILLUSTRAZIONE. L'illustrazione arriva fino al bordo: nessuna cornice chiara intorno. Il rilievo sta TUTTO FUORI — luce in alto a sinistra, ombra in basso a destra — come su ogni altro oggetto dell'app. Serve però una taratura sua: il rilievo standard è calibrato su oggetti di sabbia, dove basta pochissimo perché il confronto è fra sabbia e sabbia. Qui il bordo della tessera è scuro, e accanto a quel salto di contrasto un'ombra al 20% sparisce. Stessa direzione, stesso rapporto fra luce e ombra, solo più marcato: è la regola dei componenti grandi, l'ombra si scala con l'oggetto. */ .stopcard{ position:relative; border-radius: var(--r-xl); overflow:hidden; display:flex; background-size:cover; background-position:center 55%; cursor:pointer; box-shadow: var(--rilievo-g); } .stopcard .velo{ position:absolute; inset:0; background: linear-gradient(to top, rgba(26,17,10,.88) 0%, rgba(26,17,10,.66) 30%, rgba(26,17,10,.14) 62%, rgba(26,17,10,0) 88%); } /* flex:1 invece di height:100%: cosi' la durata fissa l'altezza MINIMA della tessera, ma se il testo e' piu' lungo la tessera cresce invece di tagliarlo. Prima era height fissa e i titoli lunghi delle tappe brevi (il check-in in hotel, per dirne una) sparivano sotto il bordo. */ .stopcard .in{ position:relative; z-index:1; flex:1; padding:13px 15px; display:flex; flex-direction:column; justify-content:space-between; gap:10px; color:#fff; } .stopcard .alto{ display:flex; align-items:flex-start; justify-content:space-between; } .stopcard .ora{ font-size:.76rem; font-weight:600; opacity:.86; margin-bottom:2px; } .stopcard .tit{ font-family:var(--font-display); font-size:1.34rem; font-weight:600; letter-spacing:-.022em; line-height:1.1; text-shadow:0 1px 10px rgba(0,0,0,.4); } .stopcard .zona{ font-size:.75rem; opacity:.85; margin-top:2px; } .stopcard .dur{ font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text); background:rgba(255,255,255,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); padding:4px 9px; border-radius:var(--r-pill); } /* L'avviso del motore non è testo perso in mezzo: è una fascia sul fondo della tessera, larga quanto lei. */ .stopcard .bandiera{ position:absolute; z-index:2; left:0; right:0; bottom:0; font-size:.73rem; font-weight:600; padding:7px 15px; background: var(--amber); color:#3B2A06; } .stopcard.grave .bandiera{ background: var(--accent); color:#fff; } .stopcard.done{ background-image:none !important; background: var(--surface); box-shadow: var(--incasso); } .stopcard.done .velo{ display:none; } .stopcard.done .in{ color:var(--text-faint); } .stopcard.done .tit{ color:var(--text-faint); text-shadow:none; } .stopcard.done .dur{ background:rgba(0,0,0,.05); color:var(--text-faint); } /* LO SPOSTAMENTO NON STA PIU' FRA LE TESSERE. Prima era un filo sottile con una scritta minuscola in mezzo a due tessere: illeggibile, e sprecava lo spazio che invece serve a far respirare. Ora e' una targhetta DENTRO la tessera di destinazione, in alto accanto alla durata — e' un'informazione su come ci arrivi, quindi appartiene al posto dove arrivi. Nei riferimenti che abbiamo scelto l'informazione sta sempre dentro la scheda, mai negli spazi vuoti fra una scheda e l'altra. */ .stopcard .arrivo{ display:inline-flex; align-items:center; gap:5px; font-size:.66rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:rgba(20,14,9,.42); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); padding:4px 9px; border-radius:var(--r-pill); } .stopcard .arrivo svg{ width:12px; height:12px; } .stopcard.done .arrivo{ background:rgba(0,0,0,.05); color:var(--text-faint); } .stopcard .alto .destra{ display:flex; align-items:center; gap:6px; } /* IL TEMPO LIBERO invece resta fra le tessere, perche' quello E' uno spazio vuoto nella giornata: si rappresenta con dello spazio vuoto, non con una riga. Solo aria e una scritta piccola al centro. */ .respiro{ display:flex; align-items:center; justify-content:center; padding:14px 0 12px; color:var(--text-faint); font-size:.74rem; letter-spacing:.04em; } .quickdone{ flex:none; width:30px; height:30px; border-radius:50%; border:1px solid rgba(255,255,255,.45); background:rgba(255,255,255,.24); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; } .quickdone svg{ width:15px; height:15px; } .quickdone.on{ background:var(--text); border-color:var(--text); color:#fff; } .stopcard.done .quickdone{ background:var(--text); border-color:var(--text); } .chip{ display:inline-flex; align-items:center; gap:4px; font-size:.72rem; color:var(--text-muted); background:var(--surface); box-shadow: var(--incasso-p); border-radius:var(--r-pill); padding:4px 10px 4px 8px; } .chip svg{ width:11px; height:11px; } .addbar{ margin:14px 16px 0; padding:13px; border-radius: var(--r-lg); border:1.5px dashed var(--border); color:var(--text-muted); text-align:center; font-size:.85rem; cursor:pointer; background:transparent; display:flex; align-items:center; justify-content:center; gap:6px; width:calc(100% - 32px); } .recalc{ margin:12px 16px 0; display:flex; align-items:center; justify-content:center; gap:7px; background:var(--text); color:var(--bg); border-radius:var(--r-pill); padding:11px; font-size:.85rem; font-weight:600; cursor:pointer; border:none; } /* ---------- map view ---------- Ridisegnata il 4/09: schermo intero invece di una mappa piccola incassata con una lista sotto. Itinerario resta l'unica fonte di verità su "che giorno stiamo guardando" — qui non c'è più nessun selettore di giorno proprio, solo una pillola che RIPORTA il giorno scelto in Itinerario. */ .mapfull{ position:relative; flex:1; min-height:0; } /* z-index:0 NON è decorativo: Leaflet dà ai suoi livelli interni z-index 400-700, e senza un contesto di impilamento qui quelli finivano SOPRA la pillola di navigazione (z-index 30) — la mappa se la mangiava, e da lì non si poteva più cambiare pagina. Con z-index:0 tutto Leaflet resta chiuso dentro la mappa, sotto pillola e card. NON toglierlo. */ #map{ position:absolute; inset:0; z-index:0; } .leaflet-container{ background: var(--surface-2); font-family: var(--font-ui); } .leaflet-control-zoom{ margin-top: calc(env(safe-area-inset-top) + 64px) !important; } .leaflet-control-zoom a{ border-radius:0 !important; color:var(--text) !important; border-color:var(--border) !important; } .leaflet-control-attribution{ font-size:9px !important; background:rgba(255,255,255,.7) !important; } .pin-num{ display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--accent); color:#fff; font: 700 12px/1 var(--font-ui); border:2px solid #fff; box-shadow: 0 2px 6px rgba(20,14,10,.35); } .pin-num.sel{ background:var(--indigo); width:32px; height:32px; font-size:14px; box-shadow: 0 3px 12px rgba(20,14,10,.45); } .map-topbar{ position:absolute; z-index:3; left:0; right:0; top:0; display:flex; justify-content:center; padding: calc(env(safe-area-inset-top) + 12px) 16px 0; pointer-events:none; } .map-daypill{ pointer-events:auto; cursor:pointer; background: var(--vetro-bg); backdrop-filter: var(--vetro-filtro); -webkit-backdrop-filter: var(--vetro-filtro); border: var(--vetro-bordo); box-shadow: var(--vetro-ombra); color: var(--vetro-testo); border-radius: var(--r-pill); padding:8px 18px; font-size:.82rem; font-weight:600; } /* La card della tappa a fuoco: una riga sola, appoggiata SOPRA la pillola di navigazione (che resta sempre raggiungibile). Si tocca la card per aprire la tappa, le frecce ai lati per scorrere le tappe del giorno. */ /* Rimette in quadro tutte le tappe del giorno dopo che ci si è persi zoomando dentro. */ .map-fit{ position:absolute; z-index:3; right:16px; bottom: calc(175px + env(safe-area-inset-bottom)); width:42px; height:42px; border-radius:50%; border:1px solid rgba(20,14,10,.10); background: var(--vetro-chiaro-bg); color: var(--vetro-chiaro-testo); backdrop-filter: var(--vetro-filtro); -webkit-backdrop-filter: var(--vetro-filtro); box-shadow: var(--vetro-ombra); display:flex; align-items:center; justify-content:center; cursor:pointer; } .map-fit svg{ width:19px; height:19px; } .map-card{ position:absolute; z-index:3; left:14px; right:14px; bottom: calc(95px + env(safe-area-inset-bottom)); display:flex; align-items:center; gap:4px; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-2); border:1px solid var(--border); padding:8px; } .map-nav{ flex:none; width:30px; height:30px; border-radius:50%; border:none; background:var(--surface-2); color:var(--text-muted); display:flex; align-items:center; justify-content:center; cursor:pointer; } .map-nav svg{ width:14px; height:14px; } .map-nav.prev svg{ transform:scaleX(-1); } .map-card-body{ flex:1; min-width:0; display:flex; gap:10px; align-items:center; cursor:pointer; } .map-card-body .thumb{ flex:none; width:46px; height:46px; border-radius:13px; background-size:cover; background-position:center; box-shadow: inset 0 0 0 1px rgba(20,15,10,.08); } .map-card-body .info{ flex:1; min-width:0; } .map-card-body .title{ font-weight:600; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .map-card-body .sub{ font-size:.74rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; } .map-card-body .tempo{ font-size:.74rem; color:var(--accent); font-weight:600; margin-top:2px; display:flex; align-items:center; gap:4px; white-space:nowrap; overflow:hidden; } .map-card-body .tempo svg{ width:12px; height:12px; } .map-card-body .chev{ flex:none; color:var(--text-faint); width:16px; height:16px; } .map-card-body .empty{ font-size:.82rem; color:var(--text-muted); padding:10px 4px; text-align:center; width:100%; } .linkbtn{ flex:1; text-align:center; font-size:.76rem; padding:8px 6px; border-radius:var(--r-md); border:1px solid var(--border); color:var(--text); text-decoration:none; background:var(--surface-2); display:flex; align-items:center; justify-content:center; gap:5px; } .linkbtn svg{ width:13px; height:13px; } /* ---------- tab bar ---------- */ /* Prima era position:absolute, "flottante" sopra il contenuto, ancorata al fondo con env(safe-area-inset-bottom). NOTA (03/09): per un giorno ho sospettato che fosse questa combinazione — elemento assoluto ancorato alla safe-area in una PWA standalone — a causare la banda bianca in fondo, e avevo tolto il galleggiamento mettendo la pillola "in fila" nel layout. Era sbagliato: la banda era causata dall'altezza in percentuale (vedi la nota su .stage, 100% = 894 invece di 956), e la pillola non c'entrava nulla. In compenso quella modifica ne aveva creata un'altra, di banda: la pillola in fila si portava dietro 122px di sfondo pieno con un taglio netto dove finiva il contenuto. Quindi la pillola è tornata a galleggiare, come disegnata — serve anche perché il suo backdrop-filter possa sfocare qualcosa. */ .tabbar{ position:absolute; left:0; right:0; bottom:0; z-index:30; display:flex; justify-content:center; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); pointer-events:none; /* i tocchi passano al contenuto sotto; solo la pillola li prende */ } .tabbar-inner{ pointer-events:auto; display:flex; gap:2px; /* Vetro standard dell'app — vedi il blocco VETRO in :root. Nessun numero qui: la pillola è l'elemento su cui lo standard è stato calibrato, e da lì lo eredita come tutti gli altri. */ background: var(--vetro-bg); backdrop-filter: var(--vetro-filtro); -webkit-backdrop-filter: var(--vetro-filtro); border: var(--vetro-bordo); box-shadow: var(--vetro-ombra); border-radius: var(--r-pill); padding:6px; } .tab{ border:none; background:transparent; color: var(--vetro-testo); display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 10px; border-radius: var(--r-pill); cursor:pointer; font-size:.58rem; font-weight:600; /* Le icone seguono da sole: sono disegnate con stroke="currentColor". Padding ridotto due volte (era 20px) per far stare cinque voci nella stessa pillola: Preferiti prima, Altro poi. */ } .tab .ico{ display:flex; } .tab svg{ width:19px; height:19px; } .tab.active{ background: var(--accent); color:#fff; } /* Avviso "senza rete". Deliberatamente NON di vetro: è un avviso di stato, deve leggersi al primo colpo d'occhio sopra qualunque sfondo — come .next-card e .backdrop, sta fuori dallo standard di proposito. */ .offline-pill{ position:absolute; z-index:35; left:50%; transform:translateX(-50%); top: calc(env(safe-area-inset-top) + 8px); display:flex; align-items:center; gap:6px; background: var(--indigo); color:#fff; border-radius: var(--r-pill); padding:7px 14px; font-size:.72rem; font-weight:600; white-space:nowrap; box-shadow: var(--shadow-2); } .offline-pill svg{ width:13px; height:13px; } /* ---------- floating add ---------- */ .fab{ position:absolute; right:20px; bottom: calc(100px + env(safe-area-inset-bottom)); z-index:20; width:52px; height:52px; border-radius:50%; background: var(--accent); color:#fff; border:none; box-shadow: var(--shadow-2); display:flex; align-items:center; justify-content:center; cursor:pointer; transform: translateZ(0); -webkit-transform: translateZ(0); will-change: transform; } .fab svg{ width:22px; height:22px; } /* ---------- sheet ---------- */ .backdrop{ position:fixed; inset:0; background:rgba(20,17,12,.42); backdrop-filter: blur(2px); z-index:40; opacity:0; pointer-events:none; transition: opacity .25s ease; touch-action:none; /* il dito sulla parte scura non trascina la pagina sotto */ } .backdrop.show{ opacity:1; pointer-events:auto; } /* LA BANDA IN FONDO A OGNI PAGINA — la vera causa, trovata il 9/09/2026. Nell'app ci sono una decina di fogli. Da chiusi stanno parcheggiati sotto lo schermo (translateY(100%)), ma un elemento fuori campo PROIETTA COMUNQUE LA SUA OMBRA: con "0 16px 36px" l'alone arriva una ventina di pixel SOPRA il bordo del foglio, cioè dentro lo schermo. Dieci fogli sovrapposti = dieci ombre sommate, e in fondo a ogni pagina compariva una fascia scura con gli angoli arrotondati (gli angoli del foglio!) che non scorreva mai, perché non faceva parte della pagina. Rimedio: da chiuso il foglio è visibility:hidden — non disegna niente, ombra compresa. La visibilità torna subito quando si apre, e se ne va solo a scivolata finita (transition 0s ritardata di .3s). */ .sheet{ position:fixed; left:50%; bottom:0; transform: translate(-50%, 100%); width:100%; max-width:448px; background: var(--surface); border-radius: 26px 26px 0 0; z-index:41; box-shadow: var(--shadow-2); max-height:92vh; display:flex; flex-direction:column; visibility:hidden; transition: transform .3s cubic-bezier(.32,.72,.35,1), visibility 0s linear .3s; overflow:hidden; /* niente può uscire di lato dal foglio */ } .sheet.show{ transform: translate(-50%, 0); visibility:visible; transition: transform .3s cubic-bezier(.32,.72,.35,1), visibility 0s; } /* Non è più solo un ornamento: è la maniglia da cui si tira giù il foglio per chiuderlo (vedi rendiTrascinabile in js/app.js). */ .sheet-grip{ width:40px; height:5px; background:var(--text-faint); border-radius:99px; margin:9px auto 0; opacity:.6; } .sheet-head{ display:flex; justify-content:space-between; align-items:center; padding:12px 18px 4px; } .sheet-head .x{ background:var(--surface-2); border:none; width:30px; height:30px; border-radius:50%; color:var(--text-muted); cursor:pointer; font-size:15px; line-height:1; } .sheet-body{ flex:1; min-height:0; touch-action: pan-y; /* solo su e giù: il foglio non si trascina di lato */ overflow-y:auto; overflow-x:hidden; /* NIENTE trascinamento laterale: è la cosa che faceva sembrare il foglio una pagina web invece di un'app, e che tagliava i campi a destra. La causa vera è più sotto (input[type=time] su iOS). */ padding: 6px 20px 12px; overscroll-behavior: contain; /* lo scroll del foglio non "sfonda" nella pagina sotto */ } /* Il piede resta agganciato in fondo al foglio: Elimina e Salva si vedono sempre, senza doverli andare a cercare scorrendo. */ .sheet-footer{ flex:none; padding: 10px 20px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--border); background: var(--surface); } .sheet-footer .sheet-actions{ margin-top:0; } /* Testa illustrata del foglio: la foto della tappa con il titolo sopra, al posto di aprire su un elenco di campi grigi. Compare solo su una tappa che esiste già (per una nuova non c'è ancora niente da illustrare). */ .sheet-hero{ position:relative; height:96px; border-radius: var(--r-lg); overflow:hidden; margin-bottom:2px; background: var(--surface-2); } .sheet-hero-img{ position:absolute; inset:0; background-size:cover; background-position:center; } .sheet-hero-scrim{ position:absolute; inset:0; background: linear-gradient(to top, rgba(24,16,12,.78), rgba(24,16,12,.05) 72%); } .sheet-hero-txt{ position:absolute; left:14px; right:14px; bottom:12px; color:#FFF9EE; } .sheet-hero-txt .t{ font-family:var(--font-display); font-weight:600; font-size:1.15rem; line-height:1.2; } .sheet-hero-txt .s{ font-size:.78rem; opacity:.85; margin-top:2px; } .sheet-hero-prio{ position:absolute; top:10px; right:10px; display:flex; align-items:center; gap:5px; background: var(--vetro-bg); backdrop-filter: var(--vetro-filtro); -webkit-backdrop-filter: var(--vetro-filtro); border: var(--vetro-bordo); color: var(--vetro-testo); border-radius: var(--r-pill); padding:5px 10px; font-size:.68rem; font-weight:600; } .sheet-hero-prio svg{ width:12px; height:12px; } .lock-note{ background: var(--surface-2); border:1px solid var(--border); border-radius: var(--r-md); padding:12px 14px; font-size:.8rem; color:var(--text-muted); margin-top:8px; line-height:1.4; } .sheet-body.locked .field input, .sheet-body.locked .field textarea, .sheet-body.locked .pickrow{ opacity:.55; pointer-events:none; } .locked-chip{ color:#8A5A2E; background:#FBEFE3; border-color:#E7B978; } .field{ margin-top:13px; } .field label{ font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted); display:block; margin-bottom:5px; font-weight:600; } .field input[type=text], .field input[type=time], .field input[type=number], .field textarea{ width:100%; max-width:100%; min-width:0; border:1px solid var(--border); background:var(--surface-2); border-radius:14px; padding:11px 14px; font-family:inherit; font-size:.95rem; color:var(--text); transition: border-color .15s ease, background .15s ease; } /* iOS dà agli input di data/ora una larghezza intrinseca che vince sul 100%: senza questo il campo "Orario di arrivo" usciva dal foglio a destra e si poteva trascinare tutto di lato. */ .field input[type=time], .field input[type=number]{ -webkit-appearance:none; appearance:none; text-align:left; } .field input:focus, .field textarea:focus{ outline:none; border-color: var(--accent); background: var(--surface); } .field textarea{ resize:vertical; min-height:70px; } /* Titoletto che separa i blocchi del foglio, per non avere una colonna indistinta di campi uno sotto l'altro. */ .sheet-sez{ display:flex; align-items:center; gap:8px; margin:16px 0 2px; font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:var(--text-faint); font-weight:600; } .sheet-sez::after{ content:""; flex:1; height:1px; background:var(--border); } .pickrow{ display:flex; gap:7px; flex-wrap:wrap; } .pick{ border:1px solid var(--border); background:var(--surface-2); border-radius:var(--r-pill); padding:8px 13px; font-size:.82rem; cursor:pointer; color:var(--text-muted); display:flex; align-items:center; gap:6px; } .pick svg{ width:14px; height:14px; } .pick.sel{ background:var(--text); border-color:var(--text); color:var(--bg); } .row2{ display:flex; gap:10px; } .row2 > .field{ flex:1; } .sheet-actions{ display:flex; gap:10px; margin-top:20px; } .btn{ flex:1; padding:13px; border-radius:var(--r-pill); border:none; font-weight:600; font-size:.9rem; cursor:pointer; } .btn.primary{ background:var(--accent); color:#fff; } .btn.ghost{ background:var(--surface-2); color:var(--text); border:1px solid var(--border); } .btn.danger{ background:transparent; color:#B4503C; } /* Tasto "segna come completata": prima in fondo al foglio come un interruttore fra tanti, ora subito sotto l'intestazione, grande e diretto — è l'azione richiesta più spesso durante il viaggio vero. */ .done-big{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%; margin-top:9px; padding:13px; border-radius:var(--r-lg); border:1.5px solid var(--border); background:var(--surface-2); color:var(--text); font-size:.95rem; font-weight:600; cursor:pointer; } .done-big svg{ width:19px; height:19px; } .done-big.on{ background: var(--good); border-color:var(--good); color:#fff; } .riga-azioni{ display:flex; gap:8px; align-items:stretch; margin-top:9px; } .riga-azioni .done-big{ flex:1; margin-top:0; } .tondo-link{ flex:none; width:52px; border-radius:var(--r-lg); border:1.5px solid var(--border); background:var(--surface-2); color:var(--text); display:flex; align-items:center; justify-content:center; text-decoration:none; } .tondo-link svg{ width:20px; height:20px; } /* Ricerca del posto nel foglio: risultati Nominatim in un piccolo elenco a tendina sotto il campo. */ .cerca-risultati{ margin-top:6px; border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; max-height:220px; overflow-y:auto; } .cerca-riga{ padding:10px 12px; border-bottom:1px solid var(--border); cursor:pointer; } .cerca-riga:last-child{ border-bottom:none; } .cerca-riga:active{ background:var(--surface-2); } .cerca-riga .t{ font-size:.88rem; font-weight:600; } .cerca-riga .s{ font-size:.74rem; color:var(--text-muted); margin-top:1px; } /* Sezione "Altri dettagli": raccoglie i campi meno urgenti (categoria, trasporto, note) dietro un tasto, per accorciare il foglio in apertura. */ .altro-toggle{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; margin-top:10px; padding:9px; border:none; background:transparent; color:var(--text-muted); font-size:.82rem; font-weight:600; cursor:pointer; } .altro-toggle svg{ width:13px; height:13px; transition: transform .2s ease; } .altro-toggle.open svg{ transform:rotate(90deg); } .altro-body{ padding-top:2px; } /* ---------- budget ---------- */ .budget-total{ font-family:var(--font-display); font-size:2rem; text-align:center; padding:10px 0 16px; } .budget-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:6px; } .budget-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--surface-2); border-radius:var(--r-md); padding:10px 12px; } .budget-item .bi-main{ min-width:0; } .budget-item .bi-title{ font-size:.88rem; font-weight:600; } .budget-item .bi-who{ font-size:.72rem; color:var(--text-muted); margin-top:1px; } .budget-item .bi-amount{ font-family:var(--font-display); font-size:1rem; flex:none; } .budget-item .bi-del{ flex:none; border:none; background:transparent; color:var(--text-faint); cursor:pointer; padding:4px; } .budget-empty{ text-align:center; color:var(--text-muted); font-size:.85rem; padding:14px 0; } .switch{ width:42px; height:24px; border-radius:99px; background:var(--border); position:relative; cursor:pointer; flex:none; } .switch.on{ background:var(--good); } .switch .knob{ position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; transition:left .18s ease; } .switch.on .knob{ left:20px; } .toast{ position:fixed; left:50%; bottom:150px; transform:translateX(-50%) translateY(20px); z-index:60; background: var(--text); color:var(--bg); padding:10px 18px; border-radius:var(--r-pill); font-size:.82rem; opacity:0; pointer-events:none; transition: all .25s ease; box-shadow: var(--shadow-2); } .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); } /* ---------- login gate ---------- */ #login-gate{ position:fixed; inset:0; z-index:999; display:flex; align-items:center; justify-content:center; background:var(--bg); padding:24px; } .login-card{ width:100%; max-width:360px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl,22px); padding:32px 26px; box-shadow:var(--shadow-lg,0 12px 30px rgba(0,0,0,.08)); } .login-card .brand{ justify-content:center; margin-bottom:6px; } .login-card .brand svg{ width:26px; height:26px; color:var(--accent); } .login-card .brand span{ font-family:var(--font-display); font-size:1.3rem; } .login-sub{ text-align:center; color:var(--text-muted); font-size:.82rem; margin-bottom:22px; } .login-card .field{ margin-bottom:14px; } .login-card label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); display:block; margin-bottom:6px; } .login-card input{ width:100%; box-sizing:border-box; padding:11px 13px; border-radius:12px; border:1px solid var(--border); background:var(--bg); font-size:.95rem; font-family:var(--font-ui); color:var(--text); } .login-card input:focus{ outline:none; border-color:var(--accent); } #login-error{ color:#B23A3A; font-size:.8rem; min-height:1.1em; margin:2px 0 10px; } #login-submit{ width:100%; padding:13px; border:none; border-radius:14px; background:var(--accent); color:var(--accent-ink); font-size:.95rem; font-weight:600; font-family:var(--font-ui); cursor:pointer; margin-top:6px; } #login-submit:disabled{ opacity:.6; } .login-note{ text-align:center; font-size:.7rem; color:var(--text-muted); margin-top:16px; line-height:1.4; } [hidden]{ display:none !important; } .signout-link{ display:block; text-align:center; font-size:.75rem; color:var(--text-muted); margin:6px 0 90px; cursor:pointer; text-decoration:underline; text-underline-offset:2px; } /* ---------- stato della giornata ---------- */ /* Il pannello che dice se si sta rispettando il piano. Compare solo nel giorno in cui vi trovate: negli altri non avrebbe senso. */ .stato-g{ margin: 12px 16px 0; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--rilievo); } .stato-g.tardi{ border-color:#F0C9C2; background: linear-gradient(180deg,#FFF6F4,var(--surface) 60%); } .stato-g.bene{ border-color:#CFE6D8; background: linear-gradient(180deg,#F4FBF6,var(--surface) 60%); } .stato-g .cap{ display:flex; align-items:baseline; gap:8px; } .stato-g .titolo{ font: var(--t-title2); flex:1; } .stato-g .fine{ font-size:12px; color:var(--text-muted); font-variant-numeric:tabular-nums; } .stato-g .riga{ display:flex; align-items:center; gap:9px; margin-top:9px; padding-top:9px; border-top:1px solid var(--border); font-size:13px; } .stato-g .riga:first-of-type{ border-top:none; } .stato-g .ora{ flex:none; width:46px; font-weight:700; font-variant-numeric:tabular-nums; } .stato-g .che{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .stato-g .esito{ flex:none; font-size:11px; font-weight:700; padding:2px 7px; border-radius:99px; } .e-chiusa{ background:#FBE3DE; color:#A3341F; } .e-incompleta{ background:#FCEEDB; color:#8A5A18; } .e-stretta{ background:#FCF6DB; color:#7A6318; } .stato-g .consiglio{ margin-top:11px; padding:10px 12px; border-radius:var(--r-md); background: var(--surface-2); font-size:13px; line-height:1.45; } .stato-g .consiglio b{ font-weight:600; } /* comando per guardare una giornata a un orario diverso da adesso */ /* Era un rettangolo tratteggiato a tutta larghezza che pesava come un titolo: su un giorno futuro è la PRIMA cosa che si vedeva, prima ancora della giornata. È un invito, non un annuncio: una riga sola, allineata a sinistra come il resto del testo. */ .prova-apri{ display:inline-flex; align-items:center; gap:7px; margin:10px 20px 0; padding:0; border:none; background:transparent; text-align:left; color:var(--text-muted); font:var(--t-footnote); font-weight:600; text-decoration:underline; text-decoration-color:var(--border); text-underline-offset:4px; } .prova-apri.dentro{ width:100%; margin:11px 0 0; } .prova-barra{ display:flex; align-items:center; gap:11px; margin:12px 16px 0; padding:9px 12px; background:var(--surface-2); border-radius:var(--r-md); } .prova-barra b{ flex:none; width:52px; font-variant-numeric:tabular-nums; font-weight:700; } .prova-barra input{ flex:1; accent-color: var(--accent); } .prova-barra button{ flex:none; border:none; background:transparent; color:var(--text-muted); font-size:15px; padding:2px 4px; } .prova-barra + .stato-g{ margin-top:8px; } /* la riga "siete a X dalla prossima tappa" dentro il pannello della giornata */ .qui-riga{ display:flex; align-items:center; gap:8px; margin-top:11px; padding:9px 11px; background: rgba(70,82,103,.08); border-radius: var(--r-md); font-size:13px; line-height:1.35; } .qui-riga svg{ width:15px; height:15px; flex:none; color: var(--indigo); } .qui-riga > div{ flex:1; } .qui-off{ flex:none; border:none; background:transparent; color:var(--text-muted); font-size:11px; text-decoration:underline; padding:2px; } .prova-apri.gps{ display:flex; align-items:center; justify-content:center; gap:7px; color: var(--indigo); border-color: rgba(70,82,103,.3); } .prova-apri.gps svg{ width:14px; height:14px; } /* il pallino "sono qui" sulla mappa */ .gps-dot{ width:18px; height:18px; border-radius:50%; background: #2C7BE5; border:3px solid #fff; box-shadow: 0 0 0 6px rgba(44,123,229,.18), 0 2px 6px rgba(20,14,10,.35); } .field .aiuto{ font: var(--t-caption); color: var(--text-muted); margin-top:5px; line-height:1.4; } /* pallino di priorità accanto al titolo nella lista delle tappe */ .prio-mark{ display:inline-flex; vertical-align:-2px; margin-right:5px; } .prio-mark svg{ width:13px; height:13px; } .prio-top{ color: var(--accent); } .prio-extra{ color: var(--text-faint); } .consiglio .sposta{ display:block; width:100%; margin-top:9px; padding:9px; border:none; border-radius:var(--r-sm); background:var(--accent); color:#fff; font: var(--t-footnote); font-weight:700; font-family:var(--font-ui); } /* ---------- Preferiti ---------- */ .fav-groups{ padding: 8px 16px 24px; } .fav-city-heading{ font-family:var(--font-display); font-weight:600; font-size:.92rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin: 18px 2px 8px; } .fav-city-heading:first-child{ margin-top:6px; } .fav-card{ display:flex; gap:12px; align-items:center; background:var(--surface); border-radius: var(--r-lg); padding:12px; box-shadow: var(--shadow-1); margin-bottom:10px; } .fav-card .thumb{ flex:none; width:58px; height:58px; border-radius:16px; background-size:cover; background-position:center; box-shadow: inset 0 0 0 1px rgba(20,15,10,.08); } .fav-card .content{ flex:1; min-width:0; } .fav-card .title{ font-family:var(--font-display); font-size:.98rem; font-weight:600; } .fav-card .sub{ font-size:.76rem; color:var(--text-muted); margin-top:1px; } .fav-card .fav-notes{ font-size:.76rem; color:var(--text-muted); margin-top:4px; font-style:italic; } .fav-pos{ display:flex; align-items:center; gap:4px; font-size:.7rem; color:var(--text-faint); margin-top:5px; } .fav-pos.ok{ color: var(--good); } .fav-pos svg{ width:11px; height:11px; } .fav-actions{ flex:none; display:flex; flex-direction:column; align-items:stretch; gap:6px; } .fav-plan{ border:none; border-radius:var(--r-pill); background:var(--accent); color:#fff; font-weight:600; font-size:.76rem; padding:7px 12px; cursor:pointer; white-space:nowrap; } .fav-del{ border:none; background:transparent; color:var(--text-faint); font-size:.9rem; cursor:pointer; } /* Pianificare un preferito: opzioni consigliate dal motore (già verificate) più un'opzione manuale di riserva. */ .assign-fav-title{ font-family:var(--font-display); font-size:1.1rem; font-weight:600; margin-bottom:2px; } .assign-fav-sub{ font-size:.8rem; color:var(--text-muted); margin-bottom:14px; } .assign-lead{ font-size:.82rem; color:var(--text-muted); margin:0 0 10px; } .assign-opt{ display:block; width:100%; text-align:left; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); padding:12px 14px; margin-bottom:8px; cursor:pointer; } .assign-opt .d{ font-weight:600; font-size:.92rem; } .assign-opt .c{ font-size:.76rem; color:var(--text-muted); } .assign-opt .fine{ font-size:.76rem; color:var(--good); margin-top:3px; font-weight:600; } .assign-manuale{ margin-top:16px; padding-top:14px; border-top:1px solid var(--border); } .assign-manuale label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); display:block; margin-bottom:6px; } .assign-manuale input[type=time]{ width:100%; border:1px solid var(--border); background:var(--surface-2); border-radius:var(--r-md); padding:11px 12px; font-family:inherit; font-size:.92rem; color:var(--text); margin-bottom:12px; } /* APTICO — vedi la nota lunga in js/app.js. Un vero interruttore di sistema, invisibile, steso sopra la pillola del giorno: il dito tocca LUI, e iOS suona il suo "tick". Non deve avere appearance:none, altrimenti smette di essere un controllo di sistema e l'aptico non parte: si rende solo trasparente e si ritaglia sulla forma della pillola. */ .tocco{ position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; opacity:0; cursor:pointer; clip-path: inset(0 round 999px); /* touch-action da solo NON basta dove sotto c'e' qualcosa che scorre di lato: un interruttore di iOS si trascina per cambiare stato, e quel gesto se lo prende comunque lui. Per quei casi c'e' .tocco-min. */ touch-action: pan-x pan-y; } /* La versione "puntino": l'interruttore resta un controllo vero (quindi l'aptico c'e' e si attiva toccando la