/* ========================================================================== 9wickets — "লাইভ অ্যাকটিভিটি" REDESIGN v2 "Live Feed, Dark" (loads LAST, after live-activity-slider.css) -------------------------------------------------------------------------- Same dark-aurora premium language as hero-v5/why-v5/verify-v3, PLUS a markup/behaviour change: the discrete step-and-pause carousel (prev/next buttons, dots, JS-driven scrollTo autoplay every 3.5-4.5s) is replaced with a genuine continuous marquee — same technique as the header's .vk-ticker notice bar: the card list is duplicated back-to-back inside an animated flex track (`translateX(0)` -> `translateX(-50%)`, linear, infinite, paused on hover), so it loops seamlessly with no visible reset. 6 new activity cards were added (10 -> 16) for more variety across one loop. The old prev/next/dots markup was removed entirely (meaningless for a continuous marquee, same as the ticker has none); live-activity-slider.js's scroll-position-based autoplay/dot-sync logic still runs but is now inert (`.vk-lac-track` no longer scrolls, `.vk-lac- prev/-next/-dot` no longer exist) — same "superseded script becomes a harmless no-op" pattern this codebase already uses elsewhere (see wickets-home.js's setupLiveFeed()). This layer re-themes colours (white "clean console" cards -> dark glass) AND supplies the marquee structure/animation — live-activity-slider.css's .vk-lac-track/-slide scroll-snap rules are overridden here, not reused. Scoped under .vk-live (shell) and .vk-lac-* (slider). ========================================================================== */ /* Full-bleed background — same `.vk-section` max-width/centering fix as why-v5.css / verify-v3.css. */ body.vk .vk-live.vk-section { position: relative; overflow: hidden; max-width: none !important; width: 100%; margin: 0 !important; padding-top: clamp(28px, 3.2vw, 44px) !important; padding-bottom: clamp(28px, 3.2vw, 44px) !important; background: linear-gradient(180deg, #0B0906 0%, #14110A 55%, #17150F 100%) !important; border-top: 1px solid rgba(255, 199, 44, .14); border-bottom: 1px solid rgba(255, 199, 44, .14); isolation: isolate; } body.vk .vk-live .vk-live__aura { background: radial-gradient(34% 48% at 12% 10%, rgba(255, 199, 44, .16), transparent 68%), radial-gradient(32% 44% at 90% 90%, rgba(232, 162, 0, .12), transparent 65%); filter: blur(10px); animation: live2-aurora-drift 18s ease-in-out infinite alternate; } @keyframes live2-aurora-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(2%, -1.5%, 0) scale(1.04); } } /* ---- head: eyebrow / heading / lead ---- */ body.vk .vk-live .vk-eyebrow--live { background: linear-gradient(135deg, rgba(244, 63, 94, .16), rgba(255, 199, 44, .08)); border-color: rgba(244, 63, 94, .35); color: #FCA5A8 !important; } body.vk .vk-live .vk-h2 { color: #FBF6EC !important; } body.vk .vk-live .vk-h2 em { font-style: normal; color: #FFC72C !important; text-shadow: 0 0 26px rgba(255, 199, 44, .3); } body.vk .vk-live .vk-lead { color: #BFB6A0 !important; } body.vk .vk-live .vk-lead a { color: #FFC72C !important; text-decoration: underline; text-underline-offset: 2px; } /* ---- marquee mechanics (replaces live-activity-slider.css's scroll-snap track — same duplicate-track technique as .vk-ticker in the header) ---- */ body.vk .vk-lac { margin-top: 44px; } body.vk .vk-lac-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); } body.vk .vk-lac-marquee { display: flex; width: max-content; will-change: transform; animation: vk-lac-scroll var(--vk-lac-duration, 75s) linear infinite; } body.vk .vk-lac:hover .vk-lac-marquee { animation-play-state: paused; } @keyframes vk-lac-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } body.vk .vk-lac-track { display: flex; align-items: stretch; flex-wrap: nowrap; gap: 20px; margin: 0; padding: 6px 10px 10px; list-style: none; } body.vk .vk-lac-slide { flex: 0 0 auto; width: 380px; box-sizing: border-box; } @media (max-width: 640px) { body.vk .vk-lac { margin-top: 32px; } body.vk .vk-lac-track { gap: 14px; padding: 4px 8px 8px; } body.vk .vk-lac-slide { width: 300px; } body.vk .vk-lac-card { grid-template-columns: 44px 1fr; padding: 14px 16px; gap: 14px; border-radius: 14px; } body.vk .vk-lac-avatar { width: 44px; height: 44px; font-size: 16px; } body.vk .vk-lac-time { grid-column: 2; justify-self: start; font-size: 10.5px; padding: 4px 8px; } body.vk .vk-lac-what { font-size: 12.5px; } } /* ---- slider cards: white "clean console" -> dark glass ---- */ body.vk .vk-lac-card { background: rgba(255, 255, 255, .03) !important; border-color: rgba(255, 199, 44, .14) !important; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .5) !important; } body.vk .vk-lac-card:hover, body.vk .vk-lac-card:focus-within { border-color: rgba(255, 199, 44, .38) !important; box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .6), 0 0 30px -10px rgba(255, 199, 44, .25) !important; } body.vk .vk-lac-card.is-active { border-color: #FFC72C !important; box-shadow: 0 0 0 1px rgba(255, 199, 44, .35) inset, 0 18px 40px -18px rgba(255, 199, 44, .35) !important; } body.vk .vk-lac-who strong { color: #FBF6EC !important; } body.vk .vk-lac-sep { background: rgba(255, 255, 255, .18) !important; } body.vk .vk-lac-where { color: #A79D86 !important; } body.vk .vk-lac-where svg { color: #FFC72C !important; } body.vk .vk-lac-what { color: #DCD3BE !important; } body.vk .vk-lac-time { background: rgba(255, 255, 255, .04) !important; border-color: rgba(255, 199, 44, .16) !important; color: #A79D86 !important; } @media (prefers-reduced-motion: reduce) { body.vk .vk-live .vk-live__aura { animation: none !important; } body.vk .vk-lac-marquee { animation: none !important; } }