/* ============================================================ HADLAY KALAN — HOME MEDIA SLIDER YouTube videos + images, below the stories bar. ============================================================ */ /* A scroll-snap rail driven by scrollTo() rather than a transform carousel: native momentum and correct touch behaviour on Android come for free, and a human swipe and an automatic advance end up in the same place through the same code path. homeMedia.js clones the edge cards so it can loop forever. */ #hkMediaSlider { margin: 4px 0 14px; } #hkMediaSlider[hidden] { display: none; } .hkm-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 2px 0 6px; scrollbar-width: none; /* offsetLeft in the JS is measured against this box. */ position: relative; } .hkm-track::-webkit-scrollbar { display: none; } .hkm-card { flex: 0 0 auto; width: min(78vw, 320px); /* Centred, so the previous and next cards both peek at the edges — which is what makes the wrap read as a loop rather than a jump. */ scroll-snap-align: center; border-radius: var(--radius-sm); overflow: hidden; background: var(--glass-strong); border: 1px solid var(--glass-border-subtle); box-shadow: var(--shadow-glass); /* Peeking neighbours sit back a little so the centred card reads as active. */ opacity: 0.55; transition: opacity 0.35s ease; } /* homeMedia.js marks whichever card is nearest the centre. :focus-within keeps a playing video fully lit, and the no-JS fallback below means the cards are never left dimmed if the script fails to run. */ /* A card holding a live player never dims, even if the rail moves on. Beyond looking wrong, fading a video in and out re-composites its layer, which the Android WebView handles poorly. */ .hkm-card.is-active, .hkm-card.hkm-has-player, .hkm-card:focus-within { opacity: 1; } .hkm-card.hkm-has-player { transition: none; } .hkm-track:not([data-hkm-ready]) .hkm-card { opacity: 1; } @media (prefers-reduced-motion: reduce) { .hkm-card { opacity: 1; transition: none; } } /* Fixed 16:9 box so the rail doesn't reflow as thumbnails and iframes load. */ .hkm-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; margin: 0; padding: 0; border: 0; background: #0d0d0d; cursor: pointer; overflow: hidden; } .hkm-thumb img, .hkm-thumb iframe { width: 100%; height: 100%; display: block; border: 0; } .hkm-thumb img { object-fit: cover; } .hkm-image .hkm-thumb { cursor: default; } .hkm-image a.hkm-thumb { cursor: pointer; } /* Play badge */ .hkm-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.45)); transition: background 0.2s ease; } .hkm-play i { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(220, 38, 38, 0.92); box-shadow: 0 4px 14px rgba(0,0,0,0.35); padding-left: 4px; /* optically centre the triangle */ font-size: 18px; } .hkm-thumb:hover .hkm-play { background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.30)); } .hkm-text { padding: 10px 12px 12px; } .hkm-title { font-weight: 600; font-size: 14px; color: var(--text); line-height: 1.35; } .hkm-caption { margin-top: 3px; font-size: 12px; opacity: 0.75; color: var(--text); line-height: 1.4; } /* ── Section visibility ─────────────────────────────────────── sections.js publishes the admin's choice on , e.g. Adding a new gateable section means one more selector here. */ [data-hk-hide~="stories"] #storiesBar, [data-hk-hide~="mediaSlider"] #hkMediaSlider, [data-hk-hide~="radio"] #hkRadioTeaser, [data-hk-hide~="radio"] #hkRadioCard { display: none !important; }