/* ==========================================================================
AGAMI Research Center — Design System
Identità: azzurro euro-mediterraneo istituzionale (blu profondo diplomatico
+ accento rame/oro discreto), superfici avorio e azzurro tenue.
serif Lora/Cormorant + sans Inter. Sobrio, istituzionale, premium. WCAG 2.1 AA.
Palette progettata in spazio OKLCH (neutri tinti verso il blu, niente nero/
bianco puri) ed espressa in HEX per massima compatibilità browser.
NB: i token storici --navy* contengono il BLU istituzionale; i nomi sono
mantenuti per non toccare classi e markup (.btn-navy, .section--navy).
========================================================================== */
/* --------------------------------------------------------------------------
1 · Token
-------------------------------------------------------------------------- */
:root {
/* Brand — azzurro istituzionale euro-mediterraneo (blu profondo) */
--navy: #1E3A60; /* primario istituzionale (blu profondo) */
--navy-deep: #16304F; /* gradiente intermedio */
--navy-darker: #0F2238; /* notte: footer / sezioni scure */
--navy-light: #2F6099; /* stato hover (azzurro più vivo) */
--gold: #9C7A3C; /* oro accademico: accento premium discreto */
--gold-light: #C8AA6E;
--gold-pale: #E7DCC4;
--gold-soft: rgba(156, 122, 60, .10);
--gold-text: #7A5E2E; /* oro scurito per testo piccolo (AA) */
--copper: #B87333; /* rame: accento premium (cornici, dettagli) */
--copper-soft: rgba(184, 115, 51, .30);
/* Azzurro mediterraneo: canvas arioso + accenti azzurri tenui */
--azure-bg: #EDF3FA; /* sfondo pagina: azzurro chiaro elegante */
--azure-soft: #E3EDF8; /* riempimenti/hover azzurri tenui */
--azure-line: #CFE0F0; /* filo azzurro per bordi/accenti */
/* Neutri freddi (tinti verso il blu, niente nero/bianco puri) */
--ink: #14253B; /* titoli su chiaro (blu-ardesia quasi-nero) */
--body-color: #36424F; /* corpo testo (ardesia fredda) */
--muted: #586675; /* testo secondario (grigio-blu) */
--faint: #505C6B; /* testo piccolo: >=4.5:1 anche su --mist */
--paper: #FCFDFE; /* superficie carta (bianco freddo) */
--ivory: #F7F3EA; /* avorio caldo (alternanza mediterranea) */
--mist: #E3EDF7; /* azzurro tenue (sezioni alternate) */
--border: #D6E1ED; /* bordo blu-grigio sottile */
--border-soft: #E4EBF3;
/* Tipografia */
--display: "Cormorant Garamond", "Lora", Georgia, "Times New Roman", serif;
--serif: "Lora", Georgia, "Times New Roman", serif;
--sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
/* Geometria */
/* Tre larghezze di layout. --maxw e' la larghezza standard; --maxw-narrow
resta fissa (colonna di lettura sempre leggibile, indipendente dallo
schermo); --maxw-wide e' per le pagine ricche di griglie/dashboard.
--maxw e --maxw-wide crescono solo sui desktop grandi (vedi i @media
piu' in basso): cosi' su 1440/1536/1920 i contenitori principali usano
piu' spazio orizzontale senza toccare il padding laterale ne' i
breakpoint mobile/tablet. */
--maxw: 1300px;
--maxw-narrow: 840px;
--maxw-wide: 1480px;
/* Motivo geometrico euro-mediterraneo (stella a 8 punte): filigrana
decorativa molto leggera per navbar/sidebar/footer. */
--oriental: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cg fill='none' stroke='%231E3A60' stroke-width='1'%3E%3Crect x='12' y='12' width='22' height='22'/%3E%3Crect x='12' y='12' width='22' height='22' transform='rotate(45 23 23)'/%3E%3C/g%3E%3C/svg%3E");
--oriental-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cg fill='none' stroke='%23C2A269' stroke-width='1'%3E%3Crect x='12' y='12' width='22' height='22'/%3E%3Crect x='12' y='12' width='22' height='22' transform='rotate(45 23 23)'/%3E%3C/g%3E%3C/svg%3E");
--radius: 14px;
--radius-sm: 9px;
/* Ombre a doppio strato: una vicina e netta + una larga e tenue. La caduta
morbida (cumulo di due livelli) dà profondità "costosa", non plasticosa. */
--shadow-sm: 0 1px 2px rgba(20, 40, 70, .04), 0 4px 10px rgba(20, 40, 70, .05);
--shadow-md: 0 2px 6px rgba(20, 40, 70, .05), 0 16px 38px rgba(20, 40, 70, .11);
--shadow-lg: 0 8px 24px rgba(20, 40, 70, .09), 0 34px 74px rgba(20, 40, 70, .17);
/* Alone caldo per il bottone oro (coerente con l'identità, non un drop grigio). */
--shadow-gold: 0 6px 16px rgba(120, 90, 35, .22), 0 14px 30px rgba(120, 90, 35, .18);
/* Transizioni */
--ease: cubic-bezier(.22, .61, .36, 1);
}
/* --------------------------------------------------------------------------
2 · Reset e base
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
font-family: var(--sans);
font-size: 1rem;
line-height: 1.75;
color: var(--body-color);
background: var(--azure-bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5 {
font-family: var(--serif);
color: var(--ink);
line-height: 1.25;
margin: 0 0 .75rem;
font-weight: 600;
text-wrap: balance;
}
/* Titoli display: Cormorant Garamond — alta classe editoriale/istituzionale.
Cormorant rende più piccolo e leggero, quindi alziamo corpo e contrasto. */
h1, h2 {
font-family: var(--display);
font-weight: 600;
/* Cormorant a corpo grande chiede tracking NEGATIVO: rende il titolo
"inciso", monumentale ed editoriale (la cifra dei titoli di testata). */
letter-spacing: -.012em;
line-height: 1.1;
}
h1 { font-size: clamp(2.6rem, 5.4vw, 4.2rem); }
h2 { font-size: clamp(2.05rem, 3.85vw, 3.2rem); }
h3 { font-size: clamp(1.22rem, 2vw, 1.5rem); }
h4 { font-size: 1.12rem; }
p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }
a {
color: var(--navy);
text-decoration-color: rgba(47, 96, 153, .42);
text-underline-offset: 3px;
transition: color .22s var(--ease), text-decoration-color .22s var(--ease);
}
a:hover { color: var(--navy-light); text-decoration-color: var(--navy-light); }
ul, ol { padding-left: 1.3rem; margin: 0 0 1.1rem; }
li { margin-bottom: .35rem; }
blockquote {
position: relative;
margin: 1.6rem 0;
padding: 1.15rem 1.6rem;
border-inline-start: 3px solid var(--gold);
background: var(--ivory);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
font-family: var(--serif);
font-style: italic;
font-size: 1.08rem;
color: var(--navy);
}
/* RTL: arrotondamento dal lato corretto (accento già logico) */
[dir="rtl"] blockquote { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
/* Virgoletta tipografica dorata SOLO nei blocchi editoriali in .prose
(le citazioni "hero" a stile inline restano pulite). */
.prose blockquote { padding-inline-start: 2.8rem; }
.prose blockquote::before {
content: "\201C";
position: absolute; inset-inline-start: .55rem; top: .05rem;
font-family: var(--display); font-size: 2.7rem; line-height: 1;
color: var(--gold-light); opacity: .55; pointer-events: none;
}
[dir="rtl"] .prose blockquote::before { content: "\201D"; }
hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }
::selection { background: var(--navy); color: #fff; }
/* Accessibilità */
.skip-link {
/* nascosto con offset verticale: nessun overflow orizzontale (LTR/RTL) */
position: absolute;
top: -100px;
inset-inline-start: 0;
z-index: 2000;
background: var(--navy);
color: #fff;
padding: .65rem 1.2rem;
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.skip-link:focus { top: 0; color: #fff; }
:focus-visible {
outline: 3px solid var(--navy-light);
outline-offset: 2px;
border-radius: 2px;
}
/* Contesti scuri (header scuro, sezioni blu, footer, hero): anello oro
per garantire contrasto del focus anche su fondo blu profondo. */
.section--navy :focus-visible,
.topbar :focus-visible,
.hero :focus-visible,
.site-footer :focus-visible { outline-color: var(--gold-light); }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
}
/* --------------------------------------------------------------------------
3 · Layout
-------------------------------------------------------------------------- */
.container {
width: 100%;
max-width: var(--maxw);
margin-inline: auto;
padding-inline: clamp(1.1rem, 3.4vw, 2.4rem);
}
/* Distinzione "contenuto stretto" vs "layout largo". La colonna di lettura
(.container--narrow) non cresce mai: la leggibilita' del testo resta
costante. Le pagine con griglie/sidebar (.container--wide, es. area
personale) sfruttano piu' larghezza sui grandi desktop. */
.container--narrow { max-width: var(--maxw-narrow); }
.container--wide { max-width: var(--maxw-wide); }
/* Allargamento progressivo dei contenitori sui desktop grandi. Solo i token
crescono: padding laterale e breakpoint mobile/tablet restano invariati.
I blocchi di testo conservano i propri max-width interni (.prose,
.section-head, .hero-inner, ...), quindi la riga di lettura non si allarga. */
@media (min-width: 1440px) {
:root { --maxw: 1440px; --maxw-wide: 1560px; }
}
@media (min-width: 1536px) {
:root { --maxw: 1520px; --maxw-wide: 1680px; }
}
@media (min-width: 1920px) {
:root { --maxw: 1640px; --maxw-wide: 1840px; }
}
.section { padding: clamp(3.6rem, 8vw, 7.4rem) 0; }
.section--ivory { background: linear-gradient(180deg, #FBF8F1 0%, var(--ivory) 60%, #F3EEE2 100%); }
.section--mist { background: linear-gradient(180deg, #EAF1FB 0%, var(--mist) 60%, #DCE8F5 100%); }
.section--navy {
background: linear-gradient(165deg, var(--navy-deep) 0%, var(--navy) 90%);
color: rgba(255, 255, 255, .88);
}
.section--navy h2, .section--navy h3 { color: #fff; }
.section--tight { padding: clamp(2.2rem, 5vw, 3.5rem) 0; }
.grid { display: grid; gap: 1.5rem; }
/* Grid children default to min-width:auto and can overflow the track on narrow
viewports (long words, wide media). min-width:0 lets them shrink correctly. */
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991.98px) {
.grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639.98px) {
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
/* Etichette di sezione */
/* Eyebrow = firma di sezione AGAMI: maiuscoletto tracciato + filo oro che
sfuma. Ricorre identico in hero, sezioni, card featured: è il motivo di
brand che dà coerenza editoriale a tutto il sito. */
.kicker {
display: inline-flex;
align-items: center;
gap: .72rem;
font-size: .7rem;
font-weight: 600;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--gold-text);
margin-bottom: 1.1rem;
}
.kicker::before {
content: "";
width: 2.4rem;
height: 1px;
background: linear-gradient(90deg, var(--gold), rgba(156, 122, 60, .12));
}
[dir="rtl"] .kicker::before { background: linear-gradient(270deg, var(--gold), rgba(156, 122, 60, .12)); }
/* Eyebrow centrato: filo simmetrico ai due lati (firma più formale) */
.section-head--center .kicker::after {
content: "";
width: 2.4rem;
height: 1px;
background: linear-gradient(270deg, var(--gold), rgba(156, 122, 60, .12));
}
.section--navy .kicker { color: var(--gold-light); }
.section--navy .kicker::before { background: var(--gold-light); }
.section-head { max-width: 780px; margin-bottom: clamp(2.4rem, 4.6vw, 3.9rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .kicker { justify-content: center; }
.section-head h2 { letter-spacing: -.012em; }
.section-head .lead { font-size: clamp(1.08rem, 1.4vw, 1.22rem); color: var(--muted); line-height: 1.65; }
.section--navy .section-head .lead { color: rgba(255, 255, 255, .75); }
/* --------------------------------------------------------------------------
4 · Header
-------------------------------------------------------------------------- */
.topbar {
background: var(--navy-darker);
color: rgba(255, 255, 255, .78);
font-size: .8rem;
padding: .42rem 0;
border-bottom: 1px solid rgba(194, 162, 105, .22);
}
.topbar .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.topbar a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.topbar a:hover { color: var(--gold-light); }
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 1.1rem; }
.topbar .bi { margin-right: .35rem; color: var(--gold-light); }
/* Email in topbar: icona e testo allineati al centro con respiro coerente
(gap invece del solo margine: niente "incollato", corretto anche in RTL). */
.topbar-left a { display: inline-flex; align-items: center; gap: .5rem; }
.topbar-left a .bi { margin: 0; }
@media (max-width: 991.98px) {
/* Nasconde il tag decorativo "Italia · Marocco · Mediterraneo" su tablet:
evita l'overflow orizzontale della topbar nella fascia ~768-991px. */
.topbar-right .topbar-tag { display: none; }
}
@media (max-width: 575.98px) {
/* su schermi stretti la topbar va a capo, centrata: mai overflow */
.topbar .container {
flex-wrap: wrap;
justify-content: center;
row-gap: .15rem;
}
.topbar-left, .topbar-right {
flex-wrap: wrap;
justify-content: center;
}
/* Mobile: i social della topbar (già presenti nel footer) vanno nascosti,
altrimenti l'icona YouTube finisce da sola su una nuova riga. Restano
ricerca + selettore lingua, su un'unica riga pulita. */
.topbar-right > a[target="_blank"] { display: none; }
}
/* Language selector premium (topbar): trigger globo oro + popup istituzionale.
Sostituisce la vecchia fila di iniziali. Nomi completi + micro-accenti
cromatici (non bandiere) per ogni lingua. RTL via proprietà logiche. */
.lang-select { position: relative; display: inline-flex; margin-inline: .25rem; }
.lang-trigger {
display: inline-flex; align-items: center; gap: .4rem;
padding: .26rem .62rem; border-radius: 999px;
background: rgba(194, 162, 105, .14); border: 1px solid rgba(194, 162, 105, .42);
color: rgba(255, 255, 255, .9); font: inherit; font-size: .74rem; font-weight: 700;
letter-spacing: .06em; cursor: pointer;
transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.lang-trigger__globe { color: var(--gold-light); font-size: .98rem; }
.lang-trigger__caret { font-size: .58rem; color: rgba(255, 255, 255, .6); transition: transform .25s var(--ease); }
.lang-trigger:hover { background: rgba(194, 162, 105, .24); border-color: var(--gold-light); color: #fff; }
.lang-trigger:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.lang-select.is-open .lang-trigger { background: rgba(194, 162, 105, .28); border-color: var(--gold-light); color: #fff; }
.lang-select.is-open .lang-trigger__caret { transform: rotate(180deg); }
.lang-popup {
position: absolute; top: calc(100% + .55rem); inset-inline-end: 0; z-index: 1100;
min-width: 234px; max-width: calc(100vw - 1.5rem);
background: linear-gradient(170deg, #fff 0%, var(--ivory) 100%);
border: 1px solid rgba(156, 122, 60, .34); border-radius: 14px;
box-shadow: 0 18px 44px rgba(9, 20, 36, .22), 0 2px 8px rgba(9, 20, 36, .10);
padding: .7rem; opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.lang-select.is-open .lang-popup { opacity: 1; visibility: visible; transform: none; }
.lang-popup__head {
margin: .15rem .55rem .55rem; font-size: .62rem; font-weight: 700; letter-spacing: .16em;
text-transform: uppercase; color: var(--gold-text);
}
.lang-popup__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .12rem; }
.lang-opt {
position: relative; display: flex; align-items: center; gap: .6rem;
padding: .6rem .85rem; border-radius: 10px; text-decoration: none; color: var(--ink);
transition: box-shadow .2s var(--ease), color .2s var(--ease);
}
.lang-opt__flag { display: none; } /* i colori ora velano il fondo della riga */
.lang-opt__name { flex: 1; font-size: .94rem; font-weight: 600; text-align: start; }
.lang-opt__check { color: var(--gold-text); font-size: 1rem; opacity: 0; }
/* La topbar colora i link in bianco (.topbar a): nel popup chiaro va annullato,
altrimenti i nomi delle lingue risultano illeggibili (chiaro su chiaro). */
.topbar .lang-popup .lang-opt { color: var(--ink); }
/* hover/focus/active come anello oro + lieve velo oro SOPRA il sottofondo
nazionale (inset 999px = riempimento traslucido che non copre il colore). */
.lang-opt:hover, .lang-opt:focus-visible {
box-shadow: inset 0 0 0 999px rgba(156, 122, 60, .07), inset 0 0 0 1px rgba(156, 122, 60, .4); outline: none;
}
/* Lingua attiva: chiaramente DORATA — velo oro più deciso + anello oro pieno +
barretta oro a inizio riga + spunta oro, sopra il (tenue) sottofondo nazionale. */
.lang-opt.is-active {
background: linear-gradient(90deg, rgba(196, 162, 96, .44) 0%, rgba(234, 214, 162, .32) 50%, rgba(196, 162, 96, .44) 100%);
box-shadow: inset 0 0 0 1.5px var(--gold);
}
.lang-opt.is-active::before {
content: ""; position: absolute; inset-inline-start: 5px; top: 9px; bottom: 9px;
width: 3px; border-radius: 3px; background: var(--gold);
}
.lang-opt.is-active .lang-opt__name { font-weight: 700; color: var(--navy); padding-inline-start: .4rem; }
.lang-opt.is-active .lang-opt__check { opacity: 1; }
/* Sottofondo cromatico nazionale: i colori della bandiera velati DIETRO il nome
della lingua, come whisper orizzontale elegante (non una bandiera). Tinte molto
tenui: il testo scuro resta sempre leggibile (AA). */
/* Sottofondo nazionale: colori ai lati che sfumano nel fondo avorio del popup
(niente banda bianca "lucicante"; il centro è l'avorio naturale). */
.lang-opt--it { background: linear-gradient(90deg, rgba(0, 140, 69, .36) 0%, rgba(255, 255, 255, 0) 38% 62%, rgba(205, 33, 42, .34) 100%); }
.lang-opt--fr { background: linear-gradient(90deg, rgba(0, 85, 164, .36) 0%, rgba(255, 255, 255, 0) 38% 62%, rgba(239, 65, 53, .34) 100%); }
.lang-opt--es { background: linear-gradient(90deg, rgba(170, 21, 27, .34) 0%, rgba(241, 191, 0, .40) 50%, rgba(170, 21, 27, .34) 100%); }
.lang-opt--ar { background: linear-gradient(90deg, rgba(0, 98, 51, .38) 0%, rgba(0, 98, 51, .10) 55%, rgba(193, 39, 45, .34) 100%); }
.lang-opt--en { background: linear-gradient(90deg, rgba(30, 58, 96, .32) 0%, rgba(255, 255, 255, 0) 55%, rgba(156, 122, 60, .36) 100%); }
@media (prefers-reduced-motion: reduce) {
.lang-popup, .lang-trigger__caret { transition: none; }
}
/* Language switcher nel menu mobile */
.nav-lang-mobile { display: none; }
@media (max-width: 1199.98px) {
.nav-lang-mobile {
display: block; margin-top: 1.3rem; padding: 1.25rem 1.1rem; border-bottom: 0;
background: rgba(255, 255, 255, .6); border: 1px solid var(--border); border-radius: 16px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
.nav-lang-label {
display: block;
font-size: .66rem;
font-weight: 700;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--gold-text);
margin-bottom: .75rem;
}
.nav-lang-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.nav-lang-list a {
padding: .48rem .95rem;
border: 1px solid var(--border);
border-radius: 999px;
font-size: .85rem;
font-weight: 600;
color: var(--body-color);
text-decoration: none;
background: #fff;
transition: border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.nav-lang-list a:hover { border-color: var(--gold); color: var(--gold-text); box-shadow: 0 4px 12px rgba(15, 34, 56, .07); }
.nav-lang-list a.active {
background: var(--navy);
border-color: var(--navy);
color: #fff;
}
}
@media (min-width: 1200px) {
.nav-lang-mobile { display: none !important; }
}
/* Language switcher nel footer */
.footer-lang { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }
.footer-lang a {
padding: .25rem .7rem;
border: 1px solid rgba(255, 255, 255, .25);
border-radius: 999px;
font-size: .74rem;
font-weight: 600;
color: rgba(255, 255, 255, .72);
text-decoration: none;
transition: all .25s var(--ease);
}
.footer-lang a:hover { color: var(--gold-light); border-color: rgba(194, 162, 105, .6); }
.footer-lang a.active {
background: rgba(194, 162, 105, .2);
border-color: rgba(194, 162, 105, .65);
color: #fff;
}
.site-header {
position: sticky;
top: 0;
z-index: 1000;
background: rgba(255, 255, 255, .96);
backdrop-filter: saturate(160%) blur(10px);
-webkit-backdrop-filter: saturate(160%) blur(10px);
border-bottom: 1px solid var(--border-soft);
transition: box-shadow .3s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(22, 48, 79, .10); }
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
padding-block: .72rem;
}
.brand {
display: flex;
align-items: center;
text-decoration: none;
color: var(--navy);
flex-shrink: 0;
}
/* Logo trasparente, senza cornice: si fonde con la navbar bianca */
.brand-logo,
.brand img {
height: 66px;
width: auto;
display: block;
transition: height .3s var(--ease);
}
.site-header.is-scrolled .brand-logo,
.site-header.is-scrolled .brand img { height: 54px; }
@media (max-width: 575.98px) {
.brand-logo, .brand img { height: 50px; }
.site-header.is-scrolled .brand-logo, .site-header.is-scrolled .brand img { height: 46px; }
}
.brand-text { display: flex; flex-direction: column; line-height: 1.18; min-width: 0; }
.brand-name {
font-family: var(--serif);
font-weight: 700;
font-size: 1.22rem;
letter-spacing: .14em;
color: var(--navy);
}
.brand-sub {
font-size: .6rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--gold-text);
font-weight: 600;
white-space: nowrap;
}
@media (max-width: 479.98px) {
.brand-sub { white-space: normal; letter-spacing: .12em; }
}
/* Navigazione principale */
.main-nav { display: flex; align-items: center; }
/* Intestazione + ricerca del menu mobile: visibili solo nel pannello mobile */
.mobile-menu-head, .mobile-search { display: none; }
.nav-list {
display: flex;
align-items: center;
gap: .15rem;
list-style: none;
margin: 0;
padding: 0;
}
.nav-item { position: relative; }
.nav-link {
display: inline-flex;
align-items: center;
gap: .25rem;
padding: .55rem .5rem;
font-size: .83rem;
font-weight: 500;
color: var(--ink);
text-decoration: none;
border-radius: var(--radius-sm);
white-space: nowrap;
transition: background .25s var(--ease), color .25s var(--ease);
}
/* Sul desktop la voce resta inline (icona + etichetta + chevron); la microcopy
è solo per il menu mobile istituzionale. */
.nav-link__text { display: contents; }
.nav-link__desc { display: none; }
/* Desktop horizontal nav (shown >=1200px). Nine top-level entries plus the
account and language controls are dense; the longest locales (FR/ES) would
otherwise overflow the 1180px container and force a horizontal scrollbar.
Keep the bar compact so every language fits cleanly down to 1200px. */
@media (min-width: 1200px) {
.header-inner { gap: .6rem; }
.nav-list { gap: .05rem; }
.nav-link { font-size: .8rem; padding-inline: .34rem; gap: .16rem; }
}
.nav-link .bi-chevron-down { font-size: .6rem; color: var(--faint); transition: transform .25s var(--ease); }
.nav-link:hover, .nav-item.is-open > .nav-link { background: var(--azure-soft); color: var(--navy); }
.nav-link.is-active { color: var(--navy); background: var(--azure-soft); }
.nav-link.is-active::after {
content: "";
position: absolute;
left: .55rem; right: .55rem; bottom: .12rem;
height: 2.5px;
background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
border-radius: 2px;
}
.nav-item.is-open > .nav-link .bi-chevron-down { transform: rotate(180deg); }
.dropdown {
position: absolute;
top: calc(100% + .4rem);
left: 0;
min-width: 250px;
background: #fff;
border: 1px solid var(--border-soft);
border-top: 3px solid var(--gold);
border-radius: 0 0 var(--radius) var(--radius);
box-shadow: var(--shadow-lg);
padding: .55rem;
list-style: none;
margin: 0;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
z-index: 1001;
/* Salvaguardia: anche con etichette tradotte molto lunghe un dropdown non
puo' superare il viewport, cosi' il riallineamento non sfora il bordo
opposto. (-2rem > tipica scrollbar verticale, quindi non causa overflow.) */
max-width: calc(100vw - 2rem);
}
.nav-item.is-open > .dropdown,
.nav-item:focus-within > .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown li { margin: 0; }
.dropdown a {
display: block;
padding: .5rem .75rem;
font-size: .86rem;
color: var(--body-color);
text-decoration: none;
border-radius: var(--radius-sm);
}
.dropdown a:hover { background: var(--ivory); color: var(--navy); }
/* Dropdown raggruppato ("mega") della voce Home: le sotto-voci istituzionali
sono divise in gruppi logici con una piccola intestazione. Su mobile il
pannello e' statico (display:block ereditato da .dropdown) e i gruppi si
impilano; su desktop diventa una griglia compatta a colonne. */
.dropdown--mega .dropdown-group { min-width: 0; }
.dropdown--mega .dropdown-group + .dropdown-group { margin-top: .5rem; }
.dropdown--mega .dropdown-group ul { list-style: none; margin: 0; padding: 0; }
.dropdown-group__heading {
margin: 0 0 .2rem;
padding: 0 .75rem;
font-size: .64rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--gold-text);
}
@media (min-width: 1200px) {
.dropdown--mega {
width: max-content;
/* tre gruppi affiancati senza diventare enorme; mai oltre il viewport */
max-width: min(640px, calc(100vw - 2rem));
display: grid;
grid-template-columns: repeat(3, minmax(168px, 1fr));
align-items: start;
gap: .15rem 1rem;
padding: .9rem 1rem 1rem;
}
.dropdown--mega .dropdown-group + .dropdown-group { margin-top: 0; }
}
/* Ancoraggio verso il bordo interno (inline-end) del dropdown. La classe e'
semantica e indipendente da ordine/conteggio delle voci: e' impostata come
baseline statica in header.html (flag align_end nei dati di navigazione) e
puo' essere aggiunta/rimossa a runtime da agami.js in base alla geometria
reale. Sostituisce il vecchio selettore fragile :nth-last-child(-n+4).
Niente nth-child, niente overflow-x globale. */
.nav-item--align-end > .dropdown {
left: auto;
right: 0;
}
/* Toggle mobile */
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 46px;
height: 46px;
padding: 11px;
background: none;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
cursor: pointer;
}
.nav-toggle span {
display: block;
height: 2px;
width: 100%;
background: var(--navy);
border-radius: 2px;
transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1199.98px) {
.nav-toggle { display: flex; }
/* backdrop-filter creerebbe un containing block per il pannello fixed */
.site-header {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: #fff;
}
/* ====== Sidebar / menu mobile — pannello istituzionale premium ======
Superficie avorio stratificata + filigrana geometrica, ricerca dedicata,
voci con medaglione icona, hover/active sollevati, dropdown raffinati,
CTA account in navy e piede con selettore lingua. */
.main-nav {
position: fixed;
inset: 0;
top: var(--header-h, 76px);
background:
radial-gradient(120% 60% at 100% 0%, rgba(227, 237, 248, .9) 0%, rgba(227, 237, 248, 0) 60%),
linear-gradient(180deg, #ffffff 0%, #eef3fb 55%, var(--ivory) 100%);
overflow-y: auto;
padding: 1.35rem 1.15rem 4rem;
display: none;
z-index: 999;
box-shadow: inset 0 16px 26px -20px rgba(15, 34, 56, .55);
}
.main-nav.is-open { display: block; animation: navPanelIn .34s var(--ease); }
.main-nav::before {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background-image: var(--oriental); background-size: 52px 52px; opacity: .05;
}
.main-nav > * { position: relative; z-index: 1; }
.mobile-menu-head { display: flex; align-items: center; gap: .9rem; margin: .1rem .2rem 1.3rem; }
.mobile-menu-head__text { display: flex; flex-direction: column; gap: .18rem; }
.mobile-menu-kicker {
font-size: .66rem; font-weight: 700; letter-spacing: .28em;
text-transform: uppercase; color: var(--gold-text);
}
.mobile-menu-tag { font-family: var(--serif); font-style: italic; font-size: .82rem; color: var(--muted); }
.mobile-menu-rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(156, 122, 60, .5), rgba(156, 122, 60, 0)); align-self: center; }
[dir="rtl"] .mobile-menu-rule { background: linear-gradient(270deg, rgba(156, 122, 60, .5), rgba(156, 122, 60, 0)); }
.mobile-search {
display: flex; align-items: center; gap: .65rem; margin: 0 0 1.3rem;
background: #fff; border: 1px solid var(--border); border-radius: 14px;
padding: .72rem 1rem; box-shadow: 0 8px 22px rgba(15, 34, 56, .07);
transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.mobile-search:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.mobile-search .bi { color: var(--gold-text); font-size: 1.12rem; }
.mobile-search input { flex: 1; border: 0; outline: none; background: transparent; font: inherit; color: var(--ink); min-width: 0; }
.nav-list { flex-direction: column; align-items: stretch; gap: .25rem; }
.nav-item { border: 0; }
.nav-link {
width: 100%;
justify-content: flex-start;
gap: .8rem;
padding: .72rem .65rem;
font-size: 1.02rem; font-weight: 600; color: var(--navy);
border-radius: 14px; letter-spacing: .005em;
transition: background .24s var(--ease), box-shadow .24s var(--ease), color .24s var(--ease);
}
/* Medaglione icona — riattivato e valorizzato sul mobile */
.main-nav .nav-link__icon {
display: grid; place-items: center; flex: none;
width: 40px; height: 40px; border-radius: 12px; margin: 0;
background: linear-gradient(150deg, var(--azure-soft) 0%, #ffffff 100%);
color: var(--navy); font-size: 1.04rem; opacity: 1; transform: none;
box-shadow: inset 0 0 0 1px rgba(156, 122, 60, .24);
transition: background .24s var(--ease), color .24s var(--ease);
}
.nav-link .bi-chevron-down { margin-inline-start: auto; color: var(--faint); font-size: .72rem; }
.nav-link:hover, .nav-item.is-open > .nav-link {
background: #fff; box-shadow: 0 8px 20px rgba(15, 34, 56, .08); color: var(--navy);
}
.nav-link:hover .nav-link__icon, .nav-item.is-open > .nav-link .nav-link__icon {
background: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%); color: #fff;
}
/* Pagina corrente: superficie con velo oro + medaglione oro */
.nav-link.is-active { background: linear-gradient(150deg, rgba(231, 220, 196, .55) 0%, #fff 72%); box-shadow: 0 8px 20px rgba(15, 34, 56, .08); }
.nav-link.is-active .nav-link__icon {
background: linear-gradient(150deg, var(--gold) 0%, var(--gold-light) 100%);
color: #fff; box-shadow: inset 0 0 0 1px rgba(122, 94, 46, .4);
}
.nav-link.is-active::after { display: none; }
.nav-link__text { display: flex; flex-direction: column; gap: .12rem; min-width: 0; align-items: flex-start; }
.nav-link__desc { display: block; font-size: .73rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); line-height: 1.3; }
.nav-item--account .nav-link__text { align-items: center; }
.dropdown {
position: static;
min-width: 0;
border: 0;
box-shadow: none;
padding: 0 0 0 3.55rem;
margin: 0;
transform: none;
opacity: 1;
visibility: visible;
background: transparent;
display: block;
max-height: 0; overflow: hidden;
transition: max-height .4s var(--ease), padding .4s var(--ease);
}
[dir="rtl"] .dropdown { padding: 0 3.55rem 0 0; }
.nav-item.is-open > .dropdown { max-height: 760px; padding-block: .4rem .9rem; }
.dropdown--mega { display: block; width: auto; max-width: none; grid-template-columns: none; }
.dropdown-group + .dropdown-group { margin-top: .55rem; padding-top: .55rem; border-top: 1px solid rgba(15, 34, 56, .07); }
.dropdown a {
position: relative; display: block;
font-size: .95rem; padding: .5rem .7rem .5rem 1.15rem; border-radius: 9px; color: var(--body-color);
}
[dir="rtl"] .dropdown a { padding: .5rem 1.15rem .5rem .7rem; }
.dropdown a::before {
content: ""; position: absolute; inset-inline-start: .35rem; top: 50%; width: 5px; height: 5px;
margin-top: -2.5px; border-radius: 50%; background: var(--gold-light); opacity: .55;
transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.dropdown a:hover { background: #fff; color: var(--navy); box-shadow: 0 4px 14px rgba(15, 34, 56, .06); }
.dropdown a:hover::before { opacity: 1; transform: scale(1.25); }
.dropdown-group__heading {
padding-inline: .7rem; color: var(--gold-text); font-size: .64rem;
letter-spacing: .16em; text-transform: uppercase; font-weight: 700; margin-bottom: .15rem;
}
/* CTA account in navy + piede selettore lingua */
.nav-item--account { margin-top: 1.1rem; }
.nav-item--account .nav-link {
background: linear-gradient(150deg, var(--navy) 0%, var(--navy-darker) 100%);
color: #fff; justify-content: center; gap: .6rem;
box-shadow: 0 12px 26px rgba(15, 34, 56, .2);
}
.nav-item--account .nav-link:hover { color: #fff; box-shadow: 0 16px 32px rgba(15, 34, 56, .26); }
.nav-item--account .main-nav__placeholder { display: none; }
.nav-item--account .nav-link__icon {
background: rgba(255, 255, 255, .12) !important; color: var(--gold-light) !important;
box-shadow: inset 0 0 0 1px rgba(200, 170, 110, .42) !important;
}
}
@keyframes navPanelIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .main-nav.is-open { animation: none; } }
/* --------------------------------------------------------------------------
5 · Hero
-------------------------------------------------------------------------- */
.hero {
position: relative;
background:
linear-gradient(168deg, rgba(22, 48, 79, .94) 0%, rgba(22, 48, 79, .82) 55%, rgba(30, 58, 96, .72) 100%),
var(--navy-deep) center / cover no-repeat;
color: #fff;
overflow: hidden;
}
.hero--image { background-blend-mode: normal; }
/* HERO COMUNITÀ — editoriale premium NO-CROP. La foto di gruppo (≈3.16:1) è una
"plate" cinematografica INTERA, mostrata con width:100% + height:auto: il box
assume il rapporto naturale dell'immagine, quindi NESSUNA persona viene mai
rifilata, a nessun breakpoint. Dietro, la STESSA foto in `cover` sfocata e
scurita fa da fondale atmosferico (l'unico layer su cui agisce il Ken Burns).
Il testo è impilato SOPRA la plate, centrato, su scrim — non copre i volti. */
.hero--community {
background-color: var(--navy-darker);
display: flex;
flex-direction: column;
justify-content: center;
min-height: clamp(560px, 80vh, 780px);
isolation: isolate;
}
/* Fondale ATMOSFERICO (non è la foto leggibile): cover + blur + scurita. Riempie
lo spazio e dà profondità; il Ken Burns in scala agisce SOLO qui — mai sulla
plate intera, che perciò non zooma e non si taglia. */
.hero-bg {
position: absolute; inset: 0; z-index: 0;
background-image: var(--hero-img);
background-size: cover;
background-position: 50% 30%;
background-repeat: no-repeat;
filter: blur(22px) saturate(1.05) brightness(.5);
transform: scale(1.14); /* nasconde gli aloni del blur ai bordi */
}
@media (min-width: 768px) {
.hero-bg { will-change: transform; animation: heroKenScale 40s ease-in-out infinite alternate; }
@keyframes heroKenScale { from { transform: scale(1.14); } to { transform: scale(1.22); } }
}
/* Overlay direzionale sopra il fondale: contrasto del testo + stacco della plate
(centrato/verticale → intrinsecamente corretto anche in RTL). */
.hero--community::before {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
radial-gradient(125% 120% at 50% 0%, rgba(16, 36, 60, .26) 0%, rgba(9, 20, 35, .74) 100%),
linear-gradient(to bottom, rgba(8, 18, 32, .52) 0%, rgba(8, 18, 32, .16) 32%, rgba(8, 18, 32, .50) 100%);
}
/* Griglia hero: blocco testo (centrato) + plate fotografica intera, impilati. */
.hero--community > .hero-grid {
position: relative; z-index: 2; width: 100%;
display: flex; flex-direction: column; align-items: center;
gap: clamp(1.8rem, 3.6vw, 2.8rem);
padding-block: clamp(2.6rem, 5.5vw, 4.2rem);
}
.hero--community .hero-inner--home {
max-width: 880px; width: 100%; text-align: center; padding: 0;
}
.hero--community .hero-eyebrow { justify-content: center; text-shadow: 0 1px 3px rgba(7, 16, 29, .6), 0 2px 16px rgba(7, 16, 29, .8); }
.hero--community .hero-eyebrow::before { display: none; }
.hero--community .hero-headline { text-shadow: 0 2px 26px rgba(7, 16, 29, .55); margin-inline: auto; }
.hero--community .hero-text { color: rgba(255, 255, 255, .92); text-shadow: 0 1px 14px rgba(7, 16, 29, .6); margin-inline: auto; }
.hero--community .hero-actions { justify-content: center; }
/* Meta-line / signature: filo dorato + maiuscoletto discreto, centrata. */
.hero--community .hero-legal {
margin: 1.5rem auto 0; padding-top: 1rem;
border-top: 1px solid rgba(200, 170, 110, .32);
color: rgba(255, 255, 255, .72);
letter-spacing: .04em; max-width: 62ch;
}
/* PLATE fotografica INTERA: width:100% + height:auto → rapporto naturale, nessun
crop, tutte le persone visibili. Cornice premium (hairline oro + ombra) perché
la lastra sembri intenzionale e non una toppa. */
.hero-figure {
margin: 0; width: 100%; max-width: 1120px;
border-radius: var(--radius); overflow: hidden;
border: 1px solid rgba(200, 170, 110, .30);
box-shadow: 0 18px 50px rgba(5, 14, 27, .5);
background: var(--navy-darker);
}
.hero-photo { display: block; width: 100%; height: auto; }
/* Mobile: niente striscia immersiva tagliata. La plate resta INTERA (solo più
bassa) e incorniciata; il testo sta sopra. Altezza guidata dal contenuto. */
@media (max-width: 767.98px) {
.hero--community { min-height: auto; }
.hero--community > .hero-grid { padding-block: clamp(2.2rem, 7vw, 3rem); gap: 1.5rem; }
.hero--community .hero-headline { font-size: clamp(2.05rem, 8vw, 2.55rem); line-height: 1.14; }
.hero--community .hero-text { font-size: .98rem; }
.hero--community .hero-legal { max-width: none; }
}
.hero::after { /* filo dorato alla base */
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold-light) 50%, var(--gold) 70%, transparent);
opacity: .85;
}
.hero-inner {
position: relative;
z-index: 1;
padding: clamp(4rem, 9vw, 7.5rem) 0;
max-width: 880px;
}
.hero .kicker { color: var(--gold-light); }
.hero .kicker::before { background: var(--gold-light); }
.hero h1 { color: #fff; margin-bottom: 1rem; }
.hero-sub {
font-family: var(--serif);
font-style: italic;
font-size: clamp(1.08rem, 2vw, 1.3rem);
color: var(--gold-pale);
margin-bottom: 1.4rem;
}
.hero-text {
font-size: 1.02rem;
color: rgba(255, 255, 255, .82);
max-width: 640px;
margin-bottom: 2rem;
}
.hero-tags {
display: flex;
flex-wrap: wrap;
gap: .5rem .65rem;
margin: 0 0 2.1rem;
padding: 0;
list-style: none;
}
.hero-tags li {
font-size: .74rem;
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 600;
color: rgba(255, 255, 255, .85);
border: 1px solid rgba(194, 162, 105, .5);
border-radius: 999px;
padding: .32rem .85rem;
background: rgba(255, 255, 255, .04);
}
/* .hero-actions: spaziatura ora fornita dal sistema unico "Azioni" (sez. 6). */
/* Home: hero editoriale — eyebrow di brand + grande titolo-valore Cormorant */
.hero-inner--home { max-width: 920px; padding-block: clamp(5rem, 11vw, 8.6rem); }
.hero-eyebrow { color: var(--gold-light); margin-bottom: 1.15rem; }
.hero-eyebrow::before { background: var(--gold-light); }
.hero-headline {
font-family: var(--display);
font-weight: 600;
font-size: clamp(2.5rem, 4.7vw, 4.6rem);
line-height: 1.07;
letter-spacing: -.014em;
color: #fff;
margin-bottom: 1.4rem;
/* Misura più generosa: i titoli più lunghi (FR/ES) vanno a capo con lo
stesso numero di righe dell'IT → altezza hero coerente tra le lingue. */
max-width: 24ch;
}
.hero-legal {
margin: 2.2rem 0 0;
font-size: .78rem;
letter-spacing: .02em;
color: rgba(255, 255, 255, .6);
}
/* Hero interno di pagina */
.page-hero {
background:
linear-gradient(165deg, var(--navy-darker) 0%, var(--navy) 100%);
color: #fff;
position: relative;
}
.page-hero::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--gold) 35%, var(--gold-light) 50%, var(--gold) 65%, transparent);
opacity: .8;
}
.page-hero-inner {
padding: clamp(4.6rem, 11vw, 8.6rem) 0;
max-width: 960px;
position: relative;
}
.page-hero h1 {
color: #fff;
margin-bottom: .55rem;
font-size: clamp(2.7rem, 5vw, 4.4rem);
letter-spacing: .004em;
}
.page-hero .kicker { color: var(--gold-light); margin-bottom: 1.05rem; }
.page-hero .kicker::before { background: var(--gold-light); }
.page-hero-sub {
font-family: var(--serif);
font-style: italic;
font-size: clamp(1.12rem, 1.7vw, 1.42rem);
line-height: 1.5;
color: var(--gold-pale);
max-width: 720px;
}
/* Indizio di scorrimento discreto in fondo all'hero (solo desktop) */
@media (min-width: 1000px) {
.page-hero::before {
content: "";
position: absolute;
left: 50%; bottom: 1.4rem;
width: 1px; height: 38px;
background: linear-gradient(rgba(200,170,110,0), var(--gold-light));
opacity: .7;
z-index: 2;
}
}
/* Breadcrumb */
.breadcrumb {
display: flex;
flex-wrap: wrap;
gap: .45rem;
list-style: none;
margin: 0 0 1.1rem;
padding: 0;
font-size: .79rem;
color: rgba(255, 255, 255, .82);
}
.breadcrumb a { color: var(--gold-light); text-decoration: none; transition: color .2s var(--ease); }
.breadcrumb a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb li + li::before { content: "›"; margin-right: .45rem; color: rgba(255, 255, 255, .55); }
[dir="rtl"] .breadcrumb li + li::before { content: "‹"; margin-right: 0; margin-left: .45rem; }
/* --------------------------------------------------------------------------
6 · Bottoni
-------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .55rem;
/* min-height uniforme: stesso ingombro verticale per tutte le varianti
(anche .btn-sm) e bersaglio tattile adeguato (>=44px) sul touch. */
min-height: 2.75rem;
padding: .78rem 1.65rem;
line-height: 1.2;
font-family: var(--sans);
font-size: .88rem;
font-weight: 600;
letter-spacing: .02em;
border-radius: 999px;
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: transform .3s var(--ease), box-shadow .3s var(--ease),
background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn .bi { transition: transform .3s var(--ease); font-size: .9em; }
.btn:hover .bi-arrow-right { transform: translateX(4px); }
.btn:active { transform: translateY(0) scale(.99); }
.btn-gold {
/* oro luminoso con testo blu profondo: premium, contrasto AA (>=6:1),
risalta sul hero scuro e si lega all'identità blu. */
background: linear-gradient(135deg, #D6BC82 0%, #C6A75E 100%);
color: var(--navy);
box-shadow: var(--shadow-gold);
}
.btn-gold:hover {
color: var(--navy);
background: linear-gradient(135deg, #E0C892 0%, #CFB069 100%);
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(120, 90, 35, .26), 0 20px 40px rgba(120, 90, 35, .24);
}
.btn-navy {
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
color: #fff;
box-shadow: 0 8px 22px rgba(20, 40, 70, .24);
}
.btn-navy:hover {
background: linear-gradient(135deg, var(--navy-light) 0%, var(--navy) 100%);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 14px 34px rgba(20, 40, 70, .32);
}
.btn-outline {
border-color: var(--navy);
color: var(--navy);
background: transparent;
}
.btn-outline:hover { background: var(--navy); color: #fff; transform: translateY(-2px); }
.btn-outline-light {
border-color: rgba(255, 255, 255, .55);
color: #fff;
background: rgba(255, 255, 255, .04);
}
.btn-outline-light:hover { background: #fff; color: var(--navy); transform: translateY(-2px); }
.btn-sm { padding: .5rem 1.1rem; font-size: .8rem; }
/* ==========================================================================
Azioni: sistema coerente per le righe di pulsanti
--------------------------------------------------------------------------
Un'unica base per OGNI gruppo di pulsanti del sito: azioni dell'hero,
CTA di sezione, azioni delle card/pubblicazioni, azioni dei form.
In precedenza .cta-actions e .pub-actions ricevevano flex+gap solo dentro
contenitori specifici (.cta-band / .pub-card); fuori da quelli i pulsanti
restavano senza spaziatura definita, da cui distanze incoerenti tra pagine.
Qui gap, allineamento e a-capo sono garantiti ovunque. Su mobile i pulsanti
diventano a piena larghezza, impilati e centrati, per tocco e ordine.
========================================================================== */
.btn-row,
.hero-actions,
.cta-actions,
.pub-actions,
.card-actions,
.form-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .8rem;
}
/* Azioni di card/pubblicazioni: spinte in fondo (nelle card a colonna flex)
con un respiro dal contenuto soprastante. */
.pub-actions,
.card-actions {
margin-top: auto;
padding-top: .9rem;
}
/* Azioni dei form: stacco chiaro dai campi soprastanti. */
.form-actions { margin-top: 1.4rem; }
@media (max-width: 575.98px) {
.btn-row > .btn,
.hero-actions > .btn,
.cta-actions > .btn,
.pub-actions > .btn,
.card-actions > .btn,
.form-actions > .btn {
flex: 1 1 100%;
justify-content: center;
}
}
.link-arrow {
display: inline-flex;
align-items: center;
gap: .45rem;
font-weight: 600;
font-size: .88rem;
color: var(--gold-text);
text-decoration: none;
}
.link-arrow .bi { transition: transform .3s var(--ease); }
.link-arrow:hover .bi { transform: translateX(4px); }
/* --------------------------------------------------------------------------
7 · Card e componenti
-------------------------------------------------------------------------- */
.card {
background: var(--paper);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 1.8rem 1.6rem;
position: relative;
overflow: hidden;
/* Lieve elevazione a riposo: la card ha presenza, non è un riquadro piatto. */
box-shadow: var(--shadow-sm);
transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
border-color: rgba(47, 96, 153, .38);
}
/* .card--static: micro-lift sobrio definito più sotto (sezione motion);
nessuna regola contraddittoria qui. */
.card-icon {
width: 60px;
height: 60px;
border-radius: 17px; /* squircle istituzionale, coerente col motivo geometrico */
display: grid;
place-items: center;
background: linear-gradient(152deg, var(--azure-soft) 0%, var(--paper) 100%);
color: var(--navy);
font-size: 1.4rem;
margin-bottom: 1.25rem;
box-shadow: inset 0 0 0 1px rgba(156, 122, 60, .30), 0 4px 12px rgba(20, 40, 70, .06);
transition: background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.card:hover .card-icon,
.card--static:hover .card-icon {
background: linear-gradient(152deg, var(--navy) 0%, var(--navy-deep) 100%);
color: #fff;
box-shadow: inset 0 0 0 1px rgba(200, 170, 110, .50), 0 10px 22px rgba(20, 40, 70, .18);
transform: translateY(-2px);
}
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a:hover { color: var(--navy); }
.card .meta {
font-size: .76rem;
letter-spacing: .1em;
text-transform: uppercase;
font-weight: 600;
color: var(--gold-text);
margin-bottom: .5rem;
}
.card p { font-size: .93rem; color: var(--muted); }
/* Card pilastro (home) con linea dorata */
.pillar-card::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 3px;
background: var(--gold);
transform: scaleX(0);
transform-origin: left;
transition: transform .4s var(--ease);
}
[dir="rtl"] .pillar-card::before { transform-origin: right; }
.pillar-card:hover::before { transform: scaleX(1); }
/* Card persona — ritratto editoriale premium (foto a tutta larghezza + corpo) */
.person-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--border-soft);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.person-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
border-color: rgba(156, 122, 60, .45);
}
.person-card__media {
position: relative;
aspect-ratio: 5 / 6;
overflow: hidden;
background: linear-gradient(155deg, var(--navy), var(--navy-darker, #2a1a10));
}
/* velo dorato discreto in basso, attivo all'hover, per coesione cromatica */
.person-card__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 52%, rgba(15, 34, 56, .30));
opacity: 0;
transition: opacity .4s var(--ease);
pointer-events: none;
}
.person-card:hover .person-card__media::after { opacity: 1; }
.person-card .person-photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 16%;
display: block;
margin: 0;
border: 0;
border-radius: 0;
transition: transform .7s var(--ease);
}
.person-card:hover .person-photo { transform: scale(1.045); }
.person-card .person-initials {
width: 100%;
height: 100%;
margin: 0;
border-radius: 0;
display: grid;
place-items: center;
background: transparent;
color: var(--gold-pale);
font-family: var(--serif);
font-weight: 600;
font-size: clamp(2rem, 5vw, 2.8rem);
letter-spacing: .03em;
}
.person-card__body {
padding: 1.05rem 1.2rem 1.3rem;
display: flex;
flex-direction: column;
gap: .16rem;
}
.person-card .person-name { font-family: var(--serif); font-weight: 700; font-size: 1.08rem; line-height: 1.25; color: var(--ink); margin: 0; }
.person-card .person-role { font-size: .84rem; color: var(--gold-text); font-weight: 600; margin: .1rem 0 0; line-height: 1.3; }
.person-card .person-org { font-size: .82rem; color: var(--muted); margin: 0; line-height: 1.35; }
.person-card .person-country { font-size: .8rem; color: var(--faint); margin: .15rem 0 0; display: inline-flex; align-items: center; gap: .32rem; }
.person-card .person-country .bi { color: var(--gold); font-size: .85rem; }
.person-card .person-bio { font-size: .86rem; color: var(--muted); margin: .6rem 0 0; line-height: 1.55; }
/* Card pubblicazione */
.pub-card {
display: flex;
flex-direction: column;
height: 100%;
background: var(--paper);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 1.6rem 1.5rem 1.5rem;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.pub-card::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
[dir="rtl"] .pub-card::before { transform-origin: right; }
.pub-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(47, 96, 153, .34); }
.pub-card:hover::before { transform: scaleX(1); }
.pub-card h3 a { color: var(--ink); text-decoration: none; transition: color .2s var(--ease); }
.pub-card h3 a:hover { color: var(--navy); }
.pub-card .pub-series {
font-size: .72rem;
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 700;
color: var(--gold-text);
margin-bottom: .55rem;
}
.pub-card h3 { font-size: 1.12rem; }
.pub-card .pub-subtitle { font-family: var(--serif); font-style: italic; font-size: .92rem; color: var(--muted); }
.pub-card .pub-meta { font-size: .8rem; color: var(--faint); margin: .4rem 0 .7rem; }
/* .pub-actions: flex/gap e allineamento in fondo ora dal sistema unico "Azioni". */
/* Badge */
.badge {
display: inline-flex;
align-items: center;
gap: .35rem;
font-size: .7rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
border-radius: 999px;
padding: .28rem .75rem;
}
.badge-prep { background: var(--gold-soft); color: var(--gold-text); border: 1px solid rgba(156, 122, 60, .3); }
.badge-open { background: rgba(34, 102, 59, .1); color: #22663B; border: 1px solid rgba(34, 102, 59, .3); }
/* Badge «Video disponibile» (eventi con video locale): cliccabile, navy → play */
a.badge-video {
background: var(--navy); color: #fff; border: 0; text-decoration: none;
transition: background .25s var(--ease), transform .25s var(--ease);
}
a.badge-video .bi { color: var(--gold-light); }
a.badge-video:hover { background: var(--navy-light); transform: translateY(-1px); }
/* Avvisi */
.notice {
display: flex;
gap: .9rem;
padding: 1.1rem 1.3rem;
border: 1px solid var(--border-soft);
border-inline-start: 3px solid var(--gold);
background: var(--ivory);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
box-shadow: var(--shadow-sm);
font-size: .92rem;
color: var(--body-color);
}
/* RTL: accento dorato e arrotondamento dal lato corretto */
[dir="rtl"] .notice { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.notice .bi { color: var(--gold-text); font-size: 1.1rem; flex-shrink: 0; margin-top: .1rem; }
/* Statistiche */
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 1.1rem;
}
.stat {
text-align: center;
background: rgba(255, 255, 255, .05);
border: 1px solid rgba(194, 162, 105, .25);
border-radius: var(--radius);
padding: 1.4rem 1rem;
position: relative;
overflow: hidden;
transition: border-color .3s var(--ease), background .3s var(--ease);
}
.stat:hover { border-color: rgba(194, 162, 105, .6); background: rgba(255, 255, 255, .08); }
.stat-value {
font-family: var(--serif);
font-size: 1.9rem;
font-weight: 700;
color: var(--gold-light);
line-height: 1.1;
display: block;
margin-bottom: .3rem;
}
.stat-label { font-size: .8rem; color: rgba(255, 255, 255, .75); letter-spacing: .04em; }
/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
content: "";
position: absolute;
left: 7px; top: 6px; bottom: 6px;
width: 2px;
background: linear-gradient(var(--gold-pale), var(--gold));
}
.timeline li { position: relative; padding: 0 0 1.6rem 2.1rem; margin: 0; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
content: "";
position: absolute;
left: 0; top: 6px;
width: 16px; height: 16px;
border-radius: 50%;
background: #fff;
border: 3px solid var(--gold);
}
.timeline .tl-year {
font-family: var(--serif);
font-weight: 700;
font-size: 1.05rem;
color: var(--navy);
display: block;
}
.timeline .tl-text { font-size: .95rem; color: var(--muted); }
/* Liste eleganti */
.check-list { list-style: none; padding: 0; margin: 0 0 1.1rem; }
.check-list li {
position: relative;
padding-left: 1.7rem;
margin-bottom: .55rem;
}
.check-list li::before {
content: "\F26B"; /* bi-check2 */
font-family: "bootstrap-icons";
position: absolute;
left: 0;
top: .05rem;
color: var(--gold);
font-weight: 700;
}
.dot-list { list-style: none; padding: 0; margin: 0 0 1.1rem; }
.dot-list li { position: relative; padding-left: 1.4rem; margin-bottom: .5rem; }
.dot-list li::before {
content: "";
position: absolute;
left: 0; top: .55em;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--gold);
}
/* Banda CTA */
.cta-band {
background:
radial-gradient(1100px 360px at 85% -40%, rgba(156, 122, 60, .35), transparent 60%),
linear-gradient(160deg, var(--navy-darker) 0%, var(--navy) 100%);
color: #fff;
border-radius: var(--radius);
padding: clamp(2.2rem, 5vw, 3.4rem);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1.6rem;
position: relative;
overflow: hidden;
}
.cta-band h2 { color: #fff; margin-bottom: .4rem; }
.cta-band p { color: rgba(255, 255, 255, .78); margin: 0; max-width: 540px; }
/* Filigrana geometrica euro-mediterranea discreta (coerente con footer/settori) */
.cta-band::after {
content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; width: 300px;
background-image: var(--oriental-gold); background-size: 44px 44px;
opacity: .06; pointer-events: none; z-index: 0;
-webkit-mask-image: linear-gradient(225deg, #000, transparent 70%);
mask-image: linear-gradient(225deg, #000, transparent 70%);
}
[dir="rtl"] .cta-band::after {
-webkit-mask-image: linear-gradient(135deg, #000, transparent 70%);
mask-image: linear-gradient(135deg, #000, transparent 70%);
}
.cta-band > * { position: relative; z-index: 1; }
/* .cta-actions: flex/gap ora dal sistema unico "Azioni" (sez. 6). */
/* --------------------------------------------------------------------------
8 · Form
-------------------------------------------------------------------------- */
.form-label { font-weight: 600; font-size: .88rem; color: var(--ink); margin-bottom: .3rem; display: block; }
.form-text { font-size: .78rem; color: var(--faint); margin-top: .25rem; }
.form-control, .form-select {
width: 100%;
padding: .82rem 1rem;
font-family: var(--sans);
font-size: .95rem;
color: var(--ink);
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
/* incavo tenue: l'input ha profondità da "campo", non un rettangolo piatto */
box-shadow: inset 0 1px 2px rgba(20, 40, 70, .045);
transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.form-control:focus, .form-select:focus {
outline: none;
border-color: var(--navy-light);
/* anello di focus + alone morbido: stato attivo chiaro ed elegante */
box-shadow: 0 0 0 3px rgba(47, 96, 153, .18), 0 6px 16px rgba(47, 96, 153, .10);
}
.form-control::placeholder { color: #6E7484; }
textarea.form-control { resize: vertical; min-height: 120px; }
.form-check { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .65rem; }
.form-check-input {
width: 1.15rem;
height: 1.15rem;
margin-top: .22rem;
flex-shrink: 0;
accent-color: var(--gold);
cursor: pointer;
}
.form-check label { font-size: .88rem; color: var(--body-color); cursor: pointer; }
.field { margin-bottom: 1.15rem; }
.field .errorlist {
list-style: none;
margin: .3rem 0 0;
padding: 0;
font-size: .8rem;
color: #9B2226;
font-weight: 500;
}
.field.has-error .form-control, .field.has-error .form-select { border-color: #9B2226; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1.4rem; }
@media (max-width: 639.98px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid .field--full { grid-column: 1 / -1; }
fieldset.form-section {
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.4rem 1.5rem 1.1rem;
margin: 0 0 1.6rem;
background: #fff;
/* i fieldset hanno min-inline-size:min-content di default e possono
traboccare dal contenitore su viewport stretti */
min-inline-size: 0;
}
fieldset.form-section legend {
font-family: var(--serif);
font-weight: 600;
font-size: 1.06rem;
color: var(--navy);
padding: 0 .6rem;
}
/* Gruppi di checkbox multipli (rendering nativo Django CheckboxSelectMultiple) */
.field div[role="group"] > div {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
gap: .35rem 1rem;
margin-top: .35rem;
}
.field div[role="group"] > div > div { min-width: 0; }
.field div[role="group"] label {
display: inline-flex;
align-items: flex-start;
gap: .55rem;
font-size: .9rem;
font-weight: 400;
color: var(--body-color);
cursor: pointer;
line-height: 1.45;
}
.field div[role="group"] label .form-check-input,
.field div[role="group"] label input[type="checkbox"] {
width: 1.05rem;
height: 1.05rem;
margin-top: .18rem;
flex-shrink: 0;
accent-color: var(--gold);
}
/* Honeypot: invisibile agli umani, presente nel DOM per i bot.
Offset verticale: nessun overflow orizzontale in LTR né in RTL. */
.hp-field {
position: absolute !important;
top: -100px !important;
width: 1px; height: 1px;
overflow: hidden;
}
/* Messaggi flash */
.messages { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.messages li {
padding: .9rem 1.2rem;
border-radius: var(--radius-sm);
font-size: .92rem;
font-weight: 500;
margin-bottom: .6rem;
border: 1px solid;
}
.messages li.success { background: #F0F7F1; color: #1F5B33; border-color: #BFDCC8; }
.messages li.error { background: #FBF0F0; color: #8C1D21; border-color: #E8C5C6; }
.messages li.info { background: var(--ivory); color: var(--navy); border-color: var(--border); }
.messages li.warning { background: #FBF6EC; color: #7A5A12; border-color: #E8D8AE; }
.messages li.debug { background: var(--mist); color: var(--faint); border-color: var(--border); }
/* --------------------------------------------------------------------------
9 · Footer
-------------------------------------------------------------------------- */
.site-footer {
background: linear-gradient(180deg, var(--navy-darker) 0%, #241509 100%);
color: rgba(255, 255, 255, .72);
font-size: .88rem;
margin-top: 0;
position: relative;
}
/* Filo dorato sottile in cima + filigrana geometrica discreta nell'angolo */
.site-footer::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent, rgba(194, 162, 105, .55), transparent);
pointer-events: none;
}
.site-footer::after {
content: ""; position: absolute; top: 30px; inset-inline-end: 0; width: 360px; height: 320px;
background-image: var(--oriental-gold); background-size: 46px 46px;
opacity: .05; pointer-events: none;
-webkit-mask-image: linear-gradient(225deg, #000, transparent 72%);
mask-image: linear-gradient(225deg, #000, transparent 72%);
}
[dir="rtl"] .site-footer::after {
-webkit-mask-image: linear-gradient(135deg, #000, transparent 72%);
mask-image: linear-gradient(135deg, #000, transparent 72%);
}
.site-footer .container { position: relative; z-index: 1; }
.footer-main {
display: grid;
grid-template-columns: 1.45fr 1fr 1fr 1.1fr;
gap: 2.4rem;
padding: clamp(2.6rem, 6vw, 4rem) 0 2.2rem;
}
@media (max-width: 991.98px) { .footer-main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639.98px) { .footer-main { grid-template-columns: 1fr; gap: 1.8rem; } }
.footer-brand { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.4rem; }
/* Logo del footer su sfondo TRASPARENTE (nessuna targa/placca bianca): asset
dedicato logo-agami-footer.webp con testo/bilancia in crema e la sola striscia
centrale della bandiera italiana in bianco opaco reale (verde/bianco/rosso). */
.footer-brand .footer-logo { height: 66px; width: auto; display: block; }
@media (max-width: 575.98px) { .footer-brand .footer-logo { height: 56px; } }
.footer-brand .brand-name { color: #fff; }
.footer-brand .brand-sub { color: var(--gold-light); }
.footer-tagline { font-family: var(--serif); font-style: italic; color: var(--gold-pale); font-size: .95rem; }
.footer-note { font-size: .8rem; color: rgba(255, 255, 255, .5); margin-top: .9rem; }
.footer-title {
font-family: var(--sans);
font-size: .74rem;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--gold-light);
margin-bottom: 1rem;
padding-bottom: .55rem;
position: relative;
}
/* Filo dorato breve sotto il titolo: gerarchia editoriale più netta. */
.footer-title::after {
content: ""; position: absolute; bottom: 0; inset-inline-start: 0;
width: 26px; height: 2px; border-radius: 2px;
background: linear-gradient(90deg, var(--gold), rgba(194, 162, 105, .15));
}
[dir="rtl"] .footer-title::after { background: linear-gradient(270deg, var(--gold), rgba(194, 162, 105, .15)); }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: .45rem; }
.footer-links a {
color: rgba(255, 255, 255, .72);
text-decoration: none;
transition: color .25s var(--ease), padding-left .25s var(--ease);
}
.footer-links a:hover { color: var(--gold-light); padding-left: .25rem; }
.footer-contact li { display: flex; gap: .6rem; margin-bottom: .7rem; }
.footer-contact .bi { color: var(--gold-light); margin-top: .15rem; }
.footer-contact a { color: rgba(255, 255, 255, .72); text-decoration: none; word-break: break-word; }
.footer-contact a:hover { color: var(--gold-light); }
/* Etichetta «Sede legale / operativa» sopra l'indirizzo, in footer */
.footer-sede-label {
display: block;
font-size: .66rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--gold-light);
margin-bottom: .1rem;
}
.footer-social { display: flex; gap: .6rem; margin-top: 1rem; }
.footer-social a {
width: 38px; height: 38px;
display: grid;
place-items: center;
border: 1px solid rgba(255, 255, 255, .25);
border-radius: 50%;
color: rgba(255, 255, 255, .8);
text-decoration: none;
transition: all .3s var(--ease);
}
.footer-social a:hover { background: var(--gold-light); border-color: var(--gold-light); color: var(--navy-darker); transform: translateY(-2px); }
.footer-newsletter .form-control {
background: rgba(255, 255, 255, .07);
border-color: rgba(255, 255, 255, .2);
color: #fff;
}
.footer-newsletter .form-control::placeholder { color: rgba(255, 255, 255, .45); }
.footer-newsletter .form-check label { color: rgba(255, 255, 255, .6); font-size: .76rem; }
/* Identità istituzionale ETS (art. 35 D.Lgs. 117/2017) — visibile su ogni pagina */
.footer-legal-identity {
border-top: 1px solid rgba(255, 255, 255, .12);
padding: 1.4rem 0 .4rem;
font-size: .78rem;
line-height: 1.7;
color: rgba(255, 255, 255, .58);
}
.footer-legal-identity .footer-legal-name {
font-family: var(--serif);
font-size: .92rem;
color: var(--gold-pale);
margin-bottom: .35rem;
}
.footer-legal-identity .footer-legal-line {
display: flex;
flex-wrap: wrap;
gap: .2rem 1rem;
margin: 0;
}
.footer-legal-identity .footer-legal-line span { white-space: nowrap; }
.footer-legal-identity a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.footer-legal-identity a:hover { color: var(--gold-light); }
@media (max-width: 639.98px) {
.footer-legal-identity .footer-legal-line span { white-space: normal; }
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, .12);
padding: 1.2rem 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: .8rem;
font-size: .78rem;
color: rgba(255, 255, 255, .5);
}
.footer-bottom a { color: rgba(255, 255, 255, .65); text-decoration: none; }
.footer-bottom a:hover { color: var(--gold-light); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.1rem; }
/* --------------------------------------------------------------------------
10 · Pagine specifiche
-------------------------------------------------------------------------- */
/* Prosa istituzionale */
.prose { max-width: 760px; }
.prose h2 { margin-top: 2.4rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.8rem; }
.prose .lead { font-size: 1.1rem; color: var(--muted); }
/* Elenco dati istituzionali (Statuto e trasparenza) */
.inst-data { display: grid; grid-template-columns: minmax(0, 14rem) 1fr; gap: 0; }
.inst-data dt {
font-family: var(--sans);
font-size: .74rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--navy);
padding: .7rem 1rem .7rem 0;
border-top: 1px solid var(--border);
}
.inst-data dd {
margin: 0;
padding: .7rem 0;
border-top: 1px solid var(--border);
color: var(--ink);
}
.inst-data dt:first-of-type, .inst-data dd:first-of-type { border-top: 0; }
@media (max-width: 575.98px) {
.inst-data { grid-template-columns: 1fr; }
.inst-data dd { padding-top: .15rem; padding-bottom: .8rem; border-top: 0; }
.inst-data dt { padding-bottom: .15rem; }
.inst-data dt:not(:first-of-type) { border-top: 1px solid var(--border); margin-top: .4rem; }
}
/* Schede dipartimenti: responsabile + stato */
.dip-lead { font-family: var(--serif); font-size: 1.02rem; color: var(--navy); margin: .1rem 0 .6rem; }
.dip-status { margin: .2rem 0 0; }
/* Avatar persona compatto: responsabili dei dipartimenti.
Foto mostrata solo se consentita (person.display_photo); altrimenti monogramma
su fondo navy. Riquadro a dimensione fissa (4:5) → nessun CLS, volto preservato. */
.dip-card .card-icon { margin-bottom: .85rem; }
.dip-responsabile {
margin: .4rem 0 .2rem; padding-top: 1rem;
border-top: 1px solid var(--border-soft);
}
/* Responsabile più valorizzato nelle card dipartimento: ritratto più grande */
.dip-card .person-avatar { gap: .9rem; }
.dip-card .person-avatar__media { width: 68px; height: 84px; }
.dip-card .person-avatar__name { font-size: 1.08rem; }
.person-avatar { display: flex; align-items: center; gap: .75rem; }
.person-avatar__media {
flex: 0 0 auto;
width: 54px;
height: 66px;
border-radius: 12px;
overflow: hidden;
background: linear-gradient(160deg, var(--navy) 0%, var(--navy-darker) 100%);
border: 1px solid var(--border);
box-shadow: 0 6px 16px rgba(20, 37, 59, .12);
display: grid;
place-items: center;
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.person-avatar__img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; }
.person-avatar__initials {
font-family: var(--serif);
font-weight: 600;
font-size: 1.5rem;
color: var(--gold-pale);
letter-spacing: .02em;
}
.person-avatar__text { display: flex; flex-direction: column; min-width: 0; }
.person-avatar__label {
font-size: .66rem;
text-transform: uppercase;
letter-spacing: .12em;
font-weight: 700;
color: var(--gold);
margin-bottom: .1rem;
}
.person-avatar__name { font-family: var(--serif); font-size: 1.04rem; color: var(--ink); line-height: 1.3; }
.dip-card:hover .person-avatar__media { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(20, 37, 59, .18); }
@media (prefers-reduced-motion: reduce) { .dip-card:hover .person-avatar__media { transform: none; } }
/* ====== Video locale (pagina evento / videoteca) ====== */
.local-video { margin: 0 auto; max-width: 960px; }
.local-video__player {
width: 100%;
aspect-ratio: 16 / 9;
display: block;
background: #0a1420;
border-radius: var(--radius);
border: 1px solid rgba(255, 255, 255, .12);
box-shadow: 0 22px 60px rgba(8, 18, 30, .45);
}
.local-video__fallback { color: var(--body-color); padding: 1rem; }
/* ====== Galleria fotografica evento ====== */
.event-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
gap: 1.15rem;
max-width: 1040px;
margin-inline: auto;
}
@media (max-width: 575.98px) { .event-gallery { gap: .85rem; } }
.event-gallery__item {
position: relative;
display: block;
aspect-ratio: 3 / 2;
overflow: hidden;
border-radius: var(--radius);
border: 1px solid var(--border);
box-shadow: 0 6px 18px rgba(20, 37, 59, .10);
cursor: zoom-in;
background: var(--mist);
}
.event-gallery__item img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform .55s var(--ease);
}
.event-gallery__item:hover img,
.event-gallery__item:focus-visible img { transform: scale(1.06); }
.event-gallery__item:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.event-gallery__zoom {
position: absolute;
inset-block-end: .55rem; inset-inline-end: .55rem;
width: 2rem; height: 2rem;
display: grid; place-items: center;
border-radius: 50%;
background: rgba(15, 34, 56, .72);
color: #fff; font-size: .8rem;
opacity: 0; transform: translateY(4px);
transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.event-gallery__item:hover .event-gallery__zoom,
.event-gallery__item:focus-visible .event-gallery__zoom { opacity: 1; transform: translateY(0); }
/* Variante editoriale (1-2 fotografie): immagini protagoniste, non miniature.
Prima foto = banda panoramica ~21:9; seconda = 3:2 grande, centrata. */
.event-gallery--editorial {
grid-template-columns: 1fr;
max-width: 940px;
gap: 1.4rem;
}
.event-gallery--editorial .event-gallery__item {
aspect-ratio: 21 / 9;
border-radius: calc(var(--radius) + 4px);
box-shadow: 0 20px 44px -26px rgba(20, 37, 59, .5);
}
.event-gallery--editorial .event-gallery__item:nth-child(2) {
aspect-ratio: 3 / 2;
width: min(100%, 700px);
margin-inline: auto;
}
@media (max-width: 700px) {
.event-gallery--editorial .event-gallery__item { aspect-ratio: 16 / 10; }
.event-gallery--editorial .event-gallery__item:nth-child(2) { aspect-ratio: 3 / 2; }
}
/* Copertina «protagonista» degli articoli con immagine propria: su desktop
esce leggermente dalla colonna del testo (breakout centrato). */
.figure-frame--feature { border-radius: 14px; box-shadow: 0 24px 48px -28px rgba(20, 37, 59, .5); }
.figure-frame--feature img { aspect-ratio: 16 / 9; height: auto; object-fit: cover; }
@media (min-width: 1100px) { .figure-frame--feature { margin-inline: -90px; } }
/* ====== Lightbox (galleria) ====== */
.lb-overlay {
position: fixed; inset: 0; z-index: 2000;
display: flex; align-items: center; justify-content: center;
background: rgba(8, 16, 28, .93);
opacity: 0; pointer-events: none;
transition: opacity .25s var(--ease);
}
.lb-overlay.is-open { opacity: 1; pointer-events: auto; }
.lb-figure { margin: 0; max-width: 92vw; max-height: 90vh; text-align: center; }
.lb-img { max-width: 92vw; max-height: 82vh; border-radius: 8px; box-shadow: 0 24px 70px rgba(0, 0, 0, .55); }
.lb-cap { color: rgba(255, 255, 255, .78); font-size: .85rem; margin-top: .6rem; }
.lb-btn {
position: absolute; top: 50%; transform: translateY(-50%);
width: 3rem; height: 3rem; border: 0; border-radius: 50%;
background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer;
display: grid; place-items: center; font-size: 1.1rem;
transition: background .25s var(--ease);
}
.lb-btn:hover { background: rgba(255, 255, 255, .24); }
.lb-close { top: 1.1rem; right: 1.1rem; transform: none; }
.lb-prev { left: 1rem; }
.lb-next { right: 1rem; }
@media (prefers-reduced-motion: reduce) {
.event-gallery__item img, .event-gallery__zoom, .lb-overlay { transition: none; }
}
/* Frase identitaria (home) */
.identity-statement {
max-width: 920px;
margin: 0 auto;
text-align: center;
font-family: var(--serif);
font-size: clamp(1.3rem, 2.6vw, 1.85rem);
line-height: 1.5;
color: var(--navy);
}
.two-col { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.8rem, 4vw, 3.5rem); align-items: start; }
/* I figli di un grid hanno min-width:auto: la traccia non puo' scendere sotto
il min-content del contenuto e su mobile sfora il contenitore. min-width:0
permette alla colonna di restringersi correttamente (fix overflow timeline). */
.two-col > * { min-width: 0; }
/* Variante alternata: immagine a sinistra, testo a destra (ritmo editoriale).
Su mobile l'ordine torna naturale (testo prima) per la lettura. */
.two-col--reverse { grid-template-columns: .85fr 1.15fr; }
.two-col--reverse > *:first-child { order: 2; }
.two-col--reverse > *:last-child { order: 1; }
@media (max-width: 899.98px) {
.two-col { grid-template-columns: 1fr; }
.two-col--reverse { grid-template-columns: 1fr; }
.two-col--reverse > *:first-child, .two-col--reverse > *:last-child { order: 0; }
}
/* Figure */
.figure-frame {
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-md);
position: relative;
}
.figure-frame img { width: 100%; object-fit: cover; transition: transform .75s var(--ease, ease); }
.figure-frame:hover img { transform: scale(1.035); }
@media (prefers-reduced-motion: reduce) { .figure-frame:hover img { transform: none; } }
/* CLS: le immagini editoriali di sezione sono uniformi ~3:2. Riservare lo
spazio con aspect-ratio elimina il reflow al caricamento (lazy) senza dover
mettere width/height su ogni ![]()
. Scoping su --accent per NON ritagliare le
locandine/ritratti (news, founder-portrait) che usano la figure-frame nuda. */
.figure-frame--accent { aspect-ratio: 3 / 2; }
.figure-frame--accent img { height: 100%; }
/* Avviso lingua del PDF (FASE 2B): documento disponibile solo in italiano. */
.pdf-lang-notice {
display: flex;
gap: .45rem;
align-items: baseline;
margin: .75rem 0 0;
font-size: .82rem;
line-height: 1.45;
color: var(--gold-text, #7a5e2e);
}
.pdf-lang-notice .bi { position: relative; top: 2px; }
.figure-frame--accent::after {
content: "";
position: absolute;
inset: 0;
border: 1px solid rgba(156, 122, 60, .35);
border-radius: var(--radius);
pointer-events: none;
}
.figure-caption { font-size: .76rem; color: var(--faint); margin-top: .5rem; }
/* Full-width banner figure (e.g. group photo) sitting between a section head and a grid */
.figure-band { margin-block: clamp(1.6rem, 4vw, 2.6rem); }
/* Ritratto della fondatrice — cornice rame premium + ombra morbida */
.founder-portrait { box-shadow: var(--shadow-lg); }
.founder-portrait img { aspect-ratio: 4 / 5; width: 100%; height: 100%; object-fit: cover; object-position: center 15%; display: block; }
.founder-portrait::after {
content: "";
position: absolute;
inset: 0;
border: 2px solid rgba(184, 115, 51, .50); /* rame sobrio */
border-radius: var(--radius);
pointer-events: none;
}
/* Figura fondatrice (home): ritratto premium con didascalia sovrimpressa.
aspect-ratio 4/5 = stesso rapporto della foto (nessun crop brutto del volto),
spazio riservato (zero CLS), cornice rame discreta, overlay blu leggibile. */
.founder-figure {
position: relative;
margin: 0;
aspect-ratio: 4 / 5;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-lg);
background: var(--navy-deep);
}
.founder-figure img {
width: 100%; height: 100%;
object-fit: cover; object-position: center 18%;
}
.founder-figure::after { /* cornice rame premium, coerente col ritratto chi-siamo */
content: ""; position: absolute; inset: 0;
border: 2px solid rgba(184, 115, 51, .45);
border-radius: var(--radius); pointer-events: none;
}
.founder-figure__cap {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 2.2rem 1.4rem 1.1rem;
background: linear-gradient(180deg, rgba(15, 34, 56, 0) 0%, rgba(15, 34, 56, .82) 78%);
color: #fff;
display: flex; flex-direction: column; gap: .12rem;
}
.founder-figure__name { font-family: var(--display); font-size: 1.32rem; font-weight: 600; line-height: 1.15; }
.founder-figure__role { font-size: .82rem; color: var(--gold-light); letter-spacing: .015em; }
[dir="rtl"] .founder-figure__cap { text-align: right; }
/* ---------------------------------------------------------------------------
Ritratto editoriale "feature" (storia: Mohamed Badrane, all'origine del
progetto). Formato quadrato che preserva l'intera scena, cornice rame e
didascalia sovrimpressa: resa istituzionale, sobria e protagonista.
--------------------------------------------------------------------------- */
.portrait-feature {
position: relative; margin: 0;
aspect-ratio: 1 / 1;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-lg);
background: var(--navy-deep);
}
.portrait-feature img {
width: 100%; height: 100%;
object-fit: cover; object-position: center 28%;
transition: transform .8s var(--ease, ease);
}
.portrait-feature:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .portrait-feature:hover img { transform: none; } }
.portrait-feature::after {
content: ""; position: absolute; inset: 0;
border: 2px solid rgba(184, 115, 51, .45);
border-radius: var(--radius); pointer-events: none;
}
.portrait-feature__cap {
position: absolute; inset-inline: 0; bottom: 0;
padding: 2.6rem 1.5rem 1.15rem;
background: linear-gradient(180deg, rgba(15,34,56,0) 0%, rgba(15,34,56,.86) 82%);
color: #fff; display: flex; flex-direction: column; gap: .14rem;
}
.portrait-feature__name { font-family: var(--display); font-size: 1.3rem; font-weight: 600; line-height: 1.12; }
.portrait-feature__role { font-size: .82rem; color: var(--gold-light); letter-spacing: .015em; }
[dir="rtl"] .portrait-feature__cap { text-align: right; }
/* ---------------------------------------------------------------------------
Pull-quote premium — la citazione identitaria resa visibile e raffinata.
.pull-quote--cited: con attribuzione (storia, Mohamed Badrane).
.pull-quote--panel: pannello editoriale dedicato (perché AGAMI / "Conoscere
le proprie radici", prima poco leggibile): contrasto e posizione corretti.
--------------------------------------------------------------------------- */
.pull-quote { position: relative; margin: 0; padding-inline-start: 1.5rem; border-inline-start: 3px solid var(--gold); }
.pull-quote p {
margin: 0; font-family: var(--serif); font-style: italic;
font-size: clamp(1.12rem, 1.9vw, 1.34rem); line-height: 1.5; color: var(--navy);
}
.pull-quote--cited cite {
display: block; margin-top: .85rem; font-style: normal;
font-family: var(--display); font-weight: 600; font-size: .98rem;
letter-spacing: .02em; color: var(--gold-text);
}
.pull-quote--cited cite::before { content: "— "; color: var(--gold); }
.pull-quote--panel {
padding: clamp(1.6rem, 3vw, 2.1rem) clamp(1.6rem, 3vw, 2.2rem);
border-inline-start-width: 4px;
border-radius: var(--radius);
background: linear-gradient(180deg, #FBF8F1 0%, var(--ivory) 100%);
box-shadow: var(--shadow-md);
}
.pull-quote--panel::before {
content: "\201C"; position: absolute; top: -.32em; inset-inline-start: .34em;
font-family: var(--display); font-size: 3.4rem; line-height: 1;
color: rgba(184, 115, 51, .26); pointer-events: none;
}
.pull-quote--panel p { font-size: clamp(1.2rem, 2.1vw, 1.46rem); color: var(--navy-deep); }
[dir="rtl"] .pull-quote--panel::before { content: "\201D"; }
/* ---------------------------------------------------------------------------
Sezioni con sfondo fotografico discreto (home). Manifesto: vetro smerigliato
sopra le statue della Giustizia. Aree: card definite sopra lo scrim chiaro.
--------------------------------------------------------------------------- */
.manifesto-sec .manifesto-card {
-webkit-backdrop-filter: blur(3px) saturate(115%);
backdrop-filter: blur(3px) saturate(115%);
background: rgba(16, 34, 56, .42);
border-color: rgba(200, 170, 110, .42);
}
.manifesto-sec .manifesto-card:hover { background: rgba(16, 34, 56, .30); }
.aree-sec .card {
background: rgba(255, 255, 255, .94);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
box-shadow: var(--shadow-sm);
border-color: rgba(47, 96, 153, .18);
}
/* Manifesto: affermazioni in card leggibili e STABILI su ogni viewport.
Bug corretto: la vecchia card con `grid-column:span 2` inline forzava una
griglia a 2 colonne anche su mobile (colonna da ~53px col testo spezzato).
Qui lo span vale solo su desktop; su mobile è una colonna piena. */
.manifesto-grid {
list-style: none;
margin: 0 auto;
padding: 0;
max-width: 1020px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.1rem;
}
.manifesto-card {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(200, 170, 110, .32);
border-radius: var(--radius);
padding: 1.6rem 1.5rem;
color: rgba(255, 255, 255, .92);
font-family: var(--serif);
font-size: 1.05rem;
line-height: 1.55;
transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.manifesto-card--wide { grid-column: span 2; }
.manifesto-card:hover {
background: rgba(255, 255, 255, .10);
border-color: rgba(200, 170, 110, .55);
transform: translateY(-3px);
}
@media (max-width: 760px) {
.manifesto-grid { grid-template-columns: 1fr; gap: .9rem; }
.manifesto-card--wide { grid-column: auto; } /* niente span: una colonna stabile */
}
@media (prefers-reduced-motion: reduce) { .manifesto-card:hover { transform: none; } }
/* Banda editoriale su immagine: citazione istituzionale su biblioteca giuridica,
overlay blu profondo per leggibilità. Spezza il ritmo delle card (respiro). */
.editorial-band { padding: clamp(4rem, 9vw, 7rem) 0; text-align: center; }
.editorial-band--left { text-align: start; }
.editorial-band--left .editorial-band__kicker { justify-content: flex-start; }
.editorial-band--left .editorial-quote { margin-inline: 0; max-width: 56ch; }
.editorial-band__kicker { color: var(--gold-light); justify-content: center; margin-bottom: 1.3rem; }
.editorial-band__kicker::before { background: var(--gold-light); }
.editorial-quote {
max-width: 940px;
margin: 0 auto;
font-family: var(--display);
font-size: clamp(1.5rem, 3.2vw, 2.35rem);
line-height: 1.36;
font-weight: 500;
color: #fff;
text-wrap: balance;
}
/* Tabella sobria */
.table-wrap { overflow-x: auto; }
table.table {
width: 100%;
border-collapse: collapse;
font-size: .92rem;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.table th {
background: var(--ivory);
font-weight: 600;
color: var(--navy);
text-align: left;
padding: .8rem 1rem;
border-bottom: 2px solid var(--border);
}
.table td { padding: .75rem 1rem; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
/* Filtri collane */
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filter-chip {
font-size: .8rem;
font-weight: 600;
padding: .42rem 1rem;
border-radius: 999px;
border: 1px solid var(--border);
background: #fff;
color: var(--body-color);
text-decoration: none;
transition: all .25s var(--ease);
}
.filter-chip:hover { border-color: var(--gold); color: var(--gold-text); }
.filter-chip.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
/* Eventi */
.event-row {
display: grid;
grid-template-columns: 110px 1fr auto;
gap: 1.4rem;
align-items: start;
padding: 1.4rem 0;
border-bottom: 1px solid var(--border-soft);
}
@media (max-width: 639.98px) { .event-row { grid-template-columns: 1fr; gap: .5rem; } }
.event-date {
text-align: center;
background: var(--ivory);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: .6rem .4rem;
min-width: 96px;
}
.event-date .d { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: var(--navy); line-height: 1.1; display: block; }
.event-date .my { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gold-text); font-weight: 600; }
.event-title { font-size: 1.1rem; margin-bottom: .25rem; }
.event-place { font-size: .84rem; color: var(--faint); }
.event-summary { font-size: .9rem; color: var(--muted); margin-top: .3rem; }
/* Profili RCMI pubblici */
.rcmi-result {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.4rem 1.5rem;
display: flex;
gap: 1.2rem;
align-items: flex-start;
transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.rcmi-result:hover { border-color: rgba(156, 122, 60, .45); box-shadow: var(--shadow-sm); }
.rcmi-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.rcmi-chips span {
font-size: .72rem;
font-weight: 600;
background: var(--ivory);
border: 1px solid var(--border);
color: var(--body-color);
padding: .22rem .65rem;
border-radius: 999px;
}
/* Stato vuoto */
.empty-state {
text-align: center;
border: 1px dashed rgba(156, 122, 60, .4);
background: var(--ivory);
border-radius: var(--radius);
padding: clamp(2.2rem, 5vw, 3.4rem) 1.5rem;
max-width: 620px;
margin-inline: auto;
}
.empty-state .bi { font-size: 2rem; color: var(--gold); margin-bottom: .8rem; display: inline-block; }
.empty-state h2, .empty-state h3 { color: var(--navy); }
.empty-state h2 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
.empty-state p { color: var(--muted); font-size: .94rem; }
/* Pagine errore */
.error-page { text-align: center; padding: clamp(4rem, 10vw, 7rem) 0; }
.error-code {
font-family: var(--serif);
font-size: clamp(4rem, 12vw, 7rem);
font-weight: 700;
color: var(--navy);
line-height: 1;
}
.error-code span { color: var(--gold); }
/* Reveal on scroll (leggero, rispetta reduced-motion).
Attivo solo con JS (html.js): senza JS il contenuto resta visibile. */
html.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.js .reveal.is-visible { opacity: 1; transform: none; }
/* Cascata elegante: gli elementi rivelati nelle griglie entrano in sequenza */
html.js .grid > .reveal:nth-child(2) { transition-delay: .07s; }
html.js .grid > .reveal:nth-child(3) { transition-delay: .14s; }
html.js .grid > .reveal:nth-child(4) { transition-delay: .21s; }
html.js .grid > .reveal:nth-child(5) { transition-delay: .08s; }
html.js .grid > .reveal:nth-child(6) { transition-delay: .15s; }
html.js .grid > .reveal:nth-child(7) { transition-delay: .22s; }
/* Titoli e lead: leggera risalita più ampia per un ritmo editoriale */
html.js .section-head.reveal h2, html.js .prose.reveal h2 { transition: inherit; }
@media (prefers-reduced-motion: reduce) {
html.js .reveal { opacity: 1; transform: none; transition: none; }
html.js .grid > .reveal { transition-delay: 0s; }
}
/* --------------------------------------------------------------------------
Rete delle Competenze — accenti verde/rosso del Documento Unico (A6).
Identità del sito: navy/oro; il verde #1A6B3C e il rosso #C0392B sono
usati come accenti nelle sezioni della Rete.
-------------------------------------------------------------------------- */
:root {
--rete-green: #1A6B3C;
--rete-green-dark: #14552F;
--rete-red: #C0392B;
--rete-soft: rgba(26, 107, 60, .08);
}
.btn-rete {
background: linear-gradient(135deg, var(--rete-green-dark) 0%, var(--rete-green) 100%);
color: #fff;
box-shadow: 0 8px 22px rgba(26, 107, 60, .3);
}
.btn-rete:hover {
color: #fff;
background: linear-gradient(135deg, #0F4124 0%, var(--rete-green-dark) 100%);
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(26, 107, 60, .4);
}
.btn-outline-navy {
border-color: var(--navy);
color: var(--navy);
background: transparent;
}
.btn-outline-navy:hover { background: var(--navy); color: #fff; transform: translateY(-2px); }
.rete-accent { color: var(--rete-green); }
.card-icon--rete {
background: linear-gradient(152deg, var(--rete-soft) 0%, var(--paper) 100%);
color: var(--rete-green);
box-shadow: inset 0 0 0 1px rgba(34, 102, 59, .26), 0 4px 12px rgba(20, 40, 70, .06);
}
.card:hover .card-icon--rete,
.card--static:hover .card-icon--rete {
background: linear-gradient(152deg, var(--rete-green) 0%, #1C4D2E 100%);
color: #fff;
box-shadow: inset 0 0 0 1px rgba(200, 170, 110, .42), 0 10px 22px rgba(20, 40, 70, .18);
}
/* Card cliccabile (settori, notizie) */
.card--link { display: block; color: inherit; text-decoration: none; }
.card--link h3 { color: var(--ink); }
.card-more {
display: inline-flex;
align-items: center;
gap: .45rem;
font-weight: 600;
font-size: .85rem;
color: var(--gold-text);
margin-top: .6rem;
}
.card--link:hover .card-more .bi { transform: translateX(4px); }
.card-more .bi { transition: transform .3s var(--ease); }
.card-media {
margin: -1.8rem -1.6rem 1.1rem;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--ivory);
}
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Schede settore (9 settori B4) */
.sector-card {
border-top: 5px solid var(--sector-color, var(--rete-green));
background:
linear-gradient(180deg, color-mix(in srgb, var(--sector-color, var(--rete-green)) 8%, var(--paper)) 0%, var(--paper) 96px);
}
.sector-card .card-icon {
background: color-mix(in srgb, var(--sector-color, var(--rete-green)) 12%, #fff);
transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
/* Hover: riempimento del colore settore APPROFONDITO (mix con blu profondo) così
il glifo bianco resta leggibile anche sui colori chiari (arancio/verde/teal),
dove prima spariva. Mantiene l'identità cromatica del settore. */
.sector-card:hover .card-icon {
background: color-mix(in srgb, var(--sector-color, var(--rete-green)) 78%, #0a1a2e);
color: #fff;
transform: scale(1.05);
}
.sector-badge {
position: absolute;
inset-block-start: .9rem;
inset-inline-end: 1rem;
font-family: var(--serif);
font-size: 1.6rem;
font-weight: 700;
color: var(--sector-color, var(--rete-green));
opacity: .35;
}
.sector-pill {
display: inline-flex;
align-items: center;
gap: .5rem;
font-size: .8rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: #fff;
background: var(--sector-color, var(--rete-green));
border-radius: 999px;
padding: .45rem 1.1rem;
}
/* Elenchi di tag (esempi di profili, tipologie) */
.tag-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.tag {
font-size: .8rem;
font-weight: 600;
padding: .42rem 1rem;
border-radius: 999px;
border: 1px solid var(--border);
background: #fff;
color: var(--body-color);
text-decoration: none;
}
a.tag:hover { border-color: var(--rete-green); color: var(--rete-green); }
.tag--active { background: var(--rete-green); border-color: var(--rete-green); color: #fff; }
.filter-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Paginazione notizie */
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-top: 2.2rem;
flex-wrap: wrap;
}
.pagination .meta { font-size: .82rem; color: var(--faint); }
/* --------------------------------------------------------------------------
Cookie banner granulare (A5/B9)
-------------------------------------------------------------------------- */
/* l'attributo hidden deve vincere anche su classi con display esplicito
(es. .btn è inline-flex): senza questa regola i pulsanti del banner
«nascosti» resterebbero visibili */
[hidden] { display: none !important; }
.cookie-banner {
position: fixed;
inset-inline: 0;
inset-block-end: 0;
z-index: 1200;
background: #fff;
border-top: 3px solid var(--gold);
box-shadow: 0 -12px 40px rgba(15, 27, 51, .18);
padding: 1.1rem 1.2rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
}
.cookie-banner-inner { max-width: 880px; margin-inline: auto; }
.cookie-banner-title { font-size: 1.05rem; margin-bottom: .35rem; }
.cookie-banner p { font-size: .88rem; color: var(--muted); margin-bottom: .8rem; }
.cookie-banner-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.cookie-preferences {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
margin-bottom: .9rem;
background: var(--ivory);
}
.cookie-pref-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: .75rem .9rem;
}
.cookie-pref-row + .cookie-pref-row { border-top: 1px solid var(--border-soft); }
.cookie-pref-row .form-text { font-size: .78rem; }
.cookie-pref-state {
font-size: .74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--rete-green);
white-space: nowrap;
}
@media (max-width: 639.98px) {
.cookie-banner { max-height: 85vh; overflow-y: auto; }
.cookie-banner-actions .btn { flex: 1 1 auto; justify-content: center; }
}
/* Utilità */
.text-center { text-align: center; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; } .mt-5 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* ---------------------------------------------------------------------------
Ricerca globale (Phase 12) — /cerca/ e barra di ricerca nell'header
--------------------------------------------------------------------------- */
/* margin shorthand include il bottom: evita che annulli .mb-3 sul form,
garantendo spazio tra la barra di ricerca e i filtri sottostanti */
.search-page-form { margin: 0 auto 1.75rem; }
.search-page-field {
display: flex; align-items: center; gap: .7rem;
border: 1.5px solid transparent;
border-radius: 16px;
padding: .5rem .5rem .5rem .55rem;
/* doppio bordo a gradiente oro→navy→oro (raffinato, "originale") */
background:
linear-gradient(#fff, #fff) padding-box,
linear-gradient(100deg, rgba(194, 162, 105, .60), rgba(30, 58, 96, .30) 52%, rgba(194, 162, 105, .50)) border-box;
box-shadow: 0 8px 26px rgba(15, 34, 56, .07);
transition: box-shadow .25s var(--ease);
}
[dir="rtl"] .search-page-field {
background:
linear-gradient(#fff, #fff) padding-box,
linear-gradient(260deg, rgba(194, 162, 105, .60), rgba(30, 58, 96, .30) 52%, rgba(194, 162, 105, .50)) border-box;
}
.search-page-field:focus-within {
box-shadow: 0 0 0 4px var(--gold-soft), 0 12px 30px rgba(15, 34, 56, .1);
}
/* icona ricerca in medaglione */
.search-page-field > .bi {
display: inline-flex; align-items: center; justify-content: center; flex: none;
width: 2.3rem; height: 2.3rem; border-radius: 12px;
background: var(--azure-soft); color: var(--navy); font-size: 1.05rem;
}
.search-page-field input[type="search"] {
flex: 1; border: 0; outline: none; background: transparent;
font: inherit; color: var(--ink); padding: .55rem 0; min-width: 0;
}
.search-page-field input[type="search"]::placeholder { color: var(--muted); }
.search-page-field .btn { flex: none; }
.search-summary { margin: 0 0 1rem; }
.search-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }
.search-chip {
display: inline-flex; align-items: center; gap: .4rem;
padding: .35rem .75rem; border-radius: 999px;
border: 1px solid var(--border); background: var(--paper);
color: var(--body-color); font-size: .85rem; text-decoration: none;
transition: background .15s, border-color .15s, color .15s;
}
.search-chip:hover { border-color: var(--gold); color: var(--ink); }
.search-chip.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.search-chip span {
background: var(--mist); color: var(--faint);
border-radius: 999px; padding: 0 .45rem; font-size: .75rem; font-weight: 600;
}
.search-chip.is-active span { background: rgba(255, 255, 255, .22); color: #fff; }
.search-group { margin-bottom: 2.25rem; }
.search-group__title {
font-family: var(--sans); font-size: 1.05rem; color: var(--ink);
display: flex; align-items: center; gap: .5rem;
padding-bottom: .5rem; margin-bottom: .75rem;
border-bottom: 2px solid var(--gold-pale);
}
.search-group__title .bi { color: var(--gold-text); }
.search-group__more {
display: inline-flex; align-items: center; gap: .35rem;
font-size: .9rem; font-weight: 600; color: var(--gold-text); text-decoration: none;
}
.search-group__more:hover { color: var(--navy); }
.search-results { list-style: none; margin: 0; padding: 0; }
.search-result {
padding: .9rem .85rem; border-bottom: 1px solid var(--border-soft);
border-radius: var(--radius-sm); transition: background .25s var(--ease);
}
.search-result:hover { background: var(--azure-soft); }
.search-result__title {
font-family: var(--serif); font-size: 1.1rem; color: var(--navy);
font-weight: 600; text-decoration: none;
}
.search-result__title:hover { color: var(--gold-text); text-decoration: underline; }
/* Badge tipo-contenuto: sistema coerente di pillole semantiche per categoria.
Default oro (pubblicazioni/journal/quote); famiglie di colore sobrio per gli
altri tipi. Tutte discrete, da sito giuridico premium. */
.search-result__cat {
display: inline-block; margin-inline-start: .55rem; font-size: .64rem;
font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--gold-text); background: var(--gold-soft);
border: 1px solid rgba(156, 122, 60, .25); border-radius: 999px;
padding: .12rem .6rem; vertical-align: middle;
}
.search-result__cat--eventi, .search-result__cat--video {
color: #1F5B33; background: rgba(31, 91, 51, .09); border-color: rgba(31, 91, 51, .26);
}
.search-result__cat--news, .search-result__cat--faq {
color: var(--navy); background: var(--azure-soft); border-color: var(--azure-line);
}
.search-result__cat--download, .search-result__cat--archivio {
color: #8a521f; background: rgba(184, 115, 51, .1); border-color: rgba(184, 115, 51, .28);
}
.search-result__cat--settori, .search-result__cat--rcmi, .search-result__cat--aree {
color: var(--navy-light); background: rgba(47, 96, 153, .08); border-color: rgba(47, 96, 153, .22);
}
.search-result__meta { margin: .2rem 0 .15rem; }
.search-result__snippet { margin: .15rem 0 0; color: var(--body-color); font-size: .95rem; }
/* Barra di ricerca compatta nell'header */
.header-search { display: flex; align-items: center; }
.header-search form { display: flex; align-items: center; }
/* Campo di ricerca nella topbar scura: vetro chiaro translucido integrato con la
palette navy, anello di focus dorato, micro-interazioni morbide. */
.header-search .header-search__field {
display: flex; align-items: center; gap: .4rem;
border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px;
padding: .24rem .4rem .24rem .85rem; background: rgba(255, 255, 255, .08);
transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.header-search .header-search__field:hover {
background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .3);
}
.header-search .header-search__field:focus-within {
background: rgba(255, 255, 255, .15);
border-color: var(--gold-light);
box-shadow: 0 0 0 3px rgba(194, 162, 105, .28);
}
.header-search input[type="search"] {
border: 0; outline: none; background: transparent; font: inherit;
font-size: .82rem; color: #fff; width: 9rem; padding: .26rem 0; min-width: 0;
}
.header-search input[type="search"]::placeholder { color: rgba(255, 255, 255, .62); }
.header-search button {
border: 0; background: transparent; color: var(--gold-light);
cursor: pointer; display: inline-flex; padding: .2rem; border-radius: 50%;
transition: color .2s var(--ease), transform .2s var(--ease);
}
.header-search button:hover { color: #fff; transform: scale(1.08); }
.topbar .header-search input[type="search"] { width: 7.5rem; }
/* ---------------------------------------------------------------------------
FAQ (Phase 13) — accordion nativo / (accessibile, no JS)
--------------------------------------------------------------------------- */
.faq-group { margin-bottom: 2.25rem; }
.faq-group__title {
font-family: var(--sans); font-size: 1.05rem; color: var(--ink);
padding-bottom: .5rem; margin-bottom: .9rem;
border-bottom: 2px solid var(--gold-pale);
}
.faq-list { display: flex; flex-direction: column; gap: .6rem; }
.faq-item {
border: 1px solid var(--border); border-radius: var(--radius-sm);
background: var(--paper); overflow: hidden;
}
.faq-item[open] { border-color: var(--gold-light); }
.faq-item__q {
cursor: pointer; list-style: none; padding: .9rem 1.1rem;
font-family: var(--serif); font-weight: 600; color: var(--navy);
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after {
content: "\F282"; font-family: "bootstrap-icons"; font-weight: normal;
color: var(--gold-text); transition: transform .2s; flex: none;
}
.faq-item[open] .faq-item__q::after { transform: rotate(180deg); }
.faq-item__q:hover { color: var(--gold-text); }
.faq-item__q:focus-visible { outline: 2px solid var(--navy-light); outline-offset: -2px; }
.faq-item__a { padding: 0 1.1rem 1rem; color: var(--body-color); }
.faq-item__a p { margin: 0 0 .5rem; }
.faq-item__a p:last-child { margin-bottom: 0; }
[dir="rtl"] .faq-item__q { flex-direction: row-reverse; }
/* Quote e contributi (Phase 15) */
.card--featured { border-color: var(--gold-light); box-shadow: 0 0 0 2px var(--gold-soft); }
.fee-amount {
font-family: var(--serif); font-size: 1.5rem; color: var(--navy);
font-weight: 600; margin: .3rem 0 .5rem;
}
.fee-period { font-size: .9rem; color: var(--muted); font-weight: 400; }
/* Area Download (Phase 16) */
.doc-list { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.doc-item {
display: flex; align-items: center; gap: 1.1rem;
border: 1px solid var(--border); border-radius: var(--radius);
background: var(--paper); padding: 1.1rem 1.2rem;
transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.doc-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(47, 96, 153, .32); }
.doc-item__icon {
flex: none; width: 50px; height: 50px; border-radius: 14px;
display: grid; place-items: center; font-size: 1.35rem; color: var(--navy);
background: linear-gradient(152deg, var(--azure-soft) 0%, var(--paper) 100%);
box-shadow: inset 0 0 0 1px rgba(156, 122, 60, .28);
transition: background .3s var(--ease), color .3s var(--ease);
}
.doc-item:hover .doc-item__icon { background: linear-gradient(152deg, var(--navy) 0%, var(--navy-deep) 100%); color: #fff; }
.doc-item__body { flex: 1; min-width: 0; }
.doc-item__title { font-family: var(--serif); font-size: 1.08rem; font-weight: 600; color: var(--navy); text-decoration: none; }
.doc-item__title:hover { color: var(--gold-text); text-decoration: underline; }
.doc-item__meta { margin: .2rem 0 0; }
.doc-item__desc { margin: .35rem 0 0; color: var(--body-color); font-size: .95rem; }
.doc-item__btn { flex: none; }
@media (max-width: 640px) {
.doc-item { flex-wrap: wrap; }
.doc-item__btn { width: 100%; justify-content: center; }
}
/* ---------------------------------------------------------------------------
Phase 17 — Percorsi rapidi, back-to-top, micro-interazioni
--------------------------------------------------------------------------- */
.quick-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.quick-path {
display: flex; align-items: center; gap: 1rem;
background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius);
padding: 1.05rem 1.2rem; text-decoration: none; color: var(--ink);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.quick-path:hover { border-color: var(--gold-light); box-shadow: 0 6px 22px rgba(15, 34, 56, .10); }
.quick-path:focus-visible { outline: 2px solid var(--navy-light); outline-offset: 2px; }
.quick-path__icon {
flex: none; width: 48px; height: 48px; border-radius: 12px;
display: grid; place-items: center; font-size: 1.4rem;
background: var(--gold-soft); color: var(--gold-text);
}
.quick-path__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.quick-path__title { font-family: var(--serif); font-weight: 600; color: var(--navy); font-size: 1.05rem; }
.quick-path__desc { color: var(--muted); font-size: .9rem; line-height: 1.4; }
.quick-path__arrow { color: var(--gold-text); flex: none; transition: transform .18s ease; }
.quick-path:hover .quick-path__arrow { transform: translateX(3px); }
[dir="rtl"] .quick-path__arrow { transform: scaleX(-1); }
[dir="rtl"] .quick-path:hover .quick-path__arrow { transform: scaleX(-1) translateX(3px); }
@media (max-width: 900px) { .quick-paths { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .quick-paths { grid-template-columns: 1fr; } }
/* Back-to-top: appare in scroll, posizione RTL-aware (inset-inline-end) */
.back-to-top {
position: fixed; inset-inline-end: 1.25rem; bottom: 1.25rem; z-index: 60;
width: 44px; height: 44px; border-radius: 50%;
background: var(--navy); color: #fff; border: 0; cursor: pointer;
display: grid; place-items: center; font-size: 1.15rem;
box-shadow: 0 6px 20px rgba(15, 34, 56, .25);
opacity: 0; visibility: hidden; transform: translateY(8px);
transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--navy-light); }
.back-to-top:focus-visible { outline: 2px solid var(--navy-light); outline-offset: 2px; }
/* Movimento ridotto: nessuna animazione, solo comparsa/scomparsa */
@media (prefers-reduced-motion: reduce) {
.quick-path, .quick-path__arrow { transition: none; }
.quick-path:hover .quick-path__arrow { transform: none; }
[dir="rtl"] .quick-path:hover .quick-path__arrow { transform: scaleX(-1); }
.back-to-top { transition: opacity .15s ease; transform: none; }
.back-to-top.is-visible { transform: none; }
}
.portal-quick-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0; }
/* --- Navigazione "In questa sezione" (Phase 19) --- */
/* Barra di ancore sticky sotto l'header. RTL-safe (proprietà logiche),
mobile-friendly (scroll orizzontale), nessuna libreria, nessuna animazione
indispensabile (rispetta prefers-reduced-motion tramite scroll-behavior). */
section[id] { scroll-margin-top: calc(var(--header-h, 76px) + 1rem); }
.section-nav {
position: sticky;
top: var(--header-h, 76px);
z-index: 500;
background: rgba(251, 247, 240, .94);
-webkit-backdrop-filter: saturate(150%) blur(8px);
backdrop-filter: saturate(150%) blur(8px);
border-bottom: 1px solid var(--border-soft);
}
.section-nav__inner {
display: flex;
align-items: center;
gap: .4rem;
overflow-x: auto;
padding-block: .55rem;
scrollbar-width: thin;
}
.section-nav__label {
flex: 0 0 auto;
font-size: .8rem;
font-weight: 600;
color: var(--faint);
margin-inline-end: .3rem;
white-space: nowrap;
}
.section-nav a {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .35rem .8rem;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--paper);
color: var(--ink);
font-size: .85rem;
white-space: nowrap;
text-decoration: none;
transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.section-nav a:hover,
.section-nav a:focus-visible {
background: var(--gold-soft);
border-color: var(--gold-light);
color: var(--gold-text);
}
/* --- Onboarding portale: progresso e passi (Phase 19) --- */
.onboarding-progress {
height: 8px;
border-radius: 999px;
background: var(--mist);
overflow: hidden;
margin: .5rem 0 1rem;
}
.onboarding-progress > span {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--gold), var(--gold-light));
border-radius: 999px;
}
.onboarding-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.onboarding-steps li { display: flex; align-items: center; gap: .6rem; }
.onboarding-steps .ob-ico {
width: 1.7rem; height: 1.7rem; flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%; border: 1px solid var(--border); color: var(--faint);
}
.onboarding-steps li.is-done .ob-ico {
background: var(--gold-soft); border-color: var(--gold-light); color: var(--gold-text);
}
.onboarding-steps li.is-done .ob-label { color: var(--faint); }
.onboarding-steps a { text-decoration: none; }
.onboarding-steps a:hover .ob-label { text-decoration: underline; }
/* =====================================================================
Phase 21A — Sistema visuale premium (media frame, effetti, sidebar)
Additivo, sobrio/istituzionale, nessuna libreria. Rispetta reduced-motion.
===================================================================== */
/* --- Media frame: cornice immagine premium responsive --- */
.media-frame {
position: relative;
margin: 0;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-md);
border: 1px solid var(--border);
background: var(--mist);
isolation: isolate;
}
.media-frame img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s var(--ease, ease);
will-change: transform;
}
.media-frame--ratio { aspect-ratio: 16 / 10; }
.media-frame--portrait { aspect-ratio: 3 / 4; }
.media-frame--banner { aspect-ratio: 21 / 7; }
@media (max-width: 600px) { .media-frame--banner { aspect-ratio: 16 / 9; } }
.media-frame--zoom:hover img,
.media-frame--zoom:focus-within img { transform: scale(1.04); }
/* Overlay sfumato istituzionale (per etichette/testo sopra immagine) */
.media-frame--overlay::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(22,48,79,0) 35%, rgba(22,48,79,.55) 100%);
pointer-events: none;
z-index: 1;
}
.media-frame__caption {
margin-top: .5rem;
font-size: .85rem;
color: var(--faint);
font-style: italic;
}
.media-frame__credit {
position: absolute;
bottom: .4rem;
inset-inline-end: .55rem;
z-index: 2;
font-size: .68rem;
color: rgba(255, 255, 255, .85);
background: rgba(22, 48, 79, .45);
padding: .1em .5em;
border-radius: 999px;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
/* Glass label sovrapposta (es. categoria/anno) */
.media-frame__label {
position: absolute;
top: .7rem;
inset-inline-start: .7rem;
z-index: 2;
font-size: .78rem;
font-weight: 600;
color: #fff;
background: rgba(22, 48, 79, .42);
border: 1px solid rgba(255, 255, 255, .25);
padding: .25em .7em;
border-radius: 999px;
-webkit-backdrop-filter: saturate(140%) blur(6px);
backdrop-filter: saturate(140%) blur(6px);
}
/* --- Image card: card con immagine in testa --- */
.image-card {
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--border);
background: var(--paper);
box-shadow: var(--shadow-sm);
transition: transform .3s var(--ease, ease), box-shadow .3s var(--ease, ease);
}
.image-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.image-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--mist); }
.image-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease, ease); }
.image-card:hover .image-card__media img { transform: scale(1.05); }
.image-card__body { padding: 1.1rem 1.2rem 1.3rem; }
/* --- Editorial split: testo + immagine, allineati e ariosi --- */
.editorial-split {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 2.4rem;
align-items: center;
}
.editorial-split--reverse > :first-child { order: 2; }
@media (max-width: 860px) {
.editorial-split { grid-template-columns: 1fr; gap: 1.4rem; }
.editorial-split--reverse > :first-child { order: 0; }
}
/* --- Banda visuale di sezione (hero leggero per pagine interne) --- */
.section-visual { position: relative; }
.section-visual .media-frame { margin-block: 0 1.5rem; }
/* --- Navigazione "In questa sezione": stato attivo premium --- */
.section-nav a { position: relative; }
.section-nav a.is-active {
background: var(--navy);
border-color: var(--navy);
color: #fff;
}
.section-nav a.is-active:hover,
.section-nav a.is-active:focus-visible { color: #fff; background: var(--navy-light); }
/* --- Reveal morbido on-scroll (immagini e blocchi) ---
Attivo solo con JS (html.js): senza JS l'immagine resta visibile
(progressive enhancement, niente immagini invisibili). */
html.js .reveal-img { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease, ease), transform .7s var(--ease, ease); }
html.js .reveal-img.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.media-frame img,
.image-card,
.image-card__media img,
.media-frame--zoom:hover img { transition: none; transform: none; }
html.js .reveal-img { opacity: 1; transform: none; transition: none; }
}
/* --- LegalitalEntry: cornice logo + wordmark di fallback (Phase 22) --- */
.media-frame--logo {
background: var(--paper);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 2.4rem;
}
.media-frame--logo img { width: 100%; height: auto; object-fit: contain; max-height: 220px; }
/* Logo compatto dentro una card (es. «Progetto collegato» nell'evento) */
.lie-card-logo {
display: block;
width: auto;
max-width: 180px;
max-height: 84px;
height: auto;
object-fit: contain;
margin: .25rem 0 .75rem;
}
.lie-wordmark {
display: flex;
flex-direction: column;
gap: .35rem;
align-items: center;
justify-content: center;
text-align: center;
padding: 2.6rem 1.5rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: linear-gradient(160deg, var(--ivory), var(--mist));
box-shadow: var(--shadow-sm);
}
.lie-wordmark__name {
font-family: var(--font-serif, Lora, serif);
font-size: clamp(1.6rem, 4vw, 2.4rem);
letter-spacing: .04em;
color: var(--navy);
font-weight: 600;
}
.lie-wordmark__name strong { color: var(--gold-text); font-weight: 700; }
.lie-wordmark__payoff {
font-size: .95rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--faint);
}
/* ============================================================= *
* PHASE 24 — Sfondi di sezione, navbar premium, micro-motion *
* ============================================================= */
/* --- Sfondi di sezione discreti (section_bg) --- */
.section-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
/* Gradiente di fallback (brand espresso): se l'immagine manca, niente vuoto. */
background: linear-gradient(165deg, var(--navy-darker) 0%, var(--navy) 100%);
}
.section-bg__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.section-bg__overlay { position: absolute; inset: 0; }
/* Overlay coerente col brand (toni espresso) per leggibilità del testo. */
.section-bg--navy .section-bg__overlay {
background: linear-gradient(165deg, rgba(22,48,79,.86) 0%, rgba(22,48,79,.72) 100%);
}
/* Hero cinematografico: overlay DIREZIONALE — testo leggibile sul lato iniziale,
la fotografia respira sul lato opposto (più editoriale/fotografico). */
.section-bg--deep .section-bg__overlay {
background:
linear-gradient(100deg, rgba(9,20,36,.94) 0%, rgba(12,28,48,.82) 36%, rgba(17,38,64,.55) 68%, rgba(22,48,79,.40) 100%),
linear-gradient(0deg, rgba(9,20,36,.62) 0%, rgba(9,20,36,.10) 40%, transparent 60%);
}
[dir="rtl"] .section-bg--deep .section-bg__overlay {
background:
linear-gradient(260deg, rgba(9,20,36,.94) 0%, rgba(12,28,48,.82) 36%, rgba(17,38,64,.55) 68%, rgba(22,48,79,.40) 100%),
linear-gradient(0deg, rgba(9,20,36,.62) 0%, rgba(9,20,36,.10) 40%, transparent 60%);
}
.section-bg--light {
background: var(--mist);
}
.section-bg--light .section-bg__overlay {
background: linear-gradient(180deg, rgba(255,255,255,.90) 0%, rgba(244,238,226,.94) 100%);
}
/* "Sette aree di ricerca": l'overlay chiaro era quasi opaco (.90–.94) e
spegneva la foto. Velatura più leggera (la foto si percepisce) + filtro
discreto, mantenendo testo ed eyebrow leggibili. Solo questa sezione. */
.aree-sec .section-bg--light .section-bg__overlay {
background:
radial-gradient(135% 115% at 50% 0%, rgba(255, 255, 255, .60) 0%, rgba(248, 244, 236, .68) 48%, rgba(244, 238, 226, .80) 100%);
}
.aree-sec .section-bg__img { filter: saturate(1.12) contrast(1.05); }
/* Contenitore che ospita uno sfondo: isolamento + contenuto in primo piano. */
.has-section-bg { position: relative; isolation: isolate; }
.has-section-bg > .container,
.has-section-bg > .section-head { position: relative; z-index: 1; }
/* page-hero con immagine di sfondo */
.page-hero { isolation: isolate; }
.page-hero > .container { position: relative; z-index: 1; }
.page-hero .section-bg { z-index: 0; }
/* Parallax molto discreto: solo desktop, solo senza reduced-motion (JS).
La transizione mantiene il movimento fluido. */
@media (min-width: 1000px) {
.section-bg--parallax .section-bg__img { will-change: transform; transform: translate3d(0,0,0); }
}
/* --- Navbar premium: icone + sottolineatura animata + micro-motion --- */
.nav-link__icon {
font-size: .95em;
opacity: .8;
transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.nav-link:hover .nav-link__icon,
.nav-item.is-open > .nav-link .nav-link__icon,
.nav-link.is-active .nav-link__icon { opacity: 1; transform: translateY(-1px); }
@media (min-width: 1200px) {
/* Sottolineatura animata (oro) su hover/apertura/attivo. */
.nav-link::after {
content: "";
position: absolute;
left: .42rem; right: .42rem; bottom: .12rem;
height: 2px;
background: var(--gold);
border-radius: 2px;
transform: scaleX(0);
transform-origin: center;
transition: transform .28s var(--ease);
}
.nav-link:hover::after,
.nav-item.is-open > .nav-link::after,
.nav-link.is-active::after { transform: scaleX(1); }
/* Desktop: barra testuale pulita e istituzionale, senza icone inline (più
premium e mai a rischio overflow). Le icone restano nel menu mobile. */
.nav-link__icon { display: none; }
}
/* Eccezione premium: «Contatti» e «Accedi» mostrano un'icona dorata anche nella
barra desktop. Gated a >=1300px: a 1200-1279 la barra è già al limite (FR/ES)
e due icone la farebbero traboccare → lì restano testuali (con accento oro).
Le altre voci restano sempre testuali. */
@media (min-width: 1300px) {
.nav-item[data-nav="contatti"] > .nav-link,
.nav-item--account > .nav-link { gap: .34rem; }
.nav-item[data-nav="contatti"] > .nav-link .nav-link__icon,
.nav-item--account > .nav-link .nav-link__icon {
display: inline-flex; align-items: center;
width: auto; height: auto; margin: 0; padding: 0;
background: none; box-shadow: none; border-radius: 0;
font-size: .9rem; color: var(--gold); transition: color .25s var(--ease);
}
.nav-item[data-nav="contatti"] > .nav-link:hover .nav-link__icon,
.nav-item--account > .nav-link:hover .nav-link__icon { color: var(--gold-text); }
}
/* Menu mobile/sidebar: ogni voce ha un medaglione circolare azzurro con l'icona
— elegante, istituzionale, leggibile. */
@media (max-width: 1199.98px) {
.nav-link__icon {
display: inline-flex; align-items: center; justify-content: center;
flex: none; width: 2.1rem; height: 2.1rem; margin-right: .55rem;
border-radius: 50%; background: var(--azure-soft); color: var(--navy);
font-size: 1rem; opacity: 1;
box-shadow: inset 0 0 0 1px rgba(30, 58, 96, .08);
}
.nav-item.is-open > .nav-link .nav-link__icon,
.nav-link.is-active .nav-link__icon {
background: var(--navy); color: #fff; transform: none;
}
}
/* Header: leggera contrazione in scroll (oltre all'ombra già presente). */
.site-header { transition: box-shadow .3s var(--ease), background .3s var(--ease); }
/* --- Card lift coerente per le card statiche (micro-motion sobrio) --- */
.card--static { transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.card--static:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* --- Counters (numeri animati) --- */
.stat-num[data-count] { font-variant-numeric: tabular-nums; }
/* --- Reduced-motion: nessun parallax, nessun lift, nessuna sottolineatura animata --- */
@media (prefers-reduced-motion: reduce) {
.section-bg--parallax .section-bg__img { transform: none !important; }
.card--static:hover { transform: none; }
.nav-link::after { transition: none; }
.nav-link__icon { transition: none; }
}
/* Phase 30: contatori animati — cifre a larghezza fissa (niente jitter) */
.js-count-up, .stat-value[data-count] { font-variant-numeric: tabular-nums; }
/* ============================================================
Video showcase eventi (Phase 33) — premium, facade click-to-load
============================================================ */
/* Carosello orizzontale: 2 video visibili su desktop, swipe + frecce */
.video-carousel { position: relative; }
.video-track {
display: flex;
gap: 1.6rem;
list-style: none;
margin: 0;
padding: .35rem .15rem 1.35rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--gold-pale) transparent;
}
.video-track::-webkit-scrollbar { height: 6px; }
.video-track::-webkit-scrollbar-thumb { background: var(--gold-pale); border-radius: 3px; }
.video-track::-webkit-scrollbar-track { background: transparent; }
.video-card {
flex: 0 0 calc(50% - .8rem); /* due video per volta su desktop */
scroll-snap-align: start;
margin: 0;
}
@media (max-width: 991.98px) { .video-card { flex-basis: calc(70% - .5rem); } }
@media (max-width: 575.98px) { .video-card { flex-basis: 88%; } }
.video-carousel__nav {
position: absolute;
top: 40%;
transform: translateY(-50%);
z-index: 3;
width: 50px; height: 50px;
display: grid; place-items: center;
border: 0; border-radius: 50%;
background: #fff; color: var(--navy);
box-shadow: 0 8px 24px rgba(15, 34, 56, .24);
cursor: pointer; font-size: 1.35rem; line-height: 1;
transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.video-carousel__nav:hover { background: var(--gold-light); color: var(--navy-darker); transform: translateY(-50%) scale(1.07); }
.video-carousel__nav:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; }
.video-carousel__nav--prev { left: -12px; }
.video-carousel__nav--next { right: -12px; }
/* RTL: i comandi prev/next si specchiano (prev a destra, next a sinistra) e i
chevron si invertono, coerenti con la direzione di lettura/scorrimento. */
[dir="rtl"] .video-carousel__nav--prev { left: auto; right: -12px; }
[dir="rtl"] .video-carousel__nav--next { right: auto; left: -12px; }
[dir="rtl"] .video-carousel__nav .bi { transform: scaleX(-1); }
.video-carousel__nav[hidden] { display: none; }
@media (max-width: 767.98px) { .video-carousel__nav { display: none; } }
.video-card .video-facade {
position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
padding: 0; border: 0; cursor: pointer; overflow: hidden;
border-radius: var(--radius, 12px); background: var(--navy-darker, #0F2238);
box-shadow: 0 10px 30px rgba(15, 34, 56, .18);
transition: box-shadow .35s var(--ease, ease);
}
.video-card .video-facade img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
transition: transform .6s var(--ease, ease);
}
.video-card__overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(15, 34, 56, .04) 0%, rgba(15, 34, 56, .52) 100%);
transition: background .35s var(--ease, ease);
}
.video-play {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: 70px; height: 70px; display: grid; place-items: center; border-radius: 50%;
color: #fff; background: rgba(15, 34, 56, .84);
box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
transition: transform .3s var(--ease, ease), background .3s var(--ease, ease);
}
.video-play svg { margin-left: 3px; }
.video-card .video-facade:hover img,
.video-card .video-facade:focus-visible img { transform: scale(1.05); }
.video-card .video-facade:hover { box-shadow: 0 16px 42px rgba(15, 34, 56, .28); }
.video-card .video-facade:hover .video-play,
.video-card .video-facade:focus-visible .video-play {
transform: translate(-50%, -50%) scale(1.08); background: var(--gold-light); color: var(--navy-darker);
}
.video-card .video-facade:hover .video-card__overlay {
background: linear-gradient(180deg, rgba(15, 34, 56, 0) 0%, rgba(15, 34, 56, .42) 100%);
}
.video-card .video-facade:focus-visible { outline: 3px solid var(--gold-light, #C2A269); outline-offset: 3px; }
.video-card .video-embed {
position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
border-radius: var(--radius, 12px); box-shadow: 0 14px 38px rgba(15, 34, 56, .26);
}
.video-card .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-card__meta { padding: .9rem .15rem 0; }
.video-card__title { font-size: 1.1rem; line-height: 1.3; margin: 0 0 .15rem; }
.video-card__sub { color: var(--gold-text, #7D6230); font-size: .9rem; margin: 0; }
@media (prefers-reduced-motion: reduce) {
.video-card .video-facade, .video-card .video-facade img,
.video-play, .video-card__overlay { transition: none; }
.video-card .video-facade:hover img, .video-card .video-facade:focus-visible img { transform: none; }
}
/* ==========================================================================
RESTYLING SOTTO-HERO — componenti editoriali del corpo pagina
========================================================================== */
/* --- Card evento editoriale (lista eventi: prossimi/realizzati) --- */
.event-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
gap: 1.7rem;
}
@media (max-width: 575.98px) { .event-grid { grid-template-columns: 1fr; gap: 1.2rem; } }
.ev-card {
display: flex; flex-direction: column;
background: var(--paper);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.ev-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(47, 96, 153, .38); }
.ev-card__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--mist); }
.ev-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.ev-card:hover .ev-card__media img { transform: scale(1.05); }
.ev-card__media--panel { background: linear-gradient(150deg, var(--navy) 0%, var(--navy-darker) 100%); }
.ev-card__media--panel::before {
content: ""; position: absolute; inset: 0;
background-image: var(--oriental-gold); background-size: 46px 46px; opacity: .085;
}
.ev-card__panel {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
color: #fff; text-align: center; padding: 1rem;
}
.ev-card__panel-d { font-family: var(--display); font-size: 3.6rem; line-height: 1; color: var(--gold-light); }
.ev-card__panel-my { font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .82); margin-top: .25rem; }
.ev-card__panel-my--tba { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 1.02rem; color: var(--gold-pale); }
.ev-card__panel-rule { width: 2.2rem; height: 1px; background: rgba(194, 162, 105, .6); margin: .7rem 0; }
.ev-card__panel-mod { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.ev-card__datebadge {
position: absolute; inset-inline-start: .9rem; bottom: .9rem;
background: rgba(12, 26, 44, .92); color: #fff; border-radius: 11px;
padding: .42rem .65rem; text-align: center; line-height: 1; box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
}
.ev-card__datebadge .d { display: block; font-family: var(--display); font-size: 1.5rem; color: var(--gold-light); }
.ev-card__datebadge .my { display: block; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; margin-top: .15rem; }
.ev-card__body { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.ev-card__badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.ev-card__title { font-size: 1.18rem; line-height: 1.25; margin: 0 0 .45rem; }
.ev-card__title a { color: var(--ink); text-decoration: none; transition: color .2s var(--ease); }
.ev-card__title a:hover { color: var(--navy); }
.ev-card__place { font-size: .82rem; color: var(--muted); margin: 0 0 .6rem; }
.ev-card__place .bi { color: var(--gold-text); }
.ev-card__summary { font-size: .92rem; color: var(--muted); margin: 0 0 1.1rem; flex: 1; }
.ev-card__more { margin-top: auto; font-size: .82rem; }
/* --- Pannelli sedi premium (Contatti) --- */
.sede-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.3rem; }
.sede-panel {
position: relative; overflow: hidden;
background: linear-gradient(155deg, var(--navy) 0%, var(--navy-darker) 100%);
color: #fff; border-radius: var(--radius); padding: 1.7rem 1.6rem;
transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.sede-panel::before {
content: ""; position: absolute; inset-inline-end: -30px; top: -30px; width: 150px; height: 150px;
background-image: var(--oriental-gold); background-size: 44px 44px; opacity: .1; pointer-events: none;
}
.sede-panel:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.sede-panel__icon {
width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center;
background: rgba(255, 255, 255, .1); color: var(--gold-light); font-size: 1.3rem;
box-shadow: inset 0 0 0 1px rgba(200, 170, 110, .4); margin-bottom: 1rem;
}
.sede-panel__label { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--gold-light); margin: 0 0 .35rem; }
.sede-panel__addr { font-family: var(--serif); font-size: 1.15rem; line-height: 1.4; color: #fff; margin: 0; position: relative; }
/* --- Shell modulo premium --- */
.form-shell {
background: #fff; border: 1px solid var(--border); border-radius: 18px;
padding: clamp(1.5rem, 3vw, 2.4rem);
box-shadow: 0 14px 38px rgba(15, 34, 56, .07);
}
.form-shell .kicker { margin-bottom: .6rem; }
.form-control, .form-select, .form-shell textarea, .field input, .field textarea, .field select {
border-radius: 12px;
}
.form-control:focus, .form-select:focus, .field input:focus, .field textarea:focus, .field select:focus {
box-shadow: 0 0 0 4px var(--gold-soft);
}
/* --- Forum / iniziative in preparazione: pannello navy premium --- */
.forum-card {
position: relative; overflow: hidden;
background: linear-gradient(155deg, var(--navy) 0%, var(--navy-darker) 100%);
color: rgba(255, 255, 255, .85);
border-radius: var(--radius); padding: 2rem 1.9rem;
display: flex; flex-direction: column;
transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.forum-card::before {
content: ""; position: absolute; inset-inline-end: -30px; top: -30px; width: 180px; height: 180px;
background-image: var(--oriental-gold); background-size: 46px 46px; opacity: .09; pointer-events: none;
}
.forum-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.forum-card__icon {
width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
background: rgba(255, 255, 255, .1); color: var(--gold-light); font-size: 1.4rem;
box-shadow: inset 0 0 0 1px rgba(200, 170, 110, .4); margin-bottom: 1.1rem; position: relative;
}
.forum-card .badge-prep { align-self: flex-start; margin-bottom: .85rem; position: relative; }
.forum-card__title { color: #fff; font-size: 1.42rem; margin: 0 0 .65rem; position: relative; }
.forum-card__text { color: rgba(255, 255, 255, .78); font-size: .96rem; margin: 0 0 1.2rem; position: relative; }
.forum-card__cta { margin-top: auto; color: var(--gold-light); position: relative; }
.forum-card__cta:hover { color: #fff; }
/* --- Card "Informazioni" evento: righe con medaglione icona --- */
.event-info__head {
font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
font-weight: 700; color: var(--gold-text); margin: 0 0 1.15rem;
}
.event-info__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.event-info__list li { display: flex; gap: .9rem; align-items: flex-start; }
.event-info__ic {
flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
background: linear-gradient(152deg, var(--azure-soft) 0%, var(--paper) 100%);
color: var(--navy); box-shadow: inset 0 0 0 1px rgba(156, 122, 60, .26); font-size: 1.05rem;
}
.event-info__txt { display: flex; flex-direction: column; line-height: 1.4; min-width: 0; }
.event-info__k { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
/* ====== Pannello editoriale asimmetrico (immagine incorniciata + testo) ====== */
.media-panel {
display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.8rem, 4vw, 3.4rem);
align-items: center;
}
.media-panel-sec--flip .media-panel { grid-template-columns: .95fr 1.05fr; }
.media-panel-sec--flip .media-panel__media { order: 2; }
.media-panel__media {
position: relative; margin: 0; border-radius: var(--radius);
overflow: hidden; aspect-ratio: 4 / 3;
box-shadow: 0 26px 50px -28px rgba(15, 34, 56, .55);
}
.media-panel__img, .media-panel__media img {
width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
transition: transform 1.1s var(--ease);
}
.media-panel-sec:hover .media-panel__img { transform: scale(1.04); }
.media-panel__frame {
position: absolute; inset: 10px; border: 1px solid rgba(255, 255, 255, .42);
border-radius: calc(var(--radius) - 6px); pointer-events: none;
}
.media-panel__media::after {
content: ""; position: absolute; inset-inline-end: 0; inset-block-end: 0; width: 110px; height: 110px;
background-image: var(--oriental-gold); background-size: 38px 38px; opacity: .14; pointer-events: none;
}
.media-panel__title { font-size: clamp(1.5rem, 3vw, 2.05rem); margin: .35rem 0 .8rem; color: var(--ink); }
.media-panel__text { color: var(--muted); font-size: 1.02rem; line-height: 1.75; margin: 0 0 1.1rem; max-width: 46ch; }
.media-panel__cta { font-weight: 600; }
@media (max-width: 860px) {
.media-panel { grid-template-columns: 1fr; gap: 1.6rem; }
.media-panel-sec--flip .media-panel { grid-template-columns: 1fr; }
.media-panel-sec--flip .media-panel__media { order: 0; }
.media-panel__media { aspect-ratio: 16 / 9; }
.media-panel__text { max-width: none; }
}
/* ====== Art direction — schemi immagine variati ====== */
/* FULLWIDTH_BREAK: immagine cinematografica edge-to-edge, didascalia sotto */
.editorial-break { margin: clamp(2.6rem, 6vw, 4.8rem) 0; }
.editorial-break__media {
margin: 0; width: 100%; aspect-ratio: var(--break-ratio, 21 / 9);
max-height: 500px; min-height: 280px; overflow: hidden; position: relative;
}
.editorial-break__img, .editorial-break__media img {
width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.3s var(--ease);
}
.editorial-break:hover .editorial-break__img { transform: scale(1.03); }
.editorial-break__cap { display: flex; flex-direction: column; gap: .4rem; margin-top: 1.15rem; }
.editorial-break__line {
font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, 2.1vw, 1.36rem);
color: var(--ink); max-width: 62ch; line-height: 1.5;
}
/* ABOVE_TEXT / FIGURE_CAPTION: immagine di apertura sopra il testo + didascalia */
.figure-lead { margin: 0 0 1.9rem; }
.figure-lead__media {
display: block; border-radius: var(--radius); overflow: hidden; position: relative;
box-shadow: 0 22px 46px -26px rgba(15, 34, 56, .5);
}
.figure-lead__media img, .figure-lead__img {
width: 100%; aspect-ratio: var(--lead-ratio, 16 / 9); object-fit: cover; display: block;
transition: transform 1.2s var(--ease);
}
.figure-lead:hover .figure-lead__media img { transform: scale(1.03); }
.figure-lead__cap {
font-family: var(--serif); font-style: italic; font-size: .92rem; color: var(--muted);
padding: .75rem .15rem 0; line-height: 1.5;
}
/* MOSAIC_2: coppia asimmetrica con offset editoriale */
.mosaic-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(14px, 2.2vw, 28px); align-items: start; }
.mosaic__primary, .mosaic__secondary {
position: relative; margin: 0; border-radius: var(--radius); overflow: hidden;
box-shadow: 0 18px 40px -24px rgba(15, 34, 56, .45);
}
.mosaic__primary { aspect-ratio: 4 / 3; }
.mosaic__secondary { aspect-ratio: 3 / 4; margin-top: 28px; }
.mosaic__img, .mosaic-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease); }
.mosaic__primary:hover .mosaic__img, .mosaic__secondary:hover .mosaic__img { transform: scale(1.04); }
.mosaic__cap {
position: absolute; inset-inline: 0; inset-block-end: 0; padding: .5rem .75rem;
font-size: .74rem; color: #fff; background: linear-gradient(to top, rgba(15, 34, 56, .66), transparent);
}
@media (max-width: 680px) {
.mosaic-grid { grid-template-columns: 1fr; }
.mosaic__secondary { aspect-ratio: 16 / 9; margin-top: 0; }
}
/* PORTRAIT_FEATURE: ritratto reale ingrandito con card bio in leggero overlap */
.person-feature__grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(1.8rem, 4vw, 3.4rem); align-items: center; }
.person-feature__media {
margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; max-width: 380px;
box-shadow: 0 28px 54px -28px rgba(15, 34, 56, .6); box-shadow: inset 0 0 0 1px rgba(156, 122, 60, .3), 0 28px 54px -28px rgba(15, 34, 56, .55);
}
.person-feature__media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.person-feature__role { font-family: var(--serif); font-style: italic; color: var(--gold-text); margin: .1rem 0 .9rem; }
@media (max-width: 820px) {
.person-feature__grid { grid-template-columns: 1fr; gap: 1.5rem; }
.person-feature__media { order: -1; max-width: 300px; }
}
/* SECTOR_VISUAL: card settore con visual tematico dedicato in testa */
.sector-vcard { padding: 0; overflow: hidden; display: flex; flex-direction: column;
box-shadow: var(--shadow-sm);
border-top: 4px solid var(--sector-color, var(--rete-green)); }
.sector-vcard__visual {
position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
/* Fondo a colore pieno come fallback; sopra, una trama geometrica
euro-mediterranea tenue + un gradiente direzionale che dà profondità ai
visual senza foto (le card con ![]()
coprono questo strato). */
background-color: var(--sector-color);
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.16' stroke-width='1'%3E%3Crect x='11' y='11' width='22' height='22'/%3E%3Crect x='11' y='11' width='22' height='22' transform='rotate(45 22 22)'/%3E%3C/g%3E%3C/svg%3E"),
linear-gradient(152deg, color-mix(in srgb, var(--sector-color) 84%, #fff) 0%, var(--sector-color) 50%, color-mix(in srgb, var(--sector-color) 76%, #0A1A2E) 100%);
background-size: 44px 44px, cover;
}
.sector-vcard__img, .sector-vcard__visual img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--ease); }
.sector-vcard:hover .sector-vcard__img { transform: scale(1.06); }
.sector-vcard__visual::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(15, 34, 56, .05) 38%, color-mix(in srgb, var(--sector-color) 50%, #0a1a2e) 100%);
opacity: .58;
}
.sector-vcard__num {
position: absolute; top: .5rem; inset-inline-end: .85rem; z-index: 1;
font-family: var(--display); font-size: 1.8rem; line-height: 1; color: #fff; opacity: .9;
text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.sector-vcard__icon {
position: absolute; inset-inline-start: .85rem; bottom: .8rem; z-index: 2;
width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
background: #fff; color: var(--sector-color); box-shadow: 0 6px 16px rgba(15, 34, 56, .3);
font-size: 1.18rem; transition: transform .3s var(--ease);
}
.sector-vcard:hover .sector-vcard__icon { transform: translateY(-3px); }
.sector-vcard__body { padding: 1.3rem; display: flex; flex-direction: column; flex: 1; }
.sector-vcard__title { font-size: 1.08rem; margin: 0 0 .5rem; }
.sector-vcard__desc { color: var(--muted); font-size: .92rem; margin: 0 0 1rem; flex: 1; }
.sector-vcard .card-more { margin-top: auto; }
/* ============================================================
"Continua il percorso" — chiusura editoriale: tre vie d'approfondimento.
Card-link intere, premium, accessibili (focus-visible), RTL-safe.
============================================================ */
.continue-journey { background: linear-gradient(180deg, var(--paper) 0%, var(--azure-bg) 100%); }
.cj-grid { gap: 1.25rem; }
.cj-card {
display: flex; flex-direction: column; align-items: flex-start;
background: var(--paper);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
padding: 1.7rem 1.6rem 1.5rem;
text-decoration: none;
position: relative; overflow: hidden;
transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.cj-card::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
[dir="rtl"] .cj-card::before { transform-origin: right; }
.cj-card:hover, .cj-card:focus-visible {
transform: translateY(-5px); box-shadow: var(--shadow-hover);
border-color: rgba(47, 96, 153, .34);
}
.cj-card:hover::before, .cj-card:focus-visible::before { transform: scaleX(1); }
.cj-card:focus-visible { outline: 3px solid var(--navy-light); outline-offset: 3px; }
.cj-card__icon {
width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
background: linear-gradient(152deg, var(--azure-soft) 0%, var(--paper) 100%);
color: var(--navy); font-size: 1.25rem; margin-bottom: 1rem;
box-shadow: inset 0 0 0 1px rgba(156, 122, 60, .28);
transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.cj-card:hover .cj-card__icon {
background: linear-gradient(152deg, var(--navy) 0%, var(--navy-deep) 100%);
color: #fff; transform: translateY(-2px);
}
.cj-card__kicker {
font-family: var(--display); font-size: 1.4rem; font-weight: 600; color: var(--ink);
letter-spacing: -.01em; line-height: 1.15; margin-bottom: .5rem;
}
.cj-card__text { font-size: .93rem; color: var(--muted); line-height: 1.6; margin-bottom: 1.1rem; }
.cj-card__more {
margin-top: auto; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
color: var(--gold-text); display: inline-flex; align-items: center; gap: .45rem;
}
.cj-card__more .bi { transition: transform .3s var(--ease); }
.cj-card:hover .cj-card__more .bi { transform: translateX(4px); }
[dir="rtl"] .cj-card__more .bi { transform: scaleX(-1); }
[dir="rtl"] .cj-card:hover .cj-card__more .bi { transform: scaleX(-1) translateX(4px); }
/* ============================================================
Fascia istituzionale (trust strip) — autorevolezza sobria, hairline.
============================================================ */
.trust-strip { background: var(--paper); border-block: 1px solid var(--border-soft); padding: 1.1rem 0; }
.trust-strip__list {
display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
list-style: none; margin: 0; padding: 0;
}
.trust-strip__item {
display: inline-flex; align-items: center; gap: .55rem;
padding: .35rem 1.6rem; font-size: .82rem; font-weight: 600; letter-spacing: .03em;
color: var(--navy); white-space: nowrap;
}
.trust-strip__item + .trust-strip__item { border-inline-start: 1px solid var(--border); }
.trust-strip__item .bi { color: var(--gold-text); font-size: 1.06rem; }
@media (max-width: 767.98px) {
.trust-strip__list { flex-direction: column; gap: .55rem; }
.trust-strip__item { padding: .2rem 0; border-inline-start: 0; }
}
/* ============================================================
Percorso di adesione in tre passi (membership journey).
============================================================ */
.mj-steps {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; position: relative;
}
.mj-step {
background: var(--paper); border: 1px solid var(--border-soft); border-radius: var(--radius);
box-shadow: var(--shadow-sm); padding: 2rem 1.6rem 1.7rem; position: relative;
}
.mj-step__num {
position: absolute; top: 1.1rem; inset-inline-end: 1.35rem;
font-family: var(--display); font-size: 2.5rem; line-height: 1; font-weight: 600; color: var(--gold-pale);
}
.mj-step__icon {
width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center;
background: linear-gradient(152deg, var(--azure-soft) 0%, var(--paper) 100%); color: var(--navy);
box-shadow: inset 0 0 0 1px rgba(156, 122, 60, .28); font-size: 1.2rem; margin-bottom: 1.05rem;
}
.mj-step__title { font-size: 1.18rem; margin: 0 0 .45rem; }
.mj-step__text { font-size: .92rem; color: var(--muted); margin: 0; line-height: 1.6; }
@media (min-width: 768px) {
.mj-step:not(:last-child)::after {
content: ""; position: absolute; top: 3.3rem; inset-inline-end: -.95rem; width: 1.9rem; height: 2px;
background: linear-gradient(90deg, var(--gold), rgba(156, 122, 60, .1));
}
[dir="rtl"] .mj-step:not(:last-child)::after { background: linear-gradient(270deg, var(--gold), rgba(156, 122, 60, .1)); }
}
@media (max-width: 767.98px) { .mj-steps { grid-template-columns: 1fr; gap: 1rem; } }
/* ============================================================
Riga di fiducia Contatti (contact trust).
============================================================ */
.ct-list {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem;
}
.ct-item {
display: grid; grid-template-columns: auto 1fr; column-gap: .9rem; row-gap: .15rem; align-items: start;
padding: 1.2rem 1.3rem; background: var(--paper); border: 1px solid var(--border-soft);
border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.ct-item__icon {
grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
background: linear-gradient(152deg, var(--azure-soft) 0%, var(--paper) 100%); color: var(--navy);
box-shadow: inset 0 0 0 1px rgba(156, 122, 60, .26); font-size: 1.15rem;
}
.ct-item__title { font-family: var(--serif); font-weight: 600; font-size: 1.02rem; color: var(--ink); }
.ct-item__text { font-size: .88rem; color: var(--muted); line-height: 1.55; }
@media (max-width: 767.98px) { .ct-list { grid-template-columns: 1fr; gap: 1rem; } }
/* ============================================================
Metodo AGAMI — rail verticale istituzionale (cinque fasi).
============================================================ */
.ma-list { list-style: none; margin: 1.6rem 0 0; padding: 0; max-width: 760px; }
.ma-item { display: grid; grid-template-columns: 3rem 1fr; gap: 1.2rem; padding-bottom: 1.9rem; position: relative; }
.ma-item:last-child { padding-bottom: 0; }
.ma-item__n {
font-family: var(--display); font-size: 1.45rem; font-weight: 600; line-height: 1;
width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center;
color: var(--navy); background: var(--paper); border: 1px solid var(--border);
box-shadow: inset 0 0 0 4px var(--azure-bg); position: relative; z-index: 1;
}
/* rail dorato che collega i numeri */
.ma-item:not(:last-child)::before {
content: ""; position: absolute; inset-inline-start: 1.5rem; top: 3rem; bottom: -.15rem; width: 2px;
background: linear-gradient(var(--gold), rgba(156, 122, 60, .12)); transform: translateX(-50%);
}
[dir="rtl"] .ma-item:not(:last-child)::before { transform: translateX(50%); }
.ma-item__title { font-size: 1.18rem; margin: .35rem 0 .35rem; }
.ma-item__text { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.6; }
/* ============================================================
Manifesto / citazione-card premium (identità editoriale).
============================================================ */
.manifesto-quote {
position: relative; max-width: 820px; margin-inline: auto; text-align: center;
background: var(--ivory); border: 1px solid var(--border-soft);
border-radius: var(--radius); box-shadow: var(--shadow-sm);
padding: 2.4rem 2.4rem 2rem;
}
.manifesto-quote::before {
content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; border-radius: var(--radius) var(--radius) 0 0;
background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold-light) 50%, var(--gold) 70%, transparent);
}
.manifesto-quote__text {
/* reset degli stili base di (bordo/sfondo/padding) */
border: 0; background: none; padding: 0; border-radius: 0;
font-family: var(--display); font-style: italic; font-size: clamp(1.35rem, 2.6vw, 1.95rem);
line-height: 1.4; letter-spacing: -.01em; color: var(--navy); margin: 0 0 1rem;
}
.manifesto-quote__cite {
display: inline-flex; align-items: center; gap: .6rem; font-style: normal;
font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text);
}
.manifesto-quote__cite::before { content: ""; width: 1.8rem; height: 1px; background: var(--gold); }
/* ============================================================
Ricerca — empty state guidato (scorciatoie alle sezioni).
============================================================ */
.search-guide { margin-top: 1.6rem; }
.search-guide__title {
font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
color: var(--gold-text); text-align: center; margin-bottom: 1rem;
}
.search-guide__grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; max-width: 720px; margin-inline: auto;
}
.search-guide__link {
display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center;
padding: 1.1rem .8rem; background: var(--paper); border: 1px solid var(--border-soft);
border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); text-decoration: none;
color: var(--navy); font-size: .85rem; font-weight: 600;
transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.search-guide__link:hover, .search-guide__link:focus-visible {
transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(47, 96, 153, .3);
}
.search-guide__link .bi { font-size: 1.35rem; color: var(--gold-text); }
@media (max-width: 575.98px) { .search-guide__grid { grid-template-columns: 1fr 1fr; } }
/* ============================================================
Sistema badge legale (fase 2) — famiglie semantiche sobrie per tipo-risorsa.
============================================================ */
.badge--journal, .badge--ricerca { background: var(--gold-soft); color: var(--gold-text); border: 1px solid rgba(156, 122, 60, .3); }
.badge--documento { background: rgba(184, 115, 51, .12); color: #8a521f; border: 1px solid rgba(184, 115, 51, .3); }
.badge--evento, .badge--video { background: rgba(31, 91, 51, .1); color: #1F5B33; border: 1px solid rgba(31, 91, 51, .28); }
.badge--rete { background: var(--azure-soft); color: var(--navy); border: 1px solid var(--azure-line); }
/* ============================================================
Knowledge ecosystem — hub editoriale delle risorse (card con badge).
============================================================ */
.knowledge-eco { background: linear-gradient(180deg, var(--paper) 0%, var(--azure-bg) 100%); }
.ke-grid { gap: 1.25rem; }
.ke-card {
display: flex; flex-direction: column; align-items: flex-start;
background: var(--paper); border: 1px solid var(--border-soft); border-radius: var(--radius);
box-shadow: var(--shadow-sm); padding: 1.6rem 1.5rem 1.4rem; text-decoration: none;
position: relative; overflow: hidden;
transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.ke-card::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
background: linear-gradient(90deg, var(--gold), var(--gold-light));
transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
[dir="rtl"] .ke-card::before { transform-origin: right; }
.ke-card:hover, .ke-card:focus-visible { transform: translateY(-5px); box-shadow: var(--shadow-hover); border-color: rgba(47, 96, 153, .34); }
.ke-card:hover::before, .ke-card:focus-visible::before { transform: scaleX(1); }
.ke-card:focus-visible { outline: 3px solid var(--navy-light); outline-offset: 3px; }
.ke-card .badge { margin-bottom: .9rem; }
.ke-card__title { font-family: var(--display); font-size: 1.5rem; font-weight: 600; color: var(--ink); letter-spacing: -.01em; line-height: 1.15; margin: 0 0 .45rem; }
.ke-card__text { font-size: .92rem; color: var(--muted); line-height: 1.55; margin: 0 0 1.1rem; }
.ke-card__more { margin-top: auto; font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gold-text); display: inline-flex; align-items: center; gap: .45rem; }
.ke-card__more .bi { transition: transform .3s var(--ease); }
.ke-card:hover .ke-card__more .bi { transform: translateX(4px); }
[dir="rtl"] .ke-card__more .bi { transform: scaleX(-1); }
[dir="rtl"] .ke-card:hover .ke-card__more .bi { transform: scaleX(-1) translateX(4px); }
/* ============================================================
Dossier istituzionale — righe numerate da documento legale.
============================================================ */
.institutional-dossier .dossier {
max-width: 880px; margin-inline: auto; background: var(--paper);
border: 1px solid var(--border-soft); border-radius: var(--radius);
box-shadow: var(--shadow-md); overflow: hidden;
}
.dossier__head { padding: 1.8rem 2rem 1.4rem; border-bottom: 1px solid var(--border-soft); background: linear-gradient(180deg, var(--ivory), var(--paper)); }
.dossier__head .kicker { margin-bottom: .45rem; }
.dossier__head h2 { margin: 0; }
.dossier__list { margin: 0; padding: .5rem 2rem 1.5rem; counter-reset: dossier; }
.dossier__row {
display: grid; grid-template-columns: 1.8rem 12rem 1fr; gap: .15rem 1rem; align-items: baseline;
padding: .9rem 0; border-bottom: 1px solid var(--border-soft);
}
.dossier__row:last-child { border-bottom: 0; }
.dossier__row::before {
counter-increment: dossier; content: counter(dossier, decimal-leading-zero);
font-family: var(--display); font-size: .95rem; color: var(--gold-text); font-weight: 600;
}
.dossier__k { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text); margin: 0; }
.dossier__v { font-family: var(--serif); color: var(--ink); margin: 0; font-size: 1rem; line-height: 1.45; }
@media (max-width: 639.98px) {
.dossier__head, .dossier__list { padding-inline: 1.3rem; }
.dossier__row { grid-template-columns: 1.6rem 1fr; }
.dossier__k, .dossier__v { grid-column: 2; }
}
/* ============================================================
Pannello di conversione adesione (navy premium).
============================================================ */
.conversion-panel {
position: relative; overflow: hidden; text-align: center;
background:
radial-gradient(900px 300px at 50% -30%, rgba(156, 122, 60, .32), transparent 60%),
linear-gradient(160deg, var(--navy-darker) 0%, var(--navy) 100%);
color: #fff; border-radius: var(--radius); padding: clamp(2.4rem, 5vw, 3.6rem);
}
.conversion-panel::before {
content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--gold-light) 50%, transparent);
}
.conversion-panel .kicker { color: var(--gold-light); justify-content: center; }
.conversion-panel__title { color: #fff; max-width: 20ch; margin: 0 auto .6rem; }
.conversion-panel__lead { color: rgba(255, 255, 255, .82); max-width: 560px; margin: 0 auto 1.7rem; }
.conversion-panel .cta-actions { justify-content: center; }
.conversion-panel__trust { margin-top: 1.7rem; font-size: .76rem; letter-spacing: .04em; color: rgba(255, 255, 255, .55); }
/* ============================================================
Azioni contestuali di fine pagina (barra discreta).
============================================================ */
.ctx-actions {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .7rem 1.6rem;
padding: 1.3rem 1.6rem; background: var(--ivory); border: 1px solid var(--border-soft);
border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.ctx-actions__title { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); }
.ctx-actions__links { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; }
.ctx-link { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--navy); text-decoration: none; font-size: .95rem; transition: color .25s var(--ease); }
.ctx-link:hover { color: var(--gold-text); }
.ctx-link .bi { transition: transform .3s var(--ease); }
.ctx-link:hover .bi { transform: translateX(3px); }
[dir="rtl"] .ctx-link .bi { transform: scaleX(-1); }
[dir="rtl"] .ctx-link:hover .bi { transform: scaleX(-1) translateX(3px); }
/* ============================================================
Rifiniture di integrazione — un solo sistema, non una somma di componenti.
Coerenza di freccia/CTA, badge, tipografia multilingue, footer.
(Il focus-visible è già coerente globalmente: vedi :focus-visible, riga ~183.)
============================================================ */
/* 1 · Freccia dei link/CTA: stessa lingua visiva su tutte le famiglie di card.
Le due famiglie nuove allineano la tipografia del «more»; .ev-card e
.search-group ora avanzano di 4px all'hover — lo standard del sistema
(.card/.cj-card/.ke-card/.link-arrow), prima restavano ferme; tutte le
frecce si specchiano in RTL e avanzano. (.card-more resta a 4px da riga 2362.) */
.cj-card__more, .ke-card__more { font-size: .78rem; font-weight: 700; letter-spacing: .08em; }
.ev-card__more .bi, .search-group__more .bi { transition: transform .3s var(--ease); }
.ev-card:hover .ev-card__more .bi, .search-group__more:hover .bi { transform: translateX(4px); }
[dir="rtl"] .card-more .bi, [dir="rtl"] .ev-card__more .bi,
[dir="rtl"] .search-group__more .bi, [dir="rtl"] .link-arrow .bi { transform: scaleX(-1); }
[dir="rtl"] .card--link:hover .card-more .bi, [dir="rtl"] .ev-card:hover .ev-card__more .bi,
[dir="rtl"] .search-group__more:hover .bi, [dir="rtl"] .link-arrow:hover .bi { transform: scaleX(-1) translateX(4px); }
/* 2 · Badge semantici come famiglia unica: l'etichetta non va mai a capo a
metà e l'icona è allineata otticamente al testo su ogni variante. */
.badge { white-space: nowrap; }
.badge .bi { font-size: .9em; line-height: 1; }
/* 3 · Robustezza cross-lingua: le griglie di card premium stirano in altezza,
così i testi FR/ES più lunghi non sfasano le righe e la CTA resta in basso. */
.knowledge-eco .grid, .audience-paths .grid, .membership-value .grid,
.contact-gateway .grid, .continue-journey .grid { align-items: stretch; }
/* 4 · Equilibrio tipografico multilingue: titoli bilanciati e paragrafi senza
righe orfane nelle componenti premium, perché IT/FR/EN/ES/AR respirino uguale.
(text-wrap è progressive enhancement: no-op sui browser che non lo supportano.) */
.knowledge-eco .section-head h2, .audience-paths .section-head h2,
.membership-value .section-head h2, .contact-gateway .section-head h2,
.continue-journey .section-head h2, .institutional-dossier .section-head h2 { text-wrap: balance; }
.cj-card p, .ke-card p, .dossier p { text-wrap: pretty; }
/* 5 · Chiusura istituzionale del footer: i codici legali (C.F./RUNTS) con una
leggera spaziatura «da registro»; il nome legale ancorato da una hairline
dorata, coerente con i titoli di colonna del footer (RTL-aware). */
.footer-legal-identity .footer-legal-line span { letter-spacing: .01em; }
.footer-legal-identity .footer-legal-name {
display: inline-block; position: relative; padding-bottom: .4rem;
}
.footer-legal-identity .footer-legal-name::after {
content: ""; position: absolute; inset-inline-start: 0; bottom: 0;
width: 34px; height: 2px; border-radius: 2px;
background: linear-gradient(90deg, var(--gold), transparent);
}
[dir="rtl"] .footer-legal-identity .footer-legal-name::after {
background: linear-gradient(270deg, var(--gold), transparent);
}
/* ============================================================
Sezione immersiva premium — sfondo fotografico + testo sopra
(background image + overlay direzionale + pannello/affermazione)
============================================================ */
.immersive-sec { padding-block: clamp(4.6rem, 10vw, 8rem); overflow: hidden; }
.immersive-sec--tall { padding-block: clamp(6rem, 13vw, 10.5rem); }
.immersive-sec .section-bg__img { transition: transform 2.2s var(--ease); }
.immersive-sec:hover .section-bg__img { transform: scale(1.05); }
.immersive-sec__inner { position: relative; max-width: 600px; }
.immersive-sec--center .immersive-sec__inner { max-width: 800px; margin-inline: auto; text-align: center; }
.immersive-sec--end .immersive-sec__inner { margin-inline-start: auto; }
.immersive-sec__eyebrow {
display: inline-flex; align-items: center; gap: .75rem;
font-size: .72rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
color: var(--gold-light); margin: 0 0 1.15rem;
}
.immersive-sec__eyebrow::before { content: ""; width: 36px; height: 1px; background: linear-gradient(90deg, var(--gold-light), transparent); }
[dir="rtl"] .immersive-sec__eyebrow::before { background: linear-gradient(270deg, var(--gold-light), transparent); }
.immersive-sec--center .immersive-sec__eyebrow { justify-content: center; }
.immersive-sec--center .immersive-sec__eyebrow::before { display: none; }
.immersive-sec__title {
font-family: var(--display); color: #fff; font-weight: 600;
font-size: clamp(2.05rem, 4.6vw, 3.45rem); line-height: 1.07; letter-spacing: -.005em;
margin: 0 0 1.15rem; text-shadow: 0 2px 26px rgba(9, 20, 36, .45); text-wrap: balance;
}
.immersive-sec__text {
color: rgba(255, 255, 255, .88); font-size: clamp(1rem, 1.35vw, 1.13rem); line-height: 1.78;
max-width: 53ch; margin: 0 0 1.7rem; text-shadow: 0 1px 18px rgba(9, 20, 36, .4);
}
.immersive-sec--center .immersive-sec__text { margin-inline: auto; }
.immersive-sec__actions { display: flex; flex-wrap: wrap; gap: .85rem; }
.immersive-sec--center .immersive-sec__actions { justify-content: center; }
/* Variante PANNELLO: modulo editoriale in vetro navy sopra la fotografia */
.immersive-sec--panel .immersive-sec__inner {
max-width: 560px;
background: linear-gradient(155deg, rgba(15, 34, 56, .90) 0%, rgba(15, 34, 56, .74) 100%);
-webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
border: 1px solid rgba(200, 170, 110, .32);
border-radius: var(--radius);
padding: clamp(2rem, 3.6vw, 3.3rem);
box-shadow: 0 36px 84px -38px rgba(0, 0, 0, .7);
}
.immersive-sec--panel .immersive-sec__title,
.immersive-sec--panel .immersive-sec__text { text-shadow: none; }
@media (max-width: 700px) {
.immersive-sec__inner,
.immersive-sec--center .immersive-sec__inner,
.immersive-sec--panel .immersive-sec__inner { max-width: none; }
.immersive-sec--panel .immersive-sec__inner { padding: 1.6rem 1.4rem; }
}
@media (prefers-reduced-motion: reduce) { .immersive-sec:hover .section-bg__img { transform: none; } }
/* ============================================================= *
* PHASE 35 — Polish premium finale *
* Eleva (non sostituisce) il sistema esistente: ombre hover *
* materiche, filo oro, badge raffinati, evento in evidenza, *
* micro-interazioni sobrie, CTA, focus coerente. RTL-safe. *
* ============================================================= */
:root {
/* Ombra hover a doppio strato: profondità blu fredda + alone caldo oro. */
--shadow-hover: 0 26px 56px -16px rgba(16, 36, 62, .30), 0 8px 20px -10px rgba(120, 90, 35, .20);
}
/* --- Elevazione card premium: hover più ricco + filo oro discreto --- */
.ev-card:hover, .pub-card:hover {
box-shadow: var(--shadow-hover), inset 0 0 0 1px rgba(184, 115, 51, .32);
}
.card:hover, .dip-card:hover, .card--link:hover { box-shadow: var(--shadow-hover); }
/* immagine card-media (notizie/home): zoom sobrio coerente con ev-card */
.card--link .card-media img { transition: transform .6s var(--ease); }
.card--link:hover .card-media img { transform: scale(1.05); }
/* --- Badge raffinati: interattivi con micro-lift; nuova variante featured --- */
.badge { transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); }
a.badge-video:hover, a.badge:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(16, 36, 62, .26); }
.badge-featured {
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
color: var(--navy-darker); border: 0;
box-shadow: 0 4px 12px rgba(120, 90, 35, .22);
}
/* --- Evento in evidenza: card editoriale orizzontale a tutta larghezza --- */
.ev-card--featured { position: relative; }
.ev-card--featured .ev-card__eyebrow {
position: absolute; inset-block-start: 1rem; inset-inline-start: 1rem; z-index: 3;
}
@media (min-width: 768px) {
.ev-card--featured { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
.ev-card--featured .ev-card__media { flex: 0 0 48%; aspect-ratio: auto; min-height: 340px; }
.ev-card--featured .ev-card__body { flex: 1; justify-content: center; padding: clamp(1.8rem, 3.4vw, 3rem); }
.ev-card--featured .ev-card__title { font-size: clamp(1.45rem, 2.5vw, 2.05rem); line-height: 1.15; }
.ev-card--featured .ev-card__summary { font-size: 1.02rem; max-width: 56ch; }
.ev-card--featured .ev-card__panel-d { font-size: 5rem; }
}
[dir="rtl"] .ev-card--featured .ev-card__media--panel { /* gradiente già simmetrico */ }
/* --- Pubblicazione in evidenza (documenti/journal) --- */
.pub-card--featured {
background:
radial-gradient(620px 240px at 100% 0%, rgba(156, 122, 60, .10), transparent 62%),
var(--paper);
border-color: rgba(156, 122, 60, .34);
}
.pub-card--featured::before { transform: scaleX(1); height: 4px; }
/* --- Micro-interazione: sottolineatura animata per .link-arrow --- */
.link-arrow { position: relative; }
.link-arrow::after {
content: ""; position: absolute; inset-inline-start: 0; bottom: -2px;
width: 100%; height: 1px; background: currentColor; opacity: .45;
transform: scaleX(0); transform-origin: inline-start; transition: transform .32s var(--ease);
}
.link-arrow:hover::after { transform: scaleX(1); }
[dir="rtl"] .link-arrow::after { transform-origin: inline-end; }
/* --- CTA band: hairline oro superiore (rifinitura scenografica) --- */
.cta-band::before {
content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--gold-light) 50%, transparent);
opacity: .55;
}
/* --- Video facade: lift coerente con le altre card media --- */
.video-card .video-facade:hover { box-shadow: var(--shadow-hover); }
/* --- Player video locale più scenografico: filo oro + alone caldo sul navy --- */
.local-video__player { border-color: rgba(200, 170, 110, .26); }
.section--navy .local-video__player {
box-shadow: 0 26px 64px rgba(8, 18, 30, .52), 0 0 0 1px rgba(200, 170, 110, .26), 0 0 90px rgba(200, 170, 110, .10);
}
/* --- Focus-visible coerente (baseline a specificità 0: non sovrascrive
i focus dedicati già presenti, riempie solo i vuoti) --- */
:where(a, button, .btn, .filter-chip, .badge, [tabindex]):focus-visible {
outline: 2px solid var(--gold-light);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.card--link:hover .card-media img,
.video-card .video-facade:hover img { transform: none; }
a.badge:hover, a.badge-video:hover { transform: none; }
.link-arrow::after { transition: none; }
}
/* ============================================================= *
* ART DIRECTION — Elevazione editoriale (livello award) *
* Una grammatica visiva da studio internazionale: tipografia *
* incisa, firma eyebrow oro, capolettera istituzionale, numeri *
* monumentali, divisori e citazioni editoriali. La gerarchia, *
* non la decorazione, fa il premium. RTL-safe, AA, motion-safe.*
* ============================================================= */
/* 1 · LEAD — paragrafo-guida con misura e ritmo da rivista */
.lead {
font-size: clamp(1.12rem, 1.5vw, 1.3rem);
line-height: 1.62;
color: var(--muted);
max-width: 64ch;
}
.section-head--center .lead,
.section-head--center .section-lead { margin-inline: auto; }
.section--navy .lead { color: rgba(255, 255, 255, .8); }
/* 2 · CAPOLETTERA istituzionale — apertura da rivista giuridica.
Opt-in `.prose--lead` sul primo paragrafo DOPO il titolo (evita di colpire
l'eyebrow o gli acronimi a inizio testo). Sobrio: blu, non oro, non kitsch. */
.prose--lead h2 + p::first-letter {
float: inline-start;
font-family: var(--display);
font-weight: 600;
font-size: 3.5em;
line-height: .82;
padding-inline-end: .09em;
margin-block-start: .05em;
color: var(--navy);
}
[dir="rtl"] .prose--lead h2 + p::first-letter { float: right; }
@media (max-width: 560px) { .prose--lead h2 + p::first-letter { font-size: 3em; } }
/* 3 · NUMERI monumentali — dati d'impatto più incisi */
.stat-value { letter-spacing: -.02em; }
/* 4 · DIVISORE editoriale — filo oro che sfuma ai lati (respiro tra blocchi) */
.rule-editorial {
border: 0; height: 1px; width: min(220px, 42%);
margin: clamp(2.4rem, 5vw, 3.8rem) auto;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
opacity: .65;
}
/* 5 · DIDASCALIE figura più editoriali (corsivo serif tenue) */
.figure-caption, .media-frame__caption, .figure-lead__cap, .editorial-break__line {
font-family: var(--serif);
font-style: italic;
letter-spacing: .004em;
}
/* 6 · MISURA di lettura per l'apertura editoriale (la .prose standard resta
invariata: nessun rischio di restringere colonne esistenti) */
.prose--lead { max-width: 70ch; }
/* ============================================================= *
* MOTION — Dinamismo raffinato (cinematografico, istituzionale) *
* Costruito SOLO sui hook già esistenti (.js, .reveal/ *
* .is-visible, .main-nav.is-open, :hover): nessuna dipendenza, *
* nessun JS nuovo. Solo transform/opacity/background-position *
* (compositing-friendly). Senza JS tutto resta visibile; *
* reduced-motion azzera ogni movimento (guardia in fondo). *
* ============================================================= */
/* 1 · EYEBROW LINE-DRAW — il filo oro della firma si DISEGNA quando la
sezione entra in viewport. Da sinistra a destra (da destra in RTL).
scaleX in-place: nessun layout shift. */
html.js .reveal .kicker::before {
transform: scaleX(0); transform-origin: left;
transition: transform .85s var(--ease) .12s;
}
html.js .reveal.is-visible .kicker::before { transform: scaleX(1); }
html.js[dir="rtl"] .reveal .kicker::before { transform-origin: right; }
html.js .section-head--center.reveal .kicker::after {
transform: scaleX(0); transform-origin: right;
transition: transform .85s var(--ease) .12s;
}
html.js .section-head--center.reveal.is-visible .kicker::after { transform: scaleX(1); }
html.js[dir="rtl"] .section-head--center.reveal .kicker::after { transform-origin: left; }
/* 2 · HERO — entrata in cascata al caricamento (eyebrow → titolo → testo →
azioni): la prima impressione "respira" invece di apparire piatta. */
@keyframes heroRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
html.js .hero-inner--home > * { opacity: 0; animation: heroRise .95s var(--ease) both; }
html.js .hero-inner--home > .hero-eyebrow { animation-delay: .08s; }
html.js .hero-inner--home > .hero-headline { animation-delay: .22s; }
html.js .hero-inner--home > .hero-text { animation-delay: .42s; }
html.js .hero-inner--home > .hero-actions { animation-delay: .56s; }
html.js .hero-inner--home > .hero-legal { animation-delay: .7s; }
/* 3 · HERO — (Ken Burns rimosso) La hero comunità ora mostra la foto INTERA
come fascia a piena larghezza pinnata in basso (background-position
center bottom): una panoramica del background-position la sposterebbe dalla
posizione corretta, quindi nessuna animazione di sfondo qui. */
/* 4 · IMMAGINI — zoom-settle all'ingresso: i ritratti e le figure si posano
con un micro-scale (1.06 → 1). overflow:hidden delle cornici lo ritaglia
(zero overflow). Si compone con il fade del .reveal genitore. */
html.js .reveal .figure-frame img,
html.js .reveal .figure-frame--accent img,
html.js .reveal .founder-portrait img,
html.js .reveal .founder-figure img,
html.js .reveal .portrait-feature img {
transform: scale(1.06);
transition: transform 1.25s var(--ease);
}
html.js .reveal.is-visible .figure-frame img,
html.js .reveal.is-visible .figure-frame--accent img,
html.js .reveal.is-visible .founder-portrait img,
html.js .reveal.is-visible .founder-figure img,
html.js .reveal.is-visible .portrait-feature img { transform: scale(1); }
/* 5 · CITAZIONE — la firma appare DOPO il testo (la citazione "si scrive",
poi viene firmata). Testo sempre leggibile (parte già visibile). */
html.js .reveal .pull-quote--cited cite {
opacity: 0; transform: translateY(6px);
transition: opacity .7s var(--ease) .4s, transform .7s var(--ease) .4s;
}
html.js .reveal.is-visible .pull-quote--cited cite { opacity: 1; transform: none; }
/* 6 · CTA — sheen oro discreto: una luce diagonale attraversa il bottone oro
al hover (una sola volta, non infinita). Lusso sobrio. */
.btn-gold { position: relative; overflow: hidden; }
.btn-gold::after {
content: ""; position: absolute; inset-block: 0; inset-inline-start: -40%;
width: 35%; pointer-events: none; opacity: 0;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
transform: skewX(-18deg);
}
@keyframes ctaSheen { 0% { inset-inline-start: -40%; opacity: 0; } 18% { opacity: 1; } 100% { inset-inline-start: 130%; opacity: 0; } }
.btn-gold:hover::after { animation: ctaSheen .9s var(--ease); }
/* 7 · SIDEBAR mobile — gli item entrano in sequenza all'apertura del drawer:
il menu sembra "comporsi", non comparire di colpo. */
@media (max-width: 1199.98px) {
@keyframes navItemIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
html.js .main-nav.is-open .nav-list > li { opacity: 0; animation: navItemIn .5s var(--ease) both; }
/* Il delay progressivo è calcolato dall'indice --i impostato dal JS (vedi la
regola "SIDEBAR SEQUENCE via JS"): scala con qualsiasi numero di voci.
I vecchi delay nth-child fissi sono stati rimossi perché, avendo specificità
maggiore, vincevano sull'--i rendendolo codice morto. */
}
/* 8 · GUARDIA reduced-motion: nessun movimento, stati finali immediati. */
@media (prefers-reduced-motion: reduce) {
html.js .hero-inner--home > *,
html.js .main-nav.is-open .nav-list > li { animation: none !important; opacity: 1 !important; transform: none !important; }
html.js .hero--community { animation: none !important; }
html.js .reveal .kicker::before,
html.js .section-head--center.reveal .kicker::after { transform: scaleX(1) !important; transition: none !important; }
html.js .reveal .figure-frame img,
html.js .reveal .figure-frame--accent img,
html.js .reveal .founder-portrait img,
html.js .reveal .founder-figure img,
html.js .reveal .portrait-feature img { transform: none !important; transition: none !important; }
html.js .reveal .pull-quote--cited cite { opacity: 1 !important; transform: none !important; transition: none !important; }
.btn-gold:hover::after { animation: none !important; opacity: 0 !important; }
}
/* ============================================================= *
* MOTION SYSTEM — advanced interaction layer (JS-driven) *
* Attivo solo con html.motion-js (agami-motion.js caricato). *
* Tokens, scroll-progress, card pointer-glow, stagger reveal, *
* quote rule-draw, gradient drift. GPU-only. reduced-motion e *
* mobile: tutto neutralizzato in fondo. Senza JS: nessun *
* effetto, contenuto sempre visibile. *
* ============================================================= */
/* -- tokens motion -- */
:root { --motion-glow: rgba(200, 170, 110, .16); }
/* 1 · SCROLL PROGRESS — filo oro in cima (scaleX dal JS) */
.motion-progress {
position: fixed; inset-block-start: 0; inset-inline: 0; height: 2px;
z-index: 1200; pointer-events: none; background: rgba(156, 122, 60, .08);
}
.motion-progress > span {
display: block; height: 100%; transform: scaleX(0); transform-origin: left;
background: linear-gradient(90deg, var(--gold), var(--gold-light));
will-change: transform;
}
[dir="rtl"] .motion-progress > span { transform-origin: right; }
/* 2 · CARD POINTER GLOW — una luce calda segue il puntatore (--mx/--my).
Solo opacity/posizione del radiale: nessun conflitto col transform di lift. */
html.motion-js .ev-card, html.motion-js .pub-card,
html.motion-js .sector-vcard, html.motion-js .dip-card { position: relative; }
html.motion-js .ev-card::after, html.motion-js .pub-card::after,
html.motion-js .sector-vcard::after, html.motion-js .dip-card::after {
content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
border-radius: inherit; opacity: 0; transition: opacity .45s var(--ease);
background: radial-gradient(240px circle
at calc((var(--mx, 0) * .5 + .5) * 100%) calc((var(--my, 0) * .5 + .5) * 100%),
var(--motion-glow), transparent 62%);
}
html.motion-js .ev-card:hover::after, html.motion-js .pub-card:hover::after,
html.motion-js .sector-vcard:hover::after, html.motion-js .dip-card:hover::after { opacity: 1; }
/* 3 · STAGGER REVEAL — i figli di .motion-stagger entrano in sequenza quando
il contenitore tocca il viewport (JS aggiunge .is-in). Gate html.motion-js:
senza JS i figli restano visibili (nessun FOUC, nessun contenuto perso). */
html.motion-js .motion-stagger > * {
opacity: 0; transform: translateY(16px);
transition: opacity .7s var(--ease), transform .7s var(--ease);
}
html.motion-js .motion-stagger.is-in > * { opacity: 1; transform: none; }
html.motion-js .motion-stagger.is-in > *:nth-child(1) { transition-delay: .04s; }
html.motion-js .motion-stagger.is-in > *:nth-child(2) { transition-delay: .11s; }
html.motion-js .motion-stagger.is-in > *:nth-child(3) { transition-delay: .18s; }
html.motion-js .motion-stagger.is-in > *:nth-child(4) { transition-delay: .25s; }
html.motion-js .motion-stagger.is-in > *:nth-child(5) { transition-delay: .32s; }
html.motion-js .motion-stagger.is-in > *:nth-child(6) { transition-delay: .39s; }
html.motion-js .motion-stagger.is-in > *:nth-child(n+7) { transition-delay: .45s; }
/* 4 · QUOTE SIGNATURE RULE-DRAW — il filo oro della citazione si disegna
verticalmente al reveal, poi la firma appare (cite delay già esistente). */
html.motion-js .reveal .pull-quote--cited { border-inline-start-color: transparent; }
html.motion-js .reveal .pull-quote--cited::before {
content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px;
background: var(--gold); transform: scaleY(0); transform-origin: top;
transition: transform .85s var(--ease) .1s;
}
html.motion-js .reveal.is-visible .pull-quote--cited::before { transform: scaleY(1); }
/* 5 · GRADIENT DRIFT — derive lentissima del fondo sulle sezioni navy piene
(niente immagine): profondità ambientale impercettibile, solo desktop. */
@media (min-width: 1000px) {
@keyframes navyDrift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
html.motion-js .section--navy:not(.has-section-bg) {
background-size: 180% 180%;
animation: navyDrift 56s ease-in-out infinite alternate;
}
}
/* 6 · IMAGE MASK REVEAL — wipe verticale degli sfondi immersivi (clip-path,
indipendente dal transform del parallax). Senza JS: immagine piena. */
html.motion-js .immersive-sec .section-bg__img {
clip-path: inset(0 0 100% 0);
transition: clip-path 1.15s var(--ease), transform 2.2s var(--ease);
}
html.motion-js .immersive-sec.media-in .section-bg__img { clip-path: inset(0 0 0 0); }
/* 7 · SIDEBAR SEQUENCE via JS — delay d'apertura calcolato dall'indice --i
impostato dal JS su ogni voce (scala con qualsiasi numero di voci). */
@media (max-width: 1199.98px) {
html.motion-js .main-nav.is-open .nav-list > li { animation-delay: calc(.05s + var(--i, 0) * .055s); }
}
/* 8 · STICKY SCROLL CUE — invito allo scroll in fondo all'hero home: una luce
oro scorre dentro un filo sottile; sparisce al primo scroll. */
.motion-cue {
position: absolute; inset-inline: 0; bottom: clamp(.7rem, 2vw, 1.4rem);
display: flex; justify-content: center; pointer-events: none; z-index: 2;
opacity: 0; animation: cueIn .8s var(--ease) 1.2s forwards;
}
.motion-cue__line {
position: relative; width: 1px; height: 40px; overflow: hidden;
background: rgba(255, 255, 255, .22);
}
.motion-cue__line::after {
content: ""; position: absolute; inset-inline: 0; top: -55%; height: 55%;
background: linear-gradient(180deg, transparent, var(--gold-light));
animation: cueRun 2.3s var(--ease) infinite;
}
@keyframes cueIn { to { opacity: 1; } }
@keyframes cueRun { 0% { transform: translateY(0); } 70%, 100% { transform: translateY(300%); } }
.motion-cue.is-gone { opacity: 0 !important; animation: none; transition: opacity .4s var(--ease); }
@media (max-width: 767.98px) { .motion-cue { display: none; } } /* spazio scarso su mobile */
/* 9 · GALLERY hover cinematico — un velo scuro discreto entra dal basso al
passaggio, dando profondità (l'icona zoom resta in evidenza). */
html.motion-js .event-gallery__item::after {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
background: linear-gradient(180deg, transparent 52%, rgba(12, 26, 44, .42));
opacity: 0; transition: opacity .45s var(--ease);
}
html.motion-js .event-gallery__item:hover::after,
html.motion-js .event-gallery__item:focus-visible::after { opacity: 1; }
/* -- mobile: niente pointer-glow né drift (costo inutile su touch) -- */
@media (max-width: 1023.98px) {
html.motion-js .ev-card::after, html.motion-js .pub-card::after,
html.motion-js .sector-vcard::after, html.motion-js .dip-card::after { display: none; }
}
/* -- reduced-motion: tutto inerte, stati finali immediati -- */
@media (prefers-reduced-motion: reduce) {
.motion-progress { display: none !important; }
html.motion-js .ev-card::after, html.motion-js .pub-card::after,
html.motion-js .sector-vcard::after, html.motion-js .dip-card::after { display: none !important; }
html.motion-js .motion-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
html.motion-js .reveal .pull-quote--cited { border-inline-start-color: var(--gold); }
html.motion-js .reveal .pull-quote--cited::before { display: none !important; }
html.motion-js .section--navy:not(.has-section-bg) { animation: none !important; background-size: auto; }
html.motion-js .immersive-sec .section-bg__img { clip-path: none !important; transition: none !important; }
.motion-cue { display: none !important; }
html.motion-js .event-gallery__item::after { display: none !important; }
}
/* ============================================================= *
* NAVIGATION / SIDEBAR — premium system *
* Sidebar mobile a SEZIONI con accento cromatico per banda + *
* medaglioni tinti, barra d'accento, active section highlight; *
* mega menu desktop rifinito. Tutto gated per non toccare la *
* baseline desktop dove non serve. RTL-safe, reduced-motion ok.*
* ============================================================= */
:root {
--teal: #2A6B66; /* verde-teal istituzionale sobrio (rete) */
--teal-soft: rgba(42, 107, 102, .12);
}
/* --- 1 · Section head: SOLO nel drawer mobile (rimosso dal flex desktop) --- */
.nav-section-head { display: none; }
@media (max-width: 1199.98px) {
.nav-section-head {
display: flex; align-items: center; gap: .7rem;
list-style: none; margin: 1.45rem .3rem .5rem; padding: 0;
}
.nav-section-head:first-of-type { margin-top: .2rem; }
.nav-section-head__kicker {
font-size: .62rem; font-weight: 700; letter-spacing: .26em;
text-transform: uppercase; color: var(--gold-text); white-space: nowrap;
}
.nav-section-head__rule {
flex: 1; height: 1px;
background: linear-gradient(90deg, rgba(156, 122, 60, .42), rgba(156, 122, 60, 0));
}
[dir="rtl"] .nav-section-head__rule { background: linear-gradient(270deg, rgba(156, 122, 60, .42), rgba(156, 122, 60, 0)); }
}
/* --- 2 · Accento cromatico per voce (drawer mobile) --- */
@media (max-width: 1199.98px) {
.nav-list > .nav-item[data-nav] { --acc: var(--navy); --acc2: var(--navy-deep); --acc-soft: var(--azure-soft); }
.nav-item[data-nav="research"] { --acc: var(--navy-light); --acc2: var(--navy); --acc-soft: var(--azure-soft); }
.nav-item[data-nav="journal"] { --acc: var(--gold); --acc2: var(--gold-light); --acc-soft: var(--gold-soft); }
.nav-item[data-nav="rete"] { --acc: var(--teal); --acc2: #1F4F4B; --acc-soft: var(--teal-soft); }
.nav-item[data-nav="biblioteca"]{ --acc: var(--copper); --acc2: #8F5A28; --acc-soft: rgba(184, 115, 51, .12); }
.nav-item[data-nav="attivita"] { --acc: #B07B34; --acc2: var(--gold); --acc-soft: var(--gold-soft); }
/* barra d'accento a sinistra (compare al hover/aperto/corrente) */
.nav-list > .nav-item[data-nav] > .nav-link { position: relative; overflow: hidden; }
.nav-list > .nav-item[data-nav] > .nav-link::before {
content: ""; position: absolute; inset-inline-start: 0; top: 16%; bottom: 16%;
width: 3px; border-radius: 0 3px 3px 0; background: var(--acc);
opacity: 0; transition: opacity .25s var(--ease), top .25s var(--ease), bottom .25s var(--ease);
}
[dir="rtl"] .nav-list > .nav-item[data-nav] > .nav-link::before { border-radius: 3px 0 0 3px; }
.nav-list > .nav-item[data-nav] > .nav-link:hover::before,
.nav-list > .nav-item.is-open[data-nav] > .nav-link::before,
.nav-list > .nav-item.is-current[data-nav] > .nav-link::before { opacity: .9; top: 8%; bottom: 8%; }
/* medaglione tinto con l'accento della voce */
.nav-item[data-nav] .nav-link__icon {
background: linear-gradient(150deg, var(--acc-soft) 0%, #fff 100%);
color: var(--acc);
box-shadow: inset 0 0 0 1px rgba(156, 122, 60, .2);
}
.nav-item[data-nav] > .nav-link:hover .nav-link__icon,
.nav-item.is-open[data-nav] > .nav-link .nav-link__icon,
.nav-item.is-current[data-nav] > .nav-link .nav-link__icon {
background: linear-gradient(150deg, var(--acc) 0%, var(--acc2) 100%);
color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
/* sezione/voce della pagina corrente: superficie evidenziata */
.nav-list > .nav-item.is-current[data-nav] > .nav-link {
background: #fff; box-shadow: 0 10px 24px rgba(15, 34, 56, .1);
}
.nav-list > .nav-item.is-current[data-nav] > .nav-link .nav-link__text { color: var(--navy); }
}
/* --- 3 · Sub-link del settore corrente evidenziato --- */
@media (max-width: 1199.98px) {
.dropdown a.is-current-sub { color: var(--navy); font-weight: 600; }
.dropdown a.is-current-sub::before { opacity: 1; transform: scale(1.35); }
}
/* --- 4 · Mega menu desktop rifinito (coerente con il drawer) --- */
@media (min-width: 1200px) {
.dropdown {
background:
radial-gradient(120% 80% at 0% 0%, rgba(247, 243, 234, .7), transparent 60%),
#fff;
}
.dropdown-group__heading {
display: flex; align-items: center; gap: .5rem;
}
.dropdown-group__heading::before {
content: ""; width: 14px; height: 1px;
background: linear-gradient(90deg, var(--gold), transparent);
}
[dir="rtl"] .dropdown-group__heading::before { background: linear-gradient(270deg, var(--gold), transparent); }
.dropdown a { transition: background .2s var(--ease), color .2s var(--ease), padding-inline-start .2s var(--ease); }
.dropdown a:hover { padding-inline-start: 1rem; }
}
/* --- 5 · reduced-motion: niente transizioni d'accento --- */
@media (prefers-reduced-motion: reduce) {
.nav-list > .nav-item[data-nav] > .nav-link::before,
.nav-item[data-nav] .nav-link__icon { transition: none !important; }
@media (min-width: 1200px) { .dropdown a:hover { padding-inline-start: .75rem; } }
}
/* ============================================================
Densità editoriale + sidebar dorata + filtri video premium
(vedi report agami_editorial_density). Solo token esistenti.
============================================================ */
/* 1 · Home — "Pubblicazioni della Presidente" spostate nella colonna testo,
sotto le CTA: blocco editoriale compatto (hairline oro + lista a pallini),
niente più card sotto l'immagine → colonne più bilanciate, sezione più corta. */
.pres-pubs { margin-top: clamp(1.5rem, 3vw, 2.1rem); padding-top: 1.1rem; border-top: 1px solid var(--border-soft); }
.pres-pubs__label {
display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .55rem;
font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text);
}
.pres-pubs__label .bi { font-size: .98rem; color: var(--gold); }
.pres-pubs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem;
font-size: .9rem; line-height: 1.55; color: var(--muted); }
.pres-pubs__list li { position: relative; padding-inline-start: 1rem; }
.pres-pubs__list li::before { content: ""; position: absolute; inset-inline-start: 0; top: .58em;
width: 5px; height: 5px; border-radius: 50%; background: var(--gold-light); }
.pres-pubs__list em { color: var(--ink); font-style: italic; }
/* 2 · Chi siamo — "L'opera fondativa" (sinistra) e "Altre pubblicazioni" +
nota Storia (destra) su due colonne desktop: meno altezza, niente vuoto
sotto il ritratto. Stack ordinato su mobile; RTL inverte le colonne da solo. */
.pres-works { margin-top: clamp(1.8rem, 3.4vw, 2.6rem); }
.pres-works__grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(1.3rem, 2.6vw, 2rem); align-items: start; }
.pres-works__side { display: flex; flex-direction: column; gap: clamp(1.1rem, 2vw, 1.4rem); }
.pres-works__side .notice { margin-top: 0; }
@media (max-width: 767.98px) { .pres-works__grid { grid-template-columns: 1fr; gap: 1.2rem; } }
/* 3 · Videoteca — barra filtri premium: select con caret oro custom + bottone
"Filtra" compatto (radius 12px, non pill). I filtri ora precedono i video. */
.video-filters {
align-items: end; gap: clamp(.7rem, 1.8vw, 1.15rem); margin-bottom: 0;
padding: clamp(1rem, 2.2vw, 1.35rem) clamp(1.1rem, 2.4vw, 1.5rem);
background: linear-gradient(160deg, #fff 0%, var(--ivory) 100%);
border: 1px solid var(--border-soft); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.video-filters .field { flex: 1 1 190px; min-width: 0; margin: 0; }
.video-filters .form-label { margin-bottom: .4rem; font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--gold-text); }
.video-filters .form-select {
appearance: none; -webkit-appearance: none; -moz-appearance: none;
padding: .6rem 2.3rem .6rem .9rem; border-radius: 12px; background-color: #fff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%239C7A3C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right .85rem center; background-size: .72rem;
}
[dir="rtl"] .video-filters .form-select { padding: .6rem .9rem .6rem 2.3rem; background-position: left .85rem center; }
.video-filters .form-select:focus { border-color: var(--gold); outline: none;
box-shadow: 0 0 0 3px rgba(156, 122, 60, .16), inset 0 1px 2px rgba(20, 40, 70, .045); }
.video-filters__submit { flex: 0 0 auto; align-self: end; min-height: 2.65rem; padding: .58rem 1.35rem; border-radius: 12px; letter-spacing: .04em; }
.video-filters__submit .bi { font-size: .9rem; }
@media (max-width: 575.98px) { .video-filters .field { flex: 1 1 100%; } .video-filters__submit { width: 100%; } }
/* 4 · Sidebar mobile — "Contatti" e "Accedi" come AZIONI premium dorate:
medaglione oro, fondo avorio/oro soft, hairline oro, focus ring oro. Sobrio,
non bottone commerciale. RTL: la riga si specchia da sola (flex-start). */
@media (max-width: 1199.98px) {
.nav-item[data-nav="contatti"] > .nav-link,
.nav-item--account .nav-link {
background: linear-gradient(150deg, rgba(200, 170, 110, .15) 0%, var(--ivory) 100%);
border: 1px solid rgba(156, 122, 60, .34); color: var(--navy);
box-shadow: 0 8px 20px rgba(120, 90, 35, .10); justify-content: flex-start;
}
.nav-item[data-nav="contatti"] > .nav-link .nav-link__icon,
.nav-item--account .nav-link .nav-link__icon {
background: linear-gradient(150deg, var(--gold) 0%, var(--gold-light) 100%) !important; color: #fff !important;
box-shadow: inset 0 0 0 1px rgba(122, 94, 46, .4), 0 4px 12px rgba(120, 90, 35, .26) !important;
}
.nav-item[data-nav="contatti"] > .nav-link:hover,
.nav-item--account .nav-link:hover {
background: linear-gradient(150deg, rgba(200, 170, 110, .26) 0%, #fff 100%);
border-color: rgba(156, 122, 60, .55); box-shadow: 0 12px 26px rgba(120, 90, 35, .16); color: var(--navy);
}
.nav-item[data-nav="contatti"] > .nav-link:focus-visible,
.nav-item--account .nav-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.nav-item--account .nav-link__text { align-items: flex-start; }
}
/* 5 · Desktop (barra testuale) — accento dorato sobrio e a larghezza neutra
(niente bordo/padding extra → nessun rischio overflow a 1200px): testo oro +
hairline oro persistente che si intensifica all'hover. */
@media (min-width: 1200px) {
.nav-item[data-nav="contatti"] > .nav-link,
.nav-item--account > .nav-link { color: var(--gold-text); }
.nav-item[data-nav="contatti"] > .nav-link::after,
.nav-item--account > .nav-link::after { transform: scaleX(1); opacity: .42; background: var(--gold); }
.nav-item[data-nav="contatti"] > .nav-link:hover::after,
.nav-item--account > .nav-link:hover::after { opacity: 1; }
.nav-item[data-nav="contatti"] > .nav-link:hover,
.nav-item--account > .nav-link:hover { background: var(--gold-soft); color: var(--gold-text); }
}
/* 6 · Densità: colonne bio/ritratto centrate verticalmente quando una colonna è
più corta dell'immagine → niente grande vuoto sotto il testo (Presidente). */
.two-col--center { align-items: center; }
@media (max-width: 767.98px) { .two-col--center { align-items: stretch; } }