/* Página pública do Ábaco: a porta de entrada. * * Até 24/09/2026 quem abria colmeiaco.com.br caía numa tela de login que * não dizia o que aquilo era. O sistema tem 31 telas e sete anos de * história dentro, e a primeira impressão era um campo de e-mail. * * Esta folha não inventa cor nem fonte: usa os mesmos tokens do resto do * sistema (`abaco.css`), porque a pessoa que clica em "Entrar" tem que * cair num lugar que parece o mesmo produto. O que muda aqui é só o * ritmo - respiro maior, tipografia maior, uma coisa por vez. */ body.publico { background: var(--ground); color: var(--ink); font-family: var(--f-body); margin: 0; /* O iPhone com barra de status transparente (as metas de PWA no ) deixa o conteudo passar por baixo do entalhe se ninguem reservar. */ padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } body.publico main, .lp-topo, .lp-rodape { max-width: 1080px; margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } /* ---------- topo ---------- */ .lp-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.4rem; padding-bottom: 1.4rem; flex-wrap: wrap; } .lp-marca { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--accent); font-family: var(--f-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -.02em; } .lp-marca span { color: var(--ink); } .lp-nav { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; } .lp-nav a { color: var(--ink-soft); text-decoration: none; font-size: .95rem; } .lp-nav a:hover { color: var(--ink); } /* ---------- herói ---------- */ .lp-heroi { padding: 3rem 0 4rem; text-align: center; } .lp-etiqueta { display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent); border-radius: 99px; padding: .35rem .95rem; margin: 0 0 1.6rem; } .lp-heroi h1 { font-family: var(--f-display); /* `clamp` e nao breakpoint: o titulo tem tres linhas curtas e precisa encolher continuamente, senao trava num tamanho que quebra errado justo nas larguras entre um breakpoint e outro. */ font-size: clamp(2.3rem, 8vw, 4.2rem); line-height: 1.04; letter-spacing: -.035em; font-weight: 700; margin: 0 0 1.5rem; } .lp-heroi h1 em { font-style: normal; color: var(--accent); } .lp-linha-fina { max-width: 34rem; margin: 0 auto 2rem; font-size: 1.08rem; line-height: 1.6; color: var(--ink-soft); } .lp-acoes { display: flex; gap: .85rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1rem; } .lp-botao, .lp-botao-vazado { display: inline-flex; align-items: center; justify-content: center; /* 44px de alvo de toque: o minimo que Apple e Google pedem, e o que a auditoria de 24/09/2026 mostrou faltando em varios botoes do app. */ min-height: 44px; padding: .75rem 1.6rem; border-radius: 99px; font-weight: 600; font-size: 1rem; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: filter .15s ease, border-color .15s ease, color .15s ease; } .lp-botao { background: var(--accent); color: var(--sobre-accent, #08110e); } .lp-botao:hover { filter: brightness(1.08); } .lp-botao-vazado { border-color: var(--rule); color: var(--ink); } .lp-botao-vazado:hover { border-color: var(--accent); color: var(--accent); } .lp-nav .lp-botao-vazado { padding: .45rem 1.1rem; min-height: 38px; font-size: .92rem; } .lp-nota { font-size: .88rem; color: var(--ink-faint, var(--ink-soft)); margin: 0 0 2.8rem; } /* ---------- amostra da tela ---------- */ /* E o produto, nao um desenho: o mesmo cartao "Posso gastar" que a pessoa vai ver depois de entrar, com numero inventado. Ilustracao de banco de imagem promete; uma tela de verdade mostra. */ .lp-amostra { max-width: 26rem; margin: 0 auto; text-align: left; background: var(--carta-fundo, var(--surface)); border: 1px solid var(--rule); border-radius: 1.1rem; padding: 1.5rem 1.7rem; box-shadow: 0 24px 60px -30px rgb(0 0 0 / .55); } .lp-amostra-titulo { font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .5rem; } .lp-amostra-numero { font-family: var(--f-mono, ui-monospace, monospace); font-size: clamp(2.2rem, 9vw, 3rem); font-weight: 700; line-height: 1; color: var(--accent); letter-spacing: -.02em; } .lp-amostra-nota { font-size: .88rem; color: var(--ink-soft); margin: .5rem 0 0; } .lp-amostra-barra { height: 8px; border-radius: 99px; background: var(--rule); margin: 1.1rem 0 .5rem; overflow: hidden; } .lp-amostra-barra span { display: block; height: 100%; background: var(--accent); border-radius: 99px; } .lp-amostra-conta { margin: 1.2rem 0 0; padding-top: .8rem; border-top: 1px solid var(--rule); } .lp-amostra-conta > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .4rem 0; } .lp-amostra-conta dt { font-size: .92rem; color: var(--ink-soft); margin: 0; } .lp-amostra-conta dd { margin: 0; font-family: var(--f-mono, ui-monospace, monospace); font-size: .95rem; font-weight: 600; white-space: nowrap; } .lp-amostra-conta dd.bom { color: var(--good); } .lp-amostra-conta .soma { border-top: 1px solid var(--rule); margin-top: .3rem; padding-top: .7rem; } .lp-amostra-conta .soma dt { color: var(--ink); font-weight: 600; } /* ---------- seções ---------- */ .lp-secao { padding: 3.5rem 0; } .lp-secao h2 { font-family: var(--f-display); font-size: clamp(1.6rem, 4.5vw, 2.3rem); letter-spacing: -.025em; margin: 0 0 .7rem; text-align: center; } .lp-secao-nota { text-align: center; color: var(--ink-soft); max-width: 34rem; margin: 0 auto 2.2rem; line-height: 1.6; } .lp-secao h2 + .lp-grade, .lp-secao h2 + .lp-lista, .lp-secao h2 + .lp-planos { margin-top: 2.2rem; } .lp-grade { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } .lp-carta { background: var(--carta-fundo, var(--surface)); border: 1px solid var(--rule); border-radius: 1rem; padding: 1.5rem; } .lp-carta h3 { font-family: var(--f-display); font-size: 1.15rem; margin: 0 0 .6rem; letter-spacing: -.015em; } .lp-carta p { margin: 0; color: var(--ink-soft); line-height: 1.6; font-size: .96rem; } .lp-lista { list-style: none; padding: 0; margin: 0 auto; max-width: 44rem; display: grid; gap: .55rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); } .lp-lista li { position: relative; padding-left: 1.6rem; color: var(--ink-soft); line-height: 1.5; } .lp-lista li::before { content: ""; position: absolute; left: 0; top: .55em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); } /* ---------- planos ---------- */ .lp-planos { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); align-items: start; max-width: 46rem; margin: 0 auto; } .lp-plano { background: var(--carta-fundo, var(--surface)); border: 1px solid var(--rule); border-radius: 1.1rem; padding: 1.8rem 1.6rem; display: flex; flex-direction: column; gap: .3rem; } .lp-plano-destaque { border-color: var(--accent); } .lp-selo { align-self: flex-start; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: color-mix(in oklab, var(--accent) 14%, transparent); border-radius: 99px; padding: .3rem .8rem; margin: 0 0 .5rem; } .lp-plano h3 { font-family: var(--f-display); font-size: 1.35rem; margin: 0; letter-spacing: -.02em; } .lp-preco { font-family: var(--f-display); font-size: 1.9rem; font-weight: 700; margin: .2rem 0 1.2rem; letter-spacing: -.03em; } .lp-preco span { display: block; font-family: var(--f-body); font-size: .85rem; font-weight: 400; color: var(--ink-soft); letter-spacing: 0; } .lp-plano ul { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .5rem; } .lp-plano li { position: relative; padding-left: 1.5rem; color: var(--ink-soft); font-size: .95rem; line-height: 1.45; } .lp-plano li::before { content: ""; position: absolute; left: .1rem; top: .42em; width: .5rem; height: .28rem; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); } .lp-plano .lp-botao, .lp-plano .lp-botao-vazado { margin-top: auto; } /* ---------- fecho e rodapé ---------- */ .lp-fecho { text-align: center; max-width: 38rem; margin: 0 auto; } .lp-fecho p { color: var(--ink-soft); line-height: 1.65; } .lp-contato a { color: var(--accent); } .lp-rodape { border-top: 1px solid var(--rule); padding-top: 2rem; padding-bottom: 2.5rem; margin-top: 2rem; text-align: center; color: var(--ink-soft); font-size: .9rem; } .lp-rodape p { margin: .4rem 0; } .lp-rodape-nota { max-width: 32rem; margin: .6rem auto; line-height: 1.55; } .lp-rodape a { color: var(--accent); } @media (max-width: 560px) { .lp-heroi { padding: 2rem 0 3rem; } .lp-secao { padding: 2.5rem 0; } .lp-amostra { padding: 1.3rem 1.2rem; } .lp-acoes .lp-botao, .lp-acoes .lp-botao-vazado { flex: 1 1 100%; } }