, NOT nested inside the shell - app.js toggles its [hidden] itself (els.hubNav.hidden = !isHub), the same way it already toggles #hubView. Replaces the site's in-game topbar entirely while on the hub (app.js also toggles body.is-hub) - the hub-nav's own brand text + "Home" link already cover what that topbar showed, so both staying visible at once would be a duplicate bar. It used to live inside #hubView/.app-shell and break out to full width via `width: 100vw; margin-left: calc(50% - 50vw)`. That's a well-known trap: 100vw is measured against the viewport INCLUDING the scrollbar gutter, but the page's actual visible width excludes it, so on a real scrollbar (present here - the page is taller than the viewport) the nav ended up a scrollbar's-width too wide and its right edge - and the CTA button pinned to it - rendered clipped past the visible edge. Reported twice with screenshots showing "Play Gauntlet" cut off. Our own test browser uses overlay scrollbars that don't reserve layout space, so vw and the real content width were identical there and the bug never reproduced locally - moving .hub-nav to be a direct body child sidesteps the whole vw/scrollbar mismatch instead of trying to patch around it. */ .is-hub .topbar { display: none; } .hub-nav { position: sticky; top: 0; z-index: 30; width: 100%; background: rgba(9, 21, 16, 0.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .hub-nav-inner { /* No max-width/auto-centering here on purpose: on wide screens that left the brand + nav links floating in a centered column with a lot of dead space on either side instead of sitting at the actual edges of the screen. Full width, brand+links packed to the left (their natural flex position), .hub-nav-actions' own margin-left: auto still pushes the CTA/hamburger to the right edge. */ position: relative; width: 100%; display: flex; align-items: center; gap: 20px; padding: 10px 24px; min-height: 64px; } .hub-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 0 auto; } .hub-brand-badge { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; } .hub-brand-badge svg { width: 100%; height: 100%; } .hub-brand-text { display: flex; flex-direction: column; gap: 1px; line-height: 1; } .hub-brand-text strong { font-family: var(--font-display); font-weight: 900; font-size: 0.92rem; letter-spacing: 0.01em; text-transform: uppercase; color: var(--text); } .hub-brand-text span { font-size: 0.62rem; font-weight: 700; color: var(--muted); letter-spacing: 0.03em; } .hub-nav-links { display: flex; align-items: center; gap: 24px; flex: 1 1 auto; } .hub-nav-links a, .hub-nav-links button { position: relative; padding: 8px 1px; border: none; background: none; cursor: pointer; color: var(--muted); font-family: var(--font-display); font-weight: 800; font-size: 0.82rem; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; white-space: nowrap; } .hub-nav-links a:hover, .hub-nav-links button:hover { color: var(--text); } .hub-nav-links a.is-active { color: var(--text); } .hub-nav-links a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--amber); } .hub-nav-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-left: auto; } .hub-nav-cta { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 18px; border: 1px solid var(--amber); border-radius: 999px; background: linear-gradient(180deg, color-mix(in srgb, var(--amber) 100%, white 18%), var(--amber)); color: #201606; font-family: var(--font-display); font-weight: 900; font-size: 0.8rem; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; } .hub-nav-cta svg { width: 15px; height: 15px; } .hub-nav-menu-toggle { display: none; } .hub-nav-menu-toggle .icon-x { display: none; } .hub-nav-menu-toggle.is-open .icon-menu { display: none; } .hub-nav-menu-toggle.is-open .icon-x { display: block; } .hub-nav-mobile-panel { display: none; flex-direction: column; gap: 4px; padding: 10px 20px 18px; border-top: 1px solid var(--line); background: rgba(9, 21, 16, 0.98); } .hub-nav-mobile-panel a.hub-nav-mobile-link, .hub-nav-mobile-panel button.hub-nav-mobile-link { display: flex; align-items: center; min-height: 44px; padding: 12px 4px; border: none; background: none; cursor: pointer; border-bottom: 1px solid color-mix(in srgb, var(--line) 45%, transparent); color: var(--text); font-family: var(--font-display); font-weight: 800; font-size: 0.98rem; letter-spacing: 0.01em; text-transform: uppercase; text-decoration: none; } .hub-nav-mobile-panel .hub-nav-cta { margin-top: 12px; justify-content: center; width: 100%; } /* Brand + 5 nav links (Home/Gauntlet/Clash Mode/Character of the Day/Guess the Character) + the Play Gauntlet CTA need close to 1200px of actual room in one row - none of it can wrap or shrink below its own nowrap text width. At 900px that overflowed .hub-nav-inner's box with nothing to clip it, so the CTA button ran off the right edge of the screen instead of wrapping. 1300px leaves real headroom before that happens. */ @media (max-width: 1300px) { .hub-nav-links, .hub-nav-actions .hub-nav-cta { display: none; } .hub-nav-menu-toggle { display: inline-flex; } .hub-nav.is-open .hub-nav-mobile-panel { display: flex; } } /* ========================================================================== Shell / hero ========================================================================== */ .landing-shell { position: relative; width: min(1080px, 100%); min-height: 100vh; margin: 0 auto; padding: 0 20px 64px; display: grid; align-content: start; overflow: hidden; } .landing-hero, .mode-grid { position: relative; z-index: 1; } .landing-hero { display: grid; justify-items: center; gap: 10px; text-align: center; padding: clamp(24px, 4.5vh, 44px) 0 6px; } .hub-hero-badge { width: 48px; height: 48px; display: grid; place-items: center; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.32)); } .hub-hero-badge svg { width: 100%; height: 100%; } .landing-hero .eyebrow { margin: 0; } .landing-hero h1 { margin: 0; max-width: 18ch; font-size: clamp(1.9rem, 4.6vw, 3rem); line-height: 1.06; } .landing-hero h1 .accent { color: var(--amber); } .landing-hero p { max-width: 52ch; margin: 0; color: var(--muted); font-size: clamp(0.9rem, 1.4vw, 1rem); font-weight: 600; line-height: 1.5; } .hero-embers { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; mask-image: radial-gradient(ellipse 380px 170px at 50% 150px, transparent 0%, transparent 45%, #000 82%); -webkit-mask-image: radial-gradient(ellipse 380px 170px at 50% 150px, transparent 0%, transparent 45%, #000 82%); } .hero-ember { position: absolute; bottom: -40px; font-family: var(--font-display); font-weight: 900; opacity: 0.22; animation: hero-ember-drift linear infinite; } @keyframes hero-ember-drift { 0% { transform: translateY(0) rotate(0deg); opacity: 0; } 5% { opacity: 0.5; } 90% { opacity: 0.4; } 100% { transform: translateY(-160vh) rotate(6deg); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .hero-ember { animation: none; opacity: 0.16; } } /* ========================================================================== Section heads (Choose Your Mode / Today) ========================================================================== */ .section-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 8px 0 20px; } .section-head.is-centered { justify-content: center; flex-direction: column; text-align: center; margin-top: 8px; } .daily-section .section-head { margin-top: 36px; } .section-eyebrow-line { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 7px; margin: 0; } .section-head.is-centered .section-eyebrow-line { align-items: center; } .section-eyebrow-line span.text { color: var(--muted); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; } .section-eyebrow-underline { width: 34px; height: 3px; border-radius: 3px; background: var(--amber); } .daily-section .section-eyebrow-underline { background: var(--teal); } .reset-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 0.74rem; font-weight: 700; white-space: nowrap; } .reset-chip strong { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 800; } /* ========================================================================== Cards - shared anatomy for mode cards and daily cards: icon, title, short description, full-width CTA pill. ========================================================================== */ .mode-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } .mode-grid .mode-card { width: 340px; flex: 0 0 auto; gap: 10px; padding: 22px 26px; } .mode-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(165deg, color-mix(in srgb, var(--surface-3) 55%, transparent), var(--surface-2) 55%); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28); color: var(--text); text-decoration: none; text-align: left; font: inherit; cursor: pointer; overflow: hidden; transition: transform 140ms ease, box-shadow 140ms ease; } .mode-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.36); } .mode-card-icon { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent, var(--amber)) 16%, transparent); color: var(--accent, var(--amber)); } .mode-card-icon svg { width: 27px; height: 27px; } .mode-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .mode-card h2 { margin: 1px 0 0; font-size: 1.16rem; line-height: 1.15; } .mode-badge { padding: 3px 9px; border: none; border-radius: 999px; color: var(--muted); background: var(--surface-2); font-size: 0.62rem; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; } .mode-badge.is-live, .mode-badge.is-daily { color: #102019; background: var(--teal); } .card-meta { color: var(--muted); font-size: 0.72rem; font-weight: 700; } .mode-card p { margin: 0; flex: 1 0 auto; color: var(--muted); font-size: 0.82rem; line-height: 1.4; } .mode-card .mode-play { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-top: 2px; border-radius: 999px; background: var(--accent, var(--amber)); color: #1a1206; font-family: var(--font-display); font-weight: 900; font-size: 0.8rem; letter-spacing: 0.03em; text-transform: uppercase; } .mode-card .mode-play svg { width: 15px; height: 15px; transition: transform 140ms ease; } .mode-card:hover .mode-play svg { transform: translateX(3px); } /* Gauntlet/Clash Mode cards read as the two primary entry points, so they get a larger treatment than the compact Today cards below - bigger card, bigger heading/body copy, taller CTA. */ .mode-grid .mode-card h2 { font-size: 1.4rem; } .mode-grid .mode-card p { font-size: 0.92rem; } .mode-grid .mode-card .mode-play { min-height: 50px; font-size: 0.86rem; } .mode-grid .mode-card .mode-badge { padding: 4px 11px; font-size: 0.68rem; } /* Today section - stays full-size for now (2 items); shrink to match the mode cards' compact 260px treatment once more daily modes exist and need to share this row. */ .daily-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px; } .daily-grid .mode-card.is-featured { padding: 18px 20px; } @media (max-width: 760px) { .daily-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .mode-grid .mode-card { width: 100%; max-width: 320px; } .landing-shell { padding: 0 16px 48px; } .section-head { flex-direction: column; align-items: flex-start; gap: 10px; } }