/* ============================================================ 51 Media Engine V2 — Mobile Supplement ============================================================ This file used to host ~600 lines of CSS targeting class names (.bottom-app-bar, .sheet-overlay, .left-nav, .right-panel, .v-card …) that NEVER appear in the rendered markup. The actual theme uses the .videoswipe-* prefix; the legacy stylesheet was a no-op. The desktop + drawer responsive system now lives in layout.css. This file remains in the enqueue chain for backwards compatibility and provides only: 1. iOS safe-area inset on the drawer + sticky top-bar 2. overflow lock when the drawer is open 3. Tap-highlight reset on touch devices ============================================================ */ /* iOS safe-area for the sticky mobile top bar (notch / home indicator). */ @supports (padding: env(safe-area-inset-top)) { .videoswipe-mobile-topbar { padding-top: calc(10px + env(safe-area-inset-top)); } } /* Drawer is open → freeze body scroll so the user can't accidentally scroll the feed while reading the side menu. */ body.videoswipe-drawer-open { overflow: hidden; touch-action: none; } /* Touch devices: kill the iOS / Android blue tap-highlight and turn on manipulation hints so tap latency is the platform default ~50ms. */ @media (max-width: 1024px) and (pointer: coarse) { * { -webkit-tap-highlight-color: transparent; } a, button, .videoswipe-grid-card, .videoswipe-nav-menu a, .videoswipe-tab, .videoswipe-sort-btn, .videoswipe-tn-item, .videoswipe-ftab, .videoswipe-tag-chip, .videoswipe-ttag { touch-action: manipulation; } } /* Smaller phones — phone-only refinements layered on top of the layout.css ≤768 / ≤600 breakpoints. */ @media (max-width: 480px) { .videoswipe-grid-feed { padding: 12px 12px 96px; gap: 12px 10px; } .videoswipe-grid-card { border-radius: 12px; } .videoswipe-grid-title { font-size: 11px; margin-bottom: 4px; } .videoswipe-grid-stats { font-size: 10px; } .videoswipe-feed-tabs { gap: 4px; margin: 12px 0 0; } .videoswipe-tab { padding: 6px 12px; font-size: 11px; } .videoswipe-eyebrow { font-size: 9px; letter-spacing: 0.2em; } .videoswipe-cat-title { font-size: clamp(24px, 7vw, 32px); } }