/* Medyca — il sistema di stile del sito (13.10.2026) Il foglio comune: lo caricano tutte le pagine. Struttura e testi stanno nei componenti e nei file di testi; qui l'aspetto. Numeri dalla ricerca su Refero: Lovi per densità e ritmo, Flo per il testo lungo, Hers /menopause per la pagina di servizio, Hers «what's next» per i passi. Telefono per primo: da 52em (832px) e da 64em (1024px) le misure salgono. Misure in rem: se chi legge ingrandisce il testo del browser, la pagina lo segue. */ /* ---------- 1. Variabili ---------- */ :root { /* colori: solo questi. Il rosso è il bottone e un ACCENTO (barretta, bordo, numero di un passo, virgolette delle recensioni), ed è il colore della parola «Menopausa» nella tagline del logo; nessun sottotitolo, link o etichetta in rosso */ --navy: #224A88; --navy-scuro: #16325E; /* il navy al passaggio del mouse (l'etichetta del passo negli articoli) */ --rosso: #DA273C; --rosso-scuro: #B91C31; --cielo: #EAF2FB; --bianco: #fff; --filo: rgba(34, 74, 136, .2); /* i filetti sottili che separano righe e blocchi */ --filo-su-navy: rgba(255, 255, 255, .35); --font: "Montserrat", Arial, sans-serif; --peso-testo: 500; /* il peso di corpo, attacco e piccolo */ /* telefono (fino a 51.99em) */ --corpo: 1rem; --corpo-lh: 1.7; --piccolo: .875rem; --piccolo-lh: 1.5; --attacco: 1.125rem; --attacco-lh: 1.6; --h1-grande: 2.25rem; --h1-seguito: 1.125rem; --h2: 1.375rem; --h2-lh: 1.3; --h3: 1.125rem; --sezione: 4.5rem; /* spazio sopra e sotto ogni sezione */ --margine: 1.5rem; /* margine laterale */ --scheda: 1.5rem; /* padding dentro una card */ --titolo-testo: .75rem; /* fra un titolo e il suo testo */ --colonna: 40rem; /* larghezza massima del testo (da 52em; sul telefono è tutta la colonna) */ --contenitore: 75rem; /* 1200px */ --raggio: 8px; /* etichette, campi */ --raggio-grande: 24px; /* card, foto */ } @media (min-width: 52em) { :root { --corpo: 1.0625rem; --attacco: 1.1875rem; --h1-grande: 2.75rem; --h1-seguito: 1.25rem; --h2: 1.75rem; --h3: 1.1875rem; --sezione: 5.5rem; --margine: 2rem; --scheda: 1.75rem; } } @media (min-width: 64em) { :root { --corpo: 1.125rem; --corpo-lh: 1.65; --attacco: 1.25rem; --attacco-lh: 1.55; --h1-grande: 3.25rem; --h1-seguito: 1.375rem; --h2: 2rem; --h2-lh: 1.25; --h3: 1.25rem; --sezione: 6rem; --scheda: 2rem; --titolo-testo: 1rem; } } /* ---------- 2. Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bianco); color: var(--navy); font-family: var(--font); font-size: var(--corpo); line-height: var(--corpo-lh); font-weight: var(--peso-testo); -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; } ul, ol { padding: 0; list-style: none; } img, svg { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; } p { text-wrap: pretty; } h1, h2, h3 { text-wrap: balance; } strong, b { font-weight: 700; } em { font-style: italic; } p a, li a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .22em; } p a:hover { text-decoration-thickness: 2.5px; } /* il fuoco da tastiera si vede sempre: contorno navy da 3px (bianco sul navy) */ :focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 4px; } .su-navy :focus-visible { outline-color: #fff; } .solo-lettori { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .salta { position: absolute; left: 8px; top: -80px; z-index: 50; padding: 12px 20px; background: var(--navy); color: #fff; border-radius: 999px; font-weight: 700; } .salta:focus { top: 8px; } /* le icone a tratto dello sprite: tratto 1,8px, estremità arrotondate */ .icona { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; } .icona-piena { fill: currentColor; stroke: none; } /* ---------- 3. Pagina: contenitore e sezioni ---------- */ .contenitore { width: 100%; max-width: calc(var(--contenitore) + 2 * var(--margine)); margin-inline: auto; padding-inline: var(--margine); } .sezione { padding-block: var(--sezione); } .sezione--cielo { background: var(--cielo); } .sezione--segue { padding-top: 0; } /* due sezioni bianche di fila: lo spazio è uno solo, non due */ .colonna { max-width: var(--colonna); } /* il testo non è mai più largo di 40rem */ .piccolo { font-size: var(--piccolo); line-height: var(--piccolo-lh); font-weight: var(--peso-testo); } .attacco { font-size: var(--attacco); line-height: var(--attacco-lh); font-weight: var(--peso-testo); } /* il testo corre in colonna: una riga vuota (1,25em) fra un capoverso e l'altro, i grassetti restano a 700 */ .flusso > * + * { margin-top: 1.25em; } .flusso > .attacco + *, .flusso > * + .attacco { margin-top: 1.25em; } /* ---------- 4. Titoli ---------- */ /* titolo della pagina su due livelli: la parte grande e il seguito, in un solo h1 */ .h1 { font-size: 1rem; line-height: 1; } .h1-grande { display: block; font-size: var(--h1-grande); line-height: 1.1; font-weight: 700; letter-spacing: -.01em; } .h1-seguito { display: block; margin-top: 1rem; font-size: var(--h1-seguito); line-height: 1.45; font-weight: 500; } @media (min-width: 52em) { .h1-seguito { margin-top: 1.25rem; } } /* titolo di sezione: barretta rossa 40×4 sopra, 12px di stacco */ .h2 { font-size: var(--h2); line-height: var(--h2-lh); font-weight: 700; } .h2::before { content: ""; display: block; width: 40px; height: 4px; margin-bottom: 12px; border-radius: 2px; background: var(--rosso); } .h2 strong { font-weight: 800; } .h3 { font-size: var(--h3); line-height: 1.35; font-weight: 700; } .h2 + *, .h3 + * { margin-top: var(--titolo-testo); } .h2 + .attacco, .h2 + p { margin-top: 1rem; } /* ---------- 5. Barra rossa in cima e testata ---------- */ .annuncio { position: relative; background: var(--rosso); color: #fff; } .annuncio a { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 52px 8px 16px; color: #fff; font-size: var(--piccolo); line-height: 1.35; font-weight: 600; text-align: center; text-decoration: none; text-wrap: balance; } .annuncio a:hover { text-decoration: underline; } /* La fascia rossa sta su 2 righe (deciso il 30.10.2026). Su telefono il testo intero ci sta solo a 9px (a 14px, il minimo del sito, sono 4 righe): lì va la versione corta, con le stesse parole accorciate; da 37,5em il testo intero sta già su 2 righe */ .annuncio-corto { display: none; } @media (max-width: 37.49em) { .annuncio-lungo { display: none; } .annuncio-corto { display: inline; } } .annuncio-chiudi { position: absolute; top: 0; right: 0; width: 48px; height: 100%; min-height: 48px; display: grid; place-items: center; border: 0; background: none; color: #fff; cursor: pointer; } .annuncio-chiudi .icona { width: 18px; height: 18px; stroke-width: 2.2; } .annuncio :focus-visible { outline-color: #fff; } .testata { position: relative; z-index: 20; background: var(--bianco); border-bottom: 1px solid var(--filo); } .testata-riga { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; } .logo { display: inline-flex; align-items: center; min-height: 48px; } .logo img { height: 28px; width: auto; } @media (min-width: 52em) { .logo img { height: 31px; } .testata-riga { min-height: 88px; } } /* telefono: «Menu» apre l'elenco delle voci */ .menu > summary { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 6px 0 14px; border-radius: 999px; font-size: 1rem; font-weight: 700; list-style: none; cursor: pointer; } .menu > summary::-webkit-details-marker { display: none; } /* «Menu» e «Chiudi» stanno nello stesso posto, una sopra l'altra, appoggiate a destra vicino all'icona: la scritta più larga («Chiudi») decide la larghezza del bottone sempre, così la bandiera della lingua che gli sta accanto non si sposta quando il menu si apre e si chiude (prima la scritta cambiava la larghezza di 7px) */ .menu > summary > span { display: inline-grid; justify-items: end; } .menu-parola { grid-area: 1 / 1; } .menu .icona-chiudi { display: none; } .menu[open] .icona-apri { display: none; } .menu[open] .icona-chiudi { display: block; } .menu-pannello { position: absolute; left: 0; right: 0; top: 100%; background: var(--bianco); border-bottom: 1px solid var(--filo); padding: 0 var(--margine) 32px; } .menu-pannello > a:not(.bottone), .menu-gruppo > summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 1px solid var(--filo); font-weight: 600; text-decoration: none; list-style: none; cursor: pointer; } .menu-gruppo > summary::-webkit-details-marker { display: none; } .menu-gruppo > summary .icona { transition: transform .2s; } .menu-gruppo[open] > summary .icona { transform: rotate(180deg); } .menu-gruppo > a { display: flex; align-items: center; min-height: 52px; padding-left: 20px; border-bottom: 1px solid var(--filo); font-weight: 500; text-decoration: none; } .menu-pannello .bottone { margin-top: 24px; } .social { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; } .social a { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--navy); color: #fff; } .social .icona { width: 22px; height: 22px; } .nav-desktop { display: none; } @media (min-width: 64em) { .menu { display: none; } .nav-desktop { display: flex; align-items: center; gap: 4px; } /* :not(.bottone): il bottone rosso della testata è anche lui un link dentro .nav-desktop, e al passaggio del mouse prendeva il fondo azzurro delle voci (testo bianco su azzurro: non si leggeva); :not(.lingua): il selettore della lingua, quando è un link (pagine in inglese), è un tondo con la bandiera, non una voce (blocco «lingua» in fondo) */ .nav-desktop > a:not(.bottone, .lingua), .nav-gruppo > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 14px; border-radius: 999px; font-weight: 600; font-size: 1rem; text-decoration: none; list-style: none; cursor: pointer; } .nav-gruppo > summary::-webkit-details-marker { display: none; } .nav-gruppo > summary .icona { width: 16px; height: 16px; } .nav-desktop > a:not(.bottone, .lingua):hover, .nav-gruppo > summary:hover { background: var(--cielo); } .nav-gruppo { position: relative; } /* la tendina è larga quanto la sua voce più larga (width: max-content: nessuna voce va a capo, qualunque sia il testo), mai meno di 12rem e mai più dello schermo; le voci sono pillole dentro la scheda, come quelle della barra: il fondo azzurro al passaggio del mouse resta dentro gli angoli tondi (prima, a tutta larghezza, ne sporgeva) */ .nav-sotto { position: absolute; left: 0; top: 100%; z-index: 30; width: max-content; min-width: 12rem; max-width: calc(100vw - 2 * var(--margine)); padding: 8px; background: var(--bianco); border: 1px solid var(--filo); border-radius: 16px; } .nav-sotto a { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 999px; font-weight: 500; text-decoration: none; } .nav-sotto a:hover { background: var(--cielo); } .nav-desktop .bottone { margin-left: 12px; min-height: 48px; padding: 8px 24px; font-size: 1rem; } } /* ---------- 6. Bottoni ---------- */ /* pillola rossa alta 56px, etichetta bianca 700 a 17px; su telefono larga quanto la colonna quando è l'invito del blocco */ .bottone { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 14px 28px; border: 0; border-radius: 999px; background: var(--rosso); color: #fff; box-shadow: 0 4px 14px rgba(218, 39, 60, .25); font: 700 1.0625rem/1.3 var(--font); text-align: center; text-decoration: none; text-wrap: balance; cursor: pointer; } .bottone:hover { background: var(--rosso-scuro); } .bottone--pieno { display: flex; width: 100%; } @media (min-width: 52em) { .bottone--pieno { display: inline-flex; width: auto; min-width: 22rem; } } /* le parole sono scritte in minuscolo: la prima lettera diventa maiuscola solo a video */ .bottone .et::first-letter { text-transform: uppercase; } /* secondario: pillola bianca con bordo navy da 1,5px */ .bottone--secondario { background: #fff; color: var(--navy); border: 1.5px solid var(--navy); box-shadow: none; padding-block: 12.5px; } .bottone--secondario:hover { background: var(--navy); color: #fff; } /* l'invito dell'apertura: la freccia in un tondino a destra */ .bottone--freccia { justify-content: space-between; padding: 10px 10px 10px 28px; text-align: left; } .bottone--freccia .freccia { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .22); } .bottone--freccia .freccia .icona { width: 20px; height: 20px; stroke-width: 2.2; } /* sul blu il bottone è bianco col testo navy: la regola di marca vieta il rosso sul blu (regola di marca del 26.09.2026, ribadita il 01.11.2026) */ .su-navy .bottone { background: #fff; color: var(--navy); border: 2px solid #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); } .su-navy .bottone:hover { background: var(--navy); color: #fff; } .su-navy .bottone--freccia { padding: 8px 8px 8px 26px; } .su-navy .bottone--freccia:not(.bottone--secondario):not(:hover) .freccia { background: rgba(34, 74, 136, .12); } /* la riga piccola attaccata sotto il bottone */ .nota-bottone { margin-top: 12px; font-size: var(--piccolo); line-height: var(--piccolo-lh); font-weight: var(--peso-testo); text-align: center; } .nota-bottone strong { font-weight: 700; } /* ---------- 7. Foto ---------- */ .foto { border-radius: var(--raggio-grande); overflow: hidden; background: var(--cielo); } .foto img { width: 100%; height: 100%; object-fit: cover; } .foto--ritratto { aspect-ratio: 4 / 5; } .foto--ritratto img { object-position: 50% 62%; } /* il ritratto tondo con l'anello (bianco sul navy) */ .tondo { flex: none; width: 120px; height: 120px; border-radius: 50%; border: 4px solid #fff; overflow: hidden; background: var(--cielo); } .tondo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; } /* ---------- 8. Aperture della home ---------- */ .apertura { position: relative; } .apertura-testo > * + * { margin-top: 1.25em; } .apertura-testo > .attacco { margin-top: 0; } .apertura-testo .bottone { margin-top: 1.5rem; } .riga-corsivo { font-size: var(--corpo); line-height: 1.6; font-style: italic; font-weight: 600; } .apertura-testo .nota-bottone { margin-top: 12px; } /* A «Ritratto»: bianco; titolo, foto grande, sottotitolo, capoversi, bottone */ .apertura--a { padding-block: 2.5rem var(--sezione); } .apertura--a .foto { margin-top: 1.5rem; } .apertura--a .apertura-testo { margin-top: 2rem; } /* B «Navy pieno»: navy da bordo a bordo con la croce del logo al 6% tagliata dal bordo; si chiude dopo il sottotitolo */ .apertura--b { background: var(--navy); color: #fff; overflow: hidden; padding-block: 2.5rem 3rem; } .apertura--b::after { content: ""; position: absolute; right: -34%; top: -6%; width: 96%; aspect-ratio: 1; pointer-events: none; background: url("/loghi/medyca-croce-filigrana-bianca.svg") no-repeat center / contain; opacity: .06; } .apertura--b .contenitore { position: relative; z-index: 1; } .apertura--b .tondo { margin-top: 2rem; } .apertura--b .attacco { margin-top: 1.5rem; } .apertura--b-sotto { padding-top: var(--sezione); } /* C «Vuoto»: bianco, quasi niente nella prima schermata; la foto comincia in fondo */ .apertura--c { padding-block: 3.5rem var(--sezione); } .apertura--c .apertura-alto { min-height: calc(100svh - 17rem); } .apertura--c .apertura-testo { margin-top: 2rem; } /* da tablet: la foto non riempie più tutta la colonna */ @media (min-width: 52em) { .apertura--a .foto, .apertura--c .foto { max-width: 28rem; } .apertura-testo { max-width: var(--colonna); } .apertura--c .apertura-alto { min-height: calc(100svh - 20rem); } } /* desktop: apertura a due colonne (foto a sinistra, testo a destra); l'ordine nel codice non cambia */ @media (min-width: 64em) { .apertura--a .apertura-griglia, .apertura--c .apertura-griglia { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 5rem; grid-template-areas: "foto titolo" "foto testo"; grid-template-rows: auto 1fr; align-items: start; } .apertura--a .h1, .apertura--c .h1 { grid-area: titolo; } .apertura--a .foto, .apertura--c .foto { grid-area: foto; max-width: none; margin-top: 0; } .apertura--a .apertura-testo, .apertura--c .apertura-testo { grid-area: testo; margin-top: 2rem; } .apertura--a .attacco { margin-top: 0; } .apertura--c { padding-block: 5rem var(--sezione); } .apertura--c .apertura-alto { min-height: 0; } .apertura--c .apertura-griglia { min-height: calc(100svh - 14rem); } .apertura--b .apertura-griglia { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 5rem; grid-template-areas: "titolo foto" "testo foto"; align-items: center; } .apertura--b .h1 { grid-area: titolo; } .apertura--b .tondo { grid-area: foto; justify-self: center; width: 280px; height: 280px; margin-top: 0; border-width: 6px; } .apertura--b .attacco { grid-area: testo; max-width: 36rem; } .apertura--b::after { right: -8%; width: 52%; top: -30%; } .apertura--b { padding-block: 4.5rem 5rem; } } /* ---------- 9. Fasce con titolo e corpo (due colonne da 64em) ---------- */ .coppia-corpo > * + * { margin-top: 1.25em; } .coppia-titolo + .coppia-corpo { margin-top: 1.5rem; } .coppia-titolo .seguito { margin-top: 1.25em; } @media (min-width: 64em) { .coppia-titolo + .coppia-corpo { margin-top: 0; } .coppia { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 4rem; align-items: start; } .coppia-titolo { position: sticky; top: 2rem; } .coppia-corpo { max-width: var(--colonna); } } .coppia-titolo > .h2 + * { margin-top: 1rem; } /* su telefono titolo e testo sono uno sotto l'altro: il testo non sta attaccato al titolo */ @media (max-width: 63.99em) { .coppia-corpo { margin-top: 1.25rem; max-width: var(--colonna); } } /* anche su tablet il testo non supera 40rem */ /* ---------- 10. Citazioni delle pazienti: 18px, barretta rossa a sinistra, nome sotto in piccolo ---------- */ .citazione { padding-left: 1.25rem; border-left: 4px solid var(--rosso); } .citazione p { font-size: 1.125rem; line-height: 1.6; font-weight: var(--peso-testo); } .citazione footer { margin-top: .75rem; font-size: var(--piccolo); line-height: var(--piccolo-lh); font-weight: var(--peso-testo); } @media (min-width: 64em) { .citazione p { font-size: 1.1875rem; } } /* ---------- 11. Fisarmoniche: righe con filetto sopra e sotto, «+» in un cerchio da 32px, tutta la riga si tocca ---------- */ .fisarmonica { border-top: 1px solid var(--filo); } .riga { border-bottom: 1px solid var(--filo); } .riga > summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 0; list-style: none; cursor: pointer; font-size: 1.0625rem; line-height: 1.4; font-weight: 700; } .riga > summary::-webkit-details-marker { display: none; } .riga > summary > span:first-child { align-self: center; padding-block: 2px; } .piu { position: relative; flex: none; align-self: center; width: 32px; height: 32px; border: 1.5px solid var(--navy); border-radius: 50%; } .piu::before, .piu::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--navy); border-radius: 1px; transform: translate(-50%, -50%); } .piu::before { width: 12px; height: 2px; } .piu::after { width: 2px; height: 12px; } .riga[open] > summary .piu::after { opacity: 0; } .riga-testo { padding: 2px 0 28px; } .riga-testo > * + * { margin-top: 1.25em; } @media (min-width: 64em) { .riga > summary { font-size: 1.1875rem; } } /* i sei passi del percorso: numero rosso in un cerchio da 36px su un filo verticale sottile. Il numero è disegnato dal CSS (counter): nessun testo in più. */ .passi { counter-reset: passo; } .passi .riga { position: relative; counter-increment: passo; border: 0; } .passi .riga::before { content: ""; position: absolute; left: 3.25rem; right: 0; top: 0; height: 1px; background: var(--filo); } /* il filetto parte dopo il numero */ .passi::after { content: ""; display: block; height: 1px; margin-left: 3.25rem; background: var(--filo); } .passi .riga:not(:last-child)::after { content: ""; position: absolute; left: 17.25px; top: 46px; bottom: -10px; width: 1.5px; background: var(--filo); } /* il filo: dal cerchio al cerchio dopo */ .passi .riga > summary { align-items: flex-start; padding: 16px 0 16px 3.25rem; } .passi .riga > summary > span:first-child { align-self: flex-start; padding-block: 0; } .passi .piu { align-self: flex-start; margin-top: -4px; } .passi .riga > summary::before { content: counter(passo); position: absolute; left: 0; top: 10px; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bianco); border: 1.5px solid var(--rosso); color: var(--rosso); font-size: 1rem; line-height: 1; font-weight: 700; } .passi .riga-testo { padding-left: 3.25rem; } /* ---------- 12. Recensioni: il voto di Google, le schede e le frecce (le recensioni stanno in src/content/recensioni/) ---------- */ .rec-testata { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 1.5rem; } .rec-google { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.0625rem; } .rec-google svg { width: 28px; height: 28px; } .rec-voto { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; } .rec-voto strong { font-size: 2rem; line-height: 1; font-weight: 800; } .rec-voto .conteggio { font-size: 1rem; } .stelle { display: inline-flex; gap: 2px; color: var(--navy); } .stelle .icona { width: 20px; height: 20px; } .rec-testata .bottone { margin-top: 8px; width: 100%; } .rec-card { margin-top: 1.5rem; padding: var(--scheda); border-radius: var(--raggio-grande); background: var(--cielo); } .sezione--cielo .rec-card { background: var(--bianco); } .rec-autore { display: flex; align-items: center; gap: 14px; } .avatar { position: relative; flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 700; font-size: 1.25rem; } .avatar .g { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; padding: 2px; border-radius: 50%; background: #fff; } .rec-nome { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 1.0625rem; line-height: 1.3; } .rec-nome .icona { width: 18px; height: 18px; stroke-width: 2.4; } .rec-quando { font-size: var(--piccolo); line-height: 1.3; } .rec-card .stelle { margin-top: 1rem; } .rec-card p { margin-top: .75rem; } .rec-puntini { display: flex; justify-content: center; gap: 8px; margin-top: 1.25rem; } .rec-puntini span { width: 8px; height: 8px; border-radius: 50%; background: rgba(34, 74, 136, .25); } .rec-puntini span.attivo { background: var(--navy); } .rec-puntini span[hidden] { display: none; } .rec-titolo { margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.4; font-weight: 700; } .rec-lista { display: grid; gap: 1rem; margin-top: 1.5rem; } .rec-lista .rec-card { margin-top: 0; } @media (min-width: 52em) { .rec-testata { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 16px 32px; } .rec-testata .bottone { width: auto; margin-top: 0; } .rec-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- 13. Video e feed Instagram: miniature in griglia, triangolo «play» in un cerchio bianco ---------- */ .miniature { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .mini { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--raggio-grande); overflow: hidden; background: var(--cielo); } /* tutte le miniature hanno lo stesso taglio, video o post che siano: una più bassa delle altre sembrava un errore */ .mini img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; } .play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--navy); transform: translate(-50%, -50%); } .play .icona { width: 24px; height: 24px; margin-left: 2px; } .miniature + .social, .social--centro { justify-content: center; } .miniature + .social { margin-top: 2rem; } @media (min-width: 52em) { .miniature { gap: 24px; } } /* a desktop le miniature stanno su una riga sola: quattro in home, sei in /menopausa (tre per riga erano enormi) */ @media (min-width: 64em) { .miniature { grid-template-columns: repeat(4, minmax(0, 1fr)); } .miniature--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; } .miniature--6 .play { width: 44px; height: 44px; } } /* ---------- 14. I due servizi: card con foto, titolo, testo, bottone ---------- */ .servizi { display: grid; gap: 1.5rem; margin-top: 2rem; } .servizio { display: flex; flex-direction: column; border-radius: var(--raggio-grande); background: var(--bianco); overflow: hidden; } .servizio-foto { position: relative; aspect-ratio: 3 / 2; } .servizio-foto .grande { width: 100%; height: 100%; object-fit: cover; } .servizio-foto .piccola { position: absolute; left: var(--scheda); bottom: -2.5rem; width: 96px; height: 96px; border-radius: 50%; border: 4px solid #fff; object-fit: cover; background: var(--cielo); } .servizio-corpo { display: flex; flex-direction: column; flex: 1; padding: 3.75rem var(--scheda) var(--scheda); } .servizio-corpo p { margin-top: .75rem; } .servizio-corpo .bottone { margin-top: 1.5rem; margin-top: auto; } .servizio-corpo p + .bottone { margin-top: 1.5rem; } @media (min-width: 52em) { .servizi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } .servizio-corpo .bottone { align-self: flex-start; } } /* ---------- 15. Modulo: etichetta sempre visibile sopra il campo, campi alti 56px ---------- */ .modulo { display: grid; gap: 1.25rem; } .modulo fieldset { margin: 0; padding: 0; border: 0; min-width: 0; } .modulo legend { padding: 0; font-size: var(--piccolo); font-weight: 700; margin-bottom: .5rem; } /* la riga di spiegazione sotto il titoletto di un gruppo nome e cognome (campo `nome_cognome` con `aiuto`, comuni/Modulo): in piccolo, staccata dai campi */ .modulo .rd-aiuto { margin: 0 0 1rem; font-size: var(--piccolo); line-height: var(--piccolo-lh); font-weight: var(--peso-testo); } .campo { display: grid; gap: .5rem; } .campo label { font-size: var(--piccolo); line-height: 1.3; font-weight: 700; } .campo label span { font-weight: var(--peso-testo); } .campo input, .campo select, .campo textarea { width: 100%; min-height: 56px; padding: 0 1rem; border: 1.5px solid var(--navy); border-radius: var(--raggio); background: #fff; color: var(--navy); font: var(--peso-testo) 1rem/1.4 var(--font); } .campo textarea { min-height: 9rem; padding: 1rem; resize: vertical; } .campo ::placeholder { color: rgba(34, 74, 136, .75); opacity: 1; } .campo select { appearance: none; padding-right: 3rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23224A88' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1rem center / 20px; } .campo-coppia { display: grid; gap: 1.25rem; } .campo-coppia--telefono { grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1rem; } .modulo .bottone { margin-top: .5rem; } @media (min-width: 52em) { .campo-coppia { grid-template-columns: repeat(2, minmax(0, 1fr)); } .campo-coppia--telefono { grid-template-columns: 1fr 2fr; } } /* ---------- 16. Piede: vedi «Il piede» in fondo al foglio ---------- */ /* ---------- 17. /menopausa ---------- */ /* apertura «Navy pieno»: titolo, sottotitolo, bottone e riga stanno sul navy; la foto, le stelle e la citazione sotto, su bianco */ .menopausa-apertura { position: relative; background: var(--navy); color: #fff; overflow: hidden; padding-block: 2.5rem 3rem; } .menopausa-apertura::after { content: ""; position: absolute; right: -34%; top: -6%; width: 96%; aspect-ratio: 1; pointer-events: none; background: url("/loghi/medyca-croce-filigrana-bianca.svg") no-repeat center / contain; opacity: .06; } .menopausa-apertura .contenitore { position: relative; z-index: 1; } .menopausa-apertura .attacco { margin-top: 1.5rem; } .menopausa-apertura .bottone { margin-top: 2rem; } .menopausa-apertura .nota-bottone { margin-top: 1rem; font-style: italic; } .menopausa-apertura .apertura-testo .nota-bottone { margin-top: 12px; } @media (min-width: 52em) { .menopausa-apertura .nota-bottone { text-align: left; } } /* con ?hero=a l'apertura è quella bianca col ritratto: stessa pagina, una classe sul body */ .hero-a .menopausa-apertura { background: none; color: var(--navy); padding-block: 2.5rem 0; } .hero-a .menopausa-apertura::after { display: none; } .hero-a .menopausa-apertura .bottone { border: 0; box-shadow: 0 4px 14px rgba(218, 39, 60, .25); } .hero-a .menopausa-apertura .freccia { display: none; } .hero-a .menopausa-apertura .bottone--freccia { justify-content: center; padding: 14px 28px; } .hero-a .menopausa-apertura :focus-visible { outline-color: var(--navy); } .menopausa-prova .foto { aspect-ratio: 4 / 3; } .menopausa-prova .foto img { object-position: 50% 40%; } .hero-a .menopausa-prova .foto { aspect-ratio: 4 / 5; } .hero-a .menopausa-prova .foto img { object-position: 52% 45%; } .prova-voto { margin-top: 1.5rem; font-size: var(--h3); line-height: 1.35; font-weight: 700; } .prova-citazione { margin-top: 1.5rem; } @media (min-width: 52em) { .menopausa-prova .foto { max-width: 36rem; } .menopausa-apertura .apertura-colonna { max-width: var(--colonna); } } @media (min-width: 64em) { .menopausa-apertura { padding-block: 4.5rem 5rem; } .menopausa-apertura::after { right: -8%; width: 52%; top: -30%; } .menopausa-apertura .bottone { align-self: flex-start; } .menopausa-prova-griglia { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: 5rem; align-items: center; } .menopausa-prova .foto { max-width: none; } .prova-voto { margin-top: 0; } } /* la parte lunga: aperta, respira con misure, stacchi e filetti, senza box */ .lungo > .h2 + p { margin-top: 1.5rem; } .lungo .h3 { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--filo); } .lungo .h3 + p { margin-top: 1rem; } .lungo .citazione { margin-top: 3rem; padding-top: 0; } .lungo-invito { display: grid; gap: 1rem; margin-top: 2.5rem; } .lungo-invito .bottone { width: 100%; } @media (min-width: 52em) { .lungo-invito { display: flex; flex-wrap: wrap; } .lungo-invito .bottone { width: auto; } } /* l'invito prima del bottone: «Hai ancora dubbi…» e «Vuoi capire…» */ .invito { margin-top: 2.5rem; } .invito-titolo { font-size: var(--attacco); line-height: var(--attacco-lh); font-style: italic; font-weight: 700; } .invito-testo { margin-top: .5rem; font-size: var(--corpo); line-height: 1.6; font-style: italic; font-weight: var(--peso-testo); } .invito .bottone { margin-top: 1.5rem; } /* nelle fasce azzurre il filetto dell'ultima riga e dei blocchi resta quello navy al 20% */ .blocco-feed { margin-top: 2rem; } .blocco-feed--sezione { margin-top: 3.5rem; } /* ---------- Desktop: quello che a telefono è una colonna qui usa la larghezza ---------- */ /* l'invito (riga in corsivo, bottone, nota) è un blocco solo; da tablet la nota sta sotto il bottone, a sinistra come lui */ @media (min-width: 52em) { .invito .nota-bottone { text-align: left; } } @media (min-width: 64em) { /* home: i tre capoversi a sinistra, l'invito a destra in una scheda azzurra; la colonna di destra non resta vuota */ .apertura--b-sotto .apertura-testo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 5rem; align-items: center; max-width: none; } .apertura--b-sotto .apertura-testo > p { grid-column: 1; } .apertura--b-sotto .invito { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; padding: 2.5rem; border-radius: var(--raggio-grande); background: var(--cielo); } .apertura--b-sotto .invito .bottone { display: flex; width: 100%; min-width: 0; } .apertura--b-sotto .invito .nota-bottone { text-align: center; } /* recensioni: titolo, voto e bottone a sinistra, la recensione a destra */ .recensioni.colonna { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 5rem; align-items: center; max-width: none; } .rec-capo .rec-testata { flex-direction: column; align-items: flex-start; } .rec-corpo .rec-card { margin-top: 0; } } /* ---------- Apertura B a desktop: più presenza ---------- */ /* La foto, grande, in una cornice che esce dalla fascia navy e si appoggia sulla sezione bianca; il titolo più grande con la barretta rossa; la croce più grande dietro la foto (deciso il 13.10.2026). */ @media (min-width: 64em) { .apertura--b { overflow: visible; padding-block: 4.5rem 0; } /* la croce resta dentro la fascia: è lo sfondo di un livello grande quanto la fascia, non un pezzo che sborda */ .apertura--b::after { inset: 0; right: 0; top: 0; width: auto; aspect-ratio: auto; background-position: right -6rem top -8rem; background-size: 46rem auto; } .apertura--b .apertura-griglia { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 4rem; grid-template-areas: "titolo foto" "testo foto"; grid-template-rows: auto 1fr; align-items: start; } .apertura--b .h1::before { content: ""; display: block; width: 3.5rem; height: 5px; margin-bottom: 1.75rem; border-radius: 3px; background: var(--rosso); } .apertura--b .attacco { margin-top: 2rem; padding-bottom: 6.5rem; max-width: 34rem; font-size: 1.25rem; } .apertura--b .tondo { /* la foto è appoggiata in basso: ingrandirla la fa crescere verso l'alto, il bordo basso resta dov'è */ justify-self: end; align-self: end; width: 24rem; height: 30rem; margin: 0 0 -3.5rem; border: 6px solid #fff; border-radius: var(--raggio-box, 40px); box-shadow: 0 28px 60px rgba(8, 20, 44, .32); } .apertura--b .tondo img { object-position: 50% 20%; } .apertura--b-sotto { padding-top: calc(var(--sezione) + 2rem); } } /* ---------- Menu su telefono: tutto lo schermo sotto la testata ---------- */ /* Il menu si apre a partire da dov'è la testata: se c'è la fascia rossa, resta dov'è (deciso il 13.10.2026). Aperto, il pannello riempie lo schermo dal bordo basso della testata in giù (--menu-cima: lo misura lo script, perché la fascia rossa può esserci o no); fascia rossa, logo e bottone restano dove sono. La pagina sotto non scorre. Voci grandi, una per riga; il bottone rosso in fondo, largo quanto la colonna. Il ritmo verticale (deciso il 18.10.2026): ogni voce è alta 4rem con la scritta al centro, quindi sta a 25px dal filetto sopra e a 24 da quello sotto; «Home» comincia subito sotto il filetto della testata (prima il pannello aveva 8px di padding sopra e un secondo filetto, che le davano 33px sopra contro i 25 delle altre). Sotto l'ultima voce i social a --margine (24px), e fra i social e il bottone sempre almeno --margine, anche in uno schermo basso dove il bottone, che sta in fondo (margin-top: auto), non ha spazio libero e finiva attaccato alle icone. A bordo pagina e in fondo --margine come ai lati. */ @media (max-width: 73.99em) { body:has(.menu[open]) { overflow: hidden; } /* il pannello è fisso, ma resta nel livello della testata (z-index 20): col menu aperto la testata sale sopra tutto ciò che è appiccicato alla pagina, come la barra «In questo articolo» degli articoli (z-index 20, che veniva dopo e ci passava sopra: visto il 18.10.2026 saltando a un'àncora a menu aperto) e il bottone fisso di prenotazione */ body:has(.menu[open]) .testata { z-index: 70; } .menu[open] .menu-pannello { position: fixed; inset: var(--menu-cima, 7.875rem) 0 0 0; z-index: 60; display: flex; flex-direction: column; padding: 0 var(--margine) calc(var(--margine) + env(safe-area-inset-bottom)); border: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--bianco); } .menu[open] .menu-pannello > a:not(.bottone), .menu[open] .menu-gruppo > summary { min-height: 4rem; font-size: 1.25rem; font-weight: 700; } .menu[open] .menu-gruppo > a { min-height: 3.25rem; font-size: 1.0625rem; } .menu[open] .menu-pannello .social { flex: none; margin: var(--margine) 0; } /* il bottone è quello pieno del sito (56px, 17px, 700, scritta al centro: nel pannello un `.menu-pannello > a` gli dava justify-content: space-between, e con lo schermo più largo di 390px la scritta restava a sinistra). Con 28px di padding la scritta a 700 (291px) va a capo a 390px, lo schermo più comune: qui 20px, come la pillola fissa (.invito-fisso) */ .menu[open] .menu-pannello .bottone { margin-top: auto; flex: none; padding-inline: 1.25rem; } } /* la scritta che non serve resta al suo posto ma non si vede (vedi .menu > summary > span: le due stanno nella stessa cella) */ .menu-parola--chiudi, .menu[open] .menu-parola--apri { visibility: hidden; } .menu[open] .menu-parola--chiudi { visibility: visible; } /* ---------- Recensioni: puntini e frecce ---------- */ /* Il blocco non scorre mai da solo (regola del kit: niente che si muove da sé): si scorre con le frecce, e i puntini dicono dove sei. */ .rec-comandi { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; } .rec-comandi .rec-puntini { margin-top: 0; } .rec-nota { margin-top: .75rem; font-size: var(--piccolo); line-height: 1.4; } /* solo in inglese: le recensioni scritte in italiano sono tradotte, e lo dice */ .rec-frecce { display: flex; gap: .75rem; } .rec-freccia { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1.5px solid var(--navy); border-radius: 50%; background: var(--bianco); color: var(--navy); cursor: pointer; } .rec-freccia .icona { width: 22px; height: 22px; } .rec-freccia--indietro .icona { transform: scaleX(-1); } .rec-freccia:hover { background: var(--navy); color: #fff; } /* ---------- La firma di chi ha fatto il sito, nel footer ---------- */ /* «Designed & developed by» e lo sticker Teo (30px; al passaggio del mouse cresce un filo, regola più in basso). Dove sta dipende dal copyright: se è una riga sola, in coda a quella riga con la barretta « | » (la barretta sparisce da telefono, dove la firma va a capo, a sinistra); se è una nota di più righe, come ora, a destra sulla riga dei link legali (da telefono a capo sotto i link, a sinistra): `.piede-riga`, nella sezione «Il piede». Lo sticker è un'immagine in riga appoggiata alla linea di base del testo e scesa del 19,9% della sua altezza (sotto le lettere, dentro l'immagine, ci sono fiamma, bordo e ombra): niente flex né margini negativi, i browser li leggono in modo diverso. */ .firma { --sticker: 1.875rem; display: inline-block; padding-block: .25rem calc(var(--sticker) * .199 + .25rem); font-size: var(--piccolo); line-height: var(--piccolo-lh); text-decoration: none; white-space: nowrap; } .firma img { display: inline-block; vertical-align: baseline; position: relative; top: calc(var(--sticker) * .199); width: auto; height: var(--sticker); margin-left: .1875rem; } @media (hover: hover) { .firma:hover span { text-decoration: underline; text-underline-offset: .2em; } } /* ---------- Apertura B su telefono e tablet: la foto grande ---------- */ /* Al posto del tondino, la foto della Dr.ssa con la Torre, grande, in cornice bianca; la barretta rossa sopra il titolo; la croce dietro, dentro la fascia (deciso il 13.10.2026). L'ordine resta: titolo, foto, sottotitolo. */ @media (max-width: 63.99em) { .apertura--b { padding-block: 2.5rem 3rem; } .apertura--b::after { inset: 0; right: 0; top: 0; width: auto; aspect-ratio: auto; background-position: right -9rem top -3rem; background-size: 30rem auto; } .apertura--b .h1::before { content: ""; display: block; width: 2.5rem; height: 4px; margin-bottom: 1.25rem; border-radius: 2px; background: var(--rosso); } .apertura--b .tondo { width: 100%; max-width: 26rem; height: auto; aspect-ratio: 5 / 6; margin-top: 2rem; border: 4px solid #fff; border-radius: var(--raggio-grande); box-shadow: 0 20px 44px rgba(8, 20, 44, .3); } .apertura--b .tondo img { object-position: 50% 18%; } .apertura--b .attacco { margin-top: 1.75rem; } } @media (min-width: 37.5em) and (max-width: 63.99em) { /* tablet: foto accanto al sottotitolo */ .apertura--b .apertura-griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2.5rem; grid-template-areas: "titolo titolo" "foto testo"; align-items: center; } .apertura--b .h1 { grid-area: titolo; } .apertura--b .tondo { grid-area: foto; } .apertura--b .attacco { grid-area: testo; margin-top: 2rem; } } /* Il titolo su due livelli si legge come due frasi: la virgola (o i due punti) fra le due parti c'è nel testo ma non si vede, e il seguito comincia con la maiuscola (deciso il 13.10.2026). */ .h1-seguito { display: block; } .h1-seguito::first-letter { text-transform: uppercase; } /* una tendina del menu aperta col mouse non mostra l'anello del fuoco da tastiera */ .nav-gruppo > summary:focus:not(:focus-visible) { outline: 0; } /* ---------- Le due cifre dell'apertura ---------- */ /* Le due cifre dell'hero («Oltre 1.000 pazienti seguiti», «Da tutta Italia»): niente scheda bianca, stanno sul navy sotto il sottotitolo, divise da un filetto; l'icona in un cerchio bianco. Su telefono affiancate, con l'icona sopra. */ .cifre { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .35); } .cifre li { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; align-content: start; } .cifre li + li { padding-left: 1.25rem; border-left: 1px solid rgba(255, 255, 255, .35); } .cifre-icona { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--navy); } .cifre-icona .icona { width: 22px; height: 22px; } .cifre p { display: grid; grid-template-columns: minmax(0, 1fr); gap: .125rem; } .cifre strong { font-size: 1.25rem; line-height: 1.2; font-weight: 800; text-wrap: balance; } /* va a capo: «From anywhere in Italy» non ci sta su una riga */ .cifre span { font-size: var(--piccolo); line-height: var(--piccolo-lh); font-weight: var(--peso-testo); } /* due colonne strette: a 320px si stringe lo stacco; da 600px, finché l'apertura è divisa con la foto, «videochiamata» non ci sta in mezza colonna e le cifre vanno una sotto l'altra */ @media (max-width: 22.49em) { .cifre { gap: 1rem; } .cifre li + li { padding-left: 1rem; } } @media (min-width: 37.5em) and (max-width: 51.99em) { .cifre { grid-template-columns: minmax(0, 1fr); gap: 1rem; } .cifre li { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .75rem; } .cifre li + li { padding-left: 0; border-left: 0; } } @media (min-width: 37.5em) and (max-width: 63.99em) { .apertura--b .apertura-griglia { grid-template-areas: "titolo titolo" "foto testo" "foto cifre"; grid-template-rows: auto 1fr auto; } .apertura--b .attacco { align-self: end; } .apertura--b .cifre { grid-area: cifre; align-self: start; } } @media (min-width: 64em) { .apertura--b .apertura-griglia { grid-template-areas: "titolo foto" "testo foto" "cifre foto"; grid-template-rows: auto auto 1fr; } .apertura--b .attacco { padding-bottom: 0; } .apertura--b .cifre { grid-area: cifre; align-self: start; display: flex; gap: 0; max-width: 40rem; margin-top: 2.25rem; margin-bottom: 4.5rem; padding-top: 1.75rem; } .cifre li { flex: 0 1 auto; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 1rem; padding-right: 2.5rem; } .cifre li + li { padding-left: 2.5rem; padding-right: 0; } .cifre-icona { width: 52px; height: 52px; } .cifre-icona .icona { width: 26px; height: 26px; } .cifre strong { font-size: 1.625rem; } .cifre span { font-size: 1rem; } .cifre li:first-child { flex: none; } /* la cifra corta non va a capo: lo spazio che manca lo cede la seconda */ } @media (min-width: 64em) and (max-width: 79.99em) { .cifre li { padding-right: 1.5rem; } .cifre li + li { padding-left: 1.5rem; } .cifre strong { font-size: 1.375rem; } } /* su telefono la foto dell'apertura è più bassa (deciso il 13.10.2026): un taglio 4:3 sul viso e sulla cima della Torre, invece del ritratto intero */ @media (max-width: 37.49em) { .apertura--b .tondo { aspect-ratio: 4 / 3; margin-top: 1.75rem; } .apertura--b .tondo img { object-position: 50% 24%; } } /* ---------- Il tondo di WhatsApp, fisso in basso a destra ---------- */ /* Sempre a vista, a ogni larghezza; l'anello bianco serve quando passa sopra il navy (hero, footer). Sta sotto il menu aperto. Nel verde di WhatsApp (deciso il 18.10.2026). */ .wa-fisso { --verde-wa: #25D366; --verde-wa-scuro: #1DA851; position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 40; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--verde-wa); color: #fff; box-shadow: 0 0 0 2px #fff, 0 6px 18px rgba(8, 20, 44, .28); } .wa-fisso .icona { width: 1.75rem; height: 1.75rem; fill: currentColor; stroke: none; } .wa-fisso:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; box-shadow: 0 0 0 4px #fff, 0 6px 18px rgba(8, 20, 44, .28); } @media (min-width: 52em) { .wa-fisso { right: 1.5rem; bottom: 1.5rem; } } @media (hover: hover) { .wa-fisso:hover { background: var(--verde-wa-scuro); } } body:has(.menu[open]) .wa-fisso { visibility: hidden; } /* lo sticker della firma cresce un filo al passaggio del mouse: solo per chi non ha chiesto meno movimento */ @media (hover: hover) and (prefers-reduced-motion: no-preference) { .firma img { transition: scale .3s ease; } .firma:hover img { scale: 1.06; } } /* ---------- La testata con le tendine entra da 74em ---------- */ /* Fra 64 e 74em (un tablet in orizzontale, 1024px) logo, cinque voci, bandiera della lingua e bottone rosso non stanno su una riga: «Chi siamo» e il bottone andavano a capo. Lì resta «Menu» con il pannello a tutta pagina; da 74em in su le voci non vanno mai a capo e fino a 80em stanno un po' più strette. Il limite era 70em (a 1120px la barra senza bandiera aveva 53px di avanzo); la bandiera (48px più 8 di margine) ne vuole 56, e la barra con la bandiera sta su una riga solo da 1147px: da 74em (1184px) restano 37px di margine. */ @media (min-width: 64em) and (max-width: 73.99em) { .menu { display: block; } .nav-desktop { display: none; } } @media (min-width: 74em) { .nav-desktop > a, .nav-gruppo > summary, .nav-desktop .bottone { white-space: nowrap; } } @media (min-width: 74em) and (max-width: 79.99em) { .nav-desktop { gap: 0; } .nav-desktop > a:not(.bottone, .lingua), .nav-gruppo > summary { padding-inline: 10px; } .nav-desktop .bottone { margin-left: 8px; padding-inline: 18px; } } /* ---------- La croce degli hero navy: in alto a destra ---------- */ /* La posizione è stata messa a punto il 13.10.2026, in tre giri: sopra l'inizio delle gambe di destra e la cima della croce si vede un po' di blu. Una regola sola per tutte le aperture navy (hanno tutte la classe su-navy, e solo loro). La croce sta nell'angolo in alto a destra: sopra la sua cima resta una striscia di blu, e del braccio destro si vede solo l'inizio (il file è la croce già tagliata a destra: img/croce-filigrana-angolo.svg), col blu sopra. È lo sfondo di un livello grande quanto la fascia, alto il 165% della fascia fino a un tetto: così in un'apertura bassa (solo il titolo) si vedono la cima e l'attacco dei bracci, non un pezzo della figura tagliato dal bordo, e in una alta la croce non diventa enorme. Le misure scritte nei fogli delle singole pagine non contano più: questa regola le supera (section.su-navy pesa di più). */ section.su-navy::after { content: ""; position: absolute; inset: 0; right: 0; top: 0; width: auto; aspect-ratio: auto; pointer-events: none; background: url("/img/croce-filigrana-angolo.svg") no-repeat right top 1rem / auto min(165%, 24rem); opacity: .06; } @media (min-width: 52em) { section.su-navy::after { background-position: right top 1.25rem; background-size: auto min(165%, 32rem); } } @media (min-width: 64em) { section.su-navy::after { background-position: right top 1.5rem; background-size: auto min(165%, 40rem); } } /* ---------- Il bottone fisso di prenotazione, su telefono ---------- */ /* Nelle pagine di servizio (non negli articoli: così è stato deciso), su telefono, compare in basso la pillola rossa di prenotazione, a sinistra del tondo di WhatsApp (il tondo resta uno solo). È lo stesso pezzo del bottone «Registrati gratis» della pagina dell'evento. C'è se a schermo non c'è un invito e il tratto fra l'invito passato e il prossimo è lungo almeno 1400px, e non quando il menu è aperto. La regola, il markup e lo script li mette il sito (src/layouts/Pagina.astro). */ .invito-fisso { position: fixed; z-index: 40; left: 1rem; right: 5.25rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); min-height: 56px; padding: 10px 20px; font-size: 1rem; box-shadow: 0 0 0 2px #fff, 0 6px 18px rgba(8, 20, 44, .28); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .2s ease, transform .2s ease, visibility 0s .2s; } .invito-fisso.si-vede { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease; } .invito-fisso:focus-visible { outline: 0; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--navy), 0 6px 18px rgba(8, 20, 44, .28); } @media (min-width: 52em) { .invito-fisso { display: none; } } @media (prefers-reduced-motion: reduce) { .invito-fisso { transform: none; transition: none; } } body:has(.menu[open]) .invito-fisso { visibility: hidden; } /* la fascia rossa chiusa resta chiusa per tutta la visita (lo ricorda src/layouts/Pagina.astro) */ .annuncio-chiuso .annuncio { display: none; } /* l'esito dell'invio di un modulo: la conferma o l'errore, una riga sotto il bottone (le parole sono in src/content/interfaccia, chiave «modulo»; le mostra lo script del modulo, src/components/comuni/script.ts). Il rosso è il bottone e un accento: l'errore non ha il testo rosso, ha la barretta. .modulo-azione tiene insieme il bottone e l'esito, come una voce sola della griglia del modulo: l'esito vuoto non aggiunge spazio. */ .modulo-azione { display: grid; } .modulo-esito-voce { margin-top: .875rem; font-size: var(--piccolo); line-height: var(--piccolo-lh); font-weight: 700; } .modulo-esito-voce[hidden] { display: none; } .modulo-esito-voce--errore { padding-left: .75rem; border-left: 3px solid var(--rosso); } .modulo-esito-voce a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .22em; } /* il campo trappola degli spam (dentro .solo-lettori): un punto, non una casella; nessuno lo vede, lo tocca o lo legge, ma un bot lo trova */ .modulo .solo-lettori input { width: 1px; height: 1px; padding: 0; border: 0; } /* durante l'invio il bottone è disabilitato: si vede, e non si muove sotto il mouse */ .modulo .bottone:disabled { opacity: .6; cursor: progress; } .modulo .bottone:disabled:hover { background: var(--rosso); } /* ---------- Le recensioni scorrono ---------- */ /* Le recensioni sono del sito (src/content/recensioni/). Le schede stanno in una pista che scorre di lato, una per volta (due a desktop in /menopausa); le frecce la muovono, i puntini dicono dove sei. Non scorre mai da sola e non si trascina col dito: si muove solo con le frecce (deciso il 18.10.2026). overflow: hidden tiene la pista un contenitore che scorre (scrollBy delle frecce e lo scatto sulle schede funzionano), ma il dito e la rotella no; touch-action lascia al dito solo lo scorrimento della pagina in verticale. Nascosto in tutti e due i versi: con solo overflow-x l'altro verso diventa auto, e nella home il bollino Google dell'avatar (4px fuori dalla scheda) faceva scorrere la pista in su e in giù. Il testo lungo si ferma a cinque righe: il resto è su Google. */ .rec-pista { display: flex; gap: 1rem; margin-top: 1.5rem; overflow: hidden; touch-action: pan-y; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; } .rec-pista::-webkit-scrollbar { display: none; } .rec-pista > .rec-card { flex: 0 0 100%; min-width: 0; margin-top: 0; scroll-snap-align: start; } .rec-pista > .rec-card > p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; } .rec-corpo > .rec-pista { margin-top: 0; } @media (max-width: 63.99em) { .rec-corpo > .rec-pista { margin-top: 1.5rem; } } @media (min-width: 52em) { .rec-pista--due > .rec-card { flex-basis: calc(50% - .5rem); } } .rec-freccia:disabled { opacity: .35; cursor: default; background: var(--bianco); color: var(--navy); } /* la scheda del riassunto delle recensioni («AI-Generated Summary», `riassunto:` del blocco, comuni/RecensioniSchede): la usa /request-doctor */ .rd-punti { display: grid; gap: .75rem; margin-top: 1rem; } .rd-punti li { display: flex; align-items: flex-start; gap: .75rem; } .rd-punti .icona { width: 20px; height: 20px; margin-top: .2rem; stroke-width: 2; } .rd-riassunto .avatar .icona { width: 22px; height: 22px; } .rd-riassunto .rd-punti { margin-top: 1.25rem; } /* ---------- Tendine disegnate ---------- */ /* Nei moduli la scelta a elenco (il «Paese» del telefono) non apre il menu del browser: è un bottone con l'aspetto degli altri campi e una lista disegnata sotto (le tendine non sono mai quelle native del browser). Il vero: resta nel modulo ma non occupa posto né si vede (il selettore lungo serve a battere .campo select) */ .campo select.tendina-nativa { position: absolute; left: 0; bottom: 0; width: 1px; min-height: 0; height: 1px; padding: 0; border: 0; opacity: 0; clip-path: inset(50%); pointer-events: none; } .campo:has(> .tendina) { position: relative; } .campo .tendina-bottone { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; min-height: 56px; padding: 0 1rem; border: 1.5px solid var(--navy); border-radius: var(--raggio); background: var(--bianco); color: var(--navy); font: var(--peso-testo) 1rem/1.4 var(--font); text-align: left; cursor: pointer; } .tendina-bottone > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tendina-bottone .icona { flex: none; width: 18px; height: 18px; stroke-width: 2; transition: transform .2s ease; } .tendina-bottone[aria-expanded="true"] .icona { transform: rotate(180deg); } .tendina-lista { position: absolute; z-index: 30; left: 0; top: calc(100% + 4px); min-width: 100%; max-height: 15rem; overflow-y: auto; padding: .25rem; border: 1.5px solid var(--navy); border-radius: var(--raggio); background: var(--bianco); } .tendina-lista:focus { outline: 0; } .tendina-lista li { display: flex; align-items: center; min-height: 44px; padding: .375rem .75rem; border-radius: 6px; font-size: 1rem; line-height: 1.3; white-space: nowrap; cursor: pointer; } .tendina-lista li.attiva, .tendina-lista li:hover { background: var(--cielo); } .tendina-lista li[aria-selected="true"] { font-weight: 700; } @media (prefers-reduced-motion: reduce) { .tendina-bottone .icona { transition: none; } } /* ---------- Il piede ---------- */ /* Il footer è lo stesso su tutte le pagine (deciso il 18.10.2026). Il markup è uno solo (src/components/guscio/Piede.astro). È un box navy dagli angoli tondi, rientrato dai bordi: rientra del margine della pagina, ha il raggio delle card e dentro la loro aria (--scheda). Attorno al box continua il colore dell'ultima fascia: azzurro se la pagina finisce su una fascia azzurra, bianco altrimenti. Lo stacco sopra il box è il padding di quell'ultima fascia (un margine non ha fondo) e il footer contiene il margine sotto il suo box (flow-root), così il fondo arriva fino al bordo basso della pagina. */ .piede { display: flow-root; background: var(--bianco); } main:has(> .sezione--cielo:last-child) ~ .piede { background: var(--cielo); } .piede-box { position: relative; overflow: hidden; margin: 0 var(--margine) var(--margine); padding: calc(var(--scheda) * 2) var(--scheda) 3.5rem; /* in basso c'è posto per il tondo di WhatsApp */ border-radius: var(--raggio-grande); background: var(--navy); color: #fff; font-size: 1rem; line-height: 1.6; } /* la croce del logo in trasparenza (bianca, 6%), in alto a destra come negli hero navy: stesso file e stesso posto (vedi section.su-navy::after), un po' più piccola perché il box è basso e il testo ci sta sopra */ .piede-box::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("/img/croce-filigrana-angolo.svg") no-repeat right top 1rem / auto min(100%, 18rem); opacity: .06; } @media (min-width: 52em) { .piede-box::before { background-position: right top 1.25rem; background-size: auto min(100%, 24rem); } } @media (min-width: 64em) { .piede-box::before { background-position: right top 1.5rem; background-size: auto min(100%, 28rem); } } .piede-box > * { position: relative; } .piede-box :focus-visible { outline-color: #fff; } @media (hover: hover) { .piede-box a:hover { text-decoration-thickness: 2.5px; } } /* il marchio: il logo nel suo riquadro bianco (regola del kit: sul navy il logo sta su bianco, angoli a 8px) e l'indirizzo */ .piede-alto { display: grid; row-gap: 1.5rem; } .piede-colonna:not(.piede-pagine) { margin-top: 1rem; } /* da telefono il link per i turisti sta vicino ai contatti, le altre colonne più staccate */ .piede-logo { display: inline-flex; padding: .75rem 1.125rem; border-radius: var(--raggio); background: #fff; } .piede-logo img { height: 32px; width: auto; } .piede-marchio p { margin-top: 1rem; } /* le colonne: titolo e righe alte 48px (il bersaglio al tocco); gli orari sono testo, non un link */ .piede-titolo { margin-bottom: .5rem; font-size: var(--h3); line-height: 1.35; font-weight: 700; } .piede-elenco li { text-wrap: balance; } .piede-elenco a, .piede-discreto a { display: inline-flex; align-items: center; min-height: 48px; } .piede-orari { display: flex; align-items: center; min-height: 48px; } .piede-discreto { text-wrap: balance; } @media (min-width: 52em) { .piede-discreto { margin-top: .75rem; } } /* i profili social: gli stessi cerchi del menu e dei video, rovesciati sul navy (cerchio bianco, icona navy) */ .piede-box .social { margin-top: 0; } .piede-box .social a { background: #fff; color: var(--navy); } @media (hover: hover) { .piede-box .social a:hover { background: var(--cielo); } } /* su telefono il piede non ha l'elenco delle pagine (le voci sono nel menu) e lascia il link per i turisti */ @media (max-width: 51.99em) { .piede-pagine .piede-titolo, .piede-pagine .piede-elenco { display: none; } } /* la riga legale: i link a sinistra, la firma a destra (da telefono va a capo sotto i link, a sinistra); sotto, la nota */ .piede-coda { margin-top: 2.5rem; padding-top: .5rem; border-top: 1px solid var(--filo-su-navy); font-size: var(--piccolo); line-height: var(--piccolo-lh); } .piede-riga { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 2rem; } .piede-riga ul { display: flex; flex-wrap: wrap; column-gap: 1.5rem; } .piede-riga li a { display: inline-flex; align-items: center; min-height: 48px; min-width: 48px; } .piede-nota { max-width: var(--colonna); margin-top: .5rem; } @media (min-width: 52em) { .piede-box { padding-bottom: calc(var(--scheda) * 2); } .piede-alto { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 2rem; } .piede-colonna:not(.piede-pagine) { margin-top: 0; } } @media (min-width: 64em) { /* il contenuto sta sulla stessa riga dei contenitori della pagina (1200px), il box resta largo quanto lo schermo meno il margine */ .piede-box { padding-inline: max(var(--scheda), calc((100% - var(--contenitore)) / 2 - var(--margine))); } } @media (min-width: 75em) { /* quattro colonne; contatti e social larghi quanto il loro contenuto (gli orari stanno su una riga) */ .piede-alto { grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr) max-content; column-gap: 4rem; } } /* ---------- card articolo (iterazione 4) ---------- */ /* La card dell'articolo, una sola per tutto il sito, in due pesi: questa, grande, è l'elenco con i filtri delle tre pagine dei passi; quella compatta («design minore», più sotto) sono i tre «in evidenza» di /approfondimenti e i tre «parti da qui» della home. Card su tre colonne da computer, una colonna da telefono, mai carosello (deciso il 17.10.2026). Dentro: foto, tema, titolo, descrizione breve (si ferma a tre righe) e data con l'anno. Tutta la card si tocca: il solo link è il titolo, steso su tutta la card. Markup: - un'infografica al posto della foto:
(si vede intera, su bianco); --fuoco è il punto della foto che resta in vista quando la si taglia (x y, in percentuale); - nelle pagine dei passi ogni
  • porta data-temi="ormoni-e-terapia sicurezza-e-rischi" (gli indirizzi dei temi, separati da uno spazio): lo script dei filtri li legge; - le card le fa src/components/comuni/Anteprima.astro dai file degli articoli: niente segnaposto per gli articoli che non ci sono ancora (30.10.2026: un passo ha gli articoli che ha). Telefono: una colonna, copertina 2:1 e poca aria (la pagina non si allunga più del necessario); da 40em la card si apre in riga (copertina a sinistra, testo a destra), perché a una colonna sola la copertina sarebbe enorme; da 64em tre colonne. */ .anteprime { display: grid; gap: 1.25rem; } .anteprima { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--filo); border-radius: var(--raggio-grande); background: var(--bianco); overflow: hidden; } .anteprima[hidden] { display: none; } /* il filtro nasconde le card con l'attributo hidden: display:flex non deve scavalcarlo */ .sezione--cielo .anteprima { border-color: transparent; } .anteprima-foto { position: relative; flex: none; aspect-ratio: 2 / 1; overflow: hidden; background: var(--cielo); } .anteprima-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fuoco, 50% 50%); } /* la foto non decide l'altezza: tutte hanno lo stesso taglio */ /* le infografiche si vedono intere, su bianco: tagliarle toglie i numeri e le righe */ .anteprima-foto--schema { background: var(--bianco); } .anteprima-foto--schema img { object-fit: contain; } .anteprima-corpo { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 1.25rem 1.25rem 1.375rem; } .anteprima-tema { margin-bottom: .375rem; font-size: var(--piccolo); line-height: 1.3; font-weight: 600; } .anteprima-titolo { font-size: var(--h3); line-height: 1.35; font-weight: 700; text-wrap: pretty; } .anteprima-titolo a { text-decoration: none; } .anteprima-titolo a::after { content: ""; position: absolute; inset: 0; } /* tutta la card si tocca */ .anteprima-testo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; margin-top: .625rem; overflow: hidden; font-size: 1rem; line-height: 1.5; } .anteprima-data { margin-top: auto; padding-top: 1rem; font-size: var(--piccolo); line-height: 1.3; } /* la data sta sempre in fondo: nelle card di una riga allineate si legge su una linea */ @media (hover: hover) { .anteprima:hover .anteprima-titolo a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em; } } /* il fuoco da tastiera sta sul link del titolo, ma si vede attorno a tutta la card */ @supports selector(:has(*)) { .anteprima-titolo a:focus-visible { outline: 0; } .anteprima:has(.anteprima-titolo a:focus-visible) { outline: 3px solid var(--navy); outline-offset: 3px; } } @media (min-width: 40em) and (max-width: 63.99em) { .anteprime { gap: 1.5rem; } .anteprima { flex-direction: row; } .anteprima-foto { flex: 0 0 40%; aspect-ratio: auto; min-height: 14rem; } .anteprima-corpo { padding: 1.5rem; } } @media (min-width: 64em) { .anteprime { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } .anteprima-foto { aspect-ratio: 3 / 2; } .anteprima-corpo { padding: 1.5rem 1.5rem 1.625rem; } .anteprima-titolo { font-size: 1.1875rem; } } @media (min-width: 80em) { .anteprime { gap: 2rem; } .anteprima-corpo { padding: 1.75rem 1.75rem 1.875rem; } } /* ---------- design minore: la card articolo compatta (iterazione 4, secondo giro) ---------- */ /* Le card degli articoli pesano meno dei tre passi (deciso il 18.10.2026): gli articoli sono un invito di contorno, i tre passi sono la cosa da cliccare. Stessa card, in versione compatta: miniatura quadrata a sinistra, tema e titolo a destra; niente descrizione né data. Si usa nei tre «parti da qui» della home e nei tre «in evidenza» di /approfondimenti; le card dell'elenco con i filtri, nelle pagine dei passi, restano quelle grandi. Markup: