/* fga/ui/static/css/portale.css — Portale Ristoratori (pilota F3-UI). Regole brand FGA (dettate dal compito, sottoinsieme gestionale della Carta di CORE §4): Inter SOLO (self-hosted, niente Plus Jakarta Sans), tabular-nums su prezzi/quantita', TRE colori SOLI — Nero caldo #1C1714, Avorio caldo #FAF7F0, accento Rosso Scarlatto #D62828 — mai un quarto colore inventato. Scarlatto SOLO su titoli/CTA, MAI su testo-corpo: avvisi/errori/conferme sotto usano nero in grassetto + un glifo (⚠/✓), mai il colore come unico canale di significato (a11y). Bordi/superfici/ testo-secondario sono TINTE CALCOLATE di nero-su-avorio (color-mix), non nuovi colori con un nome proprio. Niente oro. */ @font-face { font-family: "Inter"; src: url("/static/fonts/Inter-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("/static/fonts/Inter-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } /* Playfair Display Bold — SOLO per titoli-display (canone brand: display serif, solo tondo, mai corpo/testo di servizio). Estratta dal canone firmato 21/07 (vedi blocco token sotto): usata da .fg-titolo--display, NON dal .fg-titolo di base (quello resta Inter per tutti i titoli di pagina funzionali — "Ordini di agenzia", "Magazzino"...). */ @font-face { font-family: "Playfair Display"; src: url("/static/fonts/PlayfairDisplay-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } :root { --fg-nero: #1c1714; --fg-avorio: #faf7f0; --fg-scarlatto: #d62828; --fg-raggio: 6px; /* color-scheme forzato a "light" (mandato M1-B, decisione Giuseppe via AUQ, 2026-07-20): il blocco @media (prefers-color-scheme: dark) qui sotto e' spento (vedi commento li'). Con color-scheme ancora "light dark" i controlli nativi del browser (scrollbar, checkbox, focus dei form nativi) si adatterebbero comunque al dark del sistema mentre i NOSTRI colori restano quelli chiari: un ibrido rotto, non un tema chiaro vero. "light" da solo tiene tutto coerente finche' il blocco sotto non si riaccende (un solo passo in piu', stessa istruzione). */ color-scheme: light; /* — Canone Home + Statistiche, FIRMATO 21/07/2026 (fondazione grafica) — Token estratti 1:1 dalla variante DEFAULT dei due mockup giocabili: 80-cantieri/fga-standalone/_lavorazione/mockup-goal-grafica-20260721/ proposta-d-play.html (Home) + statistiche-play.html (Statistiche). Mai un hex inventato: ogni valore qui sotto e' copiato da li'. */ --fg-bianco: #ffffff; /* fondo pagina canone (era --fg-avorio) */ --fg-canvas: var(--fg-bianco); /* alias mockup: card/superfici bianche */ --fg-surface: #f6f5f4; /* sezioni sobrie (header/hover card) */ --fg-surface-soft: #fafaf9; /* sezioni ancora piu' leggere */ --fg-slate: #5d5b54; /* testo secondario Notion, 6.80:1 su bianco */ --fg-steel: #787671; /* testo terziario Notion, 4.54:1 su bianco */ --fg-stone: #a4a097; /* label mute, solo >=18px/grassetto */ --fg-hairline: #e5e3df; --fg-hairline-soft: #ede9e4; --fg-hairline-strong: #c8c4be; --fg-radius-chip: 5px; --fg-radius-control: 8px; --fg-radius-card: 12px; --fg-shadow-hover: 0 1px 2px rgba(15, 15, 15, 0.04); /* Avorio a 72%: testo secondario sulla navbar nera (sempre nera, canone firmato) — 8,99:1 su #1C1714, ampio margine sopra il 4.5:1 AA. */ --fg-avorio-72: rgba(250, 247, 240, 0.72); /* Tag/pill semaforo stile Notion, gia' scuriti per AA (mockup, palette D). */ --tag-verde-bg: #eef3ed; --tag-verde-fg: #4d775c; --tag-giallo-bg: #faf3dd; --tag-giallo-fg: #8c692d; --tag-blu-bg: #e9f3f7; --tag-blu-fg: #427298; --tag-rosso-bg: #faecec; --tag-rosso-fg: #bb463e; --tag-grigio-bg: #f1f1ef; --tag-grigio-fg: #6e6d6b; --tag-brown-bg: #f3eeee; --tag-brown-fg: #8b6450; --tag-purple-bg: #f6f3f8; --tag-purple-fg: #8560a7; --tag-orange-bg: #f8ecdf; --tag-orange-fg: #9d5c24; /* Famiglie-area per il filetto delle card (.fg-card[data-famiglia]) — stessa mappa dichiarata nel mockup Home, riusata da fga/ui/templates/ home.html. Statistiche riusera' lo stesso set per le sue card KPI. */ --fam-finanza: var(--tag-verde-fg); --fam-vendita: var(--tag-blu-fg); --fam-prodotto: var(--tag-brown-fg); --fam-anagrafiche: var(--tag-purple-fg); --fam-statistiche: var(--tag-blu-fg); --fam-archivio: var(--tag-grigio-fg); /* Tinte calcolate (non nuovi colori): nero a bassa opacita' sul fondo pagina. Base spostata da --fg-avorio a --fg-bianco (canone 21/07: fondo pagina bianco) — stessa formula/percentuali di prima, stesso principio "tinta calcolata, non colore nuovo", solo la base e' quella vera ora in pagina (scarto avorio/bianco impercettibile, ~1-2 unita' RGB). */ --fg-bordo: color-mix(in srgb, var(--fg-nero) 22%, var(--fg-bianco)); --fg-testo-secondario: color-mix(in srgb, var(--fg-nero) 62%, var(--fg-bianco)); --fg-superficie: color-mix(in srgb, var(--fg-nero) 4%, var(--fg-bianco)); /* Semaforo YoY a 7 classi (ramo Statistiche, canone firmato 21/07, statistiche-play.html): hex esatti dal mockup, un token per classe. Il grigio "nd" (nessun confronto possibile) riusa --fg-hairline-strong gia' esistente, nessun ottavo token per quello. */ --sem-rosso: #cd212a; --sem-arancio-scuro: #ea580c; --sem-arancio: #f97316; --sem-giallo: #eab308; --sem-lime: #84cc16; --sem-verde-vivo: #22c55e; --sem-verde: #008c45; } /* Tema scuro cerimoniale — SPENTO (mandato M1-B, decisione Giuseppe via AUQ, 2026-07-20): in due giri di collaudo sono stati fatti 34 screenshot e NESSUNO in tema scuro — un Mac in dark mode avrebbe mostrato domani a Peppino una versione dell'app mai revisionata. Commentato, non cancellato: le regole restano identiche e pronte, invariate dentro il blocco. PER RIACCENDERE (due passi — MAI scrivere qui sopra i simboli di apertura o chiusura di un commento CSS per esteso: spezzerebbero il parsing di questo stesso commento, esattamente il bug preso e corretto in questo giro): 1) cancella il delimitatore di apertura commento appena sopra la riga "@media (prefers-color-scheme: dark)" qui sotto, e il delimitatore di chiusura subito dopo la parentesi graffa finale dello stesso blocco; 2) riporta color-scheme, qui sopra in :root, a "light dark". */ /* @media (prefers-color-scheme: dark) { :root { --fg-nero: #faf7f0; --fg-avorio: #1c1714; } } */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* Fondo pagina BIANCO #FFFFFF (canone Home firmato 21/07, non piu' Avorio): testo nero caldo invariato. --fg-avorio resta un colore valido della palette (testo/pill sulla navbar sempre nera piu' sotto), solo non e' piu' il fondo su cui poggia il contenuto. */ body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--fg-bianco); color: var(--fg-nero); line-height: 1.5; } /* Colore di default dei link (mandato C1, voce 2 del report 20/07, Lente-Fable, visibile in 03/06): senza una regola globale "a { color }" il browser applica il suo blu #0000EE di default — un ottavo colore fuori dai 7 della palette brand. I link nudi delle tabelle (es. agenzia/lista.html, carte_lista.html) non hanno classi dedicate, quindi ricadono qui. Nero-su-avorio (si inverte da solo in tema scuro, stessa variabile di .fg-header__nav a piu' sotto) + sottolineatura: il segnale "questo e' un link" resta la sottolineatura, non un colore fuori palette. Selettori piu' specifici (.fg-nav__link, .fg-home-card, a.fg-header__marchio...) vincono gia' su questo per specificita' e non sono toccati. */ a { color: var(--fg-nero); text-decoration: underline; } .fg-skip { position: absolute; left: -9999px; top: 0; background: var(--fg-nero); color: var(--fg-avorio); padding: 0.5rem 1rem; z-index: 100; } .fg-skip:focus { left: 0.5rem; top: 0.5rem; } /* Navbar NERA #1C1714 (canone Home firmato 21/07: SEMPRE nera, nessuna variante — il playground del mockup provava anche "chiara"/"navy", la ricetta firmata di Giuseppe fissa "nera" come unico valore di produzione). Colonna centrata: logo sopra, occhiello (header_sotto) sotto; il cluster di destra (pill/azioni/uscita) e' ancorato in alto a destra via .fg-header__right, position:relative qui per ancorarlo. */ .fg-header { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; padding: 1rem 1.5rem; background: var(--fg-nero); } .fg-header__brand { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; } .fg-header__marchio { display: inline-flex; } .fg-logo { height: 24px; width: auto; display: block; } .fg-header__sotto { color: var(--fg-avorio-72); font-size: 0.85rem; } /* Cluster in alto a destra (pill DATI DIMOSTRATIVI, azioni di pagina, Esci): ancorato in verticale a meta' header (regge un'altezza variabile del logo+occhiello senza un offset "a occhio"). Sotto la soglia qui sotto torna nel flusso normale, sotto il marchio: un cluster con piu' bottoni (es. "Fasce markup" + "Nuova carta") in overlay assoluto rischierebbe di sovrapporsi al logo centrato su schermi stretti. Soglia 700px, non il 640px usato piu' sotto per la scheda mobile della carta vini: stesso range 600-720px "telefono in mano" gia' documentato in questo file, valore diverso apposta — un secondo blocco a 640px avrebbe fatto match anche a una ricerca testuale che isola il blocco mobile della carta cercando la prima occorrenza di quella soglia esatta (tests/api/test_frontend_m1_20260720.py), scambiando le regole di questo blocco per parte di quello. */ .fg-header__right { position: absolute; top: 50%; right: 1.5rem; transform: translateY(-50%); display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; } @media (max-width: 700px) { .fg-header__right { position: static; transform: none; justify-content: center; margin-top: 0.5rem; } } .fg-header__nav { display: flex; align-items: center; gap: 1rem; } /* :not(.fg-btn) (mandato C1, voce 3 del report 20/07, Lente-Fable, visibile in 03/06): senza l'esclusione, questa regola (specificita' 0-1-1) batteva ".fg-btn { text-decoration: none }" (0-1-0) — le CTA scarlatte "Nuovo ordine"/"Nuova carta" nella nav uscivano sottolineate, un bottone che sembra rotto. Niente !important, niente specificita' gonfiata a caso: si esclude .fg-btn dal selettore, cosi' i link VERI della nav restano leggibili (colore aggiornato qui sotto) e i bottoni restano governati solo dal contratto CTA piu' sotto (.fg-btn/.fg-btn--*). Colore avorio-72 (era nero): questo blocco vive SEMPRE dentro .fg-header, ora sempre a fondo nero — nero-su-nero sarebbe stato illeggibile. */ .fg-header__nav a:not(.fg-btn) { color: var(--fg-avorio-72); text-decoration: underline; } /* Bottoni/testo di servizio DENTRO l'header (sempre a fondo nero ora): le varianti .fg-btn--ghost/.fg-testo-secondario sono condivise con pagine a fondo bianco (corpo pagina) — qui uno scoping ".fg-header ..." le reinverte SOLO dentro l'header, senza toccare gli usi altrove nel sito (radar Kaizen: bottone ghost nero-su-nero, invisibile, era un rischio concreto appena la navbar e' diventata sempre scura). */ .fg-header .fg-btn--ghost { color: var(--fg-avorio); border-color: rgba(250, 247, 240, 0.35); } .fg-header .fg-btn--ghost:hover { background: rgba(250, 247, 240, 0.08); border-color: var(--fg-avorio); } .fg-header .fg-btn--secondario { background: var(--fg-avorio); color: var(--fg-nero); } .fg-header .fg-btn--secondario:hover { background: color-mix(in srgb, var(--fg-avorio) 85%, var(--fg-nero)); } .fg-header .fg-testo-secondario { color: var(--fg-avorio-72); } /* Badge di ruolo (voce 18 del report 20/07): nel markup e' gia' uno , mai un (verificato in portale/pagina.html e fatture/pagina.html) — ma visivamente si confondeva coi link sottolineati e i bottoni bordati accanto in header. Ora ha un riempimento pieno (tinta calcolata --fg-bordo, gia' in uso altrove — non un colore nuovo) invece del solo contorno su sfondo header trasparente: si legge subito come un'etichetta di stato, non come qualcosa da cliccare. Peso 600 + testo pieno nero (contrasto alto sul riempimento) al posto del grigio-secondario tenue di prima. cursor:default e' difensivo, nel caso un domani il markup la renda per errore un elemento altrimenti interattivo. */ .fg-badge-ruolo { font-size: 0.85rem; font-weight: 600; padding: 0.2rem 0.6rem; border: 1px solid var(--fg-bordo); border-radius: 999px; background: var(--fg-bordo); color: var(--fg-nero); cursor: default; } /* --- Tag/pill stile Notion (canone Home firmato 21/07) ----------------- Componente NUOVO, riusabile: puntino + testo, coppie bg/fg gia' scurite per AA (token --tag-*-bg/--tag-*-fg qui sopra). Distinto da .fg-badge (pill legacy gia' in uso su stati ordine/carta con glifo ::before): qui niente migrazione dei suoi 8 usi esistenti (fuori dal file-set di questo mandato, mai toccati alla cieca) — .fg-tag e' lo standard per i punti nuovi che seguono la ricetta Home/Statistiche (qui: la pill "DATI DIMOSTRATIVI" nell'header; i cruscotti che verranno lo riuseranno). */ .fg-tag { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 0.8125rem; font-weight: 600; line-height: 1; padding: 5px 9px; border-radius: var(--fg-radius-chip); white-space: nowrap; } .fg-tag__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .fg-tag--verde { background: var(--tag-verde-bg); color: var(--tag-verde-fg); } .fg-tag--giallo { background: var(--tag-giallo-bg); color: var(--tag-giallo-fg); } .fg-tag--blu { background: var(--tag-blu-bg); color: var(--tag-blu-fg); } .fg-tag--rosso { background: var(--tag-rosso-bg); color: var(--tag-rosso-fg); } .fg-tag--grigio { background: var(--tag-grigio-bg); color: var(--tag-grigio-fg); } .fg-tag--brown { background: var(--tag-brown-bg); color: var(--tag-brown-fg); } .fg-tag--purple { background: var(--tag-purple-bg); color: var(--tag-purple-fg); } .fg-tag--orange { background: var(--tag-orange-bg); color: var(--tag-orange-fg); } /* Anello di definizione sui tag DENTRO l'header (sempre a fondo nero ora): rifinitura, non correzione di contrasto — ogni .fg-tag ha gia' un fondo proprio opaco, gia' a norma AA per conto suo (stesso principio dichiarato nel mockup di provenienza). */ .fg-header .fg-tag { box-shadow: 0 0 0 1px rgba(250, 247, 240, 0.16); } /* Larghezza contenuto (mandato C1, voce 13 del report 20/07): a 1440px il contenuto restava incolonnato a sinistra con una fascia vuota a destra (il login "galleggiava" senza un fuoco visivo) — 72rem era gia' oltre il range 1000-1140px del mandato. 70rem (1120px) centrato, dentro il range, con lo stesso padding laterale di prima (1.5rem, gia' verificato via screenshot a 390px: nessun overflow sul mobile). */ .fg-main { max-width: 70rem; margin: 0 auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 2rem; } /* overflow-x:auto (voce 13 del report 20/07, verificato dal vivo in browser): la tabella ordine agenzia ha 12 colonne e a 1120px (nuovo max-width di .fg-main qui sopra) supera comunque la larghezza disponibile — senza questa regola sarebbe la PAGINA a scorrere in orizzontale (WCAG 1.4.10 Reflow). fg-sezione e' l'unico contenitore comune a OGNI tabella del sito (verificato: ogni in ogni template vive dentro una
), quindi qui e non su .fg-fieldset: provato dal vivo che .fg-fieldset NON contiene davvero l'overflow (i fieldset hanno un min-width intrinseco al contenuto, un quirk browser noto — con overflow-x:auto il fieldset continua a crescere oltre il contenitore invece di scrollare, mentre una
normale no). La scrollbar compare solo se il contenuto e' davvero piu' largo del contenitore, quindi nessun impatto sulle sezioni che oggi stanno larghe come .fg-main. Trade-off accettato e dichiarato: overflow-x diverso da 'visible' forza anche overflow-y ad 'auto' (regola CSS, non scelta nostra) — con fg-sezione senza altezza vincolata questo non taglia mai il contenuto normale, solo, in teoria, l'ultimo pixel di un anello di focus se un elemento focabile fosse incollato al bordo inferiore senza padding: rischio minimo, accettato al posto dello scroll orizzontale di pagina (peggiore per l'a11y). */ .fg-sezione { display: flex; flex-direction: column; gap: 0.75rem; overflow-x: auto; /* Scroll-shadow (giro 12, piano 21/07, intervento #13 — DA COLLAUDO VISIVO, si ritira se il doppio gradiente stona sulle sezioni corte: vedi report ripianificazione 21/07 §C.5). Tecnica CSS pura via background-attachment local/scroll (zero JS, CSP-safe): le due sfumature "local" seguono lo scroll e coprono il bordo appena il contenuto scorre sotto, le due "scroll" restano fisse e danno il segnale di profondita' sul bordo. Tinte calcolate sui colori gia' in palette (fondo pagina pieno + nero a bassa opacita'), nessun colore nuovo. Le sfumature di copertura DEVONO essere del colore del fondo pagina: col canone 21/07 il fondo e' --fg-bianco (con l'avorio di prima apparivano come fasce sporche ai bordi, visto a collaudo). Sulle sezioni piu' strette del contenitore (nessun overflow) background-attachment:local le tiene invisibili da sole: zero impatto sulle sezioni che oggi non scrollano. */ background: linear-gradient(to right, var(--fg-bianco) 30%, transparent), linear-gradient(to left, var(--fg-bianco) 30%, transparent) 100% 0, linear-gradient(to right, color-mix(in srgb, var(--fg-nero) 15%, transparent), transparent), linear-gradient(to left, color-mix(in srgb, var(--fg-nero) 15%, transparent), transparent) 100% 0; background-repeat: no-repeat; background-size: 2rem 100%, 2rem 100%, 1rem 100%, 1rem 100%; background-attachment: local, local, scroll, scroll; } /* Disciplina Scarlatto (giro 12, piano 21/07, intervento #9): applica qui la regola gia' scritta nel contratto CTA piu' sotto ("UN SOLO Scarlatto per vista", portale.css:404) e la Carta di CORE §4 ("un solo accento per vista"). Titoli di pagina (.fg-titolo) e legende di sezione (.fg-sottotitolo) erano scarlatti OVUNQUE: una vista con piu' fieldset (es. Magazzino: "Giacenze"+"Registra movimento"+"Storico movimenti", tutte .fg-sottotitolo) mostrava fino a 5 elementi rossi sulla stessa schermata (Lente-Fable, giro 11) — l'accento perdeva il suo unico compito di indicare l'azione che chiude il task. Stesso nero gia' scelto per il summary GDO (commento piu' sopra, "per non moltiplicare l'accento su un controllo") e per gli avvisi/conferme (.fg-avviso/.fg-conferma-ok piu' sotto): l'unico Scarlatto di vista resta la CTA primaria (.fg-btn--primario) piu' gli avvisi critici esistenti (.fg-errore, .fg-tabnum--errore, .fg-cella--anomalia). */ .fg-titolo { font-size: 1.5rem; font-weight: 600; color: var(--fg-nero); margin: 0; } /* Modificatore, NON un default: Playfair Display SOLO come titolo-display (canone brand, sistema-tipografico.md v3.0 — "solo tondo", mai testo di servizio). .fg-titolo di base resta Inter per ogni titolo funzionale di pagina ("Ordini di agenzia", "Magazzino"...): qui il saluto della HOME (mockup Home firmato 21/07, controllo "Carattere del titolo" = Playfair Display Bold di default). Deve stare DOPO .fg-titolo nel file per vincere a parita' di specificita' (0-1-0 su entrambe). */ .fg-titolo--display { font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 1.75rem; letter-spacing: -0.01em; } .fg-sottotitolo { font-size: 1.1rem; font-weight: 600; color: var(--fg-nero); padding: 0; } /* Filetto sotto i titoli di sezione del SOLO Magazzino (giro 12, piano 21/07, intervento #6): verificato con grep che .fg-sottotitolo e' condiviso col portale ristoratori (legenda categoria vino + "Le cantine in carta"/"Vendite di fine serata"/"Nuovo ordine", portale/pagina.html) — toccare .fg-sottotitolo stesso avrebbe aggiunto il filetto anche li', effetto collaterale non richiesto. Classe dedicata, aggiunta SOLO in agenzia/magazzino.html accanto a .fg-sottotitolo (mai in sostituzione): stacco via bordo, stessa tinta calcolata --fg-bordo gia' in uso ovunque nel file. */ .fg-sottotitolo--sezione-magazzino { border-bottom: 1px solid var(--fg-bordo); padding-bottom: 0.35rem; } .fg-testo-secondario { color: var(--fg-testo-secondario); } .fg-testo-piccolo { font-size: 0.85rem; } /* --- Tab di sezione DENTRO una pagina (scheda cliente coi 4 tab, rifondazione IA ramo A — SPEC-FGA.md §4): ?tab=... in query string, MAI un tab JavaScript — ogni voce e' un vero (fga/ui/templates/agenzia/ clienti_dettaglio.html), la pagina resta un GET pieno navigabile senza JS, stesso principio dei link ?ricerca=/?salvato=1 gia' in uso altrove nell'app. Stesso linguaggio del contratto gia' scritto per la pagina corrente in .fg-nav__link[aria-current="page"] qui sopra: peso + filetto SUL NERO, MAI lo Scarlatto (riservato all'accento unico/CTA di vista — qui e' un indicatore di stato, non un'azione primaria). Vive dentro il contenuto della pagina (nero-su-bianco), non nella navbar sempre nera: colori invertiti rispetto a .fg-nav__link, stesso contratto semantico. */ .fg-tabs { border-bottom: 1px solid var(--fg-bordo); } .fg-tabs__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; } .fg-tabs__link { display: inline-block; padding: 0.5rem 0; color: var(--fg-testo-secondario); text-decoration: none; border-bottom: 2px solid transparent; } .fg-tabs__link:hover { color: var(--fg-nero); } .fg-tabs__link[aria-current="page"] { font-weight: 600; color: var(--fg-nero); border-bottom-color: var(--fg-nero); } .fg-fieldset { border: 1px solid var(--fg-bordo); border-radius: var(--fg-raggio); padding: 1rem; margin: 0; } /* --- Disclosure GDO (richiesta 2 di Giuseppe, 20/07: «un triangolino per ridurre» sul blocco GDO — per ora solo li', il resto della pagina si valuta a parte).
/ nativi, ZERO JavaScript (la CSP di questo portale e' default-src 'none'/script-src 'self': niente inline, e comunque non serve, il disclosure e' gia' nativo del browser). I campi dentro un
CHIUSO restano nel DOM e vengono comunque inviati col form (l'attributo `open` governa solo il rendering visivo, non la partecipazione al form — verificato con un test vero end-to-end, tests/api/test_ordini_agenzia_ui.py): mai un dato perso in silenzio. Stesso bordo/raggio di .fg-fieldset qui sopra (stesso linguaggio visivo degli altri riquadri della pagina), padding portato dentro .fg-details__summary/.fg-details__corpo cosi' che da CHIUSO il triangolino non "galleggi" staccato dal bordo con mezzo rettangolo vuoto sotto. Il summary NON e' scarlatto come le altre legend decorative di questa pagina (Righe/Modifica/il titolo pagina, tutte .fg-titolo): ora e' un comando cliccabile che cambia stato, non un titolo passivo — l'accento Scarlatto "vero" di questa vista resta sulla CTA primaria (.fg-btn--primario, "Salva modifiche"/"Crea ordine"), qui nero (si inverte da solo in tema scuro) per non moltiplicare l'accento su un controllo. */ .fg-details { border: 1px solid var(--fg-bordo); border-radius: var(--fg-raggio); margin: 0; } .fg-details__summary { cursor: pointer; font-weight: 600; color: var(--fg-nero); padding: 1rem; } /* Stesso anello di focus neutro del resto del portale (regola qui sopra su .fg-input/a/button): e' gia' focabile da tastiera per costruzione (contenuto interattivo nativo), qui solo la resa visiva. */ .fg-details__summary:focus-visible { outline: 2px solid var(--fg-nero); outline-offset: 2px; } .fg-details__corpo { display: flex; flex-direction: column; gap: 0.75rem; padding: 0 1rem 1rem; } .fg-tabella { width: 100%; border-collapse: collapse; } .fg-tabella th, .fg-tabella td { padding: 0.5rem 0.5rem; border-bottom: 1px solid var(--fg-bordo); text-align: left; vertical-align: middle; } .fg-tabella thead th { color: var(--fg-testo-secondario); font-weight: 600; font-size: 0.85rem; } /* Zebra + hover riga (giro 12, piano 21/07, intervento #4): tabelle con molte righe (storico movimenti, righe carta/ordine) erano un filetto 1px ripetuto senza alcuno stacco fra riga e riga — a colpo d'occhio indistinguibili. Tinte calcolate (non nuovi colori): --fg-superficie per lo zebra pari (stessa variabile del fondo header/superfici), nero a bassa opacita' su avorio per l'hover (stessa formula di .fg-riga--anomalia piu' sotto). Esclude esplicitamente .fg-riga--anomalia: la riga fattura non risolta deve restare l'UNICO segnale della tabella, zebra/hover non la devono annacquare. */ .fg-tabella tbody tr:nth-child(even):not(.fg-riga--anomalia) { background: var(--fg-superficie); } .fg-tabella tbody tr:hover:not(.fg-riga--anomalia) { background: color-mix(in srgb, var(--fg-nero) 8%, var(--fg-avorio)); } .fg-tabella tfoot th, .fg-tabella tfoot td { border-top: 2px solid var(--fg-nero); border-bottom: none; font-weight: 600; } /* Bug reale trovato in verifica (voce 10 del report 20/07): .fg-num da solo ha specificita' (0,1,0), PIU' BASSA di ".fg-tabella th, .fg-tabella td" qui sopra (0,1,1) — quella regola vinceva sempre e le colonne numeriche restavano allineate a sinistra nonostante la classe fg-num sulle celle. Fix: qualificare con .fg-tabella per superare quella specificita'; il selettore nudo resta come fallback per un eventuale fg-num fuori tabella. Contratto per gli altri: fg-num su
(Vino, Giacenza, poi — solo per il titolare — Prezzo, Rettifica, Vendute oggi, Ordina): nth-of-type(1) e' sempre Giacenza, (2)-(5) le colonne extra del titolare, stesso ordine del . Le micro-etichette inline "Vendute"/"Ordina" (span.fg-nota aria-hidden="true" accanto ai due input gemelli, gia' in pagina.html) si spengono qui sotto SOLO in questa vista: servivano a distinguere due input identici affiancati nella stessa riga desktop, ridondanti ora che ogni campo ha la sua etichetta di cella su una riga propria. Erano gia' invisibili alla lettura assistita (aria-hidden), quindi il display:none qui non toglie nulla in piu' li'. Accessibilita': il si nasconde SOLO visivamente (stesso pattern clip di .fg-sr-only sopra, non display:none) — resta nell'albero di accessibilita' per chi naviga il documento per intestazioni. Il testo generato via ::before pero' non e' garantito in ogni combinazione browser/screen reader (limite noto della tecnica, non specifico di questo file): la rete di sicurezza reale per i controlli restano i , la regola globale "a { text-decoration: underline }" rovinava l'aspetto a pillola. Solo estetico, nessun test rotto senza. */ a.fg-tag { text-decoration: none; } a.fg-tag:hover { filter: brightness(0.95); } /* Accento Scarlatto sul premio >=85/100 da testata-faro (Carta di CORE §4) in catalogo_scheda.html. Secondo canale già presente nel testo (glifo "★"), il filetto è rifinitura visiva, mai il colore da solo. */ .fg-cella--premio-evidenza { border-left: 3px solid var(--fg-scarlatto); font-weight: 600; padding-left: 0.5rem; } /* Slot allegato incasso (foto assegno/PDF contabile): input file nativo stilizzato a zona di rilascio, zero JS (CSP 'self'). Senza questa classe l' resta comunque valido, solo senza lo stile a zona di rilascio. */ .fg-file-drop { display: block; width: 100%; padding: 1.1rem 0.75rem; border: 1px dashed var(--fg-hairline-strong); border-radius: var(--fg-radius-control); background: var(--fg-surface-soft); color: var(--fg-slate); font-family: inherit; font-size: 0.9rem; cursor: pointer; } .fg-file-drop:hover { border-color: var(--fg-steel); } .fg-file-drop:focus-visible { outline: 2px solid var(--fg-nero); outline-offset: 2px; } .fg-file-drop::file-selector-button { font-family: inherit; font-weight: 600; border: 1px solid var(--fg-bordo); border-radius: var(--fg-radius-chip); padding: 0.3rem 0.7rem; margin-inline-end: 0.6rem; background: var(--fg-bianco); color: var(--fg-nero); cursor: pointer; } .fg-file-drop::file-selector-button:hover { background: var(--fg-surface); } /* --- GRAFICA-2 «le tendine» (critica di Giuseppe 21/07: "puoi fare di meglio specialmente nei dettagli, ad esempio le tendine") — mandato mixaggio 22/07 ----------------------------------------------------------- Prima di questo blocco appena rifinite. `::-webkit-calendar-picker-indicator{display:none}` toglie la SECONDA freccia nativa che Chrome/Edge disegnano di loro su un input con `list` (stesso pseudo-elemento di ) — senza questa riga si sarebbero viste due frecce sovrapposte. */ select.fg-input, input.fg-input[list] { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: var(--fg-superficie); background-image: url("/static/img/chevron-select.svg"); background-repeat: no-repeat; background-position: right 0.6rem center; background-size: 12px 12px; padding-right: 2.1rem; cursor: pointer; } input.fg-input[list] { /* Un campo testo con suggerimenti resta un campo testo: si digita, non si "apre" come una select — cursor:text (non pointer) e' il segnale corretto, la freccia da sola basta a dire "c'e' un elenco". */ cursor: text; } input.fg-input[list]::-webkit-calendar-picker-indicator { display: none; } /* Hover sobrio (stesso principio gia' dichiarato per .fg-btn--ghost/.fg-card piu' sopra: un segnale prima del click, tinta calcolata non un colore nuovo) + stato disabled leggibile: niente della resa "morta" di un controllo nativo disabilitato, lo stesso linguaggio di .fg-btn[disabled]. */ select.fg-input:hover:not(:disabled), input.fg-input[list]:hover:not(:disabled) { border-color: var(--fg-nero); } select.fg-input:disabled, input.fg-input[list]:disabled { opacity: 0.6; cursor: not-allowed; background-color: var(--fg-superficie); } /* Option leggibili (mandato grafica-2): sfondo/testo espliciti invece di ereditare il default del sistema operativo — Firefox rispetta questa regola sul popup nativo, Chrome/Safari la rispettano parzialmente (limite noto della piattaforma, non di questo foglio: il popup nativo di una
allinea l'header a destra come la colonna sottostante — non serve una classe separata per l'intestazione, e' la stessa da riusare (gia' cosi' in tutti i template esistenti). */ .fg-num, .fg-tabella .fg-num { text-align: right; } /* Regola brand: tabular-nums su prezzi/quantita'. */ .fg-tabnum { font-variant-numeric: tabular-nums; } .fg-vino { font-weight: 400; } .fg-nota { display: block; color: var(--fg-testo-secondario); font-size: 0.85rem; font-weight: 400; } /* Nota "Ultima modifica" contenuta nella cella, solo desktop (giro 12, piano 21/07, intervento #8): senza un vincolo di larghezza .fg-tabella non ha table-layout:fixed, quindi il layout automatico dimensiona la colonna Rettifica sulla riga di testo piu' larga (la nota e' una sola riga non spezzata, allineata a destra dal .fg-num del padre) — le righe CON nota diventavano visibilmente piu' alte/larghe di quelle senza. white-space:normal fa andare a capo la nota DENTRO la cella invece di allargare la colonna. Scoping via attribute-selector (td[id^="rett-cella-"]) sullo STESSO nodo che gli swap HTMX bersagliano (_rettifica_cella.html/_giacenza_riga.html, hx-swap="outerHTML"): il fix si applica da solo anche dopo lo swap, senza toccare quei due partial. Solo desktop: sotto 640px la cella diventa gia' display:block a piena larghezza (@media piu' sotto), il problema non esiste li'. */ @media (min-width: 641px) { .fg-tabella--carta td[id^="rett-cella-"] > .fg-nota { display: block; max-width: 11rem; margin-inline-start: auto; white-space: normal; text-align: right; } } .fg-input, .fg-textarea { font-family: inherit; border: 1px solid var(--fg-bordo); border-radius: var(--fg-raggio); padding: 0.35rem 0.5rem; background: var(--fg-superficie); color: var(--fg-nero); } .fg-input--num { width: 5rem; text-align: right; } .fg-textarea { width: 100%; resize: vertical; } /* Anello di focus (voce 20 del report 20/07): prima era scarlatto pieno e competeva con l'unico accento di vista delle CTA (contratto qui sopra). Ora e' nero/avorio (var(--fg-nero), si inverte da solo in tema scuro) — MAI il Grigio neutro della palette: su Avorio il Grigio #B2B9B8 non regge il contrasto minimo 3:1 richiesto da WCAG 2.2 (2.4.11 Focus Appearance) contro lo sfondo, oltre a essere gia' vietato come colore di dettaglio fine dalla Carta di CORE. Nero-su-avorio (o l'inverso in tema scuro) supera ampiamente quella soglia: contrasto e visibilita' non si sacrificano. 2px = spessore minimo AAA per l'area del focus indicator, "sottile" ma sempre visibile — le CTA restano scarlatte, cambia solo l'anello. */ .fg-input:focus, .fg-textarea:focus, a:focus-visible, button:focus-visible { outline: 2px solid var(--fg-nero); outline-offset: 2px; } .fg-form-inline { display: inline-flex; gap: 0.35rem; align-items: center; /* Residuo dichiarato nel checkpoint FGA: sotto ~340px (schede impilate, .fg-tabella--carta, content area ridotta al 58% dalla colonna-etichetta ::before) l'input numerico (.fg-input--num, 5rem) + il bottone "Aggiorna"/"Modifica" non ci stavano piu' sulla stessa riga e il bottone usciva dalla scheda. flex-wrap:wrap li impila in verticale appena servono, invariato ovunque il form ci sta gia' su una riga (nessuna larghezza minima cambiata, solo la possibilita' di andare a capo). */ flex-wrap: wrap; } /* --- Contratto CTA (mandato C1, voce 9 del report 20/07) --------------- Regola brand: UN SOLO Scarlatto per vista. Qui si dichiara il contratto, non si cambiano le classi nei template (lo fa la fase dopo: oggi alcune pagine hanno piu' bottoni scarlatti impilati, es. carta dettaglio "Salva dati carta" + "Modifica carta" — verra' corretto scegliendo quale dei due e' l'azione primaria di quella vista). .fg-btn--primario = Scarlatto. UNO per vista, mai due. E' l'azione che PORTA A TERMINE il compito della vista (conferma, salva, crea) — se una vista ha piu' bottoni che sembrano "primari", solo quello che chiude il compito resta primario, gli altri scendono a secondario o ghost. .fg-btn--secondario = Nero pieno. Azione di supporto: importante ma non quella che chiude il compito (es. "Modifica carta" quando "Salva dati carta" e' gia' il primario della stessa vista). .fg-btn--ghost = Trasparente/contorno. Azione di servizio: minore, di contesto (es. "Modifica" su una singola riga). Il focus ring (piu' sotto) e' SEMPRE nero, mai scarlatto: cosi' l'unico accento di vista resta il riempimento del bottone primario, non anche il suo anello di focus. */ .fg-btn { font-family: inherit; font-weight: 600; border-radius: var(--fg-raggio); padding: 0.5rem 1rem; border: 1px solid transparent; cursor: pointer; text-decoration: none; display: inline-block; } /* Colore letterale, NON var(--fg-avorio) (radar Kaizen, calcolato sugli hex dichiarati): lo Scarlatto NON si inverte mai fra i due temi (e' fisso, var(--fg-scarlatto) sempre #d62828), ma --fg-avorio SI' inverte in tema scuro (diventa #1c1714, vedi @media prefers-color-scheme:dark piu' in alto) — quindi con la variabile il testo del bottone primario diventava nero-su-scarlatto in dark, ~3,55:1, sotto il 4,5:1 minimo WCAG AA per testo normale. #faf7f0 fisso qui sopra da' ~4,68:1 in ENTRAMBI i temi (lo sfondo scarlatto non cambia mai): contrasto stabile, nessuna rinomina di variabili ne' cambio di semantica dei token (canone brand intatto, si ripara solo il contrasto). */ .fg-btn--primario { background: var(--fg-scarlatto); color: #faf7f0; } .fg-btn--secondario { background: var(--fg-nero); color: var(--fg-avorio); } .fg-btn--ghost { background: transparent; border-color: var(--fg-bordo); color: var(--fg-nero); padding: 0.35rem 0.6rem; font-weight: 400; } /* Stati :hover (giro 12, piano 21/07, intervento #5): nessuno dei 3 bottoni aveva un segnale al passaggio del mouse oltre cursor:pointer — zero feedback prima del click. Tinte calcolate via color-mix sugli stessi token del contratto CTA qui sopra (Scarlatto/Nero/bordo), non colori nuovi: 85% del colore proprio + 15% di nero scurisce leggermente il riempimento pieno (primario/secondario); il ghost, senza riempimento, prende il fondo neutro --fg-superficie + un bordo che si scurisce a nero. */ .fg-btn--primario:hover { background: color-mix(in srgb, var(--fg-scarlatto) 85%, var(--fg-nero)); } .fg-btn--secondario:hover { background: color-mix(in srgb, var(--fg-nero) 85%, var(--fg-avorio)); } .fg-btn--ghost:hover { background: var(--fg-superficie); border-color: var(--fg-nero); } .fg-btn[disabled] { opacity: 0.6; cursor: not-allowed; } .fg-cantine { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; } /* Canone Home firmato 21/07: card BIANCA, filetto sottile, angoli 12px — componente riusabile, non solo per l'hub Home (.fg-card--errore/ --conferma qui sotto ereditano lo stesso fondo/raggio, cambia solo lo spessore/colore del bordo, invariato). */ .fg-card { background: var(--fg-canvas); border: 1px solid var(--fg-hairline); border-radius: var(--fg-radius-card); padding: 1rem; transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease; /* Residuo dichiarato nel checkpoint FGA: sotto ~340px una tabella .fg-tabella "piena" (senza il trattamento responsive --carta, es. le giacenze/lo storico movimenti di agenzia/magazzino.html) non ha dove restringersi — il bottone "Aggiorna" della cella saldo usciva dal bordo della card invece di restare dentro. auto invece di visible: la card diventa lei stessa lo scroll-container orizzontale quando serve, nessun effetto quando il contenuto ci sta gia' (caso di gran lunga piu' comune: card KPI/Home, testo che va a capo). */ overflow-x: auto; } .fg-card:hover { background: var(--fg-surface); box-shadow: var(--fg-shadow-hover); } .fg-card__titolo { font-weight: 600; margin: 0 0 0.25rem; } .fg-card--errore { border-width: 2px; border-color: var(--fg-nero); } .fg-card--conferma { display: flex; flex-direction: column; gap: 0.5rem; border-width: 2px; border-color: var(--fg-nero); } /* Filetto 2px colorato PER FAMIGLIA (mockup Home, mappa dichiarata in fga/ui/templates/home.html): attributo data-famiglia sulla card, mai una classe in piu' da tenere sincronizzata a mano. Riusabile da ogni card futura (es. KPI di Statistiche) che porti lo stesso attributo. */ .fg-card[data-famiglia] { border-width: 2px; } .fg-card[data-famiglia="finanza"] { border-color: var(--fam-finanza); } .fg-card[data-famiglia="vendita"] { border-color: var(--fam-vendita); } .fg-card[data-famiglia="prodotto"] { border-color: var(--fam-prodotto); } .fg-card[data-famiglia="anagrafiche"] { border-color: var(--fam-anagrafiche); } .fg-card[data-famiglia="statistiche"] { border-color: var(--fam-statistiche); } .fg-card[data-famiglia="archivio"] { border-color: var(--fam-archivio); } /* Avvisi/conferme: MAI scarlatto su testo-corpo (regola del compito). Il colore resta nero; il significato passa da grassetto + glifo + parole, mai dalla tinta da sola (a11y: chi non distingue i colori legge lo stesso messaggio). */ .fg-avviso { color: var(--fg-nero); font-weight: 600; } .fg-avviso::before { content: "⚠ "; } .fg-conferma-ok { color: var(--fg-nero); font-weight: 600; } .fg-conferma-ok::before { content: "✓ "; } .fg-carrello__totale { font-size: 1.1rem; } .fg-htmx-indicatore { display: none; color: var(--fg-testo-secondario); } .htmx-request .fg-htmx-indicatore, .fg-htmx-indicatore.htmx-request { display: inline; } .fg-elenco-ordini { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; } /* Badge a pillola (giro 12, piano 21/07, intervento #2 — voci 16/17 del report frontend 20/07): prima era testo grigio nudo, senza bordo/sfondo, quasi invisibile rispetto a .fg-badge-ruolo che nella stessa app ha gia' un trattamento a pillola pieno e leggibile — qui si riusa lo STESSO linguaggio (bordo+sfondo --fg-bordo, gia' in uso, nessun colore nuovo). margin-left risolve voce 17 (l'etichetta "manuale" incollata al prezzo in agenzia/_carta_riga.html, senza spazio ne' margine nel markup originale): un solo intervento CSS copre tutti gli 8 punti d'uso di .fg-badge in un colpo solo, nessun template toccato. */ .fg-badge { display: inline-block; font-size: 0.8rem; font-weight: 600; padding: 0.15rem 0.55rem; margin-left: 0.4rem; border: 1px solid var(--fg-bordo); border-radius: 999px; color: var(--fg-nero); background: var(--fg-superficie); } /* Secondo canale sugli stati ordine (giro 12, piano 21/07, intervento #3): "Stato" era sempre testo piatto, indistinguibile a colpo d'occhio dalle altre colonne — nessun colore nuovo, il canale in piu' e' un glifo generato via CSS da un attributo dato (data-stato), stesso principio "significato mai al solo colore" gia' applicato a .fg-avviso/ .fg-conferma-ok/.fg-cella--anomalia in questo file. I 4 stati sono quelli reali del modello (fga/db/models/portale.py). */ .fg-badge[data-stato="Inviato"]::before { content: "→ "; } .fg-badge[data-stato="Confermato"]::before { content: "✓ "; } .fg-badge[data-stato="Consegnato"]::before { content: "✓ "; } .fg-badge[data-stato="Annullato"]::before { content: "✕ "; } .fg-tabnum--errore { color: var(--fg-nero); font-weight: 600; } .fg-tabnum--errore::before { content: "⚠ "; } /* Riga anteprima fattura con articolo non risolto: indicatore visivo a colpo d'occhio (finding UX). Sfondo tinta calcolata (non un colore nuovo) + glifo/peso sulla cella interessata — mai lo scarlatto su testo-corpo, mai il colore come unico canale di significato (a11y, stesso canone di fg-avviso/fg-tabnum--errore qui sopra). */ .fg-riga--anomalia { background: color-mix(in srgb, var(--fg-nero) 6%, var(--fg-superficie)); } .fg-cella--anomalia { color: var(--fg-nero); font-weight: 600; } .fg-cella--anomalia::before { content: "⚠ "; } .fg-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --- Login / logout (F-auth) ------------------------------------------- */ .fg-login { max-width: 24rem; } .fg-form-login { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 1rem; } .fg-campo { display: flex; flex-direction: column; gap: 0.3rem; } /* Alert d'errore: filetto scarlatto (unico accento), testo in nero leggibile (lo scarlatto non fa mai da testo-corpo, canone brand). */ .fg-errore { border-left: 3px solid var(--fg-scarlatto); padding: 0.5rem 0.75rem; background: var(--fg-superficie); color: var(--fg-nero); border-radius: var(--fg-raggio); } /* Stato nascosto di default (sostituisce style="display:none" inline: la CSP style-src 'self', senza 'unsafe-inline', blocca l'attributo style="" in markup — verificato a runtime con Chrome headless, screenshot alla mano. JS che tocca .style.display via CSSOM invece NON e' toccato dalla CSP (stessa verifica): upload-tetto.js continua a funzionare invariato). */ .fg-nascosto { display: none; } /* Il form di logout nella navbar non deve spezzare la riga dei link. */ .fg-logout { display: inline; margin: 0; } /* --- Nav comune + HOME hub (mandato R1, 20/07) ------------------------- Il marchio "Fine Goods" nell'header e' ora un link alla HOME: stesso stile del testo fisso di prima (scarlatto, 600, ereditato da .fg-header__marchio piu' sopra), solo senza la sottolineatura di default di un . Regola additiva: la dichiarazione esistente NON viene toccata, qui solo un override mirato sul comportamento da link. */ a.fg-header__marchio { text-decoration: none; } /* Nav condivisa (_nav.html, inclusa da base.html e agenzia/_layout.html): fascia SOTTO l'header, trattata come la stessa "fascia scura" dell'header (canone Home firmato 21/07: navbar sempre nera) — .fg-nav-wrap porta il fondo/bordo a piena larghezza, .fg-nav centra il contenuto sullo stesso max-width di .fg-main (70rem) cosi' testata e corpo pagina si allineano. flex-wrap su .fg-nav__lista regge il mobile 390px andando a capo invece di generare scroll orizzontale — nessun @media dedicato, stesso pattern gia' in uso da .fg-header. */ .fg-nav-wrap { background: var(--fg-nero); border-bottom: 1px solid rgba(250, 247, 240, 0.14); } .fg-nav { max-width: 70rem; margin: 0 auto; padding: 0.5rem 1.5rem; } .fg-nav__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 1.25rem; } .fg-nav__link { display: inline-block; padding: 0.15rem 0; color: var(--fg-avorio-72); text-decoration: none; border-bottom: 2px solid transparent; } .fg-nav__link:hover { color: var(--fg-avorio); } /* Pagina corrente: peso + filetto, MAI lo scarlatto (riservato all'accento unico/CTA di vista — qui non e' un'azione primaria, e' un indicatore di stato). Stesso principio "significato mai al solo colore" del resto del foglio: il peso del font porta il significato quanto il filetto. */ .fg-nav__link[aria-current="page"] { font-weight: 600; color: var(--fg-avorio); border-bottom-color: var(--fg-avorio); } /* Griglia card HOME: stesso pattern a griglia responsiva di .fg-cantine piu' sopra (auto-fill, minmax), qui con una card cliccabile intera (titolo + descrizione) invece di un elenco testuale. */ /* max-width (giro 12, piano 21/07, intervento #7): auto-fill senza un tetto di larghezza distanzia le card su schermi larghi finche' l'ultima riga resta con una sola card sperduta accanto a colonne vuote (5 card staff -> 4+1 su desktop largo: la card orfana legge come un layout rotto, non intenzionale). 54rem tiene 3 colonne piene ovunque le card ci stiano (5 card -> 3+2, mai 4+1): stessa minmax(16rem,1fr) di prima, cambia solo il tetto del contenitore. */ .fg-home-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; max-width: 54rem; } /* .fg-home-card si applica INSIEME a .fg-card (bordo/padding/raggio gia' definiti piu' sopra): qui solo cio' che serve per farne un link a blocco pulito (mai il blu/sottolineato di default di un , il colore resta ereditato dal testo nero circostante). */ .fg-home-card { display: flex; flex-direction: column; gap: 0.35rem; text-decoration: none; color: inherit; } .fg-home-card:hover, .fg-home-card:focus-visible { border-color: var(--fg-nero); } .fg-home-card__titolo { font-weight: 600; color: var(--fg-nero); } .fg-home-card__descrizione { color: var(--fg-steel); font-size: 0.9rem; } /* --- Carta vini responsiva: schede impilate su mobile (mandato M1-A, decisione Giuseppe via AUQ, 2026-07-20) -------------------------------- Il problema (eletto "la cosa sola" da due lenti critiche indipendenti, report frontend 20/07): a 390px la tabella della carta mostra Vino, Giacenza, Prezzo, Rettifica — "Vendute oggi" e soprattutto "Ordina" finiscono oltre il bordo del fieldset, con lo scroll orizzontale invisibile a riposo su iOS. "Ordina" e' il compito primario del ristoratore, sul suo dispositivo vero (in piedi, in sala, una mano sola). Soglia 640px, scelta nel range 600-720px indicato dal compito: copre con margine ogni telefono in verticale di oggi (iPhone 14/15 390px, i Pro Max 430px, Android medi 360-428px) restando sotto un iPad in verticale (768px, che resta tabella) — la stessa soglia "sm" di molti design system, usata qui per la stessa ragione: separa "telefono in mano" da "tablet/desktop appoggiato". Scoping a .fg-tabella--carta (SOLO la tabella della carta vini in portale/pagina.html — stesso pattern di modificatore gia' in uso per .fg-tabella--carrello in _carrello.html): .fg-tabella nudo resta la tabella di agenzia-ordini/fatture (12 colonne, altro file-set, fuori da questo mandato) — zero effetti collaterali li'. La STRUTTURA resta table/thead/tbody/tr/th/td (obbligatorio: gli swap HTMX mirano a id precisi su questi stessi tag — vedi _giacenza_riga.html, _rettifica_cella.html, _qta_input.html, _giacenze_oob.html; cambiare tag romperebbe ogni hx-target). Cambia SOLO la presentazione via CSS in un file 'self' (CSP style-src invariata: nessuno style="" inline nel markup, content: attr()/stringa qui e' CSS puro). Etichette per cella via ::before posizionale (nth-of-type), non un attributo data-label sul markup: la cella "Rettifica" e' l'unico emesso da un frammento fuori dal file-set di oggi (_rettifica_cella.html, altro proprietario) — i selettori posizionali qui la etichettano lo stesso senza toccare quel file. L'ordine colonne e' fisso e condiviso col