/* ============================================================================= Gamers Escape — mobile rules for the MARKETING SITE only (index + menu). ----------------------------------------------------------------------------- Split out of mobile.css. These selectors (.wrap, .card, .cal-*, .gem*, .gb-*, .tier*, .hero*, .nav, .menu-*, .mitem/.mthumb/.mn/.md/.mp, .gm-*, .jukebox, .backbar, .grad-text) only exist on index.html and menu.html — but mobile.css is loaded by ten pages, so three of them were silently inheriting rules written for something else. /imposter's card padding was being controlled by a rule meant for the homepage pricing cards, and /admin/insights and /admin/stock were picking up .wrap and .card the same way. Loaded BEFORE mobile.css, which stays last in . ============================================================================= */ /* ========================================================= TABLET / SMALL LAPTOP (<= 900px) ========================================================= */ @media (max-width: 900px) { .wrap { padding-left: 18px; padding-right: 18px; } .cards, .cal-wrap, .gem-grid, .menu-grid { grid-template-columns: 1fr; } .about-imgs { grid-template-columns: 1fr 1fr; } /* min-width:0 is what actually stops the horizontal overflow that an overflow-x guard used to paper over — grid/flex children default to min-width:auto and refuse to shrink below their content. */ .cards > *, .cal-wrap > *, .gem-grid > *, .menu-grid > *, .hero-cta > *, .stats > *, .gb-row > *, .mitem > * { min-width: 0; } } /* ========================================================= PHONES (<= 640px) ========================================================= */ @media (max-width: 640px) { .wrap { padding-left: 14px; padding-right: 14px; } .gem, .card, .cal, .gemboard, .jukebox, .controls-inner { padding: 18px; } /* -webkit-background-clip:text fails on iOS Safari (notably on inline elements with an animated background-position, and in Low Power Mode). When it fails the text goes transparent and you see a bare gradient rectangle instead of the words — e.g. "Fan favourites" and even the hero "ESCAPE". Flattening to a solid colour keeps the words always visible, and removes a constant repaint that costs battery. */ .grad-text { background: none !important; background-image: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: #FF5BB4 !important; color: #FF5BB4 !important; animation: none !important; } .eyebrow { font-size: 11px; letter-spacing: .18em; } /* --- Buttons --- */ .btn { min-height: 48px; padding: 13px 18px; font-size: 15px; justify-content: center; } .btn svg { width: 18px; height: 18px; flex: 0 0 18px; } /* --- Header / nav --- */ header .nav { gap: 8px; padding-left: 14px; padding-right: 14px; } .brand { flex: 0 0 auto; } .logo-badge { height: 34px; width: auto; } .nav .btn { min-height: 42px; padding: 9px 12px; font-size: 13px; white-space: nowrap; } .nav .btn svg { width: 15px; height: 15px; flex: 0 0 15px; } .burger, .iconbtn { min-width: 44px; min-height: 44px; } /* --- Hero --- */ .hero { padding-top: 104px; padding-bottom: 52px; } .hero h1 { font-size: clamp(38px, 11vw, 54px); } .hero .sub { font-size: 15px; } .hero .tagline { font-size: 15px; } .hero-cta { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; } .hero-cta .btn { width: 100%; } .stats { flex-wrap: wrap; gap: 14px 20px; } /* --- Cards / pricing --- */ .card { padding: 20px; } .card h3 { font-size: 19px; } .price { font-size: 30px; } .card li { font-size: 14px; } /* --- Calendar --- */ .cal-head h3 { font-size: 17px; } .cal-nav button { min-width: 42px; min-height: 42px; } .cal-grid { grid-template-columns: repeat(7, 1fr); gap: 4px; } .cal-cell { min-height: 42px; width: auto; min-width: 0; font-size: 14px; } .cal-dow { font-size: 10px; } .ev { gap: 12px; padding: 14px; } .ev-body h4 { font-size: 15px; } .ev-body p { font-size: 13.5px; } /* --- GEM leaderboard --- */ .gemboard-head { flex-wrap: wrap; gap: 8px; } .gb-tab { min-height: 40px; padding: 8px 14px; font-size: 13px; } .gb-list { max-height: 360px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .gb-row { padding: 10px 12px; gap: 10px; } .gb-rank { flex: 0 0 28px; font-size: 15px; } .gb-name { font-size: 14.5px; } .gb-sub { font-size: 11.5px; } .gb-elo { font-size: 14.5px; white-space: nowrap; } .tiers { grid-template-columns: 1fr 1fr; gap: 10px; } .tier { padding: 14px 10px; } .tier h4 { font-size: 13px; } .tier p { font-size: 11.5px; } /* --- Menu tabs: swipe instead of wrap --- */ .menu-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 8px; padding-bottom: 4px; margin-bottom: 4px; } .menu-tabs::-webkit-scrollbar { display: none; } .menu-tab { flex: 0 0 auto; min-height: 42px; padding: 10px 16px; font-size: 14px; } /* active tab is white on pink — bump weight so it reads cleanly */ .menu-tab.active { font-weight: 700; } .search input { min-height: 48px; } /* --- Menu items --- */ .menu-grid { gap: 10px; } .mitem { padding: 10px; gap: 10px; align-items: center; } .mthumb, .mitem .mthumb { width: 66px; height: 66px; flex: 0 0 66px; border-radius: 12px; } .mn, .mitem .mn { font-size: 15px; line-height: 1.25; } .md, .mitem .md { font-size: 12.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .mp, .mitem .mp { font-size: 15px; white-space: nowrap; } .menu-subhead { font-size: 17px; } .mhero h1 { font-size: clamp(32px, 10vw, 46px); } /* --- Product popup (menu.html) --- */ .gm-modal { padding: 12px; align-items: flex-end; } .gm-card { width: 100%; max-height: 88vh; overflow-y: auto; border-radius: 20px 20px 14px 14px; } .gm-img { aspect-ratio: 16/11; } /* --- Jukebox --- */ .jukebox { grid-template-columns: 1fr; } .jukebox iframe { height: 352px; width: 100%; } /* --- Backbar --- */ .backbar { padding: 0 14px 28px; } .backbar .btn { width: 100%; } } /* ========================================================= SMALL PHONES (<= 400px) ========================================================= */ @media (max-width: 400px) { .wrap { padding-left: 12px; padding-right: 12px; } .gem, .card, .cal, .gemboard, .jukebox, .controls-inner { padding: 14px; } .cal-grid { gap: 3px; } .cal-cell { min-height: 38px; font-size: 13px; } /* logo-only header ONLY where action buttons compete for space (menu.html); the homepage keeps its wordmark since it only has a burger */ .nav:has(.btn) .brand { font-size: 0; gap: 0; } .nav .btn { padding: 9px 10px; font-size: 12.5px; } .hero h1 { font-size: 36px; } .mthumb, .mitem .mthumb { width: 58px; height: 58px; flex: 0 0 58px; } .md, .mitem .md { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } } /* ---------- Landscape phones: trim vertical padding ---------- */ @media (max-height: 480px) and (orientation: landscape) { .hero { padding-top: 84px; padding-bottom: 40px; min-height: 0; } }