/** * mobile.css — Traceless * Drop this on every page AFTER the existing styles. * Handles all mobile layout fixes: nav hamburger, hero, cards, music player, etc. * * Usage: in */ /* ═══════════════════════════════════════════════════ PREVENT HORIZONTAL SCROLL — always, on all devices ═══════════════════════════════════════════════════ */ html, body { overflow-x: hidden !important; max-width: 100vw !important; } /* Catch any element that bleeds out */ * { max-width: 100% !important; box-sizing: border-box !important; } /* ═══════════════════════════════════════════════════ HAMBURGER MENU BUTTON (hidden on desktop) ═══════════════════════════════════════════════════ */ .mob-menu-btn { display: none; flex-direction: column; justify-content: center; align-items: center; width: 40px; height: 40px; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; border-radius: 8px; transition: background 0.2s; z-index: 1001; } .mob-menu-btn:hover { background: rgba(255,255,255,0.06); } .mob-menu-btn span { display: block; width: 22px; height: 1.5px; background: #fff; border-radius: 2px; transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), opacity 0.2s, width 0.3s; transform-origin: center; } .mob-menu-btn.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .mob-menu-btn.open span:nth-child(2) { opacity: 0; width: 0; } .mob-menu-btn.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ═══════════════════════════════════════════════════ MOBILE NAV DRAWER ═══════════════════════════════════════════════════ */ .mob-nav-drawer { display: none; position: fixed; inset: 0; z-index: 999; pointer-events: none; } .mob-nav-drawer.open { pointer-events: all; } .mob-nav-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.3s; } .mob-nav-drawer.open .mob-nav-backdrop { opacity: 1; } .mob-nav-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 85vw); background: #0f0f0f; border-left: 1px solid rgba(255,255,255,0.07); transform: translateX(100%); transition: transform 0.38s cubic-bezier(0.22,1,0.36,1); display: flex; flex-direction: column; padding: 5rem 2rem 3rem; gap: 0.2rem; } .mob-nav-drawer.open .mob-nav-panel { transform: translateX(0); } .mob-nav-panel a { display: block; padding: 0.85rem 0.6rem; color: #666; text-decoration: none; font-size: 1.05rem; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.04); transition: color 0.2s, padding-left 0.2s; letter-spacing: -0.2px; } .mob-nav-panel a:hover, .mob-nav-panel a.active { color: #fff; padding-left: 1rem; } .mob-nav-panel .mob-nav-signin { margin-top: 1.5rem; padding: 0.85rem 1.5rem; background: #fff; color: #0d0d0d; border-radius: 10px; text-align: center; font-weight: 700; font-size: 0.95rem; border-bottom: none; } .mob-nav-panel .mob-nav-signin:hover { background: rgba(255,255,255,0.85); color: #0d0d0d; padding-left: 1.5rem; } /* ═══════════════════════════════════════════════════ MOBILE BREAKPOINT — everything below 768px ═══════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Show hamburger, hide full nav */ .mob-menu-btn { display: flex; } .mob-nav-drawer { display: block; } .nav-links { display: none !important; } /* Keep nav-right but hide sign-in text on very small screens if widget is present */ .nav-right .sign-in { font-size: 0.8rem; } /* Nav padding */ .nav-container { padding: 1rem 1.2rem !important; } /* ── Hero / main content ── */ .hero { padding: 6.5rem 1.4rem 3rem !important; min-height: auto !important; } .hero-title { font-size: clamp(2.6rem, 11vw, 4rem) !important; letter-spacing: -2px !important; line-height: 1.05 !important; } .hero-subtitle { font-size: 1rem !important; margin-bottom: 2rem !important; } .hero-tag { font-size: 0.78rem !important; margin-bottom: 1.5rem !important; } .hero-buttons { flex-direction: column !important; align-items: stretch !important; gap: 0.75rem !important; } .btn-primary, .btn-secondary { text-align: center !important; padding: 1rem 1.5rem !important; } /* ── iPhone mockup — shrink on mobile ── */ .dashboard-preview { padding: 2rem 0 0 !important; } .iphone { width: 220px !important; height: 448px !important; border-radius: 42px !important; } .iphone-island { width: 80px !important; height: 22px !important; top: 9px !important; } .iphone-screen { border-radius: 40px !important; } .iphone::before { border-radius: 42px !important; } @keyframes phoneFloat { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-10px) rotate(-2deg)} } /* ── Page header (about, resellers, etc.) ── */ .page-header { margin-bottom: 3rem !important; } .page-title { font-size: clamp(2.2rem, 10vw, 3.2rem) !important; letter-spacing: -1.5px !important; line-height: 1.05 !important; } .page-subtitle { font-size: 0.95rem !important; } /* ── Main content padding ── */ .main-content { padding: 6rem 1.4rem 3rem !important; } /* ── Partner tiers (resellers) ── */ .partner-tiers { grid-template-columns: 1fr !important; gap: 1rem !important; } .tier-card { padding: 1.8rem !important; } .tier-title { font-size: 1.5rem !important; } /* ── Resellers grid ── */ .resellers-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; } /* ── CTA section ── */ .cta-section { padding: 2.5rem 1.4rem !important; } .cta-section h2 { font-size: 1.7rem !important; } /* ── About section ── */ .about-section { margin-bottom: 4rem !important; } .about-text h2 { font-size: 1.7rem !important; } .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1.5rem !important; padding: 2.5rem 0 !important; } .stat-number { font-size: 2.2rem !important; } .values-grid { grid-template-columns: 1fr !important; gap: 1rem !important; } .value-card { padding: 1.6rem !important; } /* ── Products page ── */ .prow { grid-template-columns: 1fr !important; gap: 2rem !important; padding: 3rem 0 !important; } .prow.alt .pvis { order: 0 !important; } .pvis { height: 240px !important; border-radius: 16px !important; } .l-title { font-size: clamp(2.2rem, 9vw, 3.5rem) !important; letter-spacing: -2px !important; } #listingView { padding: 6rem 1.4rem 3rem !important; } /* ── Reviews section ── */ .reviews-section { padding: 3.5rem 1.2rem 2rem !important; } .reviews-heading { font-size: 2rem !important; letter-spacing: -1px !important; } .reviews-stats { gap: 1.2rem !important; flex-wrap: wrap !important; justify-content: space-around !important; } .rstat-num { font-size: 1.4rem !important; } .rcard { width: 260px !important; } /* ── FAQ ── */ .faq-section { padding: 3rem 1.4rem 4rem !important; } .faq-heading { font-size: 1.9rem !important; letter-spacing: -0.8px !important; } .faq-q { padding: 1rem 1.2rem !important; } .faq-a-inner { padding: 0 1.2rem 1.2rem !important; } /* ── Music player button ── */ /* Move to bottom-left on mobile so it doesn't overlap content */ .music-control, .music-player { bottom: 18px !important; right: 18px !important; } /* Home page music player popup — shift left on mobile */ .player-popup { right: -60px !important; width: calc(100vw - 2.8rem) !important; max-width: 320px !important; } /* ── Section titles ── */ .section-title { font-size: 1.7rem !important; } /* ── docs page ── */ .docs-layout, .docs-container { grid-template-columns: 1fr !important; } .docs-sidebar { position: static !important; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.07) !important; padding: 1.5rem !important; margin-bottom: 2rem !important; max-height: 300px !important; overflow-y: auto !important; } /* ── contact page ── */ .contact-grid, .contact-layout { grid-template-columns: 1fr !important; gap: 2rem !important; } /* ── login page card ── */ .card { padding: 2rem 1.4rem !important; } .card-title { font-size: 1.6rem !important; } /* ── profile page ── */ .profile-layout, .profile-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; } /* ── dashboard / admin panel ── */ .dashboard-layout, .admin-layout { grid-template-columns: 1fr !important; } .dash-sidebar, .admin-sidebar { position: static !important; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.07) !important; } /* ── client panel ── */ .panel-grid, .client-grid { grid-template-columns: 1fr !important; gap: 1rem !important; } /* ── Generic grid fixes ── */ [style*="grid-template-columns: repeat(2"] { grid-template-columns: 1fr !important; } /* ── Enter overlay ── */ .eo-btn { padding: 0.8rem 1.6rem !important; font-size: 0.9rem !important; } /* ── nav-auth widget on mobile ── */ .tl-widget .tl-name { display: none; } .tl-drop { right: -0.5rem !important; width: 190px !important; } .tl-profile-card { width: calc(100vw - 2rem) !important; max-width: 320px !important; left: 50% !important; transform: translateX(-50%) scale(0.94) translateY(8px) !important; } .tl-profile-card.visible { transform: translateX(-50%) scale(1) translateY(0) !important; } /* ── Scroll reveal — disable transform on mobile for cleaner feel ── */ .sr { transform: translateY(20px) !important; } /* ── Misc typography ── */ h2[style*="font-size:2.2rem"] { font-size: 1.7rem !important; } } /* ═══════════════════════════════════════════════════ EXTRA SMALL — below 420px ═══════════════════════════════════════════════════ */ @media (max-width: 420px) { .hero-title { font-size: clamp(2rem, 12vw, 2.8rem) !important; } .page-title { font-size: clamp(1.9rem, 11vw, 2.6rem) !important; } .resellers-grid { grid-template-columns: 1fr !important; } .stats-grid { grid-template-columns: 1fr 1fr !important; } .hero-buttons .btn-primary, .hero-buttons .btn-secondary { width: 100% !important; } .iphone { width: 190px !important; height: 385px !important; } .rcard { width: 230px !important; } .reviews-stats { flex-direction: column !important; align-items: center !important; gap: 1rem !important; } } /* ═══════════════════════════════════════════════════ OVERFLOW FIXES — specific elements that bleed out ═══════════════════════════════════════════════════ */ /* Canvas fills viewport via position:fixed — exempt from max-width clamp */ #bgCanvas { max-width: none !important; } /* Fixed UI elements don't affect layout width */ .music-control, .music-player, .cursor, .cursor-ring, .tl-profile-card, .rv-popup, .mob-nav-drawer { max-width: none !important; } /* Reviews marquee — must not expand the page */ .reviews-track-wrap { overflow: hidden !important; width: 100% !important; } .reviews-track { max-width: none !important; /* track is intentionally wider, clipped by parent */ } /* Player popup on home page — keep within viewport */ @media (max-width: 768px) { .player-popup { right: 0 !important; left: auto !important; width: calc(100vw - 2rem) !important; max-width: 340px !important; } /* Hero buttons shouldn't stretch past screen */ .hero-buttons { width: 100% !important; padding: 0 !important; } /* Nav container must not overflow */ .nav-container { width: 100% !important; overflow: hidden !important; } /* Iphone mockup scene — clip it */ .iphone-scene, .iphone-wrap, .dashboard-preview { overflow: visible !important; max-width: 100% !important; } .iphone-glow-1, .iphone-glow-2, .iphone-glow-3 { max-width: none !important; } } /* ═══════════════════════════════════════════════════ CLIENT PANEL — MOBILE HAMBURGER LAYOUT Sidebar becomes a slide-in drawer opened by a hamburger (≡) button in a fixed top bar. All content stacks vertically and scrolls freely. ═══════════════════════════════════════════════════ */ /* ── Mobile top bar (hamburger row) ── */ #mob-panel-topbar { display: none; } @media (max-width: 768px) { /* ── Kill desktop chrome ── */ body { overflow-y: auto !important; overflow-x: hidden !important; height: auto !important; cursor: auto !important; } .cursor, .cursor-ring { display: none !important; } /* ── App: full-page column, top-padded for top bar ── */ #app { flex-direction: column !important; height: auto !important; min-height: 100vh !important; padding-top: 52px !important; padding-bottom: 0 !important; overflow: visible !important; } /* ── Hide the desktop sidebar ── */ .sidebar { display: none !important; } /* ── Mobile top bar ── */ #mob-panel-topbar { display: flex !important; position: fixed !important; top: 0; left: 0; right: 0; height: 52px; z-index: 600; background: rgba(8,8,8,0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,0.07); align-items: center; justify-content: space-between; padding: 0 1rem; gap: 0.75rem; } #mob-panel-topbar .mob-tl-logo { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; font-weight: 700; color: #fff; letter-spacing: 0.01em; } #mob-panel-topbar .mob-tl-logo img { width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 0 4px rgba(255,255,255,0.25)); } #mob-panel-topbar .mob-tab-label { flex: 1; font-size: 0.78rem; color: rgba(255,255,255,0.45); letter-spacing: 0.12em; text-transform: uppercase; text-align: center; } /* Hamburger button */ #mob-burger-btn { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; cursor: pointer; flex-shrink: 0; transition: background 0.2s; } #mob-burger-btn:hover { background: rgba(255,255,255,0.1); } #mob-burger-btn span { display: block; width: 18px; height: 1.5px; background: #fff; border-radius: 2px; transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), opacity 0.2s; transform-origin: center; } #mob-burger-btn.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } #mob-burger-btn.open span:nth-child(2) { opacity: 0; } #mob-burger-btn.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ── Slide-in drawer ── */ #mob-panel-drawer { display: block; position: fixed; inset: 0; z-index: 590; pointer-events: none; } #mob-panel-drawer.open { pointer-events: all; } #mob-drawer-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.72); backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.3s; } #mob-panel-drawer.open #mob-drawer-backdrop { opacity: 1; } #mob-drawer-panel { position: absolute; top: 0; left: 0; bottom: 0; width: min(260px, 80vw); background: #0a0a0a; border-right: 1px solid rgba(255,255,255,0.07); transform: translateX(-100%); transition: transform 0.36s cubic-bezier(0.22,1,0.36,1); display: flex; flex-direction: column; overflow: hidden; } #mob-panel-drawer.open #mob-drawer-panel { transform: translateX(0); } /* Drawer header */ #mob-drawer-panel .mob-drawer-head { display: flex; align-items: center; gap: 0.6rem; padding: 1rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; } #mob-drawer-panel .mob-drawer-head img { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 0 5px rgba(255,255,255,0.2)); } #mob-drawer-panel .mob-drawer-head span { font-size: 1rem; font-weight: 700; color: #fff; } /* Drawer nav links */ #mob-drawer-panel .mob-drawer-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 0.7rem 0.6rem; overflow-y: auto; } #mob-drawer-panel .mob-drawer-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; border-radius: 8px; cursor: pointer; font-size: 0.9rem; font-weight: 500; color: rgba(255,255,255,0.45); letter-spacing: 0.03em; border: 1px solid transparent; transition: all 0.18s; user-select: none; } #mob-drawer-panel .mob-drawer-item:hover { background: rgba(255,255,255,0.05); color: #fff; } #mob-drawer-panel .mob-drawer-item.active { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12); color: #fff; } #mob-drawer-panel .mob-drawer-item svg { flex-shrink: 0; opacity: 0.7; } #mob-drawer-panel .mob-drawer-item.active svg { opacity: 1; } /* Drawer bottom actions */ #mob-drawer-panel .mob-drawer-foot { padding: 0.75rem 0.9rem 1.2rem; border-top: 1px solid rgba(255,255,255,0.06); display: flex; flex-direction: column; gap: 0.4rem; flex-shrink: 0; } .mob-destruct-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.8rem; background: linear-gradient(135deg, #e03030, #b02020); border: none; border-radius: 8px; color: #fff; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; font-family: inherit; box-shadow: 0 4px 16px rgba(200,40,40,0.3); transition: all 0.2s; width: 100%; } .mob-destruct-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(200,40,40,0.45); } .mob-back-link { display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.6rem; color: rgba(255,255,255,0.3); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; transition: color 0.2s; border-radius: 7px; } .mob-back-link:hover { color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.04); } /* ── Content area: full width, scrollable ── */ .content { width: 100% !important; flex: 1 !important; overflow: visible !important; min-width: 0 !important; display: block !important; } /* ── Tab contents: block layout, visible overflow ── */ .tab-content { display: none !important; overflow: visible !important; height: auto !important; } .tab-content.active { display: block !important; } /* Any flex wrapper inside tab-content that clips overflow */ .tab-content > div { overflow: visible !important; height: auto !important; display: block !important; } .subtab-panel { display: none !important; overflow: visible !important; height: auto !important; } .subtab-panel.active { display: block !important; } .content-body { overflow: visible !important; height: auto !important; flex: none !important; display: block !important; } /* ── Breadcrumb ── */ .breadcrumb { padding: 0.75rem 1.1rem !important; font-size: 0.7rem !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; } /* ── Subtab bar: scrollable horizontally ── */ .subtab-bar { overflow-x: auto !important; overflow-y: hidden !important; padding: 0 1rem !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; flex-wrap: nowrap !important; white-space: nowrap !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; display: flex !important; } .subtab-bar::-webkit-scrollbar { display: none !important; } .subtab { padding: 0.65rem 1rem !important; font-size: 0.74rem !important; flex-shrink: 0 !important; display: inline-flex !important; align-items: center !important; } /* ── Panel grid: single column ── */ .panel-grid { display: flex !important; flex-direction: column !important; height: auto !important; overflow: visible !important; } .panel-col { overflow: visible !important; height: auto !important; padding: 0.9rem 1rem !important; border-left: none !important; border-top: 1px solid rgba(255,255,255,0.04) !important; } .panel-col:first-child { border-top: none !important; } /* ── ESP: single column ── */ .esp-wide, .esp-wide.preview-open { display: flex !important; flex-direction: column !important; height: auto !important; overflow: visible !important; grid-template-columns: none !important; } .esp-col { overflow: visible !important; height: auto !important; min-height: 0 !important; border-left: none !important; border-top: 1px solid rgba(255,255,255,0.04) !important; padding: 0.9rem 1rem !important; display: flex !important; flex-direction: column !important; gap: 1rem !important; } .esp-col:first-child { border-top: none !important; } #espPreviewCol { display: none !important; } /* too small on phone */ /* ── Section ── */ .section { overflow: visible !important; } .section-header { font-size: 0.73rem !important; padding: 0.72rem 1rem !important; } /* ── Rows ── */ .row { min-height: 50px !important; padding: 0.7rem 1rem !important; flex-wrap: nowrap !important; gap: 0.5rem !important; } .row-label { font-size: 0.9rem !important; flex: 1 !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; color: rgba(255,255,255,0.7) !important; } /* ── Toggle ── */ .toggle { width: 46px !important; height: 26px !important; flex-shrink: 0 !important; } .toggle-track { border-radius: 13px !important; } .toggle-thumb { width: 20px !important; height: 20px !important; top: 3px !important; left: 3px !important; } .toggle input:checked ~ .toggle-thumb { transform: translateX(20px) !important; } /* ── Sliders ── */ .slider-wrap { flex: 0 0 auto !important; width: 140px !important; min-width: 0 !important; max-width: 140px !important; } .slider-val { min-width: 28px !important; font-size: 0.78rem !important; } /* ── Keybind + action btns ── */ .keybind-btn, .action-btn { padding: 0.45rem 0.9rem !important; font-size: 0.82rem !important; min-height: 38px !important; } /* ── Color btns ── */ .color-btn { width: 34px !important; height: 22px !important; flex-shrink: 0 !important; } /* ── Dropdowns ── */ .dropdown-menu { right: 0 !important; left: auto !important; max-width: calc(100vw - 2rem) !important; } .wide-dropdown-btn { min-width: 0 !important; font-size: 0.8rem !important; } /* ── Style grid ── */ .style-grid { grid-template-columns: 1fr 1fr !important; } /* ── Crosshair grid ── */ .crosshair-grid { grid-template-columns: 1fr 1fr !important; gap: 0.55rem !important; padding: 0.8rem !important; } /* ── List tab ── */ .list-detail-cols { grid-template-columns: 1fr !important; min-height: auto !important; } .ldc { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; } .ldc:last-child { border-bottom: none !important; } /* ── Feature rows ── */ .feature-row { flex-direction: column !important; align-items: flex-start !important; gap: 0.6rem !important; min-height: auto !important; padding: 0.9rem 1rem !important; } /* ── Radar ── */ .radar-hud-top { padding: 0.6rem 1rem !important; height: auto !important; min-height: 54px !important; flex-wrap: wrap !important; gap: 0.4rem !important; } .radar-canvas-wrap { margin-top: 70px !important; } /* ── Menu overlay ── */ #menuOverlay > div { width: 90% !important; padding: 2rem 1.5rem !important; } /* ── Inject gate ── */ .ig-inject-btn { padding: 0.9rem 2rem !important; font-size: 0.95rem !important; } /* ── Misc ── */ .ldc-info-row { font-size: 0.84rem !important; padding: 0.45rem 1rem !important; } } /* ── Very small phones ── */ @media (max-width: 390px) { .subtab { padding: 0.6rem 0.8rem !important; font-size: 0.7rem !important; } .row-label { font-size: 0.84rem !important; } .slider-wrap { width: 120px !important; max-width: 120px !important; } }