/* ############################################################
1 · TOKEN
############################################################ */
/* Due livelli:
1. PRIMITIVE: la tavolozza, scala corta per scelta deliberata. Le
scelte nuove si fanno da qui.
2. SEMANTICHE: il significato. I componenti usano solo queste; dove
un valore non cade su uno step primitivo resta letterale, ed è
taratura fine congelata, non un invito a crearne altri. */
:root {
/* ---------- 1 · PRIMITIVE ---------- */
/* Neutri violati (hue 315, chroma bassa) */
--n-100: oklch(0.99 0.003 315); /* quasi bianco */
--n-300: oklch(0.94 0.02 315); /* superficie */
--n-500: oklch(0.87 0.014 315); /* righe */
--n-700: oklch(0.55 0.04 315); /* righe forti */
--n-900: oklch(0.45 0.05 315); /* testo attenuato */
/* Prugna (hue 315): la firma */
--plum-100: oklch(0.92 0.025 315); /* tinta chiara */
--plum-200: oklch(0.88 0.04 315); /* tinta media */
--plum-300: oklch(0.84 0.06 315); /* tinta profonda */
--plum-500: oklch(0.34 0.09 315); /* superficie scura */
--plum-700: oklch(0.29 0.095 315); /* firma e azioni */
--plum-900: oklch(0.26 0.12 315); /* inchiostro */
/* Segnale acido (hue 128): marca, non decora */
--acid-300: oklch(0.9 0.16 128);
--acid-500: oklch(0.86 0.17 128);
--acid-700: oklch(0.82 0.17 128);
/* Bianco pieno (solo dentro superfici, mai come fondo pagina) */
--white: oklch(1 0 0);
/* Stati (contrasti AA verificati: tutti > 6:1) */
--red-500: oklch(0.45 0.17 27);
--red-100: oklch(0.95 0.02 27);
--green-500: oklch(0.44 0.12 150);
--green-100: oklch(0.95 0.03 150);
--amber-500: oklch(0.46 0.08 70);
--amber-100: oklch(0.955 0.025 85);
/* ---------- 2 · SEMANTICHE · colore ---------- */
/* Fondi e superfici chiare */
--bg: oklch(0.977 0.006 315); /* fondo pagina (fuori scala, congelato) */
--bg-2: var(--n-100); /* superfici in rilievo: card chiare, header */
--bg-3: var(--n-300); /* bande e superfici tinte */
--paper: var(--white);
/* Testi su chiaro */
--ink: var(--plum-900); /* titoli e testo forte */
--ink-2: oklch(0.31 0.07 315); /* corpo (congelato) */
--ink-3: var(--n-900); /* attenuato, didascalie */
/* Righe */
--line: var(--n-500);
--line-strong: var(--n-700);
/* Azione primaria (prugna) */
--accent: var(--plum-700);
--accent-hover: oklch(0.35 0.1 315); /* stato (congelato) */
--accent-down: oklch(0.24 0.09 315); /* stato (congelato) */
--accent-ring: oklch(0.29 0.095 315 / 0.35);
--on-accent: oklch(0.968 0.01 315); /* testo su prugna */
--on-accent-soft: oklch(0.89 0.02 315);
--on-accent-body: oklch(0.91 0.015 315);
/* Superfici scure */
--card-dark: var(--plum-500);
--line-dark: oklch(1 0 0 / 0.15);
--line-dark-2: oklch(1 0 0 / 0.32);
--line-dark-3: oklch(1 0 0 / 0.5);
--wash-dark: oklch(1 0 0 / 0.12);
/* Segnale acido */
--accent-2: var(--acid-500);
--accent-2-hover: var(--acid-300);
--accent-2-down: var(--acid-700);
--on-accent-2: oklch(0.24 0.08 315); /* inchiostro su acido (congelato) */
/* Tinte dei segni amorfi */
--tint-1: var(--plum-100);
--tint-2: var(--plum-200);
--tint-3: var(--plum-300);
/* Velature */
--wash: oklch(0.26 0.12 315 / 0.06);
--wash-strong: oklch(0.26 0.12 315 / 0.12);
/* Mappe e diagrammi */
--map-dot: oklch(0.78 0.04 315);
--map-line: oklch(0.82 0.03 315);
/* Stati: testo/bordo e fondo. Mai da soli: sempre con icona o etichetta */
--err: var(--red-500);
--err-bg: var(--red-100);
--ok: var(--green-500);
--ok-bg: var(--green-100);
--warn: var(--amber-500);
--warn-bg: var(--amber-100);
/* ---------- 2 · SEMANTICHE · tipografia ---------- */
/* Halyard Display, unica famiglia: 700 titoli, 600 UI, 400 corpo */
--font-display: "halyard-display", "Helvetica Neue", Arial, sans-serif;
--font-text: "halyard-display", "Helvetica Neue", Arial, sans-serif;
/* Scala tipografica, rapporto 1.2 (1.25 ammesso sui display).
I display riprendono i clamp congelati della homepage. */
--text-xs: 0.74rem; /* etichette, kicker */
--text-s: 0.9rem; /* didascalie, note */
--text-m: 1rem; /* corpo */
--text-l: 1.2rem; /* titoli di card e voci */
--text-xl: clamp(1.45rem, 2vw, 1.75rem); /* titoli minori */
--text-2xl: clamp(1.8rem, 3.4vw, 2.6rem); /* titoli di sezione */
--text-3xl: clamp(2rem, 4.4vw, 3.4rem); /* display */
--text-4xl: clamp(2.3rem, 5.2vw, 4.3rem); /* hero */
/* ---------- 2 · SEMANTICHE · spazio ---------- */
/* Griglia 8pt con mezzo passo da 4 per tipografia e icone */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
/* Respiro delle sezioni (white space attivo) */
--sec-pad: clamp(72px, 10vw, 130px);
--sec-pad-lg: clamp(96px, 12vw, 160px);
/* ---------- 2 · SEMANTICHE · materia ---------- */
--radius-s: 6px; /* CTA, hover menu, chip, social. MAI pillola sulle azioni */
--radius-m: 10px; /* card e superfici */
--shadow-1: 0 4px 12px oklch(0.22 0.05 315 / 0.08);
--shadow-2: 0 12px 26px oklch(0.22 0.05 315 / 0.12);
/* ---------- 2 · SEMANTICHE · motion ---------- */
--pace: 180ms; /* micro-transizioni */
--pace-slow: 0.5s; /* corse lunghe (riempimento stepper) */
--ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* ############################################################
2 · COMPONENTI
############################################################ */
/* Usa i token della sezione 1. Ordine base,
bottoni, header, ritmo delle sezioni, segni della famiglia,
componenti, footer, motion, reduced-motion.
Questi valori valgono su tutte le pagine: ritoccarli qui le cambia
tutte. I reveal additivi vogliono la classe .js sull'html, che mette
js/main.js. */
/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--bg); color: var(--ink-2);
font-family: var(--font-text);
font-size: 16px; line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; color: var(--ink); text-wrap: balance; letter-spacing: -0.015em; }
p { text-wrap: pretty; }
img, svg { max-width: 100%; }
/* Icone Remix: il font ha un solo peso. Dentro bottoni, link bold o strong
erediterebbero il grassetto e il faux bold le impasta: mai bold */
[class^="ri-"], [class*=" ri-"] { font-weight: normal; }
.wrap { max-width: 1200px; margin-inline: auto; padding-inline: var(--space-5); }
[id] { scroll-margin-top: 88px; }
.svg-defs { position: absolute; width: 0; height: 0; }
.logo-link { display: flex; }
.skip {
position: absolute; left: -9999px; top: 12px; z-index: 100;
background: var(--accent); color: var(--on-accent);
padding: 10px 18px; border-radius: var(--radius-s); font-weight: 600;
}
.skip:focus-visible { left: 12px; }
/* ---------- Bottoni ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
font-family: var(--font-text); font-size: 0.95rem; font-weight: 600;
padding: var(--space-3) var(--space-5); min-height: 46px;
border-radius: var(--radius-s); border: 1px solid transparent;
cursor: pointer; text-decoration: none;
transition: background-color var(--pace) var(--ease), border-color var(--pace) var(--ease),
color var(--pace) var(--ease), translate var(--pace) var(--ease);
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); translate: 0 -1px; }
.btn-primary:active { background: var(--accent-down); translate: 0 0; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--wash); translate: 0 -1px; }
.btn-secondary:active { background: var(--wash-strong); }
.btn-acid { background: var(--accent-2); color: var(--on-accent-2); }
.btn-acid:hover { background: var(--accent-2-hover); translate: 0 -1px; }
.btn-acid:active { background: var(--accent-2-down); }
.btn-ghost-light { background: transparent; color: var(--on-accent); border-color: var(--line-dark-3); }
.btn-ghost-light:hover { background: var(--wash-dark); }
.btn-ghost-light:focus-visible, .btn-acid:focus-visible { outline-color: var(--accent-2); }
.btn .ri-send-plane-line { transition: translate var(--pace) var(--ease), rotate var(--pace) var(--ease); }
.btn:hover .ri-send-plane-line { translate: 5px -3px; rotate: 8deg; }
/* Stati disabled e loading. Il disabled toglie l'azione,
non l'etichetta: il testo resta leggibile. */
.btn[disabled], .btn[aria-disabled="true"] {
background: var(--bg-3); color: var(--ink-3); border-color: transparent;
cursor: not-allowed; pointer-events: none;
}
.btn-secondary[disabled], .btn-secondary[aria-disabled="true"] {
background: transparent; color: var(--ink-3); border-color: var(--line);
}
/* Loading: etichetta visibile + anello che gira. Usare con aria-busy="true". */
.btn.is-loading { pointer-events: none; }
.btn.is-loading::after {
content: ""; width: 1em; height: 1em; flex: none;
border: 2px solid currentColor; border-right-color: transparent;
border-radius: 50%;
animation: spin 0.7s linear infinite;
}
@keyframes spin { to { rotate: 360deg; } }
/* ---------- Header ---------- */
.site-head {
position: sticky; top: 0; z-index: 50;
background: var(--bg); border-bottom: 1px solid var(--line);
}
.site-head .wrap { display: flex; align-items: center; gap: 22px; min-height: 68px; }
.logo { height: 26px; width: auto; flex: none; }
.logo .word { color: var(--ink); }
.logo .mark { color: var(--accent); }
/* Nav a sinistra accanto al logo, azioni sole a destra */
.site-nav { display: flex; align-items: center; gap: var(--space-1); margin-left: var(--space-4); }
.site-nav a, .nav-dd > button {
display: inline-block; padding: 10px var(--space-3);
color: var(--ink-2); text-decoration: none;
font-size: 1rem; font-weight: 500; border-radius: var(--radius-s);
}
.site-nav a:hover, .nav-dd > button:hover { color: var(--ink); background: var(--wash); }
.site-nav a:focus-visible, .nav-dd > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Tendine di navigazione: la voce principale è un BOTTONE, apre il menu e non
porta a nessuna pagina. Stato unico in [data-open], governato dallo script
dell'header (click, tastiera, hover); nel drawer mobile l'elenco è piatto e
sempre visibile. */
.nav-dd { position: relative; display: inline-flex; }
/* Il bottone è flex: l'icona non entra nel line box del testo e l'altezza
resta identica a quella delle voci senza freccia */
.nav-dd > button {
display: inline-flex; align-items: center; gap: 4px;
font-family: var(--font-text); border: none; background: none; cursor: pointer;
}
.nav-dd > button > i {
font-size: 1.05em; line-height: 1;
translate: 0 1px; /* aggancia il glifo al centro ottico del testo, misurato sull'ink */
transition: rotate var(--pace) var(--ease);
}
.nav-dd[data-open] > button { color: var(--ink); background: var(--wash); }
.nav-dd[data-open] > button > i { rotate: 180deg; }
.dd-panel {
position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
min-width: 250px; padding: var(--space-2);
background: var(--paper); border: 1px solid var(--line);
border-radius: var(--radius-m); box-shadow: var(--shadow-2);
display: grid; gap: 2px;
visibility: hidden; opacity: 0; translate: 0 -4px;
transition: opacity var(--pace) var(--ease), translate var(--pace) var(--ease),
visibility 0s linear var(--pace);
}
.nav-dd[data-open] > .dd-panel {
visibility: visible; opacity: 1; translate: 0 0; transition-delay: 0s;
}
.dd-wide { min-width: 480px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dd-panel a {
display: block; padding: 10px var(--space-3);
color: var(--ink-2); text-decoration: none;
font-size: 0.95rem; font-weight: 500; border-radius: var(--radius-s);
}
.dd-panel a:hover { color: var(--ink); background: var(--wash); }
.dd-panel a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Menu Accedi: tendina delle tre porte agganciata al bottone
della testata. Stessa gestione di stato delle tendine di navigazione
([data-open] dal JS dell'header per click, tastiera e hover); il trigger
è un button perché apre e non naviga. Sul mobile non esiste: nel drawer
la voce Accedi resta un link alla pagina. */
.acc-dd { position: relative; display: inline-flex; }
.acc-dd[data-open] > .btn { background: var(--wash); }
.acc-panel {
position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
width: 320px; padding: var(--space-2);
background: var(--paper); border: 1px solid var(--line);
border-radius: var(--radius-m); box-shadow: var(--shadow-2);
display: grid; gap: 2px;
visibility: hidden; opacity: 0; translate: 0 -6px;
transition: opacity var(--pace) var(--ease), translate var(--pace) var(--ease),
visibility 0s linear var(--pace);
}
.acc-dd[data-open] > .acc-panel { visibility: visible; opacity: 1; translate: 0 0; transition-delay: 0s; }
.acc-row {
display: flex; align-items: center; gap: var(--space-3);
padding: 10px var(--space-3); border-radius: var(--radius-s);
text-decoration: none; font-size: 0.98rem; font-weight: 600; color: var(--ink);
}
.acc-row:hover { background: var(--wash); }
.acc-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.acc-row .punto { width: 42px; height: 42px; font-size: 1.15rem; }
.acc-row:nth-child(2) .punto { background: var(--tint-2); animation-delay: -1.5s; }
.acc-row:nth-child(3) .punto { background: var(--tint-3); animation-delay: -3s; }
.acc-row > i:last-child { margin-left: auto; color: var(--accent); font-size: 1.05rem; }
.acc-note {
margin-top: var(--space-1); padding: 10px var(--space-3) 6px;
border-top: 1px solid var(--line);
font-size: 0.78rem; line-height: 1.5; font-weight: 400; color: var(--ink-3);
}
.nav-cta { display: none; }
/* Assistenza nel drawer: sopra i 900px vive nella testata come .head-help.
Il selettore passa da .site-nav perche .site-nav a vincerebbe per specificita */
.site-nav .nav-help { display: none; }
.head-cta { display: flex; align-items: center; gap: 14px; margin-left: auto; }
/* Assistenza: link leggero, terzo peso accanto ai due bottoni. Sta al
posto del vecchio selettore di lingua, rimosso il 10 agosto. */
.head-help {
display: inline-flex; align-items: center; gap: var(--space-1);
font-size: 0.88rem; color: var(--ink-2);
transition: color var(--pace) var(--ease);
text-decoration: none;
}
.head-help i { font-size: 1.05rem; color: var(--ink-3); }
.head-help:hover { color: var(--ink); }
.head-help:hover i { color: var(--accent); }
.head-cta .btn { padding: 9px 18px; min-height: 40px; font-size: 0.88rem; }
.menu-btn {
display: none; margin-left: auto;
width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius-s);
background: var(--bg-2); cursor: pointer; position: relative;
}
.menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.menu-btn i, .menu-btn::before, .menu-btn::after {
content: ""; position: absolute; left: 12px; right: 12px; height: 2px;
background: var(--ink); border-radius: 2px;
transition: translate var(--pace) var(--ease), rotate var(--pace) var(--ease), opacity var(--pace) var(--ease);
}
.menu-btn::before { top: 15px; }
.menu-btn i { top: 21px; }
.menu-btn::after { top: 27px; }
.menu-btn[aria-expanded="true"]::before { translate: 0 6px; rotate: 45deg; }
.menu-btn[aria-expanded="true"] i { opacity: 0; }
.menu-btn[aria-expanded="true"]::after { translate: 0 -6px; rotate: -45deg; }
@media (max-width: 1020px) {
.menu-btn { display: block; }
.acc-dd { display: none; }
/* Il drawer è un pannello che scende sopra la pagina: ombra per staccarlo
e apertura animata (display discreto + @starting-style) perché si veda
arrivare. Senza supporto compare di colpo, come prima. */
.site-nav {
position: absolute; left: 0; right: 0; top: 100%;
margin-left: 0;
flex-direction: column; align-items: stretch; gap: 0;
background: var(--bg); border-bottom: 1px solid var(--line);
box-shadow: var(--shadow-2);
padding: var(--space-2) var(--space-5) var(--space-4); display: none;
opacity: 0; translate: 0 -10px;
transition: opacity 240ms var(--ease), translate 240ms var(--ease),
display 240ms allow-discrete;
}
.site-head[data-open] .site-nav {
display: flex; opacity: 1; translate: 0 0;
max-height: calc(100dvh - 68px); overflow-y: auto; overscroll-behavior: contain;
}
@starting-style {
.site-head[data-open] .site-nav { opacity: 0; translate: 0 -10px; }
}
/* Le cinque voci entrano a scalare: dice "menu che si apre" invece di
"testo comparso". In chiusura rientrano subito, senza coda. */
.site-nav > * { opacity: 0; translate: 0 -6px; }
.site-head[data-open] .site-nav > * {
opacity: 1; translate: 0 0;
transition: opacity 260ms var(--ease), translate 260ms var(--ease);
}
.site-head[data-open] .site-nav > :nth-child(1) { transition-delay: 80ms; }
.site-head[data-open] .site-nav > :nth-child(2) { transition-delay: 120ms; }
.site-head[data-open] .site-nav > :nth-child(3) { transition-delay: 160ms; }
.site-head[data-open] .site-nav > :nth-child(4) { transition-delay: 200ms; }
.site-head[data-open] .site-nav > :nth-child(5) { transition-delay: 240ms; }
.site-nav a, .nav-dd > button { padding: 13px var(--space-2); border-bottom: 1px solid var(--line); border-radius: 0; }
.nav-dd { display: block; }
/* Come sul desktop: le due tendine restano chiuse e si aprono al tocco.
Il drawer così è un elenco corto di quattro voci, non un muro di link. */
.nav-dd > button { width: 100%; justify-content: space-between; }
.nav-dd[data-open] > button { background: none; }
.nav-dd > button > i { font-size: 1.25em; color: var(--ink-3); }
.dd-panel, .dd-wide {
position: static; min-width: 0; opacity: 1; translate: none;
grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 0 0 var(--space-4);
background: transparent; border: none; border-radius: 0; box-shadow: none;
max-height: 0; overflow: hidden; visibility: hidden;
transition: max-height 240ms var(--ease), visibility 0s linear 240ms;
}
.nav-dd[data-open] > .dd-panel {
max-height: 30rem; visibility: visible;
transition: max-height 300ms var(--ease), visibility 0s;
}
.dd-panel a { padding: 11px var(--space-2); border-bottom: 1px solid var(--line); border-radius: 0; }
/* Assistenza e le azioni: nel drawer sono voci vere, sopra i 900px
l'assistenza vive nella testata come .head-help */
.site-nav .nav-help { display: block; }
/* Le azioni non sono voci di menu: stanno staccate, sotto l'elenco */
.nav-cta { display: flex; gap: 12px; margin-top: var(--space-5); padding-top: var(--space-5); }
/* I bottoni sono dentro .site-nav: si riprendono colore, radius e padding
che le regole dei link di menu vincerebbero per specificità */
.nav-cta .btn {
flex: 1; justify-content: center;
padding: var(--space-3) var(--space-5);
border: 1px solid transparent; border-radius: var(--radius-s);
}
.nav-cta .btn-primary, .nav-cta .btn-primary:hover { color: var(--on-accent); }
.nav-cta .btn-primary:hover { background: var(--accent-hover); }
.nav-cta .btn-secondary, .nav-cta .btn-secondary:hover { color: var(--ink); }
.nav-cta .btn-secondary { border: 1px solid var(--ink); }
/* Sul mobile la testata è logo + hamburger: se .head-cta resta nel flex
il gap del wrap lascia un vuoto a destra del bottone */
.head-cta { display: none; }
}
/* ---------- Sezioni: ritmo ---------- */
section { position: relative; }
.clip { overflow: clip; }
.pad { padding-block: var(--sec-pad); }
.pad-lg { padding-block: var(--sec-pad-lg); }
.sec-title { font-size: var(--text-2xl); line-height: 1.15; max-width: 26ch; }
.sec-lead { margin-top: var(--space-4); max-width: 62ch; color: var(--ink-2); font-size: 1.05rem; line-height: 1.6; }
/* Riga che chiude una sezione, col grassetto che porta il senso.
Piena sotto un blocco a tutta larghezza; .stretta quando sta in
una colonna accanto a un rail o a una figura; .staccata quando
segue una griglia, che ha bisogno di più aria sopra. */
.sec-close { margin-top: clamp(24px, 3vw, 34px); max-width: 68ch; font-size: 1.05rem; color: var(--ink-2); }
.sec-close.stretta { max-width: 46ch; }
.sec-close.staccata { margin-top: clamp(32px, 4vw, 48px); }
.sec-close b { color: var(--ink); font-weight: 600; }
.band { border-block: 1px solid var(--line); background: var(--bg-2); }
/* Banda più marcata: la usano le sezioni che raccontano il metodo
o la piattaforma, quelle che devono staccare dal resto */
.band-alt { border-block: 1px solid var(--line); background: var(--bg-3); }
/* Sezione a due colonne: testo da una parte, figura o elenco
dall'altra. Il peso sta a sinistra; .peso-dx lo sposta a destra,
.in-alto allinea in cima invece che al centro. Il punto in cui
collassa lo dichiara la pagina: oggi vale 900, 980 o 1000 a
seconda del contenuto. */
.due-col {
display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: clamp(32px, 5vw, 72px); align-items: center;
}
/* I modificatori stanno dentro :where() apposta: così pesano come
la classe base e una regola di pagina con una classe sola resta
in grado di correggerli. Senza, .due-col.peso-dx (due classi)
batterebbe .rete-grid e la sezione non collasserebbe più. */
.due-col:where(.peso-dx) { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
.due-col:where(.in-alto) { align-items: start; }
/* Valore in grassetto che è testo, non numero: niente tabular-nums */
b.txt { font-variant-numeric: normal; }
/* Micro etichetta maiuscola dentro le finestre */
.microlabel { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
/* Banda scura: titolo e lead si adattano da soli */
.sols-band { background: var(--accent); }
.sols-band .sec-title { color: var(--on-accent); }
.sols-band .sec-lead { color: var(--on-accent-soft); }
/* ---------- Segni della famiglia: masse, marcatore, punto ---------- */
.masse { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.masse svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.masse ~ .wrap { position: relative; z-index: 2; }
/* Riempimenti SVG: solo classi, mai colori nel markup (fill-opacity libera per istanza) */
.f-accent { fill: var(--accent); }
.f-acid { fill: var(--accent-2); }
.f-paper { fill: var(--paper); }
.f-ink-deep { fill: var(--on-accent-2); }
.f-line { fill: var(--line); }
.f-dot { fill: var(--map-dot); }
.s-line { stroke: var(--map-line); }
.drift { animation: drift 7s ease-in-out infinite alternate; }
.drift.d2 { animation-duration: 9s; animation-delay: -4s; }
@keyframes drift {
from { transform: translate(0, 0) rotate(0deg) scale(1); }
to { transform: translate(34px, -24px) rotate(2.5deg) scale(1.05); }
}
@keyframes morph {
from { border-radius: 58% 42% 62% 38% / 55% 48% 52% 45%; }
to { border-radius: 40% 60% 36% 64% / 62% 40% 60% 38%; }
}
@keyframes breathe {
from { transform: scale(1) rotate(0deg); }
to { transform: scale(1.06) rotate(2.2deg); }
}
@keyframes bloom { from { opacity: 0; scale: 0.94; } }
/* Blob dell'hero: la massa amorfa dietro la figura di destra.
Geometria e andatura sono le stesse ovunque (drift 8s, non i 7s
di .drift): le poche pagine che deviano correggono top, right e
width sotto la propria classe, non ricopiano la regola. */
.blob {
position: absolute; top: -10%; right: -12%; width: 115%; height: auto; z-index: 0;
animation: bloom 0.8s var(--ease) 120ms backwards, drift 8s ease-in-out 1s infinite alternate;
}
.marker {
padding: 0 0.08em;
background: linear-gradient(var(--accent-2), var(--accent-2)) no-repeat 0 86%;
background-size: 100% 0.32em;
}
.punto {
display: inline-grid; place-items: center; flex: none;
width: 52px; height: 52px; font-size: 1.4rem; color: var(--accent);
background: var(--tint-1);
border-radius: 58% 42% 62% 38% / 55% 48% 52% 45%;
animation: morph 4.5s ease-in-out infinite alternate;
}
/* ---------- Badge, chip, card ---------- */
.pill {
background: var(--accent-2); color: var(--on-accent-2);
border-radius: 999px; padding: 3px var(--space-3); font-size: 0.74rem; font-weight: 600;
white-space: nowrap;
}
.pill.soft { background: var(--wash-dark); color: var(--on-accent); }
.pill.ok { background: var(--accent-2); color: var(--on-accent-2); }
.pill.mut { background: var(--bg-3); color: var(--ink-2); }
.chip {
background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-s);
padding: 13px 14px; font-size: 0.72rem; color: var(--ink-3);
}
.chip b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.chip b.txt { font-size: 1rem; padding-top: var(--space-1); }
/* Card chiara del kit (stessa ricetta della card contatti) */
.card {
background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-m);
box-shadow: var(--shadow-2);
padding: clamp(26px, 3.4vw, 40px);
}
/* ---------- Card scure (griglia Soluzioni) ---------- */
.sols { margin-top: clamp(36px, 5vw, 56px); display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.sol {
background: var(--card-dark); border: 1px solid var(--line-dark); border-radius: var(--radius-m);
padding: 26px; display: grid; gap: var(--space-3); align-content: start;
text-decoration: none;
transition: translate var(--pace) var(--ease), border-color var(--pace) var(--ease);
}
.sol:hover { translate: 0 -2px; border-color: var(--line-dark-2); }
.sol i.ri { font-size: 1.5rem; color: var(--on-accent-soft); }
.sol h3 { font-size: 1.18rem; color: var(--on-accent); }
.sol p { font-size: 1rem; line-height: 1.6; color: var(--on-accent-body); max-width: 48ch; }
.sol:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.sol-link {
margin-top: var(--space-1); width: fit-content;
display: inline-flex; align-items: center; gap: 6px;
font-size: 0.92rem; font-weight: 600; color: var(--accent-2);
}
.sol-link i { transition: translate var(--pace) var(--ease); }
.sol:hover .sol-link span, .sol:focus-visible .sol-link span { text-decoration: underline; text-underline-offset: 3px; }
.sol:hover .sol-link i { translate: 3px 0; }
.sol-cta {
background: transparent; border: 1px solid var(--line-dark-2);
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: var(--space-4) 28px;
}
.sol-cta:hover { border-color: var(--line-dark-3); }
.sol-cta p { margin-top: 6px; }
@media (min-width: 680px) {
.sols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sol-cta { grid-column: 1 / -1; }
}
@media (min-width: 960px) { .sols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* ---------- Stepper (rail delle fasi) ---------- */
/* Pattern vincolante: binario continuo, riempimento a
durata fissa, pulse agganciato al transitionend dal JS della pagina.
Il centro del dot sta a 58px dall'inizio dello step (62 nel JS). */
.rail { list-style: none; margin-top: clamp(30px, 4vw, 44px); display: grid; position: relative; }
.rail::before, .rail::after { content: ""; position: absolute; top: 0; left: 0; width: 2px; height: var(--track, 100%); }
.rail::before { background: var(--line); }
.rail::after {
background: var(--accent); transform-origin: top;
transform: scaleY(var(--p, 0));
transition: transform var(--pace-slow) var(--ease);
}
.rail li { position: relative; z-index: 1; }
.rail li::before {
content: ""; position: absolute; left: -3px; top: 58px; width: 8px; height: 8px;
border-radius: 50%; background: var(--line);
transition: background-color var(--pace) var(--ease);
}
.rail li.done::before, .rail li.active::before { background: var(--accent); }
.rail li.active.pulse::before { animation: pulse 1.6s var(--ease) infinite; }
@keyframes pulse {
from { box-shadow: 0 0 0 0 var(--accent-ring); }
to { box-shadow: 0 0 0 9px transparent; }
}
.rail button {
display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 10px;
width: 100%; text-align: left; background: none; border: none;
font-family: var(--font-text); cursor: pointer; padding: 26px 0 10px 18px;
}
.rail button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rail .n { grid-column: 1; grid-row: 2; align-self: baseline; font-size: 0.78rem; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rail b { grid-column: 2; grid-row: 1; font-size: 1rem; font-weight: 600; color: var(--ink-3); transition: color var(--pace) var(--ease); }
.rail li.active b, .rail li.done b { color: var(--ink); }
.rail span:not(.n) { grid-column: 2; grid-row: 2; align-self: baseline; font-size: 0.9rem; color: var(--ink-3); }
/* ---------- Striscia numeri ---------- */
.nums {
margin-top: clamp(40px, 6vw, 60px);
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
border-top: 1px solid var(--line);
}
.nums > div { border-right: 1px solid var(--line); padding: 26px var(--space-5) 30px; }
.nums > div:last-child { border-right: none; }
.nums i { display: block; font-size: 1.35rem; color: var(--accent); margin-bottom: 10px; }
.nums b {
display: block; font-family: var(--font-display); font-weight: 700;
font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; color: var(--ink);
font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.nums span { display: block; margin-top: var(--space-2); font-size: 0.92rem; color: var(--ink-3); }
@media (max-width: 900px) {
.nums > div { border-right: none; border-bottom: 1px solid var(--line); }
.nums > div:last-child { border-bottom: none; }
}
/* Nota sotto la striscia: da dove vengono i numeri */
.nums-note { margin-top: var(--space-4); font-size: 0.92rem; color: var(--ink-3); }
/* ---------- Elenco con punti amorfi ---------- */
.qlist { display: grid; }
.qitem { display: flex; gap: 20px; padding-block: var(--space-5); border-bottom: 1px solid var(--line); }
.qitem:first-child { border-top: 1px solid var(--line); }
.qitem:last-child { border-bottom: none; }
.qitem .punto { width: 48px; height: 48px; font-size: 1.25rem; }
.qitem:nth-child(2n) .punto { background: var(--tint-2); }
.qitem:nth-child(2) .punto, .qitem:nth-child(5) .punto { animation-delay: -1.5s; }
.qitem:nth-child(4) .punto { animation-delay: -3s; }
.qitem h3 { font-size: 1.05rem; }
.qitem p { margin-top: var(--space-1); font-size: 0.92rem; color: var(--ink-2); max-width: 48ch; }
/* ---------- Form ---------- */
.contact {
background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-m);
box-shadow: var(--shadow-2);
padding: clamp(26px, 3.4vw, 40px);
}
.contact h3 { font-size: 1.35rem; }
.form-hint { margin-top: var(--space-2); margin-bottom: var(--space-5); font-size: 0.93rem; color: var(--ink-2); }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.field input, .field textarea, .field select {
width: 100%; margin-top: 7px; padding: var(--space-3) 14px;
font: inherit; font-size: 0.95rem; line-height: 1.4; color: var(--ink);
background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-s);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.field input:user-invalid, .field textarea:user-invalid, .field select:user-invalid { border-color: var(--err); }
.field textarea { resize: vertical; min-height: 120px; }
/* Marca i campi che si possono saltare: sta nella label, accanto al nome */
.opz { font-weight: 500; color: var(--ink-3); }
.contact [type="submit"] { width: 100%; margin-top: var(--space-1); }
.form-note { margin-top: 14px; font-size: 0.8rem; color: var(--ink-3); }
.form-ok { display: grid; justify-items: start; gap: 10px; padding-block: 6px; }
.form-ok[hidden] { display: none; }
.form-ok .punto { color: var(--accent); background: var(--tint-1); }
.form-ok h3 { font-size: 1.25rem; }
.form-ok p { font-size: 0.95rem; color: var(--ink-2); max-width: 40ch; }
/* Alert di invio non riuscito: lo inserisce js/main.js in cima ai campi */
.form-err { margin-bottom: var(--space-5); }
/* Campo esca dei form (include/contatto.php): esiste solo per i bot, che
compilano tutto quello che trovano. Fuori dallo schermo e non
"display: none", che i bot scritti bene riconoscono e saltano. */
.hp {
position: absolute; left: -9999px; top: auto;
width: 1px; height: 1px; overflow: hidden;
}
/* Testo solo per le tecnologie assistive (caption di tabella, etichette):
fuori dal flusso e invisibile, ma letto dagli screen reader */
.sr-only {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Select: wrapper con freccia Remix nel markup
*/
.select { position: relative; margin-top: 7px; }
.select select { margin-top: 0; appearance: none; padding-right: 40px; cursor: pointer; }
.select > i {
position: absolute; right: 12px; top: 50%; translate: 0 -50%;
pointer-events: none; color: var(--ink-3); font-size: 1.1rem;
}
/* Checkbox (consenso privacy e simili) */
.check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px; cursor: pointer; }
.check input {
width: 18px; height: 18px; margin-top: 2px; flex: none;
accent-color: var(--accent); cursor: pointer;
}
.check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.check span { font-size: 0.88rem; line-height: 1.5; color: var(--ink-2); }
/* Stati dei campi via classe (validazione JS). Mai solo colore:
il messaggio porta icona e testo. */
.field.err input, .field.err textarea, .field.err select { border-color: var(--err); }
.field.ok input, .field.ok textarea, .field.ok select { border-color: var(--ok); }
.field-msg { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; font-size: 0.82rem; }
.field-msg.err { color: var(--err); }
.field-msg.ok { color: var(--ok); }
/* ---------- Alert ---------- */
/* ---------- Riquadro di riferimento (indirizzo, documento) ---------- */
.addr {
margin-top: clamp(24px, 3vw, 36px);
background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-m);
padding: 20px 22px;
}
.addr b { display: block; font-size: 1rem; color: var(--ink); }
.addr p { margin-top: var(--space-1); font-size: 0.92rem; line-height: 1.6; color: var(--ink-2); }
.addr a {
margin-top: var(--space-3);
display: inline-flex; align-items: center; gap: 8px;
color: var(--ink); text-decoration: none; font-weight: 600;
}
.addr a i { color: var(--accent); }
/* L'underline sta sul solo testo: se corre sotto tutto il link taglia anche l'icona */
.addr a:hover { color: var(--accent); }
.addr a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.addr a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Bordo pieno e fondo tinto: mai striscia laterale. Icona obbligatoria. */
.alert {
display: flex; align-items: flex-start; gap: var(--space-3);
border: 1px solid; border-radius: var(--radius-s);
padding: 14px var(--space-4); font-size: 0.92rem; line-height: 1.5;
}
.alert i { flex: none; font-size: 1.15rem; margin-top: 1px; }
.alert b { display: block; font-weight: 600; }
.alert p { color: var(--ink-2); }
.alert.err { background: var(--err-bg); border-color: var(--err); }
.alert.err i, .alert.err b { color: var(--err); }
.alert.warn { background: var(--warn-bg); border-color: var(--warn); }
.alert.warn i, .alert.warn b { color: var(--warn); }
.alert.ok { background: var(--ok-bg); border-color: var(--ok); }
.alert.ok i, .alert.ok b { color: var(--ok); }
/* ---------- Kicker ---------- */
.kicker {
display: inline-block; font-size: var(--text-xs); font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent);
}
/* ---------- Hero interno ---------- */
.page-hero { border-bottom: 1px solid var(--line); }
.page-hero .wrap { padding-block: clamp(56px, 8vw, 104px); display: grid; gap: 18px; justify-items: start; }
.page-hero h1 { font-size: var(--text-3xl); line-height: 1.08; letter-spacing: -0.02em; max-width: 20ch; }
.page-hero .lead { font-size: 1.08rem; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.page-hero .lseq { display: grid; gap: 18px; justify-items: start; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--space-3); }
/* Hero interno a due colonne: testo a sinistra, figura a destra.
Sotto i 900px la figura scende sotto e si allinea a sinistra.
Chi ha una figura più larga o più stretta corregge la sola
width di .fig-col. L'hero della homepage NON usa questo
componente: è più alto e ha un collasso suo, in .p-home. */
.hero-2col .wrap {
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: clamp(32px, 5vw, 64px); align-items: center;
}
.fig-col { position: relative; justify-self: end; width: min(100%, 440px); }
@media (max-width: 900px) {
.hero-2col .wrap { grid-template-columns: minmax(0, 1fr); }
.fig-col { justify-self: start; }
}
/* ---------- Sezione col rail delle fasi ---------- */
.flow .wrap {
display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
gap: clamp(32px, 5vw, 72px); align-items: start;
}
.flow .rail { margin-top: var(--space-2); }
@media (max-width: 1000px) { .flow .wrap { grid-template-columns: minmax(0, 1fr); } }
/* ---------- Capacita': griglia con filetto in testa ---------- */
/* Icona, titolo, riga di testo: il modo standard di elencare cosa
sappiamo fare. Tre colonne, in colonna singola sotto gli 860px.
Chi ne ha bisogno cambia il numero di colonne, non la scheda. */
.cap-grid {
margin-top: clamp(32px, 4vw, 48px);
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-6) clamp(20px, 3vw, 40px);
}
.cap { border-top: 1px solid var(--line); padding-top: var(--space-4); }
.cap i { font-size: 1.35rem; color: var(--accent); }
.cap .punto i { font-size: inherit; }
.cap h3 { margin-top: var(--space-3); font-size: 1.05rem; }
.cap p { margin-top: var(--space-1); max-width: 44ch; color: var(--ink-2); font-size: 0.92rem; line-height: 1.55; }
@media (max-width: 860px) {
.cap-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.cap { padding-block: var(--space-4) var(--space-5); }
}
/* ---------- Finestra della piattaforma ---------- */
/* Il frammento di prodotto che compare in cinque pagine: barra in
testa, corpo, elenco di appuntamenti. */
/* Dove la finestra sta sopra un blob va alzata con position e
z-index */
.app {
background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-m);
box-shadow: var(--shadow-2); overflow: clip;
}
.app-bar {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
padding: var(--space-4) 20px; border-bottom: 1px solid var(--line);
font-size: 0.8rem; font-weight: 600; color: var(--ink-3);
}
.app-bar > span:first-child { color: var(--ink-2); }
/* La colonna è minmax(0,1fr) e non auto: senza, la griglia si allarga al
min-content dei figli (le tre chip) e l'overflow: clip della finestra
taglia via il bordo destro sugli schermi stretti */
.app-body { padding: var(--space-5) 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.app-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.app-cols { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--space-4); }
/* Come .app-body: colonna a minmax(0,1fr), altrimenti le righe si allargano
al testo (nowrap) e la pill di stato finisce fuori dalla lista */
.app-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-content: start; border: 1px solid var(--line); border-radius: var(--radius-s); overflow: clip; }
.app-list header { padding: var(--space-3) 14px; font-size: 0.74rem; font-weight: 600; color: var(--ink-3); border-bottom: 1px solid var(--line); background: var(--bg); }
.appt { display: flex; align-items: center; gap: 10px; padding: 14px; border-bottom: 1px solid var(--line); font-size: 0.82rem; }
.appt:last-child { border-bottom: none; }
.appt time { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; flex: none; }
.appt .who { flex: 1; min-width: 0; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appt .pill { margin-left: auto; }
.app-map { border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--bg); position: relative; overflow: clip; min-height: 190px; }
.app-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.app-map figcaption { position: absolute; left: 10px; bottom: 8px; font-size: 0.7rem; color: var(--ink-3); }
.app-rep {
display: flex; align-items: center; gap: 10px;
border: 1px solid var(--line); border-radius: var(--radius-s);
padding: 15px 14px; font-size: 0.82rem; color: var(--ink-2);
}
.app-rep i { color: var(--accent); font-size: 1.05rem; }
.app-rep .who { flex: 1; min-width: 0; }
/* Sul telefono la finestra ha ~300px utili: tre chip in riga non ci stanno
("nazionale" da sola è più larga della cella), quindi vanno a due */
@media (max-width: 620px) {
.app-body { padding: var(--space-4) var(--space-4); gap: var(--space-4); }
.app-bar { padding: var(--space-3) var(--space-4); }
.app-chips { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.app-cols { grid-template-columns: minmax(0, 1fr); }
}
/* Evidenziazione sincronizzata col rail delle fasi */
.lit { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.app-bar.lit { outline-offset: -3px; }
/* ---------- Scheda prugna (mockup dell'hero) ---------- */
.mockup {
position: relative; z-index: 1; width: min(100%, 380px);
background: var(--accent); color: var(--on-accent);
border-radius: var(--radius-m); padding: var(--space-5);
box-shadow: var(--shadow-2);
}
.mockup h2 { font-family: var(--font-text); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; color: var(--on-accent-soft); }
.mockup .row {
display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
padding: var(--space-3) 0; border-bottom: 1px solid var(--line-dark); font-size: 0.9rem;
}
.mockup .row:last-child { border-bottom: none; padding-bottom: 0; }
.mockup .row b { font-weight: 600; text-align: right; }
/* ---------- Trio di pilastri ---------- */
/* Tre colonne con filetto in testa e punto amorfo, impilate
sotto i 900px col filetto che passa sotto */
.trio {
margin-top: clamp(40px, 6vw, 64px);
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0 clamp(20px, 3vw, 40px);
}
.trio > div { border-top: 1px solid var(--line); padding-top: var(--space-5); }
.trio > div:nth-child(2) .punto { background: var(--tint-2); animation-delay: -1.5s; }
.trio > div:nth-child(3) .punto { animation-delay: -3s; }
.trio h3 { font-size: 1.15rem; margin-top: var(--space-4); }
.trio p { margin-top: var(--space-2); font-size: 0.95rem; color: var(--ink-2); max-width: 38ch; }
@media (max-width: 900px) {
.trio { grid-template-columns: minmax(0, 1fr); gap: 0; }
.trio > div { padding-block: 22px; border-top: none; border-bottom: 1px solid var(--line); }
.trio > div:first-child { border-top: 1px solid var(--line); }
}
/* ---------- Sezione qualita': testo a sinistra, chip a destra ---------- */
.qual .wrap {
display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: clamp(32px, 5vw, 72px); align-items: center;
}
.qual .sec-lead { max-width: 52ch; }
.qual .btn { margin-top: var(--space-6); }
/* Griglie di chip: due o quattro per riga, le quattro si
dimezzano sotto i 900px */
.chips-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.chips-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
@media (max-width: 900px) {
.qual .wrap { grid-template-columns: minmax(0, 1fr); }
.chips-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ---------- Banda "hai bisogno di aiuto" ---------- */
.help .wrap { display: grid; justify-items: center; text-align: center; }
.help h2 { font-size: var(--text-xl); max-width: 30ch; }
.help p { margin-top: var(--space-4); max-width: 62ch; font-size: 1.02rem; line-height: 1.6; color: var(--ink-2); }
.help-tel {
margin-top: var(--space-5); display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl);
color: var(--ink); text-decoration: none;
}
.help-tel i { color: var(--accent); font-size: 1.2em; }
.help-tel:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.help-tel:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* ---------- Banda finale acida ---------- */
/* La homepage ne fa una versione a due colonne col form: tiene il
suo layout in pagina. .centrata è la chiusura con una sola CTA. */
.final { background: var(--accent); }
.final.centrata .wrap { padding-block: clamp(72px, 10vw, 132px); }
.final.centrata .wrap > div {
display: grid; gap: 18px; justify-items: center;
text-align: center; margin-inline: auto;
}
.final.centrata h2 { color: var(--on-accent); font-size: var(--text-3xl); line-height: 1.1; max-width: 20ch; }
.final.centrata p { max-width: 56ch; font-size: 1.08rem; line-height: 1.6; color: var(--on-accent-soft); }
.final.centrata .btn { margin-top: var(--space-3); }
/* ---------- Tabella ---------- */
.table-wrap { border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--bg-2); overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.table th {
text-align: left; font-size: var(--text-xs); font-weight: 600;
letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3);
padding: 14px var(--space-4); border-bottom: 1px solid var(--line); background: var(--bg);
white-space: nowrap;
}
.table td { padding: 13px var(--space-4); border-bottom: 1px solid var(--line); color: var(--ink-2); }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--wash); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
/* ---------- Corpo testo pagine legali/interne ---------- */
.doc { max-width: 68ch; }
.doc h2 { font-size: var(--text-xl); margin-top: var(--space-7); }
.doc h2:first-child { margin-top: 0; }
.doc p { margin-top: var(--space-4); color: var(--ink-2); line-height: 1.6; }
.doc p:first-child { margin-top: 0; }
.doc ul { margin-top: var(--space-4); padding-left: var(--space-5); display: grid; gap: var(--space-2); color: var(--ink-2); line-height: 1.6; }
.doc ul li::marker { color: var(--accent); }
.doc a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.doc a:hover { color: var(--accent-hover); }
.doc a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.doc .table-wrap { margin-top: var(--space-5); }
.doc .acc-list { margin-top: var(--space-6); }
.doc .alert { margin-top: var(--space-5); }
.doc .addr a { text-decoration: none; }
.doc .qlist { margin-top: var(--space-6); }
/* ---------- Accordion (details/summary nativo) ---------- */
.acc { border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--bg-2); }
.acc + .acc { margin-top: 10px; }
.acc summary {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
padding: 18px 20px; cursor: pointer; list-style: none;
font-weight: 600; font-size: 1.02rem; color: var(--ink);
border-radius: var(--radius-m);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.acc summary i { flex: none; color: var(--ink-3); transition: rotate var(--pace) var(--ease); }
.acc[open] summary i { rotate: 45deg; }
.acc-body { padding: 0 20px 20px; font-size: 0.95rem; line-height: 1.6; color: var(--ink-2); max-width: 65ch; }
.acc[open] .acc-body { animation: rise 0.3s var(--ease) backwards; }
/* ---------- Tab ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); }
.tabs [role="tab"] {
border: none; background: none; cursor: pointer;
font-family: var(--font-text); font-size: 0.95rem; font-weight: 600; color: var(--ink-3);
padding: var(--space-3) var(--space-4); margin-bottom: -1px;
border-bottom: 2px solid transparent;
border-radius: var(--radius-s) var(--radius-s) 0 0;
transition: color var(--pace) var(--ease), background-color var(--pace) var(--ease);
}
.tabs [role="tab"]:hover { color: var(--ink); background: var(--wash); }
.tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tabs [role="tab"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tab-panel { padding-block: 20px; }
.tab-panel[hidden] { display: none; }
/* ---------- Banda di contatto condivisa ---------- */
/* Chiude le pagine Soluzioni (include/form-contatto.php):
stessa ricetta a due colonne della sezione finale della homepage,
mai il solo testo centrato. Il form .contact è definito sopra. */
.form-band { background: var(--accent); }
.form-band .wrap {
display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
gap: clamp(36px, 5vw, 80px); align-items: center;
padding-block: clamp(72px, 10vw, 132px);
}
.form-band h2 { color: var(--on-accent); font-size: var(--text-3xl); line-height: 1.1; max-width: 18ch; }
.form-band .wrap > div > p { margin-top: 18px; max-width: 56ch; font-size: 1.08rem; line-height: 1.6; color: var(--on-accent-soft); }
@media (max-width: 980px) { .form-band .wrap { grid-template-columns: minmax(0, 1fr); } }
/* ---------- Footer ---------- */
.site-foot { border-top: 1px solid var(--line); background: var(--bg); }
.foot-main {
display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 0.7fr)); gap: var(--space-6);
padding-block: clamp(40px, 6vw, 64px);
}
.foot-main .logo { height: 22px; }
.foot-claim { margin-top: 14px; font-size: 0.9rem; color: var(--ink-3); max-width: 34ch; }
.foot-tel { margin-top: var(--space-4); }
.foot-tel a {
display: inline-flex; align-items: center; gap: 8px;
color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1.02rem;
}
.foot-tel a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.foot-tel a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.foot-tel i { font-size: 1.1em; color: var(--accent); }
.foot-legal { margin-top: var(--space-3); font-size: 0.8rem; line-height: 1.6; color: var(--ink-3); max-width: 34ch; }
.foot-col h3 { font-family: var(--font-text); font-size: 0.8rem; font-weight: 600; color: var(--ink-3); margin-bottom: var(--space-3); }
.foot-col > a { display: block; padding: 6px 0; color: var(--ink-2); text-decoration: none; font-size: 0.92rem; }
.foot-col > a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot-col > a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.socials { display: flex; gap: 10px; }
.socials a {
display: grid; place-items: center; width: 42px; height: 42px;
border: 1px solid var(--line); border-radius: var(--radius-s);
color: var(--ink-2); text-decoration: none; font-size: 1.15rem;
}
.socials a:hover { color: var(--accent); border-color: var(--accent); }
.socials a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.foot-base {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5);
border-top: 1px solid var(--line); padding-block: 20px;
font-size: 0.82rem; color: var(--ink-3);
}
.foot-base a { color: var(--ink-2); text-decoration: none; }
.foot-base a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot-base a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 1080px) {
.foot-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.foot-main > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 620px) { .foot-main { grid-template-columns: 1fr; gap: 26px; } }
/* ---------- Motion: reveal additivo ---------- */
@keyframes rise { from { opacity: 0; translate: 0 22px; } }
.js [data-reveal].in { animation: rise 0.6s var(--ease) backwards; }
.js [data-stagger].in > * { animation: rise 0.5s var(--ease) backwards; }
.js [data-stagger].in > *:nth-child(2) { animation-delay: 110ms; }
.js [data-stagger].in > *:nth-child(3) { animation-delay: 220ms; }
.js [data-stagger].in > *:nth-child(4) { animation-delay: 330ms; }
.js [data-stagger].in > *:nth-child(5) { animation-delay: 440ms; }
.js [data-stagger].in > *:nth-child(6) { animation-delay: 550ms; }
.js [data-stagger].in > *:nth-child(7) { animation-delay: 660ms; }
.form-ok.in { animation: rise 0.45s var(--ease) backwards; }
/* Sequenza di carico (hero e teste di pagina) */
.lseq > * { animation: rise 0.55s var(--ease) backwards; }
.lseq > *:nth-child(2) { animation-delay: 90ms; }
.lseq > *:nth-child(3) { animation-delay: 180ms; }
/* Entrata dell'hero, uguale su tutte le pagine: il marcatore acido
che si riempie, la figura di destra che scorre da fuori, la quarta
riga della sequenza (le CTA) che chiude. Il blob sta coi segni
della famiglia perché la sua geometria e la sua andatura sono
una cosa sola. */
@keyframes markerGrow { from { background-size: 0 0.32em; } }
@keyframes slidein { from { opacity: 0; translate: 34px 0; } }
.hero .marker, .page-hero .marker { animation: markerGrow 0.6s var(--ease) 500ms backwards; }
/* La figura dell'hero sta sempre sopra il blob: position e z-index
qui, non ripetuti da ogni finestra */
.hero-in { position: relative; z-index: 1; animation: slidein 0.65s var(--ease) 220ms backwards; }
.hero .lseq > :nth-child(4), .page-hero .lseq > :nth-child(4) { animation-delay: 270ms; }
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.js [data-reveal].in, .js [data-stagger].in > * { animation: none; }
.lseq > *, .form-ok.in { animation: none !important; }
.drift, .punto, .blob, .hero-in { animation: none !important; }
.hero .marker, .page-hero .marker { animation: none !important; }
.btn, .sol, .btn .ri-send-plane-line, .sol-link i { transition: none; }
.nav-dd > button > i, .dd-panel { transition: none; }
.site-nav, .site-head[data-open] .site-nav > * { transition: none; }
.site-nav > * { opacity: 1; translate: none; }
.acc-panel { transition: none; }
.rail::after, .rail li::before { transition: none; }
.rail li.active.pulse::before { animation: none; }
.btn.is-loading::after { animation: none; }
.acc[open] .acc-body { animation: none; }
.acc summary i { transition: none; }
.tabs [role="tab"] { transition: none; }
}
/* ############################################################
3 · PAGINE
############################################################ */
/* ------------------------------------------------------------
.p-accedi (accedi.php)
------------------------------------------------------------ */
/* ---------- Testata compatta ---------- */
.p-accedi .doors-head .wrap { padding-block: clamp(40px, 6vw, 72px) 0; display: grid; gap: 14px; justify-items: start; }
.p-accedi .doors-head h1 { font-size: var(--text-2xl); line-height: 1.12; }
/* ---------- Le tre porte ---------- */
.p-accedi .doors {
padding-block: clamp(28px, 4vw, 48px) var(--sec-pad);
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: clamp(20px, 3vw, 32px);
}
/* La card è il contenitore, non il link: il rimando in fondo contiene a sua
volta un link e non può stare dentro l' della porta. Le tre card restano
di pari altezza (stretch della griglia) e le frecce allineate in fondo. */
.p-accedi .door-card {
/* subgrid: porta e piede prendono la stessa altezza nelle tre card,
così i bordi dei rimandi restano allineati anche a testi diversi */
grid-row: span 2; display: grid; grid-template-rows: subgrid;
row-gap: 0; /* il subgrid eredita il gap della griglia: qui le due righe si toccano */
background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-m);
box-shadow: var(--shadow-1); overflow: clip;
transition: translate var(--pace) var(--ease), box-shadow var(--pace) var(--ease), border-color var(--pace) var(--ease);
}
/* La card non è cliccabile: l'ombra segna solo dove sta il puntatore,
senza il sollevamento che prometterebbe un click su tutto il box */
.p-accedi .door-card:hover { box-shadow: var(--shadow-2); }
/* Porta: il testo della scelta, l'azione è il bottone in fondo */
.p-accedi .door {
display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3);
padding: clamp(24px, 3vw, 32px);
}
.p-accedi .door .punto { width: 76px; height: 76px; font-size: 2rem; }
.p-accedi .door-card:nth-child(2) .punto { background: var(--tint-2); animation-delay: -1.5s; }
.p-accedi .door-card:nth-child(3) .punto { background: var(--tint-3); animation-delay: -3s; }
.p-accedi .door h2 { font-size: 1.35rem; }
.p-accedi .door p { font-size: 0.95rem; line-height: 1.55; color: var(--ink-2); max-width: 40ch; }
/* Unica azione della porta: bottone secondario, tutti alla stessa altezza
perché la card è subgrid e il bottone si spinge in fondo */
.p-accedi .door-go { margin-top: auto; }
.p-accedi .door-go i { transition: translate var(--pace) var(--ease); }
.p-accedi .door-go:hover i { translate: 3px 0; }
/* Piede della card: staccato da un bordo, fondo appena diverso */
.p-accedi .door-alt {
padding: var(--space-4) clamp(24px, 3vw, 32px);
border-top: 1px solid var(--line); background: var(--bg);
font-size: 0.9rem; line-height: 1.5; color: var(--ink-2);
}
.p-accedi .door-alt a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.p-accedi .door-alt a:hover { color: var(--accent-hover); }
.p-accedi .door-alt a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ---------- Nota PSP e aiuto ---------- */
.p-accedi .psp-note .wrap { padding-block: clamp(28px, 4vw, 44px); }
.p-accedi .psp-note p { max-width: 68ch; font-size: 1.02rem; line-height: 1.6; color: var(--ink-2); }
/* Chiusura centrata: allineata a sinistra lasciava mezza banda vuota */
/* ------------------------------------------------------------
.p-chi-siamo (chi-siamo.php)
------------------------------------------------------------ */
/* ---------- Hero con la scheda dell'azienda ---------- */
/* Specchietto proprio della pagina: niente scheda dati,
la composizione di maschere amorfe: è la pagina dell'identità */
.p-chi-siamo .cs-fig { aspect-ratio: 44 / 36; }
.p-chi-siamo .cs-fig svg { position: absolute; width: 56%; height: auto; overflow: visible; }
.p-chi-siamo .cs-fig svg path { transform-box: fill-box; transform-origin: center; animation: breathe 5s ease-in-out infinite alternate; }
.p-chi-siamo .cs-m1 { left: 2%; top: 2%; }
.p-chi-siamo .cs-m2 { right: 0; top: 24%; }
.p-chi-siamo .cs-m2 path { animation-delay: -1.8s; }
.p-chi-siamo .cs-m3 { left: 16%; bottom: 0; }
.p-chi-siamo .cs-m3 path { animation-delay: -3.4s; }
.p-chi-siamo .cs-dot {
position: absolute; right: 14%; bottom: 16%; z-index: 1;
width: 42px; height: 42px; background: var(--accent-2);
border-radius: 58% 42% 62% 38% / 55% 48% 52% 45%;
animation: morph 4.5s ease-in-out infinite alternate;
}
@media (max-width: 900px) { .p-chi-siamo .cs-fig { max-width: 340px; } }
/* ---------- Perché esiste ---------- */
.p-chi-siamo .perche .sec-lead { max-width: 68ch; }
.p-chi-siamo .perche-close { margin-top: clamp(28px, 4vw, 44px); font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: 1.25; color: var(--ink); max-width: 32ch; text-wrap: balance; }
/* ---------- Ecosistema: gli attori ---------- */
.p-chi-siamo .eco-chips { margin-top: clamp(24px, 3vw, 34px); max-width: 980px; }
/* Chiusura più corta: sta accanto ai chip */
.p-chi-siamo .eco-close { max-width: 62ch; }
/* ---------- Piattaforma cresciuta coi progetti ---------- */
/* Testo a sinistra, finestra dei flussi a destra: il solo testo
col bottone lasciava metà sezione vuota */
.p-chi-siamo .crescita .sec-lead { max-width: 52ch; }
.p-chi-siamo .crescita .btn { margin-top: var(--space-6); }
.p-chi-siamo .cre-win {
justify-self: end; width: min(100%, 400px);
background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-m);
box-shadow: var(--shadow-2); overflow: clip;
}
.p-chi-siamo .cre-bar {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
padding: 14px 18px; border-bottom: 1px solid var(--line);
font-size: 0.78rem; font-weight: 600; color: var(--ink-2);
}
.p-chi-siamo .cre-row {
display: flex; align-items: center; gap: 10px; padding: 11px 18px;
border-bottom: 1px solid var(--line); font-size: 0.85rem; color: var(--ink-2);
}
.p-chi-siamo .cre-row:last-child { border-bottom: none; }
.p-chi-siamo .cre-row i { flex: none; font-size: 1.05rem; color: var(--accent); }
@media (max-width: 900px) {
.p-chi-siamo .crescita .wrap { grid-template-columns: minmax(0, 1fr); }
.p-chi-siamo .cre-win { justify-self: start; }
}
/* ---------- Motion di pagina ---------- */
.p-chi-siamo .cs-fig svg, .p-chi-siamo .cs-dot { animation-name: bloom; animation-duration: 0.8s; animation-timing-function: var(--ease); animation-fill-mode: backwards; }
/* Il respiro vive sui path (entrata sul contenitore, ciclo sul figlio:
così non si sovrascrivono nella stessa shorthand) */
.p-chi-siamo .cs-fig .cs-m1 { animation-delay: 120ms; }
.p-chi-siamo .cs-fig .cs-m2 { animation-delay: 240ms; }
.p-chi-siamo .cs-fig .cs-m3 { animation-delay: 360ms; }
.p-chi-siamo .cs-dot { animation: bloom 0.6s var(--ease) 640ms backwards, morph 4.5s ease-in-out 1.4s infinite alternate; }
@media (prefers-reduced-motion: reduce) {
/* Le maschere non sono un blob: qui il fermo va dichiarato a parte */
.p-chi-siamo .cs-fig svg, .p-chi-siamo .cs-fig svg path, .p-chi-siamo .cs-dot { animation: none !important; }
}
/* ------------------------------------------------------------
.p-clinical-operations (clinical-operations.php)
------------------------------------------------------------ */
/* ---------- Hero con scheda del programma ---------- */
/* Nella finestra dell'hero la barra è tutta in ink-2 */
.p-clinical-operations .hero-in .app-bar { color: var(--ink-2); }
/* Figura più larga della base */
.p-clinical-operations .co-fig { width: min(100%, 470px); }
/* Specchietto proprio della pagina: l'agenda della
settimana con le sessioni pianificate sui centri */
.p-clinical-operations .co-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); padding: 18px 20px 10px; }
.p-clinical-operations .co-day { display: grid; gap: 6px; align-content: start; }
.p-clinical-operations .co-ses {
padding: 7px 8px; border-radius: var(--radius-s);
background: var(--tint-1); font-size: 0.72rem; line-height: 1.3; color: var(--ink);
}
.p-clinical-operations .co-ses b { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.p-clinical-operations .co-ses.t2 { background: var(--tint-2); }
.p-clinical-operations .co-ses.t3 { background: var(--tint-3); }
.p-clinical-operations .co-ses.now { background: var(--accent-2); color: var(--on-accent-2); }
.p-clinical-operations .co-foot { display: flex; align-items: center; gap: 10px; padding: 12px 20px 16px; font-size: 0.8rem; color: var(--ink-3); }
.p-clinical-operations .co-foot i { color: var(--accent); }
/* ---------- Il metodo: rail + finestra con zone ---------- */
/* Stessa ricetta della sezione piattaforma della homepage */
@media (max-width: 1000px) {
.p-clinical-operations .metodo .wrap { grid-template-columns: minmax(0, 1fr); }
.p-clinical-operations .app-cols { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- Scenario reale e numeri ---------- */
.p-clinical-operations .scen .sec-lead { max-width: 68ch; }
/* ------------------------------------------------------------
.p-contatti (contatti.php)
------------------------------------------------------------ */
/* ---------- Percorsi + form ---------- */
.p-contatti .cont { padding-block: clamp(40px, 6vw, 72px) var(--sec-pad); }
/* Colonne più distanti del solito */
.p-contatti .cont .wrap { gap: clamp(36px, 5vw, 80px); }
.p-contatti .vie h2 { font-size: var(--text-xl); max-width: 26ch; }
.p-contatti .vie .qlist { margin-top: clamp(20px, 3vw, 32px); }
.p-contatti .vie .qitem { padding-block: var(--space-4); }
.p-contatti .vie .qitem .punto { width: 44px; height: 44px; font-size: 1.15rem; }
.p-contatti .vie .qitem h3 { font-size: 1rem; }
.p-contatti .vie .qitem p { font-size: 0.9rem; }
.p-contatti .vie .qitem a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.p-contatti .vie .qitem a:hover { color: var(--accent-hover); }
.p-contatti .vie .qitem a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 980px) { .p-contatti .cont .wrap { grid-template-columns: minmax(0, 1fr); } }
/* ------------------------------------------------------------
.p-corporate-welfare (corporate-welfare.php)
------------------------------------------------------------ */
/* ---------- Hero con scheda della giornata ---------- */
/* Nella finestra dell'hero la barra è tutta in ink-2 */
.p-corporate-welfare .hero-in .app-bar { color: var(--ink-2); }
/* Specchietto proprio della pagina: gli slot della
giornata della prevenzione che si riempiono di prenotazioni */
.p-corporate-welfare .cw-body { padding: 18px 20px; }
.p-corporate-welfare .cw-slots { margin-top: 10px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.p-corporate-welfare .cw-slot {
padding: 8px 4px; text-align: center;
border: 1px solid var(--line); border-radius: var(--radius-s);
font-size: 0.75rem; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.p-corporate-welfare .cw-slot.full { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.p-corporate-welfare .cw-slot.now { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent-2); font-weight: 600; }
.p-corporate-welfare .cw-foot {
display: flex; align-items: center; gap: 10px;
padding: 14px 20px; border-top: 1px solid var(--line);
font-size: 0.8rem; color: var(--ink-3);
}
.p-corporate-welfare .cw-foot i { color: var(--accent); }
.p-corporate-welfare .cw-foot b { color: var(--ink); }
/* ------------------------------------------------------------
.p-home-care (home-care.php)
------------------------------------------------------------ */
/* ---------- Hero con scheda della richiesta ---------- */
/* Nella finestra dell'hero la barra è tutta in ink-2 */
.p-home-care .hero-in .app-bar { color: var(--ink-2); }
/* Figura più larga della base */
.p-home-care .hc-fig { width: min(100%, 460px); }
/* Specchietto proprio della pagina: la mappa di
assegnazione in finestra chiara, con la richiesta appoggiata */
.p-home-care .hc-map { position: relative; min-height: 250px; background: var(--bg); }
.p-home-care .hc-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.p-home-care .hc-map figcaption { position: absolute; right: 12px; bottom: 8px; font-size: 0.7rem; color: var(--ink-3); }
.p-home-care .hc-req {
display: flex; align-items: center; gap: var(--space-3);
padding: 15px 20px; border-top: 1px solid var(--line);
font-size: 0.9rem; color: var(--ink-2);
}
.p-home-care .hc-req i { flex: none; font-size: 1.1rem; color: var(--accent); }
.p-home-care .hc-req b { display: block; font-size: 0.95rem; color: var(--ink); }
.p-home-care .hc-req .det { display: block; margin-top: 1px; font-size: 0.8rem; color: var(--ink-3); }
.p-home-care .hc-req .pill { margin-left: auto; flex: none; }
/* ---------- Per chi è pensato ---------- */
/* Registro su due colonne piene: quattro voci brevi, che in
colonna singola allungherebbero troppo la sezione */
.p-home-care .perchi .qlist {
margin-top: clamp(32px, 4vw, 48px);
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: clamp(32px, 5vw, 72px);
}
.p-home-care .perchi .qitem:nth-child(2) { border-top: 1px solid var(--line); }
.p-home-care .perchi .qitem:nth-last-child(2) { border-bottom: none; }
@media (max-width: 900px) {
.p-home-care .perchi .qlist { grid-template-columns: minmax(0, 1fr); }
.p-home-care .perchi .qitem:nth-child(2) { border-top: none; }
.p-home-care .perchi .qitem:nth-last-child(2) { border-bottom: 1px solid var(--line); }
}
/* ---------- Reti di punti fisici: il flusso B2B2C ---------- */
.p-home-care .b2b-band .wrap {
display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: clamp(32px, 5vw, 72px); align-items: center;
}
/* Diagramma: punto di accesso, coordinamento, casa del paziente */
.p-home-care .b2b-fig { justify-self: end; display: grid; gap: var(--space-4); width: min(100%, 380px); }
.p-home-care .b2b-step {
display: flex; align-items: center; gap: var(--space-4);
background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-m);
padding: var(--space-4) 20px;
}
.p-home-care .b2b-step .punto { flex: none; }
.p-home-care .b2b-step:nth-child(3) .punto { background: var(--tint-2); animation-delay: -1.5s; }
.p-home-care .b2b-step:nth-child(5) .punto { background: var(--tint-3); animation-delay: -3s; }
/* Testo del passaggio: solo lo span dentro il div, altrimenti la
riga tocca anche span.punto e schiaccia l'icona in un angolo */
.p-home-care .b2b-step b { display: block; font-size: 1rem; color: var(--ink); }
.p-home-care .b2b-step > div span { display: block; margin-top: 2px; font-size: 0.85rem; color: var(--ink-3); }
.p-home-care .b2b-arrow { justify-self: center; color: var(--accent); font-size: 1.3rem; line-height: 1; }
@media (max-width: 1000px) {
.p-home-care .b2b-band .wrap { grid-template-columns: minmax(0, 1fr); }
.p-home-care .b2b-fig { justify-self: start; }
}
/* ---------- Copertura e numeri ---------- */
.p-home-care .rete .coverage { margin-top: 22px; font-size: 1.05rem; color: var(--ink-2); max-width: 56ch; }
/* ------------------------------------------------------------
.p-home (index.php)
------------------------------------------------------------ */
/* ---------- Hero ---------- */
.p-home .hero { border-bottom: 1px solid var(--line); }
.p-home .hero .wrap {
display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: clamp(32px, 5vw, 64px); align-items: center;
padding-block: clamp(64px, 9vw, 124px);
}
.p-home .hero h1 {
font-size: var(--text-4xl);
line-height: 1.06; letter-spacing: -0.02em; max-width: 17ch;
}
.p-home .hero .sub { margin-top: 20px; max-width: 56ch; font-size: 1.08rem; line-height: 1.6; color: var(--ink-2); }
/* L'hero della home è più alto: le CTA staccano di più */
.p-home .hero-cta { margin-top: var(--space-6); }
/* Collage: maschera amorfa (segnaposto foto) + scheda progetto + punto */
.p-home .hero-fig { position: relative; justify-self: end; width: min(100%, 470px); }
.p-home .hero-blob { top: -9%; right: -14%; width: 112%; }
.p-home .hero-dot {
position: absolute; left: -26px; bottom: 34px; z-index: 2;
width: 46px; height: 46px; background: var(--accent-2);
border-radius: 58% 42% 62% 38% / 55% 48% 52% 45%;
}
/* Sotto i 900px il collage scende sotto il testo, come negli hero interni:
a due colonne il titolo si spezzava su una parola per riga */
@media (max-width: 900px) {
.p-home .hero .wrap {
grid-template-columns: minmax(0, 1fr);
gap: clamp(40px, 9vw, 56px);
}
.p-home .hero-fig { justify-self: start; }
.p-home .hero-dot { left: -14px; }
}
/* ---------- Posizionamento: pilastri ---------- */
/* Chiude i tre pilastri: stacca più delle altre */
.p-home .pos-close { margin-top: clamp(36px, 5vw, 56px); }
/* ---------- Piattaforma + 5 fasi ---------- */
.p-home .platform .btn { margin-top: var(--space-5); }
@media (max-width: 1000px) {
.p-home .platform .wrap { grid-template-columns: minmax(0, 1fr); }
.p-home .app-cols { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- Ecosistema: maschere amorfe ---------- */
.p-home .eco-grid {
margin-top: clamp(40px, 6vw, 64px);
display: grid; gap: clamp(28px, 4vw, 44px) clamp(24px, 3vw, 36px);
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.p-home .eco-fig { position: relative; max-width: 340px; }
.p-home .eco-fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.p-home .eco-fig path { transform-box: fill-box; transform-origin: center; animation: breathe 5s ease-in-out infinite alternate; }
.p-home .eco-tile:nth-child(2n) .eco-fig path { animation-delay: -1.8s; }
.p-home .eco-tile:nth-child(3n) .eco-fig path { animation-delay: -3.4s; }
.p-home .eco-tile h3 { font-size: 1.12rem; margin-top: 18px; }
.p-home .eco-tile p { margin-top: var(--space-2); font-size: 0.93rem; color: var(--ink-2); max-width: 40ch; }
.p-home .eco-tile p b { color: var(--ink); font-weight: 600; }
@media (min-width: 1000px) { .p-home .eco-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* ---------- Rete: mappa + numeri ---------- */
.p-home .coverage { margin-top: 22px; font-size: 1.05rem; color: var(--ink-2); max-width: 46ch; }
.p-home .net { position: relative; justify-self: end; width: min(100%, 440px); }
.p-home .net svg { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
.p-home .rete-grid { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- Qualità ---------- */
.p-home .quality .wrap {
display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: clamp(40px, 6vw, 88px); align-items: start;
}
.p-home .quality .btn { margin-top: 28px; }
@media (max-width: 980px) { .p-home .quality .wrap { grid-template-columns: minmax(0, 1fr); } }
/* ---------- CTA finale ---------- */
/* Colonne più distanti e banda più alta */
.p-home .final .wrap { gap: clamp(36px, 5vw, 80px); padding-block: clamp(72px, 10vw, 132px); }
.p-home .final h2 { color: var(--on-accent); font-size: var(--text-3xl); line-height: 1.1; max-width: 18ch; }
.p-home .final .wrap > div > p { margin-top: 18px; max-width: 56ch; font-size: 1.08rem; line-height: 1.6; color: var(--on-accent-soft); }
@media (max-width: 980px) { .p-home .final .wrap { grid-template-columns: minmax(0, 1fr); } }
/* ---------- Motion di pagina: coreografia del hero ---------- */
.p-home .hero-dot { animation: rise 0.5s var(--ease) 640ms backwards, morph 4s ease-in-out 1.4s infinite alternate; }
@media (prefers-reduced-motion: reduce) {
.p-home .hero-dot, .p-home .eco-fig path { animation: none !important; }
}
/* Numeri allineati come nella striscia dei contatori */
.p-home .mockup .row b { text-align: start; font-variant-numeric: tabular-nums; }
/* ------------------------------------------------------------
.p-iso-9001-27001 (iso-9001-27001.php)
------------------------------------------------------------ */
/* ---------- Copertura del sistema ---------- */
/* La banda segue il page-hero, che ha già la sua riga di chiusura */
.p-iso-9001-27001 .page-hero + .band { border-top: none; }
/* ------------------------------------------------------------
.p-entra-nella-rete (entra-nella-rete.php)
------------------------------------------------------------ */
/* ---------- Hero con scheda del profilo in rete ---------- */
/* Il telefono è stretto e sta al centro della colonna */
.p-entra-nella-rete .lcn-fig { width: min(100%, 400px); display: grid; justify-items: center; }
.p-entra-nella-rete .lcn-blob { top: -8%; right: -10%; width: 108%; }
/* Specchietto proprio della pagina: lo schermo dell'app
con la notifica push in evidenza, il momento vero della vita in rete */
.p-entra-nella-rete .lcn-phone {
position: relative; z-index: 1; width: min(100%, 360px);
background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-m);
box-shadow: var(--shadow-2); overflow: clip;
}
.p-entra-nella-rete .lcn-pbar {
display: flex; justify-content: space-between; padding: 12px 16px;
border-bottom: 1px solid var(--line);
font-size: 0.72rem; font-weight: 600; color: var(--ink-3);
}
/* Il tabular serve solo all'orologio: sul testo allarga gli spazi */
.p-entra-nella-rete .lcn-pbar span:last-child { font-variant-numeric: tabular-nums; }
.p-entra-nella-rete .lcn-push {
margin: 14px; padding: 14px;
background: var(--accent); color: var(--on-accent);
border-radius: var(--radius-s); box-shadow: var(--shadow-1);
display: flex; gap: 10px; align-items: flex-start;
}
.p-entra-nella-rete .lcn-push i { flex: none; color: var(--accent-2); font-size: 1.1rem; margin-top: 1px; }
.p-entra-nella-rete .lcn-push b { display: block; font-size: 0.85rem; }
.p-entra-nella-rete .lcn-push span { display: block; margin-top: 2px; font-size: 0.75rem; line-height: 1.4; color: var(--on-accent-body); }
.p-entra-nella-rete .lcn-rows { padding: 0 14px 12px; display: grid; gap: 8px; }
.p-entra-nella-rete .lcn-row {
display: flex; gap: 8px; align-items: center;
padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-s);
font-size: 0.75rem; color: var(--ink-2);
}
.p-entra-nella-rete .lcn-row time { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.p-entra-nella-rete .lcn-tabs {
display: flex; justify-content: space-around;
border-top: 1px solid var(--line); padding: 10px 0;
color: var(--ink-3); font-size: 1.05rem;
}
.p-entra-nella-rete .lcn-tabs i.on { color: var(--accent); }
/* ---------- Requisiti ---------- */
/* Due colonne piene, specchiate rispetto alla sezione registrazione
che segue: lista a sinistra, titolo e chiusura a destra */
.p-entra-nella-rete .req .req-testo { grid-column: 2; grid-row: 1; }
.p-entra-nella-rete .req .qlist { grid-column: 1; grid-row: 1; margin-top: var(--space-2); }
@media (max-width: 1000px) {
.p-entra-nella-rete .req .wrap { grid-template-columns: minmax(0, 1fr); }
.p-entra-nella-rete .req .req-testo { grid-column: 1; }
.p-entra-nella-rete .req .qlist { grid-row: 2; margin-top: var(--space-3); }
}
/* ---------- App per professionisti ---------- */
/* Schermata dell'app: stessa ricetta della finestra piattaforma, in verticale */
/* La finestra dell'app è più stretta */
.p-entra-nella-rete .app-fig { width: min(100%, 320px); }
/* La finestra sta sopra il blob */
.p-entra-nella-rete .app { position: relative; z-index: 1; }
.p-entra-nella-rete .app-blob { top: -12%; right: -16%; width: 120%; }
@media (max-width: 1000px) {
.p-entra-nella-rete .app-band .wrap { grid-template-columns: minmax(0, 1fr); }
.p-entra-nella-rete .app-fig { justify-self: start; }
}
/* ---------- Registrazione: banda finale verso pro.pharmacare ---------- */
/* Chiusura centrata: senza il form la colonna sinistra da sola
lasciava mezza banda vuota */
/* La finestra è larga 320px: righe più comode e nessun troncamento */
.p-entra-nella-rete .appt { padding: 14px 20px; }
.p-entra-nella-rete .appt .who { overflow: visible; text-overflow: clip; white-space: normal; }
.p-entra-nella-rete .appt .pill { margin-bottom: 0; }
/* ------------------------------------------------------------
.p-patient-support-program (patient-support-program.php)
------------------------------------------------------------ */
/* ---------- Processo: i tre pilastri del modello ---------- */
.p-patient-support-program .proc-close { margin-top: clamp(36px, 5vw, 56px); max-width: 68ch; font-size: 1.05rem; color: var(--ink-2); }
/* ---------- Piattaforma: i moduli del programma ---------- */
/* Stessa ricetta della finestra piattaforma della homepage */
.p-patient-support-program .mods { padding: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.p-patient-support-program .mod { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 14px; }
.p-patient-support-program .mod i { font-size: 1.2rem; color: var(--accent); }
.p-patient-support-program .mod b { display: block; margin-top: var(--space-2); font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.p-patient-support-program .mod span { display: block; margin-top: 2px; font-size: 0.75rem; line-height: 1.45; color: var(--ink-3); }
@media (max-width: 1000px) { .p-patient-support-program .mods-band .wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .p-patient-support-program .mods { grid-template-columns: minmax(0, 1fr); } }
/* ---------- Compliance della rete ---------- */
.p-patient-support-program .comp-chips { margin-top: clamp(24px, 3vw, 34px); max-width: 460px; }
/* Valori testuali multi-parola: il tabular-nums del chip di sistema
allarga anche gli spazi alla larghezza cifra, qui non serve */
.p-patient-support-program .comp .btn { margin-top: var(--space-6); }
.p-patient-support-program .doss {
justify-self: end; width: min(100%, 460px);
background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-m);
box-shadow: var(--shadow-2); overflow: clip;
}
.p-patient-support-program .doss header {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
padding: var(--space-4) 20px; border-bottom: 1px solid var(--line);
font-size: 0.8rem; font-weight: 600; color: var(--ink-3);
}
.p-patient-support-program .doss-row {
display: flex; align-items: center; gap: var(--space-3);
padding: 15px 20px; border-bottom: 1px solid var(--line);
font-size: 0.9rem; color: var(--ink-2);
}
.p-patient-support-program .doss-row i { flex: none; font-size: 1.1rem; color: var(--accent); }
.p-patient-support-program .doss-row .who { flex: 1; min-width: 0; }
.p-patient-support-program .doss-row .pill { margin-left: auto; flex: none; }
.p-patient-support-program .doss-note {
display: flex; align-items: flex-start; gap: var(--space-3);
padding: 15px 20px; font-size: 0.85rem; line-height: 1.5; color: var(--ink-2);
background: var(--bg);
}
.p-patient-support-program .doss-note i { flex: none; font-size: 1.05rem; color: var(--accent); margin-top: 1px; }
@media (max-width: 980px) {
.p-patient-support-program .comp .wrap { grid-template-columns: minmax(0, 1fr); }
.p-patient-support-program .doss { justify-self: start; }
}
/* ---------- Esperienza e numeri ---------- */
/* Testo e scenari su due colonne piene: la lista a 860px lasciava
un terzo di sezione vuoto a destra. I numeri sotto, a tutta riga. */
.p-patient-support-program .exp .exp-testa {
display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: clamp(32px, 5vw, 72px); align-items: start;
}
.p-patient-support-program .exp .sec-lead { max-width: 44ch; }
.p-patient-support-program .exp .qlist { margin-top: var(--space-2); }
@media (max-width: 1000px) {
.p-patient-support-program .exp .exp-testa { grid-template-columns: minmax(0, 1fr); }
.p-patient-support-program .exp .qlist { margin-top: var(--space-3); }
}
/* ------------------------------------------------------------
.p-piattaforma (piattaforma.php)
------------------------------------------------------------ */
/* ---------- Hero con finestra operations ---------- */
/* Colonne uguali invece di 1.05/0.95: la finestra operations è larga.
Solo sopra i 900px, sotto vale il collasso del componente */
@media (min-width: 901px) {
.p-piattaforma .pl-hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* Figura più larga della base */
.p-piattaforma .pl-fig { width: min(100%, 500px); }
.p-piattaforma .pl-blob { top: -10%; right: -10%; width: 112%; }
/* La finestra sta sopra il blob */
.p-piattaforma .app { position: relative; z-index: 1; }
/* Sul telefono le chip stanno a due per riga: la terza resterebbe da sola
su una riga tutta sua, quindi nella finestra dell'hero si toglie */
@media (max-width: 620px) {
.p-piattaforma .pl-fig .app-chips .chip:nth-child(3) { display: none; }
}
/* ---------- Costruita per eseguire ---------- */
.p-piattaforma .exe .sec-lead { max-width: 68ch; }
/* ---------- Le cinque fasi: rail + pannello di fase ---------- */
/* Il pannello resta agganciato mentre il rail avanza */
.p-piattaforma .fase-card {
position: sticky; top: 100px;
background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-m);
box-shadow: var(--shadow-2);
padding: clamp(26px, 3.4vw, 40px);
}
.p-piattaforma .fase-card .fase-n { display: block; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.p-piattaforma .fase-card h3 { margin-top: var(--space-2); font-size: 1.35rem; }
.p-piattaforma .fase-card .fase-label { display: block; margin-top: var(--space-5); font-size: 0.8rem; font-weight: 600; color: var(--ink-3); }
.p-piattaforma .fase-card p { margin-top: var(--space-2); font-size: 1rem; line-height: 1.6; color: var(--ink-2); max-width: 48ch; }
.p-piattaforma .fase-card.in { animation: rise 0.45s var(--ease) backwards; }
@media (max-width: 1000px) {
.p-piattaforma .modello .wrap { grid-template-columns: minmax(0, 1fr); }
.p-piattaforma .fase-card { position: static; }
}
/* ---------- Oltre il workflow ---------- */
/* Registro su due colonne piene: in colonna singola a 860px
restava un terzo di sezione vuoto a destra */
.p-piattaforma .oltre .qlist {
margin-top: clamp(32px, 4vw, 48px);
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: clamp(32px, 5vw, 72px);
}
.p-piattaforma .oltre .qitem:nth-child(2) { border-top: 1px solid var(--line); }
@media (max-width: 900px) {
.p-piattaforma .oltre .qlist { grid-template-columns: minmax(0, 1fr); }
.p-piattaforma .oltre .qitem:nth-child(2) { border-top: none; }
}
/* ---------- Integrazione e ambienti dedicati ---------- */
.p-piattaforma .integra .sec-lead { max-width: 68ch; }
/* ---------- Sicurezza e proof ---------- */
/* Testo a sinistra, chips a destra su due colonne piene: impilati
in colonna unica lasciavano un terzo di sezione vuoto */
/* Valori testuali multi-parola: senza tabular-nums (nota in HANDOFF) */
.p-piattaforma .nums .anno { font-variant-numeric: normal; }
.p-piattaforma .sicurezza .btn { margin-top: var(--space-6); }
@media (max-width: 900px) {
.p-piattaforma .sicurezza .sic-testa { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- Motion di pagina ---------- */
@media (prefers-reduced-motion: reduce) {
.p-piattaforma .fase-card.in { animation: none; }
}
/* ------------------------------------------------------------
.p-studi-raccolta-dati (studi-raccolta-dati.php)
------------------------------------------------------------ */
/* ---------- Hero con scheda delle attività ---------- */
/* Nella finestra dell'hero la barra è tutta in ink-2 */
.p-studi-raccolta-dati .hero-in .app-bar { color: var(--ink-2); }
/* Specchietto proprio della pagina: survey completate
per centro, dataviz sobrio su finestra chiara */
.p-studi-raccolta-dati .rc-body { padding: 18px 20px; }
.p-studi-raccolta-dati .rc-rows { margin-top: 12px; display: grid; gap: 12px; }
.p-studi-raccolta-dati .rc-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) 36px; gap: 10px; align-items: center; }
.p-studi-raccolta-dati .rc-row b { font-size: 0.78rem; font-weight: 600; color: var(--ink); }
.p-studi-raccolta-dati .rc-track { display: block; height: 8px; background: var(--bg-3); border-radius: var(--radius-s); overflow: hidden; }
.p-studi-raccolta-dati .rc-fill { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.p-studi-raccolta-dati .rc-fill.w1 { width: 82%; }
.p-studi-raccolta-dati .rc-fill.w2 { width: 64%; }
.p-studi-raccolta-dati .rc-fill.w3 { width: 58%; }
.p-studi-raccolta-dati .rc-fill.w4 { width: 41%; }
.p-studi-raccolta-dati .rc-row .val { text-align: right; font-size: 0.78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.p-studi-raccolta-dati .rc-foot {
display: flex; align-items: center; gap: 10px;
padding: 14px 20px; border-top: 1px solid var(--line);
font-size: 0.8rem; color: var(--ink-2);
}
.p-studi-raccolta-dati .rc-foot i { color: var(--accent); }
.p-studi-raccolta-dati .rc-foot .pill { margin-left: auto; }
/* ---------- Quando lo studio esce dal centro ---------- */
.p-studi-raccolta-dati .fuori .sec-lead { max-width: 68ch; }
/* ------------------------------------------------------------
.p-servizi-a-domicilio (servizi-a-domicilio.php)
------------------------------------------------------------ */
/* ---------- Prestazioni ---------- */
/* Registro su due colonne piene: in colonna singola a 820px
restava un terzo di sezione vuoto a destra */
.p-servizi-a-domicilio .serv .qlist {
margin-top: clamp(32px, 4vw, 48px);
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: clamp(32px, 5vw, 72px);
}
.p-servizi-a-domicilio .serv .qitem:nth-child(2) { border-top: 1px solid var(--line); }
.p-servizi-a-domicilio .serv .qitem:nth-last-child(2) { border-bottom: none; }
@media (max-width: 900px) {
.p-servizi-a-domicilio .serv .qlist { grid-template-columns: minmax(0, 1fr); }
.p-servizi-a-domicilio .serv .qitem:nth-child(2) { border-top: none; }
.p-servizi-a-domicilio .serv .qitem:nth-last-child(2) { border-bottom: 1px solid var(--line); }
}
.p-servizi-a-domicilio .serv-close { margin-top: clamp(24px, 3vw, 34px); max-width: 62ch; font-size: 1.02rem; color: var(--ink-2); }
/* ---------- Chi viene a casa tua ---------- */
/* Testo a sinistra, chips a destra: impilati in colonna unica
lasciavano mezza sezione vuota */
@media (max-width: 900px) {
.p-servizi-a-domicilio .chi .wrap { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- Piattaforma e aiuto ---------- */
/* Chiusura centrata: la colonna sinistra da sola lasciava mezza banda vuota */
/* Banda un filo più bassa e testo un filo più piccolo */
.p-servizi-a-domicilio .final.centrata .wrap { padding-block: clamp(64px, 9vw, 116px); }
.p-servizi-a-domicilio .final.centrata p { font-size: 1.05rem; }
/* ------------------------------------------------------------
.p-strutture-sanitarie (strutture-sanitarie.php)
------------------------------------------------------------ */
/* ---------- Hero con scheda del servizio ---------- */
/* Nella finestra dell'hero la barra è tutta in ink-2 */
.p-strutture-sanitarie .hero-in .app-bar { color: var(--ink-2); }
/* Figura più larga della base */
.p-strutture-sanitarie .sol-fig { width: min(100%, 460px); }
/* Specchietto proprio della pagina: la dashboard del servizio, non
l'agenda dei turni. La pagina racconta continuita' e coordinamento:
un elenco di turni assegnati la farebbe leggere come fornitura di
personale. Righe etichetta a sinistra, valore a destra. */
.p-strutture-sanitarie .st-row {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
padding: 13px 20px; border-bottom: 1px solid var(--line);
font-size: 0.85rem; color: var(--ink-2);
}
.p-strutture-sanitarie .st-row b {
flex: none; font-size: 0.9rem; color: var(--ink); font-weight: 600;
font-variant-numeric: tabular-nums;
}
.p-strutture-sanitarie .st-row .pill { flex: none; }
.p-strutture-sanitarie .st-note {
display: flex; align-items: center; gap: 10px;
padding: 13px 20px; background: var(--bg);
font-size: 0.8rem; color: var(--ink-3);
}
.p-strutture-sanitarie .st-note i { color: var(--accent); }
/* ---------- Ambiti di supporto ---------- */
/* Quattro voci, non sei: due colonne su misura ridotta, e la griglia
regge fino a 720px invece degli 860 del componente */
.p-strutture-sanitarie .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 980px; }
@media (max-width: 860px) {
.p-strutture-sanitarie .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) clamp(20px, 3vw, 40px); }
.p-strutture-sanitarie .cap { padding-block: var(--space-4) 0; }
}
@media (max-width: 720px) {
.p-strutture-sanitarie .cap-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.p-strutture-sanitarie .cap { padding-block: var(--space-4) var(--space-5); }
}
/* ---------- Tecnologia e criteri di progetto ---------- */
/* Testo e finestra dei criteri in alto, il registro dei quattro
elementi sotto a due colonne piene: in colonna singola la
sezione diventava una lista lunghissima */
.p-strutture-sanitarie .attiva .due-col { align-items: start; }
.p-strutture-sanitarie .attiva .btn { margin-top: clamp(24px, 3vw, 32px); }
.p-strutture-sanitarie .att-win { width: min(100%, 420px); justify-self: end; }
/* Coda della finestra: verifica e attivazione, il passaggio che
distingue l'individuazione dei profili dalla loro messa in campo */
.p-strutture-sanitarie .att-flow {
display: flex; align-items: center; gap: var(--space-3);
padding: 14px 20px; background: var(--bg);
font-size: 0.78rem; color: var(--ink-2);
}
.p-strutture-sanitarie .att-step { display: flex; align-items: center; gap: 7px; }
.p-strutture-sanitarie .att-step i { color: var(--accent); font-size: 1rem; }
.p-strutture-sanitarie .att-arrow { color: var(--ink-3); font-size: 1rem; }
.p-strutture-sanitarie .attiva .qlist {
margin-top: clamp(32px, 4vw, 48px);
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: clamp(32px, 5vw, 72px);
}
.p-strutture-sanitarie .attiva .qitem:nth-child(2) { border-top: 1px solid var(--line); }
.p-strutture-sanitarie .attiva .qitem:nth-last-child(2) { border-bottom: none; }
@media (max-width: 1000px) {
.p-strutture-sanitarie .attiva .due-col { grid-template-columns: minmax(0, 1fr); }
.p-strutture-sanitarie .att-win { justify-self: start; }
}
@media (max-width: 900px) {
.p-strutture-sanitarie .attiva .qlist { grid-template-columns: minmax(0, 1fr); }
.p-strutture-sanitarie .attiva .qitem:nth-child(2) { border-top: none; }
.p-strutture-sanitarie .attiva .qitem:nth-last-child(2) { border-bottom: 1px solid var(--line); }
}
/* ------------------------------------------------------------
.p-note-legali (note-legali.php)
------------------------------------------------------------ */
.p-note-legali .doc .addr { margin-top: var(--space-4); }
/* ------------------------------------------------------------
.p-assistenza (assistenza.php)
Scelta del profilo e i due form: una colonna sola, larga quanto
serve a leggere una riga di testo senza inseguirla.
------------------------------------------------------------ */
/* La colonna resta larga quanto serve a leggere, ma il wrap tiene la
sua misura: cosi' la scelta e i form partono dalla stessa verticale
del titolo, invece di centrarsi e disallinearsi dall'hero */
.p-assistenza .wrap-form > * { max-width: 720px; }
/* Le tre card respirano piu' della colonna del form: a 720px il testo
di ognuna andrebbe a quattro righe */
.p-assistenza .profilo { border: none; padding: 0; margin: 0; max-width: 900px; }
.p-assistenza .profilo > legend {
padding: 0; font-family: var(--font-display); font-weight: 700;
font-size: var(--text-xl); color: var(--ink);
}
.p-assistenza .profilo-opts {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-4); margin-top: var(--space-5);
}
.p-assistenza .profilo-opt {
display: grid; grid-template-columns: auto minmax(0, 1fr);
align-items: start; gap: var(--space-3);
padding: var(--space-4); cursor: pointer;
background: var(--bg-2); border: 1px solid var(--line);
border-radius: var(--radius-m);
transition: border-color var(--pace) var(--ease), background var(--pace) var(--ease);
}
.p-assistenza .profilo-opt:hover { border-color: var(--line-strong); }
/* Il radio resta nel flusso per la tastiera e per gli screen reader:
e' la card a fare da indicatore, quindi il pallino sparisce alla vista */
.p-assistenza .profilo-opt input {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%);
}
.p-assistenza .profilo-opt:has(input:checked) {
border-color: var(--accent); background: var(--wash);
}
.p-assistenza .profilo-opt:has(input:focus-visible) {
outline: 2px solid var(--accent); outline-offset: 2px;
}
/* La terza card non apre niente qui: porta al canale delle aziende.
La freccia lo dice prima del clic, altrimenti il cambio di pagina
arriva addosso a chi si aspettava un form come nelle altre due */
.p-assistenza .profilo-via {
grid-template-columns: auto minmax(0, 1fr) auto;
text-decoration: none;
}
.p-assistenza .profilo-via:focus-visible {
outline: 2px solid var(--accent); outline-offset: 2px;
}
.p-assistenza .profilo-freccia {
align-self: center; font-size: 1.1rem; color: var(--ink-3);
transition: translate var(--pace) var(--ease);
}
.p-assistenza .profilo-via:hover .profilo-freccia { translate: 3px 0; color: var(--accent); }
.p-assistenza .profilo-txt {
font-size: 0.92rem; line-height: 1.5; color: var(--ink-3);
}
.p-assistenza .profilo-txt b {
display: block; font-weight: 600; font-size: 1rem; color: var(--ink);
margin-bottom: var(--space-1);
}
.p-assistenza .ramo { margin-top: var(--space-7); }
.p-assistenza .ramo .alert { margin-bottom: var(--space-5); }
/* Consenso ai dati sulla salute: due risposte fra cui scegliere, non
una spunta. Il bordo a sinistra le tiene insieme come una domanda sola */
.p-assistenza .scelta {
margin-top: var(--space-4); padding: 0 0 0 var(--space-4);
border: none; border-left: 2px solid var(--line);
}
.p-assistenza .scelta > legend {
padding: 0; font-size: 0.88rem; font-weight: 600; color: var(--ink);
}
.p-assistenza .scelta .check { margin-top: var(--space-3); }
@media (max-width: 900px) {
.p-assistenza .profilo-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.p-assistenza .profilo-opts { grid-template-columns: minmax(0, 1fr); }
}