/* Header-specific refinements for dreamvoyageplay.com */ .site-header { position: sticky; top: 0; z-index: var(--z-header); } /* Ensure the nav list is visible by default (for no-JS / wide screens) */ .nav-main__list { list-style: none; } /* Active link helper using data attribute on */ body[data-page="home"] .nav-main__link[href="/"], body[data-page="about"] .nav-main__link[href="/about/"], body[data-page="game"] .nav-main__link[href="/game/"], body[data-page="contact"] .nav-main__link[href="/contact-us/"] { color: var(--color-gray-900); background: rgba(255, 255, 255, 0.9); } body[data-page="home"] .nav-main__link[href="/"]::after, body[data-page="about"] .nav-main__link[href="/about/"]::after, body[data-page="game"] .nav-main__link[href="/game/"]::after, body[data-page="contact"] .nav-main__link[href="/contact-us/"]::after { transform: scaleX(1); } /* Small tweak for sticky header shadow when scrolled */ .site-header--scrolled { box-shadow: 0 10px 30px rgba(15, 23, 42, 0.07); } @media (max-width: 768px) { /* Mobile menu initial state: closed; JS will toggle nav-main__list--open */ .nav-main__list { max-height: 0; overflow: hidden; } .nav-main__list.nav-main__list--open { max-height: 320px; } }