/* Design system "passaporto d'inchiostro" — ibrido "ariosa + editoriale" (§3.1). I valori sono gli stessi di Colori.xaml dell'app: qui non si inventano colori, si traduce la palette in CSS custom properties guidate da data-accent/data-theme su , così web e app restano coordinati. Supera la vecchia nota "il tema è materia dell'app": ora accento e tema si scelgono anche qui (§3.1, deciso 22 lug). */ /* ===== font locali (privacy §6: serviti da wwwroot, mai da un CDN) ===== */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Inter-Regular.ttf') format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Inter-Medium.ttf') format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Inter-SemiBold.ttf') format('truetype'); } /* Niente serif (corretto 23 lug, §3.1): il serif su titoli e numeri riportava le grazie sulla I maiuscola che l'app aveva scartato apposta (§7). Un carattere solo, Inter, e la differenza la fa il PESO — come le tre chiavi dell'app: 400 testo, 500 in evidenza, 600 voce (titoli, wordmark, numeri). */ /* Solo i kanji che servono (印 e i quattro elementi): il file è un sottoinsieme di NotoSansJP, ~8 KB invece dei 9 MB del variabile completo. */ @font-face { font-family: 'Noto Sans JP'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/NotoSansJP-Kanji.ttf') format('truetype'); } /* ===== accenti: i quattro elementi (§3.1), valori grezzi identici a Colori.xaml ===== Ogni accento porta: pieno (chiaro/scuro), fondo tenue (chiaro/scuro), testo leggibile sulla superficie (chiaro/scuro), tono di banda, e testo/icone sopra il pieno. Il tema sceglie poi QUALE variante è attiva. Terra è l'eccezione: su-accento chiaro è scuro, perché il suo pieno è troppo chiaro per reggere testo chiaro (deroga WCAG calcolata). */ :root, html[data-accent="fuoco"] { --acc:#B5382C; --acc-scuro:#D9584C; --acc-tenue-l:#F5E4E1; --acc-tenue-d:#3A2320; --acc-testo-l:#8C2A20; --acc-testo-d:#EFA79E; --acc-banda:#7C2A20; --acc-su-l:#F7EEE9; --acc-su-d:#1C1A16; } html[data-accent="terra"] { --acc:#A8792E; --acc-scuro:#CBA45C; --acc-tenue-l:#F4EBDA; --acc-tenue-d:#33291A; --acc-testo-l:#7A5717; --acc-testo-d:#DCC08A; --acc-banda:#5E4212; --acc-su-l:#1A1206; --acc-su-d:#1C1A16; } html[data-accent="aria"] { --acc:#2F6B42; --acc-scuro:#4E9968; --acc-tenue-l:#E2EFE6; --acc-tenue-d:#1B2C21; --acc-testo-l:#235233; --acc-testo-d:#8FC9A5; --acc-banda:#1C3F27; --acc-su-l:#F7EEE9; --acc-su-d:#1C1A16; } html[data-accent="acqua"] { --acc:#2E4A7A; --acc-scuro:#5B7FBF; --acc-tenue-l:#E3E9F3; --acc-tenue-d:#1D2739; --acc-testo-l:#24395F; --acc-testo-d:#9FB8E0; --acc-banda:#1B2C4A; --acc-su-l:#F7EEE9; --acc-su-d:#1C1A16; } html[data-accent="cenere"] { --acc:#6B6156; --acc-scuro:#8E8578; --acc-tenue-l:#F1EEE8; --acc-tenue-d:#2E2B25; --acc-testo-l:#574E44; --acc-testo-d:#CDBFA8; --acc-banda:#4E463B; --acc-su-l:#F7EEE9; --acc-su-d:#1C1A16; } /* ===== tema chiaro (default) ===== */ :root { /* superfici (Colori.xaml) */ --page: #EFEBE1; --page-tenue:#F5F2EA; --card: #FFFFFF; --card-alta: #FFFFFF; --border: #E3DED2; --text: #23201C; --muted: #6B6E73; /* rail chiaro su washi + riga tabella al passaggio (specifici del web) */ --rail: #FBF9F4; --rail-border:#ECE6D9; --riga-hover: #FBF9F4; /* accento attivo: chiaro usa il pieno e il tenue-chiaro */ --accent: var(--acc); --accent-tenue:var(--acc-tenue-l); --accent-text: var(--acc-testo-l); --accent-on: var(--acc-su-l); --accent-banda:var(--acc-banda); /* semantici — NON seguono l'accento (§3.1): verificato/mostrato restano sé stessi */ --ok:#2F7D5B; --ok-bg:#E4F0EA; --ok-text:#245C41; --warn:#B07214; --warn-bg:#F6EBD6; --warn-text:#8A5A0B; --err:#A63125; --err-bg:#F6E4E1; --err-text:#7A231B; /* bottone solido neutro (si inverte al buio) */ --btn-bg:#17191C; --btn-fg:#FFFFFF; --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --jp: 'Noto Sans JP', var(--sans); --raggio: 12px; --raggio-s: 8px; /* MATERIA (strato di movimento, in fondo al file). L'ombra di prima erano due strati di blu-grigio al 5%: sul washi non si vedeva, e nessuna .carta leggeva come un foglio POSATO sulla pagina. Ora sono tre, e in inchiostro caldo (35,32,28 — la tinta del sumi, non un grigio freddo): un filo di contatto, una diffusione corta che dà lo SPESSORE del foglio, e un'ombra lunga e rientrata che stacca la carta dal fondo senza sporcarlo. --ombra-alta è la stessa mano un gradino più su: la usa solo l'hover di .sollevabile, dove il foglio si alza di 1px. Le ~20 regole che già chiamano --ombra ne beneficiano senza toccarne nessuna. */ --ombra: 0 1px 1px rgba(35,32,28,.05), 0 2px 5px -1px rgba(35,32,28,.055), 0 14px 28px -12px rgba(35,32,28,.13); --ombra-alta: 0 1px 1px rgba(35,32,28,.05), 0 4px 10px -2px rgba(35,32,28,.08), 0 22px 40px -14px rgba(35,32,28,.20); /* Il washi "vuoto" dello scheletro di caricamento: un tono sotto --page-tenue, perché sopra --card (bianco) deve leggersi come una forma e non sparire. */ --scheletro: #E8E3D6; --scheletro-luce: rgba(255,255,255,.85); /* la luce che lo percorre */ /* Le tre durate del movimento. Una scala sola, come i tre pesi del carattere: gli stati (hover, focus, pressione), le entrate, e il gesto che si guarda. Un quarto valore vorrebbe dire che non si è deciso. --t-lunga oggi non la chiama nessuno: è la durata dei gesti che vogliono JavaScript (sigillo, conteggio, transizione di pagina) e che sono un lavoro a parte — sta qui perché la scala si decide tutta insieme. */ --t-corta: 120ms; --t-media: 260ms; --t-lunga: 620ms; --curva: cubic-bezier(.22,.68,.28,1); /* esce svelta, si posa piano */ /* Cintura e badge del grado (§10): stessi valori di Colori.xaml dell'app. Bianco e nero SONO la cintura, non il tema — l'unica che il tema la segue è la nera, che su carta scura sparirebbe: in chiaro è quasi nera, al buio un carbone appena sopra la card. Il contorno segue il tema perché una cintura bianca senza bordo, di notte, scomparirebbe. */ --cintura-bianca: #FFFFFF; --cintura-nera: #17140F; --cintura-contorno: rgba(0,0,0,.13); /* «Il mio percorso»: le tonalità di sabbia della linea del tempo (mockup). Fondo asse, tratto pieno (tessera), tratteggio (fermo/pausa), gambo — la tacca finale e l'alone seguono invece l'accento. */ --perc-track: #F0ECE3; --perc-pieno: #B8AE97; --perc-tratto: #CBC3B2; --perc-gambo: #C3BAA6; color-scheme: light; } /* ===== tema scuro ===== */ html[data-theme="dark"] { --page: #1A1A19; --page-tenue:#201F1E; --card: #242422; --card-alta: #2E2E2B; --border: #474642; --text: #E9E7E1; --muted: #97968F; --rail: #201F1E; --rail-border:#383734; --riga-hover: #292927; /* al buio è l'accento a dover risaltare sulla carta: pieno più chiaro, tenue scuro */ --accent: var(--acc-scuro); --accent-tenue:var(--acc-tenue-d); --accent-text: var(--acc-testo-d); --accent-on: var(--acc-su-d); --accent-banda:var(--acc-banda); --ok:#5FA783; --ok-bg:#24422F; --ok-text:#9ED8B8; --warn:#D5A24A; --warn-bg:#493617; --warn-text:#E6C489; --err:#E0776B; --err-bg:#4A2723; --err-text:#F0A99F; --btn-bg:#E9E7E1; --btn-fg:#1A1A19; /* L'ombra al buio non può restare quella chiara: l'inchiostro caldo (35,32,28) è quasi il colore del fondo, quindi sparirebbe, e una .carta #242422 su una pagina #1A1A19 non leggerebbe più come un foglio posato ma come un rettangolo appena più chiaro. Stessa geometria a tre strati, nero pieno e molto più opaco: è l'opacità, non la forma, a cambiare col tema. */ --ombra: 0 1px 1px rgba(0,0,0,.30), 0 2px 5px -1px rgba(0,0,0,.34), 0 14px 28px -12px rgba(0,0,0,.55); --ombra-alta: 0 1px 1px rgba(0,0,0,.32), 0 4px 10px -2px rgba(0,0,0,.42), 0 22px 40px -14px rgba(0,0,0,.68); /* Lo scheletro al buio va SOPRA la card (#242422), non sotto — al buio "vuoto" vuol dire più chiaro, non più scuro. E la luce che lo percorre è un bianco al 7%, non all'85%: quello, su fondo scuro, sarebbe un lampeggio. */ --scheletro: #32312E; --scheletro-luce: rgba(255,255,255,.07); /* La nera diventa un carbone (non nero pieno) e il contorno si schiarisce (§10). */ --cintura-nera: #3D3C39; --cintura-contorno: #67655E; --perc-track: #282826; --perc-pieno: #575651; --perc-tratto: #474642; --perc-gambo: #575651; color-scheme: dark; } /* "Di sistema": segue prefers-color-scheme quando il tema è system (o non impostato, pre-JS). Ripete i token scuri — è l'unico modo per farli valere senza l'attributo. */ @media (prefers-color-scheme: dark) { html[data-theme="system"], html:not([data-theme]) { --page:#1A1A19; --page-tenue:#201F1E; --card:#242422; --card-alta:#2E2E2B; --border:#474642; --text:#E9E7E1; --muted:#97968F; --rail:#201F1E; --rail-border:#383734; --riga-hover:#292927; --accent:var(--acc-scuro); --accent-tenue:var(--acc-tenue-d); --accent-text:var(--acc-testo-d); --accent-on:var(--acc-su-d); --accent-banda:var(--acc-banda); --ok:#5FA783; --ok-bg:#24422F; --ok-text:#9ED8B8; --warn:#D5A24A; --warn-bg:#493617; --warn-text:#E6C489; --err:#E0776B; --err-bg:#4A2723; --err-text:#F0A99F; --btn-bg:#E9E7E1; --btn-fg:#1A1A19; --ombra: 0 1px 1px rgba(0,0,0,.30), 0 2px 5px -1px rgba(0,0,0,.34), 0 14px 28px -12px rgba(0,0,0,.55); --ombra-alta: 0 1px 1px rgba(0,0,0,.32), 0 4px 10px -2px rgba(0,0,0,.42), 0 22px 40px -14px rgba(0,0,0,.68); --scheletro:#32312E; --scheletro-luce:rgba(255,255,255,.07); --cintura-nera:#3D3C39; --cintura-contorno:#67655E; --perc-track:#282826; --perc-pieno:#575651; --perc-tratto:#474642; --perc-gambo:#575651; color-scheme: dark; } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--sans); color: var(--text); background: var(--page); font-size: 15px; line-height: 1.5; } /* Titoli in Inter 600 (la "voce" dell'app), non in serif: la I di "I Dan" resta ad asta pulita (§3.1, §7). Sentence case ovunque. */ h1, h2, h3 { font-weight: 600; letter-spacing: -.015em; color: var(--text); } /* Titolo di pagina più stretto (§3.1, restyle): ~22px, non 27. Il sottotitolo (.sottotitolo) porta il contesto — stagione, conteggio — senza ripetere il nome dell'ente. */ h1 { font-size: 1.45rem; margin: 0 0 .2rem; } h2 { font-size: 1.15rem; margin: 0 0 .7rem; } h3 { font-size: 1rem; margin: 0 0 .5rem; } /* FocusOnNavigate (Routes.razor) porta il focus sull'h1 di pagina a ogni navigazione, così lo screen reader riparte dal titolo. È un focus PROGRAMMATICO, non un gesto dell'utente: l'anello di focus del browser sull'h1 (largo quanto la pagina) è solo rumore visibile, si toglie. L'accessibilità resta — il focus c'è, non lo si disegna. */ h1:focus, h1:focus-visible { outline: none; } /* Un nome o un grado dentro un elenco: in evidenza col peso 500, come il "valore" nell'app (era la vecchia classe `.serif`, rinominata quando il serif è caduto). */ .risalto { font-weight: 500; color: var(--text); } .kanji { font-family: var(--jp); } a { color: var(--accent-text); text-decoration: none; } a:hover { text-decoration: underline; } /* L'underline di a:hover è giusto per una parola-link in una frase, ma «cola» sui link che sono scatole (pulsanti, piastrelle, righe-card) o affordance di ritorno: lì l'hover si mostra con fondo/bordo, mai sottolineato. Questi opt-out lo spengono (la specificità :hover batte a:hover). */ .bottone:hover, .gestione-tile:hover, .ev-riga:hover, .link-indietro:hover { text-decoration: none; } /* --- struttura ---------------------------------------------------------- */ .guscio { display: flex; min-height: 100vh; } /* Rail chiaro su washi al posto della sidebar inchiostro (§3.1), alto quanto la FINESTRA e fermo mentre la pagina scorre (rilievo del 24 ago). Prima era un semplice flex item di `.guscio` e si stirava all'altezza del CONTENUTO: quindi ciò che `margin-top: auto` spinge in basso — le sezioni di coda e il `.piede-laterale` con email e versione — finiva in fondo al DOCUMENTO, non della finestra. Su una pagina corta sembrava giusto; sul cruscotto pieno sprofondava sotto la piega, ed era il «di colpo cambia» appena loggati. `align-self: flex-start` è la riga che morde: senza, lo stretch del flex item vince sull'altezza e i 100vh non contano niente. `position: sticky` assorbe il vecchio `position: relative` — è anch'esso un valore posizionato, quindi il box della filigrana qui sotto continua ad ancorarsi all'aside, ora in fondo alla finestra. Nessun `overflow` qui: il menù dello switcher scende DENTRO la barra e verrebbe tagliato (vedi il commento di .rail-wm-box) — a scorrere è la sola .nav. E `z-index: 45`, che non è un ritocco: `sticky`, come `fixed`, crea SEMPRE un contesto d'impilamento, qualunque sia lo z-index. Da quando il rail è sticky, tutto ciò che sta dentro — menù dello switcher compreso, col suo z-index 50 — si dipinge come un solo strato al valore dell'aside; con `auto` quello strato finiva SOTTO il `.menu-backdrop` (fixed, 40), il fondale invisibile che chiude i menù. Il menù restava visibile (il fondale è trasparente) ma ogni clic su un profilo atterrava sul fondale, che chiamava Chiudi(): lo switcher sembrava vivo e non commutava niente. Un caso diverso dalla trappola dell'`overflow` di cui sopra — quella taglierebbe il menù, questa gli rubava i clic. 45 tiene il rail sopra il fondale e sotto i menù della testata (.menu-pref / .menu-utente, 50), che scendono da là e devono restare in cima. */ .barra-laterale { width: 236px; flex: 0 0 236px; background: var(--rail); border-right: 1px solid var(--rail-border); color: var(--text); padding: 1.25rem 0; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; align-self: flex-start; z-index: 45; /* sopra il .menu-backdrop (40), sotto i menù della testata (50) */ } /* Filigrana di brand: il 武 non sta più dietro l'area di lavoro (era .guscio::after, fisso nell'angolo del viewport con z-index:-1 — sotto tabelle e card, e all'origine di una serie di bug di stacking). Ora è la FIRMA in fondo alla barra laterale, basso-destra, sbordante e ritagliata dal bordo del rail. Il ritaglio lo fa un BOX dedicato in fondo al rail, non `overflow` sull'aside: il menù dello switcher di contesto scende dentro la barra e un overflow sull'aside lo taglierebbe. Il colore usa --accent-text, quindi segue accento E tema da sé (resta la taratura d'opacità al buio, e la deroga Sumi — rail in accento pieno — più sotto). */ .rail-wm-box { position: absolute; left: 0; right: 0; bottom: 0; height: 180px; overflow: hidden; pointer-events: none; z-index: 0; } .rail-wm { position: absolute; right: -6px; bottom: -30px; font-family: var(--jp); font-weight: 700; line-height: 1; font-size: 11rem; color: var(--accent-text); opacity: .06; pointer-events: none; user-select: none; } /* Al buio la tinta è più chiara e desaturata: alza un filo l'opacità (come faceva la vecchia filigrana, e come su MAUI). */ html[data-theme="dark"] .rail-wm { opacity: .10; } @media (prefers-color-scheme: dark) { html[data-theme="system"] .rail-wm, html:not([data-theme]) .rail-wm { opacity: .10; } } .wordmark { font-weight: 600; font-size: 1.3rem; color: var(--text); padding: 0 1.25rem 1.1rem; display: flex; align-items: center; gap: .6rem; } .wordmark .bollo-logo { width: 32px; height: 32px; border-radius: 7px; object-fit: contain; } /* Testata-SWITCHER di contesto MINIMALE (variante D, deciso 3 ago dopo il render), sul modello di webadmin_switcher_minimale.html: la riga marchio «武 budopass» (muta), poi una RIGA sobria — logo piccolo in linea + nome/ruolo + chevron — che pesa come una voce di menù, non come una card (via la banda copertina e l'overhang di prima). Con più contesti è il