/* ═══════════════════════════════════════════════════════════════ WritexNova — Premium Glassmorphism UI System v2.0 Water-glass effect · Smooth animations · Premium modern SaaS Add AFTER all other CSS files in ═══════════════════════════════════════════════════════════════ */ /* ── Design Tokens ─────────────────────────────────────────────── */ :root { /* Glassmorphism */ --wx-glass-bg: rgba(255, 255, 255, 0.75); --wx-glass-bg-strong: rgba(255, 255, 255, 0.88); --wx-glass-border: rgba(255, 255, 255, 0.6); --wx-glass-border-subtle: rgba(255, 255, 255, 0.25); --wx-glass-blur: blur(20px); --wx-glass-blur-strong: blur(24px); /* Premium Shadows */ --wx-shadow-glass: 0 8px 32px rgba(79, 70, 229, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6); --wx-shadow-glass-hover: 0 20px 48px rgba(79, 70, 229, 0.15), 0 8px 24px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8); --wx-shadow-glow: 0 0 40px rgba(79, 70, 229, 0.2); --wx-shadow-glow-purple: 0 0 40px rgba(124, 58, 237, 0.2); /* Gradients */ --wx-gradient-primary: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #06b6d4 100%); --wx-gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%); --wx-gradient-hero-bg: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(124, 58, 237, 0.3) 0%, transparent 50%), radial-gradient(ellipse 60% 40% at 80% 50%, rgba(79, 70, 229, 0.2) 0%, transparent 50%), radial-gradient(ellipse 50% 30% at 20% 80%, rgba(6, 182, 212, 0.15) 0%, transparent 50%); /* Animation */ --wx-ease-smooth: cubic-bezier(0.22, 1, 0.36, 1); --wx-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --wx-transition-fast: 0.2s var(--wx-ease-smooth); --wx-transition-medium: 0.35s var(--wx-ease-smooth); --wx-transition-slow: 0.5s var(--wx-ease-smooth); /* Radii */ --wx-radius-sm: 10px; --wx-radius-md: 14px; --wx-radius-lg: 20px; --wx-radius-xl: 28px; --wx-radius-2xl: 32px; } [data-theme="dark"] { --wx-glass-bg: rgba(20, 18, 38, 0.8); --wx-glass-bg-strong: rgba(20, 18, 38, 0.92); --wx-glass-border: rgba(255, 255, 255, 0.1); --wx-glass-border-subtle: rgba(255, 255, 255, 0.06); --wx-shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05); --wx-shadow-glass-hover: 0 20px 48px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08); } /* ═══════════════════════════════════════════════════════════════ ANIMATED GRADIENT BACKGROUND ═══════════════════════════════════════════════════════════════ */ body::before { content: ''; position: fixed; inset: 0; background: var(--wx-gradient-hero-bg); opacity: 0.4; pointer-events: none; z-index: -1; animation: wx-bg-shift 20s ease-in-out infinite; } @keyframes wx-bg-shift { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.05); } } [data-theme="dark"] body::before { opacity: 0.6; } /* ═══════════════════════════════════════════════════════════════ NAVBAR — Sticky Glass Effect ═══════════════════════════════════════════════════════════════ */ .nav { background: var(--wx-glass-bg-strong) !important; backdrop-filter: var(--wx-glass-blur-strong) !important; -webkit-backdrop-filter: var(--wx-glass-blur-strong) !important; border-bottom: 1px solid var(--wx-glass-border-subtle) !important; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05) !important; transition: var(--wx-transition-medium) !important; } .nav:hover { box-shadow: 0 8px 40px rgba(79, 70, 229, 0.08) !important; } [data-theme="dark"] .nav { background: var(--wx-glass-bg-strong) !important; border-bottom-color: var(--wx-glass-border) !important; } /* Nav brand */ .nav-brand { transition: var(--wx-transition-fast) !important; } .nav-brand:hover { transform: translateY(-1px) !important; } /* Nav links */ .nav-links a { position: relative !important; transition: var(--wx-transition-fast) !important; border-radius: var(--wx-radius-sm) !important; } .nav-links a::after { content: ''; position: absolute; bottom: 2px; left: 50%; width: 0; height: 2px; background: var(--wx-gradient-primary); border-radius: 2px; transition: var(--wx-transition-fast); transform: translateX(-50%); } .nav-links a:hover::after, .nav-links a.active::after { width: 70%; } .nav-links a:hover { background: rgba(79, 70, 229, 0.08) !important; transform: translateY(-1px); } /* Mobile menu glass */ .mobile-menu { background: var(--wx-glass-bg-strong) !important; backdrop-filter: var(--wx-glass-blur-strong) !important; -webkit-backdrop-filter: var(--wx-glass-blur-strong) !important; border-top: 1px solid var(--wx-glass-border-subtle) !important; } .mobile-menu a { transition: var(--wx-transition-fast) !important; border-radius: var(--wx-radius-sm) !important; } .mobile-menu a:hover { background: rgba(79, 70, 229, 0.1) !important; transform: translateX(4px); } /* Nav dropdown glass */ .nav-dropdown-menu { background: var(--wx-glass-bg-strong) !important; backdrop-filter: var(--wx-glass-blur) !important; -webkit-backdrop-filter: var(--wx-glass-blur) !important; border: 1px solid var(--wx-glass-border) !important; border-radius: var(--wx-radius-lg) !important; box-shadow: var(--wx-shadow-glass-hover) !important; } .nav-dd-item { transition: var(--wx-transition-fast) !important; border-radius: var(--wx-radius-sm) !important; } .nav-dd-item:hover { background: rgba(79, 70, 229, 0.1) !important; transform: translateX(4px); } /* Theme toggle */ .theme-toggle { background: var(--wx-glass-bg) !important; backdrop-filter: var(--wx-glass-blur) !important; border: 1px solid var(--wx-glass-border-subtle) !important; transition: var(--wx-transition-fast) !important; } .theme-toggle:hover { transform: rotate(15deg) scale(1.1) !important; box-shadow: var(--wx-shadow-glow) !important; } /* ═══════════════════════════════════════════════════════════════ HERO SECTION — Premium Glass Effect ═══════════════════════════════════════════════════════════════ */ .hero, .lp-hero { position: relative !important; overflow: hidden !important; } /* Animated orb effects */ .lp-blob, .lp-blob-1, .lp-blob-2 { animation: wx-float 8s ease-in-out infinite !important; } .lp-blob-2 { animation-delay: -4s !important; animation-duration: 10s !important; } @keyframes wx-float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -20px) scale(1.05); } 66% { transform: translate(-20px, 15px) scale(0.95); } } /* Hero glass card */ .lp-glass-card { background: var(--wx-glass-bg) !important; backdrop-filter: var(--wx-glass-blur-strong) !important; -webkit-backdrop-filter: var(--wx-glass-blur-strong) !important; border: 1px solid var(--wx-glass-border) !important; border-radius: var(--wx-radius-xl) !important; box-shadow: var(--wx-shadow-glass) !important; transition: var(--wx-transition-medium) !important; overflow: hidden; } .lp-glass-card:hover { box-shadow: var(--wx-shadow-glass-hover) !important; transform: translateY(-4px) !important; } [data-theme="dark"] .lp-glass-card { background: var(--wx-glass-bg) !important; border-color: var(--wx-glass-border) !important; } /* Hero floating badges */ .lp-float-glass, .lp-float-badge { background: var(--wx-glass-bg-strong) !important; backdrop-filter: var(--wx-glass-blur) !important; -webkit-backdrop-filter: var(--wx-glass-blur) !important; border: 1px solid var(--wx-glass-border) !important; border-radius: var(--wx-radius-md) !important; box-shadow: var(--wx-shadow-glass) !important; animation: wx-badge-float 5s ease-in-out infinite !important; } .lp-float-g2, .lp-float-2 { animation-delay: -2s !important; } .lp-float-g3 { animation-delay: -4s !important; } @keyframes wx-badge-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* Hero CTA buttons */ .lp-btn-primary { background: var(--wx-gradient-primary) !important; border: none !important; border-radius: var(--wx-radius-md) !important; box-shadow: 0 4px 20px rgba(79, 70, 229, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) inset !important; transition: var(--wx-transition-fast) !important; position: relative; overflow: hidden; } .lp-btn-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%); opacity: 0; transition: var(--wx-transition-fast); } .lp-btn-primary:hover { transform: translateY(-3px) scale(1.02) !important; box-shadow: 0 8px 32px rgba(79, 70, 229, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.2) inset, var(--wx-shadow-glow) !important; } .lp-btn-primary:hover::before { opacity: 1; } .lp-btn-primary:active { transform: translateY(-1px) scale(0.99) !important; } .lp-btn-secondary { background: var(--wx-glass-bg) !important; backdrop-filter: var(--wx-glass-blur) !important; border: 1px solid var(--wx-glass-border) !important; border-radius: var(--wx-radius-md) !important; transition: var(--wx-transition-fast) !important; } .lp-btn-secondary:hover { background: rgba(255, 255, 255, 0.25) !important; transform: translateY(-2px) !important; box-shadow: var(--wx-shadow-glass) !important; } /* ═══════════════════════════════════════════════════════════════ TOOL CARDS — Premium Glass Cards ═══════════════════════════════════════════════════════════════ */ .tool-card { background: var(--wx-glass-bg) !important; backdrop-filter: var(--wx-glass-blur) !important; -webkit-backdrop-filter: var(--wx-glass-blur) !important; border: 1px solid var(--wx-glass-border) !important; border-radius: var(--wx-radius-xl) !important; box-shadow: var(--wx-shadow-glass) !important; transition: var(--wx-transition-medium) !important; position: relative; overflow: hidden; } /* Shimmer effect on hover */ .tool-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.2), transparent ); transition: 0.5s; pointer-events: none; } .tool-card:hover::before { left: 100%; } .tool-card:hover { transform: translateY(-8px) scale(1.02) !important; box-shadow: var(--wx-shadow-glass-hover), var(--wx-shadow-glow) !important; border-color: rgba(79, 70, 229, 0.3) !important; } /* Tool card icon glow */ .tool-card-icon { display: inline-flex !important; align-items: center; justify-content: center; width: 56px !important; height: 56px !important; background: var(--wx-glass-bg-strong) !important; border-radius: var(--wx-radius-md) !important; box-shadow: 0 4px 16px rgba(79, 70, 229, 0.1) !important; transition: var(--wx-transition-medium) !important; } .tool-card:hover .tool-card-icon { transform: scale(1.15) rotate(-5deg) !important; box-shadow: 0 8px 24px rgba(79, 70, 229, 0.2), var(--wx-shadow-glow) !important; } /* Color variants with glass effect */ .tool-card-indigo { background: linear-gradient(145deg, rgba(238,242,255,0.9), rgba(224,231,255,0.8)) !important; } .tool-card-indigo:hover { box-shadow: var(--wx-shadow-glass-hover), 0 0 40px rgba(99, 102, 241, 0.2) !important; } .tool-card-amber { background: linear-gradient(145deg, rgba(255,251,235,0.9), rgba(254,243,199,0.8)) !important; } .tool-card-amber:hover { box-shadow: var(--wx-shadow-glass-hover), 0 0 40px rgba(245, 158, 11, 0.2) !important; } .tool-card-purple { background: linear-gradient(145deg, rgba(245,243,255,0.9), rgba(237,233,254,0.8)) !important; } .tool-card-purple:hover { box-shadow: var(--wx-shadow-glass-hover), 0 0 40px rgba(139, 92, 246, 0.2) !important; } .tool-card-green { background: linear-gradient(145deg, rgba(240,253,244,0.9), rgba(220,252,231,0.8)) !important; } .tool-card-green:hover { box-shadow: var(--wx-shadow-glass-hover), 0 0 40px rgba(34, 197, 94, 0.2) !important; } .tool-card-rose { background: linear-gradient(145deg, rgba(255,241,242,0.9), rgba(255,228,230,0.8)) !important; } .tool-card-rose:hover { box-shadow: var(--wx-shadow-glass-hover), 0 0 40px rgba(244, 63, 94, 0.2) !important; } .tool-card-sky { background: linear-gradient(145deg, rgba(240,249,255,0.9), rgba(224,242,254,0.8)) !important; } .tool-card-sky:hover { box-shadow: var(--wx-shadow-glass-hover), 0 0 40px rgba(14, 165, 233, 0.2) !important; } /* Dark mode tool cards */ [data-theme="dark"] .tool-card { background: var(--wx-glass-bg) !important; border-color: var(--wx-glass-border) !important; } [data-theme="dark"] .tool-card-indigo { background: linear-gradient(145deg, rgba(30,27,75,0.9), rgba(26,24,56,0.85)) !important; } [data-theme="dark"] .tool-card-amber { background: linear-gradient(145deg, rgba(69,26,3,0.9), rgba(41,37,36,0.85)) !important; } [data-theme="dark"] .tool-card-purple { background: linear-gradient(145deg, rgba(46,16,101,0.9), rgba(30,27,75,0.85)) !important; } [data-theme="dark"] .tool-card-green { background: linear-gradient(145deg, rgba(5,46,22,0.9), rgba(15,42,26,0.85)) !important; } [data-theme="dark"] .tool-card-rose { background: linear-gradient(145deg, rgba(76,5,25,0.9), rgba(31,10,13,0.85)) !important; } [data-theme="dark"] .tool-card-sky { background: linear-gradient(145deg, rgba(8,47,73,0.9), rgba(12,26,37,0.85)) !important; } /* ═══════════════════════════════════════════════════════════════ PRICING CARDS — Premium Glass ═══════════════════════════════════════════════════════════════ */ .plan-card, .px-card, .pricing-card { background: var(--wx-glass-bg) !important; backdrop-filter: var(--wx-glass-blur) !important; -webkit-backdrop-filter: var(--wx-glass-blur) !important; border: 1px solid var(--wx-glass-border) !important; border-radius: var(--wx-radius-xl) !important; box-shadow: var(--wx-shadow-glass) !important; transition: var(--wx-transition-medium) !important; position: relative; overflow: hidden; } .plan-card:hover, .px-card:hover, .pricing-card:hover { transform: translateY(-8px) !important; box-shadow: var(--wx-shadow-glass-hover) !important; border-color: rgba(79, 70, 229, 0.3) !important; } /* Popular/Featured plan */ .px-card.px-popular, .pricing-card.featured, .plan-card.popular { background: linear-gradient(145deg, rgba(238,242,255,0.95), rgba(224,231,255,0.9)) !important; border: 2px solid rgba(79, 70, 229, 0.4) !important; box-shadow: var(--wx-shadow-glass), 0 0 0 1px rgba(99, 102, 241, 0.1), var(--wx-shadow-glow) !important; } .px-card.px-popular:hover, .pricing-card.featured:hover, .plan-card.popular:hover { box-shadow: var(--wx-shadow-glass-hover), 0 0 0 2px rgba(99, 102, 241, 0.2), 0 0 60px rgba(79, 70, 229, 0.3) !important; } [data-theme="dark"] .px-card.px-popular, [data-theme="dark"] .pricing-card.featured, [data-theme="dark"] .plan-card.popular { background: linear-gradient(145deg, rgba(30,27,75,0.95), rgba(26,24,56,0.9)) !important; border-color: rgba(99, 102, 241, 0.5) !important; } /* Pricing toggle */ .px-period-toggle, .pricing-toggle { background: var(--wx-glass-bg) !important; backdrop-filter: var(--wx-glass-blur) !important; border: 1px solid var(--wx-glass-border) !important; border-radius: var(--wx-radius-lg) !important; box-shadow: var(--wx-shadow-glass) !important; } /* ═══════════════════════════════════════════════════════════════ BUTTONS — Premium Style ═══════════════════════════════════════════════════════════════ */ .btn { transition: var(--wx-transition-fast) !important; position: relative; overflow: hidden; } .btn-primary { background: var(--wx-gradient-primary) !important; border: none !important; box-shadow: 0 4px 16px rgba(79, 70, 229, 0.3) !important; } .btn-primary:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(79, 70, 229, 0.4), var(--wx-shadow-glow) !important; } .btn-primary:active { transform: translateY(0) !important; } .btn-outline, .btn-ghost { background: var(--wx-glass-bg) !important; backdrop-filter: blur(8px) !important; border: 1.5px solid var(--wx-glass-border-subtle) !important; transition: var(--wx-transition-fast) !important; } .btn-outline:hover, .btn-ghost:hover { background: rgba(79, 70, 229, 0.1) !important; border-color: var(--primary) !important; transform: translateY(-1px) !important; } .btn-accent { background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important; box-shadow: 0 4px 16px rgba(124, 58, 237, 0.3) !important; } .btn-accent:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4), var(--wx-shadow-glow-purple) !important; } /* ═══════════════════════════════════════════════════════════════ FORMS — Premium Glass Inputs ═══════════════════════════════════════════════════════════════ */ .form-input, .form-select, textarea, input[type="text"], input[type="email"], input[type="password"], select { background: var(--wx-glass-bg) !important; backdrop-filter: blur(8px) !important; border: 1.5px solid var(--wx-glass-border-subtle) !important; border-radius: var(--wx-radius-sm) !important; transition: var(--wx-transition-fast) !important; } .form-input:focus, .form-select:focus, textarea:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, select:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12), var(--wx-shadow-glass) !important; outline: none !important; } [data-theme="dark"] .form-input, [data-theme="dark"] .form-select, [data-theme="dark"] textarea, [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] select { background: var(--wx-glass-bg) !important; border-color: var(--wx-glass-border) !important; } /* ═══════════════════════════════════════════════════════════════ CARDS — Generic Glass Card ═══════════════════════════════════════════════════════════════ */ .card, .wx-glass-card { background: var(--wx-glass-bg) !important; backdrop-filter: var(--wx-glass-blur) !important; -webkit-backdrop-filter: var(--wx-glass-blur) !important; border: 1px solid var(--wx-glass-border) !important; border-radius: var(--wx-radius-lg) !important; box-shadow: var(--wx-shadow-glass) !important; transition: var(--wx-transition-medium) !important; } .card-hover:hover, .card:hover { box-shadow: var(--wx-shadow-glass-hover) !important; } [data-theme="dark"] .card { background: var(--wx-glass-bg) !important; border-color: var(--wx-glass-border) !important; } /* ═══════════════════════════════════════════════════════════════ DASHBOARD — Premium Glass ═══════════════════════════════════════════════════════════════ */ .dash-plan-card { background: var(--wx-gradient-primary) !important; border-radius: var(--wx-radius-xl) !important; box-shadow: 0 16px 48px rgba(79, 70, 229, 0.3), 0 8px 24px rgba(0, 0, 0, 0.1) !important; position: relative; overflow: hidden; } .dash-plan-card::before { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 50%); animation: wx-rotate 15s linear infinite; } @keyframes wx-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .dash-tool-card { background: var(--wx-glass-bg) !important; backdrop-filter: var(--wx-glass-blur) !important; -webkit-backdrop-filter: var(--wx-glass-blur) !important; border: 1.5px solid var(--wx-glass-border-subtle) !important; border-radius: var(--wx-radius-md) !important; box-shadow: var(--wx-shadow-glass) !important; transition: var(--wx-transition-medium) !important; } .dash-tool-card:hover { transform: translateY(-4px) scale(1.02) !important; box-shadow: var(--wx-shadow-glass-hover), var(--wx-shadow-glow) !important; border-color: var(--primary) !important; } .dash-qs-card { background: var(--wx-glass-bg) !important; backdrop-filter: var(--wx-glass-blur) !important; border: 1.5px solid var(--wx-glass-border-subtle) !important; border-radius: var(--wx-radius-md) !important; box-shadow: var(--wx-shadow-glass) !important; transition: var(--wx-transition-fast) !important; } .dash-qs-card:hover { transform: translateY(-2px) !important; box-shadow: var(--wx-shadow-glass-hover) !important; } /* ═══════════════════════════════════════════════════════════════ OUTPUT/RESULT SECTIONS ═══════════════════════════════════════════════════════════════ */ .output-box, #outputBox, #humanOutputBox, #paraphraseOutputBox, #grammarOutputBox, #summaryOutputBox, .result-box { background: var(--wx-glass-bg) !important; backdrop-filter: var(--wx-glass-blur) !important; border: 1.5px solid var(--wx-glass-border) !important; border-radius: var(--wx-radius-lg) !important; box-shadow: var(--wx-shadow-glass) !important; } /* ═══════════════════════════════════════════════════════════════ STEP CARDS / BENEFIT CARDS ═══════════════════════════════════════════════════════════════ */ .lp-step, .lp-benefit-card, .step-card, .feature-card { background: var(--wx-glass-bg) !important; backdrop-filter: var(--wx-glass-blur) !important; -webkit-backdrop-filter: var(--wx-glass-blur) !important; border: 1px solid var(--wx-glass-border) !important; border-radius: var(--wx-radius-xl) !important; box-shadow: var(--wx-shadow-glass) !important; transition: var(--wx-transition-medium) !important; } .lp-step:hover, .lp-benefit-card:hover, .step-card:hover, .feature-card:hover { transform: translateY(-6px) !important; box-shadow: var(--wx-shadow-glass-hover) !important; border-color: rgba(79, 70, 229, 0.2) !important; } .lp-step-icon, .lp-benefit-icon { transition: var(--wx-transition-medium) !important; } .lp-step:hover .lp-step-icon, .lp-benefit-card:hover .lp-benefit-icon { transform: scale(1.15) rotate(-5deg) !important; } [data-theme="dark"] .lp-step, [data-theme="dark"] .lp-benefit-card, [data-theme="dark"] .step-card, [data-theme="dark"] .feature-card { background: var(--wx-glass-bg) !important; border-color: var(--wx-glass-border) !important; } /* ═══════════════════════════════════════════════════════════════ TESTIMONIALS ═══════════════════════════════════════════════════════════════ */ .lp-testimonial { background: var(--wx-glass-bg) !important; backdrop-filter: var(--wx-glass-blur) !important; border: 1px solid var(--wx-glass-border) !important; border-radius: var(--wx-radius-xl) !important; box-shadow: var(--wx-shadow-glass) !important; transition: var(--wx-transition-medium) !important; } .lp-testimonial:hover { transform: translateY(-4px) !important; box-shadow: var(--wx-shadow-glass-hover) !important; } /* ═══════════════════════════════════════════════════════════════ FOOTER — Premium Glass ═══════════════════════════════════════════════════════════════ */ footer, .lp-footer { background: var(--wx-glass-bg-strong) !important; backdrop-filter: var(--wx-glass-blur) !important; border-top: 1px solid var(--wx-glass-border-subtle) !important; } [data-theme="dark"] footer, [data-theme="dark"] .lp-footer { background: var(--wx-glass-bg-strong) !important; } /* ═══════════════════════════════════════════════════════════════ BADGES & CHIPS ═══════════════════════════════════════════════════════════════ */ .badge, .tool-plan-badge, .lp-hero-badge, .model-chip, .lp-model-chip { background: var(--wx-glass-bg) !important; backdrop-filter: blur(8px) !important; border: 1px solid var(--wx-glass-border-subtle) !important; transition: var(--wx-transition-fast) !important; } .model-chip:hover, .lp-model-chip:hover { background: rgba(79, 70, 229, 0.15) !important; transform: translateY(-2px) !important; } /* ═══════════════════════════════════════════════════════════════ TOAST NOTIFICATIONS ═══════════════════════════════════════════════════════════════ */ .toast { background: var(--wx-glass-bg-strong) !important; backdrop-filter: var(--wx-glass-blur) !important; border: 1px solid var(--wx-glass-border) !important; border-radius: var(--wx-radius-md) !important; box-shadow: var(--wx-shadow-glass-hover) !important; } /* ═══════════════════════════════════════════════════════════════ SCROLLBAR ═══════════════════════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 10px; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #4f46e5 0%, #7c3aed 100%); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #3730a3 0%, #5b21b6 100%); } [data-theme="dark"] ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); } /* ═══════════════════════════════════════════════════════════════ SELECTION ═══════════════════════════════════════════════════════════════ */ ::selection { background: rgba(79, 70, 229, 0.2); color: var(--primary); } [data-theme="dark"] ::selection { background: rgba(79, 70, 229, 0.4); color: #a5b4fc; } /* ═══════════════════════════════════════════════════════════════ SECTION TRANSITIONS ═══════════════════════════════════════════════════════════════ */ .section { position: relative; } .section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--wx-glass-border), transparent); } /* ═══════════════════════════════════════════════════════════════ MOBILE RESPONSIVE ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .tool-card { border-radius: var(--wx-radius-lg) !important; } .tool-card:hover { transform: translateY(-4px) !important; } .lp-glass-card { border-radius: var(--wx-radius-lg) !important; } .dash-plan-card { border-radius: var(--wx-radius-lg) !important; } .lp-btn-primary, .lp-btn-secondary { width: 100%; justify-content: center; } /* Reduce blur on mobile for performance */ .nav, .mobile-menu, .card, .tool-card { backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } } @media (max-width: 480px) { :root { --wx-radius-xl: 20px; --wx-radius-2xl: 24px; } .lp-float-glass, .lp-float-badge { display: none !important; } } /* ═══════════════════════════════════════════════════════════════ LOADING STATES ═══════════════════════════════════════════════════════════════ */ .loading, .skeleton { background: linear-gradient( 90deg, var(--wx-glass-bg) 25%, rgba(79, 70, 229, 0.1) 50%, var(--wx-glass-bg) 75% ); background-size: 200% 100%; animation: wx-shimmer 1.5s ease-in-out infinite; } @keyframes wx-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ═══════════════════════════════════════════════════════════════ FOCUS STATES ═══════════════════════════════════════════════════════════════ */ *:focus-visible { outline: 2px solid var(--primary) !important; outline-offset: 3px !important; border-radius: 4px; } /* ═══════════════════════════════════════════════════════════════ WIF (WHO IT'S FOR) CARDS ═══════════════════════════════════════════════════════════════ */ .wif-card { background: var(--wx-glass-bg) !important; backdrop-filter: var(--wx-glass-blur) !important; border: 1px solid var(--wx-glass-border) !important; border-radius: var(--wx-radius-xl) !important; box-shadow: var(--wx-shadow-glass) !important; transition: var(--wx-transition-medium) !important; } .wif-card:hover, .wif-card.wif-active { transform: translateY(-4px) !important; box-shadow: var(--wx-shadow-glass-hover), var(--wx-shadow-glow) !important; border-color: var(--primary) !important; } /* ═══════════════════════════════════════════════════════════════ MODEL CARDS ═══════════════════════════════════════════════════════════════ */ .model-card { background: var(--wx-glass-bg) !important; backdrop-filter: var(--wx-glass-blur) !important; border: 1px solid var(--wx-glass-border) !important; border-radius: var(--wx-radius-lg) !important; box-shadow: var(--wx-shadow-glass) !important; transition: var(--wx-transition-medium) !important; } .model-card:hover { transform: translateY(-4px) !important; box-shadow: var(--wx-shadow-glass-hover) !important; } .model-card-featured { background: linear-gradient(145deg, rgba(238,242,255,0.95), rgba(224,231,255,0.9)) !important; border: 2px solid rgba(79, 70, 229, 0.3) !important; box-shadow: var(--wx-shadow-glass), var(--wx-shadow-glow) !important; } /* ═══════════════════════════════════════════════════════════════ FAQ SECTION ═══════════════════════════════════════════════════════════════ */ .px-faq-list, .faq-list { background: var(--wx-glass-bg) !important; backdrop-filter: var(--wx-glass-blur) !important; border: 1px solid var(--wx-glass-border) !important; border-radius: var(--wx-radius-xl) !important; box-shadow: var(--wx-shadow-glass) !important; overflow: hidden; } .px-faq-q, .faq-question { transition: var(--wx-transition-fast) !important; } .px-faq-q:hover, .faq-question:hover { background: rgba(79, 70, 229, 0.05) !important; } /* ═══════════════════════════════════════════════════════════════ SOCIAL STATS ═══════════════════════════════════════════════════════════════ */ .lp-social-stat { background: var(--wx-glass-bg) !important; backdrop-filter: var(--wx-glass-blur) !important; border: 1px solid var(--wx-glass-border) !important; border-radius: var(--wx-radius-xl) !important; box-shadow: var(--wx-shadow-glass) !important; transition: var(--wx-transition-medium) !important; } .lp-social-stat:hover { transform: translateY(-4px) scale(1.02) !important; box-shadow: var(--wx-shadow-glass-hover) !important; } /* ═══════════════════════════════════════════════════════════════ FINAL CTA SECTION ═══════════════════════════════════════════════════════════════ */ .lp-final-cta { position: relative; overflow: hidden; } .lp-final-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(124, 58, 237, 0.4) 0%, transparent 50%), radial-gradient(ellipse 40% 30% at 80% 100%, rgba(6, 182, 212, 0.3) 0%, transparent 50%); pointer-events: none; } /* ═══════════════════════════════════════════════════════════════ PAGE TRANSITIONS ═══════════════════════════════════════════════════════════════ */ body { animation: wx-page-in 0.4s var(--wx-ease-smooth); } @keyframes wx-page-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ═══════════════════════════════════════════════════════════════ SPINNER ENHANCEMENT ═══════════════════════════════════════════════════════════════ */ .spinner { border-color: rgba(79, 70, 229, 0.2) !important; border-top-color: var(--primary) !important; box-shadow: 0 0 10px rgba(79, 70, 229, 0.3) !important; } /* ═══════════════════════════════════════════════════════════════ TOOL PAGE SPECIFIC ═════════════════════════════════════════════���═════════════════ */ .tool-page .card, .tool-page .tool-card { background: var(--wx-glass-bg) !important; backdrop-filter: var(--wx-glass-blur) !important; border: 1px solid var(--wx-glass-border) !important; box-shadow: var(--wx-shadow-glass) !important; } /* ═══════════════════════════════════════════════════════════════ AUTH PAGES (LOGIN/SIGNUP) ═══════════════════════════════════════════════════════════════ */ .auth-card, .login-card, .signup-card { background: var(--wx-glass-bg) !important; backdrop-filter: var(--wx-glass-blur-strong) !important; -webkit-backdrop-filter: var(--wx-glass-blur-strong) !important; border: 1px solid var(--wx-glass-border) !important; border-radius: var(--wx-radius-2xl) !important; box-shadow: var(--wx-shadow-glass-hover) !important; } /* ═══════════════════════════════════════════════════════════════ PROFILE DROPDOWN ═══════════════════════════════════════════════════════════════ */ .profile-dropdown { background: var(--wx-glass-bg-strong) !important; backdrop-filter: var(--wx-glass-blur-strong) !important; -webkit-backdrop-filter: var(--wx-glass-blur-strong) !important; border: 1px solid var(--wx-glass-border) !important; border-radius: var(--wx-radius-lg) !important; box-shadow: var(--wx-shadow-glass-hover) !important; } .profile-dropdown a, .profile-dropdown button { transition: var(--wx-transition-fast) !important; border-radius: var(--wx-radius-sm) !important; } .profile-dropdown a:hover, .profile-dropdown button:hover { background: rgba(79, 70, 229, 0.1) !important; } /* ═══════════════════════════════════════════════════════════════ LIGHT MODE — Form Input Fixes Stronger borders, better contrast, visible focus states ═══════════════════════════════════════════════════════════════ */ html[data-theme="light"] .form-input, html[data-theme="light"] .form-select, html[data-theme="light"] textarea, html[data-theme="light"] input[type="text"], html[data-theme="light"] input[type="email"], html[data-theme="light"] input[type="password"], html[data-theme="light"] select, html:not([data-theme="dark"]) .form-input, html:not([data-theme="dark"]) .form-select, html:not([data-theme="dark"]) textarea, html:not([data-theme="dark"]) input[type="text"], html:not([data-theme="dark"]) input[type="email"], html:not([data-theme="dark"]) input[type="password"], html:not([data-theme="dark"]) select { background: rgba(255, 255, 255, 0.95) !important; border: 1.5px solid #d1d5db !important; color: #1f2937 !important; } html[data-theme="light"] .form-input::placeholder, html[data-theme="light"] .form-select::placeholder, html[data-theme="light"] textarea::placeholder, html[data-theme="light"] input::placeholder, html:not([data-theme="dark"]) .form-input::placeholder, html:not([data-theme="dark"]) .form-select::placeholder, html:not([data-theme="dark"]) textarea::placeholder, html:not([data-theme="dark"]) input::placeholder { color: #6b7280 !important; opacity: 1 !important; } html[data-theme="light"] .form-input:focus, html[data-theme="light"] .form-select:focus, html[data-theme="light"] textarea:focus, html[data-theme="light"] input[type="text"]:focus, html[data-theme="light"] input[type="email"]:focus, html[data-theme="light"] input[type="password"]:focus, html[data-theme="light"] select:focus, html:not([data-theme="dark"]) .form-input:focus, html:not([data-theme="dark"]) .form-select:focus, html:not([data-theme="dark"]) textarea:focus, html:not([data-theme="dark"]) input[type="text"]:focus, html:not([data-theme="dark"]) input[type="email"]:focus, html:not([data-theme="dark"]) input[type="password"]:focus, html:not([data-theme="dark"]) select:focus { border-color: #4f46e5 !important; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15), 0 1px 3px rgba(0, 0, 0, 0.08) !important; outline: none !important; } /* Light mode form labels */ html[data-theme="light"] .form-label, html:not([data-theme="dark"]) .form-label { color: #374151 !important; font-weight: 500 !important; } /* Light mode auth card */ html[data-theme="light"] .auth-card, html[data-theme="light"] .auth-card.card, html:not([data-theme="dark"]) .auth-card, html:not([data-theme="dark"]) .auth-card.card { background: rgba(255, 255, 255, 0.98) !important; border: 1px solid #e5e7eb !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1), 0 20px 50px -12px rgba(0, 0, 0, 0.15) !important; } /* Light mode Google button */ html[data-theme="light"] .google-btn, html:not([data-theme="dark"]) .google-btn { background: #ffffff !important; border: 1.5px solid #d1d5db !important; color: #1f2937 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important; transition: all 0.2s ease !important; } html[data-theme="light"] .google-btn:hover, html:not([data-theme="dark"]) .google-btn:hover { background: #f9fafb !important; border-color: #9ca3af !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; } /* Light mode auth header text */ html[data-theme="light"] .auth-header h1, html:not([data-theme="dark"]) .auth-header h1 { color: #111827 !important; } html[data-theme="light"] .auth-header p, html:not([data-theme="dark"]) .auth-header p { color: #6b7280 !important; } /* Light mode auth divider */ html[data-theme="light"] .auth-divider, html:not([data-theme="dark"]) .auth-divider { color: #9ca3af !important; } html[data-theme="light"] .auth-divider::before, html[data-theme="light"] .auth-divider::after, html:not([data-theme="dark"]) .auth-divider::before, html:not([data-theme="dark"]) .auth-divider::after { background: #e5e7eb !important; } /* Light mode auth footer */ html[data-theme="light"] .auth-footer, html:not([data-theme="dark"]) .auth-footer { color: #6b7280 !important; } html[data-theme="light"] .auth-footer a, html:not([data-theme="dark"]) .auth-footer a { color: #4f46e5 !important; } /* Light mode password toggle */ html[data-theme="light"] .pw-toggle, html:not([data-theme="dark"]) .pw-toggle { color: #6b7280 !important; } html[data-theme="light"] .pw-toggle:hover, html:not([data-theme="dark"]) .pw-toggle:hover { color: #374151 !important; } /* Light mode checkbox */ html[data-theme="light"] input[type="checkbox"], html:not([data-theme="dark"]) input[type="checkbox"] { accent-color: #4f46e5 !important; border: 1.5px solid #d1d5db !important; } /* Light mode forgot password link */ html[data-theme="light"] .forgot-link, html:not([data-theme="dark"]) .forgot-link { color: #4f46e5 !important; } /* Light mode password wrapper border fix */ html[data-theme="light"] .pw-wrap, html:not([data-theme="dark"]) .pw-wrap { border: none !important; } html[data-theme="light"] .pw-wrap .form-input, html[data-theme="light"] .pw-wrap .pw-input, html:not([data-theme="dark"]) .pw-wrap .form-input, html:not([data-theme="dark"]) .pw-wrap .pw-input { border: 1.5px solid #d1d5db !important; border-radius: 10px !important; } /* ═══════════════════════════════════════════════════════════════ LOCAL SERVER WARNING BANNER ═══════════════════════════════════════════════════════════════ */ .wx-local-server-warning { display: none; background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border: 1px solid #f59e0b; border-radius: 8px; padding: 10px 16px; margin-bottom: 16px; font-size: 0.85rem; color: #92400e; text-align: center; animation: wx-pulse-warning 2s ease-in-out infinite; } .wx-local-server-warning svg { display: inline-block; vertical-align: middle; margin-right: 6px; width: 16px; height: 16px; } @keyframes wx-pulse-warning { 0%, 100% { opacity: 1; } 50% { opacity: 0.85; } } [data-theme="dark"] .wx-local-server-warning { background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(245, 158, 11, 0.2) 100%); border-color: rgba(245, 158, 11, 0.5); color: #fbbf24; } /* ═══════════════════════════════════════════════════════════════ LIGHT MODE — TEXT VISIBILITY & BUTTON FIXES Fixes white-on-white text issues in light theme ═══════════════════════════════════════════════════════════════ */ /* Fix: "Watch How It Works" button — hero bg is always purple, so always white text+icon */ .lp-hero .lp-btn-secondary { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: 1.5px solid rgba(255, 255, 255, 0.5) !important; background: rgba(255, 255, 255, 0.15) !important; backdrop-filter: blur(8px) !important; } .lp-hero .lp-btn-secondary:hover { background: rgba(255, 255, 255, 0.25) !important; border-color: rgba(255, 255, 255, 0.7) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .lp-hero .lp-btn-secondary svg { color: #ffffff !important; } .lp-hero .lp-btn-secondary svg circle { stroke: #ffffff !important; } .lp-hero .lp-btn-secondary svg path { fill: #ffffff !important; stroke: none !important; } /* Exception: watch play icon always black circle, white arrow */ .lp-hero .lp-btn-secondary .watch-play-icon circle { fill: #000000 !important; stroke: none !important; } .lp-hero .lp-btn-secondary .watch-play-icon path { fill: #ffffff !important; stroke: none !important; } /* Fix: ghost-white button outside hero in light mode */ html:not([data-theme="dark"]) .lp-btn-ghost-white, html[data-theme="light"] .lp-btn-ghost-white { background: rgba(79, 70, 229, 0.08) !important; color: #4f46e5 !important; border-color: rgba(79, 70, 229, 0.3) !important; } html:not([data-theme="dark"]) .lp-btn-ghost-white:hover, html[data-theme="light"] .lp-btn-ghost-white:hover { background: rgba(79, 70, 229, 0.15) !important; color: #3730a3 !important; } /* Fix: section titles & subtitles — ensure readable in light mode */ html:not([data-theme="dark"]) .section-title, html[data-theme="light"] .section-title { color: var(--text, #1c1917) !important; } html:not([data-theme="dark"]) .section-sub, html[data-theme="light"] .section-sub { color: var(--text-muted, #57534e) !important; } /* Fix: hero speed line text in light mode */ html:not([data-theme="dark"]) .lp-hero-speed-line, html[data-theme="light"] .lp-hero-speed-line { color: rgba(255, 255, 255, 0.85) !important; } /* Fix: pricing plan cards text in light mode */ html:not([data-theme="dark"]) .plan-card, html[data-theme="light"] .plan-card { color: var(--text, #1c1917) !important; } html:not([data-theme="dark"]) .plan-card h3, html[data-theme="light"] .plan-card h3, html:not([data-theme="dark"]) .plan-card .plan-name, html[data-theme="light"] .plan-card .plan-name { color: var(--text, #1c1917) !important; } html:not([data-theme="dark"]) .plan-price, html[data-theme="light"] .plan-price { color: var(--text, #1c1917) !important; } html:not([data-theme="dark"]) .plan-desc, html[data-theme="light"] .plan-desc { color: var(--text-muted, #57534e) !important; } html:not([data-theme="dark"]) .plan-feature, html[data-theme="light"] .plan-feature { color: var(--text-muted, #57534e) !important; } /* Fix: tool cards text in light mode */ html:not([data-theme="dark"]) .tool-card h3, html[data-theme="light"] .tool-card h3, html:not([data-theme="dark"]) .tool-card p, html[data-theme="light"] .tool-card p { color: var(--text, #1c1917) !important; } /* Fix: step cards / benefit cards text in light mode */ html:not([data-theme="dark"]) .lp-step, html[data-theme="light"] .lp-step, html:not([data-theme="dark"]) .lp-benefit-card, html[data-theme="light"] .lp-benefit-card, html:not([data-theme="dark"]) .step-card, html[data-theme="light"] .step-card, html:not([data-theme="dark"]) .feature-card, html[data-theme="light"] .feature-card { color: var(--text, #1c1917) !important; } html:not([data-theme="dark"]) .lp-step h3, html[data-theme="light"] .lp-step h3, html:not([data-theme="dark"]) .lp-benefit-card h3, html[data-theme="light"] .lp-benefit-card h3, html:not([data-theme="dark"]) .step-card h3, html[data-theme="light"] .step-card h3, html:not([data-theme="dark"]) .feature-card h3, html[data-theme="light"] .feature-card h3 { color: var(--text, #1c1917) !important; } html:not([data-theme="dark"]) .lp-step p, html[data-theme="light"] .lp-step p, html:not([data-theme="dark"]) .lp-benefit-card p, html[data-theme="light"] .lp-benefit-card p, html:not([data-theme="dark"]) .step-card p, html[data-theme="light"] .step-card p, html:not([data-theme="dark"]) .feature-card p, html[data-theme="light"] .feature-card p { color: var(--text-muted, #57534e) !important; } /* Fix: glass cards — text inside should be readable in light mode */ /* Already handled by glass-fix.css */ /* merged into .lp-hero .lp-btn-secondary above */ /* ── Premium "Watch How It Works" button upgrade ────────────── */ /* Make it look premium like a pill button with icon */ .lp-btn-secondary { font-weight: 600 !important; letter-spacing: -0.01em !important; } /* ═══════════════════════════════════════════════════════════════ PREMIUM BUTTON UPGRADE — All buttons get glass shine ═══════════════════════════════════════════════════════════════ */ .btn-primary { background: var(--wx-gradient-primary) !important; box-shadow: 0 4px 20px rgba(79, 70, 229, 0.35), 0 0 0 1px rgba(255,255,255,0.1) inset !important; transition: all 0.2s var(--wx-ease-smooth) !important; position: relative; overflow: hidden; } .btn-primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%); opacity: 0; transition: opacity 0.2s; border-radius: inherit; pointer-events: none; } .btn-primary:hover { transform: translateY(-2px) scale(1.01) !important; box-shadow: 0 8px 28px rgba(79, 70, 229, 0.5), 0 0 0 1px rgba(255,255,255,0.15) inset !important; } .btn-primary:hover::after { opacity: 1; } /* Outline / ghost buttons — premium glass look */ html:not([data-theme="dark"]) .btn-outline, html[data-theme="light"] .btn-outline { border-color: rgba(79, 70, 229, 0.4) !important; color: #4f46e5 !important; background: rgba(79, 70, 229, 0.05) !important; } html:not([data-theme="dark"]) .btn-outline:hover, html[data-theme="light"] .btn-outline:hover { background: rgba(79, 70, 229, 0.12) !important; border-color: rgba(79, 70, 229, 0.6) !important; }