Spaces:
Sleeping
Sleeping
| .scroll-stack-scroller { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| overflow-y: auto; | |
| overflow-x: visible; | |
| overscroll-behavior: contain; | |
| -webkit-overflow-scrolling: touch; | |
| scroll-behavior: smooth; | |
| -webkit-transform: translateZ(0); | |
| transform: translateZ(0); | |
| will-change: scroll-position; | |
| } | |
| .scroll-stack-inner { | |
| padding: 0; | |
| min-height: 100vh; | |
| } | |
| .scroll-stack-card-wrapper { | |
| position: relative; | |
| } | |
| .scroll-stack-card { | |
| transform-origin: top center; | |
| will-change: transform; | |
| backface-visibility: hidden; | |
| transform-style: flat; | |
| box-shadow: none; | |
| min-height: 100vh; | |
| width: 100%; | |
| margin: 0; | |
| padding: 0; | |
| border-radius: 0; | |
| box-sizing: border-box; | |
| -webkit-transform: translateZ(0); | |
| transform: translateZ(0); | |
| position: relative; | |
| overflow: hidden; | |
| contain: layout style paint; | |
| isolation: isolate; | |
| } | |
| .scroll-stack-end { | |
| width: 100%; | |
| height: 200px; | |
| } | |
| /* Mobile optimizations */ | |
| @media (max-width: 768px) { | |
| .scroll-stack-scroller { | |
| -webkit-overflow-scrolling: touch; | |
| scroll-snap-type: y proximity; | |
| } | |
| .scroll-stack-card { | |
| will-change: auto; | |
| transform-style: flat; | |
| box-shadow: none; | |
| scroll-snap-align: start; | |
| } | |
| .scroll-stack-end { | |
| height: 100px; | |
| } | |
| } | |
| /* Tablet optimizations */ | |
| @media (min-width: 769px) and (max-width: 1024px) { | |
| .scroll-stack-card { | |
| box-shadow: none; | |
| } | |
| .scroll-stack-end { | |
| height: 150px; | |
| } | |
| } | |
| /* Desktop enhancements */ | |
| @media (min-width: 1025px) { | |
| .scroll-stack-card { | |
| will-change: transform; | |
| box-shadow: none; | |
| } | |
| .scroll-stack-end { | |
| height: 300px; | |
| } | |
| } | |
| /* Performance optimization for reduced motion */ | |
| @media (prefers-reduced-motion: reduce) { | |
| .scroll-stack-scroller { | |
| scroll-behavior: auto; | |
| } | |
| .scroll-stack-card { | |
| will-change: auto; | |
| transform: none ; | |
| filter: none ; | |
| } | |
| } | |
| /* High contrast mode support */ | |
| @media (prefers-contrast: high) { | |
| .scroll-stack-card { | |
| box-shadow: none; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| } | |