/* Lo stile comune delle PAGINE AUTONOME del sito: guide, documenti legali, e via via le altre man mano che escono da `index.html`. Poche righe — colori, caratteri, intestazione e piede — perché il resto lo mette il foglio della singola pagina. ⚠️ NON riusa lo stile di index.html: quel file pesa 708 KB perché contiene tutta l'applicazione, e caricarlo per leggere una pagina di testo sarebbe il difetto che queste pagine servono a evitare. ⚠️⚠️ Intestazione e piede sono una COPIA delle regole del sito, non un riuso: gli originali stanno DENTRO index.html (CSS in linea). Vanno tenuti allineati a mano, e la marcatura gemella sta in `_testa_sito()` e `_piede_sito()` in `app/main.py`. */ /* ⚠️⚠️ I VALORI SONO QUELLI DI `index.html`, alla virgola. Tre erano diversi — `--line` a .12 invece di .09, `--faint` #8b9ba0 invece di #8aa0a5, `--brand-soft` a .10 invece di .12 — ed è bastato per far uscire i bordi delle sezioni di un grigio più scuro: il confronto pixel per pixel di /agenzie prima e dopo li ha trovati come righe intere diverse. Un colore «quasi uguale» qui vale un sito che non è più lo stesso. */ :root { --brand: #2f97b3; --brand-ink: #0b5f78; --brand-soft: rgba(47,151,179,.12); --ink: #1c2f36; --muted: #5a6d73; --faint: #8aa0a5; --line: rgba(28,47,54,.09); --bg: #edefee; --card: #ffffff; --card-soft: #f4f7f7; /* riquadri interni alle card */ --serif: 'Spectral', Georgia, 'Times New Roman', serif; --sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; } * { box-sizing: border-box; } /* ⚠️ Misure IDENTICHE a quelle di `index.html`: 16px e 1.5. Erano 17px e 1.65 — le misure da lettura nate per le guide — e su /agenzie spostavano in basso ogni riga che non avesse una misura sua, per 49px a fondo pagina. Chi vuole il testo più largo se lo prende nel proprio foglio, come fa `guide.css`. */ body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* ⚠️⚠️ Il contenitore di pagina, identico a quello di `index.html`, e NON si può togliere: le strisce di case del piede escono dai bordi di proposito, e a contenerle dev'essere QUESTO, non il . Su `body` l'`overflow-x` viene propagato al viewport: invece di ritagliare allarga il documento, e il risultato — visto il 01/09/2026 su tablet e portatili — è la pagina schiacciata a sinistra con una fascia vuota a destra, e sul telefono il menu a scomparsa (`position: fixed; right: 0`) che si apre fuori schermo. */ .lp-pagina { position: relative; width: 100%; overflow-x: clip; } /* ⚠️ Ricopiata dal sito, dove è una regola sul TAG: colora di grigio tutto il piede, marchio compreso. Senza, il «TrueDomus» in fondo veniva nero invece che grigio — il confronto pixel per pixel con la pagina di prima l'ha trovato in 430 pixel. */ footer { text-align: center; color: var(--muted); font-size: 12px; margin-top: 30px; } .logo { font-family: var(--serif); font-weight: 600; font-size: 34px; letter-spacing: -.02em; } .logo span { color: var(--brand); } .site-head { position: sticky; top: 0; z-index: 50; background: rgba(237,239,238,.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .site-head .inner { max-width: 1160px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 28px; } /* ⚠️ Nel sito il marchio è un

mosso dal JS; qui è un collegamento vero alla home, quindi gli va tolta la veste da link. */ .site-head .logo { font-size: 26px; color: var(--ink); text-decoration: none; } .site-nav { display: flex; gap: 26px; font-size: 13.5px; color: var(--muted); } .site-nav a { color: inherit; text-decoration: none; cursor: pointer; } .site-nav a:hover { color: var(--brand); } /* La voce della pagina in cui ci si trova, accesa con la sua sottolineatura. ⚠️ Ricopiate da `index.html`: là la classe la mette `segnaVoceAttiva()` a ogni cambio di vista, qui la scrive il server, perché la pagina è una sola e non cambia. */ .site-nav a.attiva { color: var(--brand); position: relative; } .site-nav a.attiva::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; border-radius: 2px; background: var(--brand); } .btn-menu { display: none; background: transparent; border: 1px solid var(--line); color: var(--ink); border-radius: 9px; width: 38px; height: 38px; cursor: pointer; align-items: center; justify-content: center; font-size: 20px; padding: 0; } /* Il pannello degli schermi stretti: fisso al viewport e agganciato a destra, si appoggia sotto l'intestazione (che è sticky) senza spostare di un pixel ciò che c'è sotto. */ .menu-mobile { display: none; position: fixed; top: 0; right: 0; z-index: 60; width: max-content; max-width: calc(100vw - 24px); flex-direction: column; gap: 2px; padding: 8px 18px 14px; text-align: right; background: rgba(237,239,238,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); border-top: none; border-radius: 0 0 0 14px; box-shadow: 0 18px 40px rgba(0,0,0,.16); } .menu-mobile a { color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 600; padding: 12px 0; cursor: pointer; border-bottom: 1px solid var(--line); } .menu-mobile a:last-of-type { border-bottom: none; } .menu-mobile a.attiva { color: var(--brand); border-bottom: 2px solid var(--brand); } .menu-mobile .btn-accedi { display: block; margin-top: 10px; width: 100%; font-size: 14px; padding: 11px 17px; } /* ⚠️ Nel sito «Accedi» è un