/* ========================================================================== Home pública — tema "Domus" (adaptado do Template04) Escopado em body.domus-home para não afetar as demais páginas do site. Cores principais herdam a identidade do tenant (--dm-primary / --dm-accent), com fallback para a paleta navy/laranja original do template. ========================================================================== */ body.domus-home { --dm-primary: var(--tenant-primary, #142b4f); --dm-primary-dark: color-mix(in srgb, var(--dm-primary) 55%, black); --dm-primary-light: color-mix(in srgb, var(--dm-primary) 70%, white); --dm-accent: var(--tenant-accent, #ff7a3d); --dm-accent-dark: color-mix(in srgb, var(--dm-accent) 85%, black); --dm-gold: #ffb03b; --dm-success: #17a864; --dm-light: #f5f7fb; --dm-light-alt: #eef1f8; --dm-surface: #ffffff; --dm-surface-soft: #fbfcff; --dm-gray: #6b7385; --dm-gray-light: #9aa1b3; --dm-border: #e7eaf3; --dm-border-strong: #d8deeb; --dm-ink: #18243a; --dm-font-head: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --dm-font-body: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --dm-radius-xl: 28px; --dm-radius-lg: 20px; --dm-radius-md: 14px; --dm-radius-sm: 10px; --dm-shadow-xs: 0 1px 2px rgba(12, 21, 38, 0.05); --dm-shadow-sm: 0 8px 24px rgba(12, 21, 38, 0.07); --dm-shadow-md: 0 18px 46px rgba(12, 21, 38, 0.11); --dm-shadow-lg: 0 28px 70px rgba(12, 21, 38, 0.18); --dm-ease: cubic-bezier(0.65, 0, 0.35, 1); font-family: var(--dm-font-body); color: var(--dm-gray); background: linear-gradient(180deg, #fff 0%, var(--dm-surface-soft) 52%, #fff 100%); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } .domus-home h1, .domus-home h2, .domus-home h3, .domus-home h4, .domus-home h5, .domus-home h6 { font-family: var(--dm-font-head); color: var(--dm-primary); font-weight: 700; line-height: 1.25; } /* No próprio , não só no body: em alguns Android Chrome um elemento position:fixed que extrapola a largura da viewport (o menu off-canvas abaixo, por exemplo) ainda conseguia "vazar" uma faixa de scroll horizontal e expor o fundo branco padrão do navegador na borda direita da tela. */ html { overflow-x: hidden; } html { scroll-behavior: smooth; scroll-padding-top: 96px; } body.domus-home { overflow-x: hidden; } .domus-home a { color: inherit; text-decoration: none; } .domus-home .container { max-width: 1200px; } /* ---------------------------------- Utilities ------------------------------ */ .dm-section-pad { position: relative; padding: 96px 0; } @media (max-width: 767px) { .dm-section-pad { padding: 64px 0; } } .dm-bg-light { background: linear-gradient(180deg, color-mix(in srgb, var(--dm-light) 90%, white) 0%, #fff 100%); border-top: 1px solid color-mix(in srgb, var(--dm-border) 82%, white); border-bottom: 1px solid color-mix(in srgb, var(--dm-border) 82%, white); } body.domus-home main#conteudo-principal > section.dm-section-pad, body.domus-home main#conteudo-principal > section.dm-trust-band, body.domus-home footer { content-visibility: auto; contain-intrinsic-size: auto 760px; } .dm-text-accent { color: #c2410c !important; } .dm-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--dm-font-head); font-weight: 800; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: #9a3412; background: color-mix(in srgb, var(--dm-accent) 10%, white); padding: 7px 18px 7px 14px; border-radius: 50px; margin-bottom: 18px; } .dm-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dm-accent); display: inline-block; animation: dm-pulse-dot 1.8s infinite; } @keyframes dm-pulse-dot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dm-accent) 55%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .dm-hero-content .dm-eyebrow { background: rgba(255,255,255,.12); color: #fff; } .dm-hero-content .dm-eyebrow::before { background: var(--dm-accent); } .dm-section-title { font-size: clamp(26px, 3.2vw, 40px); margin-bottom: 16px; letter-spacing: -0.5px; } .dm-section-head { max-width: 680px; margin-bottom: 46px; } .dm-section-head.mx-auto { text-align: center; margin-left: auto; margin-right: auto; } .dm-section-head p { color: var(--dm-gray); line-height: 1.75; font-size: 15.5px; } .dm-section-head .dm-section-title + p { margin-top: -4px; } .dm-btn { font-family: var(--dm-font-head); font-weight: 600; font-size: 14.5px; border-radius: 50px; padding: 13px 28px; transition: all .4s var(--dm-ease); border: none; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; box-shadow: var(--dm-shadow-xs); } .dm-btn-accent { background: #c2410c; color: #fff; box-shadow: 0 10px 24px rgba(194,65,12,.28); } .dm-btn-accent:hover { background: #9a3412; color: #fff; transform: translateY(-3px); } .dm-btn-wa { background: #128c3a; color: #fff; box-shadow: 0 10px 24px rgba(18,140,58,.28); } .dm-btn-wa:hover { background: #0f7a33; color: #fff; transform: translateY(-3px); } .dm-btn-outline-light { border: 1.5px solid rgba(255,255,255,.5); color: #fff; background: transparent; } .dm-btn-outline-light:hover { background: #fff; color: var(--dm-primary); transform: translateY(-3px); } .dm-btn-primary { background: var(--dm-primary); color: #fff; } .dm-btn-primary:hover { background: var(--dm-primary-dark); color: #fff; transform: translateY(-3px); } .domus-home a.dm-btn-accent, .domus-home a.dm-btn-primary, .domus-home a.dm-btn-wa, .domus-home button.dm-btn-accent, .domus-home button.dm-btn-primary, .domus-home button.dm-btn-wa { color: #fff; } .domus-home a.dm-btn-outline-light, .domus-home button.dm-btn-outline-light { color: #fff; } .domus-home a.dm-btn-outline-light:hover, .domus-home button.dm-btn-outline-light:hover { color: var(--dm-primary); } .dm-btn:focus-visible, .dm-search-tabs button:focus-visible, .dm-search-more:focus-visible, .dm-nav-toggle:focus-visible, .dm-icon-circle:focus-visible { outline: 3px solid color-mix(in srgb, var(--dm-accent) 42%, transparent); outline-offset: 3px; } .dm-link-arrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--dm-font-head); font-weight: 600; color: var(--dm-primary); font-size: 14.5px; } .dm-link-arrow i { transition: transform .35s var(--dm-ease); } .dm-link-arrow:hover { color: var(--dm-accent); } .dm-link-arrow:hover i { transform: translateX(6px); } /* ---------------------------------- Back-to-top --------------------------- */ #dmBackToTop { position: fixed; right: 24px; bottom: 24px; width: 46px; height: 46px; border-radius: 50%; background: var(--dm-primary); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 998; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all .4s var(--dm-ease); box-shadow: var(--dm-shadow-md); border: none; } #dmBackToTop.dm-show { opacity: 1; visibility: visible; transform: translateY(0); } #dmBackToTop:hover { background: var(--dm-accent); transform: translateY(-5px); } /* ---------------------------------- Header -------------------------------- */ .dm-header { position: fixed; top: 0; left: 0; right: 0; z-index: 900; padding: 16px 0; transition: all .45s var(--dm-ease); background: transparent; } /* .dm-nav-menu (o drawer mobile) é filho de .dm-header, então o z-index dele só vale dentro do contexto de empilhamento do próprio header — nunca "escapa" pra competir com irmãos do header no contexto raiz, não importa quão alto seja. Isso fazia o botão flutuante do WhatsApp e o banner de cookies (ambos z-index:9999, fora do header) ficarem por cima do menu aberto e engolirem o toque, mesmo com o menu "visualmente" por cima. Solução: elevar o próprio .dm-header (não o menu) quando o drawer está aberto, já que é ele quem decide a posição do header inteiro no contexto raiz. */ .dm-header:has(.dm-nav-menu.dm-open) { z-index: 10001; } .dm-header.dm-scrolled { background: color-mix(in srgb, var(--dm-primary-dark) 88%, transparent); backdrop-filter: blur(16px); box-shadow: 0 16px 42px rgba(12, 21, 38, 0.18); padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.09); } .dm-brand { font-family: var(--dm-font-head); font-weight: 800; font-size: 23px; color: #fff; display: flex; align-items: center; gap: 10px; text-shadow: 0 2px 10px rgba(8,14,26,.35); } .domus-home .dm-header .dm-brand, .domus-home .dm-header .dm-brand:hover { color: #fff; } .dm-brand span { color: var(--dm-accent); } .dm-brand-mark { width: 42px; height: 42px; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, var(--dm-accent), var(--dm-gold)); display: flex; align-items: center; justify-content: center; font-size: 19px; color: #fff; box-shadow: 0 8px 18px color-mix(in srgb, var(--dm-accent) 40%, transparent); } .dm-brand-mark img { width: 100%; height: 100%; object-fit: cover; } .dm-nav-menu { display: flex; align-items: center; gap: 32px; } .dm-nav-menu a { font-family: var(--dm-font-head); font-weight: 500; font-size: 14.5px; color: rgba(255,255,255,.85); position: relative; padding: 6px 0; } .dm-nav-menu a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--dm-accent); transition: width .35s var(--dm-ease); } .dm-nav-menu a:hover, .dm-nav-menu a.active { color: #fff; } .dm-nav-menu a:hover::after, .dm-nav-menu a.active::after { width: 100%; } /* CTA (ex.: "Cadastre sua Imobiliária") dentro do menu mobile: sem isto, a regra genérica ".dm-nav-menu a" acima (mais específica que ".dm-btn" sozinha) some com o padding/cor do botão e deixa a sublinha de hover aparecendo por baixo dele. */ .dm-nav-menu a.dm-btn { color: #fff; padding: 13px 28px; width: 100%; justify-content: center; margin-top: 4px; } .dm-nav-menu a.dm-btn::after { display: none; } .dm-nav-menu a.dm-btn:hover { color: #fff; } .dm-header-actions { display: flex; align-items: center; gap: 18px; } .dm-header-phone { display: flex; align-items: center; gap: 10px; color: #fff; } .dm-icon-circle { width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.12); color: #fff; flex-shrink: 0; border: none; transition: all .3s var(--dm-ease); } .dm-icon-circle:hover { background: var(--dm-accent); transform: translateY(-3px) rotate(8deg); } .dm-header-phone small { display: block; font-size: 11px; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .06em; } .dm-header-phone strong { font-family: var(--dm-font-head); font-size: 14.5px; } /* Ícone do hambúrguer/fechar desenhado só em CSS (sem depender da fonte de ícones Boxicons, carregada de um CDN externo): se essa fonte falhar ao carregar numa rede móvel mais instável, os dois botões continuam visíveis e funcionais em vez de sumirem sem deixar rastro. */ .dm-nav-toggle { display: none; position: relative; width: 42px; height: 42px; border-radius: 10px; background: rgba(255,255,255,.1); border: none; padding: 0; cursor: pointer; align-items: center; justify-content: center; } .dm-nav-toggle span, .dm-nav-toggle span::before, .dm-nav-toggle span::after { content: ""; position: absolute; left: 50%; width: 20px; height: 2px; background: #fff; border-radius: 2px; } .dm-nav-toggle span { top: 50%; transform: translate(-50%, -50%); } .dm-nav-toggle span::before { top: -7px; left: 0; } .dm-nav-toggle span::after { top: 7px; left: 0; } @media (max-width: 991px) { .dm-nav-menu { position: fixed; top: 0; right: 0; width: min(300px, 82vw); height: 100vh; background: var(--dm-primary-dark); flex-direction: column; align-items: flex-start; padding: 100px 32px 32px; gap: 20px; overflow-y: auto; /* Precisa ficar acima do botão flutuante do WhatsApp e do banner de cookies LGPD (ambos com z-index 9999 e fixos na parte de baixo da tela) — sem isto, um item perto do fim do menu (como o CTA de cadastro) fica visualmente correto mas o toque é capturado por um desses elementos por trás, sem navegar. */ transform: translateX(100%); transition: transform .45s var(--dm-ease); z-index: 10000; box-shadow: var(--dm-shadow-lg); } .dm-nav-menu.dm-open { transform: translateX(0); } .dm-header-phone { display: none; } .dm-nav-toggle { display: flex; } } .dm-nav-close { display: none; position: absolute; top: 22px; right: 22px; background: rgba(255,255,255,.1); border: none; width: 36px; height: 36px; border-radius: 50%; align-items: center; justify-content: center; cursor: pointer; } .dm-nav-close::before, .dm-nav-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; background: #fff; border-radius: 2px; } .dm-nav-close::before { transform: translate(-50%, -50%) rotate(45deg); } .dm-nav-close::after { transform: translate(-50%, -50%) rotate(-45deg); } @media (max-width: 991px) { .dm-nav-close { display: flex; } } .dm-nav-overlay { position: fixed; inset: 0; background: rgba(12,21,38,.6); z-index: 9999; opacity: 0; visibility: hidden; transition: all .4s var(--dm-ease); } .dm-nav-overlay.dm-show { opacity: 1; visibility: visible; } /* ----------------------------------- Hero --------------------------------- */ .dm-hero { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden; background: var(--dm-primary-dark); } .dm-hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.1); transition: opacity 1.6s ease, transform 8s linear; z-index: 0; } .dm-hero-slide-image { overflow: hidden; } .dm-hero-slide-image picture { display: block; height: 100%; width: 100%; } .dm-hero-slide-image img { display: block; height: 100%; object-fit: cover; object-position: center; width: 100%; } .dm-hero-slide.dm-active { opacity: 1; transform: scale(1); z-index: 1; } .dm-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,16,31,.75) 0%, rgba(9,16,31,.55) 45%, rgba(9,16,31,.92) 100%); z-index: 2; } .dm-hero-content { position: relative; z-index: 3; padding-top: 90px; } .dm-hero h1 { color: #fff; font-size: clamp(34px, 5vw, 60px); letter-spacing: -1px; margin-bottom: 20px; } .dm-hero h1 em { font-style: normal; color: var(--dm-accent); } .dm-hero p.dm-lead { color: rgba(255,255,255,.75); font-size: 17px; max-width: 560px; margin-bottom: 32px; } .dm-hero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 50px; } .dm-hero-stats { display: flex; gap: 40px; flex-wrap: wrap; } .dm-hero-stats .dm-stat b { display: block; font-family: var(--dm-font-head); font-size: 28px; color: #fff; } .dm-hero-stats .dm-stat span { color: rgba(255,255,255,.6); font-size: 13px; } /* Search box */ .dm-search-box { position: relative; z-index: 4; background: rgba(255,255,255,.94); border: 1px solid rgba(255,255,255,.7); border-radius: var(--dm-radius-xl); box-shadow: var(--dm-shadow-lg); padding: 12px; backdrop-filter: blur(18px); } .dm-search-mobile-toggle { display: none; width: 100%; border: 1px solid var(--dm-border); background: #fff; color: var(--dm-primary); border-radius: var(--dm-radius-lg); padding: 13px 16px; font-family: var(--dm-font-head); font-weight: 800; align-items: center; justify-content: space-between; } .dm-search-mobile-toggle span { display: inline-flex; align-items: center; gap: 8px; } .dm-search-tabs { display: flex; gap: 6px; padding: 8px 8px 0; } .dm-search-tabs button { border: none; background: transparent; font-family: var(--dm-font-head); font-weight: 700; font-size: 14px; color: var(--dm-gray); padding: 12px 20px; border-radius: 14px 14px 0 0; display: flex; align-items: center; gap: 8px; transition: all .3s var(--dm-ease); } .dm-search-tabs button.dm-active { color: #fff; background: linear-gradient(135deg, var(--dm-primary), var(--dm-primary-light)); box-shadow: 0 10px 22px color-mix(in srgb, var(--dm-primary) 22%, transparent); } .dm-search-tabs button.dm-active i { color: #fff; } .dm-search-tabs button:hover { color: var(--dm-accent); } .dm-search-form { display: flex; align-items: stretch; gap: 10px; background: var(--dm-light); border-radius: 0 20px 20px 20px; padding: 16px; flex-wrap: wrap; } .dm-search-field { flex: 1; min-width: 154px; display: flex; align-items: center; gap: 11px; padding: 8px 13px; border: 1px solid transparent; border-radius: var(--dm-radius-md); background: rgba(255,255,255,.68); transition: border-color .25s var(--dm-ease), background .25s var(--dm-ease), box-shadow .25s var(--dm-ease); } .dm-search-field-term { position: relative; min-width: min(280px, 100%); } .dm-search-field:focus-within { border-color: color-mix(in srgb, var(--dm-accent) 38%, white); background: #fff; box-shadow: 0 8px 20px rgba(12, 21, 38, 0.08); } .dm-search-field i { font-size: 19px; color: var(--dm-accent); } .dm-search-field label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--dm-gray-light); font-weight: 600; } .dm-search-field select, .dm-search-field input { border: none; background: transparent; font-family: var(--dm-font-body); font-weight: 500; color: var(--dm-primary); font-size: 14px; padding: 2px 0; width: 100%; } .dm-search-field select:focus, .dm-search-field input:focus { outline: none; } .dm-search-suggestions { position: absolute; left: 0; right: 0; top: calc(100% + 12px); z-index: 30; display: none; overflow: hidden; background: rgba(255,255,255,.98); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-lg); box-shadow: var(--dm-shadow-lg); backdrop-filter: blur(16px); } .dm-search-suggestions.dm-open { display: block; } .dm-suggestion-item { width: 100%; border: none; background: transparent; padding: 12px 14px; display: flex; align-items: center; gap: 12px; text-align: left; color: var(--dm-primary); transition: background .2s var(--dm-ease); } .dm-suggestion-item:hover, .dm-suggestion-item.dm-highlighted { background: var(--dm-light); } .dm-suggestion-icon { width: 34px; height: 34px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--dm-accent) 12%, white); color: var(--dm-accent); flex-shrink: 0; } .dm-suggestion-text { min-width: 0; } .dm-suggestion-text strong { display: block; font-family: var(--dm-font-head); font-size: 13.5px; color: var(--dm-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dm-suggestion-text span { display: block; font-size: 11.5px; color: var(--dm-gray-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dm-search-form .dm-btn-accent { padding: 13px 30px; white-space: nowrap; } .dm-search-more { border: 1px solid var(--dm-border); background: #fff; color: var(--dm-primary); font-family: var(--dm-font-head); font-weight: 700; font-size: 13.5px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; border-radius: 999px; transition: all .3s var(--dm-ease); } .dm-search-more:hover { color: var(--dm-accent); border-color: color-mix(in srgb, var(--dm-accent) 45%, white); transform: translateY(-2px); } .dm-active-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px 0; } .dm-active-chip { border: 1px solid color-mix(in srgb, var(--dm-primary) 16%, white); background: color-mix(in srgb, var(--dm-primary) 7%, white); color: var(--dm-primary); border-radius: 999px; padding: 7px 10px 7px 12px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--dm-font-head); font-weight: 700; font-size: 12px; } .dm-active-chip button { width: 19px; height: 19px; border: none; border-radius: 50%; background: rgba(255,255,255,.85); color: var(--dm-primary); display: inline-flex; align-items: center; justify-content: center; } .dm-active-chip.dm-clear-all { background: #fff; color: var(--dm-accent); border-color: color-mix(in srgb, var(--dm-accent) 30%, white); cursor: pointer; } .dm-advanced-panel { background: rgba(255,255,255,.92); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-lg); box-shadow: var(--dm-shadow-xs); } .dm-price-range { width: 100%; accent-color: var(--dm-accent); margin-top: 10px; } @media (max-width: 767px) { .dm-hero { min-height: auto; padding: 118px 0 44px; } .dm-hero-content { padding-top: 0; } .dm-hero h1 { font-size: 34px; line-height: 1.08; margin-bottom: 14px; } .dm-hero p.dm-lead { font-size: 15px; line-height: 1.7; margin-bottom: 22px; } .dm-hero-btns { gap: 10px; margin-bottom: 24px; } .dm-hero-btns .dm-btn { flex: 1 1 100%; justify-content: center; } .dm-hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .dm-hero-stats .dm-stat { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); border-radius: var(--dm-radius-md); padding: 12px; backdrop-filter: blur(10px); } .dm-hero-stats .dm-stat b { font-size: 22px; } .dm-hero-stats .dm-stat span { display: block; line-height: 1.35; } .dm-search-box { padding: 10px; border-radius: var(--dm-radius-lg); margin-top: 28px !important; } .dm-search-mobile-toggle { display: flex; } .dm-search-box.dm-mobile-collapsed .dm-search-tabs, .dm-search-box.dm-mobile-collapsed form { display: none; } .dm-search-box.dm-mobile-collapsed .dm-search-mobile-toggle > i { transform: rotate(180deg); } .dm-search-tabs { overflow-x: auto; padding: 10px 2px 0; scrollbar-width: none; } .dm-search-tabs::-webkit-scrollbar { display: none; } .dm-search-tabs button { flex: 0 0 auto; min-width: 112px; justify-content: center; border-radius: 999px; } .dm-search-form { flex-direction: column; } .dm-search-field { border-right: none; border-bottom: none; padding: 13px 12px; min-height: 58px; background: #fff; } .dm-search-field-term { min-width: 100%; } .dm-search-suggestions { position: fixed; left: 16px; right: 16px; top: auto; bottom: 18px; max-height: min(70vh, 420px); overflow-y: auto; } .dm-search-form .dm-btn-accent, .dm-search-more { width: 100%; justify-content: center; min-height: 48px; } .dm-active-chips { flex-wrap: nowrap; overflow-x: auto; padding: 10px 2px 0; scrollbar-width: none; } .dm-active-chips::-webkit-scrollbar { display: none; } .dm-active-chip { flex: 0 0 auto; } .dm-advanced-panel { margin-left: 0 !important; margin-right: 0 !important; padding: 14px !important; } } /* -------------------------------- Categories ------------------------------- */ .dm-cat-card { background: var(--dm-surface); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-lg); padding: 28px 18px; text-align: center; transition: all .4s var(--dm-ease); height: 100%; box-shadow: var(--dm-shadow-xs); } .dm-cat-card .dm-cat-icon { width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 16px; background: var(--dm-light); display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--dm-primary); transition: all .4s var(--dm-ease); } .dm-cat-card h6, .dm-cat-title { font-size: 14.5px; margin-bottom: 6px; font-weight: 800; color: var(--dm-ink); } .dm-cat-card span { font-size: 12.5px; color: #5f6b7a; font-weight: 700; } .dm-cat-card small { display: block; margin-top: 14px; font-family: var(--dm-font-head); font-weight: 800; font-size: 11.5px; color: #c2410c; } .dm-cat-card:hover { transform: translateY(-8px); box-shadow: var(--dm-shadow-md); border-color: color-mix(in srgb, var(--dm-accent) 26%, white); } .dm-cat-card:hover .dm-cat-icon { background: var(--dm-accent); color: #fff; transform: rotate(-8deg) scale(1.08); } /* -------------------------------- Geo banner -------------------------------- */ .dm-geo-banner { display: flex; flex-direction: column; gap: 14px; background: rgba(255,255,255,.86); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-lg); padding: 18px 20px; font-size: 14px; color: var(--dm-primary); box-shadow: var(--dm-shadow-sm); } .dm-geo-banner-label { display: flex; align-items: center; } .dm-geo-banner-label i { color: var(--dm-accent); margin-right: 6px; font-size: 17px; } .dm-geo-banner a { font-weight: 600; color: var(--dm-accent); white-space: nowrap; } .dm-geo-banner a:hover { text-decoration: underline; } .dm-geo-banner-manual { align-items: flex-start; background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(245,247,251,.92)); } .dm-geo-use-location { align-self: flex-start; white-space: nowrap; } .dm-geo-feedback { border-radius: 14px; border: 1px solid color-mix(in srgb, var(--dm-accent) 22%, white); background: color-mix(in srgb, var(--dm-accent) 9%, white); color: var(--dm-primary); font-size: 13px; font-weight: 600; line-height: 1.45; padding: 10px 12px; } .dm-geo-feedback.dm-error { border-color: rgba(194, 65, 12, .22); background: rgba(194, 65, 12, .08); color: #8a3410; } .dm-geo-feedback.dm-success { border-color: rgba(22, 163, 74, .22); background: rgba(22, 163, 74, .08); color: #14532d; } .dm-geo-slider { width: 100%; --dm-geo-thumb: 20px; } .dm-geo-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; border-radius: 4px; background: var(--dm-border); outline: none; cursor: pointer; } .dm-geo-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--dm-accent); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); cursor: pointer; } .dm-geo-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--dm-accent); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); cursor: pointer; } .dm-geo-range::-moz-range-track { height: 6px; border-radius: 4px; background: var(--dm-border); } .dm-geo-range-marks { position: relative; height: 18px; margin: 8px 0 0; font-size: 11px; font-weight: 700; color: var(--dm-gray-light); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; } .dm-geo-range-marks span { position: absolute; top: 0; transform: translateX(-50%); } .dm-geo-range-marks span:nth-child(1) { left: 0; transform: translateX(0); } .dm-geo-range-marks span:nth-child(2) { left: 20%; } .dm-geo-range-marks span:nth-child(3) { left: 40%; } .dm-geo-range-marks span:nth-child(4) { left: 60%; } .dm-geo-range-marks span:nth-child(5) { left: 80%; } .dm-geo-range-marks span:nth-child(6) { left: 100%; transform: translateX(-100%); } @media (max-width: 480px) { .dm-geo-range-marks { font-size: 9.5px; letter-spacing: 0; } .dm-geo-use-location { width: 100%; justify-content: center; } .dm-geo-feedback { font-size: 12px; } } @media (max-width: 420px) { .dm-brand { font-size: 18px; max-width: 68vw; } .dm-brand-mark { width: 36px; height: 36px; border-radius: 12px; } .dm-header-actions { gap: 8px; } .dm-hero h1 { font-size: 30px; } .dm-hero-stats { grid-template-columns: 1fr; } .dm-property-badge { font-size: 10.5px; padding: 6px 10px; } .dm-property-badge.dm-purpose { right: 10px; } .dm-property-badge.dm-highlight { left: 10px; bottom: 10px; } .dm-property-topline { align-items: flex-start; flex-direction: column; gap: 6px; } .dm-property-type { max-width: 100%; } .dm-property-ref { white-space: normal; } } #imoveis.dm-loading { opacity: .72; pointer-events: none; transition: opacity .2s var(--dm-ease); } #imoveis.dm-loading::after { content: "Atualizando imóveis..."; position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 80; background: var(--dm-primary); color: #fff; border-radius: 999px; padding: 11px 18px; font-family: var(--dm-font-head); font-weight: 800; font-size: 13px; box-shadow: var(--dm-shadow-lg); } #imoveis [data-aos] { opacity: 1 !important; transform: none !important; } /* -------------------------------- Properties -------------------------------- */ .dm-results-toolbar { background: rgba(255,255,255,.68); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-xl); padding: 18px 20px; box-shadow: var(--dm-shadow-xs); backdrop-filter: blur(12px); } .dm-results-toolbar .dm-section-title { font-size: clamp(24px, 2.4vw, 34px); } .dm-results-context { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: rgba(255,255,255,.58); border: 1px solid color-mix(in srgb, var(--dm-border) 84%, white); border-radius: var(--dm-radius-lg); padding: 12px 14px; box-shadow: var(--dm-shadow-xs); } .dm-results-context-main, .dm-results-context-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .dm-results-context-main span, .dm-results-context-chips span { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 7px 10px; font-size: 12px; font-family: var(--dm-font-head); font-weight: 700; } .dm-results-context-main span { background: var(--dm-primary); color: #fff; } .dm-results-context-main i { color: color-mix(in srgb, var(--dm-accent) 86%, white); } .dm-results-context-chips span { background: #fff; border: 1px solid var(--dm-border); color: var(--dm-gray); } .dm-results-context-chips i { color: var(--dm-accent); } .dm-results-context strong { font-weight: 900; } .dm-order-select { width: auto; min-width: 190px; border-color: var(--dm-border); border-radius: 999px; color: var(--dm-primary); font-family: var(--dm-font-head); font-weight: 700; font-size: 13px; padding: 9px 38px 9px 16px; box-shadow: var(--dm-shadow-xs); } .dm-clear-filter { background: #fff; color: var(--dm-primary); border: 1px solid var(--dm-border); padding: 9px 17px; font-size: 13px; min-height: 40px; } .dm-clear-filter:hover { color: #fff; background: var(--dm-primary); border-color: var(--dm-primary); } .dm-map-toggle { background: #fff; color: var(--dm-primary); border: 1px solid var(--dm-border); padding: 9px 17px; font-size: 13px; min-height: 40px; } .dm-map-toggle:hover, .dm-map-toggle.dm-active { color: #fff; background: var(--dm-primary); border-color: var(--dm-primary); box-shadow: 0 8px 18px color-mix(in srgb, var(--dm-primary) 20%, transparent); } .dm-save-search { background: color-mix(in srgb, var(--dm-accent) 10%, white); color: var(--dm-primary); border: 1px solid color-mix(in srgb, var(--dm-accent) 26%, white); padding: 9px 17px; font-size: 13px; min-height: 40px; } .dm-save-search:hover, .dm-save-search.dm-saved { background: var(--dm-accent); border-color: var(--dm-accent); color: #fff; } .dm-list-map-shell { display: none; overflow: hidden; border: 1px solid rgba(216, 222, 235, .9); border-radius: var(--dm-radius-xl); background: rgba(255,255,255,.84); box-shadow: var(--dm-shadow-sm); } .dm-list-map-shell.dm-open { display: block; animation: dmFadeUp .28s var(--dm-ease); } .dm-list-map-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--dm-border); } .dm-list-map-head span { display: flex; align-items: center; gap: 8px; font-family: var(--dm-font-head); font-weight: 900; color: var(--dm-primary); } .dm-list-map-head span i { color: var(--dm-accent); } .dm-list-map-head small { display: block; margin-top: 2px; color: var(--dm-gray-light); font-weight: 600; } .dm-map-close { width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--dm-border); background: #fff; color: var(--dm-primary); } .dm-map-close:hover { background: var(--dm-primary); color: #fff; } .dm-public-results-map { height: 360px; background: var(--dm-light); } .dm-public-results-map .leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: var(--dm-shadow-md); } .dm-public-results-map.dm-map-loading, .dm-map-fallback { align-items: center; color: var(--dm-gray-light); display: flex; font-family: var(--dm-font-head); font-weight: 800; justify-content: center; min-height: 360px; text-align: center; } .dm-public-results-map.dm-map-loading::before { content: "Carregando mapa..."; } .dm-map-cluster { background: transparent; border: none; } .dm-map-cluster div { width: 54px; height: 54px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--dm-primary), var(--dm-accent)); border: 3px solid rgba(255,255,255,.92); box-shadow: 0 14px 30px rgba(12, 21, 38, .28); font-family: var(--dm-font-head); } .dm-map-cluster strong { font-size: 18px; line-height: 1; } .dm-map-cluster span { margin-top: 3px; font-size: 9px; font-weight: 800; text-transform: uppercase; } .dm-map-popup { min-width: 190px; } .dm-map-popup img { width: 100%; height: 96px; object-fit: cover; border-radius: 12px; margin-bottom: 10px; display: block; } .dm-map-popup strong { display: block; margin-bottom: 5px; color: var(--dm-primary); font-family: var(--dm-font-head); } .dm-map-popup span { display: block; color: var(--dm-accent); font-weight: 800; margin-bottom: 4px; } .dm-map-popup small { display: block; color: var(--dm-gray-light); margin-bottom: 10px; } .dm-map-popup a { display: inline-flex; align-items: center; gap: 6px; color: var(--dm-primary); font-weight: 800; } .dm-empty-state { position: relative; overflow: hidden; padding: 34px; background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(244,247,251,.82)); border: 1px solid rgba(216, 222, 235, .9); border-radius: var(--dm-radius-xl); box-shadow: var(--dm-shadow-sm); } .dm-empty-state::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--dm-accent) 14%, transparent), transparent 32%); pointer-events: none; } .dm-empty-state > * { position: relative; z-index: 1; } .dm-empty-main { display: flex; align-items: center; gap: 22px; max-width: 860px; } .dm-empty-icon { width: 82px; height: 82px; border-radius: 26px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--dm-border); color: var(--dm-primary); font-size: 40px; box-shadow: var(--dm-shadow-sm); flex: 0 0 82px; } .dm-empty-kicker { display: inline-flex; align-items: center; margin-bottom: 7px; color: var(--dm-accent); font-family: var(--dm-font-head); font-weight: 900; font-size: 12px; text-transform: uppercase; } .dm-empty-state h4 { margin-bottom: 8px; color: var(--dm-primary); font-size: clamp(22px, 2.3vw, 30px); } .dm-empty-state p { max-width: 720px; color: var(--dm-gray); line-height: 1.7; margin-bottom: 0; } .dm-empty-filters, .dm-empty-tips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; } .dm-empty-filters span, .dm-empty-tips span { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--dm-border); background: rgba(255,255,255,.78); color: var(--dm-primary); border-radius: 999px; padding: 9px 13px; font-size: 12.5px; font-weight: 700; } .dm-empty-filters i, .dm-empty-tips i { color: var(--dm-accent); } .dm-empty-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; } .dm-empty-actions .dm-btn { min-height: 44px; } .dm-btn-soft { background: #fff; border: 1px solid var(--dm-border); color: var(--dm-primary); } .dm-btn-soft:hover { background: var(--dm-primary); border-color: var(--dm-primary); color: #fff; } .dm-empty-actions .dm-btn-wa { background: #128c3a; color: #fff; border-color: #128c3a; } .dm-empty-actions .dm-btn-wa:hover { background: #0f7a33; border-color: #0f7a33; } .dm-filter-bar { display: flex; gap: 10px; flex-wrap: wrap; padding: 4px; border: 1px solid var(--dm-border); border-radius: 999px; background: rgba(255,255,255,.72); } .dm-filter-bar a { border: 1px solid transparent; background: transparent; color: var(--dm-gray); font-family: var(--dm-font-head); font-weight: 700; font-size: 13px; padding: 8px 18px; border-radius: 999px; transition: all .35s var(--dm-ease); display: inline-block; } .dm-filter-bar a.dm-active, .dm-filter-bar a:hover { background: var(--dm-primary); border-color: var(--dm-primary); color: #fff; box-shadow: 0 8px 18px color-mix(in srgb, var(--dm-primary) 20%, transparent); } .dm-property-card { background: var(--dm-surface); border: 1px solid rgba(216, 222, 235, .82); border-radius: var(--dm-radius-xl); overflow: hidden; box-shadow: var(--dm-shadow-sm); transition: all .5s var(--dm-ease); height: 100%; display: flex; flex-direction: column; } .dm-property-card:hover { box-shadow: var(--dm-shadow-lg); transform: translateY(-6px); border-color: color-mix(in srgb, var(--dm-accent) 28%, white); } .dm-property-media { position: relative; overflow: hidden; aspect-ratio: 4/3; } .dm-property-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--dm-ease); } .dm-property-media [data-card-main-image] { transition: transform .7s var(--dm-ease), opacity .18s var(--dm-ease); } .dm-property-media [data-card-main-image].dm-swapping { opacity: .42; } .dm-property-card:hover .dm-property-media img { transform: scale(1.1); } .dm-property-badge { position: absolute; top: 14px; left: 14px; background: #c2410c; color: #fff; font-family: var(--dm-font-head); font-weight: 800; font-size: 11.5px; padding: 6px 14px; border-radius: 999px; z-index: 2; box-shadow: 0 8px 18px rgba(12, 21, 38, .18); } .dm-property-badge.dm-rent { background: var(--dm-primary); } .dm-property-badge.dm-purpose { left: auto; right: 14px; } .dm-property-badge.dm-highlight { top: auto; bottom: 14px; left: 14px; background: var(--dm-gold); color: #3a2a00; } .dm-property-media:has(.dm-property-thumbs) .dm-property-badge.dm-highlight { bottom: 64px; } .dm-property-photo-count { position: absolute; left: 14px; top: 52px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 6px 10px; border-radius: 999px; background: rgba(12, 21, 38, .7); color: #fff; backdrop-filter: blur(12px); font-family: var(--dm-font-head); font-size: 11.5px; font-weight: 900; box-shadow: 0 8px 18px rgba(12, 21, 38, .18); } .dm-property-thumbs { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 3; display: flex; gap: 7px; padding: 6px; border-radius: 16px; background: rgba(12, 21, 38, .58); backdrop-filter: blur(14px); opacity: 1; transform: translateY(0); transition: all .28s var(--dm-ease); } .dm-property-card:hover .dm-property-thumbs, .dm-property-card:focus-within .dm-property-thumbs { background: rgba(12, 21, 38, .68); } .dm-property-thumbs button { width: 42px; height: 34px; padding: 0; overflow: hidden; border: 2px solid rgba(255,255,255,.44); border-radius: 10px; background: transparent; opacity: .82; transition: all .24s var(--dm-ease); } .dm-property-thumbs button.dm-active, .dm-property-thumbs button:hover { opacity: 1; border-color: var(--dm-accent); transform: translateY(-2px); } .dm-property-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; transition: none; } .dm-property-card:hover .dm-property-thumbs img { transform: none; } .dm-property-copy.dm-copied { background: var(--dm-success) !important; color: #fff !important; } .dm-property-save.dm-active { background: #ef4444 !important; color: #fff !important; } .dm-property-floating-actions { align-items: center; display: flex; flex-direction: column; gap: 8px; position: absolute; right: 14px; top: 54px; z-index: 4; } .dm-property-floating-actions a, .dm-property-floating-actions button { align-items: center; background: rgba(255,255,255,.94); border: 1px solid rgba(255,255,255,.7); border-radius: 50%; box-shadow: 0 10px 22px rgba(12,21,38,.2); color: var(--dm-primary); display: inline-flex; height: 42px; justify-content: center; transition: all .25s var(--dm-ease); width: 42px; border: 0; } .dm-property-floating-actions a:hover, .dm-property-floating-actions button:hover { background: #fff; color: var(--dm-accent); transform: translateY(-2px); } .dm-property-floating-actions .dm-property-save:hover, .dm-property-floating-actions .dm-property-save.dm-active { background: #ef4444; color: #fff; } .dm-property-floating-actions i { font-size: 20px; } .dm-property-body { padding: 22px; display: flex; flex-direction: column; flex: 1; } .dm-property-topline { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .dm-property-type { border: 1px solid var(--dm-border); background: var(--dm-light); color: var(--dm-primary-dark); border-radius: 999px; padding: 5px 10px; font-family: var(--dm-font-head); font-size: 11px; font-weight: 800; line-height: 1; max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dm-property-ref { color: var(--dm-gray-light); font-size: 11px; font-weight: 600; white-space: nowrap; } .dm-property-price { display: grid; gap: 7px; font-family: var(--dm-font-head); color: var(--dm-primary); } .dm-price-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-bottom: 7px; border-bottom: 1px solid color-mix(in srgb, var(--dm-border) 68%, white); } .dm-price-row:last-child { border-bottom: none; padding-bottom: 0; } .dm-price-row small { display: block; font-size: 10.5px; color: #5f6b7a; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .dm-price-row strong { color: var(--dm-primary); font-size: 18px; line-height: 1.1; white-space: nowrap; } .dm-price-row strong span { font-size: 12px; color: #5f6b7a; font-weight: 700; } .dm-rent-price strong { color: #c2410c; } .dm-property-title { font-size: 16px; margin: 12px 0 7px; color: var(--dm-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 40px; } .dm-property-title a:hover { color: var(--dm-accent); } .dm-property-loc { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #64748b; margin-bottom: 14px; min-height: 20px; } .dm-property-loc i { color: var(--dm-accent); } .dm-property-agency { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dm-gray); margin: -8px 0 14px; } .dm-property-agency i { color: var(--dm-accent); font-size: 14px; } .dm-property-agency-logo { width: 16px; height: 16px; object-fit: contain; border-radius: 3px; } .dm-property-feats { display: flex; gap: 14px; flex-wrap: wrap; padding-top: 14px; border-top: 1px dashed var(--dm-border); margin-bottom: 14px; } .dm-property-feats div { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--dm-gray); background: color-mix(in srgb, var(--dm-light) 70%, white); border: 1px solid color-mix(in srgb, var(--dm-border) 68%, white); border-radius: 999px; padding: 5px 9px; } .dm-property-feats i { color: var(--dm-primary); font-size: 15px; } .dm-property-actions { display: flex; gap: 8px; margin-top: auto; } .dm-property-actions .dm-btn { display: inline-flex; align-items: center; min-height: 44px; border-radius: 14px; justify-content: center; padding: 10px 12px; font-size: 13px; line-height: 1; white-space: nowrap; } .dm-property-actions .dm-btn-primary { flex: 1 1 auto; min-width: 118px; gap: 7px; } .dm-property-actions .dm-btn-compare { flex: 0 0 44px; width: 44px; min-width: 44px; background: #fff; color: var(--dm-primary); border: 1px solid var(--dm-border); padding: 0; } .dm-property-actions .dm-btn-compare:hover, .dm-property-actions .dm-btn-compare.dm-active { background: var(--dm-primary); border-color: var(--dm-primary); color: #fff; } .dm-property-actions .dm-btn-wa { flex: 0 0 44px; width: 44px; min-width: 44px; background: #128c3a; color: #fff; padding: 0; } .dm-property-actions .dm-btn-wa:hover { background: #0f7a33; } .dm-property-actions .dm-btn-compare i, .dm-property-actions .dm-btn-wa i { font-size: 18px; line-height: 1; } .dm-compare-tray { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 120%); z-index: 1040; width: min(920px, calc(100vw - 28px)); border: 1px solid rgba(216, 222, 235, .9); border-radius: var(--dm-radius-xl); background: rgba(255,255,255,.92); backdrop-filter: blur(18px); box-shadow: var(--dm-shadow-lg); transition: transform .34s var(--dm-ease); } .dm-compare-tray.dm-show { transform: translate(-50%, 0); } .dm-compare-tray-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 14px; } .dm-compare-items { display: flex; gap: 10px; overflow: hidden; } .dm-compare-item { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); background: #fff; padding: 8px; } .dm-compare-item img { width: 48px; height: 42px; object-fit: cover; border-radius: 10px; flex-shrink: 0; } .dm-compare-item strong { display: block; color: var(--dm-primary); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dm-compare-item small { display: block; color: var(--dm-gray-light); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dm-compare-actions { display: flex; align-items: center; gap: 8px; } .dm-compare-clear { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--dm-border); background: #fff; color: var(--dm-primary); } .dm-compare-clear:hover { background: var(--dm-primary); color: #fff; } .dm-compare-lock { overflow: hidden; } .dm-compare-modal { position: fixed; inset: 0; z-index: 1060; display: none; } .dm-compare-modal.dm-open { display: block; } .dm-compare-backdrop { position: absolute; inset: 0; background: rgba(8, 18, 34, .56); backdrop-filter: blur(12px); } .dm-compare-dialog { position: relative; width: min(1180px, calc(100vw - 32px)); max-height: calc(100vh - 44px); margin: 22px auto; overflow: hidden; border-radius: 28px; border: 1px solid rgba(255,255,255,.24); background: rgba(248,250,252,.96); box-shadow: 0 32px 80px rgba(8, 18, 34, .34); animation: dmFadeUp .24s var(--dm-ease); } .dm-compare-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 24px 26px 18px; border-bottom: 1px solid rgba(216, 222, 235, .9); background: radial-gradient(circle at top right, color-mix(in srgb, var(--dm-accent) 14%, transparent), transparent 34%), rgba(255,255,255,.78); } .dm-compare-head span { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--dm-accent); font-family: var(--dm-font-head); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; } .dm-compare-head h2 { margin: 0; color: var(--dm-primary); font-size: clamp(24px, 3vw, 34px); } .dm-compare-head button { width: 42px; height: 42px; border: 1px solid var(--dm-border); border-radius: 14px; background: #fff; color: var(--dm-primary); font-size: 22px; transition: all .24s var(--dm-ease); } .dm-compare-head button:hover { background: var(--dm-primary); color: #fff; } .dm-compare-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px 18px 0; background: rgba(255,255,255,.72); } .dm-compare-summary:empty { display: none; } .dm-compare-highlight { align-items: center; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--dm-accent) 12%, transparent), transparent 34%), #fff; border: 1px solid rgba(216,222,235,.92); border-radius: 18px; display: flex; gap: 12px; min-width: 0; padding: 13px; box-shadow: 0 12px 28px rgba(8,18,34,.06); } .dm-compare-highlight > span { align-items: center; background: var(--dm-primary); border-radius: 14px; color: #fff; display: inline-flex; flex: 0 0 42px; height: 42px; justify-content: center; width: 42px; } .dm-compare-highlight i { font-size: 20px; } .dm-compare-highlight small, .dm-compare-highlight strong, .dm-compare-highlight em { display: block; min-width: 0; } .dm-compare-highlight small { color: var(--dm-accent); font-family: var(--dm-font-head); font-size: 11px; font-weight: 900; text-transform: uppercase; } .dm-compare-highlight strong { color: var(--dm-primary); font-family: var(--dm-font-head); font-size: 14px; font-weight: 900; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dm-compare-highlight em { color: var(--dm-gray-light); font-size: 11.5px; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dm-compare-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; max-height: calc(100vh - 326px); overflow: auto; padding: 18px; } .dm-compare-column { overflow: hidden; border: 1px solid rgba(216, 222, 235, .9); border-radius: 22px; background: #fff; box-shadow: var(--dm-shadow-sm); } .dm-compare-photo { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--dm-light); } .dm-compare-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .42s var(--dm-ease); } .dm-compare-column:hover .dm-compare-photo img { transform: scale(1.05); } .dm-compare-column-body { padding: 16px; } .dm-compare-purpose { display: inline-flex; width: fit-content; margin-bottom: 9px; padding: 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--dm-accent) 10%, white); color: var(--dm-accent); font-family: var(--dm-font-head); font-size: 11px; font-weight: 900; } .dm-compare-column h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.28; } .dm-compare-column h3 a { color: var(--dm-primary); } .dm-compare-column p { display: flex; align-items: flex-start; gap: 6px; min-height: 38px; margin: 0 0 10px; color: var(--dm-gray-light); font-size: 13px; line-height: 1.45; } .dm-compare-column p i { color: var(--dm-accent); margin-top: 2px; } .dm-compare-price { display: block; margin-bottom: 14px; color: var(--dm-primary); font-family: var(--dm-font-head); font-size: 14px; } .dm-compare-column ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .dm-compare-column li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: 12px; background: var(--dm-light); color: var(--dm-primary); } .dm-compare-column li span { display: inline-flex; align-items: center; gap: 7px; color: var(--dm-gray-light); font-size: 12px; } .dm-compare-column li i { color: var(--dm-accent); } .dm-compare-column li strong { font-size: 12px; text-align: right; } .dm-compare-detail { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; color: var(--dm-primary); font-family: var(--dm-font-head); font-size: 13px; font-weight: 900; } .dm-compare-empty { grid-column: 1 / -1; padding: 44px 20px; text-align: center; color: var(--dm-gray-light); } .dm-compare-empty i { display: block; margin-bottom: 12px; color: var(--dm-accent); font-size: 42px; } .dm-compare-empty h3 { color: var(--dm-primary); } .dm-compare-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 18px; border-top: 1px solid rgba(216, 222, 235, .9); background: rgba(255,255,255,.82); } .dm-compare-foot .dm-btn { min-height: 42px; border-radius: 999px; padding: 10px 16px; } @media (max-width: 767px) { .dm-results-toolbar { padding: 16px; border-radius: var(--dm-radius-lg); } .dm-results-toolbar .dm-section-title { font-size: 24px; } .dm-results-toolbar small { display: block; line-height: 1.5; margin-top: 4px; } .dm-results-toolbar > div:last-child, .dm-results-context, .dm-results-context-main, .dm-results-context-chips, .dm-filter-bar, .dm-order-select, .dm-clear-filter { width: 100%; } .dm-results-context { align-items: stretch; } .dm-results-context-main span, .dm-results-context-chips span { width: 100%; justify-content: center; } .dm-filter-bar { border-radius: var(--dm-radius-md); } .dm-filter-bar a { flex: 1; text-align: center; padding-left: 10px; padding-right: 10px; } .dm-order-select { min-width: 100%; } .dm-clear-filter, .dm-map-toggle, .dm-save-search { justify-content: center; width: 100%; } .dm-public-results-map { height: 300px; } .dm-empty-state { padding: 24px; } .dm-empty-main { align-items: flex-start; flex-direction: column; gap: 16px; } .dm-empty-icon { width: 68px; height: 68px; border-radius: 22px; font-size: 34px; flex-basis: 68px; } .dm-empty-actions, .dm-empty-actions .dm-btn, .dm-empty-filters span, .dm-empty-tips span { width: 100%; justify-content: center; } .dm-property-card { border-radius: var(--dm-radius-lg); box-shadow: 0 10px 28px rgba(12, 21, 38, 0.09); } .dm-property-card:hover { transform: none; } .dm-property-media { aspect-ratio: 16/11; } .dm-property-thumbs { opacity: 1; transform: none; left: 12px; right: 12px; bottom: 12px; overflow-x: auto; } .dm-property-thumbs button { width: 38px; height: 30px; flex: 0 0 38px; } .dm-property-photo-count { left: 12px; top: 48px; } .dm-property-floating-actions { right: 12px; top: 48px; } .dm-property-floating-actions a, .dm-property-floating-actions button { height: 40px; width: 40px; } .dm-compare-tray-inner { grid-template-columns: 1fr; } .dm-compare-items { flex-direction: column; } .dm-compare-actions .dm-btn { flex: 1; justify-content: center; } .dm-compare-dialog { width: calc(100vw - 20px); margin: 10px auto; max-height: calc(100vh - 20px); border-radius: 22px; } .dm-compare-head { padding: 18px; } .dm-compare-summary { grid-template-columns: 1fr; padding: 12px 12px 0; } .dm-compare-highlight { padding: 11px; } .dm-compare-board { display: flex; gap: 12px; overflow-x: auto; max-height: calc(100vh - 388px); scroll-snap-type: x mandatory; } .dm-compare-column { min-width: 82vw; scroll-snap-align: start; } .dm-compare-foot { flex-direction: column; } .dm-compare-foot .dm-btn { width: 100%; justify-content: center; } .dm-property-body { padding: 18px; } .dm-property-topline { margin-bottom: 10px; } .dm-property-type { max-width: 64%; } .dm-property-title { min-height: auto; font-size: 15.5px; } .dm-price-row { align-items: flex-start; flex-direction: column; gap: 3px; } .dm-price-row strong { font-size: 17px; white-space: normal; } .dm-property-loc { align-items: flex-start; line-height: 1.45; } .dm-property-feats { gap: 8px; margin-bottom: 12px; } .dm-property-feats div { font-size: 12px; padding: 6px 9px; } .dm-property-actions { position: sticky; bottom: 8px; z-index: 3; background: rgba(255,255,255,.86); border: 1px solid var(--dm-border); border-radius: 999px; padding: 6px; backdrop-filter: blur(12px); box-shadow: var(--dm-shadow-sm); } .dm-property-actions .dm-btn { min-height: 44px; border-radius: 999px; font-size: 12.5px; } } /* --------------------------------- Trust band -------------------------------- */ .dm-trust-band { position: relative; padding: 78px 0; background: linear-gradient(135deg, var(--dm-primary-dark), var(--dm-primary)); border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); } .dm-trust-shell { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: 42px; color: #fff; } .dm-trust-shell .dm-eyebrow { background: rgba(255,255,255,.12); color: #fff; } .dm-trust-shell h2 { color: #fff; font-size: clamp(26px, 3vw, 38px); margin-bottom: 14px; } .dm-trust-shell p { color: rgba(255,255,255,.72); margin-bottom: 0; line-height: 1.75; } .dm-trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .dm-trust-grid > div { width: auto; max-width: none; flex: initial; } .dm-stat-item { text-align: center; color: #fff; } .dm-trust-grid .dm-stat-item { height: 100%; padding: 22px 14px; border-radius: var(--dm-radius-lg); background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(12px); } .dm-stat-item i { font-size: 32px; color: var(--dm-accent); margin-bottom: 12px; display: inline-block; } .dm-stat-item .dm-counter { font-family: var(--dm-font-head); font-size: 38px; font-weight: 800; color: #fff; display: block; line-height: 1; } .dm-stat-item p { color: rgba(255,255,255,.72); margin-top: 8px; margin-bottom: 0; font-size: 13.5px; line-height: 1.35; } @media (max-width: 991px) { .dm-trust-shell { grid-template-columns: 1fr; text-align: center; } .dm-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dm-personalized-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dm-saved-search-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .dm-trust-band { padding: 58px 0; } .dm-trust-shell { gap: 24px; } .dm-trust-grid { gap: 10px; } .dm-trust-grid .dm-stat-item { padding: 18px 10px; } .dm-stat-item .dm-counter { font-size: 30px; } .dm-about-proof { margin-top: 18px; } .dm-proof-row { justify-content: center; } .dm-personalized-grid { grid-template-columns: 1fr; } .dm-personalized-card { grid-template-columns: 118px minmax(0, 1fr); } .dm-personalized-media { min-height: 132px; } .dm-saved-search-grid { grid-template-columns: 1fr; } .dm-saved-search-card { grid-template-columns: 46px minmax(0, 1fr); padding: 15px; } .dm-saved-search-icon { width: 46px; height: 46px; border-radius: 16px; } .dm-saved-search-actions a, .dm-saved-search-actions button { flex: 1; } .dm-saved-search-actions button[data-remove-search] { flex: 0 0 38px; width: 38px; } } @media (max-width: 420px) { .dm-trust-grid { grid-template-columns: 1fr; } } /* ----------------------------------- About ------------------------------------ */ .dm-check-list li { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-weight: 500; color: var(--dm-primary); font-size: 15px; } .dm-check-list i { width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--dm-accent) 12%, white); color: var(--dm-accent); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .dm-about-icon { width: 92px; height: 92px; border-radius: 26px; background: linear-gradient(135deg, var(--dm-primary), var(--dm-primary-light)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 40px; box-shadow: var(--dm-shadow-lg); } .dm-about-proof { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; background: #fff; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-lg); padding: 14px 18px; box-shadow: var(--dm-shadow-sm); } .dm-about-proof strong { font-family: var(--dm-font-head); font-size: 28px; color: var(--dm-primary); line-height: 1; } .dm-about-proof span { font-size: 12px; color: #5f6b7a; font-weight: 800; } .dm-proof-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 18px; } .dm-proof-row span { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--dm-border); background: var(--dm-light); border-radius: 999px; padding: 8px 12px; font-family: var(--dm-font-head); font-weight: 700; font-size: 12.5px; color: var(--dm-primary-dark); } .dm-proof-row i { color: var(--dm-accent); } /* ------------------------------- How it works ------------------------------- */ .dm-step-card { text-align: center; padding: 26px 22px; position: relative; border-radius: var(--dm-radius-lg); background: rgba(255,255,255,.62); border: 1px solid var(--dm-border); height: 100%; transition: all .35s var(--dm-ease); } .dm-step-card:hover { background: #fff; box-shadow: var(--dm-shadow-sm); transform: translateY(-4px); } .dm-step-num { width: 80px; height: 80px; margin: 0 auto 24px; border-radius: 50%; background: #fff; box-shadow: var(--dm-shadow-md); display: flex; align-items: center; justify-content: center; font-family: var(--dm-font-head); font-size: 24px; font-weight: 800; color: #c2410c; transition: all .4s var(--dm-ease); } .dm-step-card:hover .dm-step-num { background: var(--dm-primary); color: #fff; transform: scale(1.08); } .dm-step-line { position: absolute; top: 40px; left: 60%; width: 80%; border-top: 2px dashed var(--dm-border); z-index: -1; } @media (max-width: 991px) { .dm-step-line { display: none; } } .dm-step-card h5, .dm-step-title { margin-bottom: 10px; font-size: 17px; font-weight: 800; color: var(--dm-ink); } .dm-step-card p { font-size: 13.5px; margin-bottom: 0; } /* ------------------------------- Locations ------------------------------- */ .dm-location-card { position: relative; border-radius: var(--dm-radius-lg); overflow: hidden; padding: 28px; min-height: 156px; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(135deg, var(--dm-primary), var(--dm-primary-dark)); transition: all .4s var(--dm-ease); box-shadow: var(--dm-shadow-sm); } .dm-location-card::before { content: ""; position: absolute; inset: 0; background: rgba(8, 14, 26, 0.28); z-index: 0; } .dm-location-card:hover { transform: translateY(-6px); box-shadow: var(--dm-shadow-lg); } .dm-location-card > * { position: relative; z-index: 1; } .dm-location-card i { font-size: 26px; color: var(--dm-gold); margin-bottom: 10px; } .dm-location-card h5, .dm-location-title { color: #fff; margin-bottom: 4px; font-size: 17px; font-weight: 800; } .dm-location-card span { font-size: 13px; color: rgba(255,255,255,.85); } .dm-location-card small { margin-top: 14px; font-family: var(--dm-font-head); font-weight: 800; color: #fff; } /* ------------------------------- Personalized ------------------------------- */ .dm-personalized-section[hidden] { display: none !important; } .dm-personalized-section { background: radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--dm-accent) 10%, transparent), transparent 26%), linear-gradient(180deg, #fff 0%, #f8fafc 100%); } .dm-personalized-profile { align-items: center; color: var(--dm-gray-light); display: inline-flex; gap: 7px; line-height: 1.4; margin-top: 8px; } .dm-personalized-profile i { color: var(--dm-accent); font-size: 16px; } .dm-personalized-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .dm-personalized-card { display: grid; grid-template-columns: 132px minmax(0, 1fr); overflow: hidden; border: 1px solid rgba(216, 222, 235, .86); border-radius: var(--dm-radius-lg); background: rgba(255,255,255,.9); box-shadow: var(--dm-shadow-sm); transition: all .34s var(--dm-ease); } .dm-personalized-card:hover { transform: translateY(-4px); box-shadow: var(--dm-shadow-md); } .dm-personalized-media { display: block; min-height: 150px; background: var(--dm-light); position: relative; overflow: hidden; } .dm-personalized-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .dm-personalized-body { min-width: 0; padding: 16px; display: flex; flex-direction: column; gap: 7px; } .dm-personalized-meta { display: flex; flex-wrap: wrap; gap: 6px; } .dm-personalized-meta span { width: fit-content; border-radius: 999px; background: var(--dm-light); color: var(--dm-primary); padding: 5px 9px; font-family: var(--dm-font-head); font-size: 10.5px; font-weight: 900; } .dm-personalized-body h3 { margin: 0; font-size: 15px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dm-personalized-body h3 a { color: var(--dm-primary); } .dm-personalized-body small { display: flex; gap: 5px; color: var(--dm-gray-light); line-height: 1.35; } .dm-personalized-body small i { color: var(--dm-accent); margin-top: 2px; } .dm-personalized-body em { align-items: center; background: color-mix(in srgb, var(--dm-accent) 9%, white); border: 1px solid color-mix(in srgb, var(--dm-accent) 16%, white); border-radius: 12px; color: var(--dm-primary); display: flex; font-size: 11.5px; font-style: normal; font-weight: 750; gap: 6px; line-height: 1.35; padding: 8px 9px; } .dm-personalized-body em i { color: var(--dm-accent); flex: 0 0 auto; } .dm-personalized-body strong { margin-top: auto; color: var(--dm-accent); font-family: var(--dm-font-head); font-size: 13px; } .dm-personalized-link { align-items: center; color: var(--dm-primary); display: inline-flex; font-family: var(--dm-font-head); font-size: 12px; font-weight: 900; gap: 5px; width: fit-content; } .dm-personalized-link:hover { color: var(--dm-accent); } /* ------------------------------- Saved searches -------------------------- */ .dm-saved-search-section { padding-top: 72px; padding-bottom: 46px; } .dm-saved-search-section[hidden] { display: none !important; } .dm-saved-search-note { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(216, 222, 235, .9); background: rgba(255,255,255,.76); color: var(--dm-gray-light); font-family: var(--dm-font-head); font-size: 12.5px; font-weight: 800; } .dm-saved-search-note i { color: var(--dm-accent); } .dm-saved-search-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .dm-saved-search-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 18px; border-radius: var(--dm-radius-xl); border: 1px solid rgba(216, 222, 235, .86); background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.86)), radial-gradient(circle at top right, rgba(255,116,65,.12), transparent 38%); box-shadow: var(--dm-shadow-sm); transition: transform .32s var(--dm-ease), box-shadow .32s var(--dm-ease), border-color .32s var(--dm-ease); } .dm-saved-search-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--dm-accent) 28%, var(--dm-border)); box-shadow: var(--dm-shadow-md); } .dm-saved-search-icon { width: 52px; height: 52px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--dm-accent) 12%, white); color: var(--dm-accent); font-size: 22px; } .dm-saved-search-content { min-width: 0; } .dm-saved-search-content > span { display: block; margin-bottom: 6px; color: var(--dm-gray-light); font-size: 11.5px; font-weight: 800; text-transform: uppercase; } .dm-saved-search-content h3 { margin: 0 0 7px; color: var(--dm-primary); font-size: 16px; line-height: 1.25; } .dm-saved-search-badge { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin: 0 0 10px; padding: 6px 10px; border: 1px solid color-mix(in srgb, #16a34a 22%, white); border-radius: 999px; background: color-mix(in srgb, #16a34a 10%, white); color: #15803d; font-family: var(--dm-font-head); font-size: 11px; font-weight: 900; } .dm-saved-search-content p { min-height: 38px; margin: 0 0 14px; color: var(--dm-gray-light); font-size: 13px; line-height: 1.45; } .dm-saved-search-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .dm-saved-search-actions a, .dm-saved-search-actions button { min-height: 36px; border-radius: 999px; border: 1px solid var(--dm-border); background: #fff; color: var(--dm-primary); padding: 8px 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--dm-font-head); font-size: 12.5px; font-weight: 900; transition: all .25s var(--dm-ease); } .dm-saved-search-actions a:hover { background: var(--dm-primary); color: #fff; border-color: var(--dm-primary); } .dm-saved-search-actions button[data-alert-search] { background: color-mix(in srgb, #25d366 12%, white); color: #107c41; border-color: color-mix(in srgb, #25d366 32%, white); } .dm-saved-search-actions button[data-alert-search]:hover { background: #25d366; color: #fff; border-color: #25d366; } .dm-saved-search-actions button[data-remove-search] { width: 36px; padding: 0; color: #8a94a6; } .dm-saved-search-actions button[data-remove-search]:hover { background: #fff1f2; color: #e11d48; border-color: #fecdd3; } .dm-search-alert-modal { position: fixed; inset: 0; z-index: 9997; display: none; align-items: center; justify-content: center; padding: 22px; } .dm-search-alert-modal.is-open { display: flex; } .dm-search-alert-backdrop { position: absolute; inset: 0; background: rgba(8, 14, 26, .58); backdrop-filter: blur(12px); } .dm-search-alert-dialog { position: relative; z-index: 1; width: min(520px, 100%); max-height: calc(100vh - 44px); overflow: auto; border: 1px solid rgba(255,255,255,.72); border-radius: 28px; background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(247,250,255,.93)), radial-gradient(circle at top right, rgba(255,116,65,.14), transparent 44%); box-shadow: 0 34px 90px rgba(8, 14, 26, .28); padding: 28px; animation: dmAlertIn .28s var(--dm-ease) both; } @keyframes dmAlertIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .dm-search-alert-close { position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border: 1px solid rgba(216, 222, 235, .94); border-radius: 14px; background: rgba(255,255,255,.82); color: var(--dm-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; transition: all .22s var(--dm-ease); } .dm-search-alert-close:hover { background: var(--dm-primary); color: #fff; border-color: var(--dm-primary); } .dm-search-alert-head { padding-right: 42px; } .dm-search-alert-head span { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; color: var(--dm-accent); font-family: var(--dm-font-head); font-size: 12px; font-weight: 900; text-transform: uppercase; } .dm-search-alert-head h3 { margin: 0; color: var(--dm-primary); font-size: clamp(24px, 3vw, 32px); line-height: 1.05; } .dm-search-alert-head p { margin: 10px 0 0; color: var(--dm-gray-light); font-size: 14.5px; line-height: 1.55; } .dm-search-alert-summary { margin: 20px 0; padding: 16px; border: 1px solid rgba(216, 222, 235, .9); border-radius: 20px; background: rgba(255,255,255,.74); } .dm-search-alert-summary span { display: block; margin-bottom: 6px; color: var(--dm-gray-light); font-size: 11px; font-weight: 900; text-transform: uppercase; } .dm-search-alert-summary strong { display: block; color: var(--dm-primary); font-family: var(--dm-font-head); font-size: 17px; line-height: 1.25; } .dm-search-alert-summary p { margin: 7px 0 0; color: var(--dm-gray-light); font-size: 13px; line-height: 1.45; } .dm-search-alert-form { display: grid; gap: 13px; } .dm-search-alert-form label { display: grid; gap: 7px; color: var(--dm-primary); font-family: var(--dm-font-head); font-size: 12px; font-weight: 900; } .dm-search-alert-form input[type="text"], .dm-search-alert-form input[type="email"], .dm-search-alert-form input[type="tel"] { width: 100%; min-height: 48px; border: 1px solid rgba(216, 222, 235, .96); border-radius: 16px; background: rgba(255,255,255,.88); color: var(--dm-dark); font: 600 14px var(--dm-font-body); outline: none; padding: 0 15px; transition: all .22s var(--dm-ease); } .dm-search-alert-form input:focus { border-color: color-mix(in srgb, var(--dm-accent) 44%, var(--dm-border)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dm-accent) 12%, transparent); } .dm-search-alert-consent { grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 10px !important; color: var(--dm-gray-light) !important; font-family: var(--dm-font-body) !important; font-size: 12.5px !important; font-weight: 650 !important; line-height: 1.45; } .dm-search-alert-consent input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--dm-accent); } .dm-search-alert-feedback { display: none; border-radius: 14px; padding: 11px 13px; font-size: 13px; font-weight: 750; line-height: 1.4; } .dm-search-alert-feedback.is-info, .dm-search-alert-feedback.is-success, .dm-search-alert-feedback.is-error { display: block; } .dm-search-alert-feedback.is-info { background: color-mix(in srgb, var(--dm-primary) 8%, white); color: var(--dm-primary); } .dm-search-alert-feedback.is-success { background: color-mix(in srgb, #16a34a 12%, white); color: #15803d; } .dm-search-alert-feedback.is-error { background: #fff1f2; color: #be123c; } .dm-search-alert-form .dm-btn { width: 100%; min-height: 50px; justify-content: center; } /* --------------------------------- Agents --------------------------------- */ .dm-agent-card { border-radius: var(--dm-radius-xl); overflow: hidden; background: #fff; border: 1px solid var(--dm-border); box-shadow: var(--dm-shadow-sm); transition: all .4s var(--dm-ease); text-align: center; padding: 32px 20px; } .dm-agent-card:hover { box-shadow: var(--dm-shadow-lg); transform: translateY(-6px); } .dm-agent-avatar { width: 88px; height: 88px; border-radius: 50%; margin: 0 auto 18px; background: var(--dm-light-alt); color: var(--dm-primary); display: flex; align-items: center; justify-content: center; font-size: 34px; } .dm-agent-card h5, .dm-agent-title { font-size: 16.5px; margin-bottom: 4px; font-weight: 800; color: var(--dm-ink); } .dm-agent-card span { font-size: 12.5px; color: #9a3412; font-weight: 700; } .dm-agent-card small { display: block; font-size: 12px; color: #5f6b7a; margin-top: 2px; } /* -------------------------------- CTA banner -------------------------------- */ .dm-cta-banner { position: relative; border-radius: var(--dm-radius-xl); overflow: hidden; background: linear-gradient(120deg, var(--dm-primary-dark), var(--dm-primary)); padding: 58px 50px; color: #fff; box-shadow: var(--dm-shadow-lg); } .dm-cta-banner::before { content: ""; position: absolute; inset: 0; background: rgba(8, 14, 26, 0.3); z-index: 0; } .dm-cta-banner > * { position: relative; z-index: 1; } @media (max-width: 767px) { .dm-cta-banner { padding: 44px 24px; text-align: center; } } .dm-cta-banner h2 { color: #fff; font-size: clamp(24px, 3vw, 34px); margin-bottom: 12px; } .dm-cta-banner p { color: rgba(255,255,255,.88); margin-bottom: 0; max-width: 480px; } @media (max-width: 767px) { .dm-cta-banner p { margin: 0 auto; } } /* ------------------------------ Página do Imóvel (detalhe) ------------------------------ */ .dm-page-header { position: relative; background: linear-gradient(120deg, var(--dm-primary-dark), var(--dm-primary)); padding: 150px 0 40px; color: #fff; overflow: hidden; } .dm-page-header::before { content: ""; position: absolute; inset: 0; background: rgba(8, 14, 26, 0.25); z-index: 0; } .dm-page-header > * { position: relative; z-index: 1; } .dm-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: rgba(255,255,255,.7); margin-bottom: 10px; } .dm-breadcrumb a { color: rgba(255,255,255,.7); } .dm-breadcrumb a:hover { color: #fff; } .dm-breadcrumb span.dm-current { color: #fff; font-weight: 600; } .dm-page-header h1 { color: #fff; font-size: clamp(22px, 3vw, 32px); margin-bottom: 0; } @media (max-width: 767px) { .dm-page-header { padding: 130px 0 32px; } } .dm-detail-quick-actions { display: flex; gap: 10px; flex-wrap: wrap; } .dm-detail-action { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); color: #fff; backdrop-filter: blur(12px); } .dm-detail-action:hover, .dm-detail-action.dm-active { background: #fff; border-color: #fff; color: var(--dm-primary); } .dm-detail-action-wa { background: #128c3a; color: #fff; border-color: #128c3a; } .dm-detail-action-wa:hover { background: #0f7a33; border-color: #0f7a33; color: #fff; } @media (max-width: 575px) { .dm-detail-quick-actions .dm-btn { flex: 1 1 100%; justify-content: center; } } .dm-gallery { border-radius: var(--dm-radius-lg); overflow: hidden; box-shadow: var(--dm-shadow-md); background: #fff; border: 1px solid rgba(216, 222, 235, .9); } .dm-gallery-topbar { position: absolute; top: 16px; left: 16px; right: 16px; z-index: 5; display: flex; align-items: center; justify-content: space-between; pointer-events: none; } .dm-gallery-topbar span, .dm-gallery-topbar small { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(255,255,255,.28); background: rgba(12,21,38,.58); color: #fff; border-radius: 999px; padding: 8px 12px; backdrop-filter: blur(14px); font-family: var(--dm-font-head); font-weight: 800; font-size: 12px; } .dm-gallery-top-actions { display: inline-flex; align-items: center; gap: 8px; pointer-events: auto; } .dm-gallery .carousel-inner { background: var(--dm-light); } .property-detail-img { aspect-ratio: 16/9; cursor: zoom-in; height: clamp(260px, 48vw, 560px); object-fit: cover; width: 100%; } .dm-gallery .carousel-control-prev, .dm-gallery .carousel-control-next { width: 48px; height: 48px; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.85); border-radius: 50%; opacity: 0; transition: opacity .3s var(--dm-ease); } .dm-gallery:hover .carousel-control-prev, .dm-gallery:hover .carousel-control-next { opacity: 1; } .dm-gallery .carousel-control-prev { left: 16px; } .dm-gallery .carousel-control-next { right: 16px; } .dm-gallery .carousel-control-prev-icon, .dm-gallery .carousel-control-next-icon { filter: invert(1) grayscale(1); width: 18px; height: 18px; } .dm-gallery-open { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border: 1px solid rgba(255,255,255,.34); border-radius: 999px; background: rgba(12,21,38,.62); color: #fff; padding: 9px 15px; font-family: var(--dm-font-head); font-size: 12px; font-weight: 850; backdrop-filter: blur(16px); box-shadow: 0 18px 38px rgba(12,21,38,.20); transition: transform .24s var(--dm-ease), background .24s var(--dm-ease), border-color .24s var(--dm-ease); } .dm-gallery-open:hover { background: rgba(255,122,61,.92); border-color: rgba(255,255,255,.46); transform: translateY(-2px); } .dm-gallery-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 10px; padding: 12px; background: rgba(255,255,255,.92); } .dm-gallery-thumbs button { border: 2px solid transparent; border-radius: 14px; padding: 0; overflow: hidden; background: var(--dm-light); aspect-ratio: 4/3; opacity: .72; transition: all .28s var(--dm-ease); } .dm-gallery-thumbs button:hover, .dm-gallery-thumbs button.dm-active { opacity: 1; border-color: var(--dm-accent); box-shadow: 0 10px 22px rgba(12, 21, 38, .12); } .dm-gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; } .dm-lightbox[hidden] { display: none; } .dm-lightbox { position: fixed; inset: 0; z-index: 1080; display: flex; align-items: center; justify-content: center; padding: 24px; } .dm-lightbox-backdrop { position: absolute; inset: 0; background: radial-gradient(circle at 18% 16%, rgba(255,122,61,.22), transparent 28%), rgba(8,13,24,.86); backdrop-filter: blur(18px); } .dm-lightbox-dialog { position: relative; width: min(1120px, 100%); max-height: calc(100vh - 48px); border: 1px solid rgba(255,255,255,.14); border-radius: 26px; background: rgba(14,23,38,.88); box-shadow: 0 32px 90px rgba(0,0,0,.42); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; transform: translateY(8px) scale(.98); opacity: 0; transition: opacity .22s var(--dm-ease), transform .22s var(--dm-ease); } .dm-lightbox.dm-open .dm-lightbox-dialog { opacity: 1; transform: translateY(0) scale(1); } .dm-lightbox-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; color: #fff; } .dm-lightbox-head strong { display: block; max-width: 820px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dm-lightbox-eyebrow { color: rgba(255,255,255,.58); display: block; font-family: var(--dm-font-head); font-size: 11px; font-weight: 850; letter-spacing: .08em; margin-bottom: 2px; text-transform: uppercase; } .dm-lightbox-head-actions { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; } .dm-lightbox-close, .dm-lightbox-tool, .dm-lightbox-nav { border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.10); color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: transform .2s var(--dm-ease), background .2s var(--dm-ease), border-color .2s var(--dm-ease); } .dm-lightbox-tool { width: 42px; height: 42px; border-radius: 14px; font-size: 20px; } .dm-lightbox-close { width: 42px; height: 42px; border-radius: 14px; font-size: 24px; } .dm-lightbox-close:hover, .dm-lightbox-tool:hover, .dm-lightbox-tool.dm-active, .dm-lightbox-nav:hover { background: rgba(255,122,61,.92); border-color: rgba(255,255,255,.32); transform: translateY(-1px); } .dm-lightbox-stage { min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; background: rgba(2,6,23,.44); } .dm-lightbox-stage img { width: 100%; max-height: min(68vh, 680px); object-fit: contain; display: block; transition: transform .24s var(--dm-ease), max-height .24s var(--dm-ease); cursor: zoom-in; } .dm-lightbox.dm-zoomed .dm-lightbox-stage { overflow: auto; align-items: flex-start; } .dm-lightbox.dm-zoomed .dm-lightbox-stage img { max-height: none; transform: scale(1.18); transform-origin: center top; cursor: zoom-out; } .dm-lightbox-nav { position: absolute; top: 50%; width: 50px; height: 50px; border-radius: 999px; font-size: 30px; transform: translateY(-50%); } .dm-lightbox-nav:hover { transform: translateY(calc(-50% - 1px)); } .dm-lightbox-nav.dm-prev { left: 18px; } .dm-lightbox-nav.dm-next { right: 18px; } .dm-lightbox-foot { display: flex; align-items: center; gap: 16px; padding: 14px 18px 18px; color: rgba(255,255,255,.78); } .dm-lightbox-foot > span { flex: 0 0 auto; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; font-family: var(--dm-font-head); font-size: 12px; font-weight: 850; padding: 8px 12px; } .dm-lightbox-thumbs { display: flex; gap: 10px; min-width: 0; overflow-x: auto; padding-bottom: 2px; } .dm-lightbox-thumbs button { border: 2px solid transparent; border-radius: 14px; background: rgba(255,255,255,.08); flex: 0 0 82px; height: 62px; opacity: .68; overflow: hidden; padding: 0; transition: opacity .2s var(--dm-ease), border-color .2s var(--dm-ease), transform .2s var(--dm-ease); } .dm-lightbox-thumbs button:hover, .dm-lightbox-thumbs button.dm-active { border-color: var(--dm-accent); opacity: 1; transform: translateY(-1px); } .dm-lightbox-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; } body.dm-lightbox-lock { overflow: hidden; } @media (max-width: 991px) { .dm-detail-summary { flex-direction: column; } .dm-detail-summary-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; width: 100%; } } @media (max-width: 575px) { .dm-gallery.dm-gallery-has-thumbs { min-height: 468px; } .dm-gallery.dm-gallery-has-thumbs .carousel-inner { min-height: 260px; } .dm-gallery.dm-gallery-has-thumbs .dm-gallery-thumbs { min-height: 188px; } .dm-gallery-topbar { align-items: flex-start; gap: 8px; } .dm-gallery-top-actions { align-items: flex-end; flex-direction: column; } .dm-gallery-open { width: auto; min-height: 38px; padding: 8px 12px; } .dm-lightbox { padding: 10px; } .dm-lightbox-dialog { border-radius: 20px; max-height: calc(100vh - 20px); } .dm-lightbox-head { padding: 14px; } .dm-lightbox-head-actions { gap: 8px; } .dm-lightbox-head strong { max-width: 260px; } .dm-lightbox-stage img { max-height: 58vh; } .dm-lightbox.dm-zoomed .dm-lightbox-stage img { transform: scale(1.08); } .dm-lightbox-nav { width: 42px; height: 42px; font-size: 26px; } .dm-lightbox-nav.dm-prev { left: 10px; } .dm-lightbox-nav.dm-next { right: 10px; } .dm-lightbox-foot { align-items: stretch; flex-direction: column; gap: 10px; padding: 12px 14px 14px; } .dm-lightbox-foot > span { align-self: flex-start; } .dm-lightbox-thumbs button { flex-basis: 70px; height: 54px; } .dm-detail-summary { padding: 18px; } .dm-detail-summary-aside { grid-template-columns: 1fr; } .dm-detail-price { min-height: 92px; padding: 15px; } .dm-detail-price .dm-price-value { font-size: 22px; } .dm-card { padding: 20px; } .dm-card-titleline { align-items: flex-start; } .dm-characteristic-chip { width: 100%; } } .dm-detail-summary { border: 1px solid rgba(216, 222, 235, .9); border-radius: var(--dm-radius-lg); background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--dm-accent) 9%, transparent), transparent 30%), linear-gradient(135deg, rgba(255,255,255,.96), rgba(244,247,251,.86)); box-shadow: 0 18px 50px rgba(15, 23, 42, .08); padding: 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; } .dm-detail-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--dm-accent); font-family: var(--dm-font-head); font-weight: 900; font-size: 12px; text-transform: uppercase; margin-bottom: 10px; } .dm-detail-summary h2 { font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 8px; color: var(--dm-primary); } .dm-detail-summary p { display: flex; align-items: flex-start; gap: 8px; color: var(--dm-gray); line-height: 1.6; margin-bottom: 0; } .dm-detail-summary-aside { display: grid; gap: 8px; min-width: 190px; } .dm-detail-summary-aside span { align-items: center; background: rgba(255,255,255,.76); border: 1px solid rgba(216,222,235,.92); border-radius: 999px; color: var(--dm-primary); display: inline-flex; font-family: var(--dm-font-head); font-size: 12px; font-weight: 800; gap: 7px; justify-content: center; padding: 9px 12px; white-space: nowrap; } .dm-detail-summary-aside i { color: var(--dm-accent); font-size: 16px; } .dm-card { background: #fff; border-radius: var(--dm-radius-md); box-shadow: var(--dm-shadow-sm); padding: 26px; } .dm-card h5 { font-size: 17px; } .dm-content-card, .dm-side-card, .dm-contact-intent-card { border: 1px solid rgba(216,222,235,.92); background: radial-gradient(circle at 96% 0%, rgba(255,122,61,.07), transparent 28%), linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.86)); transition: border-color .25s var(--dm-ease), box-shadow .25s var(--dm-ease), transform .25s var(--dm-ease); } .dm-content-card:hover, .dm-side-card:hover, .dm-contact-intent-card:hover { border-color: color-mix(in srgb, var(--dm-accent) 24%, rgba(216,222,235,.92)); box-shadow: 0 18px 50px rgba(15, 23, 42, .08); } .dm-contact-intent-card { background: radial-gradient(circle at 96% 0%, color-mix(in srgb, var(--dm-primary) 7%, transparent), transparent 30%), linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.90)); } .dm-card-titleline { align-items: center; display: flex; gap: 12px; margin-bottom: 18px; } .dm-card-titleline > span { align-items: center; background: color-mix(in srgb, var(--dm-accent) 13%, white); border: 1px solid color-mix(in srgb, var(--dm-accent) 22%, white); border-radius: 14px; color: var(--dm-accent); display: inline-flex; flex: 0 0 44px; height: 44px; justify-content: center; width: 44px; } .dm-card-titleline i { font-size: 20px; } .dm-card-titleline h5, .dm-card-heading { color: var(--dm-primary); font-family: var(--dm-font-head); font-size: 17px; font-weight: 900; line-height: 1.15; margin: 0; } .dm-card-titleline small { color: var(--dm-gray-light); display: block; font-size: 12.5px; line-height: 1.35; margin-top: 2px; } .dm-side-title { align-items: center; color: var(--dm-primary); display: inline-flex; font-family: var(--dm-font-head); font-size: 15px; font-weight: 900; gap: 7px; } .dm-card-titleline.is-compact { margin-bottom: 14px; } .dm-card-titleline.is-compact > span { flex-basis: 38px; height: 38px; width: 38px; } .dm-detail-price { align-items: center; background: radial-gradient(circle at 100% 0%, rgba(255,122,61,.12), transparent 32%), linear-gradient(135deg, #fff, var(--dm-light)); border: 1px solid rgba(216,222,235,.88); border-radius: var(--dm-radius-md); display: flex; gap: 14px; min-height: 104px; padding: 18px 20px; transition: transform .28s var(--dm-ease), box-shadow .28s var(--dm-ease); } .dm-detail-price:hover { box-shadow: var(--dm-shadow-sm); transform: translateY(-2px); } .dm-price-icon { align-items: center; background: var(--dm-primary); border-radius: 16px; color: #fff; display: inline-flex; flex: 0 0 46px; height: 46px; justify-content: center; width: 46px; } .dm-detail-price.dm-rent .dm-price-icon { background: var(--dm-accent); } .dm-price-icon i { font-size: 22px; } .dm-detail-price small { display: block; font-family: var(--dm-font-head); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--dm-gray-light); margin-bottom: 4px; } .dm-detail-price .dm-price-value { font-family: var(--dm-font-head); font-weight: 800; color: var(--dm-primary); font-size: 26px; } .dm-detail-price .dm-price-value span { font-size: 14px; font-weight: 500; color: var(--dm-gray-light); } .dm-detail-price.dm-rent .dm-price-value { color: var(--dm-accent); } .dm-feature-box { text-align: center; background: linear-gradient(135deg, #fff, #f8fafc); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: 18px 10px; transition: all .35s var(--dm-ease); min-height: 102px; position: relative; overflow: hidden; } .dm-feature-box::before { background: linear-gradient(90deg, var(--dm-accent), color-mix(in srgb, var(--dm-primary) 58%, var(--dm-accent))); content: ""; height: 3px; left: 18px; opacity: .55; position: absolute; right: 18px; top: 0; } .dm-feature-box:hover { box-shadow: var(--dm-shadow-sm); transform: translateY(-3px); } .dm-feature-box i { font-size: 22px; color: var(--dm-accent); margin-bottom: 8px; display: inline-block; } .dm-feature-box .dm-feature-value { font-family: var(--dm-font-head); font-weight: 700; color: var(--dm-primary); font-size: 16px; } .dm-feature-box small { display: block; font-size: 11.5px; color: var(--dm-gray-light); margin-top: 2px; } .property-description { color: #526071; font-size: 15px; line-height: 1.82; } .dm-content-card .lead { color: var(--dm-primary); font-family: var(--dm-font-head); font-size: 17px; font-weight: 750; line-height: 1.65; } .dm-characteristics-grid { display: flex; flex-wrap: wrap; gap: 10px; } .dm-characteristic-chip { align-items: center; background: rgba(255,255,255,.78); border: 1px solid rgba(216,222,235,.92); border-radius: 999px; color: var(--dm-primary); display: inline-flex; font-size: 13px; font-weight: 750; gap: 7px; padding: 9px 12px; } .dm-characteristic-chip i { align-items: center; background: #dcfce7; border-radius: 999px; color: #16a34a; display: inline-flex; font-size: 14px; height: 20px; justify-content: center; width: 20px; } .dm-map-empty-state { align-items: center; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--dm-accent) 10%, transparent), transparent 34%), linear-gradient(135deg, #f8fafc, #fff); border: 1px dashed rgba(148,163,184,.55); border-radius: 18px; color: var(--dm-gray-light); display: flex; flex-direction: column; gap: 8px; min-height: 220px; justify-content: center; padding: 24px; text-align: center; } .dm-map-empty-state i { align-items: center; background: color-mix(in srgb, var(--dm-accent) 12%, white); border-radius: 18px; color: var(--dm-accent); display: inline-flex; font-size: 28px; height: 58px; justify-content: center; width: 58px; } .dm-map-empty-state strong { color: var(--dm-primary); font-family: var(--dm-font-head); font-size: 17px; } .dm-map-empty-state span { max-width: 520px; } .dm-detail-map-lazy { background: linear-gradient(135deg, rgba(248,250,252,.92), rgba(255,255,255,.96)), repeating-linear-gradient(45deg, rgba(20,43,79,.05) 0 12px, rgba(255,122,61,.05) 12px 24px); min-height: 280px; position: relative; } .dm-detail-map-lazy.dm-map-loading::after { animation: dm-map-shimmer 1.3s linear infinite; background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent); content: ""; inset: 0; position: absolute; transform: translateX(-100%); } @keyframes dm-map-shimmer { to { transform: translateX(100%); } } .dm-contact-intent-card .form-label { color: var(--dm-primary); font-family: var(--dm-font-head); font-size: 12px; font-weight: 850; } .dm-contact-intent-card .form-control, .dm-contact-intent-card textarea { border-color: rgba(216,222,235,.95); border-radius: 14px; min-height: 44px; } .dm-contact-intent-card .form-control:focus, .dm-contact-intent-card textarea:focus { border-color: color-mix(in srgb, var(--dm-accent) 48%, white); box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--dm-accent) 16%, transparent); } .dm-detail-list { display: grid; gap: 8px; } .dm-detail-list li { align-items: center; background: rgba(255,255,255,.74); border: 1px solid rgba(216,222,235,.88); border-radius: 14px; display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; } .dm-detail-list .fw-semibold { color: var(--dm-primary); font-family: var(--dm-font-head); } .dm-contact-card-header { display: flex; align-items: center; gap: 12px; } .dm-contact-avatar { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; background: var(--dm-light-alt); color: var(--dm-primary); } .dm-contact-avatar.dm-agency { background: color-mix(in srgb, var(--dm-accent) 12%, white); color: var(--dm-accent); } .dm-contact-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .dm-share-btn { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; border: 1.5px solid var(--dm-border); color: var(--dm-primary); background: #fff; transition: all .3s var(--dm-ease); } .dm-share-btn:hover { background: var(--dm-primary); border-color: var(--dm-primary); color: #fff; transform: translateY(-3px); } .dm-share-btn.dm-share-copied { background: #22c55e; border-color: #22c55e; color: #fff; } .dm-sticky-sidebar { position: sticky; top: 100px; } .dm-price-summary-card .dm-detail-list li:first-child { border-color: color-mix(in srgb, var(--dm-accent) 30%, rgba(216,222,235,.88)); } /* -------------------------- "Tenho interesse" floating widget -------------------------- */ .dm-lead-fab { align-items: center; background: var(--dm-primary); border: 0; border-radius: 999px; bottom: 100px; box-shadow: 0 12px 30px rgba(15, 23, 42, .28); color: #fff; cursor: pointer; display: flex; font-family: var(--dm-font-head); font-size: 14px; font-weight: 700; gap: 8px; padding: 14px 20px; position: fixed; right: 24px; transition: transform .26s var(--dm-ease), box-shadow .26s var(--dm-ease), background .26s var(--dm-ease); z-index: 9998; } .dm-lead-fab:hover { background: color-mix(in srgb, var(--dm-primary) 88%, black); transform: translateY(-2px); box-shadow: 0 16px 36px rgba(15, 23, 42, .34); } .dm-lead-fab i { font-size: 18px; } .dm-lead-fab.dm-lead-fab-active { background: color-mix(in srgb, var(--dm-primary) 88%, black); } .dm-lead-panel-backdrop { background: rgba(15, 23, 42, .35); inset: 0; position: fixed; z-index: 9998; } .dm-lead-panel { bottom: 24px; max-height: min(600px, 82vh); max-width: 92vw; overflow-y: auto; position: fixed; right: 24px; width: 380px; z-index: 9999; } .dm-lead-panel .dm-card-titleline { padding-right: 34px; position: relative; } .dm-lead-panel-close { align-items: center; background: transparent; border: 0; border-radius: 999px; color: var(--dm-gray-light); cursor: pointer; display: flex; font-size: 20px; height: 32px; justify-content: center; position: absolute; right: 0; top: 0; width: 32px; } .dm-lead-panel-close:hover { background: var(--dm-light-alt); color: var(--dm-primary); } @media (max-width: 575.98px) { .dm-lead-fab span { display: none; } .dm-lead-fab { padding: 14px; bottom: 90px; } .dm-lead-panel { bottom: 0; right: 0; width: 100%; max-width: 100%; max-height: 88vh; border-radius: 18px 18px 0 0; } } /* -------------------------- Description "ver mais" -------------------------- */ .property-description.dm-clamped { -webkit-line-clamp: 4; -webkit-box-orient: vertical; display: -webkit-box; max-height: none; overflow: hidden; } .property-description.dm-expanded { -webkit-line-clamp: unset; display: block; } .dm-desc-toggle { align-items: center; background: transparent; border: 0; color: var(--dm-accent); cursor: pointer; display: inline-flex; font-family: var(--dm-font-head); font-size: 13.5px; font-weight: 750; gap: 4px; margin-top: 10px; padding: 0; } .dm-desc-toggle:hover { color: var(--dm-primary); } /* ------------------------------ Misc ------------------------------ */ body.domus-home [data-aos] { opacity: 1; transform: none; transition: transform .34s var(--dm-ease), opacity .34s var(--dm-ease); } /* -------------------------- Global widgets on Domus -------------------------- */ body.domus-home .wa-messenger { bottom: 24px; font-family: var(--dm-font-body); position: fixed; right: 24px; z-index: 9999; } body.domus-home .wa-float { align-items: center; background: #128c3a; border: 0; border-radius: 50%; box-shadow: 0 12px 30px rgba(18,140,58,.32); color: #fff; cursor: pointer; display: flex; font-size: 30px; height: 60px; justify-content: center; margin-left: auto; position: relative; transition: transform .26s var(--dm-ease), box-shadow .26s var(--dm-ease), background .26s var(--dm-ease); width: 60px; } body.domus-home footer.bg-dark h5, body.domus-home footer.bg-dark h6, body.domus-home footer.bg-dark .dm-footer-brand, body.domus-home footer.bg-dark .dm-footer-heading { color: #fff; } body.domus-home footer.bg-dark .dm-footer-brand { align-items: center; display: flex; font-size: 20px; gap: 6px; } body.domus-home footer.bg-dark .dm-footer-heading { font-size: 16px; } body.domus-home footer.bg-dark .text-muted, body.domus-home footer.bg-dark .text-white-50 { color: rgba(255,255,255,.82) !important; } body.domus-home footer.bg-dark a.text-white-50:hover { color: #fff !important; } body.domus-home .wa-float:hover { background: #0f7a33; box-shadow: 0 16px 36px rgba(15,122,51,.4); color: #fff; transform: translateY(-2px) scale(1.04); } body.domus-home .wa-float i { color: #fff; line-height: 1; } body.domus-home .wa-float:active { transform: scale(.96); } body.domus-home .wa-badge { align-items: center; animation: dmWaPulse 2s infinite; background: #dc3545; border-radius: 50%; color: #fff; display: flex; font-size: 11px; font-weight: 700; height: 20px; justify-content: center; position: absolute; right: -4px; top: -4px; width: 20px; } @keyframes dmWaPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } body.domus-home .wa-panel { animation: dmWaSlideUp .28s var(--dm-ease); background: #fff; border: 1px solid rgba(216,222,235,.9); border-radius: 18px; bottom: 72px; box-shadow: 0 18px 50px rgba(8,18,34,.18); display: none; max-width: calc(100vw - 48px); overflow: hidden; position: absolute; right: 0; width: 340px; } body.domus-home .wa-panel.open { display: block; } @keyframes dmWaSlideUp { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } body.domus-home .wa-panel-header { align-items: center; background: #075e54; color: #fff; display: flex; font-family: var(--dm-font-head); font-size: 15px; font-weight: 800; gap: 10px; padding: 14px 16px; } body.domus-home .wa-panel-header .bi-whatsapp { color: #fff; font-size: 22px; } body.domus-home .wa-panel-header .btn-close { margin-left: auto; } body.domus-home .wa-panel-body { padding: 16px; } body.domus-home .wa-greeting { align-items: flex-start; background: #dcf8c6; border-radius: 12px 12px 12px 4px; display: flex; gap: 10px; margin-bottom: 14px; padding: 12px; position: relative; } body.domus-home .wa-greeting::before { border: 8px solid transparent; border-bottom: 0; border-top-color: #dcf8c6; bottom: -8px; content: ""; left: 8px; position: absolute; } body.domus-home .wa-avatar { align-items: center; background: #075e54; border-radius: 50%; color: #fff; display: flex; flex-shrink: 0; height: 40px; justify-content: center; width: 40px; } body.domus-home .wa-quick-replies { border-top: 1px solid #eef2f7; padding-top: 10px; } body.domus-home .wa-quick-replies .btn { border-radius: 20px; font-size: 11px; padding: 4px 10px; } body.domus-home .cookie-consent { bottom: 18px; left: 50%; right: auto; width: min(calc(100% - 32px), 860px); background: rgba(12, 24, 45, .94); color: #fff; padding: 0; z-index: 9999; display: none; border: 1px solid rgba(255,255,255,.16); border-radius: 20px; box-shadow: 0 22px 60px rgba(8,18,34,.28); backdrop-filter: blur(18px); transform: translate(-50%, 22px); position: fixed; } body.domus-home .cookie-consent-inner { align-items: center; display: flex; gap: 18px; justify-content: space-between; padding: 12px 14px 12px 16px; } body.domus-home .cookie-consent-copy { align-items: center; display: flex; gap: 10px; min-width: 0; } body.domus-home .cookie-consent-icon { align-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; color: #fff; display: inline-flex; flex: 0 0 40px; height: 40px; justify-content: center; width: 40px; } body.domus-home .cookie-consent p { color: rgba(255,255,255,.9); font-size: 13.5px; line-height: 1.45; margin: 0; } body.domus-home .cookie-consent a { color: #fff; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; } body.domus-home .cookie-consent-actions { display: flex; flex: 0 0 auto; gap: 8px; } body.domus-home .cookie-consent .btn { border-radius: 999px; font-weight: 800; min-height: 38px; padding: 8px 15px; white-space: nowrap; } body.domus-home .cookie-consent .btn-primary { background: #c2410c; border-color: #c2410c; box-shadow: 0 10px 24px rgba(194,65,12,.28); } body.domus-home .cookie-consent .btn-outline-light { border-color: rgba(255,255,255,.38); color: #fff; } body.domus-home .cookie-consent.show { animation: dmCookieFloatIn .3s var(--dm-ease) forwards; display: block; } @keyframes dmCookieFloatIn { from { transform: translate(-50%, 22px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } } @media (max-width: 480px) { body.domus-home .wa-messenger { bottom: 138px; right: 16px; } body.domus-home .wa-float { height: 54px; width: 54px; } body.domus-home .wa-panel { bottom: 68px; right: -8px; width: calc(100vw - 32px); } body.domus-home.cookie-consent-visible .wa-messenger { bottom: 138px; } body.domus-home .cookie-consent { bottom: 18px; border-radius: 18px; width: calc(100% - 22px); } body.domus-home .cookie-consent-inner { align-items: stretch; flex-direction: column; gap: 10px; padding: 12px; } body.domus-home .cookie-consent-copy { align-items: flex-start; gap: 9px; } body.domus-home .cookie-consent-icon { border-radius: 12px; flex-basis: 34px; height: 34px; width: 34px; } body.domus-home .cookie-consent p { font-size: 12.5px; line-height: 1.35; } body.domus-home .cookie-consent-actions { display: flex; gap: 8px; } body.domus-home .cookie-consent .btn { flex: 1; margin-right: 0 !important; padding: 8px 12px; } } /* Carrossel de imóveis em destaque (home) */ .dm-carousel-wrap { position: relative; } .dm-carousel-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 4px 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .dm-carousel-track::-webkit-scrollbar { display: none; } .dm-carousel-slide { flex: 0 0 calc(100% - 24px); scroll-snap-align: start; } @media (min-width: 576px) { .dm-carousel-slide { flex-basis: calc(50% - 18px); } } @media (min-width: 992px) { .dm-carousel-slide { flex-basis: calc(33.333% - 16px); } } @media (min-width: 1200px) { .dm-carousel-slide { flex-basis: calc(25% - 18px); } } .dm-carousel-arrow { position: absolute; top: 45%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--dm-border); background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--dm-shadow-sm); z-index: 2; font-size: 20px; color: var(--dm-primary); transition: all .2s var(--dm-ease); } .dm-carousel-arrow:hover { color: var(--dm-accent); box-shadow: var(--dm-shadow-md); } .dm-carousel-arrow:disabled { opacity: .4; cursor: default; box-shadow: none; } .dm-carousel-arrow:disabled:hover { color: var(--dm-primary); } .dm-carousel-prev { left: -18px; } .dm-carousel-next { right: -18px; } @media (max-width: 767px) { .dm-carousel-arrow { display: none; } }