/* Paleta e tipografia copiadas do site antigo (public/css/estilos.css) */ :root { --fonte-logo: 'Courgette', serif; --fonte-cabecalho: 'Source Sans Pro', sans-serif; --fonte-principal: 'Source Serif Pro', serif; --azul: #0d2d84; --azul-clara: #0183ca; --branco: #fdfdfd; --amarelo: #fcbd12; --amarelo-escuro: #ffae00; --amarelo-claro: rgba(255, 174, 0, 0.7); --cor-texto: var(--azul); --cor-texto-suave: rgba(13, 45, 132, 0.65); --cor-fundo: var(--branco); --cor-fundo-card: #ffffff; --cor-borda: #e2e6f0; --raio: 15px; --sombra: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1); } /* Tema escuro: aplicado via atributo (não media query), para que o botão de alternância no cabeçalho funcione independente da preferência do sistema. O atributo é definido no por um script inline em base.html, que lê localStorage ou (na primeira visita) a preferência do sistema. --azul/--amarelo (marca) não mudam: são usados só onde o fundo já garante contraste (cabeçalho, botões, banner do h1). O que muda é o texto solto sobre o fundo da página, que no site antigo era sempre --azul sobre branco. */ :root[data-tema="escuro"] { --cor-texto: #e7ebf7; --cor-texto-suave: #9aa6c9; --cor-fundo: #0f1420; --cor-fundo-card: #171d2e; --cor-borda: #2a3151; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--fonte-principal); color: var(--cor-texto); background: var(--cor-fundo); line-height: 1.6; /* O menu mobile fica fora da tela via transform (não display:none), então ainda conta para a largura rolável da página e cria uma barra de rolagem horizontal indevida — este é o corretivo padrão para esse padrão de menu off-canvas. */ overflow-x: hidden; } a { color: var(--azul-clara); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; display: block; } .container { max-width: 1140px; margin: 0 auto; padding: 0 1rem; } .texto-suave { color: var(--cor-texto-suave); font-size: 0.9rem; } /* Cabeçalho */ .cabecalho { font-family: var(--fonte-cabecalho); background: var(--azul); color: var(--branco); position: sticky; top: 0; z-index: 10; box-shadow: var(--sombra); } .cabecalho .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 0.5rem 1rem; padding-top: 1rem; padding-bottom: 1rem; } .cabecalho .logo { font-family: var(--fonte-logo); color: var(--branco); font-size: 1.8rem; margin-right: auto; } .cabecalho .logo:hover { text-decoration: none; opacity: 0.9; } .cabecalho .logo span { color: var(--amarelo); } .menu-topo { display: flex; align-items: center; gap: 1.1rem; list-style: none; margin: 0; padding: 0; font-size: 0.95rem; white-space: nowrap; } .menu-topo a { color: rgba(255, 255, 255, 0.92); } .menu-topo a:hover { color: var(--amarelo); text-decoration: none; } .cabecalho-acoes { display: flex; align-items: center; gap: 0.8rem; margin-left: auto; } /* Ícones do cabeçalho (busca, hamburger): mesmos SVGs do site antigo, cor branca com destaque amarelo no hover. */ .icone-cabecalho { background: none; border: none; padding: 0; margin: 0; line-height: 0; cursor: pointer; } .icone-cabecalho svg { fill: var(--branco); display: block; } .icone-cabecalho:hover svg { fill: var(--amarelo); } .icone-menu { display: none; } .botao-tema { background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.3); color: var(--branco); border-radius: 20px; padding: 0.4rem 0.7rem; cursor: pointer; font-size: 0.85rem; line-height: 1; } .botao-tema:hover { background: rgba(255, 255, 255, 0.28); } /* Busca deslizante: some abaixo do cabeçalho ao clicar na lupa, em vez do input sempre visível — replica o comportamento do site antigo (#formBusca). */ .busca-deslizante { overflow: hidden; max-height: 0; background: var(--azul); transition: max-height 0.3s ease-in; } .busca-deslizante.busca-ativa { max-height: 100px; } .busca-form { display: flex; align-items: center; gap: 0.6rem; padding-bottom: 1.2rem; } .busca-form input[type="search"] { flex: 1; max-width: 500px; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.12); color: var(--branco); border-radius: 20px; padding: 0.5rem 1rem; } .busca-form input[type="search"]::placeholder { color: rgba(255, 255, 255, 0.7); } .busca-form button { background: none; border: none; padding: 0; line-height: 0; cursor: pointer; } .busca-form button svg { fill: var(--branco); } .busca-form button:hover svg { fill: var(--amarelo); } /* Breadcrumb */ .breadcrumb { font-family: var(--fonte-cabecalho); font-size: 0.85rem; color: var(--branco); background-color: var(--azul); box-shadow: 50vw 0 var(--azul), -50vw 0 var(--azul); } .breadcrumb a { color: var(--branco); } .breadcrumb span { margin: 0 0.35rem; } main { min-height: 60vh; padding: 0 0 3rem; } /* O h1 fica dentro de .container (max-width: 1140px), mas o fundo azul precisa preencher a viewport inteira, igual ao site antigo. Uma sombra sólida deslocada 50vw pra cada lado (mesma cor do fundo) pinta a cor além da caixa real sem tirar o h1 de dentro do container — o texto continua alinhado com o resto do conteúdo. */ h1 { font-family: var(--fonte-cabecalho); background: var(--azul); color: var(--branco); font-size: 2rem; /* margin: 0 0 1.5rem; */ margin: 0; padding: 2rem 1rem 2.2rem; box-shadow: 50vw 0 var(--azul), -50vw 0 var(--azul); } h2 { font-family: var(--fonte-cabecalho); color: var(--cor-texto); font-size: 1.3rem; margin: 2rem 0 1rem; padding-bottom: 0.4rem; border-bottom: 3px solid var(--amarelo); display: inline-block; } h3 { font-family: var(--fonte-cabecalho); color: var(--cor-texto); font-size: 1.05rem; margin: 1.5rem 0 0.5rem; } /* Grade de cards */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; margin: 1rem 0; } .card { background: var(--cor-fundo-card); border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra); display: flex; flex-direction: column; } .card img { width: 100%; height: 150px; object-fit: cover; background: var(--cor-borda); } .card .card-corpo { padding: 0.85rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; } .card h3 { font-size: 1rem; margin: 0; } .card p { font-size: 0.85rem; color: var(--cor-texto-suave); margin: 0; flex: 1; } .card .botao { align-self: flex-start; font-size: 0.85rem; font-weight: 700; font-family: var(--fonte-cabecalho); text-transform: lowercase; background: var(--amarelo-claro); color: var(--azul); padding: 0.4rem 1.1rem; border-radius: var(--raio); box-shadow: var(--sombra); } .card .botao:hover { text-decoration: none; background: var(--amarelo); } /* Galeria do imóvel */ .galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.5rem; margin: 1rem 0; } .galeria img { display: block; width: 100%; height: 120px; border-radius: var(--raio); object-fit: cover; cursor: zoom-in; } /* Modal de foto ampliada da galeria */ .modal-galeria { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.9); } .modal-galeria[hidden] { display: none; } .modal-galeria-imagem { max-width: 90vw; max-height: 90vh; border-radius: var(--raio); object-fit: contain; } .modal-galeria-fechar, .modal-galeria-nav { position: absolute; background: rgba(255, 255, 255, 0.15); border: none; color: var(--branco); cursor: pointer; line-height: 1; } .modal-galeria-fechar:hover, .modal-galeria-nav:hover { background: rgba(255, 255, 255, 0.3); } .modal-galeria-fechar { top: 1rem; right: 1.5rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; font-size: 1.5rem; } .modal-galeria-nav { top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; border-radius: 50%; font-size: 2rem; } .modal-galeria-anterior { left: 1rem; } .modal-galeria-proxima { right: 1rem; } /* Botão de reserva (afiliado TravelPayouts, página de imóvel) */ .acao-reserva { text-align: center; margin: 1.5rem 0; } .botao-reserva { display: inline-block; font-family: var(--fonte-cabecalho); font-weight: 700; background: var(--amarelo); color: var(--azul); padding: 0.75rem 1.75rem; border-radius: var(--raio); box-shadow: var(--sombra); margin: 0.75rem 0 1.25rem; } .botao-reserva:hover { background: var(--amarelo-escuro); text-decoration: none; } /* Ficha do imóvel */ .ficha-imovel { background: var(--cor-fundo-card); border: 1px solid var(--cor-borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 1.25rem; margin: 1rem 0; } .ficha-imovel dl { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; margin: 0; } .ficha-imovel dt { font-family: var(--fonte-cabecalho); font-weight: 700; color: var(--cor-texto-suave); } .ficha-imovel dd { margin: 0; } .link-reserva { margin: 0.75rem 0 0; } .link-reserva a { color: var(--amarelo-escuro); font-weight: 700; } /* Prestadores de serviço turístico (página de destino) */ .lista-prestadores { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.75rem; } .prestador-item { background: var(--cor-fundo-card); border: 1px solid var(--cor-borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 0.85rem 1rem; font-size: 0.9rem; } /* Paginação */ .paginacao { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 1.5rem 0; } .paginacao a { background: var(--amarelo); color: var(--azul); border-radius: 50%; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; } .paginacao a:hover { text-decoration: none; background: var(--amarelo-escuro); } .paginacao a.pagina-atual { background: var(--azul); color: var(--branco); } /* Rodapé */ .rodape { font-family: var(--fonte-cabecalho); background: var(--cor-fundo-card); border-top: 1px solid var(--cor-borda); padding: 1.5rem 0; font-size: 0.85rem; color: var(--cor-texto-suave); text-align: center; } .rodape a { color: var(--cor-texto-suave); } .rodape a:hover { color: var(--azul-clara); } .rodape .links-rodape { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-bottom: 0.75rem; } /* Página 410 */ .pagina-410 { text-align: center; padding: 3rem 1rem; } /* Cabeçalho mobile: nav vira painel deslizante à direita, acionado pelo ícone hamburger — igual ao #navbar/#icon-menu do site antigo (breakpoint de 1000px também replicado). */ @media (max-width: 1000px) { .icone-menu { display: inline-flex; } .menu-topo { position: absolute; top: 100%; right: 0; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 1.25rem; width: min(20rem, 100%); height: 100vh; background: var(--azul); padding: 2rem 1.5rem; box-shadow: var(--sombra); transform: translateX(100%); transition: transform 0.3s ease-in; } .menu-topo.menu-ativo { transform: translateX(0); } } @media (max-width: 700px) { h1 { font-size: 1.6rem; } .busca-form { flex-wrap: wrap; } }