/* ========================================================= SAPIOLOV HERO — STABLE v2 Based on stable baseline 15.05 + cherry-picked nav/layout improvements. Asset: left-punch-reference (unchanged). Last CSS in . No screen-blend layers. ========================================================= */ :root { --sx-black: #050507; --sx-copper: #d28b66; --sx-gold: #e8c97f; --sx-rose: #b53b68; } html, body { background: var(--sx-black) !important; } /* ================= NAV ================= */ #navbar { background: rgba(5, 5, 7, 0.80) !important; backdrop-filter: blur(14px) saturate(108%) !important; -webkit-backdrop-filter: blur(14px) saturate(108%) !important; } #navbar::after { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: 1px !important; background: linear-gradient( 90deg, transparent 0%, rgba(210,139,102,0.06) 18%, rgba(210,139,102,0.26) 48%, rgba(232,201,127,0.58) 50%, rgba(210,139,102,0.26) 52%, rgba(210,139,102,0.06) 82%, transparent 100% ) !important; opacity: 0.72 !important; } #navbar::before { content: "" !important; position: absolute !important; left: 50% !important; bottom: -4px !important; width: 7px !important; height: 7px !important; transform: translateX(-50%) rotate(45deg) !important; background: linear-gradient(135deg, #fff0c7, #d28b66 72%) !important; box-shadow: 0 0 10px rgba(210,139,102,0.30) !important; z-index: 3 !important; } /* ================= HERO BASE ================= */ #hero.hero, #hero.hero--compact, #hero.hero--with-gates { position: relative !important; min-height: 100vh !important; overflow: hidden !important; isolation: isolate !important; background: var(--sx-black) !important; } #hero .hero-bg { position: absolute !important; inset: 0 !important; z-index: 0 !important; background-image: linear-gradient( 90deg, rgba(5, 5, 7, 0.58) 0%, rgba(5, 5, 7, 0.32) 18%, rgba(5, 5, 7, 0.68) 40%, rgba(5, 5, 7, 0.28) 74%, rgba(5, 5, 7, 0.16) 100% ), linear-gradient( 180deg, rgba(5, 5, 7, 0.16) 0%, rgba(5, 5, 7, 0.02) 42%, rgba(5, 5, 7, 0.50) 100% ), url("../assets/hero-sapiolov-bg-premium-no-text.png") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; filter: brightness(0.84) saturate(0.72) contrast(1.08) !important; opacity: 1 !important; animation: none !important; } #hero .hero-bg::before, #hero .hero-bg::after { display: none !important; content: none !important; } /* Center darken overlay */ #hero::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 2 !important; pointer-events: none !important; background: radial-gradient( ellipse at 50% 46%, rgba(5, 5, 7, 0.78) 0%, rgba(5, 5, 7, 0.66) 26%, rgba(5, 5, 7, 0.38) 50%, rgba(5, 5, 7, 0.10) 78% ), linear-gradient( 90deg, rgba(5, 5, 7, 0.00) 0%, rgba(5, 5, 7, 0.12) 22%, rgba(5, 5, 7, 0.42) 38%, rgba(5, 5, 7, 0.62) 50%, rgba(5, 5, 7, 0.56) 62%, rgba(5, 5, 7, 0.18) 80%, rgba(5, 5, 7, 0.04) 100% ) !important; } /* Bottom cinematic fade — shorter + weaker on left side to keep legs visible */ #hero::after { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: 22vh !important; z-index: 4 !important; pointer-events: none !important; background: linear-gradient( 180deg, rgba(5, 5, 7, 0) 0%, rgba(5, 5, 7, 0.28) 55%, rgba(5, 5, 7, 0.82) 100% ) !important; -webkit-mask-image: linear-gradient( 90deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.5) 25%, rgba(0,0,0,1) 45%, rgba(0,0,0,1) 100% ) !important; mask-image: linear-gradient( 90deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.5) 25%, rgba(0,0,0,1) 45%, rgba(0,0,0,1) 100% ) !important; } /* ================= SILHOUETTE — PUNCH REFERENCE (unchanged) ================= */ #hero .hero-silhouette { position: absolute !important; top: clamp(74px, 8.5vh, 92px) !important; left: -2vw !important; right: 42% !important; bottom: 0 !important; width: auto !important; height: auto !important; z-index: 5 !important; background-image: url("../assets/hero-sapiolov-left-punch-reference.png") !important; background-repeat: no-repeat !important; background-size: cover !important; background-position: left top !important; background-color: transparent !important; opacity: 0.94 !important; mix-blend-mode: normal !important; pointer-events: none !important; filter: brightness(1.06) contrast(1.04) saturate(0.96) drop-shadow(0 0 6px rgba(218, 42, 126, 0.22)) drop-shadow(0 0 18px rgba(181, 31, 96, 0.16)) drop-shadow(14px 0 24px rgba(0, 0, 0, 0.40)) !important; -webkit-mask-image: none !important; mask-image: none !important; } /* Leg/chair lift — brightens bottom 40% of silhouette without affecting top */ #hero .hero-silhouette::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; pointer-events: none !important; background-image: url("../assets/hero-sapiolov-left-punch-reference.png") !important; background-repeat: no-repeat !important; background-size: cover !important; background-position: left top !important; opacity: 0.55 !important; mix-blend-mode: screen !important; filter: brightness(1.6) contrast(1.05) !important; -webkit-mask-image: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.5) 62%, rgba(0,0,0,1) 85%, rgba(0,0,0,1) 100% ) !important; mask-image: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.5) 62%, rgba(0,0,0,1) 85%, rgba(0,0,0,1) 100% ) !important; } #hero .hero-silhouette::after { display: none !important; content: none !important; } /* Smoke OFF */ #hero .hero-smoke--left, #hero .hero-smoke--right { display: none !important; opacity: 0 !important; visibility: hidden !important; } /* ================= HERO CONTENT ================= */ #hero .hero-content { position: relative !important; z-index: 6 !important; transform: translateX(4vw) translateY(0.6vh) !important; } #hero .hero-logo-large img { filter: drop-shadow(0 0 7px rgba(210, 139, 102, 0.24)) drop-shadow(0 0 18px rgba(181, 59, 104, 0.08)) !important; } /* Button secondary — less pink block */ #hero .btn-protocol--secondary { filter: brightness(0.90) saturate(0.82) contrast(1.02) !important; box-shadow: inset 0 1px 0 rgba(255, 235, 204, 0.20), inset 0 -1px 0 rgba(60, 18, 18, 0.22), 0 0 16px rgba(181, 59, 104, 0.07) !important; } /* Hide audio demo player */ #hero .mx-hero-listen { display: none !important; } /* ================= GATES — improved grid ================= */ #hero .world-gates--hero { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: clamp(36px, 4.5vw, 82px) !important; width: min(50vw, 670px) !important; margin-top: clamp(28px, 3.5vh, 48px) !important; } #hero .world-gate__badge { text-shadow: 0 0 10px rgba(232,201,127,0.10), 0 0 18px rgba(181,59,104,0.08) !important; } /* ================= RESPONSIVE ================= */ @media (max-width: 1024px) { #hero .hero-silhouette { top: 72px !important; background-size: cover !important; background-position: 0 top !important; opacity: 0.86 !important; } } @media (max-width: 768px) { #hero .hero-silhouette { top: 70px !important; background-size: auto 100% !important; background-position: left top !important; opacity: 0.46 !important; } #hero .hero-bg { filter: brightness(0.80) saturate(0.66) contrast(1.08) !important; } #hero .hero-content { transform: none !important; } #hero .world-gates--hero { width: min(90vw, 430px) !important; gap: 14px !important; } #navbar::before { display: none !important; } }