/* Site header navigation — the strip that sits above the Rivals logo on every page. The primary purpose is to satisfy Ezoic/MCM reviewers' check for "navigation essentials linked in the main menu" and to let crawlers see the site's structure on first parse. Markup is static HTML; the hamburger toggle on small screens is the only JS-dependent piece. */ .site_header_nav { position: relative; z-index: 5; width: 100%; } .site_header_nav_inner { max-width: 1200px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: center; } .site_header_nav_links { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; gap: 4px 18px; flex-wrap: wrap; } .site_header_nav_links a { display: inline-block; padding: 7px 14px; color: #f6f7fb; text-decoration: none; font-family: 'MarvelFont', 'Franklin Gothic Medium', sans-serif; font-size: 1em; letter-spacing: 0.08em; text-transform: uppercase; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9); transition: color 0.15s ease, transform 0.15s ease; } .site_header_nav_links a:hover, .site_header_nav_links a:focus-visible { color: #ffffff; transform: scale(1.06); outline: none; } /* Hamburger toggle — hidden on desktop, shown below the mobile breakpoint. Sized to match the settings (background-picker) icon at top-right so the two corner controls feel balanced. */ .site_header_nav_toggle { display: none; width: 44px; height: 44px; padding: 0; background: transparent; border: none; color: #ffffff; font-size: 2.2em; line-height: 44px; text-align: center; cursor: pointer; font-family: 'MarvelFont', 'Franklin Gothic Medium', sans-serif; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9); transition: transform 0.15s ease; } .site_header_nav_toggle:hover, .site_header_nav_toggle:focus-visible { transform: scale(1.08); outline: none; } /* In-drawer close button — injected by header_nav.js so we don't have to edit every page's markup. Matches the X used by other site popups. */ .site_header_nav_close { display: none; position: absolute; top: 14px; left: 14px; width: 36px; height: 36px; padding: 0; background: transparent; border: none; cursor: pointer; z-index: 2; transition: transform 0.15s ease; } .site_header_nav_close:hover, .site_header_nav_close:focus-visible { transform: scale(1.08); outline: none; } .site_header_nav_close img { width: 100%; height: 100%; display: block; } @media (max-width: 720px) { .site_header_nav_inner { padding: 10px 14px; justify-content: flex-start; } /* Hamburger sits at the top-left of the page (anchored to the .site_header_nav which is the first thing in ), matching how the settings/background icon is anchored top-right. Scrolls off-screen with page content. */ .site_header_nav_toggle { display: inline-block; position: absolute; top: 10px; left: 10px; z-index: 6; } /* Dim backdrop behind the open drawer. */ .site_header_nav::before { content: ''; position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.28s ease; z-index: 999; } .site_header_nav.is_open::before { opacity: 1; pointer-events: auto; } /* Slide-out drawer from the left. Solid black panel with a 2px white border matching the site's other popups (streak, how-to-play). */ .site_header_nav_links { position: fixed; top: 0; left: 0; width: 290px; max-width: 82vw; height: 100vh; background-color: rgba(0, 0, 0, 0.96); border-top: 2px solid #DCE1F4; border-right: 2px solid #DCE1F4; border-bottom: 2px solid #DCE1F4; box-shadow: 4px 0 22px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 60px 0 24px; margin: 0; list-style: none; transform: translateX(-100%); transition: transform 0.3s ease; z-index: 1000; overflow-y: auto; -webkit-overflow-scrolling: touch; } .site_header_nav.is_open .site_header_nav_links { transform: translateX(0); } .site_header_nav_links li { list-style: none; } .site_header_nav_close { display: block; } .site_header_nav_links a { display: block; text-align: center; padding: 18px 24px; color: #ffffff; font-size: 1.05em; letter-spacing: 0.14em; text-transform: uppercase; border-bottom: 1px solid rgba(255, 255, 255, 0.08); transition: background-color 0.15s ease, color 0.15s ease; } .site_header_nav_links li:last-child a { border-bottom: none; } .site_header_nav_links a:hover, .site_header_nav_links a:focus-visible { transform: none; background-color: rgba(255, 255, 255, 0.07); color: #ffffff; } /* Prevent body scroll behind the open drawer. */ body:has(.site_header_nav.is_open) { overflow: hidden; } }