/* ========================================================================= CRESPI — ATTI LEGALI DELL'APP (/app/privacy/, /app/termini/) e /app/supporto/ Vive DOPO styles.css e hero.css e ne riusa i token (--ivory, --bg, --ink, --ink-soft, --line, --olive, --sans, --radius, --testataH) e i comandi .btn/.link-underline/.eyebrow. NESSUN token nuovo. Gli atti arrivano VERBATIM dal progetto dell'app (tools/legali-app/genera.py): il sorgente usa classi nude (.testata, .meta, .comma…) che qui portano il prefisso atto- — nel sito .testata e' la barra di navigazione FISSA. Le regole sono quelle del sorgente, portate nella voce del sito (Inter al posto del Georgia: il sito non ha serif) e tutte chiuse dentro #atto-legale, cosi' vincono sui reset di styles.css (margini a zero, link senza sottolineatura, h1/h2 a peso 500) senza toccare il resto del sito. Pagina sobria: un foglio bianco da ~760px sul Cararra, testo SUBITO visibile anche senza JavaScript — niente .reveal, niente intro. ========================================================================= */ /* fondo Cararra (hero.css mette --foto sul body), contenuto sotto la testata fissa */ body { background: var(--ivory); } .atto-pagina { padding-top: calc(var(--testataH) + clamp(2rem, 5vw, 3.6rem)); padding-bottom: clamp(3.5rem, 8vw, 6rem); } /* .eyebrow e' inline-flex: qui diventa un blocco largo quanto il foglio, a filo del suo bordo sinistro */ .atto-occhiello { display: flex; max-width: 760px; margin: 0 auto 1.1rem; } /* ---------- il foglio (sorgente: .atto) ---------- */ #atto-legale { max-width: 760px; margin: 0 auto; padding: 40px clamp(18px, 4.5vw, 40px) 48px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); font-family: var(--sans); font-size: 1rem; line-height: 1.6; } /* intestazione dell'atto (sorgente: .testata, h1, .sottotitolo, .meta): un blocco NORMALE nel flusso, centrato — non la barra fissa del sito */ #atto-legale .atto-testata { position: static; margin-bottom: 32px; } #atto-legale h1 { text-align: center; font-family: var(--sans); font-size: 1.375rem; font-weight: 700; letter-spacing: .06em; line-height: 1.3; margin: 0 0 8px; text-wrap: balance; } #atto-legale .atto-sottotitolo { text-align: center; font-weight: 700; margin: 0 0 18px; hyphens: manual; -webkit-hyphens: manual; } #atto-legale .atto-meta { text-align: center; margin: 0; font-size: .9375rem; hyphens: manual; -webkit-hyphens: manual; } #atto-legale .atto-meta + .atto-meta { margin-top: 2px; } /* articoli e commi (sorgente: h2, p, p.lett, .comma) */ #atto-legale h2 { font-family: var(--sans); font-size: 1.0625rem; font-weight: 700; line-height: 1.35; margin: 30px 0 10px; scroll-margin-top: calc(var(--testataH) + 16px); } #atto-legale p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; margin: 0 0 10px; } #atto-legale p.atto-lett { margin-left: 2em; } /* sui telefoni il giustificato apre buchi fra le parole (colonna di ~300px): a bandiera e senza sillabazione automatica (spezzava «dell'U-tente», «ope-rativo») */ @media (max-width: 599px) { #atto-legale p { text-align: left; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; } } #atto-legale .atto-comma { font-weight: 700; margin-right: .35em; } #atto-legale strong { font-weight: 700; } /* i link dentro l'atto restano sottolineati (styles.css li azzera); gli URL lunghi vanno a capo invece di allargare la pagina sui telefoni */ /* hyphens: none — la sillabazione del paragrafo metteva negli URL trattini che nel testo non esistono (a schermo da 600px in su e in stampa); break-all li fa andare a capo in qualunque punto, cosi' la riga prima non si stira (Chromium) */ #atto-legale a { color: inherit; text-decoration: underline; text-underline-offset: .15em; overflow-wrap: anywhere; word-break: break-all; hyphens: none; -webkit-hyphens: none; } #atto-legale a:hover { color: var(--olive); } /* tabelle (sorgente: .tabella, table, th, td): scorrono nella PROPRIA scatola */ #atto-legale .atto-tabella { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 12px 0 16px; } #atto-legale .atto-tabella:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } #atto-legale table { border-collapse: collapse; width: 100%; min-width: 560px; margin: 0; font-size: .9375rem; line-height: 1.4; } #atto-legale th, #atto-legale td { border: 1px solid #999; padding: 6px 8px; vertical-align: top; text-align: left; } #atto-legale th { font-weight: 700; } /* colophon (sorgente: .colophon) */ #atto-legale p.atto-colophon { margin: 40px 0 0; padding-top: 12px; border-top: 1px solid #999; text-align: center; font-size: .875rem; hyphens: manual; -webkit-hyphens: manual; } /* ---------- coda: FUORI dall'atto, nello stile del sito ---------- */ .atto-coda { max-width: 760px; margin: clamp(1.8rem, 4vw, 2.6rem) auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.6rem; } .atto-coda .link-underline { margin-top: 0; } @media (max-width: 599px) { .atto-coda { flex-direction: column; align-items: flex-start; } /* a 320px «Condizioni generali di utilizzo» in una riga sola usciva dallo schermo di 7px */ .atto-coda .btn { white-space: normal; text-align: center; max-width: 100%; } } /* telefoni in orizzontale: il link di coda su una riga sua, fuori dal semaforo fisso in basso a destra (stessa cura di .e404__azioni in legale.css) */ @media (max-height: 500px) and (orientation: landscape) { .atto-coda { row-gap: .6rem; } .atto-coda::after { content: ""; flex-basis: 100%; order: 1; } .atto-coda .link-underline { order: 2; } } /* ---------- /app/supporto/ (stampo di legale.css): recapiti e documenti ---------- La colonna .leg-testo veste ogni