/* ===== Páginas de documento (privacidade, termos, reembolso) ===== Mesma linguagem visual da home: as variáveis, a tipografia, a tela de abertura e o rodapé escuro. O corpo fica na "folha" clara porque documento longo se lê melhor em papel — mas entra e sai do site sem degrau. As três páginas são geradas por _build/paginas.py; este arquivo é a única folha de estilo delas além do css2.css (que só tem @font-face). */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --verde:#1B9E4B; --papel:#F7F5F2; --papel2:#FFFFFF; --tinta:#141312; --corpo:rgba(20,19,18,.66); --fraco:rgba(20,19,18,.40); --fio:rgba(20,19,18,.12); --acento:#2F6BD8; --escuro:#16171A; --e:cubic-bezier(.2,.7,.3,1); } html{-webkit-text-size-adjust:100%} body{background:var(--escuro);color:var(--corpo); font-family:'Inter Tight',system-ui,sans-serif;font-size:17px;line-height:1.65; -webkit-font-smoothing:antialiased} /* ===== Tela de abertura ===== A mesma da home e do ODESSA ADS. O JS no fim da página monta os pixels; sem JS, preSemJs esconde a tela sozinha; com prefers-reduced-motion ela nem aparece. */ .pre{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center; animation:preSemJs .5s ease 2.5s forwards} .pre.comJs{animation:none} .pre.saindo{pointer-events:none} .preFundo{position:absolute;inset:0;background:var(--tinta);transition:opacity 1s ease} .pre.saindo .preFundo{opacity:0} .prePx{position:absolute;inset:0;display:grid; grid-template-columns:repeat(var(--cols,1),1fr);grid-template-rows:repeat(var(--rows,1),1fr)} .prePx i{background:var(--tinta)} .prePx i.fora{background:transparent} .preLogo{position:relative;z-index:2;width:250px;height:auto;animation:preLogoEntra .7s ease both} .pre.saindo .preLogo{animation:preLogoSai .7s ease forwards} @keyframes preLogoEntra{from{opacity:0;transform:scale(1.5)}to{opacity:1;transform:none}} @keyframes preLogoSai{from{opacity:1}to{opacity:0}} @keyframes preSemJs{to{opacity:0;visibility:hidden}} @media(prefers-reduced-motion:reduce){.pre{display:none}} /* ===== Entrada do conteúdo ===== A folha sobe quando a abertura sai — é a transição que a home tem e que faltava aqui. Só esconde quando há JS pra trazer de volta (a classe .js é posta no pelo script do topo): sem JS a folha nasce no lugar. */ .js .folha{opacity:0;transform:translateY(18px)} .js .folha.entrou{opacity:1;transform:none; transition:opacity .7s var(--e),transform .7s var(--e)} @media(prefers-reduced-motion:reduce){ .js .folha{opacity:1;transform:none;transition:none} } /* ===== Folha ===== */ /* A folha vai de borda a borda: fundo claro na largura toda da janela, e so o conteudo (.doc) fica na medida de leitura. Antes ela era uma coluna de 880px sobre o corpo escuro, e sobravam duas faixas pretas nas laterais — a pagina parecia um PDF solto em cima do site. */ .folha{background:var(--papel); padding:clamp(40px,7vw,96px) clamp(22px,6vw,80px) clamp(56px,7vw,96px)} .doc{max-width:880px;margin:0 auto} a{color:var(--acento)} a:hover{opacity:.78} .topo{display:flex;align-items:center;justify-content:space-between;gap:20px; flex-wrap:wrap;padding-bottom:26px;margin-bottom:clamp(26px,4vw,40px); border-bottom:1px solid var(--fio)} .marca{display:flex;align-items:center;gap:11px;text-decoration:none} .marca img{width:28px;height:28px;display:block} .marca b{font-size:19px;font-weight:600;color:var(--tinta);letter-spacing:-.01em} .volta{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;font-weight:700; letter-spacing:.12em;text-transform:uppercase;text-decoration:none; color:var(--fraco);transition:color .25s var(--e)} .volta:hover{color:var(--tinta);opacity:1} h1{font-size:clamp(30px,4.4vw,46px);line-height:1.08;letter-spacing:-.035em; color:var(--tinta);font-weight:600;margin-bottom:12px} .data{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;font-weight:700; letter-spacing:.12em;text-transform:uppercase;color:var(--fraco);margin-bottom:clamp(26px,3vw,36px)} /* resumo em uma linha, no topo do documento */ .resumo{border-left:3px solid var(--tinta);background:rgba(20,19,18,.04); border-radius:0 10px 10px 0;padding:18px 22px;margin-bottom:clamp(30px,4vw,46px)} .resumo p{margin:0;max-width:none;color:var(--tinta)} .resumo b{font-weight:600} h2{font-size:clamp(20px,2.1vw,25px);line-height:1.22;letter-spacing:-.025em; color:var(--tinta);font-weight:600;margin:clamp(34px,4.4vw,52px) 0 14px; scroll-margin-top:24px} h3{font-size:17px;line-height:1.35;color:var(--tinta);font-weight:600;margin:26px 0 8px} p{margin-bottom:15px;max-width:66ch} ul,ol{margin:0 0 15px 22px;max-width:66ch} li{margin-bottom:9px} strong{color:var(--tinta);font-weight:600} code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.88em; background:rgba(20,19,18,.06);padding:2px 6px;border-radius:5px} /* índice do documento */ .indice{border:1px solid var(--fio);border-radius:12px;padding:20px 24px; margin-bottom:clamp(30px,4vw,44px);background:var(--papel2)} .indice b{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px; font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fraco);margin-bottom:12px} .indice ol{margin:0;padding-left:20px;columns:2;column-gap:34px} .indice li{margin-bottom:6px;font-size:15px;break-inside:avoid} .indice a{color:var(--corpo);text-decoration:none} .indice a:hover{color:var(--tinta);opacity:1} @media(max-width:620px){.indice ol{columns:1}} /* caixa de destaque neutra */ .nota{border-left:3px solid var(--acento);background:rgba(47,107,216,.05); border-radius:0 8px 8px 0;padding:15px 19px;margin:0 0 20px} .nota p{margin:0;max-width:none} /* selo da Chrome Web Store */ .selo{display:flex;gap:15px;align-items:flex-start;border:1px solid var(--fio); border-radius:12px;padding:18px 20px;margin:clamp(30px,4vw,44px) 0 0;background:var(--papel2)} .selo svg{flex:0 0 22px;width:22px;height:22px;margin-top:2px;color:var(--verde)} .selo p{margin:0;font-size:15px;line-height:1.6;max-width:none} .selo b{color:var(--tinta);font-weight:600} /* tabela simples */ table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:15.5px} th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--fio);vertical-align:top} th{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;font-weight:700; letter-spacing:.12em;text-transform:uppercase;color:var(--fraco)} td strong{color:var(--tinta)} /* ===== Rodapé escuro, igual ao da home ===== */ .rodape{background:var(--escuro);color:rgba(228,232,243,.52); padding:clamp(44px,6vw,72px) clamp(22px,6vw,80px) clamp(36px,5vw,56px)} .rodape .w{max-width:880px;margin:0 auto} .rodape img.logo{width:132px;height:auto;display:block;margin-bottom:26px;opacity:.9} .rodUso{font-size:14px;line-height:1.75;max-width:70ch;margin-bottom:26px} .rodUso b{color:#E4E8F3;font-weight:600} .rodape a{color:rgba(228,232,243,.72)} .rodBaixo{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap; padding-top:22px;border-top:1px solid rgba(228,232,243,.13); font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.06em;line-height:1.9} .rodBaixo a{text-decoration:none} .rodBaixo a:hover{color:#E4E8F3;opacity:1} .rodAss{text-align:right;color:rgba(228,232,243,.38)} .rodAss b{display:block;color:rgba(228,232,243,.62);font-weight:700} @media(max-width:620px){.rodBaixo{flex-direction:column}.rodAss{text-align:left}}