/* ============================================================================= Portal Gratuito FSS Tokens em :root, sem valor cru espalhado. Uma cor de destaque (vermelho FSS) sobre neutros de tom azulado — sem arco-iris de categorias. Suporte a claro e escuro; nenhuma fonte externa (a CSP bloqueia). ============================================================================= */ /* Componentes que o PAINEL ADMINISTRATIVO tambem usa. Moram em assets/comum/ porque sao um so arquivo para os dois produtos — copiar as regras para o bundle do admin criaria um segundo toast (e um segundo indicador 3D) fora do contrato que os testes travam, e o primeiro conserto feito de um lado so ja separaria os dois. O @import obriga a ficar ANTES de qualquer regra deste arquivo; por isso os compartilhados dobram a classe nos seletores que precisam vencer regras de mesma especificidade escritas mais abaixo (ver a nota de especificidade no topo de comum/toast.css). Cada arquivo le so tokens `--toast-*`/`--c3d-*`, reapontados para a paleta do portal logo abaixo, em :root. */ @import url("../comum/toast.css"); @import url("../comum/carregando3d.css"); :root { /* Sem isto os controles nativos (radio, checkbox, barra de rolagem) saem com a pintura clara do sistema sobre o tema escuro — um radio vazio aparece como um circulo branco cheio, indistinguivel do marcado. */ color-scheme: light dark; --fss: #E63946; --fss-forte: #C1121F; /* Vermelho de acao e vermelho de texto miudo sao tokens SEPARADOS do vermelho de marca por contraste (WCAG 2.2 AA): branco sobre --fss da 4,17:1, abaixo dos 4,5:1 exigidos para texto normal. --fss segue valendo para tipo grande (marca, score) e para elementos graficos, onde 3:1 basta. */ --fss-acao: #D62839; /* fundo de botao com texto branco — 4,97:1 */ --fss-acao-hover: #C1121F; /* 6,22:1 */ /* CALIBRADO CONTRA A SUPERFICIE MAIS ESCURA EM QUE POUSA, nao contra a mais clara (corrigido em 18/08/2026). Era #C1121F, medido sobre branco; so que este token tambem pinta `.caps` e `.muro` DENTRO de `.tile_wash`, e a lavagem (--lavagem, fss 10% sobre --painel-solido) compoe #E2D3D9. Ali #C1121F dava 4,31:1 em 11-12px negrito: reprovado pelo axe nas tres telas que usam o tile (relatorio, painel e home) desde que a lavagem existe. Escolher o valor pela superficie mais clara e o erro que se repete — um token de texto vale pelo PIOR fundo que encontra. Medido no pixel renderizado em 18/08/2026: 5,30:1 sobre a lavagem, 6,93:1 sobre --fundo, 7,65:1 sobre branco. Escurecer e monotonico no tema claro (todo fundo que ele toca e mais claro que ele), entao nenhum consumidor piora. No escuro o token e outro (#FF8A90) e nao se mexe. */ --fss-texto: #A80F18; /* texto pequeno em vermelho — 5,30:1 na lavagem */ /* ELEVACAO APONTA PARA A LUZ (corrigido em 14/08/2026). Antes: --fundo #FFFFFF e --superficie #F7F8FA. O cartao era mais ESCURO que a pagina, e superficie elevada mais escura que o chao nao le como elevada — le como suja. No escuro a relacao ja estava certa (fundo #0D0D14, cartao #151520: o cartao sobe em direcao a luz). Agora o chao e levemente tingido e a superficie elevada e o branco puro, que e a mesma logica, espelhada. */ --fundo: #F1F4F8; --superficie: #FFFFFF; --superficie-alta: #FFFFFF; /* Borda 0.10 sobre chao branco quase nao existia; 0.14 separa sem virar traco. */ --borda: rgba(15, 18, 32, 0.14); --texto: #0F1220; --texto-suave: #5A6072; /* Verde escurecido em 12/08/2026 (era #12805C): o valor antigo dava 4,24:1 sobre --painel-solido, e o "Potencial futuro" da home cai justamente ali, em 17,9px negrito a 320px — abaixo do piso de texto grande, entao exige 4,5:1. Este da 6,40:1 sobre painel e 7,37:1 sobre branco; onde ja era usado (.valor_potencial, .gate_ok, .msg.success) so melhora. */ --sucesso: #0C6046; --alerta: #B45309; --erro: #C1121F; --raio: 14px; --raio-p: 8px; /* Escala de espaco: 4/8/12/16/24/32/48/64. --gap e --secao seguem como aliases semanticos (o resto do arquivo referencia esses, nao os degraus da escala diretamente). */ --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 24px; --esp-6: 32px; --esp-7: 48px; --esp-8: 64px; --gap: var(--esp-4); --secao: var(--esp-6); /* Elevacao: 2 niveis. --sombra segue como alias do nivel destacado (unico usado hoje, em .card) — par escuro em @media abaixo. */ /* Sombra a .05/.06 sobre branco e invisivel — a profundidade do tema claro vem da sombra, ja que nao pode vir do valor da superficie. */ --elev-1: 0 1px 2px rgba(15, 18, 32, .08); --elev-2: 0 2px 4px rgba(15, 18, 32, .07), 0 12px 32px rgba(15, 18, 32, .10); --sombra: var(--elev-2); /* Motion. --dur-entrada e --curva religam a animacao ja existente de .js-etapas .pergunta (180ms ease-out, sensacao inalterada). --dur-micro e primitivo para feedback instantaneo — nenhuma regra do arquivo hoje declara transition, entao ainda nao tem religacao (nao e redesenho inventar uma agora). */ --dur-micro: 140ms; --dur-entrada: 180ms; --curva: ease-out; /* PONTE DE TEMA DO TOAST (o componente mora em comum/toast.css, importado no topo). O arquivo compartilhado nao conhece a paleta de nenhum dos dois produtos: ele le `--toast-*`, e e aqui que cada nome aponta para o token do portal. Trocar o tema muda o toast junto, sem editar o compartilhado. --toast-dur (o CRONOMETRO do auto-fecho), --toast-entra, --toast-sai e --toast-largura vivem la, com o porque de cada numero. */ --toast-fundo: var(--superficie-alta); --toast-borda: var(--borda); --toast-texto: var(--texto); --toast-texto-suave: var(--texto-suave); --toast-fechar-hover: var(--preenchimento); --toast-sombra: var(--elev-cartao); --toast-sucesso: var(--sucesso); --toast-alerta: var(--alerta); --toast-erro: var(--erro); --toast-raio: var(--raio); --toast-raio-p: var(--raio-p); --toast-gap: var(--esp-2); --toast-gap-interno: var(--esp-3); --toast-tipo: var(--tipo-2); --toast-curva: var(--curva-suave); --toast-dur-micro: var(--dur-micro); /* Distancia do topo da JANELA. O header nao e sticky, entao isto so precisa livra-lo no inicio da rolagem: 82px medidos a 1280 (ver o comentario de .topo_inner) + 12 de folga. O par de <=640px esta no bloco responsivo do fim do arquivo, onde o header vira duas linhas. */ --toast-topo: 94px; --toast-lado: clamp(16px, 3vw, 28px); /* Estados base — so tokeniza o que ja existe. */ --opacidade-desabilitado: .55; /* Percentual de referencia p/ tints de hover via color-mix, na mesma familia dos color-mix ja usados no arquivo (7%–14%, ver .msg/ .opcao:checked). Declarado como primitivo: nenhum hover do arquivo usa color-mix hoje (trocam flat para --superficie), entao nao ha regra existente para religar sem alterar a cor renderizada. */ --mix-hover: 8%; /* Escala tipografica fluida (6 passos, clamp). Calibrada para bater exatamente com os tamanhos ja usados no arquivo a partir de ~1280px de viewport (a faixa mais comum de uso); abaixo disso reduz suavemente ate o minimo, sem nunca cruzar o passo vizinho — a hierarquia relativa nao muda em nenhuma largura. --tipo-6 preserva o clamp ja usado em h1, valor a valor. */ --tipo-1: clamp(0.75rem, 0.7292rem + 0.104vw, 0.8125rem); /* 12 -> 13px */ --tipo-2: clamp(0.875rem, 0.8542rem + 0.104vw, 0.9375rem); /* 14 -> 15px */ --tipo-3: clamp(1rem, 0.9792rem + 0.104vw, 1.0625rem); /* 16 -> 17px */ --tipo-4: clamp(1.1875rem, 1.125rem + 0.3125vw, 1.375rem); /* 19 -> 22px */ --tipo-5: clamp(1.5rem, 1.4375rem + 0.3125vw, 1.6875rem); /* 24 -> 27px */ --tipo-6: clamp(1.75rem, 4vw, 2.5rem); /* 28 -> 40px, = h1 atual */ /* DOIS DEGRAUS DE DISPLAY, criados pela home em 25/08/2026 (onda 42). A direcao B nao e "letra menor": e "toda letra pertence a um degrau". No /app isso deu escala PARA BAIXO, porque a tela e leitura e o assunto dela e o relatorio. Na home da para CIMA, porque a tela e venda e o assunto dela e a promessa — mas o principio e o mesmo, e sem estes dois degraus ele nao poderia valer aqui. O que eles substituem, e a prova de que eram um degrau disfarcado de tres: --tipo-7 clamp(1.875rem, 3.8vw, 2.875rem) .secao_head h2 e .faq h2 clamp(1.875rem, 3.6vw, 2.75rem) .fecho h2 Tres cabecalhos de secao com DOIS clamps quase iguais: 30->46 e 30->44. Ninguem escolheu que o fecho fosse 2px menor que as outras secoes; ele so foi escrito noutro dia. O degrau fica com 30->46, o valor da maioria. --tipo-8 clamp(2.5rem, 6.4vw, 4.75rem) .hero h1 O h1 da home, unico na pagina e unico no portal. Vira degrau para deixar de ser um numero solto, com o valor que ja tinha. Por que nao empurrar a home para --tipo-5, como o /app fez: 27px abre uma secao de painel e nao abre uma pagina de venda. A escala existe para que toda medida seja um degrau — nao para que toda tela use os mesmos degraus. */ --tipo-7: clamp(1.875rem, 3.8vw, 2.875rem); /* 30 -> 46px */ --tipo-8: clamp(2.5rem, 6.4vw, 4.75rem); /* 40 -> 76px */ /* Score/faixa neutros — decisao do dono (DEC-002), REVERSIVEL: colorir por classificacao (ex.: faixa vermelha p/ score baixo) e regra de negocio da FSS ainda nao definida; ate la o vermelho fica reservado a acao. Trocar = editar so estes tres tokens. Quem os consome (18/08/2026): --score-cor em `.anel_score`, e --faixa-fundo/--faixa-texto em `.rel_selo_faixa`, o chip de classificacao do relatorio e do painel. Se um dia um componente novo desenhar score ou faixa, ele LE daqui — o chip passou seis dias vermelho justamente por ter nascido fora deste caminho. */ --score-cor: var(--texto); --faixa-fundo: var(--superficie); --faixa-texto: var(--texto); /* O ARCO do anel de pontuacao (.anel_total, relatorio e painel) segue a MESMA regra dos tres tokens acima, e pelo mesmo motivo. Ate 17/08/2026 ele era `var(--fss)`: TODA pontuacao desenhava o arco em vermelho de marca. 85 "Previsivel" saia com o mesmo alarme de 42 "Instavel" — a cor nao informava nada e, no resultado bom, informava o contrario. Quem carrega a classificacao e a palavra (o chip ao lado), que nunca dependeu de cor. Neutro de alto contraste. Medido em 17/08/2026 no cartao real, com o tema forcado por cookie e o alfa composto de baixo para cima — o fundo do cartao e um gradiente, entao vale o pior extremo: claro #5A6072 sobre o topo do gradiente 4,92:1 (base 5,68:1) escuro #A0A5B8 sobre o topo do gradiente 6,83:1 (base 7,90:1) Contra a TRILHA cinza, que e a cor vizinha: 3,69:1 no claro, 5,07:1 no escuro. O piso de elemento grafico e 3:1 (WCAG 1.4.11) — passa nos dois temas, contra os dois vizinhos. Colorir por faixa continua sendo regra de negocio da FSS (DEC-002): o dia em que ela existir, muda ESTE token (ou vira variante por classe emitida pelo servidor), e nenhuma regra de componente se mexe. */ --anel-arco: var(--texto-suave); /* O TRILHO PRECISA SER VISIVEL, senao o anel nao informa proporcao. Ele herdava --borda. Medido em 18/08/2026: arco contra trilho dava 2,45:1 no escuro e 2,97:1 no claro, abaixo dos 3:1 que a WCAG 1.4.11 pede para objeto grafico que carrega informacao. O arco aparecia; onde ele TERMINA, nao — e um anel cuja borda de fim nao se ve vira um arco flutuante, nao uma fracao de 100. Token proprio, e nao --borda subido: aquele governa toda borda do portal, e clarea-lo por causa do anel mexeria em cada cartao. */ --anel-trilha: rgba(15, 18, 32, 0.26); --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* ========================================================================= TOKENS DA DIRECAO VISUAL (variante D — home) ------------------------------------------------------------------------- Camada ADITIVA: nada acima muda de valor, entao nenhuma outra tela do portal se mexe. Tudo o que a home desenha sai daqui — para trocar cor, raio, glow ou ritmo, edite ESTE bloco, nunca a secao `--- home ---`. Tres familias, de proposito: 1) DERIVADAS — escritas uma vez, feitas de color-mix() sobre --texto / --fundo / --fss. Trocam de tema sozinhas, porque a base ja troca. Nao duplicar no bloco escuro. 2) SUPERFICIE FIXA — mesma cor nos DOIS temas, de proposito: o tile "Gargalos" e sempre escuro e a ilha do FAQ e sempre clara. Isso e variacao de superficie, nao tema. 3) POR TEMA — as poucas que precisam de valor proprio no escuro estao repetidas nos dois blocos escuros abaixo. ========================================================================= */ /* 1) derivadas ------------------------------------------------------- */ --texto-fraco: #565C73; /* terciario. No claro o teto de luminancia e o proprio branco, entao o terciario e um pouco MAIS escuro que --texto-suave e ganha hierarquia por tamanho/peso — assimetria real com o escuro, documentada para nao parecer defeito. 5,60:1 */ --borda-marca: color-mix(in srgb, var(--fss) 32%, transparent); /* CONCLUIDO TEM COR PROPRIA, E ELA NAO E A DA MARCA. O vermelho neste produto significa PROBLEMA: e ele que pinta o gargalo na lista de pilares e a perda atual na estimativa. Usa-lo tambem para "Concluido em 13/08/2026" punha o fato bom e o fato ruim na mesma cor, na mesma tela. O verde ja dizia "concluido" a 400px dali, no glifo do marco (.pnl_conquista_glifo). Eram duas cores para um estado so. */ --borda-feito: color-mix(in srgb, var(--sucesso) 34%, transparent); --painel: color-mix(in srgb, var(--texto) 4.5%, transparent); /* vidro */ --painel-solido: color-mix(in srgb, var(--texto) 7%, var(--fundo)); /* opaco */ /* --lavagem foi REMOVIDA em 25/08/2026. Era a tinta rosa de `.tile_wash`, e o ultimo consumidor dela morreu quando a home entrou na direcao B — o /app ja a tinha trocado pela barra de acento na onda 32. Token sem consumidor nao e reserva, e armadilha: o proximo cartao que quisesse "olhe para mim" a encontraria pronta e reintroduziria os 4,34:1. O valor era: color-mix(in srgb, var(--fss) 10%, var(--painel-solido)). */ --contorno: color-mix(in srgb, var(--texto) 26%, transparent); --contorno-forte: color-mix(in srgb, var(--texto) 46%, transparent); /* O CONTORNO DE UM CONTROLE NAO E O CONTORNO DE UM ENFEITE (onda 51). --contorno (26%) pinta traco DECORATIVO — o selo, o cartao pontilhado, o trilho vazio. Ninguem precisa enxerga-lo para operar a tela, e a WCAG nao cobra 3:1 dele. Borda de campo, caixa de aceite e divisor entre dois controles sao outra coisa: sao a UNICA informacao visual que diz onde o controle comeca e acaba (WCAG 1.4.11), e o axe nao mede nenhuma delas. Medido em 26/08/2026 na tela de acesso, no pixel renderizado: a borda de campo (--borda) dava 1,35:1 no claro e 1,32:1 no escuro, e o preenchimento do campo contra o cartao dava 1,10:1 e 1,07:1 — nem a borda nem o fundo identificavam o campo. A caixa de aceite (--contorno) dava 1,79:1 e 2,22:1. 52% de --texto sobre a superficie do cartao mede 3,35:1 no claro e 5,05:1 no escuro. E derivado, entao troca de tema sozinho e NAO se repete nos dois blocos escuros. */ --borda-controle: color-mix(in srgb, var(--texto) 52%, transparent); --preenchimento: color-mix(in srgb, var(--texto) 6%, transparent); /* 2) superficie fixa (nao muda com o tema) ---------------------------- */ --escuro-fundo: #10121E; --escuro-texto: #F2F3F7; --escuro-suave: #A8ADC0; --escuro-borda: rgba(255, 255, 255, .14); /* O ACENTO ESCURO, O MAIS PROXIMO DA MARCA QUE AINDA PASSA. #FF8A90 nao era engano: o vermelho de marca (#E63946) da 4,34:1 sobre --superficie no escuro e reprova AA para os 12px em que este token vive. Mas 7,4:1 era folga demais paga em saturacao — o acento saia rosado, e deixava de parecer a marca. #EC4C58 e o ponto medido entre os dois: 4,96:1 sobre --superficie e 5,10:1 sobre --fundo. Passa com margem, e volta a ler como vermelho. Descer mais aproxima o limite sem ganho visivel — #E83F4C ja e 4,53. */ --escuro-acento: #EC4C58; --claro-fundo: #FBFBFD; --claro-cartao: #FFFFFF; --claro-borda: rgba(15, 18, 32, .10); --claro-texto: #14151F; --claro-suave: #565C73; --claro-acento: #C1121F; /* 3) cena de fundo (as camadas decorativas fixas atras de tudo). Intensidade e o botao de volume do glow vermelho: 0 apaga a cena inteira sem mexer em mais nada. */ /* .32 e .10 tornavam a cena quase imperceptivel: o tema claro ficava um vazio branco enquanto o escuro tinha textura. Subir demais, porem, suja o fundo de um formulario — .55 e .18 dao relevo sem ruido visual. */ --cena-intensidade: .55; --cena-ruido: .18; --cena-frio: rgba(88, 108, 168, .06); --cena-forma: color-mix(in srgb, var(--texto) 7%, transparent); --cena-glow-1: rgba(230, 57, 70, .22); --cena-glow-2: rgba(230, 57, 70, .13); --cena-glow-3: rgba(230, 57, 70, .16); --ruido: url('data:image/svg+xml;utf8,'); /* OS CINCO RAIOS DA HOME VIRARAM UM, E SOBROU O QUE NAO E SUPERFICIE (onda 42, 25/08/2026). Ate aqui a home declarava --raio-g (22, tiles e depoimentos), --raio-m (18, itens do FAQ), --raio-peca (28, o cartao do hero) e --raio-limite (30, o painel de transparencia). Somados ao 16 cru de `.grandeza` e ao 40 da ilha, davam SEIS raios renderizados na mesma pagina — enquanto o /app, depois da direcao B, renderiza dois. Nao era a home tendo personalidade: era a home nao tendo decidido. Os quatro foram embora; toda superficie da home passou a ler --raio-app, o MESMO token do /app. Nao um valor parecido: o mesmo. Se fossem 20 aqui e 16 la, a divergencia so teria mudado de escala. O QUE SOBROU, E POR QUE CADA UM E OUTRA COISA: --raio-ilha (40px) NAO e um cartao. E a dobra da pagina: a faixa sangrada do FAQ, larga de borda a borda, cujos cantos DE CIMA curvam quando o fundo escuro vira a ilha clara. Curvar 1440px com 16 nao le como decisao, le como cartao que nao coube. Raio de dobra e raio de superficie sao papeis diferentes, e um numero so nao serve aos dois. --pilula (999px) controle, nao superficie — a mesma excecao que a direcao B ja escreve para campo, pilula e circulo. --raio-peca sai junto: `.peca_cartao` e `.rel_peca` liam 28px e o /app ja reapontava a segunda para --raio-app. Com a base lendo --raio-app, as duas passam a ser a mesma superficie por construcao. */ --raio-ilha: 40px; --pilula: 999px; /* ========================================================================= DIRECAO B — "ASSISTENTE CALMO" (escolhida pelo dono em 20/08/2026, entre tres direcoes renderizadas sobre as telas REAIS do /app; a folha de prova injetada esta em evidencias/w31/direcoes/b-assistente-calmo.css e a medida que a motivou, em evidencias/w31/medidas.json). ------------------------------------------------------------------------- O diagnostico nao era de linguagem, era de VOLUME: o painel e o relatorio desenhavam SEIS niveis de superficie e DOZE tamanhos de tipo na mesma pagina, com tres raios diferentes competindo. A direcao afina o instrumento em vez de trocar de instrumento. Estes dois tokens sao o que ela acrescenta. Todo o resto dela e SUBTRACAO: valores soltos que passaram a ler --tipo-*, uma segunda pintura de cartao que virou a primeira, e tres relogios de hover que viraram um. A HOME ENTROU NA DIRECAO B EM 25/08/2026 (onda 42). Enquanto ela ficou de fora, o portal falava duas linguas e o lead atravessava de uma para a outra no meio do funil — a home e a primeira impressao, e era a que destoava do resto. O que a home NAO importou foi a densidade: ela e pagina de venda, e o degrau de titulo dela continua sendo display (--tipo-7/-8, criados por causa dela). A direcao e a lingua, nao o tamanho da letra. ========================================================================= */ /* UM RAIO SO para toda superficie do /app — entre o raio de CAMPO (8px, que fica) e o grande de antes (22px). Ainda macio; deixa de ser o elemento que mais grita "aplicativo de consumo". Campo, pilula e circulo nao entram: eles nao sao superficie, sao controle. */ --raio-app: 16px; /* A BARRA DE ACENTO — o "carimbo de papel" que substitui a lavagem rosa. Larga o bastante para ler como marcacao de bloco a 320px, estreita o bastante para nao virar moldura. Nao e espacamento: e a espessura de uma borda, e por isso nao sai de --esp-*. */ --acento-largura: 4px; /* ritmo. --curva/--dur-entrada seguem intocados no diagnostico; a home usa --curva-suave e as duracoes abaixo. Mexer aqui muda o ritmo inteiro. */ --curva-suave: cubic-bezier(.2, .8, .2, 1); --dur-hover: 260ms; --dur-revelar: 640ms; --dur-tema: 200ms; --dur-anel: 1.3s; /* Coreografia da peca da home (relatorio-exemplo). Sao DOIS tokens porque o contador do score e feito em rAF: o JS le --dur-peca-arco e --dur-peca-gargalo para nascer e morrer na mesma janela do ultimo arco. Duplicar esses numeros em JS reintroduziria a divergencia classica entre o que a tela desenha e o que o script conta. --dur-anel fica intocado porque e do anel do relatorio REAL (.anel_total, result.php). */ --dur-peca-arco: 760ms; --dur-peca-gargalo: 320ms; --dur-pulso: 1.9s; /* Indicador 3D: o componente e --dur-3d/--curva-3d moram em comum/carregando3d.css (importado no topo), com o porque de cada numero. Aqui fica so a ponte de tema — o compartilhado le `--c3d-*`. */ --c3d-halo: color-mix(in srgb, var(--fss) 30%, transparent); --c3d-anel: var(--borda-marca); --dur-flutua: 5.8s; /* A festa da calculadora. --dur-festa e o teto da queda de uma particula; o JS sorteia entre 1100ms e 1700ms dentro dela. As quatro cores NAO sao cores novas: sao apelidos das que ja existem, e por serem `var()` resolvidas em :root elas trocam junto com o tema, sem uma segunda lista no bloco escuro. */ --dur-festa: 1.7s; --confete-1: var(--fss-acao); --confete-2: var(--sucesso); --confete-3: var(--alerta); --confete-4: var(--texto-suave); --dur-marquee: 34s; --dur-glow: 34s; /* sombras da direcao D: mais profundas que --elev-*, que continua valendo nas outras telas. */ --elev-cartao: 0 1px 2px rgba(15, 18, 32, .05), 0 24px 56px rgba(15, 18, 32, .09); --glow-acao: 0 4px 10px rgba(0, 0, 0, .28), 0 16px 40px rgba(214, 40, 57, .38), inset 0 1px 0 rgba(255, 255, 255, .2); /* Sombra da barra flutuante — NEUTRA desde 13/08/2026: as parcelas vermelha (0 18px 46px rgba(214,40,57,.36)) e o inset branco saíram junto com o fundo vermelho da barra. Brilho vermelho e do botao (--glow-acao). */ --glow-flutuante: 0 10px 30px rgba(0, 0, 0, .38); } /* Tokens de acento (vermelho FSS) — usados em momentos específicos de ênfase. Apenas --glow-acao é usado globalmente; os demais são aplicados via className quando o servidor confirma o estado de ênfase (meta atingida, KPI em destaque). O `:root` ABAIXO ESTAVA FALTANDO, e a falta era invisivel ate alguem USAR os tokens (medido em 01/09/2026, evidencias/w70). Sem seletor, o parser nao le isto como bloco de declaracoes: ele tenta montar uma regra qualificada, engole `--accent-primary: ...` ate o `}` como se fosse PRELUDIO, continua engolindo ate achar a proxima `{` — a de `.kpi-meta-alerta` — e descarta a regra inteira por prelude invalido. Resultado: os seis tokens nunca existiram em lugar nenhum, e `.kpi-meta-alerta` foi junto (medido: animationName = "none"). Enquanto ninguem consumia os tokens isso era codigo morto silencioso. Quando o header passou a usar `var(--accent-primary)`, virou tres defeitos de uma vez: `.nav_cta` sem fundo (texto branco sobre header branco, 1,00:1 — a pilula so aparecia no hover, que usa outro token), o fio de 3px da marca com `border-top-width` computado em 0px nos dois temas, e o "System" da marca preto em vez de vermelho. `var()` sem fallback e token inexistente = invalido no tempo de valor computado, e a propriedade cai para herdada/inicial em vez de falhar barulhento. */ :root { --accent-primary: #D82641; --accent-hover: #C01F38; --accent-pressed: #A8192F; --accent-subtle: rgba(216, 38, 65, 0.08); --glow-accent-strong: 0 0 32px 4px rgba(216, 38, 65, 0.4); --glow-accent-soft: 0 0 16px 0 rgba(216, 38, 65, 0.25); } /* Efeito de meta atingida em KPIs do modo TV. Aplicado via class .kpi-meta-alerta quando o servidor confirma que a meta daquele KPI foi atingida (≥100%). Usa o token glow-accent-strong que já existe (line 440): só deve ser adicionado ao elemento numérico em momento específico de ênfase. */ .kpi-meta-alerta { animation: kpi-pulse 2s ease-in-out infinite; box-shadow: var(--glow-accent-strong); } @keyframes kpi-pulse { 0%, 100% { color: var(--accent-primary); } 50% { color: var(--fss-texto); } } /* --- tema escuro --- O bloco existe DUAS vezes de proposito, mesma convencao do painel admin (public/assets/admin/admin.css): - `:root:not([data-tema])` = automatico. Sem cookie, quem decide e o sistema. - `[data-tema="escuro"]` = forcado pelo seletor, mesmo contra a preferencia do sistema. O atributo sai do SERVIDOR (themes/portal/_theme.php le o cookie portal_tema), entao o primeiro paint ja nasce certo — sem piscada de tema errado. CSS puro nao tem como referenciar um bloco no outro; a duplicacao e o preco. Editar um sem editar o outro e defeito: os dois listam os MESMOS tokens. */ @media (prefers-color-scheme: dark) { :root:not([data-tema]) { --fundo: #0D0D14; --superficie: #151520; --superficie-alta: #1C1C2A; --borda: rgba(255, 255, 255, 0.10); --anel-trilha: rgba(255, 255, 255, 0.26); --texto: #F2F3F7; --texto-suave: #A0A5B8; --sucesso: #3DDC97; --alerta: #F0A02E; --erro: #FF6B6B; --elev-1: 0 1px 2px rgba(0, 0, 0, .4); --elev-2: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35); /* No escuro o vermelho de marca perde contraste contra a superficie (4,03:1): texto miudo passa a usar um tom claro — 6,57:1. O fundo de acao nao muda, porque o texto branco sobre ele independe do tema. */ --fss-texto: #EC4C58; /* direcao D: no escuro o terciario clareia (o teto de luminancia agora e o proprio fundo escuro) e a cena tecnologica sobe de volume. */ --texto-fraco: #868CA0; --cena-intensidade: 1; --cena-ruido: .5; --cena-frio: rgba(88, 108, 168, .015); --elev-cartao: 0 2px 4px rgba(0, 0, 0, .4), 0 30px 70px rgba(0, 0, 0, .55); } } [data-tema="escuro"] { color-scheme: dark; --fundo: #0D0D14; --superficie: #151520; --superficie-alta: #1C1C2A; --borda: rgba(255, 255, 255, 0.10); --anel-trilha: rgba(255, 255, 255, 0.26); --texto: #F2F3F7; --texto-suave: #A0A5B8; --sucesso: #3DDC97; --alerta: #F0A02E; --erro: #FF6B6B; --elev-1: 0 1px 2px rgba(0, 0, 0, .4); --elev-2: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35); --fss-texto: #EC4C58; --texto-fraco: #868CA0; --cena-intensidade: 1; --cena-ruido: .5; --cena-frio: rgba(88, 108, 168, .015); --elev-cartao: 0 2px 4px rgba(0, 0, 0, .4), 0 30px 70px rgba(0, 0, 0, .55); } /* Forcar o tema tem de forcar tambem a pintura nativa (radio, barra de rolagem): sem isto, `light dark` deixaria o sistema decidir os controles. */ [data-tema="claro"] { color-scheme: light; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--fonte); font-size: 16px; line-height: 1.6; color: var(--texto); background: var(--fundo); -webkit-font-smoothing: antialiased; } .wrap { width: min(1080px, 92vw); margin-inline: auto; } /* --fss-acao, nao --fss: branco sobre o vermelho de marca da 4,17:1 e o link de pular e texto normal (piso 4,5:1). Corrigido em 13/08/2026 — o token de acao existe exatamente para este caso e vale nos dois temas. */ .skip { position: absolute; left: -9999px; background: var(--fss-acao); color: #fff; padding: 10px 16px; border-radius: var(--raio-p); } .skip:focus { left: 16px; top: 16px; z-index: 100; } /* Foco sempre visivel — requisito de acessibilidade (secao 12.6). O anel usa duas camadas (vermelho + halo do fundo) para permanecer visivel tanto sobre superficie clara quanto sobre o proprio vermelho dos botoes. */ :focus-visible { outline: 3px solid var(--fss-acao); outline-offset: 2px; border-radius: 4px; box-shadow: 0 0 0 2px var(--fundo); } .btn:focus-visible, .nav_cta:focus-visible { outline-color: var(--texto); } /* WCAG 2.2 (2.4.11): a barra de progresso e sticky e poderia cobrir o elemento focado ao rolar. */ :target, legend, fieldset, .campo, .btn { scroll-margin-top: 96px; } /* Rolagem suave SO na home (ancoras do menu #recebe/#funciona/#transparencia/ #faq). Escopo deliberado, nao preguica: global no html, o smooth animaria o window.scrollTo(0,0) do stepper a CADA uma das 30 perguntas (lag, nao polish) e o "Pular para o conteudo" das outras telas. O :has e progressive enhancement puro — navegador sem ele so nao ganha o deslize. A guarda de prefers-reduced-motion la embaixo ja neutraliza isto (scroll-behavior: auto !important) — ela existia antes do proprio smooth. */ html:has(.pagina-home) { scroll-behavior: smooth; } /* --- topo --- O HEADER TROCA COM O TEMA (14/08/2026), e desde 01/09/2026 a MARCA tambem e a mesma nos dois. Historico curto, porque duas notas antigas ja foram revogadas aqui: o header nasceu "sempre escuro" porque o unico lockup da FSS era `logo-fss-branco.webp` (simbolo vermelho + tipo BRANCO), que so contrasta sobre fundo escuro; depois o claro passou a usar `logo.png` (o simbolo) + o nome em texto, e o escuro seguiu com o lockup em imagem. O QUE ISSO CUSTAVA, medido na onda 70: o desenho era o mesmo nos dois arquivos (silhueta com 1% de diferenca), mas a COMPOSICAO nao — uma linha no claro contra tres linhas empilhadas no escuro —, e isso lia como duas marcas. Havia ainda 9% de diferenca de tamanho otico, porque o PNG traz margem transparente e o webp era sangrado. HOJE: um desenho, duas cores. `logo.png` no claro, `logo-branco.png` no escuro (o mesmo arquivo recolorido, alfa intacto: 0 pixel de diferenca de silhueta), e o nome em TEXTO nos dois — logo a composicao e identica e o tamanho otico bate sozinho, porque as duas imagens tem a mesma margem. As cores deste bloco saem de --topo-*, que trocam com o tema. Nao use --texto/--superficie direto aqui: o alternador de tema e a preferencia do sistema mexem nos dois lugares e o header precisa de um so ponto de verdade. A linha vermelha de 3px no topo absoluto e a assinatura da marca, herdada do site institucional: largura total, --fss, e nenhuma outra borda ou sombra. */ /* --topo-acento: o VERMELHO DA MARCA COMO TEXTO, medido sobre cada fundo do header (01/09/2026). Ele nasceu quando "System" passou a ser texto tambem no tema escuro: `--accent-primary` (#D82641) da 4,91:1 sobre o header claro e so 3,79:1 sobre o escuro (#10121E) — e o axe reprovou, com razao, a 375px, onde `.marca_nome` encolhe de 22px para 16px e sai da faixa de "texto grande" (>= 18,66px em negrito, onde o limiar cairia para 3:1). No escuro ele reusa --escuro-acento (#EC4C58, 5,09:1), o mesmo tom que o resto do portal ja usa para vermelho pequeno sobre superficie escura — nao e um vermelho novo, e continua sendo o acento da marca. */ :root { --topo-fundo: var(--claro-cartao); --topo-texto: var(--claro-texto); --topo-suave: var(--claro-suave); --topo-borda: var(--claro-borda); --topo-acento: var(--accent-primary); } @media (prefers-color-scheme: dark) { :root:not([data-tema]) { --topo-fundo: var(--escuro-fundo); --topo-texto: var(--escuro-texto); --topo-suave: var(--escuro-suave); --topo-borda: var(--escuro-borda); --topo-acento: var(--escuro-acento); } } :root[data-tema="escuro"] { --topo-fundo: var(--escuro-fundo); --topo-texto: var(--escuro-texto); --topo-suave: var(--escuro-suave); --topo-borda: var(--escuro-borda); --topo-acento: var(--escuro-acento); } /* A FAIXA DE PERSONIFICACAO (01/09/2026). ELA VEM ANTES DO CABECALHO, e isso e decisao e nao ordem de arquivo: o operador precisa ler "voce nao e voce" ANTES de reconhecer a marca e agir por habito. Depois do topo, ela competiria com a barra de navegacao no mesmo instante em que a pessoa ja decidiu onde clicar. NAO E `position: fixed`. Faixa fixa cobre conteudo em tela baixa e some do fluxo de leitura de quem usa leitor de tela na ordem do documento. Ela e a primeira coisa do corpo e rola com a pagina — quem rola de volta ao topo, que e o que se faz para navegar, a reencontra. `--alerta` e nao `--erro`: personificar nao e um erro, e um estado legitimo e perigoso. Vermelho aqui gastaria o unico tom que o portal reserva para coisa quebrada. Sem animacao de entrada de proposito: a faixa esta presente desde o primeiro quadro, entao nao ha nada a anunciar — e movimento aqui viraria ruido em toda navegacao sob disfarce. Por isso tambem nao ha regra sob prefers-reduced-motion: nao ha o que reduzir. */ .disfarce { background: color-mix(in srgb, var(--alerta) 14%, var(--superficie)); border-bottom: 3px solid var(--alerta); color: var(--texto); font-size: var(--tipo-2); } .disfarce_inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding-top: 12px; padding-bottom: 12px; } .disfarce_texto { display: flex; align-items: flex-start; gap: 10px; margin: 0; max-width: 78ch; } .disfarce_texto svg { flex: none; margin-top: 2px; color: var(--alerta); } .disfarce_prazo { color: var(--texto-suave); white-space: nowrap; } .disfarce_saida { flex: none; margin: 0; } /* VENCIDO MUDA A COR, NAO SO O TEXTO. Enquanto vale, o estado e legitimo; depois de vencer, nada mais grava — e aí a faixa passa a ser sobre algo que quebrou, que e exatamente quando `--erro` cabe. */ .disfarce_vencido { background: color-mix(in srgb, var(--erro) 12%, var(--superficie)); border-bottom-color: var(--erro); } .disfarce_vencido .disfarce_texto svg { color: var(--erro); } .topo { border-top: 3px solid var(--accent-primary); border-bottom: 1px solid var(--topo-borda); background: var(--topo-fundo); } /* Uma cor de logo por tema. Ambas vem no HTML e o CSS esconde a que nao serve — trocar `src` por JS piscaria a imagem errada no primeiro paint, o mesmo defeito que o cookie de tema existe para evitar, e sem JS (secao 12.4) nao trocaria nada: aqui a alternancia e 100% CSS. */ /* NOME EM TEXTO NOS DOIS TEMAS (dono, 01/09/2026). Ate aqui isto valia so no claro, e o escuro trazia o nome dentro da imagem, empilhado em tres linhas — duas composicoes para uma marca so. Agora a marcacao e a mesma e quem troca e a COR, que ja vem de token: --topo-texto acompanha o header e --topo-acento da o vermelho de "System" (vermelho que a onda 70 consertou; nao voltar a escrever a cor a mao). Fonte de sistema, como todo o resto do portal — nao ha webfont nem toolchain para uma. */ .marca_nome { display: inline-flex; align-items: baseline; gap: .32em; margin-left: 10px; font-size: var(--tipo-4); font-weight: 800; letter-spacing: -.02em; color: var(--topo-texto); white-space: nowrap; } /* --topo-acento e nao --accent-primary: a palavra continua no vermelho da marca (onda 70), so que no tom que passa em CADA fundo do header — ver a nota do token acima. Trocar por --accent-primary aqui reprova o axe a 375px no escuro, com numero: 3,79:1 contra os 4,5:1 exigidos. */ .marca_nome_sys { color: var(--topo-acento); } @media (max-width: 420px) { .marca_nome { font-size: var(--tipo-3); margin-left: 8px; } } /* DUAS classes no seletor de proposito: `.marca_logo` (definida mais abaixo, com `display: block`) tem a mesma especificidade de `.marca_logo_escuro` e, por vir depois no arquivo, venceria — as duas logos apareciam lado a lado, com o lockup branco invisivel sobre o header claro deixando so o simbolo dele visivel. Dobrar a classe resolve sem depender da ordem. */ .marca_logo.marca_logo_claro { display: block; } .marca_logo.marca_logo_escuro { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-tema]) .marca_logo.marca_logo_claro { display: none; } :root:not([data-tema]) .marca_logo.marca_logo_escuro { display: block; } } :root[data-tema="escuro"] .marca_logo.marca_logo_claro { display: none; } :root[data-tema="escuro"] .marca_logo.marca_logo_escuro { display: block; } /* Altura baixa, como a referencia: 3 (linha) + 16 + 46 (a pilula, o item mais alto da linha — maior que os 36px da logo e que o alvo de 44) + 16 + 1 (borda) = 82px medidos a 1280. */ /* A BARRA NAO E COLUNA DE LEITURA, e por isso ela deixou de herdar a largura de .wrap (24/08/2026). O DEFEITO, medido: o orcamento do topo pedia 1.207px — marca 116 + os oito itens do menu 863 + a pilula "Agendar reuniao" 201 + os vaos — e .wrap oferece 1.080px. Faltavam 127px em QUALQUER tela, inclusive a 1600, porque o teto e do container e nao do monitor. Resultado: o header quebrava em duas linhas e passava de 82px para 213px. E ele quebrava so para QUEM QUALIFICOU: a pilula do agendamento e o nono item, e so aparece para quem passou nos cinco gates (RF07). Ou seja, o lead que converteu — o unico que a operacao quer no portal — era o unico a receber um cabecalho de 213px empurrando o conteudo para fora da tela. 1.080px existe para o TEXTO nao passar da medida de leitura. Uma barra de navegacao nao tem medida de leitura: e uma regua de alvos de toque, e o que ela pede e caber. */ .topo_inner { /* * A LARGURA VOLTOU (31/08/2026) — a regra descrita no comentario acima * tinha sumido do arquivo, e o defeito com ela. * * Medido antes de restaurar: container 1.080px, marca 221px, menu 937px. * 221 + 937 + 28 de vao = 1.186px de orcamento contra 1.080 oferecidos — * faltavam 106px em QUALQUER tela, porque o teto e do container e nao do * monitor. A barra quebrava em duas linhas e o cabecalho ia de 82px para * 141px, sobrando 143px vazios a direita. * * `min(1240px, 94vw)` cobre o orcamento com folga para o nono item (a * pilula de agendamento, que so aparece para quem qualificou — e era * justamente quem levava o cabecalho maior). * * Vem DEPOIS de `.wrap` no arquivo, entao vence por ordem com a mesma * especificidade. O elemento carrega as duas classes de proposito: `.wrap` * da o `margin-inline: auto`. */ /* * A MARGEM VIROU CONSTANTE (01/09/2026, onda 72). Era `94vw`: uma margem * PROPORCIONAL, que encolhe justamente quando falta espaco. A 1.440 ela * cobrava 86px do orcamento; a 1.080, 65px — e a 1.080 faltavam exatamente * 166px para a barra do lead qualificado caber. Margem de gutter nao e * conteudo: 24px de cada lado bastam em qualquer monitor, e o que sobra vai * para a barra. Medido: +17px a 1.080 e +29px a 1.280, que e o que decide o * 1.280 entre uma linha e duas. */ width: min(1240px, 100vw - 48px); display: flex; align-items: center; justify-content: space-between; gap: var(--esp-5); padding: 16px 0; flex-wrap: wrap; } .marca { display: inline-flex; align-items: center; text-decoration: none; } /* height manda; width:auto mantem a proporcao real (500x499, o simbolo) mesmo se os atributos do HTML forem arredondados. Os dois arquivos tem a MESMA caixa e a mesma margem transparente, entao o tamanho otico bate nos dois temas sem regra extra. */ .marca_logo { display: block; height: 36px; width: auto; } /* Espacamento generoso da referencia (28px) e peso REGULAR — o menu do portal e navegacao, nao chamada. Alvo de toque de 44px (WCAG 2.2, 2.5.8). .nav_secoes (ancoras da home) entra nas mesmas regras: fora de .nav, sem isto herdaria o azul de link do navegador — que sobre o header escuro fica em 2,3:1. */ .nav { --nav-gap: 16px; display: flex; align-items: center; gap: var(--nav-gap); flex-wrap: wrap; } /* * O MENU OCUPA A LINHA, E A ACAO ANCORA A DIREITA (31/08/2026). * * Duas coisas de uma vez, e a segunda so aparece quando a barra empilha: * * 1. NAVEGACAO E ACAO DEIXAM DE SER VIZINHAS. "Agendar reuniao" e a unica * pilula da barra e estava entre "Analise de call" e "Conta" — a acao * primaria lida como o sexto link. Empurrada para a ponta, ela para de * competir com o menu e ganha a posicao onde a mao ja procura acao. * * 2. A LINHA PARA DE SOBRAR. Medido a 1.200px, quando a barra empilha: o menu * terminava com 193px vazios a direita, e a fila de itens parecia * interrompida em vez de distribuida. * * `flex: 1` faz o menu tomar o que sobra da linha; `margin-left: auto` no CTA * empurra ele e o que vem depois (Conta, tema) para a ponta. Numa linha cheia * — 1.280px para cima — nao sobra folga, e o efeito e nenhum. */ .nav { flex: 1 1 auto; } .nav_cta { margin-left: auto; } /* * ...E QUANDO O CTA NAO EXISTE, QUEM ANCORA E O TEMA (01/09/2026). * * A ancora da ponta direita morava no `.nav_cta`, e ele e OPCIONAL: desde * 01/09 ele nao aparece em `/entrar`, porque ali apontaria para a propria * pagina. Sem o CTA, o alternador de tema ficava sozinho na nav — e a nav tem * `flex: 1`, entao ele encostava na LOGO, com 1.000px de vazio a direita. * * O defeito nao foi o CTA sair: foi a ponta direita depender de um elemento * que pode nao existir. Quem carrega a ancora tem de ser quem esta la. * * `:first-child` E DE PROPOSITO, e nao `.tema_alterna` solto: no /app a nav * tem menu, sair e tema, e todos comecam na esquerda — de proposito, e a tela * esta certa assim. A regra so morde quando o tema E o primeiro, que e * exatamente o caso em que a ancora sumiu. */ .nav > .tema_alterna:first-child { margin-left: auto; } /* A CONTA TAMBEM ANCORA NA PONTA — mas so quando nao ha pilula (onda 72). * * QUEM NAO QUALIFICOU nao tem "Agendar reuniao", e era a pilula que segurava a * ponta direita: sem ela, "Conta" parava onde o ultimo link acabasse — a 1.280 * sobravam 241px depois dela, e a 768 ela caia SOZINHA na terceira linha, colada * a esquerda, com 656px de vazio a direita. Um controle solto no meio do nada le * como sobra de quebra, nao como canto de conta. * * O IRMAO ADJACENTE E O QUE MANTEM O CASO QUALIFICADO INTACTO: com a pilula no * ar, ela ja empurra tudo para a direita e a conta vem GRUDADA nela. Duas * margens automaticas na mesma linha nao se somam — elas REPARTEM a folga —, e o * par "acao + conta" apareceria separado por metade do vao vazio. Por isso a * segunda regra cancela a primeira exatamente no arranjo em que ela atrapalha. * `+` ignora os comentarios PHP entre os dois no _theme.php: eles nao emitem no. */ .nav_conta { margin-left: auto; } .nav_cta + .nav_conta { margin-left: 0; } /* A PRIMEIRA LINHA DEIXA DE SER UM VAZIO COM UMA LOGO (01/09/2026, onda 72). * * O DEFEITO, MEDIDO: quando a barra nao cabia, o cabecalho virava duas faixas e * a de cima levava SO a marca — 1.019px vazios a 1.440 e 815 a 1.080 * (evidencias/w72/geometria-antes.json). Enquanto isso a faixa de baixo ia * lotada, e a 1.080 ela transbordava para uma TERCEIRA linha com um unico item * orfao. Havia espaco sobrando exatamente uma linha acima do aperto. * * POR QUE ISSO ACONTECIA (e nao e bug de ninguem): num flex container que * quebra, a linha e escolhida pelo tamanho HIPOTETICO do item — o menu inteiro, * ~1.000px — e so DEPOIS se aplica o encolhimento. O menu, entao, nunca tentava * caber ao lado da marca: ele descia inteiro, e a linha de cima ficava com o que * sobrou. * * A CORRECAO E TIRAR A QUEBRA DE FORA E DEIXAR A DE DENTRO. `nowrap` aqui nao * torna a barra rigida: quem passa a quebrar e o proprio `.nav`, que ja e um * flex container com `wrap`. O resultado medido a 1.080 com a pilula de * agendamento no ar: linha 1 = marca + os seis destinos, linha 2 = a acao e a * conta ancoradas a direita. Mesma altura de antes (140px), sem faixa vazia, sem * item orfao, e com o grupo dos entregaveis inteiro numa linha so. * * O PISO DE 1.040px SAIU DA MEDICAO, nao do gosto — e as duas pontas custam: * * - abaixo dele o menu do lead NAO QUALIFICADO (que nao tem a pilula, mas tem * os seis destinos + a conta = 748px) nao cabe ao lado da marca, e sobraria * "Conta" sozinha numa segunda linha. Trocar a faixa vazia por um orfao seria * mudar de defeito. Em 1.037px ele ja cabe; 1.040 e o degrau redondo acima; * - abaixo de 640px a barra vira COLUNA (regra propria, mais adiante), que e a * forma certa no telefone. Entre 640 e 1.040 fica a forma empilhada de * sempre: marca em cima, menu embaixo — ali a faixa da marca ocupa 44px de * uma tela estreita, e nao 1.000px de um monitor. * * NOWRAP EXIGE PISO, E ESSE E O MOTIVO REAL DE HAVER UM: sem a quebra externa, o * menu nao pode encolher abaixo do seu item mais largo (a pilula, ~200px). A * 320px sobrariam 78px para ele e a barra estouraria a tela na horizontal — o * unico defeito desta lista que o usuario sentiria com o dedo. */ @media (min-width: 1040px) { .topo_inner { flex-wrap: nowrap; } } /* NUCLEO x ENTREGAVEIS: um fio, nenhuma caixa (01/09/2026, onda 71). * * Painel, Diagnostico e Calculadora existem desde o primeiro minuto da conta. * Curso, Analise de call e Mapa de objecoes CHEGAM — e ver que chegaram e parte * do que a pessoa ganhou. Uma regua plana apaga essa diferenca; o porque de * produto esta no `_theme.php`, onde o nasce. * * `display: contents` E O QUE FAZ ISTO CUSTAR ZERO. O invólucro nao vira caixa * no layout: os tres continuam sendo itens flex DIRETOS da barra, cada um * quebrando linha por conta propria como antes. Trocar por um flex container * aninhado mudaria o ponto de quebra e prenderia os tres numa unidade so — que * e exatamente o que a barra nao pode fazer, porque ela ja empilha em telas * estreitas. * * O FIO MORA NO PRIMEIRO FILHO, E DENTRO DA FOLGA QUE JA EXISTIA. O padding * empurra, a margem negativa devolve, e a soma e zero — o `-1px` compensa a * propria borda, entao a largura pedida pela barra nao muda em nenhum pixel * (orcamento medido em evidencias/w71). Sem isso, separar custaria largura numa * barra que ja e o gargalo do cabecalho. * * SEM ROTULO E SEM `role="group"`: para quem ouve, a lista continua plana e cada * rotulo ja diz o que e. O fio nao carrega informacao que so ele tenha — e * decoracao honesta, e por isso nao lhe cabe piso de contraste de 3:1. * * OS TRES NAO SAO REBAIXADOS: mesmo tipo, mesmo peso, mesma cor do nucleo. O fio * diz "outra especie", nunca "especie menor" — quem chegou ate eles chegou por * merito, e a regra de entregavel e de sequencia, jamais de nota (RF11, §3.2). * * O vazio (nenhum entregavel liberado) nao pinta nada: sem filho nao ha * `:first-child`, e sem caixa no layout ele nao ocupa espaco. */ .nav_grupo { display: contents; } .nav_grupo > a:first-child { border-left: 1px solid var(--borda); padding-left: calc(var(--nav-gap) / 2 - 1px); margin-left: calc(var(--nav-gap) / -2); } /* O VAO NAO DEPENDE MAIS DA JANELA, e a versao anterior desta regra estava de cabeca para baixo. Ela apertava o vao ABAIXO de 1.400px, de quando o topo ainda herdava um teto de 92vw. Com o cabecalho de volta a largura do conteudo — 1.080 fixos, para alinhar com a pagina —, o container nao cresce com o monitor e o vao tambem nao pode: medido, 28px davam 1.115px de barra a 1.600 (estourava) e 20px davam 1.067 a 1.366 (cabia). Quebrava na tela GRANDE e cabia na pequena, que e o contrario do que se procura quando o defeito aparece. 16px EM TODA LARGURA desde 01/09/2026 (onda 72), e nao 20. O vao e o unico ajuste da barra que nao custa nem desenho nem palavra: entre oito vaos, os 4px de cada um somam 32px — metade do que faltava a 1.440 para o lead qualificado. O piso continua sendo o alvo de toque, e ele nao mexeu: cada item mede 44px de altura e os 16px separam CAIXAS, nao textos. Continua apertado de proposito: sobram 30px de folga a 1.440 com a pilula de agendamento no ar. Item novo NAO cabe na regua, e tem de entrar no controle de conta, que existe para isso. */ .nav a, .nav_secoes a { color: var(--topo-suave); text-decoration: none; font-size: var(--tipo-2); font-weight: 500; display: inline-flex; align-items: center; min-height: 44px; } .nav a:hover, .nav_secoes a:hover { color: var(--topo-texto); } /* Glifo do menu (14/08/2026). O item do autenticado e glifo + rotulo: o texto continua sendo quem carrega o significado (o glifo entra decorativo), entao aqui so ha o respiro entre os dois e o tamanho. `flex: none` impede que o desenho encolha quando a barra fica apertada — icone amassado le pior que icone nenhum. .nav_secoes (ancoras da home) nao tem glifo e nao paga nada. */ .nav a { gap: 8px; } .nav a .icone { flex: none; font-size: 1.125rem; } /* Pilula da referencia: raio total, vermelho de acao, branco bold, padding horizontal largo. Sem sombra — no header a unica peca com relevo e a linha. */ /* `.nav a.nav_cta` e nao `.nav_cta`: o seletor precisa de UM elemento a mais para vencer `.nav a` (0,1,1), que repintava `font-weight: 500` por cima do 700 declarado aqui. A pilula do header rendia mais leve do que quem a escreveu quis desde que a barra nasceu — o defeito estava anotado em `.flutuante_ir` (bloco da barra flutuante) esperando o dono deste bloco. Agora e (0,2,1). `.pagina-acesso .nav .nav_cta` (0,3,0) continua vencendo por contar mais classes, entao o rebaixamento das portas segue de pe. */ .nav a.nav_cta { background: var(--accent-primary); color: #fff !important; padding: 10px 26px; border-radius: var(--pilula); font-weight: 700; letter-spacing: .01em; } /* Sobe junto com a regra base: `.nav a.nav_cta` (0,2,1) venceria `.nav_cta:hover` (0,2,0) e o hover teria parado de pintar. `.pagina-acesso .nav .nav_cta:hover` (0,4,0) continua acima destes (0,3,1). */ .nav a.nav_cta:hover { background: var(--fss-acao-hover); } /* A PILULA SAI DAS DUAS PORTAS (27/08/2026), E O CONTROLE FICA. MEDIDO na captura de 1440 depois da separacao: com a raiz virando o cadastro, a barra do topo carregava um "Entrar" em pilula vermelha, peso 700, a 60px do "Criar conta" — que e a acao primaria da pagina, na MESMA cor e no MESMO peso. Duas acoes primarias na mesma tela, e a de menos importancia era a que estava mais alto. Em /entrar era pior: a pilula apontava para a propria pagina e ficava ao lado de um botao com o mesmo rotulo. A escada de botoes do portal e solido > vazado > sem caixa, com UM primario por regiao. Nas portas o primario e o botao do formulario, e o caminho ate a outra porta ja existe dentro do cartao (`.autenticar_pe`) — que e onde quem esta lendo o formulario procura. ELE NAO SOME: vira um item de barra como os outros. Nas demais telas publicas — /termos, /privacidade, /recuperar-senha, as de erro — a pilula continua, porque la ela e a unica acao da tela e nao compete com nada. */ .pagina-acesso .nav .nav_cta { background: none; color: var(--topo-suave) !important; padding: 0; border-radius: 0; font-weight: 500; letter-spacing: normal; } .pagina-acesso .nav .nav_cta:hover { background: none; color: var(--topo-texto) !important; } /* --- o controle de conta --------------------------------------------------- Recolhe Perfil, Administracao e Sair num item so. O porque esta no _theme.php: a barra pedia 1.352px e a coluna do conteudo oferece 1.080.
e nao um menu de script: abre no clique, fecha no clique, recebe foco pelo teclado e anuncia o estado sozinho. Sem JavaScript a conta continua alcancavel — o que nao acontece com um menu que so existe depois do load. */ .nav_conta { position: relative; } .nav_conta > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; list-style: none; cursor: pointer; color: var(--topo-suave); font-size: var(--tipo-2); font-weight: 500; } /* O triangulo de fabrica e desenho do navegador, nao da casa, e muda de forma entre Safari e o resto. O estado aberto se le pelo painel, que aparece. */ .nav_conta > summary::-webkit-details-marker { display: none; } .nav_conta > summary::marker { content: ''; } .nav_conta > summary:hover, .nav_conta[open] > summary { color: var(--topo-texto); } .nav_conta > summary:focus-visible { outline: 3px solid var(--accent-primary); outline-offset: 4px; border-radius: 4px; } /* O painel usa os tokens da PAGINA, e nao os do topo: ele cai por cima do conteudo, e nao dentro da barra. Herdar a tinta do header o deixaria escuro sobre a pagina clara. */ .nav_conta_menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; display: grid; min-width: 13rem; padding: 6px; background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); border-radius: var(--raio-app); box-shadow: 0 12px 32px rgba(0, 0, 0, .18); } .nav_conta_menu a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: var(--raio-p, 8px); color: var(--texto); text-decoration: none; font-size: var(--tipo-2); font-weight: 500; } .nav_conta_menu a:hover { background: var(--painel); } .nav_conta_menu a:focus-visible { outline-offset: -3px; } /* Sair fecha a sessao: fica por ultimo e separado por um fio, para nao ser clicado no lugar de Perfil. */ .nav_conta_menu .nav_sair { margin-top: 6px; border-top: 1px solid var(--borda); border-radius: 0; } /* Numa barra que ja empilhou, o painel absoluto brigaria com a linha de baixo: ali ele volta ao fluxo normal e a conta abre empurrando, sem cobrir nada. */ @media (max-width: 640px) { .nav_conta_menu { position: static; min-width: 0; box-shadow: none; margin-top: 8px; } } /* O ULTIMO LINK DA BARRA (onda 41) — o unico destino que vem depois do Sair. NEM TODA CONTA O RECEBE: quem decide e o servidor, no tema, e para quem nao recebe este seletor simplesmente nao casa com nada. Dai a forma dele. POR QUE ESTRUTURA, E NAO CLASSE NEM SELETOR DE ATRIBUTO. Esta folha e baixada por TODO visitante, inclusive por quem nao recebe o item. Casar pelo `href` escreveria aqui um endereco que o HTML daquela pessoa nao contem — e e justamente esse endereco que o resto do sistema evita confirmar. `.nav_sair + a` diz a mesma coisa pela posicao. Este comentario segue a mesma regra e nao nomeia o destino: nao e descuido de redacao. (LIMITE CONHECIDO, e ele e ANTERIOR a esta regra: uns dez comentarios mais antigos deste mesmo arquivo nomeiam o painel a vontade, e o diretorio que serve esta folha serve tambem arquivos com o nome dele. Ou seja: a folha nunca foi tratada como superficie de vazamento. A regra vale daqui para a frente; limpar o resto e decisao de escopo, nao de estilo.) RESSALVA DO SELETOR POSICIONAL: qualquer ancora que nasca depois do Sair herda este desenho, inclusive na barra de quem nao e staff. Hoje so ha uma, e ha teste no tema garantindo que continue havendo so uma. O DESENHO E UM DEGRAU DA MESMA ESCADA DOS BOTOES (ver `--- botoes ---`): cada degrau perde uma camada, e a perda tem de ser visivel sem depender de cor. Este perde tipo (--tipo-2 -> --tipo-1, e o glifo encolhe junto, senao o desenho ficaria maior que a palavra), perde peso (500 -> 400) e perde a companhia — o fio separa os DESTINOS do que vem depois deles, que sao controles do momento (trocar de aplicacao, trocar de tema) e nao etapas do produto. A COR NAO MUDA: mexer nela custaria contraste, e este item passa em AA nos dois temas como qualquer outro da barra. O FIO CABE NA FOLGA QUE JA EXISTIA: `padding-left` + `margin-left` somam zero, entao o item nao ficou mais largo por causa do separador — o fio ocupa o MEIO da folga que a barra ja dava. Os dois saem de `--nav-gap` e nao de um 14 escrito a mao: a barra troca a folga por 20px abaixo de 1400, e com o numero fixo o fio ficava a 6px do Sair e a 14px do glifo, encostado no vizinho errado. ALTURA: continua 44px, o piso de alvo que toda a barra respeita (WCAG 2.2, 2.5.8). Diminuir o TIPO nao pode diminuir o ALVO — sao duas coisas, e so uma delas e o assunto aqui. */ .nav .nav_sair + a { font-size: var(--tipo-1); font-weight: 400; padding-left: calc(var(--nav-gap) / 2); margin-left: calc(var(--nav-gap) / -2); /* O fio NAO e `border-left` porque a borda iria de ponta a ponta dos 44px de alvo e leria como divisao de celula. Este gradiente desenha 20px no meio da altura — separador de GRUPO, que e o que ele e. Uma coluna de 1px, sem repetir, ancorada a esquerda. */ background: linear-gradient( to bottom, transparent 0 12px, color-mix(in srgb, var(--topo-texto) 38%, transparent) 12px calc(100% - 12px), transparent calc(100% - 12px) 100% ) left center / 1px 100% no-repeat; } .nav .nav_sair + a .icone { font-size: 1rem; } /* Com o foco visivel, o anel ja e a moldura: o fio dentro dele viraria um risco solto entre o anel e o glifo. Some enquanto o anel existe. */ .nav .nav_sair + a:focus-visible { background: none; } /* EMPILHADO, O FIO SAI. Quando a barra quebra, o item pode cair no COMECO de uma linha, e um fio vertical solto na margem esquerda nao separa nada: so parece sujeira. No empilhado quem separa os grupos e a propria quebra. O NUMERO E MEDIDO, nao chutado: varrendo 1024..1440 nos dois temas, com a barra mais cheia que existe hoje (staff qualificado E o curso ligado, 9 alvos), o item nunca comeca linha acima de 1150 — o que quebra primeiro e o header inteiro (a marca sobe para a propria linha e o menu desce completo). Abaixo de 1150 ele comeca linha com frequencia. Se um dia nascer mais um destino na barra, refaca a varredura antes de confiar neste 1150. */ @media (max-width: 1150px) { .nav .nav_sair + a { background: none; padding-left: 0; margin-left: 0; } } /* O anel de foco global e --fss-acao com halo de --fundo. Sobre a barra escura isso da um anel vermelho de 3,75:1 (passa raspando) com halo BRANCO no tema claro — vermelho sobre vermelho no CTA, e um halo que vira o elemento mais claro da barra. Aqui o par se inverte: anel claro (16,80:1) e halo escuro. */ .topo :focus-visible { outline-color: var(--topo-texto); box-shadow: 0 0 0 2px var(--topo-fundo); } @media (prefers-reduced-motion: no-preference) { .nav a, .nav_secoes a, .nav_cta { transition: color var(--dur-micro) ease-out, background-color var(--dur-micro) ease-out; } } /* Seletor de tema (todas as telas do portal, nao so a home). Nasce com [hidden] no HTML e so aparece quando o app.js roda: um controle que nao funciona seria pior que controle nenhum. Sem JS o tema segue o sistema, por prefers-color-scheme. O primeiro paint NUNCA depende deste botao — o atributo data-tema sai do servidor, do cookie portal_tema. O botao mora no header, que e escuro nos DOIS temas: as cores tem de sair da familia --escuro-*, nunca de --texto/--borda. Com os tokens que trocam, no tema claro o icone ficaria quase preto sobre quase preto — o controle desapareceria justamente para quem quer sair do tema claro. */ .tema_alterna { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; flex: none; /* 38%, e nao --escuro-borda (14%): a borda E o contorno do controle, entao precisa de 3:1 contra o header (WCAG 2.2, 1.4.11). 14% dava 1,48:1; 38% da 3,35:1. */ /* --topo-texto e nao --escuro-texto: com o header seguindo o tema (14/08/2026), um contorno derivado do branco fixo virava branco-sobre- branco no claro — o controle sumia. Derivando do texto DO HEADER, a proporcao de 38% continua valendo nos dois temas. */ border: 1px solid color-mix(in srgb, var(--topo-texto) 38%, transparent); background: color-mix(in srgb, var(--topo-texto) 7%, transparent); color: var(--topo-texto); cursor: pointer; padding: 0; } .tema_alterna[hidden] { display: none; } .tema_alterna:hover { border-color: var(--topo-suave); background: color-mix(in srgb, var(--topo-texto) 14%, transparent); } .tema_alterna svg { width: 20px; height: 20px; } /* O MESMO BOTAO, DENTRO DO CONTROLE DE CONTA (01/09/2026, onda 72). * * POR QUE ELE SAIU DA BARRA: era o controle menos importante com o desenho mais * forte — o unico circulo com borda da ponta direita, ao lado de "Conta", que e * texto simples e guarda perfil, administracao e a saida da sessao. O porque de * produto (e a conta dos 64px que a mudanca devolveu a barra) esta no _theme.php. * * AQUI ELE DEIXA DE SER PILULA E VIRA LINHA, igual as ancoras vizinhas: dentro * do painel o que ordena e a lista, e um circulo no meio dela seria de novo o * item mais gritado — o defeito mudaria de lugar, nao sumiria. * * TROCA A FAMILIA DE COR JUNTO COM O LUGAR. `.tema_alterna` deriva de * `--topo-texto` porque o header e escuro nos dois temas; o painel da conta cai * sobre a PAGINA e usa `--texto`/`--superficie`. Herdar a tinta do topo aqui * daria texto quase branco sobre superficie clara. * * O `[hidden]` E REDECLARADO DE PROPOSITO: `.tema_alterna[hidden]` tem a mesma * especificidade (0,2,0) do seletor base deste bloco, e quem viesse depois no * arquivo venceria. Sem esta linha, um dia de reordenacao faria o botao aparecer * SEM JavaScript — visivel e inerte, que e pior que ausente (secao 12.4). */ .nav_conta_menu .tema_alterna_item { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; height: auto; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--raio-p, 8px); background: none; color: var(--texto); font-family: inherit; font-size: var(--tipo-2); font-weight: 500; text-align: left; } .nav_conta_menu .tema_alterna_item[hidden] { display: none; } .nav_conta_menu .tema_alterna_item:hover { background: var(--painel); border-color: transparent; } .nav_conta_menu .tema_alterna_item:focus-visible { outline-offset: -3px; } .nav_conta_menu .tema_alterna_item svg { width: 20px; height: 20px; flex: none; } /* Sem cookie o icone e o de "automatico"; com cookie, o do tema em vigor. */ .icone_sol, .icone_lua { display: none; } [data-tema="escuro"] .icone_lua { display: block; } [data-tema="escuro"] .icone_auto { display: none; } [data-tema="claro"] .icone_sol { display: block; } [data-tema="claro"] .icone_auto { display: none; } /* --- conteudo --- */ main { padding-block: var(--secao) 56px; } h1 { font-size: var(--tipo-6); line-height: 1.15; margin: 0 0 12px; letter-spacing: -.02em; } h2 { font-size: var(--tipo-4); margin: 0 0 12px; letter-spacing: -.01em; } h3 { font-size: var(--tipo-3); margin: 0 0 8px; } p { margin: 0 0 12px; } .sub { color: var(--texto-suave); font-size: var(--tipo-3); max-width: 62ch; } .miudo { font-size: var(--tipo-1); color: var(--texto-suave); } .card { background: var(--superficie-alta); border: 1px solid var(--borda); border-radius: var(--raio); padding: 24px; box-shadow: var(--sombra); } .grid { display: grid; gap: var(--gap); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .pilha > * + * { margin-top: var(--gap); } .secao { margin-top: var(--secao); } /* --- botoes --- TRES DEGRAUS, E A ESCADA E DE SUBTRACAO (direcao B, 20/08/2026). O DEFEITO: existiam tres desenhos de botao e NENHUMA hierarquia declarada entre eles. `.btn` e `.btn_sec` tinham a mesma altura, o mesmo padding, o mesmo brilho de varredura no hover — a unica diferenca era o preenchimento, e `.ligacao` era outra especie inteira (texto sublinhado). Tres pesos iguais e uma especie solta: a tela nao dizia o que fazer. A ESCADA. Cada degrau perde EXATAMENTE UMA camada do anterior, e a perda e visivel sem depender de cor: 1. PRIMARIO (.btn) caixa cheia + brilho + varredura no hover. Peso 700. UM por regiao da tela. 2. SECUNDARIO(.btn_sec) perde o preenchimento, o brilho e a varredura; fica a MESMA caixa, so que vazada. Peso 600. Mesma altura do primario de proposito: ele e a ALTERNATIVA a acao principal, e alternativa que vem num alvo menor nao e alternativa. 3. TERCIARIO (.ligacao) perde tambem a borda. Em repouso nao ha caixa nenhuma; ela aparece no hover e no foco. Peso 600, altura 44px — o piso de alvo (WCAG 2.5.8), nao o teto: e a terceira escolha. POR QUE O TERCIARIO NAO E SUBLINHADO. Ele era, e a folha de prova da direcao B propunha o contrario — transforma-lo numa copia do secundario, para acabar com a terceira variante. As duas saidas foram recusadas, pelo mesmo motivo: - sublinhado e o sinal de LINK DENTRO DE TEXTO CORRIDO neste portal (ver `.pagina-app main a:not(...)`), e `.ligacao` renderiza uma PERGUNTA INTEIRA por linha, numa lista de pendencias. Sublinhar trinta frases pinta a lista de riscos — o argumento ja escrito, e aceito, em `.link_bloco`; - vira-lo em `.btn_sec` apagaria o terceiro degrau em vez de hierarquiza-lo, e o pedido era dar hierarquia, nao reduzir a duas. O que carrega a afordancia em repouso: cada `.ligacao` ocupa a linha inteira de um
  • com separador, sob um paragrafo que diz "Toque para responder", e e um