/* ===================================================== GLOBAL.CSS — CONSOLIDADO E LIMPO - Reset + Variáveis - Base tipográfica - Tema via body.light-mode - Transição (fade) - Anti-overflow - Scroll margin (nav fixa) - Footer fixo em dark (não alterna com tema) ===================================================== */ /* Fontes carregadas via no de cada página em vez de @import, que só é descoberto depois de baixar e processar este arquivo inteiro. */ /* Reset mínimo para reduzir diferenças entre navegadores sem apagar estilos úteis. */ *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; } html, body{ overflow-x:hidden; } img, video{ max-width:100%; } /* Esconde visualmente mas mantém acessível a leitores de tela (ex.: anúncios de troca de slide). */ .visually-hidden{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } :root{ /* Paleta (nova identidade Kasarão) */ --bg-dark:#0c1014; --bg-light:#f2f2f2; --text-dark:#f5f2ec; --text-light:#20241c; --primary:#265902; /* verde — cor de marca, ênfase principal */ --primary-hover:#1a3f01; --primary-bright:#8fbf5c; /* tom claro do verde, para texto/ícone sobre fundos escuros fixos (header/footer) */ --accent:#f29f05; /* laranja — destaque secundário */ --accent-hover:#cf8600; --gold:#d0ac67; /* dourado — 3º acento, usado em detalhes: bordas, divisores, hover */ --gold-hover:#b98c42; --surface-dark: rgba(255,255,255,.05); --surface-light: rgba(255,255,255,.7); /* Gradientes de seção reutilizados entre páginas (evita repetir os mesmos hex soltos). */ --section-gradient-dark: linear-gradient(to bottom, var(--bg-dark), #150f1a); --section-gradient-light: linear-gradient(to bottom, var(--bg-light), #e6e6e6); /* Layout */ --nav-h: 92px; /* fallback (JS atualiza) */ --wa-space: 84px; /* espaço pro whatsapp */ /* Escala tipográfica estável, ajustada por breakpoints em vez de viewport width */ --fs-body: 1.0625rem; --fs-small: .96rem; --fs-caption: 1rem; --fs-lead: 1.1rem; --fs-h1: 2.65rem; --fs-h2: 2rem; --fs-h3: 1.3rem; --fs-hero: 3.35rem; } @media (max-width: 768px){ :root{ --fs-body: 1rem; --fs-small: .94rem; --fs-caption: .98rem; --fs-lead: 1rem; --fs-h1: 2.2rem; --fs-h2: 1.65rem; --fs-h3: 1.18rem; --fs-hero: 2.45rem; } } @media (min-width: 1200px){ :root{ --fs-body: 1.0625rem; --fs-small: .98rem; --fs-caption: 1rem; --fs-lead: 1.12rem; --fs-h1: 3rem; --fs-h2: 2.25rem; --fs-h3: 1.42rem; --fs-hero: 4rem; } } body { font-family: "Lexend Deca", sans-serif; font-optical-sizing: auto; font-weight: 300; font-style: normal; /* tipografia mais profissional */ font-size: var(--fs-body); line-height: 1.75; letter-spacing: 0.2px; background: radial-gradient(circle at top, color-mix(in srgb, var(--primary-bright) 10%, transparent), transparent 34%), linear-gradient(180deg, #0c1014 0%, #140d12 100%); color: var(--text-dark); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; transition: opacity .4s ease, background .4s ease, color .4s ease; min-height: 100vh; } /* Tema GLOBAL */ body.light-mode{ /* Tema claro global; páginas específicas refinam apenas superfícies locais. */ background: radial-gradient(circle at top, color-mix(in srgb, var(--primary) 10%, transparent), transparent 36%), linear-gradient(180deg, #f2f2f2 0%, #e6e6e6 100%); color: var(--text-light); } .skip-link{ /* Link de acessibilidade visível apenas quando recebe foco pelo teclado. */ position: fixed; top: 12px; left: 16px; z-index: 3000; transform: translateY(-150%); padding: 12px 16px; border-radius: 999px; background: linear-gradient(135deg, var(--primary), var(--primary-hover)); color: #f2f2f2; font-weight: 800; text-decoration: none; box-shadow: 0 12px 30px rgba(0,0,0,.35); transition: transform .2s ease; } .skip-link:focus-visible{ transform: translateY(0); } /* Fade entre páginas */ body.fade-out{ opacity:0; } /* Compensa menu fixo */ body{ /* Espaço fixo para header e WhatsApp flutuante não cobrirem conteúdo. */ padding-top: calc(var(--nav-h) + env(safe-area-inset-top)); padding-bottom: calc(var(--wa-space) + env(safe-area-inset-bottom)); } /* Evita âncoras ficarem atrás do header fixo */ section[id], [id]{ scroll-margin-top: calc(var(--nav-h) + 16px); } /* Animação genérica */ section{ animation: fadeUp .8s ease forwards; opacity: 0; } @keyframes fadeUp{ from{ transform: translateY(40px); opacity:0; } to{ transform: translateY(0); opacity:1; } } /* ===================================================== FOOTER — sempre claro, acompanha o fundo do site ===================================================== */ footer.footer{ width: 100%; background: #e9e9e9; color: var(--text-light); padding: 44px 8% 22px; border-top: 1px solid rgba(0,0,0,0.08); } footer.footer a, footer.footer p, footer.footer span{ color: inherit; } footer.footer .footer-content{ display: grid; grid-template-columns: 1.2fr 0.9fr 1.2fr; gap: 24px; align-items: center; margin-bottom: 16px; } footer.footer .footer-logo img{ height: 60px; display: block; object-fit: contain; } footer.footer .social-icons{ display: flex; align-items: center; justify-content: center; gap: 12px; } footer.footer .follow-text{ color: var(--primary); font-weight: 800; letter-spacing: 0.4px; } footer.footer .social-icons a{ display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 9px; } footer.footer .social-icons a img{ width: 26px; height: 26px; display: block; filter: grayscale(100%) brightness(.6); transition: transform .25s ease, filter .25s ease; } footer.footer .social-icons a:hover img{ filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gold) 55%, transparent)); transform: scale(1.08); } footer.footer .contact-info{ justify-self: end; text-align: right; line-height: 1.45; font-size: 0.95rem; } footer.footer .contact-info p{ margin: 0; } footer.footer .contact-info a{ text-decoration: none; } footer.footer .contact-info a:hover{ text-decoration: underline; } .developer-portfolio{ /* Bloco do crédito fica centralizado e independente das colunas do footer. */ display: grid; justify-items: center; gap: 14px; margin-top: 10px; } /* Logo ao lado do crédito do desenvolvedor */ .developer-credit{ display:flex; align-items:center; justify-content:center; flex-wrap: wrap; gap:10px; margin: 0; font-weight:700; letter-spacing:.4px; color: color-mix(in srgb, var(--text-light) 88%, transparent); } .developer-credit a{ color: var(--primary); font-weight: 800; text-decoration: none; } .developer-credit a:hover{ text-decoration: underline; } .developer-credit strong{ font-family: "Cormorant Garamond", serif; font-size: 1.15rem; font-weight: 700; color: var(--primary); letter-spacing: .3px; } footer.footer p:last-child{ text-align: center; margin: 10px 0 0; font-size: 0.9rem; color: #595959; } footer.footer p:last-child a{ color: var(--primary); font-weight: 700; text-decoration: none; } footer.footer p:last-child a:hover{ text-decoration: underline; } /* Responsivo */ @media (max-width: 900px){ footer.footer{ padding: 36px 8% 20px; } footer.footer .footer-content{ grid-template-columns: 1fr; gap: 16px; text-align: center; } footer.footer .footer-logo img{ height: 52px; margin: 0 auto; } footer.footer .contact-info{ justify-self: stretch; text-align: center; } } /* ===================================================== WHATSAPP FLOAT (GLOBAL) ===================================================== */ .whatsapp-float{ /* CTA global sempre acima do conteúdo, inclusive em páginas com vídeos/carrosséis. */ position: fixed; right: 18px; bottom: 18px; z-index: 2000; width: 58px; height: 58px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#25D366,#128C7E); color: #ffffff; text-decoration: none; box-shadow: 0 16px 38px rgba(0,0,0,0.45); transform: translateZ(0); animation: waPulse 2.8s ease-in-out infinite; transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; } .whatsapp-icon{ display:inline-flex; align-items:center; justify-content:center; line-height:0; } .whatsapp-float:hover{ animation: none; transform: translateY(-3px) scale(1.04); box-shadow: 0 22px 48px rgba(0,0,0,0.55); filter: saturate(1.05); } /* Com o menu mobile aberto, o botão do WhatsApp não deve ficar por cima do drawer/overlay. */ #navOverlay.is-open ~ .whatsapp-float{ opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s ease; } /* Tooltip do WhatsApp: aparece ao hover no desktop e fica visível em telas touch. */ .whatsapp-tooltip{ position:absolute; right: 70px; bottom: 50%; transform: translateY(50%); padding: 10px 14px; border-radius: 12px; background: rgba(21,15,26,0.92); color:#F7F7F7; font-size:.9rem; font-weight:600; letter-spacing:.3px; border:1px solid rgba(255,255,255,0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity:0; visibility:hidden; transition: opacity .2s ease, transform .2s ease, visibility .2s ease; white-space: nowrap; } .whatsapp-tooltip::after{ content:""; position:absolute; right:-6px; top:50%; transform: translateY(-50%) rotate(45deg); width:10px; height:10px; background: rgba(21,15,26,0.92); border-right:1px solid rgba(255,255,255,0.08); border-top:1px solid rgba(255,255,255,0.08); } .whatsapp-float:hover .whatsapp-tooltip{ opacity:1; visibility:visible; transform: translateY(50%) translateX(-2px); } @keyframes waPulse{ 0%{ transform: scale(1); box-shadow: 0 16px 38px rgba(0,0,0,0.45); } 50%{ transform: scale(1.07); box-shadow: 0 20px 45px rgba(0,0,0,0.55); } 100%{ transform: scale(1); box-shadow: 0 16px 38px rgba(0,0,0,0.45); } } /* Light Mode (apenas tooltip muda) */ body.light-mode .whatsapp-float{ background: linear-gradient(135deg,#25D366,#128C7E); box-shadow: 0 14px 32px rgba(0,0,0,0.25); } body.light-mode .whatsapp-tooltip{ background: rgba(255,255,255,0.92); color:#150F1A; border-color: rgba(0,0,0,0.08); } body.light-mode .whatsapp-tooltip::after{ background: rgba(255,255,255,0.92); border-right:1px solid rgba(0,0,0,0.08); border-top:1px solid rgba(0,0,0,0.08); } @media (hover: none), (pointer: coarse), (max-width: 768px){ /* Em toque não existe hover confiável, então a mensagem fica sempre disponível. */ .whatsapp-tooltip{ display: block; right: 0; bottom: calc(100% + 10px); width: max-content; max-width: min(220px, calc(100vw - 32px)); white-space: normal; text-align: center; opacity: 1; visibility: visible; transform: none; font-size: .82rem; line-height: 1.35; padding: 9px 12px; } .whatsapp-tooltip::after{ right: 22px; top: auto; bottom: -6px; transform: rotate(45deg); } .whatsapp-float:hover .whatsapp-tooltip{ transform: none; } } @media (max-width: 420px){ .btn-cardapio, .btn-contato{ width: 100%; max-width: 100%; white-space: normal; text-align: center; padding-inline: 16px; } .whatsapp-float{ right: 14px; bottom: 14px; width: 54px; height: 54px; } } /* ===================================================== KIT PREMIUM (Global) - Tipografia + hierarquia - Links + botões - Cards/caixas (melhora .slide/.caption indiretamente) - Focus acessível Complementa os estilos base sem depender de uma página específica. ===================================================== */ /* ---------- Tipografia: base moderna e confortável (ver regras de body no topo do arquivo) ---------- */ /* Parágrafos: largura ideal de leitura (sem atrapalhar elementos pequenos) */ p { max-width: 68ch; } /* Títulos: mais “premium” e com presença */ h1 { font-size: var(--fs-h1); line-height: 1.12; letter-spacing: .2px; } h2 { font-size: var(--fs-h2); line-height: 1.18; letter-spacing: .2px; } h3 { font-size: var(--fs-h3); line-height: 1.22; letter-spacing: .15px; } h1, h2, h3, .menu .nav-links a, .drawer-links a{ font-family: "Cormorant Garamond", serif; } /* Título de seção reutilizado por cardapio.css e contato.css; cada um pode ajustar espaçamento/decoração local. */ .titulo-secao{ color: var(--primary); display: inline-block; } /* ---------- Links: underline elegante e acessível ---------- */ a { text-underline-offset: 3px; text-decoration-thickness: 1.5px; } a:hover { text-decoration-thickness: 2px; } /* ---------- Focus (teclado): padrão profissional ---------- */ :focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 3px; border-radius: 10px; } /* ---------- Botões/CTAs: micro-interações mais suaves ---------- */ .btn-cardapio, button { transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; } .btn-cardapio{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 28px; border-radius: 999px; text-decoration: none; font-weight: 800; letter-spacing: .3px; color: #0c1014; background: linear-gradient(135deg, var(--gold), var(--gold-hover)); box-shadow: 0 16px 34px rgba(0,0,0,.24); } .btn-cardapio:hover{ transform: translateY(-2px); filter: brightness(1.03); } .btn-ghost{ color: inherit; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 14px 30px rgba(0,0,0,.18); } body.light-mode .btn-ghost{ background: rgba(255,255,255,.72); border-color: rgba(0,0,0,.08); color: var(--text-light); box-shadow: 0 14px 26px rgba(0,0,0,.10); } /* ---------- Superfícies premium (cards e caixas) ---------- */ /* Serve para blocos tipo "cards" sem alterar layout */ /* ---------- Ajuste global de leitura no Dark/Light (alto impacto) ---------- */ body:not(.light-mode) { color: rgba(245, 245, 245, .92); } body.light-mode { color: color-mix(in srgb, var(--text-light) 92%, transparent); } /* ---------- Correção universal para texto dentro de slides/captions (legível sempre) ---------- */ body:not(.light-mode) .slide, body:not(.light-mode) .caption { color: rgba(245, 245, 245, .92); } body.light-mode .slide, body.light-mode .caption { color: color-mix(in srgb, var(--text-light) 92%, transparent); } /* ---------- Pequena melhoria em listas (horários) ---------- */ ul { padding-left: 1.1rem; } li { margin: .22rem 0; } /* ---------- Renderização progressiva em seções abaixo da dobra ---------- */ .section, .reserve-strip, .qs-grid, .qs-owners, .qs-cta, .premium-carousel, .momentos-cta, .cardapio-page section, .contact-page section { content-visibility: auto; contain-intrinsic-size: 1px 760px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }