/* ===================================================================== HEADER MÍNIMO — só a logo e os três riscos, tudo transparente ===================================================================== O tema pai mostra o menu inteiro e o botão de WhatsApp no topo, e põe uma barra branca sólida assim que a página rola (.scrolled). Aqui o topo fica sempre transparente e só restam a logo e o botão de menu; os links aparecem em um painel sobre a tela quando os três riscos são clicados. Nenhum JavaScript novo: o app.js do tema pai já alterna .active no nav e no botão, e .nav-open no body. Só faltava CSS que usasse isso em telas grandes — no pai, o menu-hambúrguer só existia no celular. PARA REVERTER: apague este arquivo e a função pousada_headerminimal_enqueue() do functions.php. ===================================================================== */ /* ---------- o topo nunca mais ganha fundo ---------- */ /* !important porque a regra .nai-header.scrolled do critical.css é impressa inline no pelo tema pai, e CSS inline no vence qualquer folha externa de mesma especificidade. */ .nai-header, .nai-header.scrolled { background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; border-bottom: none !important; } /* O PROBLEMA DA TRANSPARÊNCIA TOTAL, E A SOLUÇÃO ------------------------------------------------------------------ Sem barra branca em momento nenhum, o topo passa por cima de tudo: a foto escura do hero, mas também as seções claras mais abaixo. Uma logo branca fixa ficaria invisível sobre o creme dessas seções. A primeira tentativa foi mix-blend-mode: difference, para a logo se inverter sozinha contra o que estivesse atrás. NÃO FUNCIONA AQUI: o .nai-header é position:fixed com z-index, o que cria um contexto de empilhamento próprio, e o blend passa a misturar contra o fundo transparente desse contexto em vez da página. Resultado: a logo continuava branca sobre o creme. O que funciona é trocar a cor da logo pela classe .scrolled, que o app.js do tema pai já aplica depois de 100px de rolagem. O fundo segue transparente — o que muda é só a tinta. */ /* Sobre a foto do hero: logo branca com halo, para não sumir no céu */ .nai-header:not(.scrolled) .nai-header__logo-img { filter: brightness(0) invert(1) drop-shadow(0 2px 7px rgba(0, 0, 0, 0.6)) !important; } /* Sobre as seções claras: a logo dourada original, que é o que o material da marca pede e lê bem no creme */ .nai-header.scrolled .nai-header__logo-img { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.18)) !important; } /* ---------- fora: menu e botão de WhatsApp ---------- */ /* O pai revela os dois a partir de 768px; aqui ficam escondidos em qualquer largura. O WhatsApp não some do site: continua no botão flutuante, no hero e no rodapé. */ .nai-nav { display: none !important; } .nai-header__cta { display: none !important; } /* ---------- dentro: os três riscos, em qualquer tela ---------- */ .nai-header__toggle { display: flex !important; position: relative; z-index: 1001; /* acima do painel do menu */ gap: 6px; padding: 0.6rem; /* alvo de toque confortável: os riscos têm 26x2px, o que sozinho é pequeno demais para o dedo */ min-width: 44px; min-height: 44px; align-items: center; justify-content: center; } /* Os riscos seguem a mesma lógica da logo: claros sobre a foto, escuros sobre as seções claras. */ .nai-header__toggle-bar { width: 26px; height: 2px; border-radius: 2px; transition: transform .28s ease, opacity .2s ease, background-color .2s ease; } .nai-header:not(.scrolled) .nai-header__toggle-bar { background: #fff !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); } .nai-header.scrolled .nai-header__toggle-bar { background: var(--nai-primary-dark, #1E3D29) !important; box-shadow: none; } /* Com o menu aberto o painel é escuro, então os riscos voltam a ser brancos mesmo que a página esteja rolada */ .nai-header__toggle.active .nai-header__toggle-bar, body.nav-open .nai-header__toggle-bar { background: #fff !important; box-shadow: none; } /* Vira um X quando o menu está aberto */ .nai-header__toggle.active .nai-header__toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); } .nai-header__toggle.active .nai-header__toggle-bar:nth-child(2) { opacity: 0; } .nai-header__toggle.active .nai-header__toggle-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* ---------- o painel do menu ---------- */ .nai-nav.active { display: flex !important; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; /* A primeira versão usava 0.82 de opacidade, para deixar a foto insinuada por trás. Na prática os títulos da página atravessavam o painel e brigavam com os links — dava para ler "Conforto em meio à natureza" no meio do menu. Um menu aberto precisa ser um lugar só; 0.965 mantém um fio do que está atrás sem competir. */ background: rgba(10, 20, 14, 0.965); backdrop-filter: blur(20px) saturate(0.85); -webkit-backdrop-filter: blur(20px) saturate(0.85); animation: menu-entra .28s ease-out; } @keyframes menu-entra { from { opacity: 0; } to { opacity: 1; } } .nai-nav.active .nai-nav__list { flex-direction: column; gap: 0; text-align: center; padding: 0; } .nai-nav.active .nai-nav__list li { /* cada item entra com um atraso crescente — o escalonamento é o que diferencia um menu que "abre" de um que simplesmente aparece */ animation: item-entra .34s ease-out backwards; } .nai-nav.active .nai-nav__list li:nth-child(1) { animation-delay: .05s; } .nai-nav.active .nai-nav__list li:nth-child(2) { animation-delay: .10s; } .nai-nav.active .nai-nav__list li:nth-child(3) { animation-delay: .15s; } .nai-nav.active .nai-nav__list li:nth-child(4) { animation-delay: .20s; } .nai-nav.active .nai-nav__list li:nth-child(5) { animation-delay: .25s; } .nai-nav.active .nai-nav__list li:nth-child(6) { animation-delay: .30s; } @keyframes item-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .nai-nav.active .nai-nav__link { display: block; padding: 0.65rem 2rem; font-family: var(--nai-font-heading, Georgia, serif); font-size: clamp(1.5rem, 3.4vw, 2.3rem); font-weight: 600; color: #fff !important; letter-spacing: 0.2px; } .nai-nav.active .nai-nav__link:hover, .nai-nav.active .nai-nav__link.active { color: var(--nai-accent, #D4A574) !important; } /* A linha animada do hover do tema pai fica desalinhada num link centralizado e grande: nasce na borda esquerda do bloco inteiro. */ .nai-nav.active .nai-nav__link::after { display: none; } /* Com o menu ocupando a tela, rolar a página por baixo é desorientador */ body.nav-open { overflow: hidden; } /* O botão flutuante de WhatsApp ficaria por cima do painel */ body.nav-open .nai-whatsapp-float { opacity: 0; pointer-events: none; } /* ---------- quem pediu menos movimento ---------- */ @media (prefers-reduced-motion: reduce) { .nai-nav.active, .nai-nav.active .nai-nav__list li { animation: none; } .nai-header__toggle-bar { transition: none; } } /* ===================================================================== AVALIAÇÕES DO GOOGLE ===================================================================== */ .pg-nota { display: flex; flex-direction: column; align-items: center; gap: .3rem; margin-bottom: 1.25rem; } .pg-nota__numero { font-family: var(--nai-font-heading, Georgia, serif); font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--nai-primary-dark, #1E3D29); } .pg-nota__estrelas { display: inline-flex; gap: 2px; color: #E8A317; } .pg-nota__total { font-size: .9rem; color: var(--nai-gray-500, #6B7280); } /* Foto de perfil do Google, no lugar das iniciais */ .pg-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--nai-gray-200, #E5E7EB); } .pg-fonte { display: inline-flex; align-items: center; gap: .45rem; } .pg-fonte a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }