/* Palette Backstage — la stessa in tutta l'app (specifica §3.4). */ /* I token del colore stanno in `token.css`, generato da `condiviso/colori.js` (contratto §1.10). Qui non si scrive nessun esadecimale: si usano le variabili, che di notte e di giorno hanno gli stessi nomi e valori diversi. `color-scheme` sta là dentro insieme ai neutri, e cambia col modo: i controlli nativi — selettore data, frecce dei `select`, barre di scorrimento — li disegna il browser, e senza quella riga li disegna per il fondo sbagliato. Sul fondo scuro l'icona del calendario risultava nera su nero: c'era, ma non si vedeva. */ @import url('token.css'); /* **Gyrochrome**, il carattere dei titoli (decisione del 21 settembre 2026: il tema è quello di LGI). Un solo file variabile, 400–900, servito da noi: `web/font/gyrochrome.woff2`, 37 KB, SIL Open Font License 1.1 — la licenza sta accanto al file (`web/font/OFL.txt`) e va lasciata lì. `swap`: il testo si legge subito col carattere di sistema e cambia quando il file arriva; un titolo che appare tardi è meglio di una pagina che aspetta. LGI incorporava il solo Medium in base64 e i grassetti erano finti: qui i pesi sono veri. */ @font-face { font-family: 'Gyrochrome'; src: url('font/gyrochrome.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; } :root { /* Il raggio non è un colore, ed è l'unica cosa di forma che sta qui. */ /* I tre raggi con un nome passano dalla curvatura come tutti gli altri: erano l'unico posto del foglio in cui un angolo restava fisso, e con un tema ad angoli vivi i pannelli restavano tondi. */ --raggio: calc(10px * var(--curvatura)); /* I nomi di prima, tenuti come alias. `--azione` era `#F5A623` e adesso è l'accento scelto dall'azienda: è la riga che cambia il colore di ogni bottone del prodotto. Sta qui come alias invece che rinominata in quarantadue posti perché il nome vecchio dice ancora il vero — quello è il colore dell'azione — e una sostituzione di massa su un foglio da millesettecento righe è il modo di rompere qualcosa che nessuna prova guarda. `--scaduto` è l'errore, e `--conflitto` resta l'arancione fisso della regola §737: se seguisse il tema, un'azienda col tema corallo avrebbe i conflitti dello stesso colore dei bottoni. */ /** * **Il pieno si dipinge col colore leggibile, non con quello scelto.** * * `--azione` è il fondo di ogni superficie piena d'accento — il «+ Crea», i * bottoni, le pastiglie, la voce attiva del menu — e sopra ci va una * scritta. `--accento-fondo` è lo stesso colore dell'azienda portato dove * quella scritta si legge: su undici colori su quattordici è identico, e si * muove solo sui viola e sui blu di mezzo, dove né il bianco né il nero * bastano. Il colore intatto resta `--accento`, e lo usa tutto quello su cui * non si scrive: fili, bordi, il quadratino dell'anteprima. * * Il ripiego su `--accento` serve alle pagine pubbliche, che il tema non * l'hanno: là l'accento è quello di casa, ed è già leggibile. */ --azione: var(--accento-fondo, var(--accento)); /* **L'accento quando fa la scritta, che non è lo stesso colore.** Nel foglio l'accento fa due mestieri: il pieno di sei bottoni e il colore di cinquantotto scritte. Finché le tinte erano cinque scelte da noi la differenza non contava; da quando il colore lo sceglie l'azienda sì — un giallo che sta benissimo dentro un bottone, come collegamento su fondo bianco non si legge. `--accento-testo` è lo stesso colore portato al contrasto AA sul fondo del momento (`condiviso/colori.js`, `perTesto`). */ --azione-testo: var(--accento-testo, var(--accento)); /* I due raggi, e sono due. Il CSS ne aveva sei valori diversi — 4, 6, 7, 8, 9 e 999 — nati uno per volta senza che nessuno li scegliesse. Otto è il più frequente e diventa quello dei pannelli; sei quello di bottoni, campi e chip. Il 999 delle pastiglie resta: quello non è un raggio, è una forma. */ /* --------------------------------------------------------------------- L'INCASTRO: LE FASCE FISSE SI SOVRAPPONGONO, NON COMBACIANO --------------------------------------------------------------------- Segnalato il 1° settembre 2026: scorrendo si vedeva una striscia di un pixel del contenuto muoversi fra una fascia fissa e l'altra — fra la fascia della prova e la barra dei giorni, e fra la barra dei giorni e il titolo del mese. Da quella fessura si intravedevano pastiglie e celle. Il motivo e' che **combaciare al pixel dipende da un arrotondamento che non controlliamo**: l'altezza vera di una fascia su uno schermo a densita' doppia e' 121,5, e chi si ferma sotto di lei si ferma a 122 — mezzo pixel piu' in basso del suo bordo. La cura non e' un'altezza piu' precisa: e' non dipendere dalla precisione. Ogni fascia si ferma **un pixel piu' su** di dove finisce quella sopra, e quel pixel non si vede perche' chi sta sopra ha lo `z-index` piu' alto e chi sta sotto gli passa dietro. Un errore di frazione viene mangiato dalla sovrapposizione invece di aprire un buco. Vale ovunque ci siano due fasce impilate, non solo sul calendario: la riga dei comandi di ogni pagina sta sotto la cornice, e aveva la stessa fessura. */ --incastro: 1px; /* **Lo stacco di un'ancora dalla testata.** Quanta aria resta fra il bordo del blocco fisso e il titolo della sezione a cui si è appena saltati: è l'aria che fa leggere «qui comincia» invece di «qui è tagliato». Una manopola e non un numero sparso, perché la usano in due — le ancore di tutto il prodotto e il menu delle sezioni — e devono muoversi insieme. */ --stacco-ancora: calc(12px * var(--densita)); --raggio-pannello: calc(10px * var(--curvatura)); --raggio-comando: calc(8px * var(--curvatura)); --su-azione: var(--su-accento); --scaduto: var(--errore); } * { box-sizing: border-box; } /* `hidden` vuol dire nascosto, e basta. * * L'attributo vale `display: none` nel foglio del browser, e **qualunque** * regola nostra che dichiari un `display` gli passa davanti. Il campo del * codice a due fattori in `accesso.html` era marcato `hidden` e si vedeva * lo stesso, per via di `label { display: block }` qui sotto: ogni cliente * apriva il login e trovava un campo che chiedeva un codice che nessuno gli * avrebbe mandato. * * Era già successo due volte, e due volte era stato turato sul posto — * `.velo[hidden]`, `.barra-mesi[hidden]`. Quei due cerotti sono spariti con * questa riga. * * **Perché `!important` e non la sola specificità.** Contro un selettore di * tipo (`label`) basterebbe: un selettore d'attributo lo batte. Contro un * selettore di classe no — `.velo` e `[hidden]` pesano uguale, e a decidere * resterebbe l'ordine nel file, cioè una regola che si rompe al primo che * aggiunge CSS in fondo. `hidden` però non è una preferenza di stile su cui * discutere: è la dichiarazione che l'elemento non va disegnato. Lo stesso * ragionamento, e la stessa forma, della regola di stampa più in basso. */ [hidden] { display: none !important; } body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: calc(24px * var(--densita)); background: var(--sfondo); color: var(--testo); font: 16px/1.5 var(--carattere, system-ui); } .riquadro { width: 100%; /* Quattrocento e non quattrocentoventi: una card di accesso più stretta della riga di testo che contiene si legge in un colpo d'occhio, e ventiquattro pixel in meno bastano a farla sembrare posata invece che stesa. */ max-width: 400px; background: var(--superficie); border: var(--filo) solid var(--bordo); border-radius: var(--raggio); padding: calc(32px * var(--densita)) calc(24px * var(--densita)); } /* Ublik in testa alle tre pagine dove è **lui** a presentarsi: accesso, registrazione, avanzamento. Qui l'azienda cliente non c'è ancora — o non c'è più — quindi la firma discreta del menu non è il tono giusto. */ .riquadro .lockup-card { display: block; height: 28px; margin-bottom: calc(24px * var(--densita)); color: var(--testo); } /* In linea e non ``, per la stessa ragione della firma nel menu: dentro un `` `currentColor` vale il nero, e la parola sparirebbe sul fondo scuro. */ .riquadro .lockup-card svg { height: 100%; width: auto; display: block; } /* Sulla Rete dei Tecnici in cima c'è il logo della Rete (NOTA REGIA 22:55 4/11/2026): è su due livelli, quindi più alto del lockup di Ublik. Ublik si nomina in fondo, piccolo, con il suo logo. */ .riquadro .logo-rete-card { height: 44px; width: auto; } .firma-rete { display: flex; align-items: center; justify-content: center; gap: calc(6px * var(--densita)); margin: calc(24px * var(--densita)) 0 0; font-size: calc(12px * var(--corpo)); color: var(--testo-tenue); } .firma-rete .firma-rete-ublik { display: inline-block; height: 14px; color: var(--testo-tenue); } .firma-rete .firma-rete-ublik svg { height: 100%; width: auto; display: block; } /* Le spaziature della card sulla scala 24/16/12, che è quella che il resto del prodotto usa già: titolo, sottotitolo, campi. */ .riquadro h1 { margin-bottom: calc(12px * var(--densita)); } .riquadro .sottotitolo { margin: 0 0 calc(24px * var(--densita)); } .riquadro form > * + * { margin-top: calc(16px * var(--densita)); } /* **Il carattere dei titoli lo dice il vestito.** Chi non ne dichiara uno stretto riceve il suo carattere normale, e per quattro vestiti su cinque questa riga non cambia niente: è una manopola, non una regola di tema. */ h1 { margin: 0 0 calc(8px * var(--densita)); font-family: var(--carattere-stretto, var(--carattere)); font-size: calc(22px * var(--corpo)); font-weight: 600; letter-spacing: .4px; } /* I titoli di sezione e di finestra portano il carattere dei titoli, come in LGI (h2 e h3 in Gyrochrome, spaziatura .4px). Le misure restano quelle di ogni regola sotto: qui si cambia solo la famiglia. */ h2, h3 { font-family: var(--carattere-titoli, var(--carattere)); letter-spacing: .4px; } .sottotitolo { margin: 0 0 calc(24px * var(--densita)); color: var(--testo-tenue); font-size: calc(15px * var(--corpo)); } label { display: block; margin-bottom: calc(16px * var(--densita)); font-size: calc(14px * var(--corpo)); color: var(--testo-tenue); } /* Si elencano i tipi da ESCLUDERE, non quelli da includere: elencando i tre di partenza restavano fuori i campi scritti senza `type` — che il browser tratta come testo, ma che `input[type="text"]` non seleziona, perché è un selettore d'attributo — e con loro date, mesi e numeri. Cinquanta campi bianchi su fondo scuro, in otto pagine. Le negazioni stanno in `:where()` per non pesare sulla specificità: così `.strumenti input[type="date"]` continua a vincere sulla larghezza. */ input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"])) { width: 100%; margin-top: calc(6px * var(--densita)); padding: calc(10px * var(--densita)) calc(12px * var(--densita)); background: var(--sfondo); border: var(--filo) solid var(--bordo); border-radius: calc(8px * var(--curvatura)); color: var(--testo); /* **Sedici, e non quindici.** Sotto i 16px iOS ingrandisce la pagina al primo tocco su un campo, e non la rimpicciolisce più: si resta a lavorare su una pagina zoomata e storta, con la testata fuori schermo. È il difetto mobile più odioso che ci sia, e l'unico rimedio è non scendere mai sotto quella misura — su nessun campo, in nessuna pagina. Vale anche da desktop: una regola sola è una regola che non si dimentica. */ font-size: calc(16px * var(--corpo)); /* Quarantaquattro punti sono la misura del polpastrello (Apple HIG). Un campo alto trenta si prende lo stesso, ma con due tentativi. */ min-height: 44px; } /* **Il bordo di selezione sta solo sui campi in cui si scrive, e solo per chi usa la tastiera** (28 settembre 2026, regola di Andrea). Qui c'era `input:focus`: l'anello compariva **anche col mouse** e su qualunque input — comprese le spunte e i selettori di file, dove non si scrive niente. Un anello che compare a ogni clic è rumore, e la gente impara a ignorarlo: poi non lo vede più nemmeno quando serve, cioè quando si naviga col tabulatore e bisogna sapere dove si è. `:focus-visible` lo mostra solo a chi arriva da tastiera. Sui campi di scrittura resta perché è lì che serve davvero: dice dove finirà quello che scrivi. Bottoni, collegamenti e righe hanno il loro anello più sotto, in un posto solo — e questa è l'unica regola che veste i campi di scrittura, per non ripetere il difetto dello stesso selettore in due punti del foglio. */ input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"])):focus-visible, select:focus-visible, textarea:focus-visible { /* Il colore dei collegamenti, non `--tracciamento`: l'anello è un segno e vuole 3:1 sul fondo — l'azzurro chiaro faceva 2,77, questo 4,59 (C6-T-2308). */ outline: 2px solid var(--collegamento); outline-offset: 1px; } .spunta { display: flex; gap: calc(10px * var(--densita)); align-items: flex-start; margin: calc(4px * var(--densita)) 0 calc(24px * var(--densita)); color: var(--testo); font-size: calc(14px * var(--corpo)); } .spunta input { margin-top: calc(3px * var(--densita)); accent-color: var(--azione); } .spunta .nota { display: block; color: var(--testo-tenue); font-size: calc(13px * var(--corpo)); } button { width: 100%; padding: calc(12px * var(--densita)); background: var(--azione); border: 0; border-radius: calc(8px * var(--curvatura)); /* Il testo sopra l'accento: bianco su quattro temi, scuro sull'ambra. */ color: var(--su-azione); font-size: calc(15px * var(--corpo)); font-weight: 600; cursor: pointer; } button:disabled { opacity: .55; cursor: default; } /* **Il bottone dentro una riga** (22 settembre 2026). `width: 100%` è la regola di casa per i moduli, ma dentro una riga flessibile un bottone senza classe la prendeva tutta e il testo accanto restava undici pixel: «Dotazione di bordo» con le lettere in colonna, «Per funzionare serve» a capo ogni due lettere. Il «×» ha una regola sua, e in una riga di spunta nessun bottone si allarga. */ button.via { width: auto; flex: none; min-height: 32px; padding: 0 calc(8px * var(--densita)); background: transparent; color: var(--testo-tenue); font-size: calc(18px * var(--corpo)); font-weight: 500; line-height: 1; } button.via:hover { color: var(--errore); background: transparent; } .spunta-carico > button { width: auto; flex: none; } /* Il rosso delle scritte è quello «vivo», scurito in chiaro e schiarito in notte (aspetto del 30/10, n.9): il rosso pieno sul fondo scuro stava a 3,3:1 («Il modulo «Calcolatore palco» è un modulo a parte…»). Così circa 7:1 in chiaro e 6:1 in notte. */ .errore { margin-top: calc(6px * var(--densita)); color: var(--errore-vivo); font-size: calc(13px * var(--corpo)); } .ok { color: var(--ok); font-size: calc(13px * var(--corpo)); } .piede { margin-top: calc(20px * var(--densita)); text-align: center; font-size: calc(14px * var(--corpo)); color: var(--testo-tenue); } /* Il colore dei collegamenti ha una variabile sua (C6-T-2308, n.12): sul chiaro `--tracciamento` faceva 3,05:1 sul bianco e 2,77:1 sul fondo, questo 5,04 e 4,59. */ a { color: var(--collegamento); } /* **La riga si apre anche da tastiera** (C6-T-2301). Le righe degli elenchi, del calendario e di «Oggi» si aprivano solo col clic sulla riga: adesso il nome è un vero link (o un bottone, dove apre una finestra), raggiungibile col Tab e annunciato come tale. Si vede **com'era**: niente azzurro né sottolineatura, il colore e il carattere della riga. L'anello del fuoco è quello di `a:focus-visible` e `button:focus-visible`. Il clic risale alla riga, che fa quello che faceva. */ .apri-riga { color: inherit; text-decoration: none; } button.apri-riga { width: auto; min-height: 0; padding: 0; margin: 0; background: none; border: 0; border-radius: 0; color: inherit; font: inherit; text-align: inherit; cursor: pointer; } /* Barra di avanzamento del provisioning */ .barra { height: 8px; margin: calc(24px * var(--densita)) 0 calc(12px * var(--densita)); background: var(--sfondo); border-radius: calc(999px * var(--curvatura)); overflow: hidden; } .barra > div { height: 100%; width: 0; background: var(--azione); border-radius: calc(999px * var(--curvatura)); transition: width .5s ease; } .passo { color: var(--testo-tenue); font-size: calc(14px * var(--corpo)); text-align: center; } /* Menu di cambio azienda */ .cambia-azienda { position: relative; display: inline-block; } .cambia-azienda > button { width: auto; padding: calc(8px * var(--densita)) calc(12px * var(--densita)); background: var(--superficie); border: var(--filo) solid var(--bordo); color: var(--testo); font-weight: 500; } .cambia-azienda ul { position: absolute; z-index: 10; min-width: 220px; margin: calc(4px * var(--densita)) 0 0; padding: calc(4px * var(--densita)); list-style: none; background: var(--superficie); border: var(--filo) solid var(--bordo); border-radius: calc(8px * var(--curvatura)); } .cambia-azienda li button { width: 100%; padding: calc(8px * var(--densita)) calc(10px * var(--densita)); background: transparent; color: var(--testo); text-align: left; font-weight: 400; } .cambia-azienda li button:hover { background: var(--sfondo); } .cambia-azienda li[aria-current="true"] button { color: var(--azione-testo); } /* --------------------------------------------------------------------------- Pagina Materiali --------------------------------------------------------------------------- */ body.pagina { display: block; align-items: initial; justify-content: initial; padding: 0; } .testata { position: sticky; top: 0; z-index: 5; display: flex; gap: calc(16px * var(--densita)); align-items: center; flex-wrap: wrap; padding: calc(14px * var(--densita)) calc(20px * var(--densita)); background: var(--superficie); border-bottom: var(--filo) solid var(--bordo); } /** * **Il titolo si stringe e va a capo**, e prima no. * * `flex: 0 0 auto` vuol dire «non rimpicciolire mai»: con un nome lungo — «Umbria * Jazz 2026 — main stage Arena Santa Giuliana» sono 448 px — la testata * diventava più larga dello schermo e si portava dietro la pagina. Misurato il * 14 settembre 2026 sulla lista di carico dal link pubblico: 468 px su uno * schermo da 375, cioè proprio la pagina che si apre in piedi accanto a un * furgone. * * `min-width: 0` è la metà che conta: senza, un elemento flex non scende sotto * il suo contenuto minimo nemmeno con `flex-shrink` acceso — ed è lo stesso * `min-width: auto` che il 12 settembre allargava la scheda lavoro. */ .testata h1 { font-size: calc(18px * var(--corpo)); margin: 0; flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; } .testata .spinta { margin-left: auto; } /** * =========================================================================== * UN CONTENUTO CHE NON SI STRINGE — la regola, e sta accanto a quella sopra * =========================================================================== * * Le due righe del titolo qui sopra e questo blocco sono **la stessa famiglia**, * e conviene leggerle insieme: una pagina esce dallo schermo quando qualcosa * dentro dichiara una larghezza minima che nessuno può ridurre. I modi sono * due, e li abbiamo visti tutti e due: * * 1. `min-width: auto` — il minimo automatico di un elemento flex o di * griglia è il suo contenuto. È il difetto del 12 settembre (la scheda * lavoro), del 14 (la lista di carico a 468 su 375) e del 16 (il DPA sul * sito, a 552 su 375, con la tabella dentro un contenitore che non * scorreva). Si chiude con `min-width: 0`, una riga alla volta, dove la * colonna deve poter stringersi. * * 2. **una parola che non si spezza** — e il minimo del contenuto diventa la * lunghezza di quella parola. È il difetto del 17 settembre: la scheda di * una persona portava la pagina a 439 punti su uno schermo da 375, e la * colpa era di `vincenzo.amato@meridiana.esempio.it`. Un indirizzo email * non ha un punto dove andare a capo, e nemmeno un IBAN, un numero di * telaio, un seriale, un nome di file o un URL: sono **dati dei clienti**, * arrivano lunghi quanto pare a loro, e non c'è nessuna larghezza di * schermo che li tenga. * * `anywhere` e non `break-word`: si somigliano a schermo, ma solo `anywhere` * entra nel calcolo della **larghezza minima**, che è la misura che qui allarga * la pagina. `break-word` avrebbe mandato a capo l'indirizzo e lasciato la * pagina larga 439 lo stesso. * * **Perché sui contenitori e non sui valori.** `overflow-wrap` si eredita. Le * righe «etichetta e valore» in questo prodotto le costruisce ogni pagina per * conto suo — sono venticinque file fra schede, tabelle e pannelli — e metterla * su ognuna vorrebbe dire venticinque occasioni di dimenticarsene, più quella * che nasce il mese prossimo. Messa sul pannello vale per tutto quello che ci * finisce dentro, **compreso quello che ancora non c'è**. È la stessa scelta di * `etichettaColonne` in `web/app.js`, e per la stessa ragione. * * **Cosa NON tocca**, ed è il motivo per cui una regola larga qui è sicura: * `overflow-wrap` non ha alcun effetto su un elemento con `white-space: nowrap`. * Le pastiglie, le sigle, i numeri allineati, la reputazione, il nome * dell'azienda con i puntini — tutta roba dichiarata `nowrap` — restano come * sono. L'unica eccezione da scrivere a mano è il nastro delle linguette, che * esce di proposito e scorre per conto suo: l'eccezione sta **dentro la regola * di `.schede`**, più in basso, e non in un secondo blocco qui accanto — lo * stesso selettore scritto in due punti di questo foglio è il difetto del 28 * agosto 2026, dove vinceva l'uno su una proprietà e l'altro sul resto, e non * si rifà apposta. */ .pannello, .riquadro, .sezione-persona, .scheda-persona, .foglio, table { overflow-wrap: anywhere; } /** * **L'etichetta di un bottone non si spezza dentro una parola** (28 settembre * 2026, punto 19 del giro di Andrea). * * `overflow-wrap: anywhere` qui sopra serve ai dati — un codice lungo, un nome * senza spazi — ma cambia anche la larghezza **minima** di tutto quello che sta * dentro una tabella, bottoni compresi. Su una colonna dichiarata `width: 1%` * il risultato misurato sul Report economico era un bottone di **37 px di * larghezza e 162 di altezza**: la parola «Correggi» scritta con le lettere una * sotto l'altra, e la riga della tabella alta 181 px per contenerla. * * Un bottone non è un dato: la sua etichetta si legge o non serve. Qui resta su * una riga, e la colonna si allarga per lui invece di stritolarlo. */ table button, table .bottone { overflow-wrap: normal; white-space: nowrap; } /* E nessun bottone, nemmeno fuori dalle tabelle, si spezza dentro una parola («Sta / mpa» nella lista di carico a 375, 3 ottobre 2026): va a capo fra le parole («Scansiona il / carico»), che è come si legge un'etichetta. */ button, .bottone { overflow-wrap: normal; } /** * **E nemmeno l'intestazione di una colonna si spezza dentro una parola** * (28 settembre 2026, punto 24 del giro di Andrea). * * Dallo stesso `overflow-wrap: anywhere`: le testate uscivano «Ubicazio/ne», * «Pez/zi», «Disponibi/li», «Assorbime/nto», «Prezzo/gio/rno». Un'intestazione * non è un dato — è l'etichetta che dice cosa c'è sotto, e spezzata a metà * parola si legge due volte. Va a capo fra le parole, quando serve, e non * dentro. */ th { overflow-wrap: normal; word-break: keep-all; } .banner { display: flex; gap: calc(12px * var(--densita)); align-items: center; flex-wrap: wrap; padding: calc(12px * var(--densita)) calc(20px * var(--densita)); background: color-mix(in srgb, var(--azione) 12%, transparent); border-bottom: var(--filo) solid color-mix(in srgb, var(--azione) 35%, transparent); color: var(--testo); /* Il tenue che si legge sul velo della fascia (S3-M3, n.13): più sotto. */ --tenue-su-fascia: color-mix(in srgb, var(--testo-tenue) 75%, var(--testo)); font-size: calc(14px * var(--corpo)); } /* --- la barra della demo ------------------------------------------------- Sta sopra ogni altra fascia e dice due cose: che questa è una dimostrazione, e con quale piano la si sta guardando. Il fondo è quello dell'accento come le altre fasce — non un colore suo — perché una demo non è un avviso: non c'è niente che non va. */ .banner.demo { row-gap: calc(8px * var(--densita)); } .piani-demo { display: flex; gap: calc(6px * var(--densita)); flex-wrap: wrap; min-width: 0; } /* Il piano scelto è pieno, gli altri contornati: fra tre bottoni uguali non si capisce quale sia quello che si sta guardando adesso. */ .piani-demo .piano-demo.scelto { background: var(--azione); color: var(--su-accento); border-color: transparent; font-weight: 600; cursor: default; } /* La spiegazione che compare quando la demo dice di no (`spiegaLaDemo` in `app.js`). In basso e non in cima: chi ha appena premuto un bottone sta guardando lì, e una striscia in testata gliela farebbe leggere per caso. */ /* Un'altra scheda ha cambiato azienda (N1, 7 ottobre 2026): una riga fissa in cima, che resta finché non si ricarica — la scheda non si ricarica da sola. */ .avviso-azienda-cambiata { position: fixed; top: env(safe-area-inset-top); left: 0; right: 0; z-index: 95; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: calc(10px * var(--densita)); padding: calc(10px * var(--densita)) calc(16px * var(--densita)); background: var(--superficie-alta); color: var(--testo); border-bottom: calc(3px * var(--densita)) solid var(--errore); box-shadow: 0 6px 20px rgb(0 0 0 / 22%); font-size: calc(14px * var(--corpo)); text-align: center; } .avviso-azienda-cambiata button { width: auto; padding: calc(6px * var(--densita)) calc(14px * var(--densita)); } .avviso-demo { position: fixed; left: 50%; bottom: calc(20px * var(--densita) + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 90; max-width: min(520px, calc(100vw - 32px)); padding: calc(12px * var(--densita)) calc(16px * var(--densita)); background: var(--superficie-alta); border: var(--filo) solid var(--bordo); border-radius: var(--raggio-pannello); box-shadow: 0 10px 30px rgb(0 0 0 / 28%); color: var(--testo); font-size: calc(14px * var(--corpo)); text-align: center; } .banner button { width: auto; padding: calc(7px * var(--densita)) calc(12px * var(--densita)); font-size: calc(13px * var(--corpo)); margin-left: auto; } /* --- la vista di prova ------------------------------------------------------ Guardare il gestionale come lo vede un altro ruolo, durante la prova. Il selettore vive fra i comandi della testata e non ha una scatola sua: quello che serve è che non si prenda tutta la riga su uno schermo largo, dove i select senza limite si allargano al testo piu' lungo. */ select.vista-ruolo { max-width: 160px; } /* La fascetta di chi sta guardando con gli occhi di un altro. **Ambra, non l'accento.** La banda della prova e' gia' color accento, e le due possono stare in pagina insieme: due bande identiche sono due bande che si leggono come una sola. L'ambra e' `--conflitto`, che e' fisso e non segue il tema — la stessa scelta delle scadenze «guardami», ed e' esattamente quello che questa fascetta dice: attenzione, quello che vedi non e' il tuo prodotto. */ .banner.vista { background: color-mix(in srgb, var(--conflitto) 14%, transparent); border-bottom-color: color-mix(in srgb, var(--conflitto) 40%, transparent); } /* **Il nome va a capo, non in ellissi.** La fascia della prova tronca perche' quello che tronca sono i giorni rimasti, e il numero resta; qui quello che verrebbe tagliato e' il nome della persona di cui si stanno usando gli occhi, cioe' l'unica cosa che la fascetta ha da dire. Meglio due righe. */ .banner.vista .titolo { white-space: normal; overflow: visible; min-width: 0; } /* --- la cornice della rete (web/rete.js) ------------------------------------- Il guscio delle pagine del tecnico. **Non ha il menu laterale**, e non e' una semplificazione: un tecnico di rete non ha un'azienda, quindi non ha aree da aprire — ha tre pagine, e stanno in una fila di linguette sotto la testata. Una colonna sola invece della griglia a due: il contenuto e' centrato e stretto come `.mobile`, perche' quello che si legge qui sono elenchi di chiamate e schede di persone, non tabelle da dodici colonne. */ /* `.guscio.guscio-rete`, due classi (ESITO FREELANCE di AGENTI, 31/10/2026): con una sola perdeva contro `.guscio`, scritto più in basso con la stessa forza, e il guscio restava una griglia a due righe — la `nav` delle linguette finiva nella riga del contenuto e a 412 px ogni linguetta era alta 710. */ .guscio.guscio-rete { display: block; min-height: 100vh; } .guscio-rete .guscio-contenuto { grid-area: auto; } .testata-rete { display: flex; gap: calc(14px * var(--densita)); align-items: center; } .marchio-rete { display: inline-flex; align-items: center; text-decoration: none; } /* **La misura la dà il contenitore, la larghezza la trova l'SVG.** Senza queste due righe il lockup nasce alto ventiquattro e largo **zero**: il disegno non porta una larghezza propria, e il foglio è l'unico posto in cui dirla — è la stessa coppia di regole che il menu del gestionale ha per la sua firma. Misurato a 390 su test.ublik.it: `w: 0, h: 24`. */ .marchio-rete .lockup { display: block; height: 24px; } .marchio-rete .lockup svg { height: 100%; width: auto; display: block; } /* Il logo della Rete dei Tecnici (n.20): il file del fondo lo sceglie `rete.js`. */ .marchio-rete .logo-rete { display: block; height: 32px; width: auto; } /* Il marchio dice gia' dove si e': il titolo della pagina lo affianca e non lo ripete, e su un telefono e' la prima cosa che si stringe. */ .testata-rete h1 { margin: 0; font-size: calc(18px * var(--corpo)); min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .linguette-rete { display: flex; gap: calc(8px * var(--densita)); flex-wrap: wrap; padding: calc(12px * var(--densita)) calc(20px * var(--densita)) 0; padding-left: max(20px, env(safe-area-inset-left)); } /* Le linguette sono collegamenti e non bottoni — sono tre pagine diverse, e un collegamento si apre in una scheda nuova, si copia, si mette fra i preferiti. `.chip` e' nata per i bottoni: quello che le manca su un `` e' solo il modo di disporsi e il fatto che non deve sembrare testo. */ .linguette-rete .chip { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; } /* La reputazione: la media e il numero di lavori, con lo stesso peso visivo. 4,8 su 3 lavori e 4,4 su 60 non sono confrontabili, e mostrare solo le stelle direbbe che lo siano. */ .reputazione { display: inline-flex; align-items: baseline; gap: calc(2px * var(--densita)); white-space: nowrap; } /* L'identità dell'azienda — il suo logo se ce l'ha, il suo nome se no. Il logo si caricava dalle Impostazioni e non compariva da nessuna parte: `cornice.js` lo chiede e sostituisce il nome quando arriva. Qui si dice solo quanto può essere grande, che è la parte che il codice non deve decidere. */ .identita { display: inline-flex; align-items: center; min-width: 0; } /* Il nome dell'azienda in testata **è un collegamento**: si preme per tornare a casa. Sotto il dito era alto trenta pixel — la regola di questo prodotto è quarantaquattro — e il testo è alto quello che è: si allarga il bersaglio, non la scritta. Misurato a 375 il 16 settembre 2026 su ventisei pagine. */ @media (pointer: coarse), (max-width: 700px) { .identita, .marchio-rete { min-height: 44px; } } .identita .nome-azienda { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* **Un'altezza imposta, la larghezza che segue** — e non due tappi. Con `max-height` e `max-width` soltanto, un logo piccolo di suo si disegnava piccolo: la scatola era gia' quella intrinseca del file, e `object-fit` non aveva niente da contenere. Chi carica un PNG da sessanta pixel si vedeva una miniatura dove doveva esserci la sua insegna. Con l'altezza scritta e `width: auto` ogni logo arriva alla stessa riga d'orizzonte, quale che sia il file. `max-width` resta a fare da argine ai lockup lunghi, ed e' li' che `contain` serve davvero: dentro una scatola strizzata riduce l'immagine invece di stirarla. `object-position` la tiene a sinistra, dove stava il nome che sostituisce. */ .logo-azienda { display: block; height: 30px; width: auto; max-width: 150px; object-fit: contain; object-position: left center; } /** * **In cima al menu il logo è un'insegna, non un'etichetta.** Quinta volta, e * stavolta il traguardo è arrivato disegnato. * * Le prime tre volte si era allargato il logo lasciando la fascia vuota * attorno; la quarta si era tolta la fascia facendo **chiudere il blocco sul * logo** — `width: auto` e due tetti, così il contenitore era esattamente * l'immagine. Misurato online prima di questo giro: logo **245×65** in un * blocco di **77**, cioè il 99% della colonna e 1,9 volte una voce di menu. * * Il fotomontaggio chiede **un'insegna che riempie la colonna**, non * un'etichetta in mezzo a una scatola. Il primo tentativo aveva dato al blocco * una misura sua — 2,2 voci — e al logo l'85%: il risultato era cinquantasei * pixel di immagine dentro novanta di scatola, un francobollo con trentacinque * pixel di aria attorno. Cioè la fascia vuota di due giri fa, con un altro * nome. * * **Comanda la larghezza, e il blocco si adegua.** Il logo si prende il 95% * della colonna; l'altezza è quella che ne viene, più la spaziatura. Il tetto * d'altezza resta per i loghi quadrati, dove senza sarebbe il logo a decidere * quanto è lungo il menu. * * **Le due misure, e perché sono due.** * * 1. `width: 95%` è la larghezza, e i margini vengono da sé: (100−95)/2 per * parte, cioè sette pixel su una colonna da duecentoquarantotto. Piccoli e * uguali senza doverli scrivere — e restano tali il giorno che la colonna * cambia misura. * 2. `max-height` è il tetto, e serve ai loghi **quadrati o verticali**: a 95% * di larghezza un logo 1:1 sarebbe alto duecentotrentatré, cioè cinque voci * di menu. Su un lockup largo non morde mai. * * **Il tetto da solo però rifarebbe la fascia vuota**, ed è la lezione del giro * scorso: con una larghezza scritta e un'altezza tappata, un logo quadrato si * ritrova in una scatola larga duecentoundici e alta ottantadue, e * `object-fit: contain` lo disegna in mezzo lasciando due bande ai lati. Il * foglio da solo non può evitarlo — non conosce le proporzioni del file — e per * questo la larghezza dei loghi alti la ricalcola `cornice.js` quando * l'immagine è arrivata: due righe, e la scatola torna a essere l'immagine. * * `--voce-menu` è l'altezza di una voce (dieci di spaziatura sopra e sotto più * la riga): il blocco è scritto **in voci** e non in pixel, così il rapporto * che il disegno chiede — poco più del doppio — resta vero anche se un giorno * le voci diventano più alte. */ .guscio-menu { /* Misurata online: dieci di spaziatura sopra e sotto piu' la riga. */ --voce-menu: 44px; } /** * **La misura del logo la sceglie l'azienda**, e il foglio la legge da una * variabile. * * Il numero dice quanta larghezza della colonna si prende il logo, da 60 a 100. * Il tetto d'altezza **scala insieme**: senza, su un marchio quadrato — dove a * comandare è l'altezza e non la larghezza — il cursore non muoverebbe niente. * * Il ripiego è 95: chi non apre mai le impostazioni deve comunque partire da un * marchio dignitoso. Il valore vero lo scrive `tema.js` sul `` prima del * primo paint, così il menu non salta a ogni apertura di pagina. */ :root { --logo-scala: 95; } /** * **Il blocco si adegua al logo, non il logo al blocco.** * * Con un `min-height` da 2,2 voci il logo di collaudo — un lockup 3,75:1, che a * colonna piena non puo' essere alto piu' di sessantasei pixel — si ritrovava * cinquantasei pixel di immagine dentro novanta di scatola: **trentacinque * pixel di aria**, cioe' un francobollo in mezzo a uno spazio che gli sta * largo. Era di nuovo la fascia vuota, con un altro nome. * * Adesso l'altezza la fa il logo piu' la sua spaziatura, e chi comanda e' la * **larghezza**: il logo si prende quasi tutta la colonna e il blocco lo segue. * Il tetto d'altezza resta, ma serve solo ai loghi quadrati o verticali — su un * lockup normale non lo tocca mai, perche' lo ferma prima la larghezza. */ .guscio-menu .marchio:has(.logo-azienda) { display: flex; align-items: center; justify-content: center; padding: calc(10px * var(--densita)) calc(1px * var(--densita)) calc(12px * var(--densita)); } /** * **Anche l'ancora dentro, o i margini non vengono uguali.** * * Il logo non è figlio del blocco: sta dentro `a.identita`, che è il * collegamento a casa e prende tutta la larghezza. Centrando il solo blocco si * centra **l'ancora**, che è già larga quanto lui, e il logo resta appoggiato a * sinistra: misurato online, un pixel di margine da una parte e trentotto * dall'altra. */ .guscio-menu .marchio:has(.logo-azienda) .identita { justify-content: center; } .guscio-menu .marchio .logo-azienda { width: calc(var(--logo-scala) * 1%); /* **`max-width` va rialzato, o la larghezza scritta non serve a niente.** La regola generica `.logo-azienda` tiene un tetto a 150 pixel — giusto dove il logo sta in fila con del testo — e senza questa riga vinceva lui: misurato online dopo il quarto rilascio, il logo veniva 150x40, cioe' il 60% della colonna invece dell'85. Prima ci arrivava un `max-width: 100%` che qui era stato tolto insieme al resto. */ max-width: calc(var(--logo-scala) * 1%); height: auto; /* Tre voci al massimo del cursore, e in proporzione sotto: è il tetto che tiene un marchio quadrato dentro una testa di menu invece di farne una pagina a sé. */ max-height: calc(var(--voce-menu) * 3 * var(--logo-scala) / 100); object-fit: contain; /* Centrato, come il blocco che lo contiene: `left` era giusto quando il logo stava al posto del nome, in fila con le voci. Adesso è un'insegna. */ object-position: center; } /* Il `baseline` della testata e' giusto fra due testi — il nome e la pastiglia — e sbagliato quando al posto del nome c'e' un'immagine: la pastiglia finirebbe appoggiata al piede del logo. Lo raddrizza `align-items: center` nella regola del blocco qui sopra, che vale solo quando un logo c'e'. */ /* Nella testata l'identità si vede **solo da telefono**: su schermo largo il menu è aperto e ce l'ha già in cima. Prende la cella del ritorno, e non ce n'è mai una terza — o si è su una scheda, e allora c'è il ritorno, o si è in un'area, e allora c'è l'identità. */ .guscio-testata .identita.in-testata { display: none; } /* Due etichette per lo stesso comando: il foglio sceglie quale, perché è l'unico a sapere quanto spazio c'è. */ .solo-stretto { display: none; } /* La X della fascia: si toglie l'avviso dagli occhi per un minuto, e torna al ricaricamento — nessuna memoria, per scelta. */ .banner .chiudi-fascia { width: auto; min-width: 34px; padding: calc(4px * var(--densita)) calc(8px * var(--densita)); margin: 0; background: transparent; border: 0; color: var(--tenue-su-fascia); font-size: calc(20px * var(--corpo)); line-height: 1; } .banner .chiudi-fascia:hover { color: var(--testo); } /* --- la fascia della prova ------------------------------------------------ La stessa fascia degli esempi con dentro l'offerta: «Prova gratuita · N giorni rimasti» e il bottone per comprare. Non un colore nuovo e non un riquadro nuovo — è la banda che c'era, con dentro la cosa giusta. */ /* Sulla fascia il fondo è l'accento al 12%: il tenue da solo faceva 4,38:1 (S3-M3, n.13). Un quarto di testo, come la pastiglia tenue: sopra 5,7 con ognuno dei cinque colori, in tutti e due i temi. Vale per tutto il tenue della fascia: il «quanto», la X e il collegamento degli esempi. */ .banner .titolo .quanto { color: var(--tenue-su-fascia); } /* Le azioni in un gruppo, spinto a destra: quale delle due ci sia dipende da ruolo e stato, e con due margini automatici il risultato dipenderebbe da quale delle due è la prima. */ .banner .azioni-fascia { display: inline-flex; align-items: center; gap: calc(14px * var(--densita)); margin-left: auto; } .banner .azioni-fascia:empty { display: none; } /** * E lo stesso vale per il posto del messaggio d'errore. * * È un `div` vuoto che aspetta un errore che quasi sempre non arriva, e da * vuoto si prendeva **centosettantadue pixel su trecentonovanta**: metà riga, * per niente. Con la fascia a capo non si vedeva — andava sulla riga sotto — * e si è visto il giorno che la fascia è diventata una riga sola: «Prova · 1…». * Trovato online, a 390, il 24 agosto 2026. */ .banner .messaggio:empty { display: none; } /* L'azione principale è un `` e non un `