/* Mentorship Hub background + stars + shooting stars (scoped to landing_aiwave) */ html, body { height: 100%; } /* IMPORTANT: The Mentorship Hub cosmic gradients use semi-transparent blacks. If the document canvas is left transparent, the browser default (white) will bleed through and the whole page looks grey/washed. So we set a solid dark base behind the cosmic layer. */ html, body.landing-aiwave{ background: #05060b !important; background-color: #05060b !important; /* neutralize AIWave theme background vars on this page */ --color-bg-1: transparent; --color-bg-2: transparent; --color-bg-3: transparent; min-height: 100vh; overflow-x: hidden; } /* Keep all page content above the background */ body.landing-aiwave .page-wrapper{ position: relative; z-index: 1; background: transparent !important; } /* Some themes paint on html (not body). Ensure our dark base wins too. */ html{ background: #05060b !important; background-color: #05060b !important; } /* AIWave sets a light page background on . Ensure nothing paints over the cosmic layer. */ body.landing-aiwave, body.landing-aiwave *{ /* avoid turning the whole site grey/white because of theme backgrounds */ scroll-behavior: auto; } /* Kill AIWave overlay systems that wash out the stars (e.g. data-black-overlay="1") */ body.landing-aiwave [data-overlay]::before, body.landing-aiwave [data-black-overlay]::before, body.landing-aiwave [data-white-overlay]::before{ opacity: 0 !important; } /* Remove banner background images/shapes so the Mentorship background is fully visible */ body.landing-aiwave .slider-bg-image, body.landing-aiwave .slider-bg-image.bg-banner1, body.landing-aiwave .slider-bg-image.bg-banner2{ background-image: none !important; background-color: transparent !important; } body.landing-aiwave .bg-shape, body.landing-aiwave .bg-shape-one, body.landing-aiwave .bg-shape-two{ display: none !important; } /* Make all major AIWave sections transparent so the hub background shows end-to-end */ body.landing-aiwave section, body.landing-aiwave .slider-area, body.landing-aiwave .slider-style-1, body.landing-aiwave .variation-default, body.landing-aiwave .rainbow-header, body.landing-aiwave .rainbow-header.header-transparent, body.landing-aiwave .popup-mobile-menu, body.landing-aiwave .inner-popup{ background: transparent !important; background-color: transparent !important; } /* Remove any leftover large colored bars / separators */ body.landing-aiwave .rbt-separator, body.landing-aiwave .separator-top, body.landing-aiwave .separator-bottom, body.landing-aiwave .separator-line{ background: transparent !important; } /* Safety: if the theme uses utility classes for body background, neutralize them */ body.landing-aiwave .bg-color-body, body.landing-aiwave .bg-color-1, body.landing-aiwave .bg-color-2, body.landing-aiwave .bg-color-3{ background: transparent !important; background-color: transparent !important; } /* Remove any section color washes that fight the cosmic background */ body.landing-aiwave .rainbow-banner-area, body.landing-aiwave .rainbow-service-area, body.landing-aiwave .rainbow-pricing-area, body.landing-aiwave .rainbow-testimonial-area, body.landing-aiwave .rainbow-faq-area, body.landing-aiwave .rainbow-footer{ background: transparent !important; } /* If AIWave adds generic overlay layers, keep them from greying out the page */ body.landing-aiwave .overlay, body.landing-aiwave .bg-overlay{ background: transparent !important; opacity: 1 !important; } /* Replace the "blue behind image" style with a darker glass + subtle red edge */ body.landing-aiwave .rainbow-advance-tab, body.landing-aiwave .rainbow-card, body.landing-aiwave .rainbow-box, body.landing-aiwave .banner-thumbnail, body.landing-aiwave .thumbnail{ background: rgba(6, 8, 14, .55) !important; border: 1px solid rgba(255,59,48,.22) !important; box-shadow: 0 0 0 1px rgba(255,59,48,.08), 0 18px 70px rgba(0,0,0,.55) !important; backdrop-filter: blur(12px); } /* Make primary accent align to mentorship hub red */ body.landing-aiwave .theme-gradient, body.landing-aiwave .text-gradient, body.landing-aiwave .rainbow-gradient-text{ background: none !important; -webkit-text-fill-color: unset !important; } body.landing-aiwave .theme-color, body.landing-aiwave .theme-text, body.landing-aiwave .rainbow-gradient-text, body.landing-aiwave .title span, body.landing-aiwave .subtitle span{ color: #ff3b30 !important; } .menthub-bg{ position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(900px 520px at 52% 18%, rgba(255,59,48,.34), transparent 60%), radial-gradient(900px 520px at 15% 75%, rgba(255,59,48,.16), transparent 60%), radial-gradient(900px 520px at 88% 80%, rgba(59,130,246,.12), transparent 60%), radial-gradient(1000px 740px at 50% 45%, rgba(0,0,0,.55), rgba(0,0,0,.90)); animation: funnelGlowShift 11s ease-in-out infinite alternate; } @keyframes funnelGlowShift{ from { transform: translate3d(0,0,0) scale(1); opacity: .95; } to { transform: translate3d(0,-6px,0) scale(1.02); opacity: 1; } } /* Star layers: drift + twinkle */ .menthub-stars{ position: absolute; inset: 0; pointer-events: none; } .menthub-stars-a{ opacity: .90; background-image: radial-gradient(4px 4px at 6% 18%, rgba(255,255,255,.62), transparent 60%), radial-gradient(4px 4px at 14% 62%, rgba(255,255,255,.46), transparent 60%), radial-gradient(4px 4px at 22% 36%, rgba(255,255,255,.70), transparent 60%), radial-gradient(4px 4px at 31% 78%, rgba(255,255,255,.42), transparent 60%), radial-gradient(4px 4px at 38% 46%, rgba(255,255,255,.58), transparent 60%), radial-gradient(4px 4px at 44% 22%, rgba(255,255,255,.50), transparent 60%), radial-gradient(4px 4px at 52% 70%, rgba(255,255,255,.54), transparent 60%), radial-gradient(4px 4px at 61% 34%, rgba(255,255,255,.68), transparent 60%), radial-gradient(4px 4px at 69% 16%, rgba(255,255,255,.48), transparent 60%), radial-gradient(4px 4px at 74% 58%, rgba(255,255,255,.62), transparent 60%), radial-gradient(4px 4px at 82% 28%, rgba(255,255,255,.42), transparent 60%), radial-gradient(4px 4px at 88% 80%, rgba(255,255,255,.52), transparent 60%), radial-gradient(4px 4px at 95% 44%, rgba(255,255,255,.60), transparent 60%); animation: mhStarsDrift 28s linear infinite; } .menthub-stars-b{ opacity: .85; background-image: radial-gradient(6px 6px at 18% 22%, rgba(255,255,255,.32), transparent 60%), radial-gradient(5px 5px at 28% 58%, rgba(255,255,255,.26), transparent 60%), radial-gradient(6px 6px at 41% 14%, rgba(255,255,255,.28), transparent 60%), radial-gradient(5px 5px at 56% 48%, rgba(255,255,255,.22), transparent 60%), radial-gradient(5px 5px at 64% 76%, rgba(255,255,255,.24), transparent 60%), radial-gradient(5px 5px at 79% 38%, rgba(255,255,255,.30), transparent 60%), radial-gradient(5px 5px at 92% 20%, rgba(255,255,255,.20), transparent 60%); animation: mhStarsTwinkle 4.6s ease-in-out infinite alternate; } @keyframes mhStarsTwinkle{ from{ opacity: .55; filter: blur(0px); } to{ opacity: .95; filter: blur(.2px); } } @keyframes mhStarsTwinkle{ from{ opacity: .65; filter: blur(0px); } to{ opacity: .95; filter: blur(.15px); } } @keyframes mhStarsDrift{ from{ transform: translate3d(0,0,0); } to{ transform: translate3d(-18px,-10px,0); } } @keyframes mhStarsTwinkle{ from{ opacity: .55; filter: blur(0px); } to{ opacity: .95; filter: blur(.2px); } } @keyframes funnelGlowShift{ from { transform: translate3d(0,0,0) scale(1); opacity: .95; } to { transform: translate3d(0,-6px,0) scale(1.02); opacity: 1; } } /* Moon graphic (image-based, heavy lighting + slow drift). */ .menthub-moon{ position: absolute; left: 50%; top: 120px; width: 640px; height: 640px; transform: translateX(-50%); border-radius: 50%; opacity: .95; pointer-events: none; background: url('/static/img/menthub_moon.png') center/cover no-repeat; filter: drop-shadow(0 24px 90px rgba(0,0,0,.62)) drop-shadow(0 0 120px rgba(255,59,48,.22)); animation: mhMoonDrift 36s ease-in-out infinite alternate; } .menthub-moon::before{ /* Terminator + surface shading (gives bumps without ugly swirl) */ content:""; position:absolute; inset:0; border-radius:50%; background: radial-gradient(circle at 38% 32%, rgba(255,255,255,.20), rgba(255,255,255,0) 40%), radial-gradient(circle at 68% 60%, rgba(0,0,0,.58), rgba(0,0,0,0) 62%), radial-gradient(circle at 55% 48%, rgba(0,0,0,.22), rgba(0,0,0,0) 60%); mix-blend-mode: overlay; opacity: .90; } .menthub-moon::after{ /* red rim + animated moonlight sweep */ content:""; position:absolute; inset:-12px; border-radius:50%; background: radial-gradient(circle at 50% 50%, rgba(255,59,48,.16), rgba(255,59,48,0) 60%), radial-gradient(circle at 50% 50%, rgba(255,255,255,.10), rgba(255,255,255,0) 64%), linear-gradient(120deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 65%); background-size: 100% 100%, 100% 100%, 220% 220%; background-position: 0 0, 0 0, 0% 40%; filter: blur(1.5px); opacity: .92; animation: mhMoonLightSweep 10.5s linear infinite; } @keyframes mhMoonDrift{ 0%{ transform: translateX(calc(-50% - 38px)); } 50%{ transform: translateX(-50%); } 100%{ transform: translateX(calc(-50% + 38px)); } } @keyframes mhMoonLightSweep{ 0%{ background-position: 0 0, 0 0, -40% 35%; } 100%{ background-position: 0 0, 0 0, 140% 65%; } } @media (max-width: 900px){ .menthub-moon{ width: 460px; height: 460px; top: 180px; } } /* Shooting stars */ .menthub-shooting{ position: absolute; inset: 0; overflow: hidden; } .menthub-shooting .shoot{ position: absolute; width: 160px; height: 2px; background: linear-gradient(90deg, rgba(255,59,48,0), rgba(255,59,48,.85), rgba(255,255,255,.55)); border-radius: 999px; filter: drop-shadow(0 0 8px rgba(255,59,48,.35)); opacity: 0; transform: rotate(22deg); animation: mhShoot 6.8s linear infinite; } .menthub-shooting .shoot::after{ content:""; position: absolute; right: -3px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.65); filter: blur(.2px); } .menthub-shooting .s1{ top: 16%; left: -20%; animation-delay: 0.5s; } .menthub-shooting .s2{ top: 28%; left: -35%; animation-delay: 2.1s; width: 220px; } .menthub-shooting .s3{ top: 46%; left: -45%; animation-delay: 3.6s; width: 180px; } .menthub-shooting .s4{ top: 62%; left: -38%; animation-delay: 5.1s; width: 240px; } .menthub-shooting .s5{ top: 74%; left: -28%; animation-delay: 1.3s; width: 200px; } .menthub-shooting .s6{ top: 10%; left: -48%; animation-delay: 4.4s; width: 210px; } @keyframes mhShoot{ 0%{ opacity: 0; transform: translate3d(0,0,0) rotate(22deg); } 8%{ opacity: .9; } 28%{ opacity: 0; } 100%{ opacity: 0; transform: translate3d(160vw, 80vh, 0) rotate(22deg); } }