/* ===================================================================== * LG231 Agile — White-label hooks (per-tenant, AGID-conforme) * --------------------------------------------------------------------- * Strato di CSS custom properties che il MOTORE white-label (v2-theme.js) * sovrascrive a runtime per il tenant attivo. Qui definiamo: * * 1. Le variabili "ponte" del white-label (--lg231-wl-*), con default * = Navy istituzionale LG231 #1B3A6B. * 2. Il cablaggio di queste variabili sui token UFFICIALI di Bootstrap * Italia (--bs-primary, --bs-primary-rgb, --primary) e sugli hook * cromatici dei componenti istituzionali (header AGID). * * PERIMETRO AGID (recon): * - Si personalizza SOLO il COLORE (token primary + sfondo header) e gli * asset di brand (logo/denominazione, gestiti via DOM da v2-theme.js). * - NON si tocca: tipografia (Titillium Web), spaziature/griglia, scala * dimensionale, struttura/markup dei componenti, focus ring. Questo * file NON ridefinisce margin/padding/font-* dei componenti BI. * - Tutti gli override passano dai TOKEN documentati: nessun fork della * libreria, nessuna modifica ai file di Bootstrap Italia 2.15.0. * * CONTRASTO (WCAG 2.1 AA — L.4/2004): * Il valore di --lg231-wl-primary applicato a runtime è SEMPRE validato * da v2-theme.js (testo bianco su primary >= 4.5:1 e primary su sfondo * chiaro >= 3:1). Se il colore del tenant fallisce, il motore NON scrive * queste variabili e si resta sul default Navy qui sotto (fail-closed). * * ORDINE DI CARICAMENTO ATTESO (in index.html, gestito dallo stream shell): * bootstrap-italia.min.css → lg231-theme.css → whitelabel.css * così questo strato vince come "ultima parola" sui token brand. * ===================================================================== */ :root { /* ----------------------------------------------------------------- * 1) Variabili-ponte del white-label. * Default = Navy LG231. v2-theme.js le sovrascrive SOLO se il * primary del tenant supera il guard contrasto AA. * ----------------------------------------------------------------- */ --lg231-wl-primary: #1B3A6B; /* colore PRIMARY del tenant */ --lg231-wl-primary-rgb: 27, 58, 107; --lg231-wl-primary-dark: #0F2547; /* derivato per hover/active/header scuro */ --lg231-wl-primary-rgb-dark: 15, 37, 71; /* ----------------------------------------------------------------- * 2) Cablaggio sui token UFFICIALI Bootstrap Italia / Bootstrap 5. * Sono i token documentati che la libreria legge a runtime: li * leghiamo alle variabili-ponte così un solo set di valori (scritto * da v2-theme.js) ri-tinge l'intero design system senza fork. * ----------------------------------------------------------------- */ --bs-primary: var(--lg231-wl-primary); --bs-primary-rgb: var(--lg231-wl-primary-rgb); --primary: var(--lg231-wl-primary); } /* --------------------------------------------------------------------- * 3) Header istituzionale AGID — hook cromatico. * AGID consente la personalizzazione del COLORE di sfondo dell'header * (purché il contrasto testo/sfondo resti AA); NON consente di alterare * struttura o markup del componente it-header-*. Qui ri-tinge SOLO lo * sfondo, ereditando dal primary del tenant. * NB: il testo dell'header resta bianco; il guard AA di v2-theme.js * garantisce bianco-su-primary >= 4.5:1, quindi il contrasto è valido. * --------------------------------------------------------------------- */ .it-header-slim-wrapper { /* riga ente: variante scura del primary */ background-color: var(--lg231-wl-primary-dark); } .it-header-center-wrapper, .it-header-navbar-wrapper { /* riga brand + navbar azioni: primary pieno del tenant. * NB: .it-header-navbar-wrapper è il markup AGID della navbar-azioni che * lo stream shell aggiunge a index.html (slim + center già presenti). La * regola è un hook cromatico forward-compat: NO-OP innocuo finché il nodo * non esiste, si attiva automaticamente quando lo shell aggiunge la navbar. * NON introduce override strutturali, solo background-color (consentito AGID). */ background-color: var(--lg231-wl-primary); } /* --------------------------------------------------------------------- * 4) Bottoni primary — stati hover/active sul dark derivato. * Riusa gli stessi token --bs-btn-* di Bootstrap (no override di * geometria: solo colore). Coerente con lg231-theme.css ma legato * alle variabili white-label per il per-tenant. * --------------------------------------------------------------------- */ .btn-primary { --bs-btn-bg: var(--lg231-wl-primary); --bs-btn-border-color: var(--lg231-wl-primary); --bs-btn-hover-bg: var(--lg231-wl-primary-dark); --bs-btn-hover-border-color: var(--lg231-wl-primary-dark); --bs-btn-active-bg: var(--lg231-wl-primary-dark); --bs-btn-active-border-color:var(--lg231-wl-primary-dark); --bs-btn-disabled-bg: var(--lg231-wl-primary); --bs-btn-disabled-border-color: var(--lg231-wl-primary); } .btn-outline-primary { --bs-btn-color: var(--lg231-wl-primary); --bs-btn-border-color: var(--lg231-wl-primary); --bs-btn-hover-bg: var(--lg231-wl-primary); --bs-btn-hover-border-color: var(--lg231-wl-primary); --bs-btn-active-bg: var(--lg231-wl-primary); --bs-btn-active-border-color:var(--lg231-wl-primary); } /* --------------------------------------------------------------------- * 5) Accenti testuali / utility — legati al primary del tenant. * (Solo colore; nessuna modifica strutturale.) * --------------------------------------------------------------------- */ .text-primary { color: var(--lg231-wl-primary) !important; } .bg-primary { background-color: var(--lg231-wl-primary) !important; } .border-primary { border-color: var(--lg231-wl-primary) !important; } a, .link-primary { color: var(--lg231-wl-primary); } a:hover { color: var(--lg231-wl-primary-dark); } /* Focus ring conforme AGID: si ri-tinge ma NON si rimuove l'outline. */ .form-control:focus, .form-select:focus { border-color: var(--lg231-wl-primary); box-shadow: 0 0 0 0.2rem rgba(var(--lg231-wl-primary-rgb), 0.25); } /* --------------------------------------------------------------------- * 6) Hook brand-asset (logo / denominazione). * Il DOM di logo e denominazione è gestito da v2-theme.js (img + testo * nell'header). Qui solo regole di presentazione del logo, senza * toccare la struttura del componente it-brand-wrapper. * --------------------------------------------------------------------- */ .lg231-wl-logo { max-height: 40px; width: auto; display: inline-block; vertical-align: middle; } /* --------------------------------------------------------------------- * 7) Stato di FALLBACK visibile (debug/QA). * v2-theme.js aggiunge data-lg231-wl="fallback" sull' quando il * colore del tenant è stato rifiutato dal guard contrasto. In quel caso * restano i default Navy (questa regola è puramente diagnostica e NON * altera il layout). Toglie ogni dubbio in fase di test su quale tenant * abbia subìto il fallback. * --------------------------------------------------------------------- */ [data-lg231-wl="fallback"] .lg231-wl-fallback-note { display: inline-block; } .lg231-wl-fallback-note { display: none; }