/* ==========================================================================
ConCura — sito pubblico
==========================================================================
Un foglio, nessuna dipendenza. È organizzato in sezioni numerate: si legge
dall'alto e ogni componente sta in un posto solo.
I VALORI vengono dal design system della piattaforma (l'app Vue in
`puntofarma2024/`, pagina /design-system). Sono dichiarati una volta sola
nella sezione 1 e nient'altro nel foglio scrive un colore, un raggio o
un'ombra a mano. Il dizionario con i contrasti calcolati è in
`~/Progetto ConCura/DESIGN_LANGUAGE.md`.
La FORMA viene dal sito di Oura: pagina che respira, fotografia a tutta
pagina, titoli in un serif da editoriale, pannelli di vetro appoggiati
sopra alle immagini, una sola azione per schermata. Dove le due cose
litigano vince il design system: i colori sono i nostri.
1. Token
2. Base e reset
3. Tipografia
4. Impaginazione
5. Intestazione e menu
6. Bottoni
7. Superfici, vetro, occhielli
8. Fascia di apertura
8bis. Parla con un medico
9. Card che si espandono
10. Tessere dei servizi
11. Percorso e passi
12. Nastro dei loghi
13. Recensioni
14. Ricerca dei centri
15. Piani e tariffe
16. Domande frequenti
17. Campi
18. Footer
19. Pagine interne
19bis. Pattern di pagina
20. Icone
21. Accessibilità e movimento
21bis. Comparsa allo scorrimento
21ter. Barra di sezione
========================================================================== */
/* ==========================================================================
1. TOKEN
Gli stessi valori della piattaforma. Nell'app sono variabili SASS, qui
custom property: chi aggiunge un componente pesca da qui.
========================================================================== */
:root {
/* --- Marchio ---------------------------------------------------------
Il teal è il colore del marchio ma su fondo chiaro si ferma a 3:1: va
usato per tinte, aure e icone grandi, mai per il testo. Per il testo
c'è la variante profonda; sui fondi scuri quella schiarita. L'azione
principale, come nell'app, è il navy. */
--brand-teal: #009DA9;
--brand-teal-deep: #006B75;
--brand-teal-light: #5CCFD9;
--brand-navy: #0E2A47;
--brand-navy-deep: #00243F;
/* --- Neutri freddi: il numero è la distanza dal bianco ---------------- */
--n-0: #FFFFFF;
--n-50: #F1F5F8;
--n-100: #E1E9EE;
--n-200: #C4D0D9;
--n-400: #8FA1AF;
--n-500: #4A5C6B;
--n-700: #1F2E3A;
--n-900: #0A1620;
/* --- Semantici: tutti sopra 4.5:1 sul fondo chiaro -------------------- */
--stato-successo: #007A5E;
--stato-attenzione: #9A6200;
--stato-errore: #C3341A;
--stato-info: #2A6E9C;
/* --- Ruoli del testo -------------------------------------------------
I componenti non nominano un neutro: nominano il ruolo. Dentro a
`.su-scuro` i ruoli cambiano valore e tutto si inverte da sé. */
--testo-titolo: var(--n-900);
--testo-corrente: var(--n-700);
--testo-secondario: var(--n-500);
--accento-testo: var(--brand-teal-deep);
--filo: var(--n-100);
--occhiello-testo: var(--n-500);
--azione-fondo: var(--brand-navy);
--azione-fondo-hover: #0C2440;
--azione-testo: var(--n-0);
--ghost-bordo: rgba(14, 42, 71, 0.3);
--ghost-bordo-hover: var(--brand-navy);
--ghost-testo: var(--brand-navy);
--ghost-fondo-hover: rgba(14, 42, 71, 0.07);
/* --- Carattere -------------------------------------------------------
Due famiglie, come su Oura: un serif da editoriale per i titoli grandi
e un sans neutro per tutto il resto. Il serif non scende mai sotto i
22px: a misure piccole perde le grazie e diventa illeggibile. */
--font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
--font-testo: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-titoli: var(--font-testo); /* nome storico: i titoli di interfaccia */
--peso-testo: 400;
--peso-titolo: 700;
--peso-titolo-forte: 800;
/* --- Forma: quattro raggi, non uno di più ----------------------------- */
--raggio-controlli: 12px;
--raggio-base: 18px;
--raggio-grande: 24px;
--raggio-pillola: 999px;
/* --- Elevazione ------------------------------------------------------
La superficie non ha bordo: la disegnano un filo chiaro in alto, un filo
scurissimo tutt'intorno e un'ombra morbida. */
--ombra-campo: 0 1px 2px rgba(10, 22, 32, 0.06);
--ombra-superficie:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
inset 0 0 0 1px rgba(10, 22, 32, 0.04),
0 1px 2px rgba(10, 22, 32, 0.05),
0 8px 24px -12px rgba(10, 22, 32, 0.18);
--ombra-superficie-alta:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
inset 0 0 0 1px rgba(10, 22, 32, 0.04),
0 12px 32px -12px rgba(10, 22, 32, 0.28);
--ombra-modale: 0 24px 64px -16px rgba(10, 22, 32, 0.32);
--ombra-foto: 0 12px 32px -12px rgba(10, 22, 32, 0.28);
/* --- Superfici -------------------------------------------------------- */
--superficie: rgba(255, 255, 255, 0.8);
--superficie-piena: #FFFFFF;
--vetro: rgba(255, 255, 255, 0.72);
--sfocatura: 18px;
/* --- Vetro scuro: i pannelli appoggiati sopra a una fotografia --------
L'opacità è tarata sul caso peggiore, una fotografia bianca: al 44% il
testo bianco sopra stava a 1,9:1. All'82% sta a 5,3:1 su qualunque
scatto, e con la sfocatura e il filo chiaro legge ancora come vetro.
Non abbassarla: è ciò che rende il componente sicuro senza dover
misurare ogni fotografia. */
--vetro-scuro: rgba(10, 22, 32, 0.82);
--vetro-scuro-filo: rgba(255, 255, 255, 0.2);
/* --- Sfumatura ConCura -----------------------------------------------
La sfumatura delle presentazioni ConCura: un blu acciaio sul bordo
sinistro che cade al nero verso l'angolo in alto a destra.
I sette valori non sono scelti a occhio. Sono campionati dallo scatto di
riferimento lungo l'asse della sfumatura — che non è orizzontale ma a
69°, ricavato cercando dove le due bande pulite dello scatto hanno lo
stesso colore. Con questi sette stop l'errore massimo è 7 livelli su
255, cioè sotto al rumore del JPEG. Metodo in DESIGN_LANGUAGE §2.6.
Ci passa **ogni** superficie profonda del sito: sezioni scure, menu,
footer, fasce di chiusura, pannelli profondi, fascia di apertura. Chi
ne aggiunge una nomina questo token e non riscrive i colori. */
/* I sei colori della sfumatura, separati dalla loro posizione. Sono nati
per la sfumatura che respirava nella fascia di apertura della home (tolta
quando è arrivata la fotografia; è nel commit 1bfc83a) e restano: chi
rifà la sfumatura con un'altra geometria riusa questi, e ricampionando i
colori si cambiano qui e basta. */
--sfumatura-1: #314F71;
--sfumatura-2: #284763;
--sfumatura-3: #1B3041;
--sfumatura-4: #0C151E;
--sfumatura-5: #06070B;
--sfumatura-6: #000000;
--sfumatura-concura: linear-gradient(
69deg,
var(--sfumatura-1) 0%,
var(--sfumatura-1) 10%,
var(--sfumatura-2) 20%,
var(--sfumatura-3) 35%,
var(--sfumatura-4) 55%,
var(--sfumatura-5) 80%,
var(--sfumatura-6) 100%
);
/* L'ancora scura della sfumatura, in componenti separate perché serve con
opacità diverse. È il colore di tutti i veli: così una fotografia velata
e una superficie profonda stanno nella stessa palette. Sostituisce il
navy #00243F ed è più scuro (luminanza 0,0071 contro 0,0162), quindi il
contrasto del testo che ci sta sopra può solo migliorare. */
--sfumatura-scuro: 12, 21, 30;
/* --- Aure ------------------------------------------------------------
Il fondo chiaro non è un colore piatto: è il chiaro con un alone di
marca in alto. */
--aura-pagina:
radial-gradient(60rem 34rem at 32% -10rem, rgba(0, 157, 169, 0.18), transparent 60%),
radial-gradient(46rem 30rem at 100% 6rem, rgba(14, 42, 71, 0.08), transparent 60%);
--superficie-profonda: var(--sfumatura-concura);
/* --- Velo sulle fotografie -------------------------------------------
È navy e non nero: fotografie di provenienza diversa finiscono così
dentro la stessa palette e una fila di immagini legge come una cosa
sola. I valori sono misurati sul contrasto del testo che ci sta sopra. */
/* Il velo dal basso vestiva la fotografia ma non copriva abbastanza il
terzo dove poggiano titolo e riga delle card: misurato, il titolo di
«Sostieni un Paziente» stava a 3,38:1 (ne servono 4,5) perché lo scatto
lì sotto è quasi bianco. Ora l'opacità resta sopra 0,69 fino al 36%
dell'altezza, che è dove finisce il testo: nel caso peggiore — una
fotografia bianca — il bianco sopra sta a 7,3:1. */
--velo-basso: linear-gradient(
to top,
rgba(var(--sfumatura-scuro), 0.9) 0%,
rgba(var(--sfumatura-scuro), 0.78) 30%,
rgba(var(--sfumatura-scuro), 0.42) 55%,
rgba(var(--sfumatura-scuro), 0.12) 80%,
rgba(var(--sfumatura-scuro), 0.02) 100%
);
--velo-sinistra: linear-gradient(
to right,
rgba(var(--sfumatura-scuro), 0.76) 0%,
rgba(var(--sfumatura-scuro), 0.5) 42%,
rgba(var(--sfumatura-scuro), 0.18) 72%,
rgba(var(--sfumatura-scuro), 0.04) 100%
);
/* --- Ritmo -----------------------------------------------------------
La pagina respira: le sezioni stanno larghe e il contenuto non tocca
mai i bordi. Sono le misure che danno il passo "da rivista". */
--misura: 1280px;
--gutter: 1.5rem;
--sezione-y: clamp(3.645rem, 6.48vw, 6.48rem);
--header-h: 4.5rem;
/* --- Movimento -------------------------------------------------------- */
--transizione: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
--transizione-lenta: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
--transizione-espansione: 0.8s cubic-bezier(0.22, 1, 0.24, 1);
/* --- Nomi storici: li citano ancora alcune pagine. Non usarli in codice
nuovo. ----------------------------------------------------------- */
--color-primary-dark: var(--brand-navy);
--color-primary-deeper: var(--brand-navy-deep);
--color-accent-teal: var(--brand-teal);
--color-teal-deep: var(--brand-teal-deep);
--color-teal-light: var(--brand-teal-light);
--color-sfondo: var(--n-50);
--color-text-white: var(--n-0);
--color-text-muted: var(--testo-secondario);
--color-border: var(--filo);
--transition-fast: var(--transizione);
--transition-smooth: var(--transizione-lenta);
}
@media (min-width: 1024px) {
:root {
--gutter: 2.5rem;
--header-h: 5rem;
}
}
/* Superficie profonda: menu, sezioni dipinte, footer, pannelli scuri. I ruoli
cambiano valore una volta sola e ogni componente dentro si inverte da sé. */
.su-scuro,
#menu,
.sezione--scura,
.step.paint,
footer.bright-footer,
.hero,
.cta-band,
.pannello-profondo,
.superficie--scura,
body.has-hero .site-header:not(.is-scrolled) {
--testo-titolo: #FFFFFF;
--testo-corrente: rgba(255, 255, 255, 0.88);
--testo-secondario: rgba(255, 255, 255, 0.72);
--accento-testo: var(--brand-teal-light);
--filo: rgba(255, 255, 255, 0.14);
--occhiello-testo: rgba(255, 255, 255, 0.72);
--azione-fondo: var(--n-0);
--azione-fondo-hover: rgba(255, 255, 255, 0.88);
--azione-testo: var(--brand-navy);
--ghost-bordo: rgba(255, 255, 255, 0.35);
--ghost-bordo-hover: rgba(255, 255, 255, 0.7);
--ghost-testo: #FFFFFF;
--ghost-fondo-hover: rgba(255, 255, 255, 0.12);
color: var(--testo-corrente);
}
/* ==========================================================================
2. BASE E RESET
========================================================================== */
@font-face {
font-family: 'Plus Jakarta Sans';
src: url('assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
font-weight: 200 800;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Plus Jakarta Sans';
src: url('assets/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
font-weight: 200 800;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Instrument Serif: un solo peso, disegnato per le misure grandi. È il
corrispettivo libero del serif da editoriale usato da Oura. */
@font-face {
font-family: 'Instrument Serif';
src: url('assets/fonts/instrument-serif-latin.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Instrument Serif';
src: url('assets/fonts/instrument-serif-latin-ext.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Instrument Serif';
src: url('assets/fonts/instrument-serif-italic-latin.woff2') format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
background-color: var(--n-50);
color: var(--testo-corrente);
font-family: var(--font-testo);
font-weight: var(--peso-testo);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scrollbar-width: thin;
scrollbar-color: rgba(10, 22, 32, 0.2) transparent;
}
body {
min-height: 100vh;
overflow-x: hidden;
position: relative;
background-color: var(--n-50);
font-size: 1.0625rem;
line-height: 1.65;
}
/* Il fondo della pagina: il chiaro dell'app con l'aura di marca. È l'aura a
rendere visibile che le superfici sono vetro e non carta. */
.page-bg {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background-color: var(--n-50);
background-image: var(--aura-pagina);
background-repeat: no-repeat;
}
.wrapper {
position: relative;
z-index: 1;
}
a {
color: inherit;
text-decoration: none;
}
img,
video,
svg {
max-width: 100%;
display: block;
}
/* Le pagine dichiarano width/height sull'![]()
(serve al browser per
riservare lo spazio ed evitare il salto del layout). Senza `height: auto`
quel valore resta anche quando il CSS limita la larghezza, e l'immagine si
deforma: il logo di tecnologia.html diventava una striscia verticale. */
img {
height: auto;
}
button {
font: inherit;
color: inherit;
background: none;
border: 0;
cursor: pointer;
}
ul,
ol {
list-style: none;
}
::selection {
background: rgba(0, 157, 169, 0.24);
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(10, 22, 32, 0.2);
border-radius: var(--raggio-pillola);
}
.su-scuro,
#menu {
scrollbar-color: rgba(255, 255, 255, 0.24) transparent;
}
/* Il fuoco si vede solo da tastiera ed è scuro e neutro, mai un colore
acceso: è la regola dichiarata nel design system. Sulle superfici profonde
diventa teal, l'unico accento che vi si legge. */
:focus-visible {
outline: 2px solid var(--n-900);
outline-offset: 2px;
}
.su-scuro :focus-visible,
#menu :focus-visible,
.sezione--scura :focus-visible,
footer.bright-footer :focus-visible,
.hero :focus-visible,
.exp-card :focus-visible {
outline-color: var(--brand-teal);
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 999;
background: var(--n-0);
color: var(--n-900);
padding: 0.8rem 1.4rem;
border-radius: 0 0 var(--raggio-controlli) 0;
font-weight: var(--peso-titolo);
}
.skip-link:focus {
left: 0;
}
/* ==========================================================================
3. TIPOGRAFIA
Due voci. Il serif dice le cose grandi — una per sezione, mai due di
seguito. Il sans dice tutto il resto: etichette, testo corrente, dati.
========================================================================== */
/* Titolo da editoriale. La misura è fluida perché a queste dimensioni un
valore fisso o straborda sul telefono o rimpicciolisce sul monitor. */
.display {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(2.5rem, 6.4vw, 5.25rem);
line-height: 0.98;
letter-spacing: -0.02em;
color: var(--testo-titolo);
text-wrap: balance;
}
.display--sm {
font-size: clamp(2rem, 4.4vw, 3.375rem);
line-height: 1.04;
}
.display--xs {
font-size: clamp(1.5rem, 2.6vw, 2.125rem);
line-height: 1.1;
letter-spacing: -0.015em;
}
/* Una parola in corsivo dentro a un titolo: è l'accento tipografico del
serif, e sostituisce il grassetto (che questo carattere non ha). */
.display em,
.display i {
font-style: italic;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-testo);
font-weight: var(--peso-titolo);
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--testo-titolo);
}
h1 {
font-size: 1.75rem;
letter-spacing: -0.02em;
}
h2 {
font-size: 1.375rem;
}
h3 {
font-size: 1.125rem;
}
h4 {
font-size: 1rem;
}
h5 {
font-size: 0.9375rem;
}
h6 {
font-size: 0.875rem;
}
/* Occhiello: la riga in maiuscoletto che introduce un blocco. Su Oura è il
solo elemento che accompagna il titolo: niente pastiglie colorate. */
.occhiello,
.badge-white {
display: inline-block;
font-family: var(--font-testo);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--occhiello-testo);
margin-bottom: 1rem;
}
.occhiello--accento {
color: var(--accento-testo);
}
/* Con un filo davanti: dice "qui comincia una sezione". */
.occhiello--filo::before {
content: '';
display: inline-block;
width: 2rem;
height: 1px;
margin-right: 0.75rem;
vertical-align: 0.25em;
background: currentColor;
opacity: 0.5;
}
/* Sommario sotto a un titolo grande. */
.lead,
.page-lead {
font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
line-height: 1.6;
color: var(--testo-secondario);
max-width: 46ch;
}
.lead--centro {
margin-left: auto;
margin-right: auto;
text-align: center;
}
p {
text-wrap: pretty;
}
strong,
b {
font-weight: var(--peso-titolo);
color: var(--testo-titolo);
}
/* Cifra in evidenza. */
.figura {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(2.5rem, 4vw, 3.5rem);
line-height: 1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
color: var(--testo-titolo);
}
/* ==========================================================================
4. IMPAGINAZIONE
========================================================================== */
.contenitore {
width: 100%;
max-width: var(--misura);
margin: 0 auto;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
.contenitore--stretto {
max-width: 56rem;
}
.sezione {
position: relative;
padding-top: var(--sezione-y);
padding-bottom: var(--sezione-y);
}
/* Due sezioni chiare di fila non sommano i loro respiri: fra loro basta
quello di sopra, o si aprono voragini da 16rem. Il respiro pieno torna
quando cambia qualcosa — un filo, una superficie profonda. */
.sezione + .sezione {
padding-top: 0;
}
.sezione + .sezione--filo,
.sezione + .sezione--scura,
.sezione--scura + .sezione {
padding-top: var(--sezione-y);
}
.sezione--filo {
border-top: 1px solid var(--filo);
}
/* Un'ancora su una sezione (o su qualunque cosa) non deve finire sotto alla
barra fissa. */
.sezione[id],
[id]:target {
scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
/* Sezione su superficie profonda: è un momento, non un secondo fondo. */
.sezione--scura {
background: var(--superficie-profonda);
}
/* Testa di sezione: occhiello, titolo grande, sommario. Una per sezione. */
.testa {
max-width: 46rem;
margin-bottom: clamp(2.5rem, 4vw, 4rem);
}
.testa--centro {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.testa--centro .lead {
margin-left: auto;
margin-right: auto;
}
.testa__titolo {
margin-bottom: 1rem;
}
/* Griglie di uso comune. */
.griglia {
display: grid;
gap: clamp(1rem, 2vw, 1.75rem);
}
.griglia--2 {
grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
}
.griglia--3 {
grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}
.griglia--4 {
grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}
/* Sempre due colonne, non "almeno 22rem": con `auto-fit` a contenitore
pieno (1280px) tre card da 22rem ci stanno ancora, e la fila diventa di
tre. Serve dove le card sono lunghe da leggere — le convenzioni e le
partnership — e la coppia è la lettura giusta. */
.griglia--coppia {
grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
.griglia--coppia {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Due colonne asimmetriche: testo e immagine, o testo e dati. */
.griglia--split {
grid-template-columns: 1fr;
gap: clamp(2rem, 4vw, 4rem);
align-items: center;
}
@media (min-width: 900px) {
.griglia--split {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.griglia--split--largo-sx {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}
}
/* ==========================================================================
5. INTESTAZIONE E MENU
L'intestazione è trasparente sopra alla fascia di apertura e diventa
vetro appena si scorre (`.is-scrolled`, la mette app.js). È il modo in cui
Oura fa entrare la fotografia sotto alla barra invece di appoggiarcela.
========================================================================== */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
height: var(--header-h);
display: flex;
align-items: center;
gap: 1.5rem;
padding-left: var(--gutter);
padding-right: var(--gutter);
color: var(--n-900);
transition: background var(--transizione), backdrop-filter var(--transizione),
border-color var(--transizione), color var(--transizione);
background: var(--vetro);
-webkit-backdrop-filter: blur(var(--sfocatura)) saturate(150%);
backdrop-filter: blur(var(--sfocatura)) saturate(150%);
border-bottom: 1px solid rgba(10, 22, 32, 0.06);
}
/* Sopra a una fotografia la barra sparisce e il testo diventa bianco. */
body.has-hero .site-header:not(.is-scrolled) {
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-color: transparent;
/* bianco pieno, non il testo corrente all'88%: le voci sono a 15px sopra
a una fotografia e ogni punto di contrasto conta */
color: var(--n-0);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.site-header {
background: rgba(255, 255, 255, 0.96);
}
}
.logo-wrap {
flex-shrink: 0;
display: flex;
align-items: center;
}
.logo-img {
height: 3.5rem;
width: auto;
object-fit: contain;
}
/* Il marchio esiste in due file reali: scritta navy per la barra di vetro,
scritta bianca con la C teal per la barra trasparente sopra alla fascia di
apertura. Prima ce n'era uno solo, portato a bianco con `filter:
brightness(0) invert(1)`: il filtro però schiarisce **tutto**, quindi
sbiancava anche la C e il marchio perdeva il teal. Due file, uno solo
visibile per volta, nessun JavaScript. */
.logo-barra--bianco {
display: none;
}
body.has-hero .site-header:not(.is-scrolled) .logo-barra--blu {
display: none;
}
body.has-hero .site-header:not(.is-scrolled) .logo-barra--bianco {
display: block;
}
/* --- Navigazione da 1024px ------------------------------------------------ */
.nav-principale {
display: none;
}
@media (min-width: 1024px) {
.nav-principale {
display: flex;
align-items: center;
gap: 0.25rem;
margin-left: 0.5rem;
}
}
.nav-voce {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.5rem 0.875rem;
border-radius: var(--raggio-pillola);
font-size: 0.9375rem;
font-weight: 600;
color: inherit;
transition: background var(--transizione), opacity var(--transizione);
}
.nav-voce:hover,
.nav-voce[aria-expanded='true'] {
background: rgba(10, 22, 32, 0.06);
}
body.has-hero .site-header:not(.is-scrolled) .nav-voce:hover,
body.has-hero .site-header:not(.is-scrolled) .nav-voce[aria-expanded='true'] {
background: rgba(255, 255, 255, 0.16);
}
/* Il chevron ruota quando il pannello è aperto. */
.nav-voce__chevron {
width: 0.75rem;
height: 0.75rem;
transition: transform var(--transizione);
}
.nav-voce[aria-expanded='true'] .nav-voce__chevron {
transform: rotate(180deg);
}
.header-azioni {
margin-left: auto;
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Sul telefono nella barra ci sta poco: il numero verde resta come bottone
tondo con la sola cornetta (il numero è nel menu e nella fascia di
apertura), e l'etichetta rimane per chi usa uno screen reader. */
@media (max-width: 767.98px) {
.header-azioni .btn {
padding: 0 1rem;
font-size: 0.875rem;
}
.header-azioni .btn-outline-lime {
width: 2.75rem;
min-height: 2.75rem;
padding: 0;
border-radius: 50%;
}
.header-azioni .btn-outline-lime .phone-text {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
}
/* --- Pannello del menu grande (il "mega") --------------------------------
Un foglio di vetro che scende da sotto la barra, con le voci in colonne.
Ogni voce porta l'icona del servizio: è così che si riconosce a colpo
d'occhio. */
.mega {
position: fixed;
top: var(--header-h);
/* Parte dalla voce "Servizi" e arriva al margine destro della barra, dove
finisce "Accedi": il pannello scende dalla voce che lo apre invece di
partire da sotto al marchio. La posizione della voce la misura il
JavaScript quando apre il pannello (`--voce-sinistra`, §4 di app.js):
dipende dalla larghezza del marchio e dei caratteri, e scritta qui a
mano si scollerebbe al primo cambio. Il ripiego è il margine della
barra. Su uno schermo molto largo il tetto `--misura` lo ferma, e con
`margin: 0` resta attaccato a sinistra invece di centrarsi. */
left: var(--voce-sinistra, var(--gutter));
right: var(--gutter);
z-index: 99;
max-width: var(--misura);
margin: 0;
padding: clamp(1.5rem, 2.5vw, 2.25rem);
border-radius: var(--raggio-grande);
background: rgba(255, 255, 255, 0.94);
-webkit-backdrop-filter: blur(var(--sfocatura)) saturate(140%);
backdrop-filter: blur(var(--sfocatura)) saturate(140%);
box-shadow: var(--ombra-modale);
opacity: 0;
visibility: hidden;
transform: translateY(-0.5rem);
transition: opacity var(--transizione), transform var(--transizione),
visibility var(--transizione);
}
.mega.is-open {
opacity: 1;
visibility: visible;
transform: none;
}
.mega__griglia {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: 0.25rem 2rem;
align-items: start;
}
.mega__gruppo {
display: flex;
flex-direction: column;
}
.mega__gruppo-titolo {
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--n-500);
margin: 0.5rem 0 0.5rem 0.75rem;
}
.mega__item {
display: flex;
align-items: flex-start;
gap: 0.875rem;
padding: 0.75rem;
border-radius: var(--raggio-controlli);
transition: background var(--transizione);
}
.mega__item:hover {
background: rgba(0, 157, 169, 0.08);
}
/* Il cerchio con l'icona: tinta teal, icona nella variante leggibile. */
.mega__icona {
flex-shrink: 0;
display: grid;
place-items: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: rgba(0, 157, 169, 0.12);
color: var(--brand-teal-deep);
transition: background var(--transizione), color var(--transizione);
}
.mega__item:hover .mega__icona {
background: var(--brand-teal-deep);
color: var(--n-0);
}
.mega__icona .cc-icon {
width: 1.375rem;
height: 1.375rem;
vertical-align: 0;
}
.mega__testo strong {
display: block;
font-size: 0.9375rem;
font-weight: 600;
color: var(--n-900);
line-height: 1.35;
}
.mega__testo span {
display: block;
font-size: 0.8125rem;
line-height: 1.4;
color: var(--n-500);
}
/* La colonna di richiamo a destra del pannello. */
.mega__aside {
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.875rem;
padding: 1.25rem;
border-radius: var(--raggio-base);
background: rgba(10, 22, 32, 0.035);
}
.mega__aside h4 {
font-family: var(--font-display);
font-weight: 400;
font-size: 1.375rem;
line-height: 1.1;
letter-spacing: -0.015em;
}
.mega__aside p {
font-size: 0.875rem;
color: var(--n-500);
line-height: 1.5;
}
/* --- Tendina di navigazione ----------------------------------------------
Il fratello piccolo del pannello dei servizi: tre o quattro voci sotto a
una voce della barra. Stessa meccanica (`is-open` messa da app.js, apertura
anche col mouse da 1024px), stessa pelle di vetro, ma ancorata alla voce
invece che alla larghezza della pagina — per tre link un pannello a tutta
riga sarebbe fuori scala. */
.nav-gruppo {
position: relative;
display: inline-flex;
}
.tendina {
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
z-index: 99;
min-width: 13.5rem;
padding: 0.5rem;
border-radius: var(--raggio-base);
background: rgba(255, 255, 255, 0.94);
-webkit-backdrop-filter: blur(var(--sfocatura)) saturate(140%);
backdrop-filter: blur(var(--sfocatura)) saturate(140%);
box-shadow: var(--ombra-modale);
opacity: 0;
visibility: hidden;
transform: translateY(-0.375rem);
transition: opacity var(--transizione), transform var(--transizione),
visibility var(--transizione);
}
.tendina.is-open {
opacity: 1;
visibility: visible;
transform: none;
}
.tendina__voce {
display: block;
padding: 0.625rem 0.75rem;
border-radius: var(--raggio-controlli);
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.35;
/* il colore è dichiarato: la tendina è di vetro chiaro anche quando la
barra sopra è trasparente e il suo testo è bianco */
color: var(--n-900);
transition: background var(--transizione);
}
.tendina__voce:hover {
background: rgba(10, 22, 32, 0.06);
}
/* --- Menu a tutto schermo (telefono e tablet) ---------------------------
La stessa superficie profonda del pannello di accesso dell'app. */
.menu-trigger {
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-height: 2.75rem;
padding: 0 1.125rem;
border-radius: var(--raggio-pillola);
border: 1px solid currentColor;
font-family: var(--font-testo);
font-size: 0.9375rem;
font-weight: 600;
color: inherit;
transition: background var(--transizione);
}
.menu-trigger:hover {
background: rgba(10, 22, 32, 0.06);
}
body.has-hero .site-header:not(.is-scrolled) .menu-trigger:hover {
background: rgba(255, 255, 255, 0.16);
}
@media (min-width: 1024px) {
.menu-trigger {
display: none;
}
}
#menu {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
flex-direction: column;
padding: 1.5rem var(--gutter) 2.5rem;
overflow-y: auto;
overscroll-behavior: contain;
background: var(--superficie-profonda);
color: var(--testo-corrente);
opacity: 0;
visibility: hidden;
transform: translateY(-1.5rem);
transition: opacity var(--transizione-lenta), transform var(--transizione-lenta),
visibility var(--transizione-lenta);
}
#menu.open {
opacity: 1;
visibility: visible;
transform: none;
}
.menu-header-inside {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 2rem;
}
.menu-header-inside .logo-img {
height: 2.5rem;
}
.close-trigger {
min-height: 2.75rem;
padding: 0 1.25rem;
border-radius: var(--raggio-pillola);
border: 1px solid rgba(255, 255, 255, 0.35);
font-size: 0.9375rem;
font-weight: 600;
color: #fff;
transition: background var(--transizione), border-color var(--transizione);
}
.close-trigger:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.6);
}
.menu-content-inside {
display: grid;
gap: 2.5rem;
}
@media (min-width: 768px) {
.menu-content-inside {
grid-template-columns: 1.2fr 1fr;
gap: 3rem;
}
}
.menu-links-list {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
/* Le voci del menu grande sono in serif: la navigazione è il primo momento
editoriale del sito. */
.menu-links-list > li > a,
.menu-ramo > summary {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0;
font-family: var(--font-display);
font-size: clamp(1.75rem, 5vw, 2.5rem);
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.02em;
color: #fff;
cursor: pointer;
transition: color var(--transizione), transform var(--transizione);
}
.menu-links-list > li > a:hover,
.menu-ramo > summary:hover {
color: var(--brand-teal-light);
transform: translateX(0.5rem);
}
.menu-ramo > summary {
list-style: none;
}
.menu-ramo > summary::-webkit-details-marker {
display: none;
}
.menu-ramo > summary::after {
content: '';
width: 0.5em;
height: 0.5em;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg) translateY(-0.15em);
opacity: 0.6;
transition: transform var(--transizione);
}
.menu-ramo[open] > summary::after {
transform: rotate(-135deg) translateY(-0.15em);
}
.menu-sottolivello {
display: flex;
flex-direction: column;
gap: 0.625rem;
padding: 0.5rem 0 1rem 1.25rem;
border-left: 2px solid rgba(255, 255, 255, 0.16);
margin-bottom: 0.5rem;
}
.menu-sottolivello a {
display: flex;
align-items: center;
gap: 0.625rem;
font-size: 1.0625rem;
color: var(--testo-corrente);
transition: color var(--transizione);
}
.menu-sottolivello a:hover {
color: #fff;
}
/* Anche nel menu del telefono le voci dei servizi portano la loro icona. */
.menu-sottolivello .cc-icon {
width: 1.25rem;
height: 1.25rem;
vertical-align: 0;
color: var(--brand-teal-light);
flex-shrink: 0;
}
.menu-sottolivello-titolo {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: rgba(255, 255, 255, 0.45);
list-style: none;
}
.menu-ramo--interno > summary {
font-family: var(--font-testo);
font-size: 1.0625rem;
font-weight: 600;
color: var(--testo-corrente);
}
.menu-ramo--interno > summary:hover {
transform: none;
color: #fff;
}
.menu-info-box {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 2rem;
padding: clamp(1.25rem, 3vw, 2rem);
border-radius: var(--raggio-grande);
background: rgba(255, 255, 255, 0.06);
}
.menu-info-box h3 {
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.72);
margin-bottom: 1rem;
}
.menu-secondary-list {
display: grid;
gap: 0.625rem;
margin-bottom: 1.5rem;
}
@media (min-width: 480px) {
.menu-secondary-list {
grid-template-columns: 1fr 1fr;
}
}
.menu-secondary-list a {
font-size: 0.9375rem;
color: var(--testo-corrente);
border-bottom: 1px solid transparent;
transition: color var(--transizione), border-color var(--transizione);
}
.menu-secondary-list a:hover {
color: #fff;
border-bottom-color: var(--brand-teal-light);
}
.menu-callout {
padding: 1.25rem;
border-radius: var(--raggio-base);
background: rgba(0, 157, 169, 0.14);
border: 1px solid rgba(255, 255, 255, 0.16);
}
.menu-callout h4 {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1rem;
color: #fff;
margin-bottom: 0.5rem;
}
.menu-callout p {
font-size: 0.875rem;
color: var(--testo-corrente);
margin-bottom: 1rem;
}
.menu-actions {
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.menu-footnote {
margin-top: 2.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--filo);
font-size: 0.8125rem;
color: var(--testo-secondario);
}
/* ==========================================================================
6. BOTTONI
Un solo bottone, tre livelli: pieno (l'azione), a contorno (la seconda
via), nudo (la terza). Misure dal design system, taglia grande: sono
richiami di una pagina pubblica, non comandi di un modulo.
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.625rem;
min-height: 3.5rem;
padding: 0.875rem 2rem;
border-radius: var(--raggio-pillola);
border: 1px solid var(--azione-fondo);
background: var(--azione-fondo);
color: var(--azione-testo);
font-family: var(--font-testo);
font-size: 1.0625rem;
font-weight: var(--peso-titolo);
line-height: 1.4;
letter-spacing: normal;
text-align: center;
transition: background var(--transizione), border-color var(--transizione),
box-shadow var(--transizione), color var(--transizione);
}
/* Non si sposta: si alza l'ombra. Un elemento che si muove sotto al
puntatore fa perdere il bersaglio. */
.btn:hover {
background: var(--azione-fondo-hover);
border-color: var(--azione-fondo-hover);
box-shadow: var(--ombra-foto);
}
.btn:active {
transform: translateY(1px);
box-shadow: none;
}
.btn--sm {
min-height: 2.625rem;
padding: 0.5rem 1.125rem;
font-size: 0.9375rem;
}
/* A contorno. Il nome storico `.btn-outline-lime` resta perché lo citano le
pagine interne: oggi è il contorno dell'azione, non un colore. */
.btn-outline-lime,
.btn--ghost {
background: transparent;
color: var(--ghost-testo);
border: 1px solid var(--ghost-bordo);
box-shadow: none;
}
.btn-outline-lime:hover,
.btn--ghost:hover {
background: var(--ghost-fondo-hover);
border-color: var(--ghost-bordo-hover);
color: var(--ghost-testo);
box-shadow: none;
}
/* Alias storico dell'azione principale. */
.btn-navy {
background: var(--azione-fondo);
border-color: var(--azione-fondo);
color: var(--azione-testo);
}
.btn-navy:hover {
background: var(--azione-fondo-hover);
border-color: var(--azione-fondo-hover);
}
/* Contorno chiaro, per stare sopra a una fotografia o a un fondo profondo. */
.btn-outline-white {
background: transparent;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.35);
box-shadow: none;
}
.btn-outline-white:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.7);
color: #fff;
box-shadow: none;
}
/* Vetro: bianco traslucido con la sfocatura. È il bottone appoggiato sopra
alle immagini. */
.btn--vetro {
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.3);
color: #fff;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.btn--vetro:hover {
background: rgba(255, 255, 255, 0.26);
border-color: rgba(255, 255, 255, 0.5);
color: #fff;
}
/* Sopra alla fotografia di una card il vetro chiaro non regge: il bianco al
16% su uno scatto chiaro lascia il testo bianco a 4,2:1 (misurato su «Scopri
di più» delle card dei servizi e su «Diventa Donatore Solidale», a 390px).
Lì il bottone è di vetro scuro, come la pastiglia e l'etichetta che gli
stanno accanto: regge il testo per costruzione, qualunque sia lo scatto. */
.exp-card .btn--vetro,
.svc-card .btn--vetro {
background: var(--vetro-scuro);
border-color: var(--vetro-scuro-filo);
}
.exp-card .btn--vetro:hover,
.svc-card .btn--vetro:hover {
background: rgba(10, 22, 32, 0.9);
border-color: rgba(255, 255, 255, 0.4);
}
.btn-regional-white {
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-height: 2.625rem;
padding: 0 1.25rem;
border-radius: var(--raggio-pillola);
background: #fff;
color: var(--brand-navy);
font-size: 0.9375rem;
font-weight: 600;
transition: background var(--transizione), box-shadow var(--transizione);
}
.btn-regional-white:hover {
background: rgba(255, 255, 255, 0.88);
box-shadow: var(--ombra-foto);
}
/* Link di testo con la freccia: la terza via, quella che non pesa. */
.btn-testo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 1rem;
font-weight: 600;
color: var(--testo-titolo);
border-bottom: 1px solid currentColor;
padding-bottom: 2px;
transition: gap var(--transizione), color var(--transizione);
}
.btn-testo:hover {
gap: 0.875rem;
color: var(--accento-testo);
}
.btn-wrap {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 2rem;
}
.btn-wrap--centro {
justify-content: center;
}
/* Bottone tondo: solo icona. */
.btn-tondo {
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
background: var(--n-100);
color: var(--n-700);
transition: background var(--transizione), color var(--transizione);
}
.btn-tondo:hover {
background: var(--n-200);
color: var(--n-900);
}
.su-scuro .btn-tondo,
.sezione--scura .btn-tondo {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
.su-scuro .btn-tondo:hover,
.sezione--scura .btn-tondo:hover {
background: rgba(255, 255, 255, 0.2);
}
/* ==========================================================================
7. SUPERFICI, VETRO, OCCHIELLI
Una sola superficie per tutte le card del sito, la stessa dell'app.
========================================================================== */
.superficie,
.bright-card,
.prose-card,
.faq-item,
.tech-visual-card,
.tech-feature-card,
.centri-finder,
.recensione,
.partner-badge,
.servizio-card,
.servizio-tessera,
.research-logo,
.logo-riquadro,
.logo-chip,
.clinic-card {
background: var(--superficie-piena);
border: 0;
border-radius: var(--raggio-base);
box-shadow: var(--ombra-superficie);
}
/* I pannelli grandi prendono il raggio maggiore. */
.prose-card,
.centri-finder,
.tech-visual-card,
.servizio-tessera,
.research-logo,
.logo-riquadro {
border-radius: var(--raggio-grande);
}
/* La superficie scura: la sfumatura ConCura dentro a una card, per un blocco
che deve staccarsi dalla pagina chiara (nei test genetici, «Il vantaggio
dell'approccio All-in-One»). La classe è arrivata da review senza una
regola: `.superficie` dava il bianco, `su-scuro` il testo bianco, e la card
era bianca su bianca. Ribalta i ruoli del testo da sola: sta nell'elenco
delle superfici profonde (§1). */
.superficie--scura {
background: var(--superficie-profonda);
}
/* Si solleva solo ciò che è un'azione. */
a.bright-card:hover,
a.servizio-card:hover,
a.servizio-card:focus-visible,
a.servizio-tessera:hover,
a.servizio-tessera:focus-visible,
.tech-feature-card:hover,
.clinic-card:hover,
.logo-chip:hover {
box-shadow: var(--ombra-superficie-alta);
}
/* Card in evidenza: non un bordo di un altro colore ma un anello di 2px
nell'accento, come la riga scelta nell'app. */
.card-evidenza {
box-shadow: var(--ombra-superficie), 0 0 0 2px var(--brand-teal);
}
.card-evidenza:hover {
box-shadow: var(--ombra-superficie-alta), 0 0 0 2px var(--brand-teal);
}
/* Riquadro tenue: un gruppo di dati dentro a una card. */
.tint-box {
padding: 1rem 1.25rem;
border-radius: var(--raggio-controlli);
background: rgba(10, 22, 32, 0.035);
border: 0;
}
.su-scuro .tint-box,
.sezione--scura .tint-box {
background: rgba(255, 255, 255, 0.07);
}
/* --- Vetro scuro: il pannello appoggiato sopra a una fotografia ----------
È la firma di Oura. Regge il testo bianco perché ha dentro il proprio
velo, quindi non dipende da quanto è chiara la fotografia sotto. */
.vetro-panel {
padding: 1.125rem 1.25rem;
border-radius: var(--raggio-base);
background: var(--vetro-scuro);
border: 1px solid var(--vetro-scuro-filo);
-webkit-backdrop-filter: blur(14px) saturate(130%);
backdrop-filter: blur(14px) saturate(130%);
color: #fff;
}
.vetro-panel__occhiello {
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.78);
margin-bottom: 0.375rem;
}
.vetro-panel__figura {
font-family: var(--font-display);
font-size: 2rem;
line-height: 1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
color: #fff;
}
.vetro-panel__riga {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.82);
padding: 0.3125rem 0;
}
.vetro-panel__riga + .vetro-panel__riga {
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.vetro-panel__riga strong {
color: #fff;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* Barra sottile: dà una misura visiva a un numero. */
.vetro-panel__barra {
height: 4px;
border-radius: var(--raggio-pillola);
background: rgba(255, 255, 255, 0.22);
overflow: hidden;
margin-top: 0.5rem;
}
.vetro-panel__barra > span {
display: block;
height: 100%;
border-radius: inherit;
background: var(--brand-teal-light);
}
/* Pastiglia di vetro con icona: l'etichetta appoggiata su una fotografia. */
.vetro-chip {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4375rem 0.875rem 0.4375rem 0.5rem;
border-radius: var(--raggio-pillola);
background: var(--vetro-scuro);
border: 1px solid var(--vetro-scuro-filo);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
color: #fff;
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.2;
}
.vetro-chip .cc-icon {
width: 1.125rem;
height: 1.125rem;
vertical-align: 0;
flex-shrink: 0;
}
/* Pastiglia tinta (il badge dell'app): fondo al 12%, testo nella variante
leggibile. Vale per i tag delle card delle pagine interne. */
.bright-card-tag,
.clinic-card-tag,
.tech-feature-num {
display: inline-block;
align-self: flex-start;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--brand-teal-deep);
background: rgba(0, 157, 169, 0.12);
padding: 0.3125rem 0.75rem;
border-radius: var(--raggio-pillola);
margin-bottom: 0.875rem;
}
.bright-card-tag:empty {
display: none;
}
/* ==========================================================================
8. FASCIA DI APERTURA
Sulla sfumatura ConCura, con una fotografia velata, in due forme: a tutta
fascia (pagine interne, `.hero--pagina`) o a destra, che si scioglie nella
sfumatura (home, `.hero--sfumata`). Sopra, solo il messaggio: occhiello,
titolo in serif, sommario, due azioni.
========================================================================== */
.hero {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
/* Senza i tre pannelli dei fatti in fondo (§11.1bis del linguaggio di
design) l'altezza di prima — 92vh — lasciava una fascia di fotografia
vuota sotto al messaggio. Le pagine interne non passano da qui: hanno
la loro altezza in `.hero--pagina`. */
min-height: min(74vh, 42rem);
padding-top: calc(var(--header-h) + 3rem);
padding-bottom: clamp(2rem, 4vw, 3.5rem);
overflow: hidden;
/* La sfumatura ConCura è il fondo di ogni fascia di apertura. Sotto a una
fotografia a tutta fascia non si vede — la copre `.hero__media` — ma
nella home la fotografia sta a destra e a sinistra il fondo è lei. Il
colore pieno resta come ripiego. */
background-color: #05080C;
background-image: var(--sfumatura-concura);
}
.hero__media {
position: absolute;
inset: 0;
z-index: 0;
}
.hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 34%;
}
/* Il velo: due gradienti, uno dal basso per il testo e uno da sinistra per
staccare la colonna. I valori sono misurati, non a occhio. */
/* Il velo.
Prima era un alone locale in basso a sinistra, tarato campionando i pixel
di *uno* scatto. Con quattordici fotografie diverse su ventotto pagine non
ha tenuto: misurato su otto pagine, il titolo scendeva a 2,25:1 e
l'occhiello a 2,97:1 (servono 3 e 4,5).
Ora è tarato **per costruzione** invece che per misura. Sopra al testo
l'opacità non scende sotto 0,88: anche contro una fotografia bianca il
fondo resta a luminanza 0,12 e il bianco sopra sta a 6:1. Vale per
qualunque scatto, oggi e domani, senza rimisurare a ogni sostituzione.
Il prezzo è che la fotografia si legge nel terzo alto e sfuma andando giù —
che è esattamente quello che fa Oura nelle sue fasce di apertura.
Due strati: uno dal basso per il testo, uno dall'alto per le voci di
navigazione, che sono bianche su una barra trasparente. */
.hero__media::after {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(
to top,
rgba(var(--sfumatura-scuro), 0.92) 0%,
rgba(var(--sfumatura-scuro), 0.88) 52%,
rgba(var(--sfumatura-scuro), 0.6) 74%,
rgba(var(--sfumatura-scuro), 0.2) 90%,
rgba(var(--sfumatura-scuro), 0.06) 100%
),
linear-gradient(
to bottom,
rgba(var(--sfumatura-scuro), 0.8) 0%,
rgba(var(--sfumatura-scuro), 0.46) 5rem,
rgba(var(--sfumatura-scuro), 0) 11rem
);
}
.hero__contenuto {
position: relative;
z-index: 1;
width: 100%;
max-width: var(--misura);
margin: 0 auto;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
/* L'occhiello è a 11px e sta in alto, dove l'alone è più debole: sopra a una
fotografia ci vuole il bianco pieno. All'80% scendeva a 3,7:1 e al 95% a
4,47:1 su alcuni scatti (misurato). */
.hero .occhiello {
color: #fff;
}
.hero__titolo {
max-width: 30ch;
color: #fff;
margin-bottom: 1.25rem;
}
.hero__lead {
/* Più corto del titolo: resta dentro l'angolo velato invece di attraversare
la parte illuminata della fotografia. */
max-width: 34ch;
color: rgba(255, 255, 255, 0.92);
font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
line-height: 1.6;
}
/* Ombra morbida sul testo sopra alla fotografia: sull'angolo velato non si
vede, e dove la fotografia si schiarisce tiene il testo staccato. È il
solo posto del sito in cui il testo non ha un fondo suo. */
.hero__titolo,
.hero__lead,
.hero .occhiello {
text-shadow: 0 1px 14px rgba(var(--sfumatura-scuro), 0.55);
}
.hero .btn-wrap {
margin-top: 2rem;
}
.hero .btn-wrap .btn {
min-width: 14.5rem;
justify-content: center;
text-align: center;
}
.hero .btn-outline-lime {
color: #fff;
border-color: rgba(255, 255, 255, 0.45);
background: transparent;
}
.hero .btn-outline-lime:hover {
background: rgba(255, 255, 255, 0.15);
border-color: #fff;
color: #fff;
}
/* La striscia dei pannelli di vetro con i fatti (strutture convenzionate,
anno, numero verde) è stata tolta dalla fascia di apertura su richiesta:
la fascia porta solo l'occhiello, il titolo, il sommario e le due azioni.
I fatti restano nella fascia dei numeri più in basso nella pagina. */
/* --- La fascia sfumata (home) ----------------------------------------------
Il messaggio a sinistra, **allineato al testo del resto della pagina**
(`.hero__contenuto` ha la colonna di `.contenitore`: l'occhiello cade dove
cade ogni titolo di sezione); dietro, a destra, una fotografia che verso
sinistra si scioglie nella sfumatura ConCura.
La scatola della fotografia ha le proporzioni del file (3:2) ed è alta
quanto la fascia, quindi lo scatto non viene mai tagliato né in alto né in
basso. Con `object-fit: cover` su tutta la fascia, un monitor largo
taglierebbe il soggetto. Dove la fascia è più larga della
scatola, a sinistra resta la sfumatura; dove è più stretta, la scatola
esce dal bordo sinistro e il taglio cade sul fondo sfocato dello scatto.
Il soggetto deve stare nella metà destra dello scatto, fuori dalla colonna
del testo. La coppia della passeggiata nell'originale sta al centro: il
file è ritagliato apposta (il README della cartella delle fotografie ha il
comando). Il pettirosso di prima era specchiato per la stessa ragione.
Il velo (`::after`) segue la colonna del messaggio, non la fotografia:
fino a `--testo-fine`, dove finisce il testo, non scende sotto 0,88 — la
soglia di ogni fotografia, vedi `.hero__media::after` — poi si apre in
12rem. Il soggetto sta oltre. Cambiando fotografia il velo regge per
costruzione; va ricontrollato solo che il soggetto stia a destra, fuori
dalla colonna. */
.hero--sfumata {
justify-content: center;
--hero-testo: min(37.5rem, 50vw);
--testo-fine: calc(max(0px, (100% - var(--misura)) / 2) + var(--gutter) + var(--hero-testo));
}
.hero--sfumata .hero__contenuto {
z-index: 2;
}
.hero--sfumata .hero__testo {
max-width: var(--hero-testo);
}
.hero--sfumata .hero__titolo {
text-wrap: balance;
}
.hero--sfumata .hero__media {
inset: 0 0 0 auto;
aspect-ratio: 3 / 2;
overflow: hidden;
/* Oltre alle persone, a destra, lo scatto ha ancora il 13% di alberi: la
scatola esce da destra del 6%, e il soggetto si allontana dal testo dove
serve di più, fra 1024 e 1280px. */
transform: translateX(6%);
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 40%);
mask-image: linear-gradient(to right, transparent 0, #000 40%);
}
/* Il velo della fotografia a tutta fascia qui non serve: lo porta la
fascia, sulla colonna del messaggio. */
.hero--sfumata .hero__media::after {
content: none;
}
.hero--sfumata::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background-image:
linear-gradient(
to right,
rgba(var(--sfumatura-scuro), 0.88) 0,
rgba(var(--sfumatura-scuro), 0.88) var(--testo-fine),
rgba(var(--sfumatura-scuro), 0.4) calc(var(--testo-fine) + 5rem),
rgba(var(--sfumatura-scuro), 0) calc(var(--testo-fine) + 12rem)
),
/* Le voci della barra, bianche sulla barra trasparente: in alto a
destra lo scatto è chiaro (il cielo del pettirosso, ora le foglie
controluce). Fitto fin dove arriva la barra e poi giù in fretta, per
lasciare la fotografia libera. Col velo lungo delle altre fasce il
numero verde nella barra stava a 5,1:1; così sta sopra a 7. */
linear-gradient(
to bottom,
rgba(var(--sfumatura-scuro), 0.78) 0,
rgba(var(--sfumatura-scuro), 0.66) 4rem,
rgba(var(--sfumatura-scuro), 0.45) 5rem,
rgba(var(--sfumatura-scuro), 0.12) 6.5rem,
rgba(var(--sfumatura-scuro), 0) 8rem
);
}
/* Il movimento: la fotografia si avvicina piano — 6% in 28 secondi — e
torna indietro. Il punto fermo sono le due persone: si ingrandiscono
restando dove sono, e non scivolano verso il testo. Prende il posto del
respiro della sfumatura, che sotto a una fotografia non si vedrebbe. */
.hero--sfumata .hero__media img {
transform-origin: 70% 55%;
animation: fotografia-avvicina 28s ease-in-out infinite alternate;
will-change: transform;
}
@keyframes fotografia-avvicina {
to { transform: scale(1.06); }
}
/* Il messaggio entra una voce per volta. */
.hero--sfumata .occhiello,
.hero--sfumata .hero__titolo,
.hero--sfumata .hero__lead,
.hero--sfumata .btn-wrap {
animation: hero-sali 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero--sfumata .occhiello { animation-delay: 0.1s; }
.hero--sfumata .hero__titolo { animation-delay: 0.22s; }
.hero--sfumata .hero__lead { animation-delay: 0.34s; }
.hero--sfumata .btn-wrap { animation-delay: 0.46s; }
/* Sotto ai 1024px accanto al messaggio non c'è posto per il soggetto: la
fotografia va sotto, a tutta larghezza, e in alto sfuma nella sfumatura.
Il messaggio sta sulla sfumatura sola, senza fotografia dietro, quindi il
velo della colonna non serve: resta quello corto della barra.
La dissolvenza in alto finisce prima delle teste, che nello scatto stanno
al 30% dell'altezza (i piedi all'86%). La scatola 16:9 taglia l'11%
dell'altezza, metà sopra e metà sotto: le persone restano intere e le
teste non finiscono mai nel tratto trasparente. */
@media (max-width: 1023.98px) {
.hero--sfumata {
--hero-testo: 100%;
justify-content: flex-start;
padding-bottom: 0;
}
.hero--sfumata .hero__media {
position: relative;
inset: auto;
width: 100%;
aspect-ratio: 16 / 9;
margin-top: clamp(1.5rem, 5vw, 2.5rem);
transform: none;
/* La curva è morbida ai due capi: lineare, il cielo chiaro dello scatto
faceva uno scalino contro il fondo scuro. Dove finisce la cambia il
telefono, qui sotto. */
--dissolvenza: 22%;
--maschera-alto: linear-gradient(
to bottom,
transparent 0,
rgba(0, 0, 0, 0.1) calc(var(--dissolvenza) * 0.25),
rgba(0, 0, 0, 0.4) calc(var(--dissolvenza) * 0.5),
rgba(0, 0, 0, 0.8) calc(var(--dissolvenza) * 0.75),
#000 var(--dissolvenza)
);
-webkit-mask-image: var(--maschera-alto);
mask-image: var(--maschera-alto);
}
.hero--sfumata .hero__media img {
object-position: 85% 50%;
}
.hero--sfumata::after {
background-image: linear-gradient(
to bottom,
rgba(var(--sfumatura-scuro), 0.6) 0%,
rgba(var(--sfumatura-scuro), 0.3) 4.5rem,
rgba(var(--sfumatura-scuro), 0) 9rem
);
}
}
/* Sul telefono la scatola è quadrata: lo scatto entra tutto in altezza e il
taglio cade ai lati, sugli alberi. */
@media (max-width: 599.98px) {
.hero--sfumata .hero__media {
aspect-ratio: 1 / 1;
--dissolvenza: 20%;
}
}
@keyframes hero-sali {
from { opacity: 0; transform: translateY(1.5rem); }
to { opacity: 1; transform: none; }
}
/* Chi ha chiesto meno movimento vede la fotografia ferma e il messaggio già
in scena: la composizione regge da sola, l'animazione è un in più. */
@media (prefers-reduced-motion: reduce) {
.hero--sfumata .hero__media img,
.hero--sfumata .occhiello,
.hero--sfumata .hero__titolo,
.hero--sfumata .hero__lead,
.hero--sfumata .btn-wrap {
animation: none;
}
}
/* Apertura più corta, per le pagine interne. */
.hero--pagina {
min-height: min(62vh, 34rem);
}
.hero--pagina .hero__titolo {
max-width: 32ch;
}
.hero--pagina .hero__lead {
max-width: 32ch;
}
/* ==========================================================================
PARLA CON UN MEDICO
La fascia che il paziente trova in cima alla sua home dentro alla
piattaforma. Il fondo è la sfumatura ConCura e basta: la fotografia sotto
col suo velo è stata tolta perché la card risultava troppo scura, e con lei
la maschera che la dissolveva verso le tessere.
========================================================================== */
.parla-medico {
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: clamp(1.5rem, 3vw, 2.5rem);
align-items: center;
padding: clamp(1.75rem, 3vw, 2.75rem);
border-radius: var(--raggio-grande);
background: var(--sfumatura-concura);
box-shadow: var(--ombra-superficie-alta);
}
.parla-medico__testo,
.parla-medico__azioni {
position: relative;
z-index: 1;
}
.parla-medico__titolo {
margin: 0 0 0.5rem;
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.875rem, 3.4vw, 2.75rem);
line-height: 1.05;
letter-spacing: -0.015em;
color: var(--n-0);
}
.parla-medico__lead {
max-width: 32rem;
margin: 0;
font-size: 1rem;
line-height: 1.55;
color: rgba(255, 255, 255, 0.84);
}
.parla-medico__azioni {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
/* La tessera-azione: icona, etichetta e nota su una riga sola. Nella fascia
larga l'icona sopra all'etichetta sprecherebbe spazio e leggerebbe come un
menu — nella piattaforma la tessera verticale diventa una riga per la
stessa ragione. */
.tessera-azione {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
column-gap: 0.875rem;
row-gap: 0.125rem;
padding: 0.875rem 1.125rem;
border-radius: var(--raggio-controlli);
border: 1px solid rgba(255, 255, 255, 0.24);
background: rgba(255, 255, 255, 0.1);
color: var(--n-0);
transition: background var(--transizione), border-color var(--transizione),
transform var(--transizione);
}
.tessera-azione:hover {
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.4);
}
.tessera-azione__icona {
grid-row: span 2;
display: grid;
place-items: center;
width: 2.5rem;
height: 2.5rem;
border-radius: var(--raggio-pillola);
background: rgba(255, 255, 255, 0.14);
}
.tessera-azione__icona .cc-icon {
width: 1.375rem;
height: 1.375rem;
vertical-align: 0;
}
.tessera-azione__etichetta {
font-size: 0.9375rem;
font-weight: 700;
line-height: 1.3;
}
.tessera-azione__nota {
font-size: 0.8125rem;
line-height: 1.35;
color: rgba(255, 255, 255, 0.85);
}
/* Sotto ai 900px le due colonne si impilano. */
@media (max-width: 56.25rem) {
.parla-medico {
grid-template-columns: minmax(0, 1fr);
gap: 1.5rem;
}
}
/* ==========================================================================
9. CARD CHE SI ESPANDONO
Il componente centrale della home. Tre fotografie verticali affiancate:
se ne apre una e prende il posto delle altre, scoprendo il testo, l'azione
e i pannelli di vetro con i dati. Sul telefono diventa una fisarmonica.
Come funziona: le card sono elementi flex con `flex-grow` 1; quella aperta
passa a 4. Tutta l'animazione è quella proprietà — nessun calcolo in
JavaScript, nessuna misura letta dal DOM.
========================================================================== */
.expander {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
@media (min-width: 900px) {
.expander {
flex-direction: row;
height: min(78vh, 42rem);
}
}
.exp-card {
/* Tutta la card è un bersaglio: chiusa si apre, aperta porta alla pagina del
servizio (app.js). Il cursore lo dice, il pulsante «Scopri di più» resta
per la tastiera e per chi legge con uno screen reader. */
cursor: pointer;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 22rem;
padding: clamp(1.25rem, 2vw, 2rem);
border-radius: var(--raggio-grande);
overflow: hidden;
color: #fff;
background-color: var(--brand-navy-deep);
text-align: left;
transition: flex-grow var(--transizione-espansione),
min-height var(--transizione-espansione), box-shadow var(--transizione);
}
@media (min-width: 900px) {
.exp-card {
flex: 1 1 0;
min-width: 0;
min-height: 0;
}
.exp-card.is-open {
flex-grow: 4;
}
}
@media (max-width: 899.98px) {
.exp-card.is-open {
min-height: 34rem;
}
}
.exp-card__media {
position: absolute;
inset: 0;
z-index: 0;
}
.exp-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 30%;
transition: transform var(--transizione-espansione);
}
.exp-card:hover .exp-card__media img {
transform: scale(1.03);
}
.exp-card__media::after {
content: '';
position: absolute;
inset: 0;
background-image: var(--velo-basso);
}
.exp-card.is-open .exp-card__media::after {
background-image: var(--velo-basso), var(--velo-sinistra);
}
/* La pastiglia con l'icona del servizio, in alto a sinistra. */
.exp-card__chip {
position: absolute;
top: clamp(1rem, 1.6vw, 1.5rem);
left: clamp(1rem, 1.6vw, 1.5rem);
z-index: 2;
max-width: calc(100% - 5.5rem);
}
/* Il comando: un cerchio bianco col + che diventa ×. */
.exp-card__toggle {
position: absolute;
top: clamp(1rem, 1.6vw, 1.5rem);
right: clamp(1rem, 1.6vw, 1.5rem);
z-index: 3;
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
background: #fff;
color: var(--brand-navy);
transition: background var(--transizione), transform var(--transizione);
}
.exp-card__toggle:hover {
background: rgba(255, 255, 255, 0.86);
}
/* Il segno è disegnato con due barre: il + ruota di 45° e diventa ×, una
forma sola per due stati. */
.exp-card__toggle::before,
.exp-card__toggle::after {
content: '';
position: absolute;
width: 0.875rem;
height: 2px;
border-radius: 2px;
background: currentColor;
}
.exp-card__toggle::after {
transform: rotate(90deg);
}
.exp-card.is-open .exp-card__toggle {
transform: rotate(45deg);
}
.exp-card__corpo {
position: relative;
z-index: 1;
max-width: 34rem;
}
.exp-card__titolo {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.75rem, 2.8vw, 2.75rem);
line-height: 1.02;
letter-spacing: -0.02em;
color: #fff;
text-wrap: balance;
}
/* Quello che si scopre all'apertura. Con `grid-template-rows` da 0fr a 1fr
l'altezza si anima senza che nessuno la misuri in JavaScript. */
.exp-card__reveal {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
visibility: hidden;
transition: grid-template-rows var(--transizione-espansione),
opacity 0.3s ease, visibility var(--transizione-espansione);
}
.exp-card.is-open .exp-card__reveal {
grid-template-rows: 1fr;
opacity: 1;
visibility: visible;
transition-delay: 0.15s, 0.25s, 0s;
}
.exp-card__reveal > div {
overflow: hidden;
}
.exp-card__reveal p {
max-width: 42ch;
margin-top: 1rem;
color: rgba(255, 255, 255, 0.86);
font-size: 1rem;
line-height: 1.6;
}
.exp-card__reveal ul {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
margin-top: 1rem;
}
.exp-card__reveal li {
font-size: 0.8125rem;
font-weight: 600;
padding: 0.375rem 0.75rem;
border-radius: var(--raggio-pillola);
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.exp-card__reveal .btn {
margin-top: 1.5rem;
}
/* I pannelli di vetro: entrano da destra quando la card si apre. Su schermi
stretti non ci sono — coprirebbero la fotografia e il testo. */
.exp-card__pannelli {
position: absolute;
z-index: 2;
right: clamp(1rem, 1.6vw, 1.5rem);
bottom: clamp(1.25rem, 2vw, 2rem);
width: min(19rem, 42%);
display: none;
flex-direction: column;
gap: 0.625rem;
opacity: 0;
transform: translateX(1.5rem);
transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 1100px) {
.exp-card__pannelli {
display: flex;
}
}
.exp-card.is-open .exp-card__pannelli {
opacity: 1;
transform: none;
transition-delay: 0.3s;
}
/* Aperta e con i pannelli a destra, la colonna del testo si ferma prima:
altrimenti il titolo passerebbe sotto al vetro. */
@media (min-width: 1100px) {
.exp-card.is-open .exp-card__corpo {
max-width: min(32rem, 52%);
}
}
/* Chiusa, la card mostra solo il titolo: su una colonna strettissima il
serif grande andrebbe a capo ogni due lettere. */
@media (min-width: 900px) {
.exp-card:not(.is-open) .exp-card__titolo {
font-size: clamp(1.375rem, 1.6vw, 1.75rem);
}
.exp-card:not(.is-open) .exp-card__corpo {
max-width: 14rem;
}
}
/* ==========================================================================
10. TESSERE DEI SERVIZI
La card azione della piattaforma: fotografia, velo navy, pastiglia di
vetro con l'icona, titolo in basso. Qui serve a elencare i servizi.
========================================================================== */
.svc-griglia {
display: grid;
gap: 0.75rem;
grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
}
.svc-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 15rem;
padding: 1.125rem;
border-radius: var(--raggio-base);
overflow: hidden;
color: #fff;
background-color: var(--brand-navy);
transition: box-shadow var(--transizione);
}
.svc-card:hover {
box-shadow: var(--ombra-superficie-alta);
}
.svc-card__media {
position: absolute;
inset: 0;
z-index: 0;
}
.svc-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transizione-lenta);
}
.svc-card:hover .svc-card__media img {
transform: scale(1.04);
}
.svc-card__media::after {
content: '';
position: absolute;
inset: 0;
background-image: var(--velo-basso);
}
.svc-card__chip {
position: absolute;
top: 0.875rem;
left: 0.875rem;
z-index: 2;
display: grid;
place-items: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: var(--vetro-scuro);
border: 1px solid var(--vetro-scuro-filo);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
color: #fff;
}
.svc-card__chip .cc-icon {
width: 1.25rem;
height: 1.25rem;
vertical-align: 0;
}
.svc-card__freccia {
position: absolute;
top: 0.875rem;
right: 0.875rem;
z-index: 2;
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
color: var(--brand-navy);
opacity: 0;
transform: translateY(-0.25rem);
transition: opacity var(--transizione), transform var(--transizione);
}
.svc-card:hover .svc-card__freccia,
.svc-card:focus-visible .svc-card__freccia {
opacity: 1;
transform: none;
}
.svc-card__freccia svg {
width: 1rem;
height: 1rem;
fill: none;
stroke: currentColor;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.svc-card__corpo {
position: relative;
z-index: 1;
}
/* Sopra a una fotografia la pastiglia tinta non si legge: qui è di vetro,
come il cerchio dell'icona. */
.svc-card .bright-card-tag {
color: #fff;
background: var(--vetro-scuro);
border: 1px solid var(--vetro-scuro-filo);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
margin-bottom: 0.625rem;
}
/* La tessera è un collegamento: dentro non c'è un bottone vero ma la sua
forma, così non si annidano due elementi cliccabili. */
.svc-card .btn {
pointer-events: none;
}
.svc-card__titolo {
font-size: 1.125rem;
font-weight: var(--peso-titolo);
line-height: 1.25;
color: #fff;
}
.svc-card__riga {
margin-top: 0.25rem;
font-size: 0.875rem;
line-height: 1.4;
color: rgba(255, 255, 255, 0.8);
}
/* Tessera più alta: quella che apre la fila. */
.svc-card--alta {
min-height: 21rem;
}
/* Tessera a tutta fascia: una sola, larga quanto la colonna (l'iniziativa
solidale in home). Il testo non si allunga con lei — resta in una colonna
da 36rem in basso a sinistra — e al velo dal basso se ne aggiunge uno da
sinistra: il velo dal basso è in percentuale dell'altezza, e su una scatola
larga e bassa arriverebbe sotto al testo più corto di quanto serve. */
.svc-card--fascia {
--svc-margine: clamp(1.25rem, 3vw, 2.5rem);
min-height: clamp(22rem, 34vw, 28rem);
padding: var(--svc-margine);
}
.svc-card--fascia .svc-card__chip {
top: var(--svc-margine);
left: var(--svc-margine);
}
.svc-card--fascia .svc-card__freccia {
top: var(--svc-margine);
right: var(--svc-margine);
}
.svc-card--fascia .svc-card__corpo {
max-width: 36rem;
}
.svc-card--fascia .svc-card__titolo {
font-size: clamp(1.375rem, 2.2vw, 1.75rem);
}
.svc-card--fascia .svc-card__riga {
font-size: 1rem;
line-height: 1.5;
}
.svc-card--fascia .svc-card__media img {
object-position: 50% 45%;
}
.svc-card--fascia .svc-card__media::after {
background-image:
linear-gradient(
to right,
rgba(var(--sfumatura-scuro), 0.8) 0,
rgba(var(--sfumatura-scuro), 0.55) 40%,
rgba(var(--sfumatura-scuro), 0) 72%
),
var(--velo-basso);
}
@media (min-width: 900px) {
.svc-card--larga {
grid-column: span 2;
}
}
/* ==========================================================================
11. PERCORSO E SCELTA DEL PIANO
"Il tuo anno di salute, organizzato con te": il testo al centro della
pagina (`.testa--centro`), poi una fascia scura a tutta larghezza con il
questionario che consiglia la sottoscrizione, in un pannello di vetro
(`.scelta-fascia` > `.scelta-palco` > `.scelta.scelta--vetro`).
========================================================================== */
/* La testa del percorso chiude la sua sezione: il respiro sotto lo dà la
sezione, non anche la testa. */
.percorso.testa {
margin-bottom: 0;
}
.percorso__paragrafi {
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 34rem;
margin: 0 auto;
}
.percorso__paragrafi p {
font-size: clamp(1rem, 1.2vw, 1.0625rem);
line-height: 1.65;
color: var(--testo-secondario);
}
/* L'ultima riga chiude il discorso: più scura e più ferma delle altre. */
.percorso__paragrafi p:last-child {
color: var(--testo-titolo);
font-weight: 700;
}
/* --- Il questionario ------------------------------------------------------
Una card sola che cambia contenuto: una domanda per volta, poi il piano
consigliato. Le risposte sono bottoni a tutta larghezza — la stessa forma
delle righe di lista dell'app — e quella scelta resta accesa tornando
indietro. */
.scelta {
display: flex;
flex-direction: column;
gap: 1.25rem;
padding: clamp(1.5rem, 3vw, 2.25rem);
border-radius: var(--raggio-grande);
}
/* `hidden` va rinforzato: `.scelta__risultato` ha un suo display e
batterebbe quello del browser per gli elementi nascosti. */
.scelta [hidden] {
display: none;
}
.scelta__testa {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
}
.scelta__occhiello {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accento-testo);
}
.scelta__passo {
flex: none;
font-size: 0.8125rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--testo-secondario);
}
/* La barra si allunga con `transform`, non con `width`: la anima il
compositore. Il valore lo scrive app.js in `--avanzamento` (da 0 a 1). */
.scelta__barra {
height: 4px;
border-radius: var(--raggio-pillola);
background: var(--n-100);
overflow: hidden;
}
.scelta__barra span {
display: block;
height: 100%;
background: var(--brand-teal);
transform-origin: left center;
transform: scaleX(var(--avanzamento, 0.25));
transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.scelta__titolo {
margin-bottom: 1rem;
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.5rem, 2.4vw, 1.875rem);
line-height: 1.12;
letter-spacing: -0.015em;
color: var(--testo-titolo);
}
/* Il titolo prende il fuoco a ogni domanda nuova, perché chi usa uno screen
reader la senta; non è un controllo, quindi niente anello. */
.scelta__titolo:focus,
.scelta__piano:focus {
outline: none;
}
.scelta__opzioni {
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.scelta__opzione {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
min-height: 3.25rem;
padding: 0.875rem 1.125rem;
border: 1px solid var(--filo);
border-radius: var(--raggio-controlli);
background: var(--superficie-piena);
color: var(--testo-titolo);
font: 600 0.9375rem/1.35 var(--font-testo);
text-align: left;
cursor: pointer;
transition: border-color var(--transizione), background var(--transizione),
box-shadow var(--transizione);
}
.scelta__opzione::after {
content: '';
flex: none;
width: 1rem;
height: 1rem;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22m9%206%206%206-6%206%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22m9%206%206%206-6%206%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
opacity: 0.4;
transition: opacity var(--transizione), transform var(--transizione);
}
.scelta__opzione:hover {
border-color: var(--brand-teal);
background: rgba(0, 157, 169, 0.05);
}
.scelta__opzione:hover::after {
opacity: 1;
transform: translateX(2px);
}
/* La risposta scelta: anello nel teal profondo, come la riga scelta
nell'app — non un fondo pieno. */
.scelta__opzione[aria-pressed='true'] {
border-color: var(--brand-teal-deep);
background: rgba(0, 157, 169, 0.08);
box-shadow: inset 0 0 0 1px var(--brand-teal-deep);
}
.scelta__opzione[aria-pressed='true']::after {
opacity: 1;
}
.scelta__risultato {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
.scelta__risultato .bright-card-tag {
margin-bottom: 0;
}
.scelta__piano {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.75rem, 3vw, 2.25rem);
line-height: 1.05;
letter-spacing: -0.015em;
color: var(--testo-titolo);
}
.scelta__risultato .price-tag {
margin-bottom: 0;
font-size: 2.25rem;
}
.scelta__perche {
max-width: 34rem;
line-height: 1.6;
color: var(--testo-corrente);
}
.scelta__punti {
margin: 0.25rem 0;
}
.scelta__nota {
max-width: 34rem;
font-size: 0.8125rem;
line-height: 1.5;
color: var(--testo-secondario);
}
.scelta__piede {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--filo);
}
.scelta__indietro,
.scelta__rifai {
padding: 0;
border: 0;
background: none;
font: 600 0.875rem/1.4 var(--font-testo);
color: var(--accento-testo);
cursor: pointer;
}
.scelta__indietro::before {
content: '← ';
}
.scelta__tutti {
margin-left: auto;
font-size: 0.875rem;
font-weight: 600;
color: var(--accento-testo);
}
.scelta__indietro:hover,
.scelta__rifai:hover,
.scelta__tutti:hover {
text-decoration: underline;
text-underline-offset: 0.2em;
}
/* --- La fascia del questionario, e il vetro ----------------------------------
La sfumatura a tutta larghezza (`.sezione--scura`, che ribalta i ruoli del
testo e dei bottoni) e, al centro, il questionario in un pannello di vetro.
Il vetro ha bisogno di qualcosa da sfocare: su un fondo liscio la
sfocatura non produce niente e la lastra è solo un velo slavato (è
successo con le tessere sull'anello). Per questo il palco porta due luci
di marca che passano sotto ai bordi del pannello — teal in alto a
sinistra, teal chiaro in basso a destra — e attraverso il vetro diventano
la sua luce. Sono gradienti radiali, non masse sfocate con `filter`: sono
già morbidi e non costano niente.
Il pannello: bianco al 7% con un filo al 16%, sfocatura di 28px. Dietro
al testo, nel punto più chiaro, c'è una luce teal al 45% sulla sfumatura:
il contrasto si misura (`tools/audit_sito.py`), non si stima. */
.scelta-fascia {
overflow: hidden;
}
.scelta-palco {
position: relative;
isolation: isolate;
max-width: 46rem;
margin: 0 auto;
}
.scelta-palco::before,
.scelta-palco::after {
content: '';
position: absolute;
z-index: -1;
width: 75%;
aspect-ratio: 1 / 0.8;
border-radius: 50%;
pointer-events: none;
}
.scelta-palco::before {
left: -28%;
top: -18%;
background: radial-gradient(closest-side, rgba(0, 157, 169, 0.45), rgba(0, 157, 169, 0));
}
.scelta-palco::after {
right: -28%;
bottom: -18%;
background: radial-gradient(closest-side, rgba(92, 207, 217, 0.28), rgba(92, 207, 217, 0));
}
.scelta--vetro {
padding: clamp(1.5rem, 4vw, 2.75rem);
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.16);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2rem 4rem rgba(0, 0, 0, 0.35);
-webkit-backdrop-filter: blur(28px) saturate(140%);
backdrop-filter: blur(28px) saturate(140%);
}
/* Le parti che nel questionario chiaro sono superfici bianche o teal
profondo: sul vetro diventano lastre più chiare e teal chiaro. */
.scelta--vetro .scelta__barra {
background: rgba(255, 255, 255, 0.14);
}
.scelta--vetro .scelta__barra span {
background: var(--brand-teal-light);
}
.scelta--vetro .scelta__opzione {
border-color: rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.06);
}
.scelta--vetro .scelta__opzione:hover {
border-color: var(--brand-teal-light);
background: rgba(255, 255, 255, 0.11);
}
.scelta--vetro .scelta__opzione[aria-pressed='true'] {
border-color: var(--brand-teal-light);
background: rgba(92, 207, 217, 0.16);
box-shadow: inset 0 0 0 1px var(--brand-teal-light);
}
/* In alto a sinistra passa la luce teal: il teal chiaro sopra al teal stava
a 3,8:1 (misurato). Occhiello bianco, e la pastiglia del risultato è
quella di vetro scuro che il sito usa sopra alle fotografie. */
.scelta--vetro .scelta__occhiello {
color: var(--testo-titolo);
}
.scelta--vetro .bright-card-tag {
color: #fff;
background: var(--vetro-scuro);
border: 1px solid var(--vetro-scuro-filo);
}
/* Anche i collegamenti del piede in bianco, con il filo sotto che li dice
collegamenti. Sul telefono la scatola è stretta e alta, e la sfumatura a
69° mette il suo blu acciaio in basso a sinistra: lì, sotto al vetro, il
teal chiaro scendeva a 3,8:1 (misurato su «Indietro»). */
.scelta--vetro .scelta__indietro,
.scelta--vetro .scelta__rifai,
.scelta--vetro .scelta__tutti {
color: var(--testo-titolo);
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, 0.4);
text-underline-offset: 0.2em;
}
.scelta--vetro .scelta__indietro:hover,
.scelta--vetro .scelta__rifai:hover,
.scelta--vetro .scelta__tutti:hover {
text-decoration-color: currentColor;
}
.scelta--vetro .plain-list li::before {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235CCFD9%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E");
}
/* Chi ha chiesto meno trasparenza vede una lastra piena, dello stesso scuro
dei veli. */
@media (prefers-reduced-transparency: reduce) {
.scelta--vetro {
background: rgba(var(--sfumatura-scuro), 0.94);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}
/* Ogni domanda nuova, e il risultato, entrano salendo appena. */
.scelta__domanda:not([hidden]),
.scelta__risultato:not([hidden]) {
animation: scelta-entra 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes scelta-entra {
from { opacity: 0; transform: translateY(0.5rem); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.scelta__domanda:not([hidden]),
.scelta__risultato:not([hidden]) {
animation: none;
}
.scelta__barra span {
transition: none;
}
}
/* ==========================================================================
12. NASTRO DEI LOGHI
========================================================================== */
.logo-marquee {
overflow: hidden;
-webkit-mask-image: linear-gradient(
to right,
transparent,
#000 6rem,
#000 calc(100% - 6rem),
transparent
);
mask-image: linear-gradient(
to right,
transparent,
#000 6rem,
#000 calc(100% - 6rem),
transparent
);
}
.logo-marquee-track {
display: flex;
gap: 1rem;
width: max-content;
animation: scorri 60s linear infinite;
}
.logo-marquee--reverse .logo-marquee-track {
animation-direction: reverse;
}
.logo-marquee:hover .logo-marquee-track {
animation-play-state: paused;
}
@keyframes scorri {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
/* Il riquadro è **quadrato**, e non per gusto: i 57 file dei partner sono
tutti quadrati (750x750, 500x500, 2084x2084) con il marchio, che è largo e
basso, in mezzo a un margine trasparente. In una scatola 19x11rem
`object-fit: contain` è limitato dall'altezza: il quadrato entrava a
128x128 e sprecava metà della larghezza, per questo allargare il riquadro
non ingrandiva il marchio. Con il quadrato il file usa tutta la scatola e
il marchio cresce di metà.
`object-fit: contain` dentro a una scatola fissa fa comunque uscire tutti i
marchi alla stessa altezza ottica, che è ciò che tiene dritta la fila. */
.logo-chip {
flex: 0 0 auto;
width: 13rem;
height: 13rem;
display: grid;
place-items: center;
padding: 0.875rem;
}
.logo-chip img {
display: block;
width: 100%;
height: 100%;
/* `min-height: 0` perché app.js scrive width/height sull'![]()
: senza,
quegli attributi possono imporre un'altezza minima e il marchio scende
di qualche pixel dal centro. */
min-height: 0;
object-fit: contain;
object-position: center;
}
/* ==========================================================================
13. RECENSIONI
========================================================================== */
.trustpilot-panel {
display: flex;
flex-direction: column;
align-items: center;
}
.trustpilot-cta {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1.25rem;
border-radius: var(--raggio-pillola);
background: var(--superficie-piena);
box-shadow: var(--ombra-superficie);
color: var(--n-900);
font-size: 0.9375rem;
transition: box-shadow var(--transizione);
flex-wrap: wrap;
justify-content: center;
}
.trustpilot-cta:hover {
box-shadow: var(--ombra-superficie-alta);
}
.trustpilot-cta strong {
color: var(--brand-teal-deep);
}
.trustpilot-stars {
display: inline-flex;
align-items: center;
gap: 0.125rem;
flex-shrink: 0;
color: #00b67a;
}
.trustpilot-stars .icon {
width: 1rem;
height: 1rem;
}
.recensioni-carosello {
position: relative;
width: 100%;
margin-top: 2.5rem;
}
.recensioni-carosello[hidden] {
display: none;
}
.recensioni-pista {
display: flex;
gap: 1rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding-bottom: 0.5rem;
scrollbar-width: none;
}
.recensioni-pista::-webkit-scrollbar {
display: none;
}
.recensione {
flex: 0 0 clamp(17rem, 88%, 22rem);
scroll-snap-align: start;
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
text-align: left;
}
.recensione-stelle {
display: inline-flex;
gap: 0.125rem;
}
.recensione-stelle .icon {
width: 1rem;
height: 1rem;
color: #00b67a;
}
.recensione-stelle .icon--vuota {
color: var(--n-200);
}
.recensione blockquote h3 {
font-family: var(--font-display);
font-weight: 400;
font-size: 1.375rem;
line-height: 1.15;
letter-spacing: -0.01em;
margin-bottom: 0.5rem;
}
.recensione blockquote p {
font-size: 0.9375rem;
line-height: 1.6;
color: var(--testo-secondario);
display: -webkit-box;
-webkit-line-clamp: 7;
line-clamp: 7;
-webkit-box-orient: vertical;
overflow: hidden;
}
.recensione figcaption {
margin-top: auto;
padding-top: 0.875rem;
border-top: 1px solid var(--filo);
font-size: 0.8125rem;
color: var(--testo-secondario);
display: flex;
justify-content: space-between;
gap: 0.5rem;
}
.recensioni-freccia {
position: absolute;
top: -3.75rem;
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
background: var(--n-100);
color: var(--n-700);
transition: background var(--transizione), opacity var(--transizione);
}
.recensioni-freccia:hover:not(:disabled) {
background: var(--n-200);
color: var(--n-900);
}
.recensioni-freccia:disabled {
opacity: 0.4;
cursor: default;
}
.recensioni-freccia svg {
width: 1.25rem;
height: 1.25rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.recensioni-freccia--prec {
right: 3.5rem;
}
.recensioni-freccia--succ {
right: 0;
}
.recensioni-punti {
display: flex;
justify-content: center;
gap: 0.375rem;
margin-top: 1.25rem;
}
.recensioni-punto {
width: 9px;
height: 9px;
border-radius: 50%;
background: rgba(10, 22, 32, 0.2);
transition: background var(--transizione), transform var(--transizione);
}
.recensioni-punto.is-attivo {
background: var(--brand-teal-deep);
transform: scale(1.35);
}
/* ==========================================================================
14. RICERCA DEI CENTRI
========================================================================== */
.centri-finder {
padding: clamp(1.5rem, 3vw, 2.5rem);
max-width: 60rem;
margin: 0 auto;
text-align: left;
}
.centri-finder h3 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.5rem, 2.4vw, 2rem);
line-height: 1.1;
letter-spacing: -0.02em;
margin-bottom: 0.5rem;
}
.centri-finder > p {
color: var(--testo-secondario);
margin-bottom: 1.5rem;
font-size: 0.9375rem;
}
.centri-selects {
display: grid;
gap: 1rem;
}
@media (min-width: 640px) {
.centri-selects {
grid-template-columns: 1fr 1fr;
}
}
.centri-selects label {
display: block;
font-size: 0.8125rem;
font-weight: 600;
color: var(--n-900);
margin-bottom: 0.375rem;
}
.centri-stato {
margin-top: 1rem;
font-size: 0.9375rem;
color: var(--testo-secondario);
}
.centri-stato a {
color: var(--accento-testo);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 0.15em;
}
.centri-risultati {
display: grid;
gap: 0.625rem;
margin-top: 1.5rem;
max-height: 26rem;
overflow-y: auto;
}
@media (min-width: 640px) {
.centri-risultati {
grid-template-columns: 1fr 1fr;
}
}
.centro-card {
padding: 1rem 1.125rem;
border-radius: var(--raggio-controlli);
background: rgba(10, 22, 32, 0.035);
}
.centro-card h4 {
font-size: 0.9375rem;
font-weight: 600;
margin-bottom: 0.25rem;
}
.centro-card p {
font-size: 0.875rem;
color: var(--testo-secondario);
line-height: 1.45;
}
.centro-prov {
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 0.6875rem !important;
font-weight: 600;
color: var(--n-500) !important;
margin-top: 0.3rem;
}
.centro-tel {
display: inline-block;
margin-top: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--brand-teal-deep);
}
.centro-tel:hover {
color: var(--n-900);
}
/* ==========================================================================
15. PIANI E TARIFFE
========================================================================== */
.tariffs-4col-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
.price-tag {
font-family: var(--font-display);
font-weight: 400;
font-size: 2.75rem;
line-height: 1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
color: var(--testo-titolo);
margin-bottom: 0.5rem;
}
.price-tag small,
.price-tag span {
font-family: var(--font-testo);
font-size: 0.8125rem;
font-weight: 600;
color: var(--testo-secondario);
}
.price-tag del {
font-size: 0.5em;
color: var(--n-400);
margin-right: 0.25rem;
}
/* ==========================================================================
16. DOMANDE FREQUENTI
========================================================================== */
.faq-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
max-width: 56rem;
}
.faq-item {
overflow: hidden;
}
.faq-item[open] {
box-shadow: var(--ombra-superficie-alta);
}
.faq-item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem;
list-style: none;
cursor: pointer;
font-size: 1.0625rem;
font-weight: 600;
color: var(--n-900);
}
.faq-item summary::-webkit-details-marker {
display: none;
}
/* Il «+» è disegnato con due barre, non scritto. Il carattere cadeva 3,5px
sotto al centro del cerchio e, ruotato in «×» da aperto, anche 2,5px di lato:
il centro del segno di un carattere non è il centro della sua riga. Due barre
centrate stanno al centro per costruzione, in tutti e due gli stati. 12px su
un cerchio da 36px cadono su pixel interi (il segno di prima era 11px). */
.faq-item summary::after {
content: '';
flex-shrink: 0;
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
background-color: var(--n-100);
background-image:
linear-gradient(currentColor, currentColor),
linear-gradient(currentColor, currentColor);
background-size: 0.75rem 2px, 2px 0.75rem;
background-position: center;
background-repeat: no-repeat;
color: var(--n-700);
transition: transform var(--transizione), background-color var(--transizione);
}
/* Solo il colore: `background` riscriverebbe anche le due barre. */
.faq-item summary:hover::after {
background-color: var(--n-200);
}
/* Nel contrasto elevato di Windows le sfumature spariscono, e con loro le
barre: torna il carattere, un filo fuori centro ma visibile. */
@media (forced-colors: active) {
.faq-item summary::after {
content: '+';
display: grid;
place-items: center;
font-size: 1.375rem;
line-height: 1;
}
}
.faq-item[open] summary::after {
transform: rotate(45deg);
}
.faq-item .faq-answer {
padding: 0 1.5rem 1.375rem;
color: var(--testo-secondario);
line-height: 1.65;
}
.faq-item .faq-answer p + p {
margin-top: 0.75rem;
}
/* ==========================================================================
17. CAMPI
Alti 48px come i bottoni, raggio 12px, fuoco scuro con l'alone: sono le
misure dei campi dell'app.
========================================================================== */
.form-field,
.form-consent {
display: block;
margin-bottom: 1rem;
}
.form-field label {
display: block;
font-size: 0.8125rem;
font-weight: 600;
color: var(--testo-titolo);
margin-bottom: 0.375rem;
}
.form-field abbr,
.form-consent abbr {
color: var(--stato-errore);
text-decoration: none;
}
.form-field input,
.form-field textarea,
.form-field select,
.centri-selects select {
width: 100%;
min-height: 3rem;
padding: 0.6875rem 1rem;
border-radius: var(--raggio-controlli);
border: 1px solid #667886;
background: var(--superficie-piena);
box-shadow: var(--ombra-campo);
font-family: var(--font-testo);
font-size: 1rem;
color: var(--n-900);
transition: border-color var(--transizione), box-shadow var(--transizione);
}
/* Il segno di apertura di una select è un chevron disegnato, non la freccia
del sistema operativo. */
.form-field select,
.centri-selects select {
-webkit-appearance: none;
appearance: none;
padding-right: 2.75rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%234A5C6B' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 16px 16px;
cursor: pointer;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
color: var(--n-500);
opacity: 1;
}
.form-field input:hover,
.form-field textarea:hover,
.centri-selects select:hover:not(:disabled) {
border-color: var(--n-700);
}
/* Il fuoco è scuro e neutro con un alone appena percettibile: nel design
system il blu (e ogni colore acceso) sul fuoco è escluso. */
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus,
.centri-selects select:focus {
outline: none;
border-color: var(--n-900);
box-shadow: 0 0 0 4px rgba(10, 22, 32, 0.08);
}
.centri-selects select:disabled {
background-color: var(--n-100);
border-color: var(--n-200);
color: var(--n-500);
box-shadow: none;
cursor: not-allowed;
}
.form-consent {
display: flex;
align-items: flex-start;
gap: 0.625rem;
}
.form-consent input {
margin-top: 0.3rem;
width: 1.125rem;
height: 1.125rem;
accent-color: var(--brand-navy);
flex-shrink: 0;
}
.form-consent label {
margin: 0;
font-weight: 400;
font-size: 0.875rem;
color: var(--testo-secondario);
line-height: 1.5;
}
.form-consent label a {
color: var(--accento-testo);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 0.15em;
}
/* ==========================================================================
18. FOOTER
========================================================================== */
footer.bright-footer {
position: relative;
z-index: 10;
background: var(--superficie-profonda);
/* In fondo lo spazio è per il bottone di WhatsApp, che è fisso in basso a
sinistra: senza, sul telefono l'ultima riga della nota legale gli finisce
sotto e il verde del bottone la porta a 1,98:1. */
padding: clamp(3rem, 6vw, 5rem) var(--gutter) 5.5rem;
}
.footer-grid-bright {
display: grid;
gap: 2.5rem;
max-width: var(--misura);
margin: 0 auto 3rem;
}
@media (min-width: 640px) {
.footer-grid-bright {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1024px) {
.footer-grid-bright {
grid-template-columns: 1.6fr repeat(3, 1fr);
gap: 3rem;
}
}
.footer-logo {
height: 4rem;
width: auto;
object-fit: contain;
margin-bottom: 1.25rem;
}
.footer-col-bright h4 {
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.72);
margin-bottom: 1.25rem;
}
.footer-col-bright ul {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.footer-col-bright ul a {
font-size: 0.9375rem;
color: var(--testo-secondario);
transition: color var(--transizione);
}
.footer-col-bright ul a:hover {
color: #fff;
}
.bright-footer p {
font-size: 0.9375rem;
color: var(--testo-secondario);
line-height: 1.6;
}
.bright-footer p + p {
margin-top: 1rem;
}
.bright-footer p a:not(.footer-tel) {
color: var(--accento-testo);
}
.bright-footer p a:not(.footer-tel):hover {
color: #fff;
text-decoration: underline;
text-underline-offset: 0.15em;
}
/* Il numero verde è l'informazione più cercata del footer: in serif, grande. */
.footer-tel {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-display);
font-size: 1.75rem;
font-weight: 400;
letter-spacing: -0.01em;
color: #fff;
transition: color var(--transizione);
}
.footer-tel:hover {
color: var(--brand-teal-light);
}
.footer-tel .icon {
width: 1.125rem;
height: 1.125rem;
}
.trustpilot-badge {
display: inline-flex;
align-items: center;
gap: 0.625rem;
margin-top: 1.25rem;
padding: 0.625rem 1rem;
border-radius: var(--raggio-controlli);
background: rgba(255, 255, 255, 0.08);
border: 1px solid var(--filo);
font-size: 0.875rem;
color: #fff;
transition: background var(--transizione), border-color var(--transizione);
}
.trustpilot-badge:hover {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.35);
}
.social-list {
display: flex;
gap: 0.5rem;
margin-top: 1.5rem;
}
.social-list a {
display: grid;
place-items: center;
width: 2.625rem;
height: 2.625rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
transition: background var(--transizione), border-color var(--transizione);
}
.social-list a:hover {
background: var(--brand-teal);
border-color: var(--brand-teal);
}
.social-list svg {
width: 1.1875rem;
height: 1.1875rem;
}
/* I due progetti di ricerca clinica, prima della riga legale. I marchi hanno
il fondo trasparente e l'inchiostro navy: sulla sfumatura sparirebbero,
quindi stanno su una placca chiara. La placca è tonda e di misura fissa —
i due file hanno risoluzioni diversissime (4501px e 500px) e senza una
scatola dichiarata uscirebbero di grandezze diverse. */
.footer-ricerca {
max-width: var(--misura);
margin: 0 auto 2rem;
padding-top: 2rem;
border-top: 1px solid var(--filo);
}
.footer-ricerca__titolo {
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--occhiello-testo);
margin-bottom: 1rem;
}
.footer-ricerca__lista {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
gap: 0.75rem 2rem;
list-style: none;
}
.footer-ricerca__lista a {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 0.875rem;
padding: 0.625rem;
border-radius: var(--raggio-base);
transition: background var(--transizione);
}
.footer-ricerca__lista a:hover {
background: rgba(255, 255, 255, 0.07);
}
.footer-ricerca__marchio {
display: grid;
place-items: center;
width: 3.5rem;
height: 3.5rem;
padding: 0.375rem;
border-radius: var(--raggio-pillola);
background: var(--superficie-piena);
}
.footer-ricerca__marchio img {
width: 100%;
height: 100%;
min-height: 0;
object-fit: contain;
}
.footer-ricerca__testo strong {
display: block;
font-size: 0.9375rem;
font-weight: 700;
line-height: 1.3;
color: var(--testo-titolo);
}
.footer-ricerca__testo span {
display: block;
font-size: 0.8125rem;
line-height: 1.4;
color: var(--testo-secondario);
}
.footer-legal {
max-width: var(--misura);
margin: 0 auto;
padding-top: 2rem;
border-top: 1px solid var(--filo);
text-align: center;
font-size: 0.8125rem;
color: var(--testo-secondario);
line-height: 1.7;
}
.footer-legal p + p {
margin-top: 0.5rem;
}
.footer-legal strong {
color: #fff;
}
.footer-legal-links a {
color: var(--accento-testo);
font-weight: 600;
}
.footer-legal-links a:hover {
text-decoration: underline;
}
.footer-legal-links span {
margin: 0 0.5rem;
opacity: 0.5;
}
/* WhatsApp: il verde è il colore del marchio del servizio, non nostro. */
.whatsapp-floating {
position: fixed;
left: 1.25rem;
bottom: 1.25rem;
z-index: 90;
display: grid;
place-items: center;
width: 3.25rem;
height: 3.25rem;
border-radius: 50%;
background: #25d366;
color: #fff;
box-shadow: var(--ombra-foto);
transition: transform var(--transizione);
}
.whatsapp-floating:hover {
transform: scale(1.06);
}
.whatsapp-floating svg {
width: 1.625rem;
height: 1.625rem;
}
/* ==========================================================================
19. PAGINE INTERNE
Le 28 pagine oltre alla home usano questo vocabolario. Ogni pagina apre
con un blocco editoriale (occhiello, titolo in serif, sommario) e poi
alterna sezioni di testo e superfici.
========================================================================== */
.page-shell {
position: relative;
width: 100%;
max-width: var(--misura);
margin: 0 auto;
padding: calc(var(--header-h) + clamp(3rem, 6vw, 5.5rem)) var(--gutter)
clamp(4rem, 7vw, 6rem);
}
.page-shell--narrow {
max-width: 52rem;
}
/* Il titolo di una pagina interna è in serif, come i titoli delle sezioni
della home: è la stessa voce. */
.page-title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(2.25rem, 5.2vw, 4rem);
line-height: 1.02;
letter-spacing: -0.02em;
color: var(--testo-titolo);
margin-bottom: 1.25rem;
text-wrap: balance;
max-width: 30ch;
}
.page-title--grande {
font-size: clamp(2.5rem, 6vw, 4.5rem);
}
/* Il titolo che chiude una pagina ("Vuoi più informazioni?"): stessa voce,
misura minore, centrato dal contenitore. */
.page-title--sm {
font-size: clamp(1.75rem, 3.4vw, 2.5rem);
max-width: 34ch;
}
.page-section {
margin-top: clamp(3rem, 5vw, 5rem);
}
.page-section[id] {
scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
/* Titolo di sezione: serif medio sopra un filo. Il teal non sottolinea mai
un titolo — tinge superfici e icone. */
.section-title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.75rem, 3.4vw, 2.5rem);
line-height: 1.06;
letter-spacing: -0.02em;
color: var(--testo-titolo);
padding-bottom: 0.875rem;
margin-bottom: 2rem;
border-bottom: 1px solid var(--filo);
}
/* Card standard. */
.bright-card {
padding: clamp(1.5rem, 2.5vw, 2rem);
display: flex;
flex-direction: column;
justify-content: space-between;
transition: box-shadow var(--transizione);
}
.bright-card h3 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.375rem, 2vw, 1.75rem);
line-height: 1.1;
letter-spacing: -0.015em;
margin-bottom: 0.75rem;
}
.bright-card p {
color: var(--testo-secondario);
line-height: 1.6;
margin-bottom: 1.25rem;
font-size: 1rem;
}
.bright-card ul {
display: flex;
flex-direction: column;
gap: 0.625rem;
margin-bottom: 1.5rem;
}
.bright-card ul li {
position: relative;
padding-left: 1.75em;
font-size: 0.9375rem;
color: var(--testo-corrente);
line-height: 1.5;
}
/* Il bullet è un'icona SVG, non il carattere unicode: le spunte unicode
cambiano forma da un sistema all'altro. */
.bright-card ul li::before,
.plain-list li::before {
content: '';
position: absolute;
left: 0;
top: 0.15em;
width: 1.15em;
height: 1.15em;
background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23006B75%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E")
no-repeat center / contain;
}
.bright-card .btn,
.bright-card .btn-outline-lime {
width: 100%;
}
/* Blocco di testo lungo. */
.prose-card {
padding: clamp(1.75rem, 3vw, 2.75rem);
color: var(--testo-corrente);
line-height: 1.7;
}
.prose-card h2,
.prose-card h3 {
font-family: var(--font-display);
font-weight: 400;
letter-spacing: -0.015em;
line-height: 1.1;
color: var(--testo-titolo);
}
.prose-card h2 {
font-size: clamp(1.5rem, 2.4vw, 2rem);
margin-bottom: 1rem;
}
.prose-card h3 {
font-size: 1.375rem;
margin: 2rem 0 0.75rem;
}
.prose-card p + p {
margin-top: 1rem;
}
.prose-card ul,
.prose-card ol {
margin: 1rem 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.prose-card ul li {
position: relative;
padding-left: 1.1rem;
}
.prose-card ul li::before {
content: '';
position: absolute;
left: 0;
top: 0.62em;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--accento-testo);
}
.prose-card a {
color: var(--accento-testo);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 0.15em;
}
/* Un bottone dentro a un blocco di testo non è un link del testo: la regola
`.prose-card a` lo tingerebbe di teal e lo sottolineerebbe. Qui riprende i
propri ruoli — non `inherit`, che gli darebbe il colore del paragrafo (e su
fondo navy sparirebbe). */
.prose-card a.btn {
color: var(--azione-testo);
text-decoration: none;
}
.prose-card a.btn-outline-lime,
.prose-card a.btn--ghost {
color: var(--ghost-testo);
text-decoration: none;
}
.prose-card a.btn-outline-white {
color: #fff;
text-decoration: none;
}
.prose-legal {
font-size: 0.9375rem;
}
.prose-legal h3 {
font-family: var(--font-testo);
font-size: 1.0625rem;
font-weight: 700;
border-bottom: 1px solid var(--filo);
padding-bottom: 0.4rem;
margin-top: 2.25rem;
}
/* Elenchi. */
.plain-list,
.icon-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.plain-list li {
position: relative;
padding-left: 1.75em;
line-height: 1.55;
}
.icon-list li {
position: relative;
padding-left: 2rem;
line-height: 1.55;
}
.icon-list li .icon {
position: absolute;
left: 0;
top: 0.2em;
width: 1.25rem;
height: 1.25rem;
color: var(--accento-testo);
}
/* Dati sintetici. */
.fact-list,
.info-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
.fact {
padding: 1.125rem 1.25rem;
border-radius: var(--raggio-controlli);
background: rgba(10, 22, 32, 0.035);
}
.fact dt {
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--testo-secondario);
margin-bottom: 0.375rem;
}
.fact dd {
font-size: 1rem;
font-weight: 600;
color: var(--testo-titolo);
}
/* Su una superficie profonda la tinta al 3,5% sul nero non si vede: qui la
tinta è chiara. Vale anche per i riquadri tenui e le righe di risultato. */
.su-scuro .fact,
.sezione--scura .fact,
.su-scuro .centro-card,
.sezione--scura .centro-card,
.su-scuro .social-channels a,
.sezione--scura .social-channels a {
background: rgba(255, 255, 255, 0.07);
}
/* Avvisi: tinta al 10%, nessun bordo, icona a sinistra disegnata in CSS. */
.callout {
position: relative;
padding: 1.125rem 1.25rem 1.125rem 3.25rem;
border-radius: var(--raggio-base);
background: var(--n-100);
color: var(--n-700);
font-weight: 500;
line-height: 1.6;
--callout-icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 1.5a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11zM7.25 7h1.5v4.5h-1.5zM8 4.5a.9.9 0 1 1 0 1.8.9.9 0 0 1 0-1.8z'/%3E%3C/svg%3E");
}
.callout::before {
content: '';
position: absolute;
top: 1.2rem;
left: 1.125rem;
width: 1.25rem;
height: 1.25rem;
background-color: currentColor;
-webkit-mask: var(--callout-icona) center / contain no-repeat;
mask: var(--callout-icona) center / contain no-repeat;
}
.callout strong {
color: var(--n-900);
}
/* Stessa ricetta per un link dentro a un riquadro dei fatti (l'identificativo
EUDAMED in tecnologia): il testo è già in grassetto e del colore del titolo,
quindi a distinguerlo resta la sottolineatura. `inherit` lo tiene giusto
anche sulle superfici scure. */
.callout a,
.fact dd a {
color: inherit;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 0.15em;
}
.callout--warning {
background: rgba(154, 98, 0, 0.1);
color: #764f08;
--callout-icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.13 2.02a1 1 0 0 1 1.74 0l6.07 10.5a1 1 0 0 1-.87 1.5H1.93a1 1 0 0 1-.87-1.5l6.07-10.5zM8 3.7 2.8 12.5h10.4L8 3.7zm-.75 3.05h1.5v3.25h-1.5V6.75zM8 11a.85.85 0 1 1 0 1.7A.85.85 0 0 1 8 11z'/%3E%3C/svg%3E");
}
.callout--warning strong {
color: #5a3c06;
}
.su-scuro .callout,
.sezione--scura .callout {
background: rgba(255, 255, 255, 0.08);
color: var(--testo-corrente);
}
.su-scuro .callout strong,
.sezione--scura .callout strong {
color: #fff;
}
/* Percorso di navigazione. */
.briciole {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.45rem;
font-size: 0.8125rem;
color: var(--testo-secondario);
margin-bottom: 1.25rem;
}
.briciole a {
color: var(--accento-testo);
border-bottom: 1px solid transparent;
}
.briciole a:hover {
border-bottom-color: currentColor;
}
.briciole [aria-current='page'] {
color: var(--testo-titolo);
}
.briciole span[aria-hidden] {
opacity: 0.5;
}
/* Accordion delle macrocategorie (pagina Servizi). */
.categoria {
border-bottom: 1px solid var(--filo);
}
.categoria summary {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem 0;
list-style: none;
cursor: pointer;
}
.categoria summary::-webkit-details-marker {
display: none;
}
.categoria-titolo {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.5rem, 3vw, 2.25rem);
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--testo-titolo);
}
.categoria-invito {
margin-left: auto;
font-size: 0.875rem;
font-weight: 600;
color: var(--testo-secondario);
white-space: nowrap;
}
.categoria summary::after {
content: '+';
flex-shrink: 0;
display: grid;
place-items: center;
width: 2.375rem;
height: 2.375rem;
border-radius: 50%;
background: var(--n-100);
color: var(--n-700);
font-size: 1.5rem;
line-height: 1;
transition: transform var(--transizione), background var(--transizione);
}
.categoria summary:hover::after {
background: var(--n-200);
color: var(--n-900);
}
.categoria[open] summary::after {
transform: rotate(45deg);
}
.categoria summary:focus-visible {
outline: 2px solid var(--n-900);
outline-offset: 2px;
border-radius: var(--raggio-controlli);
}
.categoria-corpo {
padding-bottom: 2.5rem;
}
/* Tessere quadrate dei servizi (pagina Servizi). */
.servizi-tessere {
display: grid;
gap: 0.75rem;
grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
}
.servizio-tessera {
display: block;
aspect-ratio: 1 / 1;
overflow: hidden;
transition: box-shadow var(--transizione);
}
.servizio-tessera img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Righe compatte "Altri servizi". */
.servizi-griglia {
display: grid;
gap: 0.75rem;
grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
}
.servizio-card {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.125rem 1.25rem;
color: var(--testo-titolo);
transition: box-shadow var(--transizione);
}
.servizio-icona {
flex-shrink: 0;
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
background: rgba(0, 157, 169, 0.12);
color: var(--brand-teal-deep);
}
.servizio-icona .cc-icon {
width: 1.5rem;
height: 1.5rem;
vertical-align: 0;
}
.servizio-testo {
min-width: 0;
}
.servizio-nome {
display: block;
font-size: 1.0625rem;
font-weight: 600;
line-height: 1.25;
}
.servizio-riga {
display: block;
font-size: 0.875rem;
color: var(--testo-secondario);
line-height: 1.4;
margin-top: 0.125rem;
}
.servizio-freccia {
margin-left: auto;
flex-shrink: 0;
color: var(--n-400);
display: flex;
transition: color var(--transizione), transform var(--transizione);
}
.servizio-freccia svg {
width: 1.25rem;
height: 1.25rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.servizio-card:hover .servizio-freccia {
color: var(--n-900);
transform: translateX(2px);
}
/* Immagini. */
.card-foto {
width: 100%;
height: 12.5rem;
object-fit: cover;
border-radius: var(--raggio-controlli);
margin-bottom: 1.25rem;
}
.foto-blocco,
.about-split > img,
.servizio-foto,
.point-illustrazione,
.foto-affiancata,
.testata-servizi-foto {
width: 100%;
border-radius: var(--raggio-grande);
box-shadow: var(--ombra-foto);
object-fit: cover;
max-height: 30rem;
}
.avatar-persona {
width: 3.25rem;
height: 3.25rem;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
/* Firma di una testimonianza: ritratto e nome sulla stessa riga. Senza
questo l'immagine è di blocco e il nome finisce sotto. */
.firma {
display: flex;
align-items: center;
gap: 0.875rem;
margin-top: 1.25rem;
}
.firma__nome {
font-family: var(--font-titoli);
font-size: 1rem;
font-weight: 600;
color: var(--testo-titolo);
}
.firma__ruolo {
display: block;
font-size: 0.8125rem;
font-weight: 400;
color: var(--testo-secondario);
}
.about-split {
display: grid;
gap: clamp(2rem, 4vw, 3.5rem);
align-items: start;
}
@media (min-width: 900px) {
.about-split {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}
}
.testata-servizi {
display: grid;
gap: clamp(1.5rem, 3vw, 3rem);
align-items: center;
}
/* La fotografia in testa alla pagina Servizi è quadrata e da 1000px: senza
un tetto all'altezza spinge il titolo in mezzo a una colonna vuota. */
.testata-servizi-foto {
max-height: 24rem;
}
@media (min-width: 900px) {
.testata-servizi {
grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
}
}
.point-testata {
display: grid;
gap: 2rem;
align-items: center;
}
@media (min-width: 900px) {
.point-testata {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}
/* Riquadro bianco dietro a un marchio con la scritta scura. Il logo si
contiene in entrambe le direzioni e sta al centro: i file sono quadrati,
orizzontali e verticali, e senza un tetto a tutte due le misure alcuni
sbordavano e altri si appoggiavano a un bordo. */
.logo-riquadro {
display: grid;
place-items: center;
padding: 2rem;
min-height: 12rem;
}
.logo-riquadro img {
width: 100%;
height: 9rem;
object-fit: contain;
object-position: center;
}
.partner-logo {
width: 100%;
max-width: 15rem;
height: var(--partner-logo-h, 11rem);
margin: 0 auto 1.25rem;
object-fit: contain;
background: var(--superficie-piena);
border-radius: var(--raggio-base);
box-shadow: var(--ombra-superficie);
padding: 0.9rem;
}
.research-logo {
padding: 1.5rem;
max-height: 12rem;
object-fit: contain;
margin-left: auto;
margin-right: auto;
}
.research-logo--seguente {
padding: 1.2rem;
margin-top: 1.2rem;
}
.partner-badge {
display: inline-flex;
align-items: center;
gap: 1.125rem;
padding: 1rem 1.5rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.partner-badge img {
width: 11rem;
height: 2.75rem;
object-fit: contain;
object-position: left center;
}
.partner-badge-text {
font-size: 0.9375rem;
color: var(--testo-secondario);
line-height: 1.45;
max-width: 30ch;
}
.partner-badge-text strong {
display: block;
font-size: 1rem;
color: var(--testo-titolo);
}
/* Card in due colonne forzate (gruppi di quattro). */
.cards-2col {
grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}
@media (min-width: 900px) {
.cards-2col {
grid-template-columns: 1fr 1fr;
}
}
/* Blocco tecnologia. */
.tech-grid {
display: grid;
gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 900px) {
.tech-grid {
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}
}
.tech-visual-card {
padding: clamp(1.75rem, 3vw, 2.75rem);
text-align: center;
}
.tech-visual-logo img {
max-width: 9rem;
margin: 0 auto 1.5rem;
}
.tech-features-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.tech-feature-card {
padding: 1.5rem;
}
.tech-feature-header {
display: flex;
align-items: center;
gap: 0.875rem;
margin-bottom: 0.5rem;
}
.tech-feature-num {
margin-bottom: 0;
letter-spacing: 0.08em;
}
.tech-feature-title {
font-size: 1.125rem;
font-weight: 700;
color: var(--testo-titolo);
line-height: 1.3;
}
.tech-feature-desc {
font-size: 0.9375rem;
color: var(--testo-secondario);
line-height: 1.6;
}
/* Canali social (pagina Contatti). */
.social-channels {
display: grid;
gap: 0.625rem;
grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}
.social-channels a {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.125rem;
border-radius: var(--raggio-controlli);
background: rgba(10, 22, 32, 0.035);
color: var(--testo-titolo);
font-weight: 600;
transition: background var(--transizione), color var(--transizione);
}
.social-channels a:hover {
background: rgba(0, 157, 169, 0.12);
color: var(--brand-teal-deep);
}
.social-channels svg {
width: 1.25rem;
height: 1.25rem;
flex-shrink: 0;
}
/* Pannello profondo dentro a una pagina chiara. */
.pannello-profondo {
padding: clamp(1.75rem, 3vw, 3rem);
border-radius: var(--raggio-grande);
background: var(--superficie-profonda);
box-shadow: var(--ombra-superficie-alta);
color: var(--testo-corrente);
}
/* Sezione dipinta (compatibilità con la vecchia home). */
.step.paint {
background: var(--superficie-profonda);
padding: var(--sezione-y) var(--gutter);
}
/* Finestra di pagamento PayPal. */
.paypal-modal {
position: fixed;
inset: 0;
z-index: 300;
display: grid;
place-items: center;
padding: 1.5rem;
background: rgba(10, 22, 32, 0.45);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.paypal-modal[hidden] {
display: none;
}
.paypal-modal-box {
position: relative;
width: 100%;
max-width: 26rem;
max-height: 90vh;
overflow-y: auto;
padding: 2.25rem 1.75rem 1.5rem;
border-radius: var(--raggio-grande);
background: rgba(255, 255, 255, 0.94);
-webkit-backdrop-filter: blur(var(--sfocatura));
backdrop-filter: blur(var(--sfocatura));
box-shadow: var(--ombra-modale);
color: var(--n-900);
}
.paypal-modal-chiudi {
position: absolute;
top: 0.9rem;
right: 0.9rem;
display: grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
background: var(--n-100);
color: var(--n-700);
}
.paypal-modal-chiudi:hover {
background: var(--n-200);
color: var(--n-900);
}
.paypal-modal-chiudi svg {
width: 1.125rem;
height: 1.125rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
}
.paypal-modal-box h2 {
font-family: var(--font-display);
font-weight: 400;
font-size: 1.625rem;
line-height: 1.1;
padding-right: 2.5rem;
margin-bottom: 0.3rem;
}
.paypal-modal-prezzo {
font-family: var(--font-display);
font-size: 2rem;
line-height: 1;
font-variant-numeric: tabular-nums;
color: var(--n-900);
margin-bottom: 1.4rem;
}
.paypal-modal-slot {
min-height: 3.25rem;
}
.paypal-modal-messaggio {
font-size: 0.9375rem;
line-height: 1.6;
color: var(--n-500);
text-align: center;
}
.paypal-modal-messaggio:empty {
display: none;
}
.paypal-modal-messaggio:not(:empty) {
padding-top: 0.9rem;
}
.paypal-modal-messaggio--errore {
color: var(--stato-errore);
font-weight: 600;
}
.paypal-modal-messaggio--successo {
color: var(--n-900);
font-size: 1rem;
}
.paypal-modal-messaggio--successo strong {
color: var(--brand-teal-deep);
}
.paypal-modal-messaggio a {
color: var(--brand-teal-deep);
font-weight: 700;
text-decoration: underline;
}
.paypal-modal-riferimento {
display: inline-block;
margin-top: 0.7rem;
font-size: 0.78rem;
color: var(--n-500);
word-break: break-all;
}
.paypal-modal-slot[hidden],
.paypal-modal-nota[hidden],
.paypal-modal-prezzo[hidden] {
display: none;
}
.paypal-modal-nota {
font-size: 0.8rem;
line-height: 1.55;
color: var(--n-500);
text-align: center;
margin-top: 1.2rem;
padding-top: 1rem;
border-top: 1px solid var(--n-100);
}
/* Compatibilità: la vecchia home aveva sezioni a tutta altezza. Le classi
restano perché `content.json` le usa come ancore, ma non impaginano più. */
.step-container,
.dopo-hero,
.step {
position: relative;
}
.step .wrap {
width: 100%;
max-width: var(--misura);
margin: 0 auto;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
.step .text {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(2rem, 4.4vw, 3.375rem);
line-height: 1.04;
letter-spacing: -0.02em;
color: var(--testo-titolo);
}
.step .text span.highlight {
color: var(--accento-testo);
font-style: italic;
}
.claim-sotto-cta {
margin-top: 1.25rem;
color: var(--testo-secondario);
max-width: 44ch;
}
.scroll-down-tracker,
.hero-video {
display: none;
}
/* ==========================================================================
19bis. PATTERN DI PAGINA
Con questi si compone una pagina interna. L'ordine tipico è: fascia con
fotografia, un paio di blocchi alternati testo/immagine, una banda di
numeri, una griglia di card con le icone dei servizi, la chiusura.
Nessuna pagina scrive griglie o margini a mano.
========================================================================== */
/* --- Blocco alternato: fotografia da un lato, testo dall'altro -----------
È il ritmo portante delle pagine interne. Il lato si alterna di sezione in
sezione, e da 1200px la fotografia sborda verso il bordo della finestra:
è il taglio che fa sembrare la pagina una rivista invece di una griglia. */
.split {
display: grid;
gap: clamp(1.75rem, 4vw, 4rem);
align-items: center;
}
@media (min-width: 900px) {
.split {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
/* invertito: il testo va a sinistra e la fotografia a destra */
.split--invertito .split__media {
order: 2;
}
}
.split__media {
position: relative;
border-radius: var(--raggio-grande);
overflow: hidden;
background: var(--n-100);
}
.split__media img {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 4 / 3;
}
/* Velo leggero in alto e in basso: stacca la pastiglia e il pannello, e lega
la fotografia alla palette come fanno le altre superfici con immagine. Al
centro non c'è, così lo scatto si vede. */
.split__media::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(to bottom, rgba(var(--sfumatura-scuro), 0.42) 0%, rgba(var(--sfumatura-scuro), 0) 8rem),
linear-gradient(to top, rgba(var(--sfumatura-scuro), 0.5) 0%, rgba(var(--sfumatura-scuro), 0) 40%);
}
.split--alta .split__media img {
aspect-ratio: 3 / 4;
}
/* Una pastiglia di vetro appoggiata sulla fotografia: dice di che cosa parla
il blocco senza aggiungere una riga di testo. */
.split__chip {
position: absolute;
z-index: 1;
top: 1rem;
left: 1rem;
}
/* Un pannello di vetro appoggiato in basso: i numeri del blocco. */
.split__panel {
position: absolute;
z-index: 1;
right: 1rem;
bottom: 1rem;
width: min(15rem, 60%);
}
.split__testo > * + * {
margin-top: 1rem;
}
.split__testo .btn-wrap {
margin-top: 1.75rem;
}
@media (min-width: 1200px) {
/* la fotografia esce dalla colonna e va verso il bordo */
.split--bordo .split__media {
margin-left: calc((100vw - min(100vw, var(--misura))) / -2 - var(--gutter));
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.split--bordo.split--invertito .split__media {
margin-left: 0;
margin-right: calc((100vw - min(100vw, var(--misura))) / -2 - var(--gutter));
border-radius: var(--raggio-grande);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
/* --- Banda di numeri -----------------------------------------------------
Tre o quattro dati, separati da un filo. La cifra è in serif: è il posto
in cui il carattere dei titoli fa più lavoro. */
.stat-band {
display: grid;
gap: 0;
border-top: 1px solid var(--filo);
border-bottom: 1px solid var(--filo);
}
@media (min-width: 700px) {
.stat-band {
grid-auto-flow: column;
grid-auto-columns: 1fr;
}
}
.stat-band__voce {
padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 2rem);
border-bottom: 1px solid var(--filo);
}
.stat-band__voce:last-child {
border-bottom: 0;
}
@media (min-width: 700px) {
.stat-band__voce {
border-bottom: 0;
border-left: 1px solid var(--filo);
}
.stat-band__voce:first-child {
border-left: 0;
padding-left: 0;
}
}
.stat-band__cifra {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(2.25rem, 4vw, 3.25rem);
line-height: 1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
color: var(--testo-titolo);
margin-bottom: 0.5rem;
}
.stat-band__etichetta {
font-size: 0.875rem;
line-height: 1.45;
color: var(--testo-secondario);
max-width: 26ch;
}
/* --- Card con l'icona del servizio ---------------------------------------
Il modo giusto di elencare i servizi: l'icona del nostro set, grande e nel
colore, non una fotografia e non il vecchio disegno del servizio. */
.icona-griglia {
display: grid;
gap: 0.875rem;
grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
}
/* Con due o tre card `auto-fill` lascia le colonne in più vuote a destra:
qui il numero di colonne è dichiarato. */
@media (min-width: 700px) {
.icona-griglia--2 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 900px) {
.icona-griglia--3 {
grid-template-columns: repeat(3, 1fr);
}
}
.icona-card {
display: flex;
flex-direction: column;
padding: clamp(1.5rem, 2.5vw, 1.875rem);
border-radius: var(--raggio-base);
background: var(--superficie-piena);
box-shadow: var(--ombra-superficie);
color: var(--testo-titolo);
transition: box-shadow var(--transizione);
}
a.icona-card:hover,
a.icona-card:focus-visible {
box-shadow: var(--ombra-superficie-alta);
}
.icona-card__icona {
display: grid;
place-items: center;
width: 3.5rem;
height: 3.5rem;
margin-bottom: 1.25rem;
border-radius: 50%;
background: rgba(0, 157, 169, 0.12);
color: var(--brand-teal-deep);
transition: background var(--transizione), color var(--transizione);
}
a.icona-card:hover .icona-card__icona {
background: var(--brand-teal-deep);
color: var(--n-0);
}
.icona-card__icona .cc-icon {
width: 1.875rem;
height: 1.875rem;
vertical-align: 0;
}
.icona-card__titolo {
font-family: var(--font-display);
font-weight: 400;
font-size: 1.5rem;
line-height: 1.1;
letter-spacing: -0.015em;
margin-bottom: 0.5rem;
}
.icona-card p {
font-size: 0.9375rem;
line-height: 1.55;
color: var(--testo-secondario);
}
.icona-card__vai {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: auto;
padding-top: 1.25rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--accento-testo);
transition: gap var(--transizione);
}
a.icona-card:hover .icona-card__vai {
gap: 0.875rem;
}
.icona-card__vai svg {
width: 1rem;
height: 1rem;
fill: none;
stroke: currentColor;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Versione senza superficie: una riga in una colonna di vantaggi. */
.elenco-icone {
display: grid;
gap: clamp(1.25rem, 2.5vw, 2rem);
}
@media (min-width: 700px) {
.elenco-icone--2 {
grid-template-columns: 1fr 1fr;
}
.elenco-icone--3 {
grid-template-columns: repeat(3, 1fr);
}
}
.elenco-icone__voce {
display: grid;
grid-template-columns: 2.75rem minmax(0, 1fr);
gap: 0 1rem;
align-items: start;
/* La griglia che contiene le voci le allunga tutte fino alla più alta, e con
il valore di partenza lo spazio in più si divide fra le righe: il paragrafo
scendeva di più nelle voci più corte, a tre altezze diverse. Così lo spazio
resta in fondo e il paragrafo segue sempre il suo titolo. */
align-content: start;
}
/* Qualunque figlio che non sia l'icona sta nella seconda colonna: prima il
terzo elemento di testo scivolava sotto al cerchio. */
.elenco-icone__voce > :not(.elenco-icone__icona) {
grid-column: 2;
}
.elenco-icone__icona {
grid-row: 1 / span 2;
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
background: rgba(0, 157, 169, 0.12);
color: var(--brand-teal-deep);
}
.su-scuro .elenco-icone__icona,
.sezione--scura .elenco-icone__icona {
background: rgba(255, 255, 255, 0.12);
color: var(--brand-teal-light);
}
.elenco-icone__icona .cc-icon,
.elenco-icone__icona .icon {
width: 1.375rem;
height: 1.375rem;
vertical-align: 0;
}
.elenco-icone__voce h3 {
font-size: 1.0625rem;
margin-bottom: 0.25rem;
}
.elenco-icone__voce p {
font-size: 0.9375rem;
line-height: 1.55;
color: var(--testo-secondario);
}
/* --- Nastro: card che scorrono in orizzontale ---------------------------- */
.nastro {
display: flex;
gap: 1.25rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
padding: 0.75rem 0.25rem 1.25rem 0.25rem;
margin: -0.75rem -0.25rem 0 -0.25rem;
scrollbar-width: thin;
scrollbar-color: rgba(0, 157, 169, 0.3) transparent;
}
.nastro::-webkit-scrollbar {
height: 6px;
}
.nastro::-webkit-scrollbar-track {
background: rgba(10, 22, 32, 0.04);
border-radius: var(--raggio-pillola);
}
.nastro::-webkit-scrollbar-thumb {
background: rgba(0, 157, 169, 0.3);
border-radius: var(--raggio-pillola);
}
.nastro::-webkit-scrollbar-thumb:hover {
background: var(--brand-teal);
}
.nastro > * {
flex: 0 0 clamp(16.5rem, 24vw, 19.5rem);
scroll-snap-align: start;
}
/* --- Citazione: il serif usato come voce, non come titolo ---------------- */
.citazione {
max-width: 44rem;
margin: 0 auto;
padding-left: clamp(1rem, 2vw, 1.75rem);
border-left: 2px solid var(--brand-teal);
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.5rem, 2.6vw, 2.125rem);
line-height: 1.25;
letter-spacing: -0.015em;
color: var(--testo-titolo);
}
.citazione footer {
margin-top: 1rem;
font-family: var(--font-testo);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--testo-secondario);
}
/* --- Marchio piccolo -----------------------------------------------------
Il vecchio disegno del servizio (o il logo di un progetto) non apre più la
pagina: sta qui, in piccolo, dentro alla sezione che lo riguarda. */
.marchio {
display: inline-grid;
place-items: center;
width: 6.5rem;
height: 6.5rem;
padding: 0.75rem;
border-radius: var(--raggio-base);
background: var(--superficie-piena);
box-shadow: var(--ombra-superficie);
}
.marchio img {
width: 100%;
height: 100%;
min-height: 0;
object-fit: contain;
}
/* Un marchio più largo che alto — il logo di un progetto, un'emblema
istituzionale: scatola dichiarata, niente superficie sotto, l'immagine si
contiene dentro. Sta sempre da sola, quindi è di blocco e non in linea:
accanto a un occhiello finirebbe sulla stessa riga. */
.marchio--largo {
display: grid;
width: 14rem;
height: 4.5rem;
padding: 0;
margin-bottom: 1.25rem;
background: none;
box-shadow: none;
}
/* Il marchio con il nome del servizio (logo ConCura + "Farmaci", "Point"…):
sono i nove file ritagliati dalle locandine, e portano con sé il **fondo
bianco pieno fino al bordo**. Perciò:
- il raggio va sull'immagine, non sul riquadro: il bianco è dentro
l'immagine e su un riquadro più grande gli angoli resterebbero quadri;
- il riquadro deve avere la misura esatta dell'immagine, quindi l'altezza
è dichiarata sull'`![]()
` e la larghezza la porta il rapporto dello
scatto — i nove vanno da 2,2 a 3,4, una scatola fissa non li contiene
tutti.
Un'emblema con il fondo trasparente non va qui ma in `--largo`: il raggio
gli taglierebbe gli angoli del disegno. */
.marchio--servizio {
display: grid;
width: fit-content;
max-width: 100%;
height: auto;
padding: 0;
margin-bottom: 1.25rem;
background: none;
box-shadow: none;
}
.marchio--servizio img {
width: auto;
height: 4.5rem;
max-width: 100%;
border-radius: var(--raggio-controlli);
}
/* Il marchio è in linea, così sta accanto a un testo. Quando deve andare a
capo da solo serve questa variante, invece di avvolgerlo in un . */
.marchio--blocco {
display: grid;
margin-bottom: 1.5rem;
}
/* --- Fotografia isolata --------------------------------------------------
Una fotografia che non sta né in una fascia né in un blocco alternato:
a tutta colonna, con la didascalia sotto. */
.figura-foto {
margin: 0;
}
.figura-foto img {
width: 100%;
max-height: 30rem;
object-fit: cover;
border-radius: var(--raggio-grande);
box-shadow: var(--ombra-foto);
}
.figura-foto figcaption {
margin-top: 0.875rem;
font-size: 0.875rem;
line-height: 1.5;
color: var(--testo-secondario);
max-width: 52ch;
}
.figura-foto--stretta img {
max-height: 22rem;
}
/* --- Chiusura di pagina --------------------------------------------------
Ogni pagina finisce allo stesso modo: una fascia con il titolo in serif e
una sola azione piena. Con la fotografia o sulla superficie profonda. */
.cta-band {
position: relative;
overflow: hidden;
border-radius: var(--raggio-grande);
padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 4rem);
text-align: center;
background: var(--superficie-profonda);
}
.cta-band__media {
position: absolute;
inset: 0;
z-index: 0;
}
.cta-band__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cta-band__media::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(var(--sfumatura-scuro), 0.9) 0%,
rgba(var(--sfumatura-scuro), 0.78) 60%,
rgba(var(--sfumatura-scuro), 0.62) 100%
);
}
/* Il contenuto sta sopra alla fotografia. Il `:not()` è necessario: senza,
questa regola arriva dopo `.cta-band__media` con la stessa specificità e
gli riporta `position: relative`, così la fotografia si impagina come
un'immagine a blocco invece di stare sotto e la fascia raddoppia di
altezza. */
.cta-band > :not(.cta-band__media) {
position: relative;
z-index: 1;
}
.cta-band .display,
.cta-band .display--sm {
margin-left: auto;
margin-right: auto;
max-width: 22ch;
}
.cta-band .lead {
margin: 1rem auto 0;
text-align: center;
}
.cta-band .btn-wrap {
justify-content: center;
}
/* ==========================================================================
21bis. COMPARSA ALLO SCORRIMENTO
Blocchi che salgono di un filo entrando in scena, una volta sola. È il
movimento che Oura usa per far leggere la pagina un pezzo per volta.
L'attributo `data-rivela` lo mette `app.js`, non l'HTML: se il JavaScript
non parte, non c'è niente di nascosto da rivelare e la pagina si vede
tutta. Con `prefers-reduced-motion` non si muove nulla.
========================================================================== */
[data-rivela] {
opacity: 0;
transform: translateY(1.25rem);
transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: var(--ritardo, 0s);
}
[data-rivela].e-visibile {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
[data-rivela],
[data-rivela].e-visibile {
opacity: 1;
transform: none;
transition: none;
}
}
/* ==========================================================================
21ter. BARRA DI SEZIONE
Nelle pagine lunghe: le sezioni della pagina, appiccicate sotto alla barra
dell'intestazione. La voce corrente si sottolinea da sé mentre si scorre.
È una fascia a tutta larghezza — il fondo chiaro arriva ai due bordi dello
schermo e sono le voci a stare dentro al contenitore (`.sezione-nav__pista`).
Prima il fondo era sull'elemento dentro al contenitore, quindi si fermava a
metà del margine e sembrava una card.
Lo spazio sopra è ampio quando la fascia è al suo posto, sotto alla fascia
di apertura, e si stringe quando resta appiccicata: `is-scrolled` la mette
già app.js sull'intestazione, e da lì la si raggiunge come sorella.
========================================================================== */
.sezione-nav {
position: sticky;
top: var(--header-h);
z-index: 50;
padding-top: clamp(1.5rem, 3vw, 2.5rem);
padding-bottom: 0.75rem;
background: var(--vetro);
-webkit-backdrop-filter: blur(var(--sfocatura)) saturate(150%);
backdrop-filter: blur(var(--sfocatura)) saturate(150%);
border-bottom: 1px solid var(--filo);
transition: padding-top var(--transizione);
}
.site-header.is-scrolled ~ main .sezione-nav {
padding-top: 0.75rem;
}
.sezione-nav__pista {
display: flex;
gap: 0.25rem;
overflow-x: auto;
scrollbar-width: none;
}
.sezione-nav__pista::-webkit-scrollbar {
display: none;
}
.sezione-nav a {
flex: 0 0 auto;
padding: 0.5rem 0.875rem;
border-radius: var(--raggio-pillola);
font-size: 0.9375rem;
font-weight: 600;
color: var(--testo-secondario);
white-space: nowrap;
transition: color var(--transizione), background var(--transizione);
}
.sezione-nav a:hover {
color: var(--testo-titolo);
background: rgba(10, 22, 32, 0.05);
}
.sezione-nav a.e-corrente {
color: var(--testo-titolo);
background: rgba(0, 157, 169, 0.12);
}
/* ==========================================================================
20. ICONE
Le generiche dell'interfaccia sono SVG in linea con `.icon`: ereditano
colore e misura dal testo. Le icone dei servizi sono il set proprio di
ConCura, gli stessi file dell'app, usati come maschera.
========================================================================== */
.icon {
width: 1.05em;
height: 1.05em;
flex-shrink: 0;
display: inline-block;
vertical-align: -0.15em;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.icon--filled {
fill: currentColor;
stroke: none;
}
.icon--lg {
width: 1.5em;
height: 1.5em;
}
.cc-icon {
display: inline-block;
flex-shrink: 0;
width: 1.5em;
height: 1.5em;
vertical-align: -0.35em;
background-color: currentColor;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.cc-icon--visita { -webkit-mask-image: url('assets/icons/servizi/visita.svg'); mask-image: url('assets/icons/servizi/visita.svg'); }
.cc-icon--farmaci { -webkit-mask-image: url('assets/icons/servizi/farmaci.svg'); mask-image: url('assets/icons/servizi/farmaci.svg'); }
.cc-icon--teleconsulto { -webkit-mask-image: url('assets/icons/servizi/teleconsulto.svg'); mask-image: url('assets/icons/servizi/teleconsulto.svg'); }
.cc-icon--teleconsulto-rapido { -webkit-mask-image: url('assets/icons/servizi/teleconsulto-rapido.svg'); mask-image: url('assets/icons/servizi/teleconsulto-rapido.svg'); }
.cc-icon--pediatrico { -webkit-mask-image: url('assets/icons/servizi/pediatrico.svg'); mask-image: url('assets/icons/servizi/pediatrico.svg'); }
.cc-icon--monitoraggio { -webkit-mask-image: url('assets/icons/servizi/monitoraggio.svg'); mask-image: url('assets/icons/servizi/monitoraggio.svg'); }
.cc-icon--questionario { -webkit-mask-image: url('assets/icons/servizi/questionario.svg'); mask-image: url('assets/icons/servizi/questionario.svg'); }
.cc-icon--referti { -webkit-mask-image: url('assets/icons/servizi/referti.svg'); mask-image: url('assets/icons/servizi/referti.svg'); }
.cc-icon--agenda { -webkit-mask-image: url('assets/icons/servizi/agenda.svg'); mask-image: url('assets/icons/servizi/agenda.svg'); }
.cc-icon--appuntamento { -webkit-mask-image: url('assets/icons/servizi/appuntamento.svg'); mask-image: url('assets/icons/servizi/appuntamento.svg'); }
.cc-icon--circolo-di-cura { -webkit-mask-image: url('assets/icons/servizi/circolo-di-cura.svg'); mask-image: url('assets/icons/servizi/circolo-di-cura.svg'); }
.cc-icon--familiari { -webkit-mask-image: url('assets/icons/servizi/familiari.svg'); mask-image: url('assets/icons/servizi/familiari.svg'); }
.cc-icon--profilo-sanitario { -webkit-mask-image: url('assets/icons/servizi/profilo-sanitario.svg'); mask-image: url('assets/icons/servizi/profilo-sanitario.svg'); }
.cc-icon--sottoscrizione { -webkit-mask-image: url('assets/icons/servizi/sottoscrizione.svg'); mask-image: url('assets/icons/servizi/sottoscrizione.svg'); }
.cc-icon--supporto { -webkit-mask-image: url('assets/icons/servizi/supporto.svg'); mask-image: url('assets/icons/servizi/supporto.svg'); }
.cc-icon--notifiche { -webkit-mask-image: url('assets/icons/servizi/notifiche.svg'); mask-image: url('assets/icons/servizi/notifiche.svg'); }
.cc-icon--statistiche { -webkit-mask-image: url('assets/icons/servizi/statistiche.svg'); mask-image: url('assets/icons/servizi/statistiche.svg'); }
.cc-icon--paziente { -webkit-mask-image: url('assets/icons/servizi/paziente.svg'); mask-image: url('assets/icons/servizi/paziente.svg'); }
.cc-icon--terapia { -webkit-mask-image: url('assets/icons/servizi/terapia.svg'); mask-image: url('assets/icons/servizi/terapia.svg'); }
.cc-icon--chat { -webkit-mask-image: url('assets/icons/servizi/chat.svg'); mask-image: url('assets/icons/servizi/chat.svg'); }
/* ⚠️ Il `?v=2` non è decorativo. Fino a ieri `servizi.svg` era il file dello
**sprite** (quello con tutti i `` dentro): un browser che ha visitato
il sito prima lo ha in cache sotto questo nome e la maschera non disegna
niente. Lo sprite ora si chiama `sprite-servizi.svg`; la query serve a non
far servire dalla cache il file vecchio. Non toglierla. */
.cc-icon--servizi { -webkit-mask-image: url('assets/icons/servizi/servizi.svg?v=2'); mask-image: url('assets/icons/servizi/servizi.svg?v=2'); }
/* ==========================================================================
20b. CONTROLLI A TAB (es. test-genetici.html)
========================================================================== */
.tab-pulsanti {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: center;
align-items: center;
margin: 2rem 0 clamp(2rem, 4vw, 3rem);
}
.tab-btn {
cursor: pointer;
border-radius: var(--raggio-pillola, 9999px);
font-family: inherit;
font-size: 0.95rem;
font-weight: 600;
min-height: 2.75rem;
padding: 0.6rem 1.35rem;
transition: background var(--transizione), color var(--transizione), border-color var(--transizione), box-shadow var(--transizione);
}
.tab-btn.e-attivo {
background: var(--azione-fondo);
color: var(--azione-testo);
border-color: var(--azione-fondo);
box-shadow: 0 4px 14px rgba(12, 21, 30, 0.12);
}
.tab-btn:not(.e-attivo) {
background: transparent;
color: var(--ghost-testo);
border: 1px solid var(--ghost-bordo);
box-shadow: none;
}
.tab-btn:not(.e-attivo):hover {
background: var(--ghost-fondo-hover);
border-color: var(--ghost-bordo-hover);
color: var(--ghost-testo);
}
.tab-pannello {
display: block;
animation: tabFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.tab-pannello[hidden] {
display: none !important;
}
@keyframes tabFadeIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ==========================================================================
21. ACCESSIBILITÀ E MOVIMENTO
========================================================================== */
[hidden] {
display: none !important;
}
.solo-lettori {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* Chi chiede meno movimento al sistema operativo non deve vedere nulla
muoversi: nastri, espansioni, scorrimento morbido. */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.logo-marquee-track {
animation: none;
transform: none;
}
}