/** * JoDeals Mobile Performance CSS * ───────────────────────────────────────────────────────────────────────────── * Loaded early in to lock in layout dimensions BEFORE content paints. * Purpose: eliminate CLS, enable GPU-composited animations, smooth scrolling. * * Target: 360–430px mobile viewports * Goals: CLS < 0.1 | FCP < 2s | LCP < 2.5s | 60 FPS scroll * ───────────────────────────────────────────────────────────────────────────── */ /* ============================================================================= 1. LAZY IMAGE — Blur Placeholder System Prevents CLS by reserving space; prevents flickering with opacity crossfade. ============================================================================= */ /** * Wrapper that locks dimensions before the real image loads. * Must have a defined width/height or aspect-ratio applied by parent. */ .img-lazy-wrap { position: relative; overflow: hidden; background-color: #f1f5f9; /* Slate-100 — shown while loading */ isolation: isolate; } .dark .img-lazy-wrap { background-color: #1e293b; } /** * The real image: starts invisible, fades in when loaded. * Using opacity transition only (GPU-composited, no reflow). */ .img-lazy-wrap .lazy-img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.35s ease; will-change: opacity; } .img-lazy-wrap .lazy-img.loaded { opacity: 1; } /** * Shimmer placeholder — visible until .lazy-img fades in. * Uses a CSS animation shimmer (no JS needed). */ .img-lazy-wrap::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 90deg, #f1f5f9 0%, #e2e8f0 40%, #f1f5f9 80% ); background-size: 200% 100%; animation: shimmer-sweep 1.6s linear infinite; z-index: 1; transition: opacity 0.3s ease; pointer-events: none; } .dark .img-lazy-wrap::before { background: linear-gradient( 90deg, #1e293b 0%, #334155 40%, #1e293b 80% ); background-size: 200% 100%; } /* Once image is loaded, fade out the shimmer */ .img-lazy-wrap.img-loaded::before { opacity: 0; } @keyframes shimmer-sweep { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* Respect reduced-motion preference — static placeholder instead */ @media (prefers-reduced-motion: reduce) { .img-lazy-wrap::before { animation: none; background: #e2e8f0; } .dark .img-lazy-wrap::before { background: #334155; } .img-lazy-wrap .lazy-img { transition: none; opacity: 1; /* Show immediately */ } } /* ============================================================================= 2. FIXED DIMENSIONS — CLS Prevention Every image container MUST have reserved dimensions before content loads. ============================================================================= */ /* Deal card image area — 1:1 square */ .mobile-deal-card-image-wrapper { aspect-ratio: 1 / 1; width: 100%; flex-shrink: 0; } /* Hero banner slider — 21:9 cinematic */ .mobile-hero-slider { /* Aspect ratio already set inline — reinforce with min-height for older browsers */ min-height: 120px; /* Reserve background before image loads */ background-color: #f1f5f9; } .dark .mobile-hero-slider { background-color: #0f172a; } /* Store logo circles */ .store-avatar-wrap { width: 4rem; /* 64px */ height: 4rem; flex-shrink: 0; border-radius: 9999px; overflow: hidden; background-color: #f8fafc; } .dark .store-avatar-wrap { background-color: #0f172a; } .store-avatar-wrap img { width: 100%; height: 100%; object-fit: contain; display: block; } /* Category icon containers */ .premium-cat-icon-container { width: 3.75rem; /* 60px */ height: 3.75rem; flex-shrink: 0; } /* Bottom navigation — reserve exact height to prevent content jump */ .mobile-bottom-nav, #mobile-bottom-nav { height: calc(56px + env(safe-area-inset-bottom, 0px)); } /* Bottom nav spacer — pushes page content above nav */ .mobile-bottom-nav-spacer { height: calc(64px + env(safe-area-inset-bottom, 0px)); flex-shrink: 0; } /* ============================================================================= 3. GPU-COMPOSITED ANIMATIONS ONLY All animations use only transform + opacity (composited, zero-reflow). ============================================================================= */ /* Override any width/height animations to use transform instead */ .mobile-deal-card { /* Use transform for press feedback — NOT scale on width/height */ transition: transform 150ms cubic-bezier(0.16, 1, 0.3, 1), opacity 150ms ease; will-change: transform; /* Promote card to its own compositor layer for smooth scroll */ backface-visibility: hidden; } /* Card press animation — GPU only */ .mobile-deal-card:active { transform: scale(0.97); } /* Favorite button animation — GPU only */ .mobile-deal-favorite-btn { transition: transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275); will-change: transform; } .mobile-deal-favorite-btn:active { transform: scale(0.82); } /* Category card press — GPU only */ .premium-cat-card { transition: transform 150ms cubic-bezier(0.16, 1, 0.3, 1), background-color 150ms ease; will-change: transform; backface-visibility: hidden; } .premium-cat-card:active { transform: scale(0.93); } /* Skeleton shimmer — GPU only (background-position on transform axis trick) */ .skeleton-image, .animate-pulse, [class*="skeleton"] { background-image: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%); background-size: 200% 100%; animation: shimmer-sweep 1.6s linear infinite; } .dark .skeleton-image, .dark [class*="skeleton"] { background-image: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%); } /* Page transition — fade only (GPU) */ .page-enter { opacity: 0; transform: translateY(8px); transition: opacity 220ms ease, transform 220ms ease; } .page-enter.page-enter-active { opacity: 1; transform: translateY(0); } /* Toast notification animation — transform + opacity only */ .mobile-toast { transform: translateY(12px); opacity: 0; transition: transform 220ms ease, opacity 220ms ease; will-change: transform, opacity; } .mobile-toast.visible { transform: translateY(0); opacity: 1; } /* ============================================================================= 4. HORIZONTAL CAROUSELS — Smooth Noon-Style Scrolling Native scroll with momentum, snap alignment, GPU compositing. ============================================================================= */ .horizontal-scroller { display: flex; flex-direction: row; overflow-x: auto; overflow-y: hidden; /* Native momentum scrolling (iOS Safari) */ -webkit-overflow-scrolling: touch; /* Prevent horizontal pull-to-refresh while swiping horizontal */ overscroll-behavior-x: contain; overscroll-behavior-y: auto; /* Snap to cards */ scroll-snap-type: x mandatory; scroll-padding-inline-start: 0; /* Hide scrollbar but keep functionality */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ /* GPU compositing for the scroll container */ transform: translateZ(0); will-change: scroll-position; /* Prevent content overflow from causing width issues */ contain: layout style; } .horizontal-scroller::-webkit-scrollbar { display: none; /* Chrome/Safari */ } /* Snap each card */ .horizontal-scroller > .mobile-deal-card { scroll-snap-align: start; flex-shrink: 0; } /* Store scroller bubbles */ .store-scroller > * { scroll-snap-align: center; flex-shrink: 0; } /* Touch feedback optimization — allow horizontal panning for cards and vertical panning for page scroll */ .horizontal-scroller, .horizontal-scroller > * { touch-action: pan-x pan-y pinch-zoom; } /* ============================================================================= 5. SCROLL PERFORMANCE — 60 FPS CSS containment prevents unnecessary layout recalculations during scroll. ============================================================================= */ /* Section containers — contain layout recalcs to within each section */ .md\:hidden.px-4.mb-5, [data-perf-section] { contain: layout style; } /* Below-fold sections — defer rendering until near viewport */ /* Only apply to sections that are definitely below the fold */ [data-content-visibility="deferred"] { content-visibility: auto; contain-intrinsic-size: 0 400px; /* Reserve approximate height */ } /* Remove expensive backdrop-filter from non-critical elements on scroll */ @media (max-width: 768px) { /* Keep blur only on header (above fold, doesn't scroll) */ /* Remove from cards and carousels */ .mobile-deal-card .backdrop-blur-xl, .horizontal-scroller .backdrop-blur-xl { backdrop-filter: none; -webkit-backdrop-filter: none; } } /* Reduce heavy box-shadow on cards (repaints on scroll) */ .mobile-deal-card { /* Use a much simpler shadow — avoids GPU overdraw */ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07); } /* Active/hover state restores richer shadow briefly — not on scroll */ .mobile-deal-card:active { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } /* ============================================================================= 6. PROGRESSIVE SECTION LOADING — Skeleton States Sections show skeleton until JS swaps in content. Space is reserved to prevent CLS. ============================================================================= */ /* Section wrapper — reserve min-height while loading to prevent CLS */ .mobile-section-loader { min-height: 220px; position: relative; } /* When section content has loaded, remove min-height constraint */ .mobile-section-loader.content-loaded { min-height: 0; } /* Fade-in animation for sections as they load */ .mobile-deals-actual { animation: sectionFadeIn 0.3s ease-out forwards; } @keyframes sectionFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .mobile-deals-actual { animation: none; } } /* ============================================================================= 7. MOBILE VIEWPORT SPECIFIC OVERRIDES ============================================================================= */ @media (max-width: 430px) { /* Ensure hero banner fills viewport width exactly */ .mobile-hero-slider { margin-left: -1rem; margin-right: -1rem; border-radius: 0; width: calc(100% + 2rem); } /* Deal cards in horizontal scroller — show ~1.8 cards at a time */ .horizontal-scroller > .mobile-deal-card { width: calc(50vw - 1.25rem); min-width: calc(50vw - 1.25rem); } } @media (max-width: 375px) { /* Smaller phones — slightly narrower cards */ .horizontal-scroller > .mobile-deal-card { width: calc(50vw - 1rem); min-width: calc(50vw - 1rem); } } /* ============================================================================= 8. INTERACTION PERFORMANCE ============================================================================= */ /* Remove tap delay on all touch targets */ button, a, [role="button"], [onclick], .mobile-deal-card { touch-action: manipulation; -webkit-tap-highlight-color: transparent; cursor: pointer; } /* Prevent text selection during swipe gestures */ .horizontal-scroller { user-select: none; -webkit-user-select: none; } /* Smooth transitions for interactive elements — GPU only */ button, a { transition: transform 120ms ease, opacity 120ms ease; will-change: transform; } /* Remove heavy transitions from elements that cause layout during scroll */ @media (max-width: 768px) { /* Disable box-shadow transitions on mobile — they repaint */ .shadow-sm, .shadow-md, .hover\:shadow-md { transition: transform 150ms ease, opacity 150ms ease; } } /* ============================================================================= 9. FONT LOADING — Prevent FOUT (Flash of Unstyled Text) ============================================================================= */ /* Font display swap — fonts show immediately with fallback */ @font-face { font-display: swap; } /* Prevent layout shift from font loading */ body { /* Use system font stack as fallback with matching metrics */ font-family: var(--ds-font-english, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); } html[lang="ar"] body, body[dir="rtl"] { font-family: var(--ds-font-arabic, 'Cairo', 'Noto Sans Arabic', 'Arial', sans-serif); } /* ============================================================================= 10. PRINT / SAVE-DATA MODE ============================================================================= */ /* When user has data-saver mode on, skip all animations */ @media (prefers-reduced-data: reduce) { .img-lazy-wrap::before, .skeleton-image, [class*="skeleton"], .animate-pulse { animation: none; } .img-lazy-wrap .lazy-img { transition: none; opacity: 1; } }