/* As fontes são carregadas via no do index.html. Não use @import aqui: ele só é descoberto depois que este arquivo baixa e é parseado, criando uma cascata serial que atrasa o swap das fontes e remexe a altura da página DEPOIS do carregamento — foi o que quebrava as âncoras no servidor. */ :root { --color-wine-dark: #470A12; --color-wine: #68131D; --color-wine-light: #8E1F2C; --color-cream-light: #FFFDF9; --color-cream: #FAF5EB; --color-cream-dark: #F3EBD9; --color-green-dark: #004D2C; --color-green-emerald: #006338; --color-green-accent: #0A7A46; --color-gold: #C59A3F; --color-gold-light: #E0BA62; --color-wood: #261618; /* Altura do header fixo no estado "scrolled". Valor de fallback: o script.js remede e sobrescreve em runtime. */ --header-offset: 76px; } /* `clip` recorta o transbordo horizontal SEM transformar o elemento em um container de rolagem — ao contrário de `hidden`, que vira scroll container e atrapalha scroll-padding / position:sticky. `hidden` fica de fallback. */ html, body { overflow-x: hidden; } @supports (overflow: clip) { html, body { overflow-x: clip; } } /* Reserva a altura do header em QUALQUER rolagem até uma âncora feita pelo próprio navegador: URL aberta com #hash, botão voltar/avançar, navegação por teclado (Tab) e scrollIntoView(). */ html { scroll-padding-top: var(--header-offset); } section[id] { scroll-margin-top: var(--header-offset); } /* Header dynamic states */ #main-header { transition: all 0.3s ease; } /* Usada só durante a medição da altura do header: sem isso, medir no meio da transição de 0.3s devolveria um valor intermediário. Nenhum frame é pintado enquanto ela está aplicada, então não há piscada. */ #main-header.measuring, #main-header.measuring * { transition: none !important; } #main-header.scrolled { background: rgba(71, 10, 18, 0.98) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; padding-top: 6px !important; padding-bottom: 8px !important; border-bottom: 1px solid rgba(197, 154, 63, 0.4) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important; } #main-header.scrolled #top-micro-bar { display: none !important; } #main-header.scrolled #main-brand-logo { height: 60px !important; } #main-header.scrolled #main-nav-container { top: 0 !important; } body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #FAF7F2; color: #261719; overflow-x: hidden; } h1, h2, h3, .font-display, .font-serif-heading { font-family: 'Playfair Display', Georgia, serif; } .font-cinzel { font-family: 'Cinzel', serif; } .font-cormorant { font-family: 'Cormorant Garamond', Georgia, serif; } /* Custom decorative elements & wave patterns */ .santos-wave-pattern { background-image: radial-gradient(circle at 100% 150%, #FAF5EB 24%, #F2E8D5 25%, #F2E8D5 28%, #FAF5EB 29%, #FAF5EB 36%, #F2E8D5 37%, #F2E8D5 40%, transparent 40%, transparent), radial-gradient(circle at 0 150%, #FAF5EB 24%, #F2E8D5 25%, #F2E8D5 28%, #FAF5EB 29%, #FAF5EB 36%, #F2E8D5 37%, #F2E8D5 40%, transparent 40%, transparent), radial-gradient(circle at 50% 100%, #F2E8D5 10%, #FAF5EB 11%, #FAF5EB 23%, #F2E8D5 24%, #F2E8D5 30%, #FAF5EB 31%, #FAF5EB 43%, #F2E8D5 44%, #F2E8D5 50%, transparent 50%, transparent), radial-gradient(circle at 100% 50%, #F2E8D5 5%, #FAF5EB 6%, #FAF5EB 15%, #F2E8D5 16%, #F2E8D5 20%, #FAF5EB 21%, #FAF5EB 30%, #F2E8D5 31%, #F2E8D5 35%, #FAF5EB 36%, #FAF5EB 45%, #F2E8D5 46%, #F2E8D5 50%, transparent 50%, transparent), radial-gradient(circle at 0 50%, #F2E8D5 5%, #FAF5EB 6%, #FAF5EB 15%, #F2E8D5 16%, #F2E8D5 20%, #FAF5EB 21%, #FAF5EB 30%, #F2E8D5 31%, #F2E8D5 35%, #FAF5EB 36%, #FAF5EB 45%, #F2E8D5 46%, #F2E8D5 50%, transparent 50%, transparent); background-size: 80px 40px; } .bg-radial-vignette { background: radial-gradient(circle, transparent 40%, rgba(28, 5, 8, 0.85) 90%); } .text-gold-gradient { background: linear-gradient(135deg, #FAD074 0%, #E3A83B 50%, #C4821E 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .vintage-divider { display: flex; align-items: center; justify-content: center; gap: 1rem; } .vintage-divider::before, .vintage-divider::after { content: ''; height: 4px; width: 60px; border-radius: 2px; background: linear-gradient(90deg, transparent, #C59A3F, transparent); } /* Custom Scrollbars */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #261618; } ::-webkit-scrollbar-thumb { background: #68131D; border-radius: 4px; border: 1px solid #C59A3F; } ::-webkit-scrollbar-thumb:hover { background: #8E1F2C; } /* Modal and Animation helper classes */ .modal-open { overflow: hidden; } @keyframes fadeIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } .animate-fade-in { animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards; } /* Hide scrollbar for category bars */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }