/* ================================================================== LEGEND TOWN RP — MOBILE MENU (lt-menu) ------------------------------------------------------------------ Self-contained. Every class is namespaced .ltm-* so nothing in fixes.css or the Next.js bundle can reach it, and it reaches nothing of theirs. Why this file exists — two real, provable bugs in the old drawer: 1) STACKING TRAP. The old

lived inside

. A positioned element with a z-index creates a stacking context, so the drawer's own z-index:60 was scoped INSIDE the header and capped at 50 in the page. The backdrop was appended to at z-index 55, so 55 > 50 and the blurred backdrop painted OVER the drawer and swallowed every tap. That is the "blur screen I can't press". 2) HEADER OVERFLOW. The logo block's min-content width is wider than the bar leaves room for, so the hamburger was pushed to x≈372..416 on a 390px screen and then clipped away by overflow-x:hidden. Its centre was off-screen, so the tap could never land at all. That is the "not aligned". The drawer is now a plain

appended straight to , so it sits in the root stacking context with the backdrop directly beneath it. Nothing can cover it. ================================================================== */ :root { --ltm-blue: #2090D0; --ltm-blue-light: #4FB3E8; --ltm-blue-bright: #6FCBF5; --ltm-ink: #05070d; --ltm-panel: #080D16; --ltm-width: min(86vw, 340px); --ltm-safe-top: env(safe-area-inset-top, 0px); --ltm-safe-bottom: env(safe-area-inset-bottom, 0px); } /* ------------------------------------------------------------------ 1. HEADER — stop the logo squeezing the hamburger off-screen ------------------------------------------------------------------ */ @media (max-width: 1023px) { /* THE ROOT CAUSE of the squeeze. fixes.css has a global mobile rule meant for hero headlines: h1 { font-size: clamp(2.2rem, 11vw, 3.5rem) !important } It also matched the header brand, so "LEGEND TOWN" rendered at ~43px on a 390px phone. That single oversized element is what pushed the hamburger past the right edge, where overflow-x:hidden clipped it. The rule below is more specific AND !important, so it wins; the hero headlines keep their large size. */ header.fixed h1, .ltm-brand-link h1 { font-size: 17px !important; line-height: 1.15 !important; letter-spacing: .04em !important; } header.fixed .leading-none p { font-size: 7.5px !important; letter-spacing: .3em !important; } /* the bar: let the brand shrink, never the button */ .ltm-bar { gap: 0.5rem !important; min-width: 0; } .ltm-brand-link { flex: 0 1 auto !important; min-width: 0 !important; overflow: hidden; } .ltm-brand-link > div:last-child { min-width: 0; overflow: hidden; } .ltm-brand-link h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* the button keeps its full size and stays inside the viewport */ .ltm-btn-wrap { flex: 0 0 auto !important; margin-inline-start: auto; display: block !important; } .ltm-btn { flex: 0 0 auto !important; height: 44px !important; width: 44px !important; display: flex !important; align-items: center; justify-content: center; border-radius: 6px !important; border: 1px solid rgba(255, 255, 255, .12) !important; background: rgba(255, 255, 255, .05) !important; color: #fff; cursor: pointer; transition: background .2s, border-color .2s; -webkit-tap-highlight-color: transparent; } .ltm-btn:active { background: rgba(32, 144, 208, .18) !important; border-color: rgba(32, 144, 208, .5) !important; } } @media (max-width: 360px) { header.fixed h1 { font-size: 15px !important; letter-spacing: .02em !important; } header.fixed a img { height: 2rem !important; } } /* the built-in button on pages that had none */ .ltm-btn-floating { position: fixed; top: calc(var(--ltm-safe-top) + 9px); right: 14px; z-index: 9997; height: 44px; width: 44px; display: flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(8, 13, 22, .85); backdrop-filter: blur(10px); color: #fff; cursor: pointer; } @media (min-width: 1024px) { .ltm-btn-floating { display: none; } } /* ------------------------------------------------------------------ 2. BACKDROP — z-index 9998, always directly under the drawer ------------------------------------------------------------------ */ .ltm-overlay { position: fixed; inset: 0; z-index: 9998; background: rgba(2, 5, 12, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; } .ltm-overlay.is-open { opacity: 1; visibility: visible; } /* ------------------------------------------------------------------ 3. DRAWER — z-index 9999, same (root) stacking context ------------------------------------------------------------------ */ .ltm-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 9999; width: var(--ltm-width); display: flex; flex-direction: column; direction: rtl; text-align: right; background: linear-gradient(180deg, var(--ltm-panel) 0%, var(--ltm-ink) 100%); border-left: 1px solid rgba(32, 144, 208, .3); box-shadow: -24px 0 60px rgba(0, 0, 0, .75); transform: translateX(100%); visibility: hidden; transition: transform .34s cubic-bezier(.22, .8, .3, 1), visibility .34s; overscroll-behavior: contain; font-family: inherit; } .ltm-drawer.is-open { transform: translateX(0); visibility: visible; } /* corner brackets, matching the department cards */ .ltm-drawer::before, .ltm-drawer::after { content: ''; position: absolute; width: 30px; height: 30px; border-color: var(--ltm-blue); border-style: solid; opacity: .85; pointer-events: none; } .ltm-drawer::before { top: 0; left: 0; border-width: 3px 0 0 3px; } .ltm-drawer::after { bottom: 0; left: 0; border-width: 0 0 3px 3px; } /* ---------- head ---------- */ .ltm-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1.1rem 1.15rem; padding-top: calc(var(--ltm-safe-top) + 1.1rem); border-bottom: 1px solid rgba(255, 255, 255, .08); } .ltm-brand { display: flex; align-items: center; gap: .65rem; min-width: 0; text-decoration: none; } .ltm-brand img { height: 38px; width: auto; flex: 0 0 auto; filter: drop-shadow(0 0 12px rgba(32, 144, 208, .65)); } .ltm-brand-txt { min-width: 0; line-height: 1; } .ltm-brand-txt b { display: block; font-size: 16px; font-weight: 900; letter-spacing: .04em; color: #fff; white-space: nowrap; } .ltm-brand-txt i { display: block; margin-top: 3px; font-style: normal; font-size: 7.5px; font-weight: 700; letter-spacing: .3em; color: var(--ltm-blue-bright); } .ltm-close { flex: 0 0 auto; height: 38px; width: 38px; display: flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); color: #94a3b8; cursor: pointer; transition: background .2s, border-color .2s, color .2s; -webkit-tap-highlight-color: transparent; } .ltm-close:active { background: rgba(239, 68, 68, .14); border-color: rgba(239, 68, 68, .4); color: #f87171; } /* ---------- nav ---------- */ .ltm-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 1.1rem 1.15rem .5rem; } .ltm-label { display: block; margin: 0 .2rem .7rem; font-size: .62rem; font-weight: 800; letter-spacing: .2em; color: #475569; text-transform: uppercase; } .ltm-link { display: flex; align-items: center; gap: .8rem; width: 100%; min-height: 54px; margin-bottom: .5rem; padding: 0 1rem; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .025); font-size: 15px; font-weight: 700; color: #cbd5e1; text-decoration: none; box-sizing: border-box; transition: background .2s, border-color .2s, color .2s, transform .2s; -webkit-tap-highlight-color: transparent; } .ltm-link svg { flex: 0 0 auto; width: 18px; height: 18px; color: #64748b; transition: color .2s; } .ltm-link span { flex: 1 1 auto; min-width: 0; } .ltm-link:active { background: rgba(32, 144, 208, .14); border-color: rgba(32, 144, 208, .45); color: #fff; transform: translateX(-3px); } .ltm-link.is-active { background: rgba(32, 144, 208, .16); border-color: var(--ltm-blue); color: #fff; } .ltm-link.is-active svg { color: var(--ltm-blue-bright); } /* the little active bar on the leading (right) edge */ .ltm-link.is-active::before { content: ''; width: 3px; height: 20px; margin-inline-end: -.35rem; border-radius: 2px; background: var(--ltm-blue); box-shadow: 0 0 12px rgba(32, 144, 208, .8); } /* ---------- foot ---------- */ .ltm-foot { flex: 0 0 auto; padding: .9rem 1.15rem; padding-bottom: calc(var(--ltm-safe-bottom) + .9rem); border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(0, 0, 0, .25); } .ltm-store { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 50px; border-radius: 6px; border: 1px solid transparent; background: linear-gradient(135deg, var(--ltm-blue), #1070B0); box-shadow: 0 6px 22px rgba(32, 144, 208, .35); font-size: 15px; font-weight: 900; color: #fff; text-decoration: none; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } .ltm-store:active { background: linear-gradient(135deg, var(--ltm-blue-light), var(--ltm-blue)); } .ltm-store svg { width: 17px; height: 17px; } .ltm-foot-row { display: flex; gap: .55rem; margin-top: .55rem; } .ltm-mini { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 46px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .03); font-size: 13px; font-weight: 800; color: #94a3b8; text-decoration: none; cursor: pointer; box-sizing: border-box; font-family: inherit; -webkit-tap-highlight-color: transparent; transition: background .2s, border-color .2s, color .2s; } .ltm-mini:active { background: rgba(32, 144, 208, .14); border-color: rgba(32, 144, 208, .45); color: #fff; } .ltm-mini svg { width: 16px; height: 16px; } /* ------------------------------------------------------------------ 4. DESKTOP — the drawer never participates ------------------------------------------------------------------ */ @media (min-width: 1024px) { .ltm-drawer, .ltm-overlay { display: none !important; } } /* short screens: trim the chrome so the links still fit */ @media (max-height: 680px) { .ltm-head { padding-top: calc(var(--ltm-safe-top) + .8rem); padding-bottom: .8rem; } .ltm-link { min-height: 48px; margin-bottom: .4rem; } .ltm-store { min-height: 46px; } .ltm-mini { min-height: 42px; } } @media (prefers-reduced-motion: reduce) { .ltm-drawer, .ltm-overlay { transition-duration: .01ms !important; } } /* ============================================================ LEGEND TOWN GLOBAL HEADER FIX Prevent fixed/sticky navigation from covering page content. ============================================================ */ :root { --lt-header-height: 84px; --lt-header-gap: 24px; } html { scroll-padding-top: calc(var(--lt-header-height) + var(--lt-header-gap)); } body { padding-top: 0 !important; } /* Common fixed/sticky header selectors used by the site */ header, .site-header, .main-header, .navbar, nav.site-nav, .topbar, .top-nav { z-index: 1000; } /* Main page containers must begin below the fixed header */ main, main.page, .page-content, .page-container, .content, .site-content, .page-section, section:first-of-type { scroll-margin-top: calc(var(--lt-header-height) + var(--lt-header-gap)); } /* Explicit hero/page-title spacing. This intentionally uses margin/padding rather than transforms so headings cannot slide underneath the header. */ .hero, .page-hero, .page-title, .leaderboard-page, .leaderboard, .faq-page, .team-page, .streams-page, .apply-page, .applications-page { position: relative; z-index: 1; } .page-hero, .page-title, .leaderboard-page > .page-title, .leaderboard > .page-title { padding-top: calc(var(--lt-header-height) + var(--lt-header-gap)) !important; } @media (max-width: 900px) { :root { --lt-header-height: 72px; --lt-header-gap: 18px; } .page-hero, .page-title, .leaderboard-page > .page-title, .leaderboard > .page-title { padding-top: calc(var(--lt-header-height) + var(--lt-header-gap)) !important; } } @media (max-width: 640px) { :root { --lt-header-height: 64px; --lt-header-gap: 14px; } } /* Primary action: visually separate from the navigation list. */ .ltm-apply-cta{display:flex;align-items:center;justify-content:center;width:100%;margin-top:14px;padding:13px 16px;border:1px solid rgba(34,211,238,.42);border-radius:12px;background:linear-gradient(135deg,rgba(34,211,238,.16),rgba(59,130,246,.12));color:#e8fbff;text-decoration:none;font-weight:900;box-shadow:0 8px 30px rgba(34,211,238,.08)} .ltm-apply-cta:active{transform:scale(.98)}