/**
* main.css — design tokens e componentes compartilhados por todas as
* páginas próprias do projeto (header, footer, switches, etc.).
*
* Portado fielmente dos mockups em .specs/mockups/ (decisão de design já
* tomada em sessão separada — não é uma reinterpretação). Cada página
* própria (anuncio.css, busca.css, single-veiculo.css) traz só os estilos
* que são específicos dela, seguindo a mesma estrutura autocontida dos
* mockups originais.
*/
:root {
--preto: #121214;
--preto-2: #1c1c1f;
--vermelho: #D81324;
--vermelho-escuro: #8C0D1A;
--vermelho-tinta: #FDEBEC;
--verde: #1D7A46;
--verde-tinta: #E9F5EE;
--amarelo: #8C5B0B;
--amarelo-tinta: #FBF0DA;
--grafite: #4A4A4F;
--grafite-claro: #7A7A80;
--fundo: #F5F4F2;
--card: #FFFFFF;
--linha: #E4E2DD;
}
body.feirao-tema * {
box-sizing: border-box;
}
body.feirao-tema {
font-family: 'Inter', sans-serif;
background: var(--fundo);
color: #1A1A1C;
line-height: 1.5;
margin: 0;
}
/* 2026-09-18: `overscroll-behavior: contain` sitewide (em html e aqui)
foi adicionada numa tentativa de corrigir o "pulo" da stickbar no
swipe de fotos do single-veículo, suspeitando (errado) de um efeito
rubber-band nativo. Causa real depois confirmada: era a animação de
entrada da foto (transform+opacity em #triptico, já removida — ver
single-veiculo.css/BACKLOG.md), não overscroll nenhum. Revertida —
achado colateral do Duvanir: ela desligava o pull-to-refresh nativo
sitewide (a seta de atualizar ao puxar a página pra baixo no topo),
que usa exatamente esse mesmo mecanismo de overscroll. */
.feirao-mono {
font-family: 'IBM Plex Mono', monospace;
}
/* ===== Header — igual em todas as páginas próprias (listagem, single, meus-anúncios) ===== */
header.principal {
background: #fff;
border-bottom: 1px solid var(--linha);
padding: 0 24px;
/* 2026-09-04, pedido do Duvanir: fica fixo no topo ao rolar a página.
z-index 50 — acima do conteúdo normal (a maioria das páginas fica
entre 1-10), mas abaixo de toast/modal (60/900/1000+ em outros
arquivos), que devem continuar por cima mesmo com o header fixo. */
position: sticky;
top: 0;
z-index: 50;
}
.header-linha {
max-width: 1440px;
margin: 0 auto;
height: 64px;
display: flex;
align-items: center;
gap: 36px;
}
.logo {
font-family: 'Oswald', sans-serif;
font-weight: 700;
font-size: 22px;
letter-spacing: 0.2px;
color: var(--preto);
text-transform: uppercase;
flex-shrink: 0;
text-decoration: none;
display: flex;
align-items: center;
}
/* Logo em imagem (feirao_exibir_logo(), Customizer > Identidade do
Site) — quando não configurada, o só tem o texto "feirao.autos"
de sempre, essas regras ficam inertes. */
.logo img {
display: block;
height: 40px;
width: auto;
max-width: 200px;
object-fit: contain;
}
.logo span {
color: var(--vermelho);
}
.logo-loja {
display: flex;
align-items: center;
}
.logo-loja img {
display: block;
height: 52px;
width: auto;
max-width: 280px;
object-fit: contain;
}
.menu-topo {
display: flex;
gap: 26px;
flex: 1;
}
.menu-topo a {
color: #333;
text-decoration: none;
font-size: 14px;
display: flex;
align-items: center;
gap: 4px;
}
.menu-topo a svg {
width: 13px;
height: 13px;
opacity: 0.6;
}
/* Hambúrguer + drawer off-canvas do menu público (2026-09-13, achado no
audit de responsividade) — mesmo padrão do painel logado (painel.css/
painel.js), autocontido aqui porque o header público não compartilha
CSS/JS com o shell do painel. Escondido por padrão (desktop); vira
`flex` e o `.menu-topo` vira drawer só abaixo do breakpoint mobile. */
.header-hamburguer {
display: none;
width: 36px;
height: 36px;
align-items: center;
justify-content: center;
background: none;
border: none;
padding: 0;
flex-shrink: 0;
cursor: pointer;
color: var(--preto);
}
.header-hamburguer svg {
width: 24px;
height: 24px;
}
.header-overlay[hidden] {
display: none;
}
.header-direita {
display: flex;
align-items: center;
gap: 18px;
flex-shrink: 0;
}
.btn-anunciar {
background: var(--vermelho);
color: #fff;
text-decoration: none;
font-size: 13.5px;
font-weight: 600;
padding: 9px 16px;
border-radius: 3px;
}
.btn-anunciar:visited {
color: #fff; /* sem isso, a:visited genérica (style.css) vencia por especificidade — texto ficava roxo num botão vermelho */
}
.btn-anunciar:hover,
.btn-anunciar:focus {
background: var(--vermelho-escuro);
color: #fff;
}
/* Menu de conta do header público (2026-09-06, Webmotors-style) — ícone
de perfil que expande um painel com Entrar/Criar conta (deslogado) ou
Minha Conta/Meus Anúncios/Sair (logado). Substitui o antigo botão
vermelho "Anuncie grátis" (não existe mais anúncio grátis) + os links
soltos "Entrar"/"Minha Conta"/"Sair". */
.conta-menu {
position: relative;
}
.conta-menu-trigger {
display: flex;
align-items: center;
gap: 6px;
background: none;
border: 1px solid var(--linha);
border-radius: 20px;
padding: 6px 12px 6px 8px;
color: #333;
font-size: 13.5px;
font-family: 'Inter', sans-serif;
cursor: pointer;
}
.conta-menu-trigger:hover,
.conta-menu-trigger[aria-expanded="true"] {
border-color: var(--grafite-claro);
}
.conta-menu-trigger svg:first-child {
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--grafite);
}
.conta-menu-nome {
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.conta-menu-seta {
width: 9px;
height: 9px;
flex-shrink: 0;
color: var(--grafite-claro);
transition: transform 0.15s ease;
}
.conta-menu-trigger[aria-expanded="true"] .conta-menu-seta {
transform: rotate(180deg);
}
.conta-menu-painel {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 55;
min-width: 190px;
background: #fff;
border: 1px solid var(--linha);
border-radius: 6px;
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
padding: 6px;
flex-direction: column;
gap: 2px;
}
/* [hidden] nativo do navegador (display:none) só vence um display:flex
incondicional de autor se a regra for escopada assim — mesmo bug já
corrigido na faixa de cookies (institucional.css) nesta sessão:
ORIGEM da cascata (autor > user-agent) decide antes da especificidade,
um display:flex direto em .conta-menu-painel sempre venceria [hidden]. */
.conta-menu-painel:not([hidden]) {
display: flex;
}
.conta-menu-painel a {
display: block;
padding: 9px 10px;
border-radius: 4px;
color: #1A1A1C;
text-decoration: none;
font-size: 13.5px;
}
.conta-menu-painel a:hover {
background: var(--fundo);
}
.conta-menu-divisor {
height: 1px;
background: var(--linha);
margin: 4px 2px;
}
.conta-menu-sair {
color: var(--vermelho-escuro) !important;
}
.conta-menu-destaque {
background: var(--vermelho);
color: #fff !important;
font-weight: 600;
text-align: center;
}
.conta-menu-destaque:hover {
background: var(--vermelho-escuro);
}
@media (max-width: 860px) {
.header-linha {
gap: 16px;
}
.header-hamburguer {
display: flex;
}
.menu-topo {
position: fixed;
top: 0;
left: 0;
width: 280px;
max-width: 85vw;
height: 100vh;
height: 100dvh;
z-index: 61;
background: #fff;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 76px 8px 24px;
margin: 0;
transform: translateX(-100%);
transition: transform 0.25s ease;
overflow-y: auto;
box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
}
body.header-menu-aberto .menu-topo {
transform: translateX(0);
}
.menu-topo a {
padding: 13px 12px;
font-size: 15px;
border-bottom: 1px solid var(--linha);
}
.header-overlay:not([hidden]) {
display: block;
position: fixed;
inset: 0;
background: rgba(18, 18, 20, 0.5);
z-index: 60;
}
.conta-menu-nome {
max-width: 70px;
}
}
/* ===== Footer — 2026-09-04, fiel a footer-mockup.html (era 1 linha só,
ver footer.php pro racional completo da reescrita) =====
2026-09-19: .footer-col span (telefone/endereço, footer.php da coluna
"Contato" do mini-site) não tinha regra própria — só .footer-col a era
estilizado, então esses 2 valores ficavam com a tipografia padrão do
navegador (maior, cor diferente) ao lado de WhatsApp/email () na
MESMA coluna. Achado revisando tipografia do rodapé a pedido do Duvanir
(item 1.19: "revise toda a tipografia... tem coisa diferente"). */
footer.feirao-footer {
background: var(--preto);
color: rgba(255, 255, 255, 0.65);
padding: 44px 0 22px;
margin-top: 40px;
}
.footer-wrap {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 30px;
margin-bottom: 30px;
}
.footer-brand {
display: flex;
align-items: center;
gap: 8px;
font-weight: 800;
font-size: 16px;
color: #fff;
margin-bottom: 10px;
text-decoration: none;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
}
/* Logo real (feirao_exibir_logo(), Customizer > Identidade do Site) —
preto/vermelho no arquivo original, ilegível no fundo escuro do
rodapé. 2026-09-04: era filter:brightness(0) invert(1) — o Duvanir
testou e o logo virou um quadro branco sólido (o arquivo real não tem
fundo transparente, então o filtro apagou o desenho junto com o fundo).
Trocado por um "selo" branco por trás da imagem — funciona com
qualquer logo, transparente ou não, sem depender de como o arquivo foi
exportado. */
.footer-brand img {
display: block;
/* 2026-09-04: era 24px, depois 38px — Duvanir ainda achou pequeno.
Aumentado bem mais desta vez (52px) pra ficar inequívoco. */
height: 52px;
width: auto;
max-width: 280px;
object-fit: contain;
background: #fff;
padding: 10px 16px;
border-radius: 8px;
}
/* 2026-09-18: footer do mini-site (footer.php) — fallback pra loja sem
logo cadastrado (raro, mas o campo `logo` não é obrigatório em
acf-fields.php). Mesma tipografia de .footer-brand, só que texto puro
em vez de imagem com selo branco. */
.footer-nome-loja {
font-weight: 800;
font-size: 16px;
color: #fff;
margin: 0 0 10px;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
}
footer.feirao-footer p {
font-size: 12.5px;
line-height: 1.6;
max-width: 280px;
margin: 0;
text-align: left;
}
.footer-col h5 {
font-size: 12px;
font-weight: 700;
color: #fff;
margin: 0 0 12px;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.footer-col a,
.footer-col span {
display: block;
font-size: 12.5px;
margin-bottom: 9px;
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
}
.footer-col a:hover {
color: #fff;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 18px;
font-size: 11.5px;
color: rgba(255, 255, 255, 0.4);
text-align: left;
}
.footer-bottom a {
color: rgba(255, 255, 255, 0.6);
}
.footer-bottom a:hover {
color: #fff;
}
@media (max-width: 700px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
}
}
/* ===== Card de loja (template-parts/card-loja.php) — sitewide desde
2026-09-04, reaproveitado por front-page.php ("Lojas em destaque") E
archive-loja.php (/lojas/, novo). Morava só em home.css antes de
archive-loja.php existir. ===== */
.lojas-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.loja-card {
background: var(--card);
border: 1px solid var(--linha);
border-radius: 10px;
overflow: hidden;
text-decoration: none;
color: inherit;
display: block;
transition: box-shadow 0.15s ease;
}
.loja-card:hover {
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}
.loja-banner {
height: 88px;
position: relative;
background: var(--fundo);
}
.loja-banner img:not(.loja-logo-img) {
width: 100%;
height: 100%;
object-fit: cover;
}
.loja-logo {
position: absolute;
bottom: -22px;
left: 16px;
width: 52px;
height: 52px;
border-radius: 11px;
background: var(--preto);
color: #fff;
border: 3px solid var(--card);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Oswald', sans-serif;
font-weight: 700;
font-size: 12px;
}
.loja-logo-img {
/* object-fit: cover cortava logos não-quadrados (a maioria — texto +
ícone lado a lado) pra preencher o quadrado 52x52, mostrando só um
recorte do meio ilegível (achado ao vivo, 2026-09-14, auditoria
mobile da home). contain mostra o logo inteiro, encolhido pra caber
— fundo branco cobre as barras de letterbox que sobram nos logos que
não são quadrados (a maioria já tem fundo branco próprio, então
funde sem borda visível). */
object-fit: contain;
background: #fff;
}
.loja-body {
padding: 32px 16px 16px;
}
.loja-body .l-name {
font-size: 14.5px;
font-weight: 800;
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 4px;
color: var(--preto);
}
.loja-body .l-status {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--verde);
flex-shrink: 0;
}
.loja-body .l-meta {
font-size: 12px;
color: var(--grafite-claro);
margin-bottom: 10px;
}
.loja-body .l-count {
font-size: 12px;
font-weight: 700;
color: var(--vermelho);
}
@media (max-width: 720px) {
.lojas-grid {
grid-template-columns: 1fr;
}
}
/* ===== Combobox pesquisável (Marca/Modelo) — sitewide desde 2026-09-04,
movido de anuncio.css pra cá: js/combobox-pesquisavel.js
(window.feiraoTornarPesquisavel()) passou a ser reaproveitado também no
filtro de Marca/Modelo de /veiculos/ (archive-veiculo.php), não só no
cadastro de veículo. Combobox por cima do