Disponível em

HVACool

HVACool é um tema desenvolvido especificamente para empresas residenciais de climatização — projetado para a realidade de que esses sites raramente recebem visitas por curiosidade. Alguém está com calor, com frio ou preocupado com um vazamento e precisa agir rápido. O tema mantém as informações essenciais sempre visíveis, a navegação imediata e não atrapalha.

 

Colunas fixas, informações essenciais em primeiro lugar

A estrutura de três colunas mantém a identidade da empresa (logo, navegação, CTA) fixa na barra lateral esquerda e os dados de contato fixos à direita, para que as informações de que alguém precisa em uma emergência — telefone, link de agendamento, endereço — estejam sempre visíveis, independentemente de onde a pessoa esteja na página. A coluna central (60% da largura) exibe conteúdo como títulos, descrições de serviços e novidades.

Cantos arredondados e uma única cor de destaque para unir tudo.

A paleta funciona com base em uma tensão deliberada: fundos quase pretos, superfícies de conteúdo em branco off-white e um único verde ácido reservado para elementos que exigem atenção imediata — o bloco do logo, CTAs principais, selos de ícones e estados de hover. Quatro variações de paleta acompanham o tema, combinando o destaque com tons base mais quentes, mais frios e neutros para mudar a personalidade.

A tipografia é gerenciada inteiramente pela família Google Sans — Display (72pt) para títulos e Text (24pt) para corpo — mantendo o sistema coeso e eficiente em desempenho, com uma única família em todos os pesos e usos.

Movimento com propósito e uma base técnica limpa

Animações leves e efeitos de hover adicionam personalidade sem competir com o conteúdo. Esses detalhes reforçam a sensação de prontidão do tema, sinalizando interatividade nos momentos certos. Os estilos de botão personalizados são registrados no theme.json e disponibilizados via functions.php, ficando disponíveis na interface nativa do botão sem exigir CSS personalizado do proprietário do site. No geral, o CSS é enxuto, organizado e bem comentado.

Anime a seção hero

A página inicial do HVACool recebe visitantes com uma breve sequência animada: o avatar do técnico surge com um efeito de pop, o texto nos balões aparece como se fosse digitado e os botões de chamada para ação surgem em fade, para finalizar. Você pode reutilizar essas animações nos seus próprios blocos — sem necessidade de código.

Como funciona

As animações são controladas por três classes CSS. Adicione-as a qualquer bloco na página inicial em Configurações do bloco → Avançado → Classe(s) CSS adicional(is):

• anim-avatar — um efeito pop divertido com escala e quique. Usado na imagem do técnico, mas funciona em qualquer bloco de imagem.
• anim-pill — a revelação de texto característica. Se o primeiro bloco de texto for um Parágrafo, ele é digitado caractere por caractere. Se for um título, ele sobe e surge gradualmente — digitar um título de várias linhas reservaria toda a altura de antemão e deixaria um balão vazio na tela por um instante.
• anim-buttons — um leve efeito de subida com fade para a linha de chamada para ação, programado para entrar depois que os balões terminarem.

A sequência sempre acontece nesta ordem: pop do avatar → cada bloco anim-pill anima um após o outro (na ordem da página) → botões aparecem com fade. Ela começa quando a seção entra na área visível da tela.

É bom saber

• Apenas na página inicial. O script que controla a sequência carrega apenas na página inicial. Adicionar as classes a blocos em outras páginas não vai animá-los — isso é intencional, para manter o restante do site rápido. (Desenvolvedores podem remover essa restrição is_front_page() no functions.php para alterar esse comportamento.)
• Acessibilidade integrada. Visitantes com “reduzir movimento” ativado nas configurações do sistema veem o conteúdo imediatamente, sem animação. Visitantes sem JavaScript também veem tudo — nada fica oculto.
• Combine à vontade. Você pode usar uma, duas ou todas as três classes. Múltiplos blocos anim-pill funcionam normalmente; eles animam na ordem em que aparecem na página.