/* * Tema "órbita" — a linguagem visual da home do Veridian. * * Nasceu da régua que o dono aprovou (o site do EcclēsIA): escuro do começo ao fim, gradiente frio * atravessando roxo → azul → ciano, tipografia com personalidade e o produto aparecendo dentro de * uma moldura de janela. A versão anterior alternava dobra clara e dobra escura, e o resultado * ficava morno: nem a leveza de um site claro, nem a presença de um escuro. * * Mora num arquivo próprio, carregado só onde é usado. As páginas internas continuam com * `estilo.css` e não mudam — trocar as cinco de uma vez seria reescrever tudo pra ver o resultado * de uma. * * As classes levam o prefixo `o-` por isso mesmo: as duas folhas convivem na mesma casa, e * `.hero`, `.plano` e `.card` já existem do outro lado. */ /* * A paleta é a da marca: verde, e só verde. * * O tema nasceu roxo → azul → ciano, copiado da régua que serviu de referência. Com o logo verde * pronto e aplicado, o site ficou vestindo duas identidades ao mesmo tempo: símbolo verde no topo, * botão roxo logo ao lado. Quem chega não lê isso como "duas cores", lê como site montado às * pressas. * * O gradiente agora anda dentro do próprio verde — do verde-mata ao verde-menta. Ele ainda tem * movimento (é o que dá vida ao escuro), mas nunca cruza pro azul. * * Os neutros também ganharam viés verde. Um cinza-azulado (#9aa3c7) sobre fundo verde-escuro briga: * o olho vê o azul como sujeira. O mesmo cinza puxado pro verde some dentro do fundo, do jeito que * neutro deve sumir. */ :root { --o-void: #04100c; --o-deep: #071a14; --o-panel: #0c2119; --o-line: #17362a; --o-ice: #ecfdf5; /* Subiu de #9aa3c7 para cá em 26/09/2026: o texto de apoio do hero estava lavado no escuro, e é justamente a frase que explica o produto. Contraste medido sobre --o-void: 8,3:1. */ --o-mist: #b3ccc2; --o-dim: #7e9a90; --o-volt: #0e9f6e; --o-azul: #10b981; --o-aqua: #34d399; --o-lime: #6ee7b7; --o-grad: linear-gradient(115deg, #0a7d55 0%, #0e9f6e 38%, #22c98d 72%, #6ee7b7 100%); /* A sombra colorida dos botões. Token porque estava escrita à mão em cinco lugares, todos com o roxo antigo — e um deles sempre escapa. */ --o-brilho: rgba(14, 159, 110, 0.55); } .tema-orbita { background: var(--o-void); color: var(--o-ice); font-family: "DM Sans", system-ui, sans-serif; font-size: 16px; line-height: 1.6; overflow-x: hidden; } .tema-orbita h1, .tema-orbita h2, .tema-orbita h3 { font-family: "Sora", system-ui, sans-serif; text-wrap: balance; letter-spacing: -0.03em; line-height: 1.05; margin: 0; } .tema-orbita h1 { font-size: clamp(38px, 6.2vw, 72px); font-weight: 800; } .tema-orbita h2 { font-size: clamp(27px, 4vw, 48px); font-weight: 700; } .tema-orbita h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; } .tema-orbita p { margin: 0; } .tema-orbita a { color: inherit; text-decoration: none; } .o-wrap { max-width: 1180px; margin-inline: auto; padding-inline: 20px; } /* `overflow-x: clip` porque os orbes estouram a largura de propósito e alguém precisa cortá-los. Medido no celular: sem isto a home rola 300px pro lado — o `overflow-x: hidden` do não dá conta de filho posicionado fora da caixa. `clip` e não `hidden`: hidden transformaria a seção em contêiner de rolagem, o que quebraria `position: sticky` lá dentro. */ .o-sec { position: relative; padding-block: clamp(64px, 8.5vw, 124px); overflow-x: clip; } .tema-orbita .secao { overflow-x: clip; } .o-dentro { position: relative; z-index: 1; } /* Gradiente no texto. Uma vez por dobra, na frase que a pessoa tem que levar embora — repetido, vira papel de parede e deixa de destacar qualquer coisa. */ .o-grad { background: var(--o-grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.06em; } /* Etiqueta de seção: mono, caixa alta, bem espaçada. Dá cara de produto técnico sem precisar escrever "tecnologia" em lugar nenhum. */ .o-olho { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--o-aqua); } .o-lede { font-size: clamp(16px, 1.9vw, 20px); color: var(--o-mist); line-height: 1.65; } .o-mini { font-size: 12.5px; color: var(--o-dim); line-height: 1.55; } .o-cabeca { max-width: 60ch; display: flex; flex-direction: column; gap: 14px; margin-bottom: 48px; } /* Orbe: mancha de luz desfocada. O desfoque alto é o que transforma um círculo em atmosfera. */ .o-orbe { position: absolute; border-radius: 50%; filter: blur(110px); opacity: 0.45; pointer-events: none; z-index: 0; } /* ── Botões ─────────────────────────────────────────────────────────────── */ .o-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: "Sora", sans-serif; font-weight: 700; font-size: 15px; padding: 15px 30px; border-radius: 999px; border: none; cursor: pointer; transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s, background 0.18s; } .o-btn-p { background: var(--o-grad); color: #04100c; box-shadow: 0 8px 38px -8px rgba(14, 159, 110, 0.65); } .o-btn-p:hover { transform: translateY(-2px); box-shadow: 0 14px 48px -8px rgba(14, 159, 110, 0.9); } .o-btn-g { border: 1px solid var(--o-line); color: var(--o-ice); background: rgba(255, 255, 255, 0.03); } .o-btn-g:hover { border-color: var(--o-volt); background: rgba(14, 159, 110, 0.1); } /* ── Hero ───────────────────────────────────────────────────────────────── */ /* `position: relative` não é enfeite aqui: sem ele o `overflow: hidden` não corta nada. Um elemento sem posição não é o bloco de contenção dos filhos `position: absolute`, e o recorte só vale pra quem está contido — os orbes escapavam e a home rolava 160px pro lado, no celular e no desktop. */ .o-hero { position: relative; padding-top: clamp(48px, 7vw, 88px); padding-bottom: 0; overflow: hidden; } .o-hero-grade { display: grid; gap: 24px; justify-items: center; text-align: center; max-width: 880px; margin-inline: auto; } .o-pilula { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--o-line); background: rgba(255, 255, 255, 0.03); border-radius: 999px; padding: 7px 16px; font-size: 12.5px; color: var(--o-mist); } .o-ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--o-lime); box-shadow: 0 0 10px var(--o-lime); } .o-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } /* ── Moldura do produto ─────────────────────────────────────────────────── */ .o-tela { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--o-line); background: var(--o-panel); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.9); } .o-tela-barra { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #0c1020; border-bottom: 1px solid var(--o-line); } .o-tela-barra i { width: 10px; height: 10px; border-radius: 50%; background: #2a3152; display: block; } .o-tela-url { margin-left: 10px; font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--o-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* A janela do hero mergulha no fundo: o degradê embaixo evita o corte reto que denuncia a moldura. */ .o-hero-tela { margin-top: 52px; position: relative; } .o-hero-tela::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(transparent, var(--o-void)); pointer-events: none; } /* ── Faixa de números ───────────────────────────────────────────────────── */ .o-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--o-line); border: 1px solid var(--o-line); border-radius: 14px; overflow: hidden; } .o-num { background: var(--o-deep); padding: 24px 22px; display: flex; flex-direction: column; gap: 5px; } .o-num b { font-family: "Sora", sans-serif; font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; } .o-num span { font-size: 12.5px; color: var(--o-dim); } @media (max-width: 700px) { .o-nums { grid-template-columns: repeat(2, 1fr); } } /* ── Cartões ────────────────────────────────────────────────────────────── */ .o-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } .o-card { background: var(--o-panel); border: 1px solid var(--o-line); border-radius: 14px; padding: 24px; transition: border-color 0.2s, transform 0.2s; } .o-card:hover { border-color: var(--o-volt); transform: translateY(-3px); } .o-card .o-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--o-grad); display: flex; align-items: center; justify-content: center; font-size: 19px; margin-bottom: 14px; } .o-card p { font-size: 14px; color: var(--o-mist); margin-top: 7px; line-height: 1.6; } .o-card ul { margin-top: 12px; padding-left: 16px; font-size: 13px; color: var(--o-dim); list-style: none; } .o-card li { margin-bottom: 5px; position: relative; } .o-card li::before { content: ""; position: absolute; left: -14px; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--o-aqua); } /* ── Seção alternada texto/produto ──────────────────────────────────────── */ .o-alt { display: grid; grid-template-columns: 1fr 1.25fr; gap: 54px; align-items: center; } .o-alt.inv { grid-template-columns: 1.25fr 1fr; } .o-alt.inv .o-alt-txt { order: 2; } .o-alt-txt { display: flex; flex-direction: column; gap: 14px; } @media (max-width: 900px) { .o-alt, .o-alt.inv { grid-template-columns: 1fr; gap: 32px; } .o-alt.inv .o-alt-txt { order: 0; } } .o-itens { display: flex; flex-direction: column; gap: 11px; margin-top: 6px; } .o-item { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--o-mist); } .o-item i { width: 19px; height: 19px; border-radius: 50%; background: rgba(94, 234, 212, 0.12); color: var(--o-lime); display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; margin-top: 2px; font-style: normal; } /* ── Planos ─────────────────────────────────────────────────────────────── */ .o-planos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; } @media (max-width: 920px) { .o-planos { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } } .o-plano { background: var(--o-panel); border: 1px solid var(--o-line); border-radius: 18px; padding: 30px 26px; display: flex; flex-direction: column; gap: 18px; position: relative; } .o-plano.destaque { background: linear-gradient(180deg, rgba(14, 159, 110, 0.16), rgba(52, 211, 153, 0.05)); border-color: var(--o-volt); box-shadow: 0 30px 80px -30px rgba(14, 159, 110, 0.6); } @media (min-width: 921px) { .o-plano.destaque { transform: scale(1.05); z-index: 2; } } .o-selo { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--o-grad); color: #04100c; font-family: "Sora", sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 18px; border-radius: 999px; white-space: nowrap; } .o-pnome { font-family: "Sora", sans-serif; font-size: 17px; font-weight: 700; } .o-pdesc { font-size: 13px; color: var(--o-dim); line-height: 1.5; min-height: 36px; } .o-preco { display: flex; align-items: baseline; gap: 5px; } .o-preco em { font-style: normal; font-size: 15px; color: var(--o-mist); } .o-preco b { font-family: "Sora", sans-serif; font-size: 48px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; } .o-preco span { font-size: 14px; color: var(--o-dim); } .o-plista { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--o-mist); border-top: 1px solid var(--o-line); padding-top: 18px; } .o-plista div { display: flex; gap: 10px; align-items: flex-start; } .o-plista i { color: var(--o-lime); font-style: normal; flex-shrink: 0; } .o-plista .nao { color: var(--o-dim); opacity: 0.6; } .o-plista .nao i { color: var(--o-dim); } /* ── Perguntas ──────────────────────────────────────────────────────────── */ .o-faq { border-top: 1px solid var(--o-line); } .o-faq details { border-bottom: 1px solid var(--o-line); } .o-faq summary { padding: 21px 0; cursor: pointer; font-family: "Sora", sans-serif; font-weight: 600; font-size: 16.5px; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; } .o-faq summary::-webkit-details-marker { display: none; } .o-faq summary::after { content: "+"; color: var(--o-aqua); font-size: 22px; flex-shrink: 0; transition: transform 0.2s; } .o-faq details[open] summary::after { transform: rotate(45deg); } .o-faq p { padding-bottom: 21px; color: var(--o-mist); font-size: 15px; max-width: 74ch; } /* ── Fechamento ─────────────────────────────────────────────────────────── */ .o-final { background: linear-gradient(135deg, rgba(14, 159, 110, 0.2), rgba(52, 211, 153, 0.09)); border: 1px solid var(--o-line); border-radius: 24px; padding: clamp(38px, 6vw, 68px); text-align: center; display: flex; flex-direction: column; gap: 18px; align-items: center; } /* ── Topo e rodapé próprios do tema ─────────────────────────────────────── */ .o-topo { position: sticky; top: 0; z-index: 20; background: rgba(5, 6, 15, 0.86); backdrop-filter: blur(14px); border-bottom: 1px solid var(--o-line); } .o-topo-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-block: 14px; } .o-marca { display: flex; align-items: center; gap: 10px; font-family: "Sora", sans-serif; font-weight: 800; font-size: 16px; letter-spacing: -0.02em; } /* * O símbolo entrou no lugar da letra "V" dentro de um quadradinho. * * Aquele quadrado lia como ícone de aplicativo, não como marca — e não era o logo, era um * substituto de texto. A regra do `span` fica para o caso de alguma página antiga ainda usar. */ .o-marca .marca-simbolo { width: 30px; height: 30px; flex-shrink: 0; } .o-rodape-marca { display: inline-flex; align-items: center; gap: 9px; } .o-rodape-marca .marca-simbolo { width: 24px; height: 24px; flex-shrink: 0; } /* * A regra do quadradinho com a letra "V" foi removida em 26/09/2026. * * Ela valia para QUALQUER span dentro de .o-marca, e quando o nome da marca passou a ser um span, * o nome virou um bloco roxo de 28px por cima de si mesmo. Seletor de elemento dentro de * componente é isso: funciona até alguém acrescentar o segundo elemento do mesmo tipo. */ .o-nav { display: flex; gap: 22px; font-size: 14px; color: var(--o-mist); } .o-nav a:hover { color: var(--o-ice); } @media (max-width: 760px) { .o-nav { display: none; } } .o-rodape { border-top: 1px solid var(--o-line); padding-block: 34px; color: var(--o-dim); font-size: 13.5px; } .o-rodape-in { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: center; } @media (prefers-reduced-motion: reduce) { .tema-orbita * { transition: none !important; animation: none !important; } } /* ── O sistema por dentro ─────────────────────────────────────────────────── Enquanto não há print real do CRM, a tela é desenhada em HTML. Vale a mesma regra do resto: dado plausível de operação real, nunca "Lorem ipsum" nem R$ 0,00 — mockup vazio não prova nada pra quem está avaliando. */ .o-app { display: grid; grid-template-columns: 132px 1fr; min-height: 340px; font-size: 11px; line-height: 1.35; } .o-app-menu { background: linear-gradient(178deg, #0f766e 0%, #0a3d2c 44%, #071b1a 100%); padding: 12px 9px; display: flex; flex-direction: column; gap: 1px; } .o-app-marca { display: flex; align-items: center; gap: 7px; font-weight: 700; color: #e8f6f3; font-size: 12px; padding: 0 4px 11px; } .o-app-logo { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 6px; background: rgba(52, 211, 153, 0.18); color: #5eead4; font-size: 10px; } .o-app-grupo { font-size: 8px; text-transform: uppercase; letter-spacing: 0.11em; color: rgba(255, 255, 255, 0.34); padding: 8px 5px 3px; font-weight: 600; } .o-app-item { display: flex; align-items: center; justify-content: space-between; padding: 5px 7px; border-radius: 7px; color: rgba(224, 247, 243, 0.62); } .o-app-item.on { background: rgba(255, 255, 255, 0.13); color: #fff; font-weight: 600; box-shadow: inset 2px 0 0 #5eead4; } .o-app-bolha { font-style: normal; font-size: 8.5px; font-weight: 700; background: #f2a007; color: #1a1206; border-radius: 100px; padding: 0 5px; } .o-app-tela { padding: 13px; background: #080e18; } .o-app-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 11px; } .o-app-kpi { background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 9px; padding: 8px 9px; } .o-app-kpi span { display: block; font-size: 8px; text-transform: uppercase; letter-spacing: 0.08em; color: #5b6f87; margin-bottom: 3px; } .o-app-kpi strong { font-family: "Sora", sans-serif; font-size: 14px; color: #e8eef7; letter-spacing: -0.02em; } .o-app-kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: start; } .o-app-col { background: rgba(255, 255, 255, 0.03); border-radius: 10px; border-top: 2px solid rgba(52, 211, 153, 0.5); padding: 8px; display: grid; gap: 6px; } .o-app-col:nth-child(2) { border-top-color: rgba(242, 160, 7, 0.6); } .o-app-col:nth-child(3) { border-top-color: rgba(52, 211, 153, 0.7); } .o-app-col-topo { display: flex; justify-content: space-between; align-items: center; font-size: 9px; font-weight: 700; color: #9fb4cc; text-transform: uppercase; letter-spacing: 0.06em; } .o-app-col-topo i { font-style: normal; background: rgba(255, 255, 255, 0.08); border-radius: 100px; padding: 1px 6px; color: #cfe0f2; } .o-app-card { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 7px 8px; display: grid; gap: 1px; } .o-app-card b { font-size: 10px; color: #e8eef7; font-weight: 600; } .o-app-card span { font-size: 9px; color: #6f849c; } .o-app-card em { font-style: normal; font-size: 10px; font-weight: 700; color: #5eead4; margin-top: 2px; } .o-app-card.foco { border-color: rgba(52, 211, 153, 0.45); box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.2), 0 8px 22px -10px rgba(52, 211, 153, 0.45); } .o-app-card.ganho em { color: #34d399; } .o-app-card.fraco { opacity: 0.45; } .o-app-tags { display: flex; gap: 4px; margin-top: 5px; flex-wrap: wrap; } .o-app-tags i { font-style: normal; font-size: 8px; padding: 1px 6px; border-radius: 100px; background: rgba(255, 255, 255, 0.09); color: #a9bdd3; } .o-app-tags i.quente { background: rgba(242, 160, 7, 0.18); color: #f2a007; } @media (max-width: 720px) { .o-app { grid-template-columns: 1fr; } .o-app-menu { display: none; } .o-app-kanban { grid-template-columns: 1fr 1fr; } .o-app-col:nth-child(3) { display: none; } } /* ═══════════════════════════════════════════════════════════════════════════ PONTE — as páginas internas dentro do tema órbita ═══════════════════════════════════════════════════════════════════════════ As páginas do CRM, da Área de Membros, Sobre e Contato foram escritas com as classes da folha antiga (.secao, .bloco, .plano, .janela...). Reescrever as quatro só pra trocar a cor seria refazer centenas de linhas de HTML correndo o risco de perder conteúdo no caminho — e o que muda é a aparência, não a estrutura. Então o tema ADOTA essas classes: quando o body está no tema órbita, elas passam a usar as cores, as fontes e as bordas daqui. A folha antiga continua valendo em qualquer página fora do tema, então nada quebra durante a migração. Cada regra existe porque a peça original TRAZ a própria cor (fundo branco, texto quase preto). Herança não desfaz cor declarada — por isso é uma a uma, e não um seletor genérico. */ .tema-orbita .secao { position: relative; padding-block: clamp(56px, 7.5vw, 110px); background: transparent; } .tema-orbita .secao-clara { background: var(--o-deep); } .tema-orbita .secao-escura { background: var(--o-deep); color: var(--o-ice); } .tema-orbita .secao-escura::before, .tema-orbita .secao-escura::after { display: none; } .tema-orbita .env { max-width: 1180px; margin-inline: auto; padding-inline: 20px; } .tema-orbita .etiqueta { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--o-aqua); } .tema-orbita .texto-apoio, .tema-orbita .chamada, .tema-orbita .hero-nota, .tema-orbita .nota-planos { color: var(--o-mist); } .tema-orbita .cabeca-secao { display: flex; flex-direction: column; gap: 13px; margin-bottom: 44px; max-width: 62ch; } .tema-orbita .hero { background: transparent; } .tema-orbita .hero::before { display: none; } /* Cartões e blocos */ .tema-orbita .bloco, .tema-orbita .dor, .tema-orbita .pergunta, .tema-orbita .aula, .tema-orbita .curso-card, .tema-orbita .permissao { background: var(--o-panel); border-color: var(--o-line); color: var(--o-ice); } .tema-orbita .bloco::before { display: none; } .tema-orbita .bloco:hover { border-color: var(--o-volt); background: var(--o-panel); box-shadow: 0 16px 44px -22px rgba(14, 159, 110, 0.6); } .tema-orbita .bloco h3, .tema-orbita .dor h3, .tema-orbita .aula h3 { color: var(--o-ice); } .tema-orbita .bloco p, .tema-orbita .dor p, .tema-orbita .mini-lista, .tema-orbita .mini-lista li { color: var(--o-mist); } .tema-orbita .dor-numero, .tema-orbita .dor-legenda { color: var(--o-aqua); } /* Pílulas e selos */ .tema-orbita .pill, .tema-orbita .selo, .tema-orbita .tag-mini { background: rgba(255, 255, 255, 0.04); border-color: var(--o-line); color: var(--o-mist); } /* Botões */ .tema-orbita .btn { font-family: "Sora", sans-serif; border-radius: 999px; } .tema-orbita .btn-cheio { background: var(--o-grad); color: #04100c; border: none; box-shadow: 0 8px 38px -8px rgba(14, 159, 110, 0.6); } .tema-orbita .btn-cheio:hover { transform: translateY(-2px); } .tema-orbita .btn-vazado, .tema-orbita .btn-claro { border: 1px solid var(--o-line); color: var(--o-ice); background: rgba(255, 255, 255, 0.03); } .tema-orbita .btn-vazado:hover, .tema-orbita .btn-claro:hover { border-color: var(--o-volt); background: rgba(14, 159, 110, 0.1); color: var(--o-ice); } /* A janela de produto das páginas internas vira a mesma moldura do tema */ .tema-orbita .janela { background: #0a1220; border-color: var(--o-line); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.9); } .tema-orbita .janela-barra { background: #0c1020; border-color: var(--o-line); } .tema-orbita .janela-titulo { color: var(--o-dim); font-family: "JetBrains Mono", monospace; } .tema-orbita .balao-entrada { background: rgba(255, 255, 255, 0.07); color: #cdd6e8; } .tema-orbita .balao-saida { background: linear-gradient(120deg, #0f766e, #0e9f6e); color: #eafff9; } .tema-orbita .selo-ia { color: var(--o-lime); } .tema-orbita .linha-falsa { background: rgba(255, 255, 255, 0.09); } .tema-orbita .linha-falsa.acento { background: rgba(94, 234, 212, 0.3); } .tema-orbita .card-kanban, .tema-orbita .no-fluxo { background: rgba(255, 255, 255, 0.06); border-color: var(--o-line); color: var(--o-ice); } .tema-orbita .seta-fluxo { background: var(--o-line); } .tema-orbita .curso-capa { background: var(--o-grad); } .tema-orbita .aula-marca, .tema-orbita .aula-tempo, .tema-orbita .curso-info, .tema-orbita .barra-legenda { color: var(--o-dim); } .tema-orbita .barra { background: rgba(255, 255, 255, 0.08); } .tema-orbita .chave { background: rgba(255, 255, 255, 0.1); border-color: var(--o-line); } .tema-orbita .chave.on { background: var(--o-grad); border-color: transparent; } /* Planos */ .tema-orbita .plano { background: var(--o-panel); border-color: var(--o-line); color: var(--o-ice); } .tema-orbita .plano.destaque { background: linear-gradient(180deg, rgba(14, 159, 110, 0.16), rgba(52, 211, 153, 0.05)); border-color: var(--o-volt); box-shadow: 0 30px 80px -30px rgba(14, 159, 110, 0.6); } .tema-orbita .plano-preco, .tema-orbita .plano-limites, .tema-orbita .plano-limites li { color: var(--o-ice); } .tema-orbita .plano-preco small, .tema-orbita .plano-chamada { color: var(--o-mist); } .tema-orbita .plano-limites { border-color: var(--o-line); } .tema-orbita .plano-selo { background: var(--o-grad); color: #04100c; } /* Tabelas e comparativos */ .tema-orbita table { color: var(--o-mist); } .tema-orbita th { color: var(--o-dim); border-color: var(--o-line); } .tema-orbita td { border-color: var(--o-line); color: var(--o-ice); } /* Perguntas */ .tema-orbita .pergunta summary { color: var(--o-ice); font-family: "Sora", sans-serif; } .tema-orbita .pergunta p { color: var(--o-mist); } /* Alternado texto/arte das páginas internas */ .tema-orbita .alternado-arte { background: transparent; } .tema-orbita .forte { color: var(--o-ice); } /* Rodapé colado no fim da janela nas páginas curtas. Sem isto, Contato — que cabe numa tela — deixava uma faixa vazia de várias centenas de pixels abaixo do rodapé, e a página parecia cortada no meio. */ .tema-orbita { min-height: 100dvh; display: flex; flex-direction: column; } .tema-orbita > main { flex: 1 0 auto; } /* ── Documentos (Privacidade, Termos) ────────────────────────────────────── Estas páginas herdaram o corpo de uma landing: h2 de 48px e linha de 1400px de largura. Serve pra vender, não pra ler um texto legal do começo ao fim. Aqui a escala volta a ser de documento — coluna estreita, hierarquia discreta e ar entre a seção e o parágrafo. */ .tema-orbita .documento { max-width: 74ch; padding-block: clamp(48px, 6vw, 84px); } .tema-orbita .documento h1 { font-size: clamp(30px, 4.4vw, 44px); } .tema-orbita .documento h2 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; margin-top: 40px; margin-bottom: 10px; color: var(--o-ice); } .tema-orbita .documento h2::before { /* fio curto em gradiente acima da seção: separa sem pesar como uma régua de largura inteira */ content: ""; display: block; width: 34px; height: 2px; border-radius: 2px; background: var(--o-grad); margin-bottom: 14px; } .tema-orbita .documento p { color: var(--o-mist); margin-bottom: 14px; } .tema-orbita .documento li { color: var(--o-mist); margin-bottom: 8px; } .tema-orbita .documento li strong, .tema-orbita .documento p strong { color: var(--o-ice); } .tema-orbita .documento .atualizado { color: var(--o-dim); margin-top: 12px; margin-bottom: 34px; } .tema-orbita .documento a { color: var(--o-aqua); text-decoration: underline; text-underline-offset: 3px; } /* ══════════════════════════════════════════════════════════════════════════ TELAS DESENHADAS DO PRODUTO ══════════════════════════════════════════════════════════════════════════ Cada tela abaixo desenha uma página real do CRM em HTML, dentro da moldura `.o-tela`. Não são mockups genéricos: os rótulos saem do código do sistema (`funilCatalogo.ts`, `agenteHabilidades.ts`, `dashboardCatalogo.ts`), então o que a pessoa lê aqui é o que ela vai encontrar depois de assinar. Enquanto não houver print de tela cheia de dado real, é o mais honesto que dá pra mostrar — e o rodapé da home diz que são desenhos. Tudo compartilha a base `.o-app` (menu lateral + área de trabalho) já definida acima. */ /* ── Funil Builder: o canvas de blocos ligados ───────────────────────────── */ .o-fb { display: grid; grid-template-columns: 104px 1fr; min-height: 300px; font-size: 11px; background: #080e18; } .o-fb-paleta { background: rgba(255,255,255,.025); border-right: 1px solid rgba(255,255,255,.06); padding: 10px 8px; display: grid; gap: 4px; align-content: start; } .o-fb-grupo { font-size: 7.5px; text-transform: uppercase; letter-spacing: .12em; color: #566a80; font-weight: 700; padding: 7px 2px 2px; } .o-fb-peca { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); border-radius: 6px; padding: 4px 6px; color: #90a6bd; font-size: 8.5px; display: flex; align-items: center; gap: 4px; } .o-fb-peca s { text-decoration: none; font-size: 9px; } /* O canvas ganha a grade pontilhada de editor de fluxo — é o sinal visual que diz "isto se arrasta" sem precisar de uma legenda dizendo isso. */ .o-fb-canvas { position: relative; padding: 16px 14px; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 15px 15px; display: grid; gap: 0; align-content: start; justify-items: center; } .o-no { width: 100%; max-width: 236px; background: #131b2b; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; padding: 7px 9px; display: grid; gap: 2px; position: relative; } .o-no b { font-size: 9.5px; color: #e8eef7; font-weight: 600; display: flex; align-items: center; gap: 5px; } .o-no span { font-size: 8.5px; color: #6f849c; } .o-no s { text-decoration: none; font-size: 10px; } /* A faixa de cor à esquerda diz o PAPEL do bloco — gatilho, ação, espera, decisão — sem depender de ler o texto. É a mesma convenção do editor de verdade. */ .o-no::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: #10b981; } .o-no.gatilho::before { background: #5eead4; } .o-no.espera::before { background: #f2a007; } .o-no.decisao::before { background: #c084fc; } .o-no.ia::before { background: #0e9f6e; } .o-no-sel { border-color: rgba(14,159,110,.55); box-shadow: 0 0 0 1px rgba(14,159,110,.28), 0 10px 26px -12px rgba(14,159,110,.7); } /* 2px e opacidade firme: a 1px translúcido o fio sumia contra o fundo, e o fluxo virava uma pilha de cartões soltos — justamente a leitura que um editor de fluxo não pode dar. */ .o-fio { width: 2px; height: 16px; border-radius: 2px; background: linear-gradient(rgba(14,159,110,.85), rgba(16,185,129,.5)); position: relative; } /* a ponta marca onde o fio encontra o bloco de baixo */ .o-fio::after { content: ""; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: #10b981; } .o-fb-ramos { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; width: 100%; max-width: 236px; } .o-fb-ramo-rot { font-size: 7.5px; text-transform: uppercase; letter-spacing: .1em; color: #566a80; text-align: center; margin-bottom: 3px; font-weight: 700; } /* ── Agente de IA: cartões de seção + interruptores ──────────────────────── */ .o-ia-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 13px; background: #080e18; min-height: 300px; align-content: start; } .o-ia-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 9px; padding: 8px 9px; display: grid; gap: 2px; } .o-ia-card b { font-size: 9.5px; color: #e8eef7; font-weight: 600; display: flex; align-items: center; gap: 5px; } .o-ia-card span { font-size: 8.5px; color: #6f849c; } .o-ia-card s { text-decoration: none; font-size: 10px; } .o-ia-card.largo { grid-column: 1 / -1; } .o-ia-linha { display: flex; align-items: center; gap: 7px; padding: 4px 0; border-top: 1px solid rgba(255,255,255,.05); font-size: 9px; color: #b9c8db; } .o-ia-linha:first-of-type { border-top: 0; } .o-ia-linha em { font-style: normal; margin-left: auto; font-size: 8px; color: #566a80; } .o-chave { width: 20px; height: 11px; border-radius: 100px; background: rgba(255,255,255,.12); position: relative; flex: none; } .o-chave::after { content: ""; position: absolute; top: 1.5px; left: 1.5px; width: 8px; height: 8px; border-radius: 50%; background: #8b9bb0; } .o-chave.on { background: linear-gradient(100deg, #0e9f6e, #34d399); } .o-chave.on::after { left: 10.5px; background: #fff; } /* ── Campanhas: a fila de disparo ────────────────────────────────────────── */ .o-camp { padding: 13px; background: #080e18; min-height: 300px; display: grid; gap: 8px; align-content: start; } .o-camp-linha { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 9px; padding: 9px 10px; display: grid; gap: 6px; } .o-camp-topo { display: flex; align-items: center; gap: 7px; font-size: 10px; color: #e8eef7; font-weight: 600; } .o-camp-sel { font-size: 7.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; border-radius: 100px; padding: 2px 7px; margin-left: auto; } .o-camp-sel.indo { background: rgba(52,211,153,.16); color: #34d399; } .o-camp-sel.pausa { background: rgba(242,160,7,.16); color: #f2a007; } .o-camp-sel.fim { background: rgba(255,255,255,.08); color: #8fa3b8; } .o-camp-meta { display: flex; gap: 12px; font-size: 8.5px; color: #6f849c; flex-wrap: wrap; } .o-camp-meta b { color: #a9bdd3; font-weight: 600; } .o-barra { height: 4px; border-radius: 100px; background: rgba(255,255,255,.08); overflow: hidden; } .o-barra i { display: block; height: 100%; border-radius: 100px; background: linear-gradient(90deg, #0e9f6e, #34d399); } /* ── Dashboard: números e um gráfico ─────────────────────────────────────── */ .o-dash { padding: 13px; background: #080e18; min-height: 300px; display: grid; gap: 9px; align-content: start; } .o-dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; } .o-dash-kpi { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 9px; padding: 8px 9px; } .o-dash-kpi span { display: block; font-size: 7.5px; text-transform: uppercase; letter-spacing: .08em; color: #566a80; margin-bottom: 3px; } .o-dash-kpi strong { font-family: "Sora", sans-serif; font-size: 15px; color: #e8eef7; letter-spacing: -.02em; display: block; } .o-dash-kpi em { font-style: normal; font-size: 8px; color: #34d399; } .o-dash-kpi em.baixa { color: #fb7185; } .o-dash-duo { display: grid; grid-template-columns: 1.25fr 1fr; gap: 7px; } .o-dash-bloco { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 9px; padding: 9px 10px; } .o-dash-tit { font-size: 8px; text-transform: uppercase; letter-spacing: .1em; color: #566a80; font-weight: 700; margin-bottom: 9px; } /* Colunas: a altura é o dado. A escala é uma só, e o rótulo embaixo nomeia a etapa. */ .o-colunas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; align-items: end; } /* Flex, não grid, e a altura da barra vem em px do HTML. Com `display: grid` + `align-content: end`, a linha do grid tem altura automática, e a altura percentual da barra resolvia contra ela — ou seja, contra zero. O gráfico saía com os números e os rótulos no lugar e nenhuma barra desenhada. */ .o-coluna { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; } .o-coluna i { display: block; width: 100%; flex: none; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #10b981, #34d399); } .o-coluna b { font-size: 8px; color: #8fa3b8; font-weight: 600; } .o-coluna span { font-size: 7.5px; color: #566a80; text-align: center; line-height: 1.15; } .o-rank { display: grid; gap: 7px; } .o-rank-item { display: grid; gap: 3px; font-size: 8.5px; color: #a9bdd3; } .o-rank-item div { display: flex; justify-content: space-between; } .o-rank-item b { color: #e8eef7; font-weight: 600; } @media (max-width: 620px) { .o-fb { grid-template-columns: 1fr; } .o-fb-paleta { display: none; } .o-ia-grade { grid-template-columns: 1fr; } .o-dash-kpis { grid-template-columns: repeat(2, 1fr); } .o-dash-duo { grid-template-columns: 1fr; } } /* * Linha de identificação jurídica do rodapé. * * Separada por um filete e em corpo menor: é informação que precisa existir e ser encontrável, * não lida. Centralizada porque fecha a página. */ .o-rodape-juridico { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.07); font-size: 0.74rem; line-height: 1.6; text-align: center; opacity: 0.45; } /* * Marca do topo: maior, e com o nome inteiro. * * Estava com 30px de símbolo e só "Veridian" — pequeno demais para o primeiro elemento da página, * e o nome pela metade. "Growth" vem em peso menor e na cor da marca: lê como uma coisa só, sem * competir com o nome. */ .o-marca .marca-simbolo { width: 40px; height: 40px; } .o-marca-nome { display: inline-flex; align-items: baseline; gap: 6px; font-size: 20px; letter-spacing: -0.03em; line-height: 1; } .o-marca-nome em { font-style: normal; font-weight: 600; font-size: 0.82em; color: #34d399; } @media (max-width: 520px) { .o-marca .marca-simbolo { width: 32px; height: 32px; } .o-marca-nome { font-size: 17px; } } /* ════════════════════════════════════════════════════════════════════════════ Dobras claras ════════════════════════════════════════════════════════════════════════════ Uma página escura do começo ao fim cansa antes do fim — e, pior, achata: sem variação de claridade, nenhuma dobra parece mais importante que a outra, e a pessoa rola sem parar em lugar nenhum. Duas dobras claras no meio dão um respiro e marcam onde o assunto muda. O fundo é cinza, não branco. Branco puro ao lado do preto vira flash: a pupila fecha, e as duas dobras seguintes parecem mais escuras do que são. Este cinza tem um fio de verde dentro, então ele lê como parte da paleta e não como "seção sem estilo". A troca é feita nos MESMOS tokens, não em regras novas por componente. Todo componente do tema já lê `--o-ice`, `--o-mist`, `--o-panel`; redefini-los no escopo da seção veste a dobra inteira de uma vez — inclusive o componente que alguém acrescentar amanhã sem lembrar deste arquivo. */ .o-sec.clara, .tema-orbita .secao-clara { --o-void: #e8edea; --o-deep: #dfe6e2; --o-panel: #ffffff; --o-line: #ccd8d2; --o-ice: #08140f; --o-mist: #3d524a; --o-dim: #5b7169; /* O gradiente de texto precisa escurecer: o verde-menta que brilha no preto some no cinza. */ --o-grad: linear-gradient(115deg, #065f46 0%, #0e9f6e 55%, #10b981 100%); --o-brilho: rgba(6, 95, 70, 0.28); background: var(--o-void); color: var(--o-ice); } /* O `--o-aqua` do tema escuro é claro demais para marcar coisa sobre cinza. */ .o-sec.clara .o-olho, .tema-orbita .secao-clara .etiqueta { color: #0a7d55; } .o-sec.clara .o-card li::before { background: #0e9f6e; } .tema-orbita .secao-clara h1, .tema-orbita .secao-clara h2, .tema-orbita .secao-clara h3 { color: var(--o-ice); } .tema-orbita .secao-clara .texto-apoio, .tema-orbita .secao-clara p { color: var(--o-mist); } .tema-orbita .secao-clara .bloco, .tema-orbita .secao-clara .card { background: var(--o-panel); border-color: var(--o-line); } .o-sec.clara .o-card { box-shadow: 0 1px 2px rgba(8, 20, 15, 0.05), 0 12px 28px -20px rgba(8, 20, 15, 0.4); } .o-sec.clara .o-card:hover { box-shadow: 0 2px 4px rgba(8, 20, 15, 0.07), 0 20px 40px -22px rgba(8, 20, 15, 0.45); } .o-sec.clara .o-pilula { background: #fff; } /* Os orbes são manchas de luz sobre preto. Sobre cinza claro viram sujeira — somem. */ .o-sec.clara .o-orbe, .tema-orbita .secao-clara .o-orbe { display: none; } /* * A emenda entre a dobra escura e a clara. * * Duas cores chapadas encostando fazem uma linha dura no meio da página. Um degradê curto de 56px * no topo e no fim da dobra clara resolve — a mesma coisa que o hero já faz com a janela do * produto, pelo mesmo motivo. */ .o-sec.clara::before, .o-sec.clara::after { content: ""; position: absolute; left: 0; right: 0; height: 56px; pointer-events: none; } .o-sec.clara::before { top: 0; background: linear-gradient(#04100c, transparent); opacity: 0.1; } .o-sec.clara::after { bottom: 0; background: linear-gradient(transparent, #04100c); opacity: 0.1; } /* ── O texto de apoio do hero ──────────────────────────────────────────────── É a frase que explica o produto, logo abaixo do título, e saía em cinza de legenda no tamanho de legenda. Quem lê o título e não entende o que o sistema faz, para nesta frase — se ela estiver lavada no fundo escuro, a pessoa sai da página sem saber o que se vende aqui. Vale para os dois heros: o da home usa `.o-lede`, o das páginas de produto usa `.chamada`. São a mesma frase com nomes diferentes, herança de terem sido escritas em semanas diferentes. */ .o-hero-grade .o-lede, .tema-orbita .hero .chamada { color: #dbeee6; font-weight: 500; font-size: clamp(17px, 2.1vw, 21px); line-height: 1.6; max-width: 62ch; } /* Fora do hero, o texto de apoio também estava fraco demais — só que ali basta a cor. */ .tema-orbita .texto-apoio, .tema-orbita .chamada, .o-lede { color: #c3d9d1; } /* ── Fechamento no celular ─────────────────────────────────────────────────── O bloco é `flex` com `space-between`: no desktop, texto à esquerda e botões à direita. No celular os dois pedaços empilham, e os botões ficavam lado a lado espremidos num cartão de 340px — um largo, outro estreito, nenhum alinhado com o texto acima. Empilhados e em largura cheia, viram dois alvos de toque de verdade. */ @media (max-width: 640px) { .chamada-final { flex-direction: column; align-items: stretch; text-align: left; } .chamada-final .hero-acoes { display: flex; flex-direction: column; gap: 10px; width: 100%; } .chamada-final .hero-acoes .btn { width: 100%; } /* A mancha de luz é posicionada a 55% da largura; num cartão estreito ela vira um borrão verde ocupando metade da peça, como se faltasse conteúdo ali. */ .chamada-final::before { inset: auto -20% -70% 20%; height: 260px; opacity: 0.6; } .o-final { padding-inline: 22px; } .o-final .o-ctas { flex-direction: column; align-self: stretch; } .o-final .o-ctas .o-btn { width: 100%; } } /* ════════════════════════════════════════════════════════════════════════════ Grade de planos: seletor de periodicidade + tabela comparativa ════════════════════════════════════════════════════════════════════════════ */ .pl { position: relative; } .pl-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ── Seletor ─────────────────────────────────────────────────────────────── */ .pl-ciclos { display: inline-flex; gap: 4px; margin: 0 auto 28px; padding: 5px; border: 1px solid var(--o-line); border-radius: 999px; background: var(--o-deep); } .pl-ciclos { display: flex; width: max-content; max-width: 100%; } .pl-ciclo { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: none; background: none; color: var(--o-mist); font-family: "Sora", sans-serif; font-weight: 600; font-size: 14px; padding: 10px 20px; border-radius: 999px; white-space: nowrap; transition: background 0.18s, color 0.18s; } .pl-ciclo:hover { color: var(--o-ice); } .pl-ciclo.ativo { background: var(--o-grad); color: #04100c; } /* A economia é o argumento do botão, então ela mora dentro dele — não numa nota de rodapé que ninguém lê antes de escolher. */ .pl-nota { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; padding: 3px 8px; border-radius: 999px; background: rgba(52, 211, 153, 0.16); color: var(--o-aqua); } .pl-ciclo.ativo .pl-nota { background: rgba(4, 16, 12, 0.22); color: #04100c; } /* ── Tabela ──────────────────────────────────────────────────────────────── */ /* Só a tabela rola de lado; o corpo da página, nunca. */ .pl-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; } .pl-tabela { width: 100%; border-collapse: collapse; min-width: 760px; } .pl-tabela th, .pl-tabela td { text-align: center; padding: 13px 14px; } /* * A primeira coluna fica presa na rolagem lateral. * * Sem isso, quem arrasta a tabela no celular para ver o Agência perde de vista o nome da linha e * fica olhando para uma coluna de números sem saber do que são. */ /* * A coluna dos rótulos é a mais estreita da tabela, de propósito. * * Ela não é o assunto: ninguém veio ler "Usuários", veio comparar 3 com 15. Em 210px ela tomava um * quarto da largura para repetir palavras que a pessoa já entendeu na primeira linha — e espremia * justamente as colunas que decidem a compra. Em 150px os rótulos ainda cabem numa linha só, e o * espaço sobra para os planos. */ .pl-tabela th[scope="row"], .pl-canto { position: sticky; left: 0; z-index: 2; text-align: left; background: var(--o-void); font-weight: 500; font-size: 13.5px; color: var(--o-mist); width: 172px; min-width: 172px; padding-right: 10px; } /* Com a coluna da esquerda menor, o que sobra é dividido entre os planos — e cada um fica com uma faixa larga o bastante para o preço respirar, em vez de ficar colado no vizinho. */ .pl-tabela th.pl-col, .pl-tabela td:not([scope]) { width: auto; } /* * `padding-top` folgado em TODAS as colunas, e o selo posicionado dentro dessa folga. * * No fluxo normal, o selo do plano recomendado empurrava o nome e o preço daquela coluna uns 30px * pra baixo — e aí a fileira de preços deixava de ser uma linha. O desalinhamento é exatamente o * defeito que fez os cartões serem abandonados; repeti-lo na tabela seria trocar seis por meia * dúzia. */ /* `.pl-tabela th.pl-col` e não só `.pl-col`: a regra de padding logo acima vale para todo th da tabela e tem mais peso — sozinha, a folga do selo não entrava, e o selo cobria o nome do plano. */ .pl-tabela th.pl-col { position: relative; vertical-align: top; padding-top: 38px; min-width: 150px; } .pl-nome { display: block; font-family: "Sora", sans-serif; font-weight: 800; font-size: 16px; color: var(--o-ice); letter-spacing: -0.01em; } .pl-selo { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 4px 11px; border-radius: 999px; background: var(--o-grad); color: #04100c; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; } .pl-preco { margin: 10px 0 14px; } .pl-valor { display: block; font-family: "Sora", sans-serif; color: var(--o-ice); line-height: 1; } .pl-valor em { font-style: normal; font-size: 14px; font-weight: 600; margin-right: 2px; opacity: 0.75; } .pl-valor b { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; } .pl-valor span { font-size: 13px; font-weight: 500; opacity: 0.7; } .pl-total { display: block; margin-top: 5px; font-size: 11.5px; color: var(--o-dim); } .pl-btn { display: block; padding: 11px 16px; border-radius: 999px; font-family: "Sora", sans-serif; font-weight: 700; font-size: 13.5px; border: 1px solid var(--o-line); color: var(--o-ice); transition: border-color 0.18s, background 0.18s, transform 0.18s; } .pl-btn:hover { border-color: var(--o-volt); background: rgba(14, 159, 110, 0.12); transform: translateY(-1px); } .pl-btn.forte { background: var(--o-grad); color: #04100c; border-color: transparent; box-shadow: 0 8px 30px -10px var(--o-brilho); } .pl-btn.forte:hover { box-shadow: 0 14px 40px -10px var(--o-brilho); background: var(--o-grad); } /* ── A coluna recomendada ────────────────────────────────────────────────── */ /* * Destaque por FUNDO, não por deslocamento. Cartão empurrado pra cima quebra o alinhamento das * linhas, que é justamente o que faz uma tabela valer mais que cinco cartões. */ .pl-col.destaque, td.destaque { background: rgba(14, 159, 110, 0.07); } .pl-col.destaque { border-radius: 14px 14px 0 0; box-shadow: inset 0 0 0 1px rgba(14, 159, 110, 0.3); } .pl-tabela tbody tr:last-child td.destaque { border-radius: 0 0 14px 14px; } .pl-tabela tbody tr { border-top: 1px solid var(--o-line); } .pl-grupo th { text-align: left; padding: 22px 14px 9px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--o-aqua); background: var(--o-void); } .pl-num { font-family: "Sora", sans-serif; font-weight: 600; font-size: 14.5px; color: var(--o-ice); font-variant-numeric: tabular-nums; } .pl-marca span[aria-hidden] { font-size: 15px; color: var(--o-aqua); } .pl-marca:has(span[aria-hidden]:not(:empty)) { line-height: 1; } /* O "—" é o contrário do ✓ e precisa se parecer com ausência, não com outro símbolo qualquer. */ .pl-marca span[aria-hidden]:is(:first-child) { display: inline-block; } .pl-tabela td.pl-marca { color: var(--o-dim); } @media (max-width: 700px) { .pl-ciclos { width: 100%; justify-content: space-between; } .pl-ciclo { flex-direction: column; gap: 3px; padding: 9px 12px; font-size: 13px; } .pl-nota { font-size: 10px; padding: 2px 6px; } .pl-tabela th[scope="row"], .pl-canto { width: 132px; min-width: 132px; font-size: 12.5px; } .pl-valor b { font-size: 28px; } } /* O ciclo escolhido manda no que aparece. `data-ciclo` já vem no HTML, então isto vale antes de qualquer script — e continua valendo se o script não rodar. */ .pl [data-para] { display: none; } .pl[data-ciclo="mensal"] [data-para="mensal"], .pl[data-ciclo="semestral"] [data-para="semestral"], .pl[data-ciclo="anual"] [data-para="anual"] { display: block; } /* ── Ajustes de celular ────────────────────────────────────────────────────── Medidos num iframe de 390px, que é o jeito honesto de conferir: o headless com --window-size monta o layout numa largura e captura em outra, e mostra corte onde não há. */ /* No desktop a tabela cabe inteira e a dica seria ruído. */ .pl-dica { display: none; } @media (max-width: 860px) { .pl-dica { display: block; text-align: center; margin: 0 0 12px; font-size: 12px; color: var(--o-dim); } /* A seta aponta pro gesto — sem ela a frase parece aviso de erro. */ .pl-dica::after { content: " →"; } } @media (max-width: 760px) { /* * A demonstração desenhada tem largura mínima própria (uns 390px) e o bloco onde ela mora fica * com 335px no celular. Ela vazava para fora da tela, e como o corpo da página corta o que * transborda, parecia que a página inteira estava cortada — foi isso que apareceu no print. * Rolando dentro do próprio bloco, a peça continua legível e nada mais vaza. */ .alternado-arte { min-width: 0; overflow-x: auto; } /* O botão do topo quebrava em duas linhas e dobrava a altura do cabeçalho. */ .o-topo .o-btn { padding: 11px 18px; font-size: 13.5px; } } /* ── Simulação navegável do sistema ────────────────────────────────────────── O menu é o que navega, então os itens precisam parecer clicáveis (e serem, de teclado). */ .sim-item { width: 100%; border: none; background: none; cursor: pointer; text-align: left; font: inherit; color: rgba(224, 247, 243, 0.62); transition: background 0.15s, color 0.15s; } .sim-item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } .sim-item:focus-visible { outline: 2px solid #5eead4; outline-offset: -2px; } /* O item corrente ganha o mesmo tratamento que o menu do sistema dá ao seu. */ .sim-item.on, .sim[data-tela="crm"] .sim-item[data-vai="crm"] { background: rgba(255, 255, 255, 0.13); color: #fff; font-weight: 600; box-shadow: inset 2px 0 0 #5eead4; } /* Exceto quando o visitante já escolheu outra: aí o CRM volta a ser um item comum. */ .sim:not([data-tela="crm"]) .sim-item[data-vai="crm"]:not(.on) { background: none; color: rgba(224, 247, 243, 0.62); font-weight: 400; box-shadow: none; } /* Itens sem tela desenhada: presentes, porque o sistema os tem, mas sem prometer clique. */ .o-app-item.apagado { opacity: 0.45; } .sim-palco { position: relative; } .sim-quadro, .o-tela-url[data-quadro] { display: none; } /* A regra que casa cada tela com o seu quadro é gerada junto do HTML, em `simulacao.mjs`: escrita aqui, ela precisaria ganhar uma linha nova a cada tela — e um dia ganharia a tela sem a linha. */ .sim-nota { margin-top: 12px; text-align: center; font-size: 12.5px; color: var(--o-dim); } @media (max-width: 720px) { /* Menu em cima, virando uma fileira que rola: a coluna de 132px comeria metade da tela. */ .sim .o-app { grid-template-columns: 1fr; } .sim .o-app-menu { flex-direction: row; overflow-x: auto; gap: 4px; padding: 9px; align-items: center; } .sim .o-app-marca, .sim .o-app-grupo, .sim .o-app-item.apagado { display: none; } .sim .sim-item { width: auto; white-space: nowrap; padding: 7px 11px; border-radius: 999px; } .sim .sim-item.on, .sim[data-tela="crm"] .sim-item[data-vai="crm"] { box-shadow: none; background: rgba(94, 234, 212, 0.22); } } /* ── "Nenhum deles encaixou?" ──────────────────────────────────────────────── Deliberadamente NÃO parece uma sexta coluna: fica fora da tabela, em uma faixa larga, para ler como outra conversa — e não como um plano que a pessoa teria que comparar com os outros. */ .pl-medida { margin-top: 26px; display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; padding: 24px clamp(20px, 3vw, 34px); border: 1px solid var(--o-line); border-radius: 18px; background: radial-gradient(120% 140% at 100% 0%, rgba(14, 159, 110, 0.16), transparent 62%), var(--o-deep); } .pl-medida h3 { margin: 0 0 6px; font-family: "Sora", sans-serif; font-weight: 800; font-size: clamp(17px, 2vw, 21px); letter-spacing: -0.02em; color: var(--o-ice); } .pl-medida p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--o-mist); max-width: 62ch; } /* O botão não encolhe: com o texto ao lado, era ele que perdia largura e quebrava em três linhas. */ .pl-medida-btn { flex-shrink: 0; padding: 14px 26px; font-size: 14.5px; } @media (max-width: 640px) { .pl-medida { flex-direction: column; align-items: stretch; text-align: left; } .pl-medida-btn { text-align: center; } } /* ── Integrações ───────────────────────────────────────────────────────────── Grid de grupos, não uma parede de logos: quem lê está procurando UM nome — o da ferramenta que já usa — e acha mais rápido lendo o título do grupo certo do que varrendo ícones. */ .integra { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .integra-grupo { background: var(--o-panel); border: 1px solid var(--o-line); border-radius: 14px; padding: 20px; } .integra-grupo h3 { margin: 0 0 6px; font-family: "Sora", sans-serif; font-weight: 700; font-size: 15.5px; color: var(--o-ice); letter-spacing: -0.01em; } .integra-grupo p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--o-mist); } .integra-itens { display: flex; flex-wrap: wrap; gap: 6px; } .integra-itens span { font-size: 12.5px; font-weight: 600; color: var(--o-ice); border: 1px solid var(--o-line); border-radius: 999px; padding: 5px 11px; background: rgba(14, 159, 110, 0.07); } /* ── Telas da área de membros ──────────────────────────────────────────────── Mesma escala das telas do CRM (11px de base): as duas aparecem dentro da mesma moldura de janela, e tamanho diferente entre elas denunciaria que são desenhos, não o sistema. */ .o-lms { padding: 13px; background: #080e18; min-height: 300px; display: grid; gap: 14px; align-content: start; font-size: 11px; } .o-lms-fila { display: grid; gap: 7px; } .o-lms-titulo { font-weight: 700; color: #e8eef7; font-size: 11.5px; } .o-lms-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .o-lms-card { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.07); border-radius: 9px; padding: 7px; display: grid; gap: 4px; } .o-lms-capa { display: block; height: 42px; border-radius: 6px; background: linear-gradient(120deg, #0a3d2c, #0e9f6e); } .o-lms-card b { color: #e8eef7; font-size: 10px; font-weight: 600; line-height: 1.25; } .o-lms-card em { font-style: normal; font-size: 8.5px; color: #6f849c; } .o-lms-barra { display: block; height: 3px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; } .o-lms-barra i { display: block; height: 100%; background: #34d399; } .o-lms-player { padding: 13px; background: #080e18; min-height: 300px; display: grid; grid-template-columns: 1fr 190px; gap: 11px; font-size: 11px; align-items: start; } .o-lms-video { height: 132px; border-radius: 9px; background: linear-gradient(140deg, #0c2119, #04100c); display: grid; place-items: center; border: 1px solid rgba(255,255,255,.07); } .o-lms-video span { width: 34px; height: 34px; border-radius: 50%; background: rgba(52,211,153,.18); color: #5eead4; display: grid; place-items: center; font-size: 13px; } .o-lms-abas { padding: 9px 0 7px; color: #e8eef7; font-size: 11.5px; } .o-lms-mat { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 9px; } .o-lms-mat span { font-size: 9px; color: #9fb4cc; border: 1px solid rgba(255,255,255,.09); border-radius: 100px; padding: 3px 8px; } .o-lms-coment { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 9px; padding: 9px; display: grid; gap: 4px; } .o-lms-coment b { color: #e8eef7; font-size: 10px; } .o-lms-coment span { font-size: 9.5px; color: #9fb4cc; line-height: 1.45; } .o-lms-coment .resposta { color: #5eead4; font-size: 8.5px; } .o-lms-lista { background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); border-radius: 9px; padding: 9px; display: grid; gap: 3px; align-content: start; } .o-lms-modulo { font-size: 8px; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.34); padding: 7px 2px 3px; font-weight: 600; } .o-lms-aula { display: flex; align-items: center; gap: 7px; font-size: 9.5px; color: #9fb4cc; padding: 5px 6px; border-radius: 6px; } .o-lms-aula i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.18); flex-shrink: 0; } .o-lms-aula.ok i { background: #34d399; } .o-lms-aula.agora { background: rgba(255,255,255,.1); color: #fff; font-weight: 600; } .o-lms-aula.agora i { background: #5eead4; box-shadow: 0 0 8px #5eead4; } @media (max-width: 620px) { .o-lms-cards { grid-template-columns: repeat(2, 1fr); } .o-lms-player { grid-template-columns: 1fr; } }