/* ========================================================================== BinaIA — sistema visual do site publico Segue docs/design.md. Claro e escuro: sem escolha da pessoa, segue o sistema; o botao do topo grava a escolha (tema.js) em data-tema no . Profundidade vem de contraste de superficie, nunca de sombra: o creme recua, o branco flutua. Nao adicionar box-shadow. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap'); :root { /* Cores */ --verde: #25d366; /* SO para acao primaria. Nunca decorativo. */ /* #0366cc e nao #0373e9: o anterior dava 4,19:1 sobre o creme, abaixo do piso. Sobre branco passaria, mas o canvas do produto e creme. 5,14:1. */ --azul-link: #0366cc; /* SO para link em texto corrido. */ --carvao: #1c1e21; --tinta: #111b21; --creme: #fcf5eb; --branco: #ffffff; --cinza-morno: #5e5e5e; --lavagem: #f0f4f9; --verde-balao: #d9fdd3; /* Texto sobre o verde. NAO muda com o tema: o verde e o mesmo nos dois, e so tinta escura da contraste sobre ele (8,80:1). */ --sobre-verde: #111b21; /* Tipografia */ --fonte: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --t-legenda: 12px; --t-corpo: 16px; --t-corpo-lg: 18px; --t-titulo-p: 48px; --t-titulo: 60px; --t-display: 80px; /* Espaco */ --e-4: 4px; --e-8: 8px; --e-12: 12px; --e-16: 16px; --e-20: 20px; --e-24: 24px; --e-28: 28px; --e-32: 32px; --e-40: 40px; --e-56: 56px; --e-88: 88px; /* Formas */ --r-pequeno: 8px; --r-cartao: 16px; --r-imagem: 25px; --r-pilula: 50px; --largura: 1200px; color-scheme: light; } /* Tema escuro. Os mesmos papeis com outros valores: o canvas (--creme) e o mais fundo, a superficie (--branco) sobe um degrau, e a profundidade continua vindo de contraste de superficie, sem sombra. Declarado duas vezes de proposito: pela preferencia do sistema quando a pessoa nao escolheu, e pelo data-tema quando escolheu -- nos dois sentidos. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --azul-link: #53bdeb; --carvao: #d1d7db; --tinta: #e9edef; --creme: #0b141a; --branco: #111b21; --cinza-morno: #99a5ad; --lavagem: #1f2c33; --verde-balao: #005c4b; color-scheme: dark; } } :root[data-tema="escuro"] { --azul-link: #53bdeb; --carvao: #d1d7db; --tinta: #e9edef; --creme: #0b141a; --branco: #111b21; --cinza-morno: #99a5ad; --lavagem: #1f2c33; --verde-balao: #005c4b; color-scheme: dark; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--creme); color: var(--carvao); font-family: var(--fonte); font-size: var(--t-corpo); line-height: 1.34; -webkit-font-smoothing: antialiased; } /* Link em texto corrido: azul, sublinhado, com seta. Azul NUNCA vira fundo nem cor de icone, para nao competir com o verde na hierarquia de acao. */ a { color: var(--azul-link); } img { max-width: 100%; display: block; } .envoltorio { max-width: var(--largura); margin: 0 auto; padding: 0 var(--e-24); } /* ---------- Cabecalho ---------- */ .topo { background: var(--branco); padding: var(--e-16) 0; } .topo .envoltorio { display: flex; align-items: center; gap: var(--e-32); } .marca-nexa { display: inline-flex; align-items: center; gap: var(--e-8); text-decoration: none; color: var(--tinta); font-weight: 700; font-size: 22px; letter-spacing: -.02em; } /* Em fonte sem serifa o I maiusculo e o l minusculo sao o mesmo traco: "BinaIA" em peso unico se le "BinalA". O IA mais leve separa as palavras. */ .marca-ia { font-weight: 500; margin-left: .06em; } .nav-links { display: flex; gap: var(--e-8); flex: 1; list-style: none; margin: 0; padding: 0; } .nav-links a { color: var(--carvao); text-decoration: none; padding: var(--e-8) var(--e-20); font-size: var(--t-corpo); } .nav-links a:hover { text-decoration: underline; } /* ---------- Tema: claro | escuro ---------- */ /* Duas opcoes lado a lado, e nao um interruptor: o pedido foi "as 2 opcoes", e um botao que so diz o CONTRARIO do tema atual confunde quem nao sabe se ele descreve o estado ou a acao. aria-pressed marca a que vale. */ .tema { display: inline-flex; gap: 2px; padding: 2px; margin-left: auto; border: 1px solid var(--lavagem); border-radius: var(--r-pilula); } .tema button { display: inline-grid; place-items: center; width: 34px; height: 30px; border: 0; border-radius: var(--r-pilula); background: transparent; color: var(--cinza-morno); cursor: pointer; padding: 0; } .tema button:hover { color: var(--tinta); } .tema button[aria-pressed="true"] { background: var(--lavagem); color: var(--tinta); } .tema svg { width: 16px; height: 16px; } .capa-topo { display: flex; align-items: center; gap: var(--e-16); } /* ---------- Botoes ---------- */ .btn { display: inline-flex; align-items: center; gap: var(--e-8); border-radius: var(--r-pilula); padding: 12px var(--e-28); font-family: var(--fonte); font-size: var(--t-corpo); font-weight: 700; text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap; } /* Unico botao preenchido do sistema. Um por viewport, nunca dois competindo. Texto ESCURO sobre o verde: branco daria 1,98:1, e --tinta da 8,80:1 sobre o mesmo verde. O hover escurece por brightness(.94) e sobe para 7,74:1. */ .btn-verde { background: var(--verde); color: var(--sobre-verde); } .btn-verde:hover { filter: brightness(.94); } .btn-fantasma { background: transparent; color: var(--carvao); border-color: var(--carvao); font-weight: 400; padding: 11px var(--e-24); } .btn-fantasma:hover { background: var(--carvao); color: var(--branco); } .link-seta { color: var(--azul-link); font-size: var(--t-corpo-lg); text-decoration: underline; text-underline-offset: 3px; } .link-seta::after { content: " ›"; text-decoration: none; display: inline-block; } /* ---------- Tipografia de display ---------- */ .display { font-size: clamp(44px, 7.2vw, var(--t-display)); line-height: 1; font-weight: 700; letter-spacing: -.035em; margin: 0 0 var(--e-24); color: var(--tinta); } .titulo { font-size: clamp(34px, 5.2vw, var(--t-titulo)); line-height: 1.1; font-weight: 700; letter-spacing: -.03em; margin: 0 0 var(--e-20); color: var(--tinta); } .titulo-p { font-size: clamp(28px, 4vw, var(--t-titulo-p)); line-height: 1.2; font-weight: 700; letter-spacing: -.025em; margin: 0 0 var(--e-16); color: var(--tinta); } .subtexto { font-size: var(--t-corpo-lg); line-height: 1.39; color: var(--carvao); margin: 0 0 var(--e-32); max-width: 34em; } .legenda { font-size: var(--t-legenda); line-height: 1.38; color: var(--cinza-morno); } /* ---------- Secoes ---------- */ .secao { padding: clamp(64px, 11vw, 140px) 0; } .secao-branca { background: var(--branco); } .duas-colunas { display: grid; gap: clamp(var(--e-40), 6vw, 88px); grid-template-columns: 1fr 1fr; align-items: center; } .duas-colunas.invertida > *:first-child { order: 2; } .centralizado { text-align: center; max-width: 46rem; margin: 0 auto; } .centralizado .subtexto { margin-left: auto; margin-right: auto; } /* ---------- Cartoes ---------- */ .grade { display: grid; gap: var(--e-24); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } .cartao { background: var(--branco); border-radius: var(--r-cartao); padding: var(--e-32); } .cartao h3 { font-size: 20px; font-weight: 700; margin: 0 0 var(--e-12); color: var(--tinta); } .cartao p { margin: 0; color: var(--cinza-morno); line-height: 1.5; } .selo { display: inline-flex; align-items: center; gap: 6px; /* Mesmo motivo do .btn-verde: branco sobre o verde da 1,98:1. */ background: var(--verde); color: var(--sobre-verde); border-radius: var(--r-pilula); padding: var(--e-4) var(--e-12); font-size: var(--t-legenda); font-weight: 400; } .selo-claro { display: inline-block; background: var(--lavagem); color: var(--carvao); border-radius: var(--r-pilula); padding: var(--e-4) var(--e-12); font-size: var(--t-legenda); margin-bottom: var(--e-16); } /* ---------- Baloes de conversa ---------- */ .conversa-flutuante { display: grid; gap: var(--e-12); justify-items: start; padding: var(--e-8); } .balao { max-width: 82%; padding: var(--e-8) var(--e-12); border-radius: var(--r-pequeno); font-size: 14px; line-height: 1.4; color: var(--carvao); } .balao .hora { display: block; text-align: right; font-size: 11px; color: var(--cinza-morno); margin-top: 2px; } .balao-entra { background: var(--branco); border-bottom-left-radius: 2px; } .balao-sai { background: var(--verde-balao); justify-self: end; border-bottom-right-radius: 2px; } /* Sobre secao branca o balao de entrada precisa de outro fundo para nao sumir */ .secao-branca .balao-entra { background: var(--lavagem); } .moldura-telefone { border-radius: var(--r-imagem); background: var(--creme); padding: var(--e-20); max-width: 22rem; } .secao-branca .moldura-telefone { background: var(--creme); } /* ---------- Numeros ---------- */ .numeros { display: grid; gap: var(--e-32); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } .numero b { display: block; font-size: var(--t-titulo-p); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; color: var(--tinta); } .numero span { color: var(--cinza-morno); font-size: var(--t-corpo); } /* ---------- Lista com marcador ---------- */ .lista-limpa { list-style: none; padding: 0; margin: 0 0 var(--e-32); } .lista-limpa li { padding-left: var(--e-28); margin-bottom: var(--e-12); position: relative; line-height: 1.5; } .lista-limpa li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); } /* ---------- Rodape ---------- */ .rodape-site { background: var(--branco); padding: var(--e-56) 0 var(--e-32); } .rodape-site .colunas { display: grid; gap: var(--e-40); grid-template-columns: 1.4fr 1fr 1fr; margin-bottom: var(--e-40); } .rodape-site h4 { font-size: 14px; font-weight: 700; margin: 0 0 var(--e-12); color: var(--tinta); } .rodape-site ul { list-style: none; padding: 0; margin: 0; } .rodape-site li { margin-bottom: var(--e-8); } .rodape-site a { color: var(--carvao); text-decoration: none; font-size: 14px; } .rodape-site a:hover { text-decoration: underline; } .rodape-site .fino { border-top: 1px solid var(--lavagem); padding-top: var(--e-24); color: var(--cinza-morno); font-size: 14px; } /* ========================================================================== Paginas juridicas: mesmo sistema, densidade de leitura ========================================================================== */ .capa { max-width: 46rem; margin: 0 auto; padding: 0 var(--e-24) var(--e-88); } .capa header { padding: var(--e-56) 0 var(--e-32); } .capa .marca { font-size: var(--t-legenda); letter-spacing: .09em; text-transform: uppercase; color: var(--cinza-morno); font-weight: 700; } .capa h1 { font-size: clamp(32px, 5vw, var(--t-titulo-p)); line-height: 1.15; font-weight: 700; letter-spacing: -.03em; margin: var(--e-12) 0 var(--e-8); color: var(--tinta); } .capa .data { color: var(--cinza-morno); font-size: 14px; margin: 0; } .capa h2 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: var(--e-56) 0 var(--e-16); color: var(--tinta); } .capa h3 { font-size: 18px; font-weight: 700; margin: var(--e-32) 0 var(--e-8); } .capa p, .capa li { line-height: 1.55; } .capa ul, .capa ol { padding-left: var(--e-24); } .capa li { margin-bottom: var(--e-8); } /* Bloco em branco sobre o creme: a profundidade vem do contraste, sem sombra */ .caixa { background: var(--branco); border-radius: var(--r-cartao); padding: var(--e-24) var(--e-28); margin: var(--e-24) 0; } .caixa p:first-child { margin-top: 0; } .caixa p:last-child { margin-bottom: 0; } .capa dl { margin: 0; } .capa dt { font-weight: 700; margin-top: var(--e-16); font-size: 14px; } .capa dd { margin: 2px 0 0; color: var(--cinza-morno); } .capa table { width: 100%; border-collapse: collapse; margin: var(--e-24) 0; font-size: 15px; background: var(--branco); border-radius: var(--r-cartao); overflow: hidden; } .capa th, .capa td { text-align: left; padding: var(--e-12) var(--e-16); border-bottom: 1px solid var(--lavagem); vertical-align: top; } .capa th { font-weight: 700; font-size: 13px; } .capa tr:last-child td { border-bottom: none; } .rodape { margin-top: var(--e-56); padding-top: var(--e-24); border-top: 1px solid var(--lavagem); color: var(--cinza-morno); font-size: 14px; } .rodape a { margin-right: var(--e-24); } /* ---------- Responsivo ---------- */ @media (max-width: 900px) { .duas-colunas { grid-template-columns: 1fr; } .duas-colunas.invertida > *:first-child { order: 0; } .rodape-site .colunas { grid-template-columns: 1fr 1fr; } .nav-links { display: none; } .topo .envoltorio { justify-content: space-between; } } @media (max-width: 560px) { .rodape-site .colunas { grid-template-columns: 1fr; } .btn { width: 100%; justify-content: center; } .topo .btn { width: auto; } } /* Foco visivel. Nao havia NENHUMA regra de :focus nesta folha, e as cinco paginas somam 36 links. O anel padrao do navegador muda de cor e de espessura entre navegadores e chega a sumir sobre o creme -- quem navega por teclado ficava sem saber onde estava. Mesma convencao do portal: 2px de --tinta sobre offset, para o anel nao encostar na letra. `:focus-visible` e nao `:focus`, para o clique de mouse nao deixar anel para tras. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; border-radius: 2px; } /* Movimento reduzido. O `scroll-behavior: smooth` do html e o UNICO movimento deste site: nao ha uma transicao nem uma animacao declarada em toda a folha. Desligar a rolagem suave e, portanto, a reducao completa. O `* { transition: none !important }` que estava aqui nao desligava nada -- nao havia o que desligar -- e era armadilha: a primeira transicao de cor que alguem escrevesse morreria em silencio para quem liga essa preferencia, justamente a pessoa que mais precisa da confirmacao visual. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }