/* ========================================================================= Token di Smistant — COPIA per il sito. ------------------------------------------------------------------------- Il blocco :root qui sotto è copiato tale e quale da smistant/frontend/src/styles/index.css (repo dell'app), il 6 ottobre 2026. È l'unica fonte dei valori: colori, spazi, raggi, ombre, tipografia. ⚠️ Se i token dell'app cambiano, si ricopia il blocco :root da lì. Non si modificano i valori qui: il sito deve restare uguale all'app. In fondo, una base minima (reset, testo) scritta per il sito: l'app ha la sua, piena di classi che qui non servono e che si scontrerebbero (.brand, .btn-primary, .tabs…). ========================================================================= */ :root { /* ===================================================================== * Palette Missive — light theme. * ===================================================================== */ /* ---- Brand La Bussola (marchio: logo, non chrome) ---- */ --lb-blue: #385b9b; /* blu del logo */ --lb-green: #8fbf25; /* verde del logo */ --lb-orange: #f08d01; /* arancione del logo */ --lb-raspberry: #cc3366; /* colore d'azione del sito */ /* ---- Accento — [MISSIVE] `--color-brand: 34 102 237` ---- */ --color-primary: #2266ed; --color-primary-dark: #1b54c4; /* [DERIVATO] hover/pressed */ --color-primary-soft: #d2e5f9; /* [MISSIVE] wash di menzioni/commenti */ --color-accent: #2266ed; --color-accent-soft: #d2e5f9; /* ---- Surfaces — [MISSIVE] base #F5F6F7, lista e barra in bianco ---- */ --color-bg: #f5f6f7; /* app, sidebar, colonne lista */ --color-surface: #ffffff; /* lista, barra alta, card */ --color-surface-raised: #ffffff; --color-bg-hover: #edeef0; /* [DERIVATO] */ --color-bg-muted: #eaebed; /* [DERIVATO] righe lette */ --color-bg-disabled: #e2e3e5; /* [DERIVATO] */ /* ---- Borders ---------------------------------------------------------- * Missive dichiara #DCDCDC, ma lo usa su poche cose: da noi la stessa tinta * disegna colonne, pannelli e separatori, e su fondo bianco pesava troppo * (Mario 2026-07-16). Schiarito di due passi: si vede ancora — serve a * separare — ma non si impone. `-strong` resta per quando deve dividere sul * serio (bordo del rail che galleggia, hover dei controlli). */ --color-border: #e9e9e9; --color-border-strong: #d2d3d5; /* [DERIVATO] */ /* ---- Text — [MISSIVE] scala #34363A → #525457 → #7B7C7F ---- */ --color-ink: #34363a; /* titoli */ --color-ink-soft: #525457; /* testo */ /* §UX-2 (Mario, 30/09) — **Il secondario, e deve essere LEGGIBILE.** Colora tutto cio' che non e' titolo ma si legge lo stesso: date, indirizzi, sottotitoli, contatori, etichette di sezione. ⚠️ Era `#7b7c7f`, che su questi fondi dava **3,5-4,2:1** — sotto il minimo di 4,5 ovunque. Adesso 4,8-5,7. Non e' un gusto: e' il numero. */ --color-muted: #65666a; /* ⚠️ **Questo NON e' un livello di testo.** Vale solo dove non c'e' niente da leggere: `::placeholder` e voci disabilitate. Il contrasto li' non si applica, perche' non e' contenuto. 👉 Se ti serve per un testo, ti serve `--color-muted`. Il test `tests/contrasto.test.ts` lo controlla. */ --color-muted-soft: #9a9b9e; /* legacy aliases preserved so unmigrated component CSS still resolves */ --color-text: var(--color-ink); --color-text-soft: var(--color-ink-soft); /* ---- Status (semantic, not brand) ---- */ --color-error: #c62828; --color-error-soft: #fdecea; --color-success: #00813b; /* [MISSIVE] verde dei filtri */ --color-success-soft: #edf7ee; /* [MISSIVE] */ --color-warn: #b45309; --color-warn-soft: #fef3c7; /* Quarta tinta, per le pillole azione degli Incarichi: servono quattro colori distinguibili (rispondere/leggere/da fare/completato) e la palette ne ha tre. Il viola sta lontano da blu, ambra e verde e non evoca uno stato. */ --color-neutral-accent: #6d49c9; --color-neutral-accent-soft: #ece7fb; /* §UX-3 — **L'inchiostro per i fondi tenui.** Il colore pieno sul suo `-soft` sta fra 3,89 e 4,55:1: sotto il minimo leggibile, in cinquanta punti fra pastiglie, avvisi e bottoni accesi. Non era una regressione: era lì da sempre, e nessuno l'aveva mai misurato. Scurendo l'inchiostro del 20% si arriva a 6,2–7,7:1 e il colore resta riconoscibile — la stessa ricetta usata per le etichette PEC il 29/09. ⚠️ Vale SOLO su fondo tenue: sul bianco il colore pieno va benissimo, e scurirlo lì spegnerebbe il prodotto senza motivo. Il contrasto di ognuno è garantito da `contrasto.test.ts`. */ --color-primary-ink: color-mix(in oklch, var(--color-primary) 80%, black); --color-success-ink: color-mix(in oklch, var(--color-success) 80%, black); --color-warn-ink: color-mix(in oklch, var(--color-warn) 80%, black); --color-error-ink: color-mix(in oklch, var(--color-error) 80%, black); --color-neutral-accent-ink: color-mix(in oklch, var(--color-neutral-accent) 80%, black); --color-accent-ink: color-mix(in oklch, var(--color-accent) 80%, black); /* ---- Stati della riga in lista — schema Missive ---------------------- * bianca = letta e fatta · celeste = da leggere · grigio = aperta senza * azione · blu pieno = selezionata. Nessun hover: il colore È lo stato. * [DERIVATO] Missive non espone il celeste: lo ricavo dal primario così * resta agganciato all'accento se un giorno cambia. */ --color-unread-bg: color-mix(in oklch, var(--color-primary) 9%, white); /* §P-16 (rev Mario 3 sett) — Aperta ma non gestita: rosso CHIARO pari intensita' al celeste degli unread (stessa formula, 9% su bianco). Prima era giallo tenue con barra sinistra rossa: Mario lo ha bocciato ('barra fuori sistema, fondo troppo marcato'). Ora un rosso muto, visibile ma non urlato, in linea col metro delle mail non lette. */ --color-attention-bg: color-mix(in oklch, var(--color-error) 9%, white); /* ---- Rilievo ed evidenziazione -------------------------------------- * §DS-C5 (29/09) — Erano hex sparsi nel CSS. Non sono sbagliati: sono * scelte approvate da Mario, mancava solo la dichiarazione. * * ⚠️ **Perché non è il giallo di `--color-activity-chat` (#FFBB00).** Quello * è un colore da *sfondo*, e come tratto di un'icona su bianco non regge — * misurato, non dedotto: e' la stessa ragione per cui li' sotto serve un * `-ink` scuro da metterci sopra. Il rilievo e' un'icona, quindi vuole un * giallo piu' carico. */ --color-rilievo: #e0a800; /* L'evidenziazione del termine cercato: deve staccare da TUTTI e quattro gli stati della riga (celeste, grigia, bianca, blu selezionata), quindi giallo pieno e testo scuro — non un altro celeste. Il testo riusa l'inchiostro del giallo di sistema: bruno, non nero. */ --color-evidenzia: #ffd54a; --color-evidenzia-ink: var(--color-activity-chat-ink); /* ---- Visore allegati ------------------------------------------------- * L'unica superficie scura del prodotto, e ci sta: un'immagine o un PDF si * guardano meglio su fondo scuro. Ha una sua scaletta di neutri perche' i * neutri chiari dell'app, li' sopra, non si leggono. */ --color-visore-bg: #2c3038; --color-visore-ink: #e6e7ea; --color-visore-muted: #a9adb5; --color-visore-border: #565b66; --color-visore-border-strong: #8b909a; /* ---- Indicatori di riga (lista Posta) ---- */ /* [MISSIVE] `starred: #FFBB00`. Lo usiamo come *sfondo* della pillola chat, quindi serve testo scuro sopra: il giallo pieno non regge il bianco. */ --color-activity-chat: #ffbb00; --color-activity-chat-ink: #4a3600; /* ===================================================================== * Categorie della Posta — scala **funzionale**, tenuta fuori dal brand. * Prima Promozionali era `--color-accent` e Personali un blu (#3b6fd4): * col primario blu il colore del marchio avrebbe marcato lo spam e le due * voci si sarebbero confuse. Qui contano solo distinguibilità e distanza * dal primario; i valori restano on-brand (verde/arancio del logo, lampone * del sito) senza usare il blu. * ===================================================================== */ --color-cat-operative: var(--color-success); /* verde */ --color-cat-transactional: #6b4ebd; /* viola */ --color-cat-notification: var(--color-warn); /* ambra */ --color-cat-promotional: var(--lb-orange); /* arancione del logo */ --color-cat-personal: var(--lb-raspberry); /* lampone del sito */ /* ---- Spacing scale ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 48px; --space-9: 64px; --space-10: 96px; /* ---- Radii — sobrio SaaS = angoli stretti, densità ---- */ --radius-sm: 3px; --radius: 5px; --radius-lg: 8px; --radius-pill: 999px; /* `--radius-md` non è mai stato definito, ma 9 regole sparse lo usano: senza fallback risolveva a 0, e quegli elementi rendevano squadrati per sbaglio. La scala non prevede un gradino fra 5 e 8, quindi è un alias di `-lg`. */ --radius-md: var(--radius-lg); /* Raggio dei BOTTONI premibili (regola della forma, 2026-07-18: tondo = persone ed etichette, quadrato = tutto cio' che si preme). Mario 2026-07-18: a 8px leggevano "troppo squadrati". Sta separato da `--radius-lg` di proposito — quello regge anche card, modali, popover e celle di binario, che devono restare a 8: un bottone isolato sopporta un angolo piu' morbido, una superficie grande no. Resta COSTANTE a ogni misura (28, 34, 38): e' quello che fa leggere i bottoni come un sistema. */ --radius-btn: 10px; /* ---- Shadows ---- */ /* Ombre fredde (erano calde, intonate all'avorio): con superfici grigio-blu un'ombra calda ingrigisce invece di dare rilievo. */ --shadow-sm: 0 1px 2px rgba(28, 34, 43, 0.05); --shadow: 0 6px 14px rgba(28, 34, 43, 0.06), 0 1px 2px rgba(28, 34, 43, 0.04); --shadow-lg: 0 18px 40px rgba(28, 34, 43, 0.12), 0 2px 6px rgba(28, 34, 43, 0.05); /* ---- Tendine (dropdown, menu, popover) ------------------------------ Una specifica sola per tutte le superfici che si aprono sopra il contenuto. Prima erano 17 varianti: 5 raggi, 2 bordi, 7 ombre, 5 hover. Cambia cosa c'è DENTRO la riga (un verbo, un'opzione, un'anteprima su due righe), mai la scatola. */ --popover-bg: var(--color-surface); --popover-border: 1px solid var(--color-border); --popover-radius: var(--radius-lg); --popover-shadow: var(--shadow-lg); --popover-pad: 6px; /* Riga di una tendina. `hover` è il grigio già più diffuso (8 superfici su 17); `active` è il blu tenue del menu Categorie — sopravvive al passaggio del mouse, che una spunta da sola non farebbe. */ --menu-item-pad: 8px 10px; --menu-item-radius: var(--radius); /* Stacco fra riga e riga, come nelle liste mail e notifiche: due righe colorate adiacenti (la selezionata e quella sotto il mouse) non devono mai toccarsi, altrimenti leggono come un'unica fascia. */ --menu-gap: 2px; --menu-item-hover: var(--color-bg-hover); --menu-item-active-bg: var(--color-primary-soft); --menu-item-active-fg: var(--color-primary-dark); /* Selezionata E sotto il mouse: il grigio dell'hover non deve coprire il blu, altrimenti la riga scelta sparisce proprio quando la punti. Blu un gradino più carico, così il puntamento si sente senza perdere il "sei qui". */ --menu-item-active-hover: color-mix(in oklch, var(--color-primary) 28%, white); /* ---- Binario (segmented control) ------------------------------------ L'altra metà del sistema di selezione. La tendina mostra UNA scelta alla volta su una superficie che si apre; il binario le tiene tutte a vista. Da qui la regola: 2-5 opzioni che restano visibili → binario; una lista che si apre → tendina. Mai un binario dentro una tendina (contenitore dentro contenitore) e mai il blu della riga di menu qui: sono due linguaggi. Scheda attiva PIATTA (Mario 2026-07-18): era l'unico stato selezionato della piattaforma a galleggiare. Lo stacco lo fa il filetto, lo stesso dei bottoni bianchi della barra mail. Il bordo delle celle è già `1px solid transparent`, quindi si accende senza scarti di 1px. */ --seg-track-bg: var(--color-bg); --seg-track-border: 1px solid var(--color-border); /* Raggio esterno = raggio della cella + padding del binario: così i due profili restano concentrici a ogni dimensione. */ --seg-track-pad: 3px; --seg-track-radius: 11px; --seg-gap: 2px; --seg-item-radius: var(--radius-lg); --seg-item-fg: var(--color-muted); --seg-item-hover-fg: var(--color-ink-soft); --seg-item-active-bg: var(--color-surface); --seg-item-active-border: var(--color-border); --seg-item-active-fg: var(--color-accent); /* ---- Motion ---- */ --motion-fast: 140ms; --motion-medium: 240ms; --motion-slow: 420ms; --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* Apertura/chiusura dei pannelli laterali. Le curve `out-*` qui sopra scaricano quasi tutto il movimento nei primi frame: su una colonna che si allarga di 200px si legge come uno scatto. Questa parte e arriva dolce (accelera e decelera), ed e' l'unica usata per la geometria delle sidebar. */ --motion-panel: 320ms; --ease-panel: cubic-bezier(0.4, 0, 0.2, 1); /* ---- Focus ---- */ --focus-ring: 0 0 0 3px color-mix(in oklch, var(--color-primary) 30%, transparent); /* ---- Typography — [MISSIVE] stack di sistema, nessun webfont ---------- * Copiato dal loro `--font-family`. Missive non ha un carattere proprio: è * la scelta che la fa leggere come client nativo invece che come sito, e * che toglie la latenza del webfont a chi ci sta dentro tutto il giorno. * Conseguenza: niente Lexend, quindi nessun carattere di brand. Su Windows * si vedrà Segoe UI, su macOS San Francisco. * `--font-display` punta allo stesso stack: la gerarchia la fa il peso. */ --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", "Apple Color Emoji", sans-serif; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", "Apple Color Emoji", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; /* Fluid type scale */ --text-xs: 0.72rem; /* 11.5px */ --text-sm: 0.83rem; /* 13.3px */ --text-base: 0.95rem; /* 15.2px */ --text-md: 1.05rem; /* 16.8px */ --text-lg: clamp(1.15rem, 0.98rem + 0.45vw, 1.35rem); --text-xl: clamp(1.35rem, 1.1rem + 0.85vw, 1.7rem); --text-2xl: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); --text-3xl: clamp(2.2rem, 1.6rem + 2.2vw, 3.4rem); --text-display: clamp(2.4rem, 1.7rem + 2.8vw, 4rem); font-family: var(--font-sans); /* Le stilistiche `ss01/ss02/cv11` erano di Fraunces/Inter: Lexend non le ha e resterebbero istruzioni morte. */ font-feature-settings: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color-scheme: light; } /* ---- Base del sito ----------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { color: var(--color-ink); font-size: var(--text-base); line-height: 1.55; } ::selection { background: var(--color-primary); color: var(--color-surface); } h1, h2, h3, h4, h5 { margin: 0; letter-spacing: -0.012em; line-height: 1.15; color: var(--color-ink); } p { margin: 0; } a { color: var(--color-primary); text-decoration: none; } a:hover { color: var(--color-primary-dark); } button, input, select, textarea { font: inherit; }