/* * CarTrack DZ — Mobile Redesign * A complete mobile-first overhaul targeting screens ≤ 768px * Designed to match Airbnb / Stripe quality on Algerian smartphones * ───────────────────────────────────────────────────────────────── * HOW TO USE: Add this line to base.html , AFTER the existing styles: * */ /* ═══════════════════════════════════════════════════════════════ 0. DESIGN TOKENS (mobile refinements) ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { :root { --nav-h: 56px; /* slimmer navbar on mobile */ --radius: 16px; --radius-sm: 10px; } /* Smooth scrolling + momentum on iOS */ html { -webkit-overflow-scrolling: touch; } body { font-size: 15px; /* prevent layout shifts when modals open */ overflow-x: hidden; } /* Better tap highlighting */ a, button { -webkit-tap-highlight-color: rgba(15, 39, 68, .08); } } /* ═══════════════════════════════════════════════════════════════ 1. NAVBAR — Facebook-style mobile top bar ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .navbar-main { height: 56px; padding: 0 10px; gap: 6px; overflow: hidden; } /* ── Hamburger: round circle like Facebook's menu icon ── */ .hamburger-btn { width: 38px !important; height: 38px !important; border-radius: 50% !important; background: rgba(255,255,255,.14) !important; border: none !important; flex-shrink: 0; order: -1; } /* ── Brand: icon + name, flex-shrink so it never breaks ── */ .navbar-brand-custom { font-size: 1.05rem; font-weight: 900; gap: 7px; flex-shrink: 1; min-width: 0; } .navbar-brand-custom .brand-text { display: block !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .navbar-brand-custom .brand-icon { width: 30px; height: 30px; border-radius: 8px; font-size: .88rem; flex-shrink: 0; } /* ── Right: push icons to far right ── */ .nav-right { margin-left: auto; gap: 4px; flex-shrink: 0; } /* Hide desktop search bar & quick action bar */ .nav-search, .nav-quick-bar, .nav-actions { display: none !important; } /* ── All icon buttons: large filled circles (Facebook style) ── */ .nav-icon-btn { width: 38px !important; height: 38px !important; border-radius: 50% !important; background: rgba(255,255,255,.14) !important; border: none !important; font-size: .95rem !important; flex-shrink: 0; } .nav-icon-btn:active { background: rgba(255,255,255,.28) !important; transform: scale(.93); } /* ── AUTHENTICATED icons ────────────────────────────────────── Navbar on mobile: search bar (mob-search-btn) + bell only. navMarketLink hidden — marketplace reached via bottom nav / search */ #msgBell { display: flex !important; } #navAvatarWrap { display: none !important; } /* profile in bottom nav */ .nav-sell-btn { display: none !important; } /* sell via action sheet */ /* Notification bell */ #notifBell { width: 38px !important; height: 38px !important; border-radius: 50% !important; background: rgba(255,255,255,.14) !important; border: none !important; font-size: .95rem !important; } /* Dark mode toggle */ #darkToggle { display: flex !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; background: rgba(255,255,255,.14) !important; border: none !important; font-size: .95rem !important; } /* ── GUEST bar ── */ .nav-guest-help { display: none !important; } .nav-right .btn-outline-light, .nav-right .btn-sm { padding: 6px 12px !important; font-size: .75rem !important; border-radius: 20px !important; white-space: nowrap; } /* Notification dropdown — flush right, never overflows */ #notifDropdown { right: 0 !important; left: auto !important; } /* Swap store icon → search icon on mobile (Facebook: magnifying glass) */ #navMarketLink .fa-store::before { content: "\f002"; } } /* ═══════════════════════════════════════════════════════════════ 2. SIDEBAR — hidden; slides in as drawer ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Sidebar becomes a full-height drawer from the left */ .sidebar { width: 290px !important; padding: 0 !important; transform: translateX(-100%); transition: transform .3s cubic-bezier(.4,0,.2,1); overflow-y: auto; box-shadow: 4px 0 32px rgba(0,0,0,.18); } .sidebar:not(.collapsed) { transform: translateX(0) !important; } /* Sidebar inner padding */ .sidebar > * { padding-left: 12px; padding-right: 12px; } /* User card in sidebar */ .sidebar .sb-section:first-child { padding-top: 20px; } /* Main content always full width */ .main-content { margin-left: 0 !important; padding: 12px 12px 90px !important; } } /* ═══════════════════════════════════════════════════════════════ 3. HERO SECTION — full-bleed, impactful ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .hero { margin: -12px -12px 20px !important; padding: 36px 0 0 !important; border-radius: 0 !important; } .hero-inner { padding: 0 20px !important; } .hero-badge { font-size: .7rem; padding: 4px 12px; margin-bottom: 14px; } .hero h1 { font-size: 1.65rem !important; margin-bottom: 10px !important; line-height: 1.2 !important; } .hero-sub { font-size: .88rem !important; margin-bottom: 22px !important; line-height: 1.5 !important; opacity: .85; } /* Hero CTA buttons — full width stack on very small screens */ .hero-cta { flex-direction: column; gap: 10px; margin-bottom: 28px; padding: 0 4px; } .hero-cta a { padding: 13px 20px !important; font-size: .9rem !important; border-radius: 12px !important; width: 100%; text-align: center; justify-content: center; display: flex; align-items: center; gap: 8px; } .cta-primary { box-shadow: 0 4px 20px rgba(232,160,32,.45) !important; } /* Stats strip — compact, scrollable if needed */ .hero-stats { padding: 12px 0 !important; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .hero-stats::-webkit-scrollbar { display: none; } .hero-stat { padding: 4px 20px !important; flex-shrink: 0; } .hero-stat-val { font-size: 1.15rem !important; } .hero-stat-lbl { font-size: .62rem !important; } } /* ═══════════════════════════════════════════════════════════════ 4. SEARCH PANEL — streamlined for touch ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .search-panel { border-radius: var(--radius) !important; margin-bottom: 16px !important; box-shadow: var(--shadow) !important; } .search-panel-header { padding: 12px 16px !important; } .search-panel-header h5 { font-size: .88rem !important; } .search-panel-body { padding: 14px 16px !important; } /* Search quick bar — larger tap target */ .search-quick-bar { padding: 10px 14px !important; border-radius: 12px !important; margin-bottom: 12px !important; } .search-quick-bar input { font-size: .9rem !important; /* Prevents iOS zoom on focus */ font-size: 16px !important; } .search-quick-btn { padding: 8px 14px !important; font-size: .8rem !important; border-radius: 8px !important; white-space: nowrap; } /* Filter selects — full width, native-friendly */ .search-panel-body .row { margin: 0 !important; } .search-panel-body .col-6, .search-panel-body .col-md-3 { padding: 0 !important; flex: 0 0 50% !important; max-width: 50% !important; } .search-panel-body .form-select, .search-panel-body select { font-size: 14px !important; padding: 9px 10px !important; height: 40px !important; border-radius: 9px !important; } /* Budget filter chips — horizontally scrollable */ .filter-chips { flex-wrap: nowrap !important; overflow-x: auto !important; padding-bottom: 4px !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 7px !important; } .filter-chips::-webkit-scrollbar { display: none; } .filter-chip { flex-shrink: 0 !important; padding: 6px 14px !important; font-size: .8rem !important; border-radius: 20px !important; height: 34px; display: flex; align-items: center; white-space: nowrap; } /* Advanced panel row */ #advancedPanel .row { gap: 8px 0; } /* Filter actions */ .search-panel-body > div:last-child { gap: 8px; flex-wrap: wrap; } .btn-primary-custom, .btn-accent-custom { padding: 10px 16px !important; font-size: .875rem !important; border-radius: 10px !important; } } /* ═══════════════════════════════════════════════════════════════ 5. ACTIVE FILTER TAGS — nicer on mobile ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .active-filters { flex-wrap: nowrap !important; overflow-x: auto !important; padding: 0 0 6px !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 6px !important; margin-bottom: 12px !important; } .active-filters::-webkit-scrollbar { display: none; } .active-tag { flex-shrink: 0; padding: 4px 10px 4px 12px !important; font-size: .74rem !important; } } /* ═══════════════════════════════════════════════════════════════ 6. RESULTS BAR — simplified ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .results-bar { margin-bottom: 12px !important; gap: 8px !important; } .results-count { font-size: .84rem !important; } .sort-select { font-size: .8rem !important; padding: 5px 10px !important; height: 34px !important; border-radius: 8px !important; } } /* ═══════════════════════════════════════════════════════════════ 7. LISTING CARDS — redesigned for mobile ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* 2-column grid on phones */ .feed-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } /* Card base */ .annonce-card { border-radius: 12px !important; box-shadow: 0 1px 6px rgba(15,39,68,.08), 0 3px 12px rgba(15,39,68,.05) !important; transition: transform .15s, box-shadow .15s !important; } /* Card image — aspect ratio instead of fixed height */ .annonce-img { height: auto !important; aspect-ratio: 4/3 !important; width: 100% !important; object-fit: cover !important; } /* Card body — tighter but breathing */ .annonce-body { padding: 9px 10px 11px !important; } /* Price — prominent */ .annonce-price { font-size: .95rem !important; font-weight: 900 !important; line-height: 1.2 !important; } /* Title — 2 lines max */ .annonce-title { font-size: .78rem !important; font-weight: 600 !important; line-height: 1.4 !important; margin-top: 3px !important; /* 2-line clamp */ display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } /* Specs row — smaller, tight */ .annonce-body > div[style*="flex-wrap"] { gap: 5px !important; margin-top: 5px !important; font-size: .68rem !important; } /* Seller footer row */ .annonce-body > div[style*="border-top"] { margin-top: 7px !important; padding-top: 7px !important; gap: 5px !important; } .annonce-body > div[style*="border-top"] img { width: 20px !important; height: 20px !important; } .annonce-body > div[style*="border-top"] span { font-size: .68rem !important; } /* Fuel badge overlay */ .badge-fuel { font-size: .62rem !important; padding: 2px 7px !important; } /* Views badge */ [style*="fa-eye"] { font-size: .65rem !important; } /* Negociable / etat small badges */ [style*="Négociable"], .etat-badge { font-size: .6rem !important; padding: 1px 5px !important; } } /* Single-column on very small phones */ @media (max-width: 380px) { .feed-grid { grid-template-columns: 1fr !important; } .annonce-img { aspect-ratio: 16/9 !important; } } /* ═══════════════════════════════════════════════════════════════ 8. MOBILE BOTTOM NAVIGATION — elevated design ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .mobile-bottom-nav { padding: 0 0 env(safe-area-inset-bottom, 6px) !important; box-shadow: 0 -1px 0 rgba(0,0,0,.06), 0 -8px 32px rgba(0,0,0,.08) !important; background: rgba(255,255,255,.97) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .mobile-bottom-nav-inner { padding: 6px 4px 0 !important; height: 58px; align-items: flex-start !important; } /* Nav items */ .mbn-item { padding: 5px 8px !important; border-radius: 10px !important; gap: 2px !important; min-width: 48px; transition: color .15s, background .15s; } .mbn-item i { font-size: 1.2rem !important; display: block; } .mbn-item span { font-size: .55rem !important; letter-spacing: .2px !important; } .mbn-item.active { color: var(--primary) !important; background: rgba(15, 39, 68, .07); } /* FAB button — larger, more prominent */ .mbn-fab-circle { width: 52px !important; height: 52px !important; margin-top: -20px !important; border: 3px solid white !important; font-size: 1.4rem !important; box-shadow: 0 4px 20px rgba(15,39,68,.45) !important; background: linear-gradient(135deg, #0f2744, #1e4a8a) !important; transition: transform .2s, box-shadow .2s !important; } .mbn-fab.open .mbn-fab-circle, .mbn-fab:active .mbn-fab-circle { transform: scale(1.08) rotate(45deg) !important; box-shadow: 0 6px 26px rgba(15,39,68,.55) !important; } .mbn-fab-label { font-size: .55rem !important; margin-top: 3px !important; } } /* ═══════════════════════════════════════════════════════════════ 9. ACTION SHEET — premium feel ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .action-sheet-overlay { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); background: rgba(0,0,0,.42) !important; } .action-sheet { border-radius: 24px 24px 0 0 !important; padding: 0 16px calc(env(safe-area-inset-bottom, 0px) + 82px) !important; box-shadow: 0 -8px 48px rgba(0,0,0,.2) !important; max-height: 82vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } .action-sheet-handle { width: 40px !important; height: 4px !important; background: #d1d5db !important; border-radius: 2px !important; margin: 14px auto 18px !important; } .action-sheet-title { font-size: .7rem !important; letter-spacing: .7px !important; margin-bottom: 10px !important; color: var(--text-muted) !important; } /* Car chips — horizontal scroll */ .as-car-scroll { padding-bottom: 10px !important; gap: 8px !important; -webkit-overflow-scrolling: touch; } .as-car-chip { padding: 8px 14px !important; font-size: .82rem !important; border-radius: 22px !important; height: 38px !important; gap: 6px !important; border-width: 1.5px !important; } .as-car-chip.selected { border-color: var(--primary-light) !important; background: #eff6ff !important; color: var(--primary-light) !important; font-weight: 700 !important; } /* Action grid */ .as-actions { grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-bottom: 10px !important; } .as-action { padding: 14px 12px !important; border-radius: 14px !important; align-items: center !important; gap: 10px !important; font-size: .85rem !important; font-weight: 700 !important; min-height: 70px; transition: transform .12s, opacity .12s !important; } .as-action:active { transform: scale(.97) !important; opacity: .9 !important; } .as-action i { font-size: 1.4rem !important; width: 32px !important; flex-shrink: 0; } .as-action div { line-height: 1.3; } .as-action-sub { font-size: .7rem !important; opacity: .75 !important; font-weight: 400 !important; margin-top: 2px !important; } .as-action.sell { min-height: 58px !important; font-size: .92rem !important; border-radius: 14px !important; } .as-action.sell i { color: var(--accent) !important; } } /* ═══════════════════════════════════════════════════════════════ 10. AUTH MODALS — full-screen on mobile ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .modal-overlay { align-items: flex-end !important; padding: 0 !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .modal-box { border-radius: 24px 24px 0 0 !important; padding: 28px 24px calc(env(safe-area-inset-bottom, 0px) + 28px) !important; width: 100% !important; max-width: 100% !important; animation: slideUpModal .28s cubic-bezier(.4,0,.2,1) !important; /* Handle indicator */ position: relative; } .modal-box::before { content: ''; display: block; width: 36px; height: 4px; background: #d1d5db; border-radius: 2px; margin: 0 auto 20px; } @keyframes slideUpModal { from { transform: translateY(60px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .modal-title { font-size: 1.2rem !important; margin-bottom: 5px !important; } .modal-sub { font-size: .82rem !important; margin-bottom: 18px !important; } /* Inputs in modal — 16px to prevent zoom on iOS */ .modal-box .form-control { font-size: 16px !important; padding: 12px 14px !important; border-radius: 10px !important; height: 48px !important; } /* Submit buttons */ .modal-box .btn-primary-custom, .modal-box .btn-accent-custom { height: 50px !important; font-size: .95rem !important; border-radius: 12px !important; letter-spacing: .2px; } .modal-close { top: 16px !important; right: 18px !important; font-size: 1.4rem !important; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--bg) !important; border-radius: 50% !important; color: var(--text-muted) !important; } .modal-switch { margin-top: 16px !important; font-size: .84rem !important; } } /* ═══════════════════════════════════════════════════════════════ 11. EMPTY STATE — centered, friendly ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .empty-state { padding: 52px 20px !important; } .empty-state i { font-size: 2.5rem !important; margin-bottom: 14px !important; } .empty-state p:first-of-type { font-size: .95rem !important; } .empty-state p:last-of-type { font-size: .82rem !important; } } /* ═══════════════════════════════════════════════════════════════ 12. BACK-TO-TOP BUTTON ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { #backToTop { bottom: 74px !important; right: 14px !important; width: 38px !important; height: 38px !important; font-size: .8rem !important; box-shadow: 0 3px 14px rgba(15,39,68,.3) !important; } } /* ═══════════════════════════════════════════════════════════════ 13. TYPOGRAPHY REFINEMENTS ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Page section titles */ .page-title { font-size: 1.2rem !important; } /* Card headers */ .card-header-custom h5 { font-size: .88rem !important; } /* Subtle fade-in animation on cards */ .annonce-card-wrap { animation: cardIn .35s ease both; } .annonce-card-wrap:nth-child(1) { animation-delay: .02s; } .annonce-card-wrap:nth-child(2) { animation-delay: .05s; } .annonce-card-wrap:nth-child(3) { animation-delay: .08s; } .annonce-card-wrap:nth-child(4) { animation-delay: .11s; } .annonce-card-wrap:nth-child(5) { animation-delay: .14s; } .annonce-card-wrap:nth-child(6) { animation-delay: .17s; } .annonce-card-wrap:nth-child(7) { animation-delay: .20s; } .annonce-card-wrap:nth-child(8) { animation-delay: .23s; } @keyframes cardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } } /* ═══════════════════════════════════════════════════════════════ 14. SIDEBAR DRAWER (opened state from hamburger) ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Sidebar overlay */ .sidebar-overlay.show { background: rgba(0,0,0,.45) !important; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /* Sidebar open state — triggered by JS removing .collapsed */ .sidebar:not(.collapsed) { transform: translateX(0) !important; box-shadow: 6px 0 40px rgba(0,0,0,.22) !important; } /* Sidebar user card */ .sb-user-card-mobile { background: linear-gradient(135deg, var(--primary), var(--primary-light)); padding: 20px 16px 18px; margin: 0 0 8px; color: white; } .sb-user-card-mobile img { width: 48px; height: 48px; border-radius: 12px; border: 2px solid rgba(255,255,255,.35); object-fit: cover; } /* Sidebar links */ .sb-link { padding: 11px 14px !important; border-radius: 10px !important; font-size: .9rem !important; margin-bottom: 2px !important; transition: background .15s, color .15s !important; } .sb-link.active { background: var(--primary) !important; color: white !important; } .sb-section { font-size: .62rem !important; padding: 14px 14px 5px !important; letter-spacing: 1.1px !important; } } /* ═══════════════════════════════════════════════════════════════ 15. SKELETON LOADING — smoother on mobile ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .skeleton-card { border-radius: 12px !important; } .skeleton-img { height: 0 !important; padding-bottom: 75% !important; /* matches 4:3 ratio */ } .skeleton-line { height: 12px !important; } } /* ═══════════════════════════════════════════════════════════════ 16. COMPARE FLOATING BAR (if visible on mobile) ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* The compare floating bar at bottom */ div[style*="position:fixed"][style*="bottom:70px"] { bottom: 72px !important; left: 12px !important; right: 12px !important; transform: none !important; border-radius: 14px !important; padding: 10px 16px !important; font-size: .82rem !important; } } /* ═══════════════════════════════════════════════════════════════ 17. PAGINATION / INFINITE SCROLL SENTINEL ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { #infiniteScrollSentinel { padding: 24px 0 !important; } } /* ═══════════════════════════════════════════════════════════════ 18. TOUCH FEEDBACK — active states ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .annonce-card:active { transform: scale(.98) !important; box-shadow: 0 1px 4px rgba(0,0,0,.1) !important; transition: transform .1s, box-shadow .1s !important; } .btn-primary-custom:active, .btn-accent-custom:active { transform: scale(.97) !important; opacity: .95 !important; } .filter-chip:active { transform: scale(.95) !important; } /* Prevent text selection on buttons and nav items */ .mbn-item, .filter-chip, .as-car-chip, .as-action { user-select: none; -webkit-user-select: none; } } /* ═══════════════════════════════════════════════════════════════ 19. DARK MODE MOBILE ADJUSTMENTS ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { [data-theme="dark"] .mobile-bottom-nav { background: rgba(26, 37, 53, .97) !important; border-top-color: var(--border) !important; } [data-theme="dark"] .action-sheet { background: #1a2535 !important; } [data-theme="dark"] .modal-box { background: #1a2535 !important; } [data-theme="dark"] .search-quick-bar { background: rgba(255,255,255,.05) !important; } [data-theme="dark"] .annonce-card { box-shadow: 0 1px 6px rgba(0,0,0,.3) !important; } } /* ═══════════════════════════════════════════════════════════════ 20. EXTRA SMALL (≤ 380px — compact phones) ═══════════════════════════════════════════════════════════════ */ @media (max-width: 380px) { .hero h1 { font-size: 1.4rem !important; } .main-content { padding: 10px 10px 88px !important; } .mbn-item span { display: none !important; } /* hide labels, show only icons */ .mobile-bottom-nav-inner { padding: 8px 0 0 !important; } .mbn-item { padding: 6px 10px 2px !important; } .annonce-price { font-size: .88rem !important; } } /* ═══════════════════════════════════════════════════════════════ 21. FORMS — iOS zoom prevention & touch-friendly inputs ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Prevent iOS auto-zoom on input focus (requires font-size ≥ 16px) */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="search"], input[type="url"], textarea, select { font-size: 16px !important; } /* Full-width form controls */ .form-control, .form-select { width: 100% !important; min-height: 44px !important; font-size: 16px !important; } /* Buttons — ensure minimum 44px touch target */ .btn, button[type="submit"], a.btn { min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Page header action buttons */ .page-header a, .page-header button { min-height: 44px !important; padding-top: 10px !important; padding-bottom: 10px !important; } } /* ═══════════════════════════════════════════════════════════════ 22. TABLES — horizontal scroll wrapper on mobile ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Any table not already in a responsive wrapper */ table:not([class*="calendar"]) { min-width: 500px; } /* Wrap bare tables in a scroll container */ .table-custom, .sa-table { min-width: 500px; } /* Superadmin cards and their bodies — make them scrollable when they contain tables */ .sa-card-body, .sa-card { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } /* Bootstrap table-responsive already handles this, but add it to any card-body with a bare table */ .card-body > table, .dp-body > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; } } /* ═══════════════════════════════════════════════════════════════ 23. NOTIFICATION ACTION BUTTONS — always visible on mobile ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Always show on mobile (no hover on touch) */ .notif-actions { opacity: 1 !important; } /* Larger tap targets */ .notif-action-btn { width: 36px !important; height: 36px !important; border-radius: 10px !important; font-size: .8rem !important; } .notif-row { padding: 12px 12px !important; gap: 10px !important; } .notif-msg { white-space: normal !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } } /* ═══════════════════════════════════════════════════════════════ 24. STORE BAR — mobile layout ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* The store quick-action bar at top of main content */ #storeBar > div { flex-wrap: wrap !important; gap: 0 !important; } #storeBar .store-bar-nav { overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap !important; width: 100% !important; } #storeBar .store-bar-nav::-webkit-scrollbar { display: none; } } /* ═══════════════════════════════════════════════════════════════ 25. IMAGES — ensure img-fluid behaviour everywhere ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { img:not([style*="width"]):not(.nav-user-avatar):not(.sb-car-dot + img) { max-width: 100% !important; height: auto; } /* Explicit img-fluid on content images */ .det-card img, .det-card-body img, .card-body img, .dp-body img, .form-card-body img { max-width: 100% !important; height: auto !important; } } /* ═══════════════════════════════════════════════════════════════ 26. MISC SMALL BUTTONS — min touch target via padding ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Pagination buttons */ .sa-page-btn { min-width: 40px !important; height: 40px !important; } /* Contact/action buttons on annonce cards */ .contact-btn { min-height: 50px !important; font-size: 1rem !important; } /* Profile action buttons */ .btn-profile { min-height: 44px !important; padding: 10px 18px !important; } /* Inline small action buttons in listings */ .fav-btn, .share-btn { min-width: 40px !important; min-height: 40px !important; } /* Saved-search / favorites delete buttons */ a[style*="padding:7px 12px"], button[style*="padding:7px 12px"] { padding: 10px 14px !important; min-height: 40px !important; } } /* ═══════════════════════════════════════════════════════════════ 27. GPU PERFORMANCE — TikTok-speed rendering on mobile Principle: GPU compositing > CPU paint on every scroll frame ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* ── Kill ALL backdrop-filter on mobile ────────────────────── backdrop-filter forces a separate GPU layer for EACH element it's applied to. With 10+ elements per snap card that's 10+ GPU passes per frame → jank. Replace with opaque dark bg. */ .modal-overlay { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(0, 0, 0, .55) !important; } .action-sheet-overlay { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(0, 0, 0, .5) !important; } /* Bottom nav: use solid bg instead of frosted glass */ .mobile-bottom-nav { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--card) !important; border-top: 1px solid var(--border) !important; } /* ── Promote sticky filter bar to own layer ────────────────── Prevents the page from repainting under it while scrolling */ .sf-filter-bar { will-change: transform; transform: translateZ(0); } /* ── Snap feed images: fill instantly, no layout jank ──────── aspect-ratio reserves space before image loads, so the card doesn't jump when the image arrives */ .sf-photo > img { aspect-ratio: 9/16; background: linear-gradient(135deg, #111827, #0f2744); } /* ── Tap response: eliminate 300ms click delay everywhere ──── touch-action:manipulation tells browser "this is a scroll or tap, never a double-tap zoom" → instant response */ a, button, [onclick], .sf-pill, .sf-act, .sf-btn, .mbn-item, .nav-icon-btn, .fav-btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* ── Card tap feedback: instant visual response ────────────── :active fires immediately with touch-action:manipulation */ .annonce-card:active { transform: scale(.975) !important; transition: transform .08s !important; } /* ── Remove hover transforms on mobile — they trigger layout ─ Hover doesn't exist on touch; these just waste composite */ .annonce-card:hover { transform: none !important; box-shadow: 0 1px 6px rgba(15,39,68,.08) !important; } .annonce-card:hover .annonce-img { transform: none !important; } /* ── content-visibility for offscreen listing cards ────────── Browser skips paint + layout for cards below the fold. Massive win when there are 20+ cards on the grid page. */ .annonce-card-wrap { content-visibility: auto; contain-intrinsic-size: 0 280px; } /* ── Faster card entry animation ──────────────────────────── Cut delays in half — cards should snap in, not drift in */ .annonce-card-wrap { animation-duration: .18s !important; } .annonce-card-wrap:nth-child(1){animation-delay:.0s !important} .annonce-card-wrap:nth-child(2){animation-delay:.03s !important} .annonce-card-wrap:nth-child(3){animation-delay:.06s !important} .annonce-card-wrap:nth-child(4){animation-delay:.09s !important} .annonce-card-wrap:nth-child(5){animation-delay:.12s !important} .annonce-card-wrap:nth-child(6){animation-delay:.15s !important} /* ── Disable image scale on mobile (hover effect) ──────────── Scaling an image mid-scroll causes GPU layer re-upload */ .annonce-img { transition: none !important; } /* ── Kill backdrop-filter on grid card overlay badges ───────── These are on every single card; blur on 20 elements per page-load = 20 GPU compositing layers just for label chips */ .badge-fuel, .badge-views, .badge-neg, .badge-store, .etat-badge { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ── Kill backdrop-filter on inline-style badges (carrosserie, boost) */ .card-img-wrap span[style*="backdrop-filter"] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ── Seller float avatar — minimum 54px touch target on mobile ── */ .seller-float-btn { width: 54px !important; height: 54px !important; right: 8px !important; border-width: 2.5px !important; } .seller-float-plus { width: 20px !important; height: 20px !important; font-size: 13px !important; } }