/* ==========================================================================
RS Carros — Design System
========================================================================== */
/* --------------------------------------------------------------------------
[hidden] tem de ganhar de qualquer display nosso.
A regra do navegador para [hidden] é de origem inferior à nossa folha, e
perde para QUALQUER `display` escrito aqui. Foi o mesmo bug três vezes:
.check o filtro de opcionais dizia "5 encontrados" e não escondia
.grupo-opcional grupos sem resultado continuavam abertos
.status as duas fotos do anúncio mostravam o selo "Capa"
Nos três casos o JavaScript estava certo, o `hidden` estava lá, e a tela
mostrava outra coisa. Uma linha resolve a classe inteira de erro — e é
por isso que o !important, que em geral não se usa aqui, se justifica.
-------------------------------------------------------------------------- */
[hidden] { display: none !important; }
:root {
/* ======================================================================
PALETA — RS Carros
----------------------------------------------------------------------
As dez cores da paleta entram exatamente como especificadas. As três
que começam com --brand-texto, --green-texto e --gold-texto NÃO estão
na paleta: são escurecimentos das mesmas cores, usados só onde o texto
é pequeno e o contraste da cor original reprovaria a WCAG AA.
Onde cada uma vale:
#FF5603 preenchimento, ícone, borda, selo 3.19 — ok para UI
#C43F00 a mesma cor quando vira TEXTO ou link 5.17 — passa AA
#171717 rótulo dentro do botão laranja 5.62 — passa AA
O botão primário mantém o laranja da marca no fundo e usa o preto da
própria paleta no rótulo: nenhuma cor nova, e a leitura funciona no sol.
====================================================================== */
/* Neutros — da paleta */
--surface: #FFFFFF; /* Fundo principal */
--bg: #F7F7F7; /* Fundo secundário */
--line: #E5E5E5; /* Bordas */
--line-soft: #F0F0F0;
--text: #171717; /* Texto principal */
--muted: #666666; /* Texto secundário */
--muted-2: #909090;
/* Escuros para faixas e menus */
--ink: #171717;
--ink-2: #212121;
--ink-3: #2E2E2E;
/* Marca */
--brand: #FF5603; /* Principal / CTA */
--brand-600: #D94700; /* Hover principal */
--brand-700: #B33A00;
--brand-soft: #FFF0E8; /* Destaque suave */
/* O laranja quando é TEXTO. Fora da paleta de propósito: #FF5603 dá 3.19
sobre branco, e link não pode ficar abaixo de 4.5. */
--brand-texto: #C43F00;
/* Sobre o botão laranja. Não é branco: branco sobre #FF5603 dá 3.19. */
--sobre-brand: #171717;
/* Apoio */
--green: #16A34A; /* Sucesso */
--green-texto: #15803D; /* o mesmo verde legível em texto pequeno */
--green-soft: #E9F7EF;
--red: #DC2626; /* Erro / alerta */
--red-soft: #FEECEC;
--gold: #F59E0B;
--gold-texto: #A15C07;
--gold-soft: #FEF6E7;
--blue: #2563EB;
/* Forma */
--r-sm: 8px;
--r: 12px;
--r-lg: 18px;
--r-xl: 26px;
--sh-1: 0 1px 2px rgba(23, 23, 23, .06), 0 1px 3px rgba(23, 23, 23, .04);
--sh-2: 0 4px 8px -2px rgba(23, 23, 23, .08), 0 2px 4px -2px rgba(23, 23, 23, .04);
--sh-3: 0 12px 24px -6px rgba(23, 23, 23, .12), 0 4px 8px -4px rgba(23, 23, 23, .06);
--sh-4: 0 24px 48px -12px rgba(23, 23, 23, .18);
--ease: cubic-bezier(.16, 1, .3, 1);
/* Cores de estado — badges, alertas e gráficos das três aplicações.
O par é sempre "texto legível" + "fundo suave": o --st-ok é usado como
texto sobre --st-ok-bg, então vale o tom escurecido, não o da paleta. */
--st-ok: #15803D; --st-ok-bg: #E9F7EF;
--st-warn: #A15C07; --st-warn-bg: #FEF6E7;
--st-err: #B91C1C; --st-err-bg: #FEECEC;
--st-info: #1D4ED8; --st-info-bg: #E7EEFE;
--st-neutral: #666666; --st-neutral-bg: #F0F0F0;
}
/* ------------------------------- Reset ---------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: Inter, "Segoe UI", system-ui, Arial, sans-serif;
font-size: 15px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, select, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -.02em; line-height: 1.15; font-weight: 700; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.ic { width: 18px; height: 18px; stroke-width: 2; flex: none; }
.ic-sm { width: 15px; height: 15px; }
.ic-lg { width: 22px; height: 22px; }
.ic-xl { width: 28px; height: 28px; }
.container { width: min(1240px, calc(100% - 40px)); margin-inline: auto; }
/* Visível só para leitor de tela. */
.so-leitor {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ------------------------------ Botões ---------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px;
padding: 0 20px;
border: 1px solid transparent;
border-radius: var(--r);
font-size: 14px;
font-weight: 600;
letter-spacing: -.01em;
white-space: nowrap;
transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s, border-color .2s;
}
.btn:active { transform: translateY(1px); }
/* Botão travado — o "Aguarde 42s" do contador, e qualquer outro disabled.
Sem isto ele continuava laranja e cheio de brilho: a pessoa clicava
achando que ia funcionar, não acontecia nada, e a conclusão era que o
site tinha travado. */
.btn:disabled,
.btn[disabled] {
opacity: .5;
box-shadow: none;
cursor: not-allowed;
transform: none;
}
/* O rótulo é escuro, não branco. Branco sobre #FF5603 dá 3.19 de contraste e
reprova a WCAG AA — no botão mais clicado do site, e justamente para quem
está no celular sob sol. O #171717 é o "Texto principal" da própria
paleta e dá 5.62: nenhuma cor nova entra, e a marca continua inteira no
fundo. Sem gradiente: ele empurraria parte do botão para um laranja mais
escuro e o contraste passaria a variar dentro do mesmo elemento. */
.btn-primary {
background: var(--brand);
color: var(--sobre-brand);
box-shadow: 0 1px 2px rgba(179, 58, 0, .25), 0 6px 16px -6px rgba(255, 86, 3, .45);
}
/* O rótulo continua escuro no hover: 4.14 contra os 5.62 do estado parado.
Fica um pouco abaixo do ideal, mas é o estado transitório sob o cursor — e
trocar a cor do texto no hover faria o rótulo piscar de preto para branco a
cada passada do mouse, que é pior de ler que os 0,4 de contraste. */
.btn-primary:hover {
background: var(--brand-600);
box-shadow: 0 2px 4px rgba(179, 58, 0, .3), 0 10px 24px -8px rgba(255, 86, 3, .55);
}
/* ATENÇÃO: o contorno é branco — serve só sobre fundo ESCURO (a capa da
revenda, o bloco de planos, as páginas de erro). Em fundo claro use
.btn-ghost, senão o rótulo some. */
.btn-outline {
background: transparent;
border-color: rgba(255, 255, 255, .22);
color: #fff;
}
.btn-outline:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .38); }
.btn-ghost {
background: var(--surface);
border-color: var(--line);
color: var(--text);
box-shadow: var(--sh-1);
}
.btn-ghost:hover { border-color: var(--muted-2); }
.btn-lg { height: 52px; padding: 0 28px; font-size: 15px; border-radius: 14px; }
.btn-block { width: 100%; }
/* --------------------- Primitivos de formulário -------------------------- */
/* Usados pelo site, pelo painel e pelo backoffice. */
.field {
width: 100%;
height: 40px;
padding: 0 12px;
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: var(--surface);
font-size: 14px;
transition: border-color .16s, box-shadow .16s;
}
.field::placeholder { color: var(--muted-2); }
.field:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255, 86, 3, .1); }
textarea.field { height: auto; padding: 12px; resize: vertical; min-height: 96px; }
select.field {
appearance: none; -webkit-appearance: none; cursor: pointer;
padding-right: 32px;
background-image: url("data:image/svg+xml;utf8, E para : o gatilho do menu do usuário é um botão, e
sem zerar aqui ele herdava o estilo do navegador — fundo cinza claro e
borda preta de 2px no meio do cabeçalho escuro. */
.header-link {
display: inline-flex; align-items: center; gap: 7px;
height: 40px; padding: 0 12px;
border: 0; border-radius: 10px;
background: none;
font-family: inherit; font-size: 14px; font-weight: 500;
color: #CBD5E1;
cursor: pointer;
transition: background .18s, color .18s;
}
/* Laranja no hover: é a cor da casa, e o cabeçalho escuro dá contraste de
sobra. O rótulo vira escuro junto — branco sobre #FF5603 dá 3.19. */
.header-link:hover,
.header-link[aria-expanded="true"] { background: var(--brand); color: var(--sobre-brand); }
.header-link:hover .ic,
.header-link[aria-expanded="true"] .ic { color: var(--sobre-brand); }
.header-link .count {
min-width: 18px; height: 18px; padding: 0 5px;
display: grid; place-items: center;
border-radius: 99px;
background: var(--brand); color: #fff;
font-size: 11px; font-weight: 700;
}
.header-divider { width: 1px; height: 24px; background: rgba(255, 255, 255, .14); margin: 0 4px; }
.nav-toggle { display: none; width: 42px; height: 42px; border: 0; border-radius: 10px; background: rgba(255,255,255,.09); color: #fff; place-items: center; }
/* -------------------------------- Hero ---------------------------------- */
/* ------------------------------ Hero / mídia ---------------------------- */
/* O topo deixou de ser um card sobre a foto de um veículo: agora é a arte
que o anunciante enviou, mostrada inteira. Nada de texto por cima — o
texto está dentro da imagem, e é ele que a loja controla. */
.hero {
position: relative;
background: var(--ink);
overflow: hidden;
/* O cartão de busca NÃO sobe mais por cima da arte. O espaço é vendido:
tapar um pedaço do que a revenda pagou para ganhar 60px de página é
cobrar por uma coisa e entregar outra.
A variável fica, com valor zero, porque os controles do carrossel se
apoiam nela — e porque um dia pode existir um lugar onde a sobreposição
faça sentido. */
--busca-sobe: 0px;
}
/* Altura pela PROPORÇÃO da arte, não por um valor fixo: assim a imagem
aparece completa em qualquer largura, sem corte e sem faixa preta. */
.hero-viewport {
position: relative;
/* width: 100% é obrigatório junto com max-height. Sem ele o navegador
mantém a proporção encolhendo a LARGURA quando a altura estoura o
limite: em telas largas sobravam faixas pretas nas laterais, e no
celular a caixa ficava mais larga que a tela e empurrava a página
inteira para o lado. Com largura fixa em 100%, o limite de altura
apenas corta a arte pelo object-fit, que é o que se espera. */
width: 100%;
/* 1920x480. Encolheu um degrau em relação aos 560 originais porque o
cartão de busca saiu de cima da arte: o que ela perde em altura, ela
ganha em não ter mais um retângulo branco tapando o rodapé da peça. */
aspect-ratio: 1920 / 480;
max-height: 520px;
}
.hero-slide {
position: absolute; inset: 0;
display: block;
opacity: 0;
transition: opacity .7s var(--ease);
pointer-events: none;
}
.hero-slide.active { opacity: 1; pointer-events: auto; }
.hero-slide picture,
.hero-slide img {
display: block;
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
}
/* Contorno visível ao navegar por teclado: o slide inteiro é o link. */
.hero-slide:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
/* Esmaecimento preto nas laterais. A arte é enviada pela loja e vai até a
borda da tela; sem isto o recorte encosta duro no branco da página, e em
monitor largo o object-fit ainda estica as pontas. O escurecido some antes
do meio, onde costuma estar o texto da peça.
Decorativo: fica FORA dos slides e com pointer-events desligado, porque o
slide inteiro é o link e um véu por cima engoliria o clique. */
.hero-viewport::after {
content: '';
position: absolute; inset: 0; z-index: 1;
pointer-events: none;
background:
linear-gradient(to right, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0) 22%),
linear-gradient(to left, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0) 22%);
}
/* Barra de tempo, colada no topo da arte: mostra quanto falta para o próximo
destaque. Quem anima é o JS, pela Web Animations API — e é ela também que
dispara a troca de slide ao terminar. Assim não existem dois relógios para
sair de sincronia, e pausar a barra pausa a rotação de verdade: ao voltar,
ela continua de onde parou em vez de recomeçar. */
.hero-tempo {
position: absolute; z-index: 4;
top: 0; left: 0; right: 0;
height: 3px;
background: rgba(255, 255, 255, .16);
}
.hero-tempo span {
display: block; height: 100%; width: 100%;
background: var(--brand);
transform: scaleX(0); transform-origin: left center;
}
/* Quem pediu menos movimento não tem rotação automática: a barra correria
sozinha marcando um tempo que não existe. */
@media (prefers-reduced-motion: reduce) { .hero-tempo { display: none; } }
/* A navegação é o NOME de quem anuncia, centralizada acima do cartão de
busca. Bolinha não diz o que tem no próximo slide; o nome diz — e deixa a
marca do anunciante no ar o tempo inteiro, não só nos seis segundos da
arte dele. */
.hero-anunciantes {
position: absolute; z-index: 3;
left: 0; right: 0;
/* 18px do fim da arte. Antes era medido a partir do cartão de busca, que
subia por cima; agora o cartão fica abaixo e a conta é direta. */
bottom: calc(var(--busca-sobe) + 18px);
display: flex; justify-content: center;
padding: 0 16px;
/* A faixa atravessa a arte inteira; só os botões podem receber clique,
senão ela rouba o link do slide. */
pointer-events: none;
}
.hero-anunciantes .trilho {
pointer-events: auto;
display: flex; gap: 3px;
max-width: 100%;
padding: 4px;
border-radius: 99px;
background: rgba(23, 23, 23, .55);
backdrop-filter: blur(6px);
/* Muitos anunciantes na semana: rola em vez de quebrar linha. */
overflow-x: auto;
scrollbar-width: none;
}
.hero-anunciantes .trilho::-webkit-scrollbar { display: none; }
.hero-anunciantes button {
flex: none;
height: 28px; padding: 0 13px;
border: 0; border-radius: 99px;
background: transparent;
color: rgba(255, 255, 255, .74);
font: inherit; font-size: 12px; font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition: background .18s, color .18s;
}
.hero-anunciantes button:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.hero-anunciantes button.active { background: var(--brand); color: var(--sobre-brand); }
.hero-anunciantes button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* ------------------------------- Busca ---------------------------------- */
/* Colado no fim da arte, sem margem negativa: encosta e não invade. */
/* Solto da arte: um respiro entre o fim do banner e o cartão. Grudado, os
dois viravam um bloco só e o cartão parecia rodapé da peça do
anunciante — que é justamente o que ele não é. */
.search-wrap { position: relative; z-index: 20; margin-top: 26px; }
.search-card {
background: var(--surface);
border: 1px solid var(--line);
/* Cantos arredondados nos quatro lados: o cartão flutua sobre o fundo da
página, não encosta em nada. O topo reto só fazia sentido quando ele
nascia colado no fim da arte. */
border-radius: var(--r-xl);
box-shadow: var(--sh-4);
/* Sem overflow: hidden — ele cortaria o painel dos selects com busca.
O canto arredondado volta no rodapé, que é quem tem fundo próprio. */
}
.search-tabs { display: flex; gap: 2px; padding: 10px 12px 0; border-bottom: 1px solid var(--line-soft); }
.search-tabs button {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 18px;
border: 0;
border-bottom: 2px solid transparent;
background: transparent;
font-size: 14px; font-weight: 600;
color: var(--muted);
transition: color .18s, border-color .18s;
}
.search-tabs button:hover { color: var(--text); }
.search-tabs button.active { color: var(--brand-texto); border-bottom-color: var(--brand); }
/* Modo simples: um campo e um botão. Fica escondido por padrão e só o
JavaScript o liga — sem script, quem manda são os campos completos, que
funcionam com o envio normal do formulário. */
.search-simples { display: none; gap: 12px; padding: 16px 24px 18px; }
.search-simples .with-icon { flex: 1; min-width: 0; }
/* Os dois na mesma altura, pela mesma variável. O seletor inclui .with-icon
de propósito: existe um ".with-icon .field { height: 46px }" mais abaixo
no arquivo que, com a mesma especificidade, ganharia por vir depois — e o
campo ficava 6px mais baixo que o botão. */
.search-simples { --altura-busca: 52px; }
.search-simples .with-icon .field { height: var(--altura-busca); font-size: 15.5px; }
.search-simples .btn { height: var(--altura-busca); padding: 0 26px; flex: none; }
/* "Onde" ao lado do "o quê": largura fixa para o campo de texto continuar
sendo o maior — é nele que se digita. */
.search-simples .search-onde { flex: none; width: 210px; position: relative; }
.search-simples .search-onde .combo-botao,
.search-simples .search-onde select {
height: var(--altura-busca);
font-size: 14.5px;
}
/* Título no lugar das abas que não faziam nada. */
/* Compacto de propósito. Com a arte inteira e sem sobreposição, cada pixel
daqui é o que decide se o primeiro carro aparece antes da rolagem. */
.search-titulo { padding: 18px 24px 0; }
.search-titulo h2 {
display: flex; align-items: center; gap: 9px;
margin: 0;
font-size: 16px; font-weight: 700; letter-spacing: -.01em;
color: var(--text);
}
.search-titulo svg { width: 18px; height: 18px; color: var(--brand); }
[data-modo="simples"] .search-simples { display: flex; }
[data-modo="simples"] .search-fields,
[data-modo="simples"] .search-footer .btn { display: none; }
.search-fields {
display: grid;
/* Duas linhas de três: Modelo, Categoria e Marca em cima; Cidade, Ano e
Preço embaixo. Seis campos numa linha só ficavam com 190px cada, e
"Sant'Ana do Livramento" não cabe em 190px. */
grid-template-columns: repeat(3, 1fr);
gap: 16px 22px;
padding: 18px 20px 14px;
}
.search-fields label { display: flex; flex-direction: column; gap: 6px; position: relative; min-width: 0; }
/* Sem divisória entre as colunas: agora cada campo tem a própria borda, e
o traço no meio virava uma segunda linha ao lado da primeira. */
.search-fields .livre .field { height: 38px; font-size: 14.5px; font-weight: 600; }
.search-fields label > span {
font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2);
}
.search-fields select {
appearance: none;
-webkit-appearance: none;
width: 100%;
height: 38px;
padding: 0 26px 0 2px;
border: 0;
border-radius: var(--r-sm);
background: transparent;
background-image: url("data:image/svg+xml;utf8, nativo continua sendo quem guarda o valor e
quem vai no envio; some da tela, e no lugar dele ficam um botão e um
painel com campo de busca. Sem JavaScript nada disto é criado e o select
nativo aparece normalmente.
O nativo fica DEBAIXO do botão, invisível e sem receber clique — e NÃO em
display:none. Com display:none, um select `required` vazio travava o envio
sem mensagem nenhuma: o navegador recusa o formulário, tenta focar o campo
para mostrar "Selecione um item da lista", não consegue focar o que não
está desenhado, e desiste calado. A pessoa clicava em Salvar e nada
acontecia. Posicionado sobre o botão, o aviso do navegador aparece
exatamente onde a pessoa está olhando. */
.combo { position: relative; }
.combo .combo-nativo {
position: absolute; inset: 0;
width: 100%; height: 100%;
margin: 0;
opacity: 0;
pointer-events: none;
}
/* O navegador achou o campo inválido ao tentar enviar: a borda do botão
acompanha, para o aviso não depender só do balão, que some sozinho. */
.combo.invalido .combo-botao { border-color: var(--st-err); }
.combo-botao {
display: flex; align-items: center; gap: 6px;
width: 100%; height: 38px;
padding: 0 26px 0 10px;
/* A mesma borda dos outros campos: sem ela, o select com busca parecia
texto solto, e não dava para ver que ali se clica. */
border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--surface);
background-image: url("data:image/svg+xml;utf8, para poder ser desligado inteiro sem
JavaScript. O navegador traz borda e margem próprias, e o min-width
automático quebra grade dentro de fieldset. O padding NÃO entra aqui: a
regra .search-fields já o define, e repetir com mais especificidade
apagaria o padding menor do celular. */
fieldset.search-fields { border: 0; margin: 0; min-width: 0; }
/* ------------------------------ Esqueleto ------------------------------- */
/* Os cards cinzas do "carregar mais". Não deixam a página mais RÁPIDA — o
que chega, chega no mesmo tempo. O que eles resolvem é o segundo e meio
em que a pessoa clica e nada acontece na tela: sem eles, o único sinal é
o texto do botão mudando lá embaixo, que ninguém olha.
Por isso não existem na primeira carga: ali os cards vêm prontos no HTML,
e um esqueleto seria uma etapa a mais entre a pessoa e o carro. */
.vehicle-card.esqueleto { pointer-events: none; }
.vehicle-card.esqueleto .vehicle-photo,
.vehicle-card.esqueleto .linha {
background: linear-gradient(90deg, var(--line-soft) 25%, var(--line) 37%, var(--line-soft) 63%);
background-size: 400% 100%;
animation: esqueleto-brilho 1.4s ease-in-out infinite;
}
.vehicle-card.esqueleto .vehicle-info { gap: 9px; padding: 18px 16px 20px; }
.vehicle-card.esqueleto .linha { display: block; height: 11px; border-radius: 5px; }
.vehicle-card.esqueleto .curta { width: 34%; height: 9px; }
.vehicle-card.esqueleto .media { width: 68%; height: 15px; }
.vehicle-card.esqueleto .longa { width: 88%; }
.vehicle-card.esqueleto .preco { width: 46%; height: 20px; margin-top: 8px; }
@keyframes esqueleto-brilho {
0% { background-position: 100% 50%; }
100% { background-position: 0 50%; }
}
/* Quem pediu menos movimento recebe o cinza parado — a informação é a
forma do card, não o brilho passando. */
@media (prefers-reduced-motion: reduce) {
.vehicle-card.esqueleto .vehicle-photo,
.vehicle-card.esqueleto .linha { animation: none; background: var(--line-soft); }
}
/* ------------------------------- Toast ---------------------------------- */
/* Barra de cor na borda, ícone preenchido, título em negrito e a mensagem
embaixo. O título é o que se lê de relance — "Salvo" resolve antes de a
frase inteira ser lida, e é isso que um aviso de dois segundos precisa
entregar.
Centralizado embaixo, a 10px do fim. Sobe quando o aviso de cookies ou a
barra do comparador estão no ar: são três coisas no mesmo canto, e o
toast é o mais efêmero dos três. */
.toasts {
position: fixed; z-index: 300;
bottom: 10px; left: 50%;
transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 12px;
width: min(460px, calc(100vw - 24px));
pointer-events: none;
transition: bottom .25s var(--ease);
}
.toast {
position: relative;
display: grid; grid-template-columns: auto 1fr auto; align-items: center;
gap: 14px;
width: 100%;
padding: 16px 16px 16px 20px;
border-radius: 14px;
background: var(--surface);
box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .28), 0 3px 10px -4px rgba(0, 0, 0, .16);
pointer-events: auto;
overflow: hidden;
animation: toast-entra .3s cubic-bezier(.16, 1, .3, 1);
}
/* A barra da cor. Pseudoelemento e não borda: assim ela acompanha o canto
arredondado do cartão em vez de desenhar um retângulo por fora. */
.toast::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0;
width: 6px;
background: var(--cor-toast, var(--muted-2));
}
@keyframes toast-entra {
from { opacity: 0; transform: translateY(18px) scale(.96); }
to { opacity: 1; transform: none; }
}
.toast.saindo { animation: toast-sai .22s ease-in forwards; }
@keyframes toast-sai { to { opacity: 0; transform: translateY(14px) scale(.97); } }
/* O disco cheio da cor, com o ícone branco dentro. */
.toast .ic {
flex: none; box-sizing: content-box;
width: 20px; height: 20px; padding: 8px;
border-radius: 50%;
background: var(--cor-toast, var(--muted-2));
color: #fff;
}
.toast .texto { min-width: 0; }
.toast .titulo {
display: block;
font-size: 15.5px; font-weight: 800; line-height: 1.25; color: var(--text);
}
.toast .msg {
display: block; margin-top: 3px;
font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--muted-2);
}
.toast .fechar {
align-self: start;
border: 0; background: none; color: var(--muted-2);
width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px;
transition: background .14s, color .14s;
}
.toast .fechar:hover { color: var(--text); background: var(--bg); }
.toast .fechar .ic {
width: 15px; height: 15px; padding: 0;
background: none; border-radius: 0; color: inherit;
}
/* As quatro cores. O laranja fica no "info", que é o aviso do dia a dia —
é a cor da casa e a que o site já usa para dizer "olha aqui". */
.toast.ok { --cor-toast: var(--green); }
.toast.err { --cor-toast: var(--red); }
.toast.warn { --cor-toast: #F5A524; }
.toast.info { --cor-toast: var(--brand); }
@media (prefers-reduced-motion: reduce) {
.toast, .toast.saindo { animation: none; }
.toasts { transition: none; }
}
@media (max-width: 620px) {
.toasts { width: calc(100vw - 20px); }
.toast { padding: 14px 14px 14px 18px; gap: 12px; }
}
/* Três coisas disputam o canto de baixo. O toast é o mais efêmero, então é
ele que sobe — as outras duas ficam onde a pessoa já aprendeu a
procurá-las. A altura do aviso de cookies vem do próprio elemento,
medida pelo JS: em duas linhas ele tem 125px e em uma tem 72. */
.com-aviso-cookies .toasts { bottom: calc(var(--fundo-ocupado, 78px) + 10px); }
.com-barra-comparar .toasts { bottom: 84px; }
.com-aviso-cookies.com-barra-comparar .toasts { bottom: calc(var(--fundo-ocupado, 78px) + 76px); }
@media (max-width: 620px) {
.toasts { width: calc(100vw - 20px); }
.toast { padding: 14px 15px; font-size: 15px; }
}
@media (max-width: 620px) {
/* No celular ele vem de cima: embaixo brigaria com a barra do comparador
e com o aviso de cookies. */
.toasts { right: 12px; left: 12px; bottom: auto; top: 12px; width: auto; }
@keyframes toast-entra { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes toast-sai { to { opacity: 0; transform: translateY(-12px); } }
}
/* O card que sai da lista de favoritos encolhe antes de sumir. Sem a
transição ele desaparece de repente e a grade "pula" — com ela, o olho
acompanha para onde o espaço foi. */
.vehicle-card.saindo {
opacity: 0;
transform: scale(.94);
transition: opacity .22s var(--ease), transform .22s var(--ease);
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.vehicle-card.saindo { transition: none; }
}
/* ==========================================================================
iOS: o campo que empurra a página para perto quando você toca nele
--------------------------------------------------------------------------
O Safari do iPhone dá zoom ao focar qualquer campo de digitação cuja fonte
CALCULADA seja menor que 16px. Não é bug nosso nem configuração: é regra da
Apple, e a intenção é boa — um campo de 12px é mesmo ilegível no celular.
O estrago, porém, é maior que o problema. Ao tocar no campo a página entra,
o resto do layout sai da tela, e ao sair do campo o zoom NÃO volta sozinho:
a pessoa fica navegando um site ampliado, com a barra lateral cortada,
precisando juntar os dedos para desfazer. Num formulário de cinco campos
isso acontece cinco vezes.
O ATALHO QUE NÃO USAMOS
-----------------------
Dá para desligar isso pondo maximum-scale=1 na meta viewport. É uma linha,
e é a resposta errada: ela tira o zoom da página INTEIRA, de todo mundo, o
tempo todo — inclusive de quem precisa ampliar para conseguir ler. Trocar
um incômodo por uma barreira de acessibilidade não é consertar.
O certo é não dar motivo: campo com 16px não provoca o zoom, e aí não há o
que desfazer.
POR QUE !important, QUE AQUI QUASE NÃO SE USA
---------------------------------------------
A alternativa é listar, uma a uma, todas as regras que hoje põem fonte
menor num campo — .field, as duas da busca da capa, a do cartão do
backoffice, a do mesclar do catálogo, o combo, o formulário de proposta.
Seriam oito seletores repetidos aqui, e o nono campo que alguém criar
amanhã nasce com o defeito de volta, sem nada avisando.
Uma linha cobre a classe inteira do erro, hoje e depois. É o mesmo
raciocínio do [hidden] lá em cima.
POR QUE (pointer: coarse) E NÃO LARGURA
---------------------------------------
iPhone deitado tem 844px de largura: uma regra por max-width deixaria o
defeito voltar ao virar o aparelho. "pointer: coarse" é o dedo — pega
celular e tablet em qualquer orientação, e não pega o computador de quem
desenha o site, onde 14px continua sendo o certo.
O que fica de fora não digita nada, logo não abre teclado e não dá zoom:
caixa de marcar, botão de rádio, controle deslizante e seletor de cor.
========================================================================== */
@media (pointer: coarse) {
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select,
textarea {
font-size: 16px !important;
}
}