/* ============================================ DIFERENÇAS ESTRUTURAIS POR TEMPLATE ============================================ Carregado depois do site-classic.css. Aqui mora só o que NÃO cabe num token: composição, alinhamento e os casos em que o cartão muda de forma. O Genesis não aparece neste arquivo de propósito — ele é a linha de base, e tudo que estiver escrito aqui é, por definição, um desvio dela. É também o que garante que quem já tem site no ar não seja afetado por nada disto. O gancho é o data-tpl no , emitido pelo _head.php. ============================================ */ /* ── Cabeçalho de seção alinhado à esquerda ──────────────────────────────── Centralizar tudo é o reflexo do tema de origem. Os modelos editoriais ganham hierarquia de leitura alinhando à esquerda. */ body[data-tpl=sereno] .section-header, body[data-tpl=litoral] .section-header, body[data-tpl=revista] .section-header, body[data-tpl=vivo] .section-header, body[data-tpl=compacto] .section-header { text-align: left; margin-left: 0; margin-right: auto; } body[data-tpl=sereno] .section-header p, body[data-tpl=litoral] .section-header p, body[data-tpl=revista] .section-header p, body[data-tpl=vivo] .section-header p, body[data-tpl=compacto] .section-header p { margin-left: 0; } /* Filete ornamental: só onde ele pertence. */ body[data-tpl=sereno] .section-divider, body[data-tpl=vivo] .section-divider, body[data-tpl=litoral] .section-divider, body[data-tpl=compacto] .section-divider, body[data-tpl=revista] .section-divider, body[data-tpl=pop] .section-divider { display: none; } body[data-tpl=nobre] .section-divider { width: 38px; height: 1px; } /* Título da seção na cor do texto (e não na primária) nos modelos de contraste alto — primária em título grande vira mancha colorida. */ body[data-tpl=sereno] .section-header h2, body[data-tpl=vivo] .section-header h2, body[data-tpl=litoral] .section-header h2, body[data-tpl=revista] .section-header h2, body[data-tpl=nobre] .section-header h2, body[data-tpl=pop] .section-header h2 { color: var(--cor-texto); } /* ── Cartão sem cartão: imagem solta com legenda ─────────────────────────── Litoral e Revista não usam moldura. É a diferença estrutural que faz os dois não parecerem o Genesis com outra cor. */ body[data-tpl=litoral] .quarto-card, body[data-tpl=revista] .quarto-card { background: none; box-shadow: none; border: 0; overflow: visible; } body[data-tpl=litoral] .quarto-card:hover, body[data-tpl=revista] .quarto-card:hover { transform: none; box-shadow: none; } body[data-tpl=litoral] .quarto-body, body[data-tpl=revista] .quarto-body { padding: 20px 0 0; } body[data-tpl=litoral] .quarto-footer, body[data-tpl=revista] .quarto-footer { padding: 14px 0 0; } /* ── Revista: grade assimétrica ──────────────────────────────────────────── O markup usa colunas do Bootstrap. Trocar para grid aqui evita mexer no HTML da seção — e mexer no HTML significaria decidir o mesmo caso em onze layouts a cada seção nova. */ @media (min-width: 992px) { body[data-tpl=revista] #quartos .row { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--gap); margin: 0; } body[data-tpl=revista] #quartos .row > * { width: auto; max-width: none; padding: 0; margin: 0; flex: none; } body[data-tpl=revista] #quartos .row > *:first-child .quarto-img-wrap { height: calc(var(--img-alt) + 60px); } } /* ── Compacto: cartão horizontal, duas colunas ───────────────────────────── Feito para converter: a pessoa vê mais acomodação sem rolar. */ @media (min-width: 768px) { body[data-tpl=compacto] #quartos .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin: 0; } body[data-tpl=compacto] #quartos .row > * { width: auto; max-width: none; padding: 0; margin: 0; flex: none; } body[data-tpl=compacto] .quarto-card { display: grid; grid-template-columns: 190px 1fr; grid-template-rows: 1fr auto; height: 100%; } body[data-tpl=compacto] .quarto-img-wrap { grid-row: 1 / 3; height: 100%; } body[data-tpl=compacto] .quarto-body { padding: 16px 18px 6px; } body[data-tpl=compacto] .quarto-footer { padding: 8px 18px 14px; border-top: 0; } } body[data-tpl=compacto] .quarto-card:hover { transform: none; border-color: var(--cor-primaria); } body[data-tpl=compacto] .quarto-nome { font-size: 1.06rem; } /* ── Mata: imagem em arco ────────────────────────────────────────────────── O token --raio-topo já carrega o arco; aqui só garantimos que o corte aconteça, porque o overflow do cartão cortaria o raio da imagem. */ body[data-tpl=mata] .quarto-img-wrap { border-radius: var(--raio-topo); overflow: hidden; } body[data-tpl=mata] .diferencial-icon { border-radius: 50% 50% 50% 8px; } body[data-tpl=mata] .galeria-item { border-radius: 22px; } /* ── Nobre: escuro ───────────────────────────────────────────────────────── Fotos dessaturadas que ganham cor ao passar o mouse. Num site escuro a foto colorida em cada card compete com tudo; devolver a cor no hover faz o olhar escolher uma de cada vez. */ body[data-tpl=nobre] .quarto-card { background: var(--cor-cartao); } body[data-tpl=nobre] .quarto-img-wrap img, body[data-tpl=nobre] .galeria-item img { filter: grayscale(.55); transition: filter .4s ease, transform .6s ease; } body[data-tpl=nobre] .quarto-card:hover .quarto-img-wrap img, body[data-tpl=nobre] .galeria-item:hover img { filter: none; } body[data-tpl=nobre] .quarto-card:hover { transform: none; border-color: var(--cor-destaque); } body[data-tpl=nobre] .comodidade-tag { background: none; box-shadow: inset 0 0 0 1px var(--cor-borda); color: var(--cor-apagado); } body[data-tpl=nobre] .diferencial-icon { background: none; color: var(--cor-destaque); border-radius: 0; width: auto; height: auto; font-size: 1.5rem; margin: 0 auto 16px; } body[data-tpl=nobre] .diferencial-card h5 { color: var(--cor-texto); text-transform: uppercase; letter-spacing: .14em; font-size: .88rem; } body[data-tpl=nobre] .form-contato .form-control, body[data-tpl=nobre] .form-contato .form-select { background: var(--cor-suave); color: var(--cor-texto); } /* Rodapé e footer já usam --cor-footer; num tema escuro ele vem da paleta do cliente e pode ser mais claro que o site. Trava no fundo do próprio tema. */ body[data-tpl=nobre] .footer { background: #0B0A08; border-top: 1px solid var(--cor-borda); } /* ── Sereno e Litoral: sem elevação, contorno em vez de sombra ────────────*/ body[data-tpl=sereno] .quarto-card:hover { transform: none; border-color: var(--cor-primaria); } body[data-tpl=sereno] .comodidade-tag, body[data-tpl=litoral] .comodidade-tag { background: none; box-shadow: inset 0 0 0 1px var(--cor-borda); color: var(--cor-apagado); } body[data-tpl=sereno] .diferencial-icon, body[data-tpl=litoral] .diferencial-icon, body[data-tpl=revista] .diferencial-icon { background: none; color: var(--cor-primaria); border-radius: 0; width: auto; height: auto; font-size: 1.5rem; margin: 0 0 16px; } body[data-tpl=sereno] .diferencial-card, body[data-tpl=litoral] .diferencial-card, body[data-tpl=revista] .diferencial-card { text-align: left; padding: 22px 0 0; border-top: 1px solid var(--cor-borda); } body[data-tpl=sereno] .diferencial-card:hover .diferencial-icon, body[data-tpl=litoral] .diferencial-card:hover .diferencial-icon, body[data-tpl=revista] .diferencial-card:hover .diferencial-icon { transform: none; background: none; color: var(--cor-destaque); } /* ── Vivo e Pop: tag em cor cheia, galeria em bloco de cor ────────────────*/ body[data-tpl=vivo] .comodidade-tag, body[data-tpl=pop] .comodidade-tag { background: var(--cor-primaria); color: #fff; } body[data-tpl=vivo] #galeria { background: var(--cor-header); } body[data-tpl=vivo] #galeria .section-header h2 { color: #fff; } body[data-tpl=vivo] #galeria .section-header p { color: rgba(255,255,255,.72); } body[data-tpl=pop] #galeria { background: var(--cor-primaria); } body[data-tpl=pop] #galeria .section-header h2, body[data-tpl=pop] #galeria .section-header p { color: #fff; } body[data-tpl=vivo] .diferencial-card, body[data-tpl=pop] .diferencial-card { background: var(--cor-suave); border-radius: var(--raio); padding: 30px 24px; text-align: left; } body[data-tpl=vivo] .diferencial-icon, body[data-tpl=pop] .diferencial-icon { margin: 0 0 18px; border-radius: 14px; } /* ── Fazenda: caixa alta e borda dupla ────────────────────────────────────*/ body[data-tpl=fazenda] .diferencial-card h5, body[data-tpl=fazenda] .quarto-nome { text-transform: uppercase; letter-spacing: .06em; } body[data-tpl=fazenda] .diferencial-icon { border-radius: 4px; background: none; box-shadow: inset 0 0 0 2px var(--cor-destaque); color: var(--cor-primaria); } body[data-tpl=fazenda] .comodidade-tag { border-radius: 3px; background: none; box-shadow: inset 0 0 0 1px var(--cor-borda); } /* ── Movimento ──────────────────────────────────────────────────────────── Quem pediu menos animação no sistema operacional não deveria ver o card subir nem a foto crescer. */ @media (prefers-reduced-motion: reduce) { .quarto-card, .quarto-img-wrap img, .galeria-item img, .diferencial-icon, .card-rustico, .whatsapp-float { transition: none !important; animation: none !important; } .quarto-card:hover { transform: none !important; } .quarto-card:hover .quarto-img-wrap img { transform: none !important; } }