/* * mobile.css — Canal Network Mobile Responsive Patch * Drop this file in your project root and add to every HTML page: * * (after style.css) * * Handles: navbar, hero, stats bar, game grid, modals, * search, nav pills, shortcuts btn, and touch targets. */ /* ═══════════════════════════════════════════════ DEVICE DETECTION — applied via mobile-detect.js Classes added to : .cn-mobile .cn-tablet .cn-desktop .cn-touch ═══════════════════════════════════════════════ */ /* ── 1. NAVBAR ───────────────────────────────── */ /* Hide center clock/battery widget on small phones so logo & hamburger have room */ @media (max-width: 480px) { .nav-center-widget { display: none !important; } } /* On mid-size phones keep the clock but drop the battery */ @media (min-width: 481px) and (max-width: 640px) { .nav-battery, .nav-battery-sep { display: none !important; } .nav-clock { font-size: 0.82rem; } } /* Tighten nav inner padding on mobile */ @media (max-width: 640px) { .nav-inner { padding: 0 0.85rem; } .logo-name { font-size: 1.15rem; } .logo-sub { display: none; } } /* ── 2. HERO SECTION ─────────────────────────── */ @media (max-width: 768px) { .hero { min-height: auto; padding: 2.5rem 1rem 4rem; } .hero-content { grid-template-columns: 1fr; gap: 2rem; } .hero-right { display: none; /* hide decorative graphic on mobile */ } .hero-title-top, .hero-title-bot { font-size: clamp(3.2rem, 14vw, 5.5rem); } .hero-desc { font-size: 0.95rem; max-width: 100%; } .hero-eyebrow { font-size: 0.65rem; letter-spacing: 3px; } .hero-ctas { flex-direction: column; gap: 0.75rem; } .cta-primary, .cta-secondary { justify-content: center; width: 100%; padding: 0.85rem 1.5rem; font-size: 0.95rem; } } /* Stats row on mobile — horizontal scroll instead of cramped wrap */ @media (max-width: 480px) { .hero-stats-row { gap: 0.85rem; padding: 0.9rem 1rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .hero-stats-row::-webkit-scrollbar { display: none; } .hstat-num { font-size: 1.3rem; } .hstat-label { font-size: 0.58rem; } } /* ── 3. NAV PILLS ────────────────────────────── */ @media (max-width: 640px) { .nav-pills-section { padding: 0 0.85rem 2rem; } .nav-pills-row { grid-template-columns: 1fr 1fr; gap: 0.65rem; } .nav-pill { padding: 0.85rem 1rem; gap: 0.65rem; } .pill-count { font-size: 0.85rem; } .pill-sub { display: none; /* too cramped on tiny screens */ } } /* ── 4. GAMES GRID ───────────────────────────── */ /* Force 2-col on tablet, 1-col on phones */ @media (max-width: 540px) { .games-grid.four-col, .four-col { grid-template-columns: repeat(2, 1fr) !important; gap: 0.85rem; } } @media (max-width: 360px) { .games-grid.four-col, .four-col { grid-template-columns: 1fr !important; } } /* On touch, show overlay/play button permanently (no hover) */ .cn-touch .card-overlay { opacity: 1 !important; background: rgba(0,0,0,0.45) !important; } .cn-touch .play-pill { transform: translateY(0) !important; } .cn-touch .gcv2-overlay { background: rgba(0,0,0,0.45) !important; } .cn-touch .gcv2-play { opacity: 1 !important; transform: scale(1) !important; } /* Card thumbnails — slightly shorter on small screens */ @media (max-width: 480px) { .card-thumb { height: 140px; } .gcv2-thumb { height: 140px; } .card-name { font-size: 0.88rem; } } /* ── 5. PAGE HERO (library/movies etc) ───────── */ @media (max-width: 640px) { .page-hero { padding: 2rem 1rem 1.5rem; } .page-hero-title { font-size: clamp(2.2rem, 9vw, 3.5rem); } .page-hero-sub { font-size: 0.88rem; } .search-wrap { max-width: 100%; } .search-input { font-size: 1rem; /* prevents iOS zoom on focus */ } } /* Search + filter row stacks on mobile */ @media (max-width: 500px) { .search-filter-row { flex-direction: column; align-items: stretch; } .category-select-wrap { width: 100%; } .category-select { width: 100%; font-size: 1rem; /* prevents iOS zoom */ } } /* ── 6. GAME MODAL ───────────────────────────── */ @media (max-width: 768px) { .game-modal { padding: 0; align-items: flex-end; /* slide up from bottom */ } .modal-wrapper { height: 95vh; border-radius: var(--radius) var(--radius) 0 0; border-bottom: none; } .modal-header { padding: 0.75rem 1rem; } .modal-title { font-size: 1.1rem; } .modal-close { width: 36px; height: 36px; font-size: 1.1rem; } /* Show fullscreen button on mobile (can't hover) */ .fullscreen-btn { display: flex !important; bottom: 0.75rem; right: 0.75rem; width: 42px; height: 42px; } } /* ── 7. STATS BAR ────────────────────────────── */ /* Move stats bar up on mobile so it doesn't overlap game grid controls */ @media (max-width: 768px) { .stats-bar { bottom: auto !important; top: calc(var(--nav-h, 64px) + 8px) !important; left: auto !important; right: 0.75rem !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: flex-end; gap: 4px !important; } .stat-item { padding: 3px 9px !important; font-size: 0.68rem !important; } } /* Hide stats bar entirely on very small screens — too cluttered */ @media (max-width: 380px) { .stats-bar { display: none !important; } } /* ── 8. KEYBOARD SHORTCUT HINT ───────────────── */ /* Hide the keyboard shortcuts button on touch devices — not useful */ .cn-touch #cn-kb-hint { display: none !important; } /* ── 9. SECRET / SETTINGS BUTTON ────────────── */ @media (max-width: 640px) { #cn-secret-btn { bottom: 1rem; right: 1rem; font-size: 0.65rem; padding: 0.4rem 0.75rem; } } /* ── 10. WELCOME OVERLAY ─────────────────────── */ @media (max-width: 540px) { #cn-welcome-card { padding: 1.75rem 1.25rem; border-radius: 18px; } .cn-welcome-heading { font-size: 1.35rem; } .cn-quote { font-size: 0.82rem; } #cn-enter-btn { padding: 0.9rem 2rem; } } /* ── 11. SECTION HEADERS ─────────────────────── */ @media (max-width: 540px) { .section { padding: 2.5rem 1rem; } .section-title { font-size: 1.65rem; } .section-head { margin-bottom: 1.25rem; } } /* ── 12. STRIP CARDS (quick-strip) ───────────── */ @media (max-width: 640px) { .quick-strip { padding: 0 1rem 2.5rem; } .strip-grid { grid-template-columns: 1fr; gap: 0.65rem; } .strip-card { padding: 1rem 1.1rem; } } /* ── 13. RECENTLY PLAYED ─────────────────────── */ @media (max-width: 480px) { .recent-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.55rem; } } /* ── 14. MOVIES PAGE ─────────────────────────── */ @media (max-width: 480px) { .mv-hero { padding: 4rem 1rem 2.5rem; } .mv-hero-title { font-size: clamp(3rem, 12vw, 5rem) !important; } .mv-search-wrap, .mv-genre-bar { padding: 0 0.85rem; } .mv-section { padding: 1.5rem 0.85rem 3rem; } .mv-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important; gap: 0.65rem; } /* Banners stack nicely */ .mv-banners { padding: 0 0.85rem; } } /* ── 15. LOADING CHIP & PAGE LOADER ──────────── */ @media (max-width: 480px) { #cn-loading-chip { font-size: 0.72rem; padding: 0.45rem 0.9rem; } } /* ── 16. TOUCH-FRIENDLY TAP TARGETS ─────────── */ /* Minimum 44px tap targets for all interactive elements on touch */ .cn-touch .drop-item { padding: 1.05rem 1.25rem; } .cn-touch .hamburger { padding: 12px 14px; } .cn-touch .nav-pill { min-height: 56px; } .cn-touch .game-card, .cn-touch .game-card-v2 { /* disable lift animation — feels wrong on touch */ transition: border-color 0.2s, box-shadow 0.2s !important; } .cn-touch .game-card:hover, .cn-touch .game-card-v2:hover { transform: none !important; } /* ── 17. DROPDOWN — keep inside viewport on mobile ── */ @media (max-width: 480px) { .dropdown-menu { right: 0.5rem !important; min-width: calc(100vw - 1rem) !important; max-width: calc(100vw - 1rem) !important; border-radius: 12px; } } /* ── 18. MOBILE BOTTOM SAFE AREA (notched phones) ── */ @supports (padding-bottom: env(safe-area-inset-bottom)) { @media (max-width: 768px) { body { padding-bottom: env(safe-area-inset-bottom); } .game-modal .modal-wrapper { padding-bottom: env(safe-area-inset-bottom); } } }