/* landing_aiwave_menthub_theme.css Purpose: - Match Mentorship Hub color vibe (red primary, dark glass UI) - Add the same "alive" button animations used across the main site - Fix the hero image frame (remove blue/purple background art) Scoped ONLY to: */ body.landing-aiwave{ /* Mentorship Hub red + glow */ --mh-red: #ff3b30; --mh-red2: #ff5a50; --mh-redGlow: rgba(255,59,48,0.55); --mh-glass: rgba(10,10,14,0.62); --mh-glass-strong: rgba(10,10,14,0.78); /* Override AIWave theme tokens so its components turn red */ --color-primary: var(--mh-red); --color-primary-gradient-start: var(--mh-red2); --color-primary-gradient-end: var(--mh-red); /* Dark chips + nav surfaces */ --color-dark: rgba(12,12,16,0.82); /* Make AIWave's primary shadow red-ish */ --shadow-primary: 0 22px 80px rgba(255,59,48,0.35); } /* Rotating headline word (theme-gradient) -> solid red (no purple gradient) */ body.landing-aiwave .theme-gradient{ background: none !important; -webkit-text-fill-color: var(--mh-red) !important; color: var(--mh-red) !important; } /* ===================== Landing-only: Advance tab numbers should match tab text color - Fixes the 01–04 badges in the "What's Inside" / advance-tab section. - The number text was being colored via `.theme-gradient` (`-webkit-text-fill-color`), and the badge circle was coming from a purple PNG background on `.count-text`. ===================== */ body.landing-aiwave .rainbow-advance-tab-area .advance-tab-button-1 .tab-button-list .tab-button .count-text{ /* Match inactive tab title color */ color: var(--color-body); /* Remove the purple badge background image */ background: none !important; position: relative; border-radius: 999px; /* Outline matches current text color without affecting layout */ box-shadow: inset 0 0 0 1px currentColor; } body.landing-aiwave .rainbow-advance-tab-area .advance-tab-button-1 .tab-button-list .tab-button.active .count-text{ /* Match active tab title color */ color: var(--color-white); } /* Subtle fill that follows the same color (kept behind the number) */ body.landing-aiwave .rainbow-advance-tab-area .advance-tab-button-1 .tab-button-list .tab-button .count-text::before{ content: ""; position: absolute; inset: 0 !important; border-radius: inherit; background: currentColor; opacity: 0.10; pointer-events: none; z-index: 0; } /* Force the 01–04 text to inherit the badge color (override .theme-gradient text-fill) */ body.landing-aiwave .rainbow-advance-tab-area .advance-tab-button-1 .tab-button-list .tab-button .count-text .theme-gradient{ background: none !important; -webkit-text-fill-color: currentColor !important; color: currentColor !important; position: relative; z-index: 1; } /* ===================== Mentorship-style CTA Buttons ===================== */ @keyframes mhBtnPulse{ 0%{ opacity: 0.30; } 50%{ opacity: 0.85; } 100%{ opacity: 0.30; } } @keyframes mhBtnFloat{ 0%{ transform: translateY(0px); } 50%{ transform: translateY(-3px); } 100%{ transform: translateY(0px); } } /* Apply to AIWave gradient buttons (e.g. Get Access) */ body.landing-aiwave a.btn-default, body.landing-aiwave button.btn-default, body.landing-aiwave div.btn-default{ position: relative; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 0 0 1px rgba(255,59,48,0.22), 0 22px 85px rgba(255,59,48,0.30), 0 10px 30px rgba(0,0,0,0.45); animation: mhBtnFloat 3.2s ease-in-out infinite; will-change: transform; } body.landing-aiwave a.btn-default::before, body.landing-aiwave button.btn-default::before, body.landing-aiwave div.btn-default::before{ content: ""; position: absolute; inset: -10px; border-radius: inherit; background: radial-gradient(circle at 50% 55%, var(--mh-redGlow), transparent 62%); opacity: 0.65; z-index: 0; animation: mhBtnPulse 2.8s ease-in-out infinite; } body.landing-aiwave a.btn-default > *, body.landing-aiwave button.btn-default > *, body.landing-aiwave div.btn-default > *{ position: relative; z-index: 1; } body.landing-aiwave a.btn-default:hover, body.landing-aiwave button.btn-default:hover, body.landing-aiwave div.btn-default:hover{ animation-play-state: paused; transform: translateY(-3px); filter: brightness(1.07); box-shadow: 0 0 0 1px rgba(255,59,48,0.35), 0 30px 110px rgba(255,59,48,0.42), 0 14px 40px rgba(0,0,0,0.55); } body.landing-aiwave a.btn-default:active, body.landing-aiwave button.btn-default:active, body.landing-aiwave div.btn-default:active{ transform: translateY(0); box-shadow: 0 0 0 1px rgba(255,59,48,0.28), 0 18px 70px rgba(255,59,48,0.28), 0 10px 28px rgba(0,0,0,0.50); } /* Login + pill buttons (rainbow-gradient-btn) — make them feel like the hub */ body.landing-aiwave a.rainbow-gradient-btn, body.landing-aiwave button.rainbow-gradient-btn, body.landing-aiwave div.rainbow-gradient-btn{ transition: transform 0.18s ease, filter 0.18s ease; } body.landing-aiwave a.rainbow-gradient-btn span, body.landing-aiwave button.rainbow-gradient-btn span, body.landing-aiwave div.rainbow-gradient-btn span{ background: rgba(10,10,14,0.72); border: 1px solid rgba(255,255,255,0.10); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px rgba(255,59,48,0.18); } body.landing-aiwave a.rainbow-gradient-btn:hover, body.landing-aiwave button.rainbow-gradient-btn:hover, body.landing-aiwave div.rainbow-gradient-btn:hover{ transform: translateY(-2px); filter: brightness(1.05); } /* Active pill tabs: stronger red glow */ body.landing-aiwave .tab-btn-grp .nav-link.rainbow-gradient-btn.active, body.landing-aiwave .tab-btn-grp .nav-link.rainbow-gradient-btn[aria-selected="true"]{ filter: brightness(1.04); } body.landing-aiwave .tab-btn-grp .nav-link.rainbow-gradient-btn.active span, body.landing-aiwave .tab-btn-grp .nav-link.rainbow-gradient-btn[aria-selected="true"] span{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 0 0 1px rgba(255,59,48,0.32), 0 18px 70px rgba(255,59,48,0.22); animation: mhBtnPulse 3.2s ease-in-out infinite; } /* Respect reduced motion */ /* Placeholder should read like placeholder (lighter opacity) */ body.landing-aiwave .lp-discord-input::placeholder{ color: rgba(255,255,255,0.38); opacity: 1; } /* Landing: Free Discord modal consent checkbox NOTE: base theme hides checkboxes globally (opacity:0; position:absolute). This override is landing-only and modal-scoped so it can't affect other pages. */ body.landing-aiwave #lpDiscordModal .lp-discord-consent > input#lpDiscordConsent[type="checkbox"]{ opacity: 1; position: relative; -webkit-appearance: none; appearance: none; width: 16px; height: 16px; flex: 0 0 16px; border-radius: 4px; border: 2px solid rgba(255,255,255,0.72); background: transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.45); display: inline-block; cursor: pointer; } body.landing-aiwave #lpDiscordModal .lp-discord-consent > input#lpDiscordConsent[type="checkbox"]:checked{ border-color: rgba(255,59,48,0.95); background-color: rgba(255,59,48,0.88); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3 3 7-7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 12px 10px; } body.landing-aiwave #lpDiscordModal .lp-discord-consent > input#lpDiscordConsent[type="checkbox"]:focus-visible{ outline: none; box-shadow: 0 0 0 4px rgba(255,59,48,0.28), inset 0 0 0 1px rgba(0,0,0,0.45); } /* Join Discord CTA button (real button, matches landing theme) */ body.landing-aiwave .lp-discord-joinbtn{ margin-top: 10px; width: 100%; height: 48px; border-radius: 14px; border: 1px solid rgba(255,59,48,0.26); background: linear-gradient(90deg, var(--mh-red2), var(--mh-red)); color: rgba(255,255,255,0.94); font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 16px 44px rgba(255,59,48,0.20); } body.landing-aiwave .lp-discord-joinbtn:hover{ filter: brightness(1.05); } body.landing-aiwave .lp-discord-joinbtn:active{ transform: translateY(1px); } body.landing-aiwave .lp-discord-joinbtn:focus-visible{ outline: none; box-shadow: 0 0 0 4px rgba(255,59,48,0.18), 0 16px 44px rgba(255,59,48,0.20); } @media (prefers-reduced-motion: reduce){ body.landing-aiwave a.btn-default, body.landing-aiwave button.btn-default, body.landing-aiwave div.btn-default{ animation: none !important; } body.landing-aiwave a.btn-default::before, body.landing-aiwave button.btn-default::before, body.landing-aiwave div.btn-default::before, body.landing-aiwave .tab-btn-grp .nav-link.rainbow-gradient-btn.active span, body.landing-aiwave .tab-btn-grp .nav-link.rainbow-gradient-btn[aria-selected="true"] span{ animation: none !important; } } /* ===================== Landing hero CTA row (Get Started + Login) - Keep design consistent, but clearly differentiate Login as secondary. ===================== */ body.landing-aiwave .landing-hero-ctas{ display: inline-flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; } body.landing-aiwave a.btn-default.landing-hero-login{ /* Match header 'Get Started' (rainbow-gradient-btn) colour scheme, but keep .btn-default shape + float animation */ border-width: 2px !important; border-style: solid !important; border-color: rgba(255,255,255,0.10) !important; background: rgba(10,10,14,0.72) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px rgba(255,59,48,0.18), 0 16px 55px rgba(0,0,0,0.42); } body.landing-aiwave a.btn-default.landing-hero-login::before{ /* Keep the same bounce animation as .btn-default; tune glow to match header scheme */ opacity: 0.55; } body.landing-aiwave a.btn-default.landing-hero-login:hover{ border-color: rgba(255,255,255,0.16) !important; } @media (max-width: 575px){ body.landing-aiwave .landing-hero-ctas{ flex-direction: column; gap: 12px; } body.landing-aiwave .landing-hero-ctas > a{ width: min(320px, 100%); justify-content: center; } } /* ===================== Hero image frame (remove the blue/purple art) ===================== */ body.landing-aiwave .slider-style-1.variation-default .slider-frame{ background: var(--mh-glass) !important; border: 1px solid rgba(255,59,48,0.22) !important; border-radius: 26px; backdrop-filter: blur(16px) saturate(135%); -webkit-backdrop-filter: blur(16px) saturate(135%); box-shadow: 0 0 0 1px rgba(255,59,48,0.16), 0 35px 140px rgba(255,59,48,0.22), 0 22px 85px rgba(0,0,0,0.55); } body.landing-aiwave .slider-style-1.variation-default .slider-frame::before{ display: none !important; } /* Add a soft glow halo around the frame (like hub glass cards) */ body.landing-aiwave .slider-style-1.variation-default .slider-frame::after{ content: ""; position: absolute; inset: -10px; border-radius: 30px; background: radial-gradient(circle at 35% 20%, rgba(255,59,48,0.20), transparent 55%); z-index: -1; opacity: 0.9; pointer-events: none; } /* Keep any remaining background art from bleeding into the frame */ body.landing-aiwave .slider-style-1.variation-default .slider-frame, body.landing-aiwave .slider-style-1.variation-default .slider-frame *{ background-clip: padding-box; } /* Round the hero image itself to match the page's consistent 18px radius */ body.landing-aiwave .slider-style-1.variation-default .slider-frame img.slider-image-effect{ border-radius: 18px; } /* Ensure the slider section doesn't inject its own background image */ body.landing-aiwave .slider-area.slider-bg-image{ background-image: none !important; } /* ===================== Fix: Generator pill buttons should sit in one straight row (like your example) ===================== */ /* Prevent wrapping (this is what was kicking the last button to a 2nd line) */ body.landing-aiwave .generator-tab-defalt .nav-tabs{ flex-wrap: nowrap !important; overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; justify-content: center !important; gap: 14px !important; padding-bottom: 10px; margin-bottom: 50px; /* slightly tighter than default 70px */ } /* Make sure each tab stays its natural width and never breaks text */ body.landing-aiwave .generator-tab-defalt .nav-tabs .nav-item{ flex: 0 0 auto; } body.landing-aiwave .generator-tab-defalt .nav-tabs .nav-link{ flex: 0 0 auto; white-space: nowrap; } /* Style only the *label* pill span, not the decorative underline span */ body.landing-aiwave .generator-tab-defalt button > span.generator-icon{ height: 60px; /* slightly smaller so 5 fit on desktop */ padding: 0 18px; /* tighter padding */ gap: 12px; /* tighter icon gap */ font-size: 15px; /* slightly smaller label */ line-height: 1; border-radius: 999px; } /* Kill the AIWave underline bar (it looks like a stray red line on this layout) */ body.landing-aiwave .generator-tab-defalt .nav-link span.border-bottom-style{ display: none !important; } /* Thin, subtle scrollbar when overflow is needed */ body.landing-aiwave .generator-tab-defalt .nav-tabs::-webkit-scrollbar{ height: 6px; } body.landing-aiwave .generator-tab-defalt .nav-tabs::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.14); border-radius: 999px; } /* ===================== Small polish: round the hero screenshot image (static/landing/2.png) ===================== */ body.landing-aiwave img[src="/static/landing/2.png"]{ border-radius: 20px; } /* ===================== Reviews marquee (copied from landing.html) ===================== */ body.landing-aiwave .lp-reviews{ margin-top: 60px; padding: 18px 0 0; position: relative; } /* Title above the review marquee (keep the original "Built for traders" / "What our members say") */ body.landing-aiwave .lp-review-heading{ width: min(1320px, calc(100% - 44px)); margin: 0 auto; padding: 0 0 22px; } body.landing-aiwave .lp-review-kicker{ margin: 0 0 10px; font-size: 14px; font-weight: 800; letter-spacing: 0.02em; color: rgba(255,255,255,0.86); text-align: center; } body.landing-aiwave .lp-review-title{ margin: 0; font-size: clamp(34px, 3.4vw, 54px); line-height: 1.05; font-weight: 900; text-align: center; color: rgba(255,255,255,0.96); } body.landing-aiwave .lp-reviews-lg{ position: relative; width: 100%; margin: 0; padding-left: 22px; padding-right: 22px; padding-bottom: 0px; /* Soft natural edge fade (mask), blends into background */ -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, transparent 100% ); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, transparent 100% ); } body.landing-aiwave .lp-marquee{ position: relative; overflow: visible; padding: 30px 0; } body.landing-aiwave .lp-marquee + .lp-marquee{ margin-top: 20px !important; } body.landing-aiwave .lp-track{ display: flex; gap: 16px; width: max-content; will-change: transform; } body.landing-aiwave .lp-marquee-a .lp-track{ animation: lp-marquee-left 42s linear infinite; } body.landing-aiwave .lp-marquee-b .lp-track{ animation: lp-marquee-right 54s linear infinite; } @keyframes lp-marquee-left{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } } @keyframes lp-marquee-right{ from{ transform: translateX(-50%); } to{ transform: translateX(0); } } body.landing-aiwave .lp-card{ width: min(520px, 88vw); border-radius: 18px; padding: 18px 18px 18px; background: rgba(18,18,22,.62); border: 1px solid rgba(255,80,80,.10); box-shadow: 0 16px 45px rgba(0,0,0,.40); backdrop-filter: blur(12px) saturate(135%); } body.landing-aiwave .lp-card-top{ display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } body.landing-aiwave .lp-card-stars{ color: rgba(255,190,70,.95); letter-spacing: 1px; font-weight: 900; font-size: 12px; } body.landing-aiwave .lp-card-name{ color: rgba(255,255,255,.78); font-weight: 800; font-size: 12px; } body.landing-aiwave .lp-card p{ margin: 0; color: rgba(255,255,255,.70); font-size: 13px; line-height: 1.35; } @media (max-width: 720px){ body.landing-aiwave .lp-reviews{ margin-top: 30px; } body.landing-aiwave .lp-marquee-a .lp-track{ animation-duration: 34s; } body.landing-aiwave .lp-marquee-b .lp-track{ animation-duration: 42s; } } /* ===================== Fix: "Join the community" CTA layout + make the panel match Mentorship Hub vibe ===================== */ body.landing-aiwave .rainbow-rn-cta{ background: transparent !important; /* Space before the footer (requested) */ margin-bottom: 64px; } body.landing-aiwave .rainbow-rn-cta .content-wrapper{ background: rgba(16, 16, 20, 0.58) !important; border: 1px solid rgba(255, 59, 48, 0.20) !important; border-radius: 26px !important; padding: 44px 36px !important; box-shadow: 0 22px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,59,48,.10); backdrop-filter: blur(14px) saturate(135%); } body.landing-aiwave .rainbow-rn-cta .right-content{ display: flex; justify-content: flex-end; } body.landing-aiwave .rainbow-rn-cta .call-to-btn{ display: inline-flex; align-items: center; justify-content: flex-end; gap: 14px; } /* Make the CTA button red (it was inheriting a light style in some builds) */ body.landing-aiwave .rainbow-rn-cta .call-to-btn a.btn-default{ background: linear-gradient(180deg, var(--mh-red2), var(--mh-red)) !important; color: #fff !important; border-color: rgba(255,255,255,0.14) !important; box-shadow: 0 0 0 1px rgba(255,59,48,0.28), 0 20px 80px rgba(255,59,48,0.35), 0 10px 26px rgba(0,0,0,0.45) !important; } body.landing-aiwave .rainbow-rn-cta .call-to-btn a.btn-default:hover{ filter: brightness(1.07); } body.landing-aiwave .rainbow-rn-cta .team-image img{ border-radius: 999px; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 35px rgba(0,0,0,.45); } @media (max-width: 991px){ body.landing-aiwave .rainbow-rn-cta .content-wrapper{ padding: 34px 22px !important; } body.landing-aiwave .rainbow-rn-cta .right-content{ justify-content: flex-start; margin-top: 18px; } body.landing-aiwave .rainbow-rn-cta .call-to-btn{ justify-content: flex-start; } } /* ===================== Footer: remove extra gap below footer and keep it flush to bottom ===================== */ html{ height: 100%; } body.landing-aiwave{ margin: 0 !important; padding-bottom: 0 !important; height: 100vh; display: flex; flex-direction: column; /* Body itself must not scroll — only main.page-wrapper scrolls */ overflow: hidden !important; } body.landing-aiwave main.page-wrapper{ flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; /* Visible scrollbar — always visible, styled to match the dark theme */ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.28) rgba(255,255,255,0.06); } /* Webkit scrollbar on the scroll container */ body.landing-aiwave main.page-wrapper::-webkit-scrollbar{ width: 8px; } body.landing-aiwave main.page-wrapper::-webkit-scrollbar-track{ background: rgba(255,255,255,0.06); } body.landing-aiwave main.page-wrapper::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.28); border-radius: 4px; } body.landing-aiwave main.page-wrapper::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,0.45); } body.landing-aiwave footer.footer{ margin-bottom: 0 !important; } /* Remove the blue-ish edge blocks on the brand/logo ticker */ body.landing-aiwave .brand-style-2.slider-brand::before, body.landing-aiwave .brand-style-2.slider-brand::after{ display: none !important; } /* Keep a soft edge fade that blends into the page background */ body.landing-aiwave .brand-style-2.slider-brand{ -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, transparent 100% ); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, transparent 100% ); } /* scroll-margin-top is no longer needed since header is out of the scroll flow. Anchor links within the scroll container just work. Keep a small offset for aesthetics. */ body.landing-aiwave #pricing { scroll-margin-top: 20px; } body.landing-aiwave #features { scroll-margin-top: 20px; } body.landing-aiwave #reviews { scroll-margin-top: 20px; } body.landing-aiwave #faq { scroll-margin-top: 20px; } body.landing-aiwave #contact { scroll-margin-top: 20px; } /* ===================== Landing-only: header sits in flow above the scroll container. No longer position:fixed — body is flex-column with overflow:hidden, so the header naturally stays pinned at top. ===================== */ body.landing-aiwave .rainbow-header{ position: relative !important; flex-shrink: 0; z-index: 9999; /* Frosted-glass look */ background: rgba(5, 6, 11, 0.85); backdrop-filter: blur(14px) saturate(135%); -webkit-backdrop-filter: blur(14px) saturate(135%); border-bottom: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45); } /* Safety net: if .sticky is ever added to the landing header, neutralise it. The header-sticky JS hook class has been removed from the template so this should never fire, but keep it as a fallback. */ body.landing-aiwave .rainbow-header.sticky{ position: relative !important; animation: none !important; height: auto !important; background: rgba(5, 6, 11, 0.85) !important; background-color: rgba(5, 6, 11, 0.85) !important; backdrop-filter: blur(14px) saturate(135%) !important; -webkit-backdrop-filter: blur(14px) saturate(135%) !important; padding: 0 !important; } /* Keep logo + hamburger vertically centred on mobile */ @media (max-width: 991px){ body.landing-aiwave .rainbow-header .row{ align-items: center !important; min-height: 64px; } } /* Ensure the mobile menu overlay still sits above the header when open */ body.landing-aiwave .popup-mobile-menu{ z-index: 10000; } /* ===================== Landing header nav (red hover/active underline) — keep layout identical ===================== */ body.landing-aiwave .mainmenu-nav .mainmenu > li > a::after{ background-image: url(../Images/bg/nav-bg-shape-red.svg) !important; } body.landing-aiwave .mainmenu-nav .mainmenu > li > a:hover, body.landing-aiwave .mainmenu-nav .mainmenu > li > a.active{ color: var(--mh-red) !important; } body.landing-aiwave .mainmenu-nav .mainmenu > li.current > a, body.landing-aiwave .popup-mobile-menu .mainmenu > li.current > a{ color: var(--mh-red) !important; } body.landing-aiwave .mainmenu-nav .mainmenu > li.current > a::after{ opacity: 1 !important; visibility: visible !important; width: 150% !important; } /* Force "Best Offer" badge color (override compiled theme CSS) */ body.landing-aiwave .rainbow-pricing.style-aiwave .feature-badge, body.landing-aiwave .pricing-style-aiwave .feature-badge, body.landing-aiwave .pricing-table-inner .feature-badge{ background: #ff3b30 !important; background-color: #ff3b30 !important; color: #ffffff !important; /* change to #000 if you want black text */ border: 1px solid rgba(255,59,48,.55) !important; box-shadow: 0 10px 30px rgba(255,59,48,.25) !important; } /* Make default "black" buttons white text on landing_aiwave */ body.landing-aiwave a.btn-default.color-blacked, body.landing-aiwave button.btn-default.color-blacked, body.landing-aiwave div.btn-default.color-blacked{ color: #ffffff !important; } /* Center + tighten "Built for traders" block */ body.landing-aiwave .section-title.text-left{ text-align: center !important; } body.landing-aiwave .section-title.text-left .theme-gradient{ display: block; margin: 0 0 8px 0 !important; /* gap under subtitle */ width: 100%; } /* Reduce space between subtitle and main heading */ body.landing-aiwave .section-title.text-left .title{ margin-top: 0 !important; } /* Center + tighten the subtitle gap ONLY for the reviews/testimonial section */ body.landing-aiwave .rainbow-testimonial-area .section-title{ text-align: center !important; } body.landing-aiwave .rainbow-testimonial-area .section-title .subtitle, body.landing-aiwave .rainbow-testimonial-area .section-title .theme-gradient{ display: block; width: 100%; margin: 0 0 6px 0 !important; /* controls gap to the big heading */ line-height: 1.1; } body.landing-aiwave .rainbow-testimonial-area .section-title .title{ margin-top: 0 !important; } /* Reviews heading: center subtitle + tighten gap */ .reviews-heading{ text-align: center !important; } .reviews-heading .theme-gradient{ display: block; width: 100%; margin: 0 0 6px 0 !important; /* smaller gap under "Built for traders" */ line-height: 1.1; } .reviews-heading .title{ margin-top: 0 !important; /* removes extra space above big heading */ } /* ===================== Service slider cards + arrows - Remove image-based borders - Recreate the same "file-shaped" card + red hover outline in pure CSS - Make slider arrow borders red (no PNG backgrounds) ===================== */ /* Replace service icons with clean 01–09 number badges (landing-only) */ body.landing-aiwave .rainbow-service-area .aiwave-service-default .icon{ display: flex; align-items: center; } body.landing-aiwave .rainbow-service-area .aiwave-service-default .feature-num{ width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 16px; line-height: 1; letter-spacing: 0.02em; color: rgba(255,255,255,0.92); background: rgba(10,10,14,0.64); border: 1px solid rgba(255,59,48,0.26); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px rgba(255,59,48,0.14), 0 16px 45px rgba(0,0,0,0.38), 0 0 18px rgba(255,59,48,0.18); backdrop-filter: blur(12px) saturate(135%); -webkit-backdrop-filter: blur(12px) saturate(135%); } /* Safety: if any legacy bg-shaped markup still exists, hide it on landing only */ body.landing-aiwave .rainbow-service-area .aiwave-service-default.has-bg-shaped .bg-shaped, body.landing-aiwave .rainbow-service-area .aiwave-service-default.has-bg-shaped .bg, body.landing-aiwave .rainbow-service-area .aiwave-service-default.has-bg-shaped .bg-hover{ display: none !important; } /* Coded "file" shape (matches bg.png geometry) */ body.landing-aiwave .rainbow-service-area .aiwave-service-default.has-bg-shaped{ position: relative; background: none; border-radius: 18px; overflow: hidden; transition: 0.4s; /* shape controls */ --svc-notch-x: 34%; /* where the top flat ends */ --svc-slope-x: 52%; /* where the diagonal meets the lower top */ --svc-notch-y: 45px; /* height of the lower top bar */ } body.landing-aiwave .rainbow-service-area .aiwave-service-default.has-bg-shaped::before{ content: ""; position: absolute; inset: 0 !important; z-index: 0; /* dark glass fill (very close to the original PNG look) */ background: radial-gradient(circle at 30% 18%, rgba(255,59,48,0.06), transparent 55%), linear-gradient(180deg, rgba(14,14,20,0.72) 0%, rgba(10,10,14,0.82) 100%); backdrop-filter: blur(10px) saturate(135%); -webkit-backdrop-filter: blur(10px) saturate(135%); clip-path: polygon( 0 0, var(--svc-notch-x) 0, var(--svc-slope-x) var(--svc-notch-y), 100% var(--svc-notch-y), 100% 100%, 0 100% ); } body.landing-aiwave .rainbow-service-area .aiwave-service-default.has-bg-shaped::after{ content: ""; position: absolute; inset: 0 !important; z-index: 1; pointer-events: none; /* Polygon-aware outline (stays complete on the diagonal edge) */ border: 1px solid transparent; background: linear-gradient(transparent, transparent) padding-box, linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.10)) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); transition: 0.35s ease; clip-path: polygon( 0 0, var(--svc-notch-x) 0, var(--svc-slope-x) var(--svc-notch-y), 100% var(--svc-notch-y), 100% 100%, 0 100% ); } /* Red outline on hover (and if the theme ever marks a card as .active) */ body.landing-aiwave .rainbow-service-area .aiwave-service-default.has-bg-shaped:hover::after, body.landing-aiwave .rainbow-service-area .aiwave-service-default.has-bg-shaped.active::after{ /* thicker + cleaner hover outline */ border-width: 2px; background: linear-gradient(transparent, transparent) padding-box, linear-gradient(180deg, rgba(255,59,48,0.98), rgba(255,59,48,0.82)) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 0 0 1px rgba(255,59,48,0.18), 0 26px 95px rgba(255,59,48,0.18); } /* Keep content above the pseudo elements */ body.landing-aiwave .rainbow-service-area .aiwave-service-default.has-bg-shaped .inner{ position: relative; z-index: 2; } /* Slider arrows: pure CSS border + icon (no PNG background) */ body.landing-aiwave .rainbow-service-area .rainbow-gradient-arrows button.slick-arrow{ background: none !important; border: 1px solid rgba(255,59,48,0.70) !important; border-radius: 10px !important; height: 59px; width: 53px; padding: 0 !important; display: flex; align-items: center; justify-content: center; transition: 0.25s ease; } /* Override theme rule that hides the icon */ body.landing-aiwave .rainbow-service-area .rainbow-gradient-arrows button.slick-arrow i{ display: inline-block !important; font-size: 18px; color: rgba(255,255,255,0.92); } body.landing-aiwave .rainbow-service-area .rainbow-gradient-arrows button.slick-arrow:hover{ border-color: rgba(255,59,48,0.92) !important; background: rgba(255,59,48,0.10) !important; box-shadow: 0 0 0 1px rgba(255,59,48,0.22), 0 18px 70px rgba(255,59,48,0.20); } /* ===================== Mobile hamburger button background (landing only) ===================== */ body.landing-aiwave .hamburger-button, body.landing-aiwave .hamberger-button{ background: #ff3b30 !important; } body.landing-aiwave .rainbow-advance-tab-area.aiwave-bg-gradient.rainbow-section-gap-big{ -webkit-mask-image: linear-gradient(180deg, transparent, #ff3b30 15%, #ff3b30 88%, transparent); mask-image: linear-gradient(180deg, transparent, #ff3b30 15%, #ff3b30 88%, transparent); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* Fade the "not included" minus-circle icons */ body.landing-aiwave .pricing-table-inner i.fa-sharp.fa-regular.fa-minus-circle{ opacity: 0.4; } /* ===================== Pricing: fix "Best Offer" badge being clipped (landing only) - Some builds clip overflow near the top of pricing cards. - This keeps the badge visible without affecting other pages. ===================== */ body.landing-aiwave .aiwave-pricing-area, body.landing-aiwave .aiwave-pricing-area .row, body.landing-aiwave .aiwave-pricing-area [class*="col-"]{ overflow: visible !important; } body.landing-aiwave .aiwave-pricing-area .rainbow-pricing.style-aiwave.active, body.landing-aiwave .aiwave-pricing-area .rainbow-pricing.style-aiwave.active .pricing-table-inner, body.landing-aiwave .aiwave-pricing-area .rainbow-pricing.style-aiwave.active .pricing-top, body.landing-aiwave .aiwave-pricing-area .rainbow-pricing.style-aiwave.active .pricing-header{ overflow: visible !important; } /* Keep AIWave placement: centered on the top border line, half outside */ body.landing-aiwave .aiwave-pricing-area .rainbow-pricing.style-aiwave.active .feature-badge{ top: 0 !important; left: 50% !important; transform: translate(-50%, -50%) !important; z-index: 20 !important; } /* Landing-only: Built For Traders slider - equal height cards */ body.landing-aiwave .rainbow-service-slider-actvation .slick-track{ display:flex !important; align-items:stretch !important; } body.landing-aiwave .rainbow-service-slider-actvation .slick-slide{ height:auto !important; display:flex !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } body.landing-aiwave .rainbow-service-slider-actvation .slick-slide > div{ display:flex; width:100%; background: transparent !important; border: 0 !important; box-shadow: none !important; } body.landing-aiwave .rainbow-service-slider-actvation .slide-single-layout, body.landing-aiwave .rainbow-service-slider-actvation .rainbow-box-card{ height:100%; display:flex; width:100%; background: transparent !important; border: 0 !important; box-shadow: none !important; } body.landing-aiwave .rainbow-service-slider-actvation .rainbow-box-card .inner{ display:flex; flex-direction:column; height:100%; width:100%; } body.landing-aiwave .rainbow-service-slider-actvation .rainbow-box-card .description{ flex:1; display:flex; flex-direction:column; } body.landing-aiwave .rainbow-service-slider-actvation .rainbow-box-card .description .read-more-btn{ margin-top:auto; } /* Landing-only: keep the service-card notch fully transparent (no extra box showing through) */ body.landing-aiwave .rainbow-service-slider-actvation .file-shaped-bg{ background: transparent !important; } /* Landing-only: CTA hover should stay clean (no blue gradient text / no forced capitalization) */ body.landing-aiwave .rainbow-service-slider-actvation .aiwave-service-default .description .read-more-btn:hover{ background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: currentColor !important; text-transform: none !important; color: var(--mh-red) !important; } body.landing-aiwave .rainbow-service-slider-actvation .aiwave-service-default .description .read-more-btn:hover i{ color: currentColor !important; } /* ===================== "What's Inside" tab section (5 tabs) — typography tighten (landing only) - Headings requested as h3 in the template - Body text requested at 20px ===================== */ body.landing-aiwave .generator-tab-defalt .tab-pane .inner{ /* keep existing layout, just make overall text a touch larger and consistent */ font-size: 22px; } body.landing-aiwave .generator-tab-defalt .tab-pane .section-title .title{ /* h3 in markup; enforce smaller heading size without affecting other sections */ font-size: 40px; line-height: 1.2; } @media only screen and (max-width: 767px){ body.landing-aiwave .generator-tab-defalt .tab-pane .section-title .title{ font-size: 30px; } } body.landing-aiwave .generator-tab-defalt .tab-pane .inner .features-section ul li{ font-size: 22px; line-height: 30px; } body.landing-aiwave .generator-tab-defalt .tab-pane .read-more .btn-default{ font-size: 16px; } .site-icon{ width: 24px; height: 24px; display: inline-block; vertical-align: middle; flex: 0 0 auto; } .site-icon--accent{ color: #ff3b3b; filter: drop-shadow(0 0 6px rgba(255, 59, 59, .45)); } /* ===================== Landing-only: stop marquee "jump" resets - Brand (Discord logo row): remove slick wrap-jump by using a true marquee loop. - Reviews marquee: the JS in landing_aiwave.html duplicates tracks once so `translateX(-50%)` loops seamlessly. - Stars: prevent transform reset jump by alternating direction instead of snapping back to 0 each loop. ===================== */ /* Brand (Discord logos) marquee wrapper */ body.landing-aiwave .lp-brand-marquee{ overflow: hidden; } /* Animate the original brand list (now not Slick-initialized) */ body.landing-aiwave .lp-brand-marquee .lp-brand-track{ display: flex; flex-wrap: nowrap; align-items: center; width: max-content; will-change: transform; animation: lp-marquee-left 42s linear infinite; } /* Stars: avoid end-of-loop teleport reset */ body.landing-aiwave .menthub-bg .menthub-stars-a{ animation-direction: alternate !important; animation-timing-function: ease-in-out !important; will-change: transform; } /* ---------------------------------------------------------- Landing page only: Discord logo ticker (brand marquee) Goal: match AiWave style — single row, smooth loop, no "box", soft edge fade that blends into the page background. ---------------------------------------------------------- */ body.landing-aiwave .lp-brand-marquee{ position: relative; width: 100%; overflow: hidden; /* keep the marquee clean (no scrollbars / no spill) */ background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 18px 0; /* Soft natural edge fade (does NOT add a visible bar/box) */ -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,1) 12%, rgba(0,0,0,1) 88%, transparent 100% ); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,1) 12%, rgba(0,0,0,1) 88%, transparent 100% ); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } /* Hard reset any theme/slick "strip" styling inside the ticker */ body.landing-aiwave .lp-brand-marquee .brand-style-2, body.landing-aiwave .lp-brand-marquee .slider-brand, body.landing-aiwave .lp-brand-marquee .lp-brand-track{ background: transparent !important; border: 0 !important; box-shadow: none !important; } /* One unbroken row that scrolls smoothly */ body.landing-aiwave .lp-brand-marquee .lp-brand-track{ display: flex !important; flex-wrap: nowrap !important; align-items: center; justify-content: flex-start !important; width: max-content; margin: 0 !important; padding: 0 !important; list-style: none !important; white-space: nowrap; /* Avoid seam jitter (gap can desync the 50% loop) */ gap: 0 !important; will-change: transform; transform: translate3d(0,0,0); animation: lp-marquee-left 40s linear infinite; } /* Override theme's flex-basis "grid" sizing that causes wrapping/columns */ body.landing-aiwave .lp-brand-marquee .lp-brand-track > li{ flex: 0 0 auto !important; flex-basis: auto !important; width: auto !important; margin: 0 !important; padding: 0 44px; } body.landing-aiwave .lp-brand-marquee .lp-brand-track a{ display: block; } body.landing-aiwave .lp-brand-marquee .lp-brand-track img{ display: block; height: 32px; width: auto; opacity: 0.45; filter: grayscale(1) brightness(1.1); backface-visibility: hidden; transform: translate3d(0,0,0); } /* Responsive tune (keeps the same feel as the example) */ @media (max-width: 767px){ body.landing-aiwave .lp-brand-marquee{ padding: 14px 0; } body.landing-aiwave .lp-brand-marquee .lp-brand-track > li{ padding: 0 26px; } body.landing-aiwave .lp-brand-marquee .lp-brand-track img{ height: 26px; } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce){ body.landing-aiwave .lp-brand-marquee .lp-brand-track{ animation: none !important; transform: none !important; } } /* ===== Landing-only: Free Discord modal ===== */ body.landing-aiwave.lp-modal-open { overflow: hidden; } /* Ensure Free Join matches other buttons (only the Free one) */ body.landing-aiwave .aiwave-pricing-area .js-open-free-discord{ width: 100%; display: flex; align-items: center; justify-content: center; } /* Modal base */ body.landing-aiwave .lp-discord-modal{ position: fixed; inset: 0 !important; z-index: 99999; display: grid; place-items: center; padding: 18px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, visibility .18s ease; } body.landing-aiwave .lp-discord-modal.is-open{ opacity: 1; visibility: visible; pointer-events: auto; } body.landing-aiwave .lp-discord-backdrop{ position: absolute; inset: 0 !important; background: rgba(0,0,0,.45); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); } body.landing-aiwave .lp-discord-card{ position: relative; width: min(560px, 92vw); border-radius: 18px; background: rgba(10,12,18,.72); border: 1px solid rgba(255,59,48,.22); box-shadow: 0 30px 90px rgba(0,0,0,.65); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); padding: 18px 18px 16px; transform: translateY(10px) scale(.985); transition: transform .18s ease; overflow: hidden; } body.landing-aiwave .lp-discord-modal.is-open .lp-discord-card{ transform: translateY(0) scale(1); } body.landing-aiwave .lp-discord-card::before{ content:""; position:absolute; inset:-1px; border-radius: inherit; background: radial-gradient(55% 70% at 0% 0%, rgba(255,59,48,.22), transparent 60%), radial-gradient(55% 70% at 100% 100%, rgba(255,59,48,.14), transparent 62%); pointer-events:none; opacity:.9; } body.landing-aiwave .lp-discord-close{ position:absolute; right: 12px; top: 12px; width: 36px; height: 36px; border-radius: 12px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); color: rgba(255,255,255,.88); font-size: 20px; line-height: 1; display:grid; place-items:center; cursor:pointer; } body.landing-aiwave .lp-discord-title{ margin: 0; font-size: 18px; font-weight: 700; color: rgba(255,255,255,.92); } body.landing-aiwave .lp-discord-sub{ margin: 6px 0 0; font-size: 13px; color: rgba(255,255,255,.65); } body.landing-aiwave .lp-discord-form{ margin-top: 14px; position: relative; } body.landing-aiwave .lp-discord-label{ display:block; font-size: 12px; color: rgba(255,255,255,.70); margin-bottom: 6px; } body.landing-aiwave .lp-discord-input{ width: 100%; height: 44px; border-radius: 14px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.10); color: rgba(255,255,255,.90); padding: 0 14px; outline: none; } body.landing-aiwave .lp-discord-input:focus{ border-color: rgba(255,59,48,.35); box-shadow: 0 0 0 4px rgba(255,59,48,.14); } body.landing-aiwave .lp-discord-consent{ display:flex; gap: 10px; align-items:flex-start; margin-top: 12px; font-size: 12px; color: rgba(255,255,255,.65); } body.landing-aiwave .lp-discord-consent input{ margin-top: 3px; } body.landing-aiwave .lp-discord-actions{ display:flex; justify-content:flex-end; gap: 10px; margin-top: 14px; } body.landing-aiwave .lp-discord-btn{ height: 40px; padding: 0 16px; border-radius: 14px; font-weight: 700; font-size: 13px; cursor:pointer; } body.landing-aiwave .lp-discord-btn-ghost{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.82); } body.landing-aiwave .lp-discord-btn-primary{ background: linear-gradient(90deg, rgba(255,59,48,1), rgba(255,99,71,1)); border: 1px solid rgba(255,59,48,.22); color: rgba(255,255,255,.92); box-shadow: 0 14px 40px rgba(255,59,48,.22); } body.landing-aiwave .lp-discord-msg{ margin-top: 10px; font-size: 12px; color: rgba(255,255,255,.70); min-height: 16px; } body.landing-aiwave .lp-discord-join{ margin-top: 10px; display: inline-flex; font-weight: 800; color: rgba(255,255,255,.92); text-decoration: none; } body.landing-aiwave .lp-discord-join:hover{ text-decoration: underline; } /* Landing-only: c1–c4 thumbnail container — rounded to match the image */ body.landing-aiwave .rainbow-advance-tab-area .thumbnail{ border-radius: var(--radius, 12px); overflow: hidden; border: 2px solid rgba(255,59,48,.22) !important; box-shadow: 0 0 0 1px rgba(255,59,48,.08), 0 22px 80px rgba(0,0,0,0.55) !important; } /* Landing-only: c1–c4 tab screenshots — clean frame + readability (no layout changes) */ body.landing-aiwave .rainbow-advance-tab-area .thumbnail img.radius[src^="/static/landing/c"]{ /* keep sizing/layout exactly the same */ display: block; /* clean border (no box-model change) */ box-shadow: 0 0 0 1px rgba(255,255,255,0.14), /* light outline */ 0 0 0 2px rgba(255,59,48,0.14), /* subtle red edge */ 0 22px 80px rgba(0,0,0,0.55); /* separation from bg */ /* make the screenshot a touch clearer without “changing the image” */ filter: contrast(1.08) saturate(1.06) brightness(1.02); image-rendering: -webkit-optimize-contrast; } /* === Landing-only premium word changer (no overlap) === */ body.landing-aiwave .lp-headline { display: inline-block; perspective: 900px; perspective-origin: 50% 50%; } body.landing-aiwave .lp-words-wrapper { display: inline-block; position: relative; vertical-align: top; transform-style: preserve-3d; } body.landing-aiwave .lp-words-wrapper b { position: absolute; left: 0; top: 0; white-space: nowrap; display: none; opacity: 0; transform-origin: 50% 70%; backface-visibility: hidden; will-change: transform, opacity; } body.landing-aiwave .lp-words-wrapper b.is-visible { position: relative; display: inline-block; opacity: 1; } body.landing-aiwave .lp-words-wrapper b.is-hidden { display: none; opacity: 0; } /* Exit: bend forward, then flip back and fade */ @keyframes lpWordExitFlip { 0% { opacity: 1; transform: translateZ(0) rotateX(0deg) skewX(0deg); } 22% { opacity: 1; transform: translateZ(10px) rotateX(0deg) skewX(-7deg); } 100% { opacity: 0; transform: translateZ(-20px) rotateX(92deg) skewX(0deg); } } /* Enter: flip in from the back, tiny overshoot, then settle */ @keyframes lpWordEnterFlip { 0% { opacity: 0; transform: translateZ(-20px) rotateX(-92deg); } 62% { opacity: 1; transform: translateZ(6px) rotateX(10deg); } 100% { opacity: 1; transform: translateZ(0) rotateX(0deg); } } body.landing-aiwave .lp-words-wrapper b.lp-exit { display: inline-block; /* keep visible while exiting */ position: relative; animation: lpWordExitFlip 650ms cubic-bezier(.2,.9,.2,1) forwards; } body.landing-aiwave .lp-words-wrapper b.lp-enter { animation: lpWordEnterFlip 520ms cubic-bezier(.2,.8,.2,1) forwards; } /* Accessibility: reduced motion */ @media (prefers-reduced-motion: reduce) { body.landing-aiwave .lp-words-wrapper b.lp-exit, body.landing-aiwave .lp-words-wrapper b.lp-enter { animation: none !important; } } /* ======================================================================= Lightbox — reuses the same .lightbox-overlay / .lightbox-close system that app.js + style.css use on trade_day etc. Defined here because the landing page does not load /static/style.css. ======================================================================= */ body.landing-aiwave img.zoomable { cursor: zoom-in; } body.landing-aiwave img.zoomable:active { transform: scale(0.995); } body.landing-aiwave .lightbox-overlay { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(0, 0, 0, 0.70); backdrop-filter: blur(10px); } body.landing-aiwave .lightbox-overlay.show { display: flex; } body.landing-aiwave .lightbox-inner { max-width: 94vw; max-height: 88vh; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 20px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(239, 68, 68, 0.18); background: rgba(10, 14, 23, 0.65); overflow: hidden; } body.landing-aiwave .lightbox-inner img { display: block; max-width: 100%; max-height: 88vh; width: auto; height: auto; object-fit: contain; } body.landing-aiwave .lightbox-close { position: fixed; top: 14px; right: 14px; z-index: 10000; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(10, 14, 23, 0.55); color: rgba(255, 255, 255, 0.92); padding: 10px 12px; cursor: pointer; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); display: none; } /* ===================== Mobile optimizations (landing_aiwave only) Keep desktop unchanged; fix alignment, sizing, and scroll affordance. ===================== */ /* Landing: hide "Tap image to enlarge" hint on desktop (mobile enables it) */ body.landing-aiwave #features .tap-to-enlarge-hint{ display: none; } @media (max-width: 767.98px){ /* Mobile: make the FEATURES heading read like an H1 (more obvious section start) */ body.landing-aiwave #features > .container > .row:first-child .section-title .title{ font-size: 38px !important; line-height: 1.05 !important; letter-spacing: -0.02em; font-weight: 700; } /* Mobile: tighten the sticky header so it takes less vertical space */ body.landing-aiwave header.rainbow-header .container.position-relative{ padding-top: 0 !important; padding-bottom: 0 !important; } body.landing-aiwave header.rainbow-header .row.align-items-center.row--0{ min-height: 52px !important; } body.landing-aiwave header.rainbow-header.header-sticky .col-md-6.col-6{ padding-top: 0 !important; padding-bottom: 0 !important; } body.landing-aiwave header.rainbow-header.header-sticky .header-right{ min-height: 0 !important; } body.landing-aiwave header.rainbow-header.header-sticky .mobile-menu-bar{ margin-left: 0 !important; } body.landing-aiwave header.rainbow-header.header-sticky .hamberger-button{ width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; } body.landing-aiwave header.rainbow-header.header-sticky .hamberger-button i{ font-size: 20px !important; line-height: 1; } /* Mobile: smaller sticky header so it doesn't dominate the screen */ body.landing-aiwave header.rainbow-header.header-sticky{ padding-top: 6px; padding-bottom: 6px; } body.landing-aiwave header.rainbow-header.header-sticky .logo img{ max-height: 22px; width: auto; } /* Reduce mobile header controls sizing */ body.landing-aiwave header.rainbow-header.header-sticky .header-btn .btn-default, body.landing-aiwave header.rainbow-header.header-sticky .header-btn .btn-small{ padding: 10px 14px; font-size: 14px; line-height: 1; } /* When sticky JS adds a state class, keep it compact too */ body.landing-aiwave header.rainbow-header.header-sticky.sticky, body.landing-aiwave header.rainbow-header.header-sticky.is-sticky, body.landing-aiwave header.rainbow-header.header-sticky.header-fixed{ padding-top: 4px; padding-bottom: 4px; } /* Hero typography + CTAs */ body.landing-aiwave .slider-area .inner.text-center{ padding-left: 12px; padding-right: 12px; } body.landing-aiwave .slider-area .title.display-one{ font-size: 38px; line-height: 1.12; letter-spacing: -0.02em; } body.landing-aiwave .slider-area .description{ font-size: 16px; line-height: 1.55; margin-left: auto; margin-right: auto; max-width: 520px; } body.landing-aiwave .landing-hero-ctas{ display: flex; flex-direction: column-reverse; align-items: center; gap: 12px; } body.landing-aiwave .landing-hero-ctas .btn-default{ width: 100%; max-width: 320px; text-align: center; justify-content: center; } /* Discord (brand) marquee stability */ body.landing-aiwave .lp-brand-marquee .lp-brand-track{ transform: translate3d(0,0,0); backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); will-change: transform; animation-duration: 28s; } /* What's Inside: make tabs clearly scrollable + always-visible scrollbar */ body.landing-aiwave #features .tab-btn-grp{ overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; gap: 10px; padding-bottom: 10px; /* space for scrollbar */ -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.40) rgba(255,255,255,0.10); } body.landing-aiwave #features .tab-btn-grp::-webkit-scrollbar{ height: 8px; } body.landing-aiwave #features .tab-btn-grp::-webkit-scrollbar-track{ background: rgba(255,255,255,0.10); border-radius: 99px; } body.landing-aiwave #features .tab-btn-grp::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.40); border-radius: 99px; } body.landing-aiwave #features .tab-btn-grp .nav-link{ flex: 0 0 auto; white-space: nowrap; } /* What's Inside: prioritize the preview image and make it easier to read */ body.landing-aiwave #features .rainbow-tab-content .inner .row{ display: flex; flex-direction: column; } body.landing-aiwave #features .rainbow-tab-content .inner .row > [class*="col"]{ width: 100%; } /* Image column appears first on mobile */ body.landing-aiwave #features .rainbow-tab-content .inner .row > [class*="col"]:nth-child(1){ order: 2; } body.landing-aiwave #features .rainbow-tab-content .inner .row > [class*="col"]:nth-child(2){ order: 1; } /* IMPORTANT: The image column (2nd column in DOM) still carries utility margin classes like mt_sm--30 / mt_md--30 in the markup. After we reorder the columns on mobile (image first), that margin becomes *top padding* above the image, which creates the large "dead space" above the hint pill. Remove that top margin on mobile only. */ body.landing-aiwave #features .rainbow-tab-content .inner .row > [class*="col"]:nth-child(2){ margin-top: 0 !important; } body.landing-aiwave #features .rainbow-tab-content .section-title .title{ font-size: 22px; line-height: 1.25; } body.landing-aiwave #features .rainbow-tab-content .features-section .description, body.landing-aiwave #features .rainbow-tab-content .features-section p, body.landing-aiwave #features .rainbow-tab-content .features-section li{ font-size: 16px; line-height: 1.55; } body.landing-aiwave #features .rainbow-tab-content .export-img{ max-width: 100%; margin: 0 auto; } body.landing-aiwave #features .rainbow-tab-content .export-img img{ width: 100%; height: auto; } /* General: center single buttons in text-centered blocks */ body.landing-aiwave .text-center .btn-default{ margin-left: auto; margin-right: auto; } /* Mobile: What's Inside images — remove borders so they can fill more space */ body.landing-aiwave #features .rainbow-tab-content .export-img{ position: relative; margin: 0 auto 16px; /* add space between image and the text below */ padding: 0; border: none !important; background: transparent !important; box-shadow: none !important; } body.landing-aiwave #features .rainbow-tab-content .export-img img{ border: none !important; box-shadow: none !important; } /* Mobile: What's Inside tab buttons — 2 on first row, 3 on second, icons only (no scrolling) */ body.landing-aiwave #features ul.nav.nav-tabs.tab-button{ display: grid !important; grid-template-columns: repeat(6, 1fr); gap: 10px 12px; justify-content: center; max-width: 340px; margin: 0 auto 20px; overflow: visible !important; padding: 68px 10px 12px !important; position: relative; border-radius: 18px; background: linear-gradient(180deg, rgba(255,59,48,0.08), rgba(255,59,48,0.03)); border: 1px solid rgba(255,59,48,0.24); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 24px rgba(0,0,0,0.24); } body.landing-aiwave #features ul.nav.nav-tabs.tab-button::before{ content: "TAP THE ICONS BELOW TO PREVIEW EACH FEATURE"; position: absolute; top: 12px; left: 10px; right: 10px; display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 9px 12px; border-radius: 999px; text-align: center; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; line-height: 1.15; color: #ffffff; background: linear-gradient(180deg, rgba(255,59,48,0.28), rgba(255,59,48,0.18)); border: 1px solid rgba(255,59,48,0.65); box-shadow: 0 0 0 2px rgba(255,59,48,0.12), 0 6px 18px rgba(255,59,48,0.18); } body.landing-aiwave #features ul.nav.nav-tabs.tab-button > li{ grid-column: span 2; display: flex; justify-content: center; } body.landing-aiwave #features ul.nav.nav-tabs.tab-button > li:nth-child(1){ grid-column: 2 / span 2; grid-row: 1; } body.landing-aiwave #features ul.nav.nav-tabs.tab-button > li:nth-child(2){ grid-column: 4 / span 2; grid-row: 1; } body.landing-aiwave #features ul.nav.nav-tabs.tab-button > li:nth-child(3){ grid-column: 1 / span 2; grid-row: 2; } body.landing-aiwave #features ul.nav.nav-tabs.tab-button > li:nth-child(4){ grid-column: 3 / span 2; grid-row: 2; } body.landing-aiwave #features ul.nav.nav-tabs.tab-button > li:nth-child(5){ grid-column: 5 / span 2; grid-row: 2; } /* Clean circular icon buttons on mobile only (desktop untouched) */ body.landing-aiwave #features ul.nav.nav-tabs.tab-button .nav-link{ padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } body.landing-aiwave #features ul.nav.nav-tabs.tab-button .nav-link::before, body.landing-aiwave #features ul.nav.nav-tabs.tab-button .nav-link::after{ content: none !important; display: none !important; } body.landing-aiwave #features ul.nav.nav-tabs.tab-button .nav-link > span.generator-icon::before, body.landing-aiwave #features ul.nav.nav-tabs.tab-button .nav-link > span.generator-icon::after{ content: none !important; display: none !important; } body.landing-aiwave #features ul.nav.nav-tabs.tab-button .nav-link > span.generator-icon{ width: 66px; height: 66px; padding: 0 !important; border-radius: 50% !important; display: flex !important; align-items: center; justify-content: center; gap: 0 !important; font-size: 0; /* hide text labels on mobile, keep for a11y */ line-height: 0; position: relative; background: radial-gradient(circle at 30% 22%, rgba(255,255,255,0.05), rgba(255,255,255,0) 48%), rgba(0,0,0,0.42) !important; border: 1px solid rgba(255,59,48,0.46) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), 0 0 0 2px rgba(255,59,48,0.10), 0 8px 18px rgba(0,0,0,0.32) !important; animation: mobileFeatureTabPulse 1.55s ease-in-out infinite; } body.landing-aiwave #features ul.nav.nav-tabs.tab-button .nav-link.active > span.generator-icon{ border-color: rgba(255,59,48,0.95) !important; box-shadow: 0 0 0 3px rgba(255,59,48,0.22), 0 0 22px rgba(255,59,48,0.18), 0 8px 18px rgba(0,0,0,0.35) !important; animation: none; } body.landing-aiwave #features ul.nav.nav-tabs.tab-button .nav-link{ touch-action: manipulation; -webkit-tap-highlight-color: rgba(255,59,48,0.25); } body.landing-aiwave #features ul.nav.nav-tabs.tab-button .nav-link > span.generator-icon::after{ content: "TAP" !important; display: inline-flex !important; align-items: center; justify-content: center; pointer-events: none; z-index: 2; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); min-width: 32px; padding: 2px 6px; border-radius: 999px; font-size: 9px; font-weight: 800; line-height: 1; letter-spacing: 0.06em; color: #fff; background: rgba(255,59,48,0.86); border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 4px 10px rgba(255,59,48,0.22); } body.landing-aiwave #features ul.nav.nav-tabs.tab-button .nav-link.active > span.generator-icon::after{ content: "OPEN" !important; background: rgba(255,59,48,0.96); } body.landing-aiwave #features ul.nav.nav-tabs.tab-button .nav-link span.border-bottom-style{ display: none !important; } body.landing-aiwave #features ul.nav.nav-tabs.tab-button .generator-icon svg{ width: 24px; height: 24px; } /* Mobile: image hint — only for real images (first 3 panes) */ body.landing-aiwave #features .export-img.img-bg-shape.has-real-image{ position: relative; /* Reserve space so the hint never overlaps or touches the image. The hint is absolutely positioned, so padding-top must exceed (hint top + hint height) to provide breathing room. */ padding-top: 34px; } body.landing-aiwave #features .export-img.img-bg-shape.has-real-image .tap-to-enlarge-hint{ display: inline-flex; position: absolute; top: 2px; left: 50%; transform: translateX(-50%); font-size: 12px; line-height: 1; white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.2px; color: rgba(255, 255, 255, 0.65); background: rgba(0, 0, 0, 0.20); border: 1px solid rgba(255, 255, 255, 0.10); padding: 6px 10px; border-radius: 999px; pointer-events: none; z-index: 2; } /* Mobile: remove decorative frame behind real images (lets the image feel bigger) */ body.landing-aiwave #features .export-img.img-bg-shape.has-real-image .image-shape{ display: none !important; } /* Mobile: keep "COMING SOON!" placeholders centered and fully visible */ body.landing-aiwave #features .export-img.img-bg-shape:not(.has-real-image) .image-shape{ left: 50% !important; transform: translateX(-50%) !important; width: 100% !important; } /* Mobile: ensure the bottom CTA stacks cleanly and the button is truly centered */ body.landing-aiwave .rainbow-rn-cta .content-wrapper{ flex-direction: column !important; text-align: center !important; row-gap: 18px; } body.landing-aiwave .rainbow-rn-cta .right-content{ width: 100% !important; display: flex !important; justify-content: center !important; } /* Mobile: center the bottom CTA button ("Join Free Today") The template uses `.call-to-btn.text-start.text-lg-end`, so we override Bootstrap's `text-start` and any float-based alignment from the theme. */ body.landing-aiwave .rainbow-rn-cta .call-to-btn{ width: 100% !important; display: flex !important; justify-content: center !important; align-items: center !important; text-align: center !important; } body.landing-aiwave .rainbow-rn-cta .call-to-btn.text-start, body.landing-aiwave .rainbow-rn-cta .call-to-btn.text-lg-end{ text-align: center !important; } body.landing-aiwave .rainbow-rn-cta .call-to-btn a.btn-default{ float: none !important; margin: 0 auto !important; } @keyframes mobileFeatureTabPulse{ 0%, 100%{ transform: scale(1); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), 0 0 0 2px rgba(255,59,48,0.10), 0 8px 18px rgba(0,0,0,0.32); } 50%{ transform: scale(1.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 0 0 2px rgba(255,59,48,0.16), 0 0 16px rgba(255,59,48,0.14), 0 10px 20px rgba(0,0,0,0.34); } } } /* Desktop-only polish: keep feature pills visually even and prevent hover lift clipping */ @media (min-width: 768px){ body.landing-aiwave #features .generator-tab-defalt .nav-tabs .nav-link.rainbow-gradient-btn{ will-change: auto; } /* Stop desktop feature tabs from shifting upward (which clips the border in the row) */ body.landing-aiwave #features .generator-tab-defalt .nav-tabs .nav-link.rainbow-gradient-btn:hover, body.landing-aiwave #features .generator-tab-defalt .nav-tabs .nav-link.rainbow-gradient-btn:focus-visible{ transform: none !important; } /* Make the visible inner pill ring look even on all sides */ body.landing-aiwave #features .generator-tab-defalt .nav-tabs .nav-link.rainbow-gradient-btn > span.generator-icon{ display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; border: 1px solid rgba(255,255,255,0.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), 0 0 0 1px rgba(255,59,48,0.16); } body.landing-aiwave #features .generator-tab-defalt .nav-tabs .nav-link.rainbow-gradient-btn.active > span.generator-icon, body.landing-aiwave #features .generator-tab-defalt .nav-tabs .nav-link.rainbow-gradient-btn[aria-selected="true"] > span.generator-icon{ border-color: rgba(255,59,48,0.34); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 0 0 1px rgba(255,59,48,0.30), 0 0 20px rgba(255,59,48,0.14); } } /* Mobile-only header height tweak */ @media (max-width: 767px) { .header-default .logo a { height: 30px !important; line-height: 30px !important; display: flex; align-items: center; } .header-default .logo img { max-height: 30px !important; /* adjust to 28-34px if needed */ width: auto; height: auto; } .header-default .header-wrapper { min-height: 0 !important; padding-top: 10px !important; padding-bottom: 10px !important; } } /* Landing only smooth section scrolling */ html body.landing-aiwave{ scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce){ html body.landing-aiwave{ scroll-behavior: auto; } }