/** * BuyVCC home page — Elementor companion stylesheet * * Built on the BuyVCC brand tokens (May 2026 refresh): * --bvc-grad : linear-gradient(to right, #3562F4 0%, #C339DA 100%) * --bvc-bg : #0d0f1f (page navy) * --bvc-ink : #ffffff (headings) * --bvc-body : #cbd5e1 (body text) * --bvc-mute : #94a3b8 (label / meta) * --bvc-accent: #c4b5fd (eyebrow / price) * * Every section is set up so the runtime page renders pixel-perfectly with * stock Elementor + custom BuyVCC widgets — no JS framework required. */ :root { --bvc-grad: linear-gradient(to right, #3562F4 0%, #C339DA 100%); --bvc-grad-soft: linear-gradient(135deg, rgba(53, 98, 244, 0.18) 0%, rgba(195, 57, 218, 0.18) 100%); --bvc-bg: #0d0f1f; --bvc-bg-2: #141632; --bvc-border: rgba(168, 85, 247, 0.28); --bvc-border-hot: rgba(168, 85, 247, 0.55); --bvc-glow-blue: rgba(53, 98, 244, 0.42); --bvc-glow-magenta: rgba(195, 57, 218, 0.36); --bvc-ink: #ffffff; --bvc-body: #cbd5e1; --bvc-mute: #94a3b8; --bvc-accent: #c4b5fd; } /* ── Reset OceanWP defaults that fight us on the home page ──────────── */ body.home, body.home #content, body.home .site-main, body.home .entry-content { background: var(--bvc-bg) !important; } body.home .site-main { padding: 0 !important; max-width: 100% !important; } body.home [class*="bvc-home-"] * { box-sizing: border-box; } /* ── CONTAINER SYMMETRY ───────────────────────────────────────────────── Every home section's inner container clamps to the same 1280px max-width used by the chrome header (see chrome.css). This guarantees every section shares a single vertical grid — eyebrow, headline, content, CTAs all line up to the same left/right rails as the logo and nav. */ body.home .elementor > .elementor-section.elementor-section-stretched > .elementor-container, body.home .elementor > .elementor-section > .elementor-container { max-width: 1280px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 24px !important; padding-right: 24px !important; } @media (max-width: 768px) { body.home .elementor > .elementor-section > .elementor-container { padding-left: 20px !important; padding-right: 20px !important; } } body.home p { color: var(--bvc-body); } body.home a { color: var(--bvc-accent); } body.home a:hover { color: #ffffff; } /* OceanWP wraps headings in default color rules — neutralise so each section can own its colour scheme via the bvc-home-* classes. */ body.home .elementor-widget-heading .elementor-heading-title { color: var(--bvc-ink); } body.home .elementor-widget-text-editor, body.home .elementor-widget-text-editor p { color: var(--bvc-body); } /* ── Eyebrow label ──────────────────────────────────────────────────── */ body.home .bvc-home-eyebrow .elementor-heading-title { text-transform: uppercase; letter-spacing: 0.32em; font-size: 12px !important; font-weight: 700 !important; margin: 0 0 14px !important; color: transparent !important; background: var(--bvc-grad); -webkit-background-clip: text; background-clip: text; } body.home .bvc-home-eyebrow--center .elementor-heading-title { text-align: center; } /* ── Section H2 ─────────────────────────────────────────────────────── */ body.home .bvc-home-h2 .elementor-heading-title { font-size: clamp(34px, 4.2vw, 52px) !important; line-height: 1.08 !important; letter-spacing: -0.02em !important; font-weight: 800 !important; color: var(--bvc-ink) !important; margin: 0 auto 18px !important; max-width: 22ch; white-space: pre-line; } /* The head-only sections that introduce each grid */ body.home .bvc-home-headrow { background: var(--bvc-bg) !important; } body.home .bvc-home-headrow .elementor-container { text-align: center; } body.home .bvc-home-section__head { text-align: center; } /* ════════════════════════════════════════════════════════════════════════ 1 · HERO ════════════════════════════════════════════════════════════════════════ */ body.home .bvc-home-hero { position: relative; overflow: hidden; background: radial-gradient(70% 60% at 20% 0%, rgba(53, 98, 244, 0.22) 0%, transparent 60%), radial-gradient(60% 50% at 100% 30%, rgba(195, 57, 218, 0.22) 0%, transparent 60%), var(--bvc-bg) !important; } body.home .bvc-home-hero::before { content: ""; position: absolute; inset: -10% -10% -10% -10%; background: radial-gradient(40% 30% at 70% 80%, rgba(124, 58, 237, 0.18) 0%, transparent 60%), radial-gradient(35% 25% at 10% 90%, rgba(53, 98, 244, 0.16) 0%, transparent 60%); filter: blur(40px); pointer-events: none; z-index: 0; animation: bvc-bloom 14s ease-in-out infinite alternate; } @keyframes bvc-bloom { 0% { transform: translate3d(0,0,0) scale(1); opacity: 0.85; } 100% { transform: translate3d(2%, -2%, 0) scale(1.06); opacity: 1; } } body.home .bvc-home-hero > .elementor-container { position: relative; z-index: 1; } body.home .bvc-home-headline .elementor-heading-title { font-size: clamp(40px, 5.4vw, 68px) !important; line-height: 1.05 !important; letter-spacing: -0.028em !important; font-weight: 800 !important; color: var(--bvc-ink) !important; margin: 0 0 22px !important; white-space: pre-line; } body.home .bvc-home-lede .elementor-widget-container { margin-bottom: 26px; } body.home .bvc-home-lede p { font-size: clamp(15px, 1.2vw, 18px) !important; line-height: 1.65 !important; color: var(--bvc-body) !important; margin: 0 !important; max-width: 52ch; } /* CTA pair — collapse the two 50/50 columns into a single tight inline row. Both buttons sit next to each other on the left with a 12px gap, not stretched to the column edges. The override targets the inner section's direct container so the columns shrink to their content. */ body.home .bvc-home-hero__cta-row { padding: 0 !important; } body.home .bvc-home-hero__cta-row > .elementor-container { max-width: 100% !important; justify-content: flex-start !important; gap: 12px; flex-wrap: wrap; } body.home .bvc-home-hero__cta-row > .elementor-container > .elementor-column { flex: 0 0 auto !important; width: auto !important; max-width: none !important; } body.home .bvc-home-hero__cta-row .elementor-widget-button { width: auto; } body.home .bvc-home-btn .elementor-button { display: inline-flex !important; align-items: center; justify-content: center; padding: 16px 28px !important; border-radius: 12px !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; border: none !important; cursor: pointer; transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease, filter 0.22s ease, background 0.22s ease, border-color 0.22s ease !important; } body.home .bvc-home-btn--primary .elementor-button { background: var(--bvc-grad) !important; color: var(--bvc-ink) !important; box-shadow: 0 14px 32px var(--bvc-glow-blue), 0 6px 16px var(--bvc-glow-magenta); } body.home .bvc-home-btn--primary .elementor-button:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 20px 40px var(--bvc-glow-blue), 0 10px 22px var(--bvc-glow-magenta); } body.home .bvc-home-btn--ghost .elementor-button { background: rgba(255,255,255,0.04) !important; color: var(--bvc-ink) !important; border: 1px solid var(--bvc-border) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } body.home .bvc-home-btn--ghost .elementor-button:hover { background: rgba(124, 58, 237, 0.14) !important; border-color: #a855f7 !important; transform: translateY(-2px); } body.home .bvc-home-btn--xl .elementor-button { padding: 22px 44px !important; font-size: 16px !important; } body.home .bvc-home-btn--centered { text-align: center; margin-top: 28px; } /* Trust chips */ body.home .bvc-home-trust-chips { margin-top: 36px; } body.home .bvc-home-trust-chips .elementor-icon-list-items { gap: 10px !important; flex-wrap: wrap; } body.home .bvc-home-trust-chips .elementor-icon-list-item { padding: 8px 16px !important; background: rgba(255,255,255,0.04); border: 1px solid var(--bvc-border); border-radius: 999px; margin: 0 !important; } body.home .bvc-home-trust-chips .elementor-icon-list-text { color: var(--bvc-body) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.02em !important; } body.home .bvc-home-trust-chips .elementor-icon-list-icon i, body.home .bvc-home-trust-chips .elementor-icon-list-icon svg { color: var(--bvc-accent) !important; fill: var(--bvc-accent) !important; font-size: 13px !important; width: 13px !important; height: 13px !important; } /* 3D hero card — float + tilt for the buyvcc-card-preview widget */ body.home .bvc-home-hero__right { perspective: 1400px; } body.home .bvc-home-hero__right .elementor-widget-buyvcc-card-preview { display: flex; justify-content: center; } body.home .bvc-home-hero__right .bvc-card3d { animation: bvc-hero-float 6s ease-in-out infinite alternate; } @keyframes bvc-hero-float { 0% { transform: translateY(0); } 100% { transform: translateY(-12px); } } /* ════════════════════════════════════════════════════════════════════════ 2 · LIVE ACTIVITY (slim social-proof row) ════════════════════════════════════════════════════════════════════════ */ body.home .bvc-home-activity { background: var(--bvc-bg) !important; } body.home .bvc-home-activity .bvc-activity { max-width: 720px; margin: 0 auto; } /* ════════════════════════════════════════════════════════════════════════ 3 · STATS STRIP ════════════════════════════════════════════════════════════════════════ */ body.home .bvc-home-stats { background: linear-gradient(180deg, rgba(20, 22, 47, 0.85) 0%, rgba(15, 17, 38, 0.85) 100%) !important; border-top: 1px solid var(--bvc-border); border-bottom: 1px solid var(--bvc-border); } body.home .bvc-home-stats .bvc-stat__value, body.home .bvc-home-stats .bvc-stat__value .bvc-stat__num, body.home .bvc-home-stats .bvc-stat__value .bvc-stat__prefix, body.home .bvc-home-stats .bvc-stat__value .bvc-stat__suffix { font-size: clamp(28px, 3vw, 38px) !important; font-weight: 800 !important; letter-spacing: -0.02em !important; } body.home .bvc-home-stats .bvc-stat__label { color: var(--bvc-mute) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.10em !important; text-transform: uppercase !important; margin-top: 4px; } /* ════════════════════════════════════════════════════════════════════════ 4 · HOW IT WORKS ════════════════════════════════════════════════════════════════════════ */ body.home .bvc-home-how { background: var(--bvc-bg) !important; } body.home .bvc-home-how .bvc-timeline { padding-top: 14px; padding-bottom: 14px; } /* Failsafe — keep timeline steps visible if observer hasn't fired yet */ body.home .bvc-timeline--anim .bvc-timeline__step { opacity: 1 !important; transform: none !important; } body.home .bvc-timeline__title { color: var(--bvc-ink) !important; font-size: 18px !important; } body.home .bvc-timeline__desc { color: var(--bvc-body) !important; } /* ════════════════════════════════════════════════════════════════════════ 5 · FEATURED PRODUCTS (now powered by buyvcc-products-carousel) ════════════════════════════════════════════════════════════════════════ */ body.home .bvc-home-featured { background: radial-gradient(60% 50% at 50% 0%, rgba(124, 58, 237, 0.12) 0%, transparent 70%), var(--bvc-bg) !important; } /* Carousel sits inside the 1280px container; nav arrows are positioned at -22px which is fine since the container has 24px side padding. */ body.home .bvc-home-featured-carousel { padding: 0; } /* ════════════════════════════════════════════════════════════════════════ 6 · WHY US (6-up feature grid — 3×2 on desktop) ════════════════════════════════════════════════════════════════════════ */ body.home .bvc-home-why { background: var(--bvc-bg) !important; } body.home .bvc-home-why > .elementor-container { flex-wrap: wrap !important; gap: 22px; } body.home .bvc-home-why > .elementor-container > .elementor-column { flex: 0 0 calc(33.333% - 16px) !important; max-width: calc(33.333% - 16px) !important; } @media (max-width: 1024px) { body.home .bvc-home-why > .elementor-container > .elementor-column { flex: 0 0 calc(50% - 11px) !important; max-width: calc(50% - 11px) !important; } } @media (max-width: 600px) { body.home .bvc-home-why > .elementor-container > .elementor-column { flex: 0 0 100% !important; max-width: 100% !important; } } body.home .bvc-home-feature { padding: 28px 26px !important; background: linear-gradient(180deg, rgba(20, 22, 47, 0.60), rgba(15, 17, 38, 0.60)) !important; border: 1px solid var(--bvc-border); border-radius: 18px; height: 100%; transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.28s ease, box-shadow 0.28s ease; } body.home .bvc-home-feature:hover { transform: translateY(-4px); border-color: var(--bvc-border-hot); box-shadow: 0 24px 50px rgba(53, 98, 244, 0.18); } body.home .bvc-home-feature .elementor-icon-box-wrapper { gap: 18px; } body.home .bvc-home-feature .elementor-icon { width: 44px !important; height: 44px !important; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 12px; background: var(--bvc-grad); flex: 0 0 44px; } body.home .bvc-home-feature .elementor-icon i, body.home .bvc-home-feature .elementor-icon svg { color: #ffffff !important; fill: #ffffff !important; font-size: 18px !important; width: 18px !important; height: 18px !important; } body.home .bvc-home-feature .elementor-icon-box-title { margin: 0 0 6px !important; } body.home .bvc-home-feature .elementor-icon-box-title, body.home .bvc-home-feature .elementor-icon-box-title a { color: var(--bvc-ink) !important; font-size: 17px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; } body.home .bvc-home-feature .elementor-icon-box-description { color: var(--bvc-body) !important; font-size: 14px !important; line-height: 1.6 !important; } /* ════════════════════════════════════════════════════════════════════════ 7 · TESTIMONIALS (now powered by buyvcc-testimonials-carousel) ════════════════════════════════════════════════════════════════════════ */ body.home .bvc-home-testimonials { background: radial-gradient(70% 50% at 50% 100%, rgba(53, 98, 244, 0.14) 0%, transparent 70%), var(--bvc-bg) !important; } body.home .bvc-home-testimonials-carousel { padding: 0; } /* ════════════════════════════════════════════════════════════════════════ 8 · FAQ ════════════════════════════════════════════════════════════════════════ */ body.home .bvc-home-faq { background: var(--bvc-bg) !important; } body.home .bvc-home-faq__col { max-width: 820px; margin: 0 auto !important; } body.home .bvc-home-faq .bvc-faq__btn span, body.home .bvc-home-faq .bvc-faq__q { color: var(--bvc-ink) !important; } body.home .bvc-home-faq .bvc-faq__panel, body.home .bvc-home-faq .bvc-faq__panel p { color: var(--bvc-body) !important; } /* ════════════════════════════════════════════════════════════════════════ 9 · FINAL CTA ════════════════════════════════════════════════════════════════════════ */ body.home .bvc-home-cta { position: relative; overflow: hidden; background: var(--bvc-bg) !important; } body.home .bvc-home-cta::before { content: ""; position: absolute; inset: 40px; border-radius: 28px; background: radial-gradient(60% 80% at 0% 0%, rgba(53, 98, 244, 0.85) 0%, transparent 60%), radial-gradient(60% 80% at 100% 100%, rgba(195, 57, 218, 0.85) 0%, transparent 60%), #1a1e38; z-index: 0; } body.home .bvc-home-cta::after { content: ""; position: absolute; inset: 41px; border-radius: 27px; background: rgba(13, 15, 31, 0.32); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 0; } body.home .bvc-home-cta__col { position: relative; z-index: 2; text-align: center; padding: 60px 24px !important; } body.home .bvc-home-cta__title .elementor-heading-title { font-size: clamp(36px, 5vw, 64px) !important; font-weight: 800 !important; letter-spacing: -0.025em !important; color: var(--bvc-ink) !important; margin: 0 0 14px !important; text-shadow: 0 4px 32px rgba(0, 0, 0, 0.45); } body.home .bvc-home-cta__sub p { color: rgba(255, 255, 255, 0.88) !important; font-size: clamp(16px, 1.4vw, 19px) !important; margin: 0 0 36px !important; } /* ════════════════════════════════════════════════════════════════════════ Responsive ════════════════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { body.home .bvc-home-hero { padding-top: 80px !important; padding-bottom: 80px !important; } body.home .bvc-home-headline .elementor-heading-title { font-size: 44px !important; } body.home .bvc-home-hero__right { margin-top: 40px; } body.home .bvc-home-hero__right .bvc-card3d { animation: none; } } @media (max-width: 768px) { body.home .bvc-home-hero, body.home .bvc-home-how, body.home .bvc-home-featured, body.home .bvc-home-why, body.home .bvc-home-testimonials, body.home .bvc-home-faq, body.home .bvc-home-cta { padding-top: 64px !important; padding-bottom: 64px !important; } body.home .bvc-home-h2 .elementor-heading-title { font-size: 30px !important; } body.home .bvc-home-headline .elementor-heading-title { font-size: 36px !important; } body.home .bvc-home-hero__cta-row .elementor-column { width: 100% !important; margin-bottom: 12px; } body.home .bvc-home-cta::before, body.home .bvc-home-cta::after { inset: 16px; } } @media (prefers-reduced-motion: reduce) { body.home .bvc-home-hero::before, body.home .bvc-home-hero__right .bvc-card3d { animation: none !important; } body.home [class*="bvc-home-"] * { transition: none !important; } } /* ════════════════════════════════════════════════════════════════════════ FIX 1 · Hide the duplicate product image inside the products carousel OceanWP renders with the loop thumbnail twice (once as a direct child of .product-inner, again nested under .woo-entry-inner > .image-wrap). Shop.css already handles this on /shop/. The home carousel needs the same suppression. ════════════════════════════════════════════════════════════════════════ */ body.home .bvc-products-carousel .swiper-wrapper.products > li.product .woo-entry-inner .woo-entry-image, body.home .bvc-products-carousel .swiper-wrapper.products > li.product .woo-entry-inner .woo-entry-image-swap, body.home .bvc-products-carousel .swiper-wrapper.products > li.product .woo-entry-inner li.image-wrap { display: none !important; } /* ════════════════════════════════════════════════════════════════════════ FIX 2 · 3D flip on hover — front (real card image) → CSS-drawn card back Rotates the wrapping element around Y. The original is the front face; ::before paints the surface/magstripe/signature/hologram of the back face; ::after places the gradient BUYVCC.ORG hallmark. ════════════════════════════════════════════════════════════════════════ */ body.home .bvc-products-carousel .product-inner > .woo-entry-image, body.home .bvc-products-carousel .product-inner > .woo-entry-image-swap { perspective: 1200px; position: relative; } body.home .bvc-products-carousel .woo-entry-image > a, body.home .bvc-products-carousel .woo-entry-image-swap > a { position: relative; display: block; transform-style: preserve-3d; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; border-radius: 10px; } body.home .bvc-products-carousel li.product:hover .woo-entry-image > a, body.home .bvc-products-carousel li.product:hover .woo-entry-image-swap > a { transform: rotateY(180deg) !important; } body.home .bvc-products-carousel .woo-entry-image > a > img, body.home .bvc-products-carousel .woo-entry-image-swap > a > img { -webkit-backface-visibility: hidden; backface-visibility: hidden; /* Explicit rotateY(0) gives the its own 3D transform so the engine reliably honours backface-visibility — without it Chrome silently shows the mirrored front face through a flipped object-fit:contain image. */ transform: rotateY(0deg); position: relative; z-index: 1; transition: opacity 0.32s ease 0.30s; } /* Belt-and-braces: when the link rotates past 90°, force the IMG transparent so even browsers that ignore backface-visibility on replaced elements render the back face cleanly. */ body.home .bvc-products-carousel li.product:hover .woo-entry-image > a > img, body.home .bvc-products-carousel li.product:hover .woo-entry-image-swap > a > img { opacity: 0; } /* Back-face surface: magnetic stripe + signature panel + hologram glow + base */ body.home .bvc-products-carousel .woo-entry-image > a::before, body.home .bvc-products-carousel .woo-entry-image-swap > a::before { content: ''; position: absolute; inset: 0; border-radius: inherit; transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; background: /* diagonal pinstripe on signature strip */ repeating-linear-gradient(135deg, transparent 0 4px, rgba(0, 0, 0, 0.06) 4px 5px ) 0 50% / 100% 16% no-repeat, /* signature panel (white band) */ linear-gradient(180deg, transparent 50%, #e8eef5 50%, #e8eef5 66%, transparent 66%), /* magnetic stripe (black band near top) */ linear-gradient(180deg, transparent 16%, #08080f 16%, #08080f 32%, transparent 32%), /* hologram shimmer top-right */ radial-gradient(ellipse 120px 70px at calc(100% - 36px) 22%, rgba(195, 57, 218, 0.30) 0%, rgba(53, 98, 244, 0.16) 45%, transparent 75%), /* card surface */ linear-gradient(135deg, #141632 0%, #0d0f1f 100%); box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.05); } /* Back-face hallmark — gradient brand text bottom-right */ body.home .bvc-products-carousel .woo-entry-image > a::after, body.home .bvc-products-carousel .woo-entry-image-swap > a::after { content: 'BUYVCC · ORG'; position: absolute; bottom: 14px; right: 18px; font-size: 12px; font-weight: 800; letter-spacing: 0.22em; background: linear-gradient(to right, #3562F4 0%, #C339DA 100%); -webkit-background-clip: text; background-clip: text; color: transparent; transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); } /* ════════════════════════════════════════════════════════════════════════ FIX 3 · Live activity → floating toast on viewport bottom-left Lifts the section out of normal flow and pins it to the corner with a gentle slide-in. The section's row-padding becomes irrelevant. ════════════════════════════════════════════════════════════════════════ */ body.home .bvc-home-activity { /* Elementor section-stretched writes `width: ...px; left: 0` inline on this section every resize. Override every property with !important so the toast stays pinned in the bottom-left corner. */ position: fixed !important; left: 20px !important; right: auto !important; bottom: 20px !important; top: auto !important; z-index: 9000 !important; width: auto !important; max-width: 380px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; pointer-events: auto; } body.home .bvc-home-activity > .elementor-container { max-width: 380px !important; margin: 0 !important; padding: 0 !important; } body.home .bvc-home-activity .bvc-live { background: rgba(15, 17, 38, 0.94) !important; border: 1px solid rgba(168, 85, 247, 0.45) !important; border-radius: 14px !important; padding: 12px 16px !important; box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: bvc-toast-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 1s both; } @keyframes bvc-toast-in { from { transform: translateY(32px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @media (max-width: 768px) { body.home .bvc-home-activity { left: 12px; right: 12px; bottom: 12px; max-width: none; } body.home .bvc-home-activity > .elementor-container { max-width: none !important; } } /* Reduce-motion users: skip slide-in + flip */ @media (prefers-reduced-motion: reduce) { body.home .bvc-home-activity .bvc-live { animation: none !important; } body.home .bvc-products-carousel li.product:hover .woo-entry-image > a, body.home .bvc-products-carousel li.product:hover .woo-entry-image-swap > a { transform: none !important; } } /* ════════════════════════════════════════════════════════════════════════ PRODUCT CARD VISUALS for the home carousel ---------------------------------------------------------------------------- Most of shop.css is scoped to `body.woocommerce-shop` / `.post-type-archive- product`, so the card visual rules don't fire on the home page where the same markup appears inside .bvc-products-carousel. Mirror the essential rules here under that selector so the carousel cards look identical to /shop/ and the single-product related carousel. ════════════════════════════════════════════════════════════════════════ */ /* Card container surface */ body.home .bvc-products-carousel ul.products > li.product { background: linear-gradient(180deg, rgba(20,22,47,0.85), rgba(15,17,38,0.85)) !important; border: 1px solid rgba(168, 85, 247, 0.22) !important; border-radius: 14px !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), border-color 0.4s ease, box-shadow 0.4s ease; } body.home .bvc-products-carousel ul.products > li.product:hover { transform: translateY(-4px); border-color: rgba(168, 85, 247, 0.55) !important; box-shadow: 0 26px 60px rgba(53, 98, 244, 0.22), 0 10px 24px rgba(195, 57, 218, 0.18); } /* Wipe OceanWP's default in-card spacing chrome that fights this layout */ body.home .bvc-products-carousel ul.products > li.product .product-inner { padding: 0 !important; } body.home .bvc-products-carousel ul.products > li.product .woo-entry-image, body.home .bvc-products-carousel ul.products > li.product .woo-entry-image-swap { margin: 0 !important; padding: 0 !important; } /* Title */ body.home .bvc-products-carousel ul.products > li.product h2, body.home .bvc-products-carousel ul.products > li.product h3, body.home .bvc-products-carousel ul.products > li.product .woocommerce-loop-product__title, body.home .bvc-products-carousel ul.products > li.product .woocommerce-LoopProduct-link h2, body.home .bvc-products-carousel ul.products > li.product .woocommerce-LoopProduct-link h3 { color: #ffffff !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: -0.005em !important; line-height: 1.3 !important; margin: 6px 18px 8px !important; padding: 0 !important; background: transparent !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: initial !important; } body.home .bvc-products-carousel ul.products > li.product h2 a, body.home .bvc-products-carousel ul.products > li.product h3 a { color: inherit !important; text-decoration: none !important; background-image: none !important; } /* Price — flex row so the variable range "$14.99 – $550.00" stays on one line. Forcing every descendant element to display:inline isn't enough because OceanWP/WC wraps each amount in a that may already be display:block via theme styles; flex on the parent and inline-flex on the first level guarantees a single horizontal row. */ body.home .bvc-products-carousel ul.products > li.product .price { color: #c4b5fd !important; font-size: 18px !important; font-weight: 800 !important; letter-spacing: -0.01em !important; margin: 0 18px 12px !important; background: transparent !important; -webkit-text-fill-color: initial !important; white-space: nowrap !important; display: inline-flex !important; flex-wrap: nowrap !important; align-items: baseline !important; gap: 6px !important; max-width: 100%; overflow: hidden !important; text-overflow: ellipsis !important; } /* Every descendant: keep it inline, no breaks */ body.home .bvc-products-carousel ul.products > li.product .price *, body.home .bvc-products-carousel ul.products > li.product .price .woocommerce-Price-amount, body.home .bvc-products-carousel ul.products > li.product .price bdi, body.home .bvc-products-carousel ul.products > li.product .price span { display: inline !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; color: inherit !important; font-size: inherit !important; font-weight: inherit !important; background: transparent !important; -webkit-text-fill-color: initial !important; } body.home .bvc-products-carousel ul.products > li.product .price del { color: #64748b !important; font-weight: 600 !important; font-size: 14px !important; margin-right: 8px !important; } body.home .bvc-products-carousel ul.products > li.product .price ins { background: transparent !important; text-decoration: none !important; } /* Action row + buttons (Add to cart + Buy Now) */ body.home .bvc-products-carousel ul.products > li.product .bvc-loop-actions { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 10px !important; width: 100% !important; margin: auto 14px 14px !important; } body.home .bvc-products-carousel ul.products > li.product .bvc-loop-add, body.home .bvc-products-carousel ul.products > li.product .bvc-loop-buy-now { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 11px 12px !important; font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; border-radius: 10px !important; text-decoration: none !important; text-align: center !important; white-space: nowrap !important; cursor: pointer !important; transition: transform 0.22s ease, filter 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease !important; background-image: none !important; } body.home .bvc-products-carousel ul.products > li.product .bvc-loop-add { background: rgba(124, 58, 237, 0.10) !important; border: 1px solid rgba(168, 85, 247, 0.40) !important; color: #ffffff !important; box-shadow: none !important; } body.home .bvc-products-carousel ul.products > li.product .bvc-loop-add:hover { background: rgba(124, 58, 237, 0.22) !important; border-color: rgba(168, 85, 247, 0.70) !important; transform: translateY(-1px) !important; } body.home .bvc-products-carousel ul.products > li.product .bvc-loop-buy-now { background: linear-gradient(to right, #3562F4 0%, #C339DA 100%) !important; border: 0 !important; color: #ffffff !important; box-shadow: 0 10px 24px rgba(53, 98, 244, 0.38), 0 4px 12px rgba(195, 57, 218, 0.28) !important; } body.home .bvc-products-carousel ul.products > li.product .bvc-loop-buy-now:hover { filter: brightness(1.06); transform: translateY(-1px) !important; box-shadow: 0 14px 30px rgba(53, 98, 244, 0.48), 0 6px 16px rgba(195, 57, 218, 0.34) !important; } body.home .bvc-products-carousel ul.products > li.product .bvc-loop-buy-now--select { background: rgba(124, 58, 237, 0.10) !important; border: 1px solid rgba(168, 85, 247, 0.40) !important; box-shadow: none !important; } /* "VCC" eyebrow above title (from category meta) */ body.home .bvc-products-carousel ul.products > li.product .product_cat, body.home .bvc-products-carousel ul.products > li.product .product_cats, body.home .bvc-products-carousel ul.products > li.product .product-cat, body.home .bvc-products-carousel ul.products > li.product .cats { display: block; color: #c4b5fd !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; margin: 14px 18px 0 !important; } /* Image area sizing — keep aspect-ratio consistent with shop cards */ body.home .bvc-products-carousel ul.products > li.product .woo-entry-image > a, body.home .bvc-products-carousel ul.products > li.product .woo-entry-image-swap > a { aspect-ratio: 16 / 10; background: linear-gradient(135deg, #1a1e38 0%, #12152b 100%); display: block; border-radius: 12px; /* overflow:hidden defeats `transform-style: preserve-3d` (CSS spec groups overflow-clipped elements into a flat plane), so we move the clip onto the parent .woo-entry-image instead. */ } body.home .bvc-products-carousel ul.products > li.product .woo-entry-image, body.home .bvc-products-carousel ul.products > li.product .woo-entry-image-swap { overflow: hidden; border-radius: 12px; } body.home .bvc-products-carousel ul.products > li.product .woo-entry-image > a > img, body.home .bvc-products-carousel ul.products > li.product .woo-entry-image-swap > a > img { width: 100% !important; height: 100% !important; object-fit: contain !important; padding: 4px !important; /* minimum breathing room only */ display: block !important; /* Image renders cleanly — no blend-mode, no opacity, no filter. */ mix-blend-mode: normal !important; filter: none !important; opacity: 1 !important; background: transparent !important; } /* Hide the price-list (variable products show "$10 - $1000" — keep tidy) */ body.home .bvc-products-carousel ul.products > li.product .price > span:not(:first-child) { /* leave default, but ensure good color */ color: #c4b5fd !important; } /* ──────────────────────────────────────────────────────────────────── Layout repairs — OceanWP injects extras that break our flow: 1. .owp-quick-view link renders as a stacked sibling (~177px tall) instead of an absolute overlay → pin it back to the image area. 2. Empty li.rating leaves a ~27px ghost gap → suppress. 3. li.category .a → re-skin as the "VCC" eyebrow chip above title. 4. The lone .add_to_cart_button outside .product-inner (0x0 but eats margin) → suppress. ──────────────────────────────────────────────────────────────────── */ /* QuickView pill — absolute over the image (matches shop archive) */ body.home .bvc-products-carousel ul.products > li.product .woo-entry-image > a.owp-quick-view, body.home .bvc-products-carousel ul.products > li.product .woo-entry-image .owp-quick-view { position: absolute !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) scale(0.96); width: auto !important; max-width: none !important; height: auto !important; min-width: 0 !important; padding: 9px 16px !important; border: none !important; border-radius: 999px !important; background: linear-gradient(to right, #3562F4 0%, #C339DA 100%) !important; color: #ffffff !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.10em !important; text-transform: uppercase !important; line-height: 1 !important; white-space: nowrap !important; box-shadow: 0 12px 28px rgba(53, 98, 244, 0.40) !important; opacity: 0; pointer-events: none; transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22,1,0.36,1) !important; z-index: 3; aspect-ratio: auto !important; /* override the 16/10 we set on the link siblings */ background-image: linear-gradient(to right, #3562F4 0%, #C339DA 100%) !important; } body.home .bvc-products-carousel ul.products > li.product:hover .woo-entry-image .owp-quick-view { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; } @media (hover: none) { body.home .bvc-products-carousel ul.products > li.product .owp-quick-view { display: none !important; } } /* Hide empty / extra rows */ body.home .bvc-products-carousel ul.products > li.product li.rating, body.home .bvc-products-carousel ul.products > li.product li.image-wrap, body.home .bvc-products-carousel ul.products > li.product > a.button.product_type_simple, body.home .bvc-products-carousel ul.products > li.product > a.button.add_to_cart_button:not(.bvc-loop-add), body.home .bvc-products-carousel ul.products > li.product .screen-reader-text { display: none !important; } /* li.category — make it the "VCC" eyebrow above the title */ body.home .bvc-products-carousel ul.products > li.product li.category { margin: 14px 18px 0 !important; padding: 0 !important; line-height: 1 !important; } body.home .bvc-products-carousel ul.products > li.product li.category a { color: #c4b5fd !important; background-image: none !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; text-decoration: none !important; background: transparent !important; -webkit-text-fill-color: initial !important; } /* The OceanWP wraps title/price/buttons — kill list bullets */ body.home .bvc-products-carousel ul.products > li.product ul.woo-entry-inner { list-style: none !important; margin: 0 !important; padding: 0 !important; } body.home .bvc-products-carousel ul.products > li.product ul.woo-entry-inner > li { list-style: none !important; padding: 0 !important; margin: 0 !important; } /* Tighten title margin since the eyebrow now sits above it */ body.home .bvc-products-carousel ul.products > li.product li.title { margin-top: 8px !important; } body.home .bvc-products-carousel ul.products > li.product li.btn-wrap { margin-top: 6px !important; } /* ════════════════════════════════════════════════════════════════════════ HERO COLUMN VERTICAL CENTERING ════════════════════════════════════════════════════════════════════════ */ body.home .bvc-home-hero > .elementor-container { align-items: center !important; } body.home .bvc-home-hero .bvc-home-hero__left, body.home .bvc-home-hero .bvc-home-hero__right { align-self: center; } body.home .bvc-home-hero .bvc-home-hero__right .elementor-widget-wrap { display: flex !important; align-items: center; justify-content: center; min-height: 420px; /* room for the split-revealed card */ } /* Mobile: full-width stage, no clipping. The card scales to fill its column so the split-revealed faces stay fully visible. The section already has overflow: hidden, so any sub-pixel spill won't cause horizontal scroll. */ @media (max-width: 768px) { body.home .bvc-home-hero .bvc-home-hero__right .elementor-widget-wrap { min-height: 260px !important; padding: 20px 0; overflow: visible !important; } body.home .bvc-home-hero__right { margin-top: 20px !important; } /* Card stage scales to the column width on mobile — never gets clipped. */ body.home .bvc-home-hero__right .bvc-hero-card, body.home .bvc-home-hero__right .bvc-hero-card__stage { width: 100% !important; max-width: 340px !important; margin-left: auto !important; margin-right: auto !important; } body.home .bvc-home-hero__right .bvc-hero-card__stage { aspect-ratio: 1.586 / 1; /* ISO/IEC 7810 ID-1 card ratio */ height: auto !important; } body.home .bvc-home-hero__right .bvc-hero-card__face { width: 100% !important; height: 100% !important; } } @media (max-width: 480px) { body.home .bvc-home-hero__right .bvc-hero-card, body.home .bvc-home-hero__right .bvc-hero-card__stage { max-width: calc(100vw - 56px) !important; /* leaves room for the split spread */ } /* Even gentler split on the smallest viewports so both faces remain inside the column rails. */ .bvc-hero-card.is-revealed .bvc-hero-card__face--front { transform: translate3d(-7%, -6%, 30px) rotate(-3deg) !important; } .bvc-hero-card.is-revealed .bvc-hero-card__face--back { transform: translate3d(7%, 6%, -8px) rotate(3deg) !important; } } /* ════════════════════════════════════════════════════════════════════════ PRODUCT CARD INNER SPACING — let the content breathe ════════════════════════════════════════════════════════════════════════ */ body.home .bvc-products-carousel ul.products > li.product .product-inner { padding: 14px 14px 16px !important; text-align: center !important; } /* Every text row inside the card is centered */ body.home .bvc-products-carousel ul.products > li.product ul.woo-entry-inner, body.home .bvc-products-carousel ul.products > li.product li.category, body.home .bvc-products-carousel ul.products > li.product li.title, body.home .bvc-products-carousel ul.products > li.product li.price-wrap, body.home .bvc-products-carousel ul.products > li.product li.btn-wrap { text-align: center !important; } body.home .bvc-products-carousel ul.products > li.product .woo-entry-image { margin-bottom: 14px !important; } body.home .bvc-products-carousel ul.products > li.product li.category { margin: 0 4px 6px !important; } body.home .bvc-products-carousel ul.products > li.product li.title h2, body.home .bvc-products-carousel ul.products > li.product li.title h3 { margin: 0 4px 10px !important; min-height: 42px; line-height: 1.35 !important; text-align: center !important; } body.home .bvc-products-carousel ul.products > li.product li.price-wrap { margin: 0 4px 14px !important; } body.home .bvc-products-carousel ul.products > li.product li.price-wrap .price { /* .price uses inline-flex; centre via auto margins + justify-content */ margin: 0 auto !important; justify-content: center !important; } body.home .bvc-products-carousel ul.products > li.product li.btn-wrap { margin: 0 !important; padding: 0 4px !important; } body.home .bvc-products-carousel ul.products > li.product .bvc-loop-actions { margin: 0 auto !important; gap: 8px !important; justify-content: center !important; } /* ════════════════════════════════════════════════════════════════════════ HOW-IT-WORKS — premium glass + finance pattern + hover animation ---------------------------------------------------------------------------- Builds on the existing buyvcc-process-timeline widget output: .bvc-timeline > .bvc-timeline__step > {.bvc-timeline__node, ...__title, ...} ════════════════════════════════════════════════════════════════════════ */ body.home .bvc-home-how { position: relative; overflow: hidden; background: /* finance dot-grid pattern */ radial-gradient(rgba(196, 181, 253, 0.06) 1px, transparent 1.5px) 0 0 / 24px 24px, radial-gradient(60% 50% at 50% 50%, rgba(53, 98, 244, 0.10) 0%, transparent 70%), var(--bvc-bg) !important; } body.home .bvc-home-how::before { /* large faded brand-gradient orb for depth */ content: ''; position: absolute; inset: -10%; background: radial-gradient(35% 25% at 80% 30%, rgba(195, 57, 218, 0.12) 0%, transparent 60%), radial-gradient(40% 30% at 20% 70%, rgba(53, 98, 244, 0.14) 0%, transparent 60%); filter: blur(40px); z-index: 0; pointer-events: none; } body.home .bvc-home-how > .elementor-container { position: relative; z-index: 1; } /* The timeline grid becomes 3 glass cards, with the connector line still drawn behind nodes via the widget's own __track element. */ body.home .bvc-home-how .bvc-timeline { --bvc-node-size: 76px; gap: 28px !important; padding-top: 24px !important; } /* Connecting track: enhance with stronger brand gradient + soft glow */ body.home .bvc-home-how .bvc-timeline__track { height: 3px !important; background: linear-gradient(90deg, rgba(53, 98, 244, 0) 0%, rgba(53, 98, 244, 0.55) 20%, rgba(195, 57, 218, 0.55) 80%, rgba(195, 57, 218, 0) 100%) !important; filter: drop-shadow(0 0 8px rgba(53, 98, 244, 0.45)); } /* Each step becomes a glass card */ body.home .bvc-home-how .bvc-timeline__step { position: relative; padding: 36px 26px 30px !important; border-radius: 20px; background: /* subtle vertical stripes pattern */ repeating-linear-gradient(180deg, transparent 0 22px, rgba(168, 85, 247, 0.03) 22px 23px), linear-gradient(180deg, rgba(20, 22, 47, 0.78), rgba(15, 17, 38, 0.78)); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(168, 85, 247, 0.25); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.04); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.45s ease, box-shadow 0.45s ease, background 0.45s ease; isolation: isolate; } /* Decorative finance icon watermark in the corner of each card */ body.home .bvc-home-how .bvc-timeline__step::after { content: ''; position: absolute; bottom: -20px; right: -20px; width: 140px; height: 140px; background-repeat: no-repeat; background-position: center; background-size: contain; opacity: 0.08; pointer-events: none; transition: opacity 0.45s ease, transform 0.45s ease; z-index: 0; } /* Different financial sigil per step (cart / coins / paper-plane echoed subtly via SVG data-URI so we don't need extra assets) */ body.home .bvc-home-how .bvc-timeline__step:nth-child(2)::after { background-image: url("data:image/svg+xml;utf8,$"); } body.home .bvc-home-how .bvc-timeline__step:nth-child(3)::after { background-image: url("data:image/svg+xml;utf8,₿"); } body.home .bvc-home-how .bvc-timeline__step:nth-child(4)::after { background-image: url("data:image/svg+xml;utf8,"); } body.home .bvc-home-how .bvc-timeline__step:hover { transform: translateY(-8px); border-color: rgba(168, 85, 247, 0.65) !important; box-shadow: 0 30px 60px rgba(53, 98, 244, 0.28), 0 16px 32px rgba(195, 57, 218, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.06); background: repeating-linear-gradient(180deg, transparent 0 22px, rgba(168, 85, 247, 0.06) 22px 23px), linear-gradient(180deg, rgba(28, 30, 60, 0.85), rgba(20, 22, 47, 0.85)); } body.home .bvc-home-how .bvc-timeline__step:hover::after { opacity: 0.18; transform: rotate(-8deg) scale(1.05); } /* Step node — bigger, gradient-bordered orb */ body.home .bvc-home-how .bvc-timeline__node { width: 76px !important; height: 76px !important; background: radial-gradient(60% 50% at 50% 30%, rgba(53, 98, 244, 0.30) 0%, transparent 70%), linear-gradient(180deg, #1a1e38 0%, #12152b 100%) !important; border: 2px solid rgba(168, 85, 247, 0.45) !important; box-shadow: 0 8px 24px rgba(53, 98, 244, 0.30), inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important; margin-bottom: 22px !important; } body.home .bvc-home-how .bvc-timeline__step:hover .bvc-timeline__node { border-color: #C339DA !important; box-shadow: 0 0 0 6px rgba(195, 57, 218, 0.14), 0 14px 30px rgba(53, 98, 244, 0.42) !important; transform: translateY(-6px); } /* Numbered badge — brand gradient pill in top-right of node */ body.home .bvc-home-how .bvc-timeline__num { width: 30px !important; height: 30px !important; background: linear-gradient(to right, #3562F4 0%, #C339DA 100%) !important; font-size: 13px !important; box-shadow: 0 6px 16px rgba(195, 57, 218, 0.42) !important; top: -10px !important; right: -10px !important; border: 2px solid #0d0f1f; } /* Elementor renders FA icons as SVG with fill="currentColor", so we drive colour through CSS `color` on the parent. The previous rule referenced a non-existent which made the icon invisible. */ body.home .bvc-home-how .bvc-timeline__icon { color: #ffffff !important; display: inline-flex; align-items: center; justify-content: center; } body.home .bvc-home-how .bvc-timeline__icon svg { width: 30px !important; height: 30px !important; fill: currentColor !important; } body.home .bvc-home-how .bvc-timeline__icon svg * { fill: currentColor !important; } body.home .bvc-home-how .bvc-timeline__icon i { color: #ffffff !important; font-size: 28px !important; } body.home .bvc-home-how .bvc-timeline__title { font-size: 19px !important; font-weight: 800 !important; color: #ffffff !important; letter-spacing: -0.01em !important; margin: 0 0 10px !important; position: relative; z-index: 1; } body.home .bvc-home-how .bvc-timeline__desc { color: #cbd5e1 !important; font-size: 14.5px !important; line-height: 1.65 !important; max-width: none !important; position: relative; z-index: 1; } /* ════════════════════════════════════════════════════════════════════════ FAQ — premium glass cards on finance grid background ════════════════════════════════════════════════════════════════════════ */ body.home .bvc-home-faq { position: relative; overflow: hidden; background: /* finance grid pattern */ linear-gradient(rgba(196, 181, 253, 0.04) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(196, 181, 253, 0.04) 1px, transparent 1px) 0 0 / 32px 32px, radial-gradient(60% 50% at 50% 30%, rgba(53, 98, 244, 0.08) 0%, transparent 70%), var(--bvc-bg) !important; } body.home .bvc-home-faq::before { content: ''; position: absolute; top: -10%; right: -8%; width: 420px; height: 420px; background: radial-gradient(circle, rgba(195, 57, 218, 0.16) 0%, transparent 60%); filter: blur(38px); pointer-events: none; z-index: 0; } body.home .bvc-home-faq::after { content: ''; position: absolute; bottom: -10%; left: -8%; width: 420px; height: 420px; background: radial-gradient(circle, rgba(53, 98, 244, 0.18) 0%, transparent 60%); filter: blur(38px); pointer-events: none; z-index: 0; } body.home .bvc-home-faq > .elementor-container { position: relative; z-index: 1; } /* Each FAQ item: glass card with pattern that brightens on hover */ body.home .bvc-home-faq .bvc-faq__item { position: relative; margin-bottom: 14px !important; background: /* subtle finance circuitry on the card */ radial-gradient(rgba(196, 181, 253, 0.08) 1px, transparent 1.5px) 0 0 / 18px 18px, linear-gradient(180deg, rgba(20, 22, 47, 0.72), rgba(15, 17, 38, 0.72)) !important; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(168, 85, 247, 0.28) !important; border-radius: 16px !important; overflow: hidden; transition: border-color 0.32s ease, box-shadow 0.32s ease, background-position 0.6s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1) !important; background-position: 0 0, center !important; } body.home .bvc-home-faq .bvc-faq__item::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: /* directional glow pattern shown on hover */ radial-gradient(70% 60% at 0% 0%, rgba(53, 98, 244, 0.16) 0%, transparent 60%), radial-gradient(70% 60% at 100% 100%, rgba(195, 57, 218, 0.14) 0%, transparent 60%); opacity: 0; transition: opacity 0.45s ease; pointer-events: none; z-index: 0; } body.home .bvc-home-faq .bvc-faq__item:hover { border-color: rgba(195, 57, 218, 0.55) !important; transform: translateY(-2px); box-shadow: 0 18px 40px rgba(53, 98, 244, 0.16); background-position: -18px -18px, center !important; } body.home .bvc-home-faq .bvc-faq__item:hover::before { opacity: 1; } body.home .bvc-home-faq .bvc-faq__item:has(.bvc-faq__btn[aria-expanded="true"]) { border-color: rgba(168, 85, 247, 0.65) !important; box-shadow: 0 20px 44px rgba(53, 98, 244, 0.22), 0 0 0 1px rgba(168, 85, 247, 0.25) inset !important; } body.home .bvc-home-faq .bvc-faq__item:has(.bvc-faq__btn[aria-expanded="true"])::before { opacity: 1; } /* Question button — bigger, brand-numbered */ body.home .bvc-home-faq .bvc-faq__btn { position: relative; z-index: 1; padding: 22px 26px !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: -0.005em; } /* Subtle counter pill on the left of each question, set via the FAQ widget's render order (CSS counter on parent .bvc-faq) */ body.home .bvc-home-faq .bvc-faq { counter-reset: bvc-faq-n; } body.home .bvc-home-faq .bvc-faq__item { counter-increment: bvc-faq-n; } body.home .bvc-home-faq .bvc-faq__q::before { content: counter(bvc-faq-n, decimal-leading-zero); display: inline-block; margin-right: 14px; padding: 4px 8px; border-radius: 8px; background: linear-gradient(to right, #3562F4 0%, #C339DA 100%); color: #ffffff; font-family: 'Courier New', ui-monospace, monospace; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; vertical-align: 2px; box-shadow: 0 4px 10px rgba(53, 98, 244, 0.35); } /* Toggle icon — brand-tinted circle */ body.home .bvc-home-faq .bvc-faq__icon { width: 32px !important; height: 32px !important; border-radius: 50%; background: rgba(124, 58, 237, 0.18); border: 1px solid rgba(168, 85, 247, 0.45); color: #ffffff !important; } body.home .bvc-home-faq .bvc-faq__btn[aria-expanded="true"] .bvc-faq__icon { background: linear-gradient(135deg, #3562F4 0%, #C339DA 100%); border-color: transparent; box-shadow: 0 8px 20px rgba(195, 57, 218, 0.45); } body.home .bvc-home-faq .bvc-faq__a { position: relative; z-index: 1; padding: 0 26px 22px !important; font-size: 14.5px !important; line-height: 1.7 !important; color: #cbd5e1 !important; } /* Section heading sits inside the head-row above; tighten the column */ body.home .bvc-home-faq .bvc-home-faq__col { max-width: 820px; margin: 0 auto !important; } @media (max-width: 768px) { body.home .bvc-home-faq .bvc-faq__btn { padding: 18px 20px !important; font-size: 15px !important; } body.home .bvc-home-faq .bvc-faq__a { padding: 0 20px 18px !important; } body.home .bvc-home-faq .bvc-faq__q::before { display: none; } } /* Reusable SVG gradient — injected once per page via inline svg below. We reference it via fill: url(#bvc-icon-grad) inside the timeline */ .bvc-icon-grad-defs { position: absolute; width: 0; height: 0; overflow: hidden; } /* ════════════════════════════════════════════════════════════════════════ FINAL CTA — full rebuild ---------------------------------------------------------------------------- Replaces the simple gradient panel with a richer composition: · Multi-layer gradient + floating mesh orbs (animated) · Subtle finance-grid pattern overlay · Two CSS-drawn floating card silhouettes (top-right + bottom-left) · Bigger headline with gradient sweep + small "★ 4.9 trust badge" · Beefier CTA button with glow + animated chevron · Trust-signal strip rendered via ::after on the col (single CSS line) ════════════════════════════════════════════════════════════════════════ */ /* Outer section — kill the previous simple inset panel and rebuild */ body.home .bvc-home-cta { position: relative; overflow: hidden; background: var(--bvc-bg) !important; padding: 130px 24px !important; } body.home .bvc-home-cta::before, body.home .bvc-home-cta::after { display: none !important; } /* nuke the old inset frame */ /* The col becomes a styled "card" container holding all CTA content. */ body.home .bvc-home-cta .bvc-home-cta__col { position: relative; z-index: 2; border-radius: 28px; padding: 70px 24px 96px !important; overflow: hidden; isolation: isolate; background: /* layered finance grid */ linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 36px 36px, linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 36px 36px, /* the bold gradient panel itself */ radial-gradient(60% 80% at 0% 0%, rgba(53, 98, 244, 0.95) 0%, transparent 55%), radial-gradient(60% 80% at 100% 100%, rgba(195, 57, 218, 0.95) 0%, transparent 55%), linear-gradient(135deg, #14163a 0%, #1a1d4a 60%, #2a1a3a 100%); box-shadow: 0 30px 70px rgba(53, 98, 244, 0.30), 0 16px 40px rgba(195, 57, 218, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 0 0 1px rgba(168, 85, 247, 0.30); } /* Animated gradient sweep across the panel */ body.home .bvc-home-cta .bvc-home-cta__col::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.08) 50%, transparent 70%); transform: translateX(-100%); animation: bvc-cta-sweep 8s ease-in-out infinite; pointer-events: none; z-index: 1; } @keyframes bvc-cta-sweep { 0%, 100% { transform: translateX(-100%); } 50% { transform: translateX(100%); } } /* Two floating CSS-drawn card silhouettes for depth */ body.home .bvc-home-cta::after { /* re-enable the ::after we disabled at top, now for ornaments */ display: block !important; content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; background-repeat: no-repeat; background-position: /* top-right card SVG */ calc(100% - 60px) 80px, /* bottom-left card SVG */ 60px calc(100% - 60px), /* floating coin top-left */ 14% 20%, /* floating coin bottom-right */ 82% 78%; background-size: 240px 150px, 200px 125px, 60px 60px, 48px 48px; background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,$"), url("data:image/svg+xml;utf8,₿"); animation: bvc-cta-float 18s ease-in-out infinite alternate; } @keyframes bvc-cta-float { 0% { background-position: calc(100% - 60px) 80px, 60px calc(100% - 60px), 14% 20%, 82% 78%; } 100% { background-position: calc(100% - 56px) 92px, 66px calc(100% - 66px), 16% 24%, 80% 76%; } } /* Trust badge above the headline (★ 4.9 · 10,000+ customers) — drawn via ::before on the heading widget so we don't need to change the JSON. */ body.home .bvc-home-cta__title { position: relative; z-index: 2; } body.home .bvc-home-cta__title::before { content: '★ 4.9 · 10,000+ customers'; display: inline-flex; align-items: center; margin: 0 auto 26px; padding: 8px 18px; border-radius: 999px; background: rgba(13, 15, 31, 0.55); border: 1px solid rgba(168, 85, 247, 0.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fbbf24; font-size: 13px; font-weight: 700; letter-spacing: 0.10em; white-space: nowrap; } body.home .bvc-home-cta__title .elementor-widget-container { display: flex; flex-direction: column; align-items: center; } /* Title — bigger, brand gradient sweep */ body.home .bvc-home-cta__title .elementor-heading-title { font-size: clamp(40px, 5.8vw, 72px) !important; font-weight: 800 !important; letter-spacing: -0.03em !important; margin: 0 0 18px !important; background: linear-gradient(95deg, #ffffff 0%, #ffffff 40%, #f3c2ff 55%, #ffffff 70%, #ffffff 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; text-shadow: none !important; animation: bvc-title-sheen 6s ease-in-out infinite; } @keyframes bvc-title-sheen { 0%, 100% { background-position: 100% 50%; } 50% { background-position: 0% 50%; } } body.home .bvc-home-cta__sub { position: relative; z-index: 2; } body.home .bvc-home-cta__sub p { color: rgba(255, 255, 255, 0.92) !important; font-size: clamp(16px, 1.4vw, 19px) !important; margin: 0 auto 40px !important; max-width: 36ch; } /* CTA button — bigger, brand-glow, glassmorphic backdrop, chevron grows */ body.home .bvc-home-cta .bvc-home-btn--xl { position: relative; z-index: 2; } body.home .bvc-home-cta .bvc-home-btn--xl .elementor-button { padding: 22px 56px 22px 44px !important; font-size: 16px !important; letter-spacing: 0.16em !important; border-radius: 999px !important; background: #ffffff !important; color: #14163a !important; font-weight: 800 !important; box-shadow: 0 22px 50px rgba(0, 0, 0, 0.32), 0 0 0 6px rgba(255, 255, 255, 0.10), 0 0 50px rgba(255, 255, 255, 0.18) !important; } body.home .bvc-home-cta .bvc-home-btn--xl .elementor-button:hover { background: #ffffff !important; filter: none !important; transform: translateY(-2px) !important; box-shadow: 0 28px 60px rgba(0, 0, 0, 0.40), 0 0 0 8px rgba(255, 255, 255, 0.12), 0 0 70px rgba(195, 57, 218, 0.42) !important; } /* Chevron after button text */ body.home .bvc-home-cta .bvc-home-btn--xl .elementor-button-text::after { content: '→'; display: inline-block; margin-left: 10px; font-size: 18px; font-weight: 800; transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); background: linear-gradient(to right, #3562F4 0%, #C339DA 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } body.home .bvc-home-cta .bvc-home-btn--xl .elementor-button:hover .elementor-button-text::after { transform: translateX(6px); } /* Trust-signal strip pinned to the bottom of the panel via absolute positioning (Elementor's widget-wrap absorbs the full col height, so a relative ::after collapses). The col reserves 100px bottom padding to keep clear space below the button. */ body.home .bvc-home-cta .bvc-home-cta__col::after { content: '✓ No KYC ✓ 5-min delivery ✓ 190+ countries ✓ 24/7 support'; position: absolute; left: 24px; right: 24px; bottom: 36px; z-index: 2; text-align: center; color: rgba(255, 255, 255, 0.85); font-size: 13px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; font-feature-settings: 'tnum'; white-space: pre-wrap; pointer-events: none; } @media (max-width: 1024px) { body.home .bvc-home-cta .bvc-home-cta__col { padding: 56px 24px 70px !important; } body.home .bvc-home-cta::after { background-size: 180px 113px, 150px 94px, 48px 48px, 38px 38px; } } @media (max-width: 768px) { body.home .bvc-home-cta { padding: 70px 16px !important; } /* Reserve enough bottom space (130px) so the absolute-positioned trust strip — which wraps to 2 lines on narrow screens — never sits on top of the Get my card button. */ body.home .bvc-home-cta .bvc-home-cta__col { padding: 46px 22px 130px !important; border-radius: 22px; } body.home .bvc-home-cta::after { background-size: 120px 75px, 100px 63px, 0 0, 0 0; background-position: calc(100% - 18px) 18px, 18px calc(100% - 18px), 0 0, 0 0; } body.home .bvc-home-cta__title::before { font-size: 11px; padding: 6px 14px; } body.home .bvc-home-cta .bvc-home-cta__col::after { font-size: 11px; letter-spacing: 0.04em; line-height: 1.85; bottom: 26px; left: 16px; right: 16px; } } @media (max-width: 480px) { body.home .bvc-home-cta .bvc-home-cta__col { padding-bottom: 150px !important; } body.home .bvc-home-cta .bvc-home-cta__col::after { font-size: 10.5px; letter-spacing: 0.03em; line-height: 2; } } @media (prefers-reduced-motion: reduce) { body.home .bvc-home-cta .bvc-home-cta__col::before, body.home .bvc-home-cta__title .elementor-heading-title, body.home .bvc-home-cta::after { animation: none !important; } } /* ════════════════════════════════════════════════════════════════════════ Carousel-section breathing room — give each carousel an outer gutter so adjacent slides don't kiss the section's container edge after the wider spaceBetween. ════════════════════════════════════════════════════════════════════════ */ body.home .bvc-home-featured-carousel, body.home .bvc-home-testimonials-carousel { padding: 6px 4px 0 !important; }