/* Grupo Dls/ - páginas de documento ============================================================= /politica-de-privacidade e /etica-e-compliance. POR QUE UMA FOLHA, E NÃO REAPROVEITAR `case.css`. Os módulos de case são capítulos: cada um tem tom próprio, respiro grande e um título por vez. Um documento jurídico é o contrário disso - é uma sequência longa de seções curtas numeradas, que a pessoa varre procurando UMA coisa. Empurrar isso para dentro de `.cs` daria 30 capítulos de 128px de respiro cada, e uma página de 12 telas de papel em branco. Ela é curta de propósito: quase toda a tipografia já existe em `type.css` e `layout.css`, e o que sobra aqui é o RITMO do documento - quanto respira entre uma seção e a próxima, e onde a medida de leitura corta. Se algo daqui começar a valer para outra página, sobe. O chão é claro (`data-theme="light"` no ). Texto legal longo em branco sobre preto é hostil: a fonte é Light, o corpo é 17px e a pessoa vai ler 4 mil palavras. Papel. */ .doc-page { background: var(--bg); } /* Mesma decisão da /conteudo e da página de case: sobre chão claro o header se resolve por subtração, sem coreografia de cor. */ .doc-page .header { background: none; mix-blend-mode: difference; } /* O anel de foco amarelo do sistema mede 1,07:1 sobre claro - invisível. Preto com um segundo anel branco por fora, como nas outras páginas de chão claro. */ .doc-page :focus-visible { outline: 2px solid var(--c-black); outline-offset: 3px; box-shadow: 0 0 0 5px var(--c-white); } /* ============================================================ o cabeçalho do documento ============================================================ */ .doc__hero { padding-block: clamp(var(--sp-10), 18vh, var(--sp-11)) clamp(var(--sp-7), 7vh, var(--sp-8)); } .doc__titulo { font-weight: 300; font-size: var(--fs-display-l); line-height: 1.02; letter-spacing: var(--tr-display); max-width: 16ch; margin-block: var(--sp-4) var(--sp-6); } .doc__resumo { font-size: var(--fs-body-l); line-height: 1.5; max-width: 62ch; color: var(--fg-muted); } /* Vigência e última revisão. Documento jurídico sem data é documento sem valor: quem lê precisa saber qual versão está lendo, e quem audita precisa saber desde quando ela vale. */ .doc__datas { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--fg-muted); } /* ============================================================ o índice Não é enfeite. Ninguém lê uma política de privacidade inteira: entra procurando "como apago meus dados" e quer chegar lá em um clique. ============================================================ */ .doc__indice { padding-bottom: clamp(var(--sp-7), 7vh, var(--sp-8)); } .doc__indice ol { columns: 2; column-gap: var(--sp-7); margin: var(--sp-5) 0 0; padding: 0; list-style: none; counter-reset: doc; max-width: 78ch; } @media (max-width: 700px) { .doc__indice ol { columns: 1; } } .doc__indice li { counter-increment: doc; break-inside: avoid; margin-bottom: var(--sp-3); font-size: var(--fs-body); line-height: 1.4; } .doc__indice li::before { content: counter(doc, decimal-leading-zero); margin-right: var(--sp-3); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tr-label); color: var(--fg-muted); } /* ============================================================ o corpo ============================================================ */ .doc__corpo { padding-bottom: clamp(var(--sp-9), 12vh, var(--sp-10)); } /* A medida é 68ch e não a largura da coluna. Linha de 140 caracteres faz o olho perder a volta, e num documento que a pessoa varre isso custa mais que numa página que ela lê de cabo a rabo. */ .doc__secao { max-width: 68ch; padding-top: clamp(var(--sp-7), 7vh, var(--sp-8)); } /* `scroll-margin-top` porque o índice leva a âncoras e o header é fixo: sem isto o título de destino nasce EMBAIXO do header. O valor é lido por `core/scroll.js`, que não chuta - ele pergunta à folha. E ele mora no

, que é QUEM CARREGA O id - não na seção. Com o id na seção, o `padding-top` dela entrava entre o ponto de parada e o título, e o título parava atrás do header mesmo com a margem certa. Medido: parava a 50px, com a base do header em 88px. O valor é o mesmo de `frente.css`, que resolve a mesma coisa nas âncoras de serviço. Um segundo número aqui seria um segundo lugar para a altura do header divergir. */ .doc__secao > h2 { scroll-margin-top: clamp(88px, 12vh, 132px); font-weight: 300; font-size: var(--fs-title); line-height: 1.2; margin-bottom: var(--sp-5); } /* O número da seção vive no `::before` e não no texto do

: leitor de tela anuncia "seção 4, Direitos do titular", e a numeração continua certa se uma seção entrar no meio - o CSS reconta, um humano não. */ .doc__corpo { counter-reset: secao; } .doc__secao { counter-increment: secao; } .doc__secao > h2::before { content: counter(secao, decimal-leading-zero); display: block; margin-bottom: var(--sp-3); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-muted); } .doc__secao h3 { font-weight: 500; font-size: var(--fs-body-l); line-height: 1.3; margin-block: var(--sp-6) var(--sp-3); } .doc__secao p, .doc__secao li { font-size: var(--fs-body); line-height: 1.6; } .doc__secao p + p { margin-top: var(--sp-4); } .doc__secao ul, .doc__secao ol { margin: var(--sp-4) 0 0; padding-left: var(--sp-5); } .doc__secao li + li { margin-top: var(--sp-3); } .doc__secao strong { font-weight: 500; } /* ---------- a tabela de dados ---------- Que dado, para quê, e por qual base legal. É a única parte da política que a ANPD lê primeiro, e em texto corrido ela vira ilegível. Rola dentro da própria caixa em tela estreita. O corpo da página nunca rola de lado - tabela larga é problema da tabela. */ .doc__tabela { overflow-x: auto; margin-top: var(--sp-5); } .doc__tabela table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--fs-small); } .doc__tabela th, .doc__tabela td { padding: var(--sp-3) var(--sp-4) var(--sp-3) 0; text-align: left; vertical-align: top; line-height: 1.45; border-bottom: 1px solid var(--line); } .doc__tabela th { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-muted); white-space: nowrap; } /* ---------- o bloco que falta ---------- VER `src/data/site.js`: todo valor que o cliente ainda não forneceu entra com "PENDENTE:", e uma busca por essa string precisa voltar vazia antes de publicar. Aqui ele é VISÍVEL, e é essa a intenção. Numa política de privacidade a alternativa a um buraco marcado é um buraco preenchido por chute - e chute em documento jurídico é declaração falsa sobre tratamento de dado pessoal. Amarelo de marca, tarja preta: impossível subir sem alguém perguntar o que é isso. */ .doc__pendente { margin-top: var(--sp-5); padding: var(--sp-5); background: var(--c-yellow); color: var(--c-black); border-left: 4px solid var(--c-black); } .doc__pendente b { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tr-label); text-transform: uppercase; } .doc__pendente p { font-size: var(--fs-small); line-height: 1.5; } /* ---------- o pé do documento ---------- Para onde escrever, e o link para o outro documento. Quem termina uma política de privacidade com dúvida tem de ter onde perguntar sem voltar ao topo. */ .doc__fim { max-width: 68ch; margin-top: clamp(var(--sp-8), 9vh, var(--sp-9)); padding-top: var(--sp-6); border-top: 1px solid var(--line); } .doc__fim p + p { margin-top: var(--sp-3); } .doc__fim p { font-size: var(--fs-body); line-height: 1.6; }