A tela Cor e Estilo permite personalizar a aparência do widget de consentimento Axeptio. As alterações são salvas automaticamente e aplicadas na próxima publicação.

No topo da tela, um seletor permite alternar entre o Design clássico e o Novo design, e visualizar cada versão independentemente.

Estilo do botão

Usar um botão personalizado

Por padrão, o botão amarelo Axeptio é exibido. Ao ativar essa opção, você pode substituí-lo por um botão com visual e/ou texto personalizados. Você também pode personalizar o tamanho e a aparência do botão, do visual e do texto.

Opção	Descrição
Tamanho da imagem	Largura da imagem exibida no botão (em px).
Label	Texto exibido no botão.
Altura do botão (Padding Y)	Espaçamento vertical interno do botão (em px).
Largura do botão (Padding X)	Espaçamento horizontal interno do botão (em px).
Tamanho da fonte (Font size)	Tamanho do texto do botão (em px).
Espessura da fonte (Font weight)	Peso da fonte (ex: 400 = normal, 700 = negrito).
Espaçamento entre linhas (Line height)	Altura da linha, sem unidade (ex: 1.25).
Border radius	Arredondamento dos cantos do botão (em px). Um valor alto resulta em um botão em forma de pílula.
Cor do texto	Cor do texto do botão.
Cor de fundo	Cor de fundo do botão.
Usar fundo transparente	Torna o fundo do botão transparente.
Adicionar sombra projetada	Adiciona uma sombra projetada abaixo do botão.

Posição do widget

Por padrão, o banner é exibido na parte inferior esquerda. Mas você pode movê-lo para a direita se preferir.

Deslocamento horizontal do botão (offset X)

Você pode deslocar o botão para a esquerda ou para a direita. Útil para evitar que o botão sobreponha outros elementos da sua interface.

Deslocamento vertical do botão (offset Y)

Você pode deslocar o botão para cima ou para baixo. Útil para evitar que o botão sobreponha outros elementos da sua interface.

Remoção da prevenção de rolagem do navegador em dispositivos móveis

Por padrão, Axeptio controla a rolagem (scroll) da página quando o widget é exibido, para permanecer visível e evitar efeitos de exibição incômodos.

Na maioria das vezes, é conveniente e recomendamos deixar essa opção desativada se você não tiver problemas específicos. Mas em alguns sites, pode ser incômodo. Você pode tentar ativar essa opção se observar os seguintes comportamentos indesejáveis típicos:

impossibilidade de rolar a página, especialmente em dispositivos móveis, onde a rolagem pode ser bloqueada enquanto o banner está exibido
comportamento com elementos do site como menus, pop-ups ou modais

Quando essa opção é ativada, Axeptio não controla mais a rolagem da página e permite que o navegador gerencie o scroll normalmente.

Posição no body da raiz do widget

Define onde no código HTML da página Axeptio insere o widget: no início ou no final da tag <body>.

Por padrão, o widget é inserido no final do <body>. Esse posicionamento é recomendado na maioria dos casos.

No entanto, é possível inserir o widget no início do <body> se você encontrar problemas de compatibilidade com a estrutura do site, alguns estilos CSS globais ou scripts JavaScript. Essa opção é principalmente destinada a casos específicos e geralmente não tem impacto visível para os usuários.

Sobreposição

A sobreposição é um fundo semitransparente exibido atrás do widget Axeptio quando este está aberto. Permite destacar o banner de consentimento e reduzir as distrações relacionadas ao conteúdo da página.

Os parâmetros disponíveis nesta seção permitem apenas personalizar a aparência da sobreposição (opacidade, cores, estilo). O fato de preencher esses valores não ativa por si só a exibição da sobreposição.

Para que a sobreposição seja exibida, um dos seguintes recursos deve estar ativado:

o consent wall contextual, que pode ser adicionado a partir de uma configuração existente
a opção Exibir o widget no centro da tela (como o consent wall), disponível em uma configuração via Integrar ao seu site

As cores da sobreposição (gradiente ou cor sólida) podem ser personalizadas mais abaixo na página, em Cores > Sobreposição.

Opacidade do fundo da sobreposição

Define o nível de transparência do fundo exibido atrás do widget.

O valor esperado é um valor decimal entre 0 e 1, onde:

0 corresponde a um fundo totalmente transparente
1 corresponde a um fundo totalmente opaco

Estilo de preenchimento da sobreposição

Permite escolher o tipo de fundo usado:

Radial: um gradiente centralizado ao redor do widget, com um efeito mais suave e progressivo
Cor sólida: um fundo uniforme em toda a página

Cores

A seção Cores permite personalizar todas as cores usadas pelo widget Axeptio.

Mancha de tinta

A mancha de tinta é o elemento gráfico em forma de círculo colorido visível no fundo das ilustrações do widget. Ao modificá-la, você gera automaticamente uma paleta coerente para todo o widget. Cada cor pode ser ajustada individualmente posteriormente.

Cores básicas

Esses parâmetros permitem definir as cores usadas para elementos gerais do widget:

Opção	Descrição
Principal	Cor dominante do tema, usada para destaques e elementos interativos.
Textos	Cor dos textos padrão.
Títulos	Cor dos títulos.
Fundo dos widgets	Fundo principal do widget.
Fundo dos cards	Fundo dos cards e blocos internos.
Cor de fundo do checkbox desmarcado	Cor dos toggles na posição OFF.
Cor de fundo do checkbox marcado	Cor dos toggles na posição ON.

Botões básicos

Essas opções definem a aparência dos botões secundários (ex: "Rejeitar tudo", "Personalizar"):

Opção	Descrição
Texto dos botões	Cor do texto.
Texto dos botões ao passar o mouse	Cor do texto ao passar o mouse.
Borda dos botões	Cor da borda.
Fundo dos botões	Cor de fundo.
Fundo dos botões ao passar o mouse	Cor de fundo ao passar o mouse.

Botão principal

Esses parâmetros se aplicam especificamente ao botão de ação principal (ex: "Aceitar tudo"). Permitem destacar a ação principal proposta ao usuário.

Opção	Descrição
Texto do botão principal	Cor do texto.
Texto do botão principal ao passar o mouse	Cor do texto ao passar o mouse.
Fundo do botão principal	Cor de fundo.
Fundo do botão principal ao passar o mouse	Cor de fundo ao passar o mouse.

Botão de consentimento

Essas opções controlam a aparência dos botões de consentimento exibidos na lista de fornecedores. Permitem ajustar precisamente a aparência das ações de consentimento e rejeição.

Opção	Descrição
Fundo dos botões de consentimento	Cor de fundo.
Fundo dos botões de consentimento ao passar o mouse	Cor de fundo ao passar o mouse.
Texto dos botões de consentimento	Cor do texto.
Texto dos botões de consentimento ao passar o mouse	Cor do texto ao passar o mouse.
Contorno dos botões de consentimento	Cor da borda.
Contorno dos botões de consentimento ao passar o mouse	Cor da borda ao passar o mouse.

Sobreposição

Esses parâmetros definem as cores usadas para o fundo exibido atrás do widget, quando o estilo de preenchimento é configurado como Radial:

Opção	Descrição
Centro do gradiente da sobreposição	Cor do centro do gradiente.
Exterior do gradiente da sobreposição	Cor do exterior do gradiente.

Estilo do widget

Border Radius (cantos arredondados)

Define o nível de arredondamento aplicado aos cantos do widget, expresso em pixels.

Um valor alto produz cantos mais arredondados, enquanto um valor baixo resulta em uma aparência mais angular.

Border radius dos botões de consentimento

Controla o arredondamento dos botões de consentimento exibidos no widget.

Essa configuração permite harmonizar a aparência dos botões com o estilo geral do site.

Cantos arredondados do botão fechar

Define o arredondamento do botão que permite fechar o widget.

Esse parâmetro é independente das outras configurações de border radius.

Tamanho dos títulos

Define o tamanho dos títulos exibidos no widget, expresso em pixels.

Essa configuração tem um impacto direto na hierarquia visual e na legibilidade do conteúdo.

Tamanho do corpo

Define o tamanho do texto principal do widget, expresso em pixels.

Um tamanho muito pequeno pode prejudicar a legibilidade, especialmente em dispositivos móveis.

Sombra projetada

Permite definir o estilo de sombra aplicado ao widget. A sombra contribui para destacar visualmente o widget do conteúdo da página e para aumentar sua visibilidade.

Sombra padrão: sombra padrão aplicada por Axeptio
Nenhuma: sem sombra
Personalizada: entrada livre de um valor CSS box-shadow

Tipografia

A seção Tipografia permite definir as fontes usadas no widget Axeptio, para títulos e textos.

Essas configurações permitem alinhar a aparência do widget com a tipografia do site.

Fonte dos títulos

Permite definir a fonte usada para os títulos exibidos no widget.

É possível escolher uma fonte Google ou outra fonte inserindo diretamente seu nome de família (font-family).

Se a fonte escolhida não estiver já carregada na página, a opção Deixar Axeptio carregar a fonte no site permite que Axeptio a carregue automaticamente.

Fonte dos textos

Permite definir a fonte usada para os textos do widget, independentemente da dos títulos. Como para os títulos, é possível usar uma fonte Google ou uma fonte personalizada através de seu nome de família.

Se a fonte não estiver já disponível no site, Axeptio pode carregá-la automaticamente através do Google Fonts ativando a opção correspondente.

O carregamento de fontes adicionais pode afetar o desempenho e a conformidade do site e deve ser usado com cuidado.