/* ========================================================================== CONSENTIMENTO DE COOKIES (tarefa #27) -------------------------------------------------------------------------- Banner do rodapé + painel de preferências. Markup: parts/cookies.php, lógica: inc/cookies.php e assets/js/cookies.js. REGRA CENTRAL: o banner nasce escondido. O HTML é o mesmo para todo mundo (a página vem do cache do WP Rocket), então quem decide mostrar é a classe .qs-consent-pendente, posta no pelo script do depois de ler o cookie do próprio navegador. Quem já escolheu nunca vê o banner — nem por um piscar, porque nada aparece por padrão. Breakpoints do tema: 1220 / 970 / 680. ========================================================================== */ .qs-cookies { display: none; } /* z-index acima de TUDO que flutua no canto: o widget de WhatsApp do plugin ar-contactus (z-index 1000000) e a barra de reserva fixa da página de hotel (z-index 8000) ficam por baixo enquanto a escolha está pendente. Cobrir os dois por alguns segundos é melhor do que deixar um botão do banner inalcançável — e o banner some assim que o visitante responde. */ .qs-consent-pendente .qs-cookies { display: flex; position: fixed; z-index: 1000010; right: 20px; bottom: 20px; left: 20px; align-items: center; gap: 24px; max-width: 1220px; margin: 0 auto; padding: 20px 24px; background: #fff; border: 1px solid var(--border, #E2E6EA); border-radius: var(--radius-card, 8px); box-shadow: 0 6px 28px rgba(0, 0, 0, .18); /* espera meio segundo para não disputar a primeira pintura da página */ animation: qs-cookies-entra .3s ease .6s both; } @keyframes qs-cookies-entra { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .qs-consent-pendente .qs-cookies { animation-duration: .01ms; } } /* Enquanto o painel de preferências está aberto o banner sai da frente. É visibility, não opacity: a animação de entrada usa fill "both" e animação vence declaração normal — um opacity:0 aqui seria ignorado. */ .qs-consent-pendente .qs-cookies.qs-cookies-atras { visibility: hidden; } .qs-cookies-texto strong { display: block; margin-bottom: 6px; font-weight: 700; font-size: 16px; color: var(--darkblue, #0F416E); } .qs-cookies-texto p { font-size: 13px; line-height: 1.5; color: var(--gray, #5A5A5A); } .qs-cookies-texto a, .qs-cookies-painel-head a { color: var(--blue, #005190); font-weight: 600; text-decoration: underline; } .qs-cookies-bts { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; } .qs-cookies-bt { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border-radius: 20px; font: 700 14px 'Montserrat', sans-serif; white-space: nowrap; cursor: pointer; transition: background .2s ease, color .2s ease; } .qs-cookies-bt-cheio { background: var(--blue, #005190); color: #fff; } .qs-cookies-bt-cheio:hover { background: var(--darkblue, #0F416E); } .qs-cookies-bt-linha { background: #fff; color: var(--darkblue, #0F416E); box-shadow: inset 0 0 0 1px var(--border, #E2E6EA); } .qs-cookies-bt-linha:hover { background: var(--surface, #F6F8FA); } /* ========================================================================== PAINEL DE PREFERÊNCIAS Abre pelo botão "Configurar" do banner e pelo link do rodapé, que é como o visitante volta atrás depois de já ter respondido. ========================================================================== */ .qs-cookies-overlay[hidden] { display: none; } .qs-cookies-overlay { display: flex; position: fixed; z-index: 1000011; /* um degrau acima do banner (ver nota lá em cima) */ top: 0; left: 0; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 20px; background: rgba(15, 65, 110, .55); } .qs-cookies-painel { position: relative; width: 100%; max-width: 560px; max-height: 100%; overflow-y: auto; padding: 28px; background: #fff; border-radius: var(--radius-card, 8px); box-shadow: 0 10px 40px rgba(0, 0, 0, .25); } .qs-cookies-fechar { position: absolute; top: 16px; right: 16px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface, #F6F8FA); color: var(--gray, #5A5A5A); cursor: pointer; } .qs-cookies-fechar:hover { color: var(--darkblue, #0F416E); } .qs-cookies-painel-head { margin-bottom: 20px; padding-right: 40px; } .qs-cookies-painel-head strong { display: block; margin-bottom: 8px; font-weight: 700; font-size: 20px; color: var(--darkblue, #0F416E); } .qs-cookies-painel-head p { font-size: 13px; line-height: 1.5; color: var(--gray, #5A5A5A); } .qs-cookies-cats li { padding: 16px 0; border-top: 1px solid var(--border, #E2E6EA); } .qs-cookies-cat-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 6px; } .qs-cookies-cat-topo strong { font-weight: 700; font-size: 15px; color: var(--darkblue, #0F416E); } .qs-cookies-cats p { font-size: 13px; line-height: 1.5; color: var(--gray, #5A5A5A); } .qs-cookies-sempre { font: 600 12px 'Montserrat', sans-serif; font-style: normal; color: var(--gray, #5A5A5A); white-space: nowrap; } /* -------------------------------------------------------------------------- Chave liga/desliga O reset do tema (style.min.css) aplica appearance:none e border:0 em todo input — um checkbox nativo sairia invisível. Por isso o input real fica escondido (mas focável pelo teclado) e o desenho é do .qs-cookies-switch. -------------------------------------------------------------------------- */ .qs-cookies-toggle { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; cursor: pointer; } .qs-cookies-toggle input { position: absolute; width: 44px; height: 24px; margin: 0; opacity: 0; cursor: pointer; } /* o nome da categoria repetido só para leitor de tela rotular o input */ .qs-cookies-toggle-nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .qs-cookies-switch { position: relative; display: block; width: 44px; height: 24px; border-radius: 12px; background: #C9D2DA; transition: background .2s ease; } .qs-cookies-switch::after { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s ease; content: ''; } .qs-cookies-toggle input:checked ~ .qs-cookies-switch { background: var(--blue, #005190); } .qs-cookies-toggle input:checked ~ .qs-cookies-switch::after { transform: translateX(20px); } .qs-cookies-toggle input:focus-visible ~ .qs-cookies-switch { box-shadow: 0 0 0 3px rgba(0, 81, 144, .35); } .qs-cookies-painel-bts { display: flex; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border, #E2E6EA); } .qs-cookies-painel-bts .qs-cookies-bt { flex: 1; padding: 0 12px; } /* -------------------------------------------------------------------------- Link "Preferências de cookies" do rodapé (#bottom, footer.php) -------------------------------------------------------------------------- */ #bottom .qs-cookies-rodape { display: inline-block; margin-top: 10px; font-size: 12px; color: #fff; text-decoration: underline; opacity: .85; cursor: pointer; } #bottom .qs-cookies-rodape:hover { opacity: 1; } /* Na página de hotel (e de suíte) a barra de reserva fica fixa no pé da tela e cobre a faixa #bottom inteira — copyright, idiomas e este link. Sem folga embaixo o link fica inalcançável, e retirar o consentimento precisa ser tão fácil quanto dar. Os 74px da barra + os 25px que a faixa já tinha. */ body.single-hotel #bottom, body.single-suite #bottom { padding-bottom: 100px; } /* -------------------------------------------------------------------------- Telas menores -------------------------------------------------------------------------- */ @media (max-width: 970px) { .qs-consent-pendente .qs-cookies { flex-direction: column; align-items: flex-start; gap: 16px; right: 10px; bottom: 10px; left: 10px; padding: 18px; } .qs-cookies-bts { width: 100%; margin-left: 0; } .qs-cookies-bts .qs-cookies-bt { flex: 1; padding: 0 10px; } } @media (max-width: 680px) { .qs-cookies-bts { flex-wrap: wrap; } .qs-cookies-bts .qs-cookies-bt-cheio { flex-basis: 100%; order: -1; } .qs-cookies-painel { padding: 22px 18px; } .qs-cookies-painel-bts { flex-wrap: wrap; } .qs-cookies-painel-bts .qs-cookies-bt-cheio { flex-basis: 100%; order: -1; } }