/* =========================================================================== KAILEX — foglio di stile condiviso --------------------------------------------------------------------------- Un solo sistema per tutta la piattaforma. Tipografia, spaziature, griglia e componenti sono UNICI e mai duplicati per tenant: un file theme-.css, caricato subito dopo questo, sovrascrive esclusivamente le variabili del blocco "PER TENANT" più sotto. La verifica che la separazione tenga: se aprendo theme-studioa.css trovi una regola di layout, la separazione si è rotta. Lì dentro devono esserci solo valori, mai selettori di componenti. DESIGN SYSTEM KAILEX — da dove vengono queste scelte ---------------------------------------------------- Colori, caratteri, raggi, ombre e movimento sono quelli del design system KaiLex (token `--kx-*` e alias semantici, componenti Button, Input, Badge, Card, Tabs): neutri freddi campionati dalla tavola del logo, un solo accento teal per la piattaforma, Inter Tight per titoli e interfaccia, forme morbide (pulsanti a pillola, schede a 16px). I blocchi qui sotto non ridefiniscono il sistema: ne traducono i token nei nomi che le regole di questo file già usano (--c-text, --accent, --radius...), così ogni componente segue il design system senza essere riscritto. Gli studi restano per-tenant come i sotto-brand del design system: cambiano l'accento e il logo, non il resto. Cosa NON viene dal sito vetrina, di proposito: l'impaginato "a vetrina" (video a tutto schermo, blocchi alternati, animazioni allo scroll). Uno strumento di lavoro deve far trovare una pratica in tre secondi: la densità informativa è quella di un'applicazione gestionale, non di una homepage. =========================================================================== */ /* --------------------------------------------------------------------------- FONT — serviti da NOI, non da Google Fonts --------------------------------------------------------------------------- Il design system li carica da fonts.googleapis.com; qui no. Da Google l'indirizzo IP di chiunque aprisse il portale finirebbe a un terzo extra-UE, senza base giuridica (LG München I, 20.01.2022, 3 O 17493/20). In un prodotto che contiene il modulo con cui uno studio dimostra la propria conformità privacy, sarebbe una contraddizione. Il browser non contatta nessuno oltre a noi, e la CSP lo garantisce: `font-src 'self'`, `style-src` senza eccezioni (IntestazioniSicurezza). KaiLex Sans (1.000) è il carattere del marchio, fornito con il design system in TTF: qui è lo stesso file in WOFF2, un contenitore compresso senza perdite — stessi glifi, stessa spaziatura. Due pesi soli, quelli che si usano: il 700 dei titoli e il 400 per il testo di display non in grassetto. Gli altri file sono quelli che Google serve al design system, SCARICATI UNA VOLTA e non modificati (Inter Tight 3.004, IBM Plex Mono 2.3): stesso disegno, stessa resa. Non ritoccarli — né risottoinsiemarli: IBM Plex ha un "Reserved Font Name", e una versione modificata non potrebbe più chiamarsi Plex. Licenza SIL OFL 1.1, distribuita accanto ai file (static/fonts/OFL-*.txt), come la licenza stessa richiede. Scelte, una per riga: - INTER TIGHT È VARIABILE: un file per sottoinsieme copre tutti i pesi, e Google serve lo STESSO file per 300…700; `font-weight: 300 700` riproduce quell'intervallo. IBM Plex Mono non lo è: un file per peso, 400 e 500 come nel design system. - DUE SOTTOINSIEMI, `latin` e `latin-ext`, con gli stessi `unicode-range` di Google: il secondo si scarica SOLO se in pagina c'è un carattere che il primo non ha (un cliente di nome Łukasz, un ente di Brno). Il cirillico, il greco e il vietnamita non sono inclusi: un testo in quegli alfabeti ripiega sul font di riserva dello stack, che è esattamente il motivo per cui le riserve ci sono. - Instrument Serif, il terzo carattere del design system, non c'è: lo usa solo come parola d'accento nei titoli di vetrina, e nessuna pagina qui la ha. Una @font-face senza testo che la usa sarebbe un file morto. - `font-display: swap`: il testo compare subito nel font di riserva e cambia quando il file è arrivato, invece di restare invisibile. - Il numero di versione sta NEL NOME del file: queste url sono dentro il CSS, dove `asset()` non arriva (stesso limite dei loghi, CLAUDE.md → "Cache dei file statici"). Un aggiornamento del font = un nome nuovo. --------------------------------------------------------------------------- */ /* KaiLex Sans: un file intero per peso, niente sottoinsiemi (il design system lo distribuisce così). */ @font-face { font-family: 'KaiLex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/kailex-sans-1.000-bold.woff2') format('woff2'); } @font-face { font-family: 'KaiLex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/kailex-sans-1.000-regular.woff2') format('woff2'); } @font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/inter-tight-3.004-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/inter-tight-3.004-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-mono-2.3-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-mono-2.3-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-mono-2.3-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-mono-2.3-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* --- Design system: primitivi ------------------------------------------ I valori del design system KaiLex, con i suoi nomi. Le regole di questo file NON li usano direttamente: passano dagli alias semantici qui sotto (--c-*, --accent...), che sono ciò che un tema di studio può cambiare. */ /* Neutri, campionati dalla tavola del logo. */ --kx-white: #FFFFFF; --kx-paper: #F4F7F8; --kx-mist: #E9EDEF; --kx-neutral-100: #DDE2E6; --kx-neutral-200: #C8CFD5; --kx-neutral-300: #A9B4C2; --kx-neutral-500: #6B7380; --kx-neutral-600: #555B66; --kx-neutral-700: #3A3F47; --kx-neutral-800: #1F2226; --kx-neutral-900: #141517; --kx-ink: #0A0A0A; /* Teal: l'accento del marchio madre. */ --kx-teal-50: #E8F6F4; --kx-teal-100: #CDEDE9; --kx-teal-300: #6CCBC0; --kx-teal-500: #1FA89B; --kx-teal-600: #178A7F; --kx-teal-700: #116D64; --kx-teal-900: #0A3D38; /* Stato. */ --kx-success-500: #2E9E6A; --kx-success-50: #E7F5EE; --kx-warning-500: #C98A2B; --kx-warning-50: #FAF1E2; --kx-danger-500: #C4413A; --kx-danger-50: #FAE9E8; --kx-info-500: #4C6FCF; --kx-info-50: #EBF0FB; /* --- Tipografia ------------------------------------------------------- */ /* Due voci, come nel design system: KaiLex Sans — il carattere arrotondato del marchio — per i titoli (display e H1–H3, in grassetto), Inter Tight per l'interfaccia e il testo, dove conta la leggibilità. */ --font-ui: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: "KaiLex Sans", var(--font-ui); --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 0.9375rem; --text-md: 1.0625rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-hero: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); /* Occhiello del design system ("BY KAILEX", "CLIENT & COUNSEL TOGETHER"). */ --text-occhiello: 0.6875rem; --leading-tight: 1.05; --leading-snug: 1.25; --leading-normal: 1.55; --tracking-wide: 0.08em; --tracking-wider: 0.14em; /* Il carattere arrotondato dei titoli si stringe appena (più il display dei titoli); gli occhielli sono maiuscole molto spaziate. */ --tracking-display: -0.015em; --tracking-titolo: -0.01em; --tracking-testo: -0.005em; --tracking-occhiello: 0.24em; /* --- Spaziature: scala unica, usata ovunque al posto di valori a caso -- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; /* --- Colori condivisi (alias semantici del design system) -------------- */ --c-bg: var(--kx-white); /* surface-card */ --c-bg-sunken: var(--kx-paper); /* bg-canvas: il fondo della pagina */ --c-bg-inverse: var(--kx-ink); /* surface-inverse */ --c-surface: var(--kx-white); --c-text: var(--kx-ink); /* fg-1 */ --c-text-soft: var(--kx-neutral-600); /* fg-2 */ /* fg-3. MISURATO: 4,78:1 sul bianco, 4,44:1 sulla carta del fondo — sulla carta appena sotto il 4,5:1 delle WCAG per il testo normale. È il valore del design system; se va alzato, va alzato lì. Resta la TERZA voce della scala (19,8 / 6,8 / 4,8): la gerarchia è quella del design system. */ --c-text-faint: var(--kx-neutral-500); --c-text-inverse: var(--kx-paper); --c-border: var(--kx-neutral-100); /* border-hairline */ --c-border-strong: var(--kx-neutral-200); /* border-default */ /* Colori di stato: le coppie testo/fondo del Badge del design system. L'attenzione usa come testo il bruno del Badge e non warning-500, che sul bianco darebbe 2,9:1. */ --c-positivo: var(--kx-success-500); --c-positivo-bg: var(--kx-success-50); --c-attenzione: #9A6618; --c-attenzione-bg: var(--kx-warning-50); --c-critico: var(--kx-danger-500); --c-critico-bg: var(--kx-danger-50); --c-info: var(--kx-info-500); --c-info-bg: var(--kx-info-50); /* --- PER TENANT: sovrascritte da theme-.css --------------------- */ /* Accento del marchio madre (accent / accent-strong / accent-soft del design system). Un tema di studio lo sostituisce come fanno i sotto-brand del design system: cambia l'accento, non il resto. I temi lo scrivono in esadecimale: gli sfondi animati lo leggono con getComputedStyle e lo convertono per gli shader (sfondo-accesso.js). */ --accent: var(--kx-teal-500); --accent-scuro: var(--kx-teal-700); --accent-tenue: var(--kx-teal-50); --tenant-nome: "KaiLex"; /* Il lockup orizzontale CON payoff ("Client & Counsel, Together") ovunque compaia il marchio KaiLex: positivo su fondo chiaro, negativo su fondo scuro (titolare, 2026-10-01). È largo 2,73 volte la sua altezza, e il payoff è piccolo dentro il disegno: per restare leggibile il logo ha un'altezza sua (--logo-altezza), più alta dei 2,25rem dei loghi senza payoff. Larghezza e altezza sono valori, non regole di layout — quindi stanno nel tema: i temi degli studi le riportano al proprio marchio. */ --logo: url("/img/logo-kailex-payoff.svg"); --logo-inverso: url("/img/logo-kailex-payoff-inverso.svg"); --logo-altezza: 4.4rem; --logo-larghezza: 12rem; --logo-inverso-larghezza: 12rem; /* Nel piè di pagina lo stesso lockup scuro. */ --logo-pie: url("/img/logo-kailex-payoff-inverso.svg"); --logo-pie-larghezza: 12rem; /* --- Forme ------------------------------------------------------------- */ /* La scala dei raggi del design system: morbida, ma non gonfia. --radius è il raggio di tutto ciò che non ha un componente nel design system (menu, suggerimenti, riquadri piccoli); pulsanti, campi e schede usano il gradino del loro componente (pillola, md, lg). */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius: var(--radius-sm); --radius-pill: 999px; --bordo: 1px solid var(--c-border); /* Elevazione quasi piatta: ombre morbide, fredde, basse (shadow-1, shadow-2). */ --ombra-lieve: 0 1px 2px rgba(10, 10, 10, 0.04), 0 1px 1px rgba(10, 10, 10, 0.03); --ombra-media: 0 4px 16px -4px rgba(10, 10, 10, 0.08), 0 1px 2px rgba(10, 10, 10, 0.04); /* Due soli livelli di elevazione, e restano due: `lieve` per ciò che è appoggiato alla pagina (riquadri, schede al passaggio del mouse), `media` per ciò che si stacca (menu, suggerimenti). Le ombre orizzontali della spalla delle comunicazioni non sono un terzo livello: sono la stessa ombra vista di lato, e restano scritte lì perché dipendono dal lato da cui il pannello entra. */ /* --- Movimento --------------------------------------------------------- "Breve, coerente e mai puramente decorativa" (playbook §1) è una regola che si può rispettare solo se esiste UN posto dove le durate sono scritte. Prima erano venti valori sparsi fra 0,1s e 1,8s, decisi una regola alla volta: la scala qui sotto ha sei gradini, e ciascuno ha il nome di un GESTO — non di un componente. Due valori fuori scala (0,12s sul passaggio del mouse su una riga, 0,25s sull'arrivo di una bolla di chat) sono stati portati al gradino più vicino. È precisamente ciò per cui esiste una scala, e venti o trenta millesimi su un'interazione non si percepiscono. `--curva-standard` e `--durata-breve` sono `ease-standard` e `dur-fast` del design system: cambiarli qui ha cambiato il passo di tutta l'interfaccia in un colpo solo — che è esattamente il punto. */ --durata-istante: 100ms; /* micro-reazione: opacità, sfondo di una riga */ --durata-breve: 140ms; /* la gran parte: colore, bordo, ombra, riempimento */ --durata-media: 220ms; /* qualcosa entra o esce dallo schermo */ --durata-rivela: 700ms; /* una barra che cresce mentre si legge il dato */ --durata-traccia: 1100ms; /* una linea che si disegna: gesto più lungo */ --durata-evidenzia: 1800ms; /* "questo è cambiato": si guarda, non si usa */ --curva-standard: cubic-bezier(0.2, 0.7, 0.1, 1); --curva-rivela: cubic-bezier(0.2, 0.8, 0.2, 1); --curva-traccia: cubic-bezier(0.3, 0.7, 0.2, 1); /* Scaglionamento: quando più elementi entrano insieme, ciascuno parte un passo dopo il precedente. Il valore è il PASSO, non il ritardo: i ritardi si scrivono `calc(var(--passo-scaglionato) * n)`, così la progressione si legge ed è impossibile sbagliarne uno a metà elenco. */ --passo-scaglionato: 40ms; /* --- Impilamento ------------------------------------------------------- Tre piani soli, perché tre sono le cose che si sovrappongono davvero: la barra, i suggerimenti dei grafici, la spalla delle comunicazioni. Prima l'ordine era tenuto a mano da un commento ("sopra la barra (20) e ai suggerimenti (50)") — cioè da qualcosa che qualcuno avrebbe dovuto ricordarsi di aggiornare. Gli z-index locali (0…3) dentro contesti di impilamento isolati restano numeri nudi: non competono con nulla fuori dal loro contesto, e promuoverli a token farebbe credere il contrario. */ --z-barra: 20; /* Il menu su schermo stretto: il velo sotto, il pannello sopra. Due piani e non uno, perché il velo deve coprire il contenuto MA NON il pannello che sta chiudendo. */ --z-velo: 30; /* Il pulsante flottante dei messaggi: sopra il contenuto e il velo, sotto la colonna aperta a pannello e la spalla delle comunicazioni. */ --z-flottante: 35; --z-laterale: 40; --z-suggerimento: 50; /* Gli esiti della barra comandi stanno sopra i suggerimenti dei grafici (si cerca anche stando su Statistiche) e sotto la spalla delle comunicazioni, che è un pannello a tutta altezza. */ --z-comandi: 55; --z-spalla: 60; /* Anello di focus (shadow-focus del design system). Era ripetuto in due punti con la stessa terna di valori: se un giorno cambia lo spessore, deve cambiare in entrambi. */ --anello-focus: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); /* --- Densità ----------------------------------------------------------- Rinviati dalla fase 0 con una ragione precisa: il blocco sarebbe stato inerte, perché l'attributo va su `` e quel tag era scritto in ciascuna delle 42 pagine. Dalla fase 1 il telaio ne è proprietario, e la densità costa una riga. TRE token, non una scala globale. Ridefinire `--space-*` sotto `[data-densita]` avrebbe stretto TUTTO, compresa la pagina di accesso e la spaziatura fra i paragrafi: la densità riguarda il RITMO VERTICALE degli elenchi e delle schede, cioè i punti in cui si guardano venti righe di seguito. Altrove il respiro non è spreco. Comoda è il valore di sempre: chi non tocca nulla non vede differenze. */ --pad-scheda: var(--space-4) var(--space-5); --pad-scheda-corpo: var(--space-5); --pad-cella: var(--space-4); --pad-riga: var(--space-3); /* --- Grafici ----------------------------------------------------------- */ /* Due serie: il cremisi dello studio e un blu. Coppia verificata con uno script di controllo (luminosità, saturazione minima, distinguibilità per i tre tipi di daltonismo, contrasto sul bianco) per ENTRAMBI i cremisi dei due studi: passa tutti i controlli. Un grigio come seconda serie era stato scartato: sotto la soglia di saturazione si legge come "dato assente", non come una serie. La coppia con il teal del design system (la piattaforma senza tema di studio) NON è ancora passata da quello script: il design system non ha una palette per i grafici. */ --grafico-serie-1: var(--accent); --grafico-serie-2: #2A6DB5; /* Griglia e assi recessivi: un passo sopra il fondo, mai tratteggiati. */ --grafico-griglia: var(--c-border); --grafico-tenue: var(--c-border-strong); --larghezza-max: 78rem; /* Colonna di navigazione: i 248px della colonna d'inchiostro del design system. "Clienti e conformità", il titolo di gruppo più lungo, ci sta su una riga: un titolo che va a capo spezza la scansione verticale dell'elenco, che è l'unica cosa che una colonna fa meglio di una barra. */ --larghezza-laterale: 15.5rem; /* Filo del brand in cima alla finestra: a zero, perché nel design system il colore entra solo dalla metà destra del marchio ("un solo momento d'accento per vista"). Resta un token perché la colonna appiccicata in alto lo sottrae dalla propria altezza. */ --filo-brand: 0px; --larghezza-testo: 46rem; } /* --- Reset minimo -------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* L'attributo `hidden` deve vincere SEMPRE. Il browser lo traduce in `display: none` con la specificità più bassa possibile, quindi qualunque regola `display` di classe lo annulla: `.avviso { display: flex }` teneva visibile per sempre l'avviso "pratica aggiornata da qualcun altro", che nasce nascosto (difetto trovato guardando la pagina, settembre 2026). */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; font-family: var(--font-ui); font-size: var(--text-base); line-height: var(--leading-normal); letter-spacing: var(--tracking-testo); color: var(--c-text); background: var(--c-bg-sunken); /* Il layout a colonna con `main` elastico tiene il piè di pagina in fondo anche sulle pagine corte (elenco vuoto, errore), dove altrimenti risalirebbe a metà schermo. */ min-height: 100vh; display: flex; flex-direction: column; } img, svg { max-width: 100%; display: block; } /* `inherit` e non un colore fisso: i link dentro la barra scura devono restare chiari senza una regola dedicata per ogni contesto. La sottolineatura è quella del design system: sottile, staccata, nel colore dell'accento. I link che non la vogliono (navigazione) la tolgono già. */ a { color: inherit; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; } ::selection { background: var(--kx-teal-100); } /* Accessibilità: un contorno visibile SOLO da tastiera. `:focus-visible` e non `:focus` — quest'ultimo disegnerebbe l'anello anche al clic del mouse, ed è il motivo per cui in tanti progetti si finisce per togliere `outline` del tutto, buttando via l'accessibilità con l'estetica. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Rispetta chi ha chiesto meno animazioni a livello di sistema operativo. Non è una cortesia: per alcune persone il movimento è un sintomo. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; /* Senza questo, un'animazione in ciclo continuerebbe a ripetersi — solo molto più in fretta. Azzerare la durata non basta a fermarla. */ animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* --- Tipografia ---------------------------------------------------------- */ /* Display e H1–H3 nel carattere del marchio, in grassetto; H4 è già testo d'interfaccia e resta in Inter Tight. */ h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--leading-snug); font-weight: 700; margin: 0 0 var(--space-3); letter-spacing: var(--tracking-titolo); } h1 { font-size: var(--text-hero); letter-spacing: var(--tracking-display); } h2 { font-size: var(--text-xl); } h3 { font-size: var(--text-md); } h4 { font-size: var(--text-base); font-family: var(--font-ui); font-weight: 600; } p { margin: 0 0 var(--space-3); } p:last-child { margin-bottom: 0; } /* Occhiello del design system (`.kx-eyebrow`): maiuscole piccole e molto spaziate sopra i titoli di sezione. */ .occhiello { font-size: var(--text-occhiello); text-transform: uppercase; letter-spacing: var(--tracking-occhiello); color: var(--c-text-soft); font-weight: 500; margin: 0 0 var(--space-2); } .sommario { color: var(--c-text-soft); max-width: var(--larghezza-testo); } .testo-tenue { color: var(--c-text-soft); } .testo-piccolo { font-size: var(--text-sm); } .testo-minuscolo { font-size: var(--text-xs); } .mono { font-family: var(--font-mono); font-size: var(--text-sm); } /* Solo per lettori di schermo: usata per le etichette che servono all'accessibilità ma sarebbero rumore visivo (es. "cerca" sopra un campo che ha già una lente). `clip-path` invece di `display:none` perché quest'ultimo la toglierebbe anche ai lettori di schermo. */ .solo-lettori { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* --- Layout -------------------------------------------------------------- */ .contenitore { width: 100%; max-width: var(--larghezza-max); margin-inline: auto; padding-inline: var(--space-5); } main { flex: 1 0 auto; padding-block: var(--space-6) var(--space-8); } .pila > * + * { margin-top: var(--space-5); } .pila-stretta > * + * { margin-top: var(--space-3); } /* Griglia elastica: le colonne si adattano senza media query, perché `auto-fit` + `minmax` fa collassare da sé il numero di colonne quando lo spazio non basta. Una media query per ogni griglia sarebbe stata la soluzione più ovvia e la più fragile. */ .griglia { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } .griglia-due { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); } /* Colonna principale + barra laterale, che scende sotto sotto i 62rem. */ .colonne-pratica { display: grid; gap: var(--space-5); align-items: start; } @media (min-width: 62rem) { .colonne-pratica { grid-template-columns: minmax(0, 1fr) 20rem; } } /* =========================================================================== INTESTAZIONE =========================================================================== */ /* =========================================================================== BARRA ORIZZONTALE — ora solo la console di piattaforma (/admin) =========================================================================== Era la navigazione di tutta l'applicazione; dalla fase 1 del redesign le pagine dello studio usano il telaio a colonna (più sotto). Queste regole restano perché `views/admin/intestazione.ejs` le usa ancora: la console ha cinque destinazioni, non quindici, e una barra le contiene benissimo. Sono anche il motivo per cui il telaio ha un prefisso proprio invece di riusare `.nav-voce`: due componenti che si somigliano ma cambiano per ragioni diverse: condividere le regole significherebbe che un ritocco alla console sposta qualcosa in dodici pagine dello studio. */ .barra { background: var(--c-bg); border-bottom: var(--bordo); position: sticky; top: 0; z-index: var(--z-barra); } /* Filo cremisi sopra la barra: il gesto più economico per portare il colore del brand su ogni pagina senza colorare nulla di funzionale. */ .barra::before { content: ""; display: block; height: var(--filo-brand); background: var(--accent); } .barra-interno { display: flex; align-items: center; gap: var(--space-5); min-height: 4.25rem; } /* Un unico elemento nel markup: l'immagine cambia per tenant tramite la variabile, senza che nessun template sappia di quale studio si tratta. */ .logo { display: block; width: var(--logo-larghezza); height: var(--logo-altezza); background-image: var(--logo); background-repeat: no-repeat; background-position: left center; background-size: contain; flex-shrink: 0; } /* Nome dello studio letto da --tenant-nome: nessun markup duplicato. */ .nome-tenant::before { content: var(--tenant-nome); } .barra-nav { display: flex; align-items: center; gap: var(--space-5); margin-left: auto; } .nav-voci { display: flex; align-items: center; gap: var(--space-5); list-style: none; margin: 0; padding: 0; } /* Maiuscoletto spaziato: la navigazione di entrambi gli studi. VOCI E CAMPANELLO CONDIVIDONO LA STESSA REGOLA, apposta. "Avvisi" era disallineato di 1,6px (MISURATO nel browser: centro del testo a 36,2px contro 37,8px delle altre voci). La causa: le voci erano elementi INLINE, la cui altezza la decide la riga di testo del
  • ; il campanello era un FLEX, la cui altezza la decideva il pallino del contatore (21,6px, più alto della riga di testo da 19,2px). Due modelli di impaginazione diversi centrati nella stessa riga non producono lo stesso punto per il testo, e due tentativi precedenti di pareggiarli con interlinea e padding lo avevano solo spostato. Ora: 1. stessa scatola per tutti (inline-flex, stesso padding, stesso bordo riservato), scritta UNA volta: non possono più divergere; 2. il pallino esce dal flusso (position: absolute), quindi non può più influire sull'altezza di nulla. */ .nav-voce, .campanello { position: relative; display: inline-flex; align-items: center; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: 600; color: var(--c-text-soft); text-decoration: none; padding-block: var(--space-2); border-bottom: 2px solid transparent; white-space: nowrap; transition: color var(--durata-breve) var(--curva-standard), border-color var(--durata-breve) var(--curva-standard); } .nav-voce:hover, .campanello:hover { color: var(--c-text); } .nav-voce[aria-current="page"], .campanello[aria-current="page"] { color: var(--c-text); border-bottom-color: var(--accent); } /* Spazio a destra riservato al pallino: essendo fuori dal flusso non lo occuperebbe da sé, e finirebbe sopra l'elemento successivo. */ .campanello { padding-right: 1.9rem; } .campanello-conteggio { position: absolute; right: 0; /* Centrato sul TESTO, non sulla scatola: la scatola ha 2px di bordo solo in basso, quindi il centro del testo sta 1px sopra il suo centro. */ top: calc(50% - 1px); transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; line-height: 1; min-width: 1.35rem; height: 1.35rem; padding-inline: 0.35rem; border-radius: var(--radius-pill); background: var(--accent); color: #fff; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0; } /* Zero notifiche: il pallino sparisce del tutto invece di mostrare "0". */ .campanello-conteggio[data-conteggio="0"] { display: none; } .utente { display: flex; align-items: center; gap: var(--space-3); padding-left: var(--space-5); border-left: var(--bordo); /* Non si stringe: a stringersi, in una riga che non basta, deve essere il campo di ricerca (che ha `min-width: 0`), non il nome — misurato a 1100px, "Anna Bianchi" andava su due righe accanto a un campo largo 240. */ flex-shrink: 0; } /* Avatar testuale: due iniziali. Nessuna immagine da caricare, da ridimensionare o da conservare — e nessun dato personale in più rispetto al nome che compare comunque accanto. */ .avatar { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-pill); background: var(--c-bg-inverse); color: var(--c-text-inverse); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.03em; flex-shrink: 0; } .utente-dati { line-height: 1.25; } .utente-nome { font-weight: 600; font-size: var(--text-sm); } .utente-ruolo { font-size: var(--text-xs); color: var(--c-text-faint); text-transform: uppercase; letter-spacing: var(--tracking-wide); } /* Schermo stretto, barra della console. CORREZIONE di un difetto preesistente, trovato togliendo il pulsante hamburger insieme alla vecchia barra dello studio. Qui c'era `.barra-nav { display: none }`, che contava sul pulsante per riaprire la navigazione — ma quel pulsante l'ha sempre avuto SOLO la barra dello studio: `views/admin/intestazione.ejs` non l'ha mai reso. Effetto: sotto i 60rem la console di piattaforma restava senza navigazione e senza alcun modo di richiamarla. Ora la barra manda a capo invece di nascondersi. Con quattro voci ci sta, ed è la soluzione giusta proprio perché non richiede uno stato da aprire e chiudere: la console non ha abbastanza destinazioni da giustificarlo. */ @media (max-width: 60rem) { .barra-interno { flex-wrap: wrap; row-gap: var(--space-3); } .barra-nav { width: 100%; flex-wrap: wrap; gap: var(--space-4); margin-left: 0; } .nav-voci { flex-wrap: wrap; gap: var(--space-4); } .utente { padding-left: 0; border-left: none; margin-left: auto; } } /* =========================================================================== TELAIO DELL'APPLICAZIONE — colonna, testata, barra comandi =========================================================================== Struttura (vedi views/partials/telaio.ejs): body a.salta-contenuto invisibile finche' non riceve il fuoco div.telaio griglia a due colonne, filo del brand in cima nav.telaio-laterale appiccicata in alto, alta quanto la finestra div.telaio-corpo colonna elastica: testata, contenuto, pie' header.telaio-testata appiccicata in alto: comandi, avvisi, utente ...contenuto della vista... footer.pie button.telaio-velo solo con il menu aperto su schermo stretto aside#comunicazioni la spalla delle chat (gia' esistente) Perche' una griglia e non una colonna `position: fixed` con margine a sinistra: la griglia non richiede di ripetere la larghezza della colonna come margine del contenuto (due valori da tenere allineati a mano), e lo scorrimento resta quello del documento — quindi gli ancoraggi `#sezione`, il ritorno alla posizione col tasto indietro e la stampa continuano a funzionare senza una riga in piu'. */ .salta-contenuto { position: absolute; top: -4rem; left: var(--space-4); z-index: var(--z-comandi); padding: var(--space-2) var(--space-4); background: var(--c-bg); border: var(--bordo); border-radius: var(--radius); box-shadow: var(--ombra-media); font-size: var(--text-sm); font-weight: 600; text-decoration: none; transition: top var(--durata-breve) var(--curva-standard); } /* `:focus` e non `:focus-visible`: questo link esiste SOLO per la tastiera, e con `:focus-visible` in qualche browser resterebbe invisibile proprio a chi lo sta usando. */ .salta-contenuto:focus { top: var(--space-3); } /* Il bersaglio della scorciatoia porta `tabindex="-1"` (fase 8): senza, seguire `#contenuto` sposta lo SCORRIMENTO e non il FUOCO, e il Tab successivo riparte dall'inizio della barra — cioè la scorciatoia non scorcia niente. Misurato: prima del `tabindex` il fuoco restava su `body`. `-1` non lo mette nell'ordine di navigazione: lo rende solo raggiungibile dal codice e da un frammento. L'anello attorno a un contenitore grande quanto la pagina non direbbe nulla a chi vede e disturberebbe chi usa il mouse: `
    ` non è un comando. Stessa scelta già fatta per il titolo di una conversazione. */ main[tabindex="-1"]:focus { outline: none; } .telaio { /* `body` e' una colonna flex (vedi sopra): questo prende tutta l'altezza rimasta, cosi' il pie' di pagina resta in fondo anche sulle pagine corte. */ flex: 1 0 auto; display: grid; /* `minmax(0, 1fr)` e non `1fr`: la larghezza minima predefinita di una colonna di griglia e' `auto`, cioe' "quanto serve al contenuto". Con una tabella larga (le fatture, il carico del team) la colonna si allargherebbe oltre la finestra invece di far scorrere la tabella. E' l'errore classico della griglia con contenuto non comprimibile, e si vede solo su una pagina densa. */ grid-template-columns: var(--larghezza-laterale) minmax(0, 1fr); /* Il filo cremisi in cima alla finestra: unico gesto di colore del brand su ogni pagina. Sta sul contenitore della griglia — non su un elemento dedicato — perche' cosi' attraversa entrambe le colonne, e perche' un elemento appiccicato in alto non puo' risalire sopra il bordo del proprio blocco contenitore: la testata si ferma sotto il filo da sola. */ border-top: var(--filo-brand) solid var(--accent); } .telaio-laterale { position: sticky; top: 0; height: calc(100vh - var(--filo-brand)); display: flex; flex-direction: column; gap: var(--space-5); /* La colonna d'inchiostro del design system. Come sul vetro dell'accesso, si ridefiniscono qui i TOKEN che le regole della colonna già usano: il testo diventa carta, i fili e i fondi tinte bianche al 5–8%. */ --c-text: var(--kx-paper); --c-text-soft: var(--kx-neutral-300); --c-text-faint: var(--kx-neutral-300); --c-border: rgba(244, 247, 248, 0.08); /* --bordo va ridichiarato: in :root è già risolto con il filo chiaro. */ --bordo: 1px solid var(--c-border); --c-bg-sunken: rgba(244, 247, 248, 0.05); --accent-tenue: rgba(244, 247, 248, 0.08); padding: 1.75rem var(--space-4); background: var(--c-bg-inverse); color: var(--c-text); overflow-y: auto; /* Arrivati in fondo all'elenco delle voci, la rotellina non deve mettersi a scorrere la pagina sotto. */ overscroll-behavior: contain; } /* Nella colonna d'inchiostro il logo è il lockup scuro. */ .telaio-logo { margin: 0 0 var(--space-2); margin-inline: 0.625rem; width: var(--logo-inverso-larghezza); max-width: calc(100% - 1.25rem); background-image: var(--logo-inverso); } .telaio-gruppi { display: flex; flex-direction: column; gap: var(--space-5); } /* Il primo blocco di gruppi si allunga a riempire lo spazio: e' cosi' che i gruppi `inFondo` (Svago) e il pie' della colonna stanno in basso senza un `margin-top: auto` su ciascuno — due margini automatici nella stessa colonna si spartirebbero lo spazio libero invece di spingere in fondo. */ .telaio-gruppi:not(.telaio-gruppi--fondo) { flex: 1 0 auto; } .telaio-gruppi--fondo { padding-top: var(--space-5); border-top: var(--bordo); } .telaio-gruppo-titolo { margin: 0 0 var(--space-2); padding-inline: var(--space-3); font-size: var(--text-occhiello); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-occhiello); color: var(--c-text-soft); } .telaio-voci { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .telaio-voce { display: flex; align-items: center; gap: var(--space-2); /* Voce della colonna del design system: alta 40px, angoli a 10px, attiva con un velo chiaro e il testo in carta — nessun filo laterale. */ min-height: 2.5rem; padding: var(--space-2) var(--space-3); border-radius: 10px; color: var(--c-text-soft); font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: background var(--durata-breve) var(--curva-standard), color var(--durata-breve) var(--curva-standard); } .telaio-voce:hover { background: var(--c-bg-sunken); color: var(--c-text); } /* Lo stato attivo si legge da `aria-current`, l'attributo che un lettore di schermo annuncia: una classe `is-attiva` sarebbe la stessa informazione scritta due volte, e la seconda si dimentica. */ .telaio-voce[aria-current="page"] { background: var(--accent-tenue); color: var(--c-text); } /* Il pallino dei non letti, nella colonna e nella testata. Non e' fuori dal flusso come quello della vecchia barra: qui la voce e' un flex a piena larghezza, quindi `margin-left: auto` lo spinge a destra senza che possa alzare la riga (era la causa del disallineamento di "Avvisi", misurato nel browser a settembre 2026). */ .telaio-conteggio { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem; padding-inline: 0.35rem; border-radius: var(--radius-pill); background: var(--accent); color: #fff; font-size: var(--text-xs); font-weight: 700; line-height: 1; letter-spacing: 0; } /* Zero: il pallino sparisce invece di mostrare "0". Due attributi perche' due contatori (avvisi e messaggi) vivono nello stesso componente. */ .telaio-conteggio[data-conteggio="0"], .telaio-conteggio[data-conteggio-messaggi="0"] { display: none; } .telaio-laterale-pie { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: var(--bordo); } .telaio-riduci { align-self: flex-start; background: none; border: 0; padding: var(--space-1) var(--space-3); font: inherit; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: 600; color: var(--c-text-faint); cursor: pointer; transition: color var(--durata-breve) var(--curva-standard); } .telaio-riduci:hover { color: var(--c-text); } .telaio-ambiente { margin: 0; padding-inline: var(--space-3); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--c-text-faint); } /* --- Colonna del contenuto ---------------------------------------------- */ .telaio-corpo { display: flex; flex-direction: column; /* Gemello del `minmax(0, 1fr)` di sopra: senza, un figlio non comprimibile (una tabella) allargherebbe la colonna flex. */ min-width: 0; } .telaio-testata { position: sticky; top: 0; z-index: var(--z-barra); display: flex; align-items: center; gap: var(--space-4); /* La barra alta 64px del design system, sul fondo della pagina. */ min-height: 4rem; padding: var(--space-3) var(--space-5); background: var(--c-bg-sunken); border-bottom: var(--bordo); /* Sempre libera di andare a capo: finché tutto sta su una riga non cambia nulla, e quando non ci sta il `@container testata` più sotto decide che cosa scende. */ flex-wrap: wrap; /* CONTAINER QUERY, non media query — difetto trovato MISURANDO a 1000-1100px di finestra. La media query guarda la FINESTRA; la testata però è larga la finestra MENO la colonna (240px). Sopra i 60rem la colonna ricompare e toglie quei 240px proprio mentre la media query dice "c'è spazio": misurato a 1000px, il campo di ricerca scendeva a 140px con "Ctrl K" sopra il segnaposto, e il nome dell'utente andava su due righe. Chiedendo la larghezza alla testata stessa, la regola vale identica con la colonna aperta, ridotta o in modalità focus. `inline-size` contiene solo la larghezza: l'altezza resta quella del contenuto, che è ciò che deve crescere quando la barra va a capo. */ container: testata / inline-size; } { margin-bottom: 0; margin-right: auto; } .telaio-accesso { display: flex; gap: var(--space-2); margin-left: auto; } /* Pulsante del menu: da schermo largo non serve — la colonna e' sempre li' — tranne quando e' stata ridotta, che e' l'unico modo di riaprirla. */ .telaio-menu { display: none; background: none; border: var(--bordo); border-radius: var(--radius); padding: var(--space-2) var(--space-3); font: inherit; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: 600; cursor: pointer; flex-shrink: 0; } .telaio-menu:hover { background: var(--c-bg-sunken); } .telaio-avvisi { display: inline-flex; align-items: center; gap: var(--space-2); margin-left: auto; padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 500; color: var(--c-text-soft); text-decoration: none; white-space: nowrap; transition: background var(--durata-breve) var(--curva-standard), color var(--durata-breve) var(--curva-standard); } .telaio-avvisi:hover { background: var(--c-bg-sunken); color: var(--c-text); } .telaio-avvisi[aria-current="page"] { background: var(--accent-tenue); color: var(--c-text); } /* Nella testata il pallino segue la parola, non il bordo destro della voce. */ .telaio-avvisi .telaio-conteggio { margin-left: 0; } /* Velo dietro il menu aperto. `hidden` finche' e' chiuso, e il reset globale `[hidden] { display: none !important }` vince su questa regola: e' il modo piu' corto di non far intercettare i clic a un elemento invisibile. */ .telaio-velo { display: none; position: fixed; inset: 0; z-index: var(--z-velo); border: 0; padding: 0; background: rgba(10, 10, 10, 0.35); cursor: pointer; } /* Pulsante flottante dei messaggi, in basso a destra: prende il posto della voce "Messaggi" della colonna. Pieno nell'accento, rotondo come gli IconButton del design system, con l'ombra dei livelli che si staccano (shadow-3). Il pallino dei non letti è quello della colonna, spostato sull'angolo. */ .messaggi-flottante { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: var(--z-flottante); display: inline-grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: var(--radius-pill); background: var(--accent); color: var(--kx-white); box-shadow: 0 24px 48px -16px rgba(10, 10, 10, 0.18), 0 2px 6px rgba(10, 10, 10, 0.05); text-decoration: none; transition: background var(--durata-breve) var(--curva-standard), transform var(--durata-breve) var(--curva-standard); } .messaggi-flottante:hover { background: var(--accent-scuro); } .messaggi-flottante:active { transform: scale(0.98); } .messaggi-flottante-icona { display: block; } .messaggi-flottante .telaio-conteggio { position: absolute; top: -0.25rem; right: -0.25rem; margin: 0; background: var(--c-bg-inverse); box-shadow: 0 0 0 2px var(--kx-white); } /* --- Barra comandi ------------------------------------------------------ */ .comandi { position: relative; display: flex; align-items: center; gap: var(--space-2); /* Cresce fino a 34rem e poi si ferma: un campo di ricerca larghissimo su uno schermo grande sembra il protagonista della pagina, e non lo e'. */ flex: 1 1 22rem; max-width: 34rem; margin: 0; } .comandi-campo { /* Piu' bassa della regola generale dei campi: qui il campo sta in una barra alta 3,75rem insieme a nome, ruolo e due pulsanti. */ padding-block: var(--space-2); font-size: var(--text-sm); min-width: 0; } .comandi-scorciatoia { position: absolute; right: 5.4rem; padding: 0.1rem var(--space-2); border: var(--bordo); border-radius: var(--radius); background: var(--c-bg-sunken); color: var(--c-text-faint); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.4; pointer-events: none; } /* Nascosta appena si scrive: `visibility` e non `display`, per non togliere dal DOM accessibile l'elemento che il campo cita in `aria-describedby`. */ .comandi-scorciatoia.is-nascosta { visibility: hidden; } .comandi-invia { flex-shrink: 0; background: none; border: var(--bordo); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-3); font: inherit; font-size: var(--text-sm); font-weight: 500; cursor: pointer; } .comandi-invia:hover { background: var(--c-bg-sunken); } .comandi-esiti { position: absolute; top: calc(100% + var(--space-2)); left: 0; right: 0; z-index: var(--z-comandi); max-height: min(28rem, 70vh); overflow-y: auto; overscroll-behavior: contain; background: var(--c-bg); border: var(--bordo); border-radius: var(--radius); box-shadow: var(--ombra-media); } /* Sulla pagina /cerca lo stesso contenitore non è un pannello sospeso ma la pagina stessa: si spegne il posizionamento, non si riscrive il markup. */ .comandi-esiti--pagina { position: static; max-height: none; overflow: visible; border: 0; border-radius: 0; box-shadow: none; } .comandi-sezione { margin: 0; padding: var(--space-2) var(--space-4); background: var(--c-bg-sunken); border-bottom: var(--bordo); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--c-text-faint); } .comandi-elenco { list-style: none; margin: 0; padding: 0; } .comandi-voce { display: block; padding: var(--space-3) var(--space-4); border-bottom: var(--bordo); color: inherit; text-decoration: none; } .comandi-elenco li:last-child .comandi-voce { border-bottom: 0; } /* `is-evidenziata` la scrive comandi.js muovendosi con le frecce: e' lo stato della tastiera, distinto dal passaggio del mouse, e i due non devono accendersi insieme (due righe evidenziate = nessuna evidenziata). */ .comandi-voce:hover, .comandi-voce.is-evidenziata { background: var(--accent-tenue); } .comandi-voce-titolo { font-weight: 600; font-size: var(--text-sm); } .comandi-voce-meta { font-size: var(--text-xs); color: var(--c-text-soft); display: flex; flex-wrap: wrap; gap: var(--space-2); } .comandi-vuoto { margin: 0; padding: var(--space-4); font-size: var(--text-sm); color: var(--c-text-soft); } /* --- Schermo largo: la colonna si puo' ridurre -------------------------- */ /* La regola vive DENTRO la media query di proposito. Fuori, uno stato "ridotta" salvato in localStorage dal portatile nasconderebbe la navigazione anche sul telefono, dove non esiste alcun modo di riaprirla se non svuotando la memoria del browser. */ @media (min-width: 60.0625rem) { /* UNA colonna, non "zero e una". DIFETTO TROVATO MISURANDO: con `grid-template-columns: 0 minmax(0, 1fr)` e la colonna nascosta con `display: none`, il telaio resta con UN solo figlio — che la griglia colloca nella PRIMA colonna, quella larga zero. Misurato nel browser: il contenitore del contenuto passava da 1248px a 48px (i soli margini interni), cioè la pagina spariva. Un elemento con `display: none` non occupa la sua cella: non esiste per la griglia. */ .telaio[data-laterale="ridotta"] { grid-template-columns: minmax(0, 1fr); } .telaio[data-laterale="ridotta"] .telaio-laterale { display: none; } .telaio[data-laterale="ridotta"] .telaio-menu { display: inline-flex; } } /* --- Schermo stretto: la colonna diventa un pannello -------------------- */ @media (max-width: 60rem) { .telaio { grid-template-columns: minmax(0, 1fr); } .telaio-laterale { position: fixed; top: var(--filo-brand); bottom: 0; left: 0; width: min(19rem, 86vw); height: auto; z-index: var(--z-laterale); box-shadow: var(--ombra-media); /* Fuori schermo e non `display: none`: cosi' entra scorrendo, e soprattutto resta nel documento — un pannello che appare dal nulla non ha una posizione da cui il fuoco possa entrare. */ transform: translateX(-100%); transition: transform var(--durata-media) var(--curva-rivela); } .telaio[data-menu="aperto"] .telaio-laterale { transform: translateX(0); } .telaio-velo { display: block; } .telaio-menu { display: inline-flex; } /* "Riduci" non vuol dire nulla dove la colonna e' gia' a scomparsa. */ .telaio-riduci { display: none; } .telaio-testata { gap: var(--space-3); } } /* La barra comandi va a capo e prende tutta la riga quando la TESTATA (non la finestra: vedi `container` su .telaio-testata) scende sotto i 56rem. La soglia è misurata: a 56rem, su una riga sola, il campo resta sopra i 20rem accanto ad Avvisi, Vista, nome, ruolo e due pulsanti; sotto, il campo sarebbe il primo a pagare. */ @container testata (max-width: 56rem) { .comandi { order: 3; flex-basis: 100%; max-width: none; } .telaio-avvisi { margin-left: 0; } .utente { margin-left: auto; padding-left: var(--space-4); } } /* La scorciatoia "Ctrl K" sta DENTRO il campo, sopra il segnaposto: sotto i 28rem di barra i due si sovrapponevano (misurato: "Cerca o c" e subito dopo "Ctrl K"). Anche qui conta la larghezza della testata, non della finestra — e sotto quella soglia, di solito, una tastiera non c'è. */ /* TELEFONO: l'avatar senza nome (Password ed Esci stanno nel menu che l'avatar apre, vedi "Il menu dell'utente"). Misurato a 380 e 600px, la testata appiccicata era alta 170px su tre righe (Menu·Avvisi·Vista / utente / ricerca): un quarto di uno schermo da 700px, occupato su ogni pagina. Il nome e il ruolo sono la parte più larga della riga dell'utente, e anche la meno necessaria su un telefono, che di solito ha UNA persona davanti: le iniziali nell'avatar bastano a riconoscersi. Nascosti alla VISTA, non al lettore di schermo: sono le stesse dichiarazioni di `.solo-lettori`, ripetute qui perché una classe non si aggiunge da una container query. L'avatar resta `aria-hidden`, quindi senza questo il nome sparirebbe del tutto per chi non vede lo schermo. Alternativa scartata: tenere la testata e toglierle `position: sticky` sul telefono — si recuperava lo spazio, ma il pulsante "Menu" spariva scorrendo, e per cambiare pagina bisognava tornare in cima. */ @container testata (max-width: 40rem) { .utente-dati { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Filo e rientro a sinistra separano il NOME dalle voci accanto: senza nome non separano più niente, e costano 16px. Misurato a 380px: Menu, Avvisi, Vista e avatar chiedevano 327px contro 317 disponibili — erano esattamente quei 16px a mandare l'avatar sulla riga successiva. */ .utente { padding-left: 0; border-left: 0; } } /* Margine laterale della testata su telefono: 16px invece di 24. Una MEDIA query e non un @container, per l'unica ragione possibile: un container non può interrogare sé stesso, e questo è il padding della testata. Sotto i 30rem la colonna è sempre a scomparsa, quindi finestra e testata hanno la stessa larghezza e la domanda è la stessa. Misurato a 360px (molti telefoni Android): senza, l'avatar andava a capo per pochi pixel. */ @media (max-width: 30rem) { .telaio-testata { padding-inline: var(--space-4); } } @container testata (max-width: 28rem) { .comandi-scorciatoia { display: none; } } /* =========================================================================== TESTATA DI PAGINA =========================================================================== */ .testata { background: var(--c-bg); border-bottom: var(--bordo); padding-block: var(--space-6); } .testata-interno { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); } .testata h1 { margin-bottom: var(--space-2); } .testata-azioni { display: flex; flex-wrap: wrap; gap: var(--space-3); } /* Filo di Arianna: l'unica navigazione "indietro" della piattaforma. Un pulsante "torna" in ogni pagina sarebbe stato più semplice e più povero — qui si vede sempre dove si è dentro la gerarchia. */ .briciole { display: flex; flex-wrap: wrap; /* Sulla linea di base: i collegamenti hanno il bersaglio allargato (padding-block, più sotto) e l'ultima briciola è testo nudo; allineate in alto la loro scritta scalerebbe. */ align-items: baseline; gap: var(--space-2); list-style: none; margin: 0 0 var(--space-3); padding: 0; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--c-text-faint); } /* Un elenco senza punti né rientri: le voci stanno una per riga, col loro stato accanto. */ .elenco-nudo { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); } .briciole li + li::before { content: "/"; margin-right: var(--space-2); } .briciole a { text-decoration: none; } .briciole a:hover { color: var(--accent); } /* =========================================================================== SCHEDE =========================================================================== */ /* Card del design system: filo sottile, raggio lg, nessuna ombra da ferma. */ .scheda { background: var(--c-surface); border: var(--bordo); border-radius: var(--radius-lg); } .scheda-testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--pad-scheda); border-bottom: var(--bordo); } .scheda-testa h2, .scheda-testa h3 { margin: 0; font-size: var(--text-md); } .scheda-corpo { padding: var(--pad-scheda-corpo); } .scheda-corpo-fitta { padding: var(--pad-scheda); } .scheda-pie { padding: var(--space-3) var(--space-5); border-top: var(--bordo); background: var(--c-bg-sunken); font-size: var(--text-sm); } /* Riquadri numerici del cruscotto. Il numero grande è ripreso dalla sezione "Track Record" di Atrigna, dove i numeri sono l'argomento principale. */ .riquadro { background: var(--c-surface); border: var(--bordo); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); /* Il filo colorato a sinistra è l'unico segnale cromatico del riquadro: evita di colorare il fondo, che renderebbe il cruscotto un arcobaleno. */ border-left: 3px solid var(--c-border-strong); text-decoration: none; display: block; transition: border-color var(--durata-breve) var(--curva-standard), box-shadow var(--durata-breve) var(--curva-standard); } a.riquadro:hover { border-left-color: var(--accent); box-shadow: var(--ombra-media); } .riquadro-numero { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; font-weight: 600; } .riquadro-etichetta { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--c-text-faint); font-weight: 600; margin-top: var(--space-2); } .riquadro--critico { border-left-color: var(--c-critico); } .riquadro--critico .riquadro-numero { color: var(--c-critico); } .riquadro--attenzione { border-left-color: var(--c-attenzione); } .riquadro--attenzione .riquadro-numero { color: var(--c-attenzione); } .riquadro--accento { border-left-color: var(--accent); } /* =========================================================================== AZIONI =========================================================================== */ /* Button del design system: pillola alta 40px (32px la piccola), peso 500. Le varianti sono le sue: primario inchiostro, accento, secondario a filo, pericolo pieno. In un contesto operativo un'azione che modifica dati deve essere inequivocabilmente cliccabile, non elegante. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 2.5rem; font-family: var(--font-ui); font-size: 0.875rem; font-weight: 500; letter-spacing: var(--tracking-testo); line-height: 1.2; color: var(--kx-paper); background: var(--c-bg-inverse); border: 1px solid transparent; border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); text-decoration: none; cursor: pointer; transition: background var(--durata-breve) var(--curva-standard), border-color var(--durata-breve) var(--curva-standard), color var(--durata-breve) var(--curva-standard), transform var(--durata-breve) var(--curva-standard); white-space: nowrap; } .btn:hover { background: var(--kx-neutral-800); } .btn:active { transform: scale(0.98); } .btn--accento { background: var(--accent); color: var(--kx-white); } .btn--accento:hover { background: var(--accent-scuro); } .btn--fantasma { background: var(--c-surface); color: var(--c-text); border-color: var(--c-border-strong); } .btn--fantasma:hover { background: var(--c-bg-sunken); color: var(--c-text); } /* Azione distruttiva: la variante `danger` del design system, piena. */ .btn--pericolo { background: var(--kx-danger-500); color: var(--kx-white); } .btn--pericolo:hover { background: #A8463D; color: var(--kx-white); } .btn--piccolo { min-height: 2rem; padding: var(--space-1) var(--space-3); font-size: var(--text-sm); } /* Un'azione rara accanto a quella principale (Archivia accanto a Modifica): presente, ma senza il peso di un bottone (revisione viste 2026-10, E1). */ .btn--discreto { border-color: transparent; background: transparent; color: var(--c-text-soft); } .btn--discreto:hover { border-color: var(--c-border-strong); color: var(--c-text); } /* Spento: l'opacità del design system, e il passaggio del mouse non cambia nulla — un pulsante che reagisce sembra cliccabile. */ .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.4; transform: none; cursor: not-allowed; } .btn:disabled:hover, .btn[aria-disabled="true"]:hover { background: var(--c-bg-inverse); } .btn--accento:disabled:hover, .btn--accento[aria-disabled="true"]:hover { background: var(--accent); } .btn--fantasma:disabled:hover, .btn--fantasma[aria-disabled="true"]:hover { background: var(--c-surface); } .btn--pericolo:disabled:hover, .btn--pericolo[aria-disabled="true"]:hover { background: var(--kx-danger-500); } /* CTA testuale: il pattern editoriale condiviso dai due studi — parola breve più segno rosso, mai un rettangolo pieno. Due varianti, perché i due siti usano una il filo sotto e l'altra la freccia. */ .cta { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--c-text); background: none; border: none; padding: 0; cursor: pointer; text-decoration: none; } .cta--filo { border-bottom: 2px solid var(--accent); padding-bottom: 0.15em; } .cta--filo:hover { color: var(--accent); } .cta--freccia::after { content: "\2192"; color: var(--accent); transition: transform var(--durata-breve) var(--curva-standard); } .cta--freccia:hover::after { transform: translateX(0.3em); } .riga-azioni { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; } /* BARRA DELLE AZIONI di un riquadro (revisione viste 2026-10, T2): i bottoni in riga, mai impilati; il passo avanti a sinistra, ciò che cancella, storna o archivia spinto in fondo a destra. */ .barra-azioni { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; } .barra-azioni > form { margin: 0; } .barra-azioni-fondo { margin-left: auto !important; } /* Una scelta e il suo bottone sulla stessa riga: il bottone allineato al campo, non all'etichetta. */ .campo-in-riga { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: end; } .campo-in-riga > .campo { margin: 0; } /* Un form che contiene un solo pulsante non deve occupare una riga propria né aggiungere margini: serve solo a trasportare il metodo POST e il token CSRF, non è un blocco di layout. */ .form-inline { display: inline; margin: 0; } /* Etichetta di un dato NON modificabile, con lo stesso aspetto di