Patch notes

Três correções de SEO, saídas de uma auditoria do próprio site

• As trilhas, as ferramentas e os Modelos passam a dizer ao Google o caminho em que estão (Início › Estudar › trilha, ou Início › Ferramentas › ferramenta), em dados estruturados — é a migalha que já aparecia na página. O Google pode mostrar esse caminho no resultado da busca no lugar do endereço
• Sete descrições passavam de 160 caracteres e eram cortadas no resultado da busca: Ferramentas, Modelos, Montar o site, Vibecoding, Depois do ar, Proposta e Depois de publicar. Foram encurtadas
• Os 80 links para a página inicial apontavam para index.html, um segundo endereço para a mesma página. Agora apontam para o endereço principal
• A auditoria também achou o que falta e não é correção de código: títulos das trilhas que não dizem o que a pessoa busca, a página inicial quase sem texto e nenhum sinal de cadastro no Search Console. Ficam para as próximas entregas

Motion 13: animateView, arc() e a versão fixada

• A trilha Referência: Motion foi conferida contra o repositório do Motion, que está na versão 13
• animateView: o layout animado, agora sem React: a animação de layout, que era só do React, chegou ao JavaScript puro pela View Transitions API — com o exemplo de um filtro de cardápio ou portfólio
• Mover em arco: arc(): o movimento em curva. A documentação diz que funciona no JavaScript puro; no teste, na 13.4.6, não funcionou, e o tópico diz por quê e como fazer arco em HTML puro enquanto isso
• Correção: "Os dois recursos que só existem no React" deixou de ser verdade e virou "Os dois recursos que nasceram no React"; a tabela "Quando migrar" foi atualizada pelo mesmo motivo
• O exemplo de versão fixada foi de motion@12 para motion@13, e a trilha Movimento, que carregava motion@latest nas próprias demos — o contrário do que a trilha ensina —, agora carrega motion@13
• O texto trocado está em Saiu e entrou, que agora quebra linha em endereço longo — no celular, a caixa vazava para o lado. Os contadores foram para 519 tópicos

Um erro sobre hospedagem gratuita, dois tópicos e a página Saiu e entrou

• Página nova, Saiu e entrou, em "Sobre o site": todo texto tirado ou reescrito fica lá, com a versão antiga ao lado da nova, para sempre dar para comparar. Começa pelas duas frases corrigidas abaixo
• Correção: três trechos diziam que o plano gratuito da Vercel cobre um site de cliente. Não cobre — os termos da Vercel restringem o gratuito a uso pessoal e não comercial, e contam como comercial receber para criar, atualizar ou hospedar o site. Hospedagem e deploy ganhou a coluna do que cada plano gratuito permite (Netlify aceita projeto comercial; GitHub Pages não), e o Back-end foi corrigido. O erro está registrado no Colofão
• A mensalidade: o que ela compra: a hospedagem no nome do cliente, num plano que aceita uso comercial, e a mensalidade chamada pelo que é — manutenção, com o que ela promete de verdade. E por que não prometer "99,9% no ar"
• Uma página por segmento, ou por cidade: o que agências grandes fazem para aparecer no Google, e a linha que o Google chama de página de entrada e pune — com o teste para saber de que lado a página está
• Os contadores foram para 517 tópicos

Garantias na ferramenta Proposta

• A Proposta que fecha ganhou o item Garantias, entre o investimento e o depois da entrega — agora são nove pontos
• Quatro garantias que se medem entram com um clique, para editar: prazo contado a partir do material, nota de desempenho no dia da entrega, domínio e código no nome do cliente, e 30 dias de correção de erro. O botão fica marcado enquanto o texto está no campo, e não duplica
• A estrutura de proposta da trilha Negócio ganhou o mesmo item

Garantias, preço riscado e "para quem não é"

• Três tópicos novos, a partir do que sites de outras desenvolvedoras fazem bem — e de um que faz mal
• Garantia que se mede: trocar "qualidade garantida" por prazo, nota de desempenho, domínio no nome do cliente e 30 dias de correção, cada um com o jeito de o cliente conferir; e como escrever sem virar armadilha — prazo que conta a partir do material, nota com print e data, "erro" definido, nada que dependa do Google
• Preço riscado e urgência de verdade: quando o "de R$ X por R$ Y" é oferta e quando é enganação, o que o Código de Defesa do Consumidor diz sobre preço, e o HTML certo para uma promoção real
• "Para quem não é": a seção que filtra: dizer para quem o serviço não serve, escrevendo a condição e não o cliente, com a seção pronta nas classes do projeto-base
• Os contadores foram para 515 tópicos

Feed do Instagram e agendamento pelo site

• Feed do Instagram que se atualiza sozinho: os três caminhos (print, widget de terceiro, API) e o que cada um custa; a mudança de dezembro de 2024, quando a Meta desligou a API que aceitava conta pessoal; a função na Vercel que busca os posts sem expor o token, com cache de uma hora; a grade que troca o link só quando os posts chegam; e o token que vence em 60 dias, que é item de manutenção com data
• Agendamento pelo site: quando vale a pena e quando o WhatsApp é melhor; Google Agenda, Calendly ou sistema próprio; o link que não pesa nada e a agenda incorporada só quando a pessoa chega nela; e de quem é a conta onde ficam os dados de quem marcou
• Os fatos sobre a API do Instagram e as opções de incorporação do Google Agenda e do Calendly foram conferidos na documentação oficial de cada um em 29 set 2026
• Os contadores foram para 512 tópicos

A IA acha as ferramentas

• Perguntando por um botão de WhatsApp, a IA dizia que o site não tratava do assunto — e existe a ferramenta Link de WhatsApp. O índice que a IA lê guardava só o resumo de cada ferramenta, curto demais para empatar com as trilhas. Agora guarda a página inteira, e a ferramenta cujo nome aparece na pergunta sobe na lista
• A busca dos trechos passou a comparar palavras pela raiz sem a terminação: "calculo" acha a calculadora, "publicar" acha publicação, e "contrato" não puxa mais a ferramenta de Contraste

Pergunte à IA do site

• Um botão redondo no canto de toda página, que acompanha a rolagem como o do WhatsApp, abre um painel de conversa com a IA do site, o Gemini, do Google, no plano gratuito — o site não paga por pergunta
• Dá para mandar print: pelo botão de imagem, colando com Ctrl+V ou arrastando para o painel. Serve para tirar dúvida de erro no console, de código, de layout quebrado ou de uma tela de ferramenta. O print é reduzido no navegador antes de sair, e vale também para as perguntas seguintes da mesma conversa
• A resposta vem com base no próprio conteúdo: a cada pergunta, o servidor procura os tópicos das trilhas e ferramentas que tratam do assunto e manda só eles junto. A resposta aponta o tópico com link, e embaixo aparecem os tópicos citados
• Na busca, "Não achou? Pergunte à IA do site" leva junto o que já foi digitado
• O painel avisa, antes de qualquer pergunta, que o texto e o print são enviados para o Google, que no plano gratuito pode usar esse conteúdo para melhorar os produtos dele, e pede para não mandar senha nem dado de cliente. A conversa fica só na aba aberta e some ao fechar o navegador. As ferramentas continuam sem enviar nada
• Há um limite de perguntas seguidas por pessoa, e o plano gratuito do Google tem cota por minuto e por dia. São três modelos gratuitos em fila: se um estiver sem cota ou sobrecarregado, o próximo responde. Quando os três param, o painel avisa em vez de cobrar

As cinco regras do site foram revogadas

• Deixam de valer: sem framework e sem build, Google Fonts como única dependência externa, JavaScript defensivo obrigatório, localStorage sempre em try/catch e nada saindo do navegador. Biblioteca, CDN, API e função no servidor passam a ser possíveis quando fizerem sentido
• Nada mudou ainda para quem usa: as ferramentas continuam rodando só no navegador e sem enviar nada. Quando isso mudar, as páginas que dizem o contrário são corrigidas junto
• O Colofão ganhou a seção "As regras que viraram ponto de partida", com o porquê

O site redesenhado: mais limpo e mais fácil de navegar

• O hub virou um palco escuro: "Do zero ao contrato." em tamanho grande, a busca como barra principal e as duas portas, Estudar e Trabalhar, embaixo. Saíram os glifos, a grade e os brilhos
• Uma cor de destaque só, o verde-azulado, no site inteiro — Modelos inclusive. A área em que você está aparece só na pílula ativa do topo, sem pintar o cabeçalho
• O menu não vaza mais para fora da tela: fica centralizado em qualquer largura, dividido em Construção, Captação e Vendas, Método, Trabalhar (com as quinze ferramentas, na ordem das fases) e Sobre o site
• Estudar virou um percurso numerado de 01 a 14, com a descrição e o tamanho de cada trilha e quantos tópicos você já estudou nela
• Ferramentas junta cada fase num bloco só, com o título de um lado e os cartões do outro; Modelos ganhou o mesmo topo de área
• Nas trilhas: o caminho "Estudar › Grupo" acima do título; no celular, o sumário vira uma barra fina que diz a parte em que você está e enche conforme a leitura avança; a conta de tópicos estudados embaixo do título do sumário
• Ícones em SVG no lugar dos caracteres, botões na fonte dos títulos, as notas sem a faixa colorida na lateral, e um rodapé com o mapa do site em toda página

Vídeo, mapa e o que o CSS já resolve

• A trilha Montar o site ganhou duas partes, com 11 tópicos. O projeto-base continua sendo a última, agora a 9
• Vídeo, mapa e outros embeds: o que um embed de YouTube, Maps ou Instagram custa de verdade; a fachada, que mostra a capa do vídeo e só carrega o player no clique, pelo modo de privacidade aprimorado do YouTube; o vídeo próprio com <video>, e por que vídeo longo não mora no site; o mapa como link, como imagem ou incorporado só quando a pessoa chega perto; e por que todo embed também é coleta de dado
• O que o CSS já resolve: carrossel sem biblioteca, com encaixe e o pedaço do próximo card aparecendo; a cor da marca nos controles do formulário com uma linha; cards alinhados entre si com subgrid; o inert para o Tab não passar pelo que está atrás do menu aberto; a tabela que rola sozinha no celular; e a página impressa ou salva em PDF
• O projeto-base ganhou a cor da marca nos controles e o estilo de impressão, já prontos. As seções da galeria de Modelos usam o mesmo projeto-base e receberam as duas coisas junto
• Cada exemplo foi montado e testado antes de publicar: a fachada não faz nenhuma chamada ao YouTube antes do clique, o carrossel e a tabela rolam sem estourar a página no celular, os botões dos cards com subgrid param na mesma altura, e a impressão esconde o topo e mostra o endereço dos links
• Os contadores foram para 106 partes e 510 tópicos

Ícones e SVG na trilha Montar o site

• A trilha Montar o site ganhou a parte Ícones e SVG, com 7 tópicos. O projeto-base continua sendo a última parte, agora a 7
• Os três jeitos de pôr um SVG na página e o que cada um deixa o CSS fazer; o currentColor, que faz o ícone mudar de cor junto com o texto; o sprite com <symbol> e <use>, que desenha cada ícone uma vez só; e por que o sprite em arquivo separado some quando o HTML é aberto direto do computador
• Ícone que é o botão inteiro precisa de nome para o leitor de tela, e de 44 pixels de área de toque; o logo em SVG, com o alt sendo o nome do negócio; como limpar o SVG que sai do Figma ou do Illustrator, e por que só colar SVG de fonte confiável; e onde achar conjuntos de ícones gratuitos, com a licença de cada um
• O projeto-base ganhou a classe .icone, já pronta. No teste, o ícone pulava para a linha de cima quando ficava dentro de um link ou de uma frase — o reset põe todo SVG em bloco. A classe agora devolve o ícone para a linha do texto. As seções da galeria de Modelos usam o mesmo projeto-base e receberam a mudança junto
• Os contadores foram para 104 partes e 499 tópicos

Seções inteiras de site na galeria de Modelos

• A galeria de Modelos ganhou a categoria Seções, com onze seções prontas para copiar: topo com menu no celular, hero, serviços em cards, quem faz, como funciona, depoimentos, planos e preços, dúvidas frequentes, chamada final, contato e horário, e rodapé
• Todas usam o projeto-base da trilha Montar o site — os mesmos tokens e as mesmas classes de layout —, então entram direto no projeto: o HTML no index.html, o CSS no fim do estilo.css. Trocar o tokens.css pelo que sai do Design system muda a cor e a fonte de todas de uma vez
• O topo abre e fecha no celular com o botão, fecha no Esc e ao escolher um link, avisa ao leitor de tela se está aberto, e some também para o Tab quando fechado. As dúvidas usam <details>, sem JavaScript, abrindo uma de cada vez. O contato traz o horário numa tabela de verdade e o "como chegar" como link, não como mapa incorporado. O rodapé atualiza o ano sozinho
• Nada é inventado nos textos de exemplo: nota, número de avaliações, preço e depoimento aparecem entre colchetes, para trocar pelo real — o depoimento diz no próprio lugar que só entra texto autorizado
• Como o CSS de uma seção estiliza títulos e parágrafos, ele não pode encostar na página da galeria: cada seção roda isolada, dentro de um quadro com exatamente o arquivo que o botão "Copiar tudo" entrega. Na grade aparece uma miniatura da seção; na janela, em tamanho real, com o botão para ver no celular ou na tela grande
• Cada seção foi aberta sozinha, no celular e na tela grande, sem estouro lateral e sem erro. Os contadores foram para 39 modelos em 8 categorias

Trilha nova: Montar o site

• Montar o site é a décima quarta trilha e vem logo depois de HTML puro: a trilha de HTML ensina as peças, esta ensina a juntar as peças num site inteiro. São 6 partes e 18 tópicos
• A ordem em que um site se constrói (conteúdo, HTML, tokens, layout, componentes, movimento); onde cada arquivo mora e como nomear; quando manter tudo num arquivo só e quando separar; o <head> completo em ordem; as regiões do <body>; e um molde de seção que se repete igual do começo ao fim
• O CSS em camadas com @layer (reset, base, layout, componentes, utilitários), um reset curto explicado linha a linha, os tokens no :root e o estilo de base que faz um parágrafo novo já nascer certo
• Os padrões de layout que se repetem: o container numa linha só, e pilha, fila e grade — a grade vai de uma a quatro colunas sem nenhuma media query. Do celular para cima, com o ponto de quebra vindo do conteúdo
• Nomes de classe no formato bloco, elemento e variação; o que faz um componente estar pronto; e o JavaScript em blocos que não derrubam uns aos outros
• No fim, o projeto-base pronto para copiar: index.html, tokens.css, estilo.css e app.js. O tokens.css usa exatamente os nomes que a ferramenta Design system exporta, então o arquivo da ferramenta entra no lugar sem mexer no resto. O projeto foi montado a partir do que a página mostra e aberto no navegador, no celular e na tela grande, antes de publicar
• Os contadores foram para 14 trilhas, 103 partes e 492 tópicos

Trilha nova: Depois do ar

• Depois do ar é a décima terceira trilha e fica depois de Back-end: o estudo do que fazer quando o site fica pronto, e do que acrescentar na estrutura além da home. São 7 partes e 26 tópicos
• Conteúdo que não existia em trilha nenhuma: os arquivos da raiz que todo site precisa (robots, sitemap, favicons, imagem de compartilhamento, 404); as páginas além da home e a página de obrigado, que mede conversão sem evento; o vercel.json — um endereço só com ou sem www, redirecionamento permanente, endereço sem .html, cabeçalhos de segurança e cache; o Bing Webmaster Tools; o que se sabe da busca feita por IA, sem prometer o que não se sabe; o calendário do que vence; e-mail no domínio com MX, SPF, DKIM e DMARC, e como mexer no DNS sem derrubar o e-mail; e o conteúdo que envelhece
• Onde o assunto já tinha tópico — Search Console, Perfil da Empresa, Analytics, monitoramento, backup, relatório e manutenção —, o tópico novo é uma ponte curta com a decisão prática e o link para o tópico completo, em vez de repetir o texto
• Faz par com a ferramenta Depois de publicar: a trilha explica o porquê, a ferramenta dá o roteiro com datas. As duas apontam uma para a outra, e as trilhas Tráfego e Negócio apontam para a nova
• Os contadores foram para 13 trilhas, 97 partes e 474 tópicos; o hub ainda dizia "12 ferramentas" no topo e passou para 15

Ferramenta nova: Depois de publicar

• Depois de publicar é a décima quinta ferramenta e abre a fase 5, Acompanhar: o que fazer depois que o site entra no ar, dividido em cinco blocos com prazo — no dia, primeira semana, primeiro, segundo e terceiro mês. São 29 itens: Search Console verificado e sitemap enviado, Perfil da Empresa no Google, nome, endereço e telefone iguais em todo lugar, Analytics com o clique no WhatsApp, avaliações, o primeiro relatório e o que decidir no terceiro mês
• Com a data de publicação preenchida, cada bloco mostra quando vence, qual é a vez e o que ficou para trás. O bloco "Todo mês" traz a manutenção (site no ar, domínio e certificado, backup, relatório) e zera sozinho a cada mês
• Cada item aponta o tópico da trilha que explica o porquê e, quando outra ferramenta já sabe o valor, mostra o que conferir: a busca site: com o domínio do Cabeçalho, o endereço do sitemap, o nome e o telefone para bater com o perfil, quantos itens do Checklist de entrega estão marcados
• Copia o roteiro com as datas, para mandar ao cliente, e baixa os lembretes num arquivo .ics que abre no Google Agenda, no Apple e no Outlook — um evento no vencimento de cada bloco, só com o que falta, e um mensal. O arquivo é montado no navegador, nada é enviado
• Nenhum item foi inventado: o roteiro já existia em prosa em Os primeiros noventa dias, na trilha Tráfego, com o resto vindo das partes de domínio, backup e manutenção da trilha Negócio. O tópico agora aponta para a ferramenta, e o Checklist de entrega também
• Guarda por cliente, com o mesmo nome de projeto das outras; o cartão na página de Ferramentas mostra o andamento e a data. Os contadores foram para 15 ferramentas e 5 fases, e o menu ganhou o link

Animações de rolagem em Estudar e Modelos

• Estudar e Modelos agora entram aos poucos: o título sobe de trás de uma máscara, palavra por palavra, e os números do topo contam do zero
• Os blocos — o mapa das trilhas, link por link, os cartões de modelo, o índice e a navegação — sobem e aparecem quando chegam na tela. Quando vários chegam juntos, entram em escada, na ordem da página. Cada um entra uma vez só
• Ao rolar, o topo da página se afasta e esmaece. Isso só acontece nos navegadores que ligam animação à rolagem direto no CSS; nos outros, o topo fica parado
• Só se anima opacidade e deslocamento, com as propriedades translate e opacity separadas do transform, para não brigar com o hover dos cartões. Com "reduzir movimento" ligado, ou sem JavaScript, nada fica escondido

Trilha nova: Vibecoding

• Vibecoding, a décima segunda trilha, ao lado de Trabalhando com IA: uma ensina como pedir, a outra com o quê trabalhar e onde buscar. Seis partes e 27 tópicos — o mapa das ferramentas (conversa, construtor, agente, mídia) e quando sair do construtor; onde achar referência e como desmontar uma antes de pedir; arquivo de contexto de cada ferramenta, skills, MCP, subagentes, hooks e modo plano; a IA em loop, o erro bem contado, o Git como botão de desfazer e a leitura do diff; a chave que vaza, o banco sem regra de acesso, a conta que dispara e o caminho para publicar; e como se manter atualizado sem trocar de ferramenta toda semana
• Sem preço nem plano de ferramenta: isso muda todo mês e ficaria velho calado. Só o que cada uma faz e quando usar
• Skills: como chamar pelo nome com a barra (/nome), que é o jeito garantido — sozinha, pela descrição, ela só talvez entre. Referências: Pinterest para o moodboard, Behance e Dribbble para projeto de design completo, Kittl para tipografia e peça gráfica — e a diferença entre referência de design e de site funcionando
• Corrigido: o script que regera o sumário das trilhas procurava o fim do bloco a partir do começo do arquivo e, desde que o menu do cabeçalho passou a terminar do mesmo jeito, colava o sumário duas vezes. A suíte de verificação agora também falha quando uma página tem id repetido — foi assim que o erro apareceu

Modelos para copiar, e Ferramentas no formato da área

• Página nova, Modelos: 28 efeitos e componentes rodando de verdade, numa grade como a do motion.dev — reveal, contador, título palavra por palavra, faixa infinita, barra de leitura, botões (retorno ao toque, varredura, segurar para confirmar, copiar com troca de ícone), cards (zoom, inclinação no mouse, virar), abas, acordeão, menu que vira X, rótulo que flutua, interruptor, erro que treme, avisos que empilham, dica com atraso, esqueleto, carregando, janela com dialog, antes e depois, profundidade no mouse, grade que se reorganiza, carrossel e botão flutuante de WhatsApp
• Cada modelo abre numa janela com o HTML, o CSS e o JavaScript para copiar — o mesmo texto que roda na prévia —, um botão que copia tudo como um arquivo .html só e outro que abre esse arquivo sozinho numa aba, para testar isolado. Filtro por categoria, lista completa no fim, e a busca do site acha cada modelo pelo nome
• Ferramentas ganhou o formato da área de estudo: rótulo, título, os números, os dois botões e o mapa das quatro fases em colunas; embaixo continuam o projeto em andamento e o estado de cada ferramenta

Sem buracos entre os tópicos, e doze exemplos vivos novos

• A coluna de exemplos não abre mais buraco: quando os exemplos de um tópico descem muito além do texto, os maiores se recolhem. Primeiro só o código ("Ver o código"), deixando a demonstração à mostra; se ainda não couber, o grupo inteiro vira um cartão "Abrir exemplo" ao lado do texto, que abre o exemplo completo numa janela. O pior caso caiu de mais de 500px de vazio para menos de 140px
• Movimento ganhou dez vitrines: a corrida de curvas (linear, ease-in, saída suave e mola na mesma distância), as quatro durações lado a lado, o encadeamento que começa do início, do centro ou do fim, a paralaxe com rolagem por dentro do palco, e os seis efeitos prontos rodando — reveal ao rolar, altura automática, botão com e sem retorno ao toque, contador, zoom com e sem moldura e barra de leitura
• Motion ganhou o traço SVG que se desenha e o cartão para arrastar, que resiste depois de 120px e volta com mola ao soltar
• As "fotos" das vitrines são gradientes em CSS: nenhum arquivo nem serviço de fora

O mesmo cabeçalho em toda página

• Marca à esquerda, menu e Estudar/Trabalhar no centro, busca e tema à direita — em qualquer página. Saiu o rótulo de posição ("Negócio", "Ferramentas · Cabeçalho da página"), que mudava a largura do topo de uma página para outra; quem diz onde você está é o título da página

Exemplos ao lado do texto, e os primeiros exemplos vivos

• Em tela larga, cada exemplo sobe até a altura do texto que o apresenta, com uma seta apontando para ele. Passar o mouse no exemplo acende o texto a que ele pertence. Antes, o código ficava onde estava no HTML — às vezes muito abaixo do que ele explicava
• Vitrine: exemplo que roda de verdade, num palco com os controles no canto e o código a um clique. As quatro primeiras estão em HTML puro — um cubo 3D em CSS que dá para girar com o mouse (Transições e animações), justify-content ao vivo (Flexbox), uma grade que se reorganiza enquanto você arrasta o canto (Grid) e o mesmo card claro e escuro só trocando o color-scheme (Modo escuro)
• Tudo em CSS e JavaScript puros: o cubo não usa Three.js nem biblioteca nenhuma, e para quieto para quem pediu menos movimento

Uma página para cada ferramenta, e trilhas em três colunas

• O site ficou em três níveis: hub, páginas e subpáginas. Cada uma das quatorze ferramentas ganhou a própria página, com endereço próprio, índice das fases ao lado e anterior/próxima no fim. A Ferramentas virou o mapa: o projeto em andamento e um cartão por ferramenta, com o estado dela
• As ligações continuam entre as páginas: o que uma ferramenta guardou aparece na outra, com o botão para usar e o link levando à página de onde veio
• Em tela larga, as trilhas mostram o texto no meio e os exemplos de código na coluna da direita, na altura do texto. Em tela menor, continua tudo numa coluna
• O sumário das trilhas ficou discreto e foi para o canto: menor, mais apagado, e só a parte em leitura abre a lista de tópicos
• Em Estudar, a caixa "Chegou nos últimos 30 dias" foi para baixo do mapa das trilhas, e o nome da trilha não sai mais colado no selo — aparecia "HTML puronovo"

Cabeçalho mais rápido e com a cor da área de volta

• O cabeçalho volta depois de uns 0,3 segundo rolando para cima, em vez de um segundo inteiro. Um único giro da roda ainda não traz ele de volta
• Ele voltou a acompanhar a cor da página: vermelho na área de trabalho, âmbar na de estudo; patch notes, colofão e 404, que não pertencem a nenhuma das duas, seguem neutros. Continua em uma linha só, translúcido

Gerador de comando na área de ferramentas, e um cabeçalho que sai da frente

• O Gerador de comando saiu da trilha de IA e virou a primeira ferramenta da fase "montar a página". Passou de cinco para onze tipos, em quatro grupos: começar (landing page, direções, arquivo de contexto, recomeçar conversa), construir (nova seção, texto da seção, animação), ajustar (feedback, correção pontual) e revisar (autocrítica, revisão final). Cada tipo aponta o tópico da trilha de onde veio
• Os campos vazios do gerador podem vir das outras ferramentas com um botão: nome do projeto, ofício e cidade do Cabeçalho, público e diferencial do Briefing, paleta, tipografia e escala de espaço. O que já estava preenchido no gerador continua salvo
• O cabeçalho caiu de duas linhas para uma, de uns 120px para 48px, e ficou neutro: a cor da área aparece só no alternador Estudar/Trabalhar. Ele reaparece depois de cerca de um segundo rolando para cima, não no primeiro movimento — voltar um parágrafo para reler não traz o topo de volta. E some mais rápido do que aparece
• O filtro Tudo/Revisão/Novo das trilhas saiu do cabeçalho e foi para a abertura, ao lado da legenda que explica as duas etiquetas

Design system, tipografia refeita e oito tópicos novos

• Ferramenta nova, Design system, no fim da fase de identidade: conta os valores soltos de um CSS colado (cores, com as quase iguais agrupadas, tamanhos, espaços fora da grade de 4, raios e sombras), junta paleta, tipografia e escala com raio, sombra, movimento e modo escuro, e entrega tokens em três camadas, componentes com todos os estados, contraste conferido nos dois modos e um JSON no formato DTCG para plugins de tokens do Figma. Substitui a antiga "saída da fase"
• Tipografia refeita: famílias agrupadas por classe, 22 no total, cada uma pedindo ao Google só os pesos que ela tem — Lora, Space Grotesk, Libre Baskerville e IBM Plex Mono pediam o 800, que não existe nelas, e o pedido falhava. Mede a altura-x das duas fontes e a quantidade de caracteres por linha, mostra a escala inteira nas fontes escolhidas, e o CSS sai com medida, alinhamento, font-size-adjust, versalete e números tabulares
• A cor de marca que mais aparece no inventário vira sugestão na Paleta; a medida do parágrafo saiu da Escala e foi para a Tipografia
• Negócio ganhou sete tópicos: anatomia do tipo, classificação das fontes, acabamento tipográfico, inventário de interface, tokens em três camadas, atomic design com os estados de cada peça, e design system como produto. HTML puro ganhou um: Variáveis do Figma e o caminho dos tokens

Ferramentas em quatro fases, ligadas entre si

• A página segue a ordem do trabalho: antes do projeto (briefing, preço, proposta), identidade (paleta, contraste, tipografia, escala), montar a página (cabeçalho, WhatsApp, UTM) e entregar (checklist, inventário). O índice lateral acompanha
• Painel "Projeto em andamento" no topo: um nome de cliente vale para as doze, e cada ferramenta mostra onde está — 4 de 10 perguntas, piso do preço, número do WhatsApp, 3 de 14 itens
• O que uma ferramenta já sabe aparece na outra, com botão para usar e sem sobrescrever nada: briefing vira rascunho da proposta, a faixa do preço vai para o investimento, a paleta vai para o contraste e para a theme-color, telefone e endereço passam entre cabeçalho, WhatsApp e UTM
• O bloco de <head> já inclui o <link> das fontes escolhidas, e a fase de identidade termina com paleta, tipografia e escala num CSS só
• Checklist aponta para a ferramenta de cada item, com o valor a conferir em produção. O inventário só divide o nome do projeto — não há dado de outra ferramenta que caiba nele

Marca de conteúdo recém-chegado

• Tópico publicado nos últimos 30 dias ganha o selo "Chegou" com a data, uma linha de destaque em cima e um ponto no sumário lateral
• Estudar mostra uma caixa "Chegou nos últimos 30 dias" com os tópicos novos e marca a trilha que recebeu conteúdo; o hub avisa na porta de estudo
• Passado o prazo, a marca some sozinha. É diferente da etiqueta "Novo", que quer dizer "não é revisão" e continua como estava

Modo escuro em HTML puro

• Tópico novo em CSS moderno: color-scheme, light-dark() e o alternador manual sem o flash de tema errado — com o motivo de o script ir inline no <head>
• O alternador do exemplo checa matchMedia quando não há tema salvo; sem isso, o primeiro clique de quem usa o sistema no escuro não mudaria nada
• Contadores: 412 para 413 tópicos

Cada área com sua cor, e o cabeçalho que sai da frente

• A home virou um hub sem cabeçalho nenhum: a navegação sai dos dois botões e dos cards. Nas outras páginas o cabeçalho passou a sumir quando você desce e voltar quando você sobe — com o Menu aberto ou o foco do teclado dentro dele, não some
• Cada área tem sua cor de destaque: o hub segue no verde, a área de estudo virou âmbar e Ferramentas virou vermelho. Troca o par --accent/--accent-soft inteiro, então link, etiqueta, filtro e marcador de estudado acompanham
• O âmbar é bronze de propósito. O âmbar-ouro óbvio dava a mesma cor de --js, usada nas etiquetas de camada JavaScript — em Referência: Motion são 31 delas, e PARTE 1 ficaria igual a JS
• Botões de chamada novos no hub, em Estudar e em Ferramentas: rótulo em mono, chevron e o preenchimento varrendo de um lado ao outro no hover
• Corrigido: a busca morria inteira em qualquer página sem cabeçalho — o atalho / e o campo da home dependiam, sem que isso estivesse escrito em lugar nenhum, do botão de lupa existir no topo
• scripts/navmenu.mjs agora também escreve o data-modo do <body> e a cor da barra do navegador, a partir do mapa que ele já tinha. Antes o data-modo era escrito à mão e só duas páginas tinham

Três geradores de código em Ferramentas

• Cabeçalho da página — título, descrição, canonical, Open Graph e o JSON-LD do negócio, prontos para colar. Avisa quando a descrição passa de 160 caracteres
• Paleta em tokens — a cor de destaque vira os seis papéis do :root, com o contraste de cada par já conferido. Se a cor não serve para texto, ele escurece até passar e entrega as duas versões
• Escala de texto e espaço — base e razão viram a escala tipográfica com clamp() e a escala de 8 completa
• Tipografia — sete combinações de fonte com o motivo de cada uma, ou escolha à mão entre dezenove famílias. Sai o <link> do Google Fonts pedindo só os pesos marcados, e avisa quando passam de três por família
• Ferramentas passou de oito para doze, e ganhou o grupo "Gerar código" no índice lateral

Home nova, menu por categoria e esta página

• Home reformulada: no lugar dos cards cheios de número e selo, uma caixa de busca grande logo abaixo do título e a lista de tudo agrupada por categoria
• Menu reorganizado em cinco categorias: Construção, Captação e Vendas, Método, Ferramentas e Patch notes
• Esta página criada — o registro do que muda, atualização por atualização
• Corrigido um link quebrado que vinha passando batido no menu: o atalho para o gerador de comando apontava para uma âncora que não existia
• Modo trabalho: em Ferramentas o cabeçalho muda de cor — mesma casa, cômodo diferente
• Site reorganizado em três páginas: uma central, a área de Estudar com as onze trilhas, e a área de Trabalhar com as oito ferramentas. Continua um site só — um CSS, uma busca sobre tudo, um deploy — e o alternador Estudar/Trabalhar no topo troca de área de qualquer página

Ferramentas cresceu e HTML puro se dividiu

• Duas ferramentas novas: Proposta que fecha e Inventário de acessos — Ferramentas agora tem oito
• HTML puro dividido em duas páginas — a original passou de 160 KB numa carga só
• Busca em todo o site (ícone de lupa no cabeçalho, ou a tecla /), com índice próprio carregado só na primeira busca
• Movimento enxugada: o conteúdo de Motion virou referência própria em Referência: Motion, sem repetir o que já estava lá
• Ferramentas criada como página própria, separando material de estudo do que se usa durante o trabalho
• Folha de impressão dedicada e foco preso dentro do modal de busca

Auditoria de higiene do site

O site foi checado contra a própria checklist que ensina — sete falhas encontradas e corrigidas no mesmo dia (o registro completo está no Colofão):

• sitemap.xml e robots.txt
• Favicon e imagem de compartilhamento (og.png)
• Link de pular para o conteúdo
• Página de erro 404
• canonical em todas as páginas