/* ============================================================ glass.css — il layer `tema` di InsTaurus. ------------------------------------------------------------ (Il nome del file resta glass.css per non toccare build/allowlist, ma il contenuto è il nuovo sistema visivo del redesign.) SOLO grafica. Riallinea i componenti esistenti ai token: angoli arrotondati, ombre morbide, superfici scure a inchiostro, numeri ed etichette in mono. Nessun colore in cifre: passa tutto dai token, quindi questo file segue i due temi senza sapere che esistono. COME VINCE, ORA. Non piu' a colpi di: sta nel layer `tema`, che e' dichiarato dopo `base`, `componenti` e `runtime` (l'ordine e' in testa a instaurus-tokens.css). Erano 163, e non servivano a battere l'ordine dei : servivano a battere il CSS che nova.js, nova-fab.js e preventivo2.js iniettano a runtime, che finisce nel DOPO questo file. Ora quel CSS sta nel layer `runtime`, che viene prima, quindi qui bastano dichiarazioni normali. Se una regola scritta qui non vince, la risposta NON e': e' che sta nel layer sbagliato. Il CSS nuovo del restyle va in `app`, che viene dopo questo. ============================================================ */ @layer tema { /* ---- Gli alias di compatibilità che stavano qui sono saliti in instaurus-tokens.css, in fondo al layer `tokens`. Non era un riordino estetico: questo :root sta nel layer `tema`, che è dichiarato DOPO `tokens`, quindi vinceva sui token e teneva i componenti legati alla palette vecchia. Uno dei suoi alias, `--line: var(--border)`, formava anche un riferimento circolare con il token `--border`, e una var() circolare non "ripiega": si annulla, e la proprietà sparisce del tutto. Ora i colori si definiscono in un posto solo. ---- */ /* ---- Sfondo pagina piatto e caldo ---- */ body{ background:var(--bg); } /* NB: qui c'era `.backdrop{ display:none }`, ed era un bug. Sembrava decorazione — un velo del vecchio tema "vetro" da spegnere — ma .backdrop e' il velo funzionale del menu laterale su mobile: e' l'elemento che porta onclick="toggleMenu(false)" (index.html), cioe' l'UNICO modo di chiudere il menu, visto che l'hamburger fa solo toggleMenu(true). Nascosto quello, il menu si apriva e non rientrava piu': restava aperto finche' non si navigava su un'altra sezione. Ora il velo torna, allineato al tema come gli altri overlay: dim caldo, niente blur (index.html gli metteva un backdrop-filter, che su iPhone e' anche lavoro inutile per la GPU). */ .backdrop{ background:var(--velo); -webkit-backdrop-filter:none; backdrop-filter:none; } /* ---- ARROTONDATO: raggi coerenti col redesign ---- */ .card,.card-h,.kpi,.kpis,.modal,.modal-h,.modal-f,.dash-hero, .p2-card,.p2-stanza{ border-radius:var(--radius-lg); } .search,.search input,.btn,.btn-add,.btn-save,.ibtn,.tag,.badge,.userbadge, .logout,.tiny,.hamb,.inp,.fg input,.fg select,.fg textarea,.dt,.toast, .nav a,.p2-art,.p2-add,.p2-save,.p2-del,.p2-multi{ border-radius:var(--radius); } /* ---- OMBRE MORBIDE (profondità gentile, non piatta) ---- */ .card,.kpi,.dash-hero,.p2-card{ box-shadow:0 1px 2px var(--ombra), 0 12px 28px -18px var(--ombra); } .btn,.btn-add,.btn-save,.ibtn,.tag,.badge,.userbadge,.nav a,.search{ box-shadow:none; } .nav a.active{ box-shadow:0 12px 26px -12px var(--alone); } .modal{ box-shadow:0 40px 80px -40px var(--ombra-forte); } /* ---- Superfici SCURE → inchiostro caldo piatto ---- */ .topbar,#sidebar{ background:var(--shell); border-color:var(--on-dark-line); } /* La fascia del saluto passa sulla CARTA. Usava --shell, che e il colore della navigazione: dentro il contenuto smette di dire dove finisce l una e comincia l altro, che e l unico mestiere del guscio scuro. Era anche la sola ragione per cui la dashboard stava al 34% di buio contro il 25% di tutte le altre. */ .dash-hero{ background:var(--surface); border:1px solid var(--line); } .dash-hero::before,.dash-hero::after{ display:none; } /* via pois + sheen */ /* Il login sta sulla CARTA, non nel guscio: e una porta, non un posto di lavoro, e non ha navigazione da separare dal contenuto — che e il motivo per cui il guscio e scuro (DESIGN-SYSTEM.md §4). Misurato prima: il 100% dello schermo era buio, su un prodotto la cui identita e la carta crema. Il gradiente radiale che c era qui era anche un marcatore vietato (§8.1). */ #login{ background:var(--bg); } .btn::after{ display:none; } /* via shine sui bottoni */ /* ---- Wordmark / nomi: testo crema pieno ---- */ .sb-word{ background:none; -webkit-text-fill-color:var(--on-dark-ink); color:var(--on-dark-ink); } .sb-logo::after{ background:var(--action); opacity:.5; } .dash-hero h1 .nm{ background:none; -webkit-text-fill-color:var(--ink); color:var(--ink); } /* ---- Testo su superfici scure (topbar/sidebar) ---- */ .top-title{ color:var(--on-dark-ink); } .topbar{ color:var(--on-dark-ink); } .nav a{ color:var(--on-dark-muted); } /* --action-on e' il testo che sta SOPRA il riempimento d'azione, non sopra il guscio: in Notturna vale #232327 e la voce sotto il puntatore diventava inchiostro su inchiostro, 1,17:1. E senza @media (hover: hover) su touch restava incollata dopo il tap, cioe' illeggibile finche' non se ne toccava un'altra. */ @media (hover: hover) { .nav a:hover{ background:var(--on-dark-soft); color:var(--on-dark-ink); } } .nav a.active{ background:var(--action); color:var(--action-on); } .userbadge{ background:var(--on-dark-soft); border-color:var(--on-dark-line); color:var(--on-dark-ink); } .userbadge b{ color:var(--on-dark-ink); } /* era --action-on: 1,14:1 in Notturna, il nome dell'utente spariva */ /* ---- Azione primaria = blu pieno (testo chiaro leggibile) ---- */ .btn,.btn-add,.btn-save,.p2-add,.p2-save{ background:var(--action); color:var(--action-on); border:0; } @media (hover: hover){ .btn:hover,.btn-add:hover,.btn-save:hover,.p2-add:hover,.p2-save:hover{ background:var(--action-strong); } } /* ---- Bottone secondario / icona: bordo inchiostro netto ---- */ .ibtn{ background:var(--surface); border:1px solid var(--line); color:var(--ink); } @media (hover: hover){ .ibtn:hover{ background:var(--shell); color:var(--on-dark-ink); border-color:var(--ink); } } /* ---- KPI / Tile metrica: numero in MONO blu, stripe accento ---- */ .kpi{ background:var(--surface); border:1px solid var(--line); } .kpi::before,.kpi.lime::before,.kpi.dark::before,.kpi.warn::before{ background:var(--action); } .kpi .num{ font-family:var(--font-mono); font-weight:700; color:var(--action-text); letter-spacing:-.02em; } .kpi .lab{ font-family:var(--font-mono); color:var(--ink-muted); } /* ---- Card dati / tabelle: bianco + hairline ---- */ .card{ background:var(--surface); border:1px solid var(--line); } .card-h{ border-bottom:1px solid var(--line); } .search{ background:var(--surface); border-bottom:1px solid var(--line); } .dt th{ background:var(--surface-2); color:var(--ink); font-family:var(--font-mono); letter-spacing:.08em; } .dt td{ border-bottom-color:var(--line); } @media (hover: hover){ .dt tr:hover td{ background:var(--action-soft); } } .num-c{ font-family:var(--font-mono); } /* prezzi/numeri sempre in mono */ .tag{ font-family:var(--font-mono); background:var(--action-soft); color:var(--action-text); } /* ---- Badge di stato (funzionali, mono) ---- */ .badge{ font-family:var(--font-mono); font-weight:500; letter-spacing:.04em; } .b-green{ background:var(--ok-soft); color:var(--ok-text); } /* accettato - scurito dal salvia #5E7355, che su questo fondo faceva 4.37 */ .b-blue{ background:var(--action-soft); color:var(--action-text); } /* inviato */ .b-amber{ background:var(--warn-soft); color:var(--warn-text); } /* bozza */ .b-gray{ background:var(--surface-2); color:var(--ink-muted); } .b-red{ background:var(--err-soft); color:var(--err-text); } /* ---- Overlay modali: dim caldo (niente blur) ---- */ .ovl{ background:var(--velo); -webkit-backdrop-filter:none; backdrop-filter:none; } /* ---- Toast: successo verde salvia ---- */ .toast{ background:var(--ok); } /* ---- Preventivatore: card in bianco + hairline ---- */ .p2-card{ background:var(--surface); border:1px solid var(--line); } /* ---- Indicatore versione in dashboard ---- */ #app-version{ font-family:var(--font-mono); } /* ============================================================ NOVA (overlay voce-first). ------------------------------------------------------------ Qui NON resta quasi niente, ed e' voluto. Il pannello di Nova e' un guscio scuro in ENTRAMBI i temi: non ha una versione chiara da riverniciare, quindi una riga in questo file non fa il lavoro che questo file fa altrove. Peggio: `tema` viene DOPO `runtime`, e ogni valore scritto qui vinceva in silenzio su quello dichiarato in nova.js — e' successo due volte, col raggio del guscio (16 contro 20) e con la sfocatura dell'overlay (2px contro i 5px + saturate 112% che il codice e il CHANGELOG dichiarano). Adesso il pannello lo definisce nova.js nel layer `app`, che e' l'ultimo, e questo file non gli parla sopra. Sono uscite di qui: .nova-ovl (la sfocatura), .nova-surface (fondo, bordo e ombra), .nova-status, .nova-chip, .nova-cta-prev, .nova-mic-big e #nova-go. Le ultime due classi non esistono nemmeno piu' nel markup: il comando vocale e' .nova-cmd e la CTA e' .nova-azione, tutt'e due dentro il pannello. ============================================================ */ /* ============================================================ FAB → il segno di Nova (disco d'inchiostro, anello oro) ------------------------------------------------------------ Come per il pannello, qui resta pochissimo. Il disco e' scuro in ENTRAMBI i temi: non ha una versione chiara da riverniciare. E `tema` viene dopo `runtime`, quindi il valore scritto qui vinceva in silenzio su nova-fab.js — e' successo con l'anello del disco, che qui valeva 3px --alone mentre il codice ne dichiarava altri. Adesso il disco, l'anello e il segno li definisce nova-fab.js, e questo file non gli parla sopra. ============================================================ */ #nova-fab .nova-online{ background:var(--ok); border-color:var(--on-dark-ink); } #nova-fab .nova-pending{ background:var(--err); border-color:var(--on-dark-ink); } #nova-fab .nova-intro-tip,#nova-fab .nova-tip{ background:var(--shell); border:1px solid var(--accent); } #nova-fab .nova-intro-tip b{ color:var(--accent); } /* ============================================================ MARCHIO a 4 ante (quadrato + croce al 50%) — sidebar ============================================================ */ .sb-logo{ display:flex; align-items:center; justify-content:center; gap:10px; } /* Il segno "finestra" (quadrato con la croce) disegnato qui con due pseudo-elementi e stato sostituito dal toro di InsTaurus: adesso e una maschera CSS in instaurus-app.css, cosi ha una definizione sola, eredita currentColor e cambia disegno al ridursi della dimensione. */ /* ============================================================ LINEA DI QUOTA (firma "disegno tecnico") — sotto il saluto ============================================================ */ .instaurus-quota{ display:flex; align-items:center; gap:0; margin:10px 0 2px; } .instaurus-quota .tk{ width:1.6px; height:12px; background:var(--line-strong); flex:none; } .instaurus-quota .ln{ flex:1; height:1.4px; background:var(--line); } .instaurus-quota .cal{ font-family:var(--font-ui); font-size:11px; font-weight:620; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted); padding:0 12px; white-space:nowrap; } /* ============================================================ Ultimi ritocchi colori legacy + numeri in mono ============================================================ */ .hamb{ color:var(--on-dark-ink); } .tiny{ background:var(--on-dark-soft); border-color:var(--on-dark-line); color:var(--on-dark-ink); } @media (hover: hover){ .tiny:hover{ background:var(--on-dark-soft); color:var(--action-on); } } .dash-hero, .dash-hero h1{ color:var(--ink); } .dash-hero p{ color:var(--ink-muted); } .dash-hero .dt{ color:var(--accent-text); font-family:var(--font-ui); letter-spacing:.1em; } /* prezzi/numeri del preventivatore in monospace */ .p2-imp, .p2-tot, .p2-totals{ font-family:var(--font-mono); } } /* fine @layer tema */