/* ═══════════════════════════════════════════════════════════════════════════ ft-ui.css — LA LINEA GRAFICA DI FINAL THIRD FT-0058 · 7 settembre 2026 ⚠️ QUESTO FILE VESTE DUE APPLICAZIONI: bot/ (CoachBot) E board/ (Tactical Board). Una modifica qui si vede su ENTRAMBE, su circa novanta pagine, subito. Non si tocca per aggiustare una schermata: per quella si scrive una regola locale nella pagina. Qui si cambia solo quello che deve cambiare OVUNQUE. Prima di modificare: apri il bot E la board, non una sola delle due. ⚠️ E OGNI VOLTA CHE LO CARICHI, cambia il numero di versione in KB/public/_head.php (`$FT_UI_V`) e nella riga corrispondente di TB. Se non lo cambi, la correzione resta nella cache del browser e non arriva mai allo schermo — su questo progetto e' gia' successo con quattro `live.js` fermi allo stesso `?v=1`. Sta a /assets/ft-ui.css, una cartella che non appartiene ne' a bot/ ne' a board/. Le due applicazioni lo linkano con un percorso ASSOLUTO, quindi non ci sono copie: e' l'unica forma in cui «uno solo» resta vero. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1 · IL CARATTERE ────────────────────────────────────────────────────── Inter, dai file NOSTRI: sono gli stessi sette woff2 che la landing serve da /fonts/ dal 20 aprile. Nessuna chiamata a Google su novanta pagine, e nessuna copia dei file — si punta a quelli che ci sono gia'. 400 testo · 500 evidenza · 600 grassetto · 800 titoli (al posto di Bebas). Inter e' anche il carattere del marchio, che e' Inter Black 900. ─────────────────────────────────────────────────────────────────────────── */ @font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/inter-latin-400-normal.woff2') format('woff2'); } @font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/inter-latin-500-normal.woff2') format('woff2'); } @font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/inter-latin-600-normal.woff2') format('woff2'); } /* ⚠️ IL 700 MANCAVA, ed e' il peso piu' usato di tutti dopo il 400: 235 volte fra KB, TB e questo foglio. Senza la sua dichiarazione il browser non lo cerca — se lo COSTRUISCE ingrassando il 600, e viene un finto grassetto con le aste sbagliate. Il file c'era gia' in /fonts/: mancava solo la riga. */ @font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/inter-latin-700-normal.woff2') format('woff2'); } @font-face { font-family:'Inter'; font-style:normal; font-weight:800; font-display:swap; src:url('/fonts/inter-latin-800-normal.woff2') format('woff2'); } /* ── 2 · I GETTONI ───────────────────────────────────────────────────────── Quello che e' deciso sta qui. Quello che non lo e' e' scritto sotto come domanda aperta, non come valore provvisorio: un valore provvisorio si dimentica di essere provvisorio. ─────────────────────────────────────────────────────────────────────────── */ :root { --ft-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* I quattro momenti di gioco. Sono gli STESSI valori del grafico delle fasi in bot.php (`_DR_FASI_CFG`): un momento, un colore, in tutta la piattaforma. Chi cambia un colore qui lo cambia anche la'. */ --ft-poss: 16,185,129; /* verde — fase di possesso */ --ft-nonp: 239,68,68; /* rosso — fase di non possesso */ --ft-tdif: 59,130,246; /* blu — transizione difensiva */ --ft-toff: 245,158,11; /* ambra — transizione offensiva */ --ft-neutro: 148,163,184; /* grigio — momento non dichiarato */ /* ⚠️ ANCORA DA DECIDERE (§3 del piano FT-0058). Finche' non sono decise, NON scrivere qui un valore «per intanto»: · l'accento della piattaforma — verde e rosso sono spesi per i momenti, quindi non possono piu' dire «acceso»; · il raggio dei bordi; · la scala delle spaziature; · le tre dimensioni di testo. Vedi TB-KB/idee/allegati/FT-0058/. */ } /* ── 2bis · IL MOMENTO SI ATTACCA A QUALSIASI COSA ────────────────────────── 8 settembre 2026. Prima queste quattro definizioni stavano DENTRO `.dr-pill.m-possesso` e compagne: il momento sapeva colorare una pastiglia e nient'altro. Ma il momento non e' una proprieta' della pastiglia — e' una proprieta' del TERMINE, e serve anche a un titolo di colonna, a una voce di filtro, a una riga di una scheda stampata. Adesso `.m-possesso` e le altre non disegnano niente: dichiarano solo tre valori, e chi se li prende decide come usarli. --ft-m la tinta, come tre numeri, cosi' si puo' scrivere rgba(var(--ft-m), 0.30) e avere la stessa tinta a trasparenze diverse senza ridichiararla; --ft-t il testo chiaro dello stesso colore, per quando il fondo si scurisce; --ft-ic il segno, come maschera. ⚠️ Le tinte NON sono riscritte qui: puntano ai gettoni del §2, che sono gli stessi valori del grafico delle fasi. Erano scritte due volte — una nel §2 e una nella pastiglia — ed e' esattamente il difetto che FT-0058 toglie. IL SEGNO. Le due FASI sono chevron: nessuna punta, nessun movimento — dicono da che parte si sta andando, e durano. Le due TRANSIZIONI sono frecce curve con la punta: dicono un gesto, e passano. Statico contro dinamico, si legge a dodici pixel e si legge anche in bianco e nero — che serve nel PDF di una seduta e a chi non distingue il verde dal rosso, cioe' proprio possesso e non possesso. La difensiva e' l'offensiva ruotata di 180 gradi. I disegni stanno QUI come `mask-image`: nessun font di icone, nessun CDN, e il colore lo mette il CSS. ───────────────────────────────────────────────────────────────────────── */ .m-possesso { /* verde — fase di possesso: chevron su */ --ft-m: var(--ft-poss); --ft-t: #d1fae5; --ft-ic: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.4 11 L12 4.6 L19.6 11'/%3E%3Cpath d='M4.4 19 L12 12.6 L19.6 19' opacity='.5'/%3E%3C/g%3E%3C/svg%3E"); } .m-nonposs { /* rosso — non possesso: chevron giu' */ --ft-m: var(--ft-nonp); --ft-t: #fee2e2; --ft-ic: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.4 13 L12 19.4 L19.6 13'/%3E%3Cpath d='M4.4 5 L12 11.4 L19.6 5' opacity='.5'/%3E%3C/g%3E%3C/svg%3E"); } .m-transdif { /* blu — transizione difensiva: scende */ --ft-m: var(--ft-tdif); --ft-t: #dbeafe; --ft-ic: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='rotate(180 12 12)'%3E%3Cpath d='M5.44 21.87 L6.20 21.74 L6.95 21.58 L7.69 21.40 L8.41 21.19 L9.12 20.96 L9.81 20.71 L10.49 20.43 L11.16 20.13 L11.81 19.80 L12.44 19.44 L13.06 19.06 L13.66 18.65 L14.24 18.22 L14.80 17.76 L15.35 17.28 L15.88 16.77 L16.39 16.23 L16.89 15.67 L17.36 15.09 L17.81 14.48 L18.24 13.85 L18.66 13.19 L19.05 12.51 L19.42 11.81 L20.89 12.45 L19.20 4.60 L13.93 9.41 L15.39 10.05 L15.17 10.65 L14.93 11.23 L14.67 11.79 L14.39 12.34 L14.10 12.87 L13.80 13.38 L13.47 13.87 L13.13 14.35 L12.77 14.81 L12.39 15.25 L12.00 15.68 L11.58 16.09 L11.14 16.48 L10.69 16.86 L10.21 17.22 L9.72 17.57 L9.20 17.90 L8.66 18.21 L8.10 18.51 L7.52 18.79 L6.91 19.05 L6.28 19.29 L5.63 19.52 L4.96 19.73 Z'/%3E%3C/g%3E%3C/svg%3E"); } .m-transoff { /* ambra — transizione offensiva: sale */ --ft-m: var(--ft-toff); --ft-t: #fef3c7; --ft-ic: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.44 21.87 L6.20 21.74 L6.95 21.58 L7.69 21.40 L8.41 21.19 L9.12 20.96 L9.81 20.71 L10.49 20.43 L11.16 20.13 L11.81 19.80 L12.44 19.44 L13.06 19.06 L13.66 18.65 L14.24 18.22 L14.80 17.76 L15.35 17.28 L15.88 16.77 L16.39 16.23 L16.89 15.67 L17.36 15.09 L17.81 14.48 L18.24 13.85 L18.66 13.19 L19.05 12.51 L19.42 11.81 L20.89 12.45 L19.20 4.60 L13.93 9.41 L15.39 10.05 L15.17 10.65 L14.93 11.23 L14.67 11.79 L14.39 12.34 L14.10 12.87 L13.80 13.38 L13.47 13.87 L13.13 14.35 L12.77 14.81 L12.39 15.25 L12.00 15.68 L11.58 16.09 L11.14 16.48 L10.69 16.86 L10.21 17.22 L9.72 17.57 L9.20 17.90 L8.66 18.21 L8.10 18.51 L7.52 18.79 L6.91 19.05 L6.28 19.29 L5.63 19.52 L4.96 19.73 Z'/%3E%3C/svg%3E"); } .m-neutro { /* grigio — momento non dichiarato */ --ft-m: var(--ft-neutro); --ft-t: #e2e8f0; --ft-ic: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.4 11 L12 4.6 L19.6 11'/%3E%3Cpath d='M4.4 19 L12 12.6 L19.6 19' opacity='.5'/%3E%3C/g%3E%3C/svg%3E"); } /* ── LA PROVA DEL §9 PUNTO 2 ──────────────────────────────────────────────── La domanda a cui FT-0058 deve saper rispondere e': se cambio una cosa qui, cambia DAVVERO in tutte e due le applicazioni? Questa e' la risposta eseguibile, e costa zero quando e' spenta. Come si fa: si porta --ft-prova da 0 a 6px, si carica ft-ui.css, si ricarica il bot E la board. Deve comparire una riga verde in cima a tutte e due. Se compare in una sola, c'e' ancora una copia del foglio di stile in giro e il lavoro non e' finito. Poi si rimette 0. A 0 non disegna niente, e comunque non sposta niente: e' fissa, fuori dal flusso, e non riceve i clic. ⚠️ Non si consegna mai con un valore diverso da 0. */ :root { --ft-prova: 0px; } body::before { content: ''; position: fixed; inset: 0 0 auto 0; height: var(--ft-prova); background: #10b981; z-index: 99999; pointer-events: none; } /* ── 3 · LE BASI ───────────────────────────────────────────────────────────*/ body { font-family: var(--ft-font); } /* Il titolo. Era Bebas Neue, che era stretto e maiuscolo per natura; Inter in maiuscolo senza spaziatura si impasta, e .09em e' quello che le ridà il ritmo che aveva. Peso 800, non 900: il 900 resta del marchio, se no il logo smette di essere il punto piu' pesante della pagina. */ .font-display { font-family: var(--ft-font); font-weight: 800; letter-spacing: .09em; } /* ── 3bis · IL MARCHIO ─────────────────────────────────────────── 7 settembre 2026. Nell'intestazione delle pagine di KB il marchio era SCRITTO a mano: FINAL + THIRD in due con .font-display; in contenuto.php era rimasto addirittura COACHKB. Adesso e' il logo vero, lo stesso file che serve la landing, servito dalla radice del sito: /FinalThird-logo-final-white.svg (bianco + verde #10b981). ATTENZIONE all'altezza, che non e' quella che sembra. Quel file ha una tela di 210x100 e il marchio ci sta dentro dalla y 35,17 alla 68,87: occupa il 33,7% dell'altezza, tutto il resto e' aria. L'inchiostro che si vede e' quindi 0,337 x l'altezza qui sotto. A 48px il marchio e' alto ~16px, che e' quanto era alto il testo di prima (Inter 800 a 20px): il cambio non sposta il ritmo della barra. Chi cambia questo numero cambia il marchio su tutte le pagine: e' l'unico posto in cui e' scritto. E non si ritaglia una copia dell'SVG con la tela stretta: una copia, prima o poi, si dimentica di essere una copia. ───────────────────────────────────────────────────────────────────────── */ .ft-logo { display: block; height: 48px; width: auto; flex: none; } /* La parola accanto al marchio dice QUALE delle due applicazioni si sta guardando — Coach o Board — perche' il marchio, da solo, non lo dice. */ .ft-logo-app { font-size: 11px; font-weight: 500; letter-spacing: .04em; color: #64748b; white-space: nowrap; } /* ── 4 · LA PASTIGLIA DELL'ALBERO ────────────────────────────────────────── Spostata qui da KB/public/bot.php il 7 settembre: era il primo componente validato, ed e' anche il primo che serve in piu' di un posto (il drawer, il catalogo, la scheda dell'esercizio, e un giorno la board). ─────────────────────────────────────────────────────────────────────────── */ /* ══════════════════════════════════════════════════════════════════ FT-0058 · le pastiglie dell albero nel drawer — 7 settembre 2026 LA TINTA E IL SEGNO DICONO IL MOMENTO DI GIOCO, E BASTA. I quattro colori sono gli STESSI del grafico delle fasi qui sotto (`_DR_FASI_CFG`): un momento, un colore, in tutta la schermata. Chi cambia un colore qui lo cambia anche la', o la stessa parola torna a dirsi in due modi a dieci centimetri di distanza. IL SEGNO. Le due FASI sono chevron — nessuna punta, nessun movimento: dicono da che parte si sta andando, e durano. Le due TRANSIZIONI sono frecce curve con la punta — dicono un gesto, e passano. Statico contro dinamico: si legge a dodici pixel senza sapere niente, e si legge anche in bianco e nero (in un PDF di seduta, o per chi non distingue il verde dal rosso: possesso e non possesso sono proprio quella coppia). La difensiva e' l'offensiva ruotata di 180 gradi. I disegni stanno QUI dentro come `mask-image`: nessun font di icone, nessuna chiamata a un CDN, e il colore lo mette il CSS. · il LIVELLO non usa ne' tinta ne' segno: sta scritto nel titolo di sezione, e nel drawer il titolo c'e' sempre; · lo STATO non usa la tinta: usa riempimento, bordo e un segno in coda — ✦ propone, ✓ conferma. LO SMORZATO NON USA L OPACITA'. Sbiadire il testo lo rende illeggibile: con `opacity:0.4` il contrasto scendeva a 3,21:1, sotto il minimo di 4,5:1. Qui invece si toglie la TINTA e il testo resta pieno — 8,2:1. «Smorzato» non vuol dire piu' chiaro: vuol dire senza colore. ══════════════════════════════════════════════════════════════════ */ .dr-pill { /* Il grigio di scorta sta DENTRO ogni var(), non in una dichiarazione a parte: una `var()` senza valore e senza ripiego non schiarisce la dichiarazione, la BUTTA VIA — e la pastiglia resterebbe senza fondo e senza bordo, non piu' chiara. Cosi' invece una pastiglia senza momento e' semplicemente grigia. */ display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: 9999px; font-size: 12px; line-height: 1rem; /* Un termine non va a capo dentro la sua pastiglia: e' un'etichetta, non un paragrafo. Lo faceva gia' la pastiglia della Board, e nelle sue colonne strette serve davvero. */ white-space: nowrap; /* Una pastiglia e' un'etichetta, non un pezzo di prosa: se e' un link (nel contenuto del catalogo lo e', porta al filtro) il browser la sottolineerebbe. */ text-decoration: none; color: #dee5ee; background: rgba(var(--ft-m,148,163,184),0.08); border: 1px solid rgba(var(--ft-m,148,163,184),0.22); transition: background .15s, border-color .15s, color .15s, box-shadow .15s; } .dr-pill.dr-pill-piccola { padding: 2px 8px 2px 7px; } /* Il segno del momento: una maschera, non un carattere e non un'immagine. Il colore e' `background-color`, quindi segue lo stato come il testo. */ .dr-pill::before { content: ''; flex: none; width: 12px; height: 12px; background-color: rgb(var(--ft-m,148,163,184)); /* Il ripiego NON e' `none`: senza maschera il riquadro si vedrebbe tutto, cioe' un quadratino colorato di 12px. E' un SVG vuoto: maschera che non lascia passare niente. Serve alle pastiglie senza momento. */ -webkit-mask: var(--ft-ic,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E")) center / contain no-repeat; mask: var(--ft-ic,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E")) center / contain no-repeat; } .dr-pill.dr-pill-piccola::before { width: 10px; height: 10px; } .dr-pill:hover { border-color: rgba(var(--ft-m,148,163,184),0.60); } /* Gli stati: riempimento, bordo e un segno in coda. MAI la tinta. ⚠️ I NUMERI SONO TARATI, non scelti a occhio — 8 settembre 2026. Prima i tre stati stavano dentro un fazzoletto: il contrasto fra i riempimenti era 1,18 da riposo a suggerita e 1,22 da suggerita a scelta. Cioe' il riempimento non diceva niente, e a distinguere gli stati restavano solo il ✦ e il ✓. riposo fondo .08 · bordo .22 suggerita fondo .14 · bordo .50 · anello .16 · ✦ scelta fondo .47 · bordo .95 · testo bianco · ✓ smorzata senza tinta, testo pieno (vedi sopra) Perche' questi: · la SCELTA a .47 porta il salto suggerita→scelta da 1,2 a 1,6-2,1, e il testo bianco resta a 6,05 nel caso peggiore (ambra sul fondo del catalogo) contro un minimo di 4,5; · il RIPOSO a .22 e non a .15: contro il fondo il contorno fa 1,46 invece di 1,28, e la linea guida per il contorno di un comando e' 3,0 — siamo gia' sotto, e con trentanove pastiglie piccole il bordo e' quello che da' loro una forma; · la SUGGERITA a .14 di riempimento distingue poco dal riposo (1,11): a distinguerla sono il suo bordo a .50 contro il .22 del riposo, l'anello e il ✦. Se sul campo non bastasse, la leva e' l'anello, non il fondo. */ .dr-pill.pill-suggested { background: rgba(var(--ft-m,148,163,184),0.14); border-color: rgba(var(--ft-m,148,163,184),0.50); box-shadow: 0 0 0 2px rgba(var(--ft-m,148,163,184),0.16); color: var(--ft-t,#e2e8f0); font-weight: 500; } .dr-pill.pill-suggested::after { content: '✦'; font-size: 10px; opacity: 0.9; } .dr-pill.pill-active { background: rgba(var(--ft-m,148,163,184),0.47); border-color: rgba(var(--ft-m,148,163,184),0.95); color: #ffffff; font-weight: 600; } .dr-pill.pill-active::before { background-color: #ffffff; } .dr-pill.pill-active::after { content: '✓'; font-size: 12px; } /* Smorzato = senza colore, non sbiadito. Il testo resta leggibile. */ .dr-pill.pill-dimmed { background: #151d2c; border-color: #232c3b; color: #a9b6c7; box-shadow: none; font-weight: 400; } .dr-pill.pill-dimmed::before { background-color: #5b6a7e; } .dr-pill.pill-dimmed::after { content: none; } /* ── 5 · L'ALBERO IN DUE COLONNE ─────────────────────────────────────────── 8 settembre 2026. La forma non e' inventata qui: e' quella che la scheda della seduta nella Board ha gia' (`tb-sessions.js`, «Principi che allena»), e che funziona. Adesso e' scritta in un posto solo invece che a mano in stili in linea, cosi' vale anche per il drawer del bot e per i filtri del catalogo. TRE COLONNE, UNA PER GRUPPO: possesso, non possesso, transizioni. Non e' per riempire lo spazio — l'albero nasce gia' diviso in due meta', i principi di quando la palla e' nostra e quelli di quando non lo e', e cosi' a scendere; le transizioni sono il terzo gruppo, che non e' ne' l'una ne' l'altra. Affiancarli e' disegnare il metodo. ⚠️ 8 settembre: le transizioni stavano sulla riga intera sotto le altre due (`.ft-larga`). Il ragionamento reggeva — non sono ne' possesso ne' non possesso, quindi sotto tutte e due — ma a schermo no: la colonna del possesso e' molto piu' alta di quella del non possesso, e sotto al non possesso restava una buca vuota grande mezza scheda, con la striscia delle transizioni ancora piu' giu'. Adesso le transizioni SONO la terza colonna: riempiono la buca e la scheda si accorcia di tutta la striscia. Una colonna a se' dice «un terzo gruppo» quanto lo diceva una riga sotto. `.ft-larga` resta, per la riga di cio' che non ha trovato posto nell'albero. ⚠️ 8 settembre, seconda passata: LE TRE COLONNE NON SONO LARGHE UGUALI, ed e' voluto. Misurate sui termini veri erano alte 674 / 622 / 155 px: il possesso ha ventuno sotto-sotto-principi, il non possesso diciotto, le transizioni quattro pastiglie e nessun figlio. Con tre colonne uguali la terza restava piena per un quarto. Le proporzioni non sono a occhio: provate cinque, misurando l'altezza della scheda e controllando che nessuna pastiglia sbordasse dalla sua colonna. 1 / 1 / 1 674 622 155 la scheda e' alta 674 1.15 / 1 / 0.85 590 622 155 622 1.2 / 1.1 / 0.7 564 590 187 590 ← questa 1.25 / 1.15 / 0.6 532 590 187 590, ma la terza scende a 224px Da 674 a 590: dodici per cento in meno, e la terza colonna smette di fermarsi a un quarto. Oltre non si guadagna piu' niente e si stringe solo. Non e' una regola generale di impaginazione: e' tarata su QUESTO albero, ed e' il motivo per cui i numeri stanno scritti qui. Se un giorno l'albero cambia forma, si rimisura. Sotto i 1000px si passa a due colonne e sotto i 660 a una: su un telefono si impila senza schiacciare niente. ───────────────────────────────────────────────────────────────────────── */ .ft-albero { display: grid; grid-template-columns: 1fr; gap: 18px 28px; align-items: start; } @media (min-width: 660px) { .ft-albero { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { .ft-albero { grid-template-columns: 1.2fr 1.1fr 0.7fr; } } /* ── `.pari` · TRE COLONNE UGUALI ─────────────────────────────────────────── Le proporzioni 1.2/1.1/0.7 qui sopra sono tarate sull'ALBERO, dove le tre colonne portano pesi molto diversi (21 termini, 18, 4). I tre DISEGNI no: il ciclo, il campo e le sei regole hanno ognuno la sua misura fissa, e stringere quella delle regole al 70% le manda a capo per niente. Qui le colonne sono uguali e alte uguali — `stretch`, non `start` — perche' sono tre riquadri affiancati, non tre elenchi che finiscono dove finiscono. E' la stessa griglia che la scheda della seduta nella Board usa gia' per questa riga. ───────────────────────────────────────────────────────────────────────── */ .ft-albero.pari { align-items: stretch; } @media (min-width: 1000px) { .ft-albero.pari { grid-template-columns: repeat(3, 1fr); } } .ft-albero > .ft-larga { grid-column: 1 / -1; } .ft-colonna { display: flex; flex-direction: column; gap: 12px; min-width: 0; } /* Il titolo di una colonna prende tinta e segno dal momento: la colonna si riconosce prima di leggerla. Funziona perche' i momenti del §2bis non disegnano niente, dichiarano soltanto — qui li usa un titolo, dieci righe piu' in la' una pastiglia. */ .ft-momento { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: rgb(var(--ft-m,148,163,184)); } /* Quando il titolo del momento sta dentro un raggruppamento (e non e' il titolo della colonna) stacca dalle sue pastiglie come fa un'etichetta. */ .ft-colonna > div > .ft-momento { margin-bottom: 6px; } .ft-momento::before { content: ''; flex: none; width: 13px; height: 13px; background-color: rgb(var(--ft-m,148,163,184)); /* Il ripiego NON e' `none`: senza maschera il riquadro si vedrebbe tutto, cioe' un quadratino colorato di 12px. E' un SVG vuoto: maschera che non lascia passare niente. Serve alle pastiglie senza momento. */ -webkit-mask: var(--ft-ic,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E")) center / contain no-repeat; mask: var(--ft-ic,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E")) center / contain no-repeat; } /* Il LIVELLO — principi, sotto-principi, sotto-sotto — non usa ne' tinta ne' segno: quelli dicono il momento e non possono dire due cose. Il livello sta scritto, in lettere. */ .ft-livello { display: block; margin: 0 0 6px; font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #94a3b8; } .ft-pastiglie { display: flex; flex-wrap: wrap; gap: 6px; } .ft-pastiglie.fitta { gap: 4px; } /* Una pastiglia puo' essere un