/*
* Portale eventi ISORS - marchi.css
* Una pelle per marchio: [data-marchio="isors|anfop|isorscert|unicurs|mf"] e l'accento della fiera
* [data-fiera="joborienta-2026"]. Solo colori e caratteri dei kit ufficiali (fonti in brand/SISTEMA.md).
* Ogni pelle definisce --l-* (tema chiaro) e --d-* (tema scuro); base.css li collega ai ruoli
* (--fondo, --testo, --accento, --segnale...). Il tema scuro usa i blu scuri che ogni kit indica
* per le sezioni scure e il piè di pagina: nessun colore nuovo.
* Senza data-marchio vale la pelle ISORS (il portale è di ISORS).
*
* Caratteri (Google Fonts, licenza OFL). Nel , prima di base.css:
*
*
*
*
* Solo ISORS (pagine in pelle ISORS):
*
*
* Pagine che mostrano anche blocchi degli altri marchi: aggiungere solo le famiglie che servono.
* A.N.Fo.P. family=Plus+Jakarta+Sans:wght@400;700;800
* IsorsCert family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;600
* UNICURS family=Montserrat:wght@400;500;600;700;800
* M&F family=Archivo:wght@700&family=Inter:wght@400;500;600
*
* Tutte insieme (guida co-branding, pagina di prova):
*
*
* Non usare: Onest, Arial, Times, Montserrat fuori da UNICURS, Titillium Web fuori da ISORS,
* JetBrains Mono (vietato nei materiali IsorsCert), EB Garamond (solo registro istituzionale UNICURS su carta).
*/
/* ------------------------------------------------------------------ ISORS
Kit isors/02_COLORI/palette.json v2 (13/10/2026), 05_SISTEMA_VISIVO.md sez. 2-3.
Un solo carattere: Titillium Web. Corallo SOLO bottoni d'azione e scadenze (3-5% della pagina),
testo sopra sempre Inchiostro. Il logo a colori mai sul Blu del marchio #0F7BB6 (lì va il bianco). */
:root,
[data-marchio="isors"] {
--l-fondo: #FFFFFF; /* Bianco */
--l-fondo-2: #EEF5F8; /* Ghiaccio */
--l-superficie: #FFFFFF;
--l-testo: #16212B; /* Inchiostro 16,3:1 */
--l-testo-2: #4A5868; /* Ardesia 7,3:1 */
--l-titoli: #0B2F4E; /* Blu ISORS */
--l-link: #0F7BB6; /* Blu del marchio 4,64:1 su bianco */
--l-accento: #0F7BB6;
--l-su-accento: #FFFFFF; /* solo testi brevi e grandi */
--l-forte: #0B2F4E;
--l-su-forte: #FFFFFF;
--l-evidenza-forte: #D8D6D4; /* Grigio globo su Blu ISORS 9,4:1 */
--l-segnale: #FF6A4D; /* Corallo */
--l-su-segnale: #16212B; /* Inchiostro su Corallo 5,8:1 */
--l-linea: #D6DEE3; /* Linee */
--l-focus: #0F7BB6;
--l-firma: url("../marchi/isors/isors-fasce-angolo-colori.svg");
--d-fondo: #0B2F4E; /* Blu ISORS: fondo delle sezioni scure nel kit */
--d-fondo-2: #16212B; /* Inchiostro */
--d-superficie: #0B2F4E;
--d-testo: #FFFFFF;
--d-testo-2: #D8D6D4; /* Grigio globo */
--d-titoli: #FFFFFF;
--d-link: #D8D6D4; /* il Blu del marchio non va mai come testo sul Blu ISORS */
--d-accento: #0F7BB6; /* solo filetti e forme grandi (3,0:1) */
--d-su-accento: #FFFFFF;
--d-forte: #0B2F4E;
--d-su-forte: #FFFFFF;
--d-evidenza-forte: #D8D6D4;
--d-segnale: #FF6A4D;
--d-su-segnale: #16212B;
--d-linea: #4A5868; /* Ardesia */
--d-focus: #D8D6D4;
--d-firma: url("../marchi/isors/isors-fasce-angolo-tono-su-blu.svg");
--filetto-lockup: #D8D6D4; /* filetto verticale grigio del co-branding */
--font-titoli: "Titillium Web", "Segoe UI", "Avenir Next", sans-serif;
--font-testo: "Titillium Web", "Segoe UI", "Avenir Next", sans-serif;
--font-codice: "Titillium Web", "Segoe UI", sans-serif;
--peso-titoli: 700;
--peso-numeri: 700;
--peso-sottotitoli: 600;
--peso-occhiello: 600;
--tracking-titoli: 0;
--tracking-occhiello: 0.12em;
--raggio: 2px;
--raggio-card: 2px;
--firma-larghezza: 11rem;
--firma-altezza: 13.1rem;
--firma-posizione: right bottom;
--firma-inset: auto 0 0 auto;
}
/* ------------------------------------------------------------------ A.N.Fo.P.
Kit anfop/02_COLORI/palette.json v1 (12/10/2026). Un solo carattere: Plus Jakarta Sans.
Rosso: un solo richiamo per pagina (bottone d'azione, testo bianco). Azzurro mai per testo piccolo.
Nei testi in pelle A.N.Fo.P. niente trattino lungo, trattino medio, punto mediano, punti esclamativi. */
[data-marchio="anfop"] {
--l-fondo: #FFFFFF;
--l-fondo-2: #E9F0F8; /* Nebbia */
--l-superficie: #FFFFFF;
--l-testo: #1B2540; /* Inchiostro */
--l-testo-2: #5B6480; /* Ardesia */
--l-titoli: #24345F; /* Blu notte */
--l-link: #2C5A8E; /* Blu testo 7,1:1 */
--l-accento: #588FC1; /* Azzurro: arco, filetti, icone */
--l-su-accento: #1B2540;
--l-forte: #24345F;
--l-su-forte: #FFFFFF;
--l-evidenza-forte: #8DB6DD; /* Azzurro chiaro */
--l-segnale: #AE3546; /* Rosso */
--l-su-segnale: #FFFFFF; /* 6,2:1 */
--l-linea: #E2E6EF; /* Linee */
--l-focus: #2C5A8E;
--l-firma: url("../marchi/anfop/anfop-abbraccio-angolo-azzurro.svg");
--d-fondo: #24345F; /* Blu notte */
--d-fondo-2: #1B2848; /* Notte */
--d-superficie: #24345F;
--d-testo: #FFFFFF;
--d-testo-2: #8DB6DD; /* Azzurro chiaro 5,7:1 */
--d-titoli: #FFFFFF;
--d-link: #8DB6DD;
--d-accento: #588FC1;
--d-su-accento: #1B2540;
--d-forte: #1B2848;
--d-su-forte: #FFFFFF;
--d-evidenza-forte: #8DB6DD;
--d-segnale: #AE3546;
--d-su-segnale: #FFFFFF;
--d-linea: #2F4675; /* tono su blu dell'abbraccio */
--d-focus: #8DB6DD;
--d-firma: url("../marchi/anfop/anfop-abbraccio-angolo-tono-su-blu.svg");
--font-titoli: "Plus Jakarta Sans", "Segoe UI", "Avenir Next", sans-serif;
--font-testo: "Plus Jakarta Sans", "Segoe UI", "Avenir Next", sans-serif;
--font-codice: "Plus Jakarta Sans", "Segoe UI", sans-serif;
--peso-titoli: 800;
--peso-numeri: 800;
--peso-sottotitoli: 700;
--peso-occhiello: 700;
--tracking-titoli: -0.03em;
--tracking-occhiello: 0.12em;
--raggio: 4px;
--raggio-card: 4px;
--firma-larghezza: 12rem;
--firma-altezza: 12rem;
--firma-posizione: right bottom;
--firma-inset: auto 0 0 auto;
}
/* ------------------------------------------------------------------ IsorsCert (kit bozza da approvare)
Kit isorscert/02_COLORI/palette.css v1 (14/10/2026). Inter; IBM Plex Mono solo per codici di verifica
e numeri di registro (classe .codice). Niente oro, giallo o ambra accanto al blu. Mai accanto a ISORS
o UNICURS. Il lockup con M&F sta solo su fondo chiaro: il blocco resta chiaro anche nel tema scuro. */
[data-marchio="isorscert"] {
--l-fondo: #FFFFFF;
--l-fondo-2: #F6F4F2; /* Carta */
--l-superficie: #FFFFFF;
--l-testo: #16213F; /* Inchiostro 15,9:1 */
--l-testo-2: #5A5D71; /* Grafite 6,5:1 */
--l-titoli: #354595; /* Blu barra 8,6:1 */
--l-link: #2575AA; /* Azzurro testo 5,0:1 */
--l-accento: #354595;
--l-su-accento: #FFFFFF;
--l-forte: #16213F; /* testata scura con il marchio "su scuro" */
--l-su-forte: #FFFFFF;
--l-evidenza-forte: #D4D2D0; /* Grigio fasce su Inchiostro 10,5:1 */
--l-segnale: #354595;
--l-su-segnale: #FFFFFF;
--l-linea: #E3E1DE; /* Filetto */
--l-focus: #2575AA;
--l-firma: url("../marchi/isorscert/isorscert-firma-ventaglio-grigio.svg");
--d-fondo: #16213F; /* Inchiostro: fondo del marchio "su scuro" */
--d-fondo-2: #354595; /* Blu barra */
--d-superficie: #16213F;
--d-testo: #FFFFFF;
--d-testo-2: #D4D2D0; /* Grigio fasce (5,7:1 anche su Blu barra) */
--d-titoli: #FFFFFF;
--d-link: #D4D2D0;
--d-accento: #3C85BB; /* Azzurro: solo forme e filetti */
--d-su-accento: #FFFFFF;
--d-forte: #16213F;
--d-su-forte: #FFFFFF;
--d-evidenza-forte: #D4D2D0;
--d-segnale: #FFFFFF;
--d-su-segnale: #354595; /* Blu barra su bianco 8,6:1 */
--d-linea: #5A5D71; /* Grafite, solo come linea */
--d-focus: #D4D2D0;
--d-firma: url("../marchi/isorscert/isorscert-firma-ventaglio-bianco.svg");
--font-titoli: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-testo: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-codice: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
--peso-titoli: 700;
--peso-numeri: 800;
--peso-sottotitoli: 600;
--peso-occhiello: 600;
--tracking-titoli: -0.02em;
--tracking-occhiello: 0.08em;
--raggio: 2px;
--raggio-card: 2px;
/* ventaglio tagliato: bordo sinistro e basso, mai in basso a destra */
--firma-larghezza: 8rem;
--firma-altezza: 100%;
--firma-posizione: left bottom;
--firma-inset: 0 auto 0 0;
}
/* ------------------------------------------------------------------ UNICURS
Kit unicurs/02_COLORI/palette.json v2 (06/10/2026), registro promozionale: Montserrat, blu, Nebbia,
Giallo per numeri, parole chiave e bottone d'azione (testo sopra sempre scuro). L'Oro appartiene
al registro istituzionale e non si mescola con i colori delle aree: qui non si usa.
Occhiello ufficiale: "UNICURS · Polo di studio Università eCampus". */
[data-marchio="unicurs"] {
--l-fondo: #FFFFFF;
--l-fondo-2: #ECEFF6; /* Nebbia */
--l-superficie: #FFFFFF;
--l-testo: #161B2E; /* Inchiostro 17,1:1 */
--l-testo-2: #4B5270; /* Ardesia 7,7:1 */
--l-titoli: #283A7B; /* Blu UNICURS 10,6:1 */
--l-link: #1B75BB; /* Blu area Economia e Giurisprudenza, "anche collegamenti nel web" */
--l-accento: #283A7B;
--l-su-accento: #FFFFFF;
--l-forte: #283A7B;
--l-su-forte: #FFFFFF;
--l-evidenza-forte: #FDBC11; /* Giallo: numeri e parole chiave su blu */
--l-segnale: #FDBC11; /* bottone d'azione */
--l-su-segnale: #161B2E;
--l-linea: #D5DAE6; /* Linee */
--l-focus: #1B75BB;
--l-firma: none; /* l'anello della greca è tono su tono su blu: solo nelle zone scure */
--d-fondo: #16234D; /* Blu notte */
--d-fondo-2: #283A7B; /* Blu UNICURS */
--d-superficie: #283A7B;
--d-testo: #FFFFFF;
--d-testo-2: #D5DAE6;
--d-titoli: #FFFFFF;
--d-link: #FDBC11;
--d-accento: #FDBC11;
--d-su-accento: #161B2E;
--d-forte: #283A7B;
--d-su-forte: #FFFFFF;
--d-evidenza-forte: #FDBC11;
--d-segnale: #FDBC11;
--d-su-segnale: #161B2E;
--d-linea: #4B5270;
--d-focus: #FDBC11;
--d-firma: url("../marchi/unicurs/unicurs-anello-greca-tono-su-blu.svg");
--font-titoli: "Montserrat", "Century Gothic", sans-serif;
--font-testo: "Montserrat", "Century Gothic", sans-serif;
--font-codice: "Montserrat", "Century Gothic", sans-serif;
--peso-titoli: 800;
--peso-numeri: 800;
--peso-sottotitoli: 700;
--peso-occhiello: 600;
--tracking-titoli: -0.01em;
--tracking-occhiello: 0.16em;
--raggio: 4px;
--raggio-card: 4px;
/* anello tagliato dall'angolo in basso a destra */
--firma-larghezza: 20rem;
--firma-altezza: 20rem;
--firma-posizione: center;
--firma-inset: auto -7rem -7rem auto;
}
/* Filetto a greca UNICURS: separatore delle testate di blocco */
[data-marchio="unicurs"] .filetto-marchio {
display: block;
height: 0.5rem;
width: min(100%, 12rem);
background: url("../marchi/unicurs/unicurs-greca-filetto-blu.svg") repeat-x left center / auto 100%;
}
[data-theme="dark"][data-marchio="unicurs"] .filetto-marchio,
[data-theme="dark"] [data-marchio="unicurs"]:not([data-theme="light"], [data-theme="dark"] [data-theme="light"] *) .filetto-marchio {
background-image: url("../marchi/unicurs/unicurs-greca-filetto-bianco.svg");
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) [data-marchio="unicurs"]:not([data-theme="light"], [data-theme="light"] *) .filetto-marchio,
:root:not([data-theme="light"])[data-marchio="unicurs"] .filetto-marchio {
background-image: url("../marchi/unicurs/unicurs-greca-filetto-bianco.svg");
}
}
/* ------------------------------------------------------------------ M&F (nessun kit: brief di lavoro)
brand-brief_MF.md: navy primario, verde #81A240 (verde del vettoriale) come barra d'accento,
Archivo per i titoli e Inter per il resto. Il logo non ha versione per fondo scuro:
ogni blocco con il logo M&F resta chiaro. */
[data-marchio="mf"] {
--l-fondo: #FFFFFF;
--l-fondo-2: #F7F8FA; /* paper */
--l-superficie: #FFFFFF;
--l-testo: #1B1C2E; /* ink */
--l-testo-2: #565C72; /* slate */
--l-titoli: #393B5E; /* navy 10,7:1 */
--l-link: #2E7A8C; /* cyan-ink */
--l-accento: #81A240; /* green: barra */
--l-su-accento: #1B1C2E;
--l-forte: #393B5E;
--l-su-forte: #FFFFFF;
--l-evidenza-forte: #6CC6D9; /* cyan su navy 5,5:1 */
--l-segnale: #393B5E;
--l-su-segnale: #FFFFFF;
--l-linea: #E4E5EC; /* line */
--l-focus: #2E7A8C;
--l-firma: none;
--d-fondo: #1B1C2E; /* ink */
--d-fondo-2: #393B5E; /* navy */
--d-superficie: #393B5E;
--d-testo: #FFFFFF;
--d-testo-2: #E4E5EC;
--d-titoli: #FFFFFF;
--d-link: #6CC6D9;
--d-accento: #81A240;
--d-su-accento: #1B1C2E;
--d-forte: #393B5E;
--d-su-forte: #FFFFFF;
--d-evidenza-forte: #6CC6D9;
--d-segnale: #6CC6D9;
--d-su-segnale: #1B1C2E;
--d-linea: #565C72;
--d-focus: #6CC6D9;
--d-firma: none;
--font-titoli: "Archivo", "Inter", system-ui, sans-serif;
--font-testo: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-codice: "Inter", system-ui, sans-serif;
--peso-titoli: 700;
--peso-numeri: 700;
--peso-sottotitoli: 600;
--peso-occhiello: 600;
--tracking-titoli: -0.01em;
--tracking-occhiello: 0.08em;
--raggio: 8px;
--raggio-bottone: 8px;
--raggio-card: 14px;
}
/* Barra verde M&F sotto il titolo del blocco */
[data-marchio="mf"] .filetto-marchio {
display: block;
width: 3rem;
height: 4px;
background: var(--accento);
}
/* ------------------------------------------------------------------ JOB&Orienta 2026
Media kit ufficiale: logo solo nero o bianco, mai ricolorato. Il colore della fiera è il mosaico
della grafica ufficiale: qui solo come fascia o cornice (.fascia-fiera, .cornice-fiera), mai sotto
testi. Colori campionati dalle grafiche: #1B1B19 #223F8D #019EE3 #7FBA46 #01A765 #FFE10D #F8AE17
#EB6645 #CE3A52 #F4A896. Il mosaico è il file ufficiale del media kit ritagliato via CSS, mai ridisegnato. Il marchio Veronafiere non si usa (Regolamento art. 16.1 c). */
[data-fiera="joborienta-2026"] {
/* File ufficiale del media kit, non modificato (assets/marchi/joborienta/...-cover-1800x940-senza-titolo.jpg).
L'url() è relativo a questo CSS: ../marchi/ vale da ogni pagina. Stesse variabili della versione precedente. */
--l-fascia-fiera: url("../marchi/joborienta/joborienta-2026-cover-1800x940-senza-titolo.jpg");
--d-fascia-fiera: var(--l-fascia-fiera);
--mosaico-dimensione: max(100%, 48rem) auto; /* sotto 48 rem si vede la parte sinistra, senza ridurre il mosaico */
--mosaico-posizione: left 71%; /* fascia ritagliata sulla sola parte a mosaico (dal 60% dell'altezza in giù) */
}
/* La cover contiene titolo e data in alto: qui si mostra solo la striscia a mosaico, ritagliata via CSS. */
[data-fiera="joborienta-2026"] .fascia-fiera,
[data-fiera="joborienta-2026"].fascia-fiera,
[data-fiera="joborienta-2026"].cornice-fiera,
[data-fiera="joborienta-2026"] .cornice-fiera { --fascia-h: 4.5rem; }
@media (max-width: 40rem) {
[data-fiera="joborienta-2026"] .fascia-fiera,
[data-fiera="joborienta-2026"].fascia-fiera,
[data-fiera="joborienta-2026"].cornice-fiera,
[data-fiera="joborienta-2026"] .cornice-fiera { --fascia-h: 3rem; }
}
[data-fiera="joborienta-2026"] .fascia-fiera,
[data-fiera="joborienta-2026"].fascia-fiera {
background-repeat: no-repeat;
background-size: var(--mosaico-dimensione);
background-position: var(--mosaico-posizione);
}
[data-fiera="joborienta-2026"].cornice-fiera::before,
[data-fiera="joborienta-2026"].cornice-fiera::after,
[data-fiera="joborienta-2026"] .cornice-fiera::before,
[data-fiera="joborienta-2026"] .cornice-fiera::after {
background-image: var(--fascia-fiera);
background-repeat: no-repeat;
background-size: var(--mosaico-dimensione);
background-position: var(--mosaico-posizione);
}