/* ============================================================================ ASA FINANCE · CENTRAL DE AJUDA v6 — /ajuda Arquivo: static/css/ajuda.css Depende de: landing.tokens.css + landing.css (carregar os dois ANTES deste) ---------------------------------------------------------------------------- Este arquivo é PEQUENO de propósito: a página de ajuda reaproveita o topo, o hero, os rótulos, o FAQ em
, os cards e o rodapé da landing. Aqui ficam apenas as três coisas que só existem nesta página: a busca, os grupos de FAQ e o card de tutorial. O QUE SAIU DA VERSÃO ANTERIOR · Bootstrap 5.3 (CSS + bundle JS) e Font Awesome 6.4 — dois CDNs de terceiros e um webfont de ícones no caminho crítico, para desenhar um accordion que o
nativo faz de graça e ícones que o sprite da landing já carrega inline; · a fonte Inter em 6 pesos (a página pedia 300..800 e usava três); · o segundo conjunto de tokens (--p1/--p2/--p3/--grad/--bg/--text/--muted/ --border): eram OUTROS roxos, OUTRO cinza e OUTRA borda que os da landing — duas linguagens de cor no mesmo produto. Agora é a mesma camada semântica; · o botão de gradiente cheio e o hover que levanta o card (mesmo passe "menos cara de IA" da landing v6.1). O TEMA ESCURO continua funcionando pelo mesmo `html[data-theme="dark"]` do app autenticado — o bootstrap de localStorage segue no . A troca de tema agora vive em landing.tokens.css, em dez linhas de alias. ========================================================================== */ /* ═══ 1. BUSCA ══════════════════════════════════════════════════════════════ */ .busca { position: relative; max-width: 34rem; margin-top: 1.8rem; } .busca .ic { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: var(--sobre-esc-3); font-size: 1.05rem; pointer-events: none; } .busca input { width: 100%; font-family: var(--sans); font-size: var(--fs-sm); color: var(--sobre-esc); padding: .8rem 1rem .8rem 2.7rem; min-height: 48px; border-radius: var(--r-sm); border: 1px solid var(--linha-esc-2); background: rgba(255,255,255,.04); transition: border-color var(--tr-rapido), background var(--tr-rapido); } .busca input::placeholder { color: var(--sobre-esc-3); } .busca input:focus { outline: none; border-color: var(--violeta-400); background: rgba(255,255,255,.07); } /* Contador de resultados: `aria-live` no HTML — quem usa leitor de tela precisa saber que a lista mudou, já que o filtro acontece sem recarregar a página. */ .busca-conta { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--sobre-esc-3); margin-top: .7rem; min-height: 1.2em; } /* ═══ 2. CABEÇALHO DE SEÇÃO EM LINHA ════════════════════════════════════════ */ /* Rótulo à esquerda, nota à direita, na mesma linha de base. */ .sec-linha { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; } .sec-linha .apoio { margin-top: 0; } .sec-nota { font-size: var(--fs-xs); color: var(--sobre-papel-3); } /* ═══ 3. TUTORIAIS ══════════════════════════════════════════════════════════ */ .tutoriais { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.1rem; margin-top: 2rem; } .tut { border: 1px solid var(--linha); border-radius: var(--r-lg); background: var(--papel-puro); overflow: hidden; display: flex; flex-direction: column; transition: border-color var(--tr-medio); } .tut:hover { border-color: var(--violeta-400); } .tut iframe { width: 100%; aspect-ratio: 16/9; border: 0; display: block; } /* Miniatura de vídeo que ainda não existe. Sem botão de play falso: um play que não toca nada é promessa quebrada. Fica a moldura, a malha e o aviso. */ .tut-vazio { aspect-ratio: 16/9; position: relative; background: var(--ink-900); background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 28px 28px; display: flex; align-items: center; justify-content: center; } .tut-vazio span { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--sobre-esc-3); border: 1px solid var(--linha-esc-2); border-radius: var(--r-sm); padding: .3rem .7rem; } .tut-corpo { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .3rem; } /* `.tut-corpo .tut-cat` e não só `.tut-cat`: o rótulo é um

dentro de .tut-corpo, e a regra da descrição logo abaixo tem especificidade maior — pintava a categoria de cinza em vez de violeta. */ .tut-corpo .tut-cat { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--violeta-600); } .tut-corpo h3 { font-size: var(--fs-base); font-weight: 600; } .tut-corpo p:not(.tut-cat) { font-size: var(--fs-sm); color: var(--sobre-papel-3); } /* ═══ 4. GRUPOS DE FAQ ══════════════════════════════════════════════════════ */ /* A pílula lilás de categoria virou um rótulo de grupo: mono, filete e contagem. Mesmo vocabulário do .rotulo da landing, em escala menor. */ .faq-grupo { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--violeta-600); margin: 2.4rem 0 .2rem; } .faq-grupo::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .26; } .faq-grupo .conta { color: var(--sobre-papel-3); letter-spacing: .1em; } .faq-ajuda { max-width: none; margin-top: 0; } /* A resposta do FAQ da ajuda tem HTML (, ) vindo do template. */ .faq-ajuda .resp strong { color: var(--sobre-papel); font-weight: 700; } .faq-ajuda .resp em { font-style: normal; color: var(--violeta-600); font-weight: 600; } .faq-item[hidden] { display: none; } .sem-resultado { display: none; text-align: center; padding: 2.5rem 1rem; color: var(--sobre-papel-3); font-size: var(--fs-sm); } .sem-resultado[data-visivel="1"] { display: block; } .sem-resultado .ic { font-size: 1.4rem; color: var(--sobre-papel-3); margin-bottom: .6rem; } /* ═══ 5. FECHO ══════════════════════════════════════════════════════════════ */ .ajuda-fecho { margin-top: 3rem; padding: 1.6rem 1.8rem; border: 1px solid var(--linha); border-radius: var(--r-lg); background: var(--papel-puro); display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; } .ajuda-fecho h2 { font-size: var(--fs-lg); font-weight: 600; } .ajuda-fecho p { font-size: var(--fs-sm); color: var(--sobre-papel-3); margin-top: .2rem; } /* ═══ 6. RODAPÉ ENXUTO ══════════════════════════════════════════════════════ */ /* Topo da ajuda: sem menu de navegação, então as ações não precisam do `margin-left:auto` do .menu da landing. O !important é o mínimo necessário: abaixo de 940px o CSS da landing empilha .menu-acoes em coluna e estica os botões — comportamento do painel mobile, que aqui não existe (não há hambúrguer). */ .menu-acoes-ajuda { margin-left: auto; flex-direction: row !important; align-items: center !important; margin-top: 0 !important; gap: .5rem !important; } .menu-acoes-ajuda .btn { width: auto !important; min-height: 40px !important; font-size: var(--fs-xs) !important; } /* O hero da ajuda é mais baixo que o da landing (não tem painel ao lado) e o título ocupa uma coluna de texto, não meia tela. */ .ajuda-hero { padding-block: clamp(48px, 6vw, 76px) clamp(52px, 7vw, 84px); } .ajuda-hero .env { position: relative; z-index: 2; max-width: 46rem; } .titulo-ajuda { font-family: var(--display); font-weight: 600; font-size: var(--fs-2xl); letter-spacing: var(--tr-titulo); line-height: var(--lh-titulo); } .marca-min { font-size: 1.05rem; } .rodape-min nav { display: flex; gap: 1.3rem; flex-wrap: wrap; } .rodape-min { background: var(--ink-950); color: var(--sobre-esc-3); padding: 1.6rem 0; font-size: var(--fs-xs); } .rodape-min .env { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .rodape-min a { color: var(--sobre-esc-2); } .rodape-min a:hover { color: var(--violeta-300); } @media print { .busca, .tut-vazio, .rodape-min { display: none; } .faq-ajuda details { break-inside: avoid; } }