/* Documento CSS */
* {
margin: 0;
padding: 0;
}
body {
background-color: #e5e5e5;
}
@font-face {
font-family: 'CircularStdBold';
src: url('../fonts/CircularStdBold.eot');
src: local('CircularStdBold'), url('../fonts/CircularStdBold.woff') format('woff'), url('../fonts/CircularStdBold.ttf') format('truetype');
}
.container {
position: relative; /* Define a posição para permitir o uso do :before */
height: 450px;
width: 100%;
background-repeat: no-repeat; /* Evita que o fundo se repita */
}
.container:before {
content: ''; /* Cria um elemento vazio */
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url(../img/bg.jpg);
background-size: cover; /* Garante que a imagem ocupe todo o espaço */
background-position: center center; /* Centraliza a imagem de fundo */
filter: brightness(0.3) grayscale(70%) contrast(105%); /* Aplica brilho ao fundo */
z-index: 0; /* Coloca o fundo atrás de tudo */
box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
.container-logo {
width: 180px;
position: relative;
left: 2%;
}
.logo {
position: relative; /* Garante que esteja acima do background */
z-index: 1; /* Coloca a logo acima do fundo */
background-image: url(../img/logo.png);
background-size: contain; /* Ajusta a logo para que caiba no tamanho especificado */
height: 59px;
width: 80px;
cursor: pointer;
left: 50px;
background-repeat: no-repeat;
}
.menu-button.scrolled {
border-color: black; /* Altera a borda para preto */
color: black; /* Altera o texto para preto */
}
.menu-options.scrolled ul li a {
color: black; /* Altera o texto do menu para preto */
}
.menu-options.scrolled ul li a:hover {
background-color: rgba(0, 0, 0, 0.1); /* Ajusta o hover para combinar com o tema escuro */
}
.menu-container {
position: relative;
}
.menu-button {
border: 1px solid rgb(253, 245, 230, 0.2);
color: rgba(245, 246, 250,1.0);
background-color: transparent;
padding: 10px 10px;
font-size: .8rem;
border-radius: 5px;
cursor: pointer;
font-family: "CircularStdBold";
position: fixed; /* Fixa o botão na tela */
top: 10px; /* Distância de 10px do topo */
right: 10px; /* Distância de 10px da direita */
z-index: 1000; /* Garante que o botão fique acima de outros elementos */
}
.menu-options {
font-family: "CircularStdBold";
display: none; /* Inicialmente as opções estão ocultas */
margin-top: -10px; /* Espaço entre o botão e as opções */
opacity: 0; /* Inicialmente a opacidade é 0 */
transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out; /* Transição suave */
max-height: 0; /* Oculta as opções */
overflow: hidden; /* Esconde qualquer conteúdo que ultrapasse */
position: fixed; /* Coloca as opções abaixo do botão */
right: 10px; /* Alinha as opções à direita do botão */
width: 100px; /* Define a largura fixa para as opções */
z-index: 1;
}
.menu-options ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.menu-options ul li {
margin: 5px 0;
}
.menu-options ul li a {
text-decoration: none;
padding: 10px;
text-align: right;
display: block;
background-color: transparent;
border-radius: 2px;
font-size: .7em;
font-family: "CircularStdBold";
color: rgba(245, 246, 250,1.0);
letter-spacing: 1px;
transition: background-color 0.3s ease-in-out, letter-spacing 0.3s ease-in-out; /* Transição suave */
}
.menu-options ul li a:hover {
background-color: rgba(220, 221, 225,0.1);
letter-spacing: 3px;
}
.zap {
float: left;
position: absolute;
right: 200px;
top: 11px;
background-color: #FBF8F2;
color: #3E555A;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
font-size: 0.7rem;
font-weight: 500;
text-decoration: none;
font-family: "Plus Jakarta Sans";
border-radius: 100px;
box-shadow: rgb(0, 0, 0,0.4) 0px 20px 30px -10px;
cursor: pointer;
}
.social {
float: left;
font-size: 1em;
color: rgba(225, 112, 85,1.0);
margin-left: 10px;
top: 9px;
left: 2%;
position: relative;
cursor: pointer;
background-color: rgba(225, 112, 85,0.2);
padding: 6px 8px;
border-radius: 4px;
transition: transform 0.3s ease;
}
.social:hover {
transform: rotateY(45deg);
}
.card {
background-image: url(../img/card.png);
background-size: cover;
z-index: 1;
width: 385px;
height: 244px;
position: absolute;
left: 2%;
top: 42%;
cursor: pointer;
}
.text {
font-family: "CircularStdBold";
font-size: 2em;
color: rgb(236, 240, 241);
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.text2 {
font-family: "CircularStdBold";
font-size: 1.5em;
color: rgba(45, 52, 54, 0.5);
position: relative;
letter-spacing: -1px;
top: 46px;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
padding: 10px;
border: 3px solid transparent;
background-color: rgba(251, 251, 251, 0.5); /* Cinza bem transparente */
background-size: 100% 100%;
background-repeat: no-repeat;
max-width: 1200px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
/* Container dos videos */
.container-videos {
background-color: rgba(251, 251, 251, 0.7); /* Fundo branco */
background-image: url(../img/color.png);
background-repeat: no-repeat;
padding: 40px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
margin: 20px auto;
max-width: 1200px; /* Largura máxima */
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
/* Container dos cards */
.container-imoveis {
background-color: rgba(251, 251, 251, 0.7); /* Fundo branco */
background-image: url(../img/color.png);
background-repeat: no-repeat;
padding: 40px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
margin: 20px auto;
max-width: 1200px; /* Largura máxima */
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
/* Grade de imóveis */
.imoveis-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
font-family: "CircularStdBold";
}
/* Estilo dos cards */
.imovel-card {
background: rgba(255, 255, 255,1);
width: 280px;
border-radius: 2px;
overflow: hidden;
box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
}
a {
text-decoration: none; /* Remove o sublinhado */
color: inherit; /* Herda a cor do texto pai (não muda a cor do link) */
}
a:hover,
a:focus,
a:active {
text-decoration: none; /* Remove o sublinhado ao passar o mouse */
color: inherit; /* Mantém a cor original do texto */
}
/* Imagem do card */
.imovel-imagem {
height: 400px;
background-size: cover;
background-position: center;
transform: scale(1);
border-radius: 4px;
box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
cursor: pointer;
}
.btn-abrir-modal {
border: none;
margin-left: 5px;
background-color: rgba(0, 0, 0,0.2);
color: rgba(0, 0, 0, 1.0);
text-transform: uppercase;
font-size: 0.6em;
font-family: "CircularStdBold", sans-serif;
padding: 7px;
border-radius: 4px;
cursor: pointer;
top: -40px;
margin-bottom: 10px;
margin-left: calc(50% - 110px);
}
/* Detalhes do card */
.imovel-detalhes {
padding: 15px;
text-align: left;
}
.imovel-titulo {
font-size: 1.2em;
margin-bottom: 10px;
color: #1A1A1A;
font-family: 'segoe ui light';
white-space: nowrap; /* Impede que o texto quebre em várias linhas */
overflow: hidden; /* Esconde o texto que ultrapassar os limites do contêiner */
text-overflow: ellipsis; /* Adiciona '...' ao final do texto cortado */
}
.imovel-preco {
margin-bottom: 10px;
color: #000;
}
.imovel-info {
margin-bottom: 10px;
color: rgba(0, 0, 0, 1);
font-size: 0.8em;
}
.line {
height: 1px;
background-color: rgba(61, 61, 61,0.6);
margin-top: -10px;
margin-bottom: 0px;
}
.selo-disponivel {
position: absolute;
top: 0;
left: 0;
float: left;
background-color: rgba(0, 0, 0, 1); /* Cor com transparência */
color: rgba(223, 230, 233,1.0);
text-align: center;
letter-spacing: 3px;
text-transform: uppercase;
font-size: 0.6em;
font-family: "segoe ui light", sans-serif;
padding: 7px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
z-index: 1;
}
.selo-indisponivel {
position: absolute;
top: 0;
left: 0;
float: left;
background-color: rgba(0, 0, 0, 1); /* Cor com transparência */
color: rgba(223, 230, 233,1.0);
text-align: center;
letter-spacing: 3px;
text-transform: uppercase;
font-size: 0.6em;
font-family: "segoe ui light", sans-serif;
padding: 7px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
z-index: 1;
}
/* Carrossel */
.carousel {
position: relative;
width: 100%;
height: 400px;  /* Ajuste a altura conforme necessário */
overflow: hidden;
}
.carousel-images {
display: flex;
transition: transform 0.5s ease;
}
.carousel-image {
width: 100%;
height: 400px;
object-fit: cover;
}
button.prev, button.next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
font-size: 24px;
z-index: 10;
}
button.prev {
left: 10px;
}
button.next {
right: 10px;
}
button.prev:hover, button.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.card-to-hide {
display: none;
}
.tooltip {
visibility: hidden;
background-color: rgba(0, 0, 0, 1);
background-color: rgba(0, 0, 0,0.2);
color: rgba(0, 0, 0, 1.0);
text-transform: uppercase;
font-size: 0.6em;
font-family: "CircularStdBold", sans-serif;
padding: 7px;
border-radius: 4px;
position: relative;
text-align: center;
z-index: 10;
bottom: 65px; /* Posição do Tooltip em relação ao botão */
left: 59.5%;
text-transform: uppercase;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.tooltip.show {
visibility: visible;
opacity: .8;
}
.visible {
display: block;
}
.btn-carregar-mais {
background-color: rgba(205, 97, 51,0.1);
background-image: url(../img/color.png);
background-size: cover;
color: rgba(0, 0, 0, 1.0);
padding: 10px 30px;
font-size: 0.7rem;
font-weight: bold;
margin-top: 30px;
border: none;
text-transform: uppercase;
text-decoration: none;
font-family: "Plus Jakarta Sans";
border-radius: 100px;
box-shadow: rgb(0, 0, 0,0.4) 0px 20px 30px -10px;
cursor: pointer;
transition: background-color .3s ease;
}
.btn-carregar-mais:hover {
background-color: rgba(205, 97, 51,0.2);
}
.btn-container {
width: 100%; /* Garante que o botão ocupe a largura total do contêiner */
text-align: center; /* Centraliza o botão */
margin-top: 10px; /* Espaçamento entre a grade e o botão */
}
/* Estilos do Modal */
.modal {
display: none;
position: fixed;
z-index: 9999; /* Torna o modal a frente de todos os outros elementos */
left: 0;
top: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8); /* Fundo escuro e opaco */
overflow: auto;
pointer-events: all; /* Permite interação com o modal */
}
/* Conteúdo do Modal */
.modal-content {
background-color: rgba(210, 218, 226,1.0);
margin: 5% auto; /* Margem superior ajustada */
width: 80%;
max-width: 700px;
position: relative;
pointer-events: all; /* Permite interação apenas no modal */
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Adiciona uma sombra para destaque */
border-radius: 8px; /* Bordas arredondadas para melhor aparência */
}
.slider-container {
position: relative;
width: 100%;
max-width: 700px;
top: 12px;
overflow: hidden;
margin: 20px auto;
}
.slider-wrapper {
display: flex;
transition: transform 0.3s ease-in-out;
}
.slider-wrapper img {
max-width: 100%;
flex-shrink: 0;
height: 800px;
}
.slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
border: none;
padding: 10px;
cursor: pointer;
z-index: 10;
}
.slider-btn.prev {
left: 10px;
}
.slider-btn.next {
right: 10px;
}
.slider-btn:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Botão de Fechar */
.close-btn {
align-items: center;
background-color: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: .25rem;
box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
box-sizing: border-box;
color: rgba(255, 255, 255, 0.85);
cursor: pointer;
display: inline-flex;
font-family: system-ui,-apple-system,system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 16px;
font-weight: 600;
justify-content: center;
line-height: 1.25;
margin: 0;
right: 10px;
top: 10px;
padding: 10px;
position: absolute;
text-decoration: none;
transition: all 250ms;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: baseline;
width: auto;
}
.close-btn:hover {
transform: scale(0.98);
}
/* Estilo de Imagens dentro do Modal */
#modal-imagens img {
width: 100%;
margin-bottom: 10px;
border-radius: 10px;
}
.modal-details {
font-family: 'CircularStdBold';
font-weight: bold;
border-radius: 8px;
max-width: 650px;
margin: 0px auto;
}
.modal-details h2 {
font-size: 24px;
color: #000;
letter-spacing: 1px;
margin-bottom: 10px;
text-align: center;
border-bottom: 1px solid rgba(202, 211, 200,1.0);
padding-bottom: 5px;
}
.modal-details p {
font-size: 16px;
line-height: 1.6;
margin: 10px 0;
text-align: justify;
color: #555;
}
.modal-details p#modal-preco {
font-size: 24px;
font-weight: bold;
color: rgba(0, 0, 0,1.0);
text-align: center;
padding: 10px;
}
.modal-details p#modal-localidade {
font-size: 16px;
color: rgba(47, 53, 66,0.7);
background-color: rgba(0, 0, 0, 0.08);
border-radius: 100px;
padding: 10px;
text-align: center;
width: auto;
}
.modal-details p#modal-descricao {
font-size: 14px;
color: rgba(45, 52, 54,1.0);
}
.modal-details p#modal-status {
position: absolute;
top: 0;
left: 0;
float: left;
background-color: rgba(0, 0, 0, 1); /* Cor com transparência */
color: rgba(223, 230, 233,1.0);
text-align: center;
letter-spacing: 3px;
text-transform: uppercase;
font-size: 0.6em;
font-family: "segoe ui light", sans-serif;
padding: 7px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
z-index: 1;
}
.modal-details p:last-of-type {
margin-bottom: 0;
}
label {
font-family: segoe ui light;
letter-spacing: 1px;
font-weight: bold;
text-transform: uppercase;
font-size: .8em;
padding-bottom: 5px;
}
.filter {
position: relative;
top: 50%;
left: calc(83% - 880px);
background-color: rgba(220, 221, 225,1.0);
height: 90px;
padding-top: 15px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 5px;
float: left;
border-radius: 8px;
}
.input-group {
display: flex;
flex-direction: column;
margin-bottom: 10px; /* Espaçamento entre os grupos */
float: left;
margin-left: 30px;
}
.input-group input[type="text"] {
background-color: rgba(223, 230, 233,0.6); /* Cor de fundo mais neutra */
-moz-appearance: textfield; /* Remove setas em inputs de número no Firefox */
padding: 10px;
border: 1px solid rgba(45, 52, 54,0.7);
border-radius: 4px;
font-family: segoe ui;
font-weight: bold;
outline: none;
}
/* Estilo específico para input[type="number"] */
.input-group select {
background-color: rgba(223, 230, 233,0.6); /* Cor de fundo mais neutra */
-moz-appearance: textfield; /* Remove setas em inputs de número no Firefox */
padding: 10px;
font-family: segoe ui;
outline: none;
border: 1px solid rgba(45, 52, 54,0.7);
border-radius: 4px;
max-width: 120px;
}
.input-group input[type="number"]::-webkit-outer-spin-button, 
.input-group input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/* Estilo do botão */
#filter-button {
float: left;
background-color: rgba(0, 0, 0, 1); /* Cor com transparência */
color: rgba(223, 230, 233,1.0);
text-align: center;
letter-spacing: 3px;
border: none;
text-transform: uppercase;
font-size: 0.8em;
font-family: "segoe ui light", sans-serif;
padding: 10px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
z-index: 1;
cursor: pointer;
margin: 22px;
}
    .responsive-span {
        display: inline-block;
        margin: 3px;
        padding: 5px 10px;
        background-color: rgba(116, 185, 255, 0.4);
        border-radius: 100px;
        font-size: .9em;
    }
@media screen and (max-width: 768px) {
            #area-container {
            flex-direction: column;
            line-height: .2;
        }
.filter {
top: 20%;
left: calc(50% - 280px);
width: 40%; /* Ajusta a largura para caber na tela */
margin: 0 auto; /* Centraliza no dispositivo móvel */
height: auto; /* Altura automática para acomodar o conteúdo */
padding: 30px; /* Ajusta o espaçamento interno */
}
.input-group {
float: none; /* Remove o float */
margin: 10px 0; /* Ajusta o espaçamento entre os grupos */
width: 100%; /* Ocupa toda a largura disponível */
}
.input-group input[type="text"],
.input-group select {
width: 100%; /* Ajusta a largura dos inputs */
}
#filter-button {
float: none; /* Remove o float */
width: 100%; /* Botão ocupa toda a largura */
margin: 10px 0; /* Espaçamento em torno do botão */
}
.container {
height: 700px; /* Altura ajustada para smartphones */
background-size: cover; /* Garante que a imagem ainda cubra o container */
background-position: center center; /* Mantém a centralização */
}
.container-logo {
left: -50px;
}
.social {
left: 50px;
}
.text {
font-size: 1.4em; /* Reduz ainda mais o tamanho da fonte para telas muito pequenas */
top: 20%; /* Ajusta para centralizar melhor em telas menores */
white-space: nowrap;
}
.logo {
/* Centraliza a logo apenas em dispositivos móveis */
margin: 0 auto;
display: block;
max-width: 80px; /* Garante que a logo se ajuste corretamente */
}
.menu-button {
font-size: 0.9rem; /* Ajusta o tamanho da fonte para um tamanho menor */
padding: 8px 10px; /* Ajusta o padding para um botão menor */
right: 15px; /* Ajusta a posição para smartphones */
top: 15px; /* Ajusta a posição para smartphones */
display: flex;
align-items: center;
justify-content: center;
color: transparent; /* Torna o texto invisível */
font-size: 0px;
}
.menu-options {
width: 200px; /* Aumenta a largura do menu para ocupar mais espaço em smartphones */
right: 0; /* Garante que o menu ocupe toda a largura disponível no celular */
font-size: 1rem; /* Ajusta o tamanho da fonte das opções */
margin-top: -5px; /* Adiciona um espaçamento entre o botão e as opções */
}
.menu-options ul li a {
font-size: 1rem; /* Aumenta o tamanho da fonte das opções */
font-size: .6em;
}
.zap {
display: none;
}
.card {
display: none;
}
.imovel-card {
width: 80%;
}
/* Estilo padrão do botão */
/* Esconde a palavra "MENU" apenas */
.menu-button i {
color: #fff; /* Garante que o ícone fique visível */
font-size: 1.2rem; /* Mantém o tamanho do ícone */
}
.menu-button.scrolled {
border-color: #000; /* Altera a borda para preto */
color: transparent; /* Altera o texto para preto */
}
.menu-button.scrolled i {
color: #000; /* Altera o texto para preto */
}
.menu-options.scrolled ul li a i {
color: #000; /* Altera o texto do menu para preto */
}
.modal-details {
font-family: 'CircularStdBold';
font-weight: bold;
border-radius: 8px;
padding-top: 40px;
padding-right: 5px;
padding-left: 5px;
max-width: 650px;
margin: 0px auto;
}
.slider-wrapper img {
max-width: 100%;
flex-shrink: 0;
height: 450px;
}
        .responsive-span {
            padding: 3px 8px;
            font-size: 0.75em;
        }
        .modal-content {
background-color: rgba(210, 218, 226,1.0);
margin: 5% auto; /* Margem superior ajustada */
width: 95%;
max-width: 700px;
position: relative;
pointer-events: all; /* Permite interação apenas no modal */
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Adiciona uma sombra para destaque */
border-radius: 8px; /* Bordas arredondadas para melhor aparência */
}
}