68ch: qui il riquadro è già la misura, e un tetto dentro un tetto lascia una colonna vuota a destra dentro un rettangolo colorato. */ .simoff__d { margin: 0; max-width: none; font-size: var(--fs-small); line-height: 1.62; color: var(--text-2); } /* --------------------------------------------------------------------------- IL CARTELLO DI AVVIO (pagina «Simulazioni») --------------------------------------------------------------------------- La scena partiva da sola all'ingresso nel viewport e chi arrivava non capiva che cosa avesse davanti: qualcosa che va avanti da sé? una finestra in cui digitare? Nel dubbio non faceva niente, ed è il difetto peggiore possibile sulla pagina che deve far vedere il prodotto al lavoro. Copre il SIMULATORE e non la pagina — sta dentro `.sim`, che è già `position: relative` — quindi non è una finestra modale: non intrappola il fuoco, non blocca lo scorrimento, non ha niente da chiudere. Il velo è opaco quasi del tutto (vedi `--veil` in antex.css): un velo trasparente darebbe una conversazione mezza leggibile sotto la scritta «avvia», che è il modo più sicuro di far leggere quella e non questa. --------------------------------------------------------------------------- */ .sim { position: relative; } .simstart { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 20px; background: var(--veil); border-radius: inherit; } .simstart__card { text-align: center; max-width: 46ch; } .simstart__t { margin: 0 0 16px; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.05rem, 1.5vw, 1.3rem); letter-spacing: -0.02em; color: var(--text); } .simstart__btn svg { width: 15px; height: 15px; } /* La riga sotto il pulsante è la metà che toglie il dubbio — dice che da lì in poi si guarda e basta — quindi non è una postilla: stessa misura del testo piccolo del sito, non del micro. */ .simstart__d { margin: 16px auto 0; max-width: 44ch; font-size: var(--fs-small); line-height: 1.6; color: var(--text-2); } /* --------------------------------------------------------------------------- IL CARTELLO SULLA RISPOSTA FUORI COPIONE --------------------------------------------------------------------------- Quando si sceglie una domanda che il copione non prevede, l'assistente dice che non ha una fonte. Il PERCHÉ quella sia la risposta giusta — ed è il motivo per cui la domanda sta lì — stava dentro la stessa bolla, in coda. Chi guarda una chat legge la chat: la prima frase la leggeva, il ragionamento no. Qui è un oggetto diverso e si vede che lo è: fondo d'accento, nessun raggio da fumetto, un'etichetta in monospaziato e una freccia che punta in su alla risposta. Un cartello messo accanto, non un'altra battuta del dialogo. --------------------------------------------------------------------------- */ .simtip { position: relative; margin: 4px 0 0 0; padding: 14px 16px; border-radius: var(--r-sm); border: 1px solid var(--accent-line); background: var(--accent-soft); } /* La freccia: due triangoli sovrapposti, quello di sotto grande quanto basta a fare da bordo. Sta a sinistra e non al centro perché punta alla bolla della risposta, che è allineata a sinistra: al centro indicherebbe il vuoto fra le due bolle. */ .simtip::before, .simtip::after { content: ""; position: absolute; left: 22px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; } .simtip::before { top: -9px; border-bottom: 9px solid var(--accent-line); } .simtip::after { top: -8px; border-bottom: 8px solid var(--accent-soft); } .simtip__label { margin: 0 0 6px; font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-fg); } .simtip__t { margin: 0 0 5px; font-weight: 700; font-size: 0.96rem; letter-spacing: -0.01em; color: var(--text); } .simtip__d { margin: 0; max-width: none; font-size: var(--fs-small); line-height: 1.6; color: var(--text-2); } /* Avviso: è una simulazione, non un modello dal vivo (par. 22.7 e 27.4). */ .sim__disclaimer { margin-top: 14px; font-family: var(--f-mono); font-size: var(--fs-micro); line-height: 1.6; color: var(--text-3); text-align: center; } /* `text-align: center` centra il testo DENTRO il paragrafo, non il paragrafo: la regola di base dà a ogni
un tetto di 68ch, quindi il blocco resta ancorato a sinistra e sotto un simulatore più largo di quei 68ch l'avviso esce dall'asse. Finché il riquadro era largo quanto il testo non si vedeva; a piena larghezza sì. Solo nella hero: in «Simulazioni d'uso» lo stesso paragrafo è allineato a sinistra apposta e centrarlo lo sposterebbe. */ .hero__sim .sim__disclaimer { margin-inline: auto; } /* Nella pagina «Simulazioni» lo stesso avviso è allineato a sinistra: lì sotto il simulatore comincia il testo della pagina, e una riga centrata in mezzo a contenuto allineato a sinistra si legge come un blocco fuori posto. Era un attributo `style` in pagina; una regola di allineamento è una regola di stile, e in un attributo non la trova più nessuno. */ .sim__disclaimer--left { text-align: left; max-width: 70ch; } /* =========================================================================== VISITA GUIDATA DEL SIMULATORE --------------------------------------------------------------------------- IL PROBLEMA CHE RISOLVE. Il simulatore mostra sei cose insieme: la conversazione, le chip delle fonti, il pannello con gli estratti, la barra dell'attendibilità, la scheda lead che si compila e la configurazione. Sono tutte importanti — è il motivo per cui esistono — ma chi arriva le riceve tutte nello stesso istante e senza gerarchia: legge la chat (l'unica cosa che riconosce), e tutto il resto gli scorre accanto senza essere guardato. Chi invece prova a guardare tutto si arrende. LA SOLUZIONE. Una zona per volta. Il motore accende una zona, spegne le altre e scrive accanto che cosa si sta guardando; chi legge segue, e alla fine ha visto tutte e cinque le parti invece di una sola. COME SI SPEGNE UNA ZONA. Con opacità e saturazione, MAI con `filter: blur` e mai scendendo sotto 0,35: quello che è in ombra deve restare leggibile per chi ha già capito e vuole guardare avanti. La guida accompagna lo sguardo, non lo costringe. SENZA JAVASCRIPT o con movimento ridotto: tutte le zone restano accese e i passi si leggono come un elenco. Non si perde niente. =========================================================================== */ /* I PASSI IN RIGA, LA SPIEGAZIONE SOTTO. Prima erano una colonna sola a sinistra e il testo a destra: cinque pastiglie in una colonna stretta andavano a capo tre volte, in righe di lunghezza diversa. Un percorso a tappe letto come un elenco sbilenco non dice più che è un percorso — e la larghezza che gli serviva era tutta lì, nella colonna accanto. Adesso i cinque passi stanno su una riga sola, di pari larghezza, e la spiegazione del passo attivo cade subito sotto: si legge da sinistra a destra come una sequenza, e la risposta è dove si sta già guardando. */ .simguide { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: 18px; padding: 16px 18px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); } .simguide__label { grid-column: 1 / -1; font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin: 0 0 2px; } /* Griglia e non flex: `flex-wrap` dà righe di lunghezza diversa, cinque colonne uguali danno una sequenza. Le due soglie servono perché il passo più lungo («Cosa ha capito di chi scrive») sotto i ~150px di colonna andrebbe su quattro righe. */ .simguide__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .simguide__step { display: flex; align-items: center; gap: 8px; padding: 10px 12px; /* Non più una pastiglia: con l'etichetta su due righe il raggio `pill` disegna due semicerchi ai lati e la cella sembra deformata. */ border-radius: var(--r-sm); border: 1px solid var(--line-2); background: transparent; color: var(--text-2); font-size: 0.84rem; font-weight: 500; cursor: pointer; text-align: left; transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); } .simguide__step:hover { color: var(--text); border-color: var(--line-3); } /* Il passo corrente non è distinto dal solo colore: ha anche il numero pieno e il peso del testo. Chi non distingue i colori vede comunque quale sta guardando. */ .simguide__step[aria-current="true"] { border-color: var(--accent-fg); color: var(--accent-fg); background: var(--accent-soft); font-weight: 600; } .simguide__n { width: 19px; height: 19px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid currentColor; font-family: var(--f-mono); font-size: 0.68rem; font-weight: 700; } .simguide__step[aria-current="true"] .simguide__n { background: var(--accent-fg); color: var(--on-accent); border-color: var(--accent-fg); } /* Il passo già visto resta segnato: dice quanto manca. */ .simguide__step.is-done .simguide__n { background: var(--accent-soft); } /* Il minimo d'altezza NON è un numero a caso: le cinque spiegazioni vanno da 89 a 155 caratteri, cioè da due a tre righe. Senza, il riquadro si accorcerebbe e si allungherebbe da solo ogni quattro secondi mentre la guida avanza, e con lui salterebbe il simulatore che sta sotto — mentre qualcuno lo sta guardando, che è esattamente quando non deve succedere. */ .simguide__say { min-width: 0; min-height: 5.4rem; } .simguide__t { font-family: var(--f-display); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.02em; color: var(--text); margin: 0 0 5px; } .simguide__d { margin: 0; font-size: var(--fs-small); line-height: 1.6; color: var(--text-2); max-width: 62ch; } /* --------------------------------------------------------------------------- LA GUIDA IN COLONNA A DESTRA (pagina «Simulazioni») --------------------------------------------------------------------------- I cinque passi in riga sopra il simulatore costavano ~150px di altezza, e con l'intestazione di pagina e il selettore dei casi spingevano la scena sotto la piega: si arrivava sulla pagina che deve mostrare il prodotto al lavoro e il prodotto non era a schermo. Di lato non costano niente: il riquadro è alto abbastanza da contenerli, e quello spazio lì era vuoto. Cambia anche come si leggono — un indice di cinque voci accanto a un oggetto, invece di una barra di avanzamento sopra di esso. NON è la vecchia colonna a sinistra che era stata tolta. Là i passi stavano in una colonna stretta CON ACCANTO la spiegazione, e cinque pastiglie andavano a capo tre volte; qui la colonna è larga 320px, ogni passo la occupa tutta e la spiegazione sta sotto l'elenco, dove ha la stessa larghezza. `align-items: start` e non `stretch`: la guida non deve allungarsi fino in fondo al simulatore lasciando dentro un riquadro mezzo vuoto. --------------------------------------------------------------------------- */ @media (min-width: 1100px) { .simstage--rail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(20px, 2vw, 30px); align-items: start; } /* L'ordine nel DOM è guida-poi-simulatore (chi ascolta la pagina sente prima cosa guarderà), l'ordine a schermo è l'opposto: l'oggetto a sinistra, dove l'occhio arriva per primo. */ .simstage--rail .simguide { grid-column: 2; grid-row: 1; margin-bottom: 0; } .simstage--rail > .sim { grid-column: 1; grid-row: 1; } .simstage--rail .simoff { grid-column: 1 / -1; } /* In colonna i passi si impilano: uno per riga, a tutta larghezza. */ .simstage--rail .simguide__steps { grid-template-columns: minmax(0, 1fr); } /* La spiegazione non deve più tenere l'altezza di tre righe fisse: in colonna il riquadro è alto e il salto non si vede. */ .simstage--rail .simguide__say { min-height: 0; } /* L'ALTEZZA SEGUE LA FINESTRA, entro due estremi. 420px fissi erano tarati sulla monopagina, dove il simulatore era una sezione fra le altre e sotto continuava la lettura. Qui è il contenuto della pagina e deve starci INTERO insieme all'intestazione e ai casi: su un portatile da 768px di altezza 420 non ci stanno, su un monitor alto lasciano vuoto. Il tetto a 430 resta perché sopra i ~450px la chat non guadagna niente — la conversazione è lunga quella che è, e il resto diventa spazio bianco dentro un riquadro. */ .simstage--rail > .sim { --sim-body-h: clamp(300px, 40vh, 420px); } /* IL PIEDE SU UNA RIGA SOLA. Prompt suggeriti e controlli erano due righe sovrapposte: 114px di piede sotto un riquadro che deve stare in una schermata insieme all'intestazione e alla fila dei casi. Su una riga sono 52, e i 62px risparmiati sono esattamente quelli che decidono se la scena finisce sopra o sotto la piega. I prompt scorrono già in orizzontale con la barra nascosta, quindi stringerli non nasconde niente che prima si vedesse: `min-width: 0` è quello che glielo permette dentro un flex — senza, la traccia si allarga al contenuto e a spostarsi è il pulsante «riproduci». Solo qui: nella hero il piede ha spazio e due righe respirano meglio. */ .simstage--rail .sim__foot { display: flex; align-items: center; gap: 14px; } /* Le due basi non sono `auto`, ed è la differenza fra funzionare e no: `.sim__ctrl` contiene la frase dell'esito, quindi a base automatica misura quanto quella frase intera e si prende tutta la riga, lasciando i prompt schiacciati a zero. Con una base in percentuale i due blocchi si dividono lo spazio e a stringersi è la frase, che è già scritta per troncarsi (il testo intero resta nel `title`). */ /* LO SPAZIO VA AI PROMPT, non alla frase dell'esito. A base automatica `.sim__ctrl` misura quanto la frase intera e si prende tutta la riga: restava visibile UNA pastiglia sola, e le altre — fra cui la domanda fuori copione, che è metà del motivo per cui il simulatore sta lì — sparivano dentro uno scorrimento senza barra, cioè per sempre. Con una base fissa e stretta i tre suggerimenti ci stanno tutti (troncati, con il testo intero nel `title`) e a stringersi è la frase, che è già scritta per troncarsi. */ .simstage--rail .sim__prompts { flex: 1 1 auto; min-width: 0; padding-bottom: 0; } .simstage--rail .sim__ctrl { flex: 0 1 250px; min-width: 0; margin-top: 0; } .simstage--rail .prompt { max-width: 170px; } } /* --------------------------------------------------------------------------- LA FILA DEI CASI, CON LA SUA ETICHETTA --------------------------------------------------------------------------- Sulla pagina «Simulazioni» l'occhiello della sezione è diventato l'etichetta del selettore: era l'unica parte dell'intestazione che non ripeteva l'intestazione di pagina, e sopra una fila di pulsanti dice esattamente cosa farne. --------------------------------------------------------------------------- */ .pickerbar { margin-bottom: clamp(14px, 1.6vw, 22px); } .pickerbar .eyebrow { margin-bottom: 10px; } .pickerbar .picker { margin-bottom: 0; } /* La sezione-scena non ha bisogno del respiro pieno sopra: la separazione dalla barra la dà già l'intestazione di pagina, e quei ~120px erano la differenza fra vedere la scena e doverla cercare scorrendo. */ .sec--stage { padding-top: clamp(18px, 2.4vw, 34px); } /* --- Le zone illuminate --- --------------------------------------------------------------------------- SI ACCENDE QUELLO CHE CONTA, NON SI SPEGNE IL RESTO. La prima versione faceva il contrario: la zona corrente restava com'era e tutte le altre scendevano al 38% di opacita'. A schermo funzionava benissimo — l'occhio andava dove doveva — ma misurando i colori risultanti il difetto e' grosso: il testo attenuato scendeva a 1,9:1 sul chiaro e 2,4:1 sullo scuro, cioe' sotto qualsiasi soglia leggibile. Per un attimo, va anche bene; ma quella zona resta li' per quattro secondi e mezzo, e chi legge piu' piano della guida si trova davanti testo che non puo' leggere. Adesso l'attenuazione e' leggera (0,68: il testo principale resta sopra 4,5:1 in tutti e due i temi, misurato) e il lavoro lo fa l'ANELLO sulla zona accesa. E' anche piu' preciso: un contorno indica un punto, un'ombra indica solo «non qui». --------------------------------------------------------------------------- */ [data-focus] .sim__chat, [data-focus] .sim__side, [data-focus] [data-zone] { transition: opacity var(--t-slow) var(--ease), outline-color var(--t-slow) var(--ease), filter var(--t-slow) var(--ease); } /* Attenuazione del contenitore che NON contiene la zona accesa. */ .sim[data-focus="chat"] .sim__side, .sim[data-focus="actions"] .sim__side { opacity: 0.68; filter: saturate(0.7); } .sim[data-focus="sources"] .sim__chat, .sim[data-focus="conf"] .sim__chat, .sim[data-focus="lead"] .sim__chat { opacity: 0.68; filter: saturate(0.7); } /* Dentro il pannello fonti si puo' guardare l'ELENCO oppure l'ATTENDIBILITA': sono due passi diversi e vanno separati, altrimenti il passo «quanto e' attendibile» punta un blocco alto tre righe in fondo a una colonna piena di estratti, e non lo trova nessuno. */ .sim[data-focus="sources"] .conf, .sim[data-focus="conf"] [data-sim-sources] { opacity: 0.68; } /* L'anello sulla zona accesa. Una regola sola per tutte e cinque: il valore di data-focus e' anche il nome della zona, quindi le coppie si scrivono in fila invece di inventare una classe per ciascuna. `outline` e non `border`: non occupa spazio e quindi non sposta niente quando compare — un bordo che appare allarga il blocco di due pixel e fa ballare tutto quello che ha intorno. */ .sim[data-focus="chat"] [data-zone="chat"], .sim[data-focus="sources"] [data-zone="sources"], .sim[data-focus="conf"] [data-zone="conf"], .sim[data-focus="lead"] [data-zone="lead"], .sim[data-focus="actions"] [data-zone="actions"] { outline: 2px solid var(--accent-line); outline-offset: 3px; border-radius: var(--r-sm); } /* La chat e' il riquadro piu' grande e tocca i bordi del vetro: li' l'anello va portato DENTRO, altrimenti sborda dall'oggetto. */ .sim[data-focus="chat"] [data-zone="chat"] { outline-offset: -3px; } /* =========================================================================== FASCIA DI FIDUCIA (par. 14.3) — nastro, non griglia di card. Nessun logo cliente inventato, nessun numero non dimostrabile. =========================================================================== */ .strip { border-block: 1px solid var(--line); padding-block: 20px; background: var(--bg-2); overflow: hidden; } /* La geometria del nastro deve tornare al pixel: lo spazio tra le voci sta TUTTO dentro la lista (gap fra le voci + padding di coda) e il binario non ha gap proprio. Così translateX(-50%) vale esattamente una lista più il suo spazio finale, e il giro non salta. Con un gap sul binario il ciclo si sfaserebbe di mezzo gap ad ogni ripetizione. */ .strip__track { display: flex; width: max-content; animation: marquee 42s linear infinite; } .strip__list { display: flex; gap: 46px; padding-right: 46px; } .strip:hover .strip__track { animation-play-state: paused; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .strip__item { display: flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: 0.03em; color: var(--text-2); white-space: nowrap; } .strip__item svg { width: 15px; height: 15px; color: var(--accent-fg); flex: none; } /* =========================================================================== INTESTAZIONE DELLE PAGINE INTERNE Compatta di proposito: dice dove si è arrivati e lascia subito il posto al contenuto. Sotto la nav fissa serve un respiro in più, altrimenti l'H1 comincia dietro la barra. =========================================================================== */ .pagehead { padding-top: calc(var(--sec-y-tight) + 84px); padding-bottom: var(--sec-y-tight); overflow: hidden; border-top: 0; } .pagehead__glow { width: 720px; height: 460px; right: -180px; top: -180px; } .pagehead__inner { position: relative; z-index: 2; max-width: 900px; } .pagehead .lede { max-width: 64ch; } /* La prima sezione dopo l'intestazione di pagina respira meno in alto: le due intestazioni sono gia' separate dal cambio di tono, e con il ritmo pieno di sezione fra un titolo e l'altro si aprivano quasi trecento pixel di vuoto — su una pagina che deve arrivare subito al punto, e' la prima cosa che si vede scorrendo. */ .pagehead + .sec { padding-top: var(--sec-y-tight); } /* NON C'È PIÙ UN'INTESTAZIONE DI SECONDA SPECIE (31/08/2026). Esisteva una variante `.pagehead--compact` per la sola pagina «Simulazioni»: titolo a 2,15rem invece di 3, misure più larghe (34ch e 82 invece di 20 e 64), respiro accorciato. Serviva a far entrare la scena nella prima schermata, e ci riusciva — ma il prezzo era che l'intestazione di quella pagina non somigliava a nessun'altra: arrivandoci da «Integrazioni» il titolo dimezzava di corpo e il paragrafo si allargava, e la differenza si legge come un errore di impaginazione, non come una scelta. Otto pagine con la stessa intestazione ne hanno sette uguali e una sbagliata. L'altezza che si guadagnava si ritrova dove non costa identità: la sezione sotto (`.sec--stage`, e la riga qui sotto) rinuncia al respiro pieno, e `--sim-body-h` accorcia il corpo del simulatore sugli schermi bassi. Se un giorno la scena tornasse a stare sotto la piega, si toglie altezza ALLA SCENA o al vuoto, mai al titolo: quello appartiene al sistema. */ /* SCHERMI BASSI: il riquadro del simulatore si accorcia. Un portatile da 1366x768 ha 130px in meno di un 1440x900, e sono esattamente quelli che decidono se la scena sta a schermo o no. STA QUI SOTTO E NON ACCANTO ALLA GUIDA: una media query non alza la specificità, quindi scritta prima della regola che deve correggere perdeva in silenzio — la stessa dichiarazione, e vince l'ultima. */ @media (min-width: 1100px) and (max-height: 980px) { .simstage--rail > .sim { --sim-body-h: clamp(280px, 38vh, 400px); } } /* Più specifico di `.pagehead + .sec` qui sopra, che altrimenti vincerebbe per specificità e rimetterebbe il respiro pieno sopra la scena. */ .pagehead + .sec--stage { padding-top: clamp(14px, 1.6vw, 22px); } /* =========================================================================== FLUSSO (par. 14.4) — cinque fasi. Impianto orizzontale, non a griglia. =========================================================================== */ .flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; margin-top: 20px; } /* La linea che unisce le fasi: passa dietro i nodi. */ .flow::before { content: ""; position: absolute; top: 23px; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-line) 12%, var(--accent-line) 88%, transparent); } .flow__step { position: relative; padding: 0 12px; text-align: center; } .flow__node { width: 48px; height: 48px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--accent-line); color: var(--accent-fg); position: relative; z-index: 2; transition: background-color var(--t-slow) var(--ease), color var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); } .flow__node svg { width: 20px; height: 20px; } .flow__step:hover .flow__node { background: var(--accent-fg); color: var(--on-accent); transform: translateY(-3px); } .flow__n { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-fg); margin-bottom: 7px; } .flow__t { font-family: var(--f-display); font-weight: 700; font-size: 1.06rem; margin-bottom: 7px; letter-spacing: -0.02em; } .flow__d { font-size: var(--fs-small); line-height: 1.6; color: var(--text-2); max-width: 24ch; margin: 0 auto; } /* =========================================================================== BENTO MODULI (par. 14.5) — griglia asimmetrica: una cella domina. VibeCurb: sei celle identiche con icona+titolo+testo sono il default da evitare. La cella primaria è 2x2 e contiene un mockup, non un'icona. =========================================================================== */ .bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(190px, auto); gap: 14px; } .bento__cell { padding: 26px; display: flex; flex-direction: column; overflow: hidden; transition: border-color var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); } .bento__cell:hover { border-color: var(--accent-line); transform: translateY(-2px); } .bento__cell--lead { grid-column: span 2; grid-row: span 2; } .bento__cell--wide { grid-column: span 2; } .bento__ico { width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-fg); margin-bottom: 16px; flex: none; } .bento__ico svg { width: 17px; height: 17px; } .bento__t { font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.02em; margin-bottom: 8px; } .bento__cell--lead .bento__t { font-size: clamp(1.3rem, 2vw, 1.68rem); } .bento__d { font-size: 0.92rem; line-height: 1.62; color: var(--text-2); margin: 0; } .bento__viz { margin-top: auto; padding-top: 24px; } /* Mini-mockup dentro le celle: il documento chiede un mockup animato, non un'icona (par. 14.5). */ .mini { border-radius: var(--r-md); border: 1px solid var(--line); background: var(--inset-bg); padding: 12px; font-family: var(--f-mono); font-size: var(--fs-micro); } .mini__row { display: flex; align-items: center; gap: 8px; padding: 7px 0; color: var(--text-2); border-bottom: 1px solid var(--line); } .mini__row:last-child { border-bottom: 0; } .mini__tag { padding: 2px 7px; border-radius: 3px; background: var(--accent-soft); color: var(--accent-fg); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; flex: none; } .mini__fill { margin-left: auto; color: var(--text-3); font-size: 0.72rem; flex: none; } .mini__bar { height: 4px; border-radius: 2px; background: var(--line); flex: 1; overflow: hidden; } .mini__bar i { display: block; height: 100%; background: var(--accent-fg); border-radius: 2px; } /* =========================================================================== SPLIT (knowledge base, governance, modulo...) — due colonne, non griglia. =========================================================================== */ .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(36px, 5vw, 72px); align-items: center; } .split--flip .split__visual { order: -1; } /* Varianti di proporzione. Stanno QUI e non in un attributo `style` perché una dichiarazione in linea vince su ogni media query: scritta nel markup, la griglia a due colonne sopravvivrebbe anche a 390px. */ .split--code { align-items: start; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); } .split--form { align-items: start; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); } .srcgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .srccard { padding: 15px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-solid); transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); cursor: default; } .srccard:hover { border-color: var(--accent-line); transform: translateY(-2px); } .srccard__k { font-family: var(--f-mono); font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.05em; color: var(--accent-fg); margin-bottom: 9px; } .srccard__n { font-size: 0.9rem; font-weight: 600; color: var(--text); margin-bottom: 5px; line-height: 1.4; } .srccard__m { font-family: var(--f-mono); font-size: var(--fs-micro); color: var(--text-2); } .srccard__st { display: flex; align-items: center; gap: 6px; margin-top: 9px; font-family: var(--f-mono); font-size: var(--fs-micro); color: var(--text-2); } .srccard__st i { width: 6px; height: 6px; border-radius: 50%; background: var(--verified); flex: none; } .srccard__st.is-sync i { background: var(--caution); } /* =========================================================================== SELETTORE DI SCENARIO =========================================================================== */ .picker { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; } .picker__btn { padding: 10px 18px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: transparent; color: var(--text-2); font-size: 0.92rem; font-weight: 500; cursor: pointer; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); } .picker__btn:hover { color: var(--text); border-color: var(--line-3); } .picker__btn[aria-selected="true"] { background: var(--accent-fg); border-color: var(--accent-fg); color: var(--on-accent); font-weight: 600; } /* =========================================================================== CODICE API / MCP (par. 14.12) La finestra non è più «scura e basta»: prende il tono del tema. In chiaro resta comunque una superficie a sé, distinta dal fondo della sezione, così continua a leggersi come una finestra di terminale e non come un paragrafo. =========================================================================== */ .code { border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--code-bg); overflow: hidden; } .code__tabs { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); background: var(--surface); overflow-x: auto; scrollbar-width: none; } .code__tabs::-webkit-scrollbar { display: none; } .code__tab { flex: none; padding: 8px 14px; border: 0; background: transparent; border-radius: var(--r-xs); font-family: var(--f-mono); font-size: var(--fs-micro); color: var(--text-3); cursor: pointer; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .code__tab:hover { color: var(--text); } .code__tab[aria-selected="true"] { background: var(--surface-2); color: var(--accent-fg); } .code__body { padding: 20px; overflow-x: auto; } .code__pane { display: none; } .code__pane.is-active { display: block; } .code pre { margin: 0; font-family: var(--f-mono); font-size: 0.84rem; line-height: 1.75; color: var(--code-fg); white-space: pre; } /* Evidenziazione del codice: poche classi, applicate dal PHP che scrive il markup. I colori sono token, quindi hanno una versione per tema: le tinte chiare della slide 5 su fondo scuro, le loro controparti scure su chiaro. Le stesse tinte su tutti e due i fondi starebbero sotto 2:1 da una parte. */ .tk-key { color: var(--accent-fg); } .tk-str { color: var(--tk-str); } .tk-com { color: var(--tk-com); font-style: italic; } .tk-fn { color: var(--tk-fn); } .tk-num { color: var(--tk-num); } .code__note { display: none; margin: 16px 0 0; font-size: 0.92rem; line-height: 1.62; color: var(--text-2); padding-left: 14px; border-left: 2px solid var(--accent-line); max-width: none; } .code__note.is-active { display: block; } /* =========================================================================== WHITE LABEL (par. 14.13) — un interruttore cambia identità al widget. =========================================================================== */ .wl { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(36px, 5vw, 68px); align-items: center; } .wl__switch { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 30px; } .wl__opt { display: inline-flex; align-items: center; gap: 9px; padding: 10px 17px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: transparent; color: var(--text-2); font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); } .wl__opt:hover { color: var(--text); border-color: var(--line-3); } .wl__opt[aria-pressed="true"] { border-color: var(--text); color: var(--text); background: var(--surface); } .wl__swatch { width: 13px; height: 13px; border-radius: 50%; flex: none; } /* Il widget che cambia pelle. TUTTO ciò che un cliente può cambiare passa da una variabile: colore, fondo, superficie dei messaggi, testo, raggio e carattere. Serve alla terza opzione della sezione — quella «via API» — che deve poter uscire del tutto dall'estetica di ANTEX: fondo chiaro, angoli vivi, carattere con grazie. NON eredita i token del tema di proposito: il widget mostra l'identità del CLIENTE, e un widget che cambia colore insieme al tema del nostro sito dimostrerebbe l'esatto contrario di quello che la sezione afferma. */ .widget { --w-brand: var(--indigo); --w-ink: #FFFFFF; --w-bg: #140D33; --w-surface: #221A4A; --w-text: #F3F4FA; --w-radius: 20px; --w-font: var(--f-sans); max-width: 380px; margin-inline: auto; border-radius: var(--w-radius); overflow: hidden; border: 1px solid var(--line-2); background: var(--w-bg); color: var(--w-text); font-family: var(--w-font); box-shadow: var(--shadow-deep); transition: border-radius var(--t-slow) var(--ease), background-color var(--t-slow) var(--ease), color var(--t-slow) var(--ease); } /* Il carattere non arriva come stringa libera dal pannello: è una scelta fra tre famiglie note, così nel CSS non può finire niente di arbitrario. */ .widget[data-font="serif"] { --w-font: Georgia, "Times New Roman", serif; } .widget[data-font="mono"] { --w-font: var(--f-mono); } .widget__bar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--w-brand); color: var(--w-ink); transition: background-color var(--t-slow) var(--ease), color var(--t-slow) var(--ease); } .widget__logo { /* Il raggio del logo segue quello del widget, con un tetto: a 999px un quadrato da 26px diventa un cerchio, a 0px resta uno spigolo netto. */ width: 28px; height: 28px; flex: none; border-radius: min(var(--w-radius), 14px); display: grid; place-items: center; background: rgba(0, 0, 0, 0.16); font-family: inherit; font-weight: 800; font-size: 0.78rem; transition: border-radius var(--t-slow) var(--ease), background-color var(--t-slow) var(--ease); } /* CON UN'IMMAGINE SERVE UNA PIASTRA CHIARA, e solo qui. Il velo nero al 16% funziona dietro una lettera, che prende il colore del testo sulla barra ed è comunque leggibile. Un simbolo no: quello di ANTEX è a gradiente indigo→rosa su fondo trasparente, e la barra del widget è il colore del marchio del cliente — nella prima identità è indigo. Simbolo indigo su indigo scurito: il marchio sparisce proprio nella scheda che deve mostrarlo. La piastra è bianca e non una tinta del brand perché deve reggere QUALSIASI colore un cliente metta lì, e perché è il fondo su cui il simbolo è disegnato. Sotto la lettera resta il velo nero: cambiarlo sposterebbe anche i due casi che il logo non ce l'hanno. */ .widget__logo--img { background: rgba(255, 255, 255, 0.94); padding: 4px; } /* UNA MISURA SOLA, mai due: le brand guidelines vietano di alterare il rapporto d'aspetto del simbolo. Si fissa l'altezza e la larghezza segue. */ .widget__logo--img img { display: block; height: 18px; width: auto; } .widget__name { font-weight: 700; font-size: 0.94rem; letter-spacing: -0.01em; } .widget__sub { font-size: 0.76rem; opacity: 0.8; } .widget__body { padding: 16px; display: flex; flex-direction: column; gap: 10px; min-height: 168px; } .widget__msg { align-self: flex-start; max-width: 88%; padding: 11px 14px; border-radius: min(var(--w-radius), 14px); border-bottom-left-radius: min(var(--w-radius), 5px); background: var(--w-surface); border: 1px solid rgba(127, 127, 127, 0.18); font-size: 0.88rem; line-height: 1.58; color: var(--w-text); transition: background-color var(--t-slow) var(--ease), border-radius var(--t-slow) var(--ease); } .widget__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; } .widget__chip { padding: 7px 12px; border-radius: var(--w-radius); border: 1px solid var(--w-brand); color: var(--w-brand); font-size: 0.8rem; font-weight: 600; transition: border-radius var(--t-slow) var(--ease), color var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease); } .widget__foot { margin: 0; padding: 10px 16px; border-top: 1px solid rgba(127, 127, 127, 0.2); font-size: 0.74rem; letter-spacing: 0.03em; color: var(--w-text); opacity: 0.7; } /* La frase che spiega cosa dimostra il caso scelto. Cambia con il widget: è la parte che trasforma tre pelli diverse in un ragionamento. */ .wl__note { max-width: 380px; margin: 20px auto 0; padding-left: 14px; border-left: 2px solid var(--accent-line); font-size: 0.92rem; line-height: 1.62; color: var(--text-2); } /* =========================================================================== CONTROLLO E ATTENDIBILITÀ (par. 14.11) — mockup a tre colonne. Era il componente più «chiaro» del sito: fondo bianco scritto a mano, testo --ink, filetti --paper-line. Adesso è una superficie come le altre e segue il tema. =========================================================================== */ .trust { display: grid; grid-template-columns: 228px minmax(0, 1fr) 258px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface-solid); overflow: hidden; min-height: 400px; } .trust__col { padding: 17px; min-width: 0; } .trust__col + .trust__col { border-left: 1px solid var(--line); } .trust__head { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-3); margin-bottom: 13px; } .conv { padding: 11px; border-radius: var(--r-sm); margin-bottom: 6px; cursor: pointer; border: 1px solid transparent; transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .conv:hover { background: var(--surface-2); } .conv.is-sel { background: var(--accent-soft); border-color: var(--accent-line); } .conv__t { font-size: var(--fs-small); font-weight: 600; color: var(--text); margin-bottom: 4px; line-height: 1.4; } .conv__m { font-family: var(--f-mono); font-size: var(--fs-micro); color: var(--text-3); display: flex; gap: 7px; align-items: center; } .conv__st { width: 6px; height: 6px; border-radius: 50%; flex: none; } .conv__st--ok { background: var(--verified); } .conv__st--esc { background: var(--caution); } .conv__st--none { background: var(--absent); } .tmsg { margin-bottom: 14px; } .tmsg__who { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; } .tmsg__b { font-size: 0.9rem; line-height: 1.62; color: var(--text); } .tmsg__b mark { background: var(--mark-bg); color: var(--mark-fg); padding: 1px 4px; border-radius: 3px; } .tmeta { padding: 12px; border-radius: var(--r-sm); background: var(--surface-2); margin-bottom: 8px; } .tmeta__k { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 5px; } .tmeta__v { font-size: var(--fs-small); color: var(--text); line-height: 1.5; font-weight: 500; } .tmeta--warn { background: var(--accent-soft); } .tmeta--warn .tmeta__v { color: var(--accent-fg); } /* =========================================================================== SETTORI (par. 14.14) — un risultato alla volta, scelto per contesto. --------------------------------------------------------------------------- Il selettore sostituisce la griglia di otto card: tutte le scelte restano raggiungibili, ma il contenuto lungo ha un solo fuoco. Senza JavaScript i link funzionano come ancore: `:target` apre il pannello richiesto e il primo è il ripiego iniziale. Il motore aggiunge soltanto ruoli ARIA e stato. =========================================================================== */ .sectorexplorer { border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-lift); } .sectorexplorer__nav { padding: 22px clamp(18px, 2.8vw, 34px) 24px; border-bottom: 1px solid var(--line); background: var(--surface-2); } .sectorexplorer__hint { margin: 0 0 13px; font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); } .sectorexplorer__scope { width: 100%; max-width: none; margin: 14px 0 0; color: var(--text-3); font-size: var(--fs-small); line-height: 1.55; } .sectorfilters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; } .sectorfilter { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 48px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--text-2); font-size: var(--fs-small); font-weight: 650; line-height: 1.3; text-decoration: none; cursor: pointer; transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .sectorfilter:hover { border-color: var(--line-3); color: var(--text); transform: translateY(-1px); } .sectorfilter.is-active { border-color: var(--accent-line); background: var(--accent-soft); color: var(--text); } .sectorfilter:focus-visible { outline: 2px solid var(--accent-fg); outline-offset: 2px; } .sectorfilter__ico { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-3); transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .sectorfilter__ico svg { width: 17px; height: 17px; } .sectorfilter.is-active .sectorfilter__ico { background: var(--accent-fg); color: var(--on-accent); } .sectorstories { position: relative; } .sectorstory { display: none; grid-template-columns: minmax(0, 1.14fr) minmax(320px, 0.86fr); min-height: 460px; background: var(--bg-2); scroll-margin-top: 110px; } .sectorstory:first-child, .sectorstory:target { display: grid; } .sectorstories:has(.sectorstory:target) .sectorstory:first-child:not(:target) { display: none; } .sectorstory[hidden] { display: none; } .sectorexplorer.is-enhanced .sectorstory.is-current { display: grid; animation: sector-enter var(--t-slow) var(--ease) both; } @keyframes sector-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .sectorstory__media { position: relative; min-width: 0; min-height: 460px; overflow: hidden; background: var(--inset-bg); } .sectorstory__media::after { content: ""; position: absolute; inset: 0; border-right: 1px solid var(--line); pointer-events: none; } .sectorstory__media img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; } /* Le due varianti occupano lo stesso identico riquadro. La selezione del tema cambia soltanto quale immagine è visibile, senza aggiungere una seconda altezza al flusso e quindi senza alterare l'aspect ratio della scena. */ .sectorstory__media .sectorstory__img--light { display: none; } .sectorstory__count { position: absolute; left: 18px; top: 18px; z-index: 1; display: inline-flex; gap: 5px; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--bg); color: var(--text); box-shadow: var(--shadow-lift); font-family: var(--f-mono); font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.08em; } .sectorstory__count span { color: var(--text-3); } .sectorstory__controls { position: absolute; right: 18px; bottom: 18px; z-index: 2; display: none; gap: 8px; } .sectorexplorer.is-enhanced .sectorstory__controls { display: flex; } .sectorstory__control { width: 46px; height: 46px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--bg); color: var(--text); box-shadow: var(--shadow-lift); cursor: pointer; transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .sectorstory__control:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-fg); transform: translateY(-1px); } .sectorstory__control:focus-visible { outline: 2px solid var(--accent-fg); outline-offset: 2px; } .sectorstory__control svg { width: 19px; height: 19px; } .sectorstory__arrow--back { transform: rotate(180deg); } .sectorstory__content { align-self: center; min-width: 0; padding: clamp(30px, 4.4vw, 58px); } .sectorstory__identity { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; } .sectorstory__ico { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--accent-line); border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-fg); } .sectorstory__ico svg { width: 22px; height: 22px; } .sectorstory__k { margin: 0; font-family: var(--f-mono); font-size: var(--fs-micro); font-weight: 650; letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent-fg); } .sectorstory__t { margin: 0 0 15px; max-width: 20ch; font-family: var(--f-display); font-size: clamp(1.45rem, 2.7vw, 2.15rem); font-weight: 760; line-height: 1.14; letter-spacing: -0.035em; } .sectorstory__d { margin: 0; max-width: 54ch; color: var(--text-2); font-size: 0.96rem; line-height: 1.68; } .sectorstory__example { margin-top: clamp(24px, 3vw, 34px); padding: 17px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--inset-bg); } .sectorstory__example .tlabel { margin-bottom: 8px; color: var(--text-3); } .sectorstory__example p:last-child { margin: 0; color: var(--text); font-size: var(--fs-small); font-weight: 600; line-height: 1.55; } .sectorstory__example q { quotes: "“" "”" "‘" "’"; } /* =========================================================================== CTA FINALE (par. 14.16) — un titolo, un pulsante. =========================================================================== */ .close { position: relative; overflow: hidden; text-align: center; } .close__glow { width: 700px; height: 460px; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* =========================================================================== MODULO (par. 20.3) =========================================================================== */ .form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .field { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .field--full { grid-column: 1 / -1; } .field__l { font-size: 0.9rem; font-weight: 500; color: var(--text-2); } .field__l .req { color: var(--accent-fg); margin-left: 2px; } .field__help { font-size: 0.82rem; color: var(--text-3); } .input, .textarea, .select { width: 100%; padding: 13px 15px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font-family: var(--f-sans); font-size: 0.98rem; line-height: 1.5; transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); } .input::placeholder, .textarea::placeholder { color: var(--text-3); } .input:hover, .textarea:hover, .select:hover { border-color: var(--line-3); } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--accent-fg); box-shadow: 0 0 0 3px var(--accent-soft); } .textarea { resize: vertical; min-height: 118px; } /* La freccia del select è un SVG in `background-image`, quindi il suo colore NON è currentColor e non segue il tema da solo: le due varianti si scambiano più in basso, con la regola sul tema chiaro. */ .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23B7BBD6' stroke-width='1.6'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; padding-right: 38px; } /* Le opzioni le disegna il sistema operativo: `color-scheme` sulla radice fa già il grosso, ma il fondo esplicito evita il testo chiaro su menu chiaro che alcuni Chrome su Windows producono comunque. */ .select option { background: var(--surface-solid); color: var(--text); } .check { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; } .check input { appearance: none; width: 20px; height: 20px; flex: none; margin-top: 2px; border-radius: 5px; border: 1px solid var(--line-3); background: var(--surface); cursor: pointer; transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .check input:checked { background: var(--accent-fg); border-color: var(--accent-fg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%230B0718' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.4 5.9 10.3 11 4.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 13px; } .check__t { font-size: 0.9rem; line-height: 1.58; color: var(--text-2); } .check__t a { color: var(--accent-fg); border-bottom: 1px solid var(--accent-line); } /* L'errore non è affidato al solo colore: c'è il testo sotto il campo. */ .field.has-error .input, .field.has-error .textarea, .field.has-error .select, .field.has-error .check input { border-color: var(--absent); } .field__err { font-size: 0.86rem; color: var(--absent); display: none; } .field.has-error .field__err { display: block; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form__note { grid-column: 1 / -1; font-size: 0.84rem; line-height: 1.62; color: var(--text-3); } .form__msg { grid-column: 1 / -1; padding: 14px 16px; border-radius: var(--r-sm); font-size: 0.94rem; line-height: 1.6; display: none; } .form__msg.is-ok { display: block; background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--verified); } .form__msg.is-ko { display: block; background: var(--ko-bg); border: 1px solid var(--ko-line); color: var(--absent); } /* =========================================================================== FOOTER (par. 13.3) — strutturato, niente vetro (par. 8.3). =========================================================================== */ .foot { background: var(--footer-bg); border-top: 1px solid var(--footer-line); color: var(--footer-text); padding-block: clamp(52px, 6vw, 76px) 30px; } .foot__grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 34px; } .foot__brand { max-width: 32ch; } .foot .brand__name { color: var(--footer-text); } .foot .brand__mark { filter: var(--footer-symbol-filter); } .foot__tag { font-size: 0.9rem; line-height: 1.62; color: var(--footer-text-2); margin-top: 14px; } /* Simbolo e firma DigiBite sono PNG trasparenti. Il filtro arriva dai token del footer: nel tema scuro conserva la resa corrente; nel tema chiaro li porta al bianco sul nuovo fondo indaco. */ /* `inline-block` e non `inline`: il margine sopra sta sull'immagine, e su un contenitore inline non avrebbe effetto. */ .foot__bylink { display: inline-block; } .foot__by { margin-top: 26px; height: 34px; width: auto; opacity: var(--footer-logo-opacity); filter: var(--footer-by-filter); transition: opacity var(--t-fast) var(--ease); } .foot__bylink:hover .foot__by { opacity: 1; } .foot__h { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: 0.13em; text-transform: uppercase; color: var(--footer-text-3); margin-bottom: 15px; } .foot__l { display: block; padding: 6px 0; font-size: 0.92rem; color: var(--footer-text-2); transition: color var(--t-fast) var(--ease); } .foot__l:hover { color: var(--footer-text); } /* La riga dei crediti occupa TUTTA la larghezza del contenitore, in tre zone: copyright a sinistra, ragione sociale e P. IVA al centro, telefono contro il bordo destro. Vedi il commento in `footer.php` per il perché di una griglia `1fr auto 1fr` al posto del `flex` con `margin-left: auto` che c'era prima: in flex il blocco centrale si centra nello spazio che avanza, non nel contenitore, e con due lati di larghezza diversa finisce fuori asse. */ .foot__bar { margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--footer-line); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px 26px; align-items: center; font-size: 0.84rem; color: var(--footer-text-3); } .foot__bar-c { text-align: center; } .foot__bar-r { text-align: right; } /* Sotto le tre zone e a tutta larghezza: dentro una di esse allargherebbe la sua colonna e sposterebbe il centro. */ .foot__bar-note { grid-column: 1 / -1; } .foot__bar a { color: var(--footer-text-3); transition: color var(--t-fast) var(--ease); } .foot__bar a:hover { color: var(--footer-text-2); } /* CTA sticky su mobile (par. 20.1): presente ma non invasiva. `pointer-events: none` sul contenitore e `auto` solo sul pulsante: la banda è alta ~70px (padding + safe-area), ma solo il pulsante deve intercettare il tap. Senza questa distinzione, qualunque cosa scorra sotto il padding vuoto del contenitore — un tab, una chip — riceve un tap che non le è destinato: succedeva davvero con i pulsanti delle simulazioni e i suggerimenti dei simulatori (vedi anche antex.js, che spegne del tutto questa barra mentre un simulatore è a schermo). */ .stickycta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: none; padding: 11px var(--shell-pad) calc(11px + env(safe-area-inset-bottom)); background: var(--g1-bg); -webkit-backdrop-filter: blur(var(--g1-blur)); backdrop-filter: blur(var(--g1-blur)); border-top: 1px solid var(--g1-line); transform: translateY(110%); transition: transform var(--t-slow) var(--ease); pointer-events: none; } .stickycta.is-on { transform: translateY(0); } .stickycta .btn { width: 100%; pointer-events: auto; } /* =========================================================================== MATRICE DI CONFRONTO (sezione assistenti, par. 14.7) Una tabella vera, non una griglia di div: le intestazioni di riga e colonna sono