/* ==========================================================================
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
6bis. Tendina dei numeri
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,
.link-pagina :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);
}
/* ==========================================================================
6bis. TENDINA DEI NUMERI
Ogni bottone che chiama l'800 apre un pannello con i tre numeri: il numero
verde e i due cellulari. Il bottone lo trasforma app.js (sezione 6bis):
senza JavaScript resta un link al numero verde.
Il pannello è uno solo, appeso a e posizionato da app.js sotto al
bottone che l'ha aperto. È di vetro scuro come i pannelli sopra alle
fotografie, così legge bene sia sulle fasce scure sia sulle pagine chiare.
========================================================================== */
.tendina-numeri__chevron {
width: 0.8em;
height: 0.8em;
margin-left: -0.125rem;
flex-shrink: 0;
transition: transform var(--transizione);
}
[aria-expanded='true'] > .tendina-numeri__chevron {
transform: rotate(180deg);
}
/* Sul telefono il numero della barra è un tondo con la sola cornetta: il
chevron non ci sta e non serve. */
@media (max-width: 767.98px) {
.header-azioni .tendina-numeri__chevron {
display: none;
}
}
.tendina-numeri {
position: fixed;
top: 0;
left: 0;
z-index: 250; /* sopra alla barra (100) e al menu a tutto schermo (200) */
width: min(19.5rem, calc(100vw - 2rem));
padding: 0.5rem;
border-radius: var(--raggio-base);
background: var(--vetro-scuro);
border: 1px solid var(--vetro-scuro-filo);
-webkit-backdrop-filter: blur(var(--sfocatura));
backdrop-filter: blur(var(--sfocatura));
box-shadow: var(--ombra-modale);
color: #fff;
font-family: var(--font-testo);
text-align: left;
}
.tendina-numeri[hidden] {
display: none;
}
.tendina-numeri__voce {
display: grid;
grid-template-columns: 2.5rem 1fr auto;
align-items: center;
gap: 0.75rem;
padding: 0.625rem 0.75rem;
border-radius: var(--raggio-controlli);
color: #fff;
transition: background var(--transizione);
}
.tendina-numeri__voce:hover,
.tendina-numeri__voce:focus-visible {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.tendina-numeri__tondo {
display: grid;
place-items: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
}
/* Le due chiamate hanno il tondo del marchio, WhatsApp il suo verde (lo
stesso del bottone fisso in basso a sinistra). */
.tendina-numeri__voce--telefono .tendina-numeri__tondo,
.tendina-numeri__voce--cellulare .tendina-numeri__tondo {
background: var(--brand-teal);
}
.tendina-numeri__voce--whatsapp .tendina-numeri__tondo {
background: #25d366;
}
.tendina-numeri__etichetta {
display: block;
font-size: 0.6875rem;
font-weight: var(--peso-titolo);
letter-spacing: 0.08em;
line-height: 1.3;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.72);
}
.tendina-numeri__numero {
display: block;
font-size: 1.0625rem;
font-weight: var(--peso-titolo);
line-height: 1.3;
letter-spacing: 0.01em;
white-space: nowrap;
}
.tendina-numeri__vai {
width: 1rem;
height: 1rem;
opacity: 0.5;
transition: opacity var(--transizione);
}
.tendina-numeri__voce:hover .tendina-numeri__vai {
opacity: 0.9;
}
.tendina-numeri__filo {
height: 1px;
margin: 0.25rem 0.75rem;
background: rgba(255, 255, 255, 0.12);
}
/* ==========================================================================
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;
}
}
/* L'invito a iscriversi, fra «Parla con un medico» e i servizi: una riga sola
su superficie chiara (icona, titolo e una frase, un bottone), perché dopo
la fascia scura un secondo blocco scuro peserebbe troppo. L'icona è quella
del paziente, come nella piattaforma. Sotto ai 768px si impila. */
.iscrizione {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: clamp(1rem, 2.5vw, 2rem);
padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3.5vw, 2.75rem);
border-radius: var(--raggio-grande);
background: var(--superficie-piena);
box-shadow: var(--ombra-superficie);
}
.iscrizione__icona {
display: grid;
place-items: center;
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
background: rgba(0, 157, 169, 0.12);
color: var(--brand-teal-deep);
}
.iscrizione__icona .cc-icon {
width: 1.75rem;
height: 1.75rem;
}
.iscrizione__testo p {
margin-top: 0.375rem;
color: var(--testo-secondario);
}
@media (max-width: 767px) {
.iscrizione {
grid-template-columns: minmax(0, 1fr);
justify-items: start;
}
}
/* ==========================================================================
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;
}
/* Il titolo ha il carattere dei titoli grandi e la misura di quello delle
card dei servizi, nella stessa pagina: le due tessere con fotografia
parlano allo stesso modo. Instrument Serif ha un peso solo, quindi niente
`--peso-titolo`: il grassetto sarebbe finto. */
.svc-card--fascia .svc-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;
text-wrap: balance;
}
.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;
}
/* Fuori dallo schermo il nastro è fermo (la classe la mette app.js). */
.logo-marquee.is-fermo .logo-marquee-track {
animation-play-state: paused;
}
/* Sul telefono riquadri più piccoli e dissolvenza più corta. Con 13rem e
6rem per lato, su 390px la parte piena era 198px, meno di un riquadro: un
marchio non era mai del tutto visibile. E il nastro, più corto, pesa meno. */
@media (max-width: 767px) {
.logo-marquee {
-webkit-mask-image: linear-gradient(
to right,
transparent,
#000 2rem,
#000 calc(100% - 2rem),
transparent
);
mask-image: linear-gradient(
to right,
transparent,
#000 2rem,
#000 calc(100% - 2rem),
transparent
);
}
.logo-marquee-track {
gap: 0.75rem;
}
.logo-chip {
width: 9.5rem;
height: 9.5rem;
padding: 0.625rem;
}
}
/* ==========================================================================
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
destra: senza, sul telefono l'ultima riga della nota legale gli finisce
sotto. */
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;
}
/* I due cellulari sotto al numero verde: più piccoli e nel sans, perché il
serif sotto ai 22px perde le grazie. */
.footer-tel--cellulare {
display: flex;
width: fit-content;
margin-top: 0.5rem;
font-family: var(--font-testo);
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.01em;
color: rgba(255, 255, 255, 0.85);
}
.footer-tel--cellulare .icon {
width: 1rem;
height: 1rem;
opacity: 0.7;
}
.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,
.footer-legal-links button {
color: var(--accento-testo);
font-weight: 600;
}
/* «Preferenze cookie» è un bottone (non porta a una pagina) vestito da link */
.footer-legal-links button {
padding: 0;
border: 0;
background: none;
font: inherit;
font-weight: 600;
cursor: pointer;
}
.footer-legal-links a:hover,
.footer-legal-links button:hover {
text-decoration: underline;
}
.footer-legal-links span {
margin: 0 0.5rem;
opacity: 0.5;
}
/* WhatsApp, in basso a destra: una pillola bianca con il tondo verde e
«Contattaci su WhatsApp». Il verde è il colore del marchio del servizio,
non nostro, e resta solo nel tondo: il testo bianco sul verde starebbe a
1,98:1. Sul telefono l'etichetta si accorcia a «Contattaci». */
.whatsapp-floating {
position: fixed;
right: 1.25rem;
bottom: 1.25rem;
z-index: 90;
display: inline-flex;
align-items: center;
gap: 0.625rem;
padding: 0.3125rem 1.125rem 0.3125rem 0.3125rem;
border-radius: var(--raggio-pillola);
background: var(--superficie-piena);
color: var(--brand-navy);
font-size: 0.9375rem;
font-weight: var(--peso-titolo);
line-height: 1.2;
box-shadow: var(--ombra-foto), inset 0 0 0 1px rgba(10, 22, 32, 0.06);
transition: box-shadow var(--transizione);
}
.whatsapp-floating:hover {
color: var(--brand-navy);
box-shadow: var(--ombra-modale), inset 0 0 0 1px rgba(10, 22, 32, 0.06);
}
.whatsapp-floating__icona {
display: grid;
place-items: center;
width: 2.625rem;
height: 2.625rem;
border-radius: 50%;
background: #25d366;
color: #fff;
}
.whatsapp-floating svg {
width: 1.375rem;
height: 1.375rem;
}
@media (max-width: 599.98px) {
.whatsapp-floating {
right: 1rem;
bottom: 1rem;
}
.whatsapp-floating__coda {
display: none;
}
}
/* ==========================================================================
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;
}
/* 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);
}
/* --- Il consenso prima dell'acquisto ---------------------------------------
Ogni bottone che compra ha sopra di sé una casella da spuntare: finché non
è spuntata il bottone è spento e il clic non apre il carrello. La casella
e il bottone si trovano per chiave — `data-consenso` uguale a
`data-prodotto` — e non per posizione: nelle card l'uno sta dentro a un
`.btn-wrap` e l'altra fuori, e un giorno l'ordine potrebbe cambiare.
La casella vera è un `input[type=checkbox]` nascosto sotto al quadrato
disegnato: tastiera, spazio e lettori di schermo funzionano da soli. */
.consenso-acquisto {
display: flex;
align-items: flex-start;
gap: 0.625rem;
margin: 0 0 0.875rem;
cursor: pointer;
font-size: 0.875rem;
line-height: 1.45;
color: var(--testo-secondario);
}
.consenso-acquisto__flag {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.consenso-acquisto__segno {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 1.25rem;
height: 1.25rem;
margin-top: 0.1em;
border-radius: 6px;
border: 2px solid var(--n-200);
background: var(--superficie-piena);
transition: border-color 0.15s ease, background 0.15s ease;
}
.consenso-acquisto__segno::before {
content: '';
width: 0.625rem;
height: 0.375rem;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg) scale(0);
transform-origin: center;
transition: transform 0.15s ease;
margin-top: -0.15em;
}
.consenso-acquisto__flag:checked + .consenso-acquisto__segno {
border-color: var(--brand-teal-deep);
background: var(--brand-teal-deep);
}
.consenso-acquisto__flag:checked + .consenso-acquisto__segno::before {
transform: rotate(-45deg) scale(1);
}
.consenso-acquisto__flag:focus-visible + .consenso-acquisto__segno {
outline: 2px solid var(--n-900);
outline-offset: 3px;
}
/* Sopra a una fila di card che comprano la stessa cosa a importi diversi la
casella è **una sola** e le accende tutte: una frase per card sarebbe la
stessa frase cinque volte, a capo dentro a ogni colonna. Le chiavi dei
bottoni stanno nel `data-consenso` separate da spazi. */
.consenso-acquisto--fila {
margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
/* Sulla landing della campagna il consenso sta sotto alle due card, al
centro come il bottone che gli sta sotto, e non nel fianco di una card. */
.campagna-consenso {
justify-content: center;
max-width: 34rem;
margin: clamp(1.25rem, 2.5vw, 1.5rem) auto -0.25rem;
}
.consenso-acquisto a {
color: var(--accento-testo);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 0.15em;
}
/* Il bottone spento: si vede che c'è, si legge, ma non si usa. Resta
raggiungibile con il TAB — `aria-disabled` dice perché non risponde — così
chi naviga da tastiera non lo trova sparito a metà pagina.
⚠️ **Spento non vuol dire sbiadito.** Un `opacity: 0.45` sul bottone pieno
lasciava la scritta bianca a 2,73:1: le linee guida esentano i controlli
inattivi dal contrasto, ma un'etichetta che non si legge non dice niente a
nessuno. Qui lo stato spento ha colori suoi — il grigio chiaro della scala
con il testo neutro — e resta a 6:1. */
.btn.acquisto-spento,
.btn.acquisto-spento:hover {
background: var(--n-100);
border-color: var(--n-100);
color: var(--n-500);
cursor: not-allowed;
box-shadow: none;
}
/* 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);
}
/* Dentro alla colonna di uno `split` la citazione non ha 44rem: prende tutta
la colonna e stacca dal paragrafo che la precede. */
.citazione--stretta {
max-width: none;
margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}
.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;
}
/* ==========================================================================
19ter. LANDING DELLE CAMPAGNE
Le pagine di una campagna (fatti-un-favore.html) non stanno nel menu: ci
si arriva da un link diretto. Usano i pattern di pagina qui sopra e tre
pezzi in più: la fascia senza fotografia, il calendario del mese di vetro
e la figura dei cento punti.
========================================================================== */
/* --- La fascia senza fotografia -------------------------------------------
Il fondo è la sfumatura della fascia di sempre; al posto della fotografia
due luci di marca, gradienti radiali come quelli di `.scelta-palco`. La
luce teal sta dietro al calendario, perché il vetro abbia qualcosa da
sfocare (su un fondo liscio la lastra sparisce), e respira: si allarga e
si stringe in 9 secondi, il ritmo di un respiro lento. Con il movimento
ridotto sta ferma. */
.hero--campagna {
min-height: min(88vh, 50rem);
justify-content: center;
padding-bottom: clamp(3rem, 7vw, 5.5rem);
isolation: isolate;
}
.hero--campagna::before,
.hero--campagna::after {
content: '';
position: absolute;
z-index: 0;
border-radius: 50%;
pointer-events: none;
}
.hero--campagna::before {
right: -8%;
bottom: -14%;
width: min(62rem, 110vw);
aspect-ratio: 1;
background: radial-gradient(closest-side, rgba(0, 157, 169, 0.5), rgba(0, 157, 169, 0));
animation: campagna-respiro 9s ease-in-out infinite alternate;
}
.hero--campagna::after {
left: -18%;
top: -22%;
width: min(44rem, 90vw);
aspect-ratio: 1;
background: radial-gradient(closest-side, rgba(92, 207, 217, 0.16), rgba(92, 207, 217, 0));
}
@keyframes campagna-respiro {
from { transform: scale(0.9); opacity: 0.8; }
to { transform: scale(1.06); opacity: 1; }
}
.campagna-apertura {
display: grid;
gap: clamp(2.5rem, 5vw, 3.5rem);
align-items: center;
}
@media (min-width: 1024px) {
.campagna-apertura {
grid-template-columns: minmax(0, 1fr) auto;
}
}
/* Il nome della campagna è il titolo: più grande della fascia di una pagina
interna, con la parola in corsivo nel teal chiaro (8:1 sul fondo). */
.hero--campagna .hero__titolo {
font-size: clamp(3.5rem, 16vw, 8.5rem);
line-height: 0.92;
max-width: none;
}
.hero--campagna .hero__titolo em {
color: var(--brand-teal-light);
}
.hero--campagna .hero__lead {
max-width: 38ch;
}
/* --- La fotografia della fascia ---------------------------------------------
Accanto al messaggio, nella colonna dove prima stava il calendario: un
riquadro col raggio grande, un filo chiaro e un'ombra profonda, così
stacca dalla sfumatura senza pesare. Il testo non ci passa sopra — resta
sulla sfumatura — quindi qui non serve nessun velo e cambiare scatto non
obbliga a rimisurare il contrasto. La scatola ha le proporzioni del file
(4:3): con `object-fit: cover` un file di forma diversa verrebbe tagliato
ai lati, non deformato. */
.campagna-foto {
/* Larghezza *definita*, non `min(100%, …)`: la colonna della fascia è
`auto`, quindi si misura sul contenuto, e una percentuale lì dentro non
ha un riferimento — il riquadro prendeva la larghezza vera del file
(1200px) e schiacciava il titolo a una parola per riga. */
width: 30rem;
max-width: 100%;
margin: 0;
border-radius: var(--raggio-grande);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.16);
box-shadow: 0 32px 64px rgba(0, 0, 0, 0.32);
}
.campagna-foto img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
}
/* --- Il calendario del mese ------------------------------------------------
Una lastra di vetro chiaro sulla fascia, come il questionario della home.
Tutti i giorni del mese sono accesi (la campagna vale ogni giorno), il
primo e l'ultimo pieni. È un'immagine: il lettore di schermo sente
l'etichetta del contenitore, non i trentuno numeri. */
.calendario-mese {
position: relative;
width: min(100%, 27rem);
padding: clamp(1.5rem, 3.5vw, 2.25rem);
border-radius: var(--raggio-grande);
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%);
}
.calendario-mese__testa {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.25rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.calendario-mese__mese {
font-family: var(--font-display);
font-size: clamp(2.25rem, 4.5vw, 3rem);
line-height: 1;
letter-spacing: -0.02em;
color: #fff;
}
.calendario-mese__anno {
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.14em;
color: rgba(255, 255, 255, 0.78);
}
.calendario-mese__giorni {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 0.5rem;
text-align: center;
}
.calendario-mese__nome {
padding-bottom: 0.5rem;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.72);
}
.calendario-mese__giorno {
display: grid;
place-items: center;
aspect-ratio: 1;
border-radius: 50%;
font-size: 0.9375rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: #fff;
background: rgba(92, 207, 217, 0.16);
}
/* Il primo e l'ultimo giorno sono pieni: dicono da dove a dove. L'anello
attorno li stacca dai vicini, che sono comunque accesi. */
.calendario-mese__giorno--inizio,
.calendario-mese__giorno--fine {
background: var(--brand-teal-light);
color: var(--n-900);
box-shadow: 0 0 0 4px rgba(92, 207, 217, 0.22);
}
.calendario-mese__piede {
display: flex;
align-items: center;
gap: 0.625rem;
margin-top: 1.5rem;
padding-top: 1.125rem;
border-top: 1px solid rgba(255, 255, 255, 0.14);
font-size: 0.9375rem;
font-weight: 600;
color: #fff;
}
.calendario-mese__piede .cc-icon {
width: 1.25rem;
height: 1.25rem;
flex-shrink: 0;
color: var(--brand-teal-light);
}
/* --- Cento punti -----------------------------------------------------------
Un dato su cento persone detto con cento punti: teal quelli del dato,
spenti gli altri. Non sono cento elementi ma due gradienti ripetuti — la
griglia spenta sotto, quella teal sopra, alta `--righe-piene` righe su
dieci (una riga = dieci persone; si scrive sull'elemento, 7 per il 70%).
Quando il blocco entra in scena (`initRivela`) i punti teal scendono riga
per riga. */
.punti-cento-figura {
display: grid;
gap: clamp(1.25rem, 3vw, 2rem);
justify-items: center;
margin: 0;
padding: clamp(1.75rem, 4vw, 2.75rem);
border-radius: var(--raggio-grande);
background: var(--superficie-piena);
box-shadow: var(--ombra-superficie);
}
.punti-cento {
--righe-piene: 9;
position: relative;
width: min(100%, 19rem);
aspect-ratio: 1;
background: radial-gradient(circle closest-side, var(--n-200) 62%, rgba(196, 208, 217, 0) 68%) 0 0 / 10% 10%;
}
.punti-cento::before {
content: '';
position: absolute;
inset: 0 0 calc((10 - var(--righe-piene)) * 10%) 0;
background: radial-gradient(circle closest-side, var(--brand-teal) 62%, rgba(0, 157, 169, 0) 68%) 0 0 / 10% calc(100% / var(--righe-piene));
clip-path: inset(0);
transition: clip-path 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s;
}
[data-rivela]:not(.e-visibile) .punti-cento::before {
clip-path: inset(0 0 100% 0);
}
.punti-cento-figura figcaption {
display: grid;
gap: 0.375rem;
text-align: center;
max-width: 24rem;
}
.punti-cento__cifra {
font-family: var(--font-display);
font-size: clamp(3.5rem, 7vw, 5rem);
line-height: 1;
letter-spacing: -0.02em;
color: var(--testo-titolo);
}
.punti-cento__testo {
font-size: 1rem;
font-weight: 600;
line-height: 1.45;
color: var(--testo-titolo);
}
.punti-cento__fonte {
font-size: 0.8125rem;
color: var(--testo-secondario);
}
/* --- La pagina in arrivo ---------------------------------------------------
La stessa fascia, alta quanto lo schermo, per una pagina che non è ancora
pronta («coming soon»). A destra tre anelli partono dal centro e si
allargano svanendo, uno ogni due secondi, attorno a un disco di vetro con
il nome della pagina: dice «sta arrivando» senza una data. Il disco sta
sopra alla luce teal, così il vetro ha qualcosa da sfocare. Con il
movimento ridotto gli anelli restano fermi a tre misure. */
.hero--attesa {
min-height: max(100vh, 40rem);
min-height: max(100svh, 40rem);
}
.anelli-attesa {
position: relative;
display: grid;
place-items: center;
justify-self: center;
width: clamp(15rem, 30vw, 24rem);
aspect-ratio: 1;
}
.anelli-attesa > span {
position: absolute;
inset: 0;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.22);
opacity: 0;
animation: attesa-onda 6s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
.anelli-attesa > span:nth-child(2) {
animation-delay: 2s;
}
.anelli-attesa > span:nth-child(3) {
animation-delay: 4s;
}
@keyframes attesa-onda {
0% { transform: scale(0.46); opacity: 0; }
15% { opacity: 1; }
100% { transform: scale(1); opacity: 0; }
}
.anelli-attesa__centro {
position: relative;
display: grid;
place-items: center;
width: 46%;
aspect-ratio: 1;
border-radius: 50%;
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%);
}
.anelli-attesa__parola {
padding: 0 0.75rem;
text-align: center;
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.5rem, 2.6vw, 2.125rem);
line-height: 1;
letter-spacing: -0.015em;
color: #fff;
}
/* --- La serie degli incontri -----------------------------------------------
Cinque dischi numerati su una lastra di vetro: disegnano la riga della
fascia, «Cinque incontri online con uno psicoterapeuta», senza aggiungere
una parola. Stessa ricetta del calendario del mese — e come quello sta
sopra alla luce teal, perché la sfocatura abbia qualcosa da sfocare.
È un'immagine sola per il lettore di schermo (`role="img"`), non cinque
numeri. */
.serie-incontri {
display: flex;
align-items: center;
justify-content: center;
width: min(100%, 24rem);
padding: clamp(1.5rem, 3vw, 2rem);
border-radius: var(--raggio-grande);
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.16);
backdrop-filter: blur(28px);
-webkit-backdrop-filter: blur(28px);
}
.serie-incontri span {
position: relative;
flex: 0 0 auto;
display: grid;
place-items: center;
width: clamp(2.75rem, 7vw, 3.25rem);
aspect-ratio: 1;
border-radius: 50%;
background: rgba(92, 207, 217, 0.16);
font-family: var(--font-display);
font-size: clamp(1.375rem, 3.5vw, 1.625rem);
line-height: 1;
color: #fff;
}
/* Su una sezione chiara il vetro non ha niente da sfocare (sparirebbe): la
lastra non c'è e restano i cinque dischi, nel teal sul fondo della pagina. */
.serie-incontri--chiara {
justify-content: flex-start;
width: auto;
padding: 0;
border: 0;
background: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
.serie-incontri--chiara span {
background: rgba(0, 157, 169, 0.12);
color: var(--brand-teal-deep);
}
.serie-incontri--chiara span + span::before {
background: var(--filo);
}
/* Il filo fra un disco e l'altro: il percorso, non cinque cose separate. */
.serie-incontri span + span {
margin-left: clamp(0.5rem, 1.6vw, 0.875rem);
}
.serie-incontri span + span::before {
content: '';
position: absolute;
right: 100%;
width: clamp(0.5rem, 1.6vw, 0.875rem);
height: 1px;
background: rgba(255, 255, 255, 0.22);
}
/* --- Il testo lungo di una campagna ----------------------------------------
La landing di «Fatti un favore» è quasi tutta testo: il progetto si spiega
con le sue parole, e le sezioni non hanno card da riempire. Una colonna di
44rem — la misura della `.citazione` — tiene le righe sotto ai 75 caratteri,
che è ciò che rende un testo lungo leggibile. */
.campagna-testo {
display: grid;
gap: 1.125rem;
max-width: 44rem;
}
/* Accanto a una citazione il blocco ne continua l'allineamento: stessa colonna
centrata e stesso rientro del filo teal, altrimenti le righe ripartono di
qualche pixel più a sinistra. */
.campagna-testo--citazione {
margin-inline: auto;
margin-block: clamp(1.5rem, 3vw, 2.25rem);
padding-left: clamp(1rem, 2vw, 1.75rem);
}
/* Un link dentro al testo si vede: stessa ricetta di `.prose-card a`. Senza,
prende il colore del paragrafo e nessuno capisce che si può cliccare. */
.campagna-testo a {
color: var(--accento-testo);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 0.15em;
}
/* --- La card della richiesta ------------------------------------------------
L'indirizzo a cui scrivere è l'azione della pagina: sta in una card con
l'anello teal e il testo grande come un prezzo, perché è quello che si deve
ricordare. */
.campagna-richiesta {
max-width: 34rem;
margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}
.campagna-mail {
display: inline-block;
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.625rem, 3.4vw, 2.25rem);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--accento-testo);
text-decoration: none;
word-break: break-word;
}
.campagna-mail:hover,
.campagna-mail:focus-visible {
text-decoration: underline;
text-underline-offset: 0.12em;
}
.campagna-richiesta__nota {
margin-top: 1.25rem;
margin-bottom: 0;
font-size: 0.9375rem;
}
.campagna-acquisto {
margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}
/* Nella chiusura la riga viene prima del nome del progetto: è lei che
introduce, non un sommario che segue. */
.cta-band > .lead:first-child {
margin-bottom: 1rem;
}
/* --- I tre dati della campagna ----------------------------------------------
Sotto al nome, nella chiusura: quando, per chi, cosa. Sempre in fila su una
riga, anche sul telefono: tre colonne centrate come la fascia, l'icona in
un cerchio di vetro teal sopra e il testo sotto, separate da un filo.
Sugli schermi stretti cerchi, testo e margini si riducono con `clamp()`. */
.campagna-dati {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
max-width: 54rem;
margin: clamp(2rem, 4vw, 2.75rem) auto clamp(2rem, 4vw, 2.5rem);
padding: 0;
list-style: none;
}
.campagna-dati li {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(0.625rem, 1.5vw, 0.875rem);
padding: 0.25rem clamp(0.375rem, 2.5vw, 2rem);
text-align: center;
}
.campagna-dati li + li {
border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.campagna-dati__icona {
display: grid;
place-items: center;
width: clamp(2.5rem, 7vw, 3.5rem);
height: clamp(2.5rem, 7vw, 3.5rem);
border-radius: 50%;
background: rgba(92, 207, 217, 0.12);
border: 1px solid rgba(92, 207, 217, 0.35);
color: var(--brand-teal-light);
}
.campagna-dati__icona .cc-icon {
width: clamp(1.25rem, 3.4vw, 1.625rem);
height: clamp(1.25rem, 3.4vw, 1.625rem);
vertical-align: 0;
}
.campagna-dati__testo {
max-width: 24ch;
margin: 0;
font-size: clamp(0.8125rem, 2.2vw, 1.0625rem);
font-weight: 600;
line-height: 1.4;
color: #fff;
text-wrap: balance;
}
/* --- Variante compatta della landing (fatti-un-favore-filippo.html) -------
Stessi pezzi, misure più strette: la fascia di apertura non riempie più lo
schermo e lascia intravedere la sezione sotto, le sezioni respirano meno,
fotografie e riquadri sono più piccoli. La pagina invita a scorrere invece
di presentarsi un blocco alla volta. Vale solo con `campagna-compatta` sul
: le altre pagine non cambiano. */
.campagna-compatta {
--sezione-y: clamp(2.75rem, 5vw, 4.25rem);
}
.campagna-compatta .hero--campagna {
min-height: min(64vh, 38rem);
padding-bottom: clamp(2rem, 4vw, 3rem);
}
.campagna-compatta .hero--campagna .hero__titolo {
font-size: clamp(3rem, 12vw, 6.5rem);
}
.campagna-compatta .testa {
margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
}
/* La fotografia della fascia: un riquadro più stretto. */
.campagna-compatta .campagna-foto {
width: 26rem;
}
/* Fotografie: più basse (3:2 invece di 4:3) e in una colonna più stretta
del testo. */
.campagna-compatta .split {
gap: clamp(1.5rem, 3.5vw, 3rem);
}
.campagna-compatta .split__media img {
aspect-ratio: 3 / 2;
}
@media (min-width: 900px) {
.campagna-compatta .split {
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}
.campagna-compatta .split--invertito {
grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
}
}
/* La card dell'email: meno imbottitura, indirizzo meno grande. */
.campagna-compatta .campagna-richiesta {
max-width: 30rem;
margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
padding: 1.25rem 1.5rem;
gap: 0.75rem;
}
.campagna-compatta .campagna-mail {
font-size: clamp(1.375rem, 2.6vw, 1.75rem);
}
.campagna-compatta .campagna-richiesta__nota {
margin-top: 0.5rem;
}
.campagna-compatta .campagna-acquisto {
margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}
/* La chiusura: fascia più bassa, i tre dati più vicini al titolo. */
.campagna-compatta .cta-band {
padding: clamp(2rem, 4.5vw, 3.25rem) clamp(1.25rem, 3vw, 3rem);
}
.campagna-compatta .campagna-dati {
margin: clamp(1.25rem, 3vw, 1.75rem) auto clamp(1.5rem, 3vw, 2rem);
}
/* --- Le due strade per accedere (fatti-un-favore-filippo.html) --------------
Due scelte disponibili da subito, non due fasi: il fondo di Adotta un
paziente per chi non può sostenere il costo, l'acquisto per chi può
permetterselo. Le due card hanno la stessa anatomia, così l'occhio le
confronta riga per riga:
1. l'icona in un cerchio e la strada, in maiuscoletto teal;
2. il titolo, cioè per chi è;
3. il testo;
4. in fondo, dopo un filo, il dato da ricordare in grande — l'indirizzo a
cui scrivere, il prezzo.
Il fondo ha l'anello teal. L'azione è una sola, sotto alle due card e larga
quanto loro (`.campagna-azioni`). */
.campagna-strade {
display: grid;
gap: clamp(1rem, 2.5vw, 1.5rem);
margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
@media (min-width: 800px) {
.campagna-strade {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* `.bright-card` distribuisce i figli su tutta l'altezza: qui stanno in cima
e solo il dato scende in fondo, così nelle due card è alla stessa altezza. */
.campagna-strada {
justify-content: flex-start;
cursor: pointer;
transition: box-shadow 0.2s ease;
}
/* La card scelta prende l'anello di `.card-evidenza`: l'evidenza non è più
una proprietà fissa della prima card ma il segno della scelta fatta. */
.campagna-strada--scelta {
box-shadow: var(--ombra-superficie), 0 0 0 2px var(--brand-teal);
}
.campagna-strada:hover {
box-shadow: var(--ombra-superficie-alta);
}
.campagna-strada--scelta:hover {
box-shadow: var(--ombra-superficie-alta), 0 0 0 2px var(--brand-teal);
}
/* Il controllo vero è un `input[type=radio]` dentro all'occhiello: la
tastiera, le frecce e i lettori di schermo funzionano da soli, e il cerchio
disegnato è solo la sua pelle. Il clic sul resto della card lo accende via
JavaScript (`initStradeCampagna`); senza JavaScript il controllo si vede e
si usa lo stesso, e l'azione che resta è quella dell'email. */
.campagna-strada__spunta {
flex: 0 0 auto;
margin-left: auto;
display: inline-flex;
cursor: pointer;
}
.campagna-strada__spunta input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.campagna-strada__segno {
display: grid;
place-items: center;
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
border: 2px solid var(--n-200);
transition: border-color 0.15s ease;
}
.campagna-strada__segno::before {
content: '';
width: 0.625rem;
height: 0.625rem;
border-radius: 50%;
background: var(--brand-teal-deep);
transform: scale(0);
transition: transform 0.15s ease;
}
.campagna-strada__spunta input:checked + .campagna-strada__segno {
border-color: var(--brand-teal-deep);
}
.campagna-strada__spunta input:checked + .campagna-strada__segno::before {
transform: scale(1);
}
.campagna-strada__spunta input:focus-visible + .campagna-strada__segno {
outline: 2px solid var(--brand-teal-deep);
outline-offset: 3px;
}
.campagna-strada .campagna-strada__fase {
display: flex;
align-items: center;
gap: 0.625rem;
margin: 0 0 1rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
line-height: 1.3;
text-transform: uppercase;
color: var(--accento-testo);
}
.campagna-strada__icona {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: rgba(0, 157, 169, 0.12);
}
.campagna-strada__icona .cc-icon {
width: 1.125rem;
height: 1.125rem;
vertical-align: 0;
}
/* La strada scelta: il cerchio pieno. */
.campagna-strada--scelta .campagna-strada__icona {
background: var(--brand-teal-deep);
color: #fff;
}
.campagna-strada h3 {
margin-bottom: 0.5rem;
}
.campagna-strada p {
margin-bottom: 0;
}
.campagna-strada__testo p + p {
margin-top: 0.75rem;
}
/* La frase che fa scattare il gesto: il serif della voce, come le citazioni
del sito. */
.campagna-strada .campagna-strada__frase {
font-family: var(--font-display);
font-size: 1.1875rem;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--testo-titolo);
}
.campagna-strada__dato {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.25rem 0.75rem;
margin-top: auto;
padding-top: 1.25rem;
border-top: 1px solid var(--filo);
}
/* Lo spazio fra il testo e il filo: il margine sta sul testo perché il dato
ha già `margin-top: auto` per scendere in fondo. */
.campagna-strada .campagna-strada__testo {
margin-bottom: 1.5rem;
}
.campagna-strada__valore {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.5rem, 2.8vw, 2rem);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--testo-titolo);
text-decoration: none;
word-break: break-word;
}
a.campagna-strada__valore {
color: var(--accento-testo);
}
a.campagna-strada__valore:hover,
a.campagna-strada__valore:focus-visible {
text-decoration: underline;
text-underline-offset: 0.12em;
}
/* Il prezzo è il dato che decide, e va letto prima del resto: più grande
dell'indirizzo email, che nell'altra card occupa lo stesso posto. */
.campagna-strada__valore--prezzo {
font-size: clamp(2rem, 3.6vw, 2.75rem);
}
.campagna-strada__nota {
font-size: 0.875rem;
color: var(--testo-secondario);
}
/* L'azione, una sola: il bottone largo quanto le due card, e sotto una riga
su cosa succede quando il fondo finisce. */
.campagna-azioni {
margin-top: clamp(1.25rem, 2.5vw, 1.5rem);
}
.campagna-azioni .btn {
width: 100%;
}
.campagna-azioni__nota {
margin: 0.875rem 0 0;
font-size: 0.875rem;
line-height: 1.5;
text-align: center;
color: var(--testo-secondario);
}
/* La privacy: una fascia a tutta larghezza sotto alla fotografia. Il
lucchetto in un cerchio teal, il titolo a sinistra, il testo a destra;
sul telefono tutto in colonna. */
.campagna-privacy {
display: grid;
gap: 1rem 1.25rem;
margin-top: clamp(2rem, 4vw, 3rem);
padding: clamp(1.5rem, 3vw, 2.25rem);
border-radius: var(--raggio-grande);
background: var(--superficie-piena);
box-shadow: var(--ombra-superficie);
}
.campagna-privacy__icona {
display: grid;
place-items: center;
width: 3.25rem;
height: 3.25rem;
border-radius: 50%;
background: rgba(0, 157, 169, 0.12);
color: var(--brand-teal-deep);
}
.campagna-privacy__icona .icon {
width: 1.5rem;
height: 1.5rem;
stroke-width: 1.75;
vertical-align: 0;
}
.campagna-privacy__titolo {
margin: 0;
}
.campagna-privacy__testo {
display: grid;
gap: 0.75rem;
}
.campagna-privacy__testo p {
margin: 0;
}
@media (min-width: 900px) {
.campagna-privacy {
grid-template-columns: auto minmax(0, 0.8fr) minmax(0, 1.2fr);
align-items: center;
column-gap: clamp(1.25rem, 3vw, 2.5rem);
}
}
/* --- Le tre cose da sapere, nella fascia di apertura -----------------------
Sotto alla frase del titolo: quando, per chi, cosa. L'icona in un cerchio
di vetro teal (la ricetta del calendario) e il testo accanto; sul computer
tre colonne separate da un filo, sul telefono una sotto l'altra. */
.campagna-fatti {
display: grid;
gap: 0.875rem;
max-width: 54rem;
margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
padding: 0;
list-style: none;
}
.campagna-fatti li {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.35;
color: #fff;
text-wrap: balance;
}
.campagna-fatti__icona {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: rgba(92, 207, 217, 0.16);
border: 1px solid rgba(92, 207, 217, 0.35);
color: var(--brand-teal-light);
}
.campagna-fatti__icona .cc-icon {
width: 1.25rem;
height: 1.25rem;
vertical-align: 0;
}
/* In fila solo finché il messaggio ha tutta la larghezza: da 1024px in su la
fotografia gli sta accanto e alla terza voce, la più lunga, restano meno di
200px — quattro righe dentro a una colonna alta un rigo. Sopra ai 1024 le
tre voci vanno una sotto l'altra, e la colonna del testo torna alta quanto
la fotografia. */
@media (min-width: 700px) and (max-width: 1023.98px) {
.campagna-fatti {
/* Le prime due voci sono corte e stanno su una riga; va a capo solo
la terza, che prende lo spazio che resta. */
grid-template-columns: auto auto minmax(0, 1fr);
gap: 0;
}
.campagna-fatti li {
padding-right: clamp(0.75rem, 2vw, 1.5rem);
}
.campagna-fatti li + li {
padding-left: clamp(0.75rem, 2vw, 1.5rem);
border-left: 1px solid rgba(255, 255, 255, 0.16);
}
}
@media (prefers-reduced-motion: reduce) {
.hero--campagna::before,
.link-pagina__luci::before {
animation: none;
}
.anelli-attesa > span {
animation: none;
opacity: 0.5;
transform: scale(0.64);
}
.anelli-attesa > span:nth-child(2) {
opacity: 0.3;
transform: scale(0.82);
}
.anelli-attesa > span:nth-child(3) {
opacity: 0.16;
transform: scale(1);
}
.punti-cento::before {
transition: none;
}
}
/* ==========================================================================
19quater. PAGINA DEI LINK (bio.html)
==========================================================================
L'indice dei collegamenti da mettere nella biografia dei social: marchio,
nome, e una colonna di bottoni larghi uno sotto l'altro. Non ha né barra né
footer — il menu rifarebbe lo stesso lavoro due volte — quindi è la
sfumatura ConCura a riempire tutta la finestra, non una fascia dentro a una
pagina chiara.
I bottoni sono i `.btn--vetro` del sito, allargati e con l'icona a
sinistra: per questo la pagina ha sotto due luci di marca, come la fascia
delle campagne. Senza, la sfocatura del vetro non avrebbe niente da
sfocare e resterebbero otto veli slavati. */
/* ⚠️ `--sfumatura-scuro` è una terna di componenti (12, 21, 30), non un
colore: va sempre dentro a `rgb()`/`rgba()`. Scritto come colore la
dichiarazione è invalida, il fondo torna al chiaro `--n-50` della regola di
`body` e sotto ai bottoni compare una fascia quasi bianca. */
.page-link {
background-color: rgb(var(--sfumatura-scuro));
}
/* La sfumatura sta sull'elemento, non sul `body`: è alto almeno quanto la
finestra e cresce con i bottoni, quindi l'asse a 69° copre tutto il
documento anche quando la pagina si allunga. Sul `body`, per coprire la
parte oltre la finestra, servirebbe `background-attachment: fixed`, che
però dipinge solo il rettangolo della finestra. */
.link-pagina {
position: relative;
background-image: var(--sfumatura-concura);
isolation: isolate;
display: grid;
place-items: center;
min-height: 100vh;
min-height: 100dvh;
padding: clamp(2.5rem, 7vw, 4.5rem) clamp(1.25rem, 5vw, 2rem);
overflow: hidden;
}
.link-pagina__luci {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.link-pagina__luci::before,
.link-pagina__luci::after {
content: '';
position: absolute;
border-radius: 50%;
}
/* La luce teal respira, come nella fascia delle campagne: è la stessa
animazione, e si ferma con il movimento ridotto (§21). */
.link-pagina__luci::before {
right: -30%;
bottom: -20%;
width: min(52rem, 130vw);
aspect-ratio: 1;
background: radial-gradient(closest-side, rgba(0, 157, 169, 0.5), rgba(0, 157, 169, 0));
animation: campagna-respiro 9s ease-in-out infinite alternate;
}
.link-pagina__luci::after {
left: -35%;
top: -18%;
width: min(40rem, 110vw);
aspect-ratio: 1;
background: radial-gradient(closest-side, rgba(92, 207, 217, 0.18), rgba(92, 207, 217, 0));
}
.link-pagina__contenuto {
position: relative;
z-index: 1;
width: min(100%, 27rem);
}
/* La testa: il marchio bianco con la C teal, il nome in serif e il payoff. */
.link-testa {
display: grid;
justify-items: center;
text-align: center;
margin-bottom: clamp(2rem, 5vw, 2.75rem);
}
.link-testa__marchio {
width: clamp(4.5rem, 16vw, 5.5rem);
height: auto;
}
.link-testa__nome {
margin: clamp(1rem, 2.5vw, 1.25rem) 0 0;
font-size: clamp(2.75rem, 11vw, 3.5rem);
line-height: 1;
color: #fff;
}
.link-testa__payoff {
margin: 0.5rem 0 0;
font-size: 1.0625rem;
color: rgba(255, 255, 255, 0.82);
}
/* I bottoni: una colonna sola, tutti della stessa altezza. L'etichetta sta al
centro fra l'icona e la freccia — due colonne fisse della stessa misura —
così le otto righe hanno lo stesso asse anche quando il testo è corto. */
.link-elenco {
display: grid;
gap: 0.75rem;
margin: 0;
padding: 0;
list-style: none;
}
.link-voce {
display: grid;
grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem;
align-items: center;
gap: 0.875rem;
width: 100%;
padding-inline: clamp(1.125rem, 4vw, 1.5rem);
text-align: center;
}
.link-voce__segno,
.link-voce__vai {
display: grid;
place-items: center;
}
.link-voce__segno svg {
width: 1.375rem;
height: 1.375rem;
}
.link-voce__segno .icon {
stroke-width: 1.6;
vertical-align: 0;
}
.link-voce__vai .icon {
width: 1.125rem;
height: 1.125rem;
stroke-width: 2;
vertical-align: 0;
opacity: 0.55;
}
.link-voce__testo {
min-width: 0;
font-size: clamp(0.9375rem, 3.4vw, 1.0625rem);
text-wrap: balance;
}
.link-piede {
margin: clamp(2rem, 5vw, 2.75rem) 0 0;
font-size: 0.8125rem;
text-align: center;
color: rgba(255, 255, 255, 0.7);
}
/* ==========================================================================
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);
}
}
/* ==========================================================================
20c. BANNER DEI COOKIE (CookieYes)
========================================================================== */
/* Il banner lo costruisce lo script di CookieYes (_layout/tracciamento.html) e
scrive i colori del suo pannello in attributi `style`. Gli `!important` qui
sotto servono solo a battere quelli, e stanno solo sulle proprietà che
CookieYes mette in linea: colore, bordo, fondo. Il resto vince per
specificità: ogni selettore comincia da `html` perché il foglio di stile di
CookieYes arriva dopo il nostro e, a pari specificità, vincerebbe lui.
In basso a destra, sopra al bottone di WhatsApp finché non si sceglie. I due bottoni
hanno lo stesso peso, perché rifiutare deve essere facile come accettare
(linee guida del Garante privacy sui cookie, 2021). */
html .cky-consent-container.cky-box-bottom-left,
html .cky-consent-container.cky-box-bottom-right {
left: auto;
right: 1.25rem;
bottom: 1.25rem;
width: min(26rem, calc(100vw - 2.5rem));
max-width: none;
border-radius: var(--raggio-grande);
}
html .cky-consent-container .cky-consent-bar {
padding: 1.5rem;
border: 0;
border-radius: var(--raggio-grande);
background-color: var(--superficie-piena) !important;
box-shadow: var(--ombra-modale), inset 0 0 0 1px rgba(10, 22, 32, 0.06);
}
/* sul telefono CookieYes sposta il margine dentro alle righe */
html .cky-consent-container .cky-notice .cky-title,
html .cky-consent-container .cky-notice .cky-notice-des,
html .cky-consent-container .cky-notice .cky-notice-btn-wrapper {
padding: 0;
}
html .cky-consent-container .cky-notice .cky-title {
margin: 0 0 0.625rem;
font-family: var(--font-display);
font-weight: 400;
font-size: 1.625rem;
line-height: 1.1;
letter-spacing: -0.01em;
color: var(--testo-titolo) !important;
}
html .cky-consent-container .cky-notice .cky-notice-des {
font-size: 0.9375rem;
line-height: 1.55;
color: var(--testo-corrente) !important;
overflow-y: auto;
}
html .cky-consent-container .cky-notice .cky-notice-des * {
font-size: 0.9375rem;
}
html .cky-consent-container .cky-notice-des .cky-policy,
html .cky-modal .cky-show-desc-btn {
border: 0;
color: var(--accento-testo) !important;
font-weight: 600;
}
html .cky-consent-container .cky-notice .cky-notice-btn-wrapper {
gap: 0.625rem;
margin-top: 1.25rem;
}
html .cky-consent-container .cky-btn,
html .cky-modal .cky-btn {
min-height: 2.75rem;
padding: 0.5rem 1.25rem;
border: 1px solid var(--azione-fondo) !important;
border-radius: var(--raggio-pillola);
background-color: var(--azione-fondo) !important;
color: var(--azione-testo) !important;
font-family: var(--font-testo);
font-size: 0.9375rem;
font-weight: var(--peso-titolo);
line-height: 1.3;
opacity: 1;
transition: background-color var(--transizione), border-color var(--transizione),
box-shadow var(--transizione);
}
html .cky-consent-container .cky-btn:hover,
html .cky-modal .cky-btn:hover {
border-color: var(--azione-fondo-hover) !important;
background-color: var(--azione-fondo-hover) !important;
box-shadow: var(--ombra-foto);
opacity: 1;
}
html .cky-consent-container button:focus-visible,
html .cky-modal button:focus-visible,
html .cky-modal input:focus-visible {
outline: 2px solid var(--n-900);
outline-offset: 2px;
}
@media (max-width: 576px) {
html .cky-consent-container.cky-box-bottom-left,
html .cky-consent-container.cky-box-bottom-right {
right: 0.75rem;
bottom: 0.75rem;
width: calc(100vw - 1.5rem);
}
html .cky-consent-container .cky-consent-bar {
padding: 1.25rem;
}
}
/* Le preferenze, che si aprono dal link «Preferenze cookie» del footer. */
html .cky-modal,
html .cky-modal .cky-preference-center {
border-radius: var(--raggio-grande);
}
html .cky-modal {
box-shadow: var(--ombra-modale);
}
html .cky-modal .cky-preference-center {
border-color: var(--filo) !important;
color: var(--testo-corrente) !important;
}
html .cky-modal .cky-preference-header .cky-preference-title {
font-family: var(--font-display);
font-weight: 400;
font-size: 1.75rem;
line-height: 1.1;
color: var(--testo-titolo) !important;
}
html .cky-modal .cky-accordion-header .cky-accordion-btn {
font-weight: var(--peso-titolo);
color: var(--testo-titolo) !important;
}
html .cky-modal .cky-accordion-header .cky-always-active {
color: var(--accento-testo);
}
html .cky-modal .cky-switch input[type='checkbox']:checked {
background: var(--brand-teal-deep);
}
/* ==========================================================================
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;
}
}