/* ============================================================================= Páginas de documento — Termos, Privacidade, Exclusão de dados ============================================================================= Uma folha só para as três. Antes cada arquivo carregava a própria cópia do CSS embutida no , e as três já tinham divergido em detalhes: a mesma empresa aparecia com três larguras de leitura e dois tamanhos de título. Os tokens são os da página de vendas (lp.css) de propósito. Quem sai do site para ler os termos não deveria sentir que trocou de empresa no caminho — e a página de um documento jurídico é justamente onde a impressão de desleixo custa caro. O documento inteiro é HTML estático. O script da página só monta o índice lateral a partir dos

: é navegação, não conteúdo. Sem JavaScript a página continua legível do começo ao fim, que é o que importa aqui. ========================================================================== */ :root { color-scheme: light; --ink: #0A0E2A; --ink-2: #141A45; --brand: #3A3AC9; --brand-600: #2B2BA4; --brand-300: #9A9CF2; --brand-100: #DDDEFC; --brand-50: #EFF0FE; --paper: #FFFFFF; --mist: #F5F6FD; --line: #E5E7F6; --muted: #5B6187; --muted-2: #868CB3; --ok: #0E8A5F; --ok-bg: #E3F6EE; --ok-line: #BEE6D4; --font-display: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif; --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace; --cabecalho: 64px; /* altura do topo fixo, usada pelo scroll-margin */ } /* O painel do produto tem tema escuro e estas páginas não têm onde guardar uma escolha — então seguem a do sistema operacional, que é a única que existe aqui. Só os tokens mudam; nenhuma cor é declarada dentro deste bloco. */ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --ink: #ECEEFB; --ink-2: #C6CAE6; --brand: #9A9CF2; --brand-600: #B6B8FA; --brand-100: #2A2D5E; --brand-50: #1B1D3E; --paper: #0D0F22; --mist: #14162F; --line: #262A4B; --muted: #9297BC; --muted-2: #757AA0; --ok: #4ED3A0; --ok-bg: #143A2C; --ok-line: #1F5943; --brand-300: #6F72C9; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--paper); color: var(--ink-2); font-family: var(--font-body); font-size: 16.5px; line-height: 1.75; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--brand); text-underline-offset: 2px; } a:hover { color: var(--brand-600); } /* ----------------------------------------------------------------------------- Topo -------------------------------------------------------------------------- */ .lg-topo { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); } .lg-topo-in { max-width: 1080px; margin: 0 auto; height: var(--cabecalho); padding: 0 clamp(18px, 4vw, 34px); display: flex; align-items: center; gap: 14px; } /* A marca. Mesma construção da página de vendas: a assinatura é distribuída por `space-between` até medir exatamente a largura do nome acima dela, então trocar uma palavra não exige recalcular espaçamento nenhum. */ .lg-marca { display: flex; align-items: center; gap: 11px; text-decoration: none; min-width: 0; } .lg-marca img { width: 34px; height: 34px; border-radius: 10px; flex: none; } .lg-marca-txt { display: flex; flex-direction: column; align-items: stretch; min-width: 0; } .lg-marca-nome { font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: -.03em; color: var(--ink); white-space: nowrap; line-height: 1.15; } .lg-marca-sub { display: flex; justify-content: space-between; width: 100%; white-space: nowrap; font-family: var(--font-mono); font-weight: 500; font-size: 7.5px; line-height: 1; color: var(--muted-2); margin-top: 3px; } .lg-marca-sub i { font-style: normal; } .lg-voltar { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 14px; font-weight: 600; text-decoration: none; color: var(--ink); transition: border-color .18s ease, background .18s ease; } .lg-voltar:hover { border-color: var(--brand); background: var(--brand-50); color: var(--brand); } .lg-voltar svg { flex: none; } /* ----------------------------------------------------------------------------- Capa -------------------------------------------------------------------------- */ .lg-capa { border-bottom: 1px solid var(--line); background: radial-gradient(900px 340px at 12% -40%, var(--brand-50), transparent 70%), var(--mist); } .lg-capa-in { max-width: 1080px; margin: 0 auto; padding: clamp(38px, 6vw, 62px) clamp(18px, 4vw, 34px) clamp(30px, 4vw, 46px); } .lg-etiqueta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); background: var(--brand-50); border: 1px solid var(--brand-100); padding: 5px 11px; border-radius: 999px; margin-bottom: 18px; } .lg-capa h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 5.4vw, 46px); line-height: 1.05; letter-spacing: -.04em; color: var(--ink); margin: 0 0 12px; max-width: 18ch; text-wrap: balance; } .lg-linha-fina { margin: 0; font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 60ch; } .lg-data { margin: 20px 0 0; font-family: var(--font-mono); font-size: 12.5px; color: var(--muted-2); letter-spacing: .02em; } /* ----------------------------------------------------------------------------- Corpo: índice grudado + o documento -------------------------------------------------------------------------- */ .lg-corpo { max-width: 1080px; margin: 0 auto; padding: clamp(28px, 4vw, 52px) clamp(18px, 4vw, 34px) 90px; display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; } .lg-indice { position: sticky; top: calc(var(--cabecalho) + 24px); } /* No trilho de desktop a gaveta não existe: o índice está sempre à vista. A caixa fica acessível ao teclado, fora da tela mas focável — escondê-la com `display:none` a tiraria da ordem de tabulação e o rótulo pararia de responder ao Enter. */ .lg-idx-ck { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .lg-idx-bt { display: none; } .lg-indice-rot { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 10px; } .lg-indice ol { list-style: none; margin: 0; padding: 0; counter-reset: idx; } .lg-indice a { display: flex; gap: 9px; padding: 6px 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); text-decoration: none; transition: color .16s ease; } /* O número sai do mesmo contador que numera os títulos: um só lugar decide a numeração, e ela não pode divergir entre o índice e o documento. */ .lg-indice li { counter-increment: idx; } .lg-indice a::before { content: counter(idx); flex: none; width: 1.4em; font-family: var(--font-mono); font-size: 11px; color: var(--muted-2); padding-top: 2px; } .lg-indice a:hover { color: var(--brand); } .lg-indice a.aqui { color: var(--brand); font-weight: 600; } .lg-indice a.aqui::before { color: var(--brand); } /* ---- o documento ---- */ .lg-doc { min-width: 0; max-width: 68ch; counter-reset: sec; } .lg-doc > p:first-child { font-size: 17.5px; color: var(--ink-2); } .lg-doc h2 { counter-increment: sec; font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.6vw, 24px); line-height: 1.22; letter-spacing: -.03em; color: var(--ink); margin: 52px 0 14px; scroll-margin-top: calc(var(--cabecalho) + 20px); display: flex; gap: 12px; align-items: baseline; text-wrap: balance; } .lg-doc h2::before { content: counter(sec); flex: none; font-family: var(--font-mono); font-weight: 500; font-size: 13px; color: var(--brand); padding-top: 2px; } .lg-doc h2:first-of-type { margin-top: 8px; } .lg-doc p { margin: 0 0 16px; } .lg-doc ul, .lg-doc ol { margin: 0 0 18px; padding-left: 0; list-style: none; } .lg-doc li { position: relative; padding-left: 26px; margin-bottom: 10px; } /* Marcador desenhado em vez do do navegador: o padrão fica grudado no texto e some no corpo 16px. Um quadradinho na cor da marca guia o olho na varredura, que é como se lê documento longo. */ .lg-doc ul > li::before { content: ''; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--brand-300); opacity: .8; } .lg-doc ol { counter-reset: passo; } .lg-doc ol > li { counter-increment: passo; } .lg-doc ol > li::before { content: counter(passo); position: absolute; left: 0; top: .1em; width: 19px; height: 19px; border-radius: 6px; background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand); font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; display: grid; place-items: center; } .lg-doc strong { color: var(--ink); font-weight: 700; } .lg-doc code { font-family: var(--font-mono); font-size: .88em; background: var(--mist); border: 1px solid var(--line); padding: 1px 6px; border-radius: 6px; color: var(--ink); } /* ---- blocos de destaque ---- */ /* O que a pessoa precisa saber mesmo que leia só uma coisa da página. */ .lg-nota { margin: 26px 0; padding: 18px 22px; background: var(--brand-50); border: 1px solid var(--brand-100); border-left: 3px solid var(--brand); border-radius: 0 14px 14px 0; } .lg-nota p:last-child { margin-bottom: 0; } .lg-caixa { margin: 26px 0; padding: 22px 24px; background: var(--mist); border: 1px solid var(--line); border-radius: 16px; } .lg-caixa p:last-child { margin-bottom: 0; } .lg-caixa-tit { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -.02em; color: var(--ink); margin: 0 0 8px; } /* O resumo do topo: o documento em quatro linhas, para quem não vai ler as quarenta. Não substitui o texto — e diz isso. */ .lg-resumo { margin: 0 0 34px; padding: 22px 24px; border: 1px solid var(--ok-line); background: var(--ok-bg); border-radius: 16px; } .lg-resumo .lg-caixa-tit { color: var(--ok); display: flex; align-items: center; gap: 8px; } .lg-resumo ul { margin: 0 !important; } .lg-resumo li { margin-bottom: 7px; } .lg-resumo li:last-child { margin-bottom: 0; } .lg-resumo ul > li::before { background: var(--ok); opacity: .75; } .lg-resumo .lg-nota-pe { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; } /* ----------------------------------------------------------------------------- Rodapé -------------------------------------------------------------------------- */ .lg-pe { border-top: 1px solid var(--line); background: var(--mist); } .lg-pe-in { max-width: 1080px; margin: 0 auto; padding: 34px clamp(18px, 4vw, 34px) 46px; display: flex; flex-wrap: wrap; gap: 20px 34px; align-items: flex-start; } .lg-pe-marca { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--ink); letter-spacing: -.02em; } .lg-pe-cnpj { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted-2); max-width: 44ch; } .lg-pe-links { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; } .lg-pe-links a { text-decoration: none; color: var(--muted); font-weight: 500; } .lg-pe-links a:hover { color: var(--brand); } /* ----------------------------------------------------------------------------- Celular -------------------------------------------------------------------------- */ @media (max-width: 880px) { .lg-corpo { grid-template-columns: 1fr; gap: 24px; } /* O índice deixa de ser trilho e vira uma gaveta fechada no topo do texto. Grudado ele comeria metade da tela; escondido de vez, documento de vinte seções vira rolagem cega. */ .lg-indice { position: static; border: 1px solid var(--line); border-radius: 14px; background: var(--mist); overflow: hidden; } .lg-indice-rot { display: none; } .lg-idx-bt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; cursor: pointer; user-select: none; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .lg-idx-ck:focus-visible + .lg-idx-bt { outline: 2px solid var(--brand); outline-offset: -2px; } .lg-idx-bt svg { flex: none; transition: rotate .18s ease; } .lg-idx-ck:checked + .lg-idx-bt svg { rotate: 180deg; } .lg-idx-ck:not(:checked) ~ ol { display: none; } .lg-indice ol { padding: 0 18px 14px; } .lg-indice a { padding: 7px 0; font-size: 14px; } } @media (max-width: 560px) { body { font-size: 16px; } .lg-voltar { padding: 8px 12px; } .lg-voltar span { display: none; } .lg-doc h2 { margin-top: 40px; } .lg-pe-links { margin-left: 0; width: 100%; } } /* ----------------------------------------------------------------------------- Impressão — documento jurídico acaba impresso e anexado a contrato -------------------------------------------------------------------------- */ @media print { .lg-topo, .lg-indice, .lg-voltar { display: none !important; } .lg-capa { background: none; border-bottom: 1px solid #ccc; } .lg-corpo { display: block; padding: 0; } .lg-doc { max-width: none; } body { font-size: 11pt; color: #000; background: #fff; } .lg-doc h2 { break-after: avoid; } .lg-nota, .lg-caixa, .lg-resumo { break-inside: avoid; border: 1px solid #bbb; background: none; } a { color: #000; } /* Num papel, um link sem endereço é um beco sem saída. */ .lg-doc a[href^="http"]::after, .lg-doc a[href^="mailto"]::after { content: ' (' attr(href) ')'; font-size: .82em; color: #444; } }