/* ===== Font Faces ===== */ /* Note: Inter is loaded via Google Fonts in index.html This eliminates local font 404s on Vercel */ /* ===== CSS Variables ===== */ :root { --charcoal: #0E0E0E; --burnt-orange: #C45C26; --coral: #E07A5F; --text-primary: #F6F6F2; --text-muted: #6A6A6A; --white: #FFFFFF; --border-white: rgba(255, 255, 255, 0.1); /* Kimi/Zendo pastel palette */ --zendo-mist: #F4F6FA; --zendo-peach: #F6B7B0; --zendo-periwinkle: #7E8CFF; --zendo-lavender: #C9C7FF; --zendo-mint: #B9E8D9; --zendo-butter: #F8E9A0; --zendo-sky: #A8D1F7; --zendo-text: #141414; --zendo-text-secondary: #6D6D6D; } /* ===== Reset & Base ===== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: var(--charcoal); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ===== Kimi Layout (light mist + floating shapes) ===== */ .kimi-layout { background-color: var(--zendo-mist); color: var(--zendo-text); } .kimi-layout .grain-overlay { opacity: 0.04; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); } .kimi-layout .logo-img { filter: brightness(0); } /* Floating shapes layer */ .floating-shapes { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; } .floating-shapes .shape-wrap { position: absolute; will-change: transform; } .floating-shapes .shape { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0.85; } .floating-shapes .shape-1 { top: 10%; left: -5%; width: 22vmin; height: 22vmin; } .floating-shapes .shape-2 { top: 35%; right: -3%; width: 18vmin; height: 18vmin; } .floating-shapes .shape-3 { top: 58%; left: -2%; width: 16vmin; height: 16vmin; } .floating-shapes .shape-4 { bottom: 25%; right: -4%; width: 20vmin; height: 20vmin; } .floating-shapes .shape-5 { bottom: 10%; left: 8%; width: 12vmin; height: 12vmin; } .floating-shapes .shape-6 { top: 15%; right: 15%; width: 14vmin; height: 14vmin; } @keyframes float { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(8px, -20px); } 50% { transform: translate(-6px, -28px); } 75% { transform: translate(10px, -14px); } } @keyframes float-slow { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(-12px, -18px) rotate(4deg); } 66% { transform: translate(10px, -26px) rotate(-5deg); } } .animate-float { animation: float 5s ease-in-out infinite; } .animate-float-slow { animation: float-slow 7s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .animate-float, .animate-float-slow { animation: none; } } /* Scroll hint arrow */ .scroll-hint-arrow { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 50; color: var(--zendo-periwinkle); filter: drop-shadow(0 4px 12px rgba(126, 140, 255, 0.4)) drop-shadow(0 0 24px rgba(126, 140, 255, 0.2)); transition: opacity 0.5s ease; text-decoration: none; } .scroll-hint-arrow.visible { opacity: 1 !important; pointer-events: auto !important; animation: scroll-hint-jump 1.2s ease-in-out infinite; } .kimi-layout .scroll-hint-arrow { color: var(--zendo-periwinkle); filter: drop-shadow(0 4px 12px rgba(126, 140, 255, 0.4)) drop-shadow(0 0 24px rgba(126, 140, 255, 0.2)); } @keyframes scroll-hint-jump { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-10px); } } @media (prefers-reduced-motion: reduce) { .scroll-hint-arrow.visible { animation: none; } } /* Kimi layout typography & colors */ .kimi-layout .hero-title, .kimi-layout .validation-line, .kimi-layout .reveal-title, .kimi-layout .commitment-title { color: var(--zendo-text); } .kimi-layout .hero-subtitle, .kimi-layout .reveal-description, .kimi-layout .form-note, .kimi-layout .footer p { color: var(--zendo-text-secondary); } .kimi-layout .navbar.scrolled { background-color: rgba(244, 246, 250, 0.9); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } .kimi-layout .logo-fallback { color: var(--zendo-text); } .kimi-layout .email-input { border-color: rgba(20, 20, 20, 0.15); color: var(--zendo-text); } .kimi-layout .email-input::placeholder { color: var(--zendo-text-secondary); } .kimi-layout .email-input:focus { border-color: var(--zendo-peach); box-shadow: 0 0 0 1px var(--zendo-peach); } .kimi-layout .hero-cta, .kimi-layout .submit-btn { background-color: var(--zendo-peach); color: var(--zendo-text); box-shadow: 0 10px 32px rgba(246, 183, 176, 0.4); } .kimi-layout .hero-cta:hover, .kimi-layout .submit-btn:hover:not(:disabled) { background-color: #f4a59d; box-shadow: 0 14px 40px rgba(246, 183, 176, 0.5); } .kimi-layout .hero-cta:focus, .kimi-layout .submit-btn:focus { box-shadow: 0 0 0 2px var(--zendo-mist), 0 0 0 4px var(--zendo-peach); } .kimi-layout .success-text { color: var(--zendo-peach); } .kimi-layout .footer { border-top-color: rgba(20, 20, 20, 0.1); } /* Kimi display typography (larger hero) */ .kimi-layout .hero-title { font-size: clamp(2rem, 6.2vw, 4.5rem); line-height: 0.95; letter-spacing: -0.02em; margin-bottom: 1.75rem; } @media (min-width: 768px) { .kimi-layout .hero-title { margin-bottom: 2rem; } } .kimi-layout .hero-subtitle { margin-bottom: 2.5rem; } @media (min-width: 768px) { .kimi-layout .hero-subtitle { margin-bottom: 3rem; } } .kimi-layout .reveal-title { font-size: clamp(1.75rem, 4.5vw, 3rem); } /* ===== Grain Overlay (default) ===== */ .grain-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 5; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); } /* ===== Navigation ===== */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: all 0.5s ease; background-color: transparent; padding: 0.5rem 0; } .navbar.scrolled { background-color: rgba(14, 14, 14, 0.9); backdrop-filter: blur(10px); padding: 0.25rem 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .nav-container { width: 100%; height: 2rem; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; } .nav-journey-btn { margin-left: auto; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; color: var(--text-primary); text-decoration: none; border: 1px solid var(--border-white); border-radius: 9999px; transition: color 0.2s ease, border-color 0.2s ease; } .nav-journey-btn:hover, .nav-journey-btn:focus, .nav-journey-btn:active { color: var(--burnt-orange); border-color: var(--burnt-orange); } .kimi-layout .nav-journey-btn { color: var(--zendo-text); border-color: rgba(20, 20, 20, 0.2); } .kimi-layout .nav-journey-btn:hover, .kimi-layout .nav-journey-btn:focus, .kimi-layout .nav-journey-btn:active { color: var(--burnt-orange); border-color: var(--burnt-orange); } .logo { display: flex; align-items: center; text-decoration: none; transition: opacity 0.2s ease; } .logo:hover { opacity: 0.8; } .logo-img { height: 2rem; width: auto; } .logo-fallback { display: none; font-size: 1.5rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; } /* ===== Main Viewport ===== */ .viewport { min-height: 100vh; position: relative; z-index: 2; } .content-container { max-width: 48rem; /* 3xl = 768px */ margin: 0 auto; padding: 0 1.5rem 8rem; } /* Kimi-style: more breathing room, viewport-based padding */ .kimi-layout .content-container { max-width: 56rem; padding: 0 1.5rem 6rem; } @media (min-width: 768px) { .kimi-layout .content-container { padding-left: 8vw; padding-right: 8vw; } } @media (min-width: 1024px) { .kimi-layout .content-container { padding-left: 10vw; padding-right: 10vw; padding-bottom: 6rem; } } /* ===== Hero Load Animation ===== */ @keyframes hero-load-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } .hero-load { opacity: 0; animation: hero-load-in 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .hero-load-2 { animation-delay: 0.6s; } .hero-load-3 { animation-delay: 1.25s; } /* ===== Reveal Animations ===== */ .reveal-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity 0.9s ease-out, transform 0.9s ease-out; } .reveal-on-scroll.revealed { opacity: 1; transform: translateY(0); } /* Kimi-style: more pronounced section transitions */ .kimi-layout .reveal-on-scroll { transform: translateY(32px); transition: opacity 1s ease-out, transform 1s cubic-bezier(0.22, 1, 0.36, 1); } .kimi-layout .reveal-on-scroll.revealed { transform: translateY(0); } /* ===== Hero Section ===== */ .hero-section { padding-top: 5rem; padding-bottom: 7rem; text-align: center; } @media (min-width: 640px) { .hero-section { padding-top: 7rem; padding-bottom: 9rem; } } /* Kimi-style: hero fills first viewport, clear transition into next section */ .kimi-layout .hero-section { min-height: 88vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 6rem; padding-bottom: 6rem; text-align: center; } @media (min-width: 640px) { .kimi-layout .hero-section { min-height: 90vh; padding-top: 8rem; padding-bottom: 8rem; } } @media (min-width: 1024px) { .kimi-layout .hero-section { padding-top: 10rem; padding-bottom: 10rem; } } .hero-title { font-size: 2.25rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 1.5rem; max-width: 42rem; margin-left: auto; margin-right: auto; } @media (min-width: 640px) { .hero-title { font-size: 3rem; } } @media (min-width: 768px) { .hero-title { font-size: 3.75rem; } } .hero-subtitle { font-size: 1.125rem; color: var(--text-muted); line-height: 1.6; letter-spacing: 0.01em; margin-bottom: 2.5rem; max-width: 36rem; margin-left: auto; margin-right: auto; } @media (min-width: 640px) { .hero-subtitle { font-size: 1.25rem; } } .hero-cta { display: inline-block; padding: 1rem 2rem; background-color: var(--burnt-orange); color: var(--white); font-weight: 600; border-radius: 28px; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 10px 32px rgba(196, 92, 38, 0.35); } .hero-cta:hover { box-shadow: 0 14px 40px rgba(196, 92, 38, 0.5); transform: scale(1.02); } .hero-cta:focus { outline: none; box-shadow: 0 0 0 2px var(--charcoal), 0 0 0 4px var(--coral); } /* ===== Validation Section ===== */ .validation-section { padding: 6rem 0; } @media (min-width: 640px) { .validation-section { padding: 8rem 0; } } /* Kimi-style: section as distinct block with plenty of space */ .kimi-layout .validation-section { padding: 8rem 0; min-height: 65vh; display: flex; flex-direction: column; justify-content: center; } @media (min-width: 640px) { .kimi-layout .validation-section { padding: 10rem 0; } } @media (min-width: 1024px) { .kimi-layout .validation-section { padding: 12rem 0; min-height: 70vh; } } .validation-lines { display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 640px) { .validation-lines { gap: 1.25rem; } } .kimi-layout .validation-lines { gap: 1.5rem; } @media (min-width: 768px) { .kimi-layout .validation-lines { gap: 1.75rem; } } .validation-line { font-size: 1.25rem; font-weight: 500; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1.6; } @media (min-width: 640px) { .validation-line { font-size: 1.5rem; } } @media (min-width: 768px) { .validation-line { font-size: 1.875rem; } } .validation-line .highlight { font-family: inherit; font-weight: inherit; font-size: inherit; color: #C45C26; font-style: italic; } .kimi-layout .validation-line .highlight { color: #C45C26; font-style: italic; } .reveal-description .reveal-highlight { color: #C45C26; } .reveal-description .reveal-tagline { font-family: 'Inter', sans-serif; font-size: 0.85em; font-weight: 200; font-style: italic; color: #8a8a8a; } .kimi-layout .reveal-description .reveal-tagline { color: #6D6D6D; } /* ===== Reveal Section ===== */ .reveal-section { padding: 6rem 0; } @media (min-width: 640px) { .reveal-section { padding: 8rem 0; } } .kimi-layout .reveal-section { padding: 8rem 0; min-height: 60vh; display: flex; flex-direction: column; justify-content: center; } @media (min-width: 640px) { .kimi-layout .reveal-section { padding: 10rem 0; } } @media (min-width: 1024px) { .kimi-layout .reveal-section { padding: 12rem 0; min-height: 65vh; } } .reveal-title { font-size: 1.875rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; margin-bottom: 2rem; } @media (min-width: 640px) { .reveal-title { font-size: 2.25rem; } } @media (min-width: 768px) { .reveal-title { font-size: 3rem; } } .reveal-description { font-size: 1.125rem; color: var(--text-muted); line-height: 1.6; letter-spacing: 0.01em; max-width: 42rem; } @media (min-width: 640px) { .reveal-description { font-size: 1.25rem; } } .kimi-layout .reveal-description { max-width: 44rem; margin-bottom: 0; } .kimi-layout .reveal-title { margin-bottom: 2.5rem; } @media (min-width: 768px) { .kimi-layout .reveal-title { margin-bottom: 3rem; } } /* ===== Commitment Section ===== */ .commitment-section { padding: 6rem 0; } @media (min-width: 640px) { .commitment-section { padding: 8rem 0; } } .kimi-layout .commitment-section { padding: 8rem 0; min-height: 55vh; display: flex; flex-direction: column; justify-content: center; } @media (min-width: 640px) { .kimi-layout .commitment-section { padding: 10rem 0; } } @media (min-width: 1024px) { .kimi-layout .commitment-section { padding: 12rem 0; min-height: 60vh; } } .commitment-title { font-size: 1.875rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; margin-bottom: 1rem; } @media (min-width: 640px) { .commitment-title { font-size: 2.25rem; } } .kimi-layout .commitment-title { margin-bottom: 1.5rem; } @media (min-width: 768px) { .kimi-layout .commitment-title { margin-bottom: 2rem; } } /* ===== Waitlist Form ===== */ .waitlist-form { margin-top: 2rem; } .kimi-layout .waitlist-form { margin-top: 2.5rem; } @media (min-width: 768px) { .kimi-layout .waitlist-form { margin-top: 3rem; } } .email-input { width: 100%; padding: 1rem 1.25rem; background-color: transparent; border: 1px solid var(--border-white); border-radius: 28px; color: var(--text-primary); font-family: 'Inter', sans-serif; font-size: 1rem; outline: none; transition: all 0.2s ease; } .email-input::placeholder { color: var(--text-muted); } .email-input:focus { border-color: var(--coral); box-shadow: 0 0 0 1px var(--coral); } .submit-btn { margin-top: 1rem; width: 100%; padding: 1rem 2rem; background-color: var(--burnt-orange); color: var(--white); font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 600; border: none; border-radius: 28px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 10px 32px rgba(196, 92, 38, 0.35); } @media (min-width: 640px) { .submit-btn { width: auto; min-width: 200px; } } .submit-btn:hover:not(:disabled) { box-shadow: 0 14px 40px rgba(196, 92, 38, 0.5); transform: scale(1.02); } .submit-btn:disabled { opacity: 0.6; cursor: not-allowed; } .submit-btn:focus { outline: none; box-shadow: 0 0 0 2px var(--charcoal), 0 0 0 4px var(--coral); } .form-note { margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted); } /* ===== Success Message ===== */ .success-message { margin-top: 2rem; } .success-text { font-size: 1.25rem; color: var(--coral); line-height: 1.6; } /* ===== Footer ===== */ .footer { padding-top: 3rem; padding-bottom: 1.5rem; text-align: center; border-top: 1px solid var(--border-white); } .kimi-layout .footer { padding-top: 4rem; padding-bottom: 2rem; } @media (min-width: 1024px) { .kimi-layout .footer { padding-top: 5rem; padding-bottom: 2.5rem; } } .footer p { font-size: 0.875rem; color: var(--text-muted); } .footer-coming-soon { color: #C45C26; margin-top: 0; margin-bottom: 0.5rem; } .footer-tagline { font-style: italic; margin-bottom: 2rem; } .footer p + p { margin-top: 0.5rem; } .footer-link { color: inherit; text-decoration: none; transition: color 0.2s ease; } .footer-link:hover { color: var(--burnt-orange); } .kimi-layout .footer-link:hover { color: var(--burnt-orange); } /* ===== Legal Page ===== */ .legal-page .content-container { padding-top: 6rem; padding-bottom: 4rem; } .legal-section { padding: 0; scroll-margin-top: 5rem; border-bottom: 1px solid rgba(20, 20, 20, 0.08); } .legal-section:first-of-type { border-top: 1px solid rgba(20, 20, 20, 0.08); } .legal-accordion-header { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 1.25rem 0; background: none; border: none; cursor: pointer; text-align: left; font-family: inherit; color: var(--zendo-text); transition: color 0.2s ease; } .legal-accordion-header:hover { color: var(--burnt-orange); } .legal-accordion-title { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; } .legal-accordion-meta { font-size: 0.8rem; font-weight: 400; color: var(--zendo-text-secondary); } .legal-accordion-icon { margin-left: auto; font-size: 0.7rem; transition: transform 0.3s ease; color: var(--zendo-text-secondary); } .legal-accordion-header.expanded .legal-accordion-icon { transform: rotate(180deg); color: var(--burnt-orange); } .legal-accordion-content { overflow: hidden; transition: height 0.3s ease; } .legal-accordion-content[hidden] { display: none; } .legal-accordion-content:not([hidden]) { padding-top: 0.25rem; padding-bottom: 1.5rem; } .legal-title { font-size: 1.75rem; font-weight: 700; color: var(--zendo-text); margin-bottom: 0.5rem; letter-spacing: -0.02em; } .legal-updated { font-size: 0.875rem; color: var(--zendo-text-secondary); margin-bottom: 2rem; } .legal-content { font-size: 1rem; line-height: 1.7; color: var(--zendo-text-secondary); } .legal-content h2 { font-size: 1.125rem; font-weight: 600; color: var(--zendo-text); margin-top: 1.5rem; margin-bottom: 0.5rem; } .legal-content p { margin-bottom: 1rem; } .legal-content ul { margin: 0.5rem 0 1rem 1.25rem; padding: 0; } .legal-content li { margin-bottom: 0.35rem; } .legal-footer { padding-top: 3rem; padding-bottom: 2rem; border-top: 1px solid rgba(20, 20, 20, 0.1); } .legal-back { color: var(--zendo-text-secondary); text-decoration: none; font-size: 0.875rem; transition: color 0.2s ease; } .legal-back:hover { color: var(--burnt-orange); } /* ===== Responsive ===== */ @media (max-width: 480px) { .content-container { padding: 0 1rem 6rem; } .hero-title { font-size: 1.75rem; } .hero-section { padding-top: 4rem; padding-bottom: 5rem; } .navbar { padding: 0.75rem 0; } .nav-container { padding: 0 1rem; } } /* =========================================================================================== PERSONA PICKER & MESSAGE INPUT STYLES Pixel-matched to existing design tokens =========================================================================================== */ /* ===== Persona Picker ===== */ .persona-picker { margin-bottom: 1.25rem; } .persona-picker-label { font-size: 0.875rem; font-weight: 500; color: var(--zendo-text-secondary); margin-bottom: 0.75rem; letter-spacing: 0.01em; } .persona-picker-label .optional { font-weight: 400; opacity: 0.65; } .persona-chips { display: flex; flex-wrap: wrap; gap: 8px; } .persona-chip { display: inline-flex; align-items: center; gap: 5px; padding: 0.45rem 1rem; border: 1px solid rgba(20, 20, 20, 0.15); border-radius: 9999px; background: transparent; color: var(--zendo-text); font-family: 'Inter', sans-serif; font-size: 0.875rem; font-weight: 400; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease; user-select: none; } .persona-chip:hover { border-color: var(--zendo-peach); transform: translateY(-1px); } .persona-chip.selected { background-color: var(--zendo-peach); border-color: var(--zendo-peach); color: var(--zendo-text); } /* ===== Free Text / Message Textarea ===== */ .message-input { width: 100%; padding: 1rem 1.25rem; margin-top: 0.75rem; background-color: transparent; border: 1px solid rgba(20, 20, 20, 0.15); border-radius: 16px; color: var(--zendo-text); font-family: 'Inter', sans-serif; font-size: 1rem; line-height: 1.6; outline: none; resize: vertical; min-height: 90px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .message-input::placeholder { color: var(--zendo-text-secondary); } .message-input:focus { border-color: var(--zendo-peach); box-shadow: 0 0 0 1px var(--zendo-peach); } /* ===== Input Error State ===== */ .email-input.input-error { border-color: #e05c5c; box-shadow: 0 0 0 1px #e05c5c; animation: input-shake 0.3s ease; } @keyframes input-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }