/* ============================================================================ DieteticAI — Pagine legali ---------------------------------------------------------------------------- Layer visuale per privacy/cookie/termini/disclaimer. Riusa i token definiti in /static/css/app.css (dark/light x azzurro/rosa, hairline, glass). Nessun colore cablato: tutto via custom properties cosi' se cambiamo i token centrali cambiano anche le pagine legali. ============================================================================ */ /* --- Struttura pagina ----------------------------------------------------- */ body.legal-page { display: flex; flex-direction: column; min-height: 100vh; font-family: var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Disattiva l'effect dell'ambient canvas: le pagine legali non hanno il layer animato del'app principale. Lo facciamo restando trasparenti: il colore di fondo lo disegna gia' . */ #ambient-canvas { display: none; } .legal-shell { flex: 1; display: flex; flex-direction: column; } /* --- Topbar (solo brand + ritorno all'app, niente controlli di tema) ------ Niente toggle tema qui perche' la preferenza vive su localStorage e la pagina legale eredita l'attributo data-mode/data-accent dal main app se servita dallo stesso origin: l'utente non deve ri-configurare niente. */ .legal-topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding: 12px 22px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); } .legal-topbar .brand a { display: flex; align-items: center; gap: 10px; font-weight: 680; font-size: var(--fs-lg); letter-spacing: -0.028em; color: var(--fg); text-decoration: none; } .legal-topbar .brand a:hover { color: var(--fg); } .legal-topbar .brand-img { width: 26px; height: 26px; display: block; filter: drop-shadow(0 0 10px var(--glow)); } .legal-topbar .back { color: var(--fg-2); font-size: var(--fs-sm); text-decoration: none; transition: color 160ms var(--ease); } .legal-topbar .back:hover { color: var(--accent-strong); } /* --- Area di lettura ------------------------------------------------------ */ /* Larghezza di lettura comoda (~65 caratteri), allineata centralmente. */ .legal-main { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: var(--sp-6) var(--sp-5) var(--sp-7); } /* --- Intestazione pagina -------------------------------------------------- */ .legal-page-head { margin-bottom: var(--sp-5); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line); } .legal-page-head h1 { font-size: var(--fs-hero); letter-spacing: -0.03em; margin: 0 0 var(--sp-4); font-weight: 640; line-height: 1.15; } .legal-page-head .meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; font-size: var(--fs-xs); color: var(--fg-2); } .legal-page-head .pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--line); font-size: var(--fs-micro); font-weight: 620; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); font-variant-numeric: tabular-nums; } /* --- Indice (TOC) --------------------------------------------------------- */ .legal-toc { margin: var(--sp-2) 0 var(--sp-6); padding: var(--sp-4); background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-md); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); } .legal-toc h2 { font-size: var(--fs-micro); font-weight: 620; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 var(--sp-3); } .legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; } .legal-toc li { counter-increment: toc; display: flex; align-items: baseline; gap: var(--sp-3); padding: 6px 0; border-bottom: 1px solid var(--line); } .legal-toc li:last-child { border-bottom: none; } .legal-toc li::before { content: counter(toc) "."; flex-shrink: 0; width: 28px; font-variant-numeric: tabular-nums; color: var(--fg-3); font-weight: 620; } .legal-toc a { flex: 1; font-size: var(--fs-base); color: var(--fg-2); text-decoration: none; transition: color 160ms var(--ease); } .legal-toc a:hover { color: var(--accent-strong); } /* Reset del counter delle sezioni: ogni pagina ricomincia da 1. */ .legal-body { counter-reset: section; } /* --- Sezioni numerate ---------------------------------------------------- */ .legal-section { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--line); scroll-margin-top: 84px; /* topbar sticky non copre l'inizio sezione */ } .legal-section:first-of-type { border-top: none; margin-top: 0; padding-top: 0; } .legal-section h2 { font-size: var(--fs-xl); letter-spacing: -0.02em; margin: 0 0 var(--sp-4); font-weight: 640; display: flex; align-items: baseline; gap: var(--sp-3); counter-increment: section; } .legal-section h2::before { content: counter(section) "."; color: var(--accent-strong); font-variant-numeric: tabular-nums; font-size: var(--fs-xl); font-weight: 640; flex-shrink: 0; } .legal-section h3 { font-size: var(--fs-md); letter-spacing: -0.015em; margin: var(--sp-5) 0 var(--sp-2); font-weight: 640; } .legal-section p, .legal-section li { color: var(--fg-2); font-size: var(--fs-base); line-height: 1.65; } .legal-section p { margin: 0 0 var(--sp-3); } .legal-section p:last-child { margin-bottom: 0; } .legal-section ul, .legal-section ol { margin: 0 0 var(--sp-4); padding-left: 22px; } .legal-section ul li, .legal-section ol li { margin-bottom: 6px; } .legal-section ul:last-child, .legal-section ol:last-child { margin-bottom: 0; } .legal-section strong { color: var(--fg); font-weight: 580; } .legal-section a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--accent-line); } .legal-section a:hover { color: var(--accent-2); } /* --- Callout (per highlight di punti chiave, es. disclaimer medico) ----- */ .legal-callout { margin: var(--sp-4) 0; padding: var(--sp-4); border-radius: var(--r-md); background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--fg); font-size: var(--fs-base); line-height: 1.6; } .legal-callout strong { color: var(--accent-strong); } .legal-callout p { margin: 0; } .legal-callout p + p { margin-top: var(--sp-3); } .legal-callout.warn { background: color-mix(in srgb, var(--warn) 12%, transparent); border-color: color-mix(in srgb, var(--warn) 32%, transparent); } .legal-callout.warn strong { color: var(--warn); } /* --- Tabella cookie ------------------------------------------------------- */ .cookie-table-wrap { margin: var(--sp-4) 0 var(--sp-5); border-radius: var(--r-md); overflow-x: auto; border: 1px solid var(--line); background: var(--surface-2); } .cookie-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 560px; /* forza scroll orizzontale su mobile stretto */ } .cookie-table th, .cookie-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--fg-2); line-height: 1.5; } .cookie-table thead th { background: var(--surface-1); font-size: var(--fs-micro); font-weight: 620; letter-spacing: 0.09em; text-transform: uppercase; color: var(--fg-3); position: sticky; top: 0; } .cookie-table tbody tr:last-child td { border-bottom: none; } .cookie-table tbody tr:hover { background: var(--surface-3); } .cookie-table code { font-family: var(--font-mono); font-size: 0.92em; padding: 2px 7px; border-radius: 5px; background: var(--surface-3); color: var(--fg); border: 1px solid var(--line); } .cookie-table .tag { display: inline-block; padding: 2px 9px; border-radius: var(--r-full); font-size: var(--fs-micro); font-weight: 620; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .cookie-table .tag.necessary { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); } .cookie-table .tag.analytics { background: var(--accent-soft); color: var(--accent-strong); } .cookie-table .tag.thirdparty{ background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); } /* Tabella dati sintetica (es. riepilogo conservazione) */ .legal-data-table { width: 100%; border-collapse: collapse; margin: var(--sp-4) 0; font-size: var(--fs-sm); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .legal-data-table th, .legal-data-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.5; } .legal-data-table thead th { background: var(--surface-2); font-size: var(--fs-micro); font-weight: 620; letter-spacing: 0.09em; text-transform: uppercase; color: var(--fg-3); } .legal-data-table tbody tr:last-child td { border-bottom: none; } .legal-data-table tbody td:first-child { color: var(--fg); font-weight: 560; } /* --- Footer --------------------------------------------------------------- */ .legal-footer { padding: var(--sp-5) var(--sp-5) var(--sp-6); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 70%, transparent); } .legal-footer-inner { width: 100%; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; } .legal-footer .links { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-sm); } .legal-footer .links a { color: var(--fg-2); text-decoration: none; transition: color 160ms var(--ease); } .legal-footer .links a:hover { color: var(--accent-strong); } .legal-footer .links a.active { color: var(--accent-strong); font-weight: 600; } .legal-footer .copyright { font-size: var(--fs-xs); color: var(--fg-3); } .legal-footer .copyright a { color: var(--fg-2); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line-strong); } /* --- Responsive ----------------------------------------------------------- */ @media (max-width: 640px) { .legal-main { padding: var(--sp-4) var(--sp-3) var(--sp-5); } .legal-topbar { padding: 10px 14px; } .legal-page-head h1 { font-size: var(--fs-2xl); } .legal-section h2 { font-size: var(--fs-lg); } .legal-section h2::before { font-size: var(--fs-lg); } .cookie-table th, .cookie-table td { padding: 10px 11px; font-size: var(--fs-xs); } .legal-callout { padding: 14px; } } @media (max-width: 420px) { .legal-page-head .meta { font-size: 11px; } .legal-footer { padding: var(--sp-4) var(--sp-3) var(--sp-5); } .legal-footer .links { gap: var(--sp-3); } } /* --- Stampa --------------------------------------------------------------- */ @media print { .legal-topbar, .legal-footer, .legal-toc { display: none; } .legal-main { max-width: none; padding: 0; } .legal-section { page-break-inside: avoid; } }