/* Queen's Rum — Shared site-nav CSS * Used by non-fullpage pages (e.g. store locator) via the * template-parts/site-nav.php template part. On page-site.php this same * CSS lives inline; this file is the extracted-for-reuse copy so other * pages can get a working nav without loading all of the marketing-site * CSS. Keep the two in sync — or better, move page-site.php to also * enqueue this file and delete its inline copy in a follow-up. */ /* Reset so nav anchors / buttons don't inherit WP theme defaults ---------- */ .site-nav, .site-nav * { box-sizing: border-box; } .site-nav a, .mobile-menu a { text-decoration: none; } /* Fonts — these must also be loaded site-wide (Cubano + Legitima). On the * fullpage site they're loaded via in ; for * other pages the theme's global fonts/fonts.css provides them. */ /* ========== Fixed top bar ========================================== */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: 1.375rem; pointer-events: auto; transition: color 0.4s ease; } .site-nav .logo { display: flex; align-items: center; gap: 0.5rem; } .site-nav .logo-text { font-family: 'Cubano', sans-serif; font-size: 1.25rem; letter-spacing: 0.075rem; line-height: 0.97; transition: color 150ms ease-out; } .site-nav .logo-icon { width: 1.2rem; height: 1.7146rem; /* preserves SVG aspect 15:21.4331 */ flex-shrink: 0; position: relative; top: 3px; /* optical nudge so Q body aligns with text x-height */ transition: filter 150ms ease-out; } .site-nav .logo-icon path { transition: fill 150ms ease-out; } .site-nav .nav-links { display: flex; align-items: center; gap: 1.625rem; list-style: none; margin: 0; padding: 0; } .site-nav .nav-links a { font-family: 'Legitima', serif; font-size: 0.875rem; letter-spacing: 0.0525rem; transition: color 150ms ease-out, opacity 0.3s; } .site-nav .nav-links a:hover { opacity: 0.7; } /* ========== Theme variants ========================================= -webkit-text-fill-color is set explicitly alongside color to defeat a WP/theme cascade rule that otherwise pins fill-color to white on some browsers. Keep both properties in sync on every variant. */ .site-nav.nav-light .logo-text, .site-nav.nav-light .nav-links a { color: white; -webkit-text-fill-color: white; } .site-nav.nav-light .logo-icon path { fill: #DEAC09; } .site-nav.nav-dark .logo-text, .site-nav.nav-dark .nav-links a { color: #1f1914; -webkit-text-fill-color: #1f1914; } .site-nav.nav-dark .logo-icon path { fill: #DEAC09; } /* Serves theme: dark text + white Q logo with drop shadow */ .site-nav.nav-serves .logo-text, .site-nav.nav-serves .nav-links a { color: #1f1914; -webkit-text-fill-color: #1f1914; } .site-nav.nav-serves .logo-icon { filter: drop-shadow(0 0 1.44375rem rgba(0,0,0,0.37)); } .site-nav.nav-serves .logo-icon path { fill: #ffffff; } .site-nav.nav-gold-dark .logo-text, .site-nav.nav-gold-dark .nav-links a { color: #1f1914; -webkit-text-fill-color: #1f1914; } .site-nav.nav-gold-dark .logo-icon path { fill: #DEAC09; } .site-nav.nav-dark-mono .logo-text, .site-nav.nav-dark-mono .nav-links a { color: #1f1914; -webkit-text-fill-color: #1f1914; } .site-nav.nav-dark-mono .logo-icon path { fill: #1f1914; } .site-nav.nav-white-mono .logo-text, .site-nav.nav-white-mono .nav-links a { color: #ffffff; -webkit-text-fill-color: #ffffff; } .site-nav.nav-white-mono .logo-icon path { fill: #ffffff; } /* ========== Hamburger (mobile) ====================================== */ .hamburger { display: none; background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; flex-direction: column; align-items: flex-end; gap: 4px; width: 2.25rem; } .hamburger .bar { display: block; width: 2.25rem; height: 2px; background: white; margin: 0; padding: 0; transition: background 0.3s ease; } .site-nav.nav-dark .hamburger .bar, .site-nav.nav-serves .hamburger .bar, .site-nav.nav-gold-dark .hamburger .bar, .site-nav.nav-dark-mono .hamburger .bar { background: #1f1914; } /* ========== Mobile menu overlay ===================================== */ .mobile-menu { position: fixed; inset: 0; z-index: 300; background: rgba(10, 8, 6, 0.96); backdrop-filter: blur(0.5rem); -webkit-backdrop-filter: blur(0.5rem); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 2.25rem; } .mobile-menu.active { display: flex; animation: mobileMenuFadeIn 0.25s ease-out; } @keyframes mobileMenuFadeIn { from { opacity: 0; } to { opacity: 1; } } .mobile-menu-close { position: absolute; top: 1.375rem; right: 1.375rem; width: 2.5rem; height: 2.5rem; background: transparent; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; } .mobile-menu-close span { position: absolute; width: 1.75rem; height: 0.125rem; background: white; } .mobile-menu-close span:nth-child(1) { transform: rotate(45deg); } .mobile-menu-close span:nth-child(2) { transform: rotate(-45deg); } .mobile-menu-links { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; } .mobile-menu-links a { font-family: 'Chivo', sans-serif; font-weight: 900; font-size: 1.75rem; letter-spacing: 0.105rem; line-height: 0.86; text-transform: uppercase; color: white; -webkit-text-fill-color: white; padding: 0.5rem 1.25rem; opacity: 0; transform: translateY(6px); } .mobile-menu-links a.active { color: #DEAC09; -webkit-text-fill-color: #DEAC09; } /* Sequential fade-in once the overlay is active — 80ms stagger per link, 260ms per-link duration. Items start at opacity: 0 (above) so the animation reveals them; if the animation never runs (overlay inactive) they stay hidden, which is fine. */ .mobile-menu.active .mobile-menu-links a { animation: mobileMenuItemIn 260ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; } .mobile-menu.active .mobile-menu-links a:nth-child(1) { animation-delay: 120ms; } .mobile-menu.active .mobile-menu-links a:nth-child(2) { animation-delay: 200ms; } .mobile-menu.active .mobile-menu-links a:nth-child(3) { animation-delay: 280ms; } .mobile-menu.active .mobile-menu-links a:nth-child(4) { animation-delay: 360ms; } .mobile-menu.active .mobile-menu-links a:nth-child(5) { animation-delay: 440ms; } .mobile-menu.active .mobile-menu-links a:nth-child(6) { animation-delay: 520ms; } @keyframes mobileMenuItemIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ========== Responsive — hide desktop links, show hamburger ========= */ @media (max-width: 767px) { .site-nav .nav-links { display: none; } .site-nav .hamburger { display: flex; } }