/* Lo stile delle pagine legali: gli stessi gettoni e la stessa tipografia della landing (landing/landing.html), ridotti a quello che serve a una pagina di solo testo. Non e' una tavolozza nuova. Sta in un file solo perche' le pagine di questa cartella sono piu' di una e devono restare uguali: una pagina nuova qui dentro linka questo e ha gia' lo stile giusto. */ :root { --paper: #FAF8F3; --paper-muted: #EDE9DF; --ink: #2F2E2A; --ink-muted: #625C50; --line: #E3DDCE; --accent: #A8543A; --borde: 24px; } * { box-sizing: border-box } html { background: var(--paper) } body { margin: 0; background: var(--paper); color: var(--ink); /* Archivo self-hosted, come la landing e come l'app. Il fallback e' quello della landing, non system-ui. */ font-family: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: 100%; line-height: 1.6; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } main { max-width: 44rem; margin: 0 auto; /* Misura editoriale al centro, ma mai attaccata al bordo dello schermo. */ padding: 3rem var(--borde) 5rem; padding-top: calc(3rem + env(safe-area-inset-top)); padding-bottom: calc(5rem + env(safe-area-inset-bottom)); } a { color: var(--accent); text-decoration: none } a:hover { color: #82442B } /* I nomi tecnici — `_ga`, `pq-cookies` — nella tabella dei cookie. Un dato letterale, non prosa: si distingue senza cambiare peso alla riga. */ code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; background: var(--paper-muted); padding: .1em .35em; border-radius: 4px; } /* L'unico pulsante che una pagina legale ha: «dimentica la mia scelta». Stessa pillola delle azioni del banner nella landing. */ button { font: inherit; cursor: pointer; padding: 11px 20px; border: 1px solid var(--ink); border-radius: 999px; background: none; color: var(--ink); font-size: 11px; font-weight: 700; font-stretch: 112%; letter-spacing: .16em; text-transform: uppercase; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px } /* ── la tipografia della landing ──────────────────────────────────────── Un font solo, sull'asse di larghezza: 62% (il woff2 si ferma a 75%, vedi apps/web/fonts/fonts.css) per i titoli, 100% per il testo, 112% per le etichette maiuscole. */ .kicker { font-size: 11px; font-weight: 700; font-stretch: 112%; letter-spacing: .16em; text-transform: uppercase; line-height: 1; color: var(--ink-muted); margin: 0 0 1.25rem; } h1 { font-stretch: 62%; font-weight: 800; letter-spacing: -.005em; line-height: .84; text-transform: uppercase; font-size: clamp(38px, 8vw, 62px); margin: 0 0 .5rem; } h2 { font-stretch: 62%; font-weight: 800; letter-spacing: -.005em; line-height: .9; text-transform: uppercase; font-size: 26px; margin: 3rem 0 .75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); } h3 { font-size: 17px; font-weight: 700; font-stretch: 100%; line-height: 1.3; margin: 1.75rem 0 .25rem; } p, li { margin: .5rem 0 } ul { padding-left: 1.25rem } nav { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 0 0 2.5rem; font-size: 11px; font-weight: 700; font-stretch: 112%; letter-spacing: .16em; text-transform: uppercase; } /* Il selettore di lingua, gli stessi gettoni della cabecera della landing (landing/landing.html, `.idiomas`): testo, non la pillola di sopra. Ora la pagina mostra una lingua sola — quella che arriva nel link (`?lang=`), o quella del browser — e questo header lascia cambiarla in sessione. */ .idiomas { display: flex; gap: 8px; margin: 0 0 2.5rem } .idiomas button { font: inherit; background: none; border: none; cursor: pointer; color: var(--ink); opacity: .45; padding: 8px 4px; font-size: 11px; font-weight: 700; font-stretch: 112%; letter-spacing: .16em; text-transform: uppercase; } .idiomas button[aria-pressed="true"] { opacity: 1 } /* Resta visibile solo la lingua scelta. La sezione `es` porta `data-on` nel markup, quindi a JavaScript spento — un crawler, o l'URL nudo `/privacy` che verifica Apple — la pagina non e' mai vuota: mostra lo spagnolo. Come la landing, `[data-idioma]` e non `[lang]`, cosi' non tocca . */ [data-idioma]:not([data-on="1"]) { display: none !important } /* La tabella dei dati: filetti e basta, come le righe del programma. */ .tabella { overflow-x: auto; margin: 1rem 0 } table { width: 100%; border-collapse: collapse; font-size: 15px } th, td { text-align: left; vertical-align: top; padding: .625rem .75rem .625rem 0; border-bottom: 1px solid var(--line) } th { color: var(--ink-muted); font-size: 11px; font-weight: 700; font-stretch: 112%; letter-spacing: .16em; text-transform: uppercase; line-height: 1; padding-bottom: .75rem; } /* Il riquadro del contatto: l'unica superficie che non e' carta nuda. Raggio della ficha di Planaqui, angolo alto a sinistra retto. */ .contatto { background: var(--paper-muted); border: 1px solid var(--line); border-radius: 0 16px 16px 16px; padding: 1.5rem; margin: 1.5rem 0; } .contatto p { margin: .25rem 0 } .contatto .grande { font-size: 19px; font-weight: 600; font-stretch: 100%; letter-spacing: -.01em } /* Il piede e' quello della landing: marchio, luogo, i tre link a destra. Due sole differenze, e sono dovute al contesto: qui sta dentro la misura di `main`, e ha un filetto sopra perche' la pagina non cambia fondo sotto. Il `