/* ==========================================================================
components.css · massimo+marafante
Stile di base e componenti riutilizzabili. Usa SOLO i token di tokens.css.
Convenzione dei nomi (BEM):
.componente il blocco
.componente__parte una parte interna
.componente--variante una variante
Indice:
0. Base 1. Layout (container, band) 2. header e menu
3. hero 4. page-title 5. text-block, quote, figure
6. button 7. logo-grid 8. contact-cta
9. footer 10. filter-bar, project-grid, card-project, card-special
11. skill-list, tag-list, link-card 12. media (segnaposto immagini)
Breakpoint (uguali ai token): 479 · 767 · 1024 · 1466 · 1600
========================================================================== */
/* 0. BASE ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
::selection { background: var(--brand-orange-default); color: var(--color-solid-white); }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-family-body, "DM Sans", sans-serif); /* DM Sans */
font-weight: var(--number-font-weight-regular, 400);
font-size: var(--number-font-size-md, 15px); /* 15px */
line-height: var(--number-line-height-body, 25px);
color: var(--color-text-darker, #222222); /* #222222 */
background: var(--color-background-lightest);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 var(--number-space-heading-gap);
font-family: var(--font-family-heading);
font-weight: var(--number-font-weight-bold);
color: var(--color-text-darkest);
}
h1 { font-size: var(--number-font-size-heading-1); line-height: var(--number-line-height-heading-1); }
h2 { font-size: var(--number-font-size-heading-2); line-height: var(--number-line-height-heading-2); }
h3 { font-size: var(--number-font-size-heading-3); line-height: var(--number-line-height-heading-3); }
h4 { font-size: var(--number-font-size-heading-4); line-height: var(--number-line-height-heading-4); }
h5 { font-size: var(--number-font-size-heading-5); line-height: var(--number-line-height-heading-5); }
h6 { font-size: var(--number-font-size-heading-6); line-height: var(--number-line-height-heading-6); }
h5 { margin-bottom: var(--number-space-h5-gap); }
p {
margin: 0 0 var(--number-space-paragraph);
font-size: var(--number-font-size-md);
line-height: var(--number-line-height-body);
color: var(--color-text-darker, #222222);
}
strong { font-weight: var(--number-font-weight-bold); }
a { color: var(--color-text-darkest); text-decoration: none; transition: color var(--number-duration-default) ease; }
img { display: block; max-width: 100%; height: auto; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-text-darkest); outline-offset: 3px; }
.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;
}
/* Etichetta: Montserrat 10px maiuscolo spaziato (filtri, categorie, menu secondario) */
.label {
font-family: var(--font-family-heading);
font-size: var(--number-font-size-xs);
font-weight: var(--number-font-weight-regular);
letter-spacing: var(--number-letter-spacing-label);
line-height: 20px;
text-transform: uppercase;
}
/* 1. LAYOUT: container e band --------------------------------------------- */
/* Il container cambia larghezza con lo schermo, come sul sito attuale */
.container {
width: var(--number-container-lg);
max-width: 100%;
margin: 0 auto;
}
.container--narrow { width: var(--number-container-sm); }
@media (max-width: 1600px) { .container { width: var(--number-container-md); } }
@media (max-width: 1466px) { .container { width: var(--number-container-sm); } }
@media (max-width: 1024px) {
.container, .container--narrow {
width: 100%;
padding-left: max(var(--number-gutter-lg), env(safe-area-inset-left, 0px));
padding-right: max(var(--number-gutter-lg), env(safe-area-inset-right, 0px));
}
}
@media (max-width: 479px) {
.container, .container--narrow {
padding-left: max(var(--number-gutter-sm), env(safe-area-inset-left, 0px));
padding-right: max(var(--number-gutter-sm), env(safe-area-inset-right, 0px));
}
}
/* band: fascia a tutta larghezza.
Spazio sopra/sotto con --band-top e --band-bottom (valori dei token o una tantum con style="") */
.band {
position: relative;
padding-top: var(--band-top, 0);
padding-bottom: var(--band-bottom, 0);
background: var(--color-background-lightest);
}
.band--dark { background: var(--color-background-darker); }
.band--dark h1, .band--dark h2, .band--dark h3, .band--dark h4, .band--dark h5, .band--dark h6,
.band--dark p { color: var(--color-text-lightest); }
.band--dark a { color: var(--color-text-lightest); }
.band--dark .lead, .band--dark .lead p, .band--dark .text-large { color: var(--color-text-lightest); }
.band--center { text-align: center; }
.band--top-xl { --band-top: var(--number-space-xl); }
.band--top-lg { --band-top: var(--number-space-lg); }
.band--bottom-xl { --band-bottom: var(--number-space-xl); }
.band--bottom-lg { --band-bottom: var(--number-space-lg); }
.band--bottom-none { --band-bottom: 0; }
.band__title { margin-bottom: var(--number-space-xs); }
/* 2. HEADER e MENU A SCHERMO INTERO --------------------------------------- */
.header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 250;
height: calc(var(--number-header-height) + env(safe-area-inset-top, 0px));
padding-top: env(safe-area-inset-top, 0px);
background: transparent;
transition: background-color var(--number-duration-default) ease;
}
.header--solid { background: var(--color-background-lightest); }
.header--solid.header--on-dark { background: var(--color-background-darker); }
/* menu di navigazione aperto: l'header è sempre trasparente (logo sfumato + X) */
.header.header--menu-open, .header--solid.header--menu-open, .header--solid.header--on-dark.header--menu-open { background: transparent; }
.header__logo { position: absolute; top: env(safe-area-inset-top, 0px); left: 0; z-index: 2; display: flex; align-items: center; height: 98px; } /* centro a 49px: è il centro delle tre barre del burger (che non si sposta) */
.header__logo-img {
box-sizing: content-box;
width: min(calc(var(--number-logo-height) * 5.914), calc(100vw - 150px));
height: auto;
padding: 20px 0;
margin-left: max(var(--number-gutter-lg), env(safe-area-inset-left, 0px));
}
.header__logo-img--gradient { display: none; }
/* Over del logo, dissolvenza di 300 ms ease come il burger:
· nero → colore Over del Secondary (interaction/secondary/over, #4d4d4d): il logo nero resta lo stesso elemento e si schiarisce con invert(.3) (0 → 30% di bianco = #4d4d4d). Niente sovrapposizione né maschera: il logo non può cambiare dimensione
· sfumatura → la stessa sfumatura al 30% di nero (brightness .7 = colore × 0,7). NON NEL DS: nessun token */
.header__logo-img--black { transition: filter var(--number-duration-default) ease; }
.header__logo-img--gradient { transition: filter var(--number-duration-default) ease; }
.header__logo-img--over { display: none; } /* resto del vecchio livello con maschera: non più usato */
.header__logo:hover .header__logo-img--black { filter: invert(0.3); }
.header__logo:hover .header__logo-img--gradient { filter: brightness(0.7); }
.header--on-dark .header__logo-img--over, .header--menu-open .header__logo-img--over { display: none; } /* sulle fasce scure e nel menu il logo è la sfumatura: niente maschera */
.header--on-dark .header__logo-img--black,
.header--menu-open .header__logo-img--black { display: none; }
.header--on-dark .header__logo-img--gradient,
.header--menu-open .header__logo-img--gradient { display: block; }
/* menu-toggle: hamburger che diventa una X */
.menu-toggle {
position: absolute;
top: calc(20px + env(safe-area-inset-top, 0px));
right: calc(40px + env(safe-area-inset-right, 0px));
z-index: 2;
width: 60px; height: 60px;
}
.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
position: absolute; display: block; left: 20px; right: 20px; height: 2px;
background: var(--color-interaction-secondary-default); /* burger nero = Button-Icon Type=Icon, Secondary (Figma 2143:4279) */
content: "";
}
.menu-toggle__bars { top: 28px; transition: background-color var(--number-duration-default) ease; }
.menu-toggle__bars::before { top: -7px; left: 0; right: 0; transition: top 0.3s 0.3s, transform 0.3s 0s, background-color var(--number-duration-default) ease; }
.menu-toggle__bars::after { bottom: -7px; left: 0; right: 0; transition: bottom 0.3s 0.3s, transform 0.3s 0s, background-color var(--number-duration-default) ease; }
.header--on-dark .menu-toggle__bars,
.header--on-dark .menu-toggle__bars::before,
.header--on-dark .menu-toggle__bars::after { background: var(--color-interaction-primary-default); } /* regola: burger arancio su sfondo scuro (Button-Icon Type=Icon, Primary: Default/Over) */
.menu-toggle[aria-expanded="true"] .menu-toggle__bars { background-color: transparent; transition: background-color 0s 0.3s; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before,
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { background: var(--color-interaction-primary-default); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { top: 0; transform: rotate(45deg); transition: top 0.3s 0s, transform 0.3s 0.3s, background-color var(--number-duration-default) ease; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { bottom: 0; transform: rotate(-45deg); transition: bottom 0.3s 0s, transform 0.3s 0.3s, background-color var(--number-duration-default) ease; }
/* over: burger nero -> interaction/secondary/over, burger arancio e X -> interaction/primary/over */
.menu-toggle:not([aria-expanded="true"]):hover .menu-toggle__bars,
.menu-toggle:not([aria-expanded="true"]):hover .menu-toggle__bars::before,
.menu-toggle:not([aria-expanded="true"]):hover .menu-toggle__bars::after { background-color: var(--color-interaction-secondary-over); } /* Over del burger nero: interaction/secondary/over (#4d4d4d) */
.header--on-dark .menu-toggle:not([aria-expanded="true"]):hover .menu-toggle__bars,
.header--on-dark .menu-toggle:not([aria-expanded="true"]):hover .menu-toggle__bars::before,
.header--on-dark .menu-toggle:not([aria-expanded="true"]):hover .menu-toggle__bars::after,
.menu-toggle[aria-expanded="true"]:hover .menu-toggle__bars::before,
.menu-toggle[aria-expanded="true"]:hover .menu-toggle__bars::after { background-color: var(--color-interaction-primary-over); }
/* menu-overlay: menu a schermo intero, con sottomenu "Speciali" */
.menu-overlay {
position: fixed; inset: 0; z-index: 240;
display: flex; align-items: center; justify-content: center;
padding: 0 max(var(--number-gutter-lg), env(safe-area-inset-left, 0px));
background: var(--color-background-overlay-menu);
opacity: 0; visibility: hidden;
overflow-y: auto;
transition: opacity var(--number-duration-default) ease, visibility 0s linear var(--number-duration-default);
}
.menu-overlay.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.menu-overlay__nav { margin-top: 60px; text-align: center; }
.menu-overlay__link {
display: block;
font-family: var(--font-family-heading);
font-size: var(--number-font-size-heading-1);
font-weight: var(--number-font-weight-bold);
line-height: var(--number-line-height-heading-1); /* Figma Heading/H1-Bold 48/54 */
color: var(--color-interaction-tertiary-default); /* voci bianche = Text-Link Tertiary (Figma 2182:2089): Default bianco · Over e pagina corrente: interaction/tertiary/over */
text-align: center;
width: 100%;
}
.menu-overlay__link:hover, .menu-overlay__link[aria-current="page"] {
color: var(--color-interaction-tertiary-over);
}
.menu-overlay__sub { /* apertura: scorrimento morbido e uniforme */
display: grid; grid-template-rows: 0fr; visibility: hidden;
transition: grid-template-rows 0.5s ease-in-out, visibility 0s linear 0.5s;
}
.menu-overlay__sub.is-open { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.menu-overlay__sub-list { min-height: 0; overflow: hidden; margin: 0; padding: 0; list-style: none; }
.menu-overlay__sub-list li:first-child { padding-top: 6px; }
.menu-overlay__sub-list li:last-child { padding-bottom: 10px; }
.menu-overlay__sub-link {
display: block; font-size: var(--number-font-size-md); line-height: 30px;
color: var(--color-interaction-tertiary-default);
}
.menu-overlay__sub-link:hover, .menu-overlay__sub-link[aria-current="page"] { color: var(--color-interaction-tertiary-over); }
.menu-overlay__footer {
position: absolute; left: 0; right: 0; bottom: 0;
display: flex; justify-content: space-between; align-items: center; gap: var(--number-space-sm);
padding: 0 max(var(--number-gutter-lg), env(safe-area-inset-left, 0px)) calc(40px + env(safe-area-inset-bottom, 0px));
font-size: var(--number-font-size-sm);
}
.menu-overlay__footer p, .menu-overlay__footer a { margin: 0; font-size: var(--number-font-size-sm); color: var(--color-text-lighter); }
.menu-overlay__footer a:hover { color: var(--color-text-lightest); }
@media (max-width: 767px) {
.menu-overlay__nav { margin-top: 100px; }
.menu-overlay__link { font-size: 36px; line-height: 42px; } /* come l'H1 su telefono */
.menu-overlay__footer { display: none; }
}
@media (max-width: 479px) {
.header__logo-img { margin-left: max(var(--number-gutter-sm), env(safe-area-inset-left, 0px)); }
.menu-toggle { right: calc(10px + env(safe-area-inset-right, 0px)); }
.menu-overlay { padding-left: max(var(--number-gutter-sm), env(safe-area-inset-left, 0px)); }
}
/* 3. HERO ----------------------------------------------------------------- */
.hero {
position: sticky; top: 0; z-index: 0; /* resta ferma: il resto della pagina le scorre sopra */
height: 100vh; height: 100svh;
min-height: 560px;
display: flex; align-items: center; justify-content: center;
background: var(--color-background-lighter);
}
.hero__media { position: absolute; inset: 0; }
/* Effetto di scroll: l'hero sale piano e si dissolve nel bianco (valori --hero-fade / --hero-shift scritti da main.js) */
.hero { opacity: var(--hero-fade, 1); }
.hero__content, .hero__media { transform: translateY(var(--hero-shift, 0px)); }
.hero ~ * { position: relative; z-index: 1; }
:where(.hero ~ *) { background: var(--color-background-lightest); }
.hero__content {
position: relative; z-index: 2;
width: 100%; padding: 0 max(var(--number-gutter-lg), env(safe-area-inset-left, 0px));
text-align: center;
}
.hero__title {
margin: 0 auto;
max-width: 1280px;
font-size: var(--number-font-size-display);
line-height: 1em;
}
/* Icona di scroll: mouse + linea verticale */
.hero__scroll {
position: absolute; z-index: 3; left: 50%; bottom: 0;
width: 44px; height: 140px; margin-left: -22px;
}
.hero__scroll::before { /* il mouse */
content: ""; position: absolute; left: 12px; bottom: 90px;
width: 20px; height: 30px; border-radius: 25px;
box-shadow: inset 0 0 0 2px var(--color-text-darkest);
}
.hero__scroll::after { /* la rotellina */
content: ""; position: absolute; left: 20px; bottom: 107px;
width: 4px; height: 5px; border-radius: 4px; background: var(--color-text-darkest);
animation: hero-wheel 1.5s infinite;
}
@keyframes hero-wheel { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(10px); opacity: 0; } }
@media (max-width: 1024px) {
.hero__title { font-size: 10vw; line-height: 11vw; }
}
/* hero--dark: pagine interne (Progetti, Metodo, Profilo).
Immagine di sfondo con velo scuro, titolo e sottotitolo chiari. */
.hero__overlay { position: absolute; inset: 0; z-index: 1; }
.hero--dark .hero__overlay { background: var(--color-background-overlay-hero); }
.hero--gradient .hero__overlay { background: var(--gradient-brand); } /* Home: sfumatura brand al 100%, senza trasparenza */
.hero--plain { background: var(--color-background-darker); }
.hero--plain .hero__title strong { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* senza immagine: fondo #222 */
.hero__subtitle {
margin: var(--number-space-sm) auto 0;
max-width: 900px;
font-family: var(--font-family-heading);
font-size: var(--number-font-size-heading-5);
font-weight: var(--number-font-weight-bold);
line-height: var(--number-line-height-heading-5);
color: var(--color-text-darkest);
}
.hero--dark .hero__title, .hero--dark .hero__subtitle { color: var(--color-text-lightest); }
.hero--dark .hero__scroll::before { box-shadow: inset 0 0 0 2px var(--color-text-lightest); }
.hero--dark .hero__scroll::after { background: var(--color-text-lightest); }
/* hero--plain: titolo lungo, un po' più piccolo del display */
.hero--plain .hero__title { font-size: var(--number-font-size-display); }
@media (max-width: 767px) { .hero--plain .hero__title { font-size: 36px; line-height: 42px; } }
/* 4. PAGE-TITLE ----------------------------------------------------------- */
.page-title {
padding: calc(var(--number-header-height) + 100px) 0 80px;
text-align: center;
}
.page-title__title { margin-bottom: var(--number-space-xs); }
.page-title__subtitle { margin: 0 auto; max-width: 640px; font-size: var(--number-font-size-heading-5); line-height: var(--number-line-height-heading-5); font-weight: var(--number-font-weight-bold); color: var(--color-text-lighter); font-family: var(--font-family-heading); }
@media (max-width: 767px) { .page-title { padding-bottom: 50px; } }
/* 5. TEXT-BLOCK, QUOTE, FIGURE -------------------------------------------- */
.text-block { text-align: left; }
.text-block > :last-child { margin-bottom: 0; }
.quote { margin: 0; text-align: center; }
.quote__text {
margin: 0 auto var(--number-space-xs);
max-width: 800px;
font-family: var(--font-family-heading);
font-size: var(--number-font-size-heading-5);
line-height: var(--number-line-height-heading-5);
font-weight: var(--number-font-weight-bold);
font-style: italic;
color: var(--color-text-darkest);
}
.quote__source { margin: 0; color: var(--color-text-lighter); }
.band--dark .quote__text { color: var(--color-text-lightest); }
.figure { margin: 0; }
.figure__media { aspect-ratio: 3 / 2; }
.figure__caption { margin-top: var(--number-space-xs); font-size: var(--number-font-size-sm); color: var(--color-text-lighter); }
/* 6. BUTTON --------------------------------------------------------------- */
/* Button (Figma 2204:2580): Size L | M | S | XS · Style Primary (arancio) | Secondary (nero) | Tertiary (bianco) · State Default | Over | Selected.
Font DM Sans SemiBold, senza maiuscolo. Over: token color/interaction/[livello]/over del proprio livello (Primary arancio dark, Secondary #4d4d4d, Tertiary #b3b3b3).
Il pulsante di base è Secondary taglia L; le misure arrivano dalle variabili --btn-* (le taglie sono più sotto). */
.button {
--btn-h: 52px; --btn-px: 32px; --btn-fs: 14px; --btn-lh: 24px; /* L: 52 · 32 */
box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--number-spacing-08);
min-height: var(--btn-h);
padding: 0 calc(var(--btn-px) - var(--number-stroke-02, 2px)); /* il bordo da 2px fa parte del padding di Figma */
font-family: var(--font-family-button);
font-size: var(--btn-fs);
font-weight: var(--number-font-weight-semibold); /* 600 */
letter-spacing: 0;
line-height: var(--btn-lh);
text-align: center;
color: var(--color-text-lightest);
background: var(--color-interaction-secondary-default);
border: var(--number-stroke-02, 2px) solid var(--color-interaction-secondary-default);
border-radius: var(--number-radius-max, 9999px);
cursor: pointer;
transition: background-color var(--number-duration-default) ease, color var(--number-duration-default) ease, border-color var(--number-duration-default) ease;
}
.button:hover { color: var(--color-text-lightest); background: var(--color-interaction-secondary-over); border-color: var(--color-interaction-secondary-over); } /* Secondary Over (Figma color/interaction/secondary/over) */
.button--outline { color: var(--color-text-darkest); background: transparent; border-color: var(--color-text-darkest); }
.button--outline:hover { color: var(--color-text-lightest); background: var(--color-button-primary); border-color: var(--color-button-primary); }
.button--outline-on-dark { color: var(--color-text-lightest); background: transparent; border-color: var(--color-solid-white); }
.button--outline-on-dark:hover { color: var(--color-text-darkest); background: var(--color-solid-white); border-color: var(--color-solid-white); }
/* Tertiary: bianco con testo nero */
.button--on-dark { color: var(--color-text-darkest); background: var(--color-interaction-tertiary-default); border-color: var(--color-interaction-tertiary-default); }
.button--on-dark:hover { color: var(--color-text-darkest); background: var(--color-interaction-tertiary-over); border-color: var(--color-interaction-tertiary-over); } /* Tertiary Over: #b3b3b3, label nera (Figma) */
/* Primary: arancio (Selected: arancio ultralight con testo arancio) */
.button--primary, .button--brand { color: var(--color-text-lightest); background: var(--color-interaction-primary-default); border-color: var(--color-interaction-primary-default); }
.button--primary:hover, .button--brand:hover { color: var(--color-text-lightest); background: var(--color-interaction-primary-over); border-color: var(--color-interaction-primary-over); }
/* State=Selected (Figma Button): classe .is-selected, uguale per tutte le taglie · Primary: arancio ultralight con testo arancio · Secondary: #f0f0f0 con testo nero · Tertiary: #9c9c9c con testo bianco · sopra un Selected l'Over è quello di sempre */
.button.is-selected { color: var(--color-text-darkest); background: var(--color-interaction-secondary-selected); border-color: var(--color-interaction-secondary-selected); }
.button--primary.is-selected, .button--brand.is-selected { color: var(--color-interaction-primary-default); background: var(--color-interaction-primary-selected); border-color: var(--color-interaction-primary-selected); }
.button--on-dark.is-selected { color: var(--color-text-darkest); background: var(--color-interaction-tertiary-selected); border-color: var(--color-interaction-tertiary-selected); }
.button.is-selected:hover { color: var(--color-text-lightest); background: var(--color-interaction-secondary-over); border-color: var(--color-interaction-secondary-over); } /* Selected + Over: non è in Figma · vince l'Over del proprio livello */
.button--primary.is-selected:hover, .button--brand.is-selected:hover { background: var(--color-interaction-primary-over); border-color: var(--color-interaction-primary-over); }
.button--on-dark.is-selected:hover { color: var(--color-text-darkest); background: var(--color-interaction-tertiary-over); border-color: var(--color-interaction-tertiary-over); }
/* Secondary · Design=Dark (Figma 2204:2580, nodi 2239:4466/4470/4474; Size S): sfondo interaction/secondary/default (#000), label in sfumatura brand (fucsia → arancio), icone fucsia.
Over: interaction/secondary/over (#4d4d4d), stessa label e stesse icone · Selected: interaction/secondary/selected (#f0f0f0) con la stessa sfumatura */
.button--dark { color: var(--color-fuchsia-600); background: var(--color-interaction-secondary-default); border-color: var(--color-interaction-secondary-default); }
.button--dark .button__label { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; transition: color var(--number-duration-default) ease; }
.button--dark.is-selected { color: var(--color-fuchsia-600); background: var(--color-interaction-secondary-selected); border-color: var(--color-interaction-secondary-selected); }
.button--dark:hover, .button--dark.is-selected:hover, .button--dark:focus-visible { color: var(--color-fuchsia-600); background: var(--color-interaction-secondary-over); border-color: var(--color-interaction-secondary-over); } /* Over (Figma 2239:4470): #4d4d4d, label in sfumatura e icone fucsia come nel Default */
/* Primary (sfumatura brand): --gradient = pieno, --outline-gradient = bordo e label in sfumatura.
Il bordo sfumato è un ::before con maschera (border-image non segue gli angoli tondi).
Hover: il pieno diventa outline, l'outline si riempie. */
.button--gradient, .button--outline-gradient { position: relative; border-color: transparent; }
.button--gradient::before, .button--outline-gradient::before {
content: ""; position: absolute; inset: calc(-1 * var(--number-stroke-02)); padding: var(--number-stroke-02);
border-radius: inherit; background: var(--gradient-brand); pointer-events: none;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
}
.button--gradient { color: var(--color-text-lightest); background: var(--gradient-brand); }
.button--outline-gradient { background: transparent; }
.button--outline-gradient .button__label, .button--gradient:hover .button__label {
background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text;
color: transparent; -webkit-text-fill-color: transparent;
}
.button--gradient:hover { background: transparent; }
.button--gradient:hover, .button--outline-gradient:hover { border-color: var(--color-interaction-primary-over); } /* invariato rispetto a prima */
.button--outline-gradient:hover { background: var(--gradient-brand); }
.button--outline-gradient:hover .button__label { background: none; color: var(--color-text-lightest); -webkit-text-fill-color: var(--color-text-lightest); }
/* Dimensioni (Figma Button): L è il default (altezza 52, padding 24, DM Sans 14/24) */
.button--m { --btn-h: 46px; --btn-px: 28px; --btn-fs: 14px; --btn-lh: 24px; } /* M: 46 · 28 · 14/24 (Button/B1-SemiBold) */
.button--s { --btn-h: 40px; --btn-px: 24px; --btn-fs: 12px; --btn-lh: 18px; } /* S: 40 · 24 · 12/18 (Button/B2-SemiBold) */
.button--xs { --btn-h: 30px; --btn-px: 20px; --btn-fs: 12px; --btn-lh: 18px; } /* XS: 30 · 20 · 12/18 (Button/B2-SemiBold) */
/* Icone nei pulsanti (Figma 2204:2580): L/M 18px · S/XS 14px, in tutti gli stili e stati */
.button { --btn-icon: 18px; }
.button--s, .button--xs { --btn-icon: 14px; }
.button > svg, .button__icon:not(.button--filters .button__icon) { flex: none; width: var(--btn-icon); height: var(--btn-icon); }
/* 7. LOGO-GRID ------------------------------------------------------------ */
.logo-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: var(--number-spacing-32); row-gap: 35px;
}
.logo-grid__item {
width: 100%; max-width: 162px;
padding: 6px;
}
.logo-grid__item img { width: 150px; max-width: 100%; }
@media (max-width: 767px) { .logo-grid { grid-template-columns: repeat(2, 1fr); } }
/* 8. CONTACT-CTA ---------------------------------------------------------- */
.contact-cta { text-align: center; }
.contact-cta__reveal { margin: var(--number-space-lg) auto 0; width: fit-content; max-width: 100%; padding: 0 var(--number-spacing-16); } /* area di hover = indirizzo + icona copia, poco più larga */
.contact-cta__label {
display: block;
font-family: var(--font-family-heading);
font-size: var(--number-font-size-heading-5);
font-weight: var(--number-font-weight-bold);
line-height: var(--number-line-height-heading-5); /* Text-Button Style=H5 (Figma 2216:3580) senza icona: Montserrat Bold 18/24 (prova: prima H6 16/18) */
color: var(--project-default);
transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), color var(--number-duration-default) ease;
}
.contact-cta__email {
display: flex; align-items: center; justify-content: center; gap: 10px;
margin: 0; opacity: 0; transform: translateY(40px);
color: var(--color-text-lightest);
transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity var(--number-duration-default) ease;
}
.contact-cta__reveal:hover .contact-cta__label,
.contact-cta__reveal:has(:focus-visible) .contact-cta__label,
.contact-cta__reveal:focus-visible .contact-cta__label { transform: translateY(-10px); color: var(--project-dark); } /* over: Project dark (Text-Button Over) */
.contact-cta__reveal:hover .contact-cta__email,
.contact-cta__reveal:has(:focus-visible) .contact-cta__email,
.contact-cta__reveal:focus-visible .contact-cta__email { opacity: 1; transform: none; }
/* Su telefono e touch non esiste il passaggio del mouse: l'email è sempre visibile */
@media (hover: none), (max-width: 767px) {
.contact-cta__label { color: var(--color-text-medium); }
.contact-cta__email { opacity: 1; transform: none; }
}
/* copy-button: copia l'indirizzo; per qualche secondo l'icona diventa un check */
.copy-button { position: relative; width: 28px; height: 28px; padding: 0; color: var(--color-interaction-primary-default); cursor: pointer; transition: color var(--number-duration-default) ease; }
.copy-button:hover, .copy-button:focus-visible { color: var(--color-interaction-primary-over); } /* over: arancio dark */
.copy-button svg { position: absolute; inset: 4px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: opacity 0.2s ease, transform 0.2s ease; }
.copy-button__check { opacity: 0; transform: scale(0.6); }
.copy-button.is-copied { color: var(--color-text-lightest); } /* check bianco */
.copy-button.is-copied .copy-button__copy { opacity: 0; transform: scale(0.6); }
.copy-button.is-copied .copy-button__check { opacity: 1; transform: none; }
/* 9. FOOTER --------------------------------------------------------------- */
.footer {
position: relative; overflow: hidden;
padding: 90px 0 calc(80px + env(safe-area-inset-bottom, 0px));
background: var(--color-background-darker);
}
/* Torna su: linea verticale centrale con freccia bianca in alto */
.footer__top {
position: absolute; left: 50%; bottom: 0; width: 44px; height: 70px; margin-left: -22px;
display: block; cursor: pointer;
}
.footer__top-line { position: absolute; left: 50%; bottom: 0; width: 1px; height: 50px; background: var(--color-neutral-800); }
.footer__top-arrow {
position: absolute; left: 50%; top: 6px; width: 10px; height: 10px; margin-left: -5px;
border-top: 2px solid var(--color-interaction-tertiary-default); border-left: 2px solid var(--color-interaction-tertiary-default); /* Button-Icon Type=Icon, Tertiary (Figma 2143:4279) */
transform: rotate(45deg);
}
.footer__top-arrow-wrap { position: absolute; inset: 0; }
.footer__top:hover .footer__top-arrow, .footer__top:focus-visible .footer__top-arrow { border-color: var(--color-interaction-tertiary-over); } /* Over: interaction/tertiary/over (#b3b3b3) */
.footer__top:hover .footer__top-arrow-wrap, .footer__top:focus-visible .footer__top-arrow-wrap { animation: footer-bounce 0.6s ease-out; }
@keyframes footer-bounce {
0% { transform: translateY(0); } 35% { transform: translateY(-10px); } 65% { transform: translateY(-2px); } 82% { transform: translateY(-5px); } 100% { transform: translateY(0); }
}
.footer__inner {
display: flex; justify-content: space-between; align-items: baseline; gap: var(--number-space-sm);
padding: 0 max(var(--number-gutter-lg), env(safe-area-inset-left, 0px));
}
.footer__copyright, .footer__link { margin: 0; font-size: var(--number-font-size-sm); line-height: 25px; color: var(--color-text-medium); }
/* Linkedin = Text-Link Tertiary Caption (Figma 2182:2089): DM Sans Regular 12/18 (Caption/C1-Regular) · Default interaction/tertiary/default, Over interaction/tertiary/over, senza linea sotto */
.footer__link { line-height: 18px; color: var(--color-interaction-tertiary-default); transition: color var(--number-duration-default) ease; }
.footer__link:hover { color: var(--color-interaction-tertiary-over); }
@media (max-width: 767px) {
.footer__inner { flex-direction: column-reverse; align-items: center; text-align: center; gap: 0; }
.footer__link { margin-bottom: 35px; }
}
@media (max-width: 479px) { .footer__inner { padding: 0 max(var(--number-gutter-sm), env(safe-area-inset-left, 0px)); } }
/* 10. PROGETTI: filter-bar, project-grid, card-project, card-special ------- */
/* filter-bar: si apre dal pulsante "Filtri" (Filter L) a cavallo tra hero e schede. Contenuto: Block/Full-Filters (Figma 2171:379) */
/* Pulsante e barra dei filtri: due elementi sticky ancorati al bordo tra hero e schede. Quando il pulsante è a metà sulla fascia del menu si blocca
(sopra l'header) e la barra si blocca a filo sotto il menu; le schede scorrono sotto. Se la barra si apre prima del blocco spinge giù le schede;
se si apre a pulsante già bloccato (.is-overlay, deciso da JS al click) va sopra le schede senza spostarle. */
.filter-sticky { position: sticky; z-index: 5; }
.filter-sticky--button { z-index: 251; height: 0; display: flex; justify-content: center; align-items: flex-start; top: calc(var(--number-header-height) + env(safe-area-inset-top, 0px)); }
body:has(.header--menu-open) .filter-sticky--button { visibility: hidden; } /* con il menu aperto il pulsante non si vede */
.filter-sticky--bar { top: calc(var(--number-header-height) + env(safe-area-inset-top, 0px)); }
/* Pulsante con la barra aperta in overlay: segue la barra (resta a cavallo del suo bordo superiore). Stesso trucco della barra: si blocca più in basso di --filters-h e il pulsante sale di altrettanto. */
.filter-sticky--button.is-shifted { top: calc(var(--number-header-height) + env(safe-area-inset-top, 0px) + var(--filters-h, 0px)); }
.filter-sticky--button.is-shifted .button--filters { transform: translateY(calc(-50% - var(--filters-h, 0px))); }
/* Chiusura a barra già sganciata dal menu: collassa verso il basso, restando appoggiata alle schede (base ferma, bordo superiore che scende); il pulsante scende con lei. */
.filter-sticky--bar.is-overlay.is-detached .filter-bar { top: auto; bottom: 0; }
.filter-sticky--button.is-closing .button--filters { transition: transform 0.5s ease-in-out, width 0.3s ease 0.3s, background-color var(--number-duration-default) ease, color var(--number-duration-default) ease, border-color var(--number-duration-default) ease; }
/* Barra in overlay (aperta a pulsante già bloccato): il contenitore resta alto 0 (nessun cambio di layout) ma si blocca più in basso di --filters-h (impostata da JS),
e la barra sta sopra di lui. Così, risalendo, resta agganciata sotto il menu finché le schede non sono completamente visibili; solo dopo si stacca e sale con loro. */
.filter-sticky--bar.is-overlay { height: 0; top: calc(var(--number-header-height) + env(safe-area-inset-top, 0px) + var(--filters-h, 0px)); }
.filter-sticky--bar.is-overlay .filter-bar { position: absolute; top: calc(-1 * var(--filters-h, 0px)); left: 0; right: 0; }
/* Aperta prima di arrivare alla fascia del menu: la barra parte dal bordo hero/schede e si apre verso il basso sopra le schede, che non si spostano. */
.filter-sticky--bar.is-overlay-cards { height: 0; }
.filter-sticky--bar.is-overlay-cards .filter-bar { position: absolute; top: 0; left: 0; right: 0; }
.filter-bar {
position: relative; display: grid; grid-template-rows: 0fr;
background: transparent; /* il Block/Full-Filters (Figma 2292:576) non ha riempimento */
transition: grid-template-rows 0.5s ease-in-out; /* l'altezza segue il contenuto: la chiusura parte subito al click */
}
.filter-bar.is-open { grid-template-rows: 1fr; }
.filter-bar__inner { min-height: 0; overflow-x: auto; overflow-y: hidden; }
/* Block/Full-Filters: "Full" = i filtri restano su una riga e occupano la larghezza che serve (senza andare a capo); se non entrano, scorrono in orizzontale */
.block-filters { box-sizing: border-box; background: transparent; width: max-content; min-width: 100%; padding: var(--number-spacing-36, 36px) var(--number-spacing-20, 20px); /* Figma 2292:576: padding 36 / 20 → barra alta 102 */ display: flex; justify-content: center; }
.filters { display: flex; flex-wrap: nowrap; gap: var(--number-spacing-08); margin: 0; padding: 0; list-style: none; }
.filters > li { flex: 0 0 auto; }
.filter-bar .filters { visibility: hidden; transition: visibility 0s 0.5s; }
.filter-bar.is-open .filters { visibility: visible; opacity: 1; transition: opacity var(--number-duration-default) ease 0.3s; }
/* Filtro (Figma Filters 2223:4109, stile Filter/F1-SemiBold): Colori dalla collection Filter (modi Orange/Fucsia): Default = background/default con text/default · Over = background/over · Selected = background/selected con text/selected (label e X) · Disabled (non usato: "Tutti" selezionato ha l'aspetto Selected) · 30 di altezza, padding 16, DM Sans SemiBold 10/15, gap 8 */
.filter {
box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--number-spacing-08);
height: 30px; padding: 0 var(--number-spacing-16); border: 0; border-radius: var(--number-radius-max, 999px);
background: var(--filter-background-default); color: var(--filter-text-default); cursor: pointer;
font-family: var(--font-family-filter); font-size: 10px; font-weight: var(--number-font-weight-semibold); line-height: 15px; letter-spacing: 0; white-space: nowrap; /* Filter/F1-SemiBold 10/15 */
transition: background-color 0.2s ease, color 0.2s ease;
}
.filter:hover { background: var(--filter-background-over); color: var(--filter-text-over); } /* Over: arancio dark, label bianca (Figma 2223:4109) */
.filter--selected { background: var(--filter-background-selected); color: var(--filter-text-selected); } /* Selected: arancio ultralight, label e X arancio */
.filter--selected:hover { background: var(--filter-background-over); color: var(--filter-text-over); } /* Selected + Over: NON NEL DS (Figma ha solo Default/Over/Selected); uso l'Over */
.filter--selected[data-filter="*"] { cursor: default; } /* "Tutti" selezionato: aspetto Selected (Figma 2292:576), ma non si può deselezionare */
.filter--selected[data-filter="*"]:hover { background: var(--filter-background-selected); color: var(--filter-text-selected); } /* nessun over */
.filter--line { position: relative; overflow: hidden; padding-left: calc(6px + var(--number-spacing-12)); } /* Stroke=Si (Figma 2223:4109): stroke 6px + contenuto con padding sinistro 12 e destro 16 */
.filter--line::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--brand-fucsia-default); }
.filter--line:hover { padding-left: calc(6px + var(--number-spacing-12)); } /* Over con Stroke=Si (Figma 2270:1901): niente stroke visibile, padding sinistro 18: stessa larghezza del Default (97) */
.filter--line.filter--selected { padding-left: var(--number-spacing-16); } /* Selected esiste solo con Stroke=No: padding 16 */
.filter--line:hover::before, .filter--line.filter--selected::before { display: none; }
.filter__icon { display: none; flex: 0 0 auto; width: 10px; height: 10px; } /* icona XS: 10px */
.filter--selected:not([data-filter="*"]) .filter__icon { display: block; } /* X a sinistra sui filtri selezionati, tranne "Tutti" (non si deseleziona; nel Figma 2171:379 è senza X) */
/* "Filtri" = Button Primary M (Figma 2204:2580): arancio · Over arancio dark · aperto = Selected (arancio ultralight, testo arancio) con la sola X al posto della label */
.button--brand.filter--selected { color: var(--color-interaction-primary-default); background: var(--color-interaction-primary-selected); border-color: var(--color-interaction-primary-selected); }
/* Pulsante "Filtri" (Figma 2223:4253, Button Primary Size M): imbuto 14 + label ⇄ X 14, h 46, padding 20, gap 8.
Default arancio · Over arancio dark · Selected (pannello aperto) arancio ultralight con la sola X arancio, largo 54.
Transizione con la stessa logica del burger (0,3 s + 0,3 s in sequenza): apertura = prima imbuto e label si dissolvono e il pulsante si stringe, poi compare la X; chiusura = al contrario.
La larghezza è impostata da JS (misura imbuto + label). Selected + Over non è nel Figma: arancio dark (NON NEL DS). */
.button--filters {
box-sizing: border-box; display: inline-grid; grid-template-columns: minmax(0, 1fr); align-items: center; justify-items: center; transform: translateY(-50%);
transition: width 0.3s ease 0.3s, background-color var(--number-duration-default) ease, color var(--number-duration-default) ease, border-color var(--number-duration-default) ease;
}
.button--filters.filter--selected { transition: width 0.3s ease 0s, background-color var(--number-duration-default) ease, color var(--number-duration-default) ease, border-color var(--number-duration-default) ease; }
.button--filters > * { grid-area: 1 / 1; }
.button--filters .button__content { display: inline-flex; align-items: center; gap: var(--number-spacing-08); opacity: 1; transition: opacity 0.3s ease 0.3s; }
.button--filters .button__icon { flex: none; display: block; width: 14px; height: 14px; }
.button--filters .button__icon--close { opacity: 0; transition: opacity 0.3s ease 0s; }
.button--filters.filter--selected .button__content { opacity: 0; transition: opacity 0.3s ease 0s; }
.button--filters.filter--selected .button__icon--close { opacity: 1; transition: opacity 0.3s ease 0.3s; }
.button--brand.filter--selected:hover { color: var(--color-text-lightest); background: var(--color-interaction-primary-over); border-color: var(--color-interaction-primary-over); }
.filter:focus-visible { outline: 2px solid var(--color-text-darkest); outline-offset: 2px; }
/* project-grid: 2 colonne senza spazi. Le righe misurano 0,65 volte la larghezza di una colonna.
Card standard = 1 cella · tall = 2 righe · wide = 2 colonne */
.project-grid-wrap { container-type: inline-size; }
.project-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: calc(50cqw * 0.65);
grid-auto-flow: dense;
}
@media (max-width: 767px) {
.project-grid { grid-template-columns: 1fr; grid-auto-rows: calc(100cqw * 0.65); }
}
.card-project { position: relative; overflow: hidden; background: var(--color-neutral-900); }
.card-project--tall { grid-row: span 2; }
.card-project--wide { grid-column: span 2; }
@media (max-width: 767px) { .card-project--wide { grid-column: auto; } } /* dopo la regola base: su una colonna le wide non devono creare una seconda colonna */
.card-project[hidden] { display: none; }
.card-project__link { position: absolute; inset: 0; display: block; }
.card-project__media { position: absolute; inset: 0; transition: transform 0.4s ease-in-out; }
.card-project:hover .card-project__media,
.card-project__link:focus-visible .card-project__media { transform: scale(1.03); }
.card-project__info {
position: absolute; inset: 0;
display: flex; flex-direction: column; justify-content: flex-end;
padding: var(--number-spacing-56, 56px); /* Figma Card-Project (2166:4665): 56 su tutti i lati */
pointer-events: none; /* il clic sulla scheda arriva al link sotto; solo i pulsanti sono cliccabili */
transition: transform 0.4s ease-in-out;
}
.card-project:hover .card-project__info,
.card-project:has(:focus-visible) .card-project__info { transform: translateX(30px); }
.card-project__actions { display: flex; flex-wrap: wrap; gap: var(--number-spacing-16); margin-top: var(--number-spacing-12); pointer-events: auto; width: fit-content; } /* Figma Card-Project: Buttons pt 12, gap 16 */
.element-chips-line { display: flex; flex-wrap: wrap; gap: var(--number-spacing-08); padding-bottom: var(--number-spacing-08); } /* Element-ChipsLine (Figma 2166:4753): una chip per categoria, gap 8, 8 sotto */
.card-project__title {
display: block;
font-family: var(--font-family-heading);
font-size: var(--number-font-size-heading-2);
font-weight: var(--number-font-weight-bold);
line-height: var(--number-line-height-heading-2); /* Figma: H2 36/48 */
max-width: 608px; /* Figma: colonna del testo 608 (720 - 2×56) */
color: var(--color-solid-black, #000); /* tema scuro: nero pieno (color/solid/black) */
}
/* tono del testo sopra l'immagine */
.card-project--text-light .card-project__title { color: var(--color-text-lightest); }
/* segnaposto: scuro dove il testo è chiaro, chiaro dove il testo è scuro */
.card-project--text-light .media { background: var(--color-neutral-800); }
.card-project--text-light .media::before { color: var(--color-neutral-400); }
.card-project--text-dark .media { background: var(--color-neutral-100); }
@media (max-width: 1024px) {
.card-project__info { padding: 40px; }
.card-project__title { font-size: var(--number-font-size-heading-4); line-height: var(--number-line-height-heading-4); }
}
@media (max-width: 767px) {
.card-project__info { padding: var(--number-spacing-32); }
}
/* card-special: pagina Progetti Speciali */
.special-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.card-special { position: relative; min-height: 70vh; overflow: hidden; background: var(--color-neutral-900); }
.card-special__link { position: absolute; inset: 0; display: block; }
.card-special__media { position: absolute; inset: 0; transition: transform 0.4s ease-in-out; }
.card-special__link:hover .card-special__media { transform: scale(1.03); }
.card-special__info {
position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
padding: 80px 50px; color: var(--color-text-lightest);
}
.card-special__status { display: block; color: var(--color-text-lighter); }
.card-special__title { display: block; font-family: var(--font-family-heading); font-size: var(--number-font-size-heading-2); font-weight: var(--number-font-weight-bold); line-height: 46px; color: var(--color-text-lightest); }
.card-special .media { background: var(--color-neutral-800); }
.card-special .media::before { color: var(--color-neutral-400); }
@media (max-width: 767px) {
.special-grid { grid-template-columns: 1fr; }
.card-special { min-height: 50vh; }
.card-special__info { padding: var(--number-spacing-32); }
.card-special__title { font-size: var(--number-font-size-heading-4); line-height: var(--number-line-height-heading-4); }
}
/* 11. SKILL-LIST, TAG-LIST, LINK-CARD (Metodo e Profilo) ------------------- */
.skill-list { display: grid; gap: var(--number-space-md); }
.skill-list__title { margin-bottom: var(--number-space-xs); }
.skill-list__badge { display: block; margin-bottom: 2px; color: var(--color-text-lighter); }
.skill-list__text { margin: 0; }
.tag-list { display: flex; flex-wrap: wrap; gap: 0 12px; justify-content: center; }
.tag-list__item { font-family: var(--font-family-heading); font-size: var(--number-font-size-card); font-weight: var(--number-font-weight-bold); line-height: 28px; color: var(--color-text-darkest); }
.tag-list__item:not(:last-child)::after { content: "—"; margin-left: 12px; color: var(--color-text-lighter); font-weight: var(--number-font-weight-regular); }
.link-card { text-align: left; }
.link-card__title { margin-bottom: var(--number-space-xs); }
.link-card__link { font-family: var(--font-family-heading); font-weight: var(--number-font-weight-bold); }
.link-card__link:hover { color: var(--color-text-lighter); }
.profile-grid { display: grid; grid-template-columns: 300px 1fr 1fr; gap: var(--number-space-md); align-items: start; }
.profile-grid__photo { aspect-ratio: 300 / 201; }
@media (max-width: 767px) { .profile-grid { grid-template-columns: 1fr; } .profile-grid__photo { max-width: 300px; } }
/* 12. MEDIA: segnaposto per le immagini ----------------------------------- */
/* Quando il file in images/ esiste, l'![]()
copre il segnaposto.
Se manca, resta il riquadro con il nome del file da caricare. */
:where(.media) { position: relative; } /* le classi dei componenti (es. .hero__media) possono renderla absolute */
.media { overflow: hidden; background: var(--color-background-lighter); }
.media::before {
content: attr(data-label);
position: absolute; top: 14px; left: 16px; right: 16px;
font-family: var(--font-family-heading);
font-size: var(--number-font-size-xs);
letter-spacing: 1px; line-height: 16px;
color: var(--color-text-lighter);
pointer-events: none;
}
.media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 13. TELEFONO: adattamenti rispetto al sito attuale ------------------------ */
/* Titoli un po' più piccoli e meno spazio tra le fasce (150px → 75px, 75px → 40px) */
@media (max-width: 767px) {
h1 { font-size: 36px; line-height: 42px; }
h2 { font-size: 28px; line-height: 36px; }
h3 { font-size: 24px; line-height: 30px; }
.band--top-xl { --band-top: var(--number-space-lg); }
.band--bottom-xl { --band-bottom: var(--number-space-lg); }
.band--top-lg { --band-top: var(--number-space-md); }
.band--bottom-lg { --band-bottom: var(--number-space-md); }
}
/* 14. METODO: lead, badge, riquadro immagine, skill-card ---------------- */
.band--surface { background: var(--color-background-lighter); }
.band--black { background: var(--color-solid-black); }
.lead, .lead p { font-size: 24px; line-height: 36px; color: var(--color-background-darker); }
.text-large { font-size: 24px; line-height: 36px; color: var(--color-background-darker); } /* etichetta a corpo grande (es. "Attività"): stesso aspetto del lead, senza le sue regole di spazio */
.lead { margin-bottom: var(--number-space-lead-gap); }
.lead + .space { display: none; } /* il lead ha già il suo spazio */ /* 72px sotto ogni testo lead, se segue altro contenuto */
.badge-new {
display: inline-block; margin: 0 0 6px; padding: 0 10px;
font-family: var(--font-family-heading); font-size: var(--number-font-size-card); font-weight: var(--number-font-weight-bold); line-height: 18px;
color: var(--color-text-lightest); background: var(--color-accent-new); border-radius: 4px;
}
.u-center { text-align: center; }
.band__title--spaced { margin-bottom: var(--number-space-sm); }
.figure--framed { margin-bottom: var(--number-space-lg); padding: 10px; background: var(--color-solid-white); border-radius: 10px; }
.figure--framed + .lead p { margin-top: 0; }
.element-image.metodo-schema { margin-bottom: var(--number-space-lg); } /* schema del metodo: Element-Image con riquadro (radius 20, immagine 12) */
.element-image.metodo-schema + .lead p { margin-top: 0; }
.figure--framed img { display: block; width: 100%; height: auto; }
.skill-card:last-child { padding-bottom: 0; }
.skill-card { align-items: start; display: grid; grid-template-columns: 1fr 3fr; gap: var(--number-space-sm); padding-bottom: var(--number-space-md); }
.skill-card__label, .skill-card__text { padding: 10px; background: var(--color-background-lighter); border-radius: 10px; }
.skill-card__name { margin: 0; padding: 4px 0; background: var(--color-solid-white); border-radius: 4px; text-align: center; }
.skill-card__text p { margin: 0; text-align: left; }
.skill-card .badge-new { display: block; width: max-content; }
/* Card-Fase · Color=Brand (Figma 2246:1485): card radius 20, padding 16 (22 a sinistra), gap 12; Badge Medium Brand opzionale, titolo H5 (Montserrat Bold 18/24), testo B1 (DM Sans 15/25).
Variante .card-fase--brand (le card di Block-Fase restano com'erano). Stroke 6px a sinistra nel colore Brand (arancio default; .card-fase--fuchsia: fucsia). Sfondo come le altre card: grigio chiaro, bianco sulle fasce grigie */
.card-fase-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--grid-gap-wide); } /* una sotto l'altra */
.card-fase.card-fase--brand { --card-fase: var(--brand-orange-default); position: relative; overflow: hidden; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: var(--number-spacing-12); padding: var(--number-spacing-16) var(--number-spacing-16) var(--number-spacing-16) calc(var(--number-spacing-16) + 6px); background: var(--color-background-lighter); border-radius: var(--number-radius-xl, 20px); text-align: left; }
.card-fase--brand::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--card-fase); }
.card-fase.card-fase--fuchsia { --card-fase: var(--brand-fucsia-default); }
.band--surface .card-fase--brand { background: var(--color-solid-white); }
.card-fase--brand .card-fase__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--number-spacing-10); } /* Titolo e Badge (Figma 2246:1486): gap 10 */
.card-fase--brand .card-fase__head .badge { background: var(--color-background-lightest); } /* NON NEL DS: nel Figma la card è bianca e il badge Light (#f0f0f0) si vede; qui la card è grigio chiaro, quindi il badge è bianco */
.card-fase--brand .card-fase__title { margin: 0; font-family: var(--font-family-heading); font-size: 18px; line-height: 24px; font-weight: 700; color: var(--color-text-darkest); }
.card-fase--brand .card-fase__text { font-size: 15px; line-height: 25px; color: var(--color-text-darker); }
.card-fase--brand .card-fase__text p { margin: 0; }
.card-fase--brand .card-fase__text p + p { margin-top: 12px; }
@media (max-width: 767px) {
.lead, .lead p, .text-large { font-size: 20px; line-height: 30px; }
.skill-card { grid-template-columns: 1fr; gap: var(--number-space-xs); }
}
/* 15. LOGO-CAROUSEL (Profilo) e PROFILE-BAND ------------------------------ */
/* Scorre di un logo ogni 5 secondi, in loop. Logo visibili: 1 · 2 (≥600) · 3 (≥960) · 4 (≥1200) · 6 (≥1500) */
.logo-carousel { --per-view: 1; --gap: 120px; overflow: hidden; }
.logo-carousel__track { margin: 0; padding: 0; list-style: none; display: flex; gap: var(--gap); transition: transform 0.25s ease; will-change: transform; }
.logo-carousel__item { flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view)); margin: 0; list-style: none; }
.logo-carousel__item img { display: block; width: 100%; height: auto; }
@media (min-width: 600px) { .logo-carousel { --per-view: 2; } }
@media (min-width: 960px) { .logo-carousel { --per-view: 3; } }
@media (min-width: 1200px) { .logo-carousel { --per-view: 4; } }
@media (min-width: 1500px) { .logo-carousel { --per-view: 6; } }
/* BAND-IMG: fascia a tutta larghezza. La foto occupa sempre 1/3 della larghezza e fissa l'altezza della fascia
(proporzione 480:354 come in Figma); si ridimensiona in proporzione, ancorata al centro-destra.
Il resto della fascia si divide tra gli altri contenuti: citazione = 2/3, LinkedIn e CV = 1/3 ciascuno. */
.band-img__grid { display: grid; grid-template-columns: 1fr 2fr; align-items: stretch; background: var(--color-solid-black); }
.band-img__grid--thirds { grid-template-columns: repeat(3, 1fr); }
.band-img__photo { aspect-ratio: 480 / 354; overflow: hidden; }
.band-img__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.band-img__body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 0 var(--number-spacing-80); }
.quote-band__text {
margin: 0; width: 100%; text-align: left; color: var(--color-text-lightest);
font-family: var(--font-family-body); font-style: italic; font-weight: var(--number-font-weight-light);
font-size: var(--number-font-size-heading-4); line-height: 36px; letter-spacing: 0.48px; /* Figma Lead/L1-LightItalic: DM Sans 300 corsivo 24/36, 2% */
}
.profile-band__grid { text-align: center; }
.profile-band__col { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 0 max(var(--number-gutter-lg), env(safe-area-inset-left, 0px)); }
.profile-band__col h6 { margin: 0 0 var(--number-space-xs); color: var(--color-text-lightest); }
.profile-band__social { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 49px; margin-top: 33px; color: var(--color-solid-white); }
.profile-band__social svg { display: block; width: 24px; height: 24px; fill: currentColor; }
.profile-band__col .button { margin-top: 33px; }
@media (max-width: 767px) {
.band-img__grid, .band-img__grid--thirds { grid-template-columns: 1fr; }
.band-img__body { padding: var(--number-space-md) max(var(--number-gutter-sm), env(safe-area-inset-left, 0px)); }
.quote-band__text { font-size: 20px; line-height: 30px; }
.profile-band__col { padding: var(--number-space-md) max(var(--number-gutter-sm), env(safe-area-inset-left, 0px)) 0; }
.profile-band__col:last-child { padding-bottom: var(--number-space-md); }
}
/* Regola: un pulsante outline su sfondo con sfumatura, in hover si riempie (nero o bianco)
e la label diventa trasparente: sotto si vede la sfumatura. main.js scrive --gradient-w e --label-x. */
.on-gradient .button--outline:hover,
.on-gradient .button--outline-on-dark:hover { background: var(--hover-fill); }
.on-gradient .button--outline { --hover-fill: var(--color-button-primary); }
.on-gradient .button--outline-on-dark { --hover-fill: var(--color-solid-white); }
.on-gradient .button__label {
background: var(--gradient-brand) 0 0 / var(--gradient-w, 100vw) 100% no-repeat;
background-position-x: calc(-1 * var(--label-x, 0px));
-webkit-background-clip: text; background-clip: text;
transition: color var(--number-duration-default) ease, -webkit-text-fill-color var(--number-duration-default) ease;
}
.on-gradient .button--outline:hover .button__label,
.on-gradient .button--outline-on-dark:hover .button__label { color: transparent; -webkit-text-fill-color: transparent; }
/* 16. BAND-GRADIENT-BUTTON (da Figma: Band-Gradient-Button) ------------------ */
/* Fascia con la sfumatura brand e un pulsante outline al centro. Padding sopra/sotto 80px (Figma: number/spacing/80). */
.band-gradient-button {
display: flex; justify-content: center; align-items: center;
padding: var(--number-spacing-64) var(--number-gutter-sm);
background: var(--gradient-brand);
}
/* Label "bucata": il testo del pulsante è trasparente e lascia vedere la sfumatura della fascia (la sfumatura sulla label è allineata da main.js, vedi regola .on-gradient più sotto). */
.band-gradient-button .button__label { color: transparent; -webkit-text-fill-color: transparent; }
/* 16b. VERSION-BAND (da Figma: Banc-Text-Button) ---------------------------
Fascia scura con testo a sinistra e pulsante outline bianco a destra:
segnala la versione del progetto e porta a quella alternativa. */
.version-band { background: var(--color-background-darker); min-height: 177px; display: flex; align-items: center; justify-content: center; padding: 0 var(--number-gutter-lg); }
.version-band__content { width: 800px; max-width: 100%; display: flex; align-items: center; justify-content: center; gap: var(--number-spacing-32); padding: 0 var(--number-spacing-16); box-sizing: border-box; }
.version-band__texts { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.version-band__body { margin: 0; font-family: var(--font-family-body); font-size: var(--number-font-size-md); line-height: var(--number-line-height-body); font-weight: var(--number-font-weight-regular); color: var(--color-text-lightest); } /* Figma Band-Text-Button, Body line (variabile): Body 15/25 regular, gap 0 */
.version-band__text { margin: 0; font-family: var(--font-family-heading, 'Montserrat', sans-serif); font-size: var(--number-font-size-heading-5); line-height: var(--number-line-height-heading-5); font-weight: var(--number-font-weight-bold); color: var(--color-text-lightest); } /* Figma: Heading/H5-Bold 18/24 */
/* Figma Band-Text-Button e Band-Gradient-Button: Button taglia L (quella di base, 52 · 24 · 14/24); Light = Secondary, Dark/Black = Tertiary, Brand = Tertiary con testo chiaro o Secondary con testo scuro */
.version-band .button { flex: 0 0 auto; }
@media (max-width: 767px) {
.version-band { padding: var(--number-spacing-32) var(--number-gutter-sm); }
.version-band__content { flex-direction: column; align-items: flex-start; gap: var(--number-spacing-16); padding: 0; }
}
/* 17b. CARD-TEXT-BUTTON e CARD-CLOSER (da Figma) ---------------------------
Block-Default-Crosslink: testo a sinistra e pulsante outline (nero, M) a destra.
Block-Default-Closer: chiusura di una fase, "Fase (di) ———— Nome", alta 154px. */
.block-crosslink { box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: var(--number-spacing-64);
width: 800px; max-width: 100%; margin: 0 auto; padding: var(--number-spacing-32) var(--number-spacing-16) 0; }
.block-crosslink__text { flex: 1 1 0; min-width: 0; margin: 0; font-family: var(--font-family-body); font-size: var(--number-font-size-md); line-height: var(--number-line-height-body);
font-weight: var(--number-font-weight-bold); color: var(--color-text-darker); } /* Figma: Body/B1-Bold, Primary #222 */
.block-crosslink .button { flex: 0 0 auto; }
/* Block-Crosslink nel testo della pagina Metodo: arriva a filo del testo (nessun padding laterale) e, dopo i badge, stacco di 20px (regola dopo il Body) più i 32px del padding alto del componente */
.text-block > .block-crosslink { padding-left: 0; padding-right: 0; margin-top: var(--number-spacing-20); }
.block-closer { box-sizing: border-box; width: 800px; max-width: 100%; margin: 0 auto; padding: var(--number-spacing-64) var(--number-spacing-16) var(--number-spacing-32); /* Figma Block/Default-Closer (2057:689): sopra 64, sotto 32, lati 16 */
font-family: var(--font-family-body); font-size: var(--number-font-size-sm); line-height: var(--number-line-height-caption); color: var(--color-neutral-900); }
.block-closer__box { display: flex; align-items: center; justify-content: space-between; gap: var(--number-spacing-16); padding: var(--number-padding-surface); border-radius: var(--number-radius-surface); background: var(--color-background-lighter); } /* Figma Block-Default-Closer: riquadro neutral/100, radius 20, padding 16; chip piccolo a sinistra, nome a destra */
.band--surface .block-closer__box { background: var(--color-background-lightest); } /* su fondo grigio (100) il riquadro va bianco, e viceversa (NON NEL DS: variante) */
.block-closer__name { min-width: 0; margin: 0; font-size: var(--number-font-size-sm); line-height: var(--number-line-height-caption); font-weight: var(--number-font-weight-bold); text-align: right; } /* Caption/C1-Bold 12/18 */
/* Dentro la pagina progetto il contenitore ha 16px di padding: la card (800px) si centra e arriva a filo col testo. */
@media (min-width: 1025px) {
.container--detail .block-crosslink { width: 800px; max-width: none; position: relative; left: 50%; transform: translateX(-50%); }
}
@media (max-width: 1024px) { .block-crosslink, .block-closer { padding-left: 0; padding-right: 0; } }
@media (max-width: 767px) {
.block-crosslink { flex-direction: column; align-items: flex-start; gap: var(--number-spacing-16); }
.block-closer { padding-top: var(--number-spacing-64); }
}
/* 17. PAGINA PROGETTO (versione estesa) ----------------------------------- */
/* cols: griglia a 12 colonne con 32px tra le colonne (prima 30px, come il tema). Su telefono tutto in colonna. */
@media (min-width: 1025px) { .container--detail { padding-left: var(--number-spacing-16); padding-right: var(--number-spacing-16); } } /* sotto: valgono i margini normali del container */
.cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--number-spacing-32); }
.cols__col { grid-column: span 12; min-width: 0; }
.cols__col--3 { grid-column: span 3; }
.cols__col--4 { grid-column: span 4; }
.cols__col--6 { grid-column: span 6; }
.cols__col--8 { grid-column: span 8; }
.cols__col--9 { grid-column: span 9; }
/* colonne su cinque (n/5 dell'originale): gruppo annidato a cinque colonne uguali, stesso gap */
.cols--fifths { grid-template-columns: repeat(5, 1fr); }
.cols__col--f1 { grid-column: span 1; }
.cols__col--f2 { grid-column: span 2; }
.cols__col--f3 { grid-column: span 3; }
.cols__col--f4 { grid-column: span 4; }
/* liste puntate nei testi (NON NEL DS) */
.cols__col ul:not([class]), .box ul, .block-evidence__content ul { list-style: disc; margin: 0 0 var(--number-space-paragraph); padding-left: var(--number-spacing-20); }
.cols__col ul:not([class]) > li, .box li, .block-evidence__content li { margin: 0 0 var(--number-spacing-04); }
.cols__col ul:not([class]) > :last-child, .box ul > :last-child, .block-evidence__content ul > :last-child { margin-bottom: 0; }
/* box in una griglia: ogni riga ha box della stessa altezza (come le card); blocchi di testo uno sotto l'altro: 32px (gap delle card) */
.cols__col:has(> .box:only-child) { display: flex; flex-direction: column; }
.cols__col > .box:only-child { flex: 1 1 auto; }
.block-evidence + .block-evidence { margin-top: var(--number-space-card-gap); }
.cols__col > :last-child { margin-bottom: 0; }
/* REGOLE TITOLI (pagine progetto e testi lunghi)
Sotto: H3 (e gli altri titoli) --number-space-heading-gap (12px), H5 --number-space-h5-gap (6px), prima del contenuto, anche se il titolo è l'ultimo o l'unico
elemento della sua colonna e il contenuto sta nella riga sotto.
Sopra: H3 = 72px e H5 = 28px dal contenuto che li precede, in totale (non si sommano a margini o spazi vuoti).
Il primo titolo di una fascia parte dal padding della fascia (152px). */
h3 { margin-bottom: var(--number-space-heading-gap); }
h5 { margin-bottom: var(--number-space-h5-gap); }
.cols__col:has(> h3:last-child):not(:last-child) { padding-bottom: var(--number-space-heading-gap); }
.cols__col:has(> h5:last-child):not(:last-child) { padding-bottom: var(--number-space-h5-gap); }
.cols__col > h3, .text-block > h3, .cols__col > .element-title-chip { margin-top: var(--number-space-h3); }
.cols__col > h5, .text-block > h5 { margin-top: var(--number-space-h5); }
.cols__col > h2 + h5, .text-block > h2 + h5 { margin-top: 0; } /* sottotitolo di una fase: stacco da H2 = spazio sotto i titoli */
.cols > .cols__col:first-child > :is(h3, h5, .element-title-chip):first-child { margin-top: 0; } /* primo elemento della fascia */
.cols__col > .space:has(+ :is(h3, h5, .element-title-chip)),
.cols__col:has(+ .cols__col > :is(h3, h5, .element-title-chip):first-child) > .space:last-child { display: none; }
:is(p, ul, ol, .lead, .stack, .box, .image-box):has(+ :is(h3, h5, .element-title-chip)) { margin-bottom: 0; }
/* Tra due blocchi (.container) della stessa fascia: spazio di fascia media, tranne se il secondo parte da un titolo
(vale la regola del titolo) o da una card con spazio proprio (Block-Default-Closer). */
.band > .container + .container { margin-top: var(--number-space-lg); }
.band > .container + .container:has(> .cols > .cols__col:first-child > :is(h3, h5, .element-title-chip):first-child) { margin-top: 0; }
.band > .container + .container:has(> .cols > .cols__col:first-child > :is(h3, h5, .element-title-chip):first-child) > .cols > .cols__col:first-child > :is(h3, .element-title-chip):first-child { margin-top: var(--number-space-h3); }
.band > .container + .container:has(> .cols > .cols__col:first-child > :is(h3, h5, .element-title-chip):first-child) > .cols > .cols__col:first-child > h5:first-child { margin-top: var(--number-space-h5); }
.band > .container + .container:has(> .block-closer) { margin-top: 0; }
/* H1 delle pagine progetto: 32px sotto, anche se il contenuto che segue è nel blocco successivo. */
.cols__col > h1, .text-block > h1 { margin-bottom: var(--number-space-h1-gap); }
.band > .container:has(> .cols > .cols__col:last-child > h1:last-child) + .container { margin-top: var(--number-space-h1-gap); }
/* REGOLA TESTO + IMMAGINE: tra un testo e un'immagine nel riquadro (.image-box) che lo segue ci sono sempre 32px (--number-space-box-gap; vale anche per i box grigi).
Testo = p, ul, ol, .lead e .stack (testo con padding). Gli spazi vuoti (.space) in mezzo vengono tolti. */
:is(p, ul, ol, .lead, .stack):has(+ .image-box),
:is(p, ul, ol, .lead, .stack):has(+ .space + .image-box) { margin-bottom: 0; }
:is(p, ul, ol, .lead, .stack) + .space:has(+ .image-box) { display: none; }
:is(p, ul, ol, .lead, .stack) + .box,
:is(p, ul, ol, .lead, .stack) + .image-box,
:is(p, ul, ol, .lead, .stack) + .space + .image-box { margin-top: var(--number-space-image-gap, var(--number-space-box-gap)); }
/* Immagine larga sotto una riga che finisce con testo in una colonna stretta (il generatore mette data-follows-text). */
.cols__col[data-follows-text] > .image-box:first-child { margin-top: var(--number-space-image-gap, var(--number-space-box-gap)); }
/* Testo a larghezza piena e immagine nella colonna successiva (riga sotto): l'eventuale spazio vuoto in coda al testo
e quello in testa all'immagine spariscono. */
.cols__col--12:has(> :is(p, ul, ol, .lead, .stack):last-child) + .cols__col > .image-box:first-child,
.cols__col--12:has(> :is(p, ul, ol, .lead, .stack):last-child) + .cols__col > .space:first-child + .image-box,
.cols__col--12:has(> :is(p, ul, ol, .lead, .stack):nth-last-child(2) + .space:last-child) + .cols__col > .image-box:first-child,
.cols__col--12:has(> :is(p, ul, ol, .lead, .stack):nth-last-child(2) + .space:last-child) + .cols__col > .space:first-child + .image-box { margin-top: var(--number-space-image-gap, var(--number-space-box-gap)); }
.cols__col--12:has(> :is(p, ul, ol, .lead, .stack):last-child) + .cols__col > .space:first-child:has(+ .image-box),
.cols__col--12:has(> :is(p, ul, ol, .lead, .stack):nth-last-child(2) + .space:last-child) + .cols__col > .space:first-child:has(+ .image-box) { display: none; }
.cols__col--12:has(> :is(p, ul, ol, .lead, .stack):nth-last-child(2) + .space:last-child):has(+ .cols__col > :is(.image-box:first-child, .space:first-child + .image-box)) > .space:last-child { display: none; }
.cols__col--12:has(> .space:last-child):has(+ .cols__col > .image-box:first-child) > :is(p, ul, ol, .lead, .stack):nth-last-child(2) { margin-bottom: 0; }
.space { height: var(--space, 20px); }
.block-closer-header { display: flex; flex-direction: column; justify-content: flex-end; box-sizing: border-box; min-height: var(--number-size-block-closer-header-height); margin: 0; padding-bottom: var(--number-space-block-closer-header-bottom); } /* Figma Block-Default-Closer-Header: alto 150, solo testo Chip/Ch1 11/18 #909090, 8px sotto */
.block-closer-header__text { margin: 0; font-family: var(--font-family-body); font-size: var(--number-size-chip-font-large); line-height: var(--number-line-height-cap-trim); letter-spacing: var(--number-letter-spacing-chip-large); color: var(--color-text-lighter); }
/* HEADER-PROJECT-EXTENDED (Figma): scheda e attività */
.project-header__title-row { margin-bottom: var(--number-space-h1-gap); } /* 72px sotto l'H1 (Figma) */
.project-header__body { margin: 0; }
.project-header__body > p:last-child { margin-bottom: 0; }
/* element-evidence: Element-Evidence (Figma 2081:1045) — riquadro neutral/100 con titolo H5 e testo; 32px dal testo che lo precede (gap della colonna lead in Figma) */
.element-evidence { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--number-spacing-06); padding: var(--number-padding-surface); border-radius: var(--number-radius-surface); background: var(--color-background-lighter); }
.element-evidence__title { margin: 0; }
.element-evidence__text > p { margin: 0 0 var(--number-space-paragraph); }
.element-evidence__text > p:last-child { margin-bottom: 0; }
.project-header__body + .element-evidence { margin-top: var(--number-spacing-32); }
.project-header__activities { display: flex; flex-direction: column; gap: var(--number-spacing-04); margin-top: var(--number-spacing-32); }
.project-header__activities .element-project-info__label { margin: 0; }
.element-project-info { display: flex; flex-direction: column; gap: var(--number-spacing-04); padding-bottom: var(--number-spacing-24); }
.element-project-info__label { margin: 0; font-size: var(--number-font-size-sm); line-height: var(--number-line-height-caption); color: var(--color-text-lighter); }
.element-project-info__value { margin: 0; color: var(--color-neutral-900); }
.element-project-info__logo img { display: block; width: 100%; max-width: 235px; height: auto; } /* Figma: il logo riempie la colonna meno uno spazio vuoto a destra di 37px (198px a 1440) */
.badge-list { display: flex; flex-wrap: wrap; gap: var(--number-spacing-08); margin: 0; padding: 0; list-style: none; }
/* Badge (Figma 2066:1895, ex Chip): Size Small | Medium | Large | XLarge · Aspect Solid | Outline · Color Light | Dark | Brand. DM Sans Regular, spaziatura 4%.
Il testo ha il text-box-trim (cap/alphabetic): il riquadro è alto quanto la maiuscola, per questo line-height = altezza della maiuscola.
Predefinito = Medium Light: 10px, padding 6/10, radius 8 (Light = sfondo bianco, testo #222) */
.badge { display: inline-block; margin: 0; padding: var(--number-spacing-06) var(--number-spacing-10); border: 0; background: var(--color-background-lighter); border-radius: var(--number-radius-sm); font-family: var(--font-family-body); font-size: var(--number-size-chip-font); font-weight: var(--number-font-weight-regular); line-height: var(--number-line-height-cap-trim); letter-spacing: var(--number-letter-spacing-chip); color: var(--color-text-darker); white-space: nowrap; }
.badge--solid { background: var(--color-background-darkest); color: var(--color-text-lightest); } /* Dark: #000, testo bianco */
.badge--brand { background: var(--project-default); color: var(--color-text-lightest); } /* Brand · Solid (Figma 2066:1895 aggiornato): sfondo Project default, testo bianco */
.badge--brand-inverse { background: var(--badge-brand, var(--project-ultralight)); color: var(--badge-brand-ink, var(--project-default)); } /* Brand · Inverse: sfondo ultralight, testo Project default (era il vecchio Brand) /* Brand: ultralight e default del Project (M+M: arancio). Un progetto può impostare --badge-brand e --badge-brand-ink su un suo contenitore (NON NEL DS: Value+ non ha ancora un modo nella collection Project) */
.badge--small { padding: var(--number-spacing-05) var(--number-spacing-08); border-radius: var(--number-radius-xs); font-size: var(--number-size-chip-font-small); letter-spacing: var(--number-letter-spacing-chip-small); } /* Small: 10px, padding 5/8, radius 6 (Figma: font 10/15) */
.badge--large { padding: var(--number-spacing-06) var(--number-spacing-10); border-radius: var(--number-radius-sm); font-size: var(--number-size-chip-font-large); letter-spacing: var(--number-letter-spacing-chip-large); } /* Large: 12px, padding 6/10, radius 8 (Large Dark nel Figma ha radius 10) */
.badge-list { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--number-spacing-08); margin: 0; padding: 0; list-style: none; } /* elenco di badge (competenze in Metodo); gap 8 NON NEL DS */
.badge-list > li { margin: 0; list-style: none; }
.badge-list .badge { display: block; }
.badge--xlarge { padding: var(--number-spacing-06) var(--number-spacing-12); border-radius: var(--number-radius-sm); font-size: 14px; letter-spacing: 0.56px; } /* XLarge: 14px, padding 6/12, radius 8 (aggiornato: prima 10) */
.badge--line { position: relative; overflow: hidden; }
.badge--line::before { content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 22px; background: var(--brand-fucsia-default); } /* XLarge · Light · Solid, Rectangle=Yes (Figma 2243:1433, "Line"): barra 6×22 in alto a sinistra, fucsia default */
.badge--brand.badge--fuchsia { background: var(--brand-fucsia-default); color: var(--color-text-lightest); } /* Brand Solid in fucsia (richiesto per la chip "New" in Metodo) */
.title-badge { position: relative; display: inline-block; } /* titolo centrato con il badge a destra (gap 10, come Titolo e Badge nelle card): il badge esce dal flusso così il titolo resta al centro */
.title-badge > .badge { position: absolute; left: calc(100% + var(--number-spacing-10)); top: 50%; transform: translateY(-50%); }
.badge--lead { display: block; width: max-content; margin-bottom: 6px; }
.badge--outline { padding: calc(var(--number-spacing-06) - 1px) calc(var(--number-spacing-12) - 1px); background: transparent; border: 1px solid var(--color-stroke-medium); } /* Outline (XLarge, Light): contorno 1px #9c9c9c (stroke/medium), nessuno sfondo */
/* Element-Icon-Title-Chip (Figma 2120:3575): icona facoltativa (50px di altezza, 8px sotto), titolo H2/H3 e chip a destra in linea con la prima riga */
.element-title-chip { display: flex; flex-direction: column; align-items: flex-start; gap: var(--number-spacing-08); padding-bottom: var(--number-space-heading-gap); }
.element-title-chip__icon img { display: block; height: 50px; width: auto; }
.element-title-chip__content { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--number-spacing-16); width: 100%; }
.element-title-chip__title { flex: 1 1 0; min-width: 0; margin: 0; }
.element-title-chip__chip { flex: 0 0 auto; display: flex; padding-top: 12px; } /* centra la chip sulla prima riga dell'H2: (48 - 22) / 2 */
.element-title-chip--h3 .element-title-chip__chip { padding-top: 7px; } /* H3: (36 - 22) / 2 */
body.spacing-v2 .element-title-chip--h2 { padding-bottom: var(--number-space-title-h2-below); }
body.spacing-v2 .element-title-chip--h3 { padding-bottom: var(--number-space-title-h3-below); }
body.spacing-v2 .cols__col > .element-title-chip--h3 { margin-top: var(--number-space-title-h3-above); }
body.spacing-v2 .cols > .cols__col:first-child > .element-title-chip:first-child { margin-top: 0; }
@media (max-width: 767px) { .element-title-chip--h2 .element-title-chip__chip { padding-top: 7px; } } /* H2 mobile 36px di interlinea */
.project-header__label { display: flex; margin: 0; }
.separator { height: 1px; margin: 0 0 var(--number-space-sm); border: 0; background: var(--color-background-lighter); }
.band--surface-soft { background: var(--color-background-lighter); }
.band__full img { display: block; width: 100%; height: auto; }
/* box: riquadro di testo (bianco, grigio o scuro) */
.box { padding: var(--number-padding-surface); border-radius: var(--number-radius-surface); }
.box--white { background: var(--color-solid-white); }
.box--alt { background: var(--color-background-lighter); }
/* box con i colori propri dell'originale (NON NEL DS): sfondo --box-bg, filetto a sinistra 6px --box-accent, bordo 2px --box-outline */
.box--custom { background: var(--box-bg, transparent); }
.box--accent { border-left: 6px solid var(--box-accent); }
.box--outline { border: 2px solid var(--box-outline); }
.box--outline.box--accent { border-left: 6px solid var(--box-accent); }
.box--tight { padding: var(--number-spacing-08); } /* colonne strette (journey): 8px come l'originale */
.box--label { padding: var(--number-spacing-06) 10px; border-radius: 10px; } /* etichetta colorata (Competitor diretti/indiretti): misure dell'originale */
.box + .box { margin-top: var(--grid-gap-tight); } /* box uno sotto l'altro: distanza stretta (8px) */
/* righe di box (NON NEL DS): 10px tra i box, come nell'originale, invece dei 32px di colonna */
.cols--tight { column-gap: var(--grid-gap-tight); }
.box--spaced { margin-top: var(--number-space-box-gap); }
.box--dark { background: var(--color-background-darker); }
.box--marker { padding: 35px var(--number-padding-surface); text-align: center; }
.box--marker p, .box--marker strong { color: var(--color-text-medium); margin: 0; } /* come il sito attuale: grigio su scuro */
.box > :last-child { margin-bottom: 0; }
/* image-box: immagine in un riquadro con 16px di margine interno */
.image-box { padding: 0; }
.image-box--white, .image-box--alt { padding: var(--number-padding-surface); border-radius: var(--number-radius-surface); }
.image-box--white { background: var(--color-solid-white); }
.image-box--alt { background: var(--color-background-lighter); }
.image-box img { display: block; width: auto; max-width: 100%; height: auto; } /* non si ingrandisce oltre la misura originale */
.caption { margin: var(--number-space-xs) 0 0; padding-left: 16px; }
/* REGOLA CARD: la card ha intorno uno spazio pari al gap tra le colonne (--number-space-card-gap = 32px su desktop; su telefono
le colonne sono impilate e vale il row-gap, 20px). Vince sui valori più piccoli (testo 12px), mai su quelli più grandi (H3 72px).
Tra due card vale il gap della griglia. Ai bordi della fascia valgono il padding di fascia e di pagina (16px). */
.cols__col:has(> :is(p, ul, ol, .lead, .stack):last-child) ~ .cols__col > .card-phase:first-child,
.cols__col:has(> .card-phase:last-child) + .cols__col--12 > :is(p, ul, ol, .lead, .stack, .box, .image-box):first-child,
.cols__col:has(> .card-phase:last-child) + .cols__col--12 > .space:first-child + :is(p, ul, ol, .lead, .stack, .box, .image-box) { margin-top: var(--number-space-card-gap); }
.cols__col:has(> .card-phase:last-child) + .cols__col--12 > .space:first-child { display: none; } /* lo spazio vuoto copiato dall'originale lascia posto alla regola */
@media (max-width: 767px) { /* una colonna: lo spazio tra le righe è il row-gap della griglia */
.cols__col:has(> :is(p, ul, ol, .lead, .stack):last-child) ~ .cols__col > .card-phase:first-child,
.cols__col:has(> .card-phase:last-child) + .cols__col--12 > :is(p, ul, ol, .lead, .stack, .box, .image-box):first-child,
.cols__col:has(> .card-phase:last-child) + .cols__col--12 > .space:first-child + :is(p, ul, ol, .lead, .stack, .box, .image-box) { margin-top: 0; }
}
/* Titolo in colonna con l'immagine accanto: l'immagine parte dall'altezza del testo, non da quella del titolo (spazio sopra l'H5 + altezza + 6px sotto) */
@media (min-width: 768px) {
.cols__col:not(.cols__col--12):has(> h5:first-child) + .cols__col > .space:first-child { display: none; } /* spazio vuoto copiato dall'originale */
.cols__col:not(.cols__col--12):has(> h5:first-child) + .cols__col > :is(.image-box, .block-image):first-child,
.cols__col:not(.cols__col--12):has(> h5:first-child) + .cols__col > .space:first-child + :is(.image-box, .block-image) { margin-top: calc(var(--number-space-h5) + var(--number-line-height-heading-5) + var(--number-space-h5-gap)); } /* spazio sopra l'H5 (28) + altezza (24) + 6 sotto */
.cols > .cols__col:first-child:not(.cols__col--12):has(> h5:first-child) + .cols__col > :is(.image-box, .block-image):first-child,
.cols > .cols__col:first-child:not(.cols__col--12):has(> h5:first-child) + .cols__col > .space:first-child + :is(.image-box, .block-image) { margin-top: calc(var(--number-line-height-heading-5) + var(--number-space-h5-gap)); } /* H5 primo della riga: niente spazio sopra */
}
/* block-image: Block/Default-Image (Figma 2077:906). Il contenitore ha solo il radius (20, --number-radius-surface): lo sfondo lo dà l'immagine. */
.block-image { margin-left: 0; margin-right: 0; }
.block-image__img { overflow: hidden; border-radius: var(--number-radius-surface); background: var(--image-bg, transparent); } /* --image-bg: colore dell'immagine; senza, trasparente */
.block-image__img img { display: block; width: 100%; height: auto; max-width: 100%; }
/* Block/Default-Image su più colonne (Figma 2118:3029). Colonne separate da 32px; la posizione del testo (Dx/Sx) segue l'ordine nel codice.
Proporzioni = frazioni di colonna come nei nomi dei frame Figma: 1/2+1/2 (class 1-1), 2/4+1/4+1/4 (2-1-1), 1/3+1/3+1/3 (1-1-1), 3/4+1/4 (3-1), 2/3+1/3 (2-1). Le classi sono i rapporti in ordine visivo; i 32px di gap non entrano nei rapporti. Titolo e didascalia sono facoltativi. */
.block-image--row { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--number-spacing-32); row-gap: var(--number-spacing-32); align-items: start; }
.block-image--row.block-image--2-1-1 { grid-template-columns: 2fr 1fr 1fr; }
.block-image--row.block-image--1-1-1 { grid-template-columns: 1fr 1fr 1fr; }
.block-image--row.block-image--2-1 { grid-template-columns: 2fr 1fr; }
.block-image--row.block-image--3-1 { grid-template-columns: 3fr 1fr; } /* Figma Column=2, Proportion=3/4+1/4, Position=Dx (2118:3173) */ /* immagine larga + testo (variante aggiunta: NON ANCORA NEL DS) */
.block-image--row > * { min-width: 0; margin: 0; }
.element-image { margin: 0; }
.block-image__text { display: flex; flex-direction: column; justify-content: center; gap: var(--number-spacing-08); } /* Title-Text: titolo e testo a 8px */
.block-image__title { margin: 0; font-family: var(--font-family-heading); font-size: 16px; line-height: 18px; font-weight: var(--number-font-weight-bold); color: var(--color-text-darker); } /* Heading/H6-Bold 16/18, Primary */
.block-image__text > p:not(.block-image__title) { margin: 0 0 var(--number-spacing-12); } /* 12px tra i paragrafi */
.block-image__text > :last-child { margin-bottom: 0; }
.band--dark .block-image__title, .band--dark .block-image__text { color: var(--color-text-lightest); }
@media (max-width: 767px) { .block-image--row.block-image--3-1 > .element-image { width: 184px; max-width: 100%; } /* icona: un quarto dello spazio, come su desktop */
}
@media (max-width: 767px) { .block-image--row, .block-image--row.block-image--2-1, .block-image--row.block-image--3-1, .block-image--row.block-image--2-1-1, .block-image--row.block-image--1-1-1 { grid-template-columns: 1fr; } } /* telefono: una colonna (NON NEL DS) */
/* Stroke=Si (Figma 2078:973): riquadro con cornice grigia (neutral/100, radius 20, padding 16) e immagine contenuta dentro con altri 10px di respiro; l'immagine resta proporzionata. */
.block-image--stroke .block-image__img { box-sizing: border-box; padding: var(--number-spacing-10, 10px); background: var(--image-bg, var(--color-background-lighter)); } /* Figma Element-Image Stroke=Si (2078:973): contenitore con padding 10, radius 20; l'immagine dentro ha radius 20 */
.band--surface .block-image--stroke .block-image__img, .band--surface-soft .block-image--stroke .block-image__img { background: var(--image-bg, var(--color-solid-white)); } /* regola: lo sfondo fa l'opposto della fascia (grigio su bianco, bianco su grigio) */
.block-image--stroke .block-image__img img { border-radius: var(--number-radius-md); } /* Figma Element-Image: il riquadro (contenitore dell'immagine) ha radius 20, l'immagine dentro radius 12 */
.block-image__caption { margin: var(--number-spacing-06) 0 0; padding-left: var(--number-spacing-16); font-family: var(--font-family-body); font-size: var(--number-font-size-sm); line-height: var(--number-line-height-caption); font-weight: 400; color: var(--color-text-darkest); } /* Figma Didascalia (2077:924, Caption/C1-Regular): Open Sans Regular 12/18, #222, 6px sotto l'immagine, rientro 16 */
.band--dark .block-image__caption { color: var(--color-text-lightest); } /* su fascia scura la didascalia è chiara (NON NEL DS) */
/* block-evidence: Block/Default-Title, Text (Figma 2077:926). Sfondo del riquadro: --block-bg (default --color-background-lighter). */
.block-evidence__content { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--number-spacing-08); padding: var(--number-padding-surface); border-radius: var(--number-radius-surface); background: var(--block-bg, var(--color-background-lighter)); color: var(--block-fg, var(--color-text-darker)); }
.block-evidence__content > p { margin: 0; color: inherit; }
.block-evidence__content strong { color: inherit; }
.block-evidence__title { font-weight: var(--number-font-weight-bold); }
/* card-phase: Card-Chip-Title-Text (Figma 2070:69) — riquadro grigio di una fase (Experience, Sviluppo, Design) */
.cols__col:has(> .card-phase) { display: flex; flex-direction: column; } /* la card riempie l'altezza della riga senza sforare col suo margine */
.card-phase { box-sizing: border-box; flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: var(--number-spacing-12); padding: var(--number-padding-surface); border-radius: var(--number-radius-surface); background: var(--color-background-lighter); }
.card-phase__title { margin: 0; }
.card-phase__text > :last-child { margin-bottom: 0; }
.card-phase__text > :first-child { margin-top: 0; }
/* chip "Fase (di)" sopra il titolo di una fase: 8px dal titolo */
.phase-label { display: flex; margin: 0 0 var(--number-spacing-08); }
.phase-label + :is(h2, h3) { margin-top: 0; }
.link-pill { padding: 8px 0; border-radius: 30px; background: var(--color-background-lighter); text-align: center; }
.link-pill p { margin: 0; }
.link-pill a { font-weight: var(--number-font-weight-bold); color: var(--color-text-darkest); }
.stack > :last-child { margin-bottom: 0; }
.lead > :last-child { margin-bottom: 0; }
@media (max-width: 767px) {
.cols__col, .cols__col--3, .cols__col--4, .cols__col--6, .cols__col--8, .cols__col--9, .cols__col--f1, .cols__col--f2, .cols__col--f3, .cols__col--f4 { grid-column: span 12; }
.cols--fifths { grid-template-columns: 1fr; }
.cols { row-gap: var(--number-space-sm); column-gap: 0; } /* 12 colonne con 32px di gap (352px) sforano il telefono */
/* Titolo (o Element-Title-Chip) in una colonna propria: il gap di riga (20px) si somma allo spazio sotto il titolo, lo tolgo. */
.cols__col:has(> :is(h3, h5, .element-title-chip):last-child):not(:last-child) + .cols__col:not(:has(> :is(h3, h5, .element-title-chip):first-child)) { margin-top: calc(-1 * var(--number-space-sm)); }
/* Regola testo + immagine su telefono: le colonne sono impilate, quindi vale per ogni colonna (non solo la 12). */
.cols__col:has(> :is(p, ul, ol, .lead, .stack):last-child) + .cols__col > .image-box:first-child,
.cols__col:has(> :is(p, ul, ol, .lead, .stack):last-child) + .cols__col > .space:first-child + .image-box,
.cols__col:has(> :is(p, ul, ol, .lead, .stack):nth-last-child(2) + .space:last-child) + .cols__col > .image-box:first-child,
.cols__col:has(> :is(p, ul, ol, .lead, .stack):nth-last-child(2) + .space:last-child) + .cols__col > .space:first-child + .image-box { margin-top: calc(var(--number-space-image-gap, var(--number-space-box-gap)) - var(--number-space-sm)); }
.cols__col:has(> :is(p, ul, ol, .lead, .stack):last-child) + .cols__col > .space:first-child:has(+ .image-box),
.cols__col:has(> :is(p, ul, ol, .lead, .stack):nth-last-child(2) + .space:last-child):has(+ .cols__col > :is(.image-box:first-child, .space:first-child + .image-box)) > .space:last-child,
.cols__col:has(> :is(p, ul, ol, .lead, .stack):nth-last-child(2) + .space:last-child) + .cols__col > .space:first-child:has(+ .image-box) { display: none; }
.cols__col:has(> .space:last-child):has(+ .cols__col > .image-box:first-child) > :is(p, ul, ol, .lead, .stack):nth-last-child(2) { margin-bottom: 0; }
.cols__col[data-follows-text] > .image-box:first-child { margin-top: calc(var(--number-space-heading-gap) - var(--number-space-sm)); }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}
/* Card-Stroke-Left (Figma 2082:1115): neutral/100 (surface), bordo sinistro 6px nel colore del brand, radius 20, padding 16, gap 4. */
.card-stroke-left { position: relative; overflow: hidden; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--number-spacing-04); padding: var(--number-padding-surface) var(--number-padding-surface) var(--number-padding-surface) calc(var(--number-padding-surface) + 6px); background: var(--color-background-lighter); border-radius: var(--number-radius-xl, 20px); color: var(--color-text-darker); } /* come prima: sfondo e padding invariati (16 + 6 di stroke a sinistra); cambia solo lo stroke, ora una barra 6px ritagliata dal raggio (Figma 2084:1172) */
.card-stroke-left::before, .element-quote::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--number-stroke-06, 6px); background: var(--card-stroke-left, var(--quote-color, var(--color-frisia-orange))); } /* Element/Border: barra di 6px a sinistra, a tutta altezza */
.card-stroke-left__title { margin: 0; color: var(--color-text-darkest); font-family: var(--font-family-heading); font-size: 16px; line-height: 18px; font-weight: 700; }
.card-stroke-left__text { font-size: 15px; line-height: 25px; }
.card-stroke-left__text p { margin: 0; }
.card-stroke-left__text p + p { margin-top: 12px; }
/* Card-Stroke-Left con Chip (Figma 2084:1172): testo a sinistra, Chip Large pieno a destra nel colore del bordo, centrato in verticale; gap 32, margine destro 16 */
.card-stroke-left--chip { flex-direction: row; align-items: center; gap: var(--number-spacing-32); }
.card-stroke-left__content { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--number-spacing-04); }
.card-stroke-left__chip { flex: 0 0 auto; background: var(--card-stroke-left); color: var(--color-text-lightest); }
.card-stroke-left--inverse .card-stroke-left__chip { background: var(--project-ultralight); color: var(--project-default); } /* Card-Stroke-Left, Aspect=Inverse (Figma 2315:2387): stroke e badge in color/ultralight del Project, testo del badge in color/default */ /* Badge Large · Brand · Solid (Figma 2125:3775): sfondo nel colore del progetto, testo bianco */
/* Block-Default-Evidence/Text preceduto da un testo (body): 6px sopra (regola per tutti i progetti; NON NEL DS) */
p:has(+ .block-evidence), ul:has(+ .block-evidence) { margin-bottom: 0; }
:is(p, ul, ol, .lead, .stack) + .block-evidence.image-box,
:is(p, ul, ol, .lead, .stack) + .space + .block-evidence.image-box { margin-top: var(--number-spacing-06); }
/* Block/Default- competitor (Figma 2082:1122): barra colorata (radius 20, padding 8 16 8 16, H6 bianco) + chip XLarge bianchi (filo neutral/100); 8px tra barra e chip e tra i chip; 16px tra due blocchi; 28px sopra il gruppo (NON NEL DS) */
.block-competitors { display: flex; flex-direction: column; gap: var(--number-spacing-08); }
.block-competitors__title { margin: 0; padding: var(--number-spacing-08) var(--number-spacing-16); border-radius: var(--number-radius-xl, 20px); background: var(--block-color, var(--color-frisia-orange)); color: var(--color-solid-white); font-family: var(--font-family-heading); font-size: 16px; line-height: 18px; font-weight: 700; }
.block-competitors__list { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--number-spacing-08); margin: 0; padding: 0; list-style: none; }
.block-competitors__list .badge { display: block; text-align: center; } /* Badge XLarge Light (Figma 2084:1147): i nomi a griglia di 5 non sono nel DS */
.block-competitors + .block-competitors { margin-top: var(--number-spacing-16); }
/* Gruppo competitor: 28px sopra (come un H5); sotto vale la distanza dell'elemento che segue (H5: 28px). NON NEL DS */
.band > .container:has(.block-competitors-group) { margin-top: 0; }
.block-competitors-group { margin-top: 28px; margin-bottom: 0; }
/* Card-Stroke-Left su fascia grigia: sfondo bianco (regola "su bianco 100, su grigio bianco") */
.band--surface .card-stroke-left { background: var(--color-solid-white); }
/* Distanza nelle griglie (righe e colonne): due sole misure.
--grid-gap-tight (8px): griglie di card, box e blocchi ripetuti (criteri, persona, emozioni, journey...).
--grid-gap-wide (32px): le card del Processo (.card-phase). NON NEL DS */
.cols:has(> .cols__col > :is(.card-stroke-left, .element-evidence, .card-evidence, .element-column, .box)) { column-gap: var(--grid-gap-tight); row-gap: var(--grid-gap-tight); }
.cols:has(> .cols__col > :is(.card-stroke-left, .element-evidence, .card-evidence, .element-column, .box)) > .cols__col { margin: 0; }
.cols:has(> .cols__col > :is(.card-stroke-left, .element-evidence, .card-evidence, .element-column, .box)) > .cols__col--12:has(> .space:only-child) { display: none; } /* niente righe-spaziatore tra le righe: bastano gli 8px */
.cols:has(> .cols__col > :is(.card-stroke-left, .element-evidence, .card-evidence, .element-column, .box)) > .cols__col--12 > .space:last-child { height: calc(var(--space, 20px) - var(--grid-gap-tight)); } /* il testo che precede mantiene la sua distanza */
.cols:has(> .cols__col > .card-phase) { column-gap: var(--grid-gap-wide); row-gap: var(--grid-gap-wide); }
/* Competitor: i chip si dividono la larghezza in 5 colonne uguali (anche un chip singolo ha la stessa larghezza); su telefono 2 colonne */
@media (max-width: 767px) { .block-competitors__list { grid-template-columns: repeat(2, 1fr); } }
/* Card-Full-Outcome (Figma 2086:1251): radius 20, padding 16, gap 16; semaforo di 3 pallini da 20px (gap 6, 2px dall'alto); titolo bold nel colore dello stato, testo Body 15/25, 4px tra titolo e testo.
Sfondo = inverso della fascia (fascia bianca -> neutral/100, fascia grigia -> bianco); pallini spenti = inverso dello sfondo della card. */
.card-outcome { --outcome-bg: var(--color-background-lighter); --outcome-off: var(--color-solid-white); box-sizing: border-box; display: flex; align-items: flex-start; gap: var(--number-spacing-16); padding: var(--number-spacing-16); border-radius: var(--number-radius-xl); background: var(--outcome-bg); color: var(--color-text-darker); }
.band--surface .card-outcome, .band--surface-soft .card-outcome { --outcome-bg: var(--color-solid-white); --outcome-off: var(--color-background-lighter); }
.card-outcome--weak { --outcome-color: var(--color-text-weak); --outcome-tint: var(--color-background-weak); }
.card-outcome--moderate { --outcome-color: var(--color-text-moderate); --outcome-tint: var(--color-background-moderate); }
.card-outcome--strong { --outcome-color: var(--color-text-strong); --outcome-tint: var(--color-background-strong); }
/* Icona di livello (Figma Element-Level): cerchio 26px con tinta al 10% del colore dello stato, asta verticale e cursore ad anello (in alto = Strong, al centro = Moderate, in basso = Weak) */
.card-outcome__icon { position: relative; flex: none; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 44px; height: 44px; padding-top: var(--number-spacing-02); color: var(--outcome-color); } /* Icon 44×44, padding-top 2 */
.card-outcome__icon::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--outcome-tint); opacity: .1; } /* tinta: cerchio 44 (Ellipse 1; il Rectangle radius 16 è nascosto), colore background/ a 10% */
.card-outcome__icon svg { position: relative; display: block; width: 24px; height: 24px; fill: currentColor; } /* level-cursor 24px */
.card-outcome__text { display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; gap: var(--number-spacing-04); }
.card-outcome__text > p { margin: 0; }
.card-outcome__title { font-weight: var(--number-font-weight-bold); color: var(--outcome-color); }
.card-outcome + .card-outcome { margin-top: var(--number-spacing-08); } /* 8px tra le card (NON NEL DS) */
/* Chip outline (Figma 2066:1895): sfondo surface neutral/100 senza bordo; su fascia grigia lo sfondo è bianco (regola dell'inverso, NON NEL DS) */
.band--surface .badge:not(.badge--solid):not(.badge--brand), .band--surface-soft .badge:not(.badge--solid):not(.badge--brand) { background: var(--color-solid-white); }
/* Element-Quote (Figma 2086:1300): bordo sinistro 6px, radius 20, padding 16, testo Lead 24/36 bold nello stesso colore. Disegnato con l'arancio Frisia: il colore si cambia con --quote-color. */
.element-quote { position: relative; overflow: hidden; box-sizing: border-box; margin: 0; padding: var(--number-spacing-16) var(--number-spacing-16) var(--number-spacing-16) calc(var(--number-spacing-16) + 6px); border-radius: var(--number-radius-xl, 20px); } /* come prima: padding invariato (16 + 6 di stroke a sinistra); cambia solo lo stroke, ora una barra 6px ritagliata dal raggio (Figma 2086:1300) */
.element-quote__text { margin: 0; font-family: var(--font-family-lead, var(--font-family-body)); font-size: 24px; line-height: 36px; font-weight: var(--number-font-weight-bold, 700); color: var(--quote-color, var(--color-frisia-orange)); }
/* Element-BulletText (Figma 2087:1314): pallino 8px (8px dall'alto) + testo H5 bold 18/24, gap 8. 8px tra una voce e l'altra (NON NEL DS) */
.element-bullet-text { display: flex; flex-direction: column; gap: var(--number-spacing-08); margin: 0; padding: 0; list-style: none; }
.element-bullet-text__item { display: flex; align-items: flex-start; gap: var(--number-spacing-08); margin: 0; }
.element-bullet-text__bullet { flex: none; width: 8px; height: 8px; margin-top: var(--number-spacing-08); border-radius: 50%; background: var(--color-text-darker); }
.element-bullet-text__text { flex: 1 1 0; min-width: 0; font-family: var(--font-family-heading); font-size: 18px; line-height: 24px; font-weight: var(--number-font-weight-bold, 700); color: var(--color-text-darker); }
/* Block-BulletText (Figma 2087:1323): riquadro surface (radius 20) con padding 16 sopra/sotto e 6 ai lati; le voci hanno 16px di padding laterale (testo a 22px dal bordo) e 16px tra loro. Su fascia grigia lo sfondo è bianco (regola dell'inverso). */
.block-bullet-text { box-sizing: border-box; padding: var(--number-spacing-16) var(--number-spacing-06); border-radius: var(--number-radius-xl, 20px); background: var(--color-background-lighter); }
.band--surface .block-bullet-text, .band--surface-soft .block-bullet-text { background: var(--color-solid-white); }
.block-bullet-text .element-bullet-text { gap: var(--number-spacing-16); }
.block-bullet-text .element-bullet-text__item { padding: 0 var(--number-spacing-16); }
/* Element-Evidence (Figma 2088:1341): 6px tra titolo e testo. Varianti: Light = sfondo inverso alla fascia (fascia bianca: neutral/100; fascia grigia: bianco); Dark = #222 con testo bianco; Brand = colore del brand (--evidence-bg) con testo scuro */
.element-evidence { gap: var(--number-spacing-06); }
.band--surface .element-evidence, .band--surface-soft .element-evidence { background: var(--color-solid-white); }
.element-evidence--dark, .band--surface .element-evidence--dark, .band--surface-soft .element-evidence--dark { background: var(--color-neutral-900); color: var(--color-solid-white); }
.element-evidence--brand, .band--surface .element-evidence--brand, .band--surface-soft .element-evidence--brand { background: var(--evidence-bg, var(--color-frisia-orange)); color: var(--color-solid-white); }
.element-evidence--black, .band--surface .element-evidence--black, .band--surface-soft .element-evidence--black { background: var(--color-solid-black); color: var(--color-solid-white); } /* Element-Evidence Color=Black (Figma 2145:4331): color/solid/black */
.cols__col:has(> .element-evidence:only-child) { display: flex; flex-direction: column; }
.cols__col > .element-evidence:only-child { flex: 1 1 auto; }
.element-evidence__title, .element-evidence__text > p, .element-evidence__text strong { color: inherit; }
/* Pagina componenti: tabella delle scale colore */
.swatch-table { overflow-x: auto; }
.swatch-table table { border-collapse: separate; border-spacing: 6px; font-size: 11px; }
.swatch-table th { font-weight: 700; text-align: left; padding: 0 4px; }
.swatch-table td { text-align: center; }
.swatch-table .swatch { display: block; width: 72px; height: 32px; border-radius: 6px; margin-bottom: 4px; }
.swatch-table code { font-size: 10px; }
/* Card-Stroke-Left, Content=Bullet (Figma 2084:1172 / 2090:1518): elenco puntato con rientro 22,5px; il colore dello stroke si passa con --card-stroke-left (di norma lo step 400 di una scala colore) */
.card-stroke-left__text ul { margin: 0; padding-left: 22.5px; list-style: disc; }
.card-stroke-left__text li { margin: 0; }
.cols__col:has(> .card-stroke-left:only-child) { display: flex; flex-direction: column; }
.cols__col > .card-stroke-left:only-child { flex: 1 1 auto; } /* card della stessa riga: stessa altezza */
/* Card-Evidence (Figma 2091:1546): card radius 20, padding 16, gap 6; titolo (facoltativo) Body bold 15/25, testo Body 15/25. Varianti: Light = sfondo inverso alla fascia (bianca: neutral/100; grigia: bianco) · Dark = #222 con testo bianco · Brand = colore del brand (--evidence-bg) con testo scuro */
.card-evidence { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--number-spacing-06); padding: var(--number-spacing-16); border-radius: var(--number-radius-xl, 20px); background: var(--color-background-lighter); color: var(--color-text-darker); font-size: 14px; line-height: 24px; }
.card-evidence > p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
.card-evidence__title { font-weight: var(--number-font-weight-bold, 700); }
.card-evidence strong { color: inherit; }
.band--surface .card-evidence, .band--surface-soft .card-evidence { background: var(--color-solid-white); }
.card-evidence--dark, .band--surface .card-evidence--dark, .band--surface-soft .card-evidence--dark { background: var(--color-neutral-900); color: var(--color-solid-white); }
.card-evidence--brand, .band--surface .card-evidence--brand, .band--surface-soft .card-evidence--brand { background: var(--evidence-bg, var(--color-frisia-orange)); color: var(--color-solid-white); }
.cols__col:has(> .card-evidence:only-child) { display: flex; flex-direction: column; }
.cols__col > .card-evidence:only-child { flex: 1 1 auto; }
/* Element-Column (Figma 2092:1660): 4 Card-Evidence impilate senza spazio; angoli solo sopra (prima) e sotto (ultima) */
.element-column { display: flex; flex-direction: column; gap: 0; }
.element-column > .card-evidence { border-radius: 0; }
.element-column > .card-evidence:first-child { border-radius: var(--number-radius-xl, 20px) var(--number-radius-xl, 20px) 0 0; }
.element-column > .card-evidence:last-child { border-radius: 0 0 var(--number-radius-xl, 20px) var(--number-radius-xl, 20px); }
.card-evidence--secondary, .band--surface .card-evidence--secondary, .band--surface-soft .card-evidence--secondary { background: var(--evidence-bg, var(--color-frisia-blue)); color: var(--color-solid-white); }
.card-evidence__list { margin: 0; padding-left: 21px; list-style: decimal; color: inherit; }
.card-evidence__list li { margin: 0; padding: 0; font-size: inherit; line-height: inherit; }
.cols:has(> .cols__col > .element-column) { column-gap: var(--grid-gap-tight); }
/* Card-Stroke-Left impilate nella stessa colonna: 8px tra le card (--grid-gap-tight), come nelle righe di card */
.card-stroke-left + .card-stroke-left { margin-top: var(--grid-gap-tight); }
.card-phase__text:empty { display: none; } /* card di fase con solo titolo (versione sintetica) */
/* Block-Title-Text-Image (Figma 2101:1888): titolo H3; sotto, testo a sinistra e immagine 167×167 a destra, 32px in mezzo; 12px tra titolo e riga */
.block-title-text-image { display: flex; flex-direction: column; gap: var(--number-spacing-12); }
.block-title-text-image > h3 { margin: 0; }
.block-title-text-image__row { display: flex; align-items: flex-start; gap: var(--number-spacing-32); }
.block-title-text-image__text { flex: 1 1 0; min-width: 0; }
.block-title-text-image__text > p { margin: 0 0 var(--number-spacing-12); }
.block-title-text-image__text > p:last-child { margin-bottom: 0; }
.block-title-text-image__image { flex: none; width: 167px; height: 167px; }
.block-title-text-image__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) { .block-title-text-image__row { flex-direction: column; } }
/* Block-Title-Text-Image (Figma 2101:1888, aggiornato): il titolo sta nella colonna del testo (167px + 32px di gap riservati all'immagine) */
@media (min-width: 768px) { .block-title-text-image > h3 { max-width: calc(100% - 167px - var(--number-spacing-32)); } }
/* Block-Default-Crosslink: 32px dal contenuto che lo precede (il blocco ha già 32px di padding sopra) */
.container:has(> .cols > .cols__col > .block-crosslink) { margin-top: 0; }
/* ===== PROVA: scala titoli proporzionale (solo pagine con body.spacing-v2) =====
Sotto = 1/3 dell'interlinea; sopra = 2× l'interlinea. Lo spazio sopra e sotto lo fissa il titolo: se c'è un titolo vince il suo valore.
Inizio e fine fascia: nessun margine del titolo (vale il padding di fascia). H1 invariato (72px sotto, Figma Header-Project). */
body.spacing-v2 .cols__col > h2, body.spacing-v2 .text-block > h2 { margin-top: var(--number-space-title-h2-above); margin-bottom: var(--number-space-title-h2-below); }
body.spacing-v2 .cols__col:has(> h2:last-child):not(:last-child) { padding-bottom: var(--number-space-title-h2-below); }
body.spacing-v2 .cols__col > h3, body.spacing-v2 .text-block > h3 { margin-top: var(--number-space-title-h3-above); margin-bottom: var(--number-space-title-h3-below); }
body.spacing-v2 .cols__col:has(> h3:last-child):not(:last-child) { padding-bottom: var(--number-space-title-h3-below); }
body.spacing-v2 .cols__col > h4, body.spacing-v2 .text-block > h4 { margin-top: var(--number-space-title-h4-above); margin-bottom: var(--number-space-title-h4-below); }
body.spacing-v2 .cols__col:has(> h4:last-child):not(:last-child) { padding-bottom: var(--number-space-title-h4-below); }
body.spacing-v2 .cols__col > h5, body.spacing-v2 .text-block > h5 { margin-top: var(--number-space-title-h5-above); margin-bottom: var(--number-space-title-h5-below); }
body.spacing-v2 .cols__col:has(> h5:last-child):not(:last-child) { padding-bottom: var(--number-space-title-h5-below); }
body.spacing-v2 .cols__col > h6, body.spacing-v2 .text-block > h6 { margin-top: var(--number-space-title-h6-above); margin-bottom: var(--number-space-title-h6-below); }
body.spacing-v2 .cols__col:has(> h6:last-child):not(:last-child) { padding-bottom: var(--number-space-title-h6-below); }
body.spacing-v2 .cols > .cols__col:first-child > :is(h2, h3, h4, h5, h6, .element-title-chip):first-child { margin-top: 0; }
body.spacing-v2 .cols__col > :is(h1, h2, h3, h4, h5) + :is(h2, h3, h4, h5, h6), body.spacing-v2 .text-block > :is(h1, h2, h3, h4, h5) + :is(h2, h3, h4, h5, h6) { margin-top: 0; } /* titolo dopo un titolo: vale lo spazio sotto il primo */
body.spacing-v2 .cols__col > .phase-label + :is(h2, h3) { margin-top: 0; }
body.spacing-v2 .cols__col > h5 + h3, body.spacing-v2 .text-block > h5 + h3 { margin-top: var(--number-space-title-h3-above); } /* H3 dopo l'H5 di testata fase: vale lo spazio sopra dell'H3 (56px) */
body.spacing-v2 .cols__col > .space:has(+ :is(h2, h3, h4, h5, h6)),
body.spacing-v2 .cols__col:has(+ .cols__col > :is(h2, h3, h4, h5, h6, .element-title-chip):first-child) > .space:last-child { display: none; }
body.spacing-v2 :is(p, ul, ol, .lead, .stack, .box, .image-box):has(+ :is(h2, h3, h4, h5, h6)) { margin-bottom: 0; }
body.spacing-v2 .band > .container + .container:has(> .cols > .cols__col:first-child > :is(h2, h3, h4, h5, h6, .element-title-chip):first-child) { margin-top: 0; }
body.spacing-v2 .band > .container + .container:has(> .cols > .cols__col:first-child > :is(h2, h3, h4, h5, h6, .element-title-chip):first-child) > .cols > .cols__col:first-child > h2:first-child { margin-top: var(--number-space-title-h2-above); }
body.spacing-v2 .band > .container + .container:has(> .cols > .cols__col:first-child > :is(h2, h3, h4, h5, h6, .element-title-chip):first-child) > .cols > .cols__col:first-child > h3:first-child { margin-top: var(--number-space-title-h3-above); }
body.spacing-v2 .band > .container + .container:has(> .cols > .cols__col:first-child > :is(h2, h3, h4, h5, h6, .element-title-chip):first-child) > .cols > .cols__col:first-child > h4:first-child { margin-top: var(--number-space-title-h4-above); }
body.spacing-v2 .band > .container + .container:has(> .cols > .cols__col:first-child > :is(h2, h3, h4, h5, h6, .element-title-chip):first-child) > .cols > .cols__col:first-child > h5:first-child { margin-top: var(--number-space-title-h5-above); }
body.spacing-v2 .band > .container + .container:has(> .cols > .cols__col:first-child > :is(h2, h3, h4, h5, h6, .element-title-chip):first-child) > .cols > .cols__col:first-child > h6:first-child { margin-top: var(--number-space-title-h6-above); }
body.spacing-v2 .band > .container + .container:has(> .cols > .cols__col:first-child > :is(h2, h3, h4, h5, h6, .element-title-chip):first-child) > .cols > .cols__col:first-child > :is(h2):first-child { margin-top: var(--number-space-title-h2-above); }
body.spacing-v2 .cols__col > :is(h2, h3, h4, h5, h6) + .space { display: none; } /* niente spazi vuoti dopo un titolo: lo spazio sotto lo fissa il titolo */
body.spacing-v2 .cols__col > :is(h2, h3, h4, h5, h6):last-child { margin-bottom: 0; } /* titolo ultimo della colonna: lo spazio sotto è il padding della colonna (non si somma al margine) */
body.spacing-v2 .cols:has(> .cols__col > .card-stroke-left) > .cols__col:has(> h3:last-child):not(:last-child) { padding-bottom: calc(var(--number-space-title-h3-below) - var(--grid-gap-tight)); } /* il gap di riga (8px) fa già parte dello spazio sotto */
/* Block-Evidence-Text (Figma 2106:2215): frase-titolo H5 (Montserrat Bold 18/24, Primary), sopra 28px, sotto 10px.
Regola: lo spazio sopra lo determina l'elemento che lo precede; lo spazio sotto è del blocco (10px), non del font. */
.block-evidence-text { padding: 20px 0 10px; margin: 0; } /* Figma 2106:2215: sopra 28 · sotto 10 */ /* i 16px laterali li dà già il container (800 − 32) */
.block-evidence-text > h5 { margin: 0; padding: 0; font-size: 18px; line-height: 24px; color: var(--color-text-darker); } /* Primary #222 */
body.spacing-v2 .block-evidence-text + .space { display: none; } /* sotto il blocco restano i 10px del blocco */
/* PROVA (solo Frisia sintetica): titoli in Primary #222222 invece del nero (NON NEL DS fino a conferma). :where() lascia vincere i colori dei componenti (es. testi bianchi). */
:where(body.spacing-v2.titles-primary) :is(h1, h2, h3, h4, h5, h6) { color: var(--color-text-darker); }
body.spacing-v2.titles-primary .card-stroke-left__title { color: var(--color-text-darker); }
/* PROVA (solo Frisia sintetica): regola Body (Figma Rules 2107:2582).
1) dopo la fine di un Body, ciò che segue sta a 20px, se non ha un valore proprio; i paragrafi dello stesso blocco di testo restano a 12px (spazio tra paragrafi).
2) se segue un titolo vale lo spazio sopra il titolo (già sopra). 3) se segue un Block/Element valgono i suoi spazi. 4) dentro un componente valgono le regole del componente.
Gli spazi vuoti da 20px dopo un paragrafo sono eliminati. */
body.spacing-v2 {--space-after-body: 20px;}
body.spacing-v2 .cols__col > p + .space { display: none; }
body.spacing-v2 .cols__col > p:has(+ :not(p, .space, h1, h2, h3, h4, h5, h6, .block-evidence-text, .block-crosslink, .block-closer, .phase-label)),
body.spacing-v2 .cols__col > p:has(+ .space + :not(p, h1, h2, h3, h4, h5, h6, .block-evidence-text, .block-crosslink, .block-closer)) { margin-bottom: var(--space-after-body); }
body.spacing-v2 .cols { row-gap: 0; } /* la distanza tra colonne-riga la danno gli elementi (20px dopo il Body), non il gap: così è uguale su desktop e telefono */
body.spacing-v2 .cols > .cols__col:not(:last-child) > p:last-child,
body.spacing-v2 .cols > .cols__col:not(:last-child) > p:nth-last-child(2):has(+ .space:last-child) { margin-bottom: var(--space-after-body); }
body.spacing-v2 .cols:has(> .cols__col > :is(.card-stroke-left, .element-evidence, .card-evidence, .element-column, .box)) > .cols__col:not(:last-child) > p:last-child,
body.spacing-v2 .cols:has(> .cols__col > :is(.card-stroke-left, .element-evidence, .card-evidence, .element-column, .box)) > .cols__col:not(:last-child) > p:nth-last-child(2):has(+ .space:last-child) { margin-bottom: calc(var(--space-after-body) - var(--grid-gap-tight)); } /* qui le righe hanno già 8px di gap */
body.spacing-v2 .container:has(+ .container > .cols > .cols__col:first-child > :is(h2, h3, h4, h5, h6):first-child) > .cols > .cols__col:last-child > :is(p:last-child, p:nth-last-child(2):has(+ .space:last-child)) { margin-bottom: 0; } /* paragrafo prima di un titolo in un altro container: vale lo spazio sopra il titolo */
body.spacing-v2 .cols > .cols__col:not(:last-child):has(+ .cols__col > .card-outcome:first-child) > p:last-child,
body.spacing-v2 .cols > .cols__col:not(:last-child):has(+ .cols__col > .card-outcome:first-child) > p:nth-last-child(2):has(+ .space:last-child) { margin-bottom: var(--space-after-body); } /* qui il gap di riga è 0: i 28px sono tutti del paragrafo */
/* Block-Evidence-Text: regola gerarchica con i titoli: se è adiacente a un titolo vale lo spazio del titolo (non si somma). Dopo un Body vale il suo padding (28), quindi il margine del paragrafo è 0. */
:is(h1, h2, h3, h4, h5, h6) + .block-evidence-text { padding-top: 0; }
body.spacing-v2 p:has(+ .block-evidence-text) { margin-bottom: 0; }
body.spacing-v2 .block-evidence-text:has(+ :is(h2, h3, h4, h5, h6)) { padding-bottom: 0; }
/* Block-Evidence-Text aggiornato (Figma 2106:2215): sopra 20px, sotto 10px. Regole Block: lo spazio lo dà il componente; dopo un Body il margine del paragrafo si azzera; dopo un Heading vince il padding del titolo. */
:is(p, ul, ol):has(+ .block-evidence-text) { margin-bottom: 0; }
:is(h1, h2, h3, h4, h5, h6) + .block-evidence-text { padding-top: 0; }
/* Heading rule (Figma Rules): il padding del titolo sostituisce quello dei componenti che lo precedono: un Block-Evidence-Text seguito da un titolo non aggiunge i suoi 10px. */
.block-evidence-text:has(+ :is(h1, h2, h3, h4, h5, h6)) { padding-bottom: 0; }
body.spacing-v2 .container:has(> .cols > .cols__col:last-child > .block-evidence-text:last-child):has(+ .container > .cols > .cols__col:first-child > :is(h2, h3, h4, h5, h6):first-child) .block-evidence-text { padding-bottom: 0; }
body.spacing-v2 .cols > .cols__col:has(+ .cols__col > :is(h2, h3, h4, h5, h6, .block-evidence-text):first-child, + .cols__col > .space:first-child + :is(h2, h3, h4, h5, h6, .block-evidence-text)) > p:last-child { margin-bottom: 0; } /* Body a fine colonna seguito da un titolo/Block nella colonna dopo: vale lo spazio del titolo/Block */
body.spacing-v2 .container:has(.block-competitors-group) .block-competitors-group { margin-top: var(--space-after-body); } /* dopo il Body: 20px (regola Body; il gruppo competitor non ha un valore proprio nel Figma) */
/* Regola 3/6: un Body seguito da Card-Phase non aggiunge i suoi 20px: vale lo spazio del componente (64px). */
body.spacing-v2 .cols > .cols__col:has(+ .cols__col > .card-phase:first-child) > p:last-child { margin-bottom: 0; }
/* Regola 8 (PROVA, Figma Rules / Priorità dei padding): un Body che segue un componente senza padding proprio ha 28px sopra.
Non vale dopo un altro Body, dopo un Heading o dentro un componente. Componenti con padding proprio (Evidence-Text, Crosslink, Closer, Card-Phase) restano fuori. */
body.spacing-v2 { --body-above: 28px; }
body.spacing-v2 :is(.box, .block-competitors-group, .card-stroke-left, .card-outcome, .element-evidence, .element-column, .block-evidence, .block-image, .badge-list) + p,
body.spacing-v2 :is(.box, .block-competitors-group, .card-stroke-left, .card-outcome, .element-evidence, .element-column, .block-evidence, .block-image, .badge-list) + .space + p { margin-top: var(--body-above); }
body.spacing-v2 :is(.box, .block-competitors-group, .card-stroke-left, .card-outcome, .element-evidence, .element-column, .block-evidence, .block-image) + .space:has(+ p) { display: none; }
body.spacing-v2 .cols__col:has(> :is(.box, .block-competitors-group, .card-stroke-left, .card-outcome, .element-evidence, .element-column, .block-evidence, .block-image):last-child) + .cols__col > p:first-child,
body.spacing-v2 .cols__col:has(> :is(.box, .block-competitors-group, .card-stroke-left, .card-outcome, .element-evidence, .element-column, .block-evidence, .block-image):last-child) + .cols__col > .space:first-child + p { margin-top: calc(var(--body-above) - var(--grid-gap-tight)); }
body.spacing-v2 .cols__col:has(> :is(.box, .block-competitors-group, .card-stroke-left, .card-outcome, .element-evidence, .element-column, .block-evidence, .block-image):last-child) + .cols__col > .space:first-child:has(+ p) { display: none; }
body.spacing-v2 .container:has(> .cols > .cols__col:last-child > :is(.box, .block-competitors-group, .card-stroke-left, .card-outcome, .element-evidence, .element-column, .block-evidence, .block-image):last-child) + .container:has(> .cols > .cols__col:first-child > p:first-child) { margin-top: 0; }
body.spacing-v2 .container:has(> .cols > .cols__col:last-child > :is(.box, .block-competitors-group, .card-stroke-left, .card-outcome, .element-evidence, .element-column, .block-evidence, .block-image):last-child) + .container > .cols > .cols__col:first-child > p:first-child { margin-top: var(--body-above); }
/* LEAD (Figma 2107:2582) - PROVA, solo Frisia sintetica: padding sotto 32px, sopra nessuno, Primary #222.
Priorità: Heading > Lead > Card = Block = Element > Body. */
body.spacing-v2 .band:not(.band--dark) .lead, body.spacing-v2 .band:not(.band--dark) .lead p { color: var(--color-text-darker); }
body.spacing-v2 .lead { margin-top: 0; } /* sotto: 32px da --number-space-lead-gap */
body.spacing-v2 .lead:has(+ :is(h1, h2, h3, h4, h5, h6)),
body.spacing-v2 .lead:has(+ .space + :is(h1, h2, h3, h4, h5, h6)) { margin-bottom: 0; } /* vince il padding del Heading */
body.spacing-v2 .lead + :is(.block-evidence-text, .box, .card-stroke-left, .card-outcome, .element-evidence, .element-column, .block-evidence, .block-competitors-group) { margin-top: 0; padding-top: 0; } /* vince il padding del Lead */
/* Header-Project (Figma 2065:1783): chip small, H1 con 4px di padding sopra (dichiarato nel componente) */
.project-header__label + h1 { padding-top: var(--number-spacing-04); }
/* CARD-PHASE (Figma 2070:69): nessun padding proprio, quindi dopo il Body valgono i 28px (regola 8). PROVA, solo body.spacing-v2.
Prima: 32 (card-gap) + 32 (row-gap) = 64. Ora row-gap 0, 28 sopra la prima card, 32 tra card impilate su telefono. */
body.spacing-v2 .cols:has(> .cols__col > .card-phase) { row-gap: 0; }
body.spacing-v2 .cols__col:has(> :is(p, ul, ol, .lead, .stack):last-child) ~ .cols__col > .card-phase:first-child { margin-top: var(--body-above); }
@media (max-width: 767px) {
body.spacing-v2 .cols__col:has(> .card-phase) ~ .cols__col:has(> .card-phase) { margin-top: var(--grid-gap-wide); }
body.spacing-v2 .cols__col:has(> :is(p, ul, ol, .lead, .stack):last-child) ~ .cols__col:has(> .card-phase) ~ .cols__col > .card-phase:first-child { margin-top: 0; }
}
/* Body prima di un titolo nella colonna successiva, con lo spazio vuoto in mezzo: vince il padding del Heading (nessuna somma). PROVA, solo body.spacing-v2 */
body.spacing-v2 .cols__col:has(+ .cols__col > :is(h2, h3, h4, h5, h6, .block-evidence-text):first-child) > p:has(+ .space:last-child) { margin-bottom: 0; }
/* Block-Bullet-Text (Figma: nessun padding proprio): niente margine ereditato da .image-box; dopo un Body valgono i 20px sotto del Body. PROVA, solo body.spacing-v2 */
body.spacing-v2 .cols__col > .block-bullet-text.image-box { margin-top: var(--space-after-body) !important; } /* 20px dal Body (!important: batte le regole testo+immagine, 32px) */
/* Body prima di un Block-Image (.image-box): non si somma al padding del blocco (32px testo+immagine). PROVA, solo body.spacing-v2 */
body.spacing-v2 .cols__col > p:has(+ .image-box),
body.spacing-v2 .cols__col > p:has(+ .space + .image-box) { margin-bottom: 0; }
@media (min-width: 768px) {
body.spacing-v2 .cols__col:has(+ .cols__col > :is(.image-box:first-child, .space:first-child + .image-box)) > p:last-child { margin-bottom: 0; }
}
/* BLOCK-IMAGE (Figma Rules, sezione Image): 28px sopra e sotto, nessun altro padding. PROVA, solo body.spacing-v2.
Heading vicino: vale il Heading. Body vicino: vale il Block-Image (28). Card/Block/Element vicini: vale il padding del componente, in conflitto il seguente.
Il padding non si somma: il Block-Image non ha mai margine verso un componente con padding proprio (Crosslink, Closer). */
body.spacing-v2 { --number-space-image-gap: 28px; }
body.spacing-v2 .cols__col > .block-image { margin-top: var(--number-space-image-gap); margin-bottom: 0; }
body.spacing-v2 .cols__col > .block-image + .space { display: none; }
/* Heading vicino: vale il padding del Heading (nessuna somma) */
body.spacing-v2 .cols__col > :is(h1, h2, h3, h4, h5, h6) + .block-image,
body.spacing-v2 .cols__col:has(> :is(h1, h2, h3, h4, h5, h6):last-child) + .cols__col > .block-image:first-child,
body.spacing-v2 .cols__col:has(> :is(h1, h2, h3, h4, h5, h6):last-child) + .cols__col > .space:first-child + .block-image { margin-top: 0; }
/* Block-Image dopo una Card-Phase: 28px (nessun padding proprio della card) */
body.spacing-v2 .cols__col:has(> .card-phase:last-child) + .cols__col > .block-image:first-child,
body.spacing-v2 .cols__col:has(> .card-phase:last-child) + .cols__col > .space:first-child + .block-image { margin-top: var(--number-space-image-gap); }
/* Block-Image seguito da Block-Evidence o da un altro Block-Image: 28px (stesso padding) */
body.spacing-v2 .block-image + .block-evidence { margin-top: var(--number-space-image-gap); }
body.spacing-v2 .cols__col:has(> .block-image:last-child) + .cols__col > .block-evidence:first-child { margin-top: var(--number-space-image-gap); }
/* Block-Image prima di Crosslink/Closer: vale il padding del componente */
body.spacing-v2 .cols__col:has(+ .cols__col > :is(.block-crosslink, .block-closer):first-child) > .block-image:last-child { margin-bottom: 0; }
body.spacing-v2 .container:has(> .cols > .cols__col:last-child > .block-image:last-child) + .container > .cols > .cols__col:first-child > .block-evidence:first-child { margin-top: var(--number-space-image-gap); }
@media (max-width: 767px) { /* su telefono le regole testo+immagine (8px) non valgono: il Block-Image ha sempre 28px */
body.spacing-v2 .cols__col:has(> :is(p, ul, ol, .lead, .stack):nth-last-child(2) + .space:last-child) + .cols__col > .space:first-child + .block-image,
body.spacing-v2 .cols__col:has(> :is(p, ul, ol, .lead, .stack):last-child) + .cols__col > .block-image:first-child,
body.spacing-v2 .cols__col:has(> :is(p, ul, ol, .lead, .stack):nth-last-child(2) + .space:last-child) + .cols__col > .block-image:first-child,
body.spacing-v2 .cols__col[data-follows-text] > .block-image:first-child { margin-top: var(--number-space-image-gap); }
}
/* Header-Project Layout=Compact (Figma 2119:3208) */
.project-header--compact .project-header__title-row { margin-bottom: var(--number-spacing-32); }
.project-header--compact .project-header__label { margin-bottom: var(--number-spacing-04); }
.project-header--compact .element-project-info { padding-bottom: 0; }
.project-header--compact .element-project-info + .element-project-info { margin-top: var(--number-spacing-28, 28px); }
.project-header--compact .project-header__body { margin-top: var(--number-spacing-32); }
@media (max-width: 767px) { .project-header--compact .project-header__details .cols__col + .cols__col { margin-top: var(--number-spacing-28, 28px); } }
/* Chip pieno su fascia scura: invertito (NON NEL DS, da definire in Figma) */
.band--dark .badge--solid { background: var(--color-solid-white); color: var(--color-text-darker); }
.block-image--icons .element-image { width: 184px; max-width: 100%; } /* coppia di icone Report / Wireframe (dimensione NON NEL DS, come l'icona 3+1) */
/* Text-Button (Figma 2216:3580): Body Bold 15/25, colore Project default, over Project dark; freccia 24px a 4px dal testo (facoltativa) */
.text-button { display: inline-flex; align-items: center; gap: var(--number-spacing-04); font-family: var(--font-family-body); font-size: var(--number-font-size-md, 15px); font-weight: var(--number-font-weight-bold); line-height: 25px; color: var(--project-default); text-decoration: none; cursor: pointer; transition: color var(--number-duration-default) ease; }
.text-button--h6 { font-family: var(--font-family-heading); font-size: var(--number-font-size-heading-6); line-height: var(--number-line-height-heading-6); } /* Style=H6: Heading/H6-Bold Montserrat 16/18 */
.text-button--h5 { font-family: var(--font-family-heading); font-size: var(--number-font-size-heading-5); line-height: var(--number-line-height-heading-5); } /* Style=H5: Heading/H5-Bold Montserrat 18/24 */
.text-button:hover, .text-button:focus-visible { color: var(--project-dark); }
.text-button__icon { flex: none; display: block; width: 24px; height: 24px; fill: currentColor; }
/* Link di testo: colore Project (arancio in M+M), senza sottolineatura; over = Project dark */
a.text-link, .band--dark a.text-link { color: var(--project-default); text-decoration: none; } /* Text-Link (Figma 2141:4215): Default #ff8200, senza sottolineatura */
a.text-link:hover, .band--dark a.text-link:hover { color: var(--project-dark); } /* Over: Project dark (Figma Text-Link aggiornato: color/dark, arancio 800 #b35b00 in M+M) */
/* Caption (Figma: 12/18, colore tertiary) usata per le note a piè di testo */
.text-caption { font-size: var(--number-font-size-sm); line-height: var(--number-line-height-caption); color: var(--color-text-lighter); }
.band--dark .text-caption { color: var(--color-text-lighter); }
.text-caption--darker { color: var(--color-neutral-600); } /* nota dell'impersonificazione: leggermente più scura */
/* Icone Report / Wireframe (Step 4): 5 colonne uguali, icone nella 2ª e nella 4ª, titolo H6 sotto */
.icon-row { display: grid; grid-template-columns: repeat(5, 1fr); column-gap: var(--number-spacing-32); align-items: start; }
.icon-row__item { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--number-spacing-08, 8px); text-align: center; }
.icon-row__item img { display: block; width: 100%; height: auto; }
.icon-row__item h6 { margin: 0; }
@media (max-width: 767px) { .icon-row { grid-template-columns: 1fr 1fr; } .icon-row > div { display: none; } }
/* Body → Block-Evidence: 20px (il Block-Evidence non ha padding proprio; vale lo spazio sotto il Body) */
body.spacing-v2 :is(p, ul, ol, .stack) + .block-evidence.image-box,
body.spacing-v2 :is(p, ul, ol, .stack) + .space + .block-evidence.image-box { margin-top: var(--space-after-body); }
/* Block-Fase + Card-Fase (Figma 2119:3417): "Fase N" nel 1/5 sinistro, titolo centrato nei 4/5, sotto le card dello step */
.block-fase { display: flex; flex-direction: column; gap: 10px; }
.block-fase__head, .block-fase__content { display: grid; grid-template-columns: 20% minmax(0, 1fr); column-gap: var(--number-spacing-32); align-items: center; }
.block-fase__content { align-items: start; }
.block-fase__cards { grid-column: 2; display: flex; gap: var(--number-spacing-32); }
.block-fase__label, .block-fase__title { margin: 0; }
.block-fase__area { display: flex; align-items: center; justify-content: center; padding: 4px 16px; margin-bottom: 10px; background: var(--color-background-lighter); border-radius: 20px; }
.block-fase__area h6 { margin: 0; text-align: center; }
.block-fase__title { text-align: center; }
.card-fase { box-sizing: border-box; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--number-spacing-12); padding: var(--number-spacing-16); border-radius: var(--number-radius-xl, 20px); background: var(--color-background-lighter); }
.card-fase__text > :first-child { margin-top: 0; } .card-fase__text > :last-child { margin-bottom: 0; }
body.spacing-v2 .block-fase { margin-top: var(--body-above); }
body.spacing-v2 .block-fase + .block-fase { margin-top: var(--body-above); }
@media (max-width: 767px) {
.block-fase__head, .block-fase__content { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
.block-fase__title { text-align: left; }
.block-fase__cards { grid-column: 1; flex-direction: column; gap: 10px; }
.block-fase__content { margin-top: 0; }
}
/* Band-Section (Figma 2119:3469): "Fase N" nel 1/5, titolo nei 4/5, Lead sotto a 10px */
.band-section { display: flex; flex-direction: column; gap: 10px; }
.band-section__head, .band-section__content { display: grid; grid-template-columns: 20% minmax(0, 1fr); column-gap: var(--number-spacing-32); align-items: center; }
.band-section__content { align-items: start; }
.band-section__label, .band-section__title { margin: 0; color: var(--color-solid-white); }
.band-section__title { grid-column: 2; }
.band-section__content .lead { grid-column: 2; margin: 0; }
@media (max-width: 767px) {
.band-section__head, .band-section__content { grid-template-columns: minmax(0, 1fr); }
.band-section__title, .band-section__content .lead { grid-column: 1; }
}
/* Estesa: contenuto aggiuntivo nella fascia di fase (sotto il Lead, nei 4/5) e griglie di etichette (provvisorie, NON NEL DS) */
.band-section__extra { grid-column: 2; margin-top: var(--body-above, 28px); }
.band-section__extra p { margin: 0 0 var(--number-space-paragraph, 12px); }
.band-section__extra p:last-child { margin-bottom: 0; }
.label-grid { display: grid; gap: 10px; }
.label-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.label-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.label-grid .block-evidence, .label-grid .card-stroke-left, .label-grid .card-phase { margin: 0 !important; }
.label-grid__text { text-align: center; }
body.spacing-v2 .label-grid { margin-top: var(--space-after-body); }
body.spacing-v2 .label-grid + p { margin-top: var(--body-above); }
@media (max-width: 767px) { .label-grid--3, .label-grid--2 { grid-template-columns: minmax(0, 1fr); } .band-section__extra { grid-column: 1; } }
/* Fascia contatto in versione chiara (pagina Contattami): testi neri, indirizzo e icona copia scuri */
.contact-cta--light .contact-cta__email { color: var(--color-text-darker); }
.contact-cta--light .copy-button:hover, .contact-cta--light .copy-button:focus-visible { color: var(--color-interaction-primary-over); }
.contact-cta--light .copy-button.is-copied { color: var(--color-text-darkest); }
/* Hero con dissolvenza del velo (Contattami): scrollando, il velo passa dal nero all'80% al bianco al 100% e l'immagine resta sotto; non sfuma l'intera hero */
.hero--veil-white { opacity: 1; }
.hero--veil-white .hero__overlay { background: color-mix(in srgb, rgba(0, 0, 0, 0.8) calc(var(--hero-fade, 1) * 100%), var(--color-solid-white)); }
/* Contattami: l'hero resta bloccata (fixed) per tutta la pagina, il contenuto le scorre sopra anche se la pagina è corta */
.hero--veil-white { position: fixed; top: 0; left: 0; right: 0; width: 100%; }
.hero--veil-white ~ .contact-cta--light { margin-top: max(100vh, 560px); margin-top: max(100svh, 560px); }
/* 18. LAYOUT AFFIANCATO (progetto Value+) ---------------------------------------------------------------------------
Seconda famiglia di layout della pagina progetto: testi, titoli e immagini stanno nei 2/3 a destra (1/3 vuoto a sinistra),
le fasce scure hanno il titolo nel 1/3 e il testo nei 2/3. Gli elementi .split-full occupano tutte le 12 colonne. NON NEL DS. */
.cols__col--split > * { margin-left: calc((100% - var(--number-spacing-32)) / 3 + var(--number-spacing-32)); } /* family=Offset: (contenuto − gap) diviso 1:2; il testo parte a 1/3 + gap (768, gap 32 → 245,3 + 32 = 277,3; largo 490,7) */
.cols__col--split > .split-full { margin-left: 0; }
.band--brand { background: var(--band-brand); } /* Band-Section con il colore di brand del progetto (Fill = surface--primary), solo dove richiesto; il testo resta bianco, quindi il brand deve avere contrasto sufficiente con il bianco */
.band--brand h1, .band--brand h2, .band--brand h3, .band--brand h4, .band--brand h5, .band--brand h6, .band--brand p { color: var(--color-text-lightest); }
.band--brand a { color: var(--color-text-lightest); }
body.spacing-v2 .band.band--brand .lead, body.spacing-v2 .band.band--brand .lead p { color: var(--color-text-lightest); }
/* Block-Text (Figma 2125:3756): titolo + Body senza riquadro. family=Wide: tutti i 768px · family=Offset: nei 2/3 a destra, con la stessa regola delle colonne. */
.block-text > :is(h2, h3, h4, h5, h6) { margin: 0 0 var(--number-space-title-h3-below); }
.block-text > p { margin: 0 0 var(--number-space-paragraph); }
.block-text > :last-child { margin-bottom: 0; }
.block-text--offset { margin-left: calc((100% - var(--number-spacing-32)) / 3 + var(--number-spacing-32)); }
@media (max-width: 767px) { .block-text--offset { margin-left: 0; } }
/* Band-Section · family=Offset (Figma 2125:3728): titolo nel 1/3, testo nei 2/3. Paragrafi con la distanza delle regole (12). */
.band-section--offset { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--number-spacing-32); /* regola: (contenuto − gap) ÷ 3 → 1/3 e 2/3 (768, gap 32: 245,3 + 490,7) */ align-items: start; }
.band-section--offset__title h2, .band-section--offset__title h3 { margin: 0; }
.band-section--offset__text .lead { margin: 0; }
.band-section--offset__extra { margin-top: var(--number-spacing-32); } /* Figma: Lead → testo = 32 (regola Lead sotto 32) */
.band-section--offset__extra p { margin: 0 0 var(--number-space-paragraph, 12px); }
.band-section--offset__extra p:last-child { margin-bottom: 0; }
@media (max-width: 767px) { .band-section--offset { grid-template-columns: minmax(0, 1fr); row-gap: var(--number-spacing-24, 24px); } }
.label-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.label-grid--images .block-image { margin: 0 !important; }
@media (max-width: 767px) {
.cols__col--split > * { margin-left: 0; }
.label-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Distanze dei blocchi a larghezza piena nel layout Affiancato: 20px dopo il Body, 28px prima del Body (regole Body) */
body.spacing-v2 :is(.block-split, .block-split-list, .label-grid) { margin-top: var(--space-after-body); }
body.spacing-v2 :is(.block-split, .block-split-list) + p { margin-top: var(--body-above); }
/* Header-Project Layout=3 (Figma 2123:3588): tutto a tutta larghezza; scheda su tre colonne uguali (32px), Attività sotto. */
.project-header--wide .project-header__details { margin-top: var(--number-spacing-32); }
.project-header--wide .element-project-info { padding-bottom: 0; }
@media (max-width: 767px) { .project-header--wide .project-header__details .cols__col + .cols__col { margin-top: var(--number-spacing-28, 28px); } }
/* Card-Step (Figma 2133:4014): surface, radius 20, padding 16, gap 8. In alto numero (cerchio pieno 20, Caption bold 12/18 bianco) e freccia corta 24 a destra, nello stesso colore;
sotto il nome in Body. Active = primary di brand · Inactive (--inactive) = secondary. */
.card-step { --step-color: var(--project-default); box-sizing: border-box; display: flex; flex-direction: column; gap: var(--number-spacing-08); padding: var(--number-spacing-16); border-radius: var(--number-radius-xl); background: var(--color-background-lighter); color: var(--step-color); }
.card-step--inactive { --step-color: var(--project-ultralight); } /* Card-Step, State=Inactive (Figma 2133:4014): cerchio e freccia in color/ultralight del Project */
.card-step__top { display: flex; align-items: center; justify-content: space-between; min-height: 24px; } /* anche senza freccia la riga resta alta 24, il nome non si sposta */
.card-step__name { margin: 0; font-family: var(--font-family-body); font-size: var(--number-font-size-md); line-height: var(--number-line-height-body); font-weight: var(--number-font-weight-regular); color: var(--color-text-darker); } /* nome: text/darker (Figma) */
.card-step__arrow { flex: 0 0 auto; width: 24px; height: 24px; }
.label-grid .card-step { margin: 0; }
/* Card-Stroke-Above (Figma 2128:3837): bordo superiore 6 nel colore di brand, surface, radius 20, padding 16, gap 8; titolo H6 bold nel colore del bordo, testo Body. */
.card-stroke-above { --card-stroke-above: var(--color-valueplus-primary); box-sizing: border-box; display: flex; flex-direction: column; gap: var(--number-spacing-08); position: relative; overflow: hidden; padding: calc(var(--number-spacing-16) + 6px) var(--number-spacing-16) var(--number-spacing-16); border-radius: var(--number-radius-xl); background: var(--color-background-lighter); } /* come prima: sfondo e padding invariati (16 + 6 di stroke in alto); cambia solo lo stroke, ora una barra 6px ritagliata dal raggio (Figma 2130:3968) */
.card-stroke-above::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--card-stroke-above); }
.card-stroke-above__title { margin: 0; font-family: var(--font-family-heading); font-size: 16px; line-height: 18px; font-weight: 700; color: var(--color-text-darkest); }
.card-stroke-above__text { font-family: var(--font-family-body); font-size: var(--number-font-size-md); line-height: var(--number-line-height-body); color: var(--color-text-darker); }
.card-stroke-above__text p { margin: 0; }
.card-stroke-above__text p + p { margin-top: var(--number-space-paragraph); }
.label-grid .card-stroke-above { margin: 0; }
.card-stroke-above__content { display: flex; flex-direction: column; gap: var(--number-spacing-08); min-width: 0; }
/* variante Background=Trasparent, Icon=Yes (Figma 2130:3973): senza sfondo, freccia 24px a sinistra allineata al titolo (riga da 24), 8px di distanza, 4px titolo → testo */
.card-stroke-above--transparent { background: transparent; }
.card-stroke-above--icon { flex-direction: row; align-items: flex-start; gap: var(--number-spacing-08); }
.card-stroke-above--icon .card-stroke-above__content { flex: 1 1 0; gap: var(--number-spacing-08); padding-top: var(--number-spacing-02, 2px); }
.card-stroke-above__icon { flex: 0 0 auto; width: 24px; height: 24px; color: var(--color-background-darkest); } /* freccia nera (background/darkest) */
/* Element-BulletText · Bullet=S (Figma 2129:3920): un solo box (surface, radius 20, padding 16) con tutte le voci; ogni voce ha un pallino da 6px (10 sopra), 8px di distanza e testo Body 15/25; 4px tra le voci. */
.element-bullet-text--s { box-sizing: border-box; gap: var(--number-spacing-04); padding: var(--number-spacing-16); border-radius: var(--number-radius-xl); background: var(--color-background-lighter); }
.element-bullet-text--s .element-bullet-text__item { gap: var(--number-spacing-08); padding: 0; }
.element-bullet-text--s .element-bullet-text__bullet { width: 6px; height: 6px; margin-top: var(--number-spacing-10, 10px); }
.element-bullet-text--s .element-bullet-text__text { font-family: var(--font-family-body); font-size: var(--number-font-size-md); line-height: var(--number-line-height-body); font-weight: var(--number-font-weight-regular); }
.element-bullet-text--s .element-bullet-text__text strong { font-weight: 700; }
body.spacing-v2 .cols__col > .element-bullet-text--s { margin-top: var(--space-after-body); }
body.spacing-v2 .element-bullet-text--s + :is(p, h3, h5) { margin-top: var(--body-above); }
/* Element-Objective (Figma 2130:3952): surface, radius 20, padding 16, gap 8. A sinistra il numero in un cerchio pieno da 20px (testo bianco Caption bold 12/18);
a destra titolo H5 bold 18/24 e testo Body 15/25, 6px tra i due. */
.element-objective { box-sizing: border-box; display: flex; align-items: flex-start; gap: var(--number-spacing-08); padding: var(--number-spacing-16); border-radius: var(--number-radius-xl); background: var(--color-background-lighter); }
.element-objective__text { flex: 1 1 0; min-width: 0; padding-top: 3px; display: flex; flex-direction: column; gap: 6px; color: var(--color-text-darkest); }
.element-objective__title { margin: 0; font-family: var(--font-family-heading); font-size: 18px; line-height: 24px; font-weight: 700; }
.element-objective__body { margin: 0; font-family: var(--font-family-body); font-size: var(--number-font-size-md); line-height: var(--number-line-height-body); }
.element-objective + .element-objective { margin-top: var(--grid-gap-tight); } /* tra elementi vicini: distanza stretta (8) */
/* Block-Split (Figma 2133:4052): contenitore con due box, 1/3 e 2/3 ((contenuto − gap) ÷ 3, gap 32), centrati in verticale; dentro un Element-Image, una card o altro.
Un'immagine non supera l'altezza dell'elemento che ha di fianco: se è più alta si ridimensiona in proporzione (ratio e padding del riquadro in --ratio e --pad). Più Block-Split vicini: 8. */
.block-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--number-spacing-32); align-items: center; }
.block-split + .block-split { margin-top: var(--grid-gap-tight); }
.block-split-list > .block-split + .block-split { margin-top: var(--grid-gap-tight); }
.block-split__box { min-width: 0; }
.block-split__box > .card-stroke-left, .block-split__box > .card-stroke-above { margin: 0 !important; }
.block-split__box > img { display: block; width: 100%; height: auto; }
.block-split__box > .block-image { margin: 0 !important; }
.block-split__box--fit { container-type: size; align-self: stretch; position: relative; } /* l'altezza viene dal vicino: il box non dipende dall'immagine */
.block-split__box--fit > img, .block-split__box--fit > .block-image { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(100cqw, calc((100cqh - var(--pad, 0px)) * var(--ratio) + var(--pad, 0px))); height: auto; }
.block-split__box--fit > .block-image img { width: 100%; height: auto; }
@media (max-width: 767px) {
.block-split { grid-template-columns: minmax(0, 1fr); row-gap: var(--number-spacing-08); }
.block-split + .block-split, .block-split-list > .block-split + .block-split { margin-top: var(--number-spacing-16); }
.block-split__box--fit { container-type: normal; position: static; }
.block-split__box--fit > img, .block-split__box--fit > .block-image { position: static; transform: none; width: 100%; }
.block-split__box:empty { display: none; }
}
.label-grid--span2 { align-items: start; }
.label-grid--span2 .block-image { grid-column: span 2; margin: 0 !important; }
@media (max-width: 767px) { .label-grid--span2 .block-image { grid-column: 1; } }
/* su fascia grigia: card ed elementi surface passano al bianco (regola inversa, come per le altre card) */
.band--surface .element-objective, .band--surface .element-bullet-text--s, .band--surface .card-phase, .band--surface .card-stroke-above:not(.card-stroke-above--transparent), .band--surface .block-evidence:not([style]) .block-evidence__content { background: var(--color-solid-white); }
.block-evidence__content .button { align-self: flex-start; }
.label-grid--1 { grid-template-columns: minmax(0, 1fr); }
/* Block-Default-Image Column=2 (3/4+1/4): nella colonna da 1/4 più Element-Image una sotto l'altra, 8px (distanza stretta) */
.block-image__col { display: flex; flex-direction: column; gap: var(--grid-gap-tight); }
.block-image--row > .block-image__col .element-image { margin: 0; }
@media (max-width: 767px) { .block-image--row.block-image--3-1 > .block-image__col { width: 184px; max-width: 100%; } }
/* Regola: Card / Block / Element dopo un Block-Image → 20px (come il Body sotto un componente: --space-after-body) */
body.spacing-v2 .block-image + :is(.element-evidence, .block-evidence, .block-crosslink, .card-stroke-left, .card-outcome, .element-column, .block-bullet-text) { margin-top: var(--space-after-body); }
/* Element-Number (Figma 2139:4081): cerchio pieno con il numero (font Number = Montserrat bold). Small 20 · Medium 28 · Large 36 */
.element-number { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; border-radius: 50%; background: var(--number-bg, var(--color-neutral-900)); color: var(--color-text-inverse, #fff); font-family: var(--font-family-number); font-weight: 700; line-height: 18px; text-align: center; white-space: nowrap; }
.element-number--s { width: 20px; height: 20px; font-size: 12px; }
.element-number--m { width: 28px; height: 28px; font-size: 16px; }
.element-number--l { width: 36px; height: 36px; font-size: 18px; }
.element-number--inverse { background: var(--number-bg, var(--project-ultralight)); color: var(--project-default); } /* Color=Inverse (Figma 2139:4081): cerchio ultralight, numero default */
/* Card-Counter (Figma 2139:4119): Element-Number Large + testo Lead */
.card-counter { box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: var(--number-spacing-08); padding: var(--number-spacing-16); border-radius: var(--number-radius-xl); background: var(--color-background-lighter); }
.card-counter__text { margin: 0; font-family: var(--font-family-body); font-size: 24px; line-height: 36px; font-weight: 400; color: var(--color-text-darkest); }
.label-grid .card-counter { margin: 0; }
.band--surface .card-counter { background: var(--color-solid-white); }
/* Block-Full-Image (Figma 2140:4145): immagine da bordo a bordo della viewport, senza bordo; 28px dal testo che la precede (Body prima di un componente), 20px dal componente che la segue; un titolo dopo l'immagine porta la sua spaziatura (priorità del Heading) */
body.spacing-v2 .band__full--block { margin-top: var(--number-spacing-28); }
body.spacing-v2 .band__full--block + .container { padding-top: var(--number-space-sm); }
body.spacing-v2 .band__full--block + .container:has(> .cols > .cols__col > h2:first-child) { padding-top: var(--number-space-title-h2-above); }
body.spacing-v2 .band__full--block + .container:has(> .cols > .cols__col > h3:first-child) { padding-top: var(--number-space-title-h3-above); }
.band__full--block img { border-radius: 0; } /* Figma Block/Full-Image (2140:4145): a tutta viewport, senza angoli arrotondati */
.band__full-caption { margin: 6px 0 0; padding: 0 0 0 var(--number-spacing-16); font-family: var(--font-family-body); font-size: var(--number-font-size-sm); font-weight: 400; line-height: var(--number-line-height-caption); color: var(--color-text-darker); } /* Block/Full-Image (Figma 2140:4145): didascalia Caption/C1-Regular 12/18, 6px sotto l'immagine, rientro 16 */
body.spacing-v2 .element-quote + p { margin-top: var(--body-above); } /* Body dopo un componente: 28px sopra */
/* Block-Text (Figma 2125:3756) dentro una colonna: stessa distanza sopra di un titolo H3 (56) e dal testo precedente nessun margine in più */
body.spacing-v2 .cols__col > .block-text { margin-top: var(--number-space-title-h3-above); }
body.spacing-v2 .cols__col > .block-text:first-child { margin-top: 0; }
body.spacing-v2 :is(p, ul, ol, .lead, .stack, .box, .image-box):has(+ .block-text) { margin-bottom: 0; }
body.spacing-v2 .block-text > :is(h2, h3, h4, h5, h6) { margin-top: 0; }
/* Due Element-Objective affiancati (NON NEL DS: layout di pagina) */
.element-objective-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--number-spacing-32); align-items: stretch; }
.element-objective-row .element-objective { margin: 0; }
body.spacing-v2 .cols__col > .element-objective-row { margin-top: var(--space-after-body); }
body.spacing-v2 .element-objective-row + :is(p, h3, h5) { margin-top: var(--body-above); }
@media (max-width: 767px) { .element-objective-row { grid-template-columns: minmax(0, 1fr); gap: var(--grid-gap-tight); } }
/* Button-Icon (Figma 2143:4279): cerchio arancio default (Over: arancio dark) con chevron bianco. Size S: 40px, chevron 20 · Size XS: 30px, chevron 14 */
/* Button-Icon: Default e Over come Primary */
.button-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--number-radius-max, 999px); background: var(--color-interaction-primary-default); color: var(--color-solid-white); cursor: pointer; text-decoration: none; transition: background-color var(--number-duration-default) ease; }
.button-icon:hover, .button-icon:focus-visible { background: var(--color-interaction-primary-over); }
.button-icon svg { display: block; width: 20px; height: 20px; }
.button-icon--xs { width: 30px; height: 30px; }
.button-icon--xs svg { width: 14px; height: 14px; }
.button-icon:focus-visible { outline: 2px solid var(--color-orange-600); outline-offset: 3px; }
/* Block/Default-Carousel (Figma 2143:4297) — immagini una per volta; Controller (padding laterale 16): Button-Icon XS 30px ai due estremi + Element-Circle XS 6px
(Default = orange/default, Over/attivo = #8c4800) */
.block-default-carousel { display: flex; flex-direction: column; gap: var(--number-spacing-16, 16px); }
.block-default-carousel__viewport { overflow: hidden; }
.block-default-carousel__track { display: flex; transition: transform .35s ease; }
.block-default-carousel__slide { flex: 0 0 100%; min-width: 0; }
.block-default-carousel__controller { display: flex; align-items: flex-start; justify-content: space-between; padding: 0 var(--number-spacing-16, 16px); }
.block-default-carousel__dots { display: flex; gap: var(--number-spacing-08, 8px); align-items: center; align-self: stretch; }
.block-default-carousel__dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: var(--brand-orange-default); cursor: pointer; transition: background-color var(--number-duration-default) ease; }
.block-default-carousel__dot:hover, .block-default-carousel__dot.is-active { background: var(--color-orange-900); }
.block-default-carousel__dot:focus-visible { outline: 2px solid var(--color-orange-600); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .block-default-carousel__track { transition: none; } }
/* Block-Default-Image 1/3 + 2/3 (testo a sinistra, immagine larga a destra): speculare a Column=2, 2/3+1/3 — NON NEL DS */
.block-image--row.block-image--1-2 { grid-template-columns: 1fr 2fr; }
@media (max-width: 767px) { .block-image--row.block-image--1-2 { grid-template-columns: 1fr; } }
/* stelle inline nel testo (20×18) — NON NEL DS */
.inline-star { display: inline-block; width: 20px; height: 18px; margin-left: 4px; vertical-align: -3px; }
.label-grid--neutral .card-step { --step-color: var(--color-neutral-900); } /* Card-Step senza colore di brand del progetto: numero e freccia neutral-900 */
.cols--cards { margin-top: var(--space-after-body, 16px); } /* riquadri (Element-Evidence / Card-Evidence) dopo un testo: stessa distanza del corpo testo */
/* Card-Link (Figma 2146:4359): riquadro surface (radius 20, padding 16, gap 6). Link=Yes: Text-Link + testo Body 15/25 · Link=No: titolo bold 15/25 + testo 14/24 */
.card-link { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--number-spacing-06); align-items: flex-start; padding: var(--number-spacing-16); border-radius: var(--number-radius-xl); background: var(--color-background-lighter); color: var(--color-text-darkest); }
.card-link__title, .card-link__text { margin: 0; }
.card-link__title { font-family: var(--font-family-body); font-size: var(--number-font-size-md); line-height: 25px; font-weight: var(--number-font-weight-bold); color: var(--color-ial-900); } /* prova: titolo della card (Link=No) in ial-900 */
.card-link__text { font-family: var(--font-family-body); font-size: 14px; line-height: 24px; font-weight: var(--number-font-weight-regular); }
.card-link--link .card-link__text { font-size: var(--number-font-size-md); line-height: 25px; }
.card-link__link { display: inline-flex; align-items: center; gap: var(--number-spacing-04, 4px); color: var(--color-ial-600); font-family: var(--font-family-body); font-size: var(--number-font-size-md); line-height: 25px; font-weight: var(--number-font-weight-bold); text-decoration: none; }
.card-link__link:hover { color: var(--color-ial-800); }
.card-link__arrow { flex: 0 0 auto; width: 24px; height: 24px; }
.band--surface .card-link { background: var(--color-solid-white); }
.card-stack { display: flex; flex-direction: column; gap: var(--grid-gap-tight); }
.cols--cards { column-gap: var(--grid-gap-tight); row-gap: var(--grid-gap-tight); }
.cols--cards > .cols__col { margin: 0; }
.cols--cards + .cols--cards { margin-top: var(--number-spacing-32); }
/* Block-Objective (Figma 2146:4378): Element-Objective solo titolo + 16px + testo rientrato (52px a sinistra, 8px a destra), 12px tra i paragrafi */
.block-objective { display: flex; flex-direction: column; gap: var(--number-spacing-16); }
.block-objective + .block-objective { margin-top: var(--number-spacing-32); }
.block-objective__text { padding: 0 var(--number-spacing-08) 0 52px; }
.block-objective__text > p { margin: 0 0 var(--number-spacing-12); }
.block-objective__text > p:last-child { margin-bottom: 0; }
@media (max-width: 767px) { .block-objective__text { padding-left: 0; padding-right: 0; } }
/* Card-Fase "hug" (comportamento standard): l'altezza di ogni card è data dal suo contenuto, non da quella della card più alta della riga */
.label-grid:has(> .card-phase) { align-items: start; }
.cols__col:has(> .card-phase) { align-self: flex-start; }
.cols:has(> .cols__col > .card-phase) { align-items: flex-start; }
.card-phase { flex: 0 0 auto; }
.block-fase__cards { align-items: flex-start; }
/* Block-Flow (Figma 2149:4388): passi in riga (Chip XLarge a tutta larghezza) collegati da frecce 42px verde IAL; padding laterale 16 */
.block-flow { display: flex; align-items: center; margin: 32px 0 0; }
.block-flow__step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: var(--number-spacing-08); }
.block-flow__chip { box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: var(--number-spacing-08) var(--number-spacing-20); border-radius: var(--number-radius-sm); background: var(--color-background-lighter); font-family: var(--font-family-body); font-size: 15px; line-height: 25px; font-weight: 700; color: var(--color-text-darker); text-align: center; }
.block-flow__chip--outline { padding-block: var(--number-spacing-06); border: 2px solid var(--color-neutral-900); }
.block-flow__chip--ial { background: var(--color-ial-100); color: var(--color-ial-600); }
.block-flow__text { padding-left: var(--number-spacing-20); font-size: 15px; line-height: 25px; color: var(--color-text-darker); }
.block-flow__arrow { flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; justify-content: center; padding: 0 var(--number-spacing-16); color: var(--color-ial-600); }
.block-flow__arrow-icon { display: block; width: 42px; height: 42px; }
@media (max-width: 600px) {
.block-flow { flex-direction: column; align-items: stretch; }
.block-flow__arrow { padding: var(--number-spacing-08) 0; }
.block-flow__arrow-icon { transform: rotate(90deg); }
}
/* Card-Info (Figma 2115:2964 · Color=Light, Title=Double): etichetta H6-Bold, sotto (12px) titolo B2-Bold con stelle da 12px e testo B2-Regular */
.card-info { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--number-spacing-12); padding: var(--number-spacing-16); border-radius: var(--number-radius-xl); background: var(--color-background-lighter); color: var(--color-text-darker); }
.card-info__label { margin: 0; font-family: var(--font-family-heading); font-size: 16px; line-height: 18px; font-weight: var(--number-font-weight-bold); }
.card-info__body { display: flex; flex-direction: column; }
.card-info__title, .card-info__text { margin: 0; font-family: var(--font-family-body); font-size: 14px; line-height: 24px; }
.card-info__title { display: flex; align-items: center; font-weight: 700; }
.card-info__stars { display: inline-flex; align-items: center; color: #000; }
.card-info__star { display: block; width: 12px; height: 12px; flex: 0 0 auto; }
.label-grid .card-info { margin: 0; }
/* Text-Link con il colore del progetto Idea Agenzia per il Lavoro (Figma 2141:4215, Style=Body): Default ial-primary #57ad12 · Over ial-900 #285008 (NON NEL DS: colore per progetto) */
a.text-link.text-link--ial, .band--dark a.text-link.text-link--ial { color: var(--color-ial-600); font-weight: 700; } /* in bold (scelta su Text-Link Body, che nel DS è regular) */
a.text-link.text-link--ial:hover, .band--dark a.text-link.text-link--ial:hover { color: var(--color-ial-900); }
/* Element-Objective Color=Brand (Figma 2153:4464): numero su surface-ial-primary (#57ad12) e titolo in text/ial-primary; il testo resta primary */
.element-objective--brand .element-objective__title { color: var(--color-ial-600); }
/* Block-Flow nel ritmo del Body (spacing-v2): 20px dal testo che lo precede, 28px (body-above) dal testo che lo segue */
body.spacing-v2 .block-flow { margin-top: var(--space-after-body); }
body.spacing-v2 .block-flow + p { margin-top: var(--body-above); }
/* Fascia verde di brand con testo scuro (nell'originale "Modalità responsive" non è light-content): NON NEL DS */
.band--brand.band--ink h1, .band--brand.band--ink h2, .band--brand.band--ink h3, .band--brand.band--ink p { color: var(--color-text-darker); }
.band--neutral { background: var(--color-neutral-300); } /* NON NEL DS: fascia grigia neutral-300 (#B7B7B7), più vicino al #bbbbbb originale */
.band--neutral-200 { background: var(--color-neutral-200); } /* NON NEL DS: fascia grigia neutral-200 (#D3D3D3), più vicino al #d8d8d8 originale */
/* eDivisa: due immagini affiancate a tutta viewport (NON NEL DS: Block-Full-Image su due colonne, senza spazio tra le colonne come nell'originale) */
.band__full--pair { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0; }
@media (max-width: 767px) { .band__full--pair { grid-template-columns: 1fr; } }
/* eDivisa: Band-Text-Button su fondo di brand (NON NEL DS: variante con sfondo colorato e testo scuro) */
.version-band--brand { background: var(--band-brand); }
.version-band--brand .version-band__text, .version-band--brand .version-band__body { color: var(--color-text-darker); }
.band--grey-d9 { background: #d9d9d9; } /* NON NEL DS: grigio #d9d9d9 dell'originale, uguale allo sfondo delle immagini della divisa (nessun token: neutral-200 è #D3D3D3 e farebbe vedere i bordi delle immagini) */
.band--dark .element-evidence:not(.element-evidence--dark):not(.element-evidence--black):not(.element-evidence--brand) { color: var(--color-text-darker); } /* Element-Evidence Light su fascia scura: sfondo chiaro, testo scuro */
.band--dark .element-evidence:not(.element-evidence--dark):not(.element-evidence--black):not(.element-evidence--brand) .element-evidence__title, .band--dark .element-evidence:not(.element-evidence--dark):not(.element-evidence--black):not(.element-evidence--brand) p { color: var(--color-text-darker); }
.band--center .element-evidence { text-align: left; } /* Element-Evidence: testo sempre a sinistra, anche in una fascia centrata (Figma 2081:1042) */
body.spacing-v2 .band__full--block + .container:has(> .band__full-caption) { padding-top: 0; } /* Block/Full-Image (Figma 2140:4145): didascalia a 6px dall'immagine (gap dell'Element-Image), niente padding extra del container */
/* H5 subito sotto Element-Icon-Title-Chip: stessa distanza (24px) che c'è tra H2 e H5 */
body.spacing-v2 .element-title-chip + h5 { margin-top: 0; }
/* Immagini impilate nella stessa colonna: distanza tra immagini del DS (--number-space-image-gap) */
body.spacing-v2 .block-image__col--image-gap { gap: var(--number-space-image-gap); }
/* Block-Fase-Header (Figma 2119:3510): chip sopra pb 4 · titolo H2 riga 48 · sotto pt 24, H5 5/6 + immagine 1/6 di 768 */
.block-fase-header { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
.block-fase-header__above { display: flex; margin: 0; padding-bottom: 4px; }
.block-fase-header__title { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--number-spacing-32); }
.block-fase-header__title h2 { flex: 1 1 0; min-width: 0; margin: 0; }
.block-fase-header__chip { flex: 0 0 auto; display: flex; align-items: center; height: var(--number-line-height-heading-2, 48px); }
.block-fase-header__below { display: grid; grid-template-columns: 5fr 1fr; column-gap: var(--number-spacing-32); align-items: start; padding-top: var(--number-space-title-h2-below, 24px); }
.block-fase-header__below--noimg { grid-template-columns: 1fr; }
.block-fase-header__text { margin: 0; color: #000; } /* Figma: H5 text-black */
.block-fase-header__image img { display: block; width: 100%; height: auto; }
body.spacing-v2 .cols__col > .block-fase-header { margin-top: var(--number-space-title-h2-above); padding-bottom: var(--number-space-title-h2-below); }
body.spacing-v2 .cols__col > .block-fase-header:has(.block-fase-header__below) { padding-bottom: var(--number-space-heading-gap); }
body.spacing-v2 .cols > .cols__col:first-child > .block-fase-header:first-child { margin-top: 0; }
@media (max-width: 767px) { .block-fase-header__chip { height: 36px; } }
body.spacing-v2 .block-image + .card-stack { margin-top: var(--number-space-image-gap); } /* immagine → Evidence impilate: 28px come immagine → Block-Evidence */
/* Band-Text-Button (2051:652) su altri sfondi: bianco (testo e pulsante scuri), nero o verde IAL (testo e pulsante bianchi) — varianti di colore NON NEL DS */
.version-band--light { background: var(--color-background-lightest); }
.version-band--black { background: var(--color-solid-black); }
.version-band--brand { background: var(--band-brand); }
.version-band--ink .version-band__text, .version-band--ink .version-band__body { color: var(--color-text-darker); }
.version-band--ink-light .version-band__text, .version-band--ink-light .version-band__body { color: var(--color-text-lightest); } /* testo bianco anche su Brand */
/* Band-Text-Button Color=Light (Figma 2160:4511): testo e pulsante neri (solid/black), non #222 */
.version-band--light .version-band__text, .version-band--light .version-band__body { color: var(--color-solid-black); }
.version-band--light .button--outline { color: var(--color-solid-black); border-color: var(--color-solid-black); }
.version-band--light .button--outline:hover { color: var(--color-text-lightest); background: var(--color-solid-black); }
/* Band-Text-Button Color=Brand, Text=Dark (Figma 2160:4511): pulsante nero (solid/black) */
.version-band--ink .button--outline { color: var(--color-solid-black); border-color: var(--color-solid-black); }
.version-band--ink .button--outline:hover { color: var(--color-text-lightest); background: var(--color-solid-black); }
.version-band--ink .version-band__text, .version-band--ink .version-band__body { color: var(--color-solid-black); }
/* Back to Project page (Figma 2239:4520): pulsante fisso in basso a sinistra, solo nelle pagine progetto, torna a Progetti.
Margine sinistro = --number-gutter (48 fino a 1024px, 32 sotto i 479px), margine basso 20. h 40, padding 12/24, gap 8, pieno arrotondato.
La variante segue lo sfondo su cui si trova, in modo inverso (main.js legge il colore di sfondo della sezione sotto il pulsante):
sfondo chiaro → Secondary-dark (#222, freccia e label in un'unica sfumatura brand) · sfondo scuro → Tertiary (bianco, testo nero).
Transizione come quella del menu: dissolvenza incrociata di 300 ms (--number-duration-default, ease) tra le due varianti sovrapposte.
Over = arancio dark con testo bianco (documentazione pulsanti). */
.back-to-projects {
--back-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H4M9 7l-5 5 5 5'/%3E%3C/svg%3E");
position: fixed; z-index: 100; display: inline-grid; text-decoration: none; cursor: pointer;
left: max(var(--number-gutter-lg), env(safe-area-inset-left, 0px));
bottom: calc(var(--number-spacing-20) + env(safe-area-inset-bottom, 0px));
border-radius: var(--number-radius-max, 9999px);
}
.back-to-projects:focus-visible { outline: 2px solid var(--color-text-darkest); outline-offset: 2px; }
.back-to-projects__face {
grid-area: 1 / 1; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: 40px;
padding: var(--number-spacing-12) var(--number-spacing-24); border-radius: var(--number-radius-max, 9999px);
opacity: 0; transition: opacity var(--number-duration-default) ease, background-color var(--number-duration-default) ease, color var(--number-duration-default) ease;
}
.back-to-projects__face--dark { background: var(--color-interaction-secondary-default); color: var(--color-text-lightest); opacity: 1; }
.back-to-projects__face--light { background: var(--color-interaction-tertiary-default); color: var(--color-text-darkest); }
.back-to-projects--on-dark .back-to-projects__face--dark { opacity: 0; }
.back-to-projects--on-dark .back-to-projects__face--light { opacity: 1; }
.back-to-projects__inner { display: inline-flex; align-items: center; gap: var(--number-spacing-08); }
.back-to-projects__icon {
flex: none; width: 12px; height: 12px; background: currentColor;
-webkit-mask: var(--back-icon) center / 100% 100% no-repeat; mask: var(--back-icon) center / 100% 100% no-repeat;
}
.back-to-projects__label { font-family: var(--font-family-button); font-size: 12px; line-height: 18px; font-weight: 600; white-space: nowrap; }
/* Secondary-dark: la sfumatura è una sola, dall'icona alla fine della label (--back-w = icona + gap + label, scritta da main.js) */
.back-to-projects__face--dark .back-to-projects__icon,
.back-to-projects__face--dark .back-to-projects__label { background: var(--gradient-brand) 0 0 / var(--back-w, 80px) 100% no-repeat; }
.back-to-projects__face--dark .back-to-projects__label { background-position: calc(-1 * (12px + var(--number-spacing-08))) 0; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
/* Over come i pulsanti (Figma 2239:4520): Secondary Dark → interaction/secondary/over con la stessa sfumatura · Tertiary → interaction/tertiary/over con testo e freccia neri */
.back-to-projects:hover .back-to-projects__face--dark,
.back-to-projects:focus-visible .back-to-projects__face--dark { background: var(--color-interaction-secondary-over); }
.back-to-projects:hover .back-to-projects__face--light,
.back-to-projects:focus-visible .back-to-projects__face--light { background: var(--color-interaction-tertiary-over); }
@media (max-width: 479px) { .back-to-projects { left: max(var(--number-gutter-sm), env(safe-area-inset-left, 0px)); } }
/* Block-Preview (Figma 2284:2020): carosello di anteprima dei progetti. Block largo max 800px con 16px di padding per lato.
Sta a cavallo tra la fascia Precedente/Successivo e il footer (ancora a altezza 0, contenuto centrato sul bordo), sopra gli altri elementi.
Tessera Element-ImagePreview (Figma 2284:1970): 104×64, raggio 20, bordo 6 (immagine 92×52), immagine che riempie la forma interna (cover, centrata).
Default = background-lighter · Over = primary-default · Selected = primary-selected con i tre puntini (stato Dot). */
.block-preview-anchor { position: relative; z-index: 6; height: 0; }
.block-preview { box-sizing: border-box; position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); width: min(100%, 800px); padding: 0 var(--number-spacing-16);
display: flex; align-items: center; justify-content: center; gap: var(--number-spacing-20); }
.block-preview__viewport { overflow: hidden; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.block-preview__track { display: flex; gap: var(--number-spacing-20); margin: 0; padding: 0; list-style: none; transition: transform 0.4s ease-in-out; }
.element-image-preview { flex: none; width: 104px; height: 64px; }
.element-image-preview a { box-sizing: border-box; position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 6px; /* bordo di 6px: l'immagine è 92×52 dentro 104×64 */
border-radius: 20px; background: var(--color-background-lighter); overflow: hidden; transition: background-color var(--number-duration-default) ease; }
.element-image-preview img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 12px; } /* come le immagini grandi dei progetti: riempie la forma interna, ritagliata al centro */
.element-image-preview a:hover, .element-image-preview a:focus-visible { background: var(--color-interaction-primary-default); }
.element-image-preview.is-selected a, .element-image-preview.is-selected a:hover { background: var(--color-interaction-primary-selected); }
.element-image-preview.is-selected img { opacity: 0; } /* Selected: al posto dell'immagine i tre puntini (Figma, stato Dot) — NON NEL DS come regola esplicita */
.element-image-preview__dots { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4px; }
.element-image-preview__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-orange-900); }
.block-preview .button-icon[disabled] { opacity: 0.35; cursor: default; pointer-events: none; } /* estremi dell'elenco: NON NEL DS */