/* ========================================================================== SHORT CLIPS STYLES A shorts/reels-style horizontal strip of vertical video previews on the homepage. One clip fills the view per swipe on mobile. Each clip has a small sound toggle, and tapping the clip itself opens a full-screen swipeable viewer (vertical, one clip per swipe) with a close button. ========================================================================== */ .tgc-clips { background: var(--color-cream); } .tgc-clips__inner { text-align: center; } .tgc-clips__track { display: flex; gap: var(--space-sm); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--space-md); padding: 0.25rem 0 0.75rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .tgc-clips__track::-webkit-scrollbar { display: none; } .tgc-clip { scroll-snap-align: center; flex: 0 0 260px; aspect-ratio: 9/16; border-radius: var(--radius-card); overflow: hidden; background: var(--color-purple-deep); box-shadow: var(--shadow-card); position: relative; cursor: pointer; } .tgc-clip video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; /* tapping anywhere on the card opens fullscreen */ } /* Per-clip sound toggle, top-right corner (bottom is reserved for the scrubbable progress bar) */ .tgc-clip__sound { position: absolute; top: 0.6rem; right: 0.6rem; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(0,0,0,0.55); color: var(--color-white); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; cursor: pointer; z-index: 2; backdrop-filter: blur(2px); transition: background 0.2s, transform 0.2s; } .tgc-clip__sound:hover { background: rgba(0,0,0,0.75); transform: scale(1.06); } .tgc-clip__sound.is-on { background: var(--color-gold); color: var(--color-purple-deep); } /* ---- Scrubbable progress / duration bar -------------------------------- Transparent overlay along the bottom of the video — doesn't block the picture. Drag or tap along it to seek. Same markup/behavior is reused inside the fullscreen viewer. */ .tgc-clip__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; /* generous touch target */ display: flex; align-items: flex-end; padding: 0 0.6rem 0.5rem; z-index: 3; cursor: pointer; touch-action: none; /* dragging seeks — it shouldn't scroll the strip */ } .tgc-clip__progress-track { position: relative; width: 100%; height: 3px; background: rgba(255,255,255,0.35); border-radius: 999px; overflow: hidden; } .tgc-clip__progress-fill { height: 100%; width: 0%; background: var(--color-gold); border-radius: 999px; } /* Slightly larger + a bit more breathing room in the fullscreen viewer */ .tgc-clip__progress--fullscreen { height: 32px; padding: 0 1rem max(0.75rem, env(safe-area-inset-bottom)); } .tgc-clip__progress--fullscreen .tgc-clip__progress-track { height: 4px; } .tgc-clips__empty { color: var(--color-ink-soft); padding: var(--space-lg) 0; width: 100%; } /* One large clip per screen on mobile, like a proper shorts feed */ @media (max-width: 600px) { .tgc-clips__track { scroll-padding: 0 6vw; } .tgc-clip { flex-basis: 82vw; } } /* ========================================================================== FULLSCREEN VIEWER Created dynamically by clips.js and appended to , so it sits above the header/footer regardless of the section's own stacking context. Vertical scroll-snap = swipe up/down between clips, one per screen. ========================================================================== */ .tgc-clips-fullscreen { position: fixed; inset: 0; background: #000; z-index: 9999; display: flex; flex-direction: column; } .tgc-clips-fullscreen__track { flex: 1; overflow-y: auto; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .tgc-clips-fullscreen__track::-webkit-scrollbar { display: none; } .tgc-clips-fullscreen__item { height: 100%; width: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; position: relative; } .tgc-clips-fullscreen__item video { width: 100%; height: 100%; object-fit: contain; background: #000; } .tgc-clips-fullscreen__close { position: absolute; top: max(1rem, env(safe-area-inset-top)); left: 1rem; width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(255,255,255,0.15); color: var(--color-white); font-size: 1.15rem; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10000; backdrop-filter: blur(4px); transition: background 0.2s; } .tgc-clips-fullscreen__close:hover { background: rgba(255,255,255,0.28); } .tgc-clips-fullscreen__sound { position: absolute; top: max(1rem, env(safe-area-inset-top)); right: 1rem; width: 46px; height: 46px; border-radius: 50%; border: none; background: rgba(0,0,0,0.55); color: var(--color-white); font-size: 1.1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; backdrop-filter: blur(2px); transition: background 0.2s, transform 0.2s; } .tgc-clips-fullscreen__sound:hover { background: rgba(0,0,0,0.75); transform: scale(1.06); } .tgc-clips-fullscreen__sound.is-on { background: var(--color-gold); color: var(--color-purple-deep); } body.tgc-clips-lock { overflow: hidden; }