/* =============================================== FORMAS.AI - WELCOME PAGE Modern Glassy Minimal Design =============================================== */ /* ========== FONT IMPORTS ========== */ /* Moved to HTML for better performance - avoids render-blocking @import */ /* ========== ACCESSIBILITY ========== */ /* Skip Navigation Link */ .skip-link { position: absolute; top: -100%; left: 16px; background: #fff; color: #000; padding: 8px 16px; text-decoration: none; font-weight: 600; font-size: 14px; border-radius: 0 0 8px 8px; z-index: 10000; transition: top 0.2s ease; } .skip-link:focus { top: 0; } /* Focus Visible - keyboard navigation outlines */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* ========== CSS VARIABLES ========== */ /* NOTE: Primary brand colors are in /static/css/mm/brand-core.css These local vars map to brand-core for consistency */ :root { /* Colors - Warm Dark Palette */ --primary-bg: #141210; --secondary-bg: #1c1816; --tertiary-bg: #24201e; --text-primary: #e8e0d8; --text-secondary: #a89888; --text-muted: #807068; --border-color: #443a34; --border-subtle: #362e2a; /* Warm Sandy Gold Accent */ --accent-primary: #d4a574; --accent-bright: #dbb48a; --accent-soft: #e8c8a0; --accent-glow: rgba(212, 165, 116, 0.4); --accent-subtle: rgba(212, 165, 116, 0.15); /* Warm Secondary Accent */ --accent-magenta: #b0936a; --accent-magenta-glow: rgba(176, 147, 106, 0.4); /* Glassy Effects - Warm tinted */ --glass-bg: rgba(28, 22, 18, 0.7); --glass-border: rgba(255, 235, 210, 0.06); --glass-hover: rgba(40, 32, 28, 0.85); /* Spacing */ --spacing-xs: 8px; --spacing-sm: 16px; --spacing-md: 24px; --spacing-lg: 48px; --spacing-xl: 80px; /* Border Radius */ --radius-sm: 12px; --radius-md: 24px; --radius-lg: 32px; /* Transitions */ --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* ========== RESET & BASE ========== */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background: var(--primary-bg); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* iOS Safari scrolling fix */ @supports (-webkit-touch-callout: none) { html, body { -webkit-overflow-scrolling: touch; } } /* ========== NAVIGATION - Premium Glass Style ========== */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 0 40px; height: 70px; display: flex; justify-content: space-between; align-items: center; /* Stronger glass effect (warm tinted) */ background: color-mix(in srgb, var(--primary-bg) 25%, transparent); backdrop-filter: blur(50px) saturate(180%) brightness(0.9); -webkit-backdrop-filter: blur(50px) saturate(180%) brightness(0.9); /* Subtle bottom border */ border-bottom: 1px solid rgba(255, 220, 180, 0.06); /* Soft shadow for depth */ box-shadow: 0 1px 0 0 rgba(255, 220, 180, 0.02) inset, 0 4px 20px rgba(0, 0, 0, 0.3); } /* Navbar becomes darker but keeps glass effect on scroll */ .navbar.scrolled { background: rgba(38, 30, 26, 0.55); backdrop-filter: blur(50px) saturate(180%) brightness(0.7); -webkit-backdrop-filter: blur(50px) saturate(180%) brightness(0.7); border-bottom-color: rgba(255, 220, 180, 0.06); } .logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text-primary); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; transition: opacity 0.2s ease; } .logo:hover { opacity: 0.85; } .logo img { height: 32px; } .nav-links { display: flex; align-items: center; gap: 8px; } .nav-link { color: rgba(255, 255, 255, 0.85); text-decoration: none; font-size: 14px; font-weight: 500; padding: 8px 16px; border-radius: 8px; transition: all 0.2s ease; position: relative; white-space: nowrap; /* iPad: avoid 2-line nav labels */ } .nav-link:hover { color: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.06); } .nav-link:active { transform: scale(0.98); } /* Nav button - matches user pill height */ .nav-btn { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--text-primary); padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; white-space: nowrap; /* iPad: avoid wrapping CTA text */ } .nav-btn .btn-text { white-space: nowrap; /* ensure the span itself can't wrap */ } /* iPad/tablet: slightly tighter nav spacing so pills never wrap */ @media (max-width: 1024px) and (min-width: 769px) { .navbar { padding: 0 28px; } .nav-links { gap: 6px; } .nav-link { padding: 8px 12px; font-size: 13px; } .nav-btn { padding: 6px 12px; font-size: 12.5px; gap: 6px; } } .nav-btn:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 220, 180, 0.18); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .nav-btn:active { transform: translateY(0) scale(0.98); } /* Primary CTA variant - same size as user pill - Terracotta */ .nav-btn.get-started-btn { background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-bright) 100%); border: none; color: #1a1210; font-weight: 700; box-shadow: 0 2px 8px var(--accent-glow); padding: 6px 16px; height: 34px; } .nav-btn.get-started-btn:hover { background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent-bright) 100%); box-shadow: 0 4px 16px var(--accent-glow); transform: translateY(-1px); } .menu-toggle { display: none; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; color: rgba(255, 255, 255, 0.85); /* Avoid font-glyph hamburger misalignment; we render lines via .menu-toggle-icon */ font-size: 0; cursor: pointer; padding: 8px 12px; transition: all 0.2s ease; } /* Professional hamburger icon (3 crisp lines, centered) - 18% smaller */ .menu-toggle .menu-toggle-icon { display: block; width: 15px; height: 2px; background: currentColor; border-radius: 2px; opacity: 0.92; position: relative; transform: translateZ(0); } .menu-toggle .menu-toggle-icon::before, .menu-toggle .menu-toggle-icon::after { content: ''; position: absolute; left: 0; width: 15px; height: 2px; background: currentColor; border-radius: 2px; opacity: 0.92; } .menu-toggle .menu-toggle-icon::before { top: -5px; } .menu-toggle .menu-toggle-icon::after { top: 5px; } .menu-toggle:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.9); } /* ========== CONTAINER ========== */ .container { max-width: 1400px; margin: 0 auto; padding: 0 60px; } .container-wide { max-width: 1400px; margin: 0 auto; padding: 0 60px; } /* ========== HERO VIDEO SECTION ========== */ .hero-video-section { position: relative; width: 100%; height: 85vh; min-height: 600px; overflow: hidden; } .hero-video-container { position: relative; width: 100%; height: 100%; } .hero-video { width: 100%; height: 100%; object-fit: cover; } .hero-video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(26, 18, 16, 0.3), rgba(26, 18, 16, 0.7)); display: flex; align-items: center; justify-content: center; } .hero-video-content { text-align: center; z-index: 10; opacity: 0; animation: fadeInUp 0.8s ease-out 0.3s forwards; } .hero-headline { font-size: 56px; font-weight: 700; line-height: 1.1; margin-bottom: 24px; letter-spacing: -0.03em; text-shadow: 0 4px 16px rgba(0, 0, 0, 0.8); } .hero-headline .gradient-text { background: linear-gradient(90deg, #ffffff, #a0a0a0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-description { color: var(--text-primary); font-size: 18px; line-height: 1.6; margin-bottom: 32px; max-width: 640px; margin-left: auto; margin-right: auto; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8); } .hero-cta { background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--glass-border); color: var(--text-primary); padding: 16px 32px; border-radius: var(--radius-md); font-size: 16px; font-weight: 600; cursor: pointer; transition: var(--transition-smooth); text-decoration: none; display: inline-block; } .hero-cta:hover { background: var(--glass-hover); border-color: rgba(255, 220, 180, 0.18); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); } /* ========== SECTION TITLE ========== */ .section-title { font-size: 40px; font-weight: 700; text-align: center; margin-bottom: var(--spacing-lg); letter-spacing: -0.02em; opacity: 0; } .section-title.visible { animation: fadeInUp 0.6s ease-out forwards; } /* ========== USE CASES SECTION ========== */ .use-cases { padding: var(--spacing-xl) 0; } .use-cases-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: var(--spacing-lg); } .use-case-card { background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 32px; transition: var(--transition-smooth); opacity: 0; } .use-case-card.visible { animation: fadeInUp 0.6s ease-out forwards; } .use-case-card:hover { background: var(--glass-hover); border-color: rgba(255, 220, 180, 0.18); transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); } .use-case-icon { font-size: 32px; margin-bottom: 16px; display: block; } .use-case-title { font-size: 20px; font-weight: 600; margin-bottom: 12px; color: var(--text-primary); } .use-case-description { color: var(--text-secondary); font-size: 14px; line-height: 1.6; } /* ========== PARTNERS SECTION ========== */ .partners { padding: 0; margin-top: 10px; /* Pushed down 30px more */ margin-bottom: 20px; /* Space before Community Creations */ /* Was reading as a heavy grey band — make it super subtle/transparent */ background: linear-gradient( 180deg, rgba(255, 255, 255, 0.004) 0%, rgba(255, 255, 255, 0.008) 50%, rgba(255, 255, 255, 0.004) 100% ); overflow: hidden; } .partners .section-title { margin-bottom: 35px; /* More space between title and logos */ margin-top: 20px; line-height: 1.3; /* Tighter line height for better 2-line fit */ } /* Mobile: Ensure title fits in 2 lines */ @media (max-width: 768px) { .partners .section-title { font-size: clamp(20px, 5vw, 26px); line-height: 1.25; max-width: 92%; margin-left: auto; margin-right: auto; word-wrap: break-word; hyphens: auto; } .partners .section-title .highlight-word { display: inline-block; white-space: nowrap; } } .partners-container { padding: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } .logos-carousel { position: relative; width: 100vw; /* Full viewport width */ left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; overflow: hidden; padding: 10px 0 0 0; /* Minimal top padding, no bottom padding */ mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); } .logos-track { display: flex; gap: 25px; /* Tighter spacing for larger logos */ width: max-content; animation: scrollLogos 30s linear infinite; will-change: transform; transform: translateZ(0); /* Force GPU acceleration */ backface-visibility: hidden; -webkit-backface-visibility: hidden; } .logo-item { flex-shrink: 0; width: 240px; /* 2x the original (was 120px) */ height: 140px; /* 2x the original (was 70px) */ display: flex; align-items: center; justify-content: center; opacity: 0.6; filter: grayscale(80%); /* Remove transition to prevent animation conflicts */ } .logo-item:hover { opacity: 1; filter: grayscale(0%); } .logo-item img { max-width: 100%; max-height: 100%; object-fit: contain; } @keyframes scrollLogos { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Desktop styles - ensure desktop logos are 2x size */ @media (min-width: 769px) { .logo-item { width: 240px !important; /* 2x the original (was 120px) */ height: 140px !important; /* 2x the original (was 70px) */ } .logos-track { gap: 25px !important; /* Tighter spacing for larger logos */ } .logos-carousel { padding: 10px 0 0 0 !important; /* No bottom padding */ } } /* Mobile styles for logos carousel */ @media (max-width: 768px) { .logo-item { width: 240px !important; /* 2x the size (was 120px) */ height: 140px !important; /* 2x the size (was 70px) */ min-width: 240px !important; } .logo-item img { width: 100% !important; height: 100% !important; object-fit: contain; } .logos-track { gap: 50px !important; /* More spacing between larger logos */ animation: scrollLogos 15s linear infinite !important; /* Smooth continuous scroll */ transform: translateZ(0) !important; /* Force GPU acceleration */ backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; } .logos-carousel { padding: 10px 0 0 0; /* No bottom padding */ overflow: hidden !important; /* Must be hidden for animation to work */ } /* Show mobile break only on mobile */ .mobile-break { display: block; } } @media (min-width: 769px) { .mobile-break { display: none; } } @media (max-width: 480px) { .logo-item { width: 200px !important; /* Slightly smaller on very small phones */ height: 120px !important; min-width: 200px !important; } .logo-item img { width: 100% !important; height: 100% !important; object-fit: contain; } .logos-track { gap: 40px !important; animation: scrollLogos 12s linear infinite !important; /* Smooth continuous scroll */ transform: translateZ(0) !important; /* Force GPU acceleration */ } .logos-carousel { padding: 10px 0 0 0; /* No bottom padding */ } } /* ========== FEATURES SECTION ========== */ .features { padding: var(--spacing-xl) 0; } .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: var(--spacing-lg); } .feature-card { background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 32px; transition: var(--transition-smooth); opacity: 0; } .feature-card.visible { animation: fadeInUp 0.6s ease-out forwards; } .feature-card:hover { background: var(--glass-hover); border-color: rgba(255, 220, 180, 0.18); transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); } .feature-icon { width: 40px; height: 40px; margin-bottom: 16px; opacity: 0.9; } .feature-title { font-size: 18px; font-weight: 600; margin-bottom: 12px; color: var(--text-primary); } .feature-description { color: var(--text-secondary); font-size: 14px; line-height: 1.6; } /* ========== TESTIMONIALS SECTION ========== */ .testimonials { padding: var(--spacing-xl) 0; background: var(--secondary-bg); } .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: var(--spacing-lg); } .testimonial-card { background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 32px; transition: var(--transition-smooth); opacity: 0; display: flex; /* keep text at top and author at bottom */ flex-direction: column; } .testimonial-card.visible { animation: fadeInUp 0.6s ease-out forwards; } .testimonial-card:hover { background: var(--glass-hover); border-color: rgba(255, 220, 180, 0.18); transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); } .testimonial-quote { color: var(--text-secondary); font-size: 15px; line-height: 1.6; margin-bottom: 20px; } .testimonial-author { display: flex; align-items: center; gap: 12px; margin-top: auto; /* push author block to bottom for alignment */ } .testimonial-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--tertiary-bg); border: 1px solid var(--border-color); } .testimonial-info { flex: 1; } .testimonial-name { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; } .testimonial-role-inline { font-weight: 500; color: var(--text-muted); } .testimonial-role { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; } .testimonial-country { display: flex; align-items: center; gap: 6px; } .country-flag { font-size: 16px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--glass-bg); border: 1px solid var(--border-color); overflow: hidden; } .country-name { font-size: 12px; color: var(--text-muted); font-weight: 500; } /* ========== PRICING CTA SECTION ========== */ .pricing-cta { padding: var(--spacing-xl) 0; text-align: center; } .pricing-cta-content { max-width: 700px; margin: 0 auto; opacity: 0; } .pricing-cta-content.visible { animation: fadeInUp 0.6s ease-out forwards; } .pricing-cta-title { font-size: 40px; font-weight: 700; margin-bottom: 20px; letter-spacing: -0.02em; } .pricing-cta-description { color: var(--text-secondary); font-size: 18px; line-height: 1.6; margin-bottom: 32px; } .pricing-cta-button { background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--glass-border); color: var(--text-primary); padding: 16px 40px; border-radius: var(--radius-md); font-size: 16px; font-weight: 600; cursor: pointer; transition: var(--transition-smooth); text-decoration: none; display: inline-block; } .pricing-cta-button:hover { background: var(--glass-hover); border-color: rgba(255, 220, 180, 0.18); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); } /* ========== FOOTER ========== */ .footer { padding: 60px 0 40px; background: var(--secondary-bg); border-top: 1px solid var(--border-subtle); } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; margin-bottom: 40px; /* No opacity:0 - footer must be visible for crawlers/OAuth verification */ } .footer-content.visible { /* Animation optional - footer is visible by default for crawlers */ } .footer-section-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 16px; letter-spacing: 0.05em; text-transform: uppercase; } .footer-links { display: flex; flex-direction: column; gap: 12px; } .footer-link { color: var(--text-muted); text-decoration: none; font-size: 14px; transition: var(--transition-smooth); } .footer-link:hover { color: var(--text-primary); } .footer-bottom { padding-top: 32px; border-top: 1px solid var(--border-subtle); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; } .footer-logo { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; color: var(--text-primary); } .footer-logo img { height: 28px; } .footer-copyright { color: var(--text-muted); font-size: 13px; } /* ========== FOOTER CONTACT & SOCIAL STYLES ========== */ .footer-contact-item { display: flex; align-items: center; gap: 10px; } .footer-contact-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.7; transition: var(--transition-smooth); } .footer-contact-item:hover .footer-contact-icon { opacity: 1; color: var(--accent-primary); } .footer-location { cursor: default; } .footer-location:hover { color: var(--text-muted); } .footer-social-links { display: flex; gap: 12px; flex-wrap: wrap; } .footer-social-link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text-muted); transition: var(--transition-smooth); } .footer-social-link:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 220, 180, 0.18); color: var(--text-primary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .footer-social-link svg { width: 18px; height: 18px; } /* LinkedIn hover */ .footer-social-link[aria-label="LinkedIn"]:hover { background: rgba(10, 102, 194, 0.2); border-color: rgba(10, 102, 194, 0.4); color: #0a66c2; } /* X (Twitter) hover */ .footer-social-link[aria-label="X (Twitter)"]:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3); color: #fff; } /* Instagram hover */ .footer-social-link[aria-label="Instagram"]:hover { background: linear-gradient(135deg, rgba(131, 58, 180, 0.2), rgba(253, 29, 29, 0.2), rgba(252, 176, 69, 0.2)); border-color: rgba(225, 48, 108, 0.4); color: #e1306c; } /* YouTube hover */ .footer-social-link[aria-label="YouTube"]:hover { background: rgba(255, 0, 0, 0.15); border-color: rgba(255, 0, 0, 0.3); color: #ff0000; } /* ========== ANIMATIONS ========== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fade-in { opacity: 0; transition: opacity 0.6s ease-out; } .fade-in.visible { opacity: 1; } /* ========== ANNOUNCEMENT BANNER ========== */ .announcement-banner { background: linear-gradient(135deg, var(--secondary-bg), var(--primary-bg)); border-bottom: 1px solid var(--border-subtle); padding: 16px 0; text-align: center; } .announcement-content { display: flex; align-items: center; justify-content: center; gap: 16px; opacity: 0; animation: fadeInUp 0.8s ease-out forwards; } .announcement-badge { background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--glass-border); padding: 6px 14px; border-radius: var(--radius-md); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-primary); } .announcement-text { color: var(--text-secondary); font-size: 14px; } .announcement-link { color: var(--text-primary); text-decoration: none; font-weight: 600; transition: var(--transition-smooth); border-bottom: 1px solid transparent; } .announcement-link:hover { border-bottom-color: var(--text-primary); } /* ========== CAPABILITIES SHOWCASE ========== */ .capabilities { padding: var(--spacing-xl) 0; background: var(--secondary-bg); } .capabilities-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: var(--spacing-lg); max-width: 1400px; margin-left: auto; margin-right: auto; } .capability-card { background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 32px; transition: var(--transition-smooth); opacity: 0; } .capability-card.visible { animation: fadeInUp 0.6s ease-out forwards; } .capability-card:hover { background: var(--glass-hover); border-color: rgba(255, 220, 180, 0.18); transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); } .capability-icon { font-size: 36px; margin-bottom: 16px; display: block; } .capability-title { font-size: 18px; font-weight: 600; margin-bottom: 12px; color: var(--text-primary); } .capability-description { color: var(--text-secondary); font-size: 14px; line-height: 1.6; margin-bottom: 16px; } .capability-link { color: var(--text-primary); text-decoration: none; font-size: 14px; font-weight: 600; transition: var(--transition-smooth); display: inline-flex; align-items: center; gap: 6px; } .capability-link:hover { opacity: 0.8; } /* ========== INNOVATION SECTION ========== */ .innovation { padding: var(--spacing-xl) 0; } .innovation-content { max-width: 900px; margin: 0 auto var(--spacing-lg); text-align: center; opacity: 0; } .innovation-content.visible { animation: fadeInUp 0.6s ease-out forwards; } .innovation-description { color: var(--text-secondary); font-size: 16px; line-height: 1.6; } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: var(--spacing-lg); } .stat-card { background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 32px 24px; text-align: center; transition: var(--transition-smooth); opacity: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: center; min-height: 160px; } .stat-card.visible { animation: fadeInUp 0.6s ease-out forwards; } .stat-card:hover { background: var(--glass-hover); border-color: rgba(255, 220, 180, 0.18); transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); } .stat-number { font-size: 36px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; display: block; } .stat-label { color: var(--text-secondary); font-size: 14px; font-weight: 500; } .stat-rating { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; flex: 1; max-height: 80px; } .stat-rating-number { font-size: 36px; font-weight: 700; color: var(--text-primary); } .stat-stars-container { position: relative; display: flex; width: 140px; height: 24px; } .stat-stars-bg, .stat-stars-fill { display: flex; gap: 4px; align-items: center; position: absolute; top: 0; left: 0; } .stat-stars-bg .star-icon { color: rgba(212, 165, 116, 0.25); fill: rgba(212, 165, 116, 0.25); } .stat-stars-fill { overflow: hidden; transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1); } .stat-stars-fill .star-icon { color: #dbb48a; fill: #dbb48a; } .star-icon { width: 24px; height: 24px; color: #dbb48a; transition: transform 0.3s ease, filter 0.3s ease; cursor: pointer; transform-origin: center; flex-shrink: 0; } .star-icon.filled { color: #dbb48a; } .star-icon.partial { color: #dbb48a; } /* Apple dock magnifier effect for stars */ .stat-stars-fill .star-icon:hover { transform: scale(1.5); filter: brightness(1.3) drop-shadow(0 0 8px rgba(212, 165, 116, 0.6)); z-index: 10; } /* Magnify adjacent stars on hover (dock effect) */ .stat-stars-fill:hover .star-icon:not(:hover) { transform: scale(1.15); } /* Dimmed stars when hovering on another */ .stat-stars-fill .star-icon { position: relative; } .country-flags-stack { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; flex: 1; max-height: 80px; } .country-flags-row { display: flex; justify-content: center; align-items: center; gap: 0; flex-wrap: nowrap; } .country-flag-circle { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; background: var(--glass-bg); border: 2px solid var(--border-color); transition: all 0.3s ease; margin-left: -8px; position: relative; z-index: 1; opacity: 0.3; overflow: hidden; } .country-flag-circle:first-child { margin-left: 0; } /* Fade from center - 8 flags total, center is 4-5 (Singapore & Spain) */ .country-flag-circle:nth-child(4), .country-flag-circle:nth-child(5) { opacity: 1; } .country-flag-circle:nth-child(3), .country-flag-circle:nth-child(6) { opacity: 0.75; } .country-flag-circle:nth-child(2), .country-flag-circle:nth-child(7) { opacity: 0.5; } .country-flag-circle:nth-child(1), .country-flag-circle:nth-child(8) { opacity: 0.3; } .country-flag-circle:hover { transform: scale(1.25); z-index: 10; opacity: 1 !important; border-color: rgba(255, 255, 255, 0.5); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5); } .stat-progress-pill { width: 100%; max-width: 200px; height: 12px; background: rgba(255, 255, 255, 0.1); border-radius: 12px; overflow: hidden; margin: 0 auto; border: none; position: relative; flex: 0 0 auto; display: flex; align-items: center; } .stat-progress-fill { height: 100%; background: linear-gradient(90deg, #d4a574 0%, #dbb48a 100%); border-radius: 12px; transition: width 2s ease-in-out; box-shadow: 0 0 8px rgba(212, 165, 116, 0.4); position: relative; overflow: hidden; width: 0 !important; } .stat-card.visible .stat-progress-fill { width: 85% !important; } .stat-progress-fill::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%); animation: shimmer 2s infinite; } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .stat-models-pills { display: flex; justify-content: center; align-items: center; gap: 0; flex: 1; max-height: 80px; } .model-pill { width: 40px; height: 40px; border-radius: 50%; background: var(--glass-bg); border: 2px solid var(--border-color); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-left: -8px; transition: var(--transition-smooth); position: relative; z-index: 1; opacity: 0.3; } .model-pill:first-child { margin-left: 0; } /* Fade from center - 6 model pills total, center is 3-4 */ .model-pill:nth-child(3), .model-pill:nth-child(4) { opacity: 1; } .model-pill:nth-child(2), .model-pill:nth-child(5) { opacity: 0.65; } .model-pill:nth-child(1), .model-pill:nth-child(6) { opacity: 0.3; } .model-pill:hover { transform: translateY(-4px) scale(1.1); z-index: 10; border-color: rgba(255, 255, 255, 0.4); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); opacity: 1 !important; } .model-pill-img { width: 28px; height: 28px; object-fit: contain; } .design-examples-stack, .designer-avatars-stack { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; flex: 1; max-height: 80px; } .design-examples-row, .designer-avatars-row { display: flex; justify-content: center; align-items: center; gap: 0; flex-wrap: wrap; } .design-example-circle { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; border: 2px solid var(--border-color); transition: var(--transition-smooth); margin-left: -8px; position: relative; z-index: 1; background: var(--glass-bg); opacity: 0.3; } .design-example-circle:first-child { margin-left: 0; } /* Fade from center - 10 designs total, center is 5-6 */ .design-example-circle:nth-child(5), .design-example-circle:nth-child(6) { opacity: 1; } .design-example-circle:nth-child(4), .design-example-circle:nth-child(7) { opacity: 0.8; } .design-example-circle:nth-child(3), .design-example-circle:nth-child(8) { opacity: 0.6; } .design-example-circle:nth-child(2), .design-example-circle:nth-child(9) { opacity: 0.45; } .design-example-circle:nth-child(1), .design-example-circle:nth-child(10) { opacity: 0.3; } .design-example-circle:hover { transform: scale(1.25); z-index: 10; border-color: rgba(255, 255, 255, 0.5); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5); opacity: 1 !important; } .design-example-img { width: 100%; height: 100%; object-fit: cover; } /* Designer Avatars - Same style as designs */ .designer-avatar-circle { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; border: 2px solid var(--border-color); transition: var(--transition-smooth); margin-left: -8px; position: relative; z-index: 1; background: var(--glass-bg); opacity: 0.3; } .designer-avatar-circle:first-child { margin-left: 0; } /* Fade from center - 6 avatars total, center is 3-4 */ .designer-avatar-circle:nth-child(3), .designer-avatar-circle:nth-child(4) { opacity: 1; } .designer-avatar-circle:nth-child(2), .designer-avatar-circle:nth-child(5) { opacity: 0.65; } .designer-avatar-circle:nth-child(1), .designer-avatar-circle:nth-child(6) { opacity: 0.3; } .designer-avatar-circle:hover { transform: scale(1.25); z-index: 10; border-color: rgba(255, 255, 255, 0.5); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5); opacity: 1 !important; } .designer-avatar-img { width: 100%; height: 100%; object-fit: cover; } /* ========== WHAT'S POSSIBLE CTA ========== */ .whats-possible-cta { padding: 60px 0; background: var(--primary-bg); text-align: center; } .whats-possible-link { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; padding: 20px 40px; border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(245, 166, 35, 0.1), rgba(245, 166, 35, 0.05)); border: 1px solid rgba(245, 166, 35, 0.3); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; overflow: hidden; } .whats-possible-link::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--accent-subtle), rgba(6, 182, 212, 0.05)); opacity: 0; transition: opacity 0.4s ease; } .whats-possible-link:hover { transform: translateY(-4px); border-color: rgba(6, 182, 212, 0.5); box-shadow: 0 20px 40px var(--accent-subtle); } .whats-possible-link:hover::before { opacity: 1; } .whats-possible-text { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; background: linear-gradient(135deg, var(--accent-bright), var(--accent-primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position: relative; z-index: 1; } .whats-possible-arrow { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--accent-subtle); transition: all 0.4s ease; position: relative; z-index: 1; } .whats-possible-arrow svg { width: 24px; height: 24px; stroke: var(--accent-bright); transition: transform 0.3s ease; } .whats-possible-link:hover .whats-possible-arrow { background: rgba(6, 182, 212, 0.3); transform: translateX(4px); } .whats-possible-link:hover .whats-possible-arrow svg { transform: translateX(2px); } @media (max-width: 768px) { .whats-possible-cta { padding: 40px 0; } .whats-possible-link { padding: 16px 28px; gap: 12px; } .whats-possible-text { font-size: 22px; } .whats-possible-arrow { width: 40px; height: 40px; } .whats-possible-arrow svg { width: 20px; height: 20px; } } /* ========== WORKFLOW INTEGRATION ========== */ .workflow { padding: var(--spacing-xl) 0; background: var(--secondary-bg); } .workflow-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; margin-top: var(--spacing-lg); } .workflow-step { position: relative; opacity: 0; } .workflow-step.visible { animation: fadeInUp 0.6s ease-out forwards; } .workflow-step-number { width: 48px; height: 48px; background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--glass-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: var(--text-primary); margin-bottom: 16px; } .workflow-step-title { font-size: 18px; font-weight: 600; margin-bottom: 8px; color: var(--text-primary); } .workflow-step-description { color: var(--text-secondary); font-size: 14px; line-height: 1.6; } /* ========== ENTERPRISE SECTION ========== */ .enterprise { padding: var(--spacing-xl) 0; background: var(--primary-bg); } .enterprise-header { text-align: center; max-width: 800px; margin: 0 auto var(--spacing-lg); } .enterprise-intro { color: var(--text-secondary); font-size: 18px; line-height: 1.6; margin-top: 20px; } .enterprise-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-bottom: 60px; } .enterprise-feature-card { background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 40px 32px; transition: var(--transition-smooth); text-align: center; opacity: 0; } .enterprise-feature-title-row { display: inline-flex; align-items: center; gap: 10px; } .enterprise-feature-title-row .coming-soon-badge { margin-top: 0; } .enterprise-feature-card.visible { animation: fadeInUp 0.6s ease-out forwards; } .enterprise-feature-card:hover { background: var(--glass-hover); border-color: rgba(255, 220, 180, 0.18); transform: translateY(-6px); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4); } .enterprise-icon { font-size: 48px; margin-bottom: 24px; display: block; } .enterprise-feature-title { font-size: 20px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; } .enterprise-feature-description { color: var(--text-secondary); font-size: 15px; line-height: 1.6; } .enterprise-cta-container { text-align: center; padding-top: 40px; border-top: 1px solid var(--border-subtle); } .enterprise-cta-button { background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--glass-border); color: var(--text-primary); padding: 18px 48px; border-radius: var(--radius-md); font-size: 16px; font-weight: 600; cursor: pointer; transition: var(--transition-smooth); text-decoration: none; display: inline-block; } .enterprise-cta-button:hover { background: var(--glass-hover); border-color: rgba(255, 220, 180, 0.18); transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4); } .enterprise-cta-subtitle { color: var(--text-muted); font-size: 14px; margin-top: 16px; } /* ========== CAMPUS SECTION ========== */ .campus { padding: var(--spacing-xl) 0; background: var(--secondary-bg); } .campus-header { text-align: center; max-width: 800px; margin: 0 auto var(--spacing-lg); } .campus-intro { color: var(--text-secondary); font-size: 18px; line-height: 1.6; margin-top: 20px; } .campus-showcase { margin: 0 auto var(--spacing-lg); max-width: 900px; } .campus-showcase-image { width: 100%; height: auto; display: block; object-fit: cover; border-radius: var(--radius-lg); } .campus-showcase-caption { text-align: center; color: var(--text-muted); font-size: 13px; padding: 10px 16px; } .campus-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-bottom: 60px; } .campus-feature-card { background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 40px 32px; transition: var(--transition-smooth); text-align: center; opacity: 0; } .campus-feature-card.visible { animation: fadeInUp 0.6s ease-out forwards; } .campus-feature-card:hover { background: var(--glass-hover); border-color: rgba(255, 220, 180, 0.18); transform: translateY(-6px); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4); } .campus-feature-title { font-size: 20px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; } .campus-feature-description { color: var(--text-secondary); font-size: 15px; line-height: 1.6; } .campus-cta-container { text-align: center; padding-top: 40px; border-top: 1px solid var(--border-subtle); } .campus-cta-button { background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--glass-border); color: var(--text-primary); padding: 18px 48px; border-radius: var(--radius-md); font-size: 16px; font-weight: 600; cursor: pointer; transition: var(--transition-smooth); text-decoration: none; display: inline-block; } .campus-cta-button:hover { background: var(--glass-hover); border-color: rgba(255, 220, 180, 0.18); transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4); } .campus-cta-subtitle { color: var(--text-muted); font-size: 14px; margin-top: 16px; } @media (max-width: 768px) { .campus-features-grid { grid-template-columns: 1fr; gap: 20px; } } /* ========== COMMUNITY SECTION ========== */ .community { padding: var(--spacing-xl) 0; background: var(--primary-bg); } .community-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; margin-top: var(--spacing-md); margin-bottom: var(--spacing-lg); } .community-stat { text-align: center; opacity: 0; } .community-stat.visible { animation: fadeInUp 0.6s ease-out forwards; } .community-stat-number { font-size: 42px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; display: block; } .community-stat-label { color: var(--text-secondary); font-size: 14px; font-weight: 500; } .community-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .community-link-card { background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 24px; text-decoration: none; transition: var(--transition-smooth); opacity: 0; } .community-link-card.visible { animation: fadeInUp 0.6s ease-out forwards; } .community-link-card:hover { background: var(--glass-hover); border-color: rgba(255, 220, 180, 0.18); transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); } .community-link-icon { width: 48px; height: 48px; margin-bottom: 16px; display: block; color: white; stroke: white; transition: var(--transition-smooth); } .community-link-card:hover .community-link-icon { transform: scale(1.1); filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5)); } .community-link-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; } .community-link-description { color: var(--text-secondary); font-size: 13px; line-height: 1.5; } /* ========== FAQ SECTION ========== */ .faq { padding: var(--spacing-xl) 0; background: var(--secondary-bg); } .faq-list { max-width: 800px; margin: var(--spacing-lg) auto 0; } .faq-item { background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--glass-border); border-radius: var(--radius-md); margin-bottom: 16px; overflow: hidden; transition: var(--transition-smooth); opacity: 0; } .faq-item.visible { animation: fadeInUp 0.6s ease-out forwards; } .faq-question { width: 100%; background: none; border: none; padding: 24px; text-align: left; font-size: 16px; font-weight: 600; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: var(--transition-smooth); } .faq-question:hover { color: var(--text-primary); opacity: 0.8; } .faq-icon { font-size: 20px; transition: transform 0.3s ease; color: var(--text-secondary); } .faq-item.active .faq-icon { transform: rotate(180deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; padding: 0 24px; } .faq-item.active .faq-answer { max-height: 500px; padding: 0 24px 24px; } .faq-answer p { color: var(--text-secondary); font-size: 14px; line-height: 1.6; margin: 0; } /* ========== FINAL CTA SECTION ========== */ .final-cta { padding: var(--spacing-xl) 0; background: var(--secondary-bg); text-align: center; } .final-cta-content { max-width: 700px; margin: 0 auto; opacity: 0; } .final-cta-content.visible { animation: fadeInUp 0.6s ease-out forwards; } .final-cta-title { font-size: 44px; font-weight: 700; margin-bottom: 20px; letter-spacing: -0.02em; } .final-cta-description { color: var(--text-secondary); font-size: 18px; line-height: 1.6; margin-bottom: 40px; } .final-cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 60px; } .final-cta-primary { background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--glass-border); color: var(--text-primary); padding: 16px 40px; border-radius: var(--radius-md); font-size: 16px; font-weight: 600; cursor: pointer; transition: var(--transition-smooth); text-decoration: none; display: inline-block; } .final-cta-primary:hover { background: var(--glass-hover); border-color: rgba(255, 220, 180, 0.18); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); } .final-cta-secondary { background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); padding: 16px 40px; border-radius: var(--radius-md); font-size: 16px; font-weight: 600; cursor: pointer; transition: var(--transition-smooth); text-decoration: none; display: inline-block; } .final-cta-secondary:hover { border-color: var(--glass-border); color: var(--text-primary); transform: translateY(-2px); } .final-stats { display: flex; justify-content: center; gap: 60px; flex-wrap: wrap; padding-top: 40px; border-top: 1px solid var(--border-subtle); } .final-stat { text-align: center; } .final-stat-number { font-size: 32px; font-weight: 700; color: var(--text-primary); display: block; margin-bottom: 6px; } .final-stat-label { color: var(--text-secondary); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; } /* ========== STUDIOS SHOWCASE ========== */ .studios-showcase { width: 100%; background: var(--primary-bg); } /* Increased side padding for studio sections to reduce pixelation */ .studios-showcase .container { padding: 0 120px; /* More breathing room on sides */ max-width: 1600px; } @media (max-width: 1400px) { .studios-showcase .container { padding: 0 80px; } } @media (max-width: 992px) { .studios-showcase .container { padding: 0 48px; } } @media (max-width: 768px) { .studios-showcase .container { padding: 0 24px; } } /* Temporarily hide Art Studio until ready */ #art-studio { display: none !important; } .studio-section { padding: 80px 0; background: var(--primary-bg); position: relative; } .studio-section-alt { background: var(--secondary-bg); } /* Studio Introduction */ .studio-intro { margin-bottom: 40px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; max-width: 1200px; margin: 0 auto 40px auto; } .studio-intro-content { grid-column: 1; } /* Remove Photoshop-style module icons (FF / 3D / IN) */ .studio-module-icon { display: none !important; } /* Adobe Photoshop-style Module Icon */ .studio-module-icon { width: 100px; height: 100px; min-width: 100px; min-height: 100px; border-radius: 22px; border: 4px solid rgba(255, 255, 255, 0.95); display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, rgba(30, 30, 30, 0.95), rgba(15, 15, 15, 0.98)); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.3); position: relative; overflow: hidden; } .studio-module-icon::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 40%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 100%); border-radius: 20px 20px 0 0; pointer-events: none; } .studio-module-icon .icon-text { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 34px; font-weight: 800; color: rgba(255, 255, 255, 0.98); letter-spacing: 0.5px; line-height: 1; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); position: relative; z-index: 1; } /* Freeform Studio Icon - subtle warm tint (border/text remain white) */ .studio-module-icon.icon-freeform { background: linear-gradient(145deg, rgba(35, 22, 12, 0.96), rgba(15, 12, 10, 0.99)); } /* 3D Model Studio Icon - subtle cool tint (border/text remain white) */ .studio-module-icon.icon-3dmodel { background: linear-gradient(145deg, rgba(12, 22, 35, 0.96), rgba(10, 12, 18, 0.99)); } /* Instant Narratives Icon - subtle purple tint (border/text remain white) */ .studio-module-icon.icon-narratives { background: linear-gradient(145deg, rgba(26, 14, 34, 0.96), rgba(12, 10, 18, 0.99)); } /* Per-icon typography tweaks for nicer kerning/fit */ .studio-module-icon.icon-freeform .icon-text { letter-spacing: 1px; /* prevents FF from feeling cramped/overlapping */ } .studio-module-icon.icon-3dmodel .icon-text { font-size: 33px; letter-spacing: 0.25px; } .studio-module-icon.icon-narratives .icon-text { font-size: 33px; letter-spacing: 0.75px; } .studio-intro-content { flex: 1; } .studio-title-row { display: flex; align-items: center; gap: 12px; } .studio-title-row .coming-soon-badge { margin-top: 0; } .studio-title { font-family: 'Georgia', 'Times New Roman', 'Playfair Display', serif; font-size: 38px; font-weight: 400; font-style: italic; margin-bottom: 14px; letter-spacing: -0.01em; color: var(--text-primary); line-height: 1.15; } .studio-description { font-size: 16px; line-height: 1.6; color: var(--text-secondary); max-width: 700px; } .coming-soon-badge { display: inline-block; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); padding: 6px 12px; border-radius: 6px; font-size: 10px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.08em; } /* Studio Content: Canvas Left, Examples Right */ .studio-content { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: stretch; max-width: 1200px; /* Prevent content from stretching too wide - reduces pixelation */ margin: 0 auto; } /* Main Studio Canvas/Preview - 4:6 (2:3) aspect ratio for cinematic feel */ .studio-main { border-radius: 16px; overflow: hidden; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06); position: relative; width: 100%; aspect-ratio: 4 / 6; border: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient(145deg, var(--secondary-bg), var(--primary-bg)); } .studio-canvas { width: 100%; height: 100%; object-fit: cover; display: block; } /* Example Cards - match the height of the 4:6 video */ .studio-examples { display: flex; flex-direction: column; gap: 16px; height: 100%; justify-content: stretch; } .example-card { background: rgba(255, 255, 255, 0.02); overflow: hidden; position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; border-radius: 16px; padding: 12px; border: 1px solid rgba(255, 255, 255, 0.04); transition: all 0.3s ease; } .example-card:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); } /* Example Visuals: Before/After with Reveal Effect */ .example-visuals { position: relative; width: 100%; margin-bottom: 10px; border-radius: 12px; overflow: hidden; flex: 1; min-height: 100px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05); border: none; } .example-card:hover .example-visuals { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1); } .example-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .example-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.5s ease; } /* Fade effect when changing use cases */ .example-image img.fading { opacity: 0; } /* Before image is on the bottom */ .example-image:first-child { z-index: 1; } /* After image is on top with clip-path reveal */ .example-image:last-child { z-index: 2; clip-path: inset(0 100% 0 0); transition: clip-path 2s cubic-bezier(0.4, 0, 0.2, 1); } /* Animated state */ .example-visuals.revealing .example-image:last-child { clip-path: inset(0 0% 0 0); } /* Elegant vertical reveal line */ .example-visuals::after { content: ''; position: absolute; top: 0; left: 0%; width: 3px; height: 100%; background: linear-gradient( to bottom, transparent, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.9) 80%, transparent ); box-shadow: 0 0 20px rgba(255, 255, 255, 0.6), 0 0 40px rgba(255, 255, 255, 0.3); z-index: 3; opacity: 0; transition: all 2s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } .example-visuals.revealing::after { opacity: 1; left: 100%; } .example-badge { position: absolute; top: 10px; z-index: 4; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 4px 10px; border-radius: 4px; font-size: 9px; font-weight: 600; color: rgba(255, 255, 255, 0.8); text-transform: uppercase; letter-spacing: 0.08em; } /* Position badges */ .example-image:first-child .example-badge { left: 10px; } .example-image:last-child .example-badge { right: 10px; } /* Fade badges during reveal */ .example-visuals.revealing .example-image:first-child .example-badge { opacity: 0.4; } .example-visuals.revealing .example-image:last-child .example-badge { opacity: 1; } /* Example Info */ .example-info { padding: 4px 4px 0 4px; flex-shrink: 0; } .example-info h3 { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; letter-spacing: -0.01em; line-height: 1.3; } .example-info p { font-size: 12px; line-height: 1.5; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ========== CHAT DEMO SECTION ========== */ .chat-demo-section { padding: var(--spacing-xl) 0; background: var(--secondary-bg); } .chat-subtitle { text-align: center; color: var(--text-secondary); font-size: 16px; margin-bottom: 20px; /* tightened spacing under subtitle */ max-width: 640px; margin-left: auto; margin-right: auto; } .chat-demo-container { max-width: 900px; margin: 0 auto; background: transparent; /* container not visible */ backdrop-filter: none; -webkit-backdrop-filter: none; border: none; border-radius: 0; padding: 0; /* zero padding to maximize size */ min-height: 600px; display: flex; flex-direction: column; gap: 20px; /* tighter internal gap */ } .chat-demo-prompt { background: var(--tertiary-bg); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 24px; font-family: 'Monaco', 'Menlo', monospace; font-size: 16px; color: var(--text-primary); min-height: 80px; display: flex; align-items: center; } .typing-text { flex: 1; line-height: 1.5; } .typing-cursor { display: inline-block; margin-left: 2px; animation: blink 1s step-end infinite; color: var(--text-primary); } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .chat-demo-result { display: flex; gap: 20px; visibility: hidden; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .chat-demo-result.is-visible { visibility: visible; opacity: 1; pointer-events: auto; } .result-before, .result-after { flex: 1; position: relative; opacity: 0; transition: opacity 0.6s ease; aspect-ratio: 1 / 1; /* always square */ min-height: 0; /* let aspect-ratio control height */ } .result-image-before, .result-image-after { position: absolute; inset: 0; /* fill container */ width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius-md); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); border: 1px solid var(--glass-border); } .result-image-after { opacity: 0; transition: opacity 0.4s ease; } .result-image-after.is-visible { opacity: 1; } .result-label { position: absolute; top: 12px; left: 12px; background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); padding: 6px 16px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.05em; z-index: 10; } /* Loading State */ .result-loading { display: none; position: absolute; /* overlay over image */ inset: 0; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: var(--radius-md); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; box-shadow: none; transition: opacity 0.3s ease; } /* Progress Bar Pill */ .loading-pill { position: relative; width: 200px; height: 48px; border-radius: 24px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(100, 200, 255, 0.3); overflow: hidden; box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 20px rgba(100, 200, 255, 0.1); } .loading-pill-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: linear-gradient(90deg, rgba(100, 200, 255, 0.6), rgba(150, 220, 255, 0.8), rgba(100, 200, 255, 0.6) ); border-radius: 24px; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 0 20px rgba(100, 200, 255, 0.6), 0 0 40px rgba(100, 200, 255, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.3); animation: glow 1.5s ease-in-out infinite; } @keyframes glow { 0%, 100% { box-shadow: 0 0 20px rgba(100, 200, 255, 0.6), 0 0 40px rgba(100, 200, 255, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.3); } 50% { box-shadow: 0 0 30px rgba(100, 200, 255, 0.8), 0 0 60px rgba(100, 200, 255, 0.6), inset 0 0 30px rgba(255, 255, 255, 0.4); } } .loading-pill-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--text-primary); font-size: 14px; font-weight: 600; letter-spacing: 0.05em; z-index: 1; text-shadow: 0 0 10px rgba(100, 200, 255, 0.5); animation: textPulse 1.5s ease-in-out infinite; } @keyframes textPulse { 0%, 100% { opacity: 0.8; text-shadow: 0 0 10px rgba(100, 200, 255, 0.5); } 50% { opacity: 1; text-shadow: 0 0 20px rgba(100, 200, 255, 0.8); } } /* AI Models Logos Section */ .ai-models-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 40px; margin-top: 8px; /* closer to subtitle */ margin-bottom: 32px; /* slightly tighter below */ padding: 0 20px; opacity: 0.9; } .ai-model-logo { display: flex; align-items: center; justify-content: center; transition: var(--transition-smooth); } .model-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; /* bring label closer to icon */ } .ai-model-logo:hover { opacity: 1; transform: translateY(-4px); } .model-logo-img { height: 48px; /* +20% size */ width: auto; object-fit: contain; filter: none; opacity: 1; transition: var(--transition-smooth); } .ai-model-logo:hover .model-logo-img { opacity: 1; } .model-name { font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 11px; /* +10% size */ font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-secondary); opacity: 0.7; transition: var(--transition-smooth); white-space: nowrap; } .ai-model-logo:hover .model-name { opacity: 1; color: var(--text-primary); } /* ========== RESPONSIVE ========== */ @media (max-width: 992px) { .hero-video-section { height: 70vh; min-height: 500px; } .hero-headline { font-size: 44px; } .container { padding: 0 40px; } .studio-content { grid-template-columns: 1fr; gap: 48px; } .studio-main { position: relative; top: 0; height: auto; aspect-ratio: 16 / 9; max-width: 800px; margin: 0 auto; } .studio-examples { gap: 28px; } .container-wide { padding: 0 40px; } .features-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } .capabilities-grid { grid-template-columns: 1fr; } .enterprise-features-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } .enterprise-feature-card { padding: 32px 24px; } .workflow-steps { grid-template-columns: 1fr; } } /* ========== MOBILE SLIDE-IN DRAWER ========== */ .mobile-nav-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 1090; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .mobile-nav-drawer { position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: min(360px, 86vw); z-index: 1100; transform: translateX(110%); transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.2, 1); background: rgba(10, 10, 10, 0.92); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-left: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; padding: 18px 16px; } .mobile-nav-drawer-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 4px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 12px; } .mobile-nav-drawer-title { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.85); } .mobile-nav-close { background: rgba(0, 0, 0, 0.7); border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-radius: 24px; color: rgba(255, 255, 255, 0.9); width: 40px; height: 40px; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; } .mobile-nav-close:hover { background: rgba(0, 0, 0, 0.8); border-color: rgba(255, 255, 255, 0.4); } .mobile-nav-items { display: flex; flex-direction: column; gap: 10px; padding: 16px 4px 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; } /* Mobile nav items - SUPER CONSISTENT STYLING */ .mobile-nav-item, .mobile-nav-item:visited { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; border-radius: 14px; text-decoration: none; color: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); font-size: 17px; font-weight: 500; min-height: 60px; transition: all 0.2s ease; } .mobile-nav-item:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.15); transform: scale(1.01); } .mobile-nav-item:active { transform: scale(0.99); } /* Primary CTA - SAME HEIGHT, premium styling - Cyber Cyan */ .mobile-nav-item-primary { background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-bright) 100%); border: none; color: #0a0a0a !important; font-weight: 700; box-shadow: 0 4px 20px var(--accent-glow); } .mobile-nav-item-primary:hover { background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent-bright) 100%); transform: scale(1.02); box-shadow: 0 6px 28px var(--accent-glow); } .mobile-nav-item-icon { opacity: 0.6; flex-shrink: 0; font-size: 18px; } /* User section in mobile drawer */ .mobile-nav-divider { height: 1px; background: rgba(255, 255, 255, 0.08); margin: 8px 0; } .mobile-nav-user-info { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; /* Allow flex shrinking */ overflow: hidden; } .mobile-nav-avatar { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); flex-shrink: 0; background-size: cover; background-position: center; } .mobile-nav-username { font-size: 17px; font-weight: 600; color: rgba(255, 255, 255, 0.95); /* Cap username length so arrow always fits */ max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } body.nav-drawer-open { overflow: hidden; touch-action: none; } body.nav-drawer-open .mobile-nav-overlay { opacity: 1; pointer-events: auto; } body.nav-drawer-open .mobile-nav-drawer { transform: translateX(0); } @media (max-width: 768px) { .navbar { padding: 16px 24px; } /* Hide nav-links on mobile - use drawer instead */ .nav-links { display: none !important; } /* Go to Studio / CTA buttons - SAME HEIGHT as nav items */ .nav-links .nav-btn { margin-top: 12px; padding: 18px 22px; min-height: 60px; font-size: 17px; font-weight: 600; height: auto; justify-content: center; border-radius: 14px; width: 100%; display: flex; align-items: center; } .nav-links .nav-btn.get-started-btn { padding: 18px 22px; min-height: 60px; height: auto; background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-bright) 100%); border: none; color: #0a0a0a; font-weight: 700; box-shadow: 0 4px 20px var(--accent-glow); } .nav-links .nav-btn.get-started-btn:hover, .nav-links .nav-btn.get-started-btn:active { background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent-bright) 100%); transform: scale(1.02); box-shadow: 0 6px 28px var(--accent-glow); } .nav-links .dropdown { width: 100%; } /* User Account Pill - SAME HEIGHT as all other items */ .nav-links .user-pill { width: 100% !important; max-width: none !important; justify-content: flex-start !important; padding: 18px 22px !important; min-height: 60px !important; height: auto !important; border-radius: 14px !important; background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; font-size: 17px !important; font-weight: 500 !important; display: flex !important; align-items: center !important; gap: 14px !important; transition: all 0.2s ease !important; overflow: visible !important; text-overflow: unset !important; } .nav-links .user-pill:hover, .nav-links .user-pill:active { background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.18) !important; transform: scale(1.01); } .nav-links .user-pill .user-avatar, .nav-links .user-pill .user-avatar-header { width: 40px !important; height: 40px !important; min-width: 40px !important; border-radius: 50% !important; flex-shrink: 0 !important; } /* User name - FULL WIDTH, no truncation on mobile menu */ .nav-links .user-pill .user-name { font-size: 17px !important; font-weight: 600 !important; max-width: none !important; overflow: visible !important; text-overflow: unset !important; white-space: normal !important; flex: 1 !important; } /* User info container - full width */ .nav-links .user-pill .user-info { max-width: none !important; flex: 1 !important; overflow: visible !important; } /* Hide credits in mobile menu for cleaner look */ .nav-links .user-pill .credits-display, .nav-links .user-pill .user-pill-divider { display: none !important; } /* Plan badge - visible and styled */ .nav-links .user-pill .plan-badge-pill { flex-shrink: 0 !important; margin-left: auto !important; } .menu-toggle { display: flex; align-items: center; justify-content: center; z-index: 1001; width: 40px; height: 40px; padding: 0; font-size: 22px; } .hero-video-section { height: 60vh; min-height: 400px; } .hero-headline { font-size: 36px; } .hero-description { font-size: 16px; } .section-title { font-size: 32px; } .studio-title { font-size: 32px; } .studio-description { font-size: 16px; } .chat-demo-container { padding: 0; /* keep zero on tablets */ min-height: 500px; } .chat-demo-prompt { font-size: 14px; padding: 20px; } .chat-demo-result { flex-direction: column; gap: 16px; } .result-before, .result-after { aspect-ratio: 1 / 1; min-height: 0; } .result-loading { height: 100%; } .loading-pill { width: 180px; height: 44px; } .pricing-cta-title, .final-cta-title { font-size: 32px; } .container { padding: 0 24px; } .container-wide { padding: 0 24px; } .features-grid { grid-template-columns: repeat(2, 1fr); /* 2x3 layout on phones */ gap: 16px; } .stats-grid { grid-template-columns: 1fr; gap: 20px; } .enterprise-features-grid { grid-template-columns: 1fr; gap: 20px; } .enterprise-feature-card { padding: 28px 20px; } .enterprise-icon { font-size: 40px; margin-bottom: 16px; } .enterprise-intro { font-size: 16px; } :root { --spacing-xl: 60px; } .testimonials-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; text-align: center; } .footer-content { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; } .footer-social-links { gap: 10px; } .footer-social-link { width: 44px; height: 44px; } .announcement-content { flex-direction: column; gap: 8px; } .final-stats { gap: 32px; } .final-cta-buttons { flex-direction: column; align-items: center; } .final-cta-primary, .final-cta-secondary { width: 100%; max-width: 300px; } /* ========== TABLET REVEAL EFFECT OPTIMIZATION ========== */ .studio-intro { margin-bottom: 32px; /* Reduce from 48px */ gap: 24px; grid-template-columns: 1fr; } .studio-module-icon { width: 80px; height: 80px; min-width: 80px; min-height: 80px; border-radius: 18px; border-width: 3px; } .studio-module-icon .icon-text { font-size: 30px; } .studio-section { padding: 50px 0; /* Slightly reduce section padding */ } .studio-content { grid-template-columns: 1fr; /* Stack on tablets */ gap: 32px; } .studio-main { position: static; /* Remove sticky on tablet */ } .studio-examples { gap: 28px; } .example-visuals { margin-bottom: 16px; } .example-info h3 { font-size: 18px; } .example-info p { font-size: 14px; } } @media (max-width: 480px) { .hero-video-section { height: 50vh; min-height: 350px; } .hero-headline { font-size: 28px; } .section-title { font-size: 28px; line-height: 1.2; /* Tighter line height for 2-line fit */ } /* Make "Users from Leading Institutions Worldwide" fit in 2 lines */ .partners .section-title { font-size: clamp(22px, 5.5vw, 28px); line-height: 1.3; max-width: 90%; margin-left: auto; margin-right: auto; } .partners .section-title .highlight-word { display: inline-block; } .studio-title { font-size: 28px; } .studio-description { font-size: 15px; } /* Fix studio main videos/images to maintain aspect ratio on mobile */ .studio-main { aspect-ratio: auto !important; } .studio-canvas { object-fit: contain !important; background: rgba(0, 0, 0, 0.5); } .chat-demo-container { padding: 0; /* keep zero on phones */ min-height: 400px; } .chat-demo-result { position: relative; gap: 0; min-height: 0; } .result-before { opacity: 1; } .result-after { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .result-after .result-label { opacity: 0; transition: opacity 0.3s ease; } .chat-demo-result.after-visible .result-after .result-label { opacity: 1; } .chat-demo-result.after-visible .result-before .result-label { opacity: 0; } .chat-demo-prompt { font-size: 13px; padding: 16px; min-height: 70px; } .result-before, .result-after { aspect-ratio: 1 / 1; min-height: 0; } .result-loading { height: 100%; } .loading-pill { width: 160px; height: 40px; } .loading-pill-text { font-size: 12px; } .ai-models-logos { gap: 24px; margin-top: 40px; padding: 24px 12px; } .model-logo-img { height: 28px; } /* REMOVED OLD CONFLICTING STYLES - Using new reveal effect styles below */ .stats-grid { grid-template-columns: 1fr; /* keep single column to avoid layout jumping */ gap: 16px; } /* Reduce motion-induced layout shifts for stats on small screens */ .stat-card.visible { animation: none; opacity: 1; } .community-stats { grid-template-columns: 1fr; } /* Footer mobile styles */ .footer-content { grid-template-columns: 1fr; gap: 28px; text-align: center; } .footer-section-title { margin-bottom: 12px; } .footer-links { align-items: center; } .footer-contact-item { justify-content: center; } .footer-social-links { justify-content: center; gap: 12px; } .footer-social-link { width: 48px; height: 48px; } .footer-social-link svg { width: 20px; height: 20px; } } /* Very Small Screens */ @media (max-width: 480px) { /* ========== MOBILE REVEAL EFFECT OPTIMIZATION ========== */ /* Tighten spacing and optimize for mobile screens */ .studio-intro { margin-bottom: 24px; /* Reduce from 48px */ flex-direction: column; align-items: flex-start; gap: 20px; } .studio-module-icon { width: 70px; height: 70px; min-width: 70px; min-height: 70px; border-radius: 16px; border-width: 3px; } .studio-module-icon .icon-text { font-size: 26px; } .studio-section { padding: 40px 0; /* Reduce section padding */ } .studio-content { grid-template-columns: 1fr; /* Stack on mobile */ gap: 24px; } .studio-examples { gap: 24px; /* Reduce gap between cards */ } .example-card { margin-bottom: 0; /* Remove any extra margin */ } .example-visuals { aspect-ratio: 16 / 10; /* Slightly taller for better mobile viewing */ margin-bottom: 12px; /* Tight spacing to text below */ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); /* Slightly smaller shadow */ } .example-badge { font-size: 8px; padding: 4px 10px; top: 10px; border-radius: 16px; } .example-image:first-child .example-badge { left: 10px; } .example-image:last-child .example-badge { right: 10px; } .example-info { padding: 0; margin-top: 0; } .example-info h3 { font-size: 16px; margin-bottom: 6px; line-height: 1.3; } .example-info p { font-size: 13px; line-height: 1.4; } /* Ensure reveal line is visible on mobile */ .example-visuals::after { width: 2px; /* Slightly thinner on mobile */ box-shadow: 0 0 15px rgba(255, 255, 255, 0.6), 0 0 30px rgba(255, 255, 255, 0.3); } } /* ========== COOKIE CONSENT BANNER ========== */ .cookie-banner { position: fixed; bottom: -200px; left: 0; right: 0; z-index: 9999; padding: 20px; opacity: 0; transition: bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease; } /* ========== MODAL (Generic) ========== */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; z-index: 9998; } .modal-backdrop.show { opacity: 1; pointer-events: auto; } .modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; z-index: 9999; } .modal.show { opacity: 1; pointer-events: auto; } .modal-dialog { width: 100%; max-width: 720px; background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6); } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--glass-border); } .modal-title { font-size: 20px; font-weight: 700; color: var(--text-primary); margin: 0; } .modal-close { background: transparent; border: none; color: var(--text-primary); font-size: 22px; cursor: pointer; } .modal-body { padding: 20px 24px; color: var(--text-secondary); line-height: 1.7; } .modal-footer { display: flex; gap: 12px; justify-content: flex-end; padding: 16px 24px 24px 24px; } .modal-secondary, .modal-primary { background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-primary); padding: 10px 18px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; cursor: pointer; transition: var(--transition-smooth); } .modal-primary:hover, .modal-secondary:hover { background: var(--glass-hover); transform: translateY(-1px); } .cookie-banner.show { bottom: 28px; /* Above the legal bar which is ~18px tall */ opacity: 1; } .cookie-content { max-width: 1200px; margin: 0 auto; background: var(--glass-bg); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 24px 32px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: space-between; gap: 32px; } .cookie-text { flex: 1; } .cookie-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin: 0 0 8px 0; } .cookie-description { font-size: 14px; line-height: 1.5; color: var(--text-secondary); margin: 0; } .cookie-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } .cookie-accept-btn { background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--glass-border); color: var(--text-primary); padding: 12px 32px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; cursor: pointer; transition: var(--transition-smooth); white-space: nowrap; } .cookie-accept-btn:hover { background: var(--glass-hover); border-color: rgba(255, 255, 255, 0.3); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); } .cookie-learn-more { appearance: none; -webkit-appearance: none; background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--glass-border); color: var(--text-primary); padding: 10px 20px; border-radius: 9999px; /* pill */ font-size: 14px; font-weight: 600; cursor: pointer; transition: var(--transition-smooth); white-space: nowrap; } .cookie-learn-more:hover { background: var(--glass-hover); border-color: rgba(255, 255, 255, 0.3); transform: translateY(-1px); } /* Responsive Cookie Banner */ @media (max-width: 768px) { .cookie-banner { padding: 16px; } .cookie-banner.show { bottom: 16px; } .cookie-content { flex-direction: column; align-items: flex-start; padding: 20px 24px; gap: 20px; } .cookie-actions { width: 100%; flex-direction: column; gap: 12px; } .cookie-accept-btn { width: 100%; text-align: center; } .cookie-learn-more { width: 100%; text-align: center; } } @media (max-width: 480px) { .cookie-banner { padding: 12px; } .cookie-banner.show { bottom: 12px; } .cookie-content { padding: 16px 20px; } .cookie-title { font-size: 15px; } .cookie-description { font-size: 13px; } .cookie-accept-btn { padding: 10px 24px; font-size: 13px; } } /* =============================================== INLINE STYLES EXTRACTED FROM welcome.html =============================================== */ /* ========== EXAMPLE CARDS ========== */ /* Pin info to bottom for selected example cards */ .example-card.example-card-bottom-info { display: flex; flex-direction: column; height: 100%; } .example-card.example-card-bottom-info .example-info { margin-top: auto; } /* Instant Narrative video styling - simplified */ .instant-narrative-video { position: relative !important; display: block !important; aspect-ratio: 16 / 9 !important; width: 100% !important; overflow: hidden !important; background: #000 !important; border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); margin-bottom: 16px; } .instant-narrative-video video { width: 100% !important; height: 100% !important; display: block !important; object-fit: cover !important; border-radius: 12px; } /* ========== COOKIE BANNER LINKS ========== */ /* Cookie banner inline link styling */ .cookie-inline-link { color: rgba(255, 255, 255, 0.8); text-decoration: underline; text-underline-offset: 2px; transition: all 0.2s ease; } .cookie-inline-link:hover { color: #ffffff; text-decoration-color: rgba(255, 255, 255, 0.5); } /* ========== GET STARTED BUTTON ========== */ /* Get Started button icon */ .get-started-btn .btn-icon { flex-shrink: 0; transition: transform 0.3s ease; } .get-started-btn:hover .btn-icon { transform: translateX(3px); } /* Glassy Get Started Button Styling - EXACT MATCH with user-pill */ .get-started-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; /* Space between text and icon */ background: rgba(0, 0, 0, 0.7) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; /* SAME as user-pill */ backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-radius: 24px; /* SAME as user-pill */ height: 38px !important; /* EXACT SAME as user-pill */ min-height: 38px !important; max-height: 38px !important; padding: 0 16px !important; /* SAME horizontal as user-pill right padding */ font-size: 14px !important; /* SAME as user-pill */ font-weight: 500 !important; /* SAME as user-pill */ line-height: 1 !important; /* Prevent line-height inflation */ color: rgba(255, 255, 255, 0.9) !important; /* SAME as user-pill */ cursor: pointer; box-shadow: none !important; /* Clean like user-pill */ text-decoration: none !important; transition: all 0.3s ease !important; /* SAME as user-pill */ position: relative; overflow: hidden; box-sizing: border-box !important; } .get-started-btn:hover { color: #ffffff !important; background: rgba(0, 0, 0, 0.8) !important; /* SAME as user-pill hover */ border-color: rgba(212, 165, 116, 0.5) !important; /* Subtle terracotta border on hover */ } /* Add fluid shimmer effect - Terracotta */ .get-started-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent 0%, rgba(212, 165, 116, 0.35) 50%, transparent 100% ); animation: shimmer 3s ease-in-out infinite; } @keyframes shimmer { 0%, 100% { left: -100%; } 50% { left: 100%; } } /* ========== COMING SOON BADGE ========== */ /* Coming Soon Badge Top Right Positioning */ .coming-soon-top-right { position: absolute; top: 12px; right: 12px; font-size: 10px; padding: 4px 8px; background: rgba(0, 0, 0, 0.8); color: rgba(255, 255, 255, 0.9); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .community-link-card { position: relative; } .enterprise-feature-card { position: relative; } /* ========== FINAL CTA BUTTONS ========== */ /* Fix final CTA buttons vertical alignment */ .final-cta-buttons { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .final-cta-primary, .final-cta-secondary { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 12px 24px; border-radius: 12px; text-decoration: none; font-weight: 500; transition: all 0.2s ease; } .final-cta-secondary { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 255, 255, 0.2); } .final-cta-secondary:hover { background: rgba(255, 255, 255, 0.15); color: #ffffff; } /* ========== HERO DESCRIPTION WIDTHS ========== */ /* Make hero description wider on large screens */ @media (min-width: 1200px) { .hero-description { max-width: 800px; margin: 0 auto; } } @media (min-width: 1400px) { .hero-description { max-width: 900px; } } /* Add spacing between hero description and button */ .hero-description { margin-bottom: 32px; } /* Add spacing and padding to AI models logos */ .ai-models-logos { margin-bottom: 32px; padding: 16px 0; } /* ========== USER PILL & DROPDOWN ========== */ /* User pill styles - matching studio glassy design */ .user-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(0, 0, 0, 0.7) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-radius: 24px; height: 38px !important; /* EXACT SAME as get-started-btn */ min-height: 38px !important; max-height: 38px !important; padding: 0 16px 0 5px !important; /* Vertical centering via height */ font-size: 14px !important; font-weight: 500 !important; line-height: 1 !important; /* Prevent line-height inflation */ color: rgba(255, 255, 255, 0.9) !important; text-decoration: none !important; transition: all 0.3s ease !important; box-sizing: border-box !important; } .user-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; font-weight: 600; border: 1.5px solid rgba(255, 255, 255, 0.35); /* Light grey outline */ box-sizing: border-box; flex-shrink: 0; } .user-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; } .user-pill:hover { background: rgba(0, 0, 0, 0.8) !important; border-color: rgba(255, 255, 255, 0.4) !important; } /* Dropdown container */ .dropdown { position: relative; display: inline-block; } /* Dropdown button (user pill) */ .dropdown .dropbtn { border: none; background: none; cursor: pointer; font-family: inherit; } /* Welcome page dropdown - CLASSY OUTLINE STYLE */ .welcome-dropdown-content { position: absolute; top: calc(100% + 8px) !important; /* 8px spacing below button */ right: 0; margin-top: 0px; min-width: 180px; max-height: 0; overflow: hidden; background: rgba(38, 32, 28, 0.92); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(255, 220, 180, 0.12); border-radius: 14px; z-index: 1000; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, transform 0.2s ease; opacity: 0; transform: translateY(-10px); pointer-events: none; border-color: transparent; } /* Add invisible bridge area between button and dropdown for easier hovering */ .welcome-dropdown-content::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; background: transparent; } /* Hover opens dropdown */ .dropdown:hover .welcome-dropdown-content { transition-delay: 0s, 0s, 0s, 0s; border-color: rgba(255, 255, 255, 0.2); } /* Show dropdown on hover OR when clicked (.show class) */ .dropdown:hover .welcome-dropdown-content, .welcome-dropdown-content:hover, .welcome-dropdown-content.show { max-height: 300px; opacity: 1; transform: translateY(0); pointer-events: auto; transition-delay: 0s, 0s, 0s, 0s; border-color: rgba(255, 255, 255, 0.2); z-index: 1000 !important; } /* Force close when .show is removed AND not hovering - this allows click-to-close */ /* BUT: Add delay to prevent premature closing when moving mouse to dropdown */ .welcome-dropdown-content:not(.show):not(:hover):not(.keep-open) { opacity: 0 !important; pointer-events: none !important; max-height: 0 !important; border-color: transparent !important; } /* When .show class is present, always show (for click control) - takes highest priority */ .welcome-dropdown-content.show { opacity: 1 !important; pointer-events: auto !important; border-color: rgba(255, 255, 255, 0.2) !important; max-height: 300px !important; transform: translateY(0) !important; } /* Keep dropdown open temporarily when moving mouse from button to dropdown */ .welcome-dropdown-content.keep-open { opacity: 1 !important; pointer-events: auto !important; max-height: 300px !important; transform: translateY(0) !important; border-color: rgba(255, 255, 255, 0.2) !important; } /* When .show is removed but hovering, still show (hover takes precedence) */ .dropdown:hover .welcome-dropdown-content:not(.show) { opacity: 1 !important; pointer-events: auto !important; max-height: 300px !important; transform: translateY(0) !important; border-color: rgba(255, 255, 255, 0.2) !important; } /* Dropdown icons */ .dropdown-icon { width: 16px; height: 16px; opacity: 0.6; flex-shrink: 0; } .welcome-dropdown-content a:hover .dropdown-icon { opacity: 0.9; } /* Dropdown menu items - CONSISTENT STYLE */ .welcome-dropdown-content a { color: rgba(255, 255, 255, 0.8); padding: 14px 18px; margin: 0; text-decoration: none; display: flex; align-items: center; justify-content: flex-start; gap: 14px; /* Consistent gap between icon and text */ font-size: 12px; font-weight: 500; letter-spacing: 0.8px; text-transform: uppercase; transition: all 0.2s ease; white-space: nowrap; background: transparent; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0; } .welcome-dropdown-content a:first-child { margin-top: 0; border-radius: 14px 14px 0 0; } .welcome-dropdown-content a:last-child { margin-bottom: 0; border-bottom: none; border-radius: 0 0 14px 14px; } .welcome-dropdown-content a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; } /* Terracotta accent for Log Out */ .welcome-dropdown-content a#logOutBtn { color: rgba(212, 165, 116, 0.9); } .welcome-dropdown-content a#logOutBtn:hover { background: rgba(212, 165, 116, 0.08); color: rgba(232, 168, 120, 1); } .welcome-dropdown-content a#logOutBtn .dropdown-icon { opacity: 0.7; } /* Mobile dropdown styles - match panel design */ @media (max-width: 768px) { .dropdown { width: 100%; } .welcome-dropdown-content { position: static !important; max-height: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto !important; background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; margin-top: 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; } .welcome-dropdown-content::before { display: none; } .welcome-dropdown-content a { padding: 14px 20px !important; margin: 0 !important; font-size: 15px !important; border-radius: 12px !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; justify-content: flex-start !important; color: rgba(255, 255, 255, 0.85) !important; } .welcome-dropdown-content a:hover, .welcome-dropdown-content a:active { background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.15) !important; } /* Terracotta accent for Log Out (Brand theme) */ .welcome-dropdown-content a#logOutBtn { color: rgba(212, 165, 116, 0.9) !important; border-color: rgba(212, 165, 116, 0.2) !important; } .welcome-dropdown-content a#logOutBtn:hover { background: rgba(212, 165, 116, 0.1) !important; border-color: rgba(212, 165, 116, 0.3) !important; } } /* ========== AI MODEL LOGOS ANIMATION ========== */ /* AI Model Icons Animation */ .ai-model-logo { opacity: 0; transform: translateY(30px) scale(0.9); transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .ai-model-logo.animate-in { opacity: 1; transform: translateY(0) scale(1); } /* Staggered animation delays */ .ai-model-logo:nth-child(1) { transition-delay: 0.1s; } .ai-model-logo:nth-child(2) { transition-delay: 0.2s; } .ai-model-logo:nth-child(3) { transition-delay: 0.3s; } .ai-model-logo:nth-child(4) { transition-delay: 0.4s; } .ai-model-logo:nth-child(5) { transition-delay: 0.5s; } .ai-model-logo:nth-child(6) { transition-delay: 0.6s; } /* Subtle hover effect */ .ai-model-logo:hover { transform: translateY(-5px) scale(1.05); transition: all 0.3s ease; } /* ========== APPLE-STYLE ANIMATIONS ========== */ /* ============================================ APPLE-STYLE ANIMATIONS & VISUAL ENHANCEMENTS ============================================ */ /* Reduced Motion Support */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* === 1. HERO SECTION ENHANCEMENTS === */ .hero-headline { opacity: 0; transform: translateY(30px) scale(0.95); animation: heroHeadlineFade 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards; } .hero-description { opacity: 0; transform: translateY(20px); animation: heroDescFade 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards; } .hero-cta { opacity: 0; transform: translateY(20px); animation: heroCTAFade 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s forwards; } @keyframes heroHeadlineFade { to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes heroDescFade { to { opacity: 1; transform: translateY(0); } } @keyframes heroCTAFade { to { opacity: 1; transform: translateY(0); } } /* Pulsing glow on Get Started button */ @keyframes pulseGlow { 0%, 100% { box-shadow: 0 2px 8px rgba(255, 255, 255, 0.2); } 50% { box-shadow: 0 4px 20px rgba(255, 255, 255, 0.4); } } .get-started-btn { animation: pulseGlow 3s ease-in-out infinite !important; } /* Override hero-cta animation for get-started-btn to ensure visibility */ .hero-cta.get-started-btn { animation: heroCTAFade 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s forwards, pulseGlow 3s ease-in-out 1.5s infinite !important; } /* === 2. PARTNER LOGOS - Simple styling, no conflicting animations === */ .logo-item img { width: 100%; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } /* === 3. STUDIO SECTIONS ANIMATIONS === */ /* Each section is completely independent - no parent animations */ /* First section (Freeform) reveals from RIGHT */ .studio-section:nth-of-type(1) .studio-content { opacity: 0; transform: translateX(50px); transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* Second section (3D Model) reveals from LEFT */ .studio-section:nth-of-type(2) .studio-content { opacity: 0; transform: translateX(-50px); transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* Third section (Instant Narratives) reveals from RIGHT */ .studio-section:nth-of-type(3) .studio-content { opacity: 0; transform: translateX(50px); transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* Fourth section (Art Studio) reveals from LEFT */ .studio-section:nth-of-type(4) .studio-content { opacity: 0; transform: translateX(-50px); transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* Animate when visible - applies to content only */ .studio-section.animate-studio .studio-content { opacity: 1; transform: translateX(0); } .example-card { transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .example-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); } /* === 4. STATS ANIMATION === */ .stat-card { opacity: 0; transform: translateY(30px) scale(0.9); transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .stat-card.visible { opacity: 1; transform: translateY(0) scale(1); } .stat-card:hover { transform: translateY(-5px) scale(1.03); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); } /* Staggered delays for stats */ .stat-card:nth-child(1) { transition-delay: 0.1s; } .stat-card:nth-child(2) { transition-delay: 0.2s; } .stat-card:nth-child(3) { transition-delay: 0.3s; } .stat-card:nth-child(4) { transition-delay: 0.4s; } .stat-card:nth-child(5) { transition-delay: 0.5s; } .stat-card:nth-child(6) { transition-delay: 0.6s; } /* Number counting animation */ .stat-number { display: inline-block; } /* === 5. FEATURES GRID ENHANCEMENT === */ .feature-card { opacity: 0; transform: translateY(30px); transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .feature-card.visible { opacity: 1; transform: translateY(0); } .feature-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); } .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); transition: all 0.3s ease; } /* Staggered delays for features */ .feature-card:nth-child(1) { transition-delay: 0.1s; } .feature-card:nth-child(2) { transition-delay: 0.2s; } .feature-card:nth-child(3) { transition-delay: 0.3s; } .feature-card:nth-child(4) { transition-delay: 0.4s; } .feature-card:nth-child(5) { transition-delay: 0.5s; } .feature-card:nth-child(6) { transition-delay: 0.6s; } .feature-icon { transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* === 6. TESTIMONIALS ANIMATIONS === */ .testimonial-card { opacity: 0; transform: translateY(40px); transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .testimonial-card.visible { opacity: 1; transform: translateY(0); } .testimonial-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); } /* Staggered delays */ .testimonial-card:nth-child(1) { transition-delay: 0.1s; } .testimonial-card:nth-child(2) { transition-delay: 0.2s; } .testimonial-card:nth-child(3) { transition-delay: 0.3s; } /* Typewriter effect for testimonial quotes */ .testimonial-quote { overflow: hidden; white-space: normal; display: block; } /* Typing animation disabled for stable layout */ /* === WORKFLOW STEPS ANIMATION === */ .workflow-step { opacity: 0; transform: translateY(30px); transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .workflow-step.visible { opacity: 1; transform: translateY(0); } .workflow-step:nth-child(1) { transition-delay: 0.1s; } .workflow-step:nth-child(2) { transition-delay: 0.2s; } .workflow-step:nth-child(3) { transition-delay: 0.3s; } .workflow-step:nth-child(4) { transition-delay: 0.4s; } /* === ENTERPRISE CARDS === */ .enterprise-feature-card { transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .enterprise-feature-card:hover { transform: translateY(-8px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12); } /* === SECTION TITLES === */ .section-title { opacity: 0; transform: translateY(20px); transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .section-title.visible { opacity: 1; transform: translateY(0); } /* === BETA BADGE === */ /* Consistent with studio topbar.css */ .beta-badge { display: inline-flex; align-items: center; justify-content: center; margin-left: 6px; padding: 2px 8px; font-size: 9px; font-weight: 900; letter-spacing: 0.8px; color: #d4a574 !important; background: #000000 !important; /* BLACK background */ border: 1px solid #d4a574 !important; border-radius: 4px; text-transform: uppercase; vertical-align: middle; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 2px 10px rgba(255, 165, 0, 0.3); } /* Force gold for text nodes inside beta badge */ .beta-badge, .beta-badge * { color: #d4a574 !important; } .beta-badge .beta-version { font-size: 8px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; margin-left: 3px; color: #dbb48a; /* Golden text */ text-shadow: none; opacity: 0.8; } .beta-badge .beta-label { font-size: 8px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: #d4a574; text-shadow: none; } .logo .beta-badge { font-size: 8px; padding: 2px 5px; margin-left: 4px; } .logo .beta-badge .beta-version { font-size: 7px; margin-left: 2px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: #dbb48a; text-shadow: none; } .beta-badge:hover { transform: translateY(-1px) scale(1.05); box-shadow: 0 4px 15px rgba(255, 165, 0, 0.5); filter: brightness(1.1); } /* Mobile beta badge - 15% bigger, hide version number but show BETA label */ @media (max-width: 768px) { .beta-badge { font-size: 9px; padding: 3px 6px; margin-left: 5px; } .logo .beta-badge { font-size: 9px; padding: 3px 6px; } .beta-badge .beta-label { display: inline; font-size: 9px; } .beta-badge .beta-version { display: none; } } /* === 8. FINAL CTA DRAMATIC REVEAL === */ .final-cta-content { opacity: 0; transform: translateY(40px) scale(0.95); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .final-cta-content.visible { opacity: 1; transform: translateY(0) scale(1); } .final-cta-title { opacity: 0; transform: translateY(20px); transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s; } .final-cta-content.visible .final-cta-title { opacity: 1; transform: translateY(0); } .final-stat { opacity: 0; transform: translateY(20px) scale(0.9); transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .final-cta-content.visible .final-stat { opacity: 1; transform: translateY(0) scale(1); } .final-stat:nth-child(1) { transition-delay: 0.4s; } .final-stat:nth-child(2) { transition-delay: 0.5s; } .final-stat:nth-child(3) { transition-delay: 0.6s; } /* ========== HIGHLIGHT WORD ANIMATION ========== */ /* === HIGHLIGHT WORD ANIMATION === */ .highlight-word { position: relative; display: inline-block; font-family: 'Georgia', 'Times New Roman', serif; font-style: italic; } /* Gold gradient overlay that reveals from left to right */ .highlight-word::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: inherit; background: linear-gradient(135deg, #dbb48a 0%, #d4a574 50%, #e8c8a0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; clip-path: inset(-20% 100% -20% 0); transition: clip-path 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* Silver variant for specific highlight words (e.g. "Leading Institutions") - Plain silver text (no gradient overlay "background") */ .highlight-word.highlight-word--silver { color: rgba(232, 220, 208, 0.92); } /* Disable the animated gradient overlay for the silver variant */ .highlight-word.highlight-word--silver::after { content: none; } .highlight-word.highlighted { -webkit-text-fill-color: transparent; color: transparent; transition: color 0.6s ease 0.2s, -webkit-text-fill-color 0.6s ease 0.2s; } .highlight-word.highlight-word--silver.highlighted { -webkit-text-fill-color: initial; color: rgba(232, 220, 208, 0.92); transition: none; } .highlight-word.highlighted::after { clip-path: inset(-20% 0% -20% 0); } /* ========== SOCIAL FEED TESTIMONIALS ========== */ /* === MIXED SOCIAL FEED TESTIMONIALS === */ .testimonials-x { padding: 48px 0; background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--primary-bg) 30%, transparent) 50%, transparent 100%); } /* Community thanks pill - styled like feature buttons */ .community-thanks-pill { display: flex; align-items: center; justify-content: center; width: fit-content; margin: 0 auto 32px auto; padding: 8px 18px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.035); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 24px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; letter-spacing: 0.02em; } .community-thanks-pill strong { color: rgba(255, 255, 255, 1); font-weight: 600; } @media (max-width: 768px) { .community-thanks-pill { display: block; width: auto; max-width: calc(100% - 48px); margin: 0 auto 24px auto; font-size: 13px; padding: 12px 20px; white-space: normal; text-align: center; line-height: 1.6; border-radius: 16px; } } @media (max-width: 480px) { .community-thanks-pill { font-size: 12px; padding: 10px 16px; max-width: calc(100% - 32px); line-height: 1.5; } } .x-feed-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; } .x-feed-column { display: flex; flex-direction: column; gap: 12px; } /* Base social post - frosted glass */ .social-post { background: rgba(50, 40, 34, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(201, 150, 100, 0.1); border-radius: 12px; padding: 14px; transition: all 0.2s ease; } .social-post:hover { border-color: rgba(201, 150, 100, 0.2); transform: translateY(-1px); background: rgba(56, 45, 38, 0.92); } .social-text { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.85); margin: 0; } /* === X/TWITTER STYLE === */ .x-post { background: rgba(50, 40, 34, 0.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* Featured testimonial - Terracotta accent */ .featured-post { background: linear-gradient(135deg, rgba(56, 44, 36, 0.95) 0%, rgba(50, 40, 34, 0.98) 100%); border-color: rgba(212, 165, 116, 0.2); } .featured-post .social-text { font-size: 13px; line-height: 1.6; } .x-post-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; } .x-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .x-user-info { display: flex; flex-direction: column; gap: 1px; } .x-name { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 600; font-size: 13px; color: #fff; } .x-handle { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; color: rgba(255, 255, 255, 0.4); } .x-post-image { margin: 10px 0; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); } .x-post-image img { width: 100%; height: auto; display: block; } .x-engagement { display: flex; gap: 16px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; color: rgba(255, 255, 255, 0.35); margin-top: 8px; } .x-engagement span { display: flex; align-items: center; gap: 4px; } /* Social icons */ .social-icon { width: 14px; height: 14px; opacity: 0.5; filter: brightness(0) invert(0.6); } .social-icon-lg { width: 20px; height: 20px; opacity: 0.7; filter: brightness(0) invert(0.8); cursor: pointer; transition: opacity 0.2s; } .social-icon-lg:hover { opacity: 1; } /* === REDDIT STYLE === */ .reddit-post { background: rgba(50, 40, 34, 0.8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: rgba(201, 150, 100, 0.1); } .reddit-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 11px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } .reddit-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .reddit-user-info { display: flex; flex-direction: column; gap: 2px; } .reddit-username { color: inherit; text-decoration: none; font-weight: 600; font-size: 12px; transition: opacity 0.2s; } .reddit-username:hover { opacity: 0.8; } /* Social links */ .social-link { display: block; transition: opacity 0.2s; } .social-link:hover { opacity: 0.8; } a.ig-user { text-decoration: none; color: #fff; transition: opacity 0.2s; } a.ig-user:hover { opacity: 0.8; } .reddit-sub { color: rgba(255, 255, 255, 0.7); font-weight: 600; } .reddit-meta { color: rgba(255, 255, 255, 0.35); } .reddit-title { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; color: #fff; margin: 0 0 6px 0; } .reddit-engagement { display: flex; gap: 12px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 11px; color: rgba(255, 255, 255, 0.4); margin-top: 10px; } .reddit-votes { color: #ff4500; font-weight: 600; } /* Reddit comment style */ .reddit-comment { background: rgba(50, 40, 34, 0.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-left: 2px solid rgba(201, 150, 100, 0.15); border-radius: 0 8px 8px 0; padding: 10px 12px; } .reddit-comment-header { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; font-size: 11px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } .reddit-comment-user { color: #1d9bf0; } .reddit-comment-points { color: rgba(255, 255, 255, 0.35); } /* === INSTAGRAM STYLE === */ .ig-post { background: linear-gradient(180deg, rgba(50, 40, 34, 0.8) 0%, rgba(42, 34, 28, 0.85) 100%); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); padding: 0; overflow: hidden; } .ig-post-header { display: flex; align-items: center; gap: 10px; padding: 12px; } .ig-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .ig-user-info { display: flex; flex-direction: column; } .ig-user { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; color: #fff; } .ig-location { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 11px; color: rgba(255, 255, 255, 0.5); } .ig-post-image { width: 100%; } .ig-post-image img { width: 100%; display: block; } .ig-actions { display: flex; gap: 14px; padding: 10px 12px; font-size: 18px; } .ig-caption { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; color: rgba(255, 255, 255, 0.85); padding: 0 12px 8px; margin: 0; } .ig-caption strong { color: #fff; } .ig-time { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 10px; color: rgba(255, 255, 255, 0.35); padding: 0 12px 12px; display: block; } .ig-likes-row { display: flex; align-items: center; gap: 6px; padding: 10px 12px 4px; } .ig-likes-text { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; color: #fff; } .ig-liked-by { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; color: rgba(255, 255, 255, 0.6); padding: 4px 12px 12px; display: block; } .ig-liked-by strong { color: #fff; } /* Instagram comment style */ .ig-comment { background: rgba(50, 40, 34, 0.75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(201, 150, 100, 0.08); padding: 10px 12px; border-radius: 8px; } /* === INSTAGRAM DM STYLE === */ .ig-dm { background: rgba(40, 32, 28, 0.95); border: 1px solid rgba(201, 150, 100, 0.12); border-radius: 16px; padding: 0; overflow: hidden; } .ig-dm-header { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: rgba(44, 36, 30, 0.95); border-bottom: 1px solid rgba(201, 150, 100, 0.1); } .ig-dm-back { color: #fff; font-size: 18px; opacity: 0.9; } .ig-dm-avatar-wrap { position: relative; } .ig-dm-avatar-wrap img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid #262626; } .ig-dm-user { display: flex; flex-direction: column; flex: 1; min-width: 0; } .ig-dm-name { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; color: #fff; line-height: 1.3; } .ig-dm-status { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; color: rgba(255, 255, 255, 0.5); line-height: 1.3; } .ig-dm-actions { display: none; } .ig-dm-actions span { cursor: pointer; opacity: 0.8; } .ig-dm-thread { display: flex; flex-direction: column; gap: 6px; padding: 16px 14px; background: rgba(30, 24, 20, 0.95); min-height: 80px; } .ig-dm-date { text-align: center; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 11px; color: rgba(255, 255, 255, 0.4); margin-bottom: 8px; } .ig-dm-bubble { max-width: 85%; padding: 12px 14px; border-radius: 22px; font-size: 14px; line-height: 1.45; } .ig-dm-bubble.received { align-self: flex-start; background: rgba(50, 40, 34, 0.9); color: #fff; border-bottom-left-radius: 6px; } .ig-dm-bubble .social-text { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; color: #fff; margin: 0; } .ig-dm-seen { display: none; } .ig-dm-input { display: none; } .ig-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .ig-comment .ig-avatar { width: 40px; height: 40px; } .ig-comment .ig-user { font-size: 12px; } .ig-comment .social-text { padding-left: 36px; font-size: 12px; } .ig-meta { display: flex; gap: 12px; padding-left: 36px; margin-top: 4px; font-size: 11px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } .ig-likes { color: rgba(255, 255, 255, 0.5); display: flex; align-items: center; gap: 4px; } .ig-meta .ig-time { padding: 0; color: rgba(255, 255, 255, 0.3); } /* === LINKEDIN STYLE === */ .linkedin-post { background: linear-gradient(180deg, rgba(50, 42, 36, 0.8) 0%, rgba(42, 34, 28, 0.85) 100%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-color: rgba(201, 150, 100, 0.1); } .linkedin-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; } .linkedin-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .linkedin-user-info { display: flex; flex-direction: column; gap: 1px; } .linkedin-name { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; color: #fff; } .linkedin-title { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; color: rgba(255, 255, 255, 0.6); } .linkedin-meta { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 11px; color: rgba(255, 255, 255, 0.4); display: flex; align-items: center; gap: 4px; } .linkedin-icon { width: 12px; height: 12px; opacity: 0.5; filter: brightness(0) invert(0.6); } .linkedin-post .social-text { margin-bottom: 12px; line-height: 1.6; } .linkedin-engagement { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; color: rgba(255, 255, 255, 0.5); } .linkedin-reactions { display: flex; align-items: center; gap: 6px; } .linkedin-reaction-icons { font-size: 14px; } .linkedin-comments { color: rgba(255, 255, 255, 0.4); } /* === DISCORD STYLE === */ .discord-post { background: rgba(50, 40, 34, 0.8); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-color: rgba(201, 150, 100, 0.08); } .discord-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; } .discord-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .discord-user-info { display: flex; flex-direction: column; gap: 2px; } .discord-username { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; color: #fff; } .discord-role { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 11px; color: rgba(255, 255, 255, 0.6); font-style: italic; } .discord-location { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 11px; color: rgba(255, 255, 255, 0.5); } .discord-time { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 11px; color: rgba(255, 255, 255, 0.4); } .discord-image-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 10px 0; border-radius: 8px; overflow: hidden; } .discord-image-grid img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .discord-reactions { display: flex; gap: 6px; margin-top: 8px; } .discord-reaction { background: rgba(255, 255, 255, 0.1); border-radius: 4px; padding: 2px 8px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; color: rgba(255, 255, 255, 0.8); } /* === QUICK COMMENT STYLE === */ .quick-comment { display: flex; align-items: flex-start; gap: 10px; background: rgba(50, 40, 34, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(201, 150, 100, 0.06); padding: 10px 12px; } .quick-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .quick-content { flex: 1; } .quick-user { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.6); display: block; margin-bottom: 2px; } .quick-comment .social-text { font-size: 12px; color: rgba(255, 255, 255, 0.7); } /* See original translation button */ .see-original-btn { background: none; border: none; color: rgba(255, 255, 255, 0.5); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 11px; cursor: pointer; padding: 4px 0; transition: color 0.2s; } .see-original-btn:hover { color: rgba(255, 255, 255, 0.8); } .ig-see-original { padding: 4px 12px; display: block; } /* Scroll reveal animations for testimonials */ .social-post { opacity: 0; transform: translateY(30px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .social-post.revealed { opacity: 1; transform: translateY(0); } /* Staggered delays for columns */ .x-feed-column:nth-child(1) .social-post { transition-delay: 0s; } .x-feed-column:nth-child(2) .social-post { transition-delay: 0.1s; } .x-feed-column:nth-child(3) .social-post { transition-delay: 0.2s; } /* Additional stagger within column */ .social-post:nth-child(1) { --reveal-delay: 0s; } .social-post:nth-child(2) { --reveal-delay: 0.15s; } .social-post:nth-child(3) { --reveal-delay: 0.3s; } .social-post:nth-child(4) { --reveal-delay: 0.45s; } .social-post:nth-child(5) { --reveal-delay: 0.6s; } .social-post:nth-child(6) { --reveal-delay: 0.75s; } .social-post:nth-child(7) { --reveal-delay: 0.9s; } .social-post.revealed { transition-delay: calc(var(--reveal-delay, 0s)); } /* Hidden posts */ .social-post.hidden-post { display: none; } .social-post.hidden-post.show-all { display: block; } /* See more button - capsule style */ .see-more-container { display: flex; justify-content: center; margin-top: 48px; } .see-more-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 24px; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(12px); border: 1px solid rgba(255, 180, 80, 0.25); border-radius: 50px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.85); cursor: pointer; transition: all 0.3s ease; } .see-more-btn:hover { background: rgba(255, 165, 0, 0.15); border-color: rgba(255, 180, 80, 0.6); color: #fff; transform: translateY(-2px); } .see-more-btn:focus, .see-more-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 180, 80, 0.5); } .see-more-btn:active { transform: translateY(0) scale(0.98); } .see-more-btn.hidden { display: none; } .see-more-btn svg { width: 16px; height: 16px; opacity: 0.8; } /* Tablet responsive */ @media (max-width: 1024px) { .x-feed-columns { grid-template-columns: repeat(2, 1fr); } .x-feed-column:nth-child(3) { display: none; } } /* Mobile responsive */ @media (max-width: 600px) { .x-feed-columns { display: flex; flex-direction: column; gap: 0; /* Remove gap for smooth reveal animation */ } /* Show all columns on mobile, stacked */ .x-feed-column { display: contents; /* Flatten the column structure */ } /* Reorder posts for mobile - show best ones first */ .x-feed-columns .social-post { order: 10; /* Default order */ margin-bottom: 16px; /* Use margin instead of gap */ } /* Featured posts show first */ .x-feed-columns .featured-post { order: 1; } /* Show first posts initially on mobile */ .x-feed-columns .social-post:nth-child(n+3) { order: 5; } /* Hidden posts on mobile */ .x-feed-columns .hidden-post { display: none; order: 20; } /* When revealed, show hidden posts with animation */ .x-feed-columns .hidden-post.show-all { display: block; overflow: hidden; animation: persianaReveal 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; } .testimonials-x { padding: 40px 0; } /* Smaller padding for mobile posts */ .social-post { padding: 16px; } .social-text { font-size: 14px; } } @keyframes persianaReveal { 0% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; transform: scaleY(0.95) translateY(-20px); } 100% { opacity: 1; max-height: 1000px; padding-top: 16px; padding-bottom: 16px; margin-bottom: 16px; transform: scaleY(1) translateY(0); } } /* ========== COMMUNITY CARDS ========== */ /* === 7. COMMUNITY CARDS BOUNCE EFFECT === */ .community-link-card { opacity: 0; transform: translateY(30px) scale(0.95); transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } .community-link-card.visible { opacity: 1; transform: translateY(0) scale(1); } .community-link-card:hover { transform: translateY(-10px) scale(1.03); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); } /* Staggered delays */ .community-link-card:nth-child(1) { transition-delay: 0.1s; } .community-link-card:nth-child(2) { transition-delay: 0.2s; } .community-link-card:nth-child(3) { transition-delay: 0.3s; } /* Coming Soon pulse animation */ @keyframes badgePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.05); } } .coming-soon-badge { animation: badgePulse 2s ease-in-out infinite; } /* ========== JOBS SECTION ========== */ /* === JOBS SECTION === */ .jobs-section { padding: 80px 0; background: var(--primary-bg); } .jobs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 900px; margin: 0 auto; } .job-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 28px 20px; text-align: center; text-decoration: none; color: inherit; transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); opacity: 0; transform: translateY(24px); } .job-card.visible { opacity: 1; transform: translateY(0); } .job-card:nth-child(1) { transition-delay: 0.05s; } .job-card:nth-child(2) { transition-delay: 0.1s; } .job-card:nth-child(3) { transition-delay: 0.15s; } .job-card:nth-child(4) { transition-delay: 0.2s; } .job-card:hover { background: rgba(255,255,255,0.07); border-color: rgba(232,168,56,0.3); transform: translateY(-4px); } .job-card-icon { width: 36px; height: 36px; margin: 0 auto 14px; color: #E8A838; } .job-card-icon svg { width: 100%; height: 100%; } .job-card-title { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 6px; } .job-card-meta { font-size: 12px; color: rgba(255,255,255,0.45); line-height: 1.4; } .jobs-view-all { display: inline-block; color: #E8A838; font-size: 15px; font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(232,168,56,0.3); padding-bottom: 2px; transition: all 0.2s; } .jobs-view-all:hover { border-bottom-color: #E8A838; } @media (max-width: 768px) { .jobs-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } } @media (max-width: 480px) { .jobs-grid { grid-template-columns: 1fr; } } /* ========== USER GALLERY ========== */ /* === USER GALLERY SECTION === */ .user-gallery { padding: 48px 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, transparent 100%); overflow: hidden; } .user-gallery .container { max-width: none; width: 90%; margin-left: 5%; margin-right: 5%; padding: 0; box-sizing: border-box; } .user-gallery .section-title { text-align: center; margin-bottom: 32px; } .gallery-grid { --gallery-gap: 6px; display: flex; gap: var(--gallery-gap); width: 100%; max-width: none; padding: 0; margin: 0; box-sizing: border-box; } .gallery-column { flex: 1; display: flex; flex-direction: column; gap: var(--gallery-gap); } .gallery-item { position: relative; border-radius: 12px; overflow: hidden; /* keep rounded corners clean */ background: #111; cursor: pointer; /* NO margin-bottom - gap handles spacing uniformly */ break-inside: avoid; opacity: 0; /* Start hidden, reveal when visible */ transform: scale(1); transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.8s ease, filter 0.8s ease; } .gallery-item.visible { opacity: 1; } /* Subtle dimming effect on other items */ .gallery-grid:hover .gallery-item.visible { opacity: 0.95; filter: brightness(0.95); } .gallery-grid:hover .gallery-item.visible:hover { opacity: 1; filter: brightness(1.15); /* 15% brighter */ z-index: 10; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 10px 20px rgba(0, 0, 0, 0.3); } .gallery-item-inner { position: relative; width: 100%; border-radius: inherit; overflow: hidden; transform-origin: center center; transform: scale(1); opacity: 0; transition: opacity 0.8s ease-out, transform 0.8s ease; } .gallery-item.visible .gallery-item-inner { opacity: 1; } /* Zoom image inside frame on hover */ .gallery-item.visible:hover .gallery-item-inner { transform: scale(1.3); /* 30% bigger, zooms inside the frame */ } .gallery-image { display: block; width: 100%; height: auto; } .gallery-video { display: block; width: 100%; height: auto; object-fit: cover; } .gallery-username { position: absolute; bottom: 3px; left: 3px; padding: 6px 12px; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: rgba(255, 255, 255, 0.95); font-size: 12px; font-weight: 600; letter-spacing: 0.2px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25); z-index: 11; /* Above the zooming content */ opacity: 0; transition: opacity 0.3s ease, background 0.3s ease, border 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease, color 0.3s ease; pointer-events: none; /* Doesn't block hover events */ } .gallery-item:hover .gallery-username { opacity: 1; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1.5px solid rgba(255, 255, 255, 0.4); /* White outline */ box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 255, 255, 0.1); /* Subtle glow */ color: rgba(255, 255, 255, 1); /* Brighter white */ } .gallery-hidden { display: none; } /* Fade gradient at bottom of gallery - fits the fixed container */ .gallery-fade-overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 200px; /* Shorter gradient */ background: linear-gradient(to top, var(--primary-bg) 0%, color-mix(in srgb, var(--primary-bg) 90%, transparent) 30%, transparent 100%); pointer-events: none; /* Allow hover through */ z-index: 100; /* Always on top of everything */ transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1); } .gallery-fade-overlay.expanded { opacity: 0; height: 0; } .gallery-grid-wrapper { position: relative; max-height: 1200px; overflow: hidden; transition: max-height 1s cubic-bezier(0.4, 0, 0.2, 1); } /* .expanded is now controlled via JS with incremental max-height */ .gallery-grid-wrapper.fully-expanded { max-height: none; overflow: visible; } .gallery-see-more-container { text-align: center; margin-top: -80px; position: relative; z-index: 150; /* Above the gradient (z-index: 100) */ padding-bottom: 20px; transition: margin-top 1s cubic-bezier(0.4, 0, 0.2, 1); } .gallery-see-more-container.expanded { margin-top: 40px; } .gallery-see-more-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 24px; color: rgba(255, 255, 255, 0.85); font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .gallery-see-more-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.25); transform: translateY(-2px); } .gallery-see-more-btn svg { width: 16px; height: 16px; transition: transform 0.3s ease; } .gallery-see-more-btn.expanded svg { transform: rotate(45deg); } .gallery-loading { display: flex; justify-content: center; align-items: center; min-height: 200px; color: rgba(255, 255, 255, 0.5); } .gallery-loading-text { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; color: rgba(255, 255, 255, 0.4); animation: galleryPulse 1.5s ease-in-out infinite; } @keyframes galleryPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } } .gallery-empty { text-align: center; padding: 40px 20px; color: rgba(255, 255, 255, 0.5); font-size: 14px; } /* Responsive Gallery - Pinterest masonry */ @media (max-width: 1200px) { /* 3 columns on tablet - hide column 4 */ .gallery-column:nth-child(4) { display: none; } } @media (max-width: 768px) { .user-gallery .container { width: auto; margin-left: 12px; margin-right: 12px; } .gallery-grid { gap: 6px; } /* 2 columns on mobile - hide columns 3 and 4 */ .gallery-column:nth-child(3), .gallery-column:nth-child(4) { display: none; } .user-gallery { padding: 36px 0; } } @media (max-width: 480px) { .user-gallery .container { margin-left: 10px; margin-right: 10px; } .gallery-grid { gap: 4px; } .gallery-item { border-radius: 6px; } } /* ========== GOLDEN BRANDING OVERRIDES ========== */ /* ═══════════════════════════════════════════════════════════════ WELCOME PAGE GOLDEN BRANDING Overriding styles to match the original golden-orange theme ═══════════════════════════════════════════════════════════════ */ .logo span:not(.beta-badge):not(.beta-label):not(.beta-version) { color: white !important; -webkit-text-fill-color: white !important; background: none !important; font-weight: 800; letter-spacing: 0.05em; } /* CRITICAL: Override transparent text for beta badge */ .logo .beta-badge, .logo .beta-badge * { -webkit-text-fill-color: #d4a574 !important; background: #000000 !important; background-clip: border-box !important; -webkit-background-clip: border-box !important; } .logo .beta-badge .beta-label { -webkit-text-fill-color: #d4a574 !important; } .logo .beta-badge .beta-version { -webkit-text-fill-color: #dbb48a !important; } /* ========== LOGO TRIANGLE ========== */ /* ═══════════════════════════════════════════════════════════════ WELCOME PAGE GRADIENT TRIANGULAR LOGO Custom colored version for welcome.html only ═══════════════════════════════════════════════════════════════ */ .welcome-logo-triangle { display: inline-block; position: relative; width: 32px; height: 32px; isolation: isolate; contain: layout style paint; transform: translateZ(0); } .welcome-logo-triangle svg { width: 100%; height: 100%; display: block; overflow: visible; } /* Gradient-colored triangles matching cyan brand theme */ .welcome-logo-triangle polygon { stroke-width: 2; fill-opacity: 0; stroke-opacity: 0; opacity: 1; transform-origin: center; will-change: transform, fill-opacity, stroke-opacity; transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; animation: welcomeTriangleFade 4.6s ease-in-out infinite; } /* Golden orange gradient - matching original FORMAS brand */ .welcome-logo-triangle polygon:nth-child(1) { fill: #d4a574; stroke: #d4a574; transform-origin: 16.667px 16.667px; animation-delay: 0.0s; } .welcome-logo-triangle polygon:nth-child(2) { fill: #c09060; stroke: #c09060; transform-origin: 50.000px 16.667px; animation-delay: 0.1s; } .welcome-logo-triangle polygon:nth-child(3) { fill: #dbb48a; stroke: #dbb48a; /* Light gold/amber */ transform-origin: 83.333px 16.667px; animation-delay: 0.2s; } .welcome-logo-triangle polygon:nth-child(4) { fill: #c09060; stroke: #c09060; transform-origin: 16.667px 50.000px; animation-delay: 0.3s; } .welcome-logo-triangle polygon:nth-child(5) { fill: #d4a574; stroke: #d4a574; transform-origin: 50.000px 50.000px; animation-delay: 0.4s; } .welcome-logo-triangle polygon:nth-child(6) { fill: #dbb48a; stroke: #dbb48a; /* Light gold/amber */ transform-origin: 16.667px 83.333px; animation-delay: 0.5s; } @keyframes welcomeTriangleFade { 0% { stroke-opacity: 0; fill-opacity: 0; transform: rotate(0deg) translateZ(0); } 8% { stroke-opacity: 1; fill-opacity: 0; transform: rotate(0deg) translateZ(0); } 20% { stroke-opacity: 1; fill-opacity: 1; transform: rotate(0deg) translateZ(0); } 35% { stroke-opacity: 1; fill-opacity: 1; transform: rotate(0deg) translateZ(0); } 50% { stroke-opacity: 1; fill-opacity: 1; transform: rotate(180deg) translateZ(0); } 65% { stroke-opacity: 1; fill-opacity: 1; transform: rotate(180deg) translateZ(0); } 80% { stroke-opacity: 1; fill-opacity: 0; transform: rotate(180deg) translateZ(0); } 100% { stroke-opacity: 0; fill-opacity: 0; transform: rotate(180deg) translateZ(0); } } /* ========== FLOATING AUTH PILL ========== */ /* Floating Sign Up / Log In Pill */ .floating-auth-pill { position: fixed; bottom: -70px; left: 50%; transform: translateX(-50%); z-index: 9999; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: rgba(0, 0, 0, 0.85); border: 1px solid rgba(255, 255, 255, 0.25); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-radius: 50px; height: 44px; padding: 0 24px; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.95); cursor: pointer; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) inset; text-decoration: none; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); opacity: 0; pointer-events: none; overflow: hidden; } .floating-auth-pill.visible { bottom: 32px; opacity: 1; pointer-events: auto; } .floating-auth-pill:hover { background: rgba(26, 18, 12, 0.95); border-color: rgba(212, 165, 116, 0.5); transform: translateX(-50%) translateY(-3px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 165, 116, 0.15); } .floating-auth-pill::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent 0%, rgba(212, 165, 116, 0.3) 50%, transparent 100% ); animation: floatingPillShimmer 3s ease-in-out infinite; } @keyframes floatingPillShimmer { 0%, 100% { left: -100%; } 50% { left: 100%; } } .floating-auth-pill .pill-divider { width: 1px; height: 16px; background: rgba(255, 255, 255, 0.3); margin: 0 4px; } .floating-auth-pill .pill-icon { width: 16px; height: 16px; opacity: 0.8; transition: transform 0.3s ease; } .floating-auth-pill:hover .pill-icon { transform: translateX(3px); } @media (max-width: 768px) { .floating-auth-pill { height: 40px; padding: 0 20px; font-size: 13px; bottom: -60px; } .floating-auth-pill.visible { bottom: 24px; } } /* ========== CTA CLICK SAFETY ========== */ /* SNOW OVERLAY - ensure it never blocks clicks on CTA buttons */ #snow-overlay, #snow-overlay * { pointer-events: none !important; z-index: -10 !important; } /* CRITICAL: Ensure all CTA buttons are ALWAYS clickable on desktop and mobile */ .punchy-hero-cta, .punchy-hero-cta-secondary, .get-started-btn, .mobile-nav-item-primary, .nav-btn.get-started-btn, #heroGetStarted, #navGetStarted, #finalGetStarted, #mobileNavGetStarted { pointer-events: auto !important; cursor: pointer !important; position: relative; z-index: 1000000 !important; touch-action: manipulation; -webkit-tap-highlight-color: rgba(255, 165, 0, 0.3); user-select: none; -webkit-user-select: none; } /* Ensure parent containers don't block CTA clicks */ .punchy-hero-cta-group, .punchy-hero-content, .punchy-hero-text-content, .punchy-hero-anchor-wrapper { pointer-events: none; } .punchy-hero-cta-group > *, .punchy-hero-content a, .punchy-hero-content button { pointer-events: auto !important; } /* ================================================================ BLOCK 2: HERO, CANVAS, GRID PATTERN & RESPONSIVE ================================================================ */ /* ========== HTML/BODY BASE STYLES ========== */ /* Body background for pattern */ html { background: var(--primary-bg); scroll-behavior: smooth; color-scheme: dark; width: 100%; overflow-x: hidden; /* Prevent horizontal scroll on mobile */ position: relative; } body { background: transparent; overflow-x: hidden; width: 100%; max-width: 100%; position: relative; /* Mobile-specific fixes */ -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } /* ========== SCROLLBAR STYLES ========== */ html, body { scrollbar-width: none; scrollbar-color: transparent transparent; } html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; background: transparent; } html.is-scrolling, body.is-scrolling { scrollbar-width: thin; scrollbar-color: rgba(201, 160, 120, 0.22) transparent; } html.is-scrolling::-webkit-scrollbar, body.is-scrolling::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: transparent; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; } html.is-scrolling::-webkit-scrollbar-thumb, body.is-scrolling::-webkit-scrollbar-thumb { background: rgba(201, 160, 120, 0.22); } html.is-scrolling::-webkit-scrollbar-thumb:hover, body.is-scrolling::-webkit-scrollbar-thumb:hover { background: rgba(201, 160, 120, 0.3); } /* Mobile viewport fixes */ @media (max-width: 768px) { html, body { width: 100%; max-width: 100%; overflow-x: hidden; position: relative; } /* Ensure all containers respect viewport */ * { max-width: 100%; box-sizing: border-box; } /* Prevent horizontal overflow from fixed/absolute elements */ [class*="punchy-hero"], [class*="container"], [class*="wrapper"] { max-width: 100%; overflow-x: hidden; } } /* Smooth scroll with offset for fixed navbar */ :target { scroll-margin-top: 100px; } /* ========== PUNCHY HERO LAYOUT ========== */ .punchy-hero { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow-x: clip; overflow-y: visible; background: transparent; padding: 90px 24px 40px; /* Space for fixed navbar + side padding + bottom */ z-index: 10; width: 100%; max-width: 100%; box-sizing: border-box; } /* ========== GLOBAL GRID PATTERN ========== */ /* Global grid pattern - fixed to viewport, ABOVE section backgrounds */ .global-crosses-pattern { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: hidden; --grid-unit: 28px; --grid-major: calc(var(--grid-unit) * 5); } .global-crosses-pattern::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(160, 130, 100, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(160, 130, 100, 0.06) 1px, transparent 1px), linear-gradient(rgba(180, 150, 120, 0.1) 1.25px, transparent 1.25px), linear-gradient(90deg, rgba(180, 150, 120, 0.1) 1.25px, transparent 1.25px); background-size: var(--grid-unit) var(--grid-unit), var(--grid-unit) var(--grid-unit), var(--grid-major) var(--grid-major), var(--grid-major) var(--grid-major); background-position: 0 0, 0 0, 0 0, 0 0; } /* Fluid plasma glow overlay - subtle, doesn't cover pattern */ .punchy-hero-glow { position: absolute; inset: 0; background: transparent; pointer-events: none; z-index: -5; } /* ========== CANVAS HERO ========== */ .canvas-hero { display: block !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; overflow: visible !important; height: 100vh; } .canvas-hero .punchy-hero-glow { z-index: 1; } .canvas-hero-stage { position: relative; width: 100%; height: 100vh; z-index: 20; overflow: hidden; } .ch-board { position: absolute; inset: 0; transform-origin: center center; transition: transform 0.1s linear; transform: scale(1.15); } /* ── Images — absolute, overlapping, SHARP ── */ .ch-img { position: absolute; overflow: hidden; border-radius: 0; box-shadow: 0 6px 32px rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.05); } .ch-img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ========== CANVAS HERO - SKETCH SVG ========== */ /* ── Sketch SVG — real vector paths extracted from sketch image ── */ .ch-sketch-svg { position: absolute; z-index: 10; pointer-events: none; overflow: visible; transition: opacity 0.8s ease-out; aspect-ratio: 928 / 1152; height: auto; opacity: 0; } .ch-sketch-svg.active { opacity: 1; } .ch-sketch-path { fill: none; stroke: rgba(255,255,255,0.6); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; } .ch-sketch-path.major { stroke: rgba(255,255,255,0.8); stroke-width: 2.7; } .ch-sketch-path.drawing { animation: chPathDraw var(--dur, 1s) ease-out forwards; } @keyframes chPathDraw { to { stroke-dashoffset: 0; } } /* ========== CANVAS HERO - BLOCKS & SELECTION ========== */ /* ── Colored blocks — drawn corner-to-corner by cursor ── */ .ch-block { position: absolute; z-index: 9; pointer-events: none; opacity: 0; box-shadow: 0 2px 12px rgba(0,0,0,0.25); /* No transition by default so reset is instant */ } .ch-block.drawing { opacity: 0.85 !important; transition: width 0.35s ease-out, height 0.35s ease-out, opacity 0.15s ease !important; } .ch-block.placed { opacity: 0.8 !important; transition: opacity 0.3s ease !important; } /* ── Selection rectangle ── */ .ch-select-rect { position: absolute; border: 1.5px dashed rgba(212,165,116,0.7); background: rgba(212,165,116,0.04); z-index: 16; pointer-events: none; opacity: 0; transition: opacity 0.3s; } .ch-select-rect.visible { opacity: 1; } .ch-select-rect.pulse { animation: chSelectPulse 0.6s ease-in-out 3; } @keyframes chSelectPulse { 0%,100% { border-color: rgba(212,165,116,0.7); box-shadow: none; } 50% { border-color: rgba(212,132,90,1); box-shadow: 0 0 20px rgba(212,165,116,0.3); } } /* ========== CANVAS HERO - IMAGES ========== */ /* ── Generated images — hidden by default ── */ .ch-img { position: absolute; overflow: hidden; border-radius: 0; box-shadow: 0 6px 32px rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.05); opacity: 0; transform: scale(0.96); transition: opacity 0.8s ease-out, transform 0.8s ease-out, left 0.8s cubic-bezier(.4,0,.2,1), top 0.8s cubic-bezier(.4,0,.2,1); aspect-ratio: 928 / 1152; /* render aspect ratio */ height: auto; } .ch-img.generated { opacity: 1; transform: scale(1); } .ch-img.dragging { opacity: 0.85; transform: scale(0.92) rotate(-2deg); transition: opacity 0.3s, transform 0.3s, left 0.05s linear, top 0.05s linear; } .ch-img.dropping { transition: opacity 0.5s ease-out, transform 0.5s ease-out, left 0.5s cubic-bezier(.4,0,.2,1), top 0.5s cubic-bezier(.4,0,.2,1); } .ch-img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ── Loading shimmer ── */ .ch-img-shimmer { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(139,123,247,0) 0%, rgba(139,123,247,0.15) 50%, rgba(139,123,247,0) 100%); background-size: 200% 100%; animation: chShimmer 1.2s ease-in-out infinite; z-index: 1; } @keyframes chShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* ========== CANVAS HERO - NOTES ========== */ /* ── Freeform Notes — matches real pill UI ── */ .ch-note-group { position: absolute; z-index: 25; opacity: 0; transform: scale(0.85); transition: opacity 0.4s ease-out, transform 0.4s ease-out, left 0.5s cubic-bezier(.4,0,.2,1), top 0.5s cubic-bezier(.4,0,.2,1); pointer-events: none; } .ch-note-group.visible { opacity: 1; transform: scale(1); } /* Note absorbs into its anchor dot — smooth, no blink */ .ch-note-group.absorbing { opacity: 1 !important; transition: none !important; /* prevent group opacity transition */ } .ch-note-group.absorbing .ch-note-pill { transform: scale(0) translateY(40px) !important; opacity: 0 !important; transition: transform 0.7s cubic-bezier(.4,0,.2,1), opacity 0.5s ease 0.2s !important; } .ch-note-group.absorbing .ch-note-connector { opacity: 0 !important; transition: opacity 0.4s ease 0.4s !important; } /* Anchor dot pulses after absorb */ .ch-note-group.anchor-pulse .ch-note-dot { animation: chDotPulse 0.5s ease-in-out 3; } @keyframes chDotPulse { 0%, 100% { r: 5; fill: rgba(255,255,255,0.9); } 50% { r: 9; fill: rgba(201,149,107,1); } } /* Updated image — crossfades over the original */ .ch-updated-img { position: absolute; z-index: 14; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 1.2s ease-in-out; aspect-ratio: 928 / 1152; height: auto; } .ch-updated-img.visible { opacity: 1; } .ch-updated-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .ch-note-pill { background: linear-gradient(170deg, #fffde7 0%, #fff9c4 30%, #fff176 100%); color: #1a1a1a; font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; padding: 10px 14px; border-radius: 3px; white-space: pre-line; min-width: 120px; max-width: 180px; box-shadow: 0 2px 6px rgba(0,0,0,0.15), 0 8px 24px rgba(0,0,0,0.1); position: relative; } /* Typed text — appears character by character */ .ch-note-text { min-height: 14px; } /* Anchor connector line + pin dot */ .ch-note-connector { position: absolute; left: 50%; top: 100%; pointer-events: none; } .ch-note-connector line { stroke: rgba(255,255,255,0.6); stroke-width: 1; } .ch-note-dot { fill: rgba(255,255,255,0.9); stroke: rgba(255,255,255,0.4); stroke-width: 1.5; } /* ========== CANVAS HERO - CURSORS ========== */ /* ── Cursors — JS-driven, CSS transitions ── */ .ch-cursor { position: absolute; z-index: 50; pointer-events: none; display: flex; align-items: flex-start; opacity: 0; transition: top 0.8s cubic-bezier(.4,0,.2,1), left 0.8s cubic-bezier(.4,0,.2,1), opacity 0.4s ease; } .ch-cursor.brush { transition: top 0.18s linear, left 0.18s linear, opacity 0.4s ease; } .ch-cursor.fast { transition: top 0.45s cubic-bezier(.4,0,.2,1), left 0.45s cubic-bezier(.4,0,.2,1), opacity 0.4s ease; } .ch-cursor.instant { transition: top 0s, left 0s, opacity 0.4s ease; } .ch-cursor.visible { opacity: 1; } .ch-cursor-arrow { width: 17px; height: 24px; flex-shrink: 0; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5)); } .ch-cursor-label { display: inline-block; margin-left: -2px; margin-top: 14px; padding: 3px 9px 4px; border-radius: 4px; font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; box-shadow: 0 2px 10px rgba(0,0,0,0.35); letter-spacing: 0.02em; } .ch-cursor-label span { font-weight: 400; font-size: 10px; opacity: 0.75; } /* ========== CANVAS HERO - CTA OVERLAY ========== */ /* (tagline moved below CTA button) */ /* ── CTA at bottom ── */ .canvas-hero-cta-overlay { position: absolute; bottom: 60px; left: 0; right: 0; z-index: 60; display: flex; justify-content: center; pointer-events: none; } .canvas-hero-cta-overlay .punchy-hero-cta { pointer-events: auto; background: #d4a574 !important; color: #1a1210 !important; border: none !important; box-shadow: 0 8px 32px rgba(212,165,116,0.25); position: relative; overflow: hidden; height: 54px; font-size: 14px; padding: 0 42px; } .canvas-hero-cta-overlay .punchy-hero-cta:hover { background: #e0c090 !important; box-shadow: 0 0 20px rgba(212, 165, 116, 0.5), 0 0 60px rgba(212, 165, 116, 0.25), 0 12px 40px rgba(212, 165, 116, 0.4) !important; transform: translateY(-2px); } .canvas-hero-cta-overlay .punchy-hero-cta::after { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); transform: skewX(-20deg); animation: ctaGlint 6s ease-in-out infinite; } @keyframes ctaGlint { 0%, 80%, 100% { left: -100%; } 90% { left: 150%; } } /* ========== TAGLINE REVEAL ========== */ /* ── Tagline section — below hero, scroll reveal ── */ .ch-tagline-reveal { padding: 100px 32px 80px; text-align: center; position: relative; z-index: 2; } .ch-tagline-reveal .ch-tl-inner { max-width: 700px; margin: 0 auto; opacity: 0; transform: translateY(60px); transition: opacity 1.2s cubic-bezier(.16,1,.3,1), transform 1.4s cubic-bezier(.16,1,.3,1); } .ch-tagline-reveal .ch-tl-inner.visible { opacity: 1; transform: translateY(0); } .ch-tl-badge { display: inline-block; font-family: 'Outfit', sans-serif; font-size: clamp(11px, 1.2vw, 14px); font-weight: 400; color: rgba(255,255,255,0.55); letter-spacing: 0.08em; border: 1px solid rgba(255,255,255,0.15); border-radius: 50px; padding: 6px 20px; margin-bottom: 28px; } .ch-tl-badge em { font-style: italic; font-family: 'Georgia', 'Times New Roman', serif; color: #d4a574; font-weight: 400; } .ch-tagline-reveal h2 { font-family: 'Georgia', 'Times New Roman', serif; font-size: clamp(42px, 7vw, 96px); font-weight: 400; color: rgba(255,248,240,0.95); line-height: 0.9; letter-spacing: -0.02em; margin: 0 0 24px; } .ch-tagline-reveal h2 em { font-style: italic; font-weight: 400; color: rgba(255,248,240,0.95); } .ch-tagline-reveal h2 em.you { background: linear-gradient(90deg, #d4a574 0%, #e8c8a0 40%, #d4a574 60%, #dbb48a 100%); background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: youShine 3s ease-in-out infinite; } @keyframes youShine { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .ch-tl-sub { font-family: 'Outfit', sans-serif; font-size: clamp(13px, 1.4vw, 18px); font-weight: 300; color: rgba(255,255,255,0.6); line-height: 1.6; margin: 0; } .ch-tl-sub strong { font-weight: 600; color: rgba(255,255,255,0.75); } .ch-tl-bold { font-family: 'Outfit', sans-serif; font-size: clamp(15px, 1.8vw, 22px); font-weight: 500; color: rgba(255,255,255,0.8); line-height: 1.5; margin: 8px 0 0; letter-spacing: 0.02em; } /* ========== REGISTRATION MARKS & HEADLINES ========== */ /* ── Responsive — Tablet ── */ @media (max-width: 1024px) { .ch-note-group { transform: scale(0.85); transform-origin: top left; } .canvas-hero-cta-overlay { bottom: 110px; } .hero-feature-capsules { bottom: 16px; } .ch-sketch-svg { left: 25% !important; width: 50% !important; } } /* ── Responsive — Phone ── */ @media (max-width: 600px) { /* Sketch + center image — big on phone */ .ch-sketch-svg { left: 10% !important; width: 80% !important; top: 18% !important; } #chImg0, #chS2Img0, .ch-updated-img { left: 10% !important; width: 80% !important; top: 18% !important; } /* Side images — tuck behind edges */ #chImg1, #chS2Side0 { left: -5% !important; width: 30% !important; top: 25% !important; } #chImg2, #chS2Side1 { left: 75% !important; width: 30% !important; top: 22% !important; } /* Seq2 center image — wide, let it crop sides */ #chS2Img0 { left: -10% !important; width: 120% !important; top: 22% !important; } /* Blocks — wider to match */ .ch-block { transform: scaleX(1.5) !important; transform-origin: center !important; } /* Details smaller */ #chDet0, #chDet1, #chExtraImg { width: 22% !important; } #chExtraVid { width: 32% !important; } /* Notes — visible, smaller */ .ch-note-group { transform: scale(0.65) !important; transform-origin: top left !important; } /* Cursors — show all, smaller */ .ch-cursor { transform: scale(0.65) !important; display: flex !important; } /* Scroll companions */ .scroll-cursor { display: flex !important; transform: scale(0.7) !important; } /* CTA */ .canvas-hero-cta-overlay { bottom: 70px !important; } .canvas-hero-cta-overlay .punchy-hero-cta { font-size: 13px !important; padding: 10px 24px !important; min-width: 0 !important; max-width: 75vw !important; } .hero-feature-capsules { bottom: 4px !important; gap: 4px !important; padding: 0 8px !important; } .hero-feature-capsules .feature-capsule { font-size: 10px !important; padding: 5px 8px !important; } /* Logo carousel — ensure animation works on phone */ .logos-carousel { overflow: hidden !important; width: 100vw !important; max-width: 100vw !important; } .logos-track { animation: scrollLogos 20s linear infinite !important; display: flex !important; width: max-content !important; } /* Updated image */ .ch-updated-img { left: 8% !important; width: 84% !important; top: 18% !important; } } /* Registration marks container - MUST be fit-content so crosses/rect size to actual text */ .headline-reveal-container { position: relative; overflow: visible; /* NO min-height - container should size EXACTLY to text so crosses align perfectly */ width: fit-content; height: fit-content; /* Height also fits content exactly */ max-width: 100%; /* prevent long rotating headlines from widening the layout */ display: inline-block; /* inline-block sizes to content in both dimensions */ align-self: flex-start; /* don't stretch to column width */ /* Single source of truth for window padding */ --rect-pad-x: 35px; --rect-pad-y: 25px; /* Tighter vertical for compressed lines */ --cross-half: 10px; /* cross is 20px */ } .reg-mark { position: absolute; width: 20px; height: 20px; opacity: 1; pointer-events: none; } .reg-mark::before, .reg-mark::after { content: ''; position: absolute; background: rgba(255, 255, 255, 0.8); } .reg-mark::before { width: 2px; height: 100%; left: 50%; transform: translateX(-50%); } .reg-mark::after { width: 100%; height: 2px; top: 50%; transform: translateY(-50%); } /* Crosses: start center, open vertical, then horizontal, then fade */ /* Crosses: start center, open vertical, then horizontal, then fade */ .reg-mark-tl { top: calc(-1 * (var(--rect-pad-y) + var(--cross-half))); left: calc(-1 * (var(--rect-pad-x) + var(--cross-half))); /* Hidden during the quote "display" phase */ opacity: 0; animation: regMarkTL 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both, regMarkFade 0.8s ease-out 1.6s forwards; } .reg-mark-br { bottom: calc(-1 * (var(--rect-pad-y) + var(--cross-half))); right: calc(-1 * (var(--rect-pad-x) + var(--cross-half))); /* Hidden during the quote "display" phase */ opacity: 0; animation: regMarkBR 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both, regMarkFade 0.8s ease-out 1.6s forwards; } @keyframes regMarkTL { 0% { top: calc(50% - var(--cross-half)); left: calc(50% - var(--cross-half)); opacity: 1; } 40% { top: calc(-1 * (var(--rect-pad-y) + var(--cross-half))); left: calc(50% - var(--cross-half)); opacity: 1; } 100% { top: calc(-1 * (var(--rect-pad-y) + var(--cross-half))); left: calc(-1 * (var(--rect-pad-x) + var(--cross-half))); opacity: 1; } } @keyframes regMarkBR { 0% { bottom: calc(50% - var(--cross-half)); right: calc(50% - var(--cross-half)); opacity: 1; } 40% { bottom: calc(-1 * (var(--rect-pad-y) + var(--cross-half))); right: calc(50% - var(--cross-half)); opacity: 1; } 100% { bottom: calc(-1 * (var(--rect-pad-y) + var(--cross-half))); right: calc(-1 * (var(--rect-pad-x) + var(--cross-half))); opacity: 1; } } @keyframes regMarkFade { to { opacity: 0; } } /* Dashed rectangle - defined by the crosses, grows with them */ .reg-rect { position: absolute; /* Vertical lines white, horizontal lines mid grey */ border-left: 1px dashed rgba(255, 255, 255, 0.5); border-right: 1px dashed rgba(255, 255, 255, 0.5); border-top: 1px dashed rgba(128, 128, 128, 0.5); border-bottom: 1px dashed rgba(128, 128, 128, 0.5); pointer-events: none; /* Start collapsed at center (will animate to full size) */ top: 50%; bottom: 50%; left: 50%; right: 50%; /* Initial animation on page load (use 'both' so 0% keyframe applies during delay) */ animation: rectReveal 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both, rectFadeVar 1s ease-out 1.6s forwards; } /* Make --rect-r animatable (supported browsers); others still fade via opacity */ @property --rect-r { syntax: ''; inherits: false; initial-value: 200%; } /* Radial fade from center (repeatable) */ @keyframes rectFadeVar { 0% { opacity: 1; --rect-r: 200%; } 100% { opacity: 0; --rect-r: 0%; } } /* ═══════════════════════════════════════════════════════════════════════ */ /* ROTATING HEADLINES - Close/Open Animations */ /* ═══════════════════════════════════════════════════════════════════════ */ /* Reverse animations - crosses close back to center */ .reg-mark-tl.closing { animation: regMarkTLClose 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .reg-mark-br.closing { animation: regMarkBRClose 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; } @keyframes regMarkTLClose { 0% { top: calc(-1 * (var(--rect-pad-y) + var(--cross-half))); left: calc(-1 * (var(--rect-pad-x) + var(--cross-half))); opacity: 1; } 60% { top: calc(-1 * (var(--rect-pad-y) + var(--cross-half))); left: calc(50% - var(--cross-half)); } 100% { top: calc(50% - var(--cross-half)); left: calc(50% - var(--cross-half)); opacity: 0; } } @keyframes regMarkBRClose { 0% { bottom: calc(-1 * (var(--rect-pad-y) + var(--cross-half))); right: calc(-1 * (var(--rect-pad-x) + var(--cross-half))); opacity: 1; } 60% { bottom: calc(-1 * (var(--rect-pad-y) + var(--cross-half))); right: calc(50% - var(--cross-half)); } 100% { bottom: calc(50% - var(--cross-half)); right: calc(50% - var(--cross-half)); opacity: 0; } } /* Rectangle close animation - radial fade inward */ .reg-rect.closing { animation: rectCloseRadial 0.8s ease-out forwards !important; } @keyframes rectCloseRadial { 0% { opacity: 1; mask-image: radial-gradient(ellipse 200% 200% at center, black 0%, black 100%); -webkit-mask-image: radial-gradient(ellipse 200% 200% at center, black 0%, black 100%); } 100% { opacity: 0; mask-image: radial-gradient(ellipse 0% 0% at center, transparent 0%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 0% 0% at center, transparent 0%, transparent 100%); } } /* Headline close animation */ .punchy-hero-headline.closing { animation: headlineClose 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; } @keyframes headlineClose { 0% { clip-path: inset(-100% -10% -100% -10%); opacity: 1; } 60% { clip-path: inset(-50% 50% -50% 50%); } 100% { clip-path: inset(50% 50% 50% 50%); opacity: 0; } } /* Opening animations - for subsequent reveals */ .reg-mark-tl.opening { opacity: 1; animation: regMarkTL 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0s both, regMarkFade 0.8s ease-out 1.6s forwards; } .reg-mark-br.opening { opacity: 1; animation: regMarkBR 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0s both, regMarkFade 0.8s ease-out 1.6s forwards; } .reg-rect.opening { opacity: 1; --rect-r: 200%; animation: rectReveal 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0s forwards, rectFadeVar 1s ease-out 1.6s forwards; } /* During transition (between close and open), keep headline hidden */ .punchy-hero-headline.transitioning { opacity: 0 !important; clip-path: inset(50% 50% 50% 50%) !important; } .punchy-hero-headline.opening { opacity: 1; animation: headlineReveal 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards; } /* Subtext and CTA animations for rotation */ .punchy-hero-subtext.closing { animation: contentFadeOut 0.5s ease-out forwards; } .punchy-hero-subtext.opening { animation: contentFadeIn 0.8s ease-out 0.8s forwards; } @keyframes contentFadeOut { to { opacity: 0; transform: translateY(-10px); } } @keyframes rectReveal { /* Start: collapsed at center */ 0% { top: 50%; bottom: 50%; left: 50%; right: 50%; } /* Grow vertically first */ 40% { top: calc(-1 * var(--rect-pad-y)); bottom: calc(-1 * var(--rect-pad-y)); left: 50%; right: 50%; } /* Then widen horizontally to final rectangle */ 100% { top: calc(-1 * var(--rect-pad-y)); bottom: calc(-1 * var(--rect-pad-y)); left: calc(-1 * var(--rect-pad-x)); right: calc(-1 * var(--rect-pad-x)); } } .punchy-hero-headline { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Aggressive scaling: shrinks proportionally so lines NEVER wrap */ font-size: clamp(28px, 3.8vw, 72px); font-weight: 700; line-height: 1.15; /* safe for all ascenders/descenders */ letter-spacing: -0.03em; margin: 0; padding: 0.1em 0 0.15em 0; width: auto; max-width: 100%; overflow: visible !important; clip-path: none; animation: headlineReveal 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both; } /* Scale headline more aggressively on tighter screens */ @media (max-width: 1400px) and (min-width: 1025px) { .punchy-hero-headline { font-size: clamp(26px, 3.2vw, 56px); } } /* Reveal animation: use huge negative insets so letters are NEVER clipped */ @keyframes headlineReveal { 0% { clip-path: inset(50% 50% 50% 50%); opacity: 0; } 10% { opacity: 1; } 40% { clip-path: inset(-50% 50% -50% 50%); } 100% { clip-path: inset(-100% -10% -100% -10%); } } /* Allow wrapping when needed (zoom / long rotating headlines) */ .punchy-hero-headline span { display: inline-block; white-space: normal; max-width: 100%; opacity: 0; animation: wordReveal 0.8s ease-out forwards; } .punchy-hero-headline .word-design { animation-delay: 0.4s; } .punchy-hero-headline .word-imagination { animation-delay: 0.6s; } .punchy-hero-headline .word-create { animation-delay: 0.8s; } @keyframes wordReveal { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } .punchy-hero-headline .word-design { color: #ffffff; } .punchy-hero-headline .word-imagination { background: linear-gradient(135deg, #b0b0b0 0%, #e0e0e0 50%, #b0b0b0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .punchy-hero-headline .word-create { background: linear-gradient(135deg, #dbb48a 0%, #d4a574 50%, #e8c8a0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .punchy-hero-subtext { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, 0.55); max-width: 100%; width: 100%; min-height: 60px; /* Minimum space for subtitle */ margin-top: 10px; /* compensate for slightly taller headline line-box */ opacity: 0; transform: translateY(15px); animation: contentFadeIn 0.8s ease-out 1.5s forwards; } /* ========== PUNCHY HERO CTA BUTTONS ========== */ .punchy-hero-cta-group { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 32px; /* Fixed margin instead of absolute bottom */ opacity: 0; transform: translateY(15px); animation: contentFadeIn 0.8s ease-out 0.2s forwards; /* Reduced delay */ z-index: 100000 !important; pointer-events: auto !important; position: relative; /* Relative instead of absolute */ } @keyframes contentFadeIn { to { opacity: 1; transform: translateY(0); } } .punchy-hero-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #d4a574; color: #1a1210; font-family: 'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; padding: 0 42px; height: 54px; border-radius: 50px; text-decoration: none; border: none; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); box-shadow: 0 8px 32px rgba(212, 165, 116, 0.2); position: relative; z-index: 1000000 !important; pointer-events: auto !important; cursor: pointer !important; text-transform: uppercase; letter-spacing: 0.16em; transform: translateZ(0); backface-visibility: hidden; overflow: hidden; } .punchy-hero-cta:hover { background: #e0c090; box-shadow: 0 0 20px rgba(212, 165, 116, 0.5), 0 0 60px rgba(212, 165, 116, 0.25), 0 12px 40px rgba(212, 165, 116, 0.4); transform: translateY(-2px) translateZ(0); pointer-events: auto !important; } .punchy-hero-cta:focus, .punchy-hero-cta:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(212, 165, 116, 0.25), 0 8px 32px rgba(212, 165, 116, 0.2); } .punchy-hero-cta:active { transform: translateY(0) scale(0.99) translateZ(0); transition: all 0.1s ease; } .punchy-hero-cta svg { width: 15px; height: 15px; stroke-width: 1.8; opacity: 0.7; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .punchy-hero-cta:hover svg { transform: translateX(3px); opacity: 1; } .punchy-hero-cta-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(10px); color: rgba(255, 255, 255, 0.8); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 500; padding: 0 26px; height: 44px; /* Fixed height - same as primary */ border-radius: 50px; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.15); } .punchy-hero-cta-secondary .cta-icon { width: 16px; height: 16px; opacity: 0.7; filter: brightness(0) invert(0.8); /* Light grey tint */ transition: all 0.3s ease; } .punchy-hero-cta-secondary:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.25); color: #fff; transform: translateY(-2px); } .punchy-hero-cta-secondary:focus, .punchy-hero-cta-secondary:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3); } .punchy-hero-cta-secondary:active { transform: translateY(0) scale(0.98); } /* Floating warm orbs */ /* orbs removed */ /* ========== FEATURE CAPSULES BAR ========== */ /* Feature Capsules Bar */ .hero-feature-capsules { display: none !important; position: absolute; bottom: 24px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 12px; padding: 0 20px; z-index: 100; flex-wrap: wrap; pointer-events: auto; } .feature-capsule { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(12px); border: 1px solid rgba(255, 180, 80, 0.25); border-radius: 50px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.85); text-decoration: none; cursor: pointer; pointer-events: auto; transition: all 0.3s ease; white-space: nowrap; position: relative; z-index: 100; } .feature-capsule:hover { background: rgba(255, 165, 0, 0.15); border-color: rgba(255, 180, 80, 0.6); color: #fff; transform: translateY(-2px); } .feature-capsule:focus { outline: none; box-shadow: 0 0 0 2px rgba(255, 180, 80, 0.5); } .feature-capsule:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 180, 80, 0.5); } .feature-capsule:active { transform: translateY(0) scale(0.98); } .feature-capsule.active { background: linear-gradient(135deg, rgba(212, 165, 116, 0.2) 0%, rgba(176, 100, 60, 0.15) 100%); border-color: rgba(255, 180, 80, 0.7); color: #dbb48a; } .feature-capsule-icon { width: 18px; height: 18px; opacity: 0.8; } .feature-capsule-more { background: transparent; border: 1px dashed rgba(255, 255, 255, 0.3); } .feature-capsule-more:hover { border-style: solid; background: rgba(255, 255, 255, 0.08); } @media (max-width: 1024px) { .hero-feature-capsules { position: static !important; order: 10; width: 100%; margin-top: 28px; margin-bottom: 24px; gap: 10px; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; -webkit-overflow-scrolling: touch; scrollbar-width: none; scrollbar-color: transparent transparent; padding: 0 20px 20px; } .hero-feature-capsules::-webkit-scrollbar { height: 0; background: transparent; } .hero-feature-capsules::-webkit-scrollbar-track { background: transparent; } .hero-feature-capsules::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; } .hero-feature-capsules.is-scrolling-x { scrollbar-width: thin; scrollbar-color: rgba(201, 160, 120, 0.22) transparent; } .hero-feature-capsules.is-scrolling-x::-webkit-scrollbar { height: 6px; background: transparent; } .hero-feature-capsules.is-scrolling-x::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.22); } .feature-capsule { padding: 10px 16px; font-size: 13px; flex-shrink: 0; } } @media (max-width: 600px) { .hero-feature-capsules { margin-top: 20px; margin-bottom: 20px; gap: 8px; padding: 0 4vw; /* GRID layout on phone - 2 columns */ display: grid; grid-template-columns: repeat(2, 1fr); overflow-x: visible; } .feature-capsule { padding: 10px 12px; font-size: 12px; justify-content: center; flex-shrink: 1; } .feature-capsule-icon { width: 16px; height: 16px; } /* On phone: keep 4 feature capsules (hide Image Editor) */ .feature-capsule[data-feature="image-editor"] { display: none !important; } } /* ========== HERO RESPONSIVE - TABLET ========== */ /* Mobile responsive */ /* ═══════════════════════════════════════════════════════════════════════ */ /* MOBILE RESPONSIVE - Tablet */ /* ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { .punchy-hero { padding-top: 85px; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; overflow-y: visible; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 100%; max-width: 100%; } .headline-reveal-container { overflow: visible; max-width: 100%; padding-bottom: 8px; } .reg-mark, .reg-rect { display: none; } .punchy-hero-container { grid-template-columns: 1fr !important; padding: 12px 4vw 12px !important; gap: 12px !important; /* tighter gap */ max-width: 100% !important; width: 100% !important; overflow-x: hidden !important; overflow-y: visible; box-sizing: border-box; margin: 0 !important; } .punchy-hero-video-zone { justify-content: center; align-items: center; padding: 0 !important; order: -1; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .punchy-hero-video-wrapper { width: 100% !important; max-width: calc(100% - 8vw) !important; /* Account for container padding */ margin: 0 auto !important; box-sizing: border-box !important; padding: 0 !important; overflow: hidden !important; } .punchy-hero-extension { display: none; } .punchy-hero-video { width: 100%; max-width: min(88%, 520px); aspect-ratio: 1 / 1; border-radius: 18px; /* Safari fix: ensure square aspect ratio */ display: block; box-sizing: border-box; } .punchy-hero-carousel-dots { width: 100%; max-width: min(88%, 520px); margin: 14px auto 0; box-sizing: border-box; } .punchy-hero-content { text-align: center; align-items: center; padding: 0 4vw !important; max-width: 100% !important; width: 100% !important; flex-shrink: 0; box-sizing: border-box; min-width: 0 !important; /* Allow content to shrink below 520px */ } .headline-reveal-container { width: 100%; display: flex; flex-direction: column; align-items: center; margin-bottom: 12px; } .punchy-hero-headline { text-align: center; width: 100%; font-size: clamp(30px, 5vw, 44px); } .punchy-hero-subtext { max-width: 85%; text-align: center; font-size: 15px; line-height: 1.55; margin-top: 12px; margin-bottom: 0; } .punchy-hero-anchor-wrapper { height: auto; min-height: auto; margin-top: 8px; } .punchy-hero-text-content { padding-bottom: 24px; align-items: center; margin-top: 0; } .punchy-hero-cta-group { justify-content: center; width: 100%; gap: 14px; z-index: 99999 !important; pointer-events: auto !important; } .punchy-hero-cta { padding: 14px 32px; font-size: 15px; } } /* ========== HERO RESPONSIVE - PHONE ========== */ /* ═══════════════════════════════════════════════════════════════════════ */ /* MOBILE RESPONSIVE - Phone */ /* ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 600px) { .punchy-hero { padding-top: 65px; width: 100%; max-width: 100%; overflow-x: hidden; } .punchy-hero-container { grid-template-columns: 1fr !important; padding: 8px 4vw 8px !important; gap: 12px !important; /* tighter gap */ width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box; margin: 0 !important; } .punchy-hero-video-zone { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; } .punchy-hero-video-wrapper { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; box-sizing: border-box !important; padding: 0 !important; overflow: hidden !important; min-width: 0 !important; } .punchy-hero-video, .punchy-hero-carousel-dots { max-width: 100% !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; padding: 0 !important; min-width: 0 !important; } .punchy-hero-video { aspect-ratio: 1 / 1; border-radius: 14px; } .punchy-hero-carousel-dots { margin: 12px auto 0; } .punchy-hero-headline { /* BIG bold headlines on phone */ font-size: clamp(26px, 7vw, 38px); line-height: 1.14; } .punchy-hero-subtext { font-size: 14px; line-height: 1.5; margin-top: 10px; max-width: 92%; } .punchy-hero-content { padding: 0 4vw !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box; min-width: 0 !important; /* Override any min-width constraints */ } .punchy-hero-anchor-wrapper { min-height: auto !important; margin-top: 4px !important; padding: 0 !important; } .punchy-hero-text-content { padding-bottom: 16px !important; /* further reduced space */ margin-top: 0 !important; padding-top: 0 !important; } .headline-reveal-container { margin-bottom: 8px !important; margin-top: 0 !important; } .punchy-hero-subtext { margin-top: 8px !important; margin-bottom: 0 !important; } .punchy-hero-headline { margin-bottom: 0 !important; } .punchy-hero-cta-group { gap: 12px; /* space between primary and secondary buttons */ flex-direction: column; /* stack buttons vertically */ z-index: 99999 !important; pointer-events: auto !important; } .punchy-hero-cta, .punchy-hero-cta-secondary { width: 100%; justify-content: center; padding: 14px 24px; font-size: 15px; position: relative; z-index: 1000000 !important; pointer-events: auto !important; cursor: pointer !important; -webkit-tap-highlight-color: rgba(255, 165, 0, 0.3); touch-action: manipulation; } /* Simplify animations on mobile for performance */ .reg-mark, .reg-rect { display: none; } .punchy-hero-headline { animation: simpleFadeIn 0.6s ease-out 0.2s both; clip-path: none; } .punchy-hero-headline span { animation: none; opacity: 1; transform: none; } .punchy-hero-subtext { animation: simpleFadeIn 0.6s ease-out 0.4s both; } .punchy-hero-cta-group { animation: simpleFadeIn 0.6s ease-out 0.6s both; z-index: 99999 !important; pointer-events: auto !important; } .global-crosses-pattern { opacity: 0.6; /* Increased visibility on mobile */ display: block !important; } .global-crosses-pattern::before { display: block !important; } /* Ensure all content containers respect viewport */ .punchy-hero-content, .punchy-hero-text-content, .headline-reveal-container, .punchy-hero-headline, .punchy-hero-subtext { width: 100% !important; max-width: 100% !important; box-sizing: border-box; overflow-x: hidden; min-width: 0 !important; } /* Force all grid items to respect container */ .punchy-hero-container > * { min-width: 0 !important; max-width: 100% !important; } /* Ensure buttons don't overflow */ .punchy-hero-cta-group { width: 100%; max-width: 100%; box-sizing: border-box; margin-top: 20px; } /* Prevent text overflow */ .punchy-hero-headline, .punchy-hero-subtext { word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; } } @keyframes simpleFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ========== REDUCED MOTION & GPU ACCELERATION ========== */ /* ═══════════════════════════════════════════════════════════════════════ */ /* ACCESSIBILITY: Reduced Motion Support */ /* ═══════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reg-mark, .reg-rect { display: none; } .punchy-hero-headline, .punchy-hero-headline span, .punchy-hero-subtext, .punchy-hero-cta-group { opacity: 1; transform: none; clip-path: none; z-index: 99999 !important; pointer-events: auto !important; } .global-crosses-pattern::before { animation: none; opacity: 0.6; } .ch-cursor, .ch-img, .ch-note-group { opacity: 1; transform: none; } .ch-fade { animation: none !important; opacity: 1 !important; transform: none !important; } } /* ═══════════════════════════════════════════════════════════════════════ */ /* PERFORMANCE: GPU Acceleration for Animations */ /* ═══════════════════════════════════════════════════════════════════════ */ .reg-mark, .reg-rect, .punchy-hero-headline, .punchy-hero-subtext, .punchy-hero-cta-group, .ch-cursor, .ch-img, .ch-note-group { will-change: transform, opacity; transform: translateZ(0); backface-visibility: hidden; } /* Clean up will-change after animations complete */ .punchy-hero-headline, .punchy-hero-subtext, .punchy-hero-cta-group { animation-fill-mode: forwards; } /* ========== SCROLL CURSORS ========== */ .scroll-cursor { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; display: flex; align-items: flex-start; opacity: 0; transition: opacity 0.8s ease; will-change: transform; } .scroll-cursor.active { opacity: 0.85; } .scroll-cursor svg { width: 17px; height: 24px; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.4)); } .scroll-cursor-label { margin-left: -2px; margin-top: 14px; padding: 3px 9px 4px; border-radius: 4px; font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; box-shadow: 0 2px 10px rgba(0,0,0,0.3); letter-spacing: 0.02em; } .scroll-cursor-label span { font-weight: 400; font-size: 10px; opacity: 0.7; letter-spacing: 0.03em; }