/* Zynoloop — public marketing pages (landing, pricing, 404). Scoped to .zl-marketing on so dashboard styles stay isolated. */ /* ── Custom scrollbar (WebKit + Firefox) ──────────────────────────────── */ /* Global selectors here intentionally — marketing.css loads after app.css so same-specificity rules here win by cascade order, restoring the indigo scrollbar for all public pages (marketing + blog). */ html { scrollbar-width: thin; scrollbar-color: #6366f1 transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #6366f1, #4f46e5); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #818cf8, #6366f1); } ::-webkit-scrollbar-corner { background: transparent; } /* ── Page loader ──────────────────────────────────────────────────────── */ #zl-loader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #1e1b4b 0%, #0b1020 70%); transition: opacity 0.5s ease; } #zl-loader.is-done { opacity: 0; pointer-events: none; } /* Launch promotion shared by every page using the public layout. */ .zl-launch-offer { position: relative; z-index: 41; display: flex; min-height: 42px; align-items: center; justify-content: center; gap: 0.55rem; overflow: hidden; padding: 0.55rem 1rem; background: radial-gradient( circle at 16% 50%, rgba(192, 132, 252, 0.48), transparent 26% ), radial-gradient( circle at 84% 50%, rgba(96, 165, 250, 0.38), transparent 26% ), linear-gradient(100deg, #312e81, #4f46e5 48%, #7c3aed); color: #ffffff; font-size: 0.8125rem; font-weight: 500; line-height: 1.25; text-align: center; transition: filter 0.2s ease; } .zl-launch-offer::before { position: absolute; inset: 0; background: linear-gradient( 110deg, transparent 34%, rgba(255, 255, 255, 0.22) 50%, transparent 66% ); content: ""; transform: translateX(-100%); animation: zl-offer-shine 4s ease-in-out infinite; } .zl-launch-offer:hover { color: #ffffff !important; filter: brightness(1.08); } .zl-launch-offer > span { position: relative; } .zl-launch-offer__spark { color: #fde68a; font-size: 1rem; } .zl-launch-offer__code { border: 1px dashed rgba(255, 255, 255, 0.7); border-radius: 0.375rem; padding: 0.15rem 0.38rem; background: rgba(15, 23, 42, 0.2); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; } .zl-launch-offer__cta { font-weight: 700; white-space: nowrap; } @keyframes zl-offer-shine { 0%, 62% { transform: translateX(-100%); } 80%, 100% { transform: translateX(100%); } } @media (max-width: 640px) { .zl-launch-offer { gap: 0.38rem; min-height: 48px; padding: 0.45rem 0.75rem; font-size: 0.72rem; } .zl-launch-offer__spark, .zl-launch-offer__cta { display: none; } .zl-launch-offer__code { padding: 0.12rem 0.3rem; font-size: 0.68rem; } } .zl-loader-mark { width: 200px; height: 50px; } .zl-loader-text { fill: transparent; stroke: #c7d2fe; stroke-width: 1.4; font-family: "Inter", system-ui, sans-serif; font-size: 44px; font-weight: 800; letter-spacing: -1.5px; stroke-dasharray: 600; stroke-dashoffset: 600; animation: zl-draw 1.5s ease-out forwards, zl-fill 0.5s ease 0.9s forwards; } @keyframes zl-draw { to { stroke-dashoffset: 0; } } @keyframes zl-fill { to { fill: #fff; stroke-width: 0; } } /* ── Hero dark gradient with animated grid + glow ─────────────────────── */ .zl-hero { position: relative; overflow: hidden; background: radial-gradient( 1100px 500px at 50% -10%, rgba(99, 102, 241, 0.35), transparent 60% ), radial-gradient( 700px 400px at 90% 30%, rgba(168, 85, 247, 0.18), transparent 60% ), radial-gradient( 700px 400px at 10% 60%, rgba(56, 189, 248, 0.14), transparent 60% ), linear-gradient(180deg, #0b1020 0%, #0f172a 100%); color: #e5e7eb; } .zl-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient( ellipse at 50% 30%, #000 30%, transparent 75% ); animation: zl-grid-drift 30s linear infinite; pointer-events: none; } @keyframes zl-grid-drift { from { background-position: 0 0, 0 0; } to { background-position: 56px 56px, 56px 56px; } } .zl-hero-glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(110px); opacity: 0.55; pointer-events: none; } .zl-inner-hero { position: relative; overflow: hidden; background: radial-gradient( 820px 260px at 50% -20%, rgba(99, 102, 241, 0.18), transparent 68% ), radial-gradient( 520px 220px at 82% 10%, rgba(168, 85, 247, 0.1), transparent 64% ), radial-gradient( 520px 220px at 18% 22%, rgba(56, 189, 248, 0.08), transparent 64% ), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); color: #1e293b; border-bottom: 1px solid #e2e8f0; padding-top: 40px; padding-bottom: 40px; } .zl-inner-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(99, 102, 241, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 102, 241, 0.08) 1px, transparent 1px), linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0)); background-size: 48px 48px, 48px 48px, 100% 100%; mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 72%); -webkit-mask-image: radial-gradient( ellipse at 50% 0%, #000 0%, transparent 72% ); pointer-events: none; } .zl-inner-hero::after { display: none; } .zl-inner-hero > .zl-hero-glow { display: none; } .zl-inner-hero > .relative { max-width: 68rem; padding-top: 1.25rem; padding-bottom: 1.5rem; } .zl-inner-hero h1 { margin-top: 0.625rem; font-size: clamp(1.65rem, 3vw, 3.5rem); line-height: 1.15; } .zl-inner-hero p { margin-top: 0.625rem; font-size: 0.95rem; line-height: 1.55; } .zl-inner-hero .mt-8 { margin-top: 0.875rem; } .zl-inner-hero .mt-6 { margin-top: 0.625rem; } .zl-inner-hero .mb-6 { margin-bottom: 0.625rem; } .zl-inner-hero > .relative > span.inline-flex { padding: 0.25rem 0.75rem; font-size: 0.75rem; } .zl-inner-hero .mt-8 a { border-radius: 0.625rem; padding: 0.55rem 0.9rem; font-size: 0.875rem; box-shadow: none; } .zl-inner-hero .mt-4 { margin-top: 0.5rem; } .zl-inner-hero .zl-breadcrumb { color: #64748b; } .zl-inner-hero .zl-breadcrumb a { color: #4f46e5; font-weight: 600; transition: color 0.2s ease; } .zl-inner-hero .zl-breadcrumb a:hover { color: #3730a3; } .zl-inner-hero .zl-gradient-text { background: linear-gradient(90deg, #4758f3 0%, #a457f1 50%, #ed4fa1 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ── Hero dashboard mockup animation ──────────────────────────────────── */ .zl-mockup-card { transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.6s; } .zl-mockup-line { transform-origin: left center; animation: zl-pulse 2.4s ease-in-out infinite; } @keyframes zl-pulse { 0%, 100% { opacity: 0.5; transform: scaleX(0.9); } 50% { opacity: 1; transform: scaleX(1); } } .zl-dot-anim { animation: zl-bounce 1.4s ease-in-out infinite; } @keyframes zl-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* ── Feature bento card hover lift ────────────────────────────────────── */ .zl-feature-card { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .zl-feature-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -20px rgba(79, 70, 229, 0.35); border-color: rgba(99, 102, 241, 0.55); } /* ── Problem cards (dark) ─────────────────────────────────────────────── */ .zl-problem-card { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0) ); border: 1px solid rgba(255, 255, 255, 0.08); transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease; } .zl-problem-card:hover { transform: translateY(-3px); border-color: rgba(244, 63, 94, 0.35); } /* ── How-it-works connector line ──────────────────────────────────────── */ .zl-step-line { background: linear-gradient( 90deg, transparent, #c7d2fe 30%, #c7d2fe 70%, transparent ); } /* ── Comparison table ─────────────────────────────────────────────────── */ .zl-compare th, .zl-compare td { border-bottom: 1px solid #e5e7eb; } .zl-compare .col-zl { background: #eef2ff; } .zl-compare th.col-zl, .zl-compare td.col-zl { background: linear-gradient(180deg, #eef2ff, #e0e7ff); } /* ── Final CTA section ────────────────────────────────────────────────── */ .zl-cta-dark { background: radial-gradient( 800px 400px at 20% 100%, rgba(99, 102, 241, 0.35), transparent 60% ), radial-gradient( 700px 350px at 80% 0%, rgba(168, 85, 247, 0.25), transparent 60% ), #0b1020; } /* ── Tiny utilities ───────────────────────────────────────────────────── */ .zl-gradient-text { background: linear-gradient(90deg, #4758f3 0%, #a457f1 50%, #ed4fa1 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .zl-shadow-soft { box-shadow: 0 30px 60px -30px rgba(15, 23, 42, 0.25); } /* ── 404 page floating orbs ───────────────────────────────────────────── */ .zl-404-orb { position: absolute; border-radius: 50%; filter: blur(60px); animation: zl-float 8s ease-in-out infinite; } @keyframes zl-float { 0%, 100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-30px) translateX(20px); } } /* ── Demo product window ──────────────────────────────────────────────── */ .zl-cursor { display: inline-block; width: 2px; height: 14px; background: #6366f1; margin-left: 2px; vertical-align: middle; animation: zl-blink 0.8s step-start infinite; } @keyframes zl-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ── Reduced motion overrides ─────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .zl-hero::before, .zl-mockup-line, .zl-dot-anim, .zl-404-orb, .zl-loader-text, .zl-cursor { animation: none !important; } #zl-loader { display: none; } } /* Light marketing theme overrides. Most public pages were authored with dark Tailwind utilities, so this scoped layer flips them without touching the app. */ .zl-marketing { background: #ffffff; color: #1e293b; } .zl-marketing .zl-marketing-nav, .zl-marketing .zl-marketing-footer { background: #ffffff; color: #475569; } .zl-marketing .zl-marketing-nav { box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08); } .zl-marketing .zl-marketing-nav nav, .zl-marketing .zl-marketing-nav .text-slate-300, .zl-marketing .zl-marketing-nav .py-2.text-slate-300 { color: #475569; } .zl-marketing .zl-marketing-nav a:hover { color: #4f46e5; } .start-button:hover { color: #ffffff !important; } .zl-marketing .zl-marketing-nav .bg-slate-900, .zl-marketing .zl-marketing-nav .bg-slate-950 { background: #ffffff; } .zl-marketing .zl-marketing-nav .border-white\/10 { border-color: #e2e8f0; } .zl-marketing .zl-marketing-nav .bg-white\/5:hover, .zl-marketing .zl-marketing-nav .hover\:bg-white\/5:hover { background: #eef2ff; } #zl-nav-auth-desktop .white-color-a:hover { color: #ffffff !important; } .zl-marketing .zl-hero { background: radial-gradient( 900px 440px at 50% -10%, rgba(99, 102, 241, 0.18), transparent 60% ), radial-gradient( 620px 360px at 90% 25%, rgba(168, 85, 247, 0.1), transparent 65% ), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); color: #1e293b; } .zl-marketing .zl-hero::before { background-image: linear-gradient(rgba(99, 102, 241, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 102, 241, 0.1) 1px, transparent 1px); } .zl-marketing .zl-hero-glow { opacity: 0.25; } .zl-marketing .bg-slate-950, .zl-marketing .bg-slate-900 { background-color: #ffffff; } .zl-marketing .bg-slate-800 { background-color: #e2e8f0; } .zl-marketing .bg-white\/5, .zl-marketing .bg-white\/\[0\.07\] { background-color: #ffffff; } .zl-marketing .border-white\/10, .zl-marketing .border-white\/15 { border-color: #e2e8f0; } .zl-marketing .bg-white\/10:hover, .zl-marketing .hover\:bg-white\/5:hover, .zl-marketing .hover\:bg-white\/10:hover, .zl-marketing .hover\:bg-white\/\[0\.07\]:hover { background-color: #eef2ff; } .zl-marketing :is(h1, h2, h3, h4, dt, p, strong).text-white, .zl-marketing .bg-slate-950 :is(h1, h2, h3, h4, dt, strong), .zl-marketing .zl-cta-dark :is(h1, h2, h3, h4, dt, strong), .zl-marketing [data-plan-card] :is(h3, span).text-white { color: #0f172a; } .tag-pricing { color: #ffffff !important; } .zl-marketing .text-slate-300, .zl-marketing .text-slate-400 { color: #475569; } .zl-marketing .text-slate-500 { color: #64748b; } .zl-marketing .text-indigo-300, .zl-marketing .text-indigo-400 { color: #4f46e5; } .zl-marketing .text-emerald-400 { color: #059669; } .zl-marketing a.text-white:not(.bg-indigo-600):not(.bg-emerald-600), .zl-marketing a.border-white\/15 { color: #4338ca; border-color: #c7d2fe; } .zl-marketing a.text-white:not(.bg-indigo-600):not(.bg-emerald-600):hover, .zl-marketing a.border-white\/15:hover { background: #eef2ff; color: #3730a3; } .zl-marketing .zl-problem-card, .zl-marketing .zl-feature-card, .zl-marketing .bg-slate-950 [style*="rgba(255,255,255,.04)"], .zl-marketing .bg-slate-950 [style*="rgba(255,255,255,.03)"], .zl-marketing .bg-slate-950 [style*="rgba(255,255,255,.05)"] { background: #ffffff !important; border-color: #e2e8f0 !important; box-shadow: 0 18px 45px -28px rgba(15, 23, 42, 0.35); } .zl-marketing .zl-problem-card:hover, .zl-marketing .zl-feature-card:hover { border-color: rgba(79, 70, 229, 0.35); } .zl-marketing .zl-cta-dark { background: radial-gradient( 760px 360px at 20% 100%, rgba(99, 102, 241, 0.14), transparent 62% ), radial-gradient( 640px 320px at 80% 0%, rgba(168, 85, 247, 0.1), transparent 62% ), #f8fafc; color: #1e293b; } .zl-marketing .zl-marketing-footer { border-top: 1px solid #e2e8f0; } .zl-marketing .zl-marketing-footer h3, .zl-marketing .zl-marketing-footer .text-white { color: #0f172a; } .zl-marketing .zl-marketing-footer .text-slate-300, .zl-marketing .zl-marketing-footer .text-slate-400 { color: #64748b; } .zl-marketing .zl-marketing-footer .border-white\/10, .zl-marketing .zl-marketing-footer .border-t { border-color: #e2e8f0; } .zl-marketing .zl-marketing-footer a:hover { color: #4f46e5; } .zl-marketing .prose-legal h2 { color: #0f172a !important; border-bottom-color: #e2e8f0 !important; } .zl-marketing .prose-legal h3, .zl-marketing .prose-legal strong { color: #334155 !important; } .zl-marketing .prose-legal p, .zl-marketing .prose-legal li { color: #475569 !important; } .zl-marketing .prose-legal a { color: #4f46e5 !important; } .zl-marketing .zl-hero [style*="#0D1117"] .text-white { color: #ffffff; } .zl-marketing .zl-hero [style*="#0D1117"] .text-slate-300 { color: #cbd5e1; } .zl-marketing .zl-hero [style*="#0D1117"] .text-slate-400 { color: #94a3b8; } .zl-marketing .zl-hero [style*="#0D1117"] .text-slate-500 { color: #64748b; } .zl-marketing .zl-hero [style*="#0D1117"] .text-slate-600 { color: #475569; }