/* ============================================================================= apoio.digital — folha da home (/) ============================================================================= Folha PRÓPRIA da home, e autocontida de propósito. A `site.css` continua servindo /campanhas e não é mais carregada aqui. POR QUE SEPARADA, e não mesclada na site.css: as duas páginas passaram a querer coisas opostas no mesmo nome de classe. `.btn-line` aqui é contorno claro sobre fundo escuro; lá é contorno escuro sobre fundo claro — mesclar deixaria o botão da /campanhas com texto --mist sobre fundo --mist, ou seja invisível, sem erro nenhum no deploy. O mesmo vale para .callout, .site-head, .site-foot e .brand, e para o `p { color: #2b323f }` da site.css, que venceria por regra direta a herança das seções escuras daqui. Como esta folha é a única da home, ela precisa trazer TAMBÉM o bloco do mapa (#rede-brasil), portado da site.css. Está mais abaixo, na sua própria seção. A paleta é a de site.css e app.css. Duas exceções conscientes, ambas de contraste, documentadas onde são declaradas: --slate e --on-ink-3. ★ NENHUM ancestral da seção .sequencia pode ter overflow-x: hidden. Isso torna o ancestral um contêiner de rolagem e DESLIGA o position: sticky de todos os descendentes — a seção inteira deixa de prender e sobra uma faixa vazia de 260vh no meio da página. Use overflow-x: clip. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Instrument+Sans:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap'); :root { --ink: #0e1116; --mist: #e7eaf0; --paper: #ffffff; --volt: #4534e8; --volt-soft: #6d5eff; --ember: #ff9a1f; --ember-ink: #8a5200; --danger: #d92d20; /* ★ #616a7d, e não o #656e82 da site.css. O tom antigo dá 4,24:1 sobre --mist — abaixo do mínimo de 4,5:1 da WCAG AA para texto normal, e ele pinta quase todo o corpo de texto das seções claras (FAQ, cartões, legendas do celular). Quatro passos mais escuro fecha em 4,53:1 e a diferença não é perceptível lado a lado. Sobre --paper vai a 5,4:1. */ --slate: #616a7d; /* Tons de texto sobre --ink. */ --on-ink-1: #a8b1c4; /* 8,78:1 — parágrafos de destaque */ --on-ink-2: #8d97ab; /* 6,44:1 — corpo */ /* ★ #727d91, e não #6f7a8f: o original dá 4,37:1 sobre --ink, e é o tom do miúdo, das legendas da faixa de provas e do rodapé. Dois passos mais claro fecha em 4,54:1. */ --on-ink-3: #727d91; --volt-light: #8f83ff; /* 6,18:1 sobre --ink — sobrelinha e links */ --display: 'Bricolage Grotesque', system-ui, sans-serif; --body: 'Instrument Sans', system-ui, -apple-system, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; --page: 1120px; --line: rgba(14, 17, 22, .1); --curva: cubic-bezier(.2, .7, .3, 1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--body); font-size: 16.5px; line-height: 1.6; color: var(--ink); background: var(--mist); overflow-x: clip; /* ★ clip, nunca hidden — ver topo do arquivo */ -webkit-font-smoothing: antialiased; } /* ★ `overflow-x: clip` só existe a partir do Safari 16. Onde ele cai, o body fica sem contenção nenhuma e a órbita de 150vw posicionada em left:50% põe a home inteira a rolar na horizontal. `max-width: 100%` no .orbita não resolve (ela é absoluta), então a contenção de resgate vai nas seções que hospedam órbita — que já têm overflow: hidden e não têm sticky dentro. */ @supports not (overflow-x: clip) { body { overflow-x: hidden; } } /* Com `hidden` no body o sticky da sequência morre — o ancestral vira contêiner de rolagem. A degradação está lá embaixo, DEPOIS do @media que liga o sticky: aqui em cima ela seria sobrescrita por ele. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } /* ★ Zerar a DURAÇÃO não para uma animação `infinite` — o navegador reinicia e amostra uma fase arbitrária a cada quadro, o que é estroboscopia, não repouso. As três infinitas desta folha precisam de `animation: none`. É a mesma guarda que app.css:1746 já aplicava ao .pulso antes de esta folha recriar o elemento. */ .orbita-gira, .fone-flutua, .constelacao .pulso { animation: none !important; } .constelacao .pulso { opacity: 0; } } .wrap { max-width: var(--page); margin: 0 auto; padding: 0 22px; } /* Porta-símbolos do . Fora do fluxo e sem tamanho: se ficar no fluxo, abre uma faixa em branco no topo da página. */ .sumido { position: absolute; width: 0; height: 0; overflow: hidden; } /* --- Tipografia ----------------------------------------------------------- */ h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; margin: 0 0 16px; } h1 { font-size: clamp(38px, 5.4vw, 64px); line-height: 1.02; letter-spacing: -.032em; text-wrap: balance; } h2 { font-size: clamp(28px, 3.8vw, 44px); line-height: 1.05; text-wrap: balance; } h3 { font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; } p { margin: 0 0 16px; line-height: 1.55; text-wrap: pretty; } a { color: var(--volt); text-decoration: none; } a:hover { color: var(--volt-soft); } .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--volt); margin: 0 0 16px; } .lead { font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.5; color: var(--slate); } .fineprint { font-size: 13.5px; line-height: 1.55; color: var(--slate); } .num { font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; } /* Seções escuras. Declarar `color` aqui obriga a declarar `color` de volta em qualquer superfície clara dentro delas — ver .fone-tela. */ .escura { background: var(--ink); color: var(--mist); } .escura .eyebrow { color: var(--volt-light); } .escura .lead { color: var(--on-ink-1); } .escura .fineprint { color: var(--on-ink-3); } /* ★ `:not(.btn):not(.btn-line)` não é preciosismo — sem isso esta regra (0,1,1) vence `.btn` (0,1,0) e o rótulo do botão primário sai --volt-light sobre --volt: 2,36:1, num CTA de 16px. Acontecia nos dois botões de loja mais importantes da página, o do hero e o do fechamento, e o efeito é discreto o bastante para passar numa conferência a olho. */ .escura a:not(.btn):not(.btn-line) { color: var(--volt-light); } /* --- Botões --------------------------------------------------------------- */ .btn, .btn-line { display: inline-flex; align-items: center; gap: 11px; padding: 14px 22px; border-radius: 12px; font-weight: 600; font-size: 16px; white-space: nowrap; } .btn { background: var(--volt); color: #fff; } .btn:hover { background: var(--volt-soft); color: #fff; } .btn svg { width: 18px; height: 18px; fill: currentColor; } .btn-line { border: 1px solid rgba(231, 234, 240, .24); color: var(--mist); } .btn-line:hover { border-color: rgba(231, 234, 240, .5); color: var(--mist); } .btn-line.claro { border: 1.5px solid rgba(14, 17, 22, .16); color: var(--ink); } .btn-line.claro:hover { border-color: rgba(14, 17, 22, .4); color: var(--ink); } .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } /* Foco visível. A folha esconde o contorno nativo em lugar nenhum, mas os botões têm fundo próprio e o anel padrão some contra ele em alguns temas. */ a:focus-visible, summary:focus-visible, button:focus-visible { outline: 2px solid var(--volt-light); outline-offset: 3px; border-radius: 4px; } /* Detecção de loja: home.js revela os botões da plataforma detectada. Sem script, o seletor de `computador` abaixo garante que o botão da Play apareça — a página nunca fica sem caminho para baixar. */ [data-plat] { display: none; } [data-plat~="computador"] { display: inline-flex; } /* --- Cabeçalho ------------------------------------------------------------ */ .site-head { position: sticky; top: 0; z-index: 40; background: rgba(14, 17, 22, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(231, 234, 240, .12); } .site-head .wrap { display: flex; align-items: center; gap: 18px; min-height: 64px; position: relative; } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: -.03em; color: var(--mist); margin-right: auto; } .brand:hover { color: var(--mist); } .brand svg { width: 26px; height: 26px; } .site-nav { display: flex; align-items: center; gap: 4px; } .site-nav a { padding: 8px 12px; border-radius: 10px; font-size: 14.5px; font-weight: 500; color: var(--on-ink-2); } .site-nav a:hover { color: var(--mist); background: rgba(231, 234, 240, .06); } .nav-cta { padding: 9px 16px; border-radius: 10px; background: var(--volt); color: #fff; font-size: 14.5px; font-weight: 600; white-space: nowrap; } .nav-cta:hover { background: var(--volt-soft); color: #fff; } .progresso { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--volt-soft); } /* --- Hero ----------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; } .hero .wrap { position: relative; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; padding: 56px 0 84px; } .hero h1 { margin-bottom: 20px; } .hero .lead { margin-bottom: 14px; max-width: 520px; } .hero-sub { font-size: 16px; color: var(--on-ink-2); margin: 0 0 30px; max-width: 520px; } .hero .fineprint { margin: 18px 0 0; max-width: 460px; } /* Órbitas de fundo. ★ O parallax entra por `--py`, e a COMPOSIÇÃO fica aqui. home.js só escreve o deslocamento. A alternativa — o script ler a transformação computada e reescrevê-la inteira — guardava uma matriz já resolvida em pixels, que ninguém rebaseava: bastava redimensionar a janela para a órbita sair do centro e ficar lá. */ .orbita { position: absolute; top: 50%; left: 50%; width: min(1400px, 150vw); height: auto; transform: translate(-50%, -50%) translateY(var(--py, 0px)); opacity: .5; pointer-events: none; } .orbita-gira { transform-origin: 450px 450px; animation: gira 120s linear infinite; } @keyframes gira { to { transform: rotate(360deg); } } /* Faixa de convite. Só existe no DOM quando há código de convite — o HTML nasce SEM ela e home.js a insere a partir do junto e a HOME INTEIRA passa a rolar na horizontal, com o texto das outras seções cortado. O sintoma aparece longe da causa — parece defeito do mapa e é a definição da coluna. */ .rede-bloco { display: grid; gap: 30px 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* Centra o mapa contra a coluna da lista, que é mais alta: alinhado ao topo, sobra um vão de uns 200px embaixo do desenho que lê como falta de algo. */ align-items: center; } .rede-figura { margin: 0; min-width: 0; } .rede-painel { min-width: 0; } .rede-figura figcaption { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--slate); } /* A cidade tocada no segundo nível. Some quando nada está escolhido — linha vazia reservando altura faz a legenda pular a cada toque. */ .rede-cidade { margin: 10px 0 0; font-size: 14px; font-weight: 600; color: var(--volt); min-height: 0; } .rede-cidade:empty { display: none; } .rede-escala { display: inline-flex; gap: 3px; } .rede-escala i { width: 20px; height: 10px; border-radius: 2px; } /* O mapa só aparece depois de pintado. Sem isto, o SVG entra todo preto por um quadro — o navegador aplica o preenchimento padrão antes de o CSS casar com as classes que o script acabou de pôr. */ .rede-mapa { opacity: 0; transition: opacity .35s ease; } .rede-mapa.pronto { opacity: 1; } .rede-mapa svg { display: block; width: 100%; height: auto; } .rede-mapa path { fill: rgba(14, 17, 22, .07); stroke: var(--paper); stroke-width: 1.5; stroke-linejoin: round; transition: fill .2s, opacity .2s; /* O traço é medido em PIXELS, não em unidades do viewBox. Sem isto, o terceiro nível vira mancha: o viewBox do Brasil tem 1000 unidades de largura e o de uma cidade tem ~45, então o mesmo `stroke-width: 2` sai com 0,9px num e 25px no outro — cobrindo o bairro inteiro que deveria apenas contornar. */ vector-effect: non-scaling-stroke; } /* ★ Escopadas em .rede-*, e não nuas. Nesta folha `.n1`, `.n2` e `.n3` também são os níveis da constelação do celular, com outro significado e outra cor. Sem o escopo, a última declarada venceria — e a legenda do mapa precisa de cinco degraus enquanto a constelação para em três. */ .rede-escala .n1, .rede-mapa path.n1 { fill: rgba(69, 52, 232, .16); background: rgba(69, 52, 232, .16); } .rede-escala .n2, .rede-mapa path.n2 { fill: rgba(69, 52, 232, .32); background: rgba(69, 52, 232, .32); } .rede-escala .n3, .rede-mapa path.n3 { fill: rgba(69, 52, 232, .50); background: rgba(69, 52, 232, .50); } .rede-escala .n4, .rede-mapa path.n4 { fill: rgba(69, 52, 232, .72); background: rgba(69, 52, 232, .72); } .rede-escala .n5, .rede-mapa path.n5 { fill: var(--volt); background: var(--volt); } .rede-mapa path.tocavel { cursor: pointer; } .rede-mapa path.tocavel:hover { stroke: var(--ink); stroke-width: 2; } /* Estado escolhido: os outros recuam em vez de o escolhido gritar. Um contorno mais grosso seria coberto pelos vizinhos, porque SVG pinta na ordem do documento e não conhece z-index. */ .rede-mapa.filtrado path:not(.on) { opacity: .3; } .rede-mapa path.on { stroke: var(--ink); stroke-width: 2; } /* Bolha da camada de resgate — bairro do OpenStreetMap, quando a malha do IBGE nao nomeia a area do jeito que o CEP devolve. O raio e calculado em js/mapa-br.js, depois do enquadramento: r vive em unidades do viewBox, e viewBox de cidade grande e dez vezes o de cidade pequena. */ .rede-mapa circle.bolha { stroke: var(--paper); stroke-width: 1.2; vector-effect: non-scaling-stroke; cursor: pointer; } .rede-mapa circle.bolha.n1 { fill: rgba(69, 52, 232, .35); } .rede-mapa circle.bolha.n2 { fill: rgba(69, 52, 232, .5); } .rede-mapa circle.bolha.n3 { fill: rgba(69, 52, 232, .65); } .rede-mapa circle.bolha.n4 { fill: rgba(69, 52, 232, .8); } .rede-mapa circle.bolha.n5 { fill: var(--volt); } .rede-mapa circle.bolha.on { stroke: var(--ink); stroke-width: 2; } .rede-numero { margin: 0; } .rede-numero b { display: block; font-family: var(--mono); font-weight: 700; font-size: clamp(38px, 6.4vw, 54px); letter-spacing: -.03em; line-height: 1; color: var(--ink); } .rede-numero span { font-size: 15px; color: var(--slate); } .rede-numero span + span::before { content: ' · '; } /* Fila de estados. Rola na horizontal em vez de quebrar em cinco linhas: com 27 UFs, embrulhar empurraria a classificação para baixo da dobra justamente no celular, que é onde quase todo mundo abre. */ .rede-atalhos { display: flex; gap: 7px; overflow-x: auto; margin: 20px 0 24px; padding-bottom: 6px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } /* Esmaece a borda quando ainda há estado à direita. Sem isso o corte é seco no limite da coluna e lê como defeito de layout, não como "role para ver mais". A classe é posta por js/mapa.js, que sabe se sobrou coisa fora — pintar o véu sempre esconderia o último botão quando a fila já cabe inteira. */ .rede-atalhos.rolavel { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent); } .rede-atalho { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 7px; padding: 8px 13px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 14px; cursor: pointer; transition: border-color .16s, background .16s; } .rede-atalho b { font-weight: 600; letter-spacing: -0.01em; } .rede-atalho span { font-family: var(--mono); font-size: 11.5px; color: var(--slate); } .rede-atalho:hover { border-color: rgba(14, 17, 22, .32); } .rede-atalho.on { background: var(--volt); border-color: var(--volt); color: #fff; } .rede-atalho.on span { color: rgba(255, 255, 255, .82); } .rede-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .rede-cabeca h3 { margin: 0; } .rede-cabeca span { font-size: 11.5px; color: var(--slate); text-align: right; } .rede-lista { list-style: none; margin: 0 0 16px; padding: 0; } .rede-lista li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-bottom: 7px; padding: 11px 16px; background: var(--paper); border: 1.5px solid var(--line); border-radius: 13px; } .rede-lista .pos { font-family: var(--mono); font-size: 12.5px; color: var(--slate); text-align: right; } .rede-lista .nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rede-lista .nome small { font-family: var(--mono); font-size: 10.5px; color: var(--slate); padding: 2px 5px; border-radius: 5px; background: rgba(14, 17, 22, .05); } .rede-lista .quantos { font-family: var(--mono); font-weight: 700; font-size: 17px; letter-spacing: -.02em; } /* --- Sequência ------------------------------------------------------------ ★ O CELULAR É A BASE, e o desktop é o caso especial. A ordem no DOM é sobrelinha, passo, TELA, passo, TELA, passo, TELA — cada tela logo depois do parágrafo que a explica. No celular isso é exatamente o que se quer ler, e sai de graça: uma coluna, ordem natural. No desktop a mesma marcação vira duas colunas por posicionamento de grade: os três passos empilham na coluna 1 e as três telas ocupam a MESMA área da coluna 2, sobrepostas — que é o baralho. Sem duplicar marcação e sem position: absolute. -------------------------------------------------------------------------- */ .sequencia { position: relative; background: var(--mist); } .seq-sticky { padding: 72px 0; } .seq-trilha { height: 0; } .seq-grid { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 22px; display: grid; gap: 26px; transform-origin: center center; /* home.js escala isto para caber na altura */ } .seq-eyebrow { margin: 0; } .passo { display: flex; gap: 18px; } .passo h3 { font-weight: 800; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.08; letter-spacing: -.03em; margin: 0 0 8px; } .passo p { margin: 0; color: var(--slate); font-size: 16px; line-height: 1.5; max-width: 420px; } .passo-bar { width: 3px; flex: none; border-radius: 9px; background: var(--volt); } /* O celular do hero é um só; a folha só precisa centrá-lo. */ .hero-fone { display: flex; justify-content: center; } .tela { width: 302px; max-width: 100%; margin: 0 auto 14px; } .tela .fone { border: none; box-shadow: 0 40px 80px -34px rgba(14, 17, 22, .55); } .tela .fone-tela { height: 602px; } @media (min-width: 900px) { /* A altura é a trilha de rolagem; o sticky prende o conteúdo enquanto ela passa. */ .seq-trilha { height: 260vh; } .seq-sticky { position: sticky; top: 64px; height: calc(100vh - 64px); height: calc(100dvh - 64px); display: flex; align-items: center; overflow: hidden; padding: 0; } .seq-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto auto; column-gap: 56px; row-gap: 26px; align-items: center; } /* Posições explícitas por índice porque `.passo` e `.tela` são as duas
, e :nth-of-type não sabe distinguir. A ordem no DOM é fixa: 1 sobrelinha · 2 passo · 3 tela · 4 passo · 5 tela · 6 passo · 7 tela. */ .seq-grid > :nth-child(1) { grid-area: 1 / 1; } .seq-grid > :nth-child(2) { grid-area: 2 / 1; } .seq-grid > :nth-child(4) { grid-area: 3 / 1; } .seq-grid > :nth-child(6) { grid-area: 4 / 1; } /* As três na mesma área: itens de grade que dividem célula se sobrepõem. */ .seq-grid > .tela { grid-area: 1 / 2 / -1 / 3; justify-self: center; align-self: center; margin: 0; } /* O passo inativo recua — dispositivo de foco que só faz sentido quando as três telas dividem o mesmo lugar. No celular todos ficam legíveis. */ .passo { opacity: .38; transition: opacity .45s ease; } .passo.ativo { opacity: 1; } .passo-bar { transform: scaleY(.25); transform-origin: top; transition: transform .5s var(--curva); } .passo.ativo .passo-bar { transform: scaleY(1); } /* A troca de tela é um baralho: a que sai sobe, a que entra vem de baixo, as duas com desfoque. Fade puro não leu como "outra tela do mesmo app". */ .tela { opacity: 0; filter: blur(6px); transform: translateY(46px) scale(.9) rotate(4deg); pointer-events: none; transition: opacity .6s var(--curva), transform .6s var(--curva), filter .6s ease; } .tela.ativa { opacity: 1; filter: none; transform: translateY(0) scale(1) rotate(0deg); pointer-events: auto; } .tela.passada { transform: translateY(-46px) scale(.9) rotate(-4deg); } /* ★ Sem JavaScript, volta à forma empilhada — que agora é simplesmente a base da folha. Sem isto, acima de 900px a seção ficaria com uma tela e 260vh de branco. `html.js` é posto por uma linha no , antes da primeira pintura. */ html:not(.js) .seq-sticky { position: static; height: auto; overflow: visible; padding: 72px 0; } html:not(.js) .seq-trilha { height: 0; } html:not(.js) .seq-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } html:not(.js) .seq-grid > * { grid-area: auto; } html:not(.js) .seq-grid > .tela { justify-self: start; margin: 0 auto 14px; } html:not(.js) .passo { opacity: 1; } html:not(.js) .passo-bar { transform: none; } html:not(.js) .tela { opacity: 1; filter: none; transform: none; pointer-events: auto; } } /* ★ Onde `overflow-x: clip` não existe (Safari < 16), o body cai para `hidden` lá em cima — e `hidden` num ancestral DESLIGA o position: sticky de todos os descendentes. Em vez de deixar a seção prender-sem-prender, ela volta à forma empilhada, que é legível e honesta. Precisa vir DEPOIS do @media acima para vencê-lo. */ @supports not (overflow-x: clip) { .seq-sticky { position: static; height: auto; overflow: visible; padding: 72px 0; } .seq-trilha { height: 0; } .seq-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } .seq-grid > * { grid-area: auto; } .seq-grid > .tela { justify-self: start; margin: 0 auto 14px; } .passo { opacity: 1; } .passo-bar { transform: none; } .tela { opacity: 1; filter: none; transform: none; pointer-events: auto; } } /* Contadores do painel */ .tally { display: flex; gap: 26px; margin: 0 0 20px; } .tally .n { font-family: var(--mono); font-weight: 700; font-size: 40px; line-height: 1; } .tally .rede .n { color: var(--volt-soft); } .tally small { display: block; margin-top: 7px; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); } /* Constelação — geometria e cores vindas de app.css e de js/app.js. ★ Os níveis são escopados em .constelacao: o mapa do #rede-brasil usa .n1..n5 com outro sentido, na mesma página. */ .constelacao { background: var(--paper); border: 1.5px solid var(--line); border-radius: 20px; padding: 8px; margin-bottom: 12px; } .constelacao svg { display: block; width: 100%; height: auto; } .constelacao .guia { fill: none; stroke: rgba(14, 17, 22, .07); stroke-width: 1; } .constelacao .guia.acesa { stroke: rgba(69, 52, 232, .4); } .constelacao .aresta { stroke: var(--volt-soft); stroke-width: 1; fill: none; opacity: .38; stroke-linecap: round; } .constelacao .n1 { fill: var(--volt); } .constelacao .n1 .formou { fill: var(--ember); } .constelacao .n2 { fill: var(--volt-soft); } .constelacao .n3 { fill: rgba(109, 94, 255, .5); } .constelacao .centro { fill: var(--ink); } .constelacao .pulso { fill: none; stroke: var(--volt); transform-box: fill-box; transform-origin: center; animation: pulsar 4s cubic-bezier(.2, .6, .3, 1) infinite; } @keyframes pulsar { 0% { transform: scale(1); opacity: .5; stroke-width: 2; } 70%, 100% { transform: scale(2.6); opacity: 0; stroke-width: 1; } } .legenda { display: flex; gap: 14px; align-items: center; font-size: 10.5px; color: var(--slate); } .legenda span { display: flex; align-items: center; gap: 5px; } .legenda i { display: block; width: 8px; height: 8px; border-radius: 99px; } .legenda .p1 { background: var(--volt); } .legenda .p2 { background: var(--volt-soft); width: 7px; height: 7px; } .legenda .p3 { background: var(--ember); } /* Marco */ .marco { background: rgba(255, 154, 31, .14); border-radius: 14px; padding: 18px; margin-bottom: 18px; } .marco .eyebrow { color: var(--ember-ink); } .marco h2 { font-size: 26px; letter-spacing: -.028em; color: var(--ember-ink); margin: 0 0 12px; } .marco p { font-size: 12.5px; line-height: 1.45; color: var(--ember-ink); margin: 0; } .marco-bar { height: 8px; border-radius: 99px; background: rgba(138, 82, 0, .16); overflow: hidden; margin-bottom: 10px; } /* ★ 87%, e não 0. A barra é preenchida por home.js, que zera e anima quando a tela entra — mas isso só acontece na sequência fixa, acima de 900px. No celular, e sem script, a seção nunca é pintada: com `width: 0` a barra do marco ficava permanentemente vazia justo onde quase todo mundo abre. */ .marco-bar span { display: block; height: 100%; width: 87%; border-radius: 99px; background: var(--ember-ink); } .escada { list-style: none; display: flex; gap: 6px; margin: 14px 0 0; padding: 0; } .escada li { flex: 1; min-width: 0; text-align: center; font-size: 10px; line-height: 1.3; color: var(--ember-ink); opacity: .55; } .escada li.alcancado { opacity: .85; } .escada li.atual { opacity: 1; font-weight: 600; } .escada .ponto { display: block; width: 7px; height: 7px; border-radius: 99px; background: var(--ember-ink); margin: 0 auto 6px; } .escada li.atual .ponto { width: 9px; height: 9px; margin-bottom: 5px; box-shadow: 0 0 0 3px rgba(138, 82, 0, .22); } .escada li:not(.alcancado):not(.atual) .ponto { background: none; border: 1.5px solid var(--ember-ink); } /* Classificação */ .abas { display: flex; gap: 6px; margin-bottom: 12px; } /* ★ #565e70 e não var(--slate): o fundo da aba inativa é --ink a 6% sobre --mist (#dadde3), e ali o --slate fica em 3,99:1. */ .abas span { padding: 6px 12px; border-radius: 99px; background: rgba(14, 17, 22, .06); color: #565e70; font-size: 12px; font-weight: 600; } .abas .ativa { background: var(--volt); color: #fff; } .rank .linha { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid rgba(14, 17, 22, .07); } .rank .linha:last-child { border-bottom: none; } .rank .pos { font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--slate); width: 20px; } .rank .nome { flex: 1; font-size: 14px; font-weight: 500; } .rank .qtd { font-family: var(--mono); font-weight: 700; font-size: 14px; } .rank .eu { background: rgba(69, 52, 232, .07); } .rank .eu .pos, .rank .eu .nome, .rank .eu .qtd { color: var(--volt); font-weight: 600; } /* Convite */ .link-pessoal { display: flex; align-items: center; gap: 10px; background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 10px 10px 14px; margin-bottom: 18px; } .link-pessoal code { flex: 1; font-family: var(--mono); font-weight: 500; font-size: 12.5px; overflow: hidden; white-space: nowrap; } .chip { padding: 7px 12px; border-radius: 8px; background: rgba(69, 52, 232, .1); color: var(--volt); font-size: 11.5px; font-weight: 600; } .chip.forte { background: var(--volt); color: #fff; } .municao .linha { display: flex; align-items: center; gap: 11px; padding: 11px 13px; } .municao .linha + .linha { border-top: 1px solid rgba(14, 17, 22, .07); } .municao .avatar { width: 32px; height: 32px; font-size: 13px; } /* --- A conta -------------------------------------------------------------- */ .conta .wrap { padding: 100px 22px; } .conta h2 { font-size: clamp(30px, 4.2vw, 50px); line-height: 1.04; max-width: 760px; margin-bottom: 20px; } .conta .lead { font-size: 18px; margin-bottom: 48px; max-width: 620px; } .conta .fineprint { max-width: 640px; margin: 0; } .escada-niveis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 26px; } .escada-niveis > div { border: 1px solid rgba(231, 234, 240, .14); border-radius: 16px; padding: 22px; } .escada-niveis .rotulo { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--on-ink-3); margin-bottom: 12px; } .escada-niveis b { font-family: var(--mono); font-weight: 700; font-size: clamp(30px, 3.4vw, 42px); line-height: 1; } .escada-niveis .desc { display: block; font-size: 13.5px; color: var(--on-ink-2); margin-top: 8px; } .escada-niveis .destaque { border-color: rgba(109, 94, 255, .5); background: rgba(69, 52, 232, .16); } .escada-niveis .destaque .rotulo { color: #a89dff; } .escada-niveis .destaque b { color: #fff; } .escada-niveis .destaque .desc { color: #c3bcff; } /* --- Cartões genéricos ---------------------------------------------------- */ .secao .wrap { padding: 96px 22px; } .secao .wrap.sem-topo { padding-top: 0; } .cards { display: grid; gap: 18px; } .cards.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cards.dois { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .card { background: var(--paper); border-radius: 18px; padding: 28px; border: 1px solid rgba(14, 17, 22, .07); } .card p { margin: 0; color: var(--slate); font-size: 15.5px; line-height: 1.5; } .card.pequeno { border-radius: 16px; padding: 22px; } .card.pequeno b { display: block; font-family: var(--display); font-weight: 600; font-size: 16.5px; margin-bottom: 7px; } .card.pequeno span { font-size: 14.5px; line-height: 1.5; color: var(--slate); } .passo-n { width: 34px; height: 34px; border-radius: 10px; background: var(--ink); color: #fff; display: grid; place-items: center; font-family: var(--mono); font-weight: 700; font-size: 15px; margin-bottom: 18px; } .titulo-secao { max-width: 700px; margin-bottom: 44px; } /* --- Limites -------------------------------------------------------------- */ /* A linha divisória é o `gap` sobre o fundo do contêiner, não borda de célula: assim ela nunca dobra de espessura no encontro de duas células. */ .limites-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgba(231, 234, 240, .12); border: 1px solid rgba(231, 234, 240, .12); border-radius: 18px; overflow: hidden; } .limites-grade > div { background: var(--ink); padding: 28px; } /* São CINCO recusas numa grade de duas colunas: a última ocupa a linha inteira em vez de deixar uma célula vazia com cara de item faltando. */ .limites-grade .largo { grid-column: 1 / -1; } .limites-grade b { display: block; font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: -.02em; margin-bottom: 8px; } .limites-grade span { font-size: 15px; line-height: 1.5; color: var(--on-ink-2); } .limites .eyebrow { color: var(--ember); } .limites h2 { max-width: 720px; } .limites .lead { color: var(--on-ink-2); font-size: 17px; margin-bottom: 44px; max-width: 600px; } /* --- Dados ---------------------------------------------------------------- */ .dados-grade { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; } .dados-grade h2 { font-size: clamp(28px, 3.4vw, 40px); } .dados-grade .corpo { color: var(--slate); font-size: 16px; } .dados-grade .fineprint { font-size: 14px; margin: 0; } /* Os dois links legais mantêm o sublinhado: são referência de documento, e índigo sem sublinhado sobre fundo claro depende só da cor para se anunciar. */ .dados-grade .fineprint a { text-decoration: underline; text-underline-offset: 2px; } /* --- Perguntas ------------------------------------------------------------ */ .faq { border-top: 1px solid rgba(14, 17, 22, .12); } .faq details { border-bottom: 1px solid rgba(14, 17, 22, .12); } /* ★ list-style: none tira o triângulo nativo, então o marcador tem que ser nosso — sem ele as cinco linhas parecem texto morto. */ .faq summary { display: flex; align-items: center; gap: 16px; cursor: pointer; list-style: none; padding: 18px 0; font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -.015em; } .faq summary::-webkit-details-marker { display: none; } .faq .sinal { order: 2; margin-left: auto; flex: none; width: 22px; height: 22px; display: grid; place-items: center; color: var(--volt); font-size: 20px; line-height: 1; transition: transform .25s ease; } /* ★ CSS puro, e não o evento `toggle` no JS: o marcador tem que virar × mesmo com o script bloqueado, senão o FAQ abre e continua mostrando "+". */ .faq details[open] .sinal { transform: rotate(45deg); } .faq p { margin: 0 0 20px; color: var(--slate); font-size: 15.5px; max-width: 720px; } .callout { margin-top: 44px; background: var(--paper); border-radius: 20px; padding: 32px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; border: 1px solid rgba(14, 17, 22, .07); } .callout .eyebrow { color: var(--ember-ink); margin-bottom: 10px; } .callout h3 { font-weight: 800; font-size: 24px; letter-spacing: -.028em; margin: 0 0 8px; } .callout p { margin: 0; color: var(--slate); font-size: 15.5px; max-width: 560px; } /* --- Fechamento ----------------------------------------------------------- */ .fechamento { position: relative; overflow: hidden; } .fechamento .wrap { position: relative; padding: 100px 22px; } .fechamento h2 { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.03; max-width: 660px; margin-bottom: 18px; } .fechamento .lead { font-size: 18px; margin-bottom: 34px; max-width: 560px; } .orbita-dir { position: absolute; right: -120px; top: 50%; width: 640px; transform: translateY(-50%) translateY(var(--py, 0px)); opacity: .22; pointer-events: none; } .orbita-dir .orbita-gira { transform-origin: 300px 300px; animation-duration: 90s; } /* Aviso de pré-campanha. SAI DEPOIS DE 16/08. */ /* ★ inline-BLOCK, não inline-flex. Como flex, o da primeira frase vira um item de flex separado do resto do texto e o aviso quebra em duas colunas, com "Plataforma em modo pré-campanha." espremida numa coluna de três linhas. Aqui o negrito é parte da frase, não um rótulo ao lado dela. */ .aviso { margin-top: 34px; display: inline-block; padding: 16px 20px; border-radius: 14px; max-width: 620px; background: rgba(255, 154, 31, .12); border: 1px solid rgba(255, 154, 31, .28); font-size: 14px; line-height: 1.5; color: #ffc98a; } .aviso b { color: var(--ember); font-weight: 600; } /* --- Rodapé --------------------------------------------------------------- */ .site-foot { background: var(--ink); color: var(--on-ink-3); border-top: 1px solid rgba(231, 234, 240, .1); } .site-foot .wrap { padding: 44px 22px 56px; display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; } .site-foot p { font-size: 13.5px; margin: 0 0 14px; } .site-foot .legal { font-size: 12.5px; line-height: 1.6; margin: 0; } .site-foot nav { display: flex; flex-direction: column; gap: 9px; font-size: 14px; } /* ★ Todo link do rodapé, e não só os da