/* ========================================================================== POP-UP "SAIBA MAIS" DA SUITE — .box.pop-suite > .qs-sm -------------------------------------------------------------------------- Marcacao: single-suite.php (chega por AJAX) Dados: inc/suite-modal.php Script: assets/js/suite-modal.js Carregado na PAGINA DE HOTEL (header.php), nao na URL da suite: o que a URL da suite devolve e so o pedaco de HTML, sem nenhum. O tema tem um reset que zera font-size, line-height e list-style de TUDO (`* { ... }` no style.min.css), entao aqui tudo o que aparece precisa declarar os tres. Breakpoints do tema: 1220 / 970 / 680. E o style.css antigo ainda estiliza por TAG dentro de .box.pop-suite — ".box.pop-suite section { padding: 0 50px 60px; text-align: center }", ".box.pop-suite section article p { width: 640px }" e outras, escritas para a marcacao anterior do pop-up. Por isso a marcacao nova usa
onde usaria
/
/
: assim nenhuma daquelas regras casa e nao ha briga de especificidade propriedade a propriedade. ========================================================================== */ /* -------------------------------------------------------------------------- A caixa O style.css antigo deixava .box.pop-suite com 930px fixos, cantos de 10px e overflow:scroll (que desenha as duas barras sempre). Aqui ela vira um dialogo responsivo com rolagem so na vertical. -------------------------------------------------------------------------- */ .popup .box.pop-suite { top: 2vh; width: min(1040px, 96vw); max-height: 96vh; overflow-x: hidden; overflow-y: auto; border-radius: 12px; -webkit-overflow-scrolling: touch; } /* enquanto o pop-up esta aberto a pagina atras nao rola (senao o dedo no celular arrasta o fundo assim que a caixa chega ao fim) */ body.qs-sm-lock { overflow: hidden; } /* estado entre o clique e a chegada do HTML (core.js) */ .qs-sm-carregando { padding: 60px 20px; font-size: 15px; line-height: 1.6; text-align: center; } .qs-sm { display: block; color: var(--gray); font-size: 15px; line-height: 1.6; text-align: left; } .qs-sm p { margin: 0 0 10px 0; font-size: 15px; line-height: 1.6; } .qs-sm p:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- Galeria Faixa com scroll-snap: uma foto por vez, arrasto no celular e duas setas no desktop. Sem slick/flickity — as duas libs so existiam na pagina por causa da versao antiga deste arquivo. -------------------------------------------------------------------------- */ .qs-sm-gal { position: relative; width: 100%; background: #000; } .qs-sm-gal-track { display: flex; width: 100%; height: 420px; margin: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; } .qs-sm-gal-track::-webkit-scrollbar { display: none; } .qs-sm-gal-track > li { flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: start; } .qs-sm-gal-track img { display: block; width: 100%; height: 100%; object-fit: cover; } .qs-sm-gal-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--black); font-size: 22px; line-height: 40px; text-align: center; cursor: pointer; transition: background .2s ease; } .qs-sm-gal-nav:hover { background: #fff; } .qs-sm-gal-prev { left: 14px; } .qs-sm-gal-next { right: 14px; } .qs-sm-gal-count { position: absolute; z-index: 2; bottom: 14px; right: 14px; padding: 5px 12px; border-radius: 20px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; line-height: 1.4; } .qs-sm-gal-count b { font-weight: 700; } .qs-sm-gal-all { position: absolute; z-index: 2; bottom: 14px; left: 14px; padding: 9px 16px; border-radius: 20px; background: rgba(255,255,255,.94); color: var(--black); font-weight: 700; font-size: 13px; line-height: 1.4; cursor: pointer; transition: background .2s ease; } .qs-sm-gal-all:hover { background: #fff; } .qs-sm-gal-all i { margin-right: 6px; } /* -------------------------------------------------------------------------- Corpo: conteudo a esquerda, painel de reserva a direita -------------------------------------------------------------------------- */ .qs-sm-body { display: flex; align-items: flex-start; gap: 30px; padding: 26px 30px 34px 30px; } .qs-sm-main { flex: 1 1 auto; min-width: 0; } .qs-sm-side { flex: 0 0 300px; width: 300px; } .qs-sm-head { margin-bottom: 22px; } .qs-sm-head h2 { margin: 0 0 4px 0; color: var(--darkblue); font-weight: 900; font-size: 26px; line-height: 1.2; } .qs-sm-hotel { margin: 0 0 14px 0; font-size: 14px; line-height: 1.4; opacity: .8; } .qs-sm-specs { display: flex; flex-wrap: wrap; gap: 10px 8px; margin: 0; padding: 0; list-style: none; } .qs-sm-specs li { display: flex; align-items: flex-start; gap: 8px; flex: 1 1 46%; min-width: 200px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); font-size: 14px; line-height: 1.4; } .qs-sm-specs i { margin-top: 2px; color: var(--blue); font-size: 15px; } .qs-sm-specs small { display: block; margin-top: 2px; font-size: 11px; line-height: 1.4; opacity: .7; } /* -------------------------------------------------------------------------- Secoes -------------------------------------------------------------------------- */ .qs-sm-sec { padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--border); } .qs-sm-sec h3 { margin: 0 0 14px 0; color: var(--darkblue); font-weight: 700; font-size: 18px; line-height: 1.3; } .qs-sm-texto p { margin-bottom: 12px; } .qs-sm-link { margin: 14px 0 0 0; } .qs-sm-link a, .qs-sm-link button { display: inline-flex; align-items: center; gap: 7px; color: var(--blue); background: none; font-weight: 700; font-size: 14px; line-height: 1.4; text-decoration: underline; cursor: pointer; } .qs-sm-link a:hover, .qs-sm-link button:hover { text-decoration: none; } .qs-sm-link i { font-size: 11px; } /* comodidades */ .qs-sm-amen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 20px; margin: 0; padding: 0; list-style: none; } .qs-sm-amen li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.5; } .qs-sm-amen i { margin-top: 3px; flex: 0 0 16px; color: var(--blue); font-size: 14px; text-align: center; } /* politicas — mesma leitura da secao "Regras da casa" da pagina, em caixa unica com uma linha por assunto */ .qs-sm-pol { border: 1px solid var(--border); border-radius: var(--radius-card); } .qs-sm-pol-row { display: flex; gap: 16px; padding: 14px 16px; border-top: 1px solid var(--border); } .qs-sm-pol-row:first-child { border-top: 0; } .qs-sm-pol-label { display: flex; align-items: flex-start; gap: 9px; flex: 0 0 190px; width: 190px; } .qs-sm-pol-label i { margin-top: 3px; color: var(--blue); font-size: 14px; } .qs-sm-pol-label strong { font-weight: 700; font-size: 14px; line-height: 1.4; } .qs-sm-pol-body { flex: 1 1 auto; min-width: 0; } .qs-sm-pol-body p { margin: 0 0 6px 0; font-size: 14px; line-height: 1.5; } .qs-sm-pol-body p:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- Avaliacoes -------------------------------------------------------------------------- */ .qs-sm-nota { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .qs-sm-nota b { display: inline-block; min-width: 52px; padding: 9px 10px; border-radius: var(--radius-card) var(--radius-card) var(--radius-card) 0; background: var(--darkblue); color: #fff; font-weight: 900; font-size: 19px; line-height: 1.1; text-align: center; } .qs-sm-nota span { display: block; } .qs-sm-nota strong { display: block; font-weight: 700; font-size: 15px; line-height: 1.3; } .qs-sm-nota small { display: block; font-size: 12px; line-height: 1.4; opacity: .75; } .qs-sm-subnotas { display: grid; gap: 8px; margin: 0 0 14px 0; padding: 0; list-style: none; } .qs-sm-subnotas li { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.4; } .qs-sm-sub-nome { flex: 0 0 120px; width: 120px; } .qs-sm-sub-barra { flex: 1 1 auto; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; } .qs-sm-sub-barra i { display: block; height: 100%; background: var(--blue); } .qs-sm-sub-nota { flex: 0 0 32px; width: 32px; font-weight: 700; text-align: right; } .qs-sm-aviso { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 14px; padding: 10px 12px; border-radius: var(--radius-card); background: var(--surface-blue); font-size: 12px; line-height: 1.5; } .qs-sm-aviso i { margin-top: 2px; color: var(--blue); } .qs-sm-rev-lista { display: grid; gap: 12px; } .qs-sm-rev-item { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-card); } .qs-sm-rev-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 8px; } .qs-sm-rev-stars i { color: #fbb344; font-size: 12px; } .qs-sm-rev-top small { font-size: 11px; line-height: 1.4; opacity: .7; } .qs-sm-rev-item h5 { margin: 0 0 6px 0; font-weight: 700; font-size: 14px; line-height: 1.4; } .qs-sm-rev-item p { margin: 0 0 8px 0; font-size: 14px; line-height: 1.6; font-style: italic; } .qs-sm-rev-item cite { display: block; color: var(--blue); font-weight: 700; font-size: 13px; line-height: 1.4; font-style: normal; text-align: right; } .qs-sm-vazio { font-size: 14px; line-height: 1.6; opacity: .8; } /* -------------------------------------------------------------------------- Painel de preco e disponibilidade Nao mostra valor: nao existe API de tarifa (o motor de reservas e uma SPA externa). O que este painel faz e espelhar as datas/hospedes da barra de reserva e levar ao motor com eles. -------------------------------------------------------------------------- */ .qs-sm-card { position: sticky; top: 10px; padding: 18px 18px 20px 18px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); } .qs-sm-card-titulo { display: block; margin-bottom: 12px; color: var(--darkblue); font-weight: 900; font-size: 16px; line-height: 1.3; } .qs-sm-datas { margin: 0 0 4px 0; padding: 0; list-style: none; } .qs-sm-datas li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; line-height: 1.4; } .qs-sm-datas li:first-child { border-top: 0; } .qs-sm-datas b { font-weight: 700; font-size: 14px; text-align: right; } .qs-sm-noites { margin: 0 0 12px 0; font-size: 12px; line-height: 1.4; opacity: .75; } .qs-sm-noites:empty { margin: 0; } .qs-sm-datas-edit { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px; background: none; color: var(--blue); font-weight: 700; font-size: 13px; line-height: 1.4; text-decoration: underline; cursor: pointer; } .qs-sm-datas-edit:hover { text-decoration: none; } .qs-sm-cta { display: block; width: 100%; height: 46px; border-radius: 23px; background: var(--yellow); color: var(--darkblue); font-weight: 900; font-size: 15px; line-height: 46px; text-align: center; cursor: pointer; transition: background .2s ease; } .qs-sm-cta:hover { background: #ffc46a; } .qs-sm-card-nota { margin: 10px 0 0 0; font-size: 11px; line-height: 1.5; opacity: .75; } .qs-sm-card-sub { display: block; margin: 16px 0 8px 0; padding-top: 14px; border-top: 1px solid var(--border); font-weight: 700; font-size: 13px; line-height: 1.3; } .qs-sm-inclui { margin: 0; padding: 0; list-style: none; } .qs-sm-inclui li { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 7px; font-size: 12px; line-height: 1.5; } /* a linha do cupom nasce com [hidden] e so o JS a mostra; sem isto o display:flex acima vence o hidden e sobra um icone solto na lista */ .qs-sm-inclui li[hidden] { display: none; } .qs-sm-inclui i { margin-top: 2px; flex: 0 0 14px; color: var(--blue); font-size: 12px; text-align: center; } .qs-sm-inclui .qs-sm-cupom { font-weight: 700; color: var(--darkblue); } /* -------------------------------------------------------------------------- Responsivo -------------------------------------------------------------------------- */ @media (max-width: 1220px) { .qs-sm-body { gap: 24px; padding: 22px 24px 28px 24px; } .qs-sm-side { flex-basis: 270px; width: 270px; } } @media (max-width: 970px) { /* o painel sai da coluna e vira o primeiro bloco depois da ficha: em tela estreita ele e a acao principal, nao um apoio lateral */ .qs-sm-body { display: block; padding: 20px 20px 26px 20px; } .qs-sm-side { width: 100%; margin-top: 22px; } .qs-sm-card { position: static; } .qs-sm-gal-track { height: 320px; } .qs-sm-pol-row { display: block; } .qs-sm-pol-label { width: auto; margin-bottom: 6px; } } @media (max-width: 680px) { .popup .box.pop-suite { top: 0; width: 100%; max-height: 100%; height: 100%; border-radius: 0; } .qs-sm-body { padding: 16px 16px 30px 16px; } .qs-sm-gal-track { height: 240px; } .qs-sm-gal-nav { width: 34px; height: 34px; font-size: 18px; line-height: 34px; } .qs-sm-gal-all { padding: 7px 12px; font-size: 12px; } .qs-sm-head h2 { font-size: 21px; } .qs-sm-specs li { flex-basis: 100%; min-width: 0; } .qs-sm-amen { grid-template-columns: 1fr; } .qs-sm-sub-nome { flex-basis: 96px; width: 96px; } /* o X do tema e fixo no canto da janela; em tela cheia ele fica por cima da galeria, entao ganha sombra para nao sumir na foto */ .popup sub { box-shadow: 0 0 0 1px rgba(0,0,0,.08); } }