/* ================================================================ ALVO IMOBILIÁRIA — ESTILOS ================================================================ 🎨 PAINEL DE CORES — para mudar a cara do site inteiro, altere apenas os valores abaixo (formato #RRGGBB): ================================================================ */ :root{ --principal: #732D15; /* cor principal — vermelho tijolo */ --principal-escura: #471B0C; /* versão escura da principal (rodapé, hero) */ --destaque: #C77B3C; /* cor de destaque — cobre (preços, mira) */ --destaque-claro:#E8A96D; /* variação clara do destaque */ --realce: #E1A43C; /* mira e hovers dos cards — tom convidativo */ --fundo: #F8F4EF; /* fundo geral das páginas */ --branco: #FFFFFF; --tinta: #26180F; /* cor dos textos */ --cinza: #705E52; /* textos secundários */ --linha: #EADFD4; /* bordas suaves */ --whatsapp: #1FAF5A; /* Fontes (carregadas no dos HTML) */ --fonte-titulo: "Fraunces", Georgia, serif; --fonte-texto: "Archivo", system-ui, Arial, sans-serif; --raio: 14px; --sombra: 0 12px 32px rgba(70,40,22,.13); --transicao: .35s cubic-bezier(.2,.65,.25,1); } /* ------------------------ base ------------------------ */ *{ box-sizing:border-box; margin:0; padding:0 } html{ scroll-behavior:smooth } body{ font-family:var(--fonte-texto); background:var(--fundo); color:var(--tinta); line-height:1.6; -webkit-font-smoothing:antialiased } img{ max-width:100%; display:block } a{ color:inherit; text-decoration:none } .container{ width:min(1140px, 92%); margin-inline:auto } :focus-visible{ outline:3px solid var(--destaque); outline-offset:3px; border-radius:4px } h1,h2,h3{ font-family:var(--fonte-titulo); font-weight:600; line-height:1.15; color:var(--principal) } .secao{ padding:84px 0 } .secao-titulo{ font-size:clamp(1.7rem, 3.4vw, 2.4rem); max-width:22ch } .eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--destaque); margin-bottom:14px } .eyebrow::before{ content:""; width:14px; height:14px; border:2px solid var(--destaque); border-radius:50%; box-shadow:inset 0 0 0 3px var(--fundo), inset 0 0 0 5px var(--destaque) } /* ------------------------ botões ------------------------ */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font:600 .95rem var(--fonte-texto); padding:13px 26px; border-radius:999px; border:2px solid transparent; cursor:pointer; transition:var(--transicao) } .btn-primario{ background:var(--principal); color:var(--branco) } .btn-primario:hover{ background:var(--principal-escura); transform:translateY(-2px) } .btn-destaque{ background:var(--destaque); color:var(--principal-escura) } .btn-destaque:hover{ background:var(--destaque-claro); transform:translateY(-2px) } .btn-contorno{ border-color:var(--branco); color:var(--branco); background:transparent } .btn-contorno:hover{ background:rgba(255,255,255,.14) } .btn-whats{ background:var(--whatsapp); color:#fff } .btn-whats:hover{ filter:brightness(1.08); transform:translateY(-2px) } .btn svg{ width:18px; height:18px; flex:none } /* ------------------------ header ------------------------ */ .topo{ position:fixed; inset:0 0 auto; z-index:60; padding:18px 0; transition:var(--transicao) } .topo-linha{ display:flex; align-items:center; justify-content:space-between; gap:20px } .logo{ display:flex; align-items:center; gap:11px; color:var(--branco); font-family:var(--fonte-titulo); font-size:1.3rem; font-weight:700; letter-spacing:.02em } .logo svg{ width:34px; height:34px } .menu{ display:flex; gap:26px; list-style:none; align-items:center } .menu a{ color:rgba(255,255,255,.92); font-weight:500; font-size:.95rem; position:relative } .menu a::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--destaque); transition:var(--transicao) } .menu a:hover::after{ width:100% } .topo.rolado{ background:var(--principal); box-shadow:0 6px 24px rgba(71,27,12,.28); padding:12px 0 } .menu-btn{ display:none; background:none; border:0; color:#fff; cursor:pointer } .menu-btn svg{ width:28px; height:28px } /* ------------------------ hero ------------------------ */ .hero{ position:relative; min-height:92vh; display:flex; align-items:center; overflow:hidden; color:var(--branco) } .hero-fundo{ position:absolute; inset:0; background-size:cover; background-position:center; animation:kenburns 16s ease-out forwards } .hero::before{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(71,27,12,.88) 30%, rgba(71,27,12,.45) 70%, rgba(71,27,12,.65)); z-index:1 } .hero-conteudo{ position:relative; z-index:2; padding:150px 0 190px } .hero-eyebrow{ color:var(--destaque-claro) } .hero-eyebrow::before{ box-shadow:inset 0 0 0 3px var(--principal-escura), inset 0 0 0 5px var(--destaque-claro); border-color:var(--destaque-claro) } .hero h1{ font-size:clamp(2.4rem, 6vw, 4.2rem); color:var(--branco); max-width:15ch; font-weight:600 } .hero h1 .palavra{ display:inline-block; opacity:0; transform:translateY(26px); animation:subir .7s cubic-bezier(.2,.65,.25,1) forwards } .hero p{ margin:20px 0 30px; font-size:1.1rem; max-width:44ch; color:rgba(255,255,255,.88); opacity:0; animation:aparecer .8s .5s forwards } .hero-acoes{ display:flex; gap:14px; flex-wrap:wrap; opacity:0; animation:aparecer .8s .7s forwards } @keyframes subir{ to{ opacity:1; transform:none } } @keyframes aparecer{ to{ opacity:1 } } @keyframes kenburns{ from{ transform:scale(1.12) } to{ transform:scale(1) } } /* ---------------- cartão de busca (filtros) ---------------- */ .busca{ position:relative; z-index:5; margin-top:-92px } .busca-cartao{ background:var(--branco); border-radius:var(--raio); box-shadow:var(--sombra); padding:22px; display:grid; grid-template-columns:repeat(4,1fr) auto; gap:14px; align-items:end } .campo label{ display:block; font-size:.74rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--cinza); margin-bottom:6px } .campo select{ width:100%; padding:12px 13px; border:1.5px solid var(--linha); border-radius:10px; font:500 .95rem var(--fonte-texto); color:var(--tinta); background:var(--branco); cursor:pointer } .campo select:focus{ border-color:var(--destaque); outline:none } /* ------------------------ destaques ------------------------ */ .carrossel{ position:relative; border-radius:var(--raio); overflow:hidden; box-shadow:var(--sombra) } .carrossel-trilha{ display:flex; transition:transform .6s cubic-bezier(.2,.65,.25,1) } .slide{ min-width:100%; position:relative; cursor:pointer } .slide img{ width:100%; height:480px; object-fit:cover } .slide-info{ position:absolute; inset:auto 0 0; padding:90px 34px 30px; background:linear-gradient(transparent, rgba(71,27,12,.92)); color:#fff; display:flex; justify-content:space-between; align-items:flex-end; gap:18px; flex-wrap:wrap } .slide-info h3{ color:#fff; font-size:1.5rem } .slide-info .onde{ color:rgba(255,255,255,.8); font-size:.95rem; margin-top:4px } .slide-preco{ font:700 1.5rem var(--fonte-texto); color:var(--destaque-claro); white-space:nowrap } .carrossel-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:46px; height:46px; border-radius:50%; border:0; background:rgba(255,255,255,.92); color:var(--principal); cursor:pointer; display:grid; place-items:center; transition:var(--transicao) } .carrossel-nav:hover{ background:var(--destaque); color:#fff } .carrossel-nav svg{ width:20px; height:20px } .nav-ant{ left:16px } .nav-prox{ right:16px } .carrossel-pontos{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:3 } .ponto{ width:9px; height:9px; border-radius:50%; border:0; background:rgba(255,255,255,.45); cursor:pointer; transition:var(--transicao) } .ponto.ativo{ background:var(--destaque); transform:scale(1.3) } /* ------------------------ cards do catálogo ------------------------ */ .grade{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:26px; margin-top:38px } .card{ background:var(--branco); border-radius:var(--raio); overflow:hidden; box-shadow:0 4px 16px rgba(70,40,22,.08); transition:var(--transicao); display:flex; flex-direction:column } .card:hover{ transform:translateY(-6px); box-shadow:var(--sombra) } .card-foto{ position:relative; overflow:hidden; aspect-ratio:3/2 } .card-foto img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease } .card:hover .card-foto img{ transform:scale(1.06) } /* ✦ assinatura da marca: a mira percorre a foto no hover ✦ As cantoneiras ficam visíveis nos cantos sup-esq e inf-dir. No hover, cada uma desliza pela lateral até o canto oposto, girando -90° para aterrissar na orientação certa do novo canto. */ .card-foto::before, .card-foto::after{ content:""; position:absolute; width:26px; height:26px; border:3px solid var(--realce); opacity:.55; z-index:2; transition:top .55s cubic-bezier(.3,1.3,.4,1), transform .55s cubic-bezier(.3,1.3,.4,1), opacity .3s ease } .card-foto::before{ top:12px; left:12px; border-right:0; border-bottom:0 } .card-foto::after{ top:calc(100% - 38px); right:12px; border-left:0; border-top:0 } .card:hover .card-foto::before{ top:calc(100% - 38px); transform:rotate(-90deg); opacity:1 } .card:hover .card-foto::after{ top:12px; transform:rotate(-90deg); opacity:1; transition-delay:.06s } .card-tag{ position:absolute; top:12px; right:12px; background:rgba(71,27,12,.85); color:#fff; font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:5px 11px; border-radius:999px; z-index:2 } .card-corpo{ padding:20px 22px 22px; display:flex; flex-direction:column; gap:10px; flex:1 } .card-preco{ font:700 1.35rem var(--fonte-texto); color:var(--principal) } .card-titulo{ font-size:1.08rem; color:var(--tinta); font-family:var(--fonte-texto); font-weight:600 } .card-onde{ color:var(--cinza); font-size:.9rem; display:flex; align-items:center; gap:6px } .card-onde svg{ width:15px; height:15px; color:var(--destaque) } .card-ficha{ display:flex; gap:16px; padding-top:12px; margin-top:auto; border-top:1px solid var(--linha); color:var(--cinza); font-size:.88rem; flex-wrap:wrap } .card-ficha span{ display:inline-flex; align-items:center; gap:6px } .card-ficha svg{ width:16px; height:16px; color:var(--principal) } .vazio{ text-align:center; color:var(--cinza); padding:50px 0; grid-column:1/-1 } .catalogo-topo{ display:flex; justify-content:space-between; align-items:end; gap:16px; flex-wrap:wrap } .contagem{ color:var(--cinza); font-size:.95rem } .limpar{ background:none; border:0; color:var(--destaque); font:600 .9rem var(--fonte-texto); cursor:pointer; text-decoration:underline } /* ------------------------ estatísticas ------------------------ */ .stats{ background:var(--principal); color:#fff } .stats-grade{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:34px; text-align:center } .stat-num{ font:700 clamp(2.2rem,5vw,3.2rem)/1 var(--fonte-titulo); color:var(--destaque-claro) } .stat-rotulo{ margin-top:8px; color:rgba(255,255,255,.85) } /* ------------------------ sobre ------------------------ */ .sobre-grade{ display:grid; grid-template-columns:1fr 1.15fr; gap:56px; align-items:center } .sobre-foto{ border-radius:var(--raio); overflow:hidden; box-shadow:var(--sombra); position:relative } .sobre-foto::after{ content:""; position:absolute; inset:14px; border:2px solid rgba(199,123,60,.55); border-radius:8px; pointer-events:none } .sobre p{ color:var(--cinza); margin-top:16px; max-width:52ch } .sobre .creci{ margin-top:22px; font-weight:600; color:var(--principal); font-size:.9rem; letter-spacing:.05em } /* ------------------------ contato ------------------------ */ .contato-grade{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start } .form{ background:var(--branco); border-radius:var(--raio); box-shadow:var(--sombra); padding:30px } .form .campo{ margin-bottom:16px } .form input, .form textarea{ width:100%; padding:13px 14px; border:1.5px solid var(--linha); border-radius:10px; font:500 .95rem var(--fonte-texto); background:var(--branco); color:var(--tinta) } .form input:focus, .form textarea:focus{ border-color:var(--destaque); outline:none } .form textarea{ resize:vertical; min-height:110px } .canais{ display:flex; flex-direction:column; gap:14px; margin-top:24px } .canal{ display:flex; align-items:center; gap:14px; background:var(--branco); border-radius:12px; padding:16px 18px; box-shadow:0 4px 14px rgba(70,40,22,.08); font-weight:500; transition:var(--transicao) } .canal:hover{ transform:translateX(6px) } .canal svg{ width:22px; height:22px; color:var(--destaque); flex:none } .canal small{ display:block; color:var(--cinza); font-weight:400 } /* ------------------------ rodapé ------------------------ */ .rodape{ background:var(--principal-escura); color:rgba(255,255,255,.8); padding:46px 0 28px; margin-top:84px } .rodape-linha{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:center } .rodape .logo{ font-size:1.1rem } .rodape-fim{ border-top:1px solid rgba(255,255,255,.12); margin-top:30px; padding-top:20px; font-size:.85rem; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap } /* ---------------- botão flutuante do whatsapp ---------------- */ .flutuante{ position:fixed; right:22px; bottom:22px; z-index:70; width:60px; height:60px; border-radius:50%; background:var(--whatsapp); display:grid; place-items:center; box-shadow:0 10px 26px rgba(31,175,90,.45); transition:var(--transicao) } .flutuante:hover{ transform:scale(1.1) } .flutuante svg{ width:30px; height:30px; color:#fff } .flutuante::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--whatsapp); animation:pulso 2.2s ease-out infinite } @keyframes pulso{ 0%{ transform:scale(1); opacity:.8 } 100%{ transform:scale(1.65); opacity:0 } } /* ---------------- página do imóvel ---------------- */ .pagina-imovel{ padding-top:120px } .migalha{ font-size:.88rem; color:var(--cinza); margin-bottom:18px } .migalha a{ color:var(--destaque); font-weight:600 } .galeria{ position:relative; border-radius:var(--raio); overflow:hidden; box-shadow:var(--sombra) } .galeria-principal{ width:100%; height:clamp(300px, 55vw, 520px); object-fit:cover } .galeria-contador{ position:absolute; bottom:14px; right:14px; background:rgba(71,27,12,.8); color:#fff; font-size:.85rem; font-weight:600; padding:6px 13px; border-radius:999px } .miniaturas{ display:grid; grid-template-columns:repeat(auto-fill, minmax(96px,1fr)); gap:10px; margin-top:12px } .miniaturas img{ height:76px; width:100%; object-fit:cover; border-radius:9px; cursor:pointer; opacity:.65; border:2.5px solid transparent; transition:var(--transicao) } .miniaturas img.ativa{ opacity:1; border-color:var(--destaque) } .imovel-grade{ display:grid; grid-template-columns:1.6fr 1fr; gap:44px; margin-top:38px; align-items:start } .imovel-preco{ font:700 2.1rem var(--fonte-texto); color:var(--principal) } .imovel-titulo{ font-size:clamp(1.5rem,3vw,2rem); margin-top:6px } .imovel-onde{ color:var(--cinza); display:flex; align-items:center; gap:7px; margin-top:8px } .imovel-onde svg{ width:17px; height:17px; color:var(--destaque) } .ficha{ display:grid; grid-template-columns:repeat(auto-fit, minmax(130px,1fr)); gap:12px; margin:26px 0 } .ficha-item{ background:var(--branco); border:1px solid var(--linha); border-radius:12px; padding:14px; text-align:center } .ficha-item svg{ width:22px; height:22px; color:var(--destaque); margin-inline:auto } .ficha-item b{ display:block; margin-top:6px; color:var(--principal); font-size:1.05rem } .ficha-item small{ color:var(--cinza) } .chips{ display:flex; gap:9px; flex-wrap:wrap; margin-top:14px } .chip{ background:var(--branco); border:1.5px solid var(--linha); color:var(--tinta); border-radius:999px; padding:7px 15px; font-size:.86rem; font-weight:500 } .bloco-titulo{ font-size:1.25rem; margin:30px 0 10px } .descricao{ color:var(--cinza); max-width:64ch } .mapa{ border-radius:var(--raio); overflow:hidden; box-shadow:var(--sombra); margin-top:14px } .mapa iframe{ width:100%; height:340px; border:0; display:block } .painel-contato{ background:var(--branco); border-radius:var(--raio); box-shadow:var(--sombra); padding:26px; position:sticky; top:100px } .painel-contato h3{ font-size:1.15rem; margin-bottom:6px } .painel-contato .sub{ color:var(--cinza); font-size:.92rem; margin-bottom:18px } .painel-contato .btn{ width:100% } .painel-contato .ou{ text-align:center; color:var(--cinza); font-size:.8rem; margin:14px 0; letter-spacing:.1em; text-transform:uppercase } /* ------------------ animações de rolagem ------------------ */ .revelar{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.65,.25,1) } .revelar.visivel{ opacity:1; transform:none } /* ------------------------ responsivo ------------------------ */ @media (max-width:920px){ .busca-cartao{ grid-template-columns:1fr 1fr } .busca-cartao .btn{ grid-column:1/-1 } .sobre-grade, .contato-grade, .imovel-grade{ grid-template-columns:1fr; gap:34px } .painel-contato{ position:static } } @media (max-width:760px){ .menu{ position:fixed; inset:0 0 auto; top:64px; flex-direction:column; background:var(--principal-escura); padding:26px; gap:20px; transform:translateY(-130%); transition:var(--transicao); box-shadow:var(--sombra) } .menu.aberto{ transform:none } .menu-btn{ display:block } .topo{ background:var(--principal) } .hero-conteudo{ padding:130px 0 150px } .slide img{ height:340px } .secao{ padding:60px 0 } } /* --------- acessibilidade: menos movimento --------- */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation:none !important; transition:none !important } html{ scroll-behavior:auto } .hero h1 .palavra, .hero p, .hero-acoes, .revelar{ opacity:1; transform:none } }