Site - Paleta de Cores

O que é

A paleta de cores e o nucleo da identidade visual do site publico do empresa. A cor primaria aparece em botoes principais ("Reservar", "Ver detalhes"), links de texto, badges, bordas de cards e icones de destaque. A cor secundaria combina com a primaria em gradientes - principalmente na navbar (quando o estilo "Gradiente" esta ativo) e em selos especiais. As duas juntas formam a "cara" do site.

Você normalmente cai nesta secao logo após configurar o template e a logo, ou quando precisa atualizar o site para uma campanha sazonal/rebranding. Toda mudanca aplica somente ao site publico - a area administrativa não e afetada.

Como usar

1. Va em Vitrine > Aparencia no sidebar.
2. Role ate o card Paleta de Cores (icone roxo de palheta, abaixo do card "Tipografia").
3. Clique em uma das paletas pre-definidas no grid. O canto superior direito mostra um pequeno gradiente e o nome da paleta selecionada.
4. Se quiser ver mais opções alem das primeiras visiveis, clique em Ver todas as N paletas logo abaixo do grid.
5. Observe o card Preview mais abaixo: a navbar, os cards de excursão e os botoes ja reagem em tempo real com a paleta nova.
6. Use os botoes Claro / Escuro no canto superior direito do preview para conferir os dois modos antes de salvar.
7. Confirme em Salvar Aparencia no rodape do formulario. Após salvar, você e redirecionado de volta para a mesma página com a mensagem "Cores salvas com sucesso!".

Casos especiais

Paleta "Personalizada"

Se você ja tem cor_primaria e cor_secundaria salvas no banco mas a chave de paleta não bate com nenhuma das pre-definidas, o indicador no topo do card mostra Personalizada. As cores hex continuam sendo enviadas no formulario (campos cor_primaria e cor_secundaria hidden) e o sistema preserva esses valores ate que você escolha uma paleta nomeada.

Paleta selecionada vira a primeira

Ao abrir a página, a paleta que esta salva no momento e movida para o início do grid (exceto "Azul Oceano", que ja e a primeira por padrão). Isso ajuda a identificar rapidamente qual paleta esta ativa sem precisar expandir o grid inteiro.

Estilo de navbar Gradiente x Clean

A cor secundaria so e visualmente perceptivel quando o Estilo do Menu (card abaixo) esta em Gradiente. Se você escolher Clean, a navbar fica branca (modo claro) ou escura (modo escuro) e usa somente a cor primaria nos textos e icones de destaque. A cor secundaria continua salva e e usada em gradientes de badges e selos.

Tela escura informativa para template forcado

Se o template atual e exclusivo de modo escuro (modern, events) ou exclusivo de modo claro (modern-light), o card Modo do Site exibe um aviso violeta avisando que o modo do site será forcado. Nesse caso a escolha da paleta continua livre, mas o modo do site não podera ser trocado nesta tela.

Erros comuns e como resolver

• "A cor primaria deve ser um código hexadecimal valido (ex: #3b82f6)."
  • Causa: o campo cor_primaria foi enviado fora do formato #RRGGBB (6 digitos, com # no início). Acontece em geral quando alguem edita o hidden input manualmente via DevTools. Solucao: recarregar a página e escolher uma paleta novamente.
• "A cor secundaria deve ser um código hexadecimal valido."
  • Mesma causa anterior aplicada a cor secundaria. Solucao: idem.
• As cores não mudam após salvar - Causa: cache de CSS do navegador ou CDN. Solucao: forcar refresh do site publico (Ctrl+Shift+R) e, se persistir, limpar o cache da sua empresa.
• Cor secundaria não aparece visivelmente - Causa: o estilo do menu esta em Clean e a secundaria so e usada em gradientes da navbar. Solucao: trocar o Estilo do Menu para Gradiente no card abaixo da paleta.

Onde encontrar

• URL: /admin/aparencia
• Caminho no menu: Vitrine > Aparencia (rolar ate o card "Paleta de Cores")
• Permissão necessária: ver as configurações (ver) e editar as configurações (salvar)
• Módulo necessário: nenhum (esta secao faz parte da configuração base do site)

Veja também

• Aparencia do Site - visao geral da página com todas as secoes (tipografia, paleta, estilo de menu, modo claro/escuro, preview)
• Identidade Visual - logotipo, favicon e cores que aparecem junto da paleta
• Template do Site - trocar o tema base que define o comportamento de modo claro/escuro
• Menu do Site - ordenar e ocultar itens do menu cuja cor segue a paleta escolhida