/* * Modelo "alto padrão" — camada das PÁGINAS INTERNAS. * * As ~24 páginas internas (ficha, busca, bairro, edifício, construtora, contato, financiamento…) * têm marcação própria com nomes de classe herdados do site de 2016: `.container`, `.section`, * `.btn`, `.field`, `.block-title`, `.crumbs`, `.gallery`. No clássico quem as pinta é o * `estilo.css`; nos modelos "moderno" e "compacto", o `temas.css` por cima. Este modelo não carrega * nenhum dos dois. * * POR QUE UMA CAMADA E NÃO REESCRITA PÁGINA POR PÁGINA: a ficha de imóvel sozinha tem mais de 900 * linhas, com galeria, portão de fotos, agendamento, simulador e contadores de interesse * (`data-track`, `data-interesse`, `#gallery[data-total]`) de que a medição depende. Reescrever tudo * às cegas — sem poder rodar build nem navegador nesta máquina — trocaria um problema de estilo por * um de comportamento. Aqui a marcação fica intacta, o que garante por construção que nenhum * contrato de medição, nenhum `h1` e nenhum bloco indexado desaparece; muda só a pintura. * * É exatamente a ordem que o plano prevê: primeiro a folha que deixa as páginas coerentes sem * reescrita, depois a reescrita cirúrgica por ordem de tráfego. * * Só carrega no modelo novo. Os outros três não veem nada disto. */ @layer paginas { /* ------------------------------------------------------------- estrutura */ .container { max-width: var(--ap-largura); margin-inline: auto; padding-inline: var(--ap-gutter); } .section { padding-block: 2.5rem; } .wrap { max-width: var(--ap-largura); margin-inline: auto; padding-inline: var(--ap-gutter); } .block { margin-block: 2rem; } /* Título de bloco: o mesmo par de registros do resto do modelo — serifada para o título, sans miúda em caixa alta para o rótulo. Nada intermediário. */ .block-title, h2.block-title { font-family: var(--ap-fonte-titulo); font-size: var(--ap-t-lg); font-weight: 600; line-height: 1.15; margin-bottom: 1rem; } .sub { color: var(--ap-tinta-fraca); font-size: var(--ap-t-sm); } .muted { color: var(--ap-tinta-fraca); } .texto { max-width: 68ch; } .texto p { margin-bottom: 0.9rem; } /* ---------------------------------------------------------------- botões */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 44px; padding-inline: 1.1rem; border: 1px solid transparent; border-radius: var(--ap-raio); font-size: var(--ap-t-sm); font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; background: var(--ap-papel-2); color: var(--ap-tinta); } .btn-primary, .btn-enviar { background: var(--ap-marca-fundo); color: var(--ap-marca-tinta); border-color: transparent; } .btn-primary:hover, .btn-enviar:hover { background: var(--ap-marca-escura); } .btn-outline { background: transparent; border-color: var(--ap-linha-campo); color: var(--ap-tinta); } .btn-block { inline-size: 100%; } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; } /* ---------------------------------------------------------------- campos */ /* `box-sizing` e 16px de fonte: abaixo de 16px o iPhone dá zoom no campo ao tocar, e sem `box-sizing` o campo com padding estoura a coluna — foi o defeito de três formulários do site. */ .field, .form input, .form select, .form textarea, .vsf-input, .lead-form-like input, .lead-form-like select, .lead-form-like textarea { box-sizing: border-box; inline-size: 100%; min-height: 44px; font-size: 1rem; padding: 0.5rem 0.75rem; background: #fff; color: var(--ap-tinta); border: 1px solid var(--ap-linha-campo); border-radius: var(--ap-raio); font-family: inherit; } .form textarea, .lead-form-like textarea { min-height: 7rem; padding-block: 0.6rem; } .form label, .vsf-field > label, .info-label { display: block; font-size: var(--ap-t-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ap-tinta-fraca); margin-bottom: 0.25rem; font-weight: 700; } .vsf-err, .msg.erro { color: #9a1b12; font-size: var(--ap-t-sm); } .msg.ok { color: #1d6b3f; font-size: var(--ap-t-sm); } .busca-check { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; font-size: var(--ap-t-sm); } /* Dinheiro em monoespaçada, também nos campos herdados. */ .vsf-money, .vsf-cell, .info-valor { font-family: var(--ap-fonte-numero); } /* ----------------------------------------------------------------- grade */ .grid { display: grid; gap: 1rem; } .col-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); } .conjunto-casas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); } .tile { background: #fff; border: 1px solid var(--ap-linha); border-radius: var(--ap-raio); padding: 1rem; } /* ---------------------------------------------------------------- selos */ .badge, .selo-caixa { display: inline-flex; align-items: center; background: var(--ap-papel-2); color: var(--ap-tinta); font-size: var(--ap-t-xs); padding: 0.15rem 0.55rem; border-radius: 999px; border: 1px solid var(--ap-linha); } /* --------------------------------------------------------------- trilha */ /* `line-height` explícito: sem ele o `aria-current` da trilha corta a parte de baixo das letras com descendente (g, p, ç) — defeito medido no site atual. */ .crumbs { font-size: var(--ap-t-sm); color: var(--ap-tinta-fraca); padding-block: 0.75rem; border-bottom: 1px solid var(--ap-linha); } .crumbs .container { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; } .crumbs a { text-decoration: none; } .crumbs a:hover { text-decoration: underline; } .crumbs span[aria-current] { color: var(--ap-tinta); font-weight: 600; line-height: 1.45; } /* -------------------------------------------------------------- galeria */ /* Proporção fixa e `object-fit: cover`: é o defeito que mais aparecia no site — foto 380×253 pintada em 380×400, imóvel distorcido com quase metade do quadro fora. */ .gallery-main img { aspect-ratio: 3 / 2; inline-size: 100%; block-size: auto; object-fit: cover; border-radius: var(--ap-raio); background: var(--ap-papel-2); } #gallery-thumbs { display: grid; gap: 0.5rem; margin-top: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); } #gallery-thumbs .thumb { border: 0; padding: 0; background: none; cursor: pointer; border-radius: 8px; overflow: hidden; } #gallery-thumbs .thumb img { display: block; aspect-ratio: 1; inline-size: 100%; block-size: auto; object-fit: cover; } #gallery-thumbs .thumb[aria-current='true'] { outline: 2px solid var(--ap-marca-fundo); outline-offset: 1px; } /* ------------------------------------------------------------ paginação */ .pg-simples { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; padding-block: 1.5rem; } .pg-simples a, .pg-simples span { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 44px; min-height: 44px; padding-inline: 0.5rem; border-radius: var(--ap-raio); border: 1px solid var(--ap-linha); text-decoration: none; font-size: var(--ap-t-sm); } .pg-simples [aria-current] { background: var(--ap-marca-fundo); color: var(--ap-marca-tinta); border-color: transparent; font-weight: 600; } /* ------------------------------------------------------ estados e vazio */ .vazio, .empty-state { display: grid; justify-items: start; gap: 0.4rem; padding: 1.5rem; border: 1px dashed var(--ap-linha-campo); border-radius: var(--ap-raio); background: var(--ap-papel-2); } .vazio p, .empty-state p { margin: 0; color: var(--ap-tinta-fraca); font-size: var(--ap-t-sm); } /* --------------------------------- marcação de menu do legado, se sobrar */ /* Algumas páginas ainda trazem restos do cabeçalho de 2016 (`#Header`, `.Nivel1`, `.btn-menu`). O modelo novo tem cabeçalho próprio, então isto some — em vez de aparecer como lista solta no meio da página. */ #Header, #Header2, .Nivel1, .btn-menu, #topo, #Linha2 { display: none; } } /* ------------------------------------------- a busca do topo das listagens */ /* * O formulário de filtros (`/imoveis`) usa classes `tn-*`, que vivem em `temas.css` — folha que * este modelo NÃO carrega. Sem estas regras o formulário sai sem layout nenhum: rótulo e campo * correndo em linha, quebrando no meio da frase ("Tipo [select] Bairro", "Qualquer [select] Valor * até"). Foi o que o Danilo viu em `/imoveis?financiamento=1`. * * A alternativa seria escrever um formulário novo só para este modelo — e perder algum filtro no * caminho, que é exatamente o que não se pode fazer numa busca de imóvel. Aqui a marcação fica * intacta e só ganha pintura. */ @layer paginas { .tn-busca-topo { background: var(--ap-papel-2); border-bottom: 1px solid var(--ap-linha); } .tn-busca-topo-in { max-width: var(--ap-largura); margin-inline: auto; padding: 1.5rem var(--ap-gutter); } /* `.tn-busca-titulo` e não `h2`: o rótulo do formulário deixou de ser título de seção porque aparecia antes do `

` no HTML (ver a nota em imoveis/index.astro). O seletor acompanha. */ .tn-busca-topo-in > h2, .tn-busca-topo-in > .tn-busca-titulo { font-family: var(--ap-fonte-titulo); font-size: var(--ap-t-lg); font-weight: 600; margin-bottom: 1rem; } .tn-busca { display: grid; gap: 0.75rem; } /* Finalidade: os mesmos chips do topo da home — uma decisão entre opções, não um select. */ .tn-busca-fin { display: flex; flex-wrap: wrap; gap: 0.5rem; border: 0; padding: 0; margin: 0; } .tn-busca-fin label { position: relative; cursor: pointer; } .tn-busca-fin input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .tn-busca-fin span { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 1rem; border: 1px solid var(--ap-linha-campo); border-radius: 999px; background: #fff; font-size: var(--ap-t-sm); } .tn-busca-fin input:checked + span { background: var(--ap-marca-fundo); border-color: var(--ap-marca-fundo); color: var(--ap-marca-tinta); font-weight: 600; } .tn-busca-fin input:focus-visible + span { outline: 2px solid var(--ap-marca-fundo); outline-offset: 2px; } /* Cada campo é um bloco com rótulo em cima — era isto que faltava e fazia tudo correr em linha. */ .tn-busca-campos { display: grid; gap: 0.6rem; } .tn-campo, .tn-campo-q { display: grid; gap: 0.25rem; margin: 0; min-width: 0; } /** * O rótulo de cada campo — e o seletor que não alcançava a marcação. * * A regra mirava `.tn-campo > label`, mas na marcação o `