/* VOLO Video Carousel v1.5.4 — Clean coverflow, true crop-fill */ .volo-vc-wrap { --volo-bg: #0A0A0C; --volo-lime: #C6FF3D; position: relative; width: 100%; padding: 60px 0 40px; background: var(--volo-bg); overflow: hidden; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .volo-vc-swiper { width: 100%; padding: 18px 0 34px; overflow: visible; } .volo-vc-slide { width: 260px; height: 462px; /* 9:16 */ transition: opacity .5s ease, filter .5s ease, transform .5s ease; opacity: .72; filter: brightness(.62); } .volo-vc-slide.swiper-slide-active { opacity: 1; filter: none; z-index: 5; } .volo-vc-card { position: relative; width: 100%; height: 100%; border-radius: 22px; overflow: hidden; background: #000; /* Soft lime glow on every card */ border: 1px solid rgba(198,255,61,0.22); box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 24px rgba(198,255,61,0.10), 0 0 60px rgba(198,255,61,0.06); transition: border-color .4s ease, box-shadow .4s ease; } .volo-vc-slide.swiper-slide-active .volo-vc-card { border-color: var(--volo-lime); border-width: 2px; box-shadow: 0 30px 80px rgba(198,255,61,.28), 0 0 0 1px rgba(198,255,61,.5), 0 0 90px rgba(198,255,61,0.22); } .volo-vc-slide.swiper-slide-prev, .volo-vc-slide.swiper-slide-next { opacity: .82; filter: brightness(.70); } /* Media container — always fills the card */ .volo-vc-media { position: absolute; inset: 0; overflow: hidden; background: #000; } /* MP4: cover-fill the 9:16 card, crop sides for horizontal videos */ .volo-vc-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #000; } /* YouTube: iframe is 16:9. To cover a 9:16 card we scale it so height = card height, and width = height * 16/9, then center it. That crops the horizontal sides. */ .volo-vc-yt { position: absolute; inset: 0; overflow: hidden; } .volo-vc-yt iframe { position: absolute; top: 50%; left: 50%; height: 100%; /* width = height * 16/9 relative to the card (which is 9:16), so width becomes card_width * (16/9) * (16/9) ≈ 3.16x card_width. */ width: calc(100% * (16 / 9) * (16 / 9)); transform: translate(-50%, -50%); border: 0; pointer-events: none; background: #000; } /* Poster / thumbnail — background-image div so no theme can shrink it */ .volo-vc-poster { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; background-color: #000; z-index: 2; transition: opacity .25s ease; } .volo-vc-card.is-playing .volo-vc-poster { opacity: 0; pointer-events: none; } .volo-vc-placeholder { position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.06), transparent 60%), linear-gradient(135deg, #1a1a20 0%, #0e0e12 100%); } /* Sound button — visible only on active slide */ .volo-vc-sound { position: absolute; bottom: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.2); color: #fff; display: none; align-items: center; justify-content: center; cursor: pointer; z-index: 10; padding: 0; backdrop-filter: blur(6px); transition: background .2s ease, border-color .2s ease, transform .2s ease; } .volo-vc-sound:hover { background: rgba(198,255,61,.15); border-color: var(--volo-lime); color: var(--volo-lime); transform: scale(1.06); } .volo-vc-slide.swiper-slide-active .volo-vc-sound { display: inline-flex; } .volo-vc-sound .icon-off { display: none; } .volo-vc-sound.is-muted .icon-on { display: none; } .volo-vc-sound.is-muted .icon-off { display: block; } /* Bottom controls — force centered against theme/Elementor overrides */ .volo-vc-wrap .volo-vc-controls { display: flex !important; align-items: center !important; justify-content: center !important; gap: 20px !important; margin: 20px auto 0 !important; width: 100% !important; text-align: center !important; float: none !important; position: relative !important; } .volo-vc-wrap .volo-vc-btn { width: 46px; height: 46px; border-radius: 50%; background: transparent; border: 1.5px solid rgba(255,255,255,.25); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all .25s ease; padding: 0; flex: 0 0 auto; } .volo-vc-wrap .volo-vc-btn:hover { border-color: var(--volo-lime); color: var(--volo-lime); transform: scale(1.05); } .volo-vc-pagination { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; width: auto !important; min-height: 12px; position: static !important; transform: none !important; } .volo-vc-pagination .volo-vc-dot, .volo-vc-pagination .swiper-pagination-bullet { appearance: none !important; width: 7px !important; height: 7px !important; min-width: 7px !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: rgba(255,255,255,.28) !important; opacity: 1 !important; transition: width .3s ease, background .3s ease, box-shadow .3s ease !important; margin: 0 !important; cursor: pointer; } .volo-vc-pagination .volo-vc-dot-active, .volo-vc-pagination .swiper-pagination-bullet-active { width: 34px !important; background: var(--volo-lime) !important; box-shadow: 0 0 18px rgba(198,255,61,.34) !important; } @media (max-width: 640px) { .volo-vc-slide { width: 200px; height: 355px; } .volo-vc-btn { width: 40px; height: 40px; } .volo-vc-sound { width: 36px; height: 36px; bottom: 10px; right: 10px; } } /* Remove any theme-applied outer border around the section */ .volo-vc-wrap { border: 0 !important; outline: 0 !important; box-shadow: none !important; background: var(--volo-bg) !important; } .volo-vc-wrap .swiper, .volo-vc-wrap .swiper-wrapper { border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; }