@import url("standardColorPortale.css");
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap");
/* ============================================================
PERSONALIZZAZIONE COLORI — PORTALE LIGHT
============================================================
File per cliente: uno per ciascun client (es. UA, XYZ, ...).
STRUTTURA:
SEZIONE A — Colori brand → modificare per ogni cliente
SEZIONE B — Regole componenti → non toccare, si auto-adatta
SEZIONE C — Override cliente UA → personalizzazioni specifiche UA
COME PERSONALIZZARE UN NUOVO CLIENTE:
1. Modificare i valori nel LIVELLO 1 della Sezione A (obbligatorio).
2. Se un elemento specifico deve avere un colore diverso
dagli altri, decommentare la riga nel LIVELLO 2 della Sezione A.
3. Non modificare la Sezione B.
4. Aggiungere override specifici del cliente SOLO nella Sezione C.
NOTA TECNICA — box-shadow focus:
I ring di focus definiti in questo file usano color-mix() e si
aggiornano automaticamente al cambio di --brand-primary.
Le variabili --brand-primary-r/g/b rimangono per compatibilità
Bootstrap Italia: aggiornarle sempre insieme a --brand-primary.
============================================================ */
/* ============================================================
SEZIONE A — COLORI BRAND
============================================================
L'UNICA sezione da modificare per personalizzare il portale.
============================================================ */
:root {
/* ----------------------------------------------------------
LIVELLO 1 — PALETTE BASE (obbligatorio)
Modificare questi valori. Il 90% delle personalizzazioni
si risolve qui senza toccare altro.
---------------------------------------------------------- */
/*
COLORE PRINCIPALE del cliente.
Dove appare: pulsante "Accedi" e pulsanti primari globali,
tab "Forniture"/"Servizi" attiva nella griglia, link breadcrumb
"Portale acquisti", bordo input al focus, badge Bootstrap.
*/
--brand-primary: #1a5276;
/*
Scomposizione RGB di --brand-primary.
!! AGGIORNARE SEMPRE INSIEME AL VALORE HEX SOPRA !!
Esempio: #1a5276 → r:26, g:82, b:118
PERCHÉ ESISTONO: compatibilità Bootstrap Italia — questi valori
alimentano DUE variabili BS che non accettano HEX:
- --bs-primary-rgb (badge, ring, componenti BI)
- --bs-btn-focus-shadow-rgb (ring focus pulsanti Bootstrap)
I box-shadow espliciti in questo file usano color-mix() e NON
dipendono da questi canali — si aggiornano automaticamente.
WCAG — ATTENZIONE: se si cambia --brand-primary aggiornare
OBBLIGATORIAMENTE anche questi tre valori, altrimenti i ring
focus generati da Bootstrap (non dai nostri override) useranno
il colore sbagliato, compromettendo la conformità WCAG 2.1 §2.4.7.
*/
--brand-primary-r: 26;
--brand-primary-g: 82;
--brand-primary-b: 118;
/*
TONO SCURO del primario (circa 15-20% più scuro).
Dove appare: sfondo pulsanti al hover, colore link al hover,
sfondo pulsanti A+/A-/Ripristina al hover nell'header.
Regola pratica: usare una tinta del primario,
non un colore completamente diverso.
*/
--brand-primary-dark: #0053a6;
/*
TONO MOLTO SCURO del primario (circa 30-40% più scuro).
Dove appare: stato active/pressed dei pulsanti primari,
sfondo voci menu sidebar "Area Pubblica" se non personalizzato
nel Livello 2 (--brand-menu-btn-bg).
*/
--brand-primary-darker: #2d2c57;
/*
TESTO SU SFONDI COLORATI.
Dove appare: testo di tutti i pulsanti colorati (Accedi,
Filtra, voci menu, ...), testo nella barra header.
Quasi sempre bianco. Cambiare SOLO se il primario è
molto chiaro (es. giallo pastello) e il bianco non è
leggibile.
*/
--brand-text-on-primary: #ffffff;
/*
SFONDO DELLA BARRA HEADER in cima alla pagina.
Dove appare: barra orizzontale con il logo del cliente.
Può essere il primario, un tono più scuro, o bianco.
ATTENZIONE: se questo colore è chiaro (es. bianco),
i pulsanti A+/A-/Ripristina (testo bianco) diventeranno
invisibili. In quel caso sovrascrivere la regola
".it-header-center-wrapper .btn-outline-light" in fondo.
*/
--brand-header-bg: #fff;
/* ── fine LIVELLO 1 ──────────────────────────────────── */
/* ----------------------------------------------------------
LIVELLO 2 — FINE-TUNING ELEMENTI SPECIFICI (opzionale)
Di default ogni elemento usa i valori del Livello 1.
Decommentare e modificare UNA RIGA ALLA VOLTA solo se
quell'elemento specifico deve avere un colore diverso
dagli altri. Lasciare commentato = comportamento corretto.
Formato commento per ogni variabile:
Dove appare → Cosa succede se modifichi → Default usato
---------------------------------------------------------- */
/*
--brand-main-container-bg: var(--brand-primary);
Dove appare: sfondo del contenitore centrale della pagina (#main),
l'area principale a destra della sidebar.
Se modifichi: cambia il colore di sfondo dell'intera area contenuto.
Attenzione: usare un colore con sufficiente contrasto rispetto al
testo della pagina (WCAG AA richiede rapporto ≥ 4.5:1).
Default: var(--brand-primary)
*/
--brand-main-container-bg: #ffffff;
/*
--brand-menu-btn-bg: #234E73;
Dove appare: sfondo delle voci NON ATTIVE del menu "Area
Pubblica" nella sidebar (i pulsanti di navigazione Home/Bandi di gara).
Se modifichi: cambia il colore di sfondo di quelle voci,
il testo rimane sempre --brand-text-on-primary (bianco).
Default: var(--brand-primary-darker) = #2d2c57
*/
--brand-menu-btn-bg: var(--brand-primary);
/*
--brand-h3-color: #0066CC;
Dove appare: titoli "Area Pubblica" e "Area Privata" nella
sidebar (i testi h3 che separano le sezioni menu).
Se modifichi: cambia solo il colore di quei due titoli.
Default: var(--brand-primary-dark) = #0053a6
*/
--brand-h3-color: #355295;
/*
--brand-login-btn-bg: #1a5276;
Dove appare: sfondo NORMALE del pulsante "Accedi" e SSO
nel form di login nell'Area Privata della sidebar.
Default: var(--brand-primary) = #1a5276
*/
/* --brand-login-btn-bg: #1a5276; */
/*
--brand-login-btn-hover-bg: #0053a6;
Dove appare: sfondo del pulsante "Accedi" al HOVER/FOCUS.
Necessario perché la regola scoped form#login ha specificità
più alta del hover globale e lo sovrascrirebbe senza questo.
Default: var(--brand-primary-dark) = #0053a6
*/
/* --brand-login-btn-hover-bg: #0053a6; */
--brand-filter-header-bg: #0a5496;
/*
Dove appare: sfondo dell'intestazione dell'accordion "Filtri"
nella griglia bandi (la barra colorata con scritto "Filtri").
Default: var(--brand-primary-darker) = #2d2c57
*/
/* --brand-filter-header-bg: #2d2c57; */
/*
--brand-filter-btn-bg: #1a5276;
Dove appare: sfondo NORMALE del pulsante "Filtra"
nell'accordion filtri bandi.
Default: var(--brand-primary) = #1a5276
*/
/* --brand-filter-btn-bg: #1a5276; */
/*
--brand-filter-btn-hover-bg: #0053a6;
Dove appare: sfondo del pulsante "Filtra" al HOVER/FOCUS.
Necessario per lo stesso motivo di --brand-login-btn-hover-bg:
la regola scoped ha specificità più alta del hover globale.
Default: var(--brand-primary-dark) = #0053a6
*/
/* --brand-filter-btn-hover-bg: #0053a6; */
/*
--brand-filter-outline-color: #1a5276;
Dove appare: pulsante "Pulisci" nell'accordion filtri bandi.
È un pulsante OUTLINE VERO: sfondo trasparente, solo bordo
e testo colorati. Hover: sfondo pieno con testo bianco.
Default: var(--brand-primary) = #1a5276
*/
/* --brand-filter-outline-color: #1a5276; */
/*
--brand-menu-hover-border: #0053a6;
Dove appare: bordo sinistro colorato che compare al passaggio
del mouse sulle voci del menu "Area Pubblica" nella sidebar.
È un effetto visivo di highlight laterale.
Default: var(--brand-primary-dark) = #0053a6
*/
/* --brand-menu-hover-border: #0053a6; */
--brand-nav-bg: #0a5496;
/*
Dove appare: sfondo del contenitore principale della griglia
bandi (#nav_container), che racchiude le tab Forniture/Servizi
e la griglia dati sottostante.
Di default trasparente (eredita lo sfondo della pagina).
Default: transparent
*/
/* --brand-nav-bg: var(--brand-primary); */
/*
--brand-nav-pills-bg: #f8f9fa;
Dove appare: sfondo della barra con le tab Forniture/Servizi
(#nav_grid_bandi), separato dallo sfondo del contenitore
esterno. Utile se si vuole sfondo diverso tra la barra tab
e il resto del contenitore.
Di default trasparente (eredita da #nav_container).
Default: transparent
*/
--brand-nav-pills-bg: var(--brand-nav-bg);
/*
--brand-nav-link-color: #6c757d;
Dove appare: testo delle tab NON ATTIVE nella barra
di navigazione (es. "Forniture", "Servizi") nella griglia bandi.
Default: #6c757d (grigio neutro Bootstrap)
*/
--brand-nav-link-color: var(--brand-text-on-primary);
/*
--brand-nav-link-hover-color: #1a5276;
Dove appare: colore testo delle tab al passaggio del mouse
(stato hover). Solo il testo cambia, lo sfondo rimane
trasparente durante l'hover.
Default: var(--brand-primary)
*/
--brand-nav-link-hover-color: var(--brand-text-on-primary);
/*
--brand-nav-link-active-bg: #1a5276;
Dove appare: sfondo della tab ATTIVA (quella selezionata,
es. "Forniture" quando si è nella vista Forniture).
Default: var(--brand-primary)
*/
--brand-nav-link-active-bg: #d02850;
/*
--brand-nav-link-active-color: #ffffff;
Dove appare: testo della tab ATTIVA.
Default: var(--brand-text-on-primary) = bianco
*/
/* --brand-nav-link-active-color: var(--brand-text-on-primary); */
/*
--brand-grid-header-bg: #f3f4f6;
Dove appare: sfondo delle celle intestazione della griglia
(riga con i nomi delle colonne: Oggetto, Ente, Scadenza, ...).
Default: #f3f4f6 (grigio chiarissimo)
*/
--brand-grid-header-bg: #666;
/*
--brand-grid-header-text: (colore Bootstrap secondary);
Dove appare: testo delle celle intestazione della griglia.
NOTA TECNICA: in Portale.css il testo usa var(--bs-secondary)
con !important, non la variabile --gm-header-txt (che esiste
ma non viene usata). Questa var sovrascrive correttamente.
Default: var(--bs-secondary) = grigio scuro Bootstrap
*/
--brand-grid-header-text: var(--brand-text-on-primary);
/*
--brand-btn-stampa-bg: ...;
Dove appare: sfondo del pulsante "Stampa" accanto alle
tab Forniture/Servizi nella barra #nav_container.
Default: var(--bs-body-bg) = bianco/sfondo pagina Bootstrap
*/
/* --brand-btn-stampa-bg: var(--bs-body-bg); */
/*
--brand-btn-stampa-color: ...;
Dove appare: colore testo/icona del pulsante "Stampa".
Default: var(--bs-secondary) = grigio Bootstrap
*/
/* --brand-btn-stampa-color: var(--bs-secondary); */
/*
--brand-btn-stampa-hover-bg: ...;
Dove appare: sfondo del pulsante "Stampa" al hover.
Default: var(--bs-tertiary-bg) = grigio chiaro Bootstrap
*/
--brand-btn-stampa-hover-bg: var(--brand-primary-darker);
/*
--brand-btn-stampa-hover-color: ...;
Dove appare: colore testo/icona del pulsante "Stampa" al hover.
Default: var(--bs-body-color) = testo scuro Bootstrap
*/
--brand-btn-stampa-hover-color: var(--brand-text-on-primary);
/*
--brand-sidebar-bg: ...;
Dove appare: sfondo dell'intera area sidebar (#sidebar-area),
che contiene il menu "Area Pubblica", il form di login
"Area Privata" e i link di navigazione.
Di default trasparente (eredita lo sfondo della pagina).
Default: transparent
*/
--brand-sidebar-bg: #ffffff;
/*
--brand-footer-bg: #2d2c57;
Dove appare: sfondo della barra inferiore del footer
(.site-footer__bottom, Sezione C5).
Se modifichi: cambia solo lo sfondo del footer. Il testo usa
--brand-text-on-primary (bianco): con sfondi chiari aggiornare
anche "color" in C5 (WCAG AA ≥ 4.5:1).
Default: var(--brand-primary-darker) = #2d2c57
*/
--brand-footer-bg: #2d2c57;
}
/* ── fine SEZIONE A ──────────────────────────────────────── */
/* ============================================================
SEZIONE B — REGOLE COMPONENTI (inizio)
============================================================
Non modificare questa sezione.
Le regole leggono automaticamente i valori dalla Sezione A
tramite CSS custom properties (var()).
Per override avanzati non coperti dal Livello 2:
aggiungere regole DOPO questa sezione, in fondo al file,
usando i selettori DOM del portale come ancore di zona.
============================================================ */
/* ============================================================
CONTRATTO SELETTORI ID — mappa DOM <> CSS
============================================================
Questa sezione usa selettori ID per agganciarsi a elementi
specifici del portale. Gli ID NON sono attributi statici in
HTML ma CONTRATTI tra JavaScript e CSS: cambiarli richiede
un aggiornamento coordinato su più file.
ATTENZIONE: PRIMA DI RINOMINARE UN ID verificare TUTTE le sorgenti
elencate qui sotto, altrimenti il tema si rompe in silenzio.
ID | Tipo | Sorgente
─────────────────────────┼─────────┼──────────────────────────────────────────
#collapseFilter | JS gen | domToolbox.js, pageGenerator.js,
| | fles_base.js, fvoe_richiesta_accesso.js,
| | PortaleLight/Portale.js
#headingFilter | JS gen | (stesso gruppo di #collapseFilter)
#nav_container | JS gen | PortaleLight/Portale.js
#nav_grid_bandi | JS gen | PortaleLight/Portale.js:1006
#sidebar_area_pubblica | HTML | Pages/Portale/INC/layoutNew.cshtml:451
#sidebar-area | HTML | Pages/Portale/INC/layoutNew.cshtml:408
#btnStampa | JS gen | PortaleLight/Portale.js:1064
#main | HTML | Pages/Portale/INC/layout.cshtml:459
| | Pages/Portale/INC/layoutNew.cshtml:777,1098
============================================================ */
/* ==============================================================
Bootstrap Italia — ricablaggio variabili primarie
Tutti i componenti BI che leggono --bs-primary si adattano
automaticamente (badge, ring, componenti form, ecc.).
============================================================== */
:root {
--bs-primary: var(--brand-primary);
--bs-primary-rgb: var(--brand-primary-r), var(--brand-primary-g), var(--brand-primary-b);
}
/* ==============================================================
HEADER — barra superiore con logo e pulsanti accessibilità
============================================================== */
/* Sfondo barra header (logo cliente + pulsanti A+/A-/Ripristina) */
.it-header-center-wrapper {
background-color: var(--brand-header-bg);
position: relative;
}
/*
Pulsanti A+ / A- / Ripristina nella barra header.
Usano overlay bianchi semi-trasparenti assumendo sfondo SCURO.
Se --brand-header-bg è chiaro (es. bianco), questi pulsanti
non saranno visibili. In quel caso aggiungere un override
in fondo al file che imposta color/border-color espliciti.
*/
.it-header-center-wrapper .btn-outline-light {
--bs-btn-color: var(--brand-text-on-primary);
--bs-btn-border-color: rgba(255, 255, 255, 0.7);
--bs-btn-hover-bg: rgba(255, 255, 255, 0.15);
--bs-btn-hover-border-color: var(--brand-text-on-primary);
--bs-btn-hover-color: var(--brand-text-on-primary);
--bs-btn-active-bg: rgba(255, 255, 255, 0.25);
--bs-btn-active-border-color: var(--brand-text-on-primary);
--bs-btn-active-color: var(--brand-text-on-primary);
color: var(--brand-text-on-primary);
border-color: rgba(255, 255, 255, 0.7);
}
.it-header-center-wrapper .btn-outline-light:hover {
background-color: rgba(255, 255, 255, 0.15);
border-color: var(--brand-text-on-primary);
color: var(--brand-text-on-primary);
}
.it-header-center-wrapper .btn-outline-light:focus,
.it-header-center-wrapper .btn-outline-light:focus-visible {
box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.4);
}
.it-header-center-wrapper .btn-outline-light:not(:disabled):not(.disabled):active,
.it-header-center-wrapper .btn-outline-light:not(:disabled):not(.disabled).active {
background-color: rgba(255, 255, 255, 0.25);
border-color: var(--brand-text-on-primary);
color: var(--brand-text-on-primary);
}
/* ==============================================================
LINK PRIMARI — breadcrumb "Portale acquisti" e link brand
============================================================== */
a.link-primary,
.link-primary {
color: var(--brand-primary) !important;
}
a.link-primary:hover,
.link-primary:hover {
color: var(--brand-primary-dark) !important;
}
/* ==============================================================
TESTI E BORDI — classi Bootstrap Italia
============================================================== */
/* Testi con classe text-primary (badge, alerts, etichette) */
.text-primary {
color: var(--brand-primary) !important;
}
/*
Titoli h3 con classe text-primary: sezioni "Area Pubblica"
e "Area Privata" nella sidebar.
Usa --brand-h3-color se definito nel Livello 2,
altrimenti ricade su --brand-primary-dark come default.
*/
h3.text-primary {
color: var(--brand-h3-color, var(--brand-primary-dark)) !important;
text-decoration: underline;
}
/* Bordi con classe border-primary */
.border-primary {
border-color: var(--brand-primary) !important;
}
/* ==============================================================
INPUT FORM — stato focus (tutti i form-control del portale)
============================================================== */
.form-control:focus {
border-color: var(--brand-primary) !important;
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand-primary) 25%, transparent) !important;
}
/* ==============================================================
btn-primary — GLOBALE (tutti gli stati)
============================================================
Si applica a qualunque .btn-primary nel portale.
Le zone specifiche (login, filtri) sovrascrivono solo
il colore base più sotto; hover/active rimangono questi.
============================================================== */
.btn-primary {
--bs-btn-bg: var(--brand-primary);
--bs-btn-border-color: var(--brand-primary);
--bs-btn-color: var(--brand-text-on-primary);
--bs-btn-hover-bg: var(--brand-primary-dark);
--bs-btn-hover-border-color: var(--brand-primary-dark);
--bs-btn-hover-color: var(--brand-text-on-primary);
--bs-btn-active-bg: var(--brand-primary-darker);
--bs-btn-active-border-color: var(--brand-primary-darker);
--bs-btn-active-color: var(--brand-text-on-primary);
--bs-btn-disabled-bg: var(--brand-primary);
--bs-btn-disabled-border-color: var(--brand-primary);
--bs-btn-disabled-color: var(--brand-text-on-primary);
--bs-btn-focus-shadow-rgb: var(--brand-primary-r), var(--brand-primary-g), var(--brand-primary-b);
background-color: var(--brand-primary);
border-color: var(--brand-primary);
color: var(--brand-text-on-primary);
}
.btn-primary:hover {
background-color: var(--brand-primary-dark);
border-color: var(--brand-primary-dark);
color: var(--brand-text-on-primary);
}
.btn-primary:focus,
.btn-primary:focus-visible {
background-color: var(--brand-primary-dark);
border-color: var(--brand-primary-dark);
color: var(--brand-text-on-primary);
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand-primary) 50%, transparent);
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary.dropdown-toggle.show,
.show > .btn-primary.dropdown-toggle {
background-color: var(--brand-primary-darker);
border-color: var(--brand-primary-darker);
color: var(--brand-text-on-primary);
}
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand-primary) 50%, transparent);
}
.btn-primary:disabled,
.btn-primary.disabled {
background-color: var(--brand-primary);
border-color: var(--brand-primary);
color: var(--brand-text-on-primary);
opacity: 0.65;
}
/* ── ZONA form#login: pulsante "Accedi" e SSO ────────────────────
La form di login si trova dentro #sidebar_area_privata.
NOTA SPECIFICITÀ: form#login .btn-primary (specificità 1-1-1)
batte .btn-primary:hover (0-2-0), quindi anche al hover vince
la regola base e il colore non cambia. Per questo esistono
le regole :hover scoped qui sotto e le variabili dedicate
--brand-login-btn-bg e --brand-login-btn-hover-bg in Livello 2.
---------------------------------------------------------------- */
form#login .btn-primary {
--bs-btn-bg: var(--brand-login-btn-bg, var(--brand-primary));
--bs-btn-border-color: var(--brand-login-btn-bg, var(--brand-primary));
background-color: var(--brand-login-btn-bg, var(--brand-primary));
border-color: var(--brand-login-btn-bg, var(--brand-primary));
}
form#login .btn-primary:hover,
form#login .btn-primary:focus-visible {
background-color: var(--brand-login-btn-hover-bg, var(--brand-primary-dark));
border-color: var(--brand-login-btn-hover-bg, var(--brand-primary-dark));
color: var(--brand-text-on-primary);
}
/* Area Privata/Pubblica (IN.VA): aumenta distanza verticale tra input login. */
#sidebar_area_privata form#login input,
#sidebar_area_pubblica form#login input {
margin: 0 0 30px 0 !important;
}
/* Area Privata (IN.VA): hover specifico sul pulsante Accedi. */
#sidebar_area_privata form#login #submit1:hover,
#sidebar_area_privata form#login #submit1:focus-visible {
background-color: #d02850 !important;
border-color: #d02850 !important;
color: #fff !important;
}
/* Riordina Area Privata: prima SPID/CIE/EIDAS, poi campi login + Accedi. */
#sidebar_area_privata form#login > .m-0 {
display: flex !important;
flex-direction: column !important;
}
#sidebar_area_privata form#login > .m-0 > #FORM_LOGIN,
#sidebar_area_privata form#login > .m-0 > .my-0.mx-0 {
order: 2 !important;
}
#sidebar_area_privata form#login > .m-0 > .form-group.my-2.mx-0 {
order: 1 !important;
}
/* Area Privata (IN.VA): nasconde solo CIE ed EIDAS, mantiene SPID visibile. */
#sidebar_area_privata :is(
a[href*="cie" i],
a[href*="eidas" i],
button[onclick*="cie" i],
button[onclick*="eidas" i],
input[type="button"][value*="cie" i],
input[type="button"][value*="eidas" i],
[id*="cie" i],
[id*="eidas" i],
[class*="cie" i],
[class*="eidas" i],
[data-idp*="cie" i],
[data-idp*="eidas" i],
[title*="cie" i],
[title*="eidas" i],
[aria-label*="cie" i],
[aria-label*="eidas" i]
) {
display: none !important;
}
/* Area Privata (IN.VA): separatore sotto il pulsante SPID, largo quanto
pulsanti e campi (70%) invece che l'intera colonna. */
#sidebar_area_privata form#login > .m-0 > .form-group.my-2.mx-0:last-of-type {
border-bottom: 0 !important;
padding-bottom: 0.35rem;
margin-top: 0 !important;
margin-bottom: 0.8rem !important;
}
#sidebar_area_privata form#login > .m-0 > .form-group.my-2.mx-0:last-of-type::after {
content: "";
display: block;
width: 70%;
border-bottom: 1px solid #d9d9d9;
margin-top: 0.35rem;
}
/* Area Privata (IN.VA): riduce spazio tra titolo e pulsante SPID. */
#sidebar_area_privata .link-list-heading {
margin-bottom: 0.1rem !important;
}
/* Area Privata (IN.VA): spazio reale tra separatore identity e primo campo login. */
#sidebar_area_privata form#login > .m-0 > .my-0.mx-0,
#sidebar_area_privata form#login > .m-0 > #FORM_LOGIN {
margin-top: 1.1rem !important;
}
#sidebar_area_privata form#login .my-0.mx-0 .form-group > .form-control {
padding-top: 0.375rem;
padding-bottom: 0.375rem;
border-radius: 0.35rem !important;
width: 70% !important;
}
#sidebar_area_privata form#login #submit1,
#sidebar_area_privata form#login #submit2 {
width: 70% !important;
}
/* Area Privata (IN.VA): riduce distanza verticale tra i campi login. */
#sidebar_area_privata form#login .my-0.mx-0 .form-group.mx-0.my-0.pb-1,
#sidebar_area_privata form#login .my-0.mx-0 .form-group.mx-0.my-2.pb-1,
#sidebar_area_privata form#login .my-0.mx-0 .form-group.position-relative.mx-0.my-0 {
margin-bottom: 0.75rem !important;
padding-bottom: 0 !important;
}
#sidebar_area_privata form#login .my-0.mx-0 .form-group.position-relative.mx-0.my-0 {
width: 70% !important;
}
#sidebar_area_privata form#login .my-0.mx-0 .form-group.position-relative.mx-0.my-0 > .form-control {
width: 100% !important;
}
#sidebar_area_privata form#login .my-0.mx-0 .form-group.position-relative .password-icon {
top: auto !important;
bottom: 0.55rem;
right: 0.5rem !important;
margin-right: 0 !important;
transform: none !important;
}
/* Area Privata (IN.VA): personalizza il pulsante SPID standard via CSS
senza modificare il markup Razor condiviso. */
#sidebar_area_privata .button-spid {
display: block !important;
width: 70% !important;
min-height: 48px !important;
padding: 0 !important;
border: 0 !important;
background: url("/images/spid.png") no-repeat left center !important;
background-size: contain !important;
overflow: hidden;
}
#sidebar_area_privata .button-spid > span {
opacity: 0 !important;
pointer-events: none;
}
#sidebar_area_privata .button-spid:hover,
#sidebar_area_privata .button-spid:focus,
#sidebar_area_privata .button-spid:active {
background: url("/images/spid.png") no-repeat left center !important;
background-size: contain !important;
}
/* Area Privata (IN.VA): link utili in nero + ultimi 3 in grassetto. */
#sidebar_area_privata #sidebar_link_list .link-list .list-item {
color: #000 !important;
display: block;
width: 100%;
font-size: 11pt !important;
}
#sidebar_area_privata .link-list-wrapper ul li a span {
color: #000 !important;
font-size: 11pt !important;
}
#sidebar_area_privata #sidebar_link_list .link-list .list-item:hover,
#sidebar_area_privata #sidebar_link_list .link-list .list-item:focus-visible {
background-color: #d02850 !important;
color: #fff !important;
text-decoration: none !important;
}
#sidebar_area_privata #sidebar_link_list .link-list .list-item:hover span,
#sidebar_area_privata #sidebar_link_list .link-list .list-item:focus-visible span {
color: #fff !important;
text-decoration: none !important;
}
#sidebar_area_privata #sidebar_link_list .link-list li:nth-last-child(-n+3) .list-item {
font-weight: 700 !important;
}
/* Area Privata (IN.VA): separatore sotto ogni voce link utili. */
#sidebar_area_privata #sidebar_link_list .link-list li {
width: 55%;
border-bottom: 1px solid #d9d9d9;
padding-bottom: 0;
margin-bottom: 0;
}
/* Area Privata (IN.VA): nel 2° link manda a capo dopo "Nome". */
#sidebar_area_privata #sidebar_link_list .link-list li:nth-child(2) .list-item {
display: inline-block;
max-width: 31ch;
white-space: normal;
line-height: 1.25;
}
/* Area Privata (IN.VA): rinomina voce "Registrazione utente S.A.". */
#sidebar_area_privata #sidebar_link_list .link-list li:nth-child(4) .list-item {
font-size: 0 !important;
line-height: 0 !important;
}
#sidebar_area_privata #sidebar_link_list .link-list li:nth-child(4) .list-item span {
display: none !important;
}
#sidebar_area_privata #sidebar_link_list .link-list li:nth-child(4) .list-item::after {
content: "Registrazione Utenti degli Enti";
font-size: 1rem !important;
line-height: 1.25;
display: inline-block;
}
/* ── ZONA #collapseFilter: pulsante "Filtra" ─────────────────────
L'accordion filtri nella griglia bandi genera dinamicamente
il pulsante "Filtra" con classe btn-primary.
NOTA SPECIFICITÀ: stesso problema di form#login. La regola
#collapseFilter .btn-primary (1-1-0) batte .btn-primary:hover
(0-2-0). Necessarie regole :hover scoped e variabile dedicata
--brand-filter-btn-hover-bg in Livello 2.
---------------------------------------------------------------- */
#collapseFilter .btn-primary {
--bs-btn-bg: var(--brand-filter-btn-bg, var(--brand-primary));
--bs-btn-border-color: var(--brand-filter-btn-bg, var(--brand-primary));
background-color: var(--brand-filter-btn-bg, var(--brand-primary));
border-color: var(--brand-filter-btn-bg, var(--brand-primary));
}
#collapseFilter .btn-primary:hover,
#collapseFilter .btn-primary:focus-visible {
background-color: var(--brand-filter-btn-hover-bg, var(--brand-primary-dark));
border-color: var(--brand-filter-btn-hover-bg, var(--brand-primary-dark));
color: var(--brand-text-on-primary);
}
/* ==============================================================
btn-outline-primary — GLOBALE (vero outline trasparente)
============================================================
Di default è un outline puro: sfondo trasparente, solo
testo e bordo colorati con --brand-primary.
Al hover diventa solid (sfondo pieno, testo bianco).
Il menu sidebar (#sidebar_area_pubblica) lo sovrascrive
come SOLID più sotto — quella è l'eccezione, non la regola.
============================================================== */
.btn-outline-primary {
--bs-btn-color: var(--brand-primary);
--bs-btn-border-color: var(--brand-primary);
--bs-btn-hover-bg: var(--brand-primary);
--bs-btn-hover-border-color: var(--brand-primary);
--bs-btn-hover-color: var(--brand-text-on-primary);
--bs-btn-active-bg: var(--brand-primary-dark);
--bs-btn-active-border-color: var(--brand-primary-dark);
--bs-btn-active-color: var(--brand-text-on-primary);
--bs-btn-disabled-color: var(--brand-primary);
--bs-btn-disabled-border-color: var(--brand-primary);
--bs-btn-focus-shadow-rgb: var(--brand-primary-r), var(--brand-primary-g), var(--brand-primary-b);
color: var(--brand-primary);
border-color: var(--brand-primary);
background-color: transparent;
background-image: none;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
background-color: var(--brand-primary);
border-color: var(--brand-primary);
color: var(--brand-text-on-primary);
}
.btn-outline-primary:focus {
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand-primary) 50%, transparent);
}
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary.dropdown-toggle.show,
.show > .btn-outline-primary.dropdown-toggle {
background-color: var(--brand-primary-dark);
border-color: var(--brand-primary-dark);
color: var(--brand-text-on-primary);
}
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand-primary) 50%, transparent);
}
.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
color: var(--brand-primary);
border-color: var(--brand-primary);
background-color: transparent;
opacity: 0.65;
}
/* ── ZONA #sidebar_area_pubblica: voci menu — SOLID ──────────────
PERCHÉ ESISTE QUESTA ECCEZIONE:
Il menu "Area Pubblica" usa btn-outline-primary per le voci
non attive, ma deve avere sfondo COLORATO (non trasparente).
Questa è una scelta progettuale del portale: le voci del menu
usano classi outline ma appaiono solid.
Questo blocco sovrascrive il comportamento outline globale
SOLO all'interno di #sidebar_area_pubblica.
Se --brand-menu-btn-bg non è definito nel Livello 2,
usa --brand-primary-darker come fallback.
La voce ATTIVA del menu usa btn-primary (non outline)
e segue le regole globali btn-primary sopra.
---------------------------------------------------------------- */
#sidebar_area_pubblica .btn-outline-primary {
--bs-btn-bg: transparent;
--bs-btn-border-color: transparent;
--bs-btn-color: #000;
--bs-btn-hover-bg: #d02850;
--bs-btn-hover-border-color: #d02850;
--bs-btn-hover-color: #fff;
border-radius: 0.35rem !important;
color: #000;
border-color: transparent;
background-color: transparent;
background-image: none;
box-shadow: none;
}
#sidebar_area_pubblica .btn-outline-primary:hover,
#sidebar_area_pubblica .btn-outline-primary:focus-visible {
background-color: #d02850;
border-color: #d02850;
color: #fff;
box-shadow: none;
}
#sidebar_area_pubblica .btn-primary,
#sidebar_area_pubblica .btn-outline-primary.active,
#sidebar_area_pubblica .btn-outline-primary:active {
background-color: #d02850;
border-color: #d02850;
color: #fff;
border-radius: 0.35rem !important;
}
/*
Bordo sinistro colorato al hover sulle voci menu.
Classe .custom-hover è presente SOLO sui pulsanti menu
della sidebar. L'effetto è un highlight laterale.
Se --brand-menu-hover-border non è definito nel Livello 2,
usa --brand-primary-dark come fallback.
*/
#sidebar_area_pubblica .btn.custom-hover:hover {
border-left: 0;
}
#sidebar_area_pubblica .link-list .btn {
width: 100% !important;
}
/* Separatore grigio tra le voci menu Area Pubblica (stile mockup). */
#sidebar_area_pubblica .link-list li {
width: 70%;
}
#sidebar_area_pubblica .link-list li.mb-2 {
margin-bottom: 0 !important;
}
#sidebar_area_pubblica .link-list li + li {
border-top: 1px solid #d9d9d9 !important;
margin-top: 0.15rem;
padding-top: 0.15rem;
}
#sidebar_area_pubblica .link-list li:last-child {
border-bottom: 1px solid #d9d9d9 !important;
padding-bottom: 0.15rem;
}
/* ── ZONA #collapseFilter: pulsante "Pulisci" — vero outline ─────
Il pulsante "Pulisci" nell'accordion filtri deve rimanere
un VERO OUTLINE: sfondo trasparente, solo bordo e testo colorati.
Questa regola è esplicita (ridondante rispetto al globale) per
garantire che future regole in PortaleLight/Portale.css non
alterino per errore il comportamento di "Pulisci".
Se --brand-filter-outline-color non è definito nel Livello 2,
usa --brand-primary come fallback.
---------------------------------------------------------------- */
#collapseFilter .btn-outline-primary {
--bs-btn-color: var(--brand-filter-outline-color, var(--brand-primary));
--bs-btn-border-color: var(--brand-filter-outline-color, var(--brand-primary));
--bs-btn-hover-bg: var(--brand-filter-outline-color, var(--brand-primary));
--bs-btn-hover-color: var(--brand-text-on-primary);
color: var(--brand-filter-outline-color, var(--brand-primary));
border-color: var(--brand-filter-outline-color, var(--brand-primary));
background-color: transparent;
background-image: none;
box-shadow: none;
}
#collapseFilter .btn-outline-primary:hover,
#collapseFilter .btn-outline-primary:focus-visible {
background-color: var(--brand-filter-outline-color, var(--brand-primary));
border-color: var(--brand-filter-outline-color, var(--brand-primary));
color: var(--brand-text-on-primary);
}
/* ==============================================================
#headingFilter — intestazione accordion "Filtri"
Override di PortaleLight/Portale.css
(quella regola imposta un colore fisso hardcoded che qui
viene sovrascritto con il valore brand del cliente)
============================================================== */
#headingFilter {
padding: .5rem 1.5rem !important;
--bs-bg-opacity: 1;
background-color: var(--brand-filter-header-bg, var(--brand-primary-darker)) !important;
color: var(--brand-text-on-primary) !important;
}
/* ==============================================================
#nav_container — griglia bandi: sfondo, tab navigazione,
intestazione colonne
============================================================
#nav_container è il wrapper che contiene:
- le tab "Forniture" / "Servizi" / ecc. (#nav_grid_bandi)
- la griglia dati con le intestazioni colonna (.gm-container)
NOTA TECNICA SFONDO GRIGLIA:
Portale.css usa "--gm-header-bg" come variabile per lo sfondo
delle intestazioni, ma usa "var(--bs-secondary)" hardcoded per
il testo (non usa "--gm-header-txt" pur avendola definita).
Questo file sovrascrive entrambe nel modo corretto.
============================================================== */
/* Sfondo del contenitore principale della griglia bandi.
Di default trasparente. Decommentare --brand-nav-bg in
Livello 2 per impostare un colore di sfondo. */
#nav_container {
background-color: var(--brand-nav-bg, transparent) !important;
}
/* Sfondo della barra con le tab Forniture/Servizi.
Separato da #nav_container: permette di colorare solo la
barra tab lasciando il resto del contenitore diverso. */
#nav_grid_bandi .nav-pills {
background-color: var(--brand-nav-pills-bg, transparent) !important;
}
/* Testo delle tab NON ATTIVE. */
#nav_grid_bandi .nav-pills .nav-link {
color: var(--brand-nav-link-color, #6c757d);
}
/* Testo delle tab al hover (sfondo rimane trasparente). */
#nav_grid_bandi .nav-pills .nav-link:hover:not(.active) {
color: var(--brand-nav-link-hover-color, var(--brand-primary));
background-color: #d02850 !important;
text-decoration: underline !important;
}
/* Tab ATTIVA — sfondo e testo.
Portale.css usa background-color: var(--bs-primary) e color: #fff
hardcoded. Stesso selettore + caricamento dopo = questa vince.
Se --brand-nav-link-active-bg non è definito in Livello 2,
usa --brand-primary come fallback (comportamento invariato). */
#nav_grid_bandi .nav-pills .nav-link.active {
background-color: var(--brand-nav-link-active-bg, var(--brand-primary));
color: var(--brand-nav-link-active-color, var(--brand-text-on-primary));
}
/* Sfondo intestazione colonne della griglia.
Ridefinisce --gm-header-bg che Portale.css legge con !important
nelle regole thead. La var cascade correttamente. */
.gm-container {
--gm-header-bg: var(--brand-grid-header-bg, #f3f4f6);
}
/* Testo intestazione colonne.
Portale.css usa "color: var(--bs-secondary) !important" hardcoded
(non la variabile --gm-header-txt). Stesso selettore + stessa
specificità + caricamento dopo = questa regola vince. */
.gm-container thead.gm-thead th.gridjs-th.gm-th {
color: var(--brand-grid-header-text, var(--bs-secondary)) !important;
}
/* ==============================================================
#sidebar-area — colonna laterale sinistra
============================================================== */
/* Sfondo dell'intera sidebar (Area Pubblica + Area Privata). */
#sidebar-area {
background-color: var(--brand-sidebar-bg, transparent);
}
@media (min-width: 768px) {
#sidebar-area {
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
margin-left: 0 !important;
width: auto;
max-width: none;
flex: 0 0 25%;
}
#sidebar-area > * {
transform: translateX(5rem);
}
}
/* ==============================================================
#btnStampa — pulsante Stampa nella barra #nav_container
============================================================
In Portale.css usa variabili Bootstrap (bs-body-bg,
bs-secondary, bs-tertiary-bg, bs-body-color).
Le regole sotto hanno stesso selettore + caricamento dopo
quindi vincono senza bisogno di !important.
============================================================== */
#btnStampa {
background-color: var(--brand-btn-stampa-bg, var(--bs-body-bg));
color: var(--brand-btn-stampa-color, var(--bs-secondary));
}
#btnStampa:hover {
background-color: var(--brand-btn-stampa-hover-bg, var(--bs-tertiary-bg));
color: var(--brand-btn-stampa-hover-color, var(--bs-body-color));
}
/* ── fine SEZIONE B ──────────────────────────────────────── */
/* ============================================================
SEZIONE C — OVERRIDE CLIENTE UA (inizio)
============================================================
Regole specifiche per il cliente UA che sovrascrivono o
estendono il comportamento base del portale.
STRUTTURA:
C1 — Layout globale
C2 — Header
C3 — Contenuto principale (#main)
C4 — Home page (contenuto custom via multilinguismo)
C5 — Footer (contenuto custom via multilinguismo)
C6 — Wizard registrazione (step a riquadri)
C7 — Scheda modulo registrazione
REGOLA: aggiungere nuove personalizzazioni UA SOLO qui,
mai intercalate nella Sezione A o Sezione B.
============================================================ */
/* ── C1 — Layout globale ─────────────────────────────────── */
/* Previene lo scroll orizzontale causato da componenti Bootstrap
che eccedono la viewport su schermi stretti. */
html, body {
max-width: 100%;
overflow-x: hidden;
}
/* ── C2 — Header ─────────────────────────────────────────── */
/* Allinea il contenuto header su una larghezza centrale fissa. */
.it-header-center-wrapper .container-fluid {
max-width: 1200px;
margin: 0 auto;
}
/* Secondo logo opzionale nel header: non utilizzato da UA. */
.it-header-center-logo {
display: none;
}
/* Zona pulsanti accessibilità (A+/A-/Ripristina):
resa visibile sul lato destro, mantenendo il logo a sinistra. */
.it-header-right-zone {
display: flex;
margin-left: auto;
align-self: center;
margin-top: 0.2rem;
}
/* Navigazione rapida header accanto al logo. */
.it-header-center-wrapper .it-header-center-nav {
display: flex !important;
align-items: center;
gap: 1rem;
margin-left: 1.2rem;
margin-right: 1rem;
margin-top: 0.22rem;
flex-wrap: wrap;
}
.it-header-center-wrapper .it-header-center-nav-link {
color: #465464;
font-size: 0.8em;
text-decoration: none;
border-bottom: 2px solid transparent;
line-height: 1.2;
}
.it-header-center-wrapper .it-header-center-nav-link:hover,
.it-header-center-wrapper .it-header-center-nav-link:focus,
.it-header-center-wrapper .it-header-center-nav-link.is-active {
color: #e42e22;
text-decoration: none;
border-bottom-color: #e42e22;
}
/* Header bianco: layout compatto in linea per i comandi accessibilità. */
.it-header-right-zone > .d-flex {
flex-direction: row !important;
align-items: center !important;
text-align: left !important;
gap: 0 !important;
padding-bottom: 0 !important;
}
/* Nasconde etichetta "Dimensione Font" per allinearsi al mockup link-only. */
.it-header-center-wrapper .it-header-right-zone .text-light {
display: none !important;
}
.it-header-center-wrapper .it-header-right-zone .btn-group {
display: inline-flex;
align-items: center;
gap: 0;
}
/* Ordine visuale richiesto: A+ → Ripristina → A- */
.it-header-center-wrapper .it-header-right-zone #font-increase {
order: 1;
}
.it-header-center-wrapper .it-header-right-zone #font-reset {
order: 2;
}
.it-header-center-wrapper .it-header-right-zone #font-decrease {
order: 3;
text-transform: lowercase;
}
.it-header-center-wrapper .it-header-right-zone .btn-outline-light {
--bs-btn-color: #666;
--bs-btn-border-color: transparent;
--bs-btn-hover-bg: transparent;
--bs-btn-hover-border-color: transparent;
--bs-btn-hover-color: #e42e22;
--bs-btn-active-bg: transparent;
--bs-btn-active-border-color: transparent;
--bs-btn-active-color: #666;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 0.55rem !important;
font-size: 12.8px !important;
line-height: 1 !important;
font-weight: 600;
color: #666 !important;
}
.it-header-center-wrapper .it-header-right-zone .btn-outline-light + .btn-outline-light {
border-left: 1px solid #c6ccd8 !important;
}
.it-header-center-wrapper .it-header-right-zone .btn-outline-light:hover,
.it-header-center-wrapper .it-header-right-zone .btn-outline-light:focus,
.it-header-center-wrapper .it-header-right-zone .btn-outline-light:active {
text-decoration: underline;
color: #e42e22 !important;
}
/* Banner sotto il blocco logo/pulsanti, senza alterare la prima riga header. */
.it-header-center-wrapper,
.it-header-center-wrapper.it-small-header,
.it-header-center-wrapper .it-header-center-content-wrapper {
height: auto !important;
overflow: visible !important;
}
.it-header-center-wrapper .it-header-center-content-wrapper {
display: flex;
align-items: center;
flex-wrap: wrap;
padding-top: 0.2rem;
padding-bottom: 0.1rem;
}
.it-header-center-wrapper .it-brand-wrapper img {
display: block;
max-height: 56px !important;
}
.it-header-center-wrapper::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: auto;
height: 230px;
background-color: #355296;
background-image: url("../../images/logoPortaleHeader.png");
background-repeat: no-repeat;
background-position: calc(50% - 1cm) center;
background-size: cover;
}
.it-header-center-wrapper {
padding-bottom: 230px;
}
/* Breadcrumb: nasconde "Portale acquisti |" e mantiene visibile "Sei qui:". */
#sidebar-area .d-inline-flex.align-items-baseline.text-nowrap > span.text-secondary:first-child,
#sidebar-area .d-inline-flex.align-items-baseline.text-nowrap > span.vr {
display: none !important;
}
/* Breadcrumb: voce corrente in evidenza come pulsante attivo Area Pubblica. */
#breadcrumb-list .breadcrumb-item.active,
#breadcrumb-list .breadcrumb-item[aria-current="page"] {
color: #d02850 !important;
}
/* Breadcrumb legacy: sostituisce il separatore testuale con freccia custom cliente. */
.breadcrumb-container .breadcrumb .breadcrumb-item span.separator {
display: inline-block;
width: 20px;
height: 9px;
padding: 0;
margin: 0 0.6em;
font-size: 0;
line-height: 0;
color: transparent;
background: url("../../images/arrow.png") no-repeat center;
background-size: contain;
vertical-align: middle;
}
#breadcrumb-list li.breadcrumb-separator {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 12px;
height: 12px;
margin: 0 0.6em !important;
padding: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
color: transparent !important;
text-indent: -9999px;
overflow: hidden;
background: url("../../images/arrow.png") no-repeat center;
background-size: contain;
vertical-align: middle;
}
/* Breadcrumb registrazione (solo CSS): applica il tweak quando la breadcrumb ha 2 voci (Home > pagina). */
.breadcrumb-container:has(#breadcrumb-list > li:first-child:nth-last-child(3)) #breadcrumb-list li.breadcrumb-separator {
width: 19px;
height: 12px;
text-indent: 40px;
position: relative;
top: -4px;
}
/* ── C3 — Contenuto principale ───────────────────────────── */
/* Sfondo del contenitore centrale della pagina (#main).
Sovrascrive il default Bootstrap per applicare --brand-main-container-bg.
Il fallback #ffffff garantisce la leggibilità se la variabile
non è definita. */
#main {
background: none !important;
background-color: var(--brand-main-container-bg, #ffffff) !important;
}
main#content {
box-shadow: none !important;
border: 0 !important;
}
/* ── C4 — Home page ──────────────────────────────────────── */
/* Contenuto HTML centrale iniettato via multilinguismo
con chiave: "Contenuto html centrale home page di portale" */
.home-central-content {
max-width: 520px;
margin: 0;
padding: 0 10px;
font-family: "Lato", Arial, Helvetica, sans-serif;
color: #222;
text-align: left;
}
.home-central-content .home-title,
#centered-text-home-page {
font-size: 24px;
font-weight: 400;
color: #1f5fa8 !important;
text-decoration: underline;
text-align: left !important;
display: block;
width: 100%;
margin: 20px 0 5px;
}
.home-central-content .home-logo,
#centered-image-home-page {
display: block;
width: 350px;
max-width: 100%;
height: auto;
margin: 0 0 60px;
padding-bottom: 0;
}
.home-central-content .home-text {
font-size: 1em;
line-height: 1.8;
margin: 0 0 18px;
}
.home-central-content .home-text p,
.home-central-content .home-text span,
.home-central-content p,
.home-central-content li {
font-size: inherit !important;
line-height: inherit;
}
.home-central-content .home-banner {
display: block;
margin: 0 0 25px;
overflow: hidden;
}
.home-central-content .home-banner img {
display: block;
width: 100%;
height: auto;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.home-central-content .home-banner:hover img {
transform: scale(1.02);
opacity: 0.92;
}
.home-central-content .home-banner[href="#"] {
cursor: pointer;
}
@media (max-width: 480px) {
.home-central-content .home-title,
#centered-text-home-page {
font-size: 20px;
}
.home-central-content .home-logo,
#centered-image-home-page {
margin-bottom: 35px;
}
.home-central-content .home-text {
font-size: 1em;
}
}
/* ── C5 — Footer ─────────────────────────────────────────── */
/* Contenuto HTML iniettato via multilinguismo
con chiave: "Contenuto html footer portale" */
.site-footer__bottom {
background-color: var(--brand-footer-bg, var(--brand-primary-darker));
background-image: url("../images/footerTotal.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
color: var(--brand-text-on-primary);
padding: 1.5rem 1rem;
}
/* Footer con markup "footer-portale-gare" (logo + colonne contatti) */
.footer-portale-gare {
background-color: transparent;
background-image: url("../images/footerTotal.jpg") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: cover !important;
color: var(--brand-text-on-primary);
font-size: 12px;
line-height: 1.5;
}
/* Footer IN.VA: layout contenuto allineato al mockup. */
.footer-portale-gare > .row {
max-width: 1200px;
margin: 0 auto;
min-height: 220px;
}
.footer-portale-gare .pg-brand {
width: 310px;
padding: 35px 20px 15px 0;
}
.footer-portale-gare .pg-content {
padding: 45px 20px 15px 0;
}
.footer-portale-gare .pg-loghi {
width: 200px;
padding: 20px 0 10px;
justify-content: space-between !important;
gap: 15px;
}
.footer-portale-gare .pg-logo {
width: auto;
height: auto;
margin: 0;
background: none;
border-radius: 0;
justify-content: flex-start !important;
}
.footer-portale-gare .pg-logo img {
display: block;
max-width: 100%;
height: auto;
}
.footer-portale-gare .pg-logo-principale img {
width: 240px;
}
.footer-portale-gare .pg-logo-secondario {
justify-content: center !important;
}
.footer-portale-gare .pg-logo-2 img {
width: 80px;
}
.footer-portale-gare .pg-logo-3 img {
width: 70px;
}
.footer-portale-gare .pg-info p {
margin-bottom: 6px;
padding: 0;
line-height: 1.25;
color: #fff;
font-size: 1em;
}
.footer-portale-gare .pg-info p:last-child {
margin-bottom: 0;
}
.footer-portale-gare .pg-info strong {
font-weight: 700;
}
.footer-portale-gare .pg-bottom-links {
font-size: 12px;
color: #fff;
}
.footer-portale-gare .pg-links-legali {
padding-left: 15px;
}
.footer-portale-gare .pg-bottom-links a {
color: #fff;
font-weight: 700;
text-decoration: none;
}
.footer-portale-gare .pg-links-legali a {
font-weight: 400;
}
.footer-portale-gare .pg-bottom-links a:hover,
.footer-portale-gare .pg-bottom-links a:focus {
text-decoration: underline;
}
@media (max-width: 767.98px) {
.footer-portale-gare .pg-brand,
.footer-portale-gare .pg-content,
.footer-portale-gare .pg-loghi {
width: 100%;
padding: 20px;
text-align: center;
}
.footer-portale-gare .pg-logo {
justify-content: center !important;
}
.footer-portale-gare .pg-links-legali {
padding-left: 0;
}
.footer-portale-gare .pg-loghi {
flex-direction: row !important;
justify-content: center !important;
gap: 30px;
}
}
.footer-portale-gare h1,
.footer-portale-gare h2,
.footer-portale-gare h3,
.footer-portale-gare h4,
.footer-portale-gare p,
.footer-portale-gare span,
.footer-portale-gare strong {
color: var(--brand-text-on-primary);
}
/* link chiari per contrasto su sfondo scuro */
.footer-portale-gare a {
color: #cfe3ff;
}
.site-footer__info {
font-style: normal;
max-width: 1200px;
margin: 0 auto;
line-height: 1.5;
}
.site-footer__info p {
margin: 0 0 0.25rem;
text-align: center;
}
/* ── C6 — Wizard registrazione (step a riquadri) ─────────── */
/* Markup (drawStepsFaseII): 1Etichetta.
Lo standard (vaporPortale.css) rende i numeri come cerchi uniti da una
linea: qui diventano riquadri affiancati con l'etichetta sotto. */
#main ul.wizard {
display: flex !important;
gap: 3px;
list-style: none;
margin: 0;
padding: 20px 0 40px !important;
max-width: 700px;
}
#main ul.wizard li.step {
display: flex !important;
flex-direction: column;
flex: 1 1 0;
width: auto !important;
height: auto !important;
text-align: center;
font-size: 12px !important;
font-style: italic;
font-weight: 400;
line-height: 1.3;
color: #6c757d;
text-decoration: none !important;
border: 0 !important;
background: none !important;
}
/* riquadro con icona e numero */
#main ul.wizard li.step span {
display: flex !important;
align-items: center;
justify-content: center;
gap: 8px;
width: auto !important;
height: 28px !important;
margin: 0 0 12px 0 !important;
position: relative;
background: #eceff1 !important;
border: 0 !important;
border-radius: 2px !important;
color: #9aa3ab !important;
font-size: 13px;
font-weight: 700;
font-style: italic;
line-height: normal !important;
text-shadow: none !important;
text-decoration: none !important;
text-transform: none !important;
}
/* icona a sinistra del numero (Font Awesome, caricato dal portale) */
#main ul.wizard li.step span::before {
font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
font-weight: 900;
font-style: normal;
font-size: 12px;
color: #b9c2c9;
content: "\f141"; /* tre puntini */
}
/* freccetta sotto il riquadro, al posto della linea tra i cerchi:
azzera le proprietà della linea standard */
#main ul.wizard li.step span::after {
display: block !important;
content: "" !important;
position: absolute !important;
left: 50% !important;
right: auto !important;
top: auto !important;
bottom: -6px !important;
margin: 0 !important;
transform: translateX(-50%);
width: 0 !important;
height: 0 !important;
background: none !important;
background-color: transparent !important;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #eceff1;
}
/* passo corrente */
#main ul.wizard li.stepCorrente {
color: #0066CC;
font-weight: 700;
}
#main ul.wizard li.stepCorrente span {
background: #0066CC !important;
color: #ffffff !important;
}
#main ul.wizard li.stepCorrente span::after {
border-top-color: #0066CC !important;
}
#main ul.wizard li.stepCorrente span::before {
content: "\f303"; /* matita */
font-size: 14px;
color: #ffffff;
}
/* passo già completato */
#main ul.wizard li.stepFatto span {
background: #eceff1 !important;
color: #9aa3ab !important;
}
#main ul.wizard li.stepFatto span::before {
content: "\f00c"; /* spunta */
color: #0066CC;
}
/* ── C7 — Scheda modulo registrazione ────────────────────── */
/* Markup: .data_form > h3 (N).
Bordo grigio da personal.css (.data_form), quadrato ciano da
vaporPortale.css (.data_form h3 span). */
/* Pagine registrazione: rimuove sfondo grigio del titolo e separatore sotto. */
#main:has(#main_registrazione) .page-header,
#main:has(#main_registrazione) .page-header h2 {
background: transparent !important;
border-bottom: 0 !important;
box-shadow: none !important;
font-weight: 400 !important;
}
#main .data_form {
border-color: #0066CC !important;
}
/* quadrato numerato (escluso il titolo, che ha sfondo bianco) */
#main .data_form h3 span:not(.data_form_title) {
background: #0066CC !important;
color: #ffffff !important;
}
/* Pulsanti: Annulla a sinistra (contorno), Continua a destra (pieno).
Nello standard sono entrambi float:right, quindi comparivano invertiti.
"background" in forma estesa azzera anche l'icona "›" standard. */
#main_registrazione input.btn_back,
#main_registrazione input.btn_back:focus,
#main_registrazione button.btn_back,
#main_registrazione button.btn_back:focus {
float: left !important;
margin-left: 0 !important;
background: #ffffff !important;
border: 1px solid #0066CC !important;
border-radius: 6px !important;
color: #0066CC !important;
text-transform: uppercase;
font-weight: 600;
text-shadow: none !important;
min-height: 48px !important;
padding: 0 24px !important;
}
#main_registrazione input.btn_back:hover,
#main_registrazione button.btn_back:hover {
background: #0066CC !important;
color: #ffffff !important;
}
#main_registrazione input.btn_forward,
#main_registrazione input.btn_forward:focus {
float: right !important;
background: #234E73 !important;
border: 1px solid #234E73 !important;
border-radius: 6px !important;
color: #ffffff !important;
text-transform: uppercase;
font-weight: 600;
text-shadow: none !important;
min-height: 48px !important;
padding: 0 24px !important;
}
#main_registrazione input.btn_forward:hover {
background: #2d2c57 !important;
border-color: #2d2c57 !important;
color: #ffffff !important;
}
/* Popup informazioni bandi (IN.VA): sfondo e testo custom. */
#sezione_suggerimenti {
background: #f4f4f4 !important;
color: #555 !important;
border-color: #666 !important;
}
#sezione_suggerimenti .sezione_suggerimenti_text,
#sezione_suggerimenti p,
#sezione_suggerimenti strong,
#sezione_suggerimenti a,
#sezione_suggerimenti .text-dark,
#sezione_suggerimenti .sezione_suggerimenti_title,
#sezione_suggerimenti .sezione_suggerimenti_info_icon {
color: #555 !important;
}
#sezione_suggerimenti .sezione_suggerimenti_info_icon {
fill: #555 !important;
}
/* ── fine SEZIONE C ──────────────────────────────────────── */