/* ========================================= CSS VARIABLES (shared across pages) ========================================= */ :root { --bg-dark: #16211A; --bg-light: #F2F4F3; --accent-lime: #95B300; --accent-lime-hover: #a3c400; --text-light: #FFFFFF; --text-dark: #16211A; --text-muted: #888888; } /* ========================================= GLOBAL UTILS (needed on every page) ========================================= */ .container { max-width: 1440px; margin: 0 auto; padding: 0 20px; } .btn-primary { background-color: var(--accent-lime); color: var(--bg-dark); padding: 12px 32px; border-radius: 50px; font-weight: 700; font-size: 1rem; transition: background 0.3s ease, transform 0.2s ease; display: inline-block; border: none; cursor: pointer; } .btn-primary:hover { background-color: var(--accent-lime-hover); transform: translateY(-2px); } a { text-decoration: none; color: inherit; } /* ========================================= NAVBAR ========================================= */ /* The

that wraps the fixed navbar is a flex child of . Since the navbar inside is position:fixed (out of flow), the header must be forced to 0 height so it takes no space in the layout. */ body > header { height: 0; overflow: visible; flex-shrink: 0; } .navbar { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; padding: 20px 0; background: transparent; transition: all 0.3s ease-in-out; } .navbar.scrolled { background: rgba(12, 18, 14, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 15px 0; box-shadow: 0 5px 30px rgba(0, 0, 0, 0.5); border-bottom: 1px solid rgba(149, 179, 0, 0.2); } .nav-container { display: flex; justify-content: space-between; align-items: center; } .logo-img { height: 35px; } .nav-links { list-style: none; display: flex; gap: 30px; align-items: center; } .nav-links a { font-weight: 600; font-size: 0.95rem; transition: color 0.3s; } .nav-links a:hover { color: var(--accent-lime); } /* ========================================= HAMBURGER MENU ========================================= */ .hamburger { display: none; cursor: pointer; z-index: 1001; } .hamburger span { display: block; width: 25px; height: 3px; margin: 5px; background-color: var(--text-light); transition: all 0.3s ease; } /* Hamburger Animation */ .hamburger.toggle span:nth-child(1) { transform: rotate(-45deg) translate(-5px, 6px); } .hamburger.toggle span:nth-child(2) { opacity: 0; } .hamburger.toggle span:nth-child(3) { transform: rotate(45deg) translate(-5px, -6px); } /* ========================================= RESPONSIVE ========================================= */ @media (max-width: 768px) { .hamburger { display: block; } .nav-container { flex-direction: row; justify-content: space-between; } .nav-links { position: fixed; right: -100%; top: 0; height: 100vh; background-color: var(--bg-dark); display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; transition: right 0.4s ease-in-out; z-index: 1000; gap: 30px; } .nav-links.nav-active { right: 0; } } /* ========================================= LEGACY SF-NAV (kept for compatibility) ========================================= */ .sf-nav { position: fixed; top: 20px; left: 0; width: 100%; z-index: 9999; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; } /* ========================================= NAV BAR (ROUNDED CAPSULE) ========================================= */ .sf-nav-bar { pointer-events: auto; width: 100%; max-width: 1100px; display: flex; align-items: center; justify-content: space-between; padding: 12px 28px; border-radius: 999px; background: rgba(11, 26, 82, 0.35); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } /* ========================================= LOGO ========================================= */ .sf-logo-nav { height: 30px; display: block; } /* ========================================= DESKTOP MENU ========================================= */ .sf-nav-right { display: flex; gap: 32px; } .sf-nav-right a { font-size: 13px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: #e5e7f2; text-decoration: none; transition: color 0.3s ease; } .sf-nav-right a:hover { color: #d4af37; } /* ========================================= HAMBURGER ========================================= */ .sf-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; } .sf-hamburger span { width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: all 0.3s ease; } /* ========================================= MOBILE MENU PANEL ========================================= */ .sf-mobile-menu { position: absolute; top: 72px; left: 50%; transform: translateX(-50%); width: calc(100% - 32px); max-width: 360px; background: rgba(11, 26, 82, 0.45); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 22px; padding: 18px 0; display: flex; flex-direction: column; align-items: center; gap: 14px; opacity: 0; pointer-events: none; transform-origin: top center; transition: all 0.3s ease; } .sf-mobile-menu a { font-size: 14px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #fff; text-decoration: none; } /* ========================================= TOGGLE STATES ========================================= */ #sf-menu-toggle:checked~.sf-mobile-menu { opacity: 1; pointer-events: auto; } /* hamburger animation */ #sf-menu-toggle:checked+.sf-nav-bar .sf-hamburger span:nth-child(1) { transform: rotate(45deg) translateY(7px); } #sf-menu-toggle:checked+.sf-nav-bar .sf-hamburger span:nth-child(2) { opacity: 0; } #sf-menu-toggle:checked+.sf-nav-bar .sf-hamburger span:nth-child(3) { transform: rotate(-45deg) translateY(-7px); } /* ========================================= RESPONSIVE BREAKPOINT ========================================= */ @media (max-width: 768px) { .sf-nav-bar { max-width: 100%; padding: 10px 20px; } .sf-nav-right { display: none; } .sf-hamburger { display: flex; } }