/* ============================================ Orbit — Marketing Site Styles ============================================ */ /* --- Reset & Base --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* --- Aurora palette (light, default) — indigo / magenta / teal --- */ --primary: #5B5BD6; --primary-dim: #4F4FBC; --primary-container: #DDDDF8; --secondary: #C026D3; --secondary-container: #FAE8FF; --tertiary: #14B8A6; --tertiary-container: #CCFBF1; --surface: #FAFAFC; --surface-dim: #E2E8F0; --surface-container: #F1F5F9; --surface-container-low: #F5F3FB; --on-surface: #0F172A; --on-surface-variant: #475569; --outline: #94A3B8; --outline-variant: #CBD5E1; --inverse-surface: #0F172A; /* --- Theme-sensitive semantic tokens --- */ --card-bg: #FFFFFF; --surface-rgb: 250, 250, 252; --hairline-rgb: 203, 213, 225; --shadow-rgb: 15, 23, 42; /* CTA card is an intentional dark accent in both light AND dark modes, so it does NOT invert. Aurora hero gradient terminals. */ --cta-bg-start: #1E1B4B; --cta-bg-end: #4C1D95; /* --- Aurora gradients (theme-aware where useful, premium constant) --- */ --gradient-hero: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); --gradient-accent: linear-gradient(135deg, var(--primary) 0%, var(--tertiary) 100%); --gradient-premium: linear-gradient(135deg, #FBBF24 0%, #F97316 100%); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; color-scheme: light; } /* --- Dark palette --- Two rules, identical bodies: 1. Manual pin — `data-theme="dark"` on (set by the toggle). 2. System preference — no manual pin at all, and the OS says dark. `:root[data-theme="light"]` short-circuits both, so a user who pins light always stays light, even on a dark-default OS. (CSS doesn't let us combine a selector list with `@media`, hence the repetition. All dark values live on the shared custom-property definition below so we only maintain one list of values.) */ :root[data-theme="dark"] { --primary: var(--dark-primary); --primary-dim: var(--dark-primary-dim); --primary-container: var(--dark-primary-container); --secondary: var(--dark-secondary); --secondary-container: var(--dark-secondary-container); --tertiary: var(--dark-tertiary); --tertiary-container: var(--dark-tertiary-container); --surface: var(--dark-surface); --surface-dim: var(--dark-surface-dim); --surface-container: var(--dark-surface-container); --surface-container-low: var(--dark-surface-container-low); --on-surface: var(--dark-on-surface); --on-surface-variant: var(--dark-on-surface-variant); --outline: var(--dark-outline); --outline-variant: var(--dark-outline-variant); --inverse-surface: var(--dark-inverse-surface); --card-bg: var(--dark-card-bg); --surface-rgb: var(--dark-surface-rgb); --hairline-rgb: var(--dark-hairline-rgb); --shadow-rgb: var(--dark-shadow-rgb); --cta-bg-start: var(--dark-cta-bg-start); --cta-bg-end: var(--dark-cta-bg-end); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --primary: var(--dark-primary); --primary-dim: var(--dark-primary-dim); --primary-container: var(--dark-primary-container); --secondary: var(--dark-secondary); --secondary-container: var(--dark-secondary-container); --tertiary: var(--dark-tertiary); --tertiary-container: var(--dark-tertiary-container); --surface: var(--dark-surface); --surface-dim: var(--dark-surface-dim); --surface-container: var(--dark-surface-container); --surface-container-low: var(--dark-surface-container-low); --on-surface: var(--dark-on-surface); --on-surface-variant: var(--dark-on-surface-variant); --outline: var(--dark-outline); --outline-variant: var(--dark-outline-variant); --inverse-surface: var(--dark-inverse-surface); --card-bg: var(--dark-card-bg); --surface-rgb: var(--dark-surface-rgb); --hairline-rgb: var(--dark-hairline-rgb); --shadow-rgb: var(--dark-shadow-rgb); --cta-bg-start: var(--dark-cta-bg-start); --cta-bg-end: var(--dark-cta-bg-end); color-scheme: dark; } } /* Shared dark-palette values — Aurora dark. Referenced by both rules above. Surface ladder is intentional: page (#0B0D13) < container-low (#13161F) < card (#1A1E29) < container (#1E2330). This gives the callout / cards a real visible step above the page rather than sitting on the void. --dark-hairline-rgb is bumped from slate-700 (51,65,85) to a slightly warmer / brighter tone so 1px borders actually read on the dark page. */ :root { --dark-primary: #8B8BFF; --dark-primary-dim: #7575E6; --dark-primary-container: #2A2A6B; --dark-secondary: #E879F9; --dark-secondary-container: #701A75; --dark-tertiary: #2DD4BF; --dark-tertiary-container: #115E59; --dark-surface: #0B0D13; --dark-surface-dim: #06080D; --dark-surface-container: #1E2330; --dark-surface-container-low: #13161F; --dark-on-surface: #F1F5F9; --dark-on-surface-variant: #D8DEE9; --dark-outline: #7C8AA0; --dark-outline-variant: #3D4759; --dark-inverse-surface: #F8FAFC; --dark-card-bg: #1A1E29; --dark-surface-rgb: 11, 13, 19; --dark-hairline-rgb: 86, 99, 124; --dark-shadow-rgb: 0, 0, 0; --dark-cta-bg-start: #1E1B4B; --dark-cta-bg-end: #4C1D95; } html { scroll-behavior: smooth; scroll-padding-top: 80px; } body { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; color: var(--inverse-surface); background: var(--surface); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } .container { max-width: 1140px; margin: 0 auto; padding: 0 24px; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* --- Typography --- */ h1 { font-size: clamp(2.4rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; } h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; } h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; } h1 em, h2 em { font-style: italic; color: var(--secondary); } /* --- Buttons --- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 28px; border-radius: var(--radius-xl); font-family: inherit; font-weight: 700; font-size: 0.95rem; background: var(--gradient-hero); color: #fff; border: none; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s, filter 0.2s; text-decoration: none; } .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(91, 91, 214, 0.35); filter: saturate(1.15); } .btn-sm { padding: 8px 20px; font-size: 0.85rem; } .btn-lg { padding: 16px 36px; font-size: 1rem; } .btn-outline { background: transparent; color: var(--primary); border: 2px solid var(--outline-variant); } .btn-outline:hover { background: var(--surface-container); box-shadow: 0 4px 20px rgba(89, 106, 255, 0.12); } .badge { display: inline-block; padding: 6px 16px; border-radius: 100px; background: var(--secondary-container); color: var(--secondary); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 16px; } /* --- Nav --- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 16px 0; background: rgba(var(--surface-rgb), 0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(var(--hairline-rgb), 0.15); transition: padding 0.3s; } .nav.scrolled { padding: 10px 0; } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; } .logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.25rem; color: var(--inverse-surface); } .logo-icon { width: 32px; height: 32px; } .nav-links { display: flex; gap: 32px; flex: 1; justify-content: center; } .nav-links a { font-size: 0.9rem; font-weight: 600; color: var(--on-surface); opacity: 0.7; transition: opacity 0.2s; } .nav-links a:hover { opacity: 1; } .menu-toggle { display: none; background: none; border: none; cursor: pointer; width: 28px; height: 20px; position: relative; } .menu-toggle span { display: block; width: 100%; height: 2px; background: var(--inverse-surface); position: absolute; left: 0; transition: 0.3s; } .menu-toggle span:nth-child(1) { top: 0; } .menu-toggle span:nth-child(2) { top: 9px; } .menu-toggle span:nth-child(3) { top: 18px; } .mobile-menu { display: none; position: fixed; top: 70px; left: 0; right: 0; background: rgba(var(--surface-rgb), 0.97); backdrop-filter: blur(20px); padding: 24px; flex-direction: column; gap: 16px; z-index: 99; border-bottom: 1px solid rgba(var(--hairline-rgb), 0.15); } .mobile-menu a { font-size: 1.1rem; font-weight: 600; padding: 8px 0; } .mobile-menu .btn { text-align: center; margin-top: 8px; } /* --- Hero --- */ .hero { position: relative; padding: 160px 0 100px; overflow: hidden; min-height: 90vh; display: flex; align-items: center; } .hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 20% 20%, rgba(163, 193, 255, 0.3) 0%, transparent 70%), radial-gradient(ellipse 60% 50% at 80% 60%, rgba(233, 221, 255, 0.35) 0%, transparent 70%), radial-gradient(ellipse 50% 40% at 50% 90%, rgba(147, 251, 186, 0.15) 0%, transparent 70%); } .hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; } .hero-text { max-width: 560px; } .hero-sub { font-size: 1.15rem; color: var(--on-surface); opacity: 0.7; margin: 20px 0 32px; line-height: 1.7; } .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; } .social-proof { display: flex; align-items: center; gap: 12px; margin-top: 40px; font-size: 0.85rem; color: var(--on-surface); opacity: 0.6; } .avatars { display: flex; } .avatar-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--surface); margin-left: -8px; } .avatar-dot:first-child { margin-left: 0; } /* Phone mockup */ .hero-visual { position: relative; display: flex; justify-content: center; } .phone-frame { width: 280px; border-radius: 36px; overflow: hidden; background: var(--card-bg); box-shadow: 0 25px 80px rgba(var(--shadow-rgb), 0.15), 0 0 0 1px rgba(var(--hairline-rgb), 0.15); position: relative; } .phone-screen { padding: 0; } .mock-header { display: flex; align-items: center; gap: 12px; padding: 20px 20px 14px; background: linear-gradient(135deg, var(--secondary), var(--primary)); color: #fff; } .mock-avatar { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.25); } .mock-name { font-weight: 700; font-size: 0.95rem; } .mock-status { font-size: 0.75rem; opacity: 0.8; } .mock-messages { padding: 16px; display: flex; flex-direction: column; gap: 8px; } .mock-bubble { padding: 10px 14px; border-radius: 16px; max-width: 85%; font-size: 0.8rem; line-height: 1.4; position: relative; } .mock-bubble time { display: block; font-size: 0.6rem; opacity: 0.5; margin-top: 4px; } .mock-bubble-them { background: var(--surface-container); align-self: flex-start; border-bottom-left-radius: 4px; } .mock-bubble-me { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; } .mock-bubble-me time { opacity: 0.7; } .mock-input { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid rgba(var(--hairline-rgb), 0.15); } .mock-input-field { flex: 1; padding: 10px 16px; border-radius: 100px; background: var(--surface-container-low); font-size: 0.8rem; color: var(--outline-variant); } .mock-send { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--secondary), var(--primary)); display: flex; align-items: center; justify-content: center; } .floating-card { position: absolute; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: var(--radius-md); background: var(--card-bg); box-shadow: 0 8px 30px rgba(var(--shadow-rgb), 0.1); font-size: 0.8rem; font-weight: 600; animation: float 6s ease-in-out infinite; } .card-shield { top: 15%; right: -20px; } .card-lock { bottom: 20%; left: -30px; animation-delay: -3s; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* --- Trust bar --- */ .trust-bar { padding: 48px 0; border-bottom: 1px solid rgba(var(--hairline-rgb), 0.1); } .trust-bar .container { text-align: center; } .trust-bar p { font-size: 0.8rem; font-weight: 600; opacity: 0.4; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 20px; } .trust-logos { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; } .trust-logos span { font-size: 0.95rem; font-weight: 700; opacity: 0.3; letter-spacing: 0.02em; } /* --- Features --- */ .features { padding: 120px 0; } .section-header { text-align: center; max-width: 600px; margin: 0 auto 64px; } .section-header p { margin-top: 16px; font-size: 1.05rem; opacity: 0.6; } .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .feature-card { padding: 36px; border-radius: var(--radius-lg); background: var(--card-bg); border: 1px solid rgba(var(--hairline-rgb), 0.12); transition: transform 0.3s, box-shadow 0.3s; } .feature-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(var(--shadow-rgb), 0.08); } .feature-highlight { background: linear-gradient(135deg, rgba(233, 221, 255, 0.3), rgba(163, 193, 255, 0.2)); border-color: rgba(107, 70, 193, 0.15); } :root[data-theme="dark"] .feature-highlight { background: linear-gradient(135deg, rgba(190, 130, 255, 0.28), rgba(120, 150, 255, 0.16)); border-color: rgba(190, 130, 255, 0.32); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .feature-highlight { background: linear-gradient(135deg, rgba(190, 130, 255, 0.28), rgba(120, 150, 255, 0.16)); border-color: rgba(190, 130, 255, 0.32); } } .feature-icon { width: 52px; height: 52px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .icon-purple { background: var(--secondary-container); color: var(--secondary); } .icon-blue { background: rgba(163, 193, 255, 0.3); color: var(--primary); } .icon-green { background: rgba(147, 251, 186, 0.3); color: var(--tertiary); } .feature-card h3 { margin-bottom: 10px; } .feature-card p { font-size: 0.9rem; opacity: 0.65; line-height: 1.6; } /* --- How it works --- */ .how-it-works { padding: 120px 0; background: var(--surface-container-low); } .steps { display: flex; flex-direction: column; gap: 48px; max-width: 800px; margin: 0 auto; } .step { display: grid; grid-template-columns: auto 1fr 1fr; gap: 32px; align-items: center; padding: 36px; border-radius: var(--radius-lg); background: var(--card-bg); border: 1px solid rgba(var(--hairline-rgb), 0.1); } .step-number { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--secondary), var(--primary)); color: #fff; font-weight: 800; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; } .step-content h3 { margin-bottom: 8px; } .step-content p { font-size: 0.9rem; opacity: 0.6; line-height: 1.6; } .step-visual { display: flex; justify-content: center; } .step-mockup { background: var(--surface-container-low); border-radius: var(--radius-md); padding: 16px; width: 100%; min-width: 200px; } .mockup-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--radius-sm); background: var(--card-bg); margin-bottom: 8px; } .mockup-item:last-child { margin-bottom: 0; } .mockup-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; } .mockup-label { font-weight: 700; font-size: 0.85rem; } .mockup-sublabel { font-size: 0.75rem; opacity: 0.5; font-family: monospace; } .mockup-request { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px; background: var(--card-bg); border-radius: var(--radius-sm); } .mockup-request .mockup-label { font-size: 0.8rem; flex: 1; min-width: 120px; } .mockup-actions { display: flex; gap: 8px; } .mockup-btn-approve { padding: 6px 14px; border-radius: 100px; background: var(--tertiary); color: #fff; font-size: 0.75rem; font-weight: 700; } .mockup-btn-deny { padding: 6px 14px; border-radius: 100px; background: transparent; border: 1px solid rgba(var(--hairline-rgb), 0.3); font-size: 0.75rem; font-weight: 600; opacity: 0.5; } .mockup-chat-preview { display: flex; flex-direction: column; gap: 6px; } .mini-bubble { padding: 8px 14px; border-radius: 14px; font-size: 0.8rem; max-width: 80%; line-height: 1.4; } .mini-bubble.left { background: var(--card-bg); align-self: flex-start; border-bottom-left-radius: 4px; } .mini-bubble.right { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; } /* --- Safety --- */ .safety { padding: 120px 0; } .safety-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .safety-text h2 { margin-bottom: 16px; } .safety-text > p { font-size: 1.05rem; opacity: 0.65; margin-bottom: 36px; line-height: 1.7; } .safety-list { list-style: none; display: flex; flex-direction: column; gap: 20px; } .safety-list li { display: flex; gap: 14px; align-items: flex-start; } .safety-list li svg { flex-shrink: 0; margin-top: 2px; } .safety-list strong { display: block; font-weight: 700; margin-bottom: 2px; } .safety-list span { font-size: 0.9rem; opacity: 0.6; line-height: 1.5; } .safety-visual { display: flex; flex-direction: column; align-items: center; } .safety-diagram { display: flex; align-items: center; gap: 16px; padding: 40px 32px; border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(233, 221, 255, 0.2), rgba(163, 193, 255, 0.15)); border: 1px solid rgba(var(--hairline-rgb), 0.15); width: 100%; } :root[data-theme="dark"] .safety-diagram { background: linear-gradient(135deg, rgba(190, 130, 255, 0.24), rgba(120, 150, 255, 0.14)); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .safety-diagram { background: linear-gradient(135deg, rgba(190, 130, 255, 0.24), rgba(120, 150, 255, 0.14)); } } .diagram-device, .diagram-server { flex: 1; text-align: center; padding: 20px; border-radius: var(--radius-md); background: var(--card-bg); border: 1px solid rgba(var(--hairline-rgb), 0.15); } .diagram-label { font-size: 0.75rem; font-weight: 700; margin-bottom: 8px; opacity: 0.7; } .diagram-key { font-size: 1.5rem; } .diagram-cipher { font-family: monospace; font-size: 0.8rem; opacity: 0.4; letter-spacing: 0.1em; } .diagram-line { flex: 0.5; display: flex; justify-content: center; } .diagram-packet { font-size: 1.2rem; animation: slide 2s ease-in-out infinite; } @keyframes slide { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(4px); } } .diagram-caption { margin-top: 20px; font-size: 0.8rem; opacity: 0.5; text-align: center; } /* --- FAQ --- */ .faq { padding: 120px 0; background: var(--surface-container-low); } .faq-list { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .faq-item { background: var(--card-bg); border-radius: var(--radius-md); border: 1px solid rgba(var(--hairline-rgb), 0.1); overflow: hidden; } .faq-item summary { padding: 20px 24px; font-weight: 700; font-size: 1rem; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; transition: background 0.2s; } .faq-item summary:hover { background: var(--surface-container-low); } .faq-item summary::after { content: '+'; font-size: 1.4rem; font-weight: 400; color: var(--outline-variant); transition: transform 0.3s; } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item p { padding: 0 24px 20px; font-size: 0.9rem; opacity: 0.65; line-height: 1.7; } /* --- CTA --- */ .cta { padding: 120px 0; } .cta-card { text-align: center; padding: 80px 40px; border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--cta-bg-start), var(--cta-bg-end)); color: #fff; } .cta-card h2 { color: #fff; margin-bottom: 16px; } .cta-card p { opacity: 0.7; margin-bottom: 32px; font-size: 1.05rem; } .cta-form { display: flex; gap: 12px; justify-content: center; max-width: 480px; margin: 0 auto; } .cta-form input { flex: 1; padding: 16px 24px; border-radius: var(--radius-xl); border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.08); color: #fff; font-family: inherit; font-size: 0.95rem; outline: none; transition: border-color 0.2s; } .cta-form input::placeholder { color: rgba(255,255,255,0.4); } .cta-form input:focus { border-color: rgba(255,255,255,0.4); } .cta-form .btn { background: #fff; color: var(--cta-bg-start); flex-shrink: 0; } .cta-form .btn:hover { box-shadow: 0 8px 30px rgba(255,255,255,0.2); } .cta-btn-light { background: #fff; color: var(--cta-bg-start); margin-top: 8px; } .cta-btn-light:hover { box-shadow: 0 8px 30px rgba(255,255,255,0.2); } .cta-note { font-size: 0.8rem; opacity: 0.4; margin-top: 16px; } /* --- Footer --- */ .footer { padding: 80px 0 0; border-top: 1px solid rgba(var(--hairline-rgb), 0.1); } .footer-inner { display: grid; grid-template-columns: 1.5fr 2fr; gap: 60px; } .footer-brand p { margin-top: 12px; font-size: 0.9rem; opacity: 0.5; } .footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .footer-links h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.4; margin-bottom: 16px; } .footer-links a { display: block; font-size: 0.9rem; opacity: 0.6; padding: 4px 0; transition: opacity 0.2s; } .footer-links a:hover { opacity: 1; } .footer-bottom { margin-top: 48px; padding: 24px 0; border-top: 1px solid rgba(var(--hairline-rgb), 0.1); font-size: 0.8rem; opacity: 0.4; } /* --- Responsive --- */ @media (max-width: 968px) { .hero-inner { grid-template-columns: 1fr; text-align: center; } .hero-text { max-width: 100%; } .hero-actions { justify-content: center; } .social-proof { justify-content: center; } .hero-visual { margin-top: 40px; } .features-grid { grid-template-columns: repeat(2, 1fr); } .safety-grid { grid-template-columns: 1fr; } .safety-visual { margin-top: 40px; } .footer-inner { grid-template-columns: 1fr; } .step { grid-template-columns: auto 1fr; } .step-visual { display: none; } } @media (max-width: 640px) { .nav-links { display: none; } .nav .btn { display: none; } .menu-toggle { display: block; } .mobile-menu.open { display: flex; } .features-grid { grid-template-columns: 1fr; } .hero { padding: 130px 0 60px; min-height: auto; } .phone-frame { width: 240px; } .floating-card { display: none; } .cta-form { flex-direction: column; } .cta-card { padding: 48px 24px; } .safety-diagram { flex-direction: column; } .diagram-line { transform: rotate(90deg); } .step { grid-template-columns: 1fr; text-align: center; } .step-number { margin: 0 auto; } } /* --- Animations --- */ @media (prefers-reduced-motion: no-preference) { .feature-card, .step, .faq-item, .safety-list li { opacity: 0; transform: translateY(20px); animation: fadeUp 0.6s ease forwards; } .feature-card:nth-child(1) { animation-delay: 0.05s; } .feature-card:nth-child(2) { animation-delay: 0.1s; } .feature-card:nth-child(3) { animation-delay: 0.15s; } .feature-card:nth-child(4) { animation-delay: 0.2s; } .feature-card:nth-child(5) { animation-delay: 0.25s; } .feature-card:nth-child(6) { animation-delay: 0.3s; } .step:nth-child(1) { animation-delay: 0.05s; } .step:nth-child(2) { animation-delay: 0.15s; } .step:nth-child(3) { animation-delay: 0.25s; } .safety-list li:nth-child(1) { animation-delay: 0.05s; } .safety-list li:nth-child(2) { animation-delay: 0.1s; } .safety-list li:nth-child(3) { animation-delay: 0.15s; } .safety-list li:nth-child(4) { animation-delay: 0.2s; } } @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } /* --- Trust-bar link --- */ .trust-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 24px; font-size: 0.85rem; font-weight: 600; color: var(--secondary); opacity: 0.85; transition: opacity 0.2s, gap 0.2s; } .trust-link:hover { opacity: 1; gap: 10px; } /* --- Safety CTA button --- */ .safety-cta { margin-top: 28px; display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; font-size: 0.9rem; } .safety-cta:hover { gap: 12px; } /* --- Active nav link (security page) --- */ .nav-links a.active { opacity: 1; color: var(--secondary); } /* --- Theme toggle --- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; margin-right: 4px; border: 1px solid rgba(var(--hairline-rgb), 0.2); border-radius: 50%; background: transparent; color: var(--on-surface); cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; } .theme-toggle:hover { background: var(--surface-container); border-color: rgba(var(--hairline-rgb), 0.4); } .theme-toggle svg { width: 18px; height: 18px; } /* Icon visibility — shows the icon of the mode you'd SWITCH TO. Default (light, no pin): currently light, show moon to switch to dark. Auto-dark (system prefers dark, no pin): currently dark, show sun. Pinned light / Pinned dark: explicit overrides. */ .theme-toggle .icon-moon { display: block; } .theme-toggle .icon-sun { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; } } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } /* ============================================ Security page — long-form article ============================================ */ .article-page { padding: 140px 0 60px; } .article-hero { padding: 0 0 40px; } .article-hero .container { max-width: 820px; } .article-hero h1 { margin: 16px 0 20px; } .article-lede { font-size: 1.15rem; line-height: 1.7; color: var(--on-surface); opacity: 0.72; max-width: 640px; } .article-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: start; padding-top: 24px; } /* TOC */ .toc { position: sticky; top: 100px; font-size: 0.9rem; } .toc details { padding: 16px 18px; border-radius: var(--radius-md); background: var(--surface-container-low); border: 1px solid rgba(var(--hairline-rgb), 0.12); } .toc summary { font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.5; cursor: pointer; list-style: none; margin-bottom: 0; } .toc details[open] summary { margin-bottom: 12px; } .toc summary::-webkit-details-marker { display: none; } .toc ul { list-style: none; display: flex; flex-direction: column; gap: 6px; } .toc li a { display: block; padding: 6px 8px; border-radius: var(--radius-sm); font-weight: 600; color: var(--on-surface); opacity: 0.7; transition: opacity 0.2s, background 0.2s; } .toc li a:hover { opacity: 1; background: var(--surface-container); } /* Article body typography */ .article { max-width: 760px; } .article section { padding: 8px 0 40px; } .article section + section { border-top: 1px solid rgba(var(--hairline-rgb), 0.12); padding-top: 40px; } .article h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-bottom: 16px; } .article h3 { font-size: 1.1rem; font-weight: 700; margin: 28px 0 10px; } .article p { font-size: 1rem; line-height: 1.75; color: var(--on-surface); opacity: 0.82; margin-bottom: 14px; } .article p.muted { font-size: 0.9rem; opacity: 0.55; font-style: italic; } .article ul { margin: 8px 0 16px 22px; display: flex; flex-direction: column; gap: 8px; } .article li { font-size: 0.98rem; line-height: 1.65; color: var(--on-surface); opacity: 0.82; } .article strong { color: var(--inverse-surface); opacity: 1; } .article em { color: var(--secondary); font-style: italic; } .article a { color: var(--secondary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* Callout — light mode keeps the soft tinted gradient. In dark mode the page is near-black, so a translucent gradient on a dark page reads as "floating on the void". Switch to a real elevated card surface (one step lighter than the page), a 1px border, and a soft shadow so it reads as a deliberate component rather than an accidental overlay. */ .callout { margin: 24px 0 40px; padding: 20px 24px; border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(233, 221, 255, 0.45), rgba(163, 193, 255, 0.2)); border-left: 4px solid var(--secondary); } :root[data-theme="dark"] .callout { background: var(--card-bg); border: 1px solid rgba(var(--hairline-rgb), 0.35); border-left: 4px solid var(--secondary); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .callout { background: var(--card-bg); border: 1px solid rgba(var(--hairline-rgb), 0.35); border-left: 4px solid var(--secondary); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35); } } .callout strong { display: block; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--secondary); margin-bottom: 6px; } .callout p { margin: 0; font-size: 0.98rem; line-height: 1.6; } /* Stored-vs-not table */ .stored-table { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0 8px; } .stored-col { padding: 24px; border-radius: var(--radius-md); border: 1px solid rgba(var(--hairline-rgb), 0.15); background: var(--surface-container-low); } .stored-col h3 { font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 14px; } .stored-col ul { margin-left: 18px; gap: 6px; } .stored-col li { font-size: 0.9rem; opacity: 0.8; } .stored-col-yes h3 { color: var(--primary); } .stored-col-no { background: linear-gradient(135deg, rgba(147, 251, 186, 0.18), rgba(233, 221, 255, 0.15)); border-color: rgba(0, 110, 64, 0.2); } :root[data-theme="dark"] .stored-col-no { background: linear-gradient(135deg, rgba(110, 230, 165, 0.22), rgba(190, 130, 255, 0.18)); border-color: rgba(110, 230, 165, 0.32); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stored-col-no { background: linear-gradient(135deg, rgba(110, 230, 165, 0.22), rgba(190, 130, 255, 0.18)); border-color: rgba(110, 230, 165, 0.32); } } .stored-col-no h3 { color: var(--tertiary); } /* FAQ on security page (reuses .faq-item from home) */ .article .faq-list { max-width: 100%; margin: 0; } .article .faq-item { box-shadow: none; } /* Responsive */ @media (max-width: 968px) { .article-body { grid-template-columns: 1fr; gap: 24px; } .toc { position: static; } .stored-table { grid-template-columns: 1fr; } } @media (max-width: 640px) { .article-page { padding: 110px 0 40px; } .article-hero h1 { font-size: 2rem; } .article-lede { font-size: 1rem; } .article { max-width: 100%; } .article section { padding-bottom: 28px; } .article section + section { padding-top: 28px; } .trust-link { margin-top: 16px; } } /* ============================================ Dark-mode contrast polish -------------------------------------------- Most body-copy in this stylesheet uses var(--on-surface) with opacity somewhere between 0.5 and 0.72. On the light surface (#FAFAFC) that's fine — the 0.65 dark-grey on near-white still hits AA. On the dark surface (#0B0D13) the same opacities bring foreground luminance down below AA on body text. Bump those to 0.85–0.92 (which against #F1F5F9 / #0B0D13 ≈ 11–12:1 contrast) so all body copy hits AA, and small / dense copy (article body, FAQ answers) hits AAA where reasonable. Single block so the overrides are easy to audit and remove. ============================================ */ :root[data-theme="dark"] .hero-sub, :root[data-theme="dark"] .section-header p, :root[data-theme="dark"] .feature-card p, :root[data-theme="dark"] .step-content p, :root[data-theme="dark"] .safety-text > p, :root[data-theme="dark"] .safety-list span, :root[data-theme="dark"] .faq-item p, :root[data-theme="dark"] .article p, :root[data-theme="dark"] .article li, :root[data-theme="dark"] .article-lede, :root[data-theme="dark"] .stored-col li, :root[data-theme="dark"] .footer-links a, :root[data-theme="dark"] .footer-brand p { opacity: 0.88; } :root[data-theme="dark"] .nav-links a, :root[data-theme="dark"] .toc li a { opacity: 0.85; } :root[data-theme="dark"] .trust-bar p, :root[data-theme="dark"] .footer-links h4, :root[data-theme="dark"] .footer-bottom, :root[data-theme="dark"] .cta-note, :root[data-theme="dark"] .article p.muted, :root[data-theme="dark"] .diagram-caption, :root[data-theme="dark"] .mockup-sublabel { opacity: 0.7; } :root[data-theme="dark"] .trust-logos span { opacity: 0.55; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-sub, :root:not([data-theme="light"]) .section-header p, :root:not([data-theme="light"]) .feature-card p, :root:not([data-theme="light"]) .step-content p, :root:not([data-theme="light"]) .safety-text > p, :root:not([data-theme="light"]) .safety-list span, :root:not([data-theme="light"]) .faq-item p, :root:not([data-theme="light"]) .article p, :root:not([data-theme="light"]) .article li, :root:not([data-theme="light"]) .article-lede, :root:not([data-theme="light"]) .stored-col li, :root:not([data-theme="light"]) .footer-links a, :root:not([data-theme="light"]) .footer-brand p { opacity: 0.88; } :root:not([data-theme="light"]) .nav-links a, :root:not([data-theme="light"]) .toc li a { opacity: 0.85; } :root:not([data-theme="light"]) .trust-bar p, :root:not([data-theme="light"]) .footer-links h4, :root:not([data-theme="light"]) .footer-bottom, :root:not([data-theme="light"]) .cta-note, :root:not([data-theme="light"]) .article p.muted, :root:not([data-theme="light"]) .diagram-caption, :root:not([data-theme="light"]) .mockup-sublabel { opacity: 0.7; } :root:not([data-theme="light"]) .trust-logos span { opacity: 0.55; } } /* ============================================ Security-report contact form -------------------------------------------- Inline form inside the security article's transparency section, replacing the old "email us about security" sentence. Visual language matches the .cta-form gradient card so it feels native. The form is wrapped in a card surface that's discoverable inside the article stream without redesigning the page. ============================================ */ .security-report { margin: 24px 0 8px; padding: 24px; border-radius: var(--radius-md); background: var(--card-bg); border: 1px solid rgba(var(--hairline-rgb), 0.2); } .security-report-form { display: flex; flex-direction: column; gap: 12px; } .security-report-form textarea, .security-report-form input { width: 100%; padding: 12px 16px; border-radius: var(--radius-md); border: 1px solid rgba(var(--hairline-rgb), 0.35); background: var(--surface-container-low); color: var(--on-surface); font-family: inherit; font-size: 0.95rem; outline: none; transition: border-color 0.2s; resize: vertical; } .security-report-form textarea { min-height: 140px; line-height: 1.55; } .security-report-form textarea:focus, .security-report-form input:focus { border-color: var(--primary); } .security-report-form textarea::placeholder, .security-report-form input::placeholder { color: var(--on-surface-variant); opacity: 0.7; } .security-report-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .security-report-actions .btn { flex-shrink: 0; } .security-report-hint { font-size: 0.85rem; opacity: 0.65; margin: 0; line-height: 1.5; } .security-report-error { margin: 8px 0 0; font-size: 0.9rem; color: #ef4444; line-height: 1.5; } :root[data-theme="dark"] .security-report-error { color: #fca5a5; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .security-report-error { color: #fca5a5; } } .security-report-success { text-align: center; padding: 32px 16px; font-size: 1rem; font-weight: 600; color: var(--on-surface); } .security-report-success::before { content: '✓'; display: block; font-size: 2rem; line-height: 1; color: var(--tertiary); margin-bottom: 12px; } /* Screen-reader-only utility — used by labels on the security report form so the visible placeholders don't double up as visible labels. */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* === Waitlist page === Dedicated /waitlist.html page. Cosmic background built entirely with CSS: three layered starfields (each is a single element painted with a pre-baked box-shadow string acting as 60+ tiny dots), three orbital rings carrying small planets, and two soft radial-gradient glows behind it all. No canvas, no JS-driven animation. Honours prefers-reduced-motion. */ .waitlist { position: relative; min-height: 100vh; padding: 140px 0 100px; display: flex; align-items: center; overflow: hidden; background: linear-gradient(180deg, #0B0B2E 0%, #1E1B4B 55%, #2C1B5C 100%); color: #fff; } .waitlist-bg { position: absolute; inset: 0; pointer-events: none; } .waitlist-glow { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.55; animation: waitlistPulse 12s ease-in-out infinite; } .waitlist-glow-1 { width: 520px; height: 520px; top: -120px; left: -120px; background: radial-gradient(circle, rgba(192, 38, 211, 0.45) 0%, transparent 65%); } .waitlist-glow-2 { width: 620px; height: 620px; bottom: -200px; right: -160px; background: radial-gradient(circle, rgba(91, 91, 214, 0.55) 0%, transparent 65%); animation-delay: -6s; } @keyframes waitlistPulse { 0%, 100% { transform: scale(1); opacity: 0.55; } 50% { transform: scale(1.1); opacity: 0.75; } } /* Starfields — each is a 1×1 dot multiplied by a long box-shadow string. Three layers at different sizes/twinkle speeds for parallax feel. */ .waitlist-stars { position: absolute; inset: 0; width: 1px; height: 1px; top: 0; left: 0; background: transparent; box-shadow: 21vw 8vh #fff, 47vw 12vh #fff, 73vw 3vh #fff, 88vw 19vh #fff, 12vw 22vh #fff, 36vw 28vh #fff, 61vw 33vh #fff, 84vw 41vh #fff, 6vw 47vh #fff, 28vw 52vh #fff, 53vw 58vh #fff, 79vw 63vh #fff, 18vw 71vh #fff, 41vw 76vh #fff, 67vw 82vh #fff, 92vw 88vh #fff, 3vw 92vh #fff, 31vw 95vh #fff, 58vw 14vh #fff, 96vw 35vh #fff, 15vw 38vh #fff, 42vw 44vh #fff, 70vw 50vh #fff, 86vw 56vh #fff, 24vw 64vh #fff, 51vw 69vh #fff, 76vw 74vh #fff, 90vw 79vh #fff, 9vw 17vh #fff, 33vw 6vh #fff, 64vw 22vh #fff, 81vw 27vh #fff; animation: waitlistTwinkle 4s ease-in-out infinite; } .waitlist-stars-2 { box-shadow: 14vw 4vh rgba(255, 255, 255, 0.7), 39vw 18vh rgba(255, 255, 255, 0.7), 66vw 9vh rgba(255, 255, 255, 0.7), 82vw 31vh rgba(255, 255, 255, 0.7), 2vw 32vh rgba(255, 255, 255, 0.7), 27vw 42vh rgba(255, 255, 255, 0.7), 49vw 49vh rgba(255, 255, 255, 0.7), 71vw 55vh rgba(255, 255, 255, 0.7), 11vw 60vh rgba(255, 255, 255, 0.7), 35vw 67vh rgba(255, 255, 255, 0.7), 57vw 73vh rgba(255, 255, 255, 0.7), 78vw 87vh rgba(255, 255, 255, 0.7), 23vw 84vh rgba(255, 255, 255, 0.7), 46vw 91vh rgba(255, 255, 255, 0.7), 73vw 96vh rgba(255, 255, 255, 0.7), 95vw 71vh rgba(255, 255, 255, 0.7); animation-duration: 6s; animation-delay: -2s; } .waitlist-stars-3 { box-shadow: 7vw 11vh rgba(192, 132, 252, 0.9), 32vw 25vh rgba(168, 200, 255, 0.9), 55vw 7vh rgba(192, 132, 252, 0.9), 89vw 14vh rgba(168, 200, 255, 0.9), 19vw 56vh rgba(192, 132, 252, 0.9), 44vw 62vh rgba(168, 200, 255, 0.9), 68vw 78vh rgba(192, 132, 252, 0.9), 93vw 53vh rgba(168, 200, 255, 0.9); animation-duration: 5s; animation-delay: -1s; } @keyframes waitlistTwinkle { 0%, 100% { opacity: 0.85; } 50% { opacity: 0.35; } } /* Orbits — concentric rings centred on the page, each rotating at its own speed, carrying a small planet at the 3-o'clock position (translateX shifts the planet onto the ring before the ring is rotated). */ .waitlist-orbit { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50%; transform-origin: center; animation: waitlistOrbit 40s linear infinite; } .waitlist-orbit-1 { width: 480px; height: 480px; margin: -240px 0 0 -240px; animation-duration: 32s; } .waitlist-orbit-2 { width: 720px; height: 720px; margin: -360px 0 0 -360px; animation-duration: 60s; animation-direction: reverse; } .waitlist-orbit-3 { width: 1040px; height: 1040px; margin: -520px 0 0 -520px; animation-duration: 90s; border-color: rgba(255, 255, 255, 0.05); } @keyframes waitlistOrbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .waitlist-planet { position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fbbf24 0%, #f97316 60%, #b45309 100%); box-shadow: 0 0 24px rgba(251, 191, 36, 0.7); transform: translateX(240px); } .waitlist-orbit-2 .waitlist-planet-2 { width: 14px; height: 14px; margin: -7px 0 0 -7px; background: radial-gradient(circle at 30% 30%, #c4b5fd 0%, #8b5cf6 60%, #4c1d95 100%); box-shadow: 0 0 20px rgba(139, 92, 246, 0.7); transform: translateX(360px); } .waitlist-orbit-3 .waitlist-planet-3 { width: 10px; height: 10px; margin: -5px 0 0 -5px; background: radial-gradient(circle at 30% 30%, #5eead4 0%, #14b8a6 60%, #0f766e 100%); box-shadow: 0 0 16px rgba(94, 234, 212, 0.7); transform: translateX(520px); } /* Card */ .waitlist-inner { position: relative; z-index: 1; display: flex; justify-content: center; } .waitlist-card { width: 100%; max-width: 640px; padding: 56px 48px; border-radius: var(--radius-xl); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); text-align: center; } .waitlist-badge { background: rgba(255, 255, 255, 0.08); color: #fff; border: 1px solid rgba(255, 255, 255, 0.15); margin-bottom: 24px; } .waitlist-title { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; color: #fff; margin-bottom: 16px; } .waitlist-title em { font-style: normal; background: linear-gradient(135deg, #c4b5fd 0%, #f0abfc 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .waitlist-sub { font-size: 1.05rem; line-height: 1.6; color: rgba(255, 255, 255, 0.75); margin-bottom: 32px; } .waitlist-form { display: flex; gap: 12px; max-width: 480px; margin: 0 auto; } .waitlist-form input { flex: 1; padding: 16px 24px; border-radius: var(--radius-xl); border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.08); color: #fff; font-family: inherit; font-size: 0.95rem; outline: none; transition: border-color 0.2s, background 0.2s; } .waitlist-form input::placeholder { color: rgba(255, 255, 255, 0.4); } .waitlist-form input:focus { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.12); } .waitlist-form .btn { background: #fff; color: #1E1B4B; flex-shrink: 0; } .waitlist-form .btn:hover { box-shadow: 0 8px 30px rgba(255, 255, 255, 0.25); } .waitlist-count { display: none; align-items: center; justify-content: center; gap: 10px; margin: 20px 0 0; font-size: 0.95rem; font-weight: 600; color: rgba(255, 255, 255, 0.9); } .waitlist-count:not([hidden]) { display: inline-flex; } .waitlist-count-dot { width: 8px; height: 8px; border-radius: 50%; background: #5eead4; box-shadow: 0 0 12px rgba(94, 234, 212, 0.8); animation: waitlistDotPulse 2s ease-in-out infinite; } @keyframes waitlistDotPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.6; } } .waitlist-note { margin-top: 16px; font-size: 0.8rem; color: rgba(255, 255, 255, 0.45); } .waitlist-form-error { margin: 12px 0 0; font-size: 0.85rem; color: #fca5a5; } .waitlist-perks { margin-top: 40px; display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; } .waitlist-perk { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 500; color: rgba(255, 255, 255, 0.7); } .waitlist-perk svg { color: #c4b5fd; } @media (max-width: 640px) { .waitlist { padding: 110px 0 60px; } .waitlist-card { padding: 40px 24px; } .waitlist-form { flex-direction: column; } .waitlist-perks { gap: 14px 24px; } .waitlist-orbit-3 { display: none; } } @media (prefers-reduced-motion: reduce) { .waitlist-stars, .waitlist-orbit, .waitlist-glow, .waitlist-count-dot { animation: none !important; } } /* === Feedback page === Reuses the cosmic .waitlist background + .waitlist-card chrome from above and only adds the form-specific styles. The card is left-aligned (not the centred/short waitlist card) because it hosts a long, scannable form; .feedback-card overrides text-align + max-width. */ .feedback .waitlist-inner { padding: 0 16px; } .feedback-card { max-width: 760px; text-align: left; padding: 48px 48px 56px; } .feedback-card .waitlist-badge, .feedback-card .waitlist-title, .feedback-card .waitlist-sub { display: block; } .feedback-card .waitlist-title { text-align: left; } .feedback-card .waitlist-sub { text-align: left; max-width: 580px; } .feedback-form { display: flex; flex-direction: column; gap: 0; margin-top: 8px; } .feedback-question { margin-bottom: 28px; } .feedback-label { display: block; font-size: 1rem; font-weight: 600; color: #fff; margin-bottom: 12px; line-height: 1.45; } .feedback-label-hint { font-weight: 400; color: rgba(255, 255, 255, 0.55); font-size: 0.9rem; margin-left: 6px; } /* Anchor labels for the rating row ("Not at all" — "Very"). */ .feedback-rating-anchors { display: flex; justify-content: space-between; font-size: 0.78rem; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.02em; margin-bottom: 8px; padding: 0 4px; } /* 5-pill radio row. Uses the standard "hide native radio + style label" pattern so the labels themselves are the interactive surface. */ .feedback-rating { display: flex; gap: 10px; flex-wrap: wrap; } .feedback-rating input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .feedback-rating label { flex: 1 1 0; min-width: 56px; display: inline-flex; align-items: center; justify-content: center; padding: 14px 12px; border-radius: var(--radius-xl); border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.85); font-weight: 700; font-size: 1rem; cursor: pointer; transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s, box-shadow 0.18s; user-select: none; } .feedback-rating label:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.32); } .feedback-rating input[type="radio"]:focus-visible + label { outline: 2px solid #c4b5fd; outline-offset: 2px; } .feedback-rating input[type="radio"]:checked + label { background: linear-gradient(135deg, #6b46c1 0%, #5B5BD6 100%); border-color: rgba(255, 255, 255, 0.5); color: #fff; box-shadow: 0 8px 24px rgba(91, 91, 214, 0.45); transform: translateY(-1px); } /* Free-text answers + email input — share the same surface treatment so the form reads as one cohesive block. */ .feedback-textarea, .feedback-input { width: 100%; padding: 14px 18px; border-radius: var(--radius-md); border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.06); color: #fff; font-family: inherit; font-size: 0.95rem; line-height: 1.55; outline: none; transition: border-color 0.18s, background 0.18s; -webkit-appearance: none; appearance: none; } .feedback-textarea { min-height: 112px; resize: vertical; } .feedback-textarea::placeholder, .feedback-input::placeholder { color: rgba(255, 255, 255, 0.4); } .feedback-textarea:focus, .feedback-input:focus { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.1); } .feedback-email-help { margin: 8px 0 0; font-size: 0.82rem; line-height: 1.5; color: rgba(255, 255, 255, 0.55); } /* Honeypot — visually removed but still in the accessibility tree as a plain text field. Bots auto-fill it; the BE silently drops anything with a non-empty `website`. */ .honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .feedback-submit { align-self: flex-start; margin-top: 8px; background: #fff; color: #1E1B4B; } .feedback-submit:hover { box-shadow: 0 8px 30px rgba(255, 255, 255, 0.25); } .feedback-submit:disabled { opacity: 0.7; cursor: not-allowed; transform: none; } .feedback-form-error { margin: 16px 0 0; font-size: 0.9rem; color: #fca5a5; line-height: 1.5; } /* Success state — shown by JS after a 200 from /api/v1/feedback. */ .feedback-success { text-align: center; padding: 64px 48px; } .feedback-success-check { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto 24px; border-radius: 50%; background: linear-gradient(135deg, #5eead4 0%, #14b8a6 100%); color: #fff; font-size: 2rem; font-weight: 700; box-shadow: 0 12px 40px rgba(94, 234, 212, 0.4); } @media (max-width: 640px) { .feedback-card { padding: 36px 22px 44px; } .feedback-rating { gap: 8px; } .feedback-rating label { min-width: 48px; padding: 12px 8px; font-size: 0.95rem; } .feedback-success { padding: 48px 24px; } .feedback-submit { align-self: stretch; } }