/* Header Styles */ .site-header { position: sticky; top: 0; z-index: 1000; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); transition: background 0.3s ease, box-shadow 0.3s ease; } .header-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); font-weight: 800; font-size: 1.5rem; } .brand-logo { height: 60px; display: block; } .nav { display: flex; align-items: center; gap: 24px; } .nav a { text-decoration: none; color: var(--muted); font-weight: 600; transition: color 0.2s ease; position: relative; } .nav a:hover { color: var(--text); } .nav a:after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: var(--primary); transition: width 0.3s ease; } .nav a:hover:after { width: 100%; } /* Buttons */ .button { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; cursor: pointer; border: 0; border-radius: var(--radius); padding: 14px 24px; background: var(--primary); color: #fff; box-shadow: var(--shadow); transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; text-align: center; justify-content: center; } .button:hover { background: var(--primary-600); transform: translateY(-2px); box-shadow: var(--shadow-lg); color: #fff; } .button-outline { background: transparent; border: 2px solid var(--primary); color: var(--primary); } .button-outline:hover { background: var(--primary); color: white; } .button.small { padding: 10px 16px; font-size: 14px; } .button-preorder { background: var(--primary); color: #fff !important; } .button-preorder:hover { background: var(--primary-600); color: #fff !important; } /* Accessibility helper */ .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } /* Prevent background scroll when menu is open (JS toggles .no-scroll on ) */ .no-scroll { overflow: hidden; } /* Hidden checkbox used for CSS-only toggle */ .menu-toggle { position: absolute; opacity: 0; pointer-events: none; } /* Hamburger button */ .menu-btn { display: none; border: 1px solid var(--border); background: #fff; border-radius: var(--radius); padding: 10px 12px; cursor: pointer; line-height: 0; } /* Hamburger icon (pure CSS, no Font Awesome needed) */ .menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 24px; height: 2px; background: var(--text); border-radius: 2px; position: relative; transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease; } .menu-icon::before, .menu-icon::after { content: ''; position: absolute; left: 0; } .menu-icon::before { top: -7px; } .menu-icon::after { top: 7px; } /* Backdrop (click to close) */ .nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 100; /* higher than page, lower than the dropdown menu */ } /* Responsive header */ @media (max-width: 768px) { .menu-btn { display: inline-block; } .nav { display: none; /* hidden by default on mobile */ } /* Show dropdown when checkbox is checked */ .menu-toggle:checked ~ .nav { display: flex; flex-direction: column; position: absolute; right: 4%; top: 70px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-lg); gap: 16px; width: 220px; z-index: 1001; } /* Animate hamburger into an "X" */ .menu-toggle:checked ~ .menu-btn .menu-icon { transform: rotate(45deg); } .menu-toggle:checked ~ .menu-btn .menu-icon::before { top: 0; transform: rotate(90deg); } .menu-toggle:checked ~ .menu-btn .menu-icon::after { opacity: 0; } /* Show backdrop when open */ .menu-toggle:checked ~ .nav-backdrop { display: block; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .site-header, .nav a:after, .button, .menu-icon, .menu-icon::before, .menu-icon::after { transition: none !important; } }