Uniform Studio – Olga Karaververis

DISCOVER THE S/S 2025 COLLECTION

HANDCRAFTED IN ATHENS

DISCOVER THE S/S 2025 COLLECTION

HANDCRAFTED IN ATHENS

olga karaververis

WISHLIST

BAG

Responsive Variable Size GSAP Slider

body {
font-family: ‘Futura Condensed Medium’, ‘Oswald’, ‘Inter’, sans-serif;
background-color: transparent;
margin: 0;
overflow-x: hidden;
overscroll-behavior: none; /* keep as-is for desktop */
}
.scroll-wrapper { position: relative; }
/* Sticky horizontal container (DESKTOP behavior unchanged) */
.horizontal-container {
position: sticky;
top: 0;
display: flex;
overflow: hidden;
height: 100vh;
align-items: center;
width: 100%;
}
/* Image gallery */
.image-gallery {
display: flex;
align-items: center;
height: 100vh;
padding-left: 10vw;
padding-right: 10vw;
box-sizing: content-box;
will-change: transform;
}
.image-gallery a {
display: block;
height: auto;
flex-shrink: 0;
position: relative;
}
/* Numbering Label */
.image-code-label {
position: absolute;
bottom: 10px;
right: 10px;
z-index: 20;
color: #000;
font-family: ‘Futura (TT) Medium’, ‘Oswald’, sans-serif;
font-size: 1rem;
font-weight: 400;
padding-left: 4px;
padding-right: 4px;
pointer-events: none;
white-space: nowrap;
}
/* Desktop image styles (unchanged) */
@media (min-width: 769px) {
.slide-image {
display: block;
width: auto;
object-fit: contain;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
border-radius: 0.75rem;
transition: transform 0.3s ease;
}
}
/* Mobile */
@media (max-width: 768px) {
/* ✅ KEY FIX: allow vertical scroll chaining to reach footer */
body {
overscroll-behavior: auto !important;
overscroll-behavior-y: auto !important;
/* ✅ Double image number size on mobile only */
.image-code-label {
font-size: 2rem !important;
}
}
/* MOBILE: native horizontal scroll */
.scroll-wrapper { height: auto !important; }
.horizontal-container {
position: relative !important;
top: auto !important;
overflow-x: auto !important;
overflow-y: visible !important;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
touch-action: pan-x pan-y;
/* ✅ contain ONLY horizontal overscroll; DO NOT block vertical */
overscroll-behavior-x: contain;
overscroll-behavior-y: auto;
}
.image-gallery { padding: 0 !important; }
.image-gallery a {
width: 100vw;
height: 100vh;
flex: 0 0 100vw;
scroll-snap-align: center;
scroll-snap-stop: always;
}
.slide-image {
width: 100vw !important;
height: 100vh !important;
object-fit: cover;
object-position: center;
border-radius: 0 !important;
box-shadow: none !important;
}
.image-gallery > * { margin-right: 0 !important; }
.nav-arrow { display: flex !important; }
#navigation-rail {
left: 50% !important;
transform: translateX(-50%) !important;
bottom: 1.5rem !important;
background: rgba(255, 255, 255, 0.8);
padding: 0.5rem 1rem;
border-radius: 9999px;
}
/* arrows black (default + tap) */
.nav-arrow {
color: #000 !important;
border-color: #000 !important;
-webkit-tap-highlight-color: transparent;
}
.nav-arrow:hover,
.nav-arrow:active,
.nav-arrow:focus,
.nav-arrow:focus-visible {
color: #000 !important;
border-color: #000 !important;
outline: none;
}
}
/* Navigation Rail (your original placement) */
#navigation-rail {
position: fixed;
bottom: 2rem;
left: 2rem;
z-index: 50;
display: flex;
gap: 1.5rem;
}
/* Active State */
.nav-item.active .nav-number {
color: #000000;
font-weight: 500;
}
/* Inactive State */
.nav-number {
color: #6E6E6E;
font-weight: 500;
transition: color 0.3s ease;
}
/* Side arrows */
.nav-arrow {
position: fixed;
top: 50%;
transform: translateY(-50%);
z-index: 100;
background: rgba(255, 255, 255, 0.9);
color: #333;
border-radius: 50%;
width: 56px;
height: 56px;
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
border: 1px solid #ccc;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.nav-arrow:hover {
background: white;
color: #000;
box-shadow: 0 6px 16px rgba(0,0,0,0.2);
transform: translateY(-50%) scale(1.05);
}
.arrow-left { left: 1rem; }
.arrow-right { right: 1rem; }
.nav-arrow svg {
width: 24px;
height: 24px;
stroke-width: 2.5;
stroke: currentColor;
fill: none;
}