/* ========================================================================== Conceito Empilhadeiras — estilos complementares Só o que o Tailwind não resolve: animações, âncoras sob o header fixo e ajustes de acessibilidade. Todo o resto é utilitário no HTML. ========================================================================== */ :root { --azul: #114a95; --altura-header: 4.5rem; /* usado no scroll-margin das âncoras */ } /* Rolagem suave nativa — o main.js só cuida do fallback e do reduced-motion */ html { scroll-behavior: smooth; } /* Impede que o header fixo cubra o topo da seção ao navegar por âncora */ section[id] { scroll-margin-top: var(--altura-header); } /* -------------------------------------------------------------------------- Foco visível — nunca remover, é o único guia de quem navega por teclado -------------------------------------------------------------------------- */ :focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 2px; } /* Em fundos escuros o outline azul some; troca por branco */ .bg-azul :focus-visible, footer :focus-visible, .faixa-escura :focus-visible { outline-color: #fff; } /* -------------------------------------------------------------------------- Reveal on scroll O estado invisível só é aplicado sob .js-reveal, classe que o próprio script de reveal coloca no . Sem JS (ou se o script falhar) nada fica oculto — a página nunca aparece em branco. -------------------------------------------------------------------------- */ /* A entrada usa translate/scale (propriedades próprias, não o transform): assim o hover dos cards — que usa transform — continua funcionando depois que o elemento entra. As modificadoras (.revelar-esq, .revelar-zoom, …) só trocam as variáveis, e como custom property herda, pô-las no .revelar-grupo já vale para todos os filhos. */ .js-reveal .revelar, .js-reveal .revelar-grupo > * { --atraso: calc(var(--i, 0) * 70ms); transition: opacity 0.7s ease-out var(--atraso), translate 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--atraso), scale 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--atraso), transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease; will-change: opacity, translate, scale; } /* Só o estado escondido é declarado: revelado, o elemento fica sem nenhuma regra nossa de posição e volta a ser um card normal. */ .js-reveal .revelar:not(.revelado), .js-reveal .revelar-grupo:not(.revelado) > * { opacity: 0; translate: var(--tx, 0) var(--ty, 28px); scale: var(--sc, 1); } /* Num grupo quem anima são os filhos; o container fica neutro para as opacidades não se multiplicarem. */ .js-reveal .revelar.revelar-grupo { opacity: 1; translate: none; scale: none; } /* Variações de entrada — uma por bloco, escolhidas no HTML */ .revelar-esq { --tx: -44px; --ty: 0; } /* desliza da esquerda */ .revelar-dir { --tx: 44px; --ty: 0; } /* desliza da direita */ .revelar-zoom { --ty: 0; --sc: 0.92; } /* zoom in: cresce até o tamanho real */ .revelar-recua { --ty: 0; --sc: 1.06; } /* zoom out: encolhe até assentar */ .revelar-fade { --ty: 0; } /* só fade, sem deslocamento */ /* -------------------------------------------------------------------------- Header — encolhe e ganha sombra depois dos primeiros pixels de rolagem -------------------------------------------------------------------------- */ .header { transition: box-shadow 0.3s ease, background-color 0.3s ease; } .header .header-logo { transition: height 0.3s ease; } .header.is-scrolled { box-shadow: 0 4px 24px -8px rgb(17 74 149 / 0.25); } .header.is-scrolled .header-logo { height: 2.25rem; } /* -------------------------------------------------------------------------- Menu mobile — drawer lateral -------------------------------------------------------------------------- */ .drawer { transition: transform 0.3s ease; transform: translateX(100%); } .drawer.aberto { transform: translateX(0); } .drawer-overlay { transition: opacity 0.3s ease; } /* Trava a rolagem do fundo enquanto o drawer está aberto */ body.menu-aberto { overflow: hidden; } /* -------------------------------------------------------------------------- Botão flutuante do WhatsApp — nasce escondido, o JS libera após rolar -------------------------------------------------------------------------- */ .wa-flutuante { transition: opacity 0.3s ease, transform 0.3s ease; opacity: 0; transform: translateY(1rem) scale(0.9); pointer-events: none; } .wa-flutuante.visivel { opacity: 1; transform: none; pointer-events: auto; } /* Pulso discreto para chamar atenção sem virar distração */ @keyframes wa-pulso { 0%, 100% { box-shadow: 0 0 0 0 rgb(37 211 102 / 0.55); } 70% { box-shadow: 0 0 0 16px rgb(37 211 102 / 0); } } .wa-flutuante.visivel .wa-icone { animation: wa-pulso 2.6s ease-out infinite; } /* -------------------------------------------------------------------------- Ícones de serviço Os PNGs originais são silhuetas pretas com fundo transparente. Em vez de recolorir os arquivos, o canal alfa vira máscara e a cor vem do CSS — assim a arte da marca é preservada e o azul acompanha a paleta. O @supports evita um quadrado azul sólido em navegador sem suporte a mask: sem ele, o ícone simplesmente não aparece (é decorativo, o título já informa). Os caminhos ficam aqui, e não em style inline no HTML: url() dentro de custom property é resolvido relativo à folha de estilo que a consome, então declarar no HTML apontaria para assets/css/assets/img/... e daria 404. -------------------------------------------------------------------------- */ @supports (-webkit-mask-image: none) or (mask-image: none) { .icone-servico { background-color: var(--azul); -webkit-mask: var(--icone) center / contain no-repeat; mask: var(--icone) center / contain no-repeat; } } .icone-locacao { --icone: url('../img/icons/locacao.png'); } .icone-venda { --icone: url('../img/icons/venda.png'); } .icone-manutencao { --icone: url('../img/icons/manutencao.png'); } .icone-assistencia { --icone: url('../img/icons/assistencia.png'); } .icone-baterias { --icone: url('../img/icons/baterias.png'); } .icone-niveladores { --icone: url('../img/icons/niveladores.png'); } /* -------------------------------------------------------------------------- Faixa de parceiros — logos coloridas, leve zoom no hover -------------------------------------------------------------------------- */ .logo-parceiro { transition: transform 0.3s ease; } .logo-parceiro:hover { transform: scale(1.06); } /* Mapa do Centro-Oeste — flutuação contínua; o bloco de prefers-reduced-motion lá embaixo já desliga a animação. */ .mapa-flutua { animation: flutuar 6s ease-in-out infinite; } @keyframes flutuar { 50% { transform: translateY(-14px); } } /* Logo do rodapé: mesma imagem da marca, invertida para branco puro. Evita manter um segundo arquivo só para o fundo escuro. */ .logo-invertida { filter: brightness(0) invert(1); } /* -------------------------------------------------------------------------- Respeita quem pediu menos movimento no sistema operacional -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .js-reveal .revelar, .js-reveal .revelar-grupo > * { opacity: 1; translate: none; scale: none; } }