/* ========================================================================== BEST CHRISTMAS SWEATER - OFFICIAL FESTIVE & UX ENHANCEMENT SUITE Namespace: bcs-* (with backward-compatibility aliases for zv-*) ========================================================================== */ /* -------------------------------------------------------------------------- 1. Theme Variables & Festive Palettes -------------------------------------------------------------------------- */ :root { --bcs-xmas-hero-bg: url('https://img-va.myshopline.com/image/store/1789714266278/473d9331de554ad0b906f1b35fe847e8.jpg'); --bcs-hw-hero-bg: url('https://img-va.myshopline.com/image/store/1789714266278/fd6f10fbe37e4bbbb5c7c63511503ba6.jpg'); --bcs-xmas-portal-bg: url('https://img-va.myshopline.com/image/store/1789714266278/606ebb2865314617940e3fbc01fdcdb6.jpg'); --bcs-hw-portal-bg: url('https://img-va.myshopline.com/image/store/1789714266278/e68381f49a1f4b70b5ae352b210dee4e.jpg'); --zv-xmas-hero-bg: var(--bcs-xmas-hero-bg); --zv-hw-hero-bg: var(--bcs-hw-hero-bg); --bcs-primary: #121212; --bcs-accent: #c41e3a; --bcs-glow: rgba(196, 30, 58, 0.35); } /* Classic Mode */ html[data-bcs-festival="classic"], html[data-zv-festival="classic"], html:not([data-bcs-festival]) { --bcs-primary: #121212; --bcs-accent: #b8860b; --bcs-glow: rgba(184, 134, 11, 0.25); } /* Halloween Mode - Rich Spooky Ambiance */ html[data-bcs-festival="halloween"], html[data-zv-festival="halloween"] { --bcs-primary: #1a0f2e; --bcs-accent: #ff6600; --bcs-glow: rgba(255, 102, 0, 0.45); } /* Halloween Site-Wide Atmosphere Enhancements */ html[data-bcs-festival="halloween"] body, html[data-zv-festival="halloween"] body { background-color: #fcf9f5 !important; background-image: radial-gradient(circle at 12% 8%, rgba(255, 102, 0, 0.07) 0%, transparent 45%), radial-gradient(circle at 88% 14%, rgba(138, 43, 226, 0.06) 0%, transparent 45%), radial-gradient(circle at 50% 60%, rgba(255, 102, 0, 0.04) 0%, transparent 50%) !important; background-attachment: fixed !important; } /* Header Spooky Accent */ html[data-bcs-festival="halloween"] header, html[data-bcs-festival="halloween"] .header-wrapper, html[data-zv-festival="halloween"] header, html[data-zv-festival="halloween"] .header-wrapper { border-bottom: 1px solid rgba(255, 102, 0, 0.22) !important; box-shadow: 0 4px 20px rgba(255, 102, 0, 0.08) !important; } /* Highlight Halloween Nav Menu Item */ html[data-bcs-festival="halloween"] .header-nav a[href*="halloween"], html[data-zv-festival="halloween"] .header-nav a[href*="halloween"] { color: #ff6600 !important; font-weight: 700 !important; text-shadow: 0 0 10px rgba(255, 102, 0, 0.3) !important; } /* Christmas Mode */ html[data-bcs-festival="christmas"], html[data-zv-festival="christmas"] { --bcs-primary: #0b1f14; --bcs-accent: #c41e3a; --bcs-glow: rgba(196, 30, 58, 0.45); } /* -------------------------------------------------------------------------- 2. Header Capsule Switcher (Mobile >=44px, 0ms Instant Feedback) -------------------------------------------------------------------------- */ .bcs-festive-capsule, .zv-festive-capsule { display: inline-flex !important; align-items: center !important; background: rgba(255, 255, 255, 0.94) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; border-radius: 9999px !important; padding: 3px !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important; touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; user-select: none !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } .bcs-capsule-btn, .zv-capsule-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; padding: 6px 14px !important; min-height: 34px !important; border-radius: 9999px !important; border: none !important; background: transparent !important; color: #555555 !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1 !important; cursor: pointer !important; touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important; } .bcs-capsule-btn:hover, .zv-capsule-btn:hover { color: #111111 !important; background: rgba(0, 0, 0, 0.04) !important; } /* Active Button Illuminations */ .bcs-capsule-btn.active, .zv-capsule-btn.active { color: #ffffff !important; font-weight: 700 !important; } .bcs-capsule-btn[data-festival="classic"].active, .zv-capsule-btn[data-festival="classic"].active { background: #1e1e1e !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important; } .bcs-capsule-btn[data-festival="halloween"].active, .zv-capsule-btn[data-festival="halloween"].active { background: linear-gradient(135deg, #ff6600 0%, #d84315 100%) !important; box-shadow: 0 2px 14px rgba(255, 102, 0, 0.55) !important; } .bcs-capsule-btn[data-festival="christmas"].active, .zv-capsule-btn[data-festival="christmas"].active { background: linear-gradient(135deg, #c41e3a 0%, #8b0000 100%) !important; box-shadow: 0 2px 14px rgba(196, 30, 58, 0.55) !important; } .bcs-capsule-icon, .zv-capsule-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 16px !important; height: 16px !important; font-size: 14px !important; } .bcs-capsule-icon svg, .zv-capsule-icon svg { width: 14px !important; height: 14px !important; fill: currentColor !important; } /* Mobile Switcher Standards (>=44px touch targets) */ @media (max-width: 768px) { .bcs-festive-capsule, .zv-festive-capsule { padding: 2px !important; max-width: 100% !important; } .bcs-capsule-btn, .zv-capsule-btn { min-height: 44px !important; padding: 8px 12px !important; font-size: 13px !important; } .bcs-capsule-text, .zv-capsule-text { display: inline-block !important; } } /* -------------------------------------------------------------------------- 3. Ambient Particle Overlays (Sky Flying Bats & Crystalline Snow) Notice: Non-intrusive! Only in upper sky & gentle background snow. -------------------------------------------------------------------------- */ .bcs-particles-container, .zv-particles-container { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; pointer-events: none !important; z-index: 999980 !important; overflow: hidden !important; contain: strict !important; } /* Default state: both hidden */ .bcs-particles-container, .zv-particles-container, .bcs-bats-container, .zv-bats-container, .bcs-snow-container, .zv-snow-container { display: none !important; } /* Show Halloween bat overlay ONLY in Halloween mode AND floating is not disabled */ html[data-bcs-festival="halloween"]:not(.bcs-floating-off) .bcs-bats-container, html[data-bcs-festival="halloween"]:not(.bcs-floating-off) .zv-bats-container, html[data-zv-festival="halloween"]:not(.bcs-floating-off) .bcs-bats-container, html[data-zv-festival="halloween"]:not(.bcs-floating-off) .zv-bats-container { display: block !important; } /* Show Christmas snow overlay ONLY in Christmas mode AND floating is not disabled */ html[data-bcs-festival="christmas"]:not(.bcs-floating-off) .bcs-snow-container, html[data-bcs-festival="christmas"]:not(.bcs-floating-off) .zv-snow-container, html[data-zv-festival="christmas"]:not(.bcs-floating-off) .bcs-snow-container, html[data-zv-festival="christmas"]:not(.bcs-floating-off) .zv-snow-container { display: block !important; } /* Classic mode or unspecified: strictly ZERO particle overlays */ html[data-bcs-festival="classic"] .bcs-particles-container, html[data-zv-festival="classic"] .bcs-particles-container, html:not([data-bcs-festival]) .bcs-particles-container, html:not([data-zv-festival]) .bcs-particles-container { display: none !important; } /* Performance degradation: disable on mobile (<768px) and reduced-motion */ @media (max-width: 768px), (prefers-reduced-motion: reduce) { .bcs-particles-container, .zv-particles-container, .bcs-bats-container, .zv-bats-container, .bcs-snow-container, .zv-snow-container, .bcs-hw-particle, .bcs-crystal-flake, .bcs-fixed-corner-decor, .bcs-fixed-decor-bl, .bcs-fixed-decor-br { display: none !important; } } } /* === TRUE ARTICULATED WING-FLAPPING BATS (LIFELIKE MOTION IN UPPER SKY) === */ .bcs-bat, .zv-bat { position: absolute !important; top: 0 !important; left: 0 !important; pointer-events: none !important; will-change: transform !important; } .bcs-bat-wrap, .zv-bat-wrap { display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative !important; } /* Stable central body with ears & glowing orange eyes */ .bcs-torso, .zv-torso { display: block !important; width: 16px !important; height: 22px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 22' fill='%23190e24'%3E%3Cpath d='M3,0 L5,5 L7,3 L9,3 L11,5 L13,0 L12,7 C14,9 15,12 15,15 C15,19 12,22 8,22 C4,22 1,19 1,15 C1,12 2,9 4,7 Z'/%3E%3Ccircle cx='6' cy='10' r='1.2' fill='%23ff6600'/%3E%3Ccircle cx='10' cy='10' r='1.2' fill='%23ff6600'/%3E%3C/svg%3E") !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; z-index: 2 !important; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5)) !important; } /* Flapping wings attached at shoulder joints */ .bcs-wing, .zv-wing { display: block !important; width: 28px !important; height: 20px !important; background-size: contain !important; background-repeat: no-repeat !important; will-change: transform !important; } .bcs-wing-l, .zv-wing-l { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20' fill='%23190e24'%3E%3Cpath d='M28,11 C20,1 8,2 0,9 C4,13 9,16 14,14 C18,18 23,19 28,11 Z'/%3E%3C/svg%3E") !important; background-position: right center !important; transform-origin: 100% 55% !important; margin-right: -3px !important; animation: bcs-wing-flap-l 0.22s ease-in-out infinite alternate !important; } .bcs-wing-r, .zv-wing-r { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20' fill='%23190e24'%3E%3Cpath d='M0,11 C8,1 20,2 28,9 C24,13 19,16 14,14 C10,18 5,19 0,11 Z'/%3E%3C/svg%3E") !important; background-position: left center !important; transform-origin: 0% 55% !important; margin-left: -3px !important; animation: bcs-wing-flap-r 0.22s ease-in-out infinite alternate !important; } .flap-fast .bcs-wing, .flap-fast .zv-wing { animation-duration: 0.38s !important; } .flap-mid .bcs-wing, .flap-mid .zv-wing { animation-duration: 0.46s !important; } .flap-slow .bcs-wing, .flap-slow .zv-wing { animation-duration: 0.54s !important; } @keyframes bcs-wing-flap-l { 0% { transform: rotate(38deg) scaleY(0.85); } 100% { transform: rotate(-35deg) scaleY(1.05); } } @keyframes bcs-wing-flap-r { 0% { transform: rotate(-38deg) scaleY(0.85); } 100% { transform: rotate(35deg) scaleY(1.05); } } /* Lifelike Gliding Flight Trajectories across Sky (top 50px - 220px) */ @keyframes bcs-fly-lr-1 { 0% { transform: translate3d(-100px, 60px, 0); } 50% { transform: translate3d(50vw, 35px, 0); } 100% { transform: translate3d(105vw, 85px, 0); } } @keyframes bcs-fly-rl-1 { 0% { transform: translate3d(105vw, 110px, 0) scaleX(-1); } 50% { transform: translate3d(45vw, 70px, 0) scaleX(-1); } 100% { transform: translate3d(-100px, 130px, 0) scaleX(-1); } } @keyframes bcs-fly-lr-2 { 0% { transform: translate3d(-100px, 160px, 0) scale(0.85); } 50% { transform: translate3d(55vw, 120px, 0) scale(0.85); } 100% { transform: translate3d(105vw, 180px, 0) scale(0.85); } } @keyframes bcs-fly-rl-2 { 0% { transform: translate3d(105vw, 200px, 0) scale(0.9) scaleX(-1); } 50% { transform: translate3d(40vw, 150px, 0) scale(0.9) scaleX(-1); } 100% { transform: translate3d(-100px, 220px, 0) scale(0.9) scaleX(-1); } } .bcs-bat-1, .zv-bat-1 { animation: bcs-fly-lr-1 13s linear infinite -2s !important; } .bcs-bat-2, .zv-bat-2 { animation: bcs-fly-rl-1 15s linear infinite -7s !important; } .bcs-bat-3, .zv-bat-3 { animation: bcs-fly-lr-2 17s linear infinite -11s !important; } .bcs-bat-4, .zv-bat-4 { animation: bcs-fly-rl-2 14s linear infinite -5s !important; } /* === REAL CRYSTALLINE LACE SNOWFLAKES (片状六角冰晶雪花 - 晶莹半透明背景氛围) === */ .bcs-crystal-flake { position: absolute !important; pointer-events: none !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; will-change: transform, opacity !important; filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.75)) !important; opacity: 0.75 !important; } @keyframes bcs-crystal-fall-1 { 0% { transform: translate3d(0, -40px, 0) rotate(0deg); opacity: 0; } 12% { opacity: 0.85; } 88% { opacity: 0.8; } 100% { transform: translate3d(50px, 105vh, 0) rotate(360deg); opacity: 0; } } @keyframes bcs-crystal-fall-2 { 0% { transform: translate3d(0, -40px, 0) rotate(0deg); opacity: 0; } 12% { opacity: 0.85; } 88% { opacity: 0.8; } 100% { transform: translate3d(-45px, 105vh, 0) rotate(-360deg); opacity: 0; } } .bcs-crystal-1 { left: 5%; width: 28px; height: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'%3E%3Cline x1='20' y1='2' x2='20' y2='38'/%3E%3Cline x1='4' y1='11' x2='36' y2='29'/%3E%3Cline x1='4' y1='29' x2='36' y2='11'/%3E%3Cpath d='M20 7L16 11M20 7L24 11M20 33L16 29M20 33L24 29'/%3E%3Cpath d='M9 14L10 19M9 14L14 15M31 26L30 21M31 26L26 25'/%3E%3Cpath d='M9 26L14 25M9 26L10 21M31 14L26 15M31 14L30 19'/%3E%3Ccircle cx='20' cy='20' r='3' fill='%23ffffff' stroke='none'/%3E%3C/svg%3E"); animation: bcs-crystal-fall-1 11s linear infinite 0.5s !important; } .bcs-crystal-2 { left: 14%; width: 22px; height: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'%3E%3Cline x1='16' y1='2' x2='16' y2='30'/%3E%3Cline x1='4' y1='9' x2='28' y2='23'/%3E%3Cline x1='4' y1='23' x2='28' y2='9'/%3E%3Cpath d='M16 6L13 9M16 6L19 9M16 26L13 23M16 26L19 23'/%3E%3Ccircle cx='16' cy='16' r='2' fill='%23ffffff'/%3E%3C/svg%3E"); animation: bcs-crystal-fall-2 13s linear infinite 3s !important; } .bcs-crystal-3 { left: 23%; width: 32px; height: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'%3E%3Cline x1='20' y1='2' x2='20' y2='38'/%3E%3Cline x1='4' y1='11' x2='36' y2='29'/%3E%3Cline x1='4' y1='29' x2='36' y2='11'/%3E%3Cpath d='M20 7L16 11M20 7L24 11M20 33L16 29M20 33L24 29'/%3E%3Cpath d='M9 14L10 19M9 14L14 15M31 26L30 21M31 26L26 25'/%3E%3Cpath d='M9 26L14 25M9 26L10 21M31 14L26 15M31 14L30 19'/%3E%3Ccircle cx='20' cy='20' r='3' fill='%23ffffff' stroke='none'/%3E%3C/svg%3E"); animation: bcs-crystal-fall-1 10s linear infinite 6s !important; } .bcs-crystal-4 { left: 32%; width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'%3E%3Cline x1='16' y1='2' x2='16' y2='30'/%3E%3Cline x1='4' y1='9' x2='28' y2='23'/%3E%3Cline x1='4' y1='23' x2='28' y2='9'/%3E%3Cpath d='M16 6L13 9M16 6L19 9M16 26L13 23M16 26L19 23'/%3E%3Ccircle cx='16' cy='16' r='2' fill='%23ffffff'/%3E%3C/svg%3E"); animation: bcs-crystal-fall-2 14s linear infinite 2s !important; } .bcs-crystal-5 { left: 42%; width: 26px; height: 26px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'%3E%3Cline x1='20' y1='2' x2='20' y2='38'/%3E%3Cline x1='4' y1='11' x2='36' y2='29'/%3E%3Cline x1='4' y1='29' x2='36' y2='11'/%3E%3Cpath d='M20 7L16 11M20 7L24 11M20 33L16 29M20 33L24 29'/%3E%3Cpath d='M9 14L10 19M9 14L14 15M31 26L30 21M31 26L26 25'/%3E%3Cpath d='M9 26L14 25M9 26L10 21M31 14L26 15M31 14L30 19'/%3E%3Ccircle cx='20' cy='20' r='3' fill='%23ffffff' stroke='none'/%3E%3C/svg%3E"); animation: bcs-crystal-fall-1 12s linear infinite 8s !important; } .bcs-crystal-6 { left: 50%; width: 34px; height: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'%3E%3Cline x1='20' y1='2' x2='20' y2='38'/%3E%3Cline x1='4' y1='11' x2='36' y2='29'/%3E%3Cline x1='4' y1='29' x2='36' y2='11'/%3E%3Cpath d='M20 7L16 11M20 7L24 11M20 33L16 29M20 33L24 29'/%3E%3Cpath d='M9 14L10 19M9 14L14 15M31 26L30 21M31 26L26 25'/%3E%3Cpath d='M9 26L14 25M9 26L10 21M31 14L26 15M31 14L30 19'/%3E%3Ccircle cx='20' cy='20' r='3' fill='%23ffffff' stroke='none'/%3E%3C/svg%3E"); animation: bcs-crystal-fall-2 9s linear infinite 1s !important; } .bcs-crystal-7 { left: 59%; width: 22px; height: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'%3E%3Cline x1='16' y1='2' x2='16' y2='30'/%3E%3Cline x1='4' y1='9' x2='28' y2='23'/%3E%3Cline x1='4' y1='23' x2='28' y2='9'/%3E%3Cpath d='M16 6L13 9M16 6L19 9M16 26L13 23M16 26L19 23'/%3E%3Ccircle cx='16' cy='16' r='2' fill='%23ffffff'/%3E%3C/svg%3E"); animation: bcs-crystal-fall-1 13s linear infinite 5s !important; } .bcs-crystal-8 { left: 68%; width: 30px; height: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'%3E%3Cline x1='20' y1='2' x2='20' y2='38'/%3E%3Cline x1='4' y1='11' x2='36' y2='29'/%3E%3Cline x1='4' y1='29' x2='36' y2='11'/%3E%3Cpath d='M20 7L16 11M20 7L24 11M20 33L16 29M20 33L24 29'/%3E%3Cpath d='M9 14L10 19M9 14L14 15M31 26L30 21M31 26L26 25'/%3E%3Cpath d='M9 26L14 25M9 26L10 21M31 14L26 15M31 14L30 19'/%3E%3Ccircle cx='20' cy='20' r='3' fill='%23ffffff' stroke='none'/%3E%3C/svg%3E"); animation: bcs-crystal-fall-2 11s linear infinite 7s !important; } .bcs-crystal-9 { left: 77%; width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'%3E%3Cline x1='16' y1='2' x2='16' y2='30'/%3E%3Cline x1='4' y1='9' x2='28' y2='23'/%3E%3Cline x1='4' y1='23' x2='28' y2='9'/%3E%3Cpath d='M16 6L13 9M16 6L19 9M16 26L13 23M16 26L19 23'/%3E%3Ccircle cx='16' cy='16' r='2' fill='%23ffffff'/%3E%3C/svg%3E"); animation: bcs-crystal-fall-1 12s linear infinite 2.5s !important; } .bcs-crystal-10 { left: 84%; width: 32px; height: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'%3E%3Cline x1='20' y1='2' x2='20' y2='38'/%3E%3Cline x1='4' y1='11' x2='36' y2='29'/%3E%3Cline x1='4' y1='29' x2='36' y2='11'/%3E%3Cpath d='M20 7L16 11M20 7L24 11M20 33L16 29M20 33L24 29'/%3E%3Cpath d='M9 14L10 19M9 14L14 15M31 26L30 21M31 26L26 25'/%3E%3Cpath d='M9 26L14 25M9 26L10 21M31 14L26 15M31 14L30 19'/%3E%3Ccircle cx='20' cy='20' r='3' fill='%23ffffff' stroke='none'/%3E%3C/svg%3E"); animation: bcs-crystal-fall-2 10s linear infinite 6.5s !important; } .bcs-crystal-11 { left: 91%; width: 22px; height: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'%3E%3Cline x1='16' y1='2' x2='16' y2='30'/%3E%3Cline x1='4' y1='9' x2='28' y2='23'/%3E%3Cline x1='4' y1='23' x2='28' y2='9'/%3E%3Cpath d='M16 6L13 9M16 6L19 9M16 26L13 23M16 26L19 23'/%3E%3Ccircle cx='16' cy='16' r='2' fill='%23ffffff'/%3E%3C/svg%3E"); animation: bcs-crystal-fall-1 14s linear infinite 4s !important; } .bcs-crystal-12 { left: 97%; width: 28px; height: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'%3E%3Cline x1='20' y1='2' x2='20' y2='38'/%3E%3Cline x1='4' y1='11' x2='36' y2='29'/%3E%3Cline x1='4' y1='29' x2='36' y2='11'/%3E%3Cpath d='M20 7L16 11M20 7L24 11M20 33L16 29M20 33L24 29'/%3E%3Cpath d='M9 14L10 19M9 14L14 15M31 26L30 21M31 26L26 25'/%3E%3Cpath d='M9 26L14 25M9 26L10 21M31 14L26 15M31 14L30 19'/%3E%3Ccircle cx='20' cy='20' r='3' fill='%23ffffff' stroke='none'/%3E%3C/svg%3E"); animation: bcs-crystal-fall-2 11s linear infinite 1.5s !important; } /* === AMBIENT FLOATING HALLOWEEN PARTICLES (秋日落叶、微光幽灵、南瓜微火) === */ .bcs-hw-particle { position: absolute !important; pointer-events: none !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; will-change: transform, opacity !important; } @keyframes bcs-hw-fall-1 { 0% { transform: translate3d(0, -40px, 0) rotate(0deg); } 12% { opacity: 0.82; } 88% { opacity: 0.78; } 100% { transform: translate3d(55px, 105vh, 0) rotate(340deg); } } @keyframes bcs-hw-fall-2 { 0% { transform: translate3d(0, -40px, 0) rotate(0deg); } 12% { opacity: 0.82; } 88% { opacity: 0.78; } 100% { transform: translate3d(-50px, 105vh, 0) rotate(-320deg); } } @keyframes bcs-hw-rise-1 { 0% { transform: translate3d(0, 105vh, 0) scale(0.9); opacity: 0; } 15% { opacity: 0.75; } 85% { opacity: 0.7; } 100% { transform: translate3d(45px, -40px, 0) scale(1.05); opacity: 0; } } @keyframes bcs-hw-rise-2 { 0% { transform: translate3d(0, 105vh, 0) scale(1); opacity: 0; } 15% { opacity: 0.75; } 85% { opacity: 0.7; } 100% { transform: translate3d(-40px, -40px, 0) scale(0.95); opacity: 0; } } .bcs-hw-p-1 { left: 6%; width: 26px; height: 26px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M16 2 C16 2 27 8 25 19 C23 27 16 30 16 30 C16 30 9 27 7 19 C5 8 16 2 16 2 Z' fill='%23d9631e' fill-opacity='0.85'/%3E%3Cpath d='M16 6 L16 30 M16 12 L22 17 M16 18 L23 23 M16 12 L10 17 M16 18 L9 23' stroke='%23ffd166' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E"); animation: bcs-hw-fall-1 11s linear infinite 0.5s !important; filter: drop-shadow(0 2px 6px rgba(217, 99, 30, 0.45)) !important; } .bcs-hw-p-2 { left: 15%; width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M16 4 C11 4 7 8 7 14 C7 20 6 25 8 27 C10 28 12 26 14 27 C16 28 17 27 19 27 C21 27 22 28 24 27 C26 25 25 20 25 14 C25 8 21 4 16 4 Z' fill='%23ffffff' fill-opacity='0.75' filter='drop-shadow(0 0 6px rgba(255,255,255,0.6))'/%3E%3Ccircle cx='13' cy='12' r='1.8' fill='%23190e24'/%3E%3Ccircle cx='19' cy='12' r='1.8' fill='%23190e24'/%3E%3Cellipse cx='16' cy='17' rx='1.5' ry='2.2' fill='%23190e24'/%3E%3C/svg%3E"); animation: bcs-hw-rise-1 14s linear infinite 2s !important; } .bcs-hw-p-3 { left: 24%; width: 28px; height: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M16 3 L18 9 L24 7 L21 13 L28 15 L22 20 L25 26 L18 23 L17 30 L15 30 L14 23 L7 26 L10 20 L4 15 L11 13 L8 7 L14 9 Z' fill='%23e0871d' fill-opacity='0.85'/%3E%3C/svg%3E"); animation: bcs-hw-fall-2 13s linear infinite 4s !important; filter: drop-shadow(0 2px 6px rgba(224, 135, 29, 0.4)) !important; } .bcs-hw-p-4 { left: 33%; width: 22px; height: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none'%3E%3Ccircle cx='14' cy='14' r='10' fill='%23ff7700' fill-opacity='0.8' filter='drop-shadow(0 0 6px rgba(255,136,0,0.7))'/%3E%3Cpath d='M14 4 C15 4 15.5 6 14 7' stroke='%23388e3c' stroke-width='2' stroke-linecap='round'/%3E%3Cpolygon points='10,12 12,14 10,15' fill='%232b0f38'/%3E%3Cpolygon points='18,12 16,14 18,15' fill='%232b0f38'/%3E%3Cpolygon points='14,14 15,16 13,16' fill='%232b0f38'/%3E%3Cpath d='M10 18 Q14 21 18 18' stroke='%232b0f38' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); animation: bcs-hw-fall-1 10s linear infinite 1s !important; } .bcs-hw-p-5 { left: 42%; width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffb703' opacity='0.8'%3E%3Cpath d='M12 2 L14 10 L22 12 L14 14 L12 22 L10 14 L2 12 L10 10 Z' filter='drop-shadow(0 0 4px rgba(255,183,3,0.8))'/%3E%3C/svg%3E"); animation: bcs-hw-fall-2 9s linear infinite 5s !important; } .bcs-hw-p-6 { left: 51%; width: 26px; height: 26px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M16 4 C11 4 7 8 7 14 C7 20 6 25 8 27 C10 28 12 26 14 27 C16 28 17 27 19 27 C21 27 22 28 24 27 C26 25 25 20 25 14 C25 8 21 4 16 4 Z' fill='%23ffffff' fill-opacity='0.75' filter='drop-shadow(0 0 6px rgba(255,255,255,0.6))'/%3E%3Ccircle cx='13' cy='12' r='1.8' fill='%23190e24'/%3E%3Ccircle cx='19' cy='12' r='1.8' fill='%23190e24'/%3E%3Cellipse cx='16' cy='17' rx='1.5' ry='2.2' fill='%23190e24'/%3E%3C/svg%3E"); animation: bcs-hw-rise-2 13s linear infinite 3.5s !important; } .bcs-hw-p-7 { left: 60%; width: 25px; height: 25px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M16 2 C16 2 27 8 25 19 C23 27 16 30 16 30 C16 30 9 27 7 19 C5 8 16 2 16 2 Z' fill='%23d9631e' fill-opacity='0.85'/%3E%3Cpath d='M16 6 L16 30 M16 12 L22 17 M16 18 L23 23 M16 12 L10 17 M16 18 L9 23' stroke='%23ffd166' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E"); animation: bcs-hw-fall-1 12s linear infinite 6s !important; filter: drop-shadow(0 2px 6px rgba(217, 99, 30, 0.45)) !important; } .bcs-hw-p-8 { left: 69%; width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none'%3E%3Ccircle cx='14' cy='14' r='10' fill='%23ff7700' fill-opacity='0.8' filter='drop-shadow(0 0 6px rgba(255,136,0,0.7))'/%3E%3Cpath d='M14 4 C15 4 15.5 6 14 7' stroke='%23388e3c' stroke-width='2' stroke-linecap='round'/%3E%3Cpolygon points='10,12 12,14 10,15' fill='%232b0f38'/%3E%3Cpolygon points='18,12 16,14 18,15' fill='%232b0f38'/%3E%3Cpolygon points='14,14 15,16 13,16' fill='%232b0f38'/%3E%3Cpath d='M10 18 Q14 21 18 18' stroke='%232b0f38' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); animation: bcs-hw-fall-2 11s linear infinite 2.5s !important; } .bcs-hw-p-9 { left: 78%; width: 27px; height: 27px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M16 3 L18 9 L24 7 L21 13 L28 15 L22 20 L25 26 L18 23 L17 30 L15 30 L14 23 L7 26 L10 20 L4 15 L11 13 L8 7 L14 9 Z' fill='%23e0871d' fill-opacity='0.85'/%3E%3C/svg%3E"); animation: bcs-hw-fall-1 12.5s linear infinite 7s !important; filter: drop-shadow(0 2px 6px rgba(224, 135, 29, 0.4)) !important; } .bcs-hw-p-10 { left: 86%; width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M16 4 C11 4 7 8 7 14 C7 20 6 25 8 27 C10 28 12 26 14 27 C16 28 17 27 19 27 C21 27 22 28 24 27 C26 25 25 20 25 14 C25 8 21 4 16 4 Z' fill='%23ffffff' fill-opacity='0.75' filter='drop-shadow(0 0 6px rgba(255,255,255,0.6))'/%3E%3Ccircle cx='13' cy='12' r='1.8' fill='%23190e24'/%3E%3Ccircle cx='19' cy='12' r='1.8' fill='%23190e24'/%3E%3Cellipse cx='16' cy='17' rx='1.5' ry='2.2' fill='%23190e24'/%3E%3C/svg%3E"); animation: bcs-hw-rise-1 15s linear infinite 1.5s !important; } .bcs-hw-p-11 { left: 92%; width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffb703' opacity='0.8'%3E%3Cpath d='M12 2 L14 10 L22 12 L14 14 L12 22 L10 14 L2 12 L10 10 Z' filter='drop-shadow(0 0 4px rgba(255,183,3,0.8))'/%3E%3C/svg%3E"); animation: bcs-hw-fall-2 10s linear infinite 3s !important; } .bcs-hw-p-12 { left: 97%; width: 26px; height: 26px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M16 2 C16 2 27 8 25 19 C23 27 16 30 16 30 C16 30 9 27 7 19 C5 8 16 2 16 2 Z' fill='%23d9631e' fill-opacity='0.85'/%3E%3Cpath d='M16 6 L16 30 M16 12 L22 17 M16 18 L23 23 M16 12 L10 17 M16 18 L9 23' stroke='%23ffd166' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E"); animation: bcs-hw-fall-1 13s linear infinite 4.5s !important; filter: drop-shadow(0 2px 6px rgba(217, 99, 30, 0.45)) !important; } /* -------------------------------------------------------------------------- 4. FIXED FESTIVE CORNER DECORATIONS (固定在屏幕与版块边角，绝不挡服装) -------------------------------------------------------------------------- */ .bcs-fixed-corner-decor { position: fixed !important; z-index: 99990 !important; pointer-events: none !important; display: none !important; align-items: flex-end !important; contain: layout style !important; user-select: none !important; -webkit-user-select: none !important; } /* Bottom-Right Screen Corner */ .bcs-fixed-decor-br { bottom: 24px !important; right: 28px !important; gap: 8px !important; } /* Bottom-Left Screen Corner */ .bcs-fixed-decor-bl { bottom: 24px !important; left: 28px !important; gap: 6px !important; } /* Fixed Elements Styling */ .bcs-fixed-elem { background-size: contain !important; background-repeat: no-repeat !important; background-position: center bottom !important; will-change: transform, filter !important; } /* Halloween Jack-o'-Lantern (Fixed in corner with warm breathing candle glow) */ .bcs-fixed-pumpkin-lg { width: 52px !important; height: 52px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2C16 2 17 6 15 8C11 8 6 11 5 17C4 23 8 29 16 29C24 29 28 23 27 17C26 11 21 8 17 8C15 6 16 2 16 2Z' fill='%23ff6600'/%3E%3Cpath d='M16 2C17 2 18 5 16 7' stroke='%23388e3c' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M10 13L12 16L9 17Z' fill='%231a0f2e'/%3E%3Cpath d='M22 13L23 17L20 16Z' fill='%231a0f2e'/%3E%3Cpath d='M16 16L17 19L15 19Z' fill='%231a0f2e'/%3E%3Cpath d='M9 22C11 25 14 26 16 26C18 26 21 25 23 22C21 23 18 24 16 24C14 24 11 23 9 22Z' fill='%231a0f2e'/%3E%3C/svg%3E") !important; filter: drop-shadow(0 0 14px rgba(255, 102, 0, 0.85)) !important; animation: bcs-candle-glow 3s ease-in-out infinite alternate !important; } .bcs-fixed-pumpkin-sm { width: 36px !important; height: 36px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2C16 2 17 6 15 8C11 8 6 11 5 17C4 23 8 29 16 29C24 29 28 23 27 17C26 11 21 8 17 8C15 6 16 2 16 2Z' fill='%23ff6600'/%3E%3Cpath d='M16 2C17 2 18 5 16 7' stroke='%23388e3c' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M10 13L12 16L9 17Z' fill='%231a0f2e'/%3E%3Cpath d='M22 13L23 17L20 16Z' fill='%231a0f2e'/%3E%3Cpath d='M16 16L17 19L15 19Z' fill='%231a0f2e'/%3E%3Cpath d='M9 22C11 25 14 26 16 26C18 26 21 25 23 22C21 23 18 24 16 24C14 24 11 23 9 22Z' fill='%231a0f2e'/%3E%3C/svg%3E") !important; filter: drop-shadow(0 0 10px rgba(255, 102, 0, 0.75)) !important; } /* Halloween Friendly Ghost (Hovering gently in place right above the pumpkin) */ .bcs-fixed-ghost { width: 42px !important; height: 42px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3C10 3 6 8 6 15C6 21 5 26 8 28C10 29 12 27 14 28C16 29 17 28 19 28C21 28 22 29 24 28C27 26 26 21 26 15C26 8 22 3 16 3Z' fill='%23ffffff' opacity='0.95' filter='drop-shadow(0 2px 8px rgba(255,255,255,0.5))'/%3E%3Ccircle cx='12' cy='12' r='2' fill='%231a0f2e'/%3E%3Ccircle cx='20' cy='12' r='2' fill='%231a0f2e'/%3E%3Cellipse cx='16' cy='18' rx='2' ry='3' fill='%231a0f2e'/%3E%3C/svg%3E") !important; filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.85)) !important; animation: bcs-ghost-bob 2.6s ease-in-out infinite alternate !important; margin-bottom: 8px !important; } /* Halloween Spooky Star (Twinkles subtly in place) */ .bcs-fixed-star { width: 22px !important; height: 22px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffaa00'%3E%3Cpath d='M12 2L14.4 9.6L22 12L14.4 14.4L12 22L9.6 14.4L2 12L9.6 9.6L12 2Z'/%3E%3C/svg%3E") !important; filter: drop-shadow(0 0 8px rgba(255, 170, 0, 0.85)) !important; animation: bcs-star-twinkle 2s ease-in-out infinite alternate !important; } /* Christmas Tree (Fixed with golden festive glow) */ .bcs-fixed-tree { width: 56px !important; height: 56px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpolygon points='16,3 20,9 18,9 23,16 20,16 25,24 7,24 12,16 9,16 14,9 12,9' fill='%232e7d32'/%3E%3Crect x='14' y='24' width='4' height='5' fill='%236d4c41'/%3E%3Ccircle cx='16' cy='3' r='2' fill='%23ffd700'/%3E%3Ccircle cx='13' cy='13' r='1.5' fill='%23e53935'/%3E%3Ccircle cx='19' cy='14' r='1.5' fill='%23ffd700'/%3E%3Ccircle cx='11' cy='20' r='1.5' fill='%23ffd700'/%3E%3Ccircle cx='17' cy='19' r='1.5' fill='%23e53935'/%3E%3Ccircle cx='21' cy='21' r='1.5' fill='%231e88e5'/%3E%3C/svg%3E") !important; filter: drop-shadow(0 0 14px rgba(255, 215, 0, 0.75)) !important; animation: bcs-holiday-sparkle 3s ease-in-out infinite alternate !important; } /* Santa Claus (Fixed smiling cheerful presence) */ .bcs-fixed-santa { width: 44px !important; height: 44px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6 14C8 6 24 6 26 14L28 17L4 17Z' fill='%23d32f2f'/%3E%3Crect x='3' y='16' width='26' height='4' rx='2' fill='%23ffffff'/%3E%3Ccircle cx='27' cy='11' r='3.5' fill='%23ffffff'/%3E%3Cellipse cx='16' cy='22' rx='9' ry='6' fill='%23ffffff'/%3E%3Cellipse cx='16' cy='20' rx='6' ry='3' fill='%23ffccbc'/%3E%3Ccircle cx='13' cy='19' r='1' fill='%23212121'/%3E%3Ccircle cx='19' cy='19' r='1' fill='%23212121'/%3E%3Ccircle cx='16' cy='21' r='1.5' fill='%23e53935'/%3E%3C/svg%3E") !important; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35)) !important; } /* Gift Boxes (Fixed festive presents under the tree) */ .bcs-fixed-gift-lg { width: 34px !important; height: 34px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='9' width='18' height='12' rx='2' fill='%23d32f2f'/%3E%3Crect x='2' y='6' width='20' height='4' rx='1' fill='%23e53935'/%3E%3Crect x='10' y='6' width='4' height='15' fill='%23ffd700'/%3E%3Cpath d='M12 6C10 3 6 3 8 6ZM12 6C14 3 18 3 16 6Z' fill='%23ffd700'/%3E%3C/svg%3E") !important; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35)) !important; } .bcs-fixed-gift-sm { width: 26px !important; height: 26px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='9' width='18' height='12' rx='2' fill='%23d32f2f'/%3E%3Crect x='2' y='6' width='20' height='4' rx='1' fill='%23e53935'/%3E%3Crect x='10' y='6' width='4' height='15' fill='%23ffd700'/%3E%3Cpath d='M12 6C10 3 6 3 8 6ZM12 6C14 3 18 3 16 6Z' fill='%23ffd700'/%3E%3C/svg%3E") !important; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3)) !important; } /* Animations for fixed elements (subtle in-place breathing, 0 translation across products!) */ @keyframes bcs-candle-glow { 0% { transform: scale(1); opacity: 0.92; } 100% { transform: scale(1.04); opacity: 1; } } @keyframes bcs-ghost-bob { 0% { transform: translateY(0) rotate(-2deg); } 100% { transform: translateY(-8px) rotate(3deg); } } @keyframes bcs-star-twinkle { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.15) rotate(15deg); } } @keyframes bcs-holiday-sparkle { 0% { transform: scale(1) rotate(0deg); opacity: 0.92; } 100% { transform: scale(1.03) rotate(2deg); opacity: 1; } } /* Portal Fixed Corner Badges */ .bcs-portal-card .bcs-corner-stamp { position: absolute !important; top: 14px !important; right: 16px !important; width: 38px !important; height: 38px !important; background-size: contain !important; background-repeat: no-repeat !important; z-index: 5 !important; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45)) !important; pointer-events: none !important; } .bcs-stamp-pumpkin { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2C16 2 17 6 15 8C11 8 6 11 5 17C4 23 8 29 16 29C24 29 28 23 27 17C26 11 21 8 17 8C15 6 16 2 16 2Z' fill='%23ff6600'/%3E%3Cpath d='M16 2C17 2 18 5 16 7' stroke='%23388e3c' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M10 13L12 16L9 17Z' fill='%231a0f2e'/%3E%3Cpath d='M22 13L23 17L20 16Z' fill='%231a0f2e'/%3E%3Cpath d='M16 16L17 19L15 19Z' fill='%231a0f2e'/%3E%3Cpath d='M9 22C11 25 14 26 16 26C18 26 21 25 23 22C21 23 18 24 16 24C14 24 11 23 9 22Z' fill='%231a0f2e'/%3E%3C/svg%3E") !important; filter: drop-shadow(0 0 10px rgba(255, 102, 0, 0.75)) !important; } .bcs-stamp-tree { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpolygon points='16,3 20,9 18,9 23,16 20,16 25,24 7,24 12,16 9,16 14,9 12,9' fill='%232e7d32'/%3E%3Crect x='14' y='24' width='4' height='5' fill='%236d4c41'/%3E%3Ccircle cx='16' cy='3' r='2' fill='%23ffd700'/%3E%3Ccircle cx='13' cy='13' r='1.5' fill='%23e53935'/%3E%3Ccircle cx='19' cy='14' r='1.5' fill='%23ffd700'/%3E%3Ccircle cx='11' cy='20' r='1.5' fill='%23ffd700'/%3E%3Ccircle cx='17' cy='19' r='1.5' fill='%23e53935'/%3E%3Ccircle cx='21' cy='21' r='1.5' fill='%231e88e5'/%3E%3C/svg%3E") !important; filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.75)) !important; } /* Visibility Control for Fixed Corner Badges */ .bcs-fixed-corner-decor, .bcs-hw-fixed-group, .bcs-xmas-fixed-group { display: none !important; } /* ONLY active when corresponding festival is set AND floating is not disabled */ html[data-bcs-festival="halloween"]:not(.bcs-floating-off) .bcs-hw-fixed-group, html[data-zv-festival="halloween"]:not(.bcs-floating-off) .bcs-hw-fixed-group { display: flex !important; } html[data-bcs-festival="christmas"]:not(.bcs-floating-off) .bcs-xmas-fixed-group, html[data-zv-festival="christmas"]:not(.bcs-floating-off) .bcs-xmas-fixed-group { display: flex !important; } /* Classic mode or unspecified: strictly ZERO corner decor */ html[data-bcs-festival="classic"] .bcs-fixed-corner-decor, html[data-zv-festival="classic"] .bcs-fixed-corner-decor, html:not([data-bcs-festival]) .bcs-fixed-corner-decor, html:not([data-zv-festival]) .bcs-fixed-corner-decor { display: none !important; } /* Mobile Responsiveness: compact scale */ @media (max-width: 768px) { .bcs-fixed-decor-br { bottom: 16px !important; right: 16px !important; } .bcs-fixed-decor-bl { display: none !important; } .bcs-fixed-pumpkin-lg { width: 40px !important; height: 40px !important; } .bcs-fixed-ghost { width: 32px !important; height: 32px !important; } .bcs-fixed-tree { width: 42px !important; height: 42px !important; } .bcs-fixed-santa { width: 34px !important; height: 34px !important; } } /* -------------------------------------------------------------------------- 5. Homepage Hero Banner & Category Portals (Index only) -------------------------------------------------------------------------- */ .bcs-hero-section, .zv-hero-section { position: relative !important; width: 100% !important; margin: 0 0 40px 0 !important; overflow: hidden !important; border-radius: 0 0 20px 20px !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important; } .bcs-hero-banner, .zv-hero-banner { position: relative !important; min-height: 520px !important; display: flex !important; align-items: center !important; justify-content: center !important; background-size: cover !important; background-position: center 30% !important; padding: 70px 24px !important; box-sizing: border-box !important; } /* Hero Background Overlays with Real Cinematic Backdrops */ .bcs-hero-christmas, .zv-hero-christmas { background-image: linear-gradient(180deg, rgba(12, 36, 20, 0.65) 0%, rgba(12, 36, 20, 0.85) 100%), var(--bcs-xmas-hero-bg) !important; } .bcs-hero-halloween, .zv-hero-halloween { background-image: linear-gradient(180deg, rgba(16, 8, 28, 0.55) 0%, rgba(16, 8, 28, 0.82) 100%), var(--bcs-hw-hero-bg) !important; } /* Toggle Hero based on Active Festival */ html[data-bcs-festival="halloween"] .bcs-hero-christmas, html[data-bcs-festival="halloween"] .zv-hero-christmas, html[data-zv-festival="halloween"] .bcs-hero-christmas, html[data-zv-festival="halloween"] .zv-hero-christmas { display: none !important; } html[data-bcs-festival="halloween"] .bcs-hero-halloween, html[data-bcs-festival="halloween"] .zv-hero-halloween, html[data-zv-festival="halloween"] .bcs-hero-halloween, html[data-zv-festival="halloween"] .zv-hero-halloween { display: flex !important; } html[data-bcs-festival="christmas"] .bcs-hero-christmas, html[data-bcs-festival="christmas"] .zv-hero-christmas, html[data-zv-festival="christmas"] .bcs-hero-christmas, html[data-zv-festival="christmas"] .zv-hero-christmas { display: flex !important; } html[data-bcs-festival="christmas"] .bcs-hero-halloween, html[data-bcs-festival="christmas"] .zv-hero-halloween, html[data-zv-festival="christmas"] .bcs-hero-halloween, html[data-zv-festival="christmas"] .zv-hero-halloween { display: none !important; } /* Classic defaults to Christmas Hero */ html[data-bcs-festival="classic"] .bcs-hero-christmas, html[data-bcs-festival="classic"] .zv-hero-christmas, html[data-zv-festival="classic"] .bcs-hero-christmas, html[data-zv-festival="classic"] .zv-hero-christmas, html:not([data-bcs-festival]) .bcs-hero-christmas, html:not([data-bcs-festival]) .zv-hero-christmas { display: flex !important; } html[data-bcs-festival="classic"] .bcs-hero-halloween, html[data-bcs-festival="classic"] .zv-hero-halloween, html[data-zv-festival="classic"] .bcs-hero-halloween, html[data-zv-festival="classic"] .zv-hero-halloween, html:not([data-bcs-festival]) .bcs-hero-halloween, html:not([data-bcs-festival]) .zv-hero-halloween { display: none !important; } .bcs-hero-content, .zv-hero-content { position: relative !important; z-index: 2 !important; max-width: 820px !important; text-align: center !important; color: #ffffff !important; } .bcs-hero-tag, .zv-hero-tag { display: inline-block !important; padding: 8px 20px !important; border-radius: 9999px !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; margin-bottom: 20px !important; background: rgba(255, 102, 0, 0.22) !important; backdrop-filter: blur(10px) !important; border: 1px solid rgba(255, 102, 0, 0.5) !important; color: #ffaa55 !important; text-shadow: 0 0 10px rgba(255, 102, 0, 0.5) !important; } .bcs-hero-title, .zv-hero-title { font-size: clamp(34px, 5.5vw, 58px) !important; font-weight: 850 !important; line-height: 1.15 !important; margin: 0 0 18px 0 !important; color: #ffffff !important; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55) !important; letter-spacing: -0.5px !important; } .bcs-hero-desc, .zv-hero-desc { font-size: clamp(16px, 2.2vw, 19px) !important; line-height: 1.65 !important; margin: 0 auto 32px auto !important; max-width: 640px !important; color: rgba(255, 255, 255, 0.94) !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important; } .bcs-hero-actions, .zv-hero-actions { display: flex !important; gap: 16px !important; justify-content: center !important; flex-wrap: wrap !important; } .bcs-hero-btn, .zv-hero-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 15px 34px !important; border-radius: 9999px !important; font-size: 15px !important; font-weight: 750 !important; text-decoration: none !important; cursor: pointer !important; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; } .bcs-hero-btn-primary, .zv-hero-btn-primary { background: linear-gradient(135deg, #ff6600 0%, #e65100 100%) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; box-shadow: 0 4px 20px rgba(255, 102, 0, 0.45) !important; } .bcs-hero-btn-primary:hover, .zv-hero-btn-primary:hover { transform: translateY(-2px) scale(1.02) !important; box-shadow: 0 8px 28px rgba(255, 102, 0, 0.6) !important; } .bcs-hero-btn-secondary, .zv-hero-btn-secondary { background: rgba(255, 255, 255, 0.16) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; backdrop-filter: blur(10px) !important; } .bcs-hero-btn-secondary:hover, .zv-hero-btn-secondary:hover { background: rgba(255, 255, 255, 0.28) !important; transform: translateY(-2px) !important; } /* Category Portals with Real Boutique Flatlay Photography */ .bcs-category-portals, .zv-category-portals { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important; gap: 24px !important; max-width: 1280px !important; margin: 0 auto 52px auto !important; padding: 0 20px !important; box-sizing: border-box !important; } .bcs-portal-card, .zv-portal-card { position: relative !important; border-radius: 16px !important; overflow: hidden !important; min-height: 250px !important; display: flex !important; align-items: flex-end !important; padding: 28px !important; text-decoration: none !important; color: #ffffff !important; background-size: cover !important; background-position: center !important; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12) !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; } .bcs-portal-card:hover, .zv-portal-card:hover { transform: translateY(-5px) !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22) !important; } .bcs-portal-xmas, .zv-portal-xmas { background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(12, 36, 20, 0.90) 100%), var(--bcs-xmas-portal-bg) !important; } .bcs-portal-hw, .zv-portal-hw { background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(26, 15, 46, 0.90) 100%), var(--bcs-hw-portal-bg) !important; } .bcs-portal-hw:hover, .zv-portal-hw:hover { border-color: rgba(255, 102, 0, 0.5) !important; box-shadow: 0 12px 36px rgba(255, 102, 0, 0.25) !important; } .bcs-portal-content, .zv-portal-content { position: relative !important; z-index: 2 !important; } .bcs-portal-badge, .zv-portal-badge { display: inline-block !important; padding: 5px 12px !important; border-radius: 9999px !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0.8px !important; text-transform: uppercase !important; margin-bottom: 10px !important; background: rgba(255, 255, 255, 0.25) !important; backdrop-filter: blur(8px) !important; } .bcs-portal-hw .bcs-portal-badge, .zv-portal-hw .zv-portal-badge { background: rgba(255, 102, 0, 0.35) !important; color: #ffcc88 !important; border: 1px solid rgba(255, 102, 0, 0.5) !important; } .bcs-portal-title, .zv-portal-title { font-size: 24px !important; font-weight: 850 !important; margin: 0 0 6px 0 !important; color: #ffffff !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important; } .bcs-portal-link, .zv-portal-link { font-size: 14px !important; font-weight: 650 !important; color: #ffffff !important; opacity: 0.95 !important; } /* -------------------------------------------------------------------------- 6. Precision Product Grid & Button Alignment (100% Horizontal Rule) -------------------------------------------------------------------------- */ /* Eliminate any residual description placeholders */ .block-product-card-info [class*="description"], .block-product-card-info__description, .block-product-card__info__description, .product-card/_description { display: none !important; } /* 3:4 Portrait Ratio for Apparel */ .block-product-card-image, .product-card__image-wrapper { aspect-ratio: 3 / 4 !important; overflow: hidden !important; background: #f7f7f7 !important; border-radius: 10px !important; } .block-product-card-image img, .product-card__image-wrapper img { object-fit: cover !important; width: 100% !important; height: 100% !important; transition: transform 0.35s ease !important; } .block-product-card-image:hover img, .product-card__image-wrapper:hover img { transform: scale(1.04) !important; } /* Halloween Card Hover Aura */ html[data-bcs-festival="halloween"] .product-card:hover, html[data-bcs-festival="halloween"] .block-product-card:hover, html[data-zv-festival="halloween"] .product-card:hover, html[data-zv-festival="halloween"] .block-product-card:hover { box-shadow: 0 8px 24px rgba(255, 102, 0, 0.16) !important; border-color: rgba(255, 102, 0, 0.25) !important; } /* Strict Title 2-Line Height Lock */ .block-product-title, .block-product-title span { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; line-height: 1.4 !important; height: 2.8em !important; min-height: 2.8em !important; max-height: 2.8em !important; box-sizing: content-box !important; word-break: break-word !important; } /* Flexbox Info Container & Baseline Lock */ .block-product-card-info { display: flex !important; flex-direction: column !important; box-sizing: border-box !important; min-height: 130px !important; padding-top: 10px !important; } .block-product-card-info__content { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; } .block-product-price, theme-product-price { display: block !important; margin-top: auto !important; margin-bottom: 10px !important; height: 24px !important; line-height: 24px !important; } /* Add to Cart Button Strict Bottom Alignment */ .block-product-card-info button[name="add"], .block-product-card-info .product-buy-button, .block-product-card-info [class*="buy-button"], .product-card__buy-button { display: flex !important; align-items: center !important; justify-content: center !important; margin-top: auto !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; line-height: 42px !important; width: 100% !important; padding: 0 16px !important; border-radius: 8px !important; font-weight: 650 !important; font-size: 14px !important; box-sizing: border-box !important; transition: all 0.2s ease !important; } /* Halloween Add to Cart Button Styling */ html[data-bcs-festival="halloween"] .block-product-card-info button[name="add"], html[data-bcs-festival="halloween"] .block-product-card-info .product-buy-button, html[data-zv-festival="halloween"] .block-product-card-info button[name="add"], html[data-zv-festival="halloween"] .block-product-card-info .product-buy-button { background: #1a0f2e !important; border: 1px solid rgba(255, 102, 0, 0.45) !important; color: #ffffff !important; } html[data-bcs-festival="halloween"] .block-product-card-info button[name="add"]:hover, html[data-bcs-festival="halloween"] .block-product-card-info .product-buy-button:hover, html[data-zv-festival="halloween"] .block-product-card-info button[name="add"]:hover, html[data-zv-festival="halloween"] .block-product-card-info .product-buy-button:hover { background: #ff6600 !important; border-color: #ff6600 !important; box-shadow: 0 4px 16px rgba(255, 102, 0, 0.45) !important; } /* Standard Pagination Component */ .main-collection-products .pagination, .collection-products-pagination { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; margin: 40px 0 !important; } /* ========================================================================== BCS MOBILE & COLLECTION BANNER DEEP OPTIMIZATIONS (2026-09-22) ========================================================================== */ /* --- 1. Collection Banner Visual Guarantee --- */ .block-main-collection__banner { background-size: cover !important; background-position: center !important; position: relative !important; } html[data-bcs-festival="halloween"] .block-main-collection__banner, html[data-zv-festival="halloween"] .block-main-collection__banner { background-image: url("https://img-va.myshopline.com/image/store/1789714266278/fd6f10fbe37e4bbbb5c7c63511503ba6.jpg") !important; } html[data-bcs-festival="christmas"] .block-main-collection__banner, html[data-zv-festival="christmas"] .block-main-collection__banner { background-image: url("https://img-va.myshopline.com/image/store/1789714266278/473d9331de554ad0b906f1b35fe847e8.jpg") !important; } .block-main-collection__banner-fallback-img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; display: block !important; } .block-main-collection__banner .block-main-collection__heading { color: #ffffff !important; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75), 0 0 24px rgba(0, 0, 0, 0.5) !important; } .block-main-collection__banner .body4, .block-main-collection__banner nav { color: rgba(255, 255, 255, 0.9) !important; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6) !important; } /* --- 2. Festive Capsule Switcher - Desktop & Mobile Master Styling --- */ .bcs-festive-capsule, .zv-festive-capsule { display: inline-flex !important; align-items: center !important; background: rgba(255, 255, 255, 0.96) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; border-radius: 9999px !important; padding: 3px !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important; touch-action: manipulation !important; user-select: none !important; white-space: nowrap !important; flex-shrink: 0 !important; } .bcs-capsule-btn, .zv-capsule-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; padding: 6px 13px !important; min-height: 32px !important; border-radius: 9999px !important; border: none !important; background: transparent !important; color: #555555 !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1 !important; cursor: pointer !important; white-space: nowrap !important; flex-shrink: 0 !important; transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important; } .bcs-capsule-text, .zv-capsule-text { display: inline-block !important; white-space: nowrap !important; } /* --- 3. Product Card & Add to Cart Button Mobile Optimization --- */ .block-product-card { overflow: visible !important; } .block-product-card-info { display: flex !important; flex-direction: column !important; box-sizing: border-box !important; min-height: auto !important; padding: 10px 4px 6px 4px !important; } .block-product-card-info__content { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; } /* Ensure Price Baseline */ .block-product-price, theme-product-price { display: block !important; margin-top: auto !important; margin-bottom: 8px !important; min-height: 22px !important; line-height: 22px !important; } /* Product Buy Button Wrapper */ .block-product-card-info .product-buy-button, .product-card__buy-button { display: block !important; width: 100% !important; height: auto !important; min-height: auto !important; max-height: none !important; line-height: normal !important; overflow: visible !important; margin-top: 4px !important; padding: 0 !important; border: none !important; background: transparent !important; } /* Product Buy Button Inner Native Button */ .block-product-card-info button[name="add"], .block-product-card-info .product-buy-button button, .product-card__buy-button button { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; line-height: 38px !important; padding: 0 12px !important; border-radius: 8px !important; font-weight: 650 !important; font-size: 13px !important; box-sizing: border-box !important; overflow: visible !important; white-space: nowrap !important; cursor: pointer !important; } .block-product-card-info button[name="add"] span, .block-product-card-info .product-buy-button button span, .product-card__buy-button button span { display: inline-block !important; line-height: 1 !important; vertical-align: middle !important; overflow: visible !important; white-space: nowrap !important; } /* === 4. MASTER MOBILE OVERRIDES (< 768px) === */ @media (max-width: 768px) { /* Capsule: Sleek 3-Icon Pill in Mobile Header */ .header-action-bar.right .bcs-festive-capsule, .header-action-bar.right .zv-festive-capsule, .bcs-festive-capsule, .zv-festive-capsule { display: inline-flex !important; align-items: center !important; padding: 2px !important; gap: 2px !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; width: auto !important; max-width: 96px !important; flex-shrink: 0 !important; white-space: nowrap !important; margin: 0 2px !important; box-sizing: border-box !important; } .header-action-bar.right .bcs-capsule-btn, .header-action-bar.right .zv-capsule-btn, .bcs-capsule-btn, .zv-capsule-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 26px !important; min-width: 26px !important; max-width: 26px !important; height: 26px !important; min-height: 26px !important; max-height: 26px !important; padding: 0 !important; margin: 0 !important; border-radius: 9999px !important; box-sizing: border-box !important; white-space: nowrap !important; flex-shrink: 0 !important; } /* HIDE TEXT ON MOBILE TO AVOID VERTICAL STACKING */ .header-action-bar.right .bcs-capsule-text, .header-action-bar.right .zv-capsule-text, .bcs-capsule-text, .zv-capsule-text { display: none !important; width: 0 !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } .bcs-capsule-icon, .zv-capsule-icon { width: 14px !important; height: 14px !important; font-size: 13px !important; display: flex !important; align-items: center !important; justify-content: center !important; } .bcs-capsule-icon svg, .zv-capsule-icon svg { width: 13px !important; height: 13px !important; } /* Prevent bats from flying across the mobile header bar */ .bcs-bats-container, .zv-bats-container { top: 90px !important; height: calc(100vh - 90px) !important; pointer-events: none !important; } /* Scale down bats for mobile */ .bcs-bat, .zv-bat { transform-origin: center center !important; scale: 0.7 !important; } /* Limit to 2 graceful gliding bats on mobile */ .bcs-bat-3, .zv-bat-3, .bcs-bat-4, .zv-bat-4 { display: none !important; } /* Mobile Button Proportions for 2-Column Grid */ .block-product-card-info button[name="add"], .block-product-card-info .product-buy-button button, .product-card__buy-button button { height: 34px !important; min-height: 34px !important; max-height: 34px !important; line-height: 34px !important; padding: 0 8px !important; font-size: 12px !important; border-radius: 6px !important; } } /* ========================================================================== BCS ADD TO CART BUTTON VERTICAL & HORIZONTAL PRECISION CENTERING ========================================================================== */ /* 1. Reset Outer Form & Wrapper */ .block-product-card-info .block-product-buy-button-wrapper, .block-product-card-info [class*="buy-button-wrapper"], .block-product-buy-button-wrapper { display: block !important; width: 100% !important; height: auto !important; min-height: auto !important; max-height: none !important; line-height: normal !important; margin: 4px 0 0 0 !important; padding: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } .block-product-buy-button-wrapper form, .block-product-buy-button-wrapper .shopline-product-form { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; } /* 2. Precision Flex Button Container */ .block-product-buy-button, .block-product-card-info button[name="add"], .block-product-card-info .block-product-buy-button, button[name="add"].block-product-buy-button { display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; width: 100% !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; line-height: normal !important; padding: 0 12px !important; box-sizing: border-box !important; position: relative !important; border-radius: 8px !important; overflow: hidden !important; cursor: pointer !important; touch-action: manipulation !important; } /* 3. Text Element Guaranteed True Centering */ .block-product-buy-button .block-product-buy-button-text, button[name="add"].block-product-buy-button .block-product-buy-button-text, .block-product-card-info button[name="add"] span { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: auto !important; line-height: 1 !important; font-size: 13px !important; font-weight: 650 !important; margin: 0 !important; padding: 0 !important; vertical-align: middle !important; white-space: nowrap !important; text-align: center !important; transform: translateY(0) !important; } /* 4. Complete Elimination of Ghost Loading Rotator when Idle */ .block-product-buy-button .loading--rotator, button[name="add"].block-product-buy-button .loading--rotator, .block-product-card-info .loading--rotator { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; position: absolute !important; pointer-events: none !important; margin: 0 !important; padding: 0 !important; } .button.loading .loading--rotator, button[name="add"].loading .loading--rotator, button[name="add"].is-loading .loading--rotator { display: flex !important; visibility: visible !important; width: 18px !important; height: 18px !important; position: absolute !important; inset: 0 !important; margin: auto !important; } /* 5. Mobile Dynamic Proportions (< 768px) */ @media (max-width: 768px) { .block-product-buy-button, .block-product-card-info button[name="add"], .block-product-card-info .block-product-buy-button, button[name="add"].block-product-buy-button { height: 34px !important; min-height: 34px !important; max-height: 34px !important; line-height: normal !important; padding: 0 8px !important; border-radius: 6px !important; } .block-product-buy-button .block-product-buy-button-text, button[name="add"].block-product-buy-button .block-product-buy-button-text, .block-product-card-info button[name="add"] span { font-size: 12px !important; line-height: 1 !important; transform: translateY(0) !important; } } /* ========================================================================== MODULE 1: FOOTER NAVIGATION & POLICIES STYLING ========================================================================== */ .footer__navigation-columns { width: 100% !important; margin: 24px 0 16px 0 !important; } .footer__custom-text-title { font-size: 14px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; margin-bottom: 14px !important; color: #111111 !important; } html[data-bcs-festival="halloween"] .footer__custom-text-title, html[data-zv-festival="halloween"] .footer__custom-text-title { color: #ff9933 !important; } html[data-bcs-festival="christmas"] .footer__custom-text-title, html[data-zv-festival="christmas"] .footer__custom-text-title { color: #44cc77 !important; } .footer__custom-text-content p { margin: 0 0 10px 0 !important; line-height: 1.6 !important; } .footer__custom-text-content a { font-size: 13.5px !important; opacity: 0.82 !important; transition: all 0.15s ease !important; display: inline-block !important; padding: 2px 0 !important; text-decoration: none !important; } .footer__custom-text-content a:hover { opacity: 1 !important; transform: translateX(3px) !important; text-decoration: underline !important; } .footer__copyright-text a { opacity: 0.85 !important; transition: opacity 0.15s ease !important; } .footer__copyright-text a:hover { opacity: 1 !important; } /* ========================================================================== MODULE 2: HOMEPAGE TRUST BAR & VALUE PILLARS ========================================================================== */ .bcs-trust-bar { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; max-width: 1200px !important; margin: 0 auto 40px auto !important; padding: 20px 24px !important; background: #ffffff !important; border-radius: 12px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important; border: 1px solid rgba(0, 0, 0, 0.06) !important; box-sizing: border-box !important; } html[data-bcs-festival="halloween"] .bcs-trust-bar, html[data-zv-festival="halloween"] .bcs-trust-bar { background: #190f2b !important; border-color: rgba(255, 102, 0, 0.25) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important; } html[data-bcs-festival="christmas"] .bcs-trust-bar, html[data-zv-festival="christmas"] .bcs-trust-bar { background: #0f2417 !important; border-color: rgba(68, 204, 119, 0.25) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important; } .bcs-trust-item { display: flex !important; align-items: center !important; gap: 14px !important; padding: 6px !important; } .bcs-trust-icon { font-size: 28px !important; line-height: 1 !important; flex-shrink: 0 !important; } .bcs-trust-info { display: flex !important; flex-direction: column !important; } .bcs-trust-title { font-size: 13.5px !important; font-weight: 700 !important; line-height: 1.3 !important; color: #111111 !important; } html[data-bcs-festival="halloween"] .bcs-trust-title, html[data-zv-festival="halloween"] .bcs-trust-title, html[data-bcs-festival="christmas"] .bcs-trust-title, html[data-zv-festival="christmas"] .bcs-trust-title { color: #ffffff !important; } .bcs-trust-desc { font-size: 12px !important; opacity: 0.75 !important; line-height: 1.35 !important; margin-top: 2px !important; } @media (max-width: 900px) { .bcs-trust-bar { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; padding: 16px !important; margin: 0 12px 28px 12px !important; } } @media (max-width: 480px) { .bcs-trust-bar { grid-template-columns: 1fr !important; gap: 12px !important; } } /* ========================================================================== MODULE 3: PDP SIZE GUIDE, ACCORDIONS & STICKY CART ========================================================================== */ /* Size Guide Trigger */ .bcs-size-guide-trigger { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 13px !important; font-weight: 650 !important; color: #555555 !important; cursor: pointer !important; margin: 8px 0 12px 0 !important; text-decoration: underline !important; text-underline-offset: 3px !important; transition: color 0.15s ease !important; } html[data-bcs-festival="halloween"] .bcs-size-guide-trigger, html[data-zv-festival="halloween"] .bcs-size-guide-trigger { color: #ff9933 !important; } html[data-bcs-festival="christmas"] .bcs-size-guide-trigger, html[data-zv-festival="christmas"] .bcs-size-guide-trigger { color: #55dd88 !important; } /* Size Guide Modal */ .bcs-modal-overlay { position: fixed !important; inset: 0 !important; background: rgba(0, 0, 0, 0.65) !important; backdrop-filter: blur(4px) !important; z-index: 999999 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 16px !important; opacity: 0 !important; visibility: hidden !important; transition: opacity 0.25s ease, visibility 0.25s ease !important; } .bcs-modal-overlay.is-active { opacity: 1 !important; visibility: visible !important; } .bcs-modal-card { background: #ffffff !important; color: #111111 !important; border-radius: 14px !important; max-width: 620px !important; width: 100% !important; max-height: 85vh !important; overflow-y: auto !important; padding: 24px !important; position: relative !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3) !important; transform: translateY(20px) !important; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; } .bcs-modal-overlay.is-active .bcs-modal-card { transform: translateY(0) !important; } .bcs-modal-close { position: absolute !important; top: 16px !important; right: 16px !important; background: transparent !important; border: none !important; font-size: 24px !important; cursor: pointer !important; color: #555555 !important; line-height: 1 !important; padding: 4px !important; } .bcs-size-table { width: 100% !important; border-collapse: collapse !important; margin: 16px 0 !important; font-size: 13px !important; } .bcs-size-table th, .bcs-size-table td { padding: 10px 12px !important; text-align: center !important; border-bottom: 1px solid #eeeeee !important; } .bcs-size-table th { background: #f8f8f8 !important; font-weight: 700 !important; color: #222222 !important; } .bcs-size-tip { font-size: 12.5px !important; line-height: 1.5 !important; color: #666666 !important; background: #f9f9f9 !important; padding: 12px 14px !important; border-radius: 8px !important; margin-top: 12px !important; border-left: 3px solid #ff6600 !important; } /* PDP Collapsible Accordion Tabs */ .bcs-pdp-accordions { margin: 24px 0 !important; border-top: 1px solid rgba(0, 0, 0, 0.1) !important; } html[data-bcs-festival="halloween"] .bcs-pdp-accordions, html[data-zv-festival="halloween"] .bcs-pdp-accordions, html[data-bcs-festival="christmas"] .bcs-pdp-accordions, html[data-zv-festival="christmas"] .bcs-pdp-accordions { border-top-color: rgba(255, 255, 255, 0.15) !important; } .bcs-accordion-item { border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important; } html[data-bcs-festival="halloween"] .bcs-accordion-item, html[data-zv-festival="halloween"] .bcs-accordion-item, html[data-bcs-festival="christmas"] .bcs-accordion-item, html[data-zv-festival="christmas"] .bcs-accordion-item { border-bottom-color: rgba(255, 255, 255, 0.15) !important; } .bcs-accordion-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 0 !important; cursor: pointer !important; font-size: 14px !important; font-weight: 700 !important; user-select: none !important; } .bcs-accordion-icon { font-size: 18px !important; transition: transform 0.2s ease !important; } .bcs-accordion-item.is-open .bcs-accordion-icon { transform: rotate(45deg) !important; } .bcs-accordion-body { max-height: 0 !important; overflow: hidden !important; transition: max-height 0.25s ease !important; font-size: 13px !important; line-height: 1.6 !important; opacity: 0.88 !important; } .bcs-accordion-item.is-open .bcs-accordion-body { max-height: 400px !important; padding-bottom: 14px !important; } /* PDP Mobile Sticky Add to Cart Bar */ .bcs-sticky-cart-bar { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 99999 !important; background: #ffffff !important; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12) !important; border-top: 1px solid rgba(0, 0, 0, 0.08) !important; padding: 8px 12px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; transform: translateY(105%) !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } html[data-bcs-festival="halloween"] .bcs-sticky-cart-bar, html[data-zv-festival="halloween"] .bcs-sticky-cart-bar { background: #140b24 !important; border-top-color: rgba(255, 102, 0, 0.3) !important; } html[data-bcs-festival="christmas"] .bcs-sticky-cart-bar, html[data-zv-festival="christmas"] .bcs-sticky-cart-bar { background: #0d1e14 !important; border-top-color: rgba(68, 204, 119, 0.3) !important; } .bcs-sticky-cart-bar.is-visible { transform: translateY(0) !important; } .bcs-sticky-product-meta { display: flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; flex: 1 1 auto !important; } .bcs-sticky-thumb { width: 40px !important; height: 40px !important; border-radius: 6px !important; object-fit: cover !important; flex-shrink: 0 !important; } .bcs-sticky-text { min-width: 0 !important; overflow: hidden !important; } .bcs-sticky-title { font-size: 12px !important; font-weight: 700 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; } .bcs-sticky-price { font-size: 13px !important; font-weight: 800 !important; color: #ff6600 !important; } .bcs-sticky-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 38px !important; padding: 0 16px !important; background: #ff6600 !important; color: #ffffff !important; font-size: 13px !important; font-weight: 700 !important; border-radius: 8px !important; border: none !important; cursor: pointer !important; white-space: nowrap !important; flex-shrink: 0 !important; } @media (min-width: 769px) { .bcs-sticky-cart-bar { display: none !important; /* Only on mobile */ } } /* ========================================================================== MODULE 4: CART DRAWER FREE SHIPPING PROGRESS BAR ========================================================================== */ .bcs-free-shipping-bar { padding: 12px 16px !important; background: rgba(0, 0, 0, 0.03) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important; } html[data-bcs-festival="halloween"] .bcs-free-shipping-bar, html[data-zv-festival="halloween"] .bcs-free-shipping-bar { background: rgba(255, 102, 0, 0.08) !important; border-bottom-color: rgba(255, 102, 0, 0.2) !important; } html[data-bcs-festival="christmas"] .bcs-free-shipping-bar, html[data-zv-festival="christmas"] .bcs-free-shipping-bar { background: rgba(68, 204, 119, 0.08) !important; border-bottom-color: rgba(68, 204, 119, 0.2) !important; } .bcs-fsb-message { display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; font-size: 13px !important; font-weight: 600 !important; margin-bottom: 8px !important; text-align: center !important; } .bcs-fsb-track { width: 100% !important; height: 7px !important; background: rgba(0, 0, 0, 0.1) !important; border-radius: 9999px !important; overflow: hidden !important; position: relative !important; } .bcs-fsb-fill { height: 100% !important; border-radius: 9999px !important; background: linear-gradient(90deg, #ff6600 0%, #ff9933 100%) !important; transition: width 0.4s ease !important; } html[data-bcs-festival="christmas"] .bcs-fsb-fill, html[data-zv-festival="christmas"] .bcs-fsb-fill { background: linear-gradient(90deg, #22aa55 0%, #55dd88 100%) !important; } /* ========================================================================== MODULE 5: GPU ACCELERATION & CORE WEB VITALS ========================================================================== */ .bcs-particles-container, .zv-particles-container, .bcs-bat, .zv-bat, .bcs-crystal-flake, .bcs-hw-particle { will-change: transform !important; transform: translate3d(0, 0, 0) !important; -webkit-transform: translate3d(0, 0, 0) !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; perspective: 1000px !important; } /* ========================================================================== RIGHT HEADER ACTION BAR CAPSULE POSITIONING & MOBILE ALIGNMENT ========================================================================== */ .header-action-bar.right { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 6px !important; } .header-action-bar.right .bcs-festive-capsule, .header-action-bar.right .zv-festive-capsule { display: inline-flex !important; align-items: center !important; margin-right: 4px !important; margin-left: 0 !important; order: -1 !important; /* Always on inner left of the right action bar */ } @media (max-width: 768px) { .header-action-bar.right { gap: 4px !important; } .header-action-bar.right .bcs-festive-capsule, .header-action-bar.right .zv-festive-capsule { height: 30px !important; min-height: 30px !important; max-height: 30px !important; max-width: 94px !important; padding: 2px !important; gap: 2px !important; margin-right: 2px !important; } } /* ========================================================================== MODULE 6: FLOATING EFFECTS PROMINENT CLOSE / TOGGLE WIDGET ========================================================================== */ .bcs-floating-toggle-widget { position: fixed !important; top: 70px !important; right: 12px !important; z-index: 99990 !important; pointer-events: auto !important; user-select: none !important; -webkit-user-select: none !important; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; } .bcs-floating-close-pill { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; height: 32px !important; padding: 0 10px 0 8px !important; border-radius: 9999px !important; background: rgba(22, 12, 36, 0.92) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255, 102, 0, 0.5) !important; color: #ffffff !important; font-size: 12px !important; font-weight: 600 !important; cursor: pointer !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 10px rgba(255, 102, 0, 0.25) !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; white-space: nowrap !important; } html[data-bcs-festival="christmas"] .bcs-floating-close-pill, html[data-zv-festival="christmas"] .bcs-floating-close-pill { background: rgba(12, 32, 20, 0.92) !important; border-color: rgba(68, 204, 119, 0.5) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 10px rgba(68, 204, 119, 0.25) !important; } .bcs-floating-close-pill:hover { transform: translateY(-1px) scale(1.02) !important; border-color: #ff6600 !important; box-shadow: 0 6px 20px rgba(255, 102, 0, 0.45) !important; } .bcs-pill-icon { font-size: 13px !important; line-height: 1 !important; } .bcs-pill-label { font-size: 11.5px !important; color: rgba(255, 255, 255, 0.92) !important; } .bcs-pill-label strong { color: #44ff88 !important; } .bcs-floating-close-pill.is-off .bcs-pill-label strong { color: #ff6666 !important; } .bcs-pill-action-tag { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #ff5500 !important; color: #ffffff !important; font-size: 11px !important; font-weight: 750 !important; padding: 2px 7px !important; border-radius: 9999px !important; letter-spacing: 0.02em !important; transition: background 0.15s ease !important; } .bcs-pill-action-tag.is-turned-off { background: #33bb66 !important; } .bcs-floating-close-pill:hover .bcs-pill-action-tag { background: #ff3300 !important; } .bcs-floating-close-pill:hover .bcs-pill-action-tag.is-turned-off { background: #22cc55 !important; } /* When floating effects are OFF: completely wipe out all floating overlays */ html.bcs-floating-off .bcs-particles-container, html.bcs-floating-off .zv-particles-container, html.bcs-floating-off .bcs-bats-container, html.bcs-floating-off .zv-bats-container, html.bcs-floating-off .bcs-snow-container, html.bcs-floating-off .zv-snow-container, html.bcs-floating-off .bcs-fixed-corner-decor, body.bcs-floating-off .bcs-particles-container, body.bcs-floating-off .zv-particles-container, body.bcs-floating-off .bcs-bats-container, body.bcs-floating-off .zv-bats-container, body.bcs-floating-off .bcs-snow-container, body.bcs-floating-off .zv-snow-container, body.bcs-floating-off .bcs-fixed-corner-decor { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* Mobile Alignment (< 768px) */ @media (max-width: 768px) { .bcs-floating-toggle-widget { top: 56px !important; right: 8px !important; } .bcs-floating-close-pill { height: 28px !important; padding: 0 8px 0 6px !important; font-size: 11px !important; gap: 4px !important; } .bcs-pill-icon { font-size: 12px !important; } .bcs-pill-label { font-size: 10.5px !important; } .bcs-pill-action-tag { font-size: 10px !important; padding: 2px 6px !important; } } /* ========================================================================== BCS PERFORMANCE & SMOOTHNESS GUARANTEE (2026-09-22) ========================================================================== */ html[data-bcs-festival="classic"] .bcs-particles-container, html[data-bcs-festival="classic"] .zv-particles-container, html[data-bcs-festival="classic"] .bcs-fixed-corner-decor, html[data-zv-festival="classic"] .bcs-particles-container, html[data-zv-festival="classic"] .zv-particles-container, html[data-zv-festival="classic"] .bcs-fixed-corner-decor, body[data-bcs-festival="classic"] .bcs-particles-container, body[data-bcs-festival="classic"] .zv-particles-container, body[data-bcs-festival="classic"] .bcs-fixed-corner-decor { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } @media (max-width: 768px) { .bcs-particles-container, .zv-particles-container, .bcs-fixed-corner-decor { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } }