/* COPIA DEL KIT — non modificare qui. Sorgente: kit-gruppo/pagina-interna.css (vale per otto siti). Si rigenera con python3 tools/deriva-specialita-da-vam.py */ /* =========================================================================== PAGINA INTERNA — il vestito delle pagine di secondo livello del gruppo --------------------------------------------------------------------------- Che cos'e': le regole che vestono il modello «specialita/pagina interna» del design system (§ `specialita-mockup.html`): hero compatto con briciola di pane, sezioni numerate con indice sticky, e i sei trattamenti grafici del corpo — pastiglie, segnali, elenco servizi, riquadro, citazione, passi numerati, FAQ a fisarmonica. Da dove viene: `vam/struttura/pagina-interna.css`, in produzione su Villa Anna Maria. Il 10/09/2026 e' stata PROMOSSA nel kit condiviso perche' serviva anche a Centro Medico Michelangelo, e una seconda copia sarebbe divergita dalla prima al primo ritocco. Nel kit vale per otto siti. Come si usa: si accoda DOPO il design system del sito (che definisce le variabili: --blue, --ink, --ink-2, --muted, --line, --paper, --sky, --shadow...). Qui non ci sono colori nuovi ne' caratteri nuovi: solo composizione. Le classi che serve conoscere le emette il renderer delle schede — su VAM `wp/vam-specialita-shortcodes.php`, su Michelangelo il file derivato `wp/cmm-specialita-shortcodes.php`. ⚠️ Le modifiche si fanno QUI, non nelle copie: `kit-gruppo/` e' un collegamento alla copia unica in ~/Downloads/_gruppo-nefrocenter/. =========================================================================== */ .crumbs a:hover{color:var(--blue)} .crumbs .cs{color:#b9c2cf} .page-hero{padding:44px 0 56px;position:relative;overflow:hidden} .page-hero .wrap{position:relative} .ph-sq{aspect-ratio:1/1;border-radius:26px;position:relative;overflow:hidden; background:linear-gradient(160deg,#2b56a5,var(--blue-deep));box-shadow:var(--shadow-lg)} .hero-icn{width:48px;height:48px;border-radius:14px;background:var(--blue-tint);color:var(--blue);display:grid;place-items:center;margin-top:28px;box-shadow:0 8px 20px -10px rgba(28,65,132,.25)} .hero-icn svg{width:24px;height:24px} .page-hero .eyebrow{margin-top:16px} .page-hero h1{font-size:clamp(34px,4.6vw,56px);margin-top:14px;color:var(--ink)} .page-hero h1 em{font-style:normal;color:var(--blue)} .page-hero .lead{margin-top:20px;font-size:19px;color:var(--ink-2);max-width:62ch} .chips-info{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px} .chip-i{display:inline-flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line-2);border-radius:100px;padding:8px 16px;font:500 14px 'Inter';color:var(--ink-2)} .chip-i svg{width:15px;height:15px;color:var(--blue)} .page-hero .actions{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap} .band .dots{opacity:.7} .band h2{color:#fff;font-size:clamp(24px,2.8vw,34px);position:relative} .band p{color:#c7d3ea;margin-top:10px;position:relative} .band .actions{position:relative;display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap} .band .band-ghost{color:#fff;border-color:rgba(255,255,255,.4)} .band .band-ghost:hover{border-color:#fff} .band .btn-primary{background:#fff;color:var(--blue)} .az-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:64px;align-items:start} .toc{position:sticky;top:96px} .toc .t-label{font:700 11px 'Inter';letter-spacing:.2em;text-transform:uppercase;color:var(--sky);margin-bottom:12px} .toc a{display:flex;align-items:baseline;gap:10px;padding:9px 0 9px 16px;border-left:2px solid var(--line);font:500 14px 'Inter';color:var(--muted);transition:color .25s var(--ease),border-color .25s var(--ease)} .toc a .tn{font:800 11px 'Manrope';color:#b9c8de;letter-spacing:.06em} .toc a:hover{color:var(--blue)} .toc a.on{border-color:var(--blue);color:var(--blue);font-weight:600} .toc a.on .tn{color:var(--blue)} .az-no{font:800 13px 'Manrope';color:var(--sky);letter-spacing:.14em} .az-sec{padding:72px 0 10px;scroll-margin-top:90px} .az-layout>div>.az-sec:first-child{padding-top:4px} .review-line svg{width:16px;height:16px;color:var(--blue);flex:none} .review-line b{color:var(--ink-2);font-weight:600} .faq details{border-top:1px solid var(--line)} .faq details:last-of-type{border-bottom:1px solid var(--line)} .faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 0;font:700 16.5px 'Manrope';color:var(--ink)} .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--blue)} .faq .fx{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--blue);flex:none;transition:transform .35s var(--ease),background .35s var(--ease)} .faq .fx svg{width:13px;height:13px} .faq details[open] .fx{transform:rotate(45deg);background:var(--blue-tint)} .faq .fa{padding:0 40px 18px 0;color:var(--ink-2);font-size:15px;line-height:1.65;max-width:68ch} .band-light h2{color:var(--ink)} .band-light p{color:var(--ink-2)} .band-light .dots{background-image:radial-gradient(rgba(28,65,132,.10) 1.1px,transparent 1.1px)} .band-light .btn-primary{background:var(--blue);color:#fff} .band-light .btn-primary:hover{background:var(--blue-d)} .band-light .band-ghost{color:var(--blue);border-color:var(--line)} .band-light .band-ghost:hover{border-color:var(--blue)} .sec-blue .cta-box h2{color:#fff} .sec-blue .cta-box p{color:#cdd8ee} .sec-blue .btn-primary{background:#fff;color:var(--blue)} .sec-blue .btn-primary:hover{background:var(--blue-tint)} .az-sec h2{font-size:clamp(26px,3vw,36px);margin-top:8px;overflow:hidden;padding-bottom:.12em} .page-hero h1{overflow:hidden;padding-bottom:.08em} .az-sec>p{color:var(--ink-2);margin-top:14px;line-height:1.7;max-width:70ch} @media (max-width:960px){ .az-layout{grid-template-columns:1fr} .az-sec{padding:44px 0 8px} .toc{display:none} .ph-hero{grid-template-columns:1fr} .ph-sq{display:none} .band{grid-template-columns:1fr} .band .actions{justify-content:flex-start} } /* ===== componenti aggiunti per le pagine specialità di Villa Anna Maria ===== Le tre liste lunghe del documento (patologie, sintomi, servizi) ricevono TRE trattamenti diversi: nuvola di chip, griglia di segnali, elenco editoriale a due colonne. Serve a dare ritmo: tre bullet list di fila sarebbero un muro. */ /* nuvola di chip — "di cosa si occupa" */ .tagcloud{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px} .tagcloud span{display:inline-flex;align-items:center;font:500 14px 'Inter',sans-serif; color:var(--ink-2);background:var(--paper);border:1px solid var(--line); padding:8px 15px;border-radius:100px;transition:border-color .25s var(--ease),color .25s var(--ease)} .tagcloud span:hover{border-color:var(--blue);color:var(--blue)} /* griglia dei segnali — "quando rivolgersi" */ .signals{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:22px; background:var(--line-2);border:1px solid var(--line-2);border-radius:16px;overflow:hidden} .signals div{background:var(--paper);padding:14px 16px;display:flex;align-items:flex-start;gap:10px; font:500 14.5px/1.4 'Inter',sans-serif;color:var(--ink-2)} .signals div::before{content:"";flex:none;width:6px;height:6px;border-radius:50%; background:var(--sky);margin-top:7px} @media(max-width:860px){.signals{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.signals{grid-template-columns:1fr}} /* elenco editoriale a due colonne — "i servizi" */ .svc{columns:2;column-gap:40px;margin-top:22px} .svc li{break-inside:avoid;list-style:none;position:relative;padding:11px 0 11px 18px; border-top:1px solid var(--line-2); font:400 15.5px/1.45 'Inter',sans-serif;color:var(--ink-2)} .svc li::before{content:"";position:absolute;left:0;top:1.05em;width:6px;height:6px; border-radius:50%;background:var(--sky)} .svc li:first-child{border-top:0} @media(max-width:760px){.svc{columns:1}} /* callout — il messaggio da non perdere */ .callout{margin-top:26px;background:var(--blue-tint);border-radius:20px;padding:26px 28px; border-left:3px solid var(--blue)} .callout p{color:var(--ink-2);font-size:16px} .callout p+p{margin-top:12px} .callout b{color:var(--blue-deep)} /* passi della visita */ .steps-v{margin-top:24px;counter-reset:sv} .steps-v li{list-style:none;display:grid;grid-template-columns:44px 1fr;gap:18px; padding:18px 0;border-top:1px solid var(--line-2)} .steps-v li::before{counter-increment:sv;content:counter(sv,decimal-leading-zero); font:400 20px/1 'Manrope',sans-serif;color:var(--sky);font-variant-numeric:tabular-nums;padding-top:3px} .steps-v p{color:var(--ink-2);font-size:15.5px;line-height:1.6} /* citazione istituzionale con asta */ .quote-ed{margin-top:22px;padding-left:22px;border-left:3px solid var(--blue-tint)} .quote-ed p{color:var(--ink-2);font-size:16.5px;line-height:1.65} .quote-ed p+p{margin-top:12px} /* box "prenota" nella sidebar */ .as-box{background:var(--paper);border:1px solid var(--line-2);border-radius:20px; padding:22px;box-shadow:var(--shadow);margin-top:26px} .as-box h3{font:700 17px 'Manrope',sans-serif;color:var(--ink)} .as-box p{margin-top:8px;font-size:13.5px;color:var(--muted);line-height:1.5} .as-box .btn{margin-top:14px;width:100%;justify-content:center} .as-box .as-tel{display:block;margin-top:10px;text-align:center;font:600 14px 'Inter',sans-serif;color:var(--blue)} /* indice: voce attiva (scrollspy) */ .toc a.on{color:var(--blue);border-left-color:var(--blue)} .toc a.on .tn{color:var(--blue)} @media(max-width:1000px){.az-layout{grid-template-columns:minmax(0,1fr)}.toc{display:none}} /* Il box "Prenota" vive dentro