@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&display=swap'); /* Global brand palette */ :root { --bottle-green: #021b12; --bottle-green-soft: #0a2418; --cream: #fff6d8; /* main light text */ --cream-soft: #f5f0d8; /* slightly deeper cream */ --cream-bg: #f5f5dc; /* default background */ --gold: #f1b646; /* accent */ --ink: #0a2418; /* default text */ } /* Base */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: 'Merriweather', serif; background-color: var(--cream-bg); color: var(--ink); font-size: 1.05rem; } /* ========================= NAVBAR (default = homepage overlay) ========================= */ .navbar { position: absolute; /* overlay style for homepage */ top: 0; left: 0; width: 100%; z-index: 1000; display: flex; justify-content: space-between; align-items: center; background: rgba(2, 27, 18, 0.9); backdrop-filter: blur(6px); padding: 18px 48px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); } .logo img { height: 50px; max-width: 100%; display: block; } .logo:hover { transform: scale(0.96); transition: transform 0.2s ease; } /* Links */ .nav-links { display: flex; gap: 28px; /* tighter to avoid overflow */ flex-wrap: wrap; /* lets it wrap before breaking layout */ } .nav-links a { text-decoration: none; color: var(--cream); font-weight: 600; font-size: 0.9rem; position: relative; transition: color 0.3s ease, text-shadow 0.3s ease; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15); letter-spacing: 0.5px; } .nav-links a::after { content: ""; display: block; width: 0; height: 2px; background-color: var(--gold); transition: width 0.3s ease; position: absolute; bottom: -4px; left: 0; } .nav-links a:hover { color: var(--cream-soft); } .nav-links a:hover::after { width: 100%; } .nav-links a.active::after { width: 100%; } /* Hamburger */ .hamburger { display: none; font-size: 2rem; color: var(--cream); cursor: pointer; } .hamburger svg rect { fill: var(--cream); } /* ========================= MOBILE NAV ========================= */ @media (max-width: 950px) { .hamburger { display: block; } .nav-links { flex-direction: column; gap: 14px; background-color: rgba(2, 52, 35, 0.98); position: absolute; /* robust positioning: dropdown sits under navbar regardless of navbar height */ top: calc(100% + 10px); left: 50%; transform: translateX(-50%) scaleY(0); padding: 20px 40px; border-radius: 8px; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); z-index: 999; transition: transform 0.3s ease, opacity 0.3s ease; opacity: 0; transform-origin: top; display: flex; } .nav-links.show { transform: translateX(-50%) scaleY(1); opacity: 1; } /* when dropdown is open, make sure it anchors correctly */ .navbar { position: relative; } } /* ========================= SOLID HEADER (inner pages) ========================= */ /* Put class="page--solid-header" on for non-home pages */ .page--solid-header .navbar { position: relative; /* IMPORTANT: no sticky by default */ top: auto; left: auto; background: linear-gradient( to bottom, rgba(2, 27, 18, 1), rgba(10, 36, 24, 1) ); backdrop-filter: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); } @media (max-width: 950px) { .page--solid-header .navbar { padding: 16px 20px; } } /* Optional: if you ever WANT the header to follow on a specific page: add class="page--solid-header page--sticky-header" on */ .page--solid-header.page--sticky-header .navbar { position: sticky; top: 0; } /* Optional: if a page uses an absolute header and needs content offset, add class="page--needs-offset" on */ .page--needs-offset main, .page--needs-offset .page-content, .page--needs-offset .message { padding-top: 96px; } @media (max-width: 950px) { .page--needs-offset main, .page--needs-offset .page-content, .page--needs-offset .message { padding-top: 86px; } } /* ========================= BETTER MOBILE DROPDOWN ========================= */ @media (max-width: 950px) { /* Make dropdown a wider, nicer panel */ .nav-links{ width: min(92vw, 420px); left: 50%; top: calc(100% + 12px); padding: 18px 18px; border-radius: 14px; /* smoother open */ transform: translateX(-50%) translateY(-6px) scale(0.98); opacity: 0; } .nav-links.show{ transform: translateX(-50%) translateY(0) scale(1); opacity: 1; } /* Bigger, better tap targets */ .nav-links a{ font-size: 1.05rem; letter-spacing: 0.4px; padding: 14px 14px; border-radius: 12px; /* remove text-shadow fuzz for mobile readability (optional) */ text-shadow: none; } .nav-links a:hover{ background: rgba(255, 246, 216, 0.06); } .nav-links a::after{ bottom: 8px; /* keep underline inside the padded link */ left: 14px; right: 14px; width: auto; opacity: 0; } .nav-links a:hover::after, .nav-links a.active::after{ opacity: 1; } /* Backdrop overlay behind dropdown (we’ll toggle it with a class in JS) */ .nav-backdrop{ position: fixed; inset: 0; background: rgba(0,0,0,0.45); opacity: 0; pointer-events: none; transition: opacity 200ms ease; z-index: 900; } .nav-backdrop.show{ opacity: 1; pointer-events: auto; } /* Keep dropdown above backdrop */ .nav-links{ z-index: 999; } } @media (max-width: 950px) { .nav-links { /* existing styles... */ opacity: 0; transform-origin: top; pointer-events: none; /* ✅ prevents clicks when closed */ visibility: hidden; /* ✅ optional but nice */ } .nav-links.show { /* existing styles... */ opacity: 1; pointer-events: auto; /* ✅ clickable only when open */ visibility: visible; /* ✅ optional */ } }