/* ==========================================================================
BUFFALO DIGITAL — DESIGN SYSTEM (Fase 1)
==========================================================================
Divisão de responsabilidades:
- COR e TIPOGRAFIA vivem no Kit Global do Elementor (Global Colors /
Global Fonts). São editáveis pela interface e expostos pelo Elementor
como --e-global-color-* e --e-global-typography-*. Este arquivo apenas
os apelida com nomes legíveis; NÃO os redefine.
- ESPAÇAMENTO e RAIO não possuem tokens nativos no Elementor. Ficam aqui,
como custom properties, e são a fonte de verdade da escala.
Regras da casa: sem !important, sem overflow-x:hidden, sem hacks de
compensação. Se algo precisar de força bruta para funcionar, a causa está
errada e deve ser corrigida na origem.
========================================================================== */
:root {
/* --- Apelidos legíveis dos tokens do Kit Global (somente leitura) ------
Use estes nomes em CSS custom; o valor real é editado no Elementor. */
--bf-navy-900: var( --e-global-color-secondary, #0f1b31 ); /* fundo profundo / texto sobre claro */
--bf-navy-700: var( --e-global-color-primary, #1d2b50 ); /* superfície principal da marca */
--bf-navy-500: var( --e-global-color-navy500, #2e4671 ); /* botões / CTA */
--bf-blue-400: var( --e-global-color-accent, #5475aa ); /* apoio, pílulas, bordas */
--bf-blue-200: var( --e-global-color-blue200, #8cb3ff ); /* destaque tipográfico sobre navy */
--bf-gray-100: var( --e-global-color-gray100, #d9d9d9 ); /* superfície clara */
--bf-white: var( --e-global-color-text, #ffffff ); /* texto sobre navy */
/* --- Escala de espaçamento -------------------------------------------
Grade de 4 px. Os degraus foram ancorados nos valores que o site já
usava (20 / 30 / 50 / 70 px), e não escolhidos em abstrato. */
--bf-space-3xs: 4px; /* absorve 3px e 5px */
--bf-space-2xs: 8px;
--bf-space-xs: 12px; /* absorve 10px e 15px */
--bf-space-sm: 20px; /* valor já dominante no site */
--bf-space-md: 32px; /* absorve 28px, 30px, 35px, 36px */
--bf-space-lg: 48px; /* absorve 40px e 50px (gap padrão) */
--bf-space-xl: 72px; /* absorve 68px, 70px, 80px */
--bf-space-2xl: 96px;
/* --- Escala de raio ---------------------------------------------------
Cinco degraus cobrem tudo que existe hoje no site. */
--bf-radius-none: 0;
--bf-radius-sm: 8px; /* campos de formulário (absorve 6px e 0/8/8/8) */
--bf-radius-md: 16px;
--bf-radius-lg: 24px; /* absorve o 25px avulso */
--bf-radius-pill: 999px; /* pílulas: menu, estatísticas, cargos */
/* --- Gutters de container --------------------------------------------
Espelham o Kit Global; ficam aqui para uso em CSS custom. */
--bf-gutter-desktop: 20px;
--bf-gutter-tablet: 20px;
--bf-gutter-mobile: 16px;
}
/* ==========================================================================
NORMALIZAÇÃO DE COMPONENTES REPETIDOS
Aplica a escala de raio aos componentes que hoje divergem entre si.
Escopo estreito de propósito: só raio, só nos componentes citados na
auditoria. Nada de redesign.
========================================================================== */
/* Campos de formulário: 6px avulso -> degrau sm da escala. */
.elementor-form .elementor-field-textual,
.elementor-form .elementor-field-group .elementor-field,
.elementor-form select.elementor-field-textual {
border-radius: var( --bf-radius-sm );
}
/* Botão de envio do formulário: alinhado ao mesmo degrau dos campos. */
.elementor-form .elementor-button {
border-radius: var( --bf-radius-sm );
}
/* Consentimento: o texto voltava para baixo da caixa de marcar.
O Elementor põe o como irmãos em linha. O rótulo tem
três linhas no celular e duas no desktop: a primeira começava depois do
quadradinho, e as seguintes voltavam para a margem, passando por baixo
dele. Em duas colunas de verdade, as linhas do texto alinham entre si e o
quadradinho fica ao lado da primeira.
O 2px de recuo no topo centra a caixa de 20px na linha de 24px do texto;
sem ele, flex-start deixa as duas encostadas no topo e desalinhadas. */
.elementor-form .elementor-field-type-acceptance .elementor-field-option {
display: flex;
align-items: flex-start;
gap: var( --bf-space-2xs );
}
.elementor-form .elementor-field-type-acceptance .elementor-field-option input[type='checkbox'] {
flex: 0 0 auto;
margin: 2px 0 0;
}
.elementor-form .elementor-field-type-acceptance .elementor-field-option label {
margin: 0;
}
/* ==========================================================================
ALVO DE TOQUE NO CELULAR
==========================================================================
O site foi montado para mouse, e no celular isso aparece: medido a 390px,
os controles saem menores que os 44px que o dedo pede. Nada aqui muda
aparência; cresce a área que responde ao toque, não o desenho.
menu hambúrguer 33x33, com o traço de 22px dentro
ícones de rede 33x33, com o glifo de 15px dentro
campos do formulário 358x36
caixa de consentir 13x13
telefone e e-mail 344x25 no bloco de contato
Só o menu vale em tablet também, porque é onde ele aparece.
========================================================================== */
/* O traço continua com 22px; o que cresce é o quadrado ao redor dele. */
@media ( max-width: 1024px ) {
.elementor-menu-toggle {
min-width: 44px;
min-height: 44px;
}
}
@media ( max-width: 767px ) {
/* Fundo transparente e glifo de 15px: crescer a caixa para 44 não muda
nada na tela, só dá onde tocar. */
.elementor-social-icons-wrapper .elementor-social-icon {
min-width: 44px;
min-height: 44px;
}
/* Campo de texto do formulário. O :not() é necessário: o mesmo seletor do
Elementor cobre a caixa de marcar, e 44px de altura nela deixaria o
quadradinho deformado. */
.elementor-form .elementor-field-group .elementor-field:not( [type='checkbox'] ):not( [type='radio'] ) {
min-height: 44px;
}
/* A caixa de consentir tinha 13px. O rótulo dela já é clicável e tem 353
por 71, então o toque nunca esteve perdido; o que faltava era enxergar
se está marcada. */
.elementor-form .elementor-field-type-acceptance input[type='checkbox'] {
width: 20px;
height: 20px;
}
/* O botão de enviar ficou com 40px de altura, quatro abaixo do alvo de
toque, e é o controle que fecha o formulário.
O seletor carrega o [class*='elementor-size-'] porque quem declara os
40px é ".elementor-form .elementor-button.elementor-size-sm", do
frontend do Elementor. Sem a terceira classe a regra perde no
desempate e não vale nada. Atributo em vez do nome da classe para
valer em qualquer tamanho de botão, não só no sm. */
.elementor-form .elementor-button[class*='elementor-size-'] {
min-height: 44px;
}
/* Telefone e e-mail do bloco de NAP: são linhas próprias, não links dentro
de uma frase, então ganham altura sem mexer no entrelinhamento de
nenhum parágrafo. */
.bfd-nap-valor {
display: flex;
align-items: center;
min-height: 44px;
}
/* O telefone do rodapé fica sozinho na linha, seguido de , com 21px de altura.
O link do llms.txt fica de fora porque está dentro de uma frase, no
rodapé da ficha. */
.bfd-fatos-ficha dd > a:only-child {
display: inline-block;
padding-block: 11px;
}
}
/* ==========================================================================
RECUO LATERAL: UMA VEZ SÓ, NO CONTAINER DE FORA
==========================================================================
O Kit define 20px de recuo lateral como padrão de container (16px no
celular). O Elementor aplica esse padrão a todo container, inclusive aos que
estão dentro de outro, e o de fora já resolve o recuo da página pela caixa
de 1140px. Resultado: container aninhado empurrava o conteúdo 20px para
dentro uma segunda vez.
Foi a causa de todo desalinhamento lateral que medi a 1440px: o bloco
Contato começava em 163 e a página em 143; o subtítulo de Quem somos em 163;
o H1 do Blog em 184; a ficha de Fatos em 184; os dois blocos de vídeo da
home em 163.
Aqui só o valor PADRÃO é zerado, e apenas para container aninhado. Quem tem
recuo declarado de propósito continua com ele, porque o valor declarado vem
de uma regra mais específica do próprio Elementor.
========================================================================== */
.e-con .e-con {
--padding-left: 0px;
--padding-right: 0px;
}
/* ==========================================================================
TELAS MONTADAS PELO TEMA
==========================================================================
Busca, 404, arquivo de categoria e artigo individual não passam pelo
Elementor: quem monta é o Hello Elementor. O Kit define o fundo da página
(#0F1B31) e não define cor de texto, então nessas telas valia o padrão do
reset.css do tema. Medido a 1440px:
corpo #333 sobre #0F1B31, contraste 1,36:1 — texto invisível
links #CC3366, magenta do reset.css do Hello Elementor, cor que não
aparece em nenhum outro lugar do site
família -apple-system, enquanto o resto do site é Archivo
medida parágrafo de ponta a ponta em 1140px, perto de 150 letras por
linha
404 área de conteúdo com 24px de altura, uma linha solta entre o
header e o rodapé
busca 14px entre um resultado e o próximo
celular 10px de recuo lateral, contra os 16px do resto do site
Nenhum valor novo entra aqui: o Kit publica as próprias variáveis no body
(elementor-kit-5), então cor e família saem delas, e o resto sai dos tokens
da Fase 1.
O escopo é body:not(.elementor-page) porque as páginas do Elementor trazem
essa classe e já resolvem cor e tipografia por conta própria.
========================================================================== */
body:not( .elementor-page ) .site-main {
color: var( --e-global-color-text, var( --bf-white ) );
font-family: var( --e-global-typography-text-font-family, Archivo ), sans-serif;
padding-block: var( --bf-space-xl ) var( --bf-space-2xl );
}
/* Azul de destaque que a marca já usa sobre navy: 8,3:1 de contraste, contra
3,5:1 do magenta que vinha do tema. */
body:not( .elementor-page ) .site-main a {
color: var( --bf-blue-200 );
}
/* Medida de leitura. Sem isto a linha passa de 140 letras em tela cheia. */
body:not( .elementor-page ) .site-main p,
body:not( .elementor-page ) .site-main li {
max-width: 68ch;
}
/* Um resultado por bloco, com respiro entre eles. */
/* O título da busca e do arquivo estava escondido.
O Kit do Elementor tem a opção de esconder o título da página, e ela sai
como em toda página do site.
Nas telas do Elementor isso está certo: o título é desenhado dentro da
própria tela. Nas telas que o tema monta não há outro título, e o
resultado era uma página de busca que não dizia o que foi buscado.
Medido: h1 "Resultados da pesquisa por: roteiro" com display none e 0px
de altura. O seletor daqui vence por especificidade, sem !important.
O tamanho é um degrau abaixo do H1 das páginas: é uma tela de serviço,
não a entrada do site. */
body:not( .elementor-page ) .site-main h1.entry-title {
display: block;
margin-block: 0 var( --bf-space-md );
color: var( --bf-white );
font-size: clamp( 1.75rem, 4vw, 2.5rem );
line-height: 1.1;
text-wrap: balance;
}
body:not( .elementor-page ) .site-main h1.entry-title span {
color: var( --bf-blue-200 );
}
body:not( .elementor-page ) .site-main article {
margin-block-end: var( --bf-space-lg );
}
/* A imagem do resultado de busca estava solta.
O tema pai envolve a miniatura num e deixa os dois em linha. Medido:
o link ficava com 358 por 17px, a altura de uma linha de texto, enquanto
a imagem dentro dele desenhava 300px e transbordava. O clique valia só na
faixa de 17px, e sobrava a folga de linha de base embaixo da imagem.
Em bloco, o link passa a ter o tamanho da imagem. E a proporção fixa é a
mesma do cartão do blog: sem ela, um resultado com foto 16/9 vinha com
202px de altura e o seguinte, com imagem quase quadrada, com 300px, e a
lista ficava com degraus de altura sem motivo. */
/* A miniatura acompanha a medida do texto, 68ch. Sem isso ela ia aos 1140px
da coluna ao lado de um parágrafo de 623: a imagem virava o assunto da
tela, e o resultado, legenda dela. */
body:not( .elementor-page ) .site-main article > a {
display: block;
max-width: min( 100%, 68ch );
}
body:not( .elementor-page ) .site-main article img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: var( --bf-radius-md );
}
/* O título de cada resultado vinha do reset do tema, com os 2rem que o
navegador dá a um h2. Ficava em 32px contra os 28px do título da página:
o resultado lia como mais importante que a pergunta. Um degrau abaixo. */
body:not( .elementor-page ) .site-main article :is( h1, h2 ).entry-title {
font-size: clamp( 1.375rem, 2.6vw, 1.75rem );
}
body:not( .elementor-page ) .site-main article :is( h1, h2, h3 ) {
line-height: 1.2;
margin-block: 0 var( --bf-space-2xs );
}
/* A 404 e o arquivo vazio ficavam com uma faixa de conteúdo de 24px. A altura
mínima não acrescenta nada na tela: só impede que a mensagem fique
esmagada entre o header e o rodapé. */
body.error404 .site-main,
body.search-no-results .site-main,
body:not( .elementor-page ) .site-main .no-results {
min-height: 40vh;
}
@media ( max-width: 767px ) {
body:not( .elementor-page ) .site-main {
padding-inline: var( --bf-gutter-mobile );
padding-block: var( --bf-space-lg ) var( --bf-space-xl );
}
}
/* ==========================================================================
Navegação por teclado
Entra junto com os marcos de página, como o bilhete anterior previa.
========================================================================== */
/* Link de pular o menu. Fora da tela até receber foco, e nunca com display
none: elemento escondido assim não recebe foco e o link não funcionaria. */
.bfd-pular {
position: absolute;
left: var( --bf-space-sm );
top: calc( var( --bf-space-sm ) * -1 );
z-index: 9999;
transform: translateY( -120% );
padding: var( --bf-space-sm ) var( --bf-space-md );
background: var( --bf-navy-900 );
color: var( --bf-white );
font-family: inherit;
font-size: 0.9375rem;
line-height: 1.2;
text-decoration: none;
border-radius: var( --bf-radius-sm );
}
.bfd-pular:focus {
top: var( --bf-space-sm );
transform: translateY( 0 );
}
/* O recebe foco pelo link acima e não deve ganhar contorno por isso:
quem clicou no link já sabe onde está. O contorno do teclado continua
valendo para todo o resto. */
#conteudo:focus {
outline: none;
}
/* Foco visível onde o navegador não dá um bom padrão sobre navy. Só em
navegação por teclado, para não aparecer no clique de mouse. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not( [tabindex="-1"] ):focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}