/* ================================================================ * TECH ZONE — smooth-scroll-ux.css * Premium product browsing experience. * Covers: vertical page scroll, horizontal product rows, * snap alignment, momentum, hidden scrollbars, nav arrows, * lazy-load fade-in, responsive card sizing, and performance. * Load LAST in (after orange-theme.css). * ================================================================ */ /* ── 1. GLOBAL SCROLL FOUNDATION ────────────────────────────── */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* Smooth momentum scrolling on the page body for iOS */ body { -webkit-overflow-scrolling: touch; overflow-x: hidden; } /* Respect user's motion preferences */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ── 2. HORIZONTAL SCROLL TRACK — Base ──────────────────────── */ /* Applied to ALL horizontal scroll rows (.j-product-scroll, .tz-feat-track-wrap, .tz-flash-track-wrap, .tz-na-track-wrap, and any custom section scroll rows) */ .j-product-scroll, .tz-scroll-row { display: flex; gap: 12px; overflow-x: auto; overflow-y: visible; /* Premium momentum / inertia scrolling */ -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; /* Snap cards into position */ scroll-snap-type: x mandatory; scroll-padding-left: var(--scroll-pad, 12px); /* Hide scrollbar but keep functionality */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE / Edge */ /* Performance hint */ will-change: scroll-position; /* Smooth deceleration on all platforms */ scroll-behavior: smooth; /* Prevent layout bleed */ padding-bottom: 12px; padding-left: var(--scroll-pad, 4px); padding-right: var(--scroll-pad, 4px); /* Isolation: horizontal scroll does NOT trigger vertical scroll */ touch-action: pan-x; } /* Hide WebKit scrollbar track */ .j-product-scroll::-webkit-scrollbar, .tz-scroll-row::-webkit-scrollbar { display: none; width: 0; height: 0; } /* ── 3. CARD SNAP & SIZING ───────────────────────────────────── */ .j-product-scroll .j-product-card, .tz-scroll-row .j-product-card { flex-shrink: 0; scroll-snap-align: start; scroll-snap-stop: normal; /* Base size (mobile-first) */ width: clamp(148px, 42vw, 175px); /* GPU compositing for smooth card motion */ transform: translateZ(0); will-change: transform; backface-visibility: hidden; } @media (min-width: 375px) { .j-product-scroll .j-product-card, .tz-scroll-row .j-product-card { width: clamp(155px, 44vw, 185px); } } @media (min-width: 480px) { .j-product-scroll .j-product-card, .tz-scroll-row .j-product-card { width: clamp(170px, 36vw, 205px); } } @media (min-width: 640px) { .j-product-scroll .j-product-card, .tz-scroll-row .j-product-card { width: clamp(185px, 30vw, 215px); } } @media (min-width: 768px) { .j-product-scroll .j-product-card, .tz-scroll-row .j-product-card { width: 215px; } } @media (min-width: 1024px) { .j-product-scroll .j-product-card, .tz-scroll-row .j-product-card { width: 224px; } } @media (min-width: 1280px) { .j-product-scroll .j-product-card, .tz-scroll-row .j-product-card { width: 232px; } } /* ── 4. SCROLL ROW WRAPPER ───────────────────────────────────── */ /* Wraps the scroll track + optional nav arrows */ .tz-scroll-section { position: relative; padding: 0; } /* Fade edge masks (desktop only — hidden on narrow screens) */ @media (min-width: 768px) { .tz-scroll-section::before, .tz-scroll-section::after { content: ''; position: absolute; top: 0; bottom: 12px; width: 48px; pointer-events: none; z-index: 4; } .tz-scroll-section::before { left: 0; background: linear-gradient(to right, #fff 0%, transparent 100%); } .tz-scroll-section::after { right: 0; background: linear-gradient(to left, #fff 0%, transparent 100%); } /* Light-bg variant */ .tz-section--light .tz-scroll-section::before { background: linear-gradient(to right, #fafafa 0%, transparent 100%); } .tz-section--light .tz-scroll-section::after { background: linear-gradient(to left, #fafafa 0%, transparent 100%); } } /* ── 5. NAVIGATION ARROWS ────────────────────────────────────── */ .tz-scroll-arrow { display: none; /* hidden on mobile — swipe only */ position: absolute; top: 50%; transform: translateY(calc(-50% - 6px)); /* account for pb */ z-index: 10; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid #e5e7eb; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.08); color: #1f2937; cursor: pointer; display: none; align-items: center; justify-content: center; transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s, opacity 0.2s; } .tz-scroll-arrow svg { width: 16px; height: 16px; flex-shrink: 0; pointer-events: none; } .tz-scroll-arrow:hover { background: #ff7a00; border-color: #ff7a00; color: #fff; box-shadow: 0 4px 18px rgba(255,122,0,0.38); transform: translateY(calc(-50% - 6px)) scale(1.08); } .tz-scroll-arrow:active { transform: translateY(calc(-50% - 6px)) scale(0.96); } .tz-scroll-arrow--prev { left: -2px; } .tz-scroll-arrow--next { right: -2px; } .tz-scroll-arrow:disabled, .tz-scroll-arrow[data-at-start="true"], .tz-scroll-arrow[data-at-end="true"] { opacity: 0.28; pointer-events: none; } /* Show arrows on tablet and desktop */ @media (min-width: 768px) { .tz-scroll-arrow { display: flex; } } /* Slightly larger arrows on wide desktop */ @media (min-width: 1024px) { .tz-scroll-arrow { width: 44px; height: 44px; } .tz-scroll-arrow svg { width: 18px; height: 18px; } } /* ── 6. PRODUCT CARD ENHANCEMENTS ────────────────────────────── */ .j-product-card { /* Contain any internal overflow */ overflow: hidden; /* Smooth interaction feedback */ transition: box-shadow 0.22s cubic-bezier(.25,.8,.25,1), transform 0.22s cubic-bezier(.25,.8,.25,1); /* Prevent card from being clipped during scroll */ contain: layout style; } /* Card hover lift — only when not dragging */ .j-product-scroll:not(.is-dragging) .j-product-card:hover, .tz-scroll-row:not(.is-dragging) .j-product-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,0.11), 0 2px 8px rgba(0,0,0,0.07); } /* Prevent card image layout shift */ .j-product-card__img-wrap { aspect-ratio: 1 / 1; overflow: hidden; background: #f5f5f5; } .j-product-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s cubic-bezier(.25,.8,.25,1); } .j-product-card:hover .j-product-card__img-wrap img { transform: scale(1.05); } /* ── 7. LAZY-LOAD IMAGE FADE-IN ──────────────────────────────── */ /* Images start invisible; JS adds .tz-img-loaded once src loaded */ img[loading="lazy"] { opacity: 0; transition: opacity 0.4s ease; } img[loading="lazy"].tz-img-loaded, img[loading="lazy"].loaded { opacity: 1; } /* Fallback: force visible after 1.5s (avoids stuck invisible images) */ img[loading="lazy"] { animation: tz-img-reveal 0.4s ease 1.5s both; } @keyframes tz-img-reveal { to { opacity: 1; } } /* Native lazy loading — browser handles it; we just animate */ img[loading="lazy"][src] { opacity: 1; animation: none; } /* ── 8. SKELETON LOADING SHIMMER ─────────────────────────────── */ .tz-skeleton { position: relative; overflow: hidden; background: #f0f0f0; border-radius: 6px; } .tz-skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100% ); background-size: 200% 100%; animation: tz-shimmer 1.4s ease infinite; } @keyframes tz-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* ── 9. DRAGGING STATE ───────────────────────────────────────── */ .j-product-scroll.is-dragging, .tz-scroll-row.is-dragging { cursor: grabbing; scroll-behavior: auto; /* disable smooth during drag */ user-select: none; -webkit-user-select: none; } .j-product-scroll.is-dragging .j-product-card, .tz-scroll-row.is-dragging .j-product-card { pointer-events: none; /* prevent accidental link activation */ } /* Default grab cursor when hovering scrollable rows */ @media (min-width: 768px) { .j-product-scroll, .tz-scroll-row { cursor: grab; } } /* ── 10. TOUCH DIRECTION LOCK ────────────────────────────────── */ /* When user initiates a horizontal swipe inside a scroll row, lock that direction to prevent accidental vertical scroll */ .j-product-scroll.touch-locked, .tz-scroll-row.touch-locked { touch-action: pan-x; overscroll-behavior: contain; } /* Vertical scrolling sections — never block vertical */ .tz-section, .tz-section--light, main, article { touch-action: pan-y; } /* ── 11. SECTION SPACING & RHYTHM ────────────────────────────── */ .tz-section, .tz-section--light { padding: 20px 0 28px; } .tz-section .container, .tz-section--light .container { /* Prevent horizontal overflow bleed */ overflow: visible; } /* Section headers stay flush */ .j-section-header { padding-left: 0; padding-right: 0; margin-bottom: 12px; } /* ── 12. SCROLL PROGRESS INDICATOR (optional, desktop) ──────── */ .tz-scroll-progress { display: none; height: 2px; background: #e5e7eb; border-radius: 2px; margin-top: 10px; overflow: hidden; } .tz-scroll-progress__fill { height: 100%; background: linear-gradient(90deg, #ff7a00, #ffb300); border-radius: 2px; transition: width 0.15s ease; width: 0%; } @media (min-width: 768px) { .tz-scroll-progress { display: block; } } /* ── 13. RESPONSIVE GRID (non-scroll product pages) ──────────── */ /* products.php, search.php — vertical grid */ .j-product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; /* Smooth layout shifts */ contain: layout; } @media (min-width: 480px) { .j-product-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } } @media (min-width: 640px) { .j-product-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } } @media (min-width: 768px) { .j-product-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } } @media (min-width: 1024px) { .j-product-grid { grid-template-columns: repeat(5, 1fr); gap: 18px; } } @media (min-width: 1280px) { .j-product-grid { grid-template-columns: repeat(6, 1fr); gap: 20px; } } /* Grid cards: consistent height, no overflow */ .j-product-grid .j-product-card { min-width: 0; /* prevent grid blowout */ width: 100%; } /* ── 14. PERFORMANCE OPTIMISATIONS ───────────────────────────── */ /* Promote scroll containers to their own compositor layer */ .j-product-scroll, .tz-scroll-row, .tz-feat-track-wrap, .tz-flash-track-wrap, .tz-na-track-wrap { -webkit-transform: translateZ(0); transform: translateZ(0); contain: content; } /* Reduce paint during scroll */ .j-product-card__img-wrap img, .tz-feat-card__img-wrap img, .tz-flash-card__img-wrap img { will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* ── 15. FLASH DEALS & FEATURED CAROUSEL ALIGNMENT ──────────── */ /* Ensure the existing carousels also snap properly */ .tz-flash-track-wrap, .tz-feat-track-wrap, .tz-na-track-wrap { overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } /* ── 16. CATEGORY SCROLL ROW ─────────────────────────────────── */ .tz-category-scroll { display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 8px; padding-left: 2px; } .tz-category-scroll::-webkit-scrollbar { display: none; } .tz-category-scroll .tz-category-card { flex-shrink: 0; scroll-snap-align: start; } /* ── 17. MOMENTUM SCROLL RESTORATION ────────────────────────── */ /* Preserve scroll position on back-navigation (bfcache) */ .j-product-scroll, .tz-scroll-row { overflow-anchor: none; } /* ── 18. FOCUS MANAGEMENT ────────────────────────────────────── */ /* Smooth focus outlines for keyboard users in scroll rows */ .j-product-scroll .j-product-card:focus-within, .tz-scroll-row .j-product-card:focus-within { outline: none; box-shadow: 0 0 0 2px #ff7a00, 0 4px 16px rgba(255,122,0,0.2); border-radius: 6px; } /* ── 19. ANTI-LAYOUT-SHIFT ───────────────────────────────────── */ /* Reserve space for images before they load */ .j-product-card__img-wrap { min-height: 0; /* aspect-ratio handles it */ } /* Ensure text doesn't cause card width variance */ .j-product-card__name { word-break: break-word; overflow-wrap: break-word; hyphens: auto; } /* ── 20. SCROLL SHADOWS (subtle depth cue) ───────────────────── */ @media (min-width: 768px) { .tz-scroll-section { position: relative; } /* Left shadow shows more content to the left */ .tz-scroll-section[data-scroll-left="true"]::before { opacity: 1; } /* Right shadow shows more content to the right */ .tz-scroll-section[data-scroll-right="true"]::after { opacity: 1; } .tz-scroll-section::before, .tz-scroll-section::after { opacity: 0; transition: opacity 0.2s; } }