/* ========================================================= VDC IMÓVEIS — estilos da home Construído sobre tokens.css (variáveis e classes utilitárias do sistema de marca — cores, tipografia, espaçamento, sombra). Índice deste arquivo: 1. Reset básico e tipografia de página 2. Entrada de seção ao rolar (scroll reveal) 3. Botões — acabamento extra sobre o .vdc-btn do tokens.css 4. Avisos (toasts) — mensagens de sucesso/erro 5. Cabeçalho — logo, menu, dropdown, mega menu, favoritos 6. Hero — carrossel de fotos, busca básica e avançada 7. Seções da home (especialidades, imóveis, selos, equipe, CTA, contato) 8. Estado vazio (sem imóveis / sem favoritos) 9. Rodapé ========================================================= */ /* --------------------------------------------------------- 1. Reset básico e tipografia de página --------------------------------------------------------- */ :root { /* Escala de z-index documentada (auditoria UI/UX Pro Max: evitar valores arbitrários tipo 9999 — cada camada de sobreposição tem um número fixo, do mais baixo pro mais alto). */ --vdc-z-dropdown: 10; /* dropdown "Imóveis" dentro do menu principal */ --vdc-z-header: 100; /* cabeçalho fixo (sticky) e botão do WhatsApp */ --vdc-z-backdrop: 200; /* fundo escurecido atrás do mega menu */ --vdc-z-menu: 300; /* mega menu e painel de favoritos */ --vdc-z-toast: 900; /* avisos (toasts) — sempre por cima de tudo */ /* Margem lateral de página (DESIGN.md §5 "Grid"): 24px no celular, 48px no tablet, 80px no desktop. Usada por .vdc-section, .vdc-header__inner e o rodapé — qualquer wrapper que precise de respiro nas bordas da tela, fora do .vdc-container (que só limita largura máxima, sem padding próprio). */ --vdc-margin-mobile: var(--vdc-space-5); /* 24px */ --vdc-margin-tablet: var(--vdc-space-7); /* 48px */ --vdc-margin-desktop: 80px; /* valor fixo do DESIGN.md — fora da escala de 4px */ } /* box-sizing previsível em todo elemento: padding/borda não somam ao width/height declarado. */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } /* BUG real encontrado ao olhar o site renderizado: várias classes deste arquivo (ex.: .vdc-hero__advanced { display: grid }) têm a mesma especificidade do que o navegador usa por padrão pro atributo [hidden] — e como vêm depois no cascata, ganham e mostram o elemento mesmo com hidden ligado. A busca avançada do hero aparecia junto da busca básica por causa disso. !important aqui é proposital: [hidden] deve sempre vencer, sem exceção. */ [hidden] { display: none !important; } body { margin: 0; background: var(--vdc-white); color: var(--vdc-ink); font-family: var(--vdc-font-body); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } ul { list-style: none; margin: 0; padding: 0; } h1, h2, h3, h4, p { margin: 0; } /* Padrão "screen-reader only": presente pra leitor de tela e pra hierarquia de headings, mas fora do fluxo visual — não empurra nada de layout. Usado em search.html (ver comentário lá). */ .vdc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --------------------------------------------------------- 2. Entrada de seção ao rolar (scroll reveal) Especificado no DESIGN.md §10: fade + 16px de subida, 400ms, uma vez por seção. Animado via GSAP/ScrollTrigger em main.js — aqui só o estado inicial escondido (a lib anima direto pra opacity:1 /transform:none via inline style, por isso não tem transition nem .is-visible aqui: main.js também tem um fallback que aplica opacity/transform final na marra se o GSAP não carregar). Escopado a "html.js" — essa classe só existe se o JavaScript rodou (adicionada por um script inline no de base.html). Sem JS, a regra abaixo nunca se aplica e o conteúdo já nasce visível, em vez de ficar escondido para sempre. --------------------------------------------------------- */ .js .vdc-reveal, .js .vdc-card { opacity: 0; transform: translateY(16px); } /* Keyboard focus can land inside one of these before its scroll-trigger ever fires (e.g. Tab without manual scrolling lets the browser's native "scroll focused element into view" do the work) — the outline would then appear on invisible or mid-fade content. Force full visibility the moment focus enters, regardless of GSAP's inline-style state; !important is required to beat that inline style. */ .js .vdc-reveal:focus-within, .js .vdc-card:focus-within { opacity: 1 !important; transform: none !important; } /* --------------------------------------------------------- 3. Botões — acabamento extra sobre o .vdc-btn do tokens.css (que já define cor, altura, raio e tipografia por variante: --primary/--secondary/--gold/--whatsapp). Aqui só entram sombra, estado de clique e o ícone opcional dentro do botão. --------------------------------------------------------- */ .vdc-btn { gap: 8px; box-shadow: var(--vdc-shadow-sm); transition: transform var(--vdc-dur-fast) var(--vdc-ease), box-shadow var(--vdc-dur-fast) var(--vdc-ease), background var(--vdc-dur-fast) var(--vdc-ease), filter var(--vdc-dur-fast) var(--vdc-ease); } .vdc-btn:hover { box-shadow: var(--vdc-shadow-md); } .vdc-btn:active { transform: translateY(0) scale(.98); box-shadow: var(--vdc-shadow-sm); filter: brightness(.96); } .vdc-btn svg { flex-shrink: 0; } /* Seta padrão dos botões (→) desliza um pouco no hover — mesmo ícone se repete em ~8 lugares (CTA, cards, contato), então um gesto só aqui já moderniza o botão inteiro sem precisar trocar o traço. */ .vdc-icon-arrow { transition: transform var(--vdc-dur-fast) var(--vdc-ease); } .vdc-btn:hover .vdc-icon-arrow { transform: translateX(3px); } /* Link de texto com seta — ação secundária dentro de um parágrafo, sem o peso de um .vdc-btn (usado quando o botão principal já está logo abaixo e um segundo botão competiria por atenção). */ .vdc-link-arrow { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; color: var(--vdc-navy-700); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--vdc-gold-500); padding-bottom: 1px; transition: color var(--vdc-dur-fast) var(--vdc-ease); } .vdc-link-arrow:hover { color: var(--vdc-gold-700); } .vdc-link-arrow:hover .vdc-icon-arrow { transform: translateX(3px); } .vdc-btn--secondary:hover { background: var(--vdc-navy-100); } /* Botão desabilitado/"enviando..." (form de contato e upload do admin usam isso via JS, ver data-submit-feedback em main.js). */ .vdc-btn:disabled, .vdc-btn[aria-busy="true"] { opacity: .6; cursor: default; pointer-events: none; } /* --------------------------------------------------------- 4. Avisos (toasts) — mensagens de sucesso/erro do Flask (flash()) Somem sozinhos depois de 5s (ver dismissFlash em main.js) ou ao clicar no X. role="alert"/"status" e aria-live vêm do template (base.html) para leitor de tela anunciar corretamente. --------------------------------------------------------- */ .vdc-flash-stack { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: var(--vdc-z-toast); display: flex; flex-direction: column; gap: 8px; width: min(92vw, 420px); } .vdc-flash { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--vdc-radius-sm); font: 600 14px/1.4 var(--vdc-font-body); box-shadow: var(--vdc-shadow-md); color: #fff; opacity: 1; transition: opacity var(--vdc-dur-base) var(--vdc-ease), transform var(--vdc-dur-base) var(--vdc-ease); } .vdc-flash.is-leaving { opacity: 0; transform: translateY(-8px); } .vdc-flash span { flex: 1; } .vdc-flash--success { background: var(--vdc-success); } .vdc-flash--error { background: var(--vdc-alert); } .vdc-flash__close { flex-shrink: 0; border: 0; background: transparent; color: #fff; opacity: .85; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; margin: -12px -12px -12px 0; transition: opacity var(--vdc-dur-fast) var(--vdc-ease), background var(--vdc-dur-fast) var(--vdc-ease); } .vdc-flash__close:hover { opacity: 1; background: rgba(255,255,255,.15); } .vdc-flash__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; opacity: 1; } /* --------------------------------------------------------- 5. Cabeçalho --------------------------------------------------------- */ /* Faixa branca fixa no topo (logo + navegação + ações). */ .vdc-header { position: sticky; top: 0; z-index: var(--vdc-z-header); background: var(--vdc-white); border-bottom: 1px solid var(--vdc-gray-400); transition: box-shadow var(--vdc-dur-base) var(--vdc-ease); } /* Compacta ao passar de ~1 rolagem de tela (main.js liga .is-condensed uma vez, ao cruzar o limiar — não recalcula a cada pixel). Sinaliza "você saiu do hero" sem exigir nada do visitante. */ .vdc-header.is-condensed { box-shadow: var(--vdc-shadow-sm); } /* 3 áreas reais — marca | navegação | ações —, não um flex com space-between fingindo isso. Com space-between a navegação só ficava "no meio do que sobrava" entre marca e ações, que é uma posição diferente do centro geométrico do cabeçalho sempre que essas duas pontas não têm a mesma largura (o caso normal: a marca é mais estreita que o bloco de ações com o CTA, principalmente com o texto comprido "Falar com um consultor"). No desktop (ver media query mais abaixo) quem centraliza a navegação é position:absolute + translateX(-50%) no .navgroup, não as colunas do grid — um grid 1fr/auto/1fr chegou a resolver a centralização, mas o cálculo de 1fr trava (deixa de dividir o espaço em partes iguais) sempre que um dos lados quase preenche sozinho sua fatia, que é exatamente o caso do bloco de ações; nessas condições, dar mais respiro pra esse lado (aumentar o gap) empurrava a navegação pra fora do centro em vez de mantê-la lá. Centralização por position:absolute não depende em nada da largura da marca ou das ações — os dois lados ficam livres pra ter o espaçamento que precisarem sem nenhum efeito colateral um no outro. */ .vdc-header__inner { /* position:relative: ancora o position:absolute do .navgroup no desktop (ver media query). auto 1fr auto por padrão (mobile/ tablet, onde o navgroup continua sendo item normal do grid, não absoluto): marca e ações ficam do tamanho do próprio conteúdo, a coluna central é que é elástica — sem isso, forçar as duas pontas em frações iguais faria a marca (mais larga que só o coração de favoritos) atropelar o "Menu" em telas estreitas. */ display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: var(--vdc-space-5); position: relative; height: 80px; transition: height var(--vdc-dur-base) var(--vdc-ease); /* .vdc-container (max-width + auto-margin) não tem padding próprio — sem isso aqui, logo e ações ficariam grudados na borda da tela em qualquer viewport abaixo de 1200px. Ver --vdc-margin-* no :root. */ padding-inline: var(--vdc-margin-mobile); } @media (min-width: 768px) { .vdc-header__inner { padding-inline: var(--vdc-margin-tablet); } } @media (min-width: 1024px) { .vdc-header__inner { padding-inline: var(--vdc-margin-desktop); } } .vdc-header.is-condensed .vdc-header__inner { height: 60px; } /* justify-self:start (não o stretch padrão do grid) pra depender só do próprio conteúdo, e um leve empurrão pra direita — a marca flush contra a borda esquerda do container lia como "grudada", ela ganha um respiro sem chegar perto de disputar espaço com a navegação. */ .vdc-header__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; /* grid-column explícito: no desktop (media query lá embaixo) o navgroup vira position:absolute e sai do grid — sem posição fixa aqui, marca e ações (os 2 itens que sobram no fluxo) seriam renumeradas pras colunas 1 e 2 em vez de 1 e 3, e a coluna 3 ficaria vazia com as ações presas contra o meio em vez da borda direita de verdade. */ grid-column: 1; justify-self: start; margin-left: var(--vdc-space-4); /* min-width:0 troca o mínimo automático (que, num filho de flex, é o tamanho do conteúdo sem quebrar — o "VDC Imóveis" inteiro numa linha só) por zero. Sem isso, abaixo de ~360px o texto não tinha mais pra onde encolher e vazava por cima do "Menu" em vez de quebrar linha — é só nessa faixa estreita que isto muda alguma coisa; em qualquer largura com espaço de sobra o efeito é nulo. */ min-width: 0; } .vdc-header__logo { height: 40px; width: auto; flex-shrink: 0; transition: height var(--vdc-dur-base) var(--vdc-ease); } .vdc-header.is-condensed .vdc-header__logo { height: 30px; } .vdc-header__brand-text { font: 700 18px/1 var(--vdc-font-display); color: var(--vdc-navy-700); letter-spacing: -0.01em; min-width: 0; } .vdc-header__brand-text em { font-style: normal; font-weight: 600; color: var(--vdc-gray-600); margin-left: 4px; } /* Agrupa o