body { background-color: #F7F6F7 ; } @media only screen and (min-width: 320px) and (max-width: 359px) { header#boutiqueHeader { width: 100%; height: 100%; background-image: linear-gradient(to bottom, #0d475e, #0d475e, #0d475e, #0d475e, #0d475e, #164359, #1c3e54, #203a4e, #243141, #242833, #202126, #1a1a1a); padding: 15px 20px; } header#boutiqueHeader div.header_container { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 0.5rem; height: auto;margin: 0px auto; position: relative; } header#boutiqueHeader div.header_container .flip-2-ver-right-fwd { -webkit-animation: flip-2-ver-right-fwd 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; animation: flip-2-ver-right-fwd 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; } header#boutiqueHeader div.header_container figure img { width: 80px; height: auto; } header#boutiqueHeader div.header_container nav.navDesktop { display: none; } header#boutiqueHeader div.header_container nav.navDesktop ul { display: flex; gap: 20px; padding: 5px 0px;} header#boutiqueHeader div.header_container nav.navDesktop ul li a { color: #efe4ca; font-weight: 700; font-size: 14px; } header#boutiqueHeader div.header_container div.headerLancamentoButton { display: none; } header#boutiqueHeader div.header_container div.headerLancamentoButton a { font-size: 14px; font-weight: 700; color: #0d475e; } /* header#boutiqueHeader div.header_container div.lancamentoBotao { display: flex; background-color: red; } */ header#boutiqueHeader div.header_container div.botaoMenu { width: 50px; height: 50px; display: flex; justify-content: center;; } header#boutiqueHeader div.header_container div.botaoMenu button i { color: #efe4ca; font-size: 30px; cursor: pointer; } /* --- Modal Menu Header) --- */ .modal { position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,0.6); display: flex; justify-content: flex-start; align-items: flex-start; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.4s ease-out, visibility 0.4s ease-out; } /* Classe para esconder o modal completamente (display: none) */ .modal.hidden { display: none; } /* Quando o modal está ativo e visível */ .modal.is-active { opacity: 1; visibility: visible; pointer-events: auto; display: flex; } /* --- Conteúdo do Modal (o painel lateral) --- */ .modal-content { background-image: linear-gradient(to right, #0d475e, #0d475e, #0d475e, #0d475e, #0d475e, #164359, #1c3e54, #203a4e, #243141, #242833, #202126, #1a1a1a); padding: 20px; margin-top: 0; border-radius: 10px; position: relative; z-index: 1; width: 80%; max-width: 400px; height: 100%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transform: translateX(-100%); opacity: 0; transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.6s ease-out; margin-left: 0px;} /* Estado final da animação do modal-content (dentro da tela) */ .modal.is-active .modal-content { transform: translateX(0); opacity: 1; } /* --- PSEUDO-ELEMENTO para a BORDA ANIMADA (Primeira camada de borda) --- */ .modal-content::before { content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; z-index: -1; border-radius: inherit; background: linear-gradient(45deg, var(--color-font-secund) 0%, var(--color-principal-dark) 50%, var(--color-font-secund) 100%); background-size: 200% 200%; animation: animateBorder 3s linear infinite; opacity: 0; transition: opacity 0.6s ease-out; } /* Quando o modal está ativo, a borda animada também aparece */ .modal.is-active .modal-content::before { opacity: 1; } /* --- PSEUDO-ELEMENTO para a SEGUNDA BORDA (Cor Vermelha, Estática) --- */ .modal-content::after { content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; z-index: -2; border-radius: inherit; background-color: var(--color-red-danger); opacity: 0; transition: opacity 0.6s ease-out; } /* Quando o modal está ativo, a segunda borda também aparece */ .modal.is-active .modal-content::after { opacity: 1; } /* --- Keyframes para a animação da borda gradiente --- */ @keyframes animateBorder { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } /* --- Botão de Fechar --- */ .close-button { position: absolute; top: 20px; right: 30px; font-size: 25px; cursor: pointer; color: var(--color-font-secund); z-index: 1000; transition: color 0.2s ease-in-out; } .close-button:hover { color: var(--color-red-danger); } /* --- ESTILOS E ANIMAÇÕES PARA O CONTEÚDO INTERNO DO MODAL --- */ .modal-content header { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; padding: 1rem 1rem; margin-top: 10px; opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; transition-delay: 0.4s;} .modal.is-active .modal-content header { opacity: 1; transform: translateY(0); } .modal-content header figure img { width: 140px; margin-left: 20px;} /* Links de Navegação Mobile */ .modal-content nav.navMobileLinks ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; width: 100%; } .modal-content nav.navMobileLinks ul li { opacity: 0; transform: translateX(-20px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; } /* Atraso escalonado para cada item da lista */ .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(1) { transition-delay: 0.5s; } .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(2) { transition-delay: 0.55s; } .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(3) { transition-delay: 0.6s; } .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(4) { transition-delay: 0.65s; } .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(5) { transition-delay: 0.7s; } .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(6) { transition-delay: 0.75s; } /* Estado final da animação dos itens de lista */ .modal.is-active .modal-content nav.navMobileLinks ul li { opacity: 1; transform: translateX(0); } .modal-content nav.navMobileLinks ul li a { text-decoration: none; color: var(--color-font-secund); font-size: 1rem; display: flex; gap: 10px; align-items: center; } .modal-content nav.navMobileLinks ul li a:hover { color: var(--color-red-danger); } /* Ícones dentro dos links */ .modal-content nav.navMobileLinks ul li a i { transform: scale(0.8); opacity: 0; transition: transform 0.3s ease-out, opacity 0.3s ease-out; } .modal.is-active .modal-content nav.navMobileLinks ul li a i { transform: scale(1); opacity: 1; } /* --- Ícones Sociais Mobile --- */ .modal-content nav.navMobileSocial ul { list-style: none; padding: 0; margin-top: 1rem; display: flex; justify-content: center; gap: 1.5rem; } .modal-content nav.navMobileSocial ul li { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease-out, transform 0.4s ease-out; } /* Atraso escalonado para cada ícone social */ .modal.is-active .modal-content nav.navMobileSocial ul li:nth-child(1) { transition-delay: 0.8s; } .modal.is-active .modal-content nav.navMobileSocial ul li:nth-child(2) { transition-delay: 0.85s; } .modal.is-active .modal-content nav.navMobileSocial ul li:nth-child(3) { transition-delay: 0.9s; } .modal.is-active .modal-content nav.navMobileSocial ul li:nth-child(4) { transition-delay: 0.95s; } .modal.is-active .modal-content nav.navMobileSocial ul li:nth-child(5) { transition-delay: 1s; } .modal.is-active .modal-content nav.navMobileSocial ul li {opacity: 1; transform: translateY(0); } .modal-content nav.navMobileSocial ul li a { text-decoration: none; font-size: 1rem; position: relative; display: inline-block; overflow: hidden; line-height: 1; color: var(--color-font-secund); transition: color 0.3s ease-in-out; } /* --- Cores originais dos Ícones e Efeito de Preenchimento NO HOVER --- */ .modal-content nav.navMobileSocial ul li a i { color: inherit; background-size: 100% 200%; background-position: 0% 100%; transition: background-position 0.6s ease-out, color 0.3s ease-out;} div.container__figure { width: 100%; height: 100%; padding: 200px 0px 0px 0px ;z-index: 0; } .anuncio-container { max-width: 90%; margin: 30px auto; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 0 15px rgba(0,0,0,0.1); z-index: 999; } .anuncio-step { display: none; } .anuncio-step.active { display: block; } .anuncio-step h2 { color: #0d475e; font-size: 20px; } label { display: block; margin: 15px 0 5px;} input, select, textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 8px;} .anuncio-buttons { margin-top: 20px; display: flex; justify-content: space-between;} .anuncio-buttons button { padding: 10px 20px; background: linear-gradient(135deg, #0d475e 0%, #1a1a1a 100%); color: white; border: none; border-radius: 8px; cursor: pointer;} .anuncio-buttons button:hover { background: #0d3ec2; } .anuncio-modal { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.7); display: none; align-items:center; justify-content: center;} .anuncio-modal-content { background: white; padding: 30px; border-radius: 12px; text-align: center; max-width: 400px;} .anuncio-modal-content h2 { color: #0d475e;} /* ===== BUSCAS POR BAIRRO – Desktop ===== */ section#buscasBoutique { width: 100%; height: 100%; position: relative;; } section#buscasBoutique div.buscas_boutique_container { max-width: 1200px; margin: 0 auto; padding: 2rem 1rem; } section#buscasBoutique div.buscas_boutique_container h2 { text-align: center;font-size: 1.5rem; margin-bottom: 60px; color: #0d475e; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks ul { list-style: none; padding: 0; margin: 0; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks p {font-weight: 600; font-size: 1.1rem; margin-bottom: 12px; color: #7a8ca5; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks li { margin-bottom: 10px; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks a { text-decoration: none;color: #000;font-size: 12px; line-height: 22px;transition: all 0.2s ease-in-out; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks a:hover { color: #cc0000; text-decoration: underline; } .chatbox { width: 350px; height: 500px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); background-color: white; display: flex; flex-direction: column; overflow: hidden; } .chat-header { background-color: #0d475e; color: white; padding: 15px; text-align: center; } .chat-content { flex: 1; padding: 10px; overflow-y: auto; } .message { margin-bottom: 10px; padding: 8px 12px; border-radius: 8px; max-width: 80%; word-wrap: break-word; } .user-message { background-color: #d9fdd3; align-self: flex-end; text-align: right; } .bot-message { background-color: #f1f0f0; align-self: flex-start; } .chat-input { display: flex; border-top: 1px solid #ddd; } .chat-input input { flex: 1; border: none; padding: 10px; } .chat-input button { background-color: #0d475e; color: white; border: none; padding: 10px 15px; cursor: pointer; } .chat-input button:hover { background-color: #093a4e; } /* SECTION BOUTIQUE FOOTER */ #boutiqueFooter { background-image: linear-gradient(to right, #0d475e, #0d475e, #0d475e, #0d475e, #0d475e, #164359, #1c3e54, #203a4e, #243141, #242833, #202126, #1a1a1a); color: white; font-family: var(--color-font-primary); padding: 2rem 0rem; width: 100%; height: 100%; margin-top: 30px;} .footer__container { width: 100%; margin: 0px auto; display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 40px; flex-wrap: wrap; padding: 0px 10px; } .footer__contact { display: flex; width: 100%; height: 100%; justify-content: space-between; flex-wrap: wrap; gap: 40px; margin-bottom: 60px; } .contact__info { flex: 1; min-width: 100%; } .contact__info nav ul { display: flex; align-items: center; gap: 30px; padding: 15px 0px; } .contact__info nav ul li i { color: #fff; font-size: 20px; } .contact__info h2 { font-size: 28px; ; margin-bottom: 20px; color: #fff; } .contact__info p { line-height: 25px; color: #fff; padding: 0px 0px 10px 0px; font-size: 14px; } .contact__info p strong { color: #f0d98a; font-weight: 600; } .contact__detail { cursor: pointer; padding: 0px 0px 15px 0px; margin-top: 15px; font-size: 14px; display: flex; align-items: center; gap: 10px; color: #fff; } .contact__form { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 15px; } .contact__form input::placeholder { font-family: "Playfair Display", serif; font-size: 14px; } .contact__form textarea::placeholder { font-family: "Playfair Display", serif; font-size: 14px; } .contact__form input,.contact__form textarea { padding: 12px; border: 2px solid #f0d98a; background: #fff; color: #0d475e; border-radius: 4px; font-size: 14px; } .form__group { display: flex; gap: 10px; } .form__group input { width: 100%;; } .contact__form textarea { resize: vertical; min-height: 100px; } .checkbox { font-size: 12px; display: flex; align-items: center; width: 100%;; gap: 8px; } .contact__form button { padding: 12px; background: #9c8758; border: none; color: white; font-weight: bold; cursor: pointer; transition: background 0.3s ease; } .contact__form button:hover { background: #bda369; } .footer__bottom { text-align: center; } .footer__bottom .logo { max-width: 160px; margin: 0px auto; margin-bottom: 50px; margin-top: -40px; } .footer__nav { display: grid; grid-template-columns: repeat(3, 1fr);; gap: 20px; margin: 20px 0; font-size: 14px; padding: 0px 0px 30px 0px; } .footer__nav a { color: #9C8758; font-size: 14px; ; text-decoration: none; } .footer__copy { font-size: 12px; color: #ccc; } /* DESENVOLVIMENTO */ div.desenvolvimento { padding: 0px 30px; display: flex; align-items: center; justify-content: center; gap: 40px; width: 100%; max-width: 1200px; margin: 0px auto; height: 30px;} div.desenvolvimento p { font-size: 12px; color: red; font-weight: 300; color: #0d475e; margin-top: 10px;} div.desenvolvimento p strong { font-weight: 700;font-size: 12px; } } @media only screen and (min-width: 360px) and (max-width: 729px) { header#boutiqueHeader { width: 100%; height: 100%; background-image: linear-gradient(to bottom, #0d475e, #0d475e, #0d475e, #0d475e, #0d475e, #164359, #1c3e54, #203a4e, #243141, #242833, #202126, #1a1a1a); padding: 15px 20px; } header#boutiqueHeader div.header_container { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 0.5rem; height: auto;margin: 0px auto; position: relative; } header#boutiqueHeader div.header_container .flip-2-ver-right-fwd { -webkit-animation: flip-2-ver-right-fwd 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; animation: flip-2-ver-right-fwd 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; } header#boutiqueHeader div.header_container figure img { width: 80px; height: auto; } header#boutiqueHeader div.header_container nav.navDesktop { display: none; } header#boutiqueHeader div.header_container nav.navDesktop ul { display: flex; gap: 20px; padding: 5px 0px;} header#boutiqueHeader div.header_container nav.navDesktop ul li a { color: #efe4ca; font-weight: 700; font-size: 14px; } header#boutiqueHeader div.header_container div.headerLancamentoButton { display: none; } header#boutiqueHeader div.header_container div.headerLancamentoButton a { font-size: 14px; font-weight: 700; color: #0d475e; } /* header#boutiqueHeader div.header_container div.lancamentoBotao { display: flex; background-color: red; } */ header#boutiqueHeader div.header_container div.botaoMenu { width: 50px; height: 50px; display: flex; justify-content: center;; } header#boutiqueHeader div.header_container div.botaoMenu button i { color: #efe4ca; font-size: 30px; cursor: pointer; } /* --- Modal Menu Header) --- */ .modal { position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,0.6); display: flex; justify-content: flex-start; align-items: flex-start; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.4s ease-out, visibility 0.4s ease-out; } /* Classe para esconder o modal completamente (display: none) */ .modal.hidden { display: none; } /* Quando o modal está ativo e visível */ .modal.is-active { opacity: 1; visibility: visible; pointer-events: auto; display: flex; } /* --- Conteúdo do Modal (o painel lateral) --- */ .modal-content { background-image: linear-gradient(to right, #0d475e, #0d475e, #0d475e, #0d475e, #0d475e, #164359, #1c3e54, #203a4e, #243141, #242833, #202126, #1a1a1a); padding: 20px; margin-top: 0; border-radius: 10px; position: relative; z-index: 1; width: 80%; max-width: 400px; height: 100%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transform: translateX(-100%); opacity: 0; transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.6s ease-out; margin-left: 0px;} /* Estado final da animação do modal-content (dentro da tela) */ .modal.is-active .modal-content { transform: translateX(0); opacity: 1; } /* --- PSEUDO-ELEMENTO para a BORDA ANIMADA (Primeira camada de borda) --- */ .modal-content::before { content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; z-index: -1; border-radius: inherit; background: linear-gradient(45deg, var(--color-font-secund) 0%, var(--color-principal-dark) 50%, var(--color-font-secund) 100%); background-size: 200% 200%; animation: animateBorder 3s linear infinite; opacity: 0; transition: opacity 0.6s ease-out; } /* Quando o modal está ativo, a borda animada também aparece */ .modal.is-active .modal-content::before { opacity: 1; } /* --- PSEUDO-ELEMENTO para a SEGUNDA BORDA (Cor Vermelha, Estática) --- */ .modal-content::after { content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; z-index: -2; border-radius: inherit; background-color: var(--color-red-danger); opacity: 0; transition: opacity 0.6s ease-out; } /* Quando o modal está ativo, a segunda borda também aparece */ .modal.is-active .modal-content::after { opacity: 1; } /* --- Keyframes para a animação da borda gradiente --- */ @keyframes animateBorder { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } /* --- Botão de Fechar --- */ .close-button { position: absolute; top: 20px; right: 30px; font-size: 25px; cursor: pointer; color: var(--color-font-secund); z-index: 1000; transition: color 0.2s ease-in-out; } .close-button:hover { color: var(--color-red-danger); } /* --- ESTILOS E ANIMAÇÕES PARA O CONTEÚDO INTERNO DO MODAL --- */ .modal-content header { display: flex; flex-direction: column; align-items: flex-start; gap: 60px; padding: 3rem 1rem; margin-top: 50px; opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; transition-delay: 0.4s;} .modal.is-active .modal-content header { opacity: 1; transform: translateY(0); } .modal-content header figure img { width: 120px; margin-left: 30px; } /* Links de Navegação Mobile */ .modal-content nav.navMobileLinks ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 30px; width: 100%; } .modal-content nav.navMobileLinks ul li { opacity: 0; transform: translateX(-20px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; } /* Atraso escalonado para cada item da lista */ .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(1) { transition-delay: 0.5s; } .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(2) { transition-delay: 0.55s; } .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(3) { transition-delay: 0.6s; } .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(4) { transition-delay: 0.65s; } .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(5) { transition-delay: 0.7s; } .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(6) { transition-delay: 0.75s; } /* Estado final da animação dos itens de lista */ .modal.is-active .modal-content nav.navMobileLinks ul li { opacity: 1; transform: translateX(0); } .modal-content nav.navMobileLinks ul li a { text-decoration: none; color: var(--color-font-secund); font-size: 1.2rem; display: flex; gap: 10px; align-items: center; } .modal-content nav.navMobileLinks ul li a:hover { color: var(--color-red-danger); } /* Ícones dentro dos links */ .modal-content nav.navMobileLinks ul li a i { transform: scale(0.8); opacity: 0; transition: transform 0.3s ease-out, opacity 0.3s ease-out; } .modal.is-active .modal-content nav.navMobileLinks ul li a i { transform: scale(1); opacity: 1; } /* --- Ícones Sociais Mobile --- */ .modal-content nav.navMobileSocial ul { list-style: none; padding: 0; margin-top: 1rem; display: flex; justify-content: center; gap: 1.5rem; } .modal-content nav.navMobileSocial ul li { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease-out, transform 0.4s ease-out; } /* Atraso escalonado para cada ícone social */ .modal.is-active .modal-content nav.navMobileSocial ul li:nth-child(1) { transition-delay: 0.8s; } .modal.is-active .modal-content nav.navMobileSocial ul li:nth-child(2) { transition-delay: 0.85s; } .modal.is-active .modal-content nav.navMobileSocial ul li:nth-child(3) { transition-delay: 0.9s; } .modal.is-active .modal-content nav.navMobileSocial ul li:nth-child(4) { transition-delay: 0.95s; } .modal.is-active .modal-content nav.navMobileSocial ul li:nth-child(5) { transition-delay: 1s; } .modal.is-active .modal-content nav.navMobileSocial ul li {opacity: 1; transform: translateY(0); } .modal-content nav.navMobileSocial ul li a { text-decoration: none; font-size: 1.2rem; position: relative; display: inline-block; overflow: hidden; line-height: 1; color: var(--color-font-secund); transition: color 0.3s ease-in-out; } /* --- Cores originais dos Ícones e Efeito de Preenchimento NO HOVER --- */ .modal-content nav.navMobileSocial ul li a i { color: inherit; background-size: 100% 200%; background-position: 0% 100%; transition: background-position 0.6s ease-out, color 0.3s ease-out;} div.container__figure { width: 100%; height: 100%; padding: 200px 0px 0px 0px ;z-index: 0; } .anuncio-container { max-width: 90%; margin: 30px auto; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 0 15px rgba(0,0,0,0.1); z-index: 999; } .anuncio-step { display: none; } .anuncio-step.active { display: block; } .anuncio-step h2 { color: #0d475e; font-size: 30px; } label { display: block; margin: 15px 0 5px;} input, select, textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 8px;} .anuncio-buttons { margin-top: 20px; display: flex; justify-content: space-between;} .anuncio-buttons button { padding: 10px 20px; background: linear-gradient(135deg, #0d475e 0%, #1a1a1a 100%); color: white; border: none; border-radius: 8px; cursor: pointer;} .anuncio-buttons button:hover { background: #0d3ec2; } .anuncio-modal { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.7); display: none; align-items:center; justify-content: center;} .anuncio-modal-content { background: white; padding: 30px; border-radius: 12px; text-align: center; max-width: 400px;} .anuncio-modal-content h2 { color: #0d475e;} /* ===== BUSCAS POR BAIRRO – Desktop ===== */ section#buscasBoutique { width: 100%; height: 100%; position: relative;; } section#buscasBoutique div.buscas_boutique_container { max-width: 1200px; margin: 0 auto; padding: 2rem 1rem; } section#buscasBoutique div.buscas_boutique_container h2 { text-align: center;font-size: 1.5rem; margin-bottom: 60px; color: #0d475e; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks ul { list-style: none; padding: 0; margin: 0; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks p {font-weight: 600; font-size: 1.1rem; margin-bottom: 12px; color: #7a8ca5; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks li { margin-bottom: 10px; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks a { text-decoration: none;color: #000;font-size: 12px; line-height: 22px;transition: all 0.2s ease-in-out; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks a:hover { color: #cc0000; text-decoration: underline; } .chatbox { width: 350px; height: 500px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); background-color: white; display: flex; flex-direction: column; overflow: hidden; } .chat-header { background-color: #0d475e; color: white; padding: 15px; text-align: center; } .chat-content { flex: 1; padding: 10px; overflow-y: auto; } .message { margin-bottom: 10px; padding: 8px 12px; border-radius: 8px; max-width: 80%; word-wrap: break-word; } .user-message { background-color: #d9fdd3; align-self: flex-end; text-align: right; } .bot-message { background-color: #f1f0f0; align-self: flex-start; } .chat-input { display: flex; border-top: 1px solid #ddd; } .chat-input input { flex: 1; border: none; padding: 10px; } .chat-input button { background-color: #0d475e; color: white; border: none; padding: 10px 15px; cursor: pointer; } .chat-input button:hover { background-color: #093a4e; } /* SECTION BOUTIQUE FOOTER */ #boutiqueFooter { background-image: linear-gradient(to right, #0d475e, #0d475e, #0d475e, #0d475e, #0d475e, #164359, #1c3e54, #203a4e, #243141, #242833, #202126, #1a1a1a); color: white; font-family: var(--color-font-primary); padding: 3rem 1rem; width: 100%; height: 100%; margin-top: 30px;} .footer__container { width: 100%; margin: 0px auto; display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 40px; flex-wrap: wrap; } .footer__contact { display: flex; width: 100%; height: 100%; justify-content: space-between; flex-wrap: wrap; gap: 40px; margin-bottom: 60px; } .contact__info { flex: 1; min-width: 100%; } .contact__info nav ul { display: flex; align-items: center; gap: 30px; padding: 15px 0px; } .contact__info nav ul li i { color: #fff; font-size: 20px; } .contact__info h2 { font-size: 28px; ; margin-bottom: 20px; color: #fff; } .contact__info p { line-height: 25px; color: #fff; padding: 0px 0px 10px 0px; font-size: 14px; } .contact__info p strong { color: #f0d98a; font-weight: 600; } .contact__detail { cursor: pointer; padding: 0px 0px 15px 0px; margin-top: 15px; font-size: 14px; display: flex; align-items: center; gap: 10px; color: #fff; } .contact__form { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 15px; } .contact__form input::placeholder { font-family: "Playfair Display", serif; font-size: 14px; } .contact__form textarea::placeholder { font-family: "Playfair Display", serif; font-size: 14px; } .contact__form input,.contact__form textarea { padding: 12px; border: 2px solid #f0d98a; background: #fff; color: #0d475e; border-radius: 4px; font-size: 14px; } .form__group { display: flex; gap: 10px; } .form__group input { width: 100%;; } .contact__form textarea { resize: vertical; min-height: 100px; } .checkbox { font-size: 12px; display: flex; align-items: center; gap: 8px; } .contact__form button { padding: 12px; background: #9c8758; border: none; color: white; font-weight: bold; cursor: pointer; transition: background 0.3s ease; } .contact__form button:hover { background: #bda369; } .footer__bottom { text-align: center; } .footer__bottom .logo { max-width: 160px; margin: 0px auto; margin-bottom: 50px; margin-top: -40px; } .footer__nav { display: grid; grid-template-columns: repeat(3, 1fr);; gap: 20px; margin: 20px 0; font-size: 14px; padding: 0px 0px 30px 0px; } .footer__nav a { color: #9C8758; font-size: 14px; ; text-decoration: none; } .footer__copy { font-size: 12px; color: #ccc; } /* DESENVOLVIMENTO */ div.desenvolvimento { padding: 0px 30px; display: flex; align-items: center; justify-content: center; gap: 40px; width: 100%; max-width: 1200px; margin: 0px auto; height: 30px;} div.desenvolvimento p.desenvovimento__p { font-size: 12px; font-weight: 300; color: #0d475e; margin-top: 15px;} div.desenvolvimento p strong { font-weight: 700;font-size: 12px; } } @media only screen and (min-width: 730px) and (max-width: 767px) { header#boutiqueHeader { width: 100%; height: 100%; background-image: linear-gradient(to bottom, #0d475e, #0d475e, #0d475e, #0d475e, #0d475e, #164359, #1c3e54, #203a4e, #243141, #242833, #202126, #1a1a1a); padding: 15px 20px; } header#boutiqueHeader div.header_container { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 0.5rem; height: auto;margin: 0px auto; position: relative; } header#boutiqueHeader div.header_container .flip-2-ver-right-fwd { -webkit-animation: flip-2-ver-right-fwd 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; animation: flip-2-ver-right-fwd 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; } header#boutiqueHeader div.header_container figure img { width: 80px; height: auto; } header#boutiqueHeader div.header_container nav.navDesktop { display: none; } header#boutiqueHeader div.header_container nav.navDesktop ul { display: flex; gap: 20px; padding: 5px 0px;} header#boutiqueHeader div.header_container nav.navDesktop ul li a { color: #efe4ca; font-weight: 700; font-size: 14px; } header#boutiqueHeader div.header_container div.headerLancamentoButton { display: none; } header#boutiqueHeader div.header_container div.headerLancamentoButton a { font-size: 14px; font-weight: 700; color: #0d475e; } /* header#boutiqueHeader div.header_container div.lancamentoBotao { display: flex; background-color: red; } */ header#boutiqueHeader div.header_container div.botaoMenu { width: 50px; height: 50px; display: flex; justify-content: center;; } header#boutiqueHeader div.header_container div.botaoMenu button i { color: #efe4ca; font-size: 30px; cursor: pointer; } /* --- Modal Menu Header) --- */ .modal { position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,0.6); display: flex; justify-content: flex-start; align-items: flex-start; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.4s ease-out, visibility 0.4s ease-out; } /* Classe para esconder o modal completamente (display: none) */ .modal.hidden { display: none; } /* Quando o modal está ativo e visível */ .modal.is-active { opacity: 1; visibility: visible; pointer-events: auto; display: flex; } /* --- Conteúdo do Modal (o painel lateral) --- */ .modal-content { background-image: linear-gradient(to right, #0d475e, #0d475e, #0d475e, #0d475e, #0d475e, #164359, #1c3e54, #203a4e, #243141, #242833, #202126, #1a1a1a); padding: 20px; margin-top: 0; border-radius: 10px; position: relative; z-index: 1; width: 80%; max-width: 400px; height: 100%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transform: translateX(-100%); opacity: 0; transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.6s ease-out; margin-left: 0px;} /* Estado final da animação do modal-content (dentro da tela) */ .modal.is-active .modal-content { transform: translateX(0); opacity: 1; } /* --- PSEUDO-ELEMENTO para a BORDA ANIMADA (Primeira camada de borda) --- */ .modal-content::before { content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; z-index: -1; border-radius: inherit; background: linear-gradient(45deg, var(--color-font-secund) 0%, var(--color-principal-dark) 50%, var(--color-font-secund) 100%); background-size: 200% 200%; animation: animateBorder 3s linear infinite; opacity: 0; transition: opacity 0.6s ease-out; } /* Quando o modal está ativo, a borda animada também aparece */ .modal.is-active .modal-content::before { opacity: 1; } /* --- PSEUDO-ELEMENTO para a SEGUNDA BORDA (Cor Vermelha, Estática) --- */ .modal-content::after { content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; z-index: -2; border-radius: inherit; background-color: var(--color-red-danger); opacity: 0; transition: opacity 0.6s ease-out; } /* Quando o modal está ativo, a segunda borda também aparece */ .modal.is-active .modal-content::after { opacity: 1; } /* --- Keyframes para a animação da borda gradiente --- */ @keyframes animateBorder { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } /* --- Botão de Fechar --- */ .close-button { position: absolute; top: 20px; right: 30px; font-size: 25px; cursor: pointer; color: var(--color-font-secund); z-index: 1000; transition: color 0.2s ease-in-out; } .close-button:hover { color: var(--color-red-danger); } /* --- ESTILOS E ANIMAÇÕES PARA O CONTEÚDO INTERNO DO MODAL --- */ .modal-content header { display: flex; flex-direction: column; align-items: flex-start; gap: 60px; padding: 3rem 1rem; margin-top: 50px; opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; transition-delay: 0.4s;} .modal.is-active .modal-content header { opacity: 1; transform: translateY(0); } .modal-content header figure img { width: 120px; margin-left: -20px; } /* Links de Navegação Mobile */ .modal-content nav.navMobileLinks ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 30px; width: 100%; } .modal-content nav.navMobileLinks ul li { opacity: 0; transform: translateX(-20px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; } /* Atraso escalonado para cada item da lista */ .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(1) { transition-delay: 0.5s; } .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(2) { transition-delay: 0.55s; } .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(3) { transition-delay: 0.6s; } .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(4) { transition-delay: 0.65s; } .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(5) { transition-delay: 0.7s; } .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(6) { transition-delay: 0.75s; } /* Estado final da animação dos itens de lista */ .modal.is-active .modal-content nav.navMobileLinks ul li { opacity: 1; transform: translateX(0); } .modal-content nav.navMobileLinks ul li a { text-decoration: none; color: var(--color-font-secund); font-size: 1.2rem; display: flex; gap: 10px; align-items: center; } .modal-content nav.navMobileLinks ul li a:hover { color: var(--color-red-danger); } /* Ícones dentro dos links */ .modal-content nav.navMobileLinks ul li a i { transform: scale(0.8); opacity: 0; transition: transform 0.3s ease-out, opacity 0.3s ease-out; } .modal.is-active .modal-content nav.navMobileLinks ul li a i { transform: scale(1); opacity: 1; } /* --- Ícones Sociais Mobile --- */ .modal-content nav.navMobileSocial ul { list-style: none; padding: 0; margin-top: 1rem; display: flex; justify-content: center; gap: 1.5rem; } .modal-content nav.navMobileSocial ul li { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease-out, transform 0.4s ease-out; } /* Atraso escalonado para cada ícone social */ .modal.is-active .modal-content nav.navMobileSocial ul li:nth-child(1) { transition-delay: 0.8s; } .modal.is-active .modal-content nav.navMobileSocial ul li:nth-child(2) { transition-delay: 0.85s; } .modal.is-active .modal-content nav.navMobileSocial ul li:nth-child(3) { transition-delay: 0.9s; } .modal.is-active .modal-content nav.navMobileSocial ul li:nth-child(4) { transition-delay: 0.95s; } .modal.is-active .modal-content nav.navMobileSocial ul li:nth-child(5) { transition-delay: 1s; } .modal.is-active .modal-content nav.navMobileSocial ul li {opacity: 1; transform: translateY(0); } .modal-content nav.navMobileSocial ul li a { text-decoration: none; font-size: 1.2rem; position: relative; display: inline-block; overflow: hidden; line-height: 1; color: var(--color-font-secund); transition: color 0.3s ease-in-out; } /* --- Cores originais dos Ícones e Efeito de Preenchimento NO HOVER --- */ .modal-content nav.navMobileSocial ul li a i { color: inherit; background-size: 100% 200%; background-position: 0% 100%; transition: background-position 0.6s ease-out, color 0.3s ease-out;} div.container__figure { width: 100%; height: 100%; padding: 200px 0px 0px 0px ;z-index: 0; } .anuncio-container { max-width: 650px; margin: 30px auto; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 0 15px rgba(0,0,0,0.1); z-index: 999; } .anuncio-step { display: none; } .anuncio-step.active { display: block; } label { display: block; margin: 15px 0 5px;} input, select, textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 8px;} .anuncio-buttons { margin-top: 20px; display: flex; justify-content: space-between;} .anuncio-buttons button { padding: 10px 20px; background: linear-gradient(135deg, #0d475e 0%, #1a1a1a 100%); color: white; border: none; border-radius: 8px; cursor: pointer;} .anuncio-buttons button:hover { background: #0d3ec2; } .anuncio-modal { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.7); display: none; align-items:center; justify-content: center;} .anuncio-modal-content { background: white; padding: 30px; border-radius: 12px; text-align: center; max-width: 400px;} .anuncio-modal-content h2 { color: #0d475e;} /* ===== BUSCAS POR BAIRRO – Desktop ===== */ section#buscasBoutique { width: 100%; height: 100%; position: relative;; } section#buscasBoutique div.buscas_boutique_container { max-width: 1200px; margin: 0 auto; padding: 2rem 3rem; } section#buscasBoutique div.buscas_boutique_container h2 { text-align: center;font-size: 2rem; margin-bottom: 60px; color: #0d475e; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks ul { list-style: none; padding: 0; margin: 0; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks p {font-weight: 600; font-size: 1.1rem; margin-bottom: 12px; color: #7a8ca5; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks li { margin-bottom: 10px; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks a { text-decoration: none;color: #000;font-size: 12px; line-height: 22px;transition: all 0.2s ease-in-out; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks a:hover { color: #cc0000; text-decoration: underline; } .chatbox { width: 350px; height: 500px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); background-color: white; display: flex; flex-direction: column; overflow: hidden; } .chat-header { background-color: #0d475e; color: white; padding: 15px; text-align: center; } .chat-content { flex: 1; padding: 10px; overflow-y: auto; } .message { margin-bottom: 10px; padding: 8px 12px; border-radius: 8px; max-width: 80%; word-wrap: break-word; } .user-message { background-color: #d9fdd3; align-self: flex-end; text-align: right; } .bot-message { background-color: #f1f0f0; align-self: flex-start; } .chat-input { display: flex; border-top: 1px solid #ddd; } .chat-input input { flex: 1; border: none; padding: 10px; } .chat-input button { background-color: #0d475e; color: white; border: none; padding: 10px 15px; cursor: pointer; } .chat-input button:hover { background-color: #093a4e; } /* SECTION BOUTIQUE FOOTER */ #boutiqueFooter { background-image: linear-gradient(to right, #0d475e, #0d475e, #0d475e, #0d475e, #0d475e, #164359, #1c3e54, #203a4e, #243141, #242833, #202126, #1a1a1a); color: white; font-family: var(--color-font-primary); padding: 60px 0px; width: 100%; height: 100%;} .footer__container { padding: 2rem; width: 100%; max-width: 1200px; margin: 0px auto;; display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 40px; flex-wrap: wrap; } .footer__contact { display: flex; width: 95%; height: 100%; justify-content: space-between; flex-wrap: wrap; gap: 40px; margin-bottom: 60px; } .contact__info { flex: 1; min-width: 250px; } .contact__info nav ul { display: flex; align-items: center; gap: 30px; padding: 15px 0px; } .contact__info nav ul li i { color: #fff; font-size: 20px; } .contact__info h2 { font-size: 28px; ; margin-bottom: 20px; color: #fff; } .contact__info p { color: red; line-height: 25px; color: #fff; padding: 0px 0px 10px 0px; } .contact__info p strong { color: #f0d98a; font-weight: 600; } .contact__detail { cursor: pointer; padding: 0px 0px 15px 0px; margin-top: 15px; font-size: 18px; display: flex; align-items: center; gap: 10px; color: #fff; } .contact__form { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 15px; } .contact__form input::placeholder { font-family: "Playfair Display", serif; font-size: 14px; } .contact__form textarea::placeholder { font-family: "Playfair Display", serif; font-size: 14px; } .contact__form input,.contact__form textarea { padding: 12px; border: 2px solid #f0d98a; background: #fff; color: #0d475e; border-radius: 4px; font-size: 14px; } .form__group { display: flex; gap: 10px; } .form__group input { width: 100%;; } .contact__form textarea { resize: vertical; min-height: 100px; } .checkbox { font-size: 12px; display: flex; align-items: center; gap: 8px; } .contact__form button { padding: 12px; background: #9c8758; border: none; color: white; font-weight: bold; cursor: pointer; transition: background 0.3s ease; } .contact__form button:hover { background: #bda369; } .footer__bottom { text-align: center; } .footer__bottom .logo { max-width: 160px; margin: 20px auto; } .footer__nav { display: flex; justify-content: center; gap: 40px; margin: 20px 0; font-size: 14px; padding: 0px 0px 30px 0px; } .footer__nav a { color: #9C8758; font-size: 20px; padding: 20px 0px ; text-decoration: none; } .footer__copy { font-size: 12px; color: #ccc; } /* DESENVOLVIMENTO */ div.desenvolvimento { padding: 10px 30px; display: flex; align-items: center; justify-content: center; gap: 40px; width: 100%; max-width: 1200px; margin: 0px auto;} div.desenvolvimento p { font-size: 12px; font-weight: 300; color: #0d475e;} div.desenvolvimento p strong { font-weight: 700; } div.desenvolvimento nav.socialDev { display: flex; } div.desenvolvimento nav.socialDev ul { display: flex; gap: 20px; } div.desenvolvimento nav.socialDev ul li a { color: #0d475e; font-size: 14px;} /* DESENVOLVIMENTO */ } @media only screen and (min-width: 768px) and (max-width: 1023px) { header#boutiqueHeader { width: 100%; height: 100%; background-image: linear-gradient(to bottom, #0d475e, #0d475e, #0d475e, #0d475e, #0d475e, #164359, #1c3e54, #203a4e, #243141, #242833, #202126, #1a1a1a); padding: 15px 20px; } header#boutiqueHeader div.header_container { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 0.5rem; height: auto;margin: 0px auto; position: relative; } header#boutiqueHeader div.header_container .flip-2-ver-right-fwd { -webkit-animation: flip-2-ver-right-fwd 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; animation: flip-2-ver-right-fwd 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; } header#boutiqueHeader div.header_container figure img { width: 80px; height: auto; } header#boutiqueHeader div.header_container nav.navDesktop { display: none; } header#boutiqueHeader div.header_container nav.navDesktop ul { display: flex; gap: 20px; padding: 5px 0px;} header#boutiqueHeader div.header_container nav.navDesktop ul li a { color: #efe4ca; font-weight: 700; font-size: 14px; } header#boutiqueHeader div.header_container div.headerLancamentoButton { display: none; } header#boutiqueHeader div.header_container div.headerLancamentoButton a { font-size: 14px; font-weight: 700; color: #0d475e; } /* header#boutiqueHeader div.header_container div.lancamentoBotao { display: flex; background-color: red; } */ header#boutiqueHeader div.header_container div.botaoMenu { width: 50px; height: 50px; display: flex; justify-content: center;; } header#boutiqueHeader div.header_container div.botaoMenu button i { color: #efe4ca; font-size: 30px; cursor: pointer; } /* --- Modal Menu Header) --- */ .modal { position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,0.6); display: flex; justify-content: flex-start; align-items: flex-start; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.4s ease-out, visibility 0.4s ease-out; } /* Classe para esconder o modal completamente (display: none) */ .modal.hidden { display: none; } /* Quando o modal está ativo e visível */ .modal.is-active { opacity: 1; visibility: visible; pointer-events: auto; display: flex; } /* --- Conteúdo do Modal (o painel lateral) --- */ .modal-content { background-image: linear-gradient(to right, #0d475e, #0d475e, #0d475e, #0d475e, #0d475e, #164359, #1c3e54, #203a4e, #243141, #242833, #202126, #1a1a1a); padding: 20px; margin-top: 0; border-radius: 10px; position: relative; z-index: 1; width: 80%; max-width: 400px; height: 100%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transform: translateX(-100%); opacity: 0; transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.6s ease-out; margin-left: 0px;} /* Estado final da animação do modal-content (dentro da tela) */ .modal.is-active .modal-content { transform: translateX(0); opacity: 1; } /* --- PSEUDO-ELEMENTO para a BORDA ANIMADA (Primeira camada de borda) --- */ .modal-content::before { content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; z-index: -1; border-radius: inherit; background: linear-gradient(45deg, var(--color-font-secund) 0%, var(--color-principal-dark) 50%, var(--color-font-secund) 100%); background-size: 200% 200%; animation: animateBorder 3s linear infinite; opacity: 0; transition: opacity 0.6s ease-out; } /* Quando o modal está ativo, a borda animada também aparece */ .modal.is-active .modal-content::before { opacity: 1; } /* --- PSEUDO-ELEMENTO para a SEGUNDA BORDA (Cor Vermelha, Estática) --- */ .modal-content::after { content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; z-index: -2; border-radius: inherit; background-color: var(--color-red-danger); opacity: 0; transition: opacity 0.6s ease-out; } /* Quando o modal está ativo, a segunda borda também aparece */ .modal.is-active .modal-content::after { opacity: 1; } /* --- Keyframes para a animação da borda gradiente --- */ @keyframes animateBorder { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } /* --- Botão de Fechar --- */ .close-button { position: absolute; top: 20px; right: 30px; font-size: 25px; cursor: pointer; color: var(--color-font-secund); z-index: 1000; transition: color 0.2s ease-in-out; } .close-button:hover { color: var(--color-red-danger); } /* --- ESTILOS E ANIMAÇÕES PARA O CONTEÚDO INTERNO DO MODAL --- */ .modal-content header { display: flex; flex-direction: column; align-items: flex-start; gap: 60px; padding: 3rem 1rem; margin-top: 50px; opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; transition-delay: 0.4s;} .modal.is-active .modal-content header { opacity: 1; transform: translateY(0); } .modal-content header figure img { width: 120px; margin-left: -20px; } /* Links de Navegação Mobile */ .modal-content nav.navMobileLinks ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 30px; width: 100%; } .modal-content nav.navMobileLinks ul li { opacity: 0; transform: translateX(-20px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; } /* Atraso escalonado para cada item da lista */ .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(1) { transition-delay: 0.5s; } .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(2) { transition-delay: 0.55s; } .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(3) { transition-delay: 0.6s; } .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(4) { transition-delay: 0.65s; } .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(5) { transition-delay: 0.7s; } .modal.is-active .modal-content nav.navMobileLinks ul li:nth-child(6) { transition-delay: 0.75s; } /* Estado final da animação dos itens de lista */ .modal.is-active .modal-content nav.navMobileLinks ul li { opacity: 1; transform: translateX(0); } .modal-content nav.navMobileLinks ul li a { text-decoration: none; color: var(--color-font-secund); font-size: 1.2rem; display: flex; gap: 10px; align-items: center; } .modal-content nav.navMobileLinks ul li a:hover { color: var(--color-red-danger); } /* Ícones dentro dos links */ .modal-content nav.navMobileLinks ul li a i { transform: scale(0.8); opacity: 0; transition: transform 0.3s ease-out, opacity 0.3s ease-out; } .modal.is-active .modal-content nav.navMobileLinks ul li a i { transform: scale(1); opacity: 1; } /* --- Ícones Sociais Mobile --- */ .modal-content nav.navMobileSocial ul { list-style: none; padding: 0; margin-top: 1rem; display: flex; justify-content: center; gap: 1.5rem; } .modal-content nav.navMobileSocial ul li { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease-out, transform 0.4s ease-out; } /* Atraso escalonado para cada ícone social */ .modal.is-active .modal-content nav.navMobileSocial ul li:nth-child(1) { transition-delay: 0.8s; } .modal.is-active .modal-content nav.navMobileSocial ul li:nth-child(2) { transition-delay: 0.85s; } .modal.is-active .modal-content nav.navMobileSocial ul li:nth-child(3) { transition-delay: 0.9s; } .modal.is-active .modal-content nav.navMobileSocial ul li:nth-child(4) { transition-delay: 0.95s; } .modal.is-active .modal-content nav.navMobileSocial ul li:nth-child(5) { transition-delay: 1s; } .modal.is-active .modal-content nav.navMobileSocial ul li {opacity: 1; transform: translateY(0); } .modal-content nav.navMobileSocial ul li a { text-decoration: none; font-size: 1.2rem; position: relative; display: inline-block; overflow: hidden; line-height: 1; color: var(--color-font-secund); transition: color 0.3s ease-in-out; } /* --- Cores originais dos Ícones e Efeito de Preenchimento NO HOVER --- */ .modal-content nav.navMobileSocial ul li a i { color: inherit; background-size: 100% 200%; background-position: 0% 100%; transition: background-position 0.6s ease-out, color 0.3s ease-out;} div.container__figure { width: 100%; height: 100%; padding: 200px 0px 0px 0px ;z-index: 0; } .anuncio-container { max-width: 650px; margin: 30px auto; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 0 15px rgba(0,0,0,0.1); z-index: 999; } .anuncio-step { display: none; } .anuncio-step.active { display: block; } label { display: block; margin: 15px 0 5px;} input, select, textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 8px;} .anuncio-buttons { margin-top: 20px; display: flex; justify-content: space-between;} .anuncio-buttons button { padding: 10px 20px; background: linear-gradient(135deg, #0d475e 0%, #1a1a1a 100%); color: white; border: none; border-radius: 8px; cursor: pointer;} .anuncio-buttons button:hover { background: #0d3ec2; } .anuncio-modal { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.7); display: none; align-items:center; justify-content: center;} .anuncio-modal-content { background: white; padding: 30px; border-radius: 12px; text-align: center; max-width: 400px;} .anuncio-modal-content h2 { color: #0d475e;} /* ===== BUSCAS POR BAIRRO – Desktop ===== */ section#buscasBoutique { width: 100%; height: 100%; position: relative;; } section#buscasBoutique div.buscas_boutique_container { max-width: 1200px; margin: 0 auto; padding: 2rem 3rem; } section#buscasBoutique div.buscas_boutique_container h2 { text-align: center;font-size: 2rem; margin-bottom: 60px; color: #0d475e; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks ul { list-style: none; padding: 0; margin: 0; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks p {font-weight: 600; font-size: 1.1rem; margin-bottom: 12px; color: #7a8ca5; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks li { margin-bottom: 10px; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks a { text-decoration: none;color: #000;font-size: 12px; line-height: 22px;transition: all 0.2s ease-in-out; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks a:hover { color: #cc0000; text-decoration: underline; } .chatbox { width: 350px; height: 500px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); background-color: white; display: flex; flex-direction: column; overflow: hidden; } .chat-header { background-color: #0d475e; color: white; padding: 15px; text-align: center; } .chat-content { flex: 1; padding: 10px; overflow-y: auto; } .message { margin-bottom: 10px; padding: 8px 12px; border-radius: 8px; max-width: 80%; word-wrap: break-word; } .user-message { background-color: #d9fdd3; align-self: flex-end; text-align: right; } .bot-message { background-color: #f1f0f0; align-self: flex-start; } .chat-input { display: flex; border-top: 1px solid #ddd; } .chat-input input { flex: 1; border: none; padding: 10px; } .chat-input button { background-color: #0d475e; color: white; border: none; padding: 10px 15px; cursor: pointer; } .chat-input button:hover { background-color: #093a4e; } /* SECTION BOUTIQUE FOOTER */ #boutiqueFooter { background-image: linear-gradient(to right, #0d475e, #0d475e, #0d475e, #0d475e, #0d475e, #164359, #1c3e54, #203a4e, #243141, #242833, #202126, #1a1a1a); color: white; font-family: var(--color-font-primary); padding: 60px 0px; width: 100%; height: 100%;} .footer__container { padding: 2rem; width: 100%; max-width: 1200px; margin: 0px auto;; display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 40px; flex-wrap: wrap; } .footer__contact { display: flex; width: 95%; height: 100%; justify-content: space-between; flex-wrap: wrap; gap: 40px; margin-bottom: 60px; } .contact__info { flex: 1; min-width: 250px; } .contact__info nav ul { display: flex; align-items: center; gap: 30px; padding: 15px 0px; } .contact__info nav ul li i { color: #fff; font-size: 20px; } .contact__info h2 { font-size: 28px; ; margin-bottom: 20px; color: #fff; } .contact__info p { color: red; line-height: 25px; color: #fff; padding: 0px 0px 10px 0px; } .contact__info p strong { color: #f0d98a; font-weight: 600; } .contact__detail { cursor: pointer; padding: 0px 0px 15px 0px; margin-top: 15px; font-size: 18px; display: flex; align-items: center; gap: 10px; color: #fff; } .contact__form { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 15px; } .contact__form input::placeholder { font-family: "Playfair Display", serif; font-size: 14px; } .contact__form textarea::placeholder { font-family: "Playfair Display", serif; font-size: 14px; } .contact__form input,.contact__form textarea { padding: 12px; border: 2px solid #f0d98a; background: #fff; color: #0d475e; border-radius: 4px; font-size: 14px; } .form__group { display: flex; gap: 10px; } .form__group input { width: 100%;; } .contact__form textarea { resize: vertical; min-height: 100px; } .checkbox { font-size: 12px; display: flex; align-items: center; gap: 8px; } .contact__form button { padding: 12px; background: #9c8758; border: none; color: white; font-weight: bold; cursor: pointer; transition: background 0.3s ease; } .contact__form button:hover { background: #bda369; } .footer__bottom { text-align: center; } .footer__bottom .logo { max-width: 160px; margin: 20px auto; } .footer__nav { display: flex; justify-content: center; gap: 40px; margin: 20px 0; font-size: 14px; padding: 0px 0px 30px 0px; } .footer__nav a { color: #9C8758; font-size: 20px; padding: 20px 0px ; text-decoration: none; } .footer__copy { font-size: 12px; color: #ccc; } /* DESENVOLVIMENTO */ div.desenvolvimento { padding: 10px 30px; display: flex; align-items: center; justify-content: center; gap: 40px; width: 100%; max-width: 1200px; margin: 0px auto;} div.desenvolvimento p { font-size: 12px; font-weight: 300; color: #0d475e;} div.desenvolvimento p strong { font-weight: 700; } div.desenvolvimento nav.socialDev { display: flex; } div.desenvolvimento nav.socialDev ul { display: flex; gap: 20px; } div.desenvolvimento nav.socialDev ul li a { color: #0d475e; font-size: 14px;} /* DESENVOLVIMENTO */ } @media only screen and (min-width: 1024px) and (max-width: 1365px) { header#boutiqueHeader { width: 100%; height: 100%; background-image: linear-gradient(to bottom, #0d475e, #0d475e, #0d475e, #0d475e, #0d475e, #164359, #1c3e54, #203a4e, #243141, #242833, #202126, #1a1a1a); padding: 30px 20px; } header#boutiqueHeader div.header_container { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 900px; height: auto;margin: 0px auto; position: relative; } header#boutiqueHeader div.header_container .flip-2-ver-right-fwd { -webkit-animation: flip-2-ver-right-fwd 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; animation: flip-2-ver-right-fwd 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; } header#boutiqueHeader div.header_container figure img { width: 120px; height: auto; } header#boutiqueHeader div.header_container nav.navDesktop { display: flex; width: 100%; justify-content: center;} header#boutiqueHeader div.header_container nav.navDesktop ul { display: flex; gap: 50px; padding: 5px 0px;} header#boutiqueHeader div.header_container nav.navDesktop ul li a { color: #efe4ca; font-weight: 700; font-size: 14px; } header#boutiqueHeader div.header_container div.headerLancamentoButton { display: flex; justify-content: center; align-items: center; background-color: #efe4ca; padding: 10px 20px; border-radius: 20px;width: 200px; } header#boutiqueHeader div.header_container div.headerLancamentoButton a { font-size: 14px; font-weight: 700; color: #0d475e; } header#boutiqueHeader div.header_container div.lancamentoBotao { display: none; } /* BOTÃO MENU */ .modal { display: none; } .hidden { display: none; } div.container__figure { width: 100%; height: 100%; padding: 200px 0px 0px 0px ;z-index: 0; } .anuncio-container { max-width: 800px; margin: 30px auto; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 0 15px rgba(0,0,0,0.1); z-index: 999; } .anuncio-step { display: none; } .anuncio-step.active { display: block; } label { display: block; margin: 15px 0 5px;} input, select, textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 8px;} .anuncio-buttons { margin-top: 20px; display: flex; justify-content: space-between;} .anuncio-buttons button { padding: 10px 20px; background: linear-gradient(135deg, #0d475e 0%, #1a1a1a 100%); color: white; border: none; border-radius: 8px; cursor: pointer;} .anuncio-buttons button:hover { background: #0d3ec2; } .anuncio-modal { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.7); display: none; align-items:center; justify-content: center;} .anuncio-modal-content { background: white; padding: 30px; border-radius: 12px; text-align: center; max-width: 400px;} .anuncio-modal-content h2 { color: #0d475e;} /* ===== BUSCAS POR BAIRRO – Desktop ===== */ section#buscasBoutique { width: 100%; height: 100%; position: relative;; } section#buscasBoutique div.buscas_boutique_container { max-width: 1200px; margin: 0 auto; padding: 2rem 3rem; } section#buscasBoutique div.buscas_boutique_container h2 { text-align: center;font-size: 2rem; margin-bottom: 60px; color: #0d475e; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks ul { list-style: none; padding: 0; margin: 0; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks p {font-weight: 600; font-size: 1.1rem; margin-bottom: 12px; color: #7a8ca5; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks li { margin-bottom: 10px; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks a { text-decoration: none;color: #000;font-size: 12px; line-height: 22px;transition: all 0.2s ease-in-out; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks a:hover { color: #cc0000; text-decoration: underline; } .chatbox { width: 350px; height: 500px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); background-color: white; display: flex; flex-direction: column; overflow: hidden; } .chat-header { background-color: #0d475e; color: white; padding: 15px; text-align: center; } .chat-content { flex: 1; padding: 10px; overflow-y: auto; } .message { margin-bottom: 10px; padding: 8px 12px; border-radius: 8px; max-width: 80%; word-wrap: break-word; } .user-message { background-color: #d9fdd3; align-self: flex-end; text-align: right; } .bot-message { background-color: #f1f0f0; align-self: flex-start; } .chat-input { display: flex; border-top: 1px solid #ddd; } .chat-input input { flex: 1; border: none; padding: 10px; } .chat-input button { background-color: #0d475e; color: white; border: none; padding: 10px 15px; cursor: pointer; } .chat-input button:hover { background-color: #093a4e; } /* SECTION BOUTIQUE FOOTER */ #boutiqueFooter { background-image: linear-gradient(to right, #0d475e, #0d475e, #0d475e, #0d475e, #0d475e, #164359, #1c3e54, #203a4e, #243141, #242833, #202126, #1a1a1a); color: white; font-family: var(--color-font-primary); padding: 60px 0px; width: 100%; height: 100%;} .footer__container { padding: 2rem; width: 100%; max-width: 1200px; margin: 0px auto;; display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 40px; flex-wrap: wrap; } .footer__contact { display: flex; width: 95%; height: 100%; justify-content: space-between; flex-wrap: wrap; gap: 40px; margin-bottom: 60px; } .contact__info { flex: 1; min-width: 250px; } .contact__info nav ul { display: flex; align-items: center; gap: 30px; padding: 15px 0px; } .contact__info nav ul li i { color: #fff; font-size: 20px; } .contact__info h2 { font-size: 28px; ; margin-bottom: 20px; color: #fff; } .contact__info p { color: red; line-height: 25px; color: #fff; padding: 0px 0px 10px 0px; } .contact__info p strong { color: #f0d98a; font-weight: 600; } .contact__detail { cursor: pointer; padding: 0px 0px 15px 0px; margin-top: 15px; font-size: 18px; display: flex; align-items: center; gap: 10px; color: #fff; } .contact__form { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 15px; } .contact__form input::placeholder { font-family: "Playfair Display", serif; font-size: 14px; } .contact__form textarea::placeholder { font-family: "Playfair Display", serif; font-size: 14px; } .contact__form input,.contact__form textarea { padding: 12px; border: 2px solid #f0d98a; background: #fff; color: #0d475e; border-radius: 4px; font-size: 14px; } .form__group { display: flex; gap: 10px; } .form__group input { width: 100%;; } .contact__form textarea { resize: vertical; min-height: 100px; } .checkbox { font-size: 12px; display: flex; align-items: center; gap: 8px; } .contact__form button { padding: 12px; background: #9c8758; border: none; color: white; font-weight: bold; cursor: pointer; transition: background 0.3s ease; } .contact__form button:hover { background: #bda369; } .footer__bottom { text-align: center; } .footer__bottom .logo { max-width: 160px; margin: 20px auto; } .footer__nav { display: flex; justify-content: center; gap: 60px; margin: 20px 0; font-size: 14px; padding: 0px 0px 30px 0px; } .footer__nav a { color: #9C8758; font-size: 20px; padding: 20px 0px ; text-decoration: none; } .footer__copy { font-size: 12px; color: #ccc; } /* DESENVOLVIMENTO */ div.desenvolvimento { padding: 10px 30px; display: flex; align-items: center; justify-content: center; gap: 40px; width: 100%; max-width: 1200px; margin: 0px auto;} div.desenvolvimento p { font-size: 12px; font-weight: 300; color: #0d475e;} div.desenvolvimento p strong { font-weight: 700; } div.desenvolvimento nav.socialDev { display: flex; } div.desenvolvimento nav.socialDev ul { display: flex; gap: 20px; } div.desenvolvimento nav.socialDev ul li a { color: #0d475e; font-size: 14px;} /* DESENVOLVIMENTO */ } @media only screen and (min-width: 1366px) and (max-width: 1599px){ header#boutiqueHeader { width: 100%; height: 100%; background-image: linear-gradient(to bottom, #0d475e, #0d475e, #0d475e, #0d475e, #0d475e, #164359, #1c3e54, #203a4e, #243141, #242833, #202126, #1a1a1a); padding: 30px 20px; } header#boutiqueHeader div.header_container { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1200px; height: auto;margin: 0px auto; position: relative; } header#boutiqueHeader div.header_container .flip-2-ver-right-fwd { -webkit-animation: flip-2-ver-right-fwd 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; animation: flip-2-ver-right-fwd 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; } header#boutiqueHeader div.header_container figure img { width: 120px; height: auto; } header#boutiqueHeader div.header_container nav.navDesktop { display: flex; width: 45%; position: absolute; right: 240px;} header#boutiqueHeader div.header_container nav.navDesktop ul { display: flex; gap: 50px; padding: 5px 0px;} header#boutiqueHeader div.header_container nav.navDesktop ul li a { color: #efe4ca; font-weight: 700; font-size: 14px; } header#boutiqueHeader div.header_container div.headerLancamentoButton { display: flex; justify-content: center; align-items: center; background-color: #efe4ca; padding: 10px 20px; border-radius: 20px;width: 200px; } header#boutiqueHeader div.header_container div.headerLancamentoButton a { font-size: 14px; font-weight: 700; color: #0d475e; } header#boutiqueHeader div.header_container div.lancamentoBotao { display: none; } /* BOTÃO MENU */ .modal { display: none; } .hidden { display: none; } div.container__figure { width: 100%; height: 100%; padding: 200px 0px 0px 0px ;z-index: 0; } .anuncio-container { max-width: 800px; margin: 30px auto; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 0 15px rgba(0,0,0,0.1); z-index: 999; } .anuncio-step { display: none; } .anuncio-step.active { display: block; } label { display: block; margin: 15px 0 5px;} input, select, textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 8px;} .anuncio-buttons { margin-top: 20px; display: flex; justify-content: space-between;} .anuncio-buttons button { padding: 10px 20px; background: linear-gradient(135deg, #0d475e 0%, #1a1a1a 100%); color: white; border: none; border-radius: 8px; cursor: pointer;} .anuncio-buttons button:hover { background: #0d3ec2; } .anuncio-modal { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.7); display: none; align-items:center; justify-content: center;} .anuncio-modal-content { background: white; padding: 30px; border-radius: 12px; text-align: center; max-width: 400px;} .anuncio-modal-content h2 { color: #0d475e;} /* ===== BUSCAS POR BAIRRO – Desktop ===== */ section#buscasBoutique { width: 100%; height: 100%; position: relative;; } section#buscasBoutique div.buscas_boutique_container { max-width: 1200px; margin: 0 auto; padding: 2rem 3rem; } section#buscasBoutique div.buscas_boutique_container h2 { text-align: center;font-size: 2rem; margin-bottom: 60px; color: #0d475e; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks ul { list-style: none; padding: 0; margin: 0; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks p {font-weight: 600; font-size: 1.1rem; margin-bottom: 12px; color: #7a8ca5; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks li { margin-bottom: 10px; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks a { text-decoration: none;color: #000;font-size: 12px; line-height: 22px;transition: all 0.2s ease-in-out; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks a:hover { color: #cc0000; text-decoration: underline; } .chatbox { width: 350px; height: 500px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); background-color: white; display: flex; flex-direction: column; overflow: hidden; } .chat-header { background-color: #0d475e; color: white; padding: 15px; text-align: center; } .chat-content { flex: 1; padding: 10px; overflow-y: auto; } .message { margin-bottom: 10px; padding: 8px 12px; border-radius: 8px; max-width: 80%; word-wrap: break-word; } .user-message { background-color: #d9fdd3; align-self: flex-end; text-align: right; } .bot-message { background-color: #f1f0f0; align-self: flex-start; } .chat-input { display: flex; border-top: 1px solid #ddd; } .chat-input input { flex: 1; border: none; padding: 10px; } .chat-input button { background-color: #0d475e; color: white; border: none; padding: 10px 15px; cursor: pointer; } .chat-input button:hover { background-color: #093a4e; } /* SECTION BOUTIQUE FOOTER */ #boutiqueFooter { background-image: linear-gradient(to right, #0d475e, #0d475e, #0d475e, #0d475e, #0d475e, #164359, #1c3e54, #203a4e, #243141, #242833, #202126, #1a1a1a); color: white; font-family: var(--color-font-primary); padding: 60px 0px; width: 100%; height: 100%;} .footer__container { padding: 2rem; width: 100%; max-width: 1200px; margin: 0px auto;; display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 40px; flex-wrap: wrap; } .footer__contact { display: flex; width: 95%; height: 100%; justify-content: space-between; flex-wrap: wrap; gap: 40px; margin-bottom: 60px; } .contact__info { flex: 1; min-width: 250px; } .contact__info nav ul { display: flex; align-items: center; gap: 30px; padding: 15px 0px; } .contact__info nav ul li i { color: #fff; font-size: 20px; } .contact__info h2 { font-size: 28px; ; margin-bottom: 20px; color: #fff; } .contact__info p { color: red; line-height: 25px; color: #fff; padding: 0px 0px 10px 0px; } .contact__info p strong { color: #f0d98a; font-weight: 600; } .contact__detail { cursor: pointer; padding: 0px 0px 15px 0px; margin-top: 15px; font-size: 18px; display: flex; align-items: center; gap: 10px; color: #fff; } .contact__form { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 15px; } .contact__form input::placeholder { font-family: "Playfair Display", serif; font-size: 14px; } .contact__form textarea::placeholder { font-family: "Playfair Display", serif; font-size: 14px; } .contact__form input,.contact__form textarea { padding: 12px; border: 2px solid #f0d98a; background: #fff; color: #0d475e; border-radius: 4px; font-size: 14px; } .form__group { display: flex; gap: 10px; } .form__group input { width: 100%;; } .contact__form textarea { resize: vertical; min-height: 100px; } .checkbox { font-size: 12px; display: flex; align-items: center; gap: 8px; } .contact__form button { padding: 12px; background: #9c8758; border: none; color: white; font-weight: bold; cursor: pointer; transition: background 0.3s ease; } .contact__form button:hover { background: #bda369; } .footer__bottom { text-align: center; } .footer__bottom .logo { max-width: 160px; margin: 20px auto; } .footer__nav { display: flex; justify-content: center; gap: 60px; margin: 20px 0; font-size: 14px; padding: 0px 0px 30px 0px; } .footer__nav a { color: #9C8758; font-size: 20px; padding: 20px 0px ; text-decoration: none; } .footer__copy { font-size: 12px; color: #ccc; } /* DESENVOLVIMENTO */ div.desenvolvimento { padding: 10px 30px; display: flex; align-items: center; justify-content: center; gap: 40px; width: 100%; max-width: 1200px; margin: 0px auto;} div.desenvolvimento p { font-size: 12px; font-weight: 300; color: #0d475e;} div.desenvolvimento p strong { font-weight: 700; } div.desenvolvimento nav.socialDev { display: flex; } div.desenvolvimento nav.socialDev ul { display: flex; gap: 20px; } div.desenvolvimento nav.socialDev ul li a { color: #0d475e; font-size: 14px;} /* DESENVOLVIMENTO */ } @media only screen and (min-width: 1600px) { header#boutiqueHeader { width: 100%; height: 100%; background-image: linear-gradient(to bottom, #0d475e, #0d475e, #0d475e, #0d475e, #0d475e, #164359, #1c3e54, #203a4e, #243141, #242833, #202126, #1a1a1a); padding: 30px 20px; } header#boutiqueHeader div.header_container { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1200px; height: auto;margin: 0px auto; position: relative; } header#boutiqueHeader div.header_container .flip-2-ver-right-fwd { -webkit-animation: flip-2-ver-right-fwd 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; animation: flip-2-ver-right-fwd 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; } header#boutiqueHeader div.header_container figure img { width: 120px; height: auto; } header#boutiqueHeader div.header_container nav.navDesktop { display: flex; width: 45%; position: absolute; right: 240px;} header#boutiqueHeader div.header_container nav.navDesktop ul { display: flex; gap: 50px; padding: 5px 0px;} header#boutiqueHeader div.header_container nav.navDesktop ul li a { color: #efe4ca; font-weight: 700; font-size: 14px; } header#boutiqueHeader div.header_container div.headerLancamentoButton { display: flex; justify-content: center; align-items: center; background-color: #efe4ca; padding: 10px 20px; border-radius: 20px;width: 200px; } header#boutiqueHeader div.header_container div.headerLancamentoButton a { font-size: 14px; font-weight: 700; color: #0d475e; } header#boutiqueHeader div.header_container div.lancamentoBotao { display: none; } /* BOTÃO MENU */ .modal { display: none; } .hidden { display: none; } div.container__figure { width: 100%; height: 100%; padding: 200px 0px 0px 0px ;z-index: 0; } /* --- CONTAINER PRINCIPAL --- */ .anuncio-container { max-width: 800px; margin: 40px auto; padding: 20px; background: #ffffff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); } .progress-container { margin-bottom: 30px; text-align: center; } .progress-bar-bg { width: 100%; height: 8px; background: #e0e0e0; border-radius: 10px; overflow: hidden; margin-bottom: 10px; } .progress-bar-fill { height: 100%; background: linear-gradient(90deg, #0066cc, #004999); border-radius: 10px; transition: width 0.5s ease; width: 33.33%; } .progress-text { font-size: 14px; color: #666; font-weight: 600; margin: 0; } .anuncio-step { display: none; animation: fadeIn 0.3s ease; } .anuncio-step.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .anuncio-step h2 { color: #0066cc; font-size: 24px; margin-bottom: 10px; } .step-description { color: #666; font-size: 14px; margin-bottom: 30px; } .anuncio-step h3 { color: #333; font-size: 18px; margin: 25px 0 15px 0; padding-bottom: 8px; border-bottom: 2px solid #0066cc; } .form-group { margin-bottom: 20px; flex: 1; } .form-row { display: flex; gap: 15px; } .form-row .form-group { flex: 1; } label { display: block; font-weight: 600; color: #333; margin-bottom: 8px; font-size: 14px;} .required { color: #ff0000; font-weight: bold; } input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea { width: 100%; padding: 12px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 14px; transition: all 0.3s ease; box-sizing: border-box; font-family: inherit; } input:focus, select:focus, textarea:focus { outline: none; border-color: #0066cc; box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1); } textarea { resize: vertical; min-height: 100px; } .field-hint { display: block; font-size: 12px; color: #999; margin-top: 5px; } .input-valid { border-color: #4caf50 !important; background: #f1f8f4; } .input-error { border-color: #f44336 !important; background: #ffeaea; } .input-success { animation: successPulse 0.5s ease; } @keyframes successPulse { 0%, 100% { border-color: #4caf50; box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2); } 50% { box-shadow: 0 0 0 6px rgba(76, 175, 80, 0.1); } } .anuncio-buttons { display: flex; gap: 15px; margin-top: 30px; padding-top: 20px; border-top: 1px solid #e0e0e0; } button { padding: 14px 28px; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 8px; justify-content: center; } .btn-continue, .btn-submit { background: linear-gradient(135deg, #0066cc, #004999); color: white; flex: 1; } .btn-continue:hover:not(:disabled), .btn-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 102, 204, 0.3); } .btn-back { background: #f5f5f5; color: #666; } .btn-back:hover { background: #e0e0e0; } .btn-disabled, button:disabled { background: #cccccc !important; color: #999 !important; cursor: not-allowed; opacity: 0.6; } button:disabled:hover { transform: none !important; box-shadow: none !important; } .spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid #fff; border-radius: 50%; border-top-color: transparent; animation: spin 0.6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .section-divider { border: none; border-top: 1px solid #e0e0e0; margin: 30px 0; } .anuncio-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 10000; justify-content: center; align-items: center; animation: fadeIn 0.3s ease;} .anuncio-modal-content { background: white; padding: 40px; border-radius: 16px; text-align: center; max-width: 500px; animation: slideUp 0.3s ease; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);} @keyframes slideUp { from { opacity: 0; transform: translateY(30px);} to { opacity: 1; transform: translateY(0);} } .modal-icon { font-size: 60px; color: #4caf50; margin-bottom: 20px;} .anuncio-modal-content h2 { color: #333; margin-bottom: 15px;} .anuncio-modal-content p { color: #666; margin-bottom: 10px; line-height: 1.6;} .btn-modal-close { background: linear-gradient(135deg, #0066cc, #004999); color: white; margin-top: 20px; padding: 12px 30px;} .btn-modal-close:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 102, 204, 0.3);} /* --- NOTIFICAÇÕES --- */ .notification { position: fixed; top: 20px; right: 20px; background: white; padding: 16px 24px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); display: flex; align-items: center; gap: 12px; z-index: 10001; transform: translateX(400px); transition: transform 0.3s ease; max-width: 400px;} .notification.show { transform: translateX(0);} .notification-success { border-left: 4px solid #4caf50;} .notification-error { border-left: 4px solid #f44336;} .notification-info { border-left: 4px solid #2196f3;} .notification button { background: none; border: none; font-size: 20px; color: #999; cursor: pointer; padding: 0; margin-left: auto;} .notification button:hover { color: #333;} /* ===== BUSCAS POR BAIRRO – Desktop ===== */ section#buscasBoutique { width: 100%; height: 100%; position: relative;; } section#buscasBoutique div.buscas_boutique_container { max-width: 1200px; margin: 0 auto; padding: 2rem 3rem; } section#buscasBoutique div.buscas_boutique_container h2 { text-align: center;font-size: 2rem; margin-bottom: 60px; color: #0d475e; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks ul { list-style: none; padding: 0; margin: 0; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks p {font-weight: 600; font-size: 1.1rem; margin-bottom: 12px; color: #7a8ca5; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks li { margin-bottom: 10px; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks a { text-decoration: none;color: #000;font-size: 12px; line-height: 22px;transition: all 0.2s ease-in-out; } section#buscasBoutique div.buscas_boutique_container nav.buscasLinks a:hover { color: #cc0000; text-decoration: underline; } .chatbox { width: 350px; height: 500px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); background-color: white; display: flex; flex-direction: column; overflow: hidden; } .chat-header { background-color: #0d475e; color: white; padding: 15px; text-align: center; } .chat-content { flex: 1; padding: 10px; overflow-y: auto; } .message { margin-bottom: 10px; padding: 8px 12px; border-radius: 8px; max-width: 80%; word-wrap: break-word; } .user-message { background-color: #d9fdd3; align-self: flex-end; text-align: right; } .bot-message { background-color: #f1f0f0; align-self: flex-start; } .chat-input { display: flex; border-top: 1px solid #ddd; } .chat-input input { flex: 1; border: none; padding: 10px; } .chat-input button { background-color: #0d475e; color: white; border: none; padding: 10px 15px; cursor: pointer; } .chat-input button:hover { background-color: #093a4e; } /* SECTION BOUTIQUE FOOTER */ #boutiqueFooter { background-image: linear-gradient(to right, #0d475e, #0d475e, #0d475e, #0d475e, #0d475e, #164359, #1c3e54, #203a4e, #243141, #242833, #202126, #1a1a1a); color: white; font-family: var(--color-font-primary); padding: 60px 0px; width: 100%; height: 100%;} .footer__container { padding: 2rem; width: 100%; max-width: 1200px; margin: 0px auto;; display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 40px; flex-wrap: wrap; } .footer__contact { display: flex; width: 95%; height: 100%; justify-content: space-between; flex-wrap: wrap; gap: 40px; margin-bottom: 60px; } .contact__info { flex: 1; min-width: 250px; } .contact__info nav ul { display: flex; align-items: center; gap: 30px; padding: 15px 0px; } .contact__info nav ul li i { color: #fff; font-size: 20px; } .contact__info h2 { font-size: 28px; ; margin-bottom: 20px; color: #fff; } .contact__info p { color: red; line-height: 25px; color: #fff; padding: 0px 0px 10px 0px; } .contact__info p strong { color: #f0d98a; font-weight: 600; } .contact__detail { cursor: pointer; padding: 0px 0px 15px 0px; margin-top: 15px; font-size: 18px; display: flex; align-items: center; gap: 10px; color: #fff; } .contact__form { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 15px; } .contact__form input::placeholder { font-family: "Playfair Display", serif; font-size: 14px; } .contact__form textarea::placeholder { font-family: "Playfair Display", serif; font-size: 14px; } .contact__form input,.contact__form textarea { padding: 12px; border: 2px solid #f0d98a; background: #fff; color: #0d475e; border-radius: 4px; font-size: 14px; } .form__group { display: flex; gap: 10px; } .form__group input { width: 100%;; } .contact__form textarea { resize: vertical; min-height: 100px; } .checkbox { font-size: 12px; display: flex; align-items: center; gap: 8px; } .contact__form button { padding: 12px; background: #9c8758; border: none; color: white; font-weight: bold; cursor: pointer; transition: background 0.3s ease; } .contact__form button:hover { background: #bda369; } .footer__bottom { text-align: center; } .footer__bottom .logo { max-width: 160px; margin: 20px auto; } .footer__nav { display: flex; justify-content: center; gap: 60px; margin: 20px 0; font-size: 14px; padding: 0px 0px 30px 0px; } .footer__nav a { color: #9C8758; font-size: 20px; padding: 20px 0px ; text-decoration: none; } .footer__copy { font-size: 12px; color: #ccc; } /* DESENVOLVIMENTO */ div.desenvolvimento { padding: 10px 30px; display: flex; align-items: center; justify-content: center; gap: 40px; width: 100%; max-width: 1200px; margin: 0px auto;} div.desenvolvimento p { font-size: 12px; font-weight: 300; color: #0d475e;} div.desenvolvimento p strong { font-weight: 700; } div.desenvolvimento nav.socialDev { display: flex; } div.desenvolvimento nav.socialDev ul { display: flex; gap: 20px; } div.desenvolvimento nav.socialDev ul li a { color: #0d475e; font-size: 14px;} /* DESENVOLVIMENTO */ }