/* ========================================================================== * Ajustes de 24/08/2026 - 3B Imoveis * -------------------------------------------------------------------------- * Carregado por ultimo (inc/ajustes-2026-08.php) para vencer o CSS do tema * pai sem !important onde da' pra evitar. Cinco frentes: * 1. Campos de busca que nao pareciam clicaveis * 2. Estado "nenhum imovel encontrado" estreito e desalinhado * 3. CLS - o nativo do bootstrap-select ficava visivel: aparecia como uma * seta solta abaixo dos campos e, ao ser escondido pelo JS, empurrava a * pagina inteira (CLS de 0,346 na listagem). A regra abaixo e' a propria * regra do bootstrap-select, que o UCSS do LiteSpeed removia por julgar * "nao usada" - o seletor so' passa a casar depois que o JS roda. * ========================================================================== */ select.bs-select-hidden, select.selectpicker, .bootstrap-select > select.bs-select-hidden { display: none !important; } /* Altura reservada: o espaco do campo existe antes do JS montar o botao, entao nada salta quando ele monta. */ .houzez-search-builder-form-js .elementor-field-group, .houzez-search-form-js .elementor-field-group { min-height: 50px; } .houzez-search-builder-form-js .bootstrap-select, .houzez-search-form-js .bootstrap-select { min-height: 50px; } /* --- O campo tem de parecer um campo --- */ .houzez-search-builder-form-js .bootstrap-select > .dropdown-toggle, .houzez-search-form-js .bootstrap-select > .dropdown-toggle, .houzez-search-builder-wrapper .bootstrap-select > .dropdown-toggle { display: flex; align-items: center; width: 100%; min-height: 50px; /* As colunas do Elementor dao larguras desiguais aos campos (211px x 156px na home), entao o rotulo longo cortava. Recuo direito enxuto e corpo de 14px devolvem ~13px de texto por campo, o bastante para "Todos os tipos" e "Preço Máximo" caberem inteiros. */ padding: 10px 36px 10px 13px; background-color: #fff !important; border: 1px solid #c9d0cc !important; border-radius: 7px; box-shadow: none; color: var(--3b-verde); font-size: 14px; font-weight: 500; line-height: 1.3; text-align: left; cursor: pointer; outline: none; transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease; } /* O texto tem de poder encolher dentro do flex antes de virar reticencias. */ .houzez-search-builder-form-js .bootstrap-select > .dropdown-toggle .filter-option, .houzez-search-form-js .bootstrap-select > .dropdown-toggle .filter-option { min-width: 0; flex: 1 1 auto; } /* Texto de "ainda nao escolhi" fica mais leve que um valor escolhido. */ .houzez-search-builder-form-js .bootstrap-select > .dropdown-toggle .filter-option-inner-inner, .houzez-search-form-js .bootstrap-select > .dropdown-toggle .filter-option-inner-inner { color: var(--3b-texto-2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .houzez-search-builder-form-js .bootstrap-select.is-3b-escolhido > .dropdown-toggle .filter-option-inner-inner, .houzez-search-form-js .bootstrap-select.is-3b-escolhido > .dropdown-toggle .filter-option-inner-inner { color: var(--3b-verde); font-weight: 600; } /* Seta: pastilha dourada, o sinal de "isto abre". */ .houzez-search-builder-form-js .bootstrap-select > .dropdown-toggle::after, .houzez-search-form-js .bootstrap-select > .dropdown-toggle::after, .houzez-search-builder-wrapper .bootstrap-select > .dropdown-toggle::after { content: ""; position: absolute; top: 50%; right: 9px; width: 19px; height: 19px; margin: 0; transform: translateY(-50%); border: 0; border-radius: 5px; background-color: rgba(198, 154, 90, .16); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c69a5a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 13px 13px; transition: background-color .16s ease, transform .16s ease; } .houzez-search-builder-form-js .bootstrap-select > .dropdown-toggle:hover, .houzez-search-form-js .bootstrap-select > .dropdown-toggle:hover { border-color: var(--3b-dourado); background-color: #fffdf9; } .houzez-search-builder-form-js .bootstrap-select > .dropdown-toggle:hover::after, .houzez-search-form-js .bootstrap-select > .dropdown-toggle:hover::after { background-color: rgba(198, 154, 90, .26); } .houzez-search-builder-form-js .bootstrap-select > .dropdown-toggle:focus-visible, .houzez-search-form-js .bootstrap-select > .dropdown-toggle:focus-visible, .houzez-search-builder-form-js .bootstrap-select.show > .dropdown-toggle, .houzez-search-form-js .bootstrap-select.show > .dropdown-toggle { border-color: var(--3b-verde); box-shadow: 0 0 0 3px rgba(30, 60, 43, .13); outline: none; } .houzez-search-builder-form-js .bootstrap-select.show > .dropdown-toggle::after, .houzez-search-form-js .bootstrap-select.show > .dropdown-toggle::after { transform: translateY(-50%) rotate(180deg); } /* Campos de texto do mesmo formulario (Codigo do imovel, ID) na mesma linguagem. */ .houzez-search-builder-form-js input.form-control, .houzez-search-form-js input.form-control, .houzez-search-builder-wrapper input[type="text"].form-control { min-height: 50px; border: 1px solid var(--3b-borda); border-radius: 7px; padding: 10px 15px; font-size: 15px; color: var(--3b-verde); background-color: #fff; } .houzez-search-builder-form-js input.form-control:focus, .houzez-search-form-js input.form-control:focus { border-color: var(--3b-verde); box-shadow: 0 0 0 3px rgba(30, 60, 43, .13); outline: none; } /* Lista aberta: item alto o bastante pro dedo e estado escolhido legivel. */ .bootstrap-select .dropdown-menu { border: 1px solid var(--3b-borda); border-radius: 8px; box-shadow: 0 10px 30px rgba(30, 60, 43, .14); padding: 6px; } .bootstrap-select .dropdown-menu li a { border-radius: 5px; min-height: 40px; display: flex; align-items: center; padding: 8px 12px; font-size: 14.5px; } /* O rotulo da opcao NAO fica no proprio : o bootstrap-select o envolve num , e o tema pai pinta esse span (`.bootstrap-select .text { color:#222 }` em styling-options.css, mais um `#333` no CSS embutido do Customizer). Cor no nao chega la' - por isso todo estado abaixo repete o seletor com ` .text`. Era exatamente o defeito relatado na homologacao de 25/08/2026: a linha escolhida ficava verde-escura com a letra escura por cima, ilegivel, no Status e no Bairro do cadastro e no filtro de Tipos da busca. */ .bootstrap-select .dropdown-menu li a:hover, .bootstrap-select .dropdown-menu li a:focus, .bootstrap-select .dropdown-menu li a:hover .text, .bootstrap-select .dropdown-menu li a:focus .text { background-color: rgba(198, 154, 90, .14); color: var(--3b-verde); } .bootstrap-select .dropdown-menu li a:hover .text, .bootstrap-select .dropdown-menu li a:focus .text { background-color: transparent; } /* Escolhida (`li.selected`), realcada pelo teclado (`a.active`) e as duas coisas ao mesmo tempo: fundo verde da marca com texto branco. O `.active` tambem tira o azul padrao do Bootstrap 5, que nao e' da paleta do site. */ .bootstrap-select .dropdown-menu li.selected a, .bootstrap-select .dropdown-menu li.selected a .text, .bootstrap-select .dropdown-menu li a.selected, .bootstrap-select .dropdown-menu li a.selected .text, .bootstrap-select .dropdown-menu li a.active, .bootstrap-select .dropdown-menu li a.active .text, .bootstrap-select .dropdown-menu li.selected a:hover, .bootstrap-select .dropdown-menu li.selected a:hover .text, .bootstrap-select .dropdown-menu li.selected a:focus, .bootstrap-select .dropdown-menu li.selected a:focus .text { color: #fff; } .bootstrap-select .dropdown-menu li.selected a, .bootstrap-select .dropdown-menu li a.selected, .bootstrap-select .dropdown-menu li a.active, .bootstrap-select .dropdown-menu li.selected a:hover, .bootstrap-select .dropdown-menu li.selected a:focus { background-color: var(--3b-verde); } /* O interno nunca pinta fundo proprio - senao recortaria o verde. */ .bootstrap-select .dropdown-menu li.selected a .text, .bootstrap-select .dropdown-menu li a.selected .text, .bootstrap-select .dropdown-menu li a.active .text { background-color: transparent; } /* O "v" de conferido fica do lado direito da linha ja verde. */ .bootstrap-select .dropdown-menu li.selected a .check-mark, .bootstrap-select .dropdown-menu li a.selected .check-mark, .bootstrap-select .dropdown-menu li a.active .check-mark { color: #fff; } /* Selecao multipla (Status do cadastro, Tipos da busca): o resumo no botao fechado e' escrito pelo mesmo , sobre fundo claro - entao ali a cor volta a ser a da marca, nao branco. */ .bootstrap-select > .dropdown-toggle .filter-option-inner-inner { color: var(--3b-verde); } /* ========================================================================== * 2. ESTADO "NENHUM IMOVEL ENCONTRADO" * O wrapper era filho direto de uma .row.row-cols-lg-3, entao o Bootstrap o * tratava como coluna de 1/3 e o bloco nascia estreito e encostado a * esquerda. Aqui ele volta a ocupar a linha inteira e o cartao centraliza. * ========================================================================== */ .threeb-sem-resultado { flex: 0 0 100%; width: 100%; max-width: 100%; grid-column: 1 / -1; display: flex; justify-content: center; } .threeb-sem-resultado > .threeb-search-cta, .threeb-search-cta-noresults { max-width: 760px; width: 100%; margin-left: auto; margin-right: auto; } .threeb-search-cta-noresults { padding: 40px 44px; margin-top: 8px; margin-bottom: 8px; } .threeb-search-cta-noresults .threeb-search-cta-title { font-size: 23px; line-height: 1.25; } .threeb-search-cta-noresults .threeb-search-cta-text { font-size: 15.5px; max-width: 52ch; margin-left: auto; margin-right: auto; } /* Com mais largura, os campos cabem lado a lado em vez de virar uma coluna estreita e alta. */ @media (min-width: 620px) { /* Os campos sao filhos diretos do
(nao ha wrapper), entao a grade vai no proprio form. Os input[type=hidden] ja nascem display:none pelo navegador e o honeypot e' absoluto - nenhum dos dois vira celula. */ .threeb-search-cta-noresults .threeb-search-lead-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; align-items: start; } .threeb-search-cta-noresults .threeb-search-cta-field { margin-bottom: 0; } /* Com tres campos numa grade de duas colunas, o nome ocupa a linha inteira e telefone e e-mail ficam lado a lado - do jeito que o gestor pediu na homologacao de 25/08/2026 ("ao lado ou logo abaixo do telefone"). Sem isso o terceiro campo cai sozinho numa linha nova. */ .threeb-search-cta-noresults .threeb-search-cta-field-largo { grid-column: 1 / -1; } .threeb-search-cta-noresults .threeb-search-cta-btn, .threeb-search-cta-noresults .threeb-search-cta-msgs { grid-column: 1 / -1; } .threeb-search-cta-noresults .threeb-search-cta-btn { width: auto; min-width: 280px; justify-self: center; margin-top: 8px; } } @media (max-width: 619.98px) { .threeb-search-cta-noresults { padding: 28px 22px; } } /* ========================================================================== * 4. MENU LATERAL DO TELEMOVEL * Marca no topo (no lugar da palavra "Menu") e contato no rodape do painel. * ========================================================================== */ .offcanvas-mobile-menu .offcanvas-header { align-items: center; border-bottom: 1px solid rgba(30, 60, 43, .10); padding-top: 14px; padding-bottom: 14px; } .threeb-menu-marca { display: flex; align-items: center; gap: 10px; min-width: 0; } .threeb-menu-marca img { display: block; width: auto; height: 42px; max-width: 150px; object-fit: contain; } .threeb-menu-marca .threeb-menu-creci { font-size: 11px; letter-spacing: .04em; color: var(--3b-texto-2); white-space: nowrap; } /* Bloco de contato, usado no telemovel e no painel. */ .threeb-contato { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(30, 60, 43, .10); } .threeb-contato-titulo { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--3b-texto-2); margin: 0 0 12px; } .threeb-contato-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .threeb-contato-lista a { display: flex; align-items: center; gap: 11px; min-height: 46px; /* Sem margem negativa: dentro do offcanvas ela empurrava o link 10px para fora do painel (394px de link em 384px de corpo). */ padding: 8px 10px; border-radius: 7px; color: var(--3b-verde); font-size: 15px; font-weight: 500; text-decoration: none; transition: background-color .15s ease; } .threeb-contato-lista a:hover, .threeb-contato-lista a:focus-visible { background-color: rgba(198, 154, 90, .13); color: var(--3b-verde); text-decoration: none; } .threeb-contato-lista svg { flex: 0 0 auto; width: 18px; height: 18px; stroke: var(--3b-dourado); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .threeb-contato-lista .threeb-contato-zap { background-color: rgba(37, 211, 102, .10); } .threeb-contato-lista .threeb-contato-zap svg { stroke: #1d9e50; } .threeb-contato-lista .threeb-contato-zap:hover, .threeb-contato-lista .threeb-contato-zap:focus-visible { background-color: rgba(37, 211, 102, .20); } .threeb-contato-rodape { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--3b-texto-2); } /* -------------------------------------------------------------------------- * Variante escura: o offcanvas do telemovel tem fundo #1e3c2b (o mesmo verde * da marca). Medido no navegador: sem estas regras, o link de contato herdava * exatamente a cor do fundo e ficava invisivel, e os rotulos em #6b7370 nao * tinham contraste. Mesma licao dos trust badges (trust-badges.css). * ----------------------------------------------------------------------- */ .offcanvas-mobile-menu .offcanvas-header { border-bottom-color: rgba(255, 255, 255, .14); } .offcanvas-mobile-menu .threeb-menu-marca img { height: 46px; max-width: 160px; } .offcanvas-mobile-menu .threeb-menu-marca .threeb-menu-creci { color: rgba(255, 255, 255, .62); } .offcanvas-mobile-menu .threeb-contato { border-top-color: rgba(255, 255, 255, .14); } .offcanvas-mobile-menu .threeb-contato-titulo { color: rgba(255, 255, 255, .58); } .offcanvas-mobile-menu .threeb-contato-lista a { color: #fff; } .offcanvas-mobile-menu .threeb-contato-lista a:hover, .offcanvas-mobile-menu .threeb-contato-lista a:focus-visible { background-color: rgba(255, 255, 255, .11); color: #fff; } .offcanvas-mobile-menu .threeb-contato-lista svg { stroke: #d8b478; } .offcanvas-mobile-menu .threeb-contato-lista .threeb-contato-zap { background-color: rgba(37, 211, 102, .18); } .offcanvas-mobile-menu .threeb-contato-lista .threeb-contato-zap svg { stroke: #6ee79b; } .offcanvas-mobile-menu .threeb-contato-lista .threeb-contato-zap:hover, .offcanvas-mobile-menu .threeb-contato-lista .threeb-contato-zap:focus-visible { background-color: rgba(37, 211, 102, .30); } .offcanvas-mobile-menu .threeb-contato-rodape { color: rgba(255, 255, 255, .52); } .offcanvas-mobile-menu .btn-close { color: #fff; opacity: 1; } /* ========================================================================== * 5. MENU LATERAL DO PAINEL * Mesmo bloco de contato, sobre o fundo do painel. * ========================================================================== */ /* O .dashboard-sidebar tambem e' escuro (medido: rgb(20,42,31)) e so' tem 224px de largura util - dai a variante clara e o corte do e-mail, que media 236px de texto num espaco de 224px. */ .sidebar-nav .threeb-painel-marca { display: flex; align-items: center; gap: 10px; padding: 0 0 14px; margin-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, .12); } .sidebar-nav .threeb-painel-marca.threeb-marca--so-creci { padding-top: 0; } .sidebar-nav .threeb-painel-marca .threeb-menu-creci { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .55); } .sidebar-nav .threeb-contato { margin-top: 18px; padding: 16px 0 8px; border-top-color: rgba(255, 255, 255, .12); } .sidebar-nav .threeb-contato-titulo { color: rgba(255, 255, 255, .55); } .sidebar-nav .threeb-contato-lista a { color: #fff; font-size: 13.5px; padding: 8px 9px; gap: 9px; min-width: 0; } .sidebar-nav .threeb-contato-lista a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-nav .threeb-contato-lista a:hover, .sidebar-nav .threeb-contato-lista a:focus-visible { background-color: rgba(255, 255, 255, .11); color: #fff; } .sidebar-nav .threeb-contato-lista svg { stroke: #d8b478; width: 17px; height: 17px; } .sidebar-nav .threeb-contato-lista .threeb-contato-zap { background-color: rgba(37, 211, 102, .18); } .sidebar-nav .threeb-contato-lista .threeb-contato-zap svg { stroke: #6ee79b; } .sidebar-nav .threeb-contato-lista .threeb-contato-zap:hover, .sidebar-nav .threeb-contato-lista .threeb-contato-zap:focus-visible { background-color: rgba(37, 211, 102, .30); } .sidebar-nav .threeb-contato-rodape { color: rgba(255, 255, 255, .45); font-size: 11px; } /* ========================================================================== * 6. ALVO DE TOQUE * Lighthouse reprovava "target-size" no telemovel nas tres paginas. * ========================================================================== */ @media (max-width: 991.98px) { .header-mobile .btn, .offcanvas-mobile-menu .main-nav .nav-item > a, .offcanvas-mobile-menu .btn-close, .listing-tabs .nav-link, .status-tab-js { min-height: 44px; display: inline-flex; align-items: center; } .offcanvas-mobile-menu .main-nav .nav-item > a { display: flex; } /* As etiquetas "VENDA" e "DISPONIVEL" sobre a foto do card sao links e estavam com menos de 24px de altura - o Lighthouse reprovava "target-size" em 9 elementos por pagina. */ .item-wrap .label, .hz-label, .label-status, .listing-view .label { min-height: 24px; display: inline-flex; align-items: center; padding-top: 3px; padding-bottom: 3px; } } /* ========================================================================== * 7. CONTRASTE * O dourado #c69a5a sobre branco da' 2,57:1 - o minimo da WCAG AA e' 4,5:1. * Media: era o preco dos cards e o texto branco sobre botao dourado, e * reprovava "color-contrast" nas tres paginas. #8f6526 da' 5,18:1 e continua * na mesma familia de dourado. O #c69a5a fica onde nao e' texto (bordas, * pastilhas, icones sobre fundo escuro), onde a regra nao se aplica. * ========================================================================== */ :root { --3b-dourado-texto: #8f6526; } .item-price, .item-price-wrap .price, .listing-view .price, .property-cards-module .price, span.price { color: var(--3b-dourado-texto); } .threeb-search-cta-btn, .threeb-search-cta-btn:hover, .threeb-search-cta-btn:focus-visible { background-color: var(--3b-dourado-texto); color: #fff; } .threeb-search-cta-btn:hover, .threeb-search-cta-btn:focus-visible { background-color: var(--3b-verde); } /* Botao do Elementor com fundo dourado: mesmo problema, mesma correcao. */ .elementor-button[style*="c69a5a"], .elementor-button-wrapper .elementor-button.elementor-size-md, .elementor-widget-button .elementor-button { --e-button-bg: var(--3b-dourado-texto); } /* ========================================================================== * 8. HIERARQUIA DO PRECO * O preco era uma linha de tabela com o mesmo peso do IPTU. Nos cards ele * passa a ser o segundo elemento mais forte depois do titulo; na ficha do * imovel, a linha "Valor de Venda" ganha corpo e peso. * ========================================================================== */ .listing-view .item-price, .property-cards-module .item-price, .item-price-wrap .item-price { font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; } /* A linha "Valor de Venda" tinha corpo e peso proprios (18px/700 e verde) * para criar hierarquia na tabela de Detalhes. Removido a pedido do cliente * em 25/08/2026: a linha do preco tem de seguir exatamente a mesma * tipografia das outras (Condominio, IPTU, Area, ID). NAO reintroduzir sem * pedido explicito - a hierarquia do preco continua existindo nos CARDS * (regra .item-price logo acima), que e onde ela realmente pesa. */ /* ========================================================================== * 9. CARTAO DE CONTATO QUE ACOMPANHA A ROLAGEM * Sobravam cerca de 1.900px de coluna vazia ao lado do conteudo. * ========================================================================== */ @media (min-width: 992px) { .property-detail-wrap .sidebar-wrap, #property-detail-wrap .sidebar-wrap { position: sticky; top: 96px; align-self: flex-start; } } /* ========================================================================== * 10. O PISCA DO CARROSSEL DO CARD * Antes do slick montar, as 10 fotos do imovel ficam empilhadas e a segunda * aparece por baixo da primeira. Some sozinho quando o JS roda, mas em * ligacao lenta o visitante ve a pilha. Aqui o contentor ja' nasce recortado. * ========================================================================== */ .listing-image-wrap .houzez-listing-carousel:not(.slick-initialized) { max-height: 225px; overflow: hidden; } .listing-image-wrap .houzez-listing-carousel:not(.slick-initialized) > *:not(:first-child) { display: none; } /* ========================================================================== * 11. H1 SO' PARA LEITOR DE TELA * A home e' montada no Elementor e nao tinha nenhum

. O titulo entra * pelo filtro de saida (inc/ajustes-2026-08.php) e fica fora da vista, sem * mexer no layout. Nao usar display:none - isso o esconde do leitor tambem. * ========================================================================== */ /* Alvo de toque das setas da galeria do imovel. Quem desenha a seta e' o proprio Houzez, num