/** * documento.css — as páginas jurídicas públicas. * * Mesma linguagem que o e-mail do sistema passou a falar: serifa na coluna de * leitura, sans na camada de sistema, faixa azul da hero e o filete cor de selo. * Política de privacidade e termos são documentos — e o sistema agora tem uma * voz de documento, em vez de uma voz por peça. * * Estas páginas são PÚBLICAS: abrem sem login, sem `gate.js`, sem Firebase. * É requisito de duas coisas ao mesmo tempo — a LGPD, que exige a política * acessível a quem ainda não é usuário, e a verificação de marca do Google, * que busca a página sem sessão nenhuma. * * Sem `theme.js` de propósito: o modo escuro do sistema é `filter: invert(90%)` * no , e invertendo esta página a faixa azul viraria bege. Documento * jurídico não precisa de alternador de tema. */ :root { --doc-marca: #0a1f45; --doc-destaque: #1a3a6e; --doc-selo: #A16207; --doc-tinta: #25303f; --doc-tinta-suave: #5d6b82; --doc-fundo: #eef1f6; --doc-papel: #ffffff; --doc-painel: #f5f8fc; --doc-linha: #dde5f0; --doc-serifa: Georgia, 'Times New Roman', Times, serif; --doc-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } body { margin: 0; padding: 0 0 64px; background: var(--doc-fundo); color: var(--doc-tinta); font-family: var(--doc-serifa); font-size: 17px; line-height: 1.75; -webkit-text-size-adjust: 100%; } /* ── Faixa da marca ─────────────────────────────────────────────────────── */ .doc-topo { background: var(--doc-marca); padding: 26px 24px 24px; } .doc-topo-interno { max-width: 760px; margin: 0 auto; } .doc-marca { display: inline-block; font-family: var(--doc-sans); font-size: 14px; font-weight: 600; letter-spacing: 1.7px; text-transform: uppercase; color: #fff; text-decoration: none; } .doc-marca:hover { text-decoration: underline; text-underline-offset: 4px; } /* O selo: único elemento quente da página, e o mesmo do e-mail. */ .doc-selo { width: 44px; height: 2px; background: var(--doc-selo); margin-top: 15px; } /* ── Folha ──────────────────────────────────────────────────────────────── */ .doc-folha { max-width: 760px; margin: 0 auto; background: var(--doc-papel); border: 1px solid var(--doc-linha); border-top: none; padding: 48px 56px 56px; } .doc-titulo { margin: 0 0 6px; font-size: 34px; font-weight: 400; line-height: 1.2; color: var(--doc-marca); letter-spacing: -0.3px; } .doc-data { margin: 0 0 40px; font-family: var(--doc-sans); font-size: 13px; color: var(--doc-tinta-suave); } /* ── Sumário ────────────────────────────────────────────────────────────── */ .doc-sumario { margin: 0 0 48px; padding: 24px 26px; background: var(--doc-painel); border-left: 3px solid var(--doc-destaque); } .doc-sumario h2 { margin: 0 0 14px; font-family: var(--doc-sans); font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--doc-destaque); } .doc-sumario ol { margin: 0; padding-left: 22px; font-size: 16px; line-height: 1.9; } .doc-sumario a { color: var(--doc-tinta); text-decoration: none; } .doc-sumario a:hover { text-decoration: underline; text-underline-offset: 3px; } /* ── Seções ─────────────────────────────────────────────────────────────── */ /* Numeração automática: um documento jurídico É uma sequência numerada, e citar "item 7" é como se conversa sobre ele. O contador evita a renumeração à mão quando uma seção entra no meio. */ .doc-folha { counter-reset: secao; } .doc-secao { margin: 0 0 44px; } .doc-secao h2 { counter-increment: secao; margin: 0 0 16px; font-size: 21px; font-weight: 400; line-height: 1.3; color: var(--doc-marca); scroll-margin-top: 24px; } .doc-secao h2::before { content: counter(secao, decimal-leading-zero); display: inline-block; min-width: 44px; font-size: 15px; color: var(--doc-selo); vertical-align: baseline; } .doc-secao h3 { margin: 28px 0 10px; font-family: var(--doc-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.6px; color: var(--doc-destaque); } .doc-secao p { margin: 0 0 18px; } .doc-secao ul, .doc-secao ol { margin: 0 0 18px; padding-left: 24px; } .doc-secao li { margin-bottom: 12px; } .doc-secao a { color: var(--doc-destaque); } /* Tabela de dados — mesma gramática da ficha do e-mail: filete fino, rótulo em sans versalete, valor em serifa. */ .doc-tabela { width: 100%; border-collapse: collapse; margin: 4px 0 22px; } .doc-tabela th, .doc-tabela td { padding: 12px 0; border-top: 1px solid var(--doc-linha); vertical-align: top; text-align: left; } .doc-tabela tr:last-child td, .doc-tabela tr:last-child th { border-bottom: 1px solid var(--doc-linha); } .doc-tabela th { width: 34%; padding-right: 20px; font-family: var(--doc-sans); font-size: 11px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; color: var(--doc-tinta-suave); } .doc-tabela td { font-size: 16px; line-height: 1.6; } /* Caixa de atenção — o mesmo painel com filete do e-mail. */ .doc-nota { margin: 26px 0; padding: 22px 26px; background: var(--doc-painel); border-left: 3px solid var(--doc-destaque); } .doc-nota > :first-child { margin-top: 0; } .doc-nota > :last-child { margin-bottom: 0; } /* ── Rodapé ─────────────────────────────────────────────────────────────── */ .doc-rodape { margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--doc-linha); font-family: var(--doc-sans); font-size: 13px; line-height: 1.75; color: var(--doc-tinta-suave); } .doc-rodape a { color: var(--doc-destaque); } /* ── Foco visível ───────────────────────────────────────────────────────── */ a:focus-visible { outline: 2px solid var(--doc-selo); outline-offset: 3px; border-radius: 2px; } /* ── Telas estreitas ────────────────────────────────────────────────────── */ @media (max-width: 640px) { body { font-size: 16px; } .doc-folha { padding: 32px 22px 40px; border-left: none; border-right: none; } .doc-topo { padding: 22px 22px 20px; } .doc-titulo { font-size: 27px; } .doc-secao h2 { font-size: 19px; } /* O numeral sai da margem e vai para cima do título: com 22px de respiro lateral, uma coluna de 44px comeria um quinto da linha. */ .doc-secao h2::before { display: block; min-width: 0; margin-bottom: 2px; } .doc-tabela th, .doc-tabela td { display: block; width: 100%; padding-right: 0; } .doc-tabela th { border-bottom: none; padding-bottom: 2px; } .doc-tabela td { border-top: none; padding-top: 0; } .doc-tabela tr:last-child td { border-bottom: 1px solid var(--doc-linha); } } @media print { body { background: #fff; } .doc-folha { border: none; max-width: none; padding: 0; } .doc-topo { background: none; padding-left: 0; } .doc-marca { color: #000; } }