/* Dott. Lorenzo Spadotto — skin bespoke, scritta da zero per questo tenant. Idea: «il referto e la lezione». Il suo modo di comunicare è didattico — disegni anatomici, slide da congresso, convinzioni sbagliate smontate — e la pagina prende la forma di un documento: carta, filetti, sezioni numerate, nessun'ombra, nessun angolo arrotondato. Coppia tipografica INVERTITA rispetto agli altri tenant: display grottesco (Archivo) + corpo serif da rivista scientifica (Source Serif 4). Unico blocco saturo del sito: la banda CTA in blu penna. I token colore arrivano da TenantConfig.tema (runtime), con fallback qui. */ :root { --carta: var(--colore-sfondo, #fbfaf7); --carta-2: var(--colore-superficie, #ffffff); --inchiostro: var(--colore-testo, #14161a); --grafite: var(--colore-testo-tenue, #5b6069); --riga: var(--colore-dettaglio, #dedcd5); /* --riga: filetto decorativo (divisori, tabelle). --bordo: contorno dei CONTROLLI (campi, chip, bottone ghost), che WCAG 1.4.11 vuole a 3:1 — #8a8578 sta a 3.53:1 sulla carta, #b9b5a8 stava a 1.97:1 e il riempimento bianco è indistinguibile dalla pagina, quindi il bordo era l'unico segno del confine del campo. */ --riga-forte: var(--colore-dettaglio-scuro, #8a8578); --penna: var(--colore-primario, #2246b8); --penna-scuro: var(--colore-primario-scuro, #16307f); --penna-velo: var(--colore-dettaglio-chiaro, #e9edfa); --ff-display: var(--font-titoli, "Archivo", "Helvetica Neue", Arial, sans-serif); --ff-testo: var(--font-testo, "Source Serif 4", Georgia, serif); --wrap: 1180px; --gutter: clamp(1.25rem, 5vw, 3rem); --ease: cubic-bezier(.2, .8, .25, 1); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; /* Sticky footer (§9.5): il body riempie sempre la schermata. */ min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--carta); color: var(--inchiostro); font-family: var(--ff-testo); font-size: 1.05rem; line-height: 1.62; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } main { flex: 1 0 auto; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--penna); outline-offset: 3px; } .wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; } /* ---- Tipografia: display serrato, corpo serif largo ---- */ h1, h2, h3, h4 { font-family: var(--ff-display); font-weight: 600; line-height: 1.03; letter-spacing: -.03em; margin: 0; } h1 { font-size: clamp(2.5rem, 6.6vw, 5.1rem); } h2 { font-size: clamp(1.9rem, 4vw, 3rem); } h3 { font-size: clamp(1.15rem, 1.9vw, 1.45rem); letter-spacing: -.02em; } p { margin: 0 0 1rem; max-width: 66ch; } /* L'etichetta tracciata sopravvive in UN solo ruolo: la chiave di una riga di tabella (scheda del medico, colonna dell'indice). Prima marcava cinque cose diverse — occhiello, chiavi, numeri, titoli di colonna, kicker delle card — e un segno che etichetta tutto non è più una voce, è un default. */ .ls-key { font-family: var(--ff-display); font-size: .7rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--penna); } /* Kicker delle card (blog, core): stessa informazione, senza il costume. */ .card-kicker, .eyebrow { font-family: var(--ff-display); font-size: .82rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--penna); } .lead { font-size: clamp(1.08rem, 1.5vw, 1.28rem); line-height: 1.55; color: var(--grafite); } .muted, .card-meta { color: var(--grafite); font-size: .92rem; } /* Testo riservato agli screen reader (es. «si apre in una nuova scheda»). */ .ls-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Freccia disegnata: allineata alla riga di testo, eredita il colore. */ .ls-freccia { display: inline-block; vertical-align: -1px; flex: none; } /* ---- Bottoni: rettangoli netti, nessun raggio, nessuna ombra ---- */ .btn, .btn-cta, .cmp-btn, button[type="submit"] { display: inline-flex; align-items: center; gap: .55em; border-radius: 0; font-family: var(--ff-display); font-size: .88rem; font-weight: 600; letter-spacing: .02em; padding: .95em 1.6em; border: 1px solid var(--inchiostro); background: var(--inchiostro); color: var(--carta); cursor: pointer; transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); } .btn:hover, .btn-cta:hover, button[type="submit"]:hover { background: var(--penna); border-color: var(--penna); color: #fff; } .btn-ghost, .btn-secondary { background: transparent; color: var(--inchiostro); border-color: var(--riga-forte); } .btn-ghost:hover, .btn-secondary:hover { background: transparent; color: var(--penna); border-color: var(--penna); } .btn-arrow { transition: transform .18s var(--ease); } .btn:hover .btn-arrow, .btn-cta:hover .btn-arrow { transform: translateX(4px); } .cta-prenota { padding: clamp(2.5rem, 6vw, 4rem) 0; border-top: 1px solid var(--riga); margin-top: clamp(2.5rem, 6vw, 4rem); } /* ---- Testata: barra di documento, non «header di sito» ---- */ .ls-nav { position: sticky; top: 0; z-index: 100; background: var(--carta); border-bottom: 1px solid var(--inchiostro); } .ls-nav__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 72px; } .brand { display: inline-flex; align-items: baseline; gap: .8rem; } .brand-logo { max-height: 40px; width: auto; } .brand-name { font-family: var(--ff-display); font-weight: 700; font-size: 1.18rem; letter-spacing: -.035em; text-transform: uppercase; } .brand-sub { font-family: var(--ff-display); font-size: .62rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--grafite); } .ls-nav__menu { display: flex; align-items: center; gap: 2.1rem; } .ls-nav__links { display: flex; align-items: center; gap: 1.7rem; } .ls-nav__links a { font-family: var(--ff-display); font-size: .88rem; font-weight: 500; padding: .25rem 0; border-bottom: 2px solid transparent; transition: border-color .18s, color .18s; } .ls-nav__links a:hover, .ls-nav__links a.on { color: var(--penna); border-bottom-color: var(--penna); } .ls-nav__item { position: relative; } .ls-nav__sub { position: absolute; top: 100%; left: -.9rem; min-width: 210px; background: var(--carta-2); border: 1px solid var(--inchiostro); padding: .4rem; display: grid; gap: .1rem; opacity: 0; visibility: hidden; transform: translateY(4px); transition: all .2s var(--ease); } .ls-nav__item:hover .ls-nav__sub, .ls-nav__item:focus-within .ls-nav__sub { opacity: 1; visibility: visible; transform: none; } .ls-nav__sub a { padding: .5rem .7rem; font-size: .86rem; border: 0; } .ls-nav__sub a:hover { background: var(--penna-velo); } .ls-nav__caret { font-size: .55rem; opacity: .55; } .ls-nav__cta { font-family: var(--ff-display); font-size: .86rem; font-weight: 600; color: var(--penna); border-bottom: 2px solid var(--penna); padding-bottom: 2px; white-space: nowrap; } .ls-nav__cta:hover { color: var(--penna-scuro); border-color: var(--penna-scuro); } /* 44x44: sotto i 900px è l'unico comando di navigazione della pagina, e a 40x32 era il bersaglio più piccolo della testata. Il margine negativo tiene il bordo visivo dov'era. */ .ls-nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 14px 10px; margin-right: -10px; cursor: pointer; } .ls-nav__toggle span { width: 24px; height: 2px; background: var(--inchiostro); transition: .25s var(--ease); } .ls-nav.open .ls-nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .ls-nav.open .ls-nav__toggle span:nth-child(2) { opacity: 0; } .ls-nav.open .ls-nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---- Hero: titolo a sinistra, scheda anagrafica del medico a destra ---- */ .ls-hero { padding: clamp(3rem, 7vw, 6rem) 0 clamp(2.5rem, 6vw, 5rem); } .ls-hero__grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .ls-hero__eyebrow { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.6rem; } .ls-hero__eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--penna); } .ls-hero h1 { max-width: 15ch; } /* La parola-chiave è marcata come su un testo studiato: velo di colore dietro. */ /* Tratto di evidenziatore alla base della parola: deve leggersi come un segno fatto a mano su un testo studiato, non come testo selezionato. Quindi sottile e appoggiato alla linea di base, non un blocco dietro tutta la parola. */ .ls-mark { color: var(--penna); background: linear-gradient(var(--penna-velo), var(--penna-velo)) no-repeat; background-size: 100% .16em; background-position: 0 .86em; } .ls-hero__lead { margin: 1.7rem 0 2.2rem; max-width: 46ch; } .ls-hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; } /* Scheda: la sintesi verificabile del medico, impaginata come una tabella. */ .ls-scheda { border-top: 2px solid var(--inchiostro); } .ls-scheda__riga { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--riga); align-items: baseline; } .ls-scheda__riga p { margin: 0; font-size: .96rem; } /* ---- Sezioni: intestazione col numero in colonna a sinistra ---- */ .ls-sez { padding: clamp(3rem, 7vw, 5.5rem) 0; border-top: 1px solid var(--riga); } .ls-sez--bianca { background: var(--carta-2); } .ls-sez__head { margin-bottom: clamp(2rem, 4vw, 3rem); } .ls-sez__head h2 { max-width: 17ch; } .ls-sez__lead { margin: 1.1rem 0 0; max-width: 52ch; } /* La sezione «metodo» affianca al titolo la tavola: è la metà destra che prima restava vuota, e ci sta la cosa di cui la sezione parla. */ .ls-sez__head--tavola { display: grid; grid-template-columns: 1fr .85fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } /* Metodo: tre passaggi in filari, il numero grande come in una dispensa. */ .ls-passi { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--inchiostro); list-style: none; padding: 0; margin: 0; } .ls-passo { padding: 1.8rem 1.6rem 2rem 0; border-bottom: 1px solid var(--riga); } .ls-passo__n { display: block; } .ls-passo + .ls-passo { padding-left: 1.6rem; border-left: 1px solid var(--riga); } .ls-passo__n { font-family: var(--ff-display); font-weight: 700; font-size: 2.6rem; line-height: 1; letter-spacing: -.05em; color: var(--penna); } .ls-passo h3 { margin: .8rem 0 .6rem; } .ls-passo p { margin: 0; font-size: .98rem; color: var(--grafite); } /* Indice dei trattamenti: righe, non schede. È il sommario del documento. */ .ls-indice { border-top: 1px solid var(--inchiostro); } .ls-voce { display: grid; grid-template-columns: 9rem minmax(10rem, 1fr) 1.4fr auto; gap: 1.4rem; align-items: baseline; padding: 1.35rem 0; border-bottom: 1px solid var(--riga); transition: background .18s var(--ease); } /* Il velo si muove, la riga no: animare `padding-left` sposterebbe il testo di ogni riga al passaggio del mouse. */ .ls-voce:hover { background: var(--penna-velo); } .ls-voce h3 { letter-spacing: -.025em; } .ls-voce p { margin: 0; font-size: .96rem; color: var(--grafite); max-width: 52ch; } .ls-voce__go { font-family: var(--ff-display); font-size: 1.1rem; color: var(--penna); transition: transform .18s var(--ease); } .ls-voce:hover .ls-voce__go { transform: translateX(4px); } .ls-vuoto { padding: 1.6rem 0; color: var(--grafite); } .ls-vuoto a { color: var(--penna); border-bottom: 1px solid currentColor; } /* Criterio etico: postilla a margine, col filetto blu della correzione. */ .ls-criterio { margin-top: 2.6rem; padding: 1.3rem 0 1.3rem 1.6rem; border-left: 1px solid var(--penna); max-width: 72ch; } .ls-nota { margin-top: 1.6rem; max-width: 68ch; color: var(--grafite); font-size: .97rem; } .ls-criterio strong { font-family: var(--ff-display); font-weight: 600; letter-spacing: -.01em; } .ls-criterio p { margin: 0; color: var(--grafite); } /* Sedi: tabella vera, com'è giusto per un elenco di indirizzi. */ .ls-sedi { border-top: 1px solid var(--inchiostro); } .ls-sede { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; padding: 1.35rem 0; border-bottom: 1px solid var(--riga); align-items: baseline; } .ls-sede h3 { letter-spacing: -.02em; } .ls-sede h3 a:hover { color: var(--penna); } .ls-sede p { margin: 0; font-size: .96rem; color: var(--grafite); } .ls-sede__tel { font-family: var(--ff-display); font-size: .9rem; font-weight: 500; } .ls-sede__tel:hover { color: var(--penna); } .ls-sede__prenota { display: block; margin-top: .5rem; font-family: var(--ff-display); font-size: .86rem; font-weight: 600; color: var(--penna); } .ls-sede__prenota:hover { color: var(--penna-scuro); } /* ---- Banda CTA: l'unico blocco pieno di colore del sito ---- */ .ls-cta { background: var(--penna); color: #fff; padding: clamp(3.5rem, 8vw, 6.5rem) 0; } .ls-cta h2 { max-width: 16ch; color: #fff; } .ls-cta p { margin: 1.2rem 0 2.2rem; max-width: 46ch; color: rgba(255,255,255,.82); font-size: 1.1rem; } .ls-cta .btn { background: #fff; color: var(--penna); border-color: #fff; } /* `outline-offset` porta l'anello FUORI dal bottone, sul fondo della banda: col colore di default era penna su penna, 1.00:1. Sulle superfici invertite l'anello è bianco. */ .ls-cta :focus-visible { outline-color: #fff; } .ls-cta .btn:hover { background: transparent; color: #fff; border-color: #fff; } /* ---- Footer: carta, non banda scura. Chiude il documento con un filetto ---- */ .ls-foot { border-top: 2px solid var(--inchiostro); padding: clamp(2.5rem, 5vw, 3.5rem) 0 1.6rem; margin-top: auto; } .ls-foot__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.4rem; padding-bottom: 2.2rem; } .ls-foot__intro p { font-size: .95rem; color: var(--grafite); max-width: 34ch; margin: .8rem 0 0; } .ls-foot h2 { font-family: var(--ff-display); font-size: .95rem; font-weight: 600; letter-spacing: -.01em; text-transform: none; color: var(--inchiostro); margin: 0 0 1rem; } .ls-foot__col a, .ls-foot__col p { display: block; font-size: .95rem; color: var(--grafite); margin: 0 0 .5rem; } .ls-foot__col a:hover { color: var(--penna); } .ls-foot__bot { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; border-top: 1px solid var(--riga); padding-top: 1.2rem; font-size: .84rem; color: var(--grafite); } .ls-foot__bot button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; } .ls-foot__bot button:hover { color: var(--penna); } /* ---- Pagine core (trattamenti, blog, tecnologie, privacy, sedi, 404) ---- Il contenuto core sta in {% block content %} senza .wrap: qui lo incolonno. Le sezioni bespoke della home sono full-bleed → escluse. */ #contenuto > :not(.ls-hero):not(.ls-sez):not(.ls-cta) { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; } #contenuto > :first-child:not(.ls-hero):not(.ls-sez) { margin-top: clamp(2.5rem, 6vw, 4rem); } /* Un paragrafo figlio diretto riceve la colonna con margini automatici: il suo `max-width: 66ch` non accorcia la riga, CENTRA il blocco. La misura resta, l'allineamento torna a sinistra. */ #contenuto > p:not(.ls-hero):not(.ls-sez):not(.ls-cta) { margin-inline: 0 auto; } #contenuto > :last-child:not(.ls-cta) { margin-bottom: clamp(3rem, 7vw, 5rem); } /* Sulle pagine interne il titolo è un'etichetta di pagina, non la frase d'apertura del sito: alla scala dell'hero urlava «Trattamenti» a 81px. */ #contenuto > h1 { margin-bottom: 1.2rem; text-wrap: balance; font-size: clamp(2rem, 4.4vw, 3.2rem); } #contenuto > article > h1 { margin-bottom: 1.2rem; max-width: 20ch; } #contenuto article > h2, #contenuto > h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin: 2.4rem 0 .7rem; padding-top: 1.2rem; border-top: 1px solid var(--riga); } #contenuto article > h3 { margin: 1.6rem 0 .5rem; } #contenuto article > img { margin: 1.6rem 0; max-height: 460px; width: 100%; object-fit: cover; } #contenuto details { border-bottom: 1px solid var(--riga); padding: .9rem 0; } #contenuto summary { cursor: pointer; font-family: var(--ff-display); font-weight: 600; font-size: .98rem; } #contenuto article ul, .prosa ul { padding-left: 1.1rem; } .prosa { max-width: 68ch; } .prosa h2, .prosa h3 { margin: 1.8rem 0 .6rem; } .prosa a { color: var(--penna); border-bottom: 1px solid var(--riga-forte); } .prosa a:hover { border-color: var(--penna); } .breadcrumb, .backlink { font-family: var(--ff-display); font-size: .82rem; color: var(--grafite); } .breadcrumb a:hover, .backlink a:hover { color: var(--penna); } .qualifica { font-family: var(--ff-display); font-size: .95rem; color: var(--grafite); } .specializzazioni { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .specializzazioni li { font-family: var(--ff-display); font-size: .8rem; border: 1px solid var(--riga-forte); padding: .3rem .7rem; } /* Griglia + card: rettangoli divisi da filetti, niente ombre né raggi. */ .griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 0; margin-top: 1.8rem; border-top: 1px solid var(--inchiostro); } .card { display: flex; flex-direction: column; background: transparent; border-bottom: 1px solid var(--riga); border-right: 1px solid var(--riga); transition: background .18s var(--ease); } .card:hover { background: var(--penna-velo); } .card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; } .card-body { padding: 1.5rem 1.5rem 1.7rem; } .card-body h3 { margin-bottom: .5rem; } .card:hover .card-body h3 a { color: var(--penna); } .card-body p { font-size: .95rem; color: var(--grafite); margin: 0; } .card-kicker { display: block; margin-bottom: .5rem; } /* Chip dei filtri (core usa