/* components.css — specialist_practice. Ambulatorio specialistico di un medico singolo.
Il segno del verticale è DOPPIO e nasce dal vincolo di questo settore (due fotografie in tutto):
(1) la TESTATA SPARTITA — campo navy pieno col titolo, e la tessera fotografica che ne scavalca il
bordo: la foto c'è, ma non deve reggere il testo;
(2) il PANNELLO TINTO ARROTONDATO — una scheda a raggio ampio che porta display + prosa + spunte
SENZA fotografia. È il dispositivo di open-heart-clinic, ed è ciò che permette a una pagina di
essere ricca con due immagini invece che con dieci.
I token vivono in tokens.css: qui si consumano. */
/* ---------- Impalcatura ---------- */
.container { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - var(--gutter) * 2, 78ch); margin-inline: auto; }
.section { padding-block: var(--section-y); background: var(--paper); }
.section--alt { background: var(--surface); }
.section--tint { background: var(--grad-tint); }
.section--dark { background: var(--grad-brand); color: var(--on-dark); }
.section--tight { padding-block: calc(var(--section-y) * 0.62); }
/* Una sezione che si CHIUDE con una fascia a filo non deve lasciare la striscia del proprio padding. */
.section--flush-bottom { padding-bottom: 0; }
.section--flush-top { padding-top: 0; }
.section-intro { max-width: 62ch; margin-bottom: var(--space-7); }
.section-intro--center { margin-inline: auto; text-align: center; }
.section-intro h2 { margin-bottom: var(--space-3); }
.section--dark .section-intro .lead, .section--dark .lead { color: var(--on-dark-muted); }
.section--dark .eyebrow { color: var(--accent-lt); }
/* ---------- Bottoni (pillola: è il registro della categoria) ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
font-family: var(--font-display); font-weight: 600; font-size: var(--text-base);
line-height: 1.1; padding: 0.85em 1.7em; border-radius: var(--radius-pill);
background: var(--brand); color: #FFFFFF; border: 1px solid transparent;
transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { background: var(--brand-mid); transform: translateY(-1px); }
/* `--accent` coincide con `--brand`: la variante esiste perché i pattern la nominano, e un bottone che
dichiara l'accento deve restare leggibile anche se un preset separa i due ruoli. */
.btn--accent { background: var(--accent); color: #FFFFFF; }
.btn--accent:hover { background: var(--accent-dark); }
.btn--ghost { background: transparent; color: var(--accent-ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--tint); color: var(--accent-dark); }
/* ⚠ Su fondo scuro il bottone chiaro porta INCHIOSTRO, non bianco: il bianco su bianco non esiste. */
.btn--on-dark { background: #FFFFFF; color: var(--brand-dark); }
.btn--on-dark:hover { background: var(--tint); transform: translateY(-1px); }
.btn--ghost-on-dark { background: transparent; color: var(--on-dark); border-color: rgba(234,242,250,.42); }
.btn--ghost-on-dark:hover { background: rgba(234,242,250,.12); }
.link-arrow { color: var(--accent-ink); font-weight: 600; }
.link-arrow:hover { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
/* ---------- Fascia di servizio + intestazione ---------- */
.topbar { background: var(--brand-dark); color: var(--on-dark-muted); font-size: var(--text-sm); }
.topbar__row {
display: var(--topbar-display); flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5);
min-height: var(--chrome-topbar); padding-block: var(--space-1);
}
.topbar__item { color: var(--on-dark-muted); letter-spacing: .01em; }
a.topbar__item:hover { color: var(--on-dark); }
/* ⚠ WP avvolge il pattern dell'header in .wp-block-template-part, che LIMITA il contenitore all'altezza
dell'header: lo sticky si staccherebbe subito. `display: contents` lo rende figlio di .wp-site-blocks. */
.wp-block-template-part { display: contents; }
.site-header {
position: sticky; top: 0; z-index: 40;
background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
transition: box-shadow var(--dur) var(--ease);
}
.site-header.is-shrunk { box-shadow: var(--shadow-sm); }
/* Header centrato verticalmente (regola 16): `center`, MAI `baseline` — con un marchio alto il baseline
spinge il contenuto in basso. E i figli portano un margine di blocco WP che va azzerato. */
.site-header__row {
display: flex; align-items: center; gap: var(--space-5);
min-height: 76px; padding-block: var(--space-2);
}
.site-header__row > * { align-self: center; margin-block: 0; }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-3); }
/* Il MARCHIO è un segno quadrato, non un wordmark largo: si dichiara una misura fissa e l'altezza segue.
⚠ `logo.svg` è ANCHE la favicon (l'emitter la deriva da lui): un marchio quadrato è l'unica forma che
regga i 16px — un wordmark con rapporto 12,9 lì diventa una riga di pixel. */
.wordmark__mark { width: 46px; height: auto; flex: 0 0 auto; }
.wordmark__name {
font-family: var(--font-display); font-weight: 600; font-size: 1.34rem;
letter-spacing: -0.014em; display: flex; flex-direction: column; line-height: 1.08;
/* ⚠⚠ Il nome è TESTO VIVO, e il blu del marchio (#0094E0) fa 3,33 sul bianco: non può portarlo.
Il lockup usa --accent-ink (8,09), che è lo stesso blu portato a inchiostro. Il ciano resta nel
SEGNO, dove è un grafico e non deve rispettare la soglia del testo. */
color: var(--accent-ink);
}
.wordmark__tag {
font-family: var(--font-body); font-weight: 400; font-size: var(--text-sm);
letter-spacing: .04em; color: var(--ink-muted); text-transform: none;
}
@media (max-width: 599.98px) {
.wordmark__mark { width: 38px; }
.wordmark__name { font-size: 1.12rem; }
}
.site-nav { margin-left: auto; }
.site-header .site-nav a { font-family: var(--font-display); font-weight: 500; color: var(--ink); }
.site-header .site-nav a:hover { color: var(--accent-ink); }
/* ⚠ La ul del blocco navigation nasce flex-wrap:wrap e col margin-left:auto il margine si prende lo
spazio libero PRIMA che la nav lo chieda: una voce va a capo da sola. Si vieta il wrap dove la riga
regge davvero la sua larghezza. */
@media (min-width: 1080px) { .site-header .site-nav .wp-block-navigation__container { flex-wrap: nowrap; } }
.site-header__cta { margin-left: var(--space-2); }
/* ---------- Menu mobile: overlay del blocco wp:navigation ----------
⚠⚠ WP dichiara `.wp-block-navigation__responsive-container.is-menu-open{background-color:inherit}`
con specificità (0,2,0) — la STESSA di una regola di tema — e il CSS dei blocchi è iniettato DOPO:
a parità vince lui. Il pannello ereditava il bianco dell'intestazione e le voci, che sono --on-dark,
diventavano bianco-su-bianco: il menu si apriva VUOTO. Si vince salendo di un livello (0,3,0).
⚠ E le voci finivano a DESTRA perché il blocco porta `justifyContent:right` per il desktop: nel
pannello il contenitore va rivoltato a colonna e allineato all'inizio, con la stessa specificità. */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
background: var(--grad-panel);
height: 100dvh; max-height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
padding: 0;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
width: 100%; padding: calc(var(--chrome-topbar) + 84px) var(--gutter) 40px;
gap: 0;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
display: flex; flex-direction: column; align-items: stretch;
justify-content: flex-start; width: 100%; gap: 0;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
width: 100%;
}
/* Righe grandi e battibili: il menu di un ambulatorio si usa col pollice, spesso da anziani. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
display: block; width: 100%; text-align: left;
font-family: var(--font-display); font-weight: 500; font-size: 1.6rem; letter-spacing: -0.01em;
color: #FFFFFF; padding: var(--space-5) 0;
border-bottom: 1px solid rgba(234,242,250,.16);
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
color: var(--accent-lt);
}
/* ⚠ I bottoni del menu di WP nascono senza misura né area di tocco. Sotto 44×44 non rispettano il
bersaglio minimo.
⚠⚠ Vale per ENTRAMBI: l'APERTURA (l'hamburger) nasce a 24×24, e il gate `chrome-mobile` verifica
solo la chiusura — questo è stato trovato CLICCANDO il menu sul sito vivo, non da un controllo. */
.wp-block-navigation__responsive-container-open {
width: 48px; height: 48px; padding: var(--space-3); color: var(--ink);
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
width: 48px; height: 48px; padding: var(--space-3);
top: calc(var(--chrome-topbar) + 14px); right: var(--gutter); color: #FFFFFF;
}
/* Il recapito in coda al pannello: chi apre il menu di un ambulatorio quasi sempre vuole telefonare. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .menu-tail {
margin-top: auto; padding-top: var(--space-7); color: var(--on-dark-muted); font-size: var(--text-sm);
}
/* ---------- TESTATA: campo navy + tessera fotografica che lo scavalca ---------- */
.hero { background: var(--grad-brand); color: var(--on-dark); position: relative; isolation: isolate; }
.hero::after { content: ""; position: absolute; inset: 0; background: var(--grad-bagliore); z-index: -1; }
.hero__row {
display: grid; grid-template-columns: var(--hero-split-cols); gap: var(--space-7);
align-items: center; min-height: var(--hero-min-h);
padding-block: var(--hero-pad-b);
}
.hero__title { color: #FFFFFF; margin-bottom: var(--space-5); }
/* ⚠ La misura sta sul DISPLAY, col suo font: 15ch su Jost a 4rem sono tre righe corte — la spezzatura
ragionata del riferimento. Non è la misura del CORPO. */
.hero__title { max-width: 15ch; }
.hero .eyebrow { color: var(--accent-lt); }
.hero__lead { color: var(--on-dark-muted); font-size: var(--text-md); max-width: 52ch; margin-bottom: var(--space-6); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* La tessera fotografica. ⚠ Perché lo scavalco esista servono DUE condizioni insieme (lezione pagata tre
volte su clinical_center): il margine negativo deve SUPERARE il padding della banda, e la foto non deve
determinare l'altezza della banda — sennò la banda cresce con lei e la sporgenza resta 0 per qualunque
altezza. Qui l'altezza della riga la decide la colonna di testo (min-height + align:center), e la
tessera esce di --hero-sporgenza sotto.
⚠ `display: flow-root` sul contenitore: un margine negativo COLLASSA attraverso il genitore. */
/* ⚠⚠ La tessera è CENTRATA nella riga, perché sta DENTRO il campo (sporgenza 0).
L'ancoraggio in basso serviva allo scavalco: lì l'altezza della banda la decide `min-height`, che è
maggiore del contenuto, e con `center` la tessera galleggiava a metà riga senza mai superare il
bordo (misurato: sporgenza −28px anche col margine corretto). Per RIMETTERE lo scavalco servono
TRE cose insieme: `--hero-sporgenza` > 0, `align-self: end` qui, e il margine negativo qui sotto. */
.hero__media { display: flow-root; position: relative; align-self: center; }
.hero__fig {
/* ⚠ Nessun margine negativo: la formula dello scavalco era `-(sporgenza + padding)`, e con
sporgenza 0 vale `-padding` — cioè ANNULLA il respiro sotto la fotografia e la incolla al bordo.
Per rimettere lo scavalco: `margin-bottom: calc((var(--hero-sporgenza) + var(--hero-pad-b)) * -1)`
insieme all'`align-self: end` sopra. */
margin: 0;
border-radius: var(--radius-lg); overflow: hidden;
box-shadow: var(--shadow-md); background: var(--brand-mid);
aspect-ratio: var(--fig-ratio);
}
.hero__fig img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fig-object-pos);
transform: scale(1.001); transition: transform 1.2s var(--ease); }
.hero__fig:hover img { transform: scale(1.045); }
/* Variante design: nessuna foto hero-grade ⇒ il campo di colore regge da solo con un motivo tipografico.
Non è un ripiego — nel registro del riferimento è una testata legittima. MAI una foto finta. */
.hero--design .hero__row { grid-template-columns: 1fr; }
.hero--design .hero__title { max-width: 20ch; }
.hero--design .hero__mark {
margin-top: var(--space-7); height: 3px; width: clamp(120px, 22vw, 260px);
background: var(--grad-accento); border-radius: var(--radius-pill);
}
@media (max-width: 899.98px) {
.hero__row { grid-template-columns: 1fr; gap: var(--space-6); min-height: 0; padding-block: var(--section-y); }
.hero__fig { aspect-ratio: var(--fig-ratio-wide); }
}
/* ---------- PRESENTAZIONE (featured): prosa e figura affiancate ---------- */
/* La sezione che segue la testata deve lasciare spazio alla tessera che scavalca. */
.presenta { background: var(--grad-carta2, var(--paper)); }
.presenta__row { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: var(--space-7); align-items: center; }
.presenta__fig { margin: 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: var(--fig-ratio); background: var(--surface-2); }
.presenta__fig img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fig-object-pos); }
.presenta__body > * + * { margin-top: var(--space-4); }
@media (max-width: 899.98px) { .presenta__row { grid-template-columns: 1fr; gap: var(--space-6); } }
/* ---------- ESAMI (services): tessere con il segno dell'esame ---------- */
/* ⚠ 3 colonne, non 4: gli esami di un ambulatorio sono sei o giù di lì, e a 4 colonne l'ultima riga
ne mostra due con un vuoto accanto — un'asimmetria che legge come errore, non come ritmo. A 3 la
griglia chiude esatta (3+3) e i titoli lunghi («Controllo pace-maker») non si spezzano a metà parola. */
.esami__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--tile-gap); }
.esame {
background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3);
transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.esame:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.section--alt .esame { background: var(--paper); }
/* Il segno dell'esame è una MASCHERA CSS, non un ![]()
: eredita currentColor e cambia sulle tessere piene.
⚠⚠ L'url() sta QUI, nel CSS del verticale, e NON in uno style inline: nel post_content del DB il PHP non
gira e `rewriteOf` riscrive `../assets/` solo nei .php del tema — una maschera inline non risolverebbe.
Il nome arriva dall'IR via data-icon. Lezione pagata su clinical_center. */
.esame__ico {
width: 40px; height: 40px; flex: 0 0 auto; color: var(--accent-ink);
background-color: currentColor;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: contain; mask-size: contain;
}
.esame__ico[data-icon="stethoscope"] { -webkit-mask-image: url("../assets/img/icons/stethoscope.svg"); mask-image: url("../assets/img/icons/stethoscope.svg"); }
.esame__ico[data-icon="ecg"] { -webkit-mask-image: url("../assets/img/icons/ecg.svg"); mask-image: url("../assets/img/icons/ecg.svg"); }
.esame__ico[data-icon="ultrasound"] { -webkit-mask-image: url("../assets/img/icons/ultrasound.svg"); mask-image: url("../assets/img/icons/ultrasound.svg"); }
.esame__ico[data-icon="effort"] { -webkit-mask-image: url("../assets/img/icons/effort.svg"); mask-image: url("../assets/img/icons/effort.svg"); }
.esame__ico[data-icon="monitor24"] { -webkit-mask-image: url("../assets/img/icons/monitor24.svg"); mask-image: url("../assets/img/icons/monitor24.svg"); }
.esame__ico[data-icon="device"] { -webkit-mask-image: url("../assets/img/icons/device.svg"); mask-image: url("../assets/img/icons/device.svg"); }
.esame h3 { margin: 0; }
.esame p { color: var(--ink-muted); margin: 0; }
/* NASTRO continuo: le voci del cliente che scorrono. È l'unico movimento PERMANENTE del sito — tutto il
resto si rivela una volta e si ferma — e serve a togliere l'aria da bozza a una pagina statica.
⚠ `reduced-motion` lo ferma: un nastro che non si può fermare è un difetto di accessibilità. */
.nastro {
background: var(--brand-dark); color: var(--on-dark-muted);
overflow: hidden; margin-bottom: var(--section-y);
padding-block: var(--space-4);
/* ⚠⚠ `marquee()` CLONA la pista per chiudere l'anello: con `display:block` i due nastri si impilano e
si vedono DUE righe identiche. Devono stare AFFIANCATI — è il flex che chiude il cerchio, non il CSS
della singola pista. Visto solo guardando, non da una misura. */
display: flex; flex-wrap: nowrap;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.nastro__pista {
display: flex; gap: var(--space-6); white-space: nowrap; width: max-content;
font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500;
letter-spacing: -0.005em;
animation: fp-nastro 38s linear infinite;
}
.nastro__pista li[aria-hidden] { color: var(--accent-lt); }
@keyframes fp-nastro { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .nastro__pista { animation: none; } }
/* FASCIA a filo pagina: recupera il gutter e scorre in parallasse. L'immagine è più ALTA della fascia,
perché la parallasse deve avere margine per muoversi senza scoprire il fondo. */
.fascia {
margin: var(--section-y) 0 0; overflow: hidden;
height: clamp(260px, 34vw, 520px); background: var(--brand-dark);
}
.fascia--sottile { height: clamp(180px, 20vw, 300px); margin: 0 0 var(--section-y); }
.fascia a { display: block; height: 100%; }
.fascia img { width: 100%; height: 128%; object-fit: cover; object-position: 50% 44%; }
/* Banner della pagina Contatti (regola 19: dare colore a «Dove siamo»). */
.contatti-banner {
margin: 0 0 var(--space-8); overflow: hidden; border-radius: var(--radius-lg);
height: clamp(220px, 26vw, 380px); background: var(--surface-2);
}
.contatti-banner a { display: block; height: 100%; }
.contatti-banner img { width: 100%; height: 124%; object-fit: cover; object-position: 50% 46%; }
/* Dittico a piena larghezza che chiude gli esami. ⚠ Va a FILO PAGINA recuperando il gutter col
margine negativo: dentro il contenitore sarebbe una figura come le altre, e il punto è che NON lo sia.
⚠ Le due tessere sono alte e affiancate anche su mobile: sono le due VEDUTE di uno stesso oggetto, e
separarle in colonna spezzerebbe il confronto che le rende un dittico. */
.dittico {
display: grid; grid-template-columns: 1fr 1fr; gap: var(--tile-gap);
width: min(100% - var(--gutter) * 2, 880px); margin: var(--space-8) auto 0;
background: transparent; overflow: visible;
}
/* ⚠ Una fascia che CHIUDE la sezione vuole `padding-bottom: 0`: altrimenti il padding della sezione
continua SOTTO di lei e scopre una striscia della sua superficie. E la sezione seguente non riparte
col padding pieno, o le due arie si sommano. */
.section:has(> .fascia) { padding-bottom: 0; }
.curriculum { padding-top: calc(var(--section-y) * 0.72); }
/* ⚠⚠ `contain`, non `cover`: queste sono due VEDUTE di uno stesso oggetto su fondo scuro, non scene a
piena inquadratura. Con `cover` il modello veniva decapitato sopra e sotto e le due viste — che devono
LEGGERSI diverse — apparivano quasi identiche, perché il taglio mostrava di entrambe la stessa fascia
centrale. È la regola «cover taglia i soggetti scontornati ⇒ contain su fondo di marca», e qui il fondo
di marca è il navy. La didascalia impressa dal cliente resta dentro l'inquadratura. */
.dittico__lato { margin: 0; overflow: hidden; aspect-ratio: 1 / 1; background: var(--brand-dark);
position: relative; padding: var(--space-4); border-radius: var(--radius-lg); }
.dittico__lato a { display: block; width: 100%; height: 100%; }
.dittico__lato img {
width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%;
transition: transform 900ms var(--ease);
}
.dittico__lato:hover img { transform: scale(1.04); }
@media (max-width: 599.98px) { .dittico__lato { aspect-ratio: 3 / 4; } }
/* Lightbox di reveal.js: a riposo l'overlay NON deve esistere in scena né intercettare i click —
è il difetto che su un altro verticale rese l'intero sito non cliccabile e lo trovò il cliente. */
.fp-lb { display: none; position: fixed; inset: 0; z-index: 100; background: rgba(8,26,48,.94);
align-items: center; justify-content: center; padding: var(--gutter); }
.fp-lb.is-open { display: flex; }
.fp-lb img { max-width: min(92vw, 1100px); max-height: 88vh; width: auto; height: auto; border-radius: var(--radius-lg); }
.fp-lb__close, .fp-lb__prev, .fp-lb__next {
position: absolute; width: 48px; height: 48px; border: 0; border-radius: var(--radius-pill);
background: rgba(234,242,250,.14); color: #FFFFFF; font-size: 1.4rem; line-height: 1;
}
.fp-lb__close { top: var(--gutter); right: var(--gutter); }
.fp-lb__prev { left: var(--gutter); top: 50%; transform: translateY(-50%); }
.fp-lb__next { right: var(--gutter); top: 50%; transform: translateY(-50%); }
.fp-lb__close:hover, .fp-lb__prev:hover, .fp-lb__next:hover { background: rgba(234,242,250,.28); }
a.zoom { cursor: zoom-in; }
/* ---------- CURRICULUM (trust): IL PANNELLO. Display + prosa + spunte, senza fotografia ----------
È il dispositivo che permette a questo verticale di essere ricco con due immagini: il colore e la
forma fanno il lavoro che altrove farebbe una griglia di foto. */
.curriculum { padding-block: var(--section-y); background: var(--paper); }
.cv-panel {
background: var(--tint); border-radius: var(--radius-lg);
padding: clamp(1.75rem, 1rem + 3.4vw, 4rem);
display: grid; grid-template-columns: 0.92fr 1.08fr; gap: var(--space-8); align-items: start;
}
.cv-panel__head h2 { margin-bottom: var(--space-3); }
.cv-panel__head .lead { color: var(--ink-muted); }
.cv-panel__body > * + * { margin-top: var(--space-4); }
/* Le spunte: due colonne su desktop, come nel riferimento. Il segno è un ✓ disegnato, non un carattere. */
/* ⚠ DUE colonne, non quattro: le spunte di questo settore sono frasi intere (un incarico, una
raccomandazione clinica), e a 4 colonne una frase lunga diventa una colonna di parole singole.
`min(100%, 26rem)` fa collassare a una colonna dentro i contenitori stretti senza una media query. */
.cv-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: var(--space-5) var(--space-6); margin-top: var(--space-6); }
.cv-checks li { display: grid; grid-template-columns: 26px 1fr; gap: var(--space-3); align-items: start; color: var(--ink); }
.cv-checks li::before {
content: ""; width: 26px; height: 26px; border-radius: var(--radius-pill);
background: var(--brand) url("../assets/img/icons/check.svg") center / 14px 14px no-repeat;
flex: 0 0 auto;
}
/* Sul fondo scuro il testo delle spunte non può restare --ink, e il pallino passa al blu chiaro che su
navy porta testo (7,65) — non al blu del marchio, che lì è solo un segno. */
.cv-checks--on-dark li { color: var(--on-dark); }
.cv-checks--on-dark li::before { background-color: var(--brand); }
/* Il ritratto del medico, quando c'è: TESSERA, mai fascia larga. Questo settore consegna ritratti morbidi
e il canale @design li serve senza soglie — a tessera piccola reggono, a piena larghezza no. */
.cv-panel__ritratto { width: var(--ritratto-w); border-radius: var(--radius-lg); overflow: hidden; margin: var(--space-5) 0 0; box-shadow: var(--shadow-sm); }
.cv-panel__ritratto img { width: 100%; height: auto; display: block; }
@media (max-width: 899.98px) { .cv-panel { grid-template-columns: 1fr; gap: var(--space-6); } }
/* Banda delle CIFRE: tre dati del curriculum in grande. La superficie è un gradiente di tint, così la
pagina alterna carta → tint → navy invece di carta → carta. */
/* ⚠ La banda vive DENTRO la sezione del curriculum: senza un margine proprio si incolla al pannello
(misurato: −22px, cioè si sovrapponevano). Una banda che segue una scheda vuole il suo stacco. */
.cifre { background: var(--grad-tint); padding-block: var(--section-y-stretta); border-top: 1px solid var(--line);
margin-top: var(--section-y); }
.cifre__riga { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-7); }
.cifra { display: flex; flex-direction: column; gap: var(--space-2); }
.cifra__n {
font-family: var(--font-display); font-weight: 500;
font-size: clamp(1.7rem, 1.32rem + 1.15vw, 2.5rem); line-height: 1.02;
letter-spacing: -0.03em; color: var(--accent-ink);
}
.cifra__t { color: var(--ink-muted); font-size: var(--text-md); max-width: 22ch; }
/* ---------- FOCUS (method): l'area di approfondimento ---------- */
.focus { background: var(--grad-brand); color: var(--on-dark); padding-block: var(--section-y-banda); }
.focus__row { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: var(--space-7); align-items: center; }
.focus h2 { color: #FFFFFF; max-width: 16ch; }
.focus .lead, .focus p { color: var(--on-dark-muted); }
.focus__body > * + * { margin-top: var(--space-4); }
.focus__fig { margin: 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: var(--fig-ratio); background: var(--brand-mid); }
.focus__fig img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899.98px) { .focus__row { grid-template-columns: 1fr; gap: var(--space-6); } }
/* ---------- FASCIA CONTATTI ---------- */
.contact-band { background: var(--grad-carta); padding-block: var(--section-y-banda); border-top: 1px solid var(--line); }
.contact-band__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); }
.contact-band__text { max-width: 46ch; }
.contact-band h2 { margin-bottom: var(--space-3); }
.contact-band .lead { margin: 0; }
/* ---------- Fascia CTA di chiusura delle pagine interne ---------- */
.cta-band { background: var(--grad-band); color: var(--on-dark); padding-block: var(--section-y-banda); }
.cta-band__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); }
.cta-band h2 { color: #FFFFFF; max-width: 22ch; }
.cta-band .lead, .cta-band p { color: var(--on-dark-muted); }
.cta-band .eyebrow { color: var(--accent-lt); }
.cta-band__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* ---------- Testata di pagina ---------- */
/* ⚠ La page-head NON riusa la size della testata (regola 6): è una testata di pagina, non un hero. */
.page-head { background: var(--grad-brand); color: var(--on-dark); padding-block: calc(var(--section-y) * 0.85); }
.page-head h1 { font-size: var(--text-2xl); color: #FFFFFF; max-width: 20ch; }
.page-head .eyebrow { color: var(--accent-lt); }
.page-head .lead { color: var(--on-dark-muted); margin-top: var(--space-4); }
/* La pagina download (se mai servisse) usa container--narrow: qui si allinea al contenuto delle pagine. */
.page-head .container--narrow { max-width: var(--container); }
.page-head .container--narrow > p { max-width: 60ch; }
/* ---------- Prosa ---------- */
/* I paragrafi lunghi delle pagine si rivelano a scalare: senza, il corpo del testo è l'unica parte del
sito che non risponde allo scorrimento, e si nota. */
.prose > p, .prose > ul, .prose > ol, .prose > h2, .prose > h3 { --reveal-i: 0; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-7); }
.prose h3 { margin-top: var(--space-6); }
.prose ul { display: grid; gap: var(--space-2); }
.prose li { position: relative; padding-left: var(--space-5); }
.prose li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-mark); }
/* ⚠ `.prose li::before` vale anche per gli ORDINATI: senza questo un stampa «1. • voce». */
.prose ol { counter-reset: n; display: grid; gap: var(--space-2); padding-left: var(--space-5); list-style: decimal; }
.prose ol li { padding-left: 0; }
.prose ol li::before { content: none; }
.prose ol li::marker { color: var(--accent-ink); font-family: var(--font-display); font-weight: 600; }
.prose a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
/* ---------- Pagina Ambulatorio ---------- */
/* ⚠ Il vuoto sotto il testo (misurato: colonna 300px contro immagine 798px) non si chiude spostando
testo: si chiude ACCORCIANDO l'immagine e centrando le due colonne, così l'aria si distribuisce
invece di accumularsi in fondo a una sola. */
.amb__split { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: var(--space-8); align-items: center; }
/* ⚠ Altezza NATURALE, non un rapporto imposto: questo slot ospita le tavole didattiche del settore, che
sono spesso VERTICALI e portano il titolo impresso nei pixel. Un contenitore 4:3 con `object-fit:
cover` gliene taglierebbe via proprio il titolo — e il ritaglio non si vede in nessun numero. */
.amb__fig { margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: #05070D;
max-height: clamp(300px, 33vw, 470px); display: flex; }
.amb__fig img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (max-width: 899.98px) { .amb__split { grid-template-columns: 1fr; gap: var(--space-6); } }
/* ---------- Pagina Contatti ---------- */
.contact-cols { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); align-items: start; }
@media (max-width: 899.98px) { .contact-cols { grid-template-columns: 1fr; gap: var(--space-6); } }
/* ⚠ Il modulo va staccato dalla prosa che lo introduce: senza, l'ultima riga del paragrafo e la prima
etichetta del form si toccano e il blocco legge come un unico ammasso. */
.contact-cols h2 { margin-bottom: var(--space-4); }
.contact-cols > div > .prose { margin-bottom: var(--space-7); }
.contact-form { display: grid; gap: var(--space-4); }
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 599.98px) { .contact-form .row { grid-template-columns: 1fr; } }
.field { display: grid; gap: var(--space-2); }
.field label { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); }
.field input, .field textarea {
font: inherit; color: var(--ink); background: var(--paper);
border: 1px solid var(--line); border-radius: var(--field-radius); padding: 0.72em 0.9em; width: 100%;
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--accent-lt); }
/* ⚠ `.consent` è un flex: un dentro il testo diventerebbe un flex-item a sé e spezzerebbe la riga.
Tutto il testo (link incluso) va in un solo . */
.consent { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--ink-muted); }
.consent input { margin-top: .25em; flex: 0 0 auto; }
/* ⚠ Aside per fondo CHIARO: la fascia scura dell'home non si riusa qui (i colori si invertirebbero). */
.contact-info { background: var(--tint); border-radius: var(--radius-lg); padding: var(--space-6); }
.contact-info h2, .contact-info h3 { margin-bottom: var(--space-4); }
.contact-info dl { display: grid; gap: var(--space-4); margin: 0; }
.contact-info dt { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); }
.contact-info dd { margin: 0; color: var(--ink); }
.contact-info a { color: var(--accent-ink); }
.hours { display: grid; gap: var(--space-2); }
.hours li { display: flex; justify-content: space-between; gap: var(--space-4); border-bottom: 1px dashed var(--line); padding-bottom: var(--space-2); }
.hours li span:first-child { color: var(--ink-muted); }
/* ---------- Piè ---------- */
.site-footer { background: var(--grad-foot); color: var(--on-dark-muted); padding-block: var(--space-8) var(--space-6); }
/* ⚠ `repeat(auto-fit, …)` NON ammette una traccia flessibile PRIMA di sé: la dichiarazione intera verrebbe
scartata e il grid tornerebbe a UNA colonna, senza lasciare traccia nel sorgente. Lezione pagata su
clinical_center: si dichiarano le tracce, e la prima si allarga con uno span. */
.site-footer__row { display: grid; grid-template-columns: var(--footer-cols); gap: var(--space-7); }
.site-footer__col h3 { color: #FFFFFF; font-size: var(--text-base); margin-bottom: var(--space-4); }
.site-footer__col ul { display: grid; gap: var(--space-2); }
.site-footer a { color: var(--on-dark-muted); }
.site-footer a:hover { color: var(--on-dark); }
.site-footer__tag { color: var(--on-dark-muted); max-width: 40ch; }
.site-footer__legal {
margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid rgba(234,242,250,.16);
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4);
font-size: var(--text-sm);
}
/* ⚠ `space-between` con tre elementi NON centra il mediano se gli esterni non sono larghi uguale:
la griglia 1fr auto 1fr sì. */
.site-footer__legal > :last-child { justify-self: end; text-align: right; }
.powered { display: inline-flex; align-items: center; gap: var(--space-2); }
.powered img { width: 20px; height: 20px; }
@media (max-width: 899.98px) {
.site-footer__row { grid-template-columns: 1fr 1fr; }
.site-footer__legal { grid-template-columns: 1fr; text-align: left; }
.site-footer__legal > :last-child { justify-self: start; text-align: left; }
}
@media (max-width: 599.98px) { .site-footer__row { grid-template-columns: 1fr; } }
/* ---------- Barra CTA mobile ---------- */
.cta-bar { display: none; }
@media (max-width: 899.98px) {
.cta-bar {
display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
background: var(--brand-dark); border-top: 1px solid rgba(234,242,250,.16);
padding: var(--space-3) var(--gutter); gap: var(--space-3);
}
.cta-bar a { flex: 1 1 0; }
/* ⚠ La CTA dell'intestazione sparisce dove c'è la barra fissa: ripete la stessa azione e, misurata,
sbordava di 1px oltre il viewport a 390. ⚠ Il selettore sale di un livello PERCHÉ LE MEDIA QUERY
NON AGGIUNGONO SPECIFICITÀ: `.site-header__cta` (0,1,0) qui dentro perderebbe contro il
`.btn{display:inline-flex}` (0,1,0) dichiarato più in alto. */
.site-header a.site-header__cta { display: none; }
/* ⚠ La specificità: `.btn{display:inline-flex}` dichiarato dopo batterebbe una regola di pari peso
dentro una media query — le media query NON aggiungono specificità. Si sale di un livello. */
.cta-bar a.cta-bar__call { display: inline-flex; justify-content: center; }
body { padding-bottom: 72px; }
}
/* ---------- 404 ---------- */
.notfound { padding-block: calc(var(--section-y) * 1.2); text-align: center; }
.notfound h1 { max-width: 18ch; margin-inline: auto; }
.notfound p { margin: var(--space-5) auto var(--space-6); }