/* ═══════════════════════════════════════════════════════════ SELF MADE — mobile-fix.css این فایل رو به انتهای اضافه کن ═══════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────────── MOBILE — زیر 768px ────────────────────────────────────────────────────────── */ @media (max-width: 768px) { /* ── Float Player کوچکتر و بهتر ───────────────────────── */ .float-player { width: calc(100vw - 24px) !important; left: 12px !important; right: 12px !important; bottom: 12px !important; border-radius: 16px !important; } /* ── Sidebar: مخفی، navbar پایین به جاش ─────────────────── */ .sidebar { display: none !important; } .main-content { padding: 16px 12px 100px !important; margin-left: 0 !important; width: 100% !important; } /* ── Main site full width ──────────────────────────────── */ .main-site { display: block !important; } /* ── Tabs scrollable ───────────────────────────────────── */ .tabs-bar { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; flex-wrap: nowrap !important; width: 100% !important; padding: 0 8px !important; gap: 4px !important; } .tabs-bar::-webkit-scrollbar { display: none !important; } .tab { white-space: nowrap !important; flex-shrink: 0 !important; font-size: 9px !important; padding: 8px 14px !important; } /* ── Hero section ──────────────────────────────────────── */ .hero { flex-direction: column !important; padding: 24px 16px !important; gap: 20px !important; } .hero-h1 { font-size: 40px !important; line-height: 1 !important; } .hero-visual { display: none !important; } .hero-stats { gap: 8px !important; flex-wrap: wrap !important; } /* ── Members grid ──────────────────────────────────────── */ .members-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } /* ── Beats grid ────────────────────────────────────────── */ .beats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } /* ── Beat card ─────────────────────────────────────────── */ .beat-card { padding: 12px !important; } .beat-art { width: 48px !important; height: 48px !important; font-size: 22px !important; } .beat-name { font-size: 12px !important; } .beat-meta { font-size: 10px !important; } /* ── Search bar ────────────────────────────────────────── */ .search-bar { max-width: 100% !important; width: 100% !important; } /* ── Auth/Upload modals ────────────────────────────────── */ .auth-modal, .upload-modal-inner { width: calc(100vw - 32px) !important; max-width: 100% !important; padding: 24px 16px !important; max-height: 90vh !important; overflow-y: auto !important; } /* ── Artist list ───────────────────────────────────────── */ .artist-list { grid-template-columns: 1fr !important; } /* ── Profile hero ──────────────────────────────────────── */ .profile-hero { flex-direction: column !important; text-align: center !important; padding: 24px 16px !important; gap: 16px !important; } .profile-avatar { width: 80px !important; height: 80px !important; font-size: 36px !important; margin: 0 auto !important; } .profile-stats { justify-content: center !important; flex-wrap: wrap !important; } /* ── Page head ─────────────────────────────────────────── */ .page-head { flex-wrap: wrap !important; gap: 10px !important; } .page-title { font-size: 28px !important; } /* ── Player modal ──────────────────────────────────────── */ .ps-card { width: calc(100vw - 24px) !important; max-width: 100% !important; padding: 24px 16px 20px !important; } .ps-art { width: 180px !important; height: 180px !important; font-size: 72px !important; } /* ── Merch page ────────────────────────────────────────── */ .merch-coming-wrap { padding: 30px 16px 60px !important; } .merch-email-row { flex-direction: column !important; border-radius: 12px !important; overflow: visible !important; gap: 8px !important; } .merch-email-input { border-radius: 8px !important; padding: 12px 16px !important; width: 100% !important; } .merch-notify-btn { border-radius: 8px !important; width: 100% !important; padding: 12px !important; } /* ── Producers grid ────────────────────────────────────── */ .producers-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } /* ── Manifesto ─────────────────────────────────────────── */ .manifesto-title { font-size: 48px !important; } .manifesto-stats-row { gap: 16px !important; flex-wrap: wrap !important; } .city-cards-grid { grid-template-columns: repeat(3, 1fr) !important; } } /* ────────────────────────────────────────────────────────── LANDING PAGE — موبایل ────────────────────────────────────────────────────────── */ @media (max-width: 768px) { /* ── Nav ───────────────────────────────────────────────── */ .landing-nav { padding: 16px 16px !important; flex-wrap: nowrap !important; } .nav-links { display: none !important; } .nav-actions { gap: 8px !important; } .join-btn { height: 36px !important; padding: 0 16px !important; font-size: 9px !important; } /* ── Hero center ───────────────────────────────────────── */ .hero-center { padding: 0 20px !important; } .hero-title-img { width: clamp(200px, 75vw, 340px) !important; } .hero-tagline { font-size: 9px !important; letter-spacing: .15em !important; } .cta-btn { height: 48px !important; padding: 0 28px !important; font-size: 9px !important; gap: 10px !important; } /* ── Landing rocks — نه خیلی بزرگ ────────────────────── */ .landing-rock-left { width: 60% !important; left: -12% !important; } .landing-rock-right { width: 45% !important; right: -8% !important; } .landing-rock-tl { width: 22% !important; } .landing-rock-tr { width: 18% !important; } /* ── Chrome orbs کوچکتر ────────────────────────────────── */ .orb-a { width: 60px !important; height: 60px !important; } .orb-b { width: 32px !important; height: 32px !important; } .orb-c { display: none !important; } .orb-d { width: 44px !important; height: 44px !important; } .orb-e { width: 22px !important; height: 22px !important; } /* ── Ghost text کوچکتر ─────────────────────────────────── */ .landing-ghost-text { font-size: clamp(80px, 30vw, 130px) !important; opacity: .025 !important; } /* ── Family grid ───────────────────────────────────────── */ .family-grid { grid-template-columns: repeat(3, 1fr) !important; } .family-avatar { width: 90px !important; height: 90px !important; } .family-section { padding: 16px 16px 40px !important; } } /* ────────────────────────────────────────────────────────── VERY SMALL — زیر 400px (Galaxy S, iPhone SE) ────────────────────────────────────────────────────────── */ @media (max-width: 400px) { .beats-grid { grid-template-columns: 1fr !important; } .hero-title-img { width: clamp(180px, 82vw, 300px) !important; } .family-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 16px 0 !important; } .family-avatar { width: 80px !important; height: 80px !important; } .page-title { font-size: 24px !important; } .hero-h1 { font-size: 34px !important; } .manifesto-title { font-size: 38px !important; } .city-cards-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* ────────────────────────────────────────────────────────── BOTTOM NAVBAR MOBILE — جایگزین sidebar ────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .mobile-bottom-nav { display: flex !important; } } .mobile-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 500; height: 60px; background: rgba(8, 8, 8, 0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid rgba(255,255,255,0.08); align-items: center; justify-content: space-around; padding: 0 8px; padding-bottom: env(safe-area-inset-bottom, 0px); } .light-mode .mobile-bottom-nav { background: rgba(240, 240, 240, 0.96); border-top-color: rgba(0,0,0,0.08); } .mob-nav-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: none; color: rgba(255,255,255,0.4); cursor: pointer; padding: 6px 12px; border-radius: 8px; transition: all 0.2s; flex: 1; max-width: 64px; } .mob-nav-btn.active { color: rgba(255,255,255,0.95); } .mob-nav-btn:active { opacity: 0.6; } .light-mode .mob-nav-btn { color: rgba(0,0,0,0.35); } .light-mode .mob-nav-btn.active { color: rgba(0,0,0,0.9); } .mob-nav-icon { font-size: 18px; line-height: 1; } .mob-nav-label { font-family: 'JetBrains Mono', monospace; font-size: 7px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; } /* main-content وقتی mobile bottom nav داره */ @media (max-width: 768px) { .main-content { padding-bottom: 130px !important; /* float player + bottom nav */ } } /* ── float player بالاتر از bottom nav روی موبایل ─────────── */ @media (max-width: 768px) { .float-player { bottom: 72px !important; /* بالای navbar */ } } /* ── safe area for notched phones ───────────────────────────── */ @supports (padding-bottom: env(safe-area-inset-bottom)) { @media (max-width: 768px) { .mobile-bottom-nav { padding-bottom: env(safe-area-inset-bottom); height: calc(60px + env(safe-area-inset-bottom)); } .float-player { bottom: calc(72px + env(safe-area-inset-bottom)) !important; } } }