/* * GoGrab Landing — shared stylesheet * Extracted from index-v13.html on 2026-04-23 (session 377.1). * Consumed by: index.html + features/index.html + features/{build,operate,channels,brain}.html * * Organization: * 1. Base resets, tokens, typography (lines ~1-200) * 2. Background / nebula / starfield (~200-400) * 3. Header, nav, section-map (~400-700) * 4. Hero + typewriter (~700-1000) * 5. Sections, buttons, layout tokens (~1000-1400) * 6. Vitto canvas + capability list (~1400-1700) * 7. Pipelines + feature cards (~1700-2400) * 8. Jarvis, infrastructure, SDK (~2400-3400) * 9. Channels, desktop, VS Code (~3400-4000) * 10. Comparison + CTA + footer + modal (~4000-4637) * * Don't edit this file in a minified state — keep it human-readable so we can diff it. * Adding page-specific styles: prefer scoping with a class on (e.g. .page-build) * over inline styles. See sub-page additions at the very bottom of this file. */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --void: #000000; --deep: #080818; --surface: #0d0d26; --surface-1: rgba(255, 255, 255, 0.04); --surface-2: rgba(255, 255, 255, 0.07); --surface-3: rgba(255, 255, 255, 0.10); --purple: #7c3aed; --purple-l: #a78bfa; --purple-d: #6d28d9; --blue: #3b82f6; --blue-l: #60a5fa; --indigo: #6366f1; --violet: #8b5cf6; --cyan: #06b6d4; --pink: #ec4899; --green: #10b981; --green-l: #34d399; --amber: #f59e0b; --red: #ef4444; --grad-primary: linear-gradient(135deg, #7c3aed, #3b82f6); --grad-ai: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%); --grad-vitto: linear-gradient(135deg, #6366f1, #8b5cf6, #06b6d4); --grad-header: linear-gradient(90deg, #6366f1 0%, #764ba2 50%, #f093fb 100%); --grad-green: linear-gradient(135deg, #10b981, #059669); --grad-text: linear-gradient(135deg, #a78bfa, #60a5fa); --text-1: #ffffff; --text-2: rgba(255, 255, 255, 0.65); --text-3: rgba(255, 255, 255, 0.45); --border: rgba(255, 255, 255, 0.07); --border-2: rgba(255, 255, 255, 0.12); --border-purple: rgba(124, 58, 237, 0.35); --font-display: 'Orbitron', sans-serif; --font-body: 'Inter', -apple-system, sans-serif; --font-mono: 'JetBrains Mono', monospace; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px; --shadow-purple: 0 0 60px rgba(107, 33, 168, 0.4); --shadow-blue: 0 0 60px rgba(59, 130, 246, 0.35); } html { scroll-behavior: smooth; /* overflow-x: clip — prevents horizontal scroll from decorative off-viewport elements (nebula, stars) WITHOUT creating a scroll container that would break position: sticky on descendants. */ overflow-x: clip; } body { font-family: var(--font-body); background: var(--void); color: var(--text-1); min-height: 100vh; /* See html comment above — same reason. */ overflow-x: clip; line-height: 1.65; } /* ===== BACKGROUND SYSTEM ===== */ .bg-layer { position: fixed; inset: 0; z-index: -10; background: radial-gradient(ellipse at 20% 0%, #0f0829 0%, #000010 60%); } .nebula-container { position: fixed; inset: 0; z-index: -9; pointer-events: none; overflow: hidden; } .nebula { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; } .n1 { width: 700px; height: 700px; background: radial-gradient(circle, rgba(124, 58, 237, 0.18) 0%, transparent 70%); top: -200px; right: -100px; animation: drift 35s ease-in-out infinite; } .n2 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, transparent 70%); bottom: 5%; left: -100px; animation: drift 28s ease-in-out infinite reverse; } .n3 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(6, 182, 212, 0.10) 0%, transparent 70%); top: 45%; left: 40%; animation: drift 40s ease-in-out infinite; animation-delay: -15s; } .n4 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(139, 92, 246, 0.12) 0%, transparent 70%); top: 70%; right: 20%; animation: drift 32s ease-in-out infinite; animation-delay: -8s; } @keyframes drift { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(25px, -20px) scale(1.04); } 50% { transform: translate(-15px, 25px) scale(0.96); } 75% { transform: translate(-20px, -10px) scale(1.02); } } /* Stars */ .stars { position: fixed; inset: 0; z-index: -8; pointer-events: none; } .sl { position: absolute; inset: 0; } .sl-s { background-image: radial-gradient(1px 1px at 15px 25px, rgba(255, 255, 255, 0.9), transparent), radial-gradient(1px 1px at 55px 80px, rgba(255, 255, 255, 0.7), transparent), radial-gradient(1px 1px at 95px 35px, rgba(255, 255, 255, 0.8), transparent), radial-gradient(1px 1px at 145px 100px, rgba(255, 255, 255, 0.6), transparent), radial-gradient(1px 1px at 175px 55px, white, transparent); background-size: 200px 200px; animation: twinkle 6s ease-in-out infinite; } .sl-m { background-image: radial-gradient(1.5px 1.5px at 80px 120px, white, transparent), radial-gradient(2px 2px at 220px 60px, rgba(255, 255, 255, 0.9), transparent), radial-gradient(1.5px 1.5px at 160px 180px, rgba(255, 255, 255, 0.8), transparent); background-size: 300px 300px; animation: twinkle 9s ease-in-out infinite; animation-delay: -3s; } @keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* ===== LAYOUT ===== */ .container { max-width: 1320px; margin: 0 auto; padding: 0 28px; overflow: hidden; } section { position: relative; overflow: hidden; } /* ===== HEADER ===== */ header { position: fixed; top: 0; left: 0; right: 0; z-index: 200; padding: 0; background: rgba(5, 5, 20, 0.7); backdrop-filter: blur(24px) saturate(180%); border-bottom: 1px solid var(--border); transition: background 0.3s; } header::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--grad-header); opacity: 0.4; } .header-inner { display: flex; justify-content: space-between; align-items: center; height: 68px; } .logo { display: flex; align-items: center; gap: 16px; text-decoration: none; } /* logo-symbol replaced by .logo-anim-wrap */ .logo-name { font-family: var(--font-body); font-size: 1.1rem; font-weight: 600; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.96); } nav { display: flex; align-items: center; gap: 8px; } .nav-link { color: var(--text-2); text-decoration: none; font-size: 0.9rem; font-weight: 500; padding: 8px 14px; border-radius: var(--radius-sm); transition: color 0.2s, background 0.2s; } .nav-link:hover { color: var(--text-1); background: var(--surface-1); } .nav-badge { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 7px; border-radius: 4px; background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(59, 130, 246, 0.3)); border: 1px solid rgba(124, 58, 237, 0.4); color: var(--purple-l); vertical-align: middle; margin-left: 4px; } .btn-nav { display: inline-flex; align-items: center; gap: 7px; padding: 9px 20px; border-radius: var(--radius-md); border: none; background: var(--grad-primary); color: #fff; font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; cursor: pointer; text-decoration: none; box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4); transition: transform 0.2s, box-shadow 0.2s; } .btn-nav:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(124, 58, 237, 0.55); } /* ===== HERO ===== */ .hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 140px 28px 100px; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 20px; border-radius: 40px; margin-bottom: 36px; background: rgba(99, 102, 241, 0.12); border: 1px solid rgba(99, 102, 241, 0.3); font-size: 0.82rem; font-weight: 600; color: var(--purple-l); letter-spacing: 0.03em; animation: glow-pulse 2.5s ease-in-out infinite; } .eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--purple-l); box-shadow: 0 0 8px var(--purple-l); animation: blink 1.8s ease-in-out infinite; } @keyframes glow-pulse { 0%, 100% { box-shadow: 0 0 15px rgba(99, 102, 241, 0.15); } 50% { box-shadow: 0 0 30px rgba(99, 102, 241, 0.35); } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } } .hero-title { font-family: var(--font-display); font-size: clamp(2.8rem, 8.5vw, 6.5rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 12px; } .hero-title .vitto-name { display: block; background: var(--grad-vitto); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; background-size: 200% 200%; animation: grad-animate 6s ease infinite; } .hero-title .white-line { display: block; background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.75) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-size: 55%; letter-spacing: 0; font-weight: 600; margin-top: 8px; } @keyframes grad-animate { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .hero-typewriter { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 28px; font-family: var(--font-mono); font-size: clamp(0.85rem, 2vw, 1.15rem); color: var(--text-2); max-width: 100%; } .tw-prefix { color: var(--cyan); font-weight: 600; flex-shrink: 0; } /* Wrapper: desktop uses display:contents so layout matches a single flex row */ .tw-text-wrap { display: contents; } .tw-text { color: var(--text-1); font-weight: 500; border-right: 2px solid var(--cyan); padding-right: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: cursor-blink 0.9s step-end infinite; } @keyframes cursor-blink { 0%, 100% { border-right-color: var(--cyan); } 50% { border-right-color: transparent; } } .hero-sub { font-size: clamp(1rem, 2.2vw, 1.3rem); color: var(--text-2); max-width: 700px; margin: 0 auto 52px; line-height: 1.75; } .hero-sub strong { color: var(--amber); font-weight: 600; } .hero-sub em { color: var(--purple-l); font-style: normal; font-weight: 500; } .cta-row { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-bottom: 80px; } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 17px 38px; border-radius: 14px; border: none; font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .btn-glow { background: var(--grad-primary); color: #fff; box-shadow: 0 4px 28px rgba(124, 58, 237, 0.45); position: relative; overflow: hidden; } .btn-glow::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent); transition: left 0.55s ease; } .btn-glow:hover { transform: translateY(-3px); box-shadow: 0 8px 40px rgba(124, 58, 237, 0.6); } .btn-glow:hover::before { left: 100%; } .btn-glass { background: rgba(255, 255, 255, 0.06); color: var(--text-1); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(12px); } .btn-glass:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.3); transform: translateY(-3px); } /* Hero stats */ .hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; width: 100%; max-width: 960px; } @media (max-width: 768px) { .hero-stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 440px) { .hero-stats { grid-template-columns: 1fr 1fr; } } .hstat { background: var(--surface-1); backdrop-filter: blur(16px); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 28px 20px; text-align: center; transition: all 0.25s ease; cursor: default; } .hstat:hover { background: var(--surface-2); border-color: var(--border-purple); transform: translateY(-4px); } .hstat-val { font-family: var(--font-display); font-size: 2.1rem; font-weight: 800; background: var(--grad-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 6px; } .hstat-label { font-size: 0.78rem; color: var(--text-3); font-weight: 500; text-transform: uppercase; letter-spacing: 0.09em; } /* ===== WHAT IS VITTO ===== */ .section { padding: 110px 28px; } .section-inner { max-width: 1280px; margin: 0 auto; } .section-tag { display: inline-block; font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cyan); margin-bottom: 16px; } .section-title { font-family: var(--font-display); font-size: clamp(1.9rem, 4.5vw, 3.3rem); font-weight: 800; margin-bottom: 20px; line-height: 1.15; } .section-sub { color: var(--text-2); font-size: 1.1rem; max-width: 600px; line-height: 1.7; } .text-center { text-align: center; } .mx-auto { margin-left: auto; margin-right: auto; } /* Vitto intro */ .vitto-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-top: 64px; } @media (max-width: 900px) { .vitto-intro-grid { grid-template-columns: 1fr; } } .vitto-glyph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; width: 100%; } .vitto-orb { width: 320px; height: 320px; border-radius: 50%; position: relative; background: radial-gradient(circle at 35% 35%, rgba(99, 102, 241, 0.2) 0%, rgba(124, 58, 237, 0.08) 50%, transparent 70%); border: 1px solid rgba(99, 102, 241, 0.2); display: flex; align-items: center; justify-content: center; animation: orb-breathe 4s ease-in-out infinite; } .vitto-orb::before, .vitto-orb::after { content: ''; position: absolute; border-radius: 50%; border: 1px solid rgba(99, 102, 241, 0.15); animation: ring-spin 12s linear infinite; } .vitto-orb::before { inset: -24px; animation-direction: normal; } .vitto-orb::after { inset: -48px; animation-direction: reverse; animation-duration: 18s; } @keyframes ring-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes orb-breathe { 0%, 100% { box-shadow: 0 0 40px rgba(99, 102, 241, 0.2), 0 0 80px rgba(124, 58, 237, 0.1); } 50% { box-shadow: 0 0 60px rgba(99, 102, 241, 0.35), 0 0 120px rgba(124, 58, 237, 0.18); } } .orb-inner { width: 120px; height: 120px; border-radius: 50%; background: var(--grad-vitto); display: flex; align-items: center; justify-content: center; font-size: 3rem; box-shadow: 0 0 40px rgba(99, 102, 241, 0.5); animation: orb-breathe 4s ease-in-out infinite; } /* Live mood HUD. Replaces floating orb pills; shows what Vitto is expressing */ .vitto-mood-hud { width: 100%; max-width: 340px; padding: 14px 18px 16px; border-radius: var(--radius-xl); background: linear-gradient(145deg, rgba(15, 23, 42, 0.92), rgba(30, 27, 75, 0.55)); border: 1px solid rgba(99, 102, 241, 0.28); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04); text-align: left; } .vitto-mood-hud__row { display: flex; align-items: flex-start; gap: 12px; } .vitto-mood-hud__dot { flex-shrink: 0; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--green-l); box-shadow: 0 0 12px rgba(16, 185, 129, 0.7); animation: hud-pulse 2s ease-in-out infinite; } @keyframes hud-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.65; transform: scale(0.92); } } @media (prefers-reduced-motion: reduce) { .vitto-mood-hud__dot { animation: none; } } .vitto-mood-hud__copy { margin: 0; font-size: 0.88rem; line-height: 1.6; color: var(--text-2); } .vitto-mood-hud__reset { margin-top: 12px; padding: 6px 12px; font-size: 0.75rem; font-weight: 600; font-family: var(--font-display); color: var(--purple-l); background: rgba(124, 58, 237, 0.12); border: 1px solid rgba(124, 58, 237, 0.35); border-radius: 8px; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .vitto-mood-hud__reset:hover { background: rgba(124, 58, 237, 0.2); border-color: rgba(167, 139, 250, 0.5); } .vitto-mood-hud__reset:focus-visible { outline: 2px solid var(--purple-l); outline-offset: 2px; } .vitto-copy h3 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--text-1); margin-bottom: 16px; } .vitto-copy p { color: var(--text-2); margin-bottom: 20px; font-size: 1.02rem; line-height: 1.75; } .vitto-copy strong { color: var(--text-1); font-weight: 600; } .capability-list { list-style: none; display: flex; flex-direction: column; gap: 10px; } .capability-list li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--surface-1); border: 1px solid var(--border); font-size: 0.92rem; color: var(--text-2); transition: all 0.2s ease; } .capability-list li:hover { background: var(--surface-2); border-color: var(--border-purple); color: var(--text-1); } .capability-list li[data-vitto-mood] { cursor: pointer; outline: none; touch-action: manipulation; } .capability-list li[data-vitto-mood]:hover { box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.35), 0 8px 32px rgba(99, 102, 241, 0.12); } .capability-list li[data-vitto-mood]:focus-visible { box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.55), 0 8px 32px rgba(99, 102, 241, 0.15); } .capability-list li.cap-li--pinned { border-color: rgba(167, 139, 250, 0.55); background: rgba(124, 58, 237, 0.08); box-shadow: inset 3px 0 0 var(--purple-l); } .cap-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; } /* One flex child after the icon: avoids orphan ":" / "," in a third column (strong is its own flex item if unwrapped) */ .cap-li__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3em; align-items: flex-start; } .cap-li__text>strong { color: var(--text-1); font-size: 0.98em; } .cap-li__desc { display: block; margin: 0; line-height: 1.55; } /* ===== 4-PHASE PIPELINE ===== */ .pipeline-bg { background: linear-gradient(180deg, transparent 0%, rgba(124, 58, 237, 0.04) 40%, rgba(59, 130, 246, 0.04) 80%, transparent 100%); } .pipeline-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border); margin-top: 64px; } @media (max-width: 900px) { .pipeline-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { .pipeline-grid { grid-template-columns: 1fr; } } .phase-cell { background: var(--surface-1); padding: 36px 28px; position: relative; transition: background 0.3s; } .phase-cell:hover { background: rgba(124, 58, 237, 0.06); } .phase-num { font-family: var(--font-display); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-3); margin-bottom: 10px; } .phase-icon { font-size: 1.8rem; margin-bottom: 14px; display: block; } .phase-name { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--text-1); margin-bottom: 8px; } .phase-desc { font-size: 0.85rem; color: var(--text-2); line-height: 1.65; } .phase-cell::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; opacity: 0; transition: opacity 0.3s; } .phase-cell:hover::before { opacity: 1; } .pc-analyze::before { background: var(--grad-primary); } .pc-plan::before { background: linear-gradient(90deg, var(--indigo), var(--violet)); } .pc-execute::before { background: linear-gradient(90deg, var(--violet), var(--cyan)); } .pc-verify::before { background: var(--grad-green); } /* ===== FEATURES GRID ===== */ .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 64px; } @media (max-width: 1024px) { .features-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .features-grid { grid-template-columns: 1fr; } } .feat-card { background: var(--surface-1); backdrop-filter: blur(16px); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: 36px; position: relative; overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .feat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; opacity: 0; transition: opacity 0.3s; } .feat-card:hover { background: rgba(124, 58, 237, 0.06); border-color: rgba(124, 58, 237, 0.3); transform: translateY(-8px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(124, 58, 237, 0.08); } .feat-card:hover::before { opacity: 1; } .fc-purple::before { background: var(--grad-primary); } .fc-cyan::before { background: linear-gradient(90deg, var(--cyan), var(--blue)); } .fc-violet::before { background: linear-gradient(90deg, var(--violet), var(--pink)); } .fc-green::before { background: var(--grad-green); } .fc-amber::before { background: linear-gradient(90deg, var(--amber), #f97316); } .fc-indigo::before { background: linear-gradient(90deg, var(--indigo), var(--violet)); } .fc-pink::before { background: linear-gradient(90deg, var(--pink), var(--purple)); } .fc-blue::before { background: linear-gradient(90deg, var(--blue), var(--cyan)); } .fc-teal::before { background: linear-gradient(90deg, #0d9488, var(--cyan)); } .feat-ico { width: 60px; height: 60px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 22px; flex-shrink: 0; } .ico-purple { background: linear-gradient(135deg, rgba(124, 58, 237, 0.25), rgba(59, 130, 246, 0.15)); box-shadow: 0 0 24px rgba(124, 58, 237, 0.2); } .ico-cyan { background: linear-gradient(135deg, rgba(6, 182, 212, 0.25), rgba(59, 130, 246, 0.15)); box-shadow: 0 0 24px rgba(6, 182, 212, 0.2); } .ico-violet { background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(236, 72, 153, 0.15)); box-shadow: 0 0 24px rgba(139, 92, 246, 0.2); } .ico-green { background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.15)); box-shadow: 0 0 24px rgba(16, 185, 129, 0.2); } .ico-amber { background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(249, 115, 22, 0.15)); box-shadow: 0 0 24px rgba(245, 158, 11, 0.2); } .ico-indigo { background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(139, 92, 246, 0.15)); box-shadow: 0 0 24px rgba(99, 102, 241, 0.2); } .ico-pink { background: linear-gradient(135deg, rgba(236, 72, 153, 0.25), rgba(124, 58, 237, 0.15)); box-shadow: 0 0 24px rgba(236, 72, 153, 0.2); } .ico-blue { background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(6, 182, 212, 0.15)); box-shadow: 0 0 24px rgba(59, 130, 246, 0.2); } .ico-teal { background: linear-gradient(135deg, rgba(13, 148, 136, 0.25), rgba(6, 182, 212, 0.15)); box-shadow: 0 0 24px rgba(13, 148, 136, 0.2); } .feat-badge { display: inline-block; padding: 3px 9px; border-radius: 6px; font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; } .badge-new { background: rgba(16, 185, 129, 0.15); color: var(--green-l); border: 1px solid rgba(16, 185, 129, 0.3); } .badge-ai { background: rgba(99, 102, 241, 0.15); color: var(--purple-l); border: 1px solid rgba(99, 102, 241, 0.3); } .badge-live { background: rgba(6, 182, 212, 0.15); color: var(--cyan); border: 1px solid rgba(6, 182, 212, 0.3); } .feat-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; } .feat-desc { color: var(--text-2); font-size: 0.88rem; line-height: 1.7; } .feat-detail { display: flex; align-items: center; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-3); } .detail-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .dot-green { background: var(--green-l); box-shadow: 0 0 6px var(--green-l); } .dot-purple { background: var(--purple-l); box-shadow: 0 0 6px var(--purple-l); } .dot-cyan { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); } .dot-amber { background: var(--amber); box-shadow: 0 0 6px var(--amber); } /* ===== SDK SHOWCASE (v10) ===== */ .sdk-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 0; align-items: center; margin-top: 56px; } @media (max-width: 900px) { .sdk-flow { grid-template-columns: 1fr; gap: 24px; } .sdk-flow-arrow { display: none; } } .sdk-step { padding: 32px 28px; border-radius: var(--radius-xl); background: var(--surface-1); border: 1px solid var(--border); text-align: center; transition: all 0.25s ease; } .sdk-step:hover { border-color: var(--border-purple); transform: translateY(-4px); background: var(--surface-2); } .sdk-step-num { font-family: var(--font-display); font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-3); margin-bottom: 12px; } .sdk-step-icon { font-size: 2rem; margin-bottom: 12px; display: block; } .sdk-step-title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; margin-bottom: 8px; } .sdk-step-desc { font-size: 0.84rem; color: var(--text-2); line-height: 1.6; } .sdk-flow-arrow { font-size: 1.4rem; color: var(--text-3); text-align: center; animation: arrow-pulse 2s ease-in-out infinite; } @keyframes arrow-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } .sdk-elements-strip { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 40px; } .sdk-el-chip { padding: 6px 14px; border-radius: 8px; background: var(--surface-1); border: 1px solid var(--border); font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-3); transition: all 0.2s; white-space: nowrap; cursor: default; } .sdk-el-chip:hover { border-color: var(--border-purple); color: var(--purple-l); background: rgba(99, 102, 241, 0.08); } .sdk-el-chip[data-sdk-toggle] { cursor: pointer; user-select: none; position: relative; overflow: hidden; } .sdk-el-chip[data-sdk-toggle]::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(124, 58, 237, 0.3) 0%, transparent 70%); opacity: 0; transition: opacity 0.3s; } .sdk-el-chip[data-sdk-toggle]:active::before { opacity: 1; } .sdk-el-chip.sdk-chip-on { background: rgba(99, 102, 241, 0.15); border-color: rgba(124, 58, 237, 0.5); color: var(--purple-l); box-shadow: 0 0 16px rgba(124, 58, 237, 0.2); } .sdk-el-chip.sdk-chip-locked { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.25); color: var(--green-l); } .sdk-el-chip.sdk-chip-locked::after { content: ' ✓'; font-size: 0.6rem; } /* Toggleable mockup features */ .sdk-feat-toggle { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, margin 0.25s ease; margin-bottom: 0; } .sdk-feat-toggle.sdk-feat-visible { max-height: 200px; opacity: 1; margin-bottom: 16px; } .sdk-feat-glow { animation: sdkFeatGlow 1s ease; } @keyframes sdkFeatGlow { 0% { box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.5), 0 0 20px rgba(124, 58, 237, 0.3); } 100% { box-shadow: none; } } .sdk-search-bar { display: flex; gap: 8px; align-items: center; } .sdk-search-input { flex: 1; padding: 8px 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text-2); font-size: 0.78rem; font-family: var(--font-body); } .sdk-search-input::placeholder { color: rgba(255, 255, 255, 0.2); } .sdk-filter-bar { display: flex; gap: 8px; flex-wrap: wrap; } .sdk-filter-tag { padding: 5px 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.7rem; color: var(--text-3); display: flex; align-items: center; gap: 6px; } .sdk-filter-tag .sdk-ft-dot { width: 6px; height: 6px; border-radius: 50%; } .sdk-breadcrumb-bar { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; color: var(--text-3); } .sdk-breadcrumb-bar span:last-child { color: var(--text-1); } .sdk-stat-bar { height: 3px; border-radius: 2px; margin-top: 8px; background: rgba(255, 255, 255, 0.06); overflow: hidden; } .sdk-stat-bar-fill { height: 100%; border-radius: 2px; transition: width 0.6s ease; } /* v10: live app mockup */ .sdk-app-mockup { margin-top: 56px; border-radius: var(--radius-2xl); border: 1px solid rgba(99, 102, 241, 0.25); overflow: hidden; box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(99, 102, 241, 0.1); background: #0c0c1e; } .sdk-mock-bar { display: flex; align-items: center; gap: 8px; padding: 12px 18px; background: rgba(255, 255, 255, 0.03); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .sdk-mock-bar .tdot { width: 11px; height: 11px; } .sdk-mock-url { flex: 1; margin-left: 8px; padding: 5px 14px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-3); display: flex; align-items: center; gap: 6px; } .sdk-mock-url-lock { color: var(--green-l); font-size: 0.65rem; } .sdk-mock-body { display: grid; grid-template-columns: 200px 1fr; min-height: 400px; } @media (max-width: 768px) { .sdk-mock-body { grid-template-columns: 1fr; } .sdk-mock-sidebar { display: none; } } .sdk-mock-sidebar { background: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0.01) 100%); border-right: 1px solid rgba(255, 255, 255, 0.06); padding: 20px 0; display: flex; flex-direction: column; } .sdk-sb-logo { display: flex; align-items: center; gap: 10px; padding: 0 18px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); margin-bottom: 12px; } .sdk-sb-logo-dot { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, var(--purple), var(--blue)); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; color: #fff; font-weight: 700; } .sdk-sb-logo-name { font-size: 0.78rem; font-weight: 600; color: var(--text-2); } .sdk-sb-item { display: flex; align-items: center; gap: 10px; padding: 9px 18px; font-size: 0.78rem; color: var(--text-3); transition: all 0.15s; cursor: pointer; user-select: none; } .sdk-sb-item.active { color: var(--text-1); background: rgba(99, 102, 241, 0.1); border-left: 2px solid var(--purple-l); } .sdk-sb-item:not(.active):hover { color: var(--text-2); background: rgba(255, 255, 255, 0.02); } .sdk-sb-icon { width: 16px; text-align: center; font-size: 0.8rem; } .sdk-sb-section { font-family: var(--font-display); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255, 255, 255, 0.2); padding: 16px 18px 6px; } .sdk-mock-main { padding: 24px; } .sdk-mock-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .sdk-mock-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--text-1); } .sdk-mock-btn { padding: 7px 16px; border-radius: 8px; border: none; background: var(--grad-primary); color: #fff; font-size: 0.72rem; font-weight: 600; font-family: var(--font-display); cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; } .sdk-mock-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4); } .sdk-mock-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; } @media (max-width: 900px) { .sdk-mock-stats { grid-template-columns: repeat(2, 1fr); } } .sdk-mock-stat { padding: 16px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); } .sdk-mock-stat-val { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; } .sdk-mock-stat-label { font-size: 0.68rem; color: var(--text-3); margin-top: 2px; } .sdk-mock-stat-change { font-size: 0.65rem; font-weight: 600; margin-top: 4px; } .stat-up { color: var(--green-l); } .stat-color-purple .sdk-mock-stat-val { color: var(--purple-l); } .stat-color-cyan .sdk-mock-stat-val { color: var(--cyan); } .stat-color-green .sdk-mock-stat-val { color: var(--green-l); } .stat-color-amber .sdk-mock-stat-val { color: var(--amber); } .sdk-mock-table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.06); } .sdk-mock-table th { text-align: left; padding: 10px 14px; font-family: var(--font-display); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); background: rgba(255, 255, 255, 0.03); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .sdk-mock-table td { padding: 11px 14px; font-size: 0.78rem; color: var(--text-2); border-bottom: 1px solid rgba(255, 255, 255, 0.03); } .sdk-mock-table tr:last-child td { border-bottom: none; } .sdk-mock-table tr:hover td { background: rgba(99, 102, 241, 0.04); } .sdk-tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.65rem; font-weight: 600; } .sdk-tag-won { background: rgba(16, 185, 129, 0.15); color: var(--green-l); } .sdk-tag-active { background: rgba(59, 130, 246, 0.15); color: var(--blue-l); } .sdk-tag-new { background: rgba(139, 92, 246, 0.15); color: var(--purple-l); } .sdk-tag-lost { background: rgba(239, 68, 68, 0.12); color: var(--red); } .sdk-mock-pag { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: 0.7rem; color: var(--text-3); } .sdk-mock-pag-btns { display: flex; gap: 4px; } .sdk-mock-pag-btn { width: 28px; height: 28px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); color: var(--text-3); font-size: 0.68rem; display: flex; align-items: center; justify-content: center; cursor: default; } .sdk-mock-pag-btn.active { background: var(--purple); color: #fff; border-color: var(--purple); } /* Switchable view panels */ .sdk-mock-view { display: none; } .sdk-mock-view.sdk-view-active { display: block; animation: sdkViewIn 0.3s ease; } @keyframes sdkViewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Contacts view */ .sdk-contact-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); transition: background 0.15s; } .sdk-contact-row:last-child { border-bottom: none; } .sdk-contact-row:hover { background: rgba(99, 102, 241, 0.04); } .sdk-contact-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: #fff; flex-shrink: 0; } .sdk-contact-info { flex: 1; min-width: 0; } .sdk-contact-name { font-size: 0.82rem; font-weight: 600; color: var(--text-1); } .sdk-contact-email { font-size: 0.7rem; color: var(--text-3); } .sdk-contact-meta { text-align: right; flex-shrink: 0; } .sdk-contact-deals { font-size: 0.72rem; color: var(--text-2); font-weight: 500; } .sdk-contact-val { font-size: 0.65rem; color: var(--text-3); } /* Pipeline view */ .sdk-pipeline-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 900px) { .sdk-pipeline-cols { grid-template-columns: repeat(2, 1fr); } } .sdk-pipe-col { background: rgba(255, 255, 255, 0.02); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.05); overflow: hidden; } .sdk-pipe-header { padding: 10px 12px; font-family: var(--font-display); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .sdk-pipe-header-count { width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); font-size: 0.6rem; display: flex; align-items: center; justify-content: center; color: var(--text-3); } .sdk-pipe-card { margin: 8px; padding: 10px 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); font-size: 0.75rem; } .sdk-pipe-card-name { font-weight: 600; color: var(--text-1); margin-bottom: 3px; } .sdk-pipe-card-val { color: var(--text-3); font-size: 0.68rem; } /* Settings view */ .sdk-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 640px) { .sdk-settings-grid { grid-template-columns: 1fr; } } .sdk-settings-card { padding: 20px; border-radius: 10px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); } .sdk-settings-card h4 { font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; margin-bottom: 14px; color: var(--text-1); } .sdk-setting-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.03); font-size: 0.78rem; color: var(--text-2); } .sdk-setting-row:last-child { border-bottom: none; } .sdk-toggle { width: 36px; height: 20px; border-radius: 10px; position: relative; cursor: pointer; transition: background 0.2s; flex-shrink: 0; } .sdk-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.2s; } .sdk-toggle-off { background: rgba(255, 255, 255, 0.12); } .sdk-toggle-on { background: var(--purple); } .sdk-toggle-on::after { transform: translateX(16px); } .sdk-input-mock { padding: 7px 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text-2); font-size: 0.75rem; font-family: var(--font-body); min-width: 140px; text-align: right; } /* ═══ SDK interactive layers ═══ */ /* In-mockup modal overlay */ .sdk-modal-overlay { position: absolute; inset: 0; z-index: 10; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s, visibility 0.2s; border-radius: 0 0 var(--radius-2xl) var(--radius-2xl); } .sdk-modal-overlay.sdk-layer-open { opacity: 1; visibility: visible; pointer-events: auto; } .sdk-modal-box { background: linear-gradient(145deg, #111130, #0d0d26); border: 1px solid rgba(99, 102, 241, 0.3); border-radius: 14px; padding: 28px 24px; width: min(92%, 380px); transform: translateY(12px) scale(0.97); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); } .sdk-layer-open .sdk-modal-box { transform: translateY(0) scale(1); } .sdk-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .sdk-modal-header h4 { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; } .sdk-modal-close { width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); border: none; color: var(--text-3); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; } .sdk-modal-close:hover { background: rgba(255, 255, 255, 0.12); color: var(--text-1); } .sdk-form-row { margin-bottom: 14px; } .sdk-form-label { display: block; font-size: 0.68rem; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 5px; } .sdk-form-input { width: 100%; padding: 9px 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-2); font-size: 0.8rem; font-family: var(--font-body); outline: none; transition: border-color 0.15s; } .sdk-form-input:focus { border-color: rgba(99, 102, 241, 0.5); } .sdk-form-input::placeholder { color: rgba(255, 255, 255, 0.2); } .sdk-form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; } .sdk-form-cancel { padding: 8px 16px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-2); font-size: 0.75rem; cursor: pointer; font-family: var(--font-body); } .sdk-form-submit { padding: 8px 18px; border-radius: 8px; background: var(--grad-primary); border: none; color: #fff; font-size: 0.75rem; font-weight: 600; cursor: pointer; font-family: var(--font-display); } /* In-mockup toast */ .sdk-toast-container { position: absolute; bottom: 16px; right: 16px; z-index: 15; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .sdk-toast { padding: 10px 16px; border-radius: 10px; background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.3); color: var(--green-l); font-size: 0.75rem; font-weight: 500; display: flex; align-items: center; gap: 8px; backdrop-filter: blur(12px); transform: translateY(20px); opacity: 0; animation: sdkToastIn 0.3s ease forwards; pointer-events: auto; } @keyframes sdkToastIn { to { transform: translateY(0); opacity: 1; } } .sdk-toast.sdk-toast-out { animation: sdkToastOut 0.3s ease forwards; } @keyframes sdkToastOut { to { transform: translateY(20px); opacity: 0; } } .sdk-toast-icon { font-size: 1rem; } /* Detail slide-out */ .sdk-detail-panel { position: absolute; top: 0; right: 0; bottom: 0; z-index: 8; width: min(360px, 50%); background: linear-gradient(180deg, #111130 0%, #0d0d26 100%); border-left: 1px solid rgba(99, 102, 241, 0.25); padding: 24px; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; box-shadow: -16px 0 48px rgba(0, 0, 0, 0.4); } .sdk-detail-panel.sdk-layer-open { transform: translateX(0); } .sdk-detail-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; } .sdk-detail-title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; } .sdk-detail-sub { font-size: 0.78rem; color: var(--text-3); margin-top: 4px; } .sdk-detail-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); font-size: 0.78rem; } .sdk-detail-label { color: var(--text-3); } .sdk-detail-value { color: var(--text-1); font-weight: 500; } .sdk-mock-badge { position: absolute; top: 12px; right: 12px; padding: 4px 10px; border-radius: 6px; background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.3); color: var(--green-l); font-size: 0.6rem; font-weight: 700; font-family: var(--font-display); letter-spacing: 0.05em; text-transform: uppercase; } /* ===== COMPUTER USE SECTION ===== */ .cu-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-top: 64px; } @media (max-width: 900px) { .cu-layout { grid-template-columns: 1fr; } } .cu-terminal { background: #090912; border-radius: var(--radius-2xl); border: 1px solid rgba(99, 102, 241, 0.2); overflow: hidden; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(99, 102, 241, 0.1); } .terminal-bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; background: rgba(255, 255, 255, 0.03); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .tdot { width: 12px; height: 12px; border-radius: 50%; } .tdot-r { background: #ef4444; } .tdot-y { background: #f59e0b; } .tdot-g { background: #10b981; } .terminal-title { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-3); margin-left: 6px; } .terminal-body { padding: 24px; } .t-line { font-family: var(--font-mono); font-size: 0.8rem; line-height: 2; display: flex; gap: 10px; } .t-prompt { color: var(--purple-l); flex-shrink: 0; } .t-cmd { color: var(--cyan); } .t-out { color: var(--text-2); padding-left: 20px; } .t-ok { color: var(--green-l); font-weight: 600; } .t-step { color: var(--amber); } .t-time { color: var(--text-3); font-size: 0.72rem; margin-left: auto; } .cu-copy h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; margin-bottom: 16px; } .cu-copy p { color: var(--text-2); margin-bottom: 20px; line-height: 1.75; } .cu-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; } .cu-stat { padding: 18px; border-radius: var(--radius-lg); background: var(--surface-1); border: 1px solid var(--border); } .cu-stat-val { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--cyan); } .cu-stat-label { font-size: 0.78rem; color: var(--text-3); margin-top: 4px; } /* ===== DESKTOP APP SECTION ===== */ .desktop-bg { background: linear-gradient(180deg, transparent 0%, rgba(99, 102, 241, 0.04) 50%, transparent 100%); } .desktop-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-top: 64px; } @media (max-width: 900px) { .desktop-layout { grid-template-columns: 1fr; } } .desktop-mockup { position: relative; display: flex; justify-content: center; } .app-window { width: 100%; max-width: 420px; background: linear-gradient(145deg, #0f0f26, #1a1a3e); border-radius: var(--radius-2xl); border: 1px solid rgba(99, 102, 241, 0.25); overflow: hidden; box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 60px rgba(99, 102, 241, 0.15); } .aw-titlebar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: rgba(255, 255, 255, 0.03); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .aw-dots { display: flex; gap: 7px; } .aw-dot { width: 11px; height: 11px; border-radius: 50%; } .aw-label { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-3); } .aw-body { padding: 20px; } .aw-chat { display: flex; flex-direction: column; gap: 12px; } .aw-msg { max-width: 85%; padding: 12px 16px; border-radius: 14px; font-size: 0.82rem; line-height: 1.55; } .aw-msg-user { align-self: flex-end; background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(124, 58, 237, 0.2)); border: 1px solid rgba(99, 102, 241, 0.3); color: var(--text-1); } .aw-msg-vitto { align-self: flex-start; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text-2); } .aw-msg-vitto strong { color: var(--cyan); } .aw-tray { display: flex; align-items: center; gap: 8px; padding: 10px 16px; margin-top: 12px; background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.2); border-radius: var(--radius-md); font-size: 0.75rem; color: var(--green-l); } .desktop-copy h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; margin-bottom: 16px; } .desktop-copy p { color: var(--text-2); margin-bottom: 20px; line-height: 1.75; } .desktop-features { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; } .df { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--radius-md); background: var(--surface-1); border: 1px solid var(--border); font-size: 0.9rem; color: var(--text-2); transition: all 0.2s; } .df:hover { background: var(--surface-2); border-color: var(--border-purple); color: var(--text-1); } .df-icon { font-size: 1.2rem; flex-shrink: 0; } .df strong { color: var(--text-1); font-weight: 600; display: block; font-size: 0.88rem; margin-bottom: 2px; } /* ===== MCP INTELLIGENCE ===== */ .mcp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 64px; } @media (max-width: 1024px) { .mcp-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .mcp-grid { grid-template-columns: 1fr; } } .mcp-card { padding: 28px; border-radius: var(--radius-xl); background: var(--surface-1); border: 1px solid var(--border); transition: all 0.25s ease; } .mcp-card:hover { background: var(--surface-2); border-color: var(--border-purple); transform: translateY(-4px); } .mcp-count { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--purple-l); margin-bottom: 6px; } .mcp-name { font-size: 0.92rem; font-weight: 600; color: var(--text-1); margin-bottom: 6px; } .mcp-desc { font-size: 0.8rem; color: var(--text-3); line-height: 1.5; } .mcp-banner { margin-top: 40px; padding: 36px 40px; background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(124, 58, 237, 0.05)); border: 1px solid rgba(99, 102, 241, 0.2); border-radius: var(--radius-2xl); display: flex; align-items: center; gap: 32px; } @media (max-width: 768px) { .mcp-banner { flex-direction: column; text-align: center; } } .mcp-banner-icon { font-size: 3rem; flex-shrink: 0; } .mcp-banner-text h4 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; } .mcp-banner-text p { color: var(--text-2); font-size: 0.9rem; line-height: 1.65; } .mcp-banner-text p strong { color: var(--purple-l); } /* ===== AI MODELS ===== */ .models-row { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-top: 56px; } .model-chip { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-radius: var(--radius-xl); background: var(--surface-1); border: 1px solid var(--border); transition: all 0.25s ease; } .model-chip:hover { background: var(--surface-2); border-color: var(--border-purple); transform: translateY(-3px); } .model-avatar { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; } .model-name { font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; margin-bottom: 3px; } .model-role { font-size: 0.73rem; color: var(--text-3); } .model-badge { padding: 2px 8px; border-radius: 4px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-left: 4px; } .mb-default { background: rgba(16, 185, 129, 0.15); color: var(--green-l); border: 1px solid rgba(16, 185, 129, 0.3); } .mb-fast { background: rgba(245, 158, 11, 0.15); color: var(--amber); border: 1px solid rgba(245, 158, 11, 0.3); } .mb-max { background: rgba(236, 72, 153, 0.12); color: #f9a8d4; border: 1px solid rgba(236, 72, 153, 0.35); } /* ===== COMPARISON ===== */ .comparison-wrapper { max-width: 1000px; margin: 64px auto 0; border: 1px solid var(--border); border-radius: 28px; overflow: hidden; backdrop-filter: blur(20px); background: var(--surface-1); } .cmp-header { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); } .cmp-col-head { padding: 24px 32px; font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; display: flex; align-items: center; gap: 10px; } .cmp-col-head.trad { color: var(--text-3); background: rgba(255, 255, 255, 0.02); border-right: 1px solid var(--border); } .cmp-col-head.gograb { color: var(--cyan); background: rgba(99, 102, 241, 0.06); } .cmp-body { display: grid; grid-template-columns: 1fr 1fr; } .cmp-col { display: flex; flex-direction: column; } .cmp-col.trad { border-right: 1px solid var(--border); } .cmp-row { padding: 16px 32px; border-bottom: 1px solid var(--border); font-size: 0.88rem; display: flex; align-items: center; gap: 12px; } .cmp-col.trad .cmp-row { color: var(--text-3); } .cmp-col.gograb .cmp-row { color: var(--text-2); } .cmp-icon { font-size: 1rem; flex-shrink: 0; } @media (max-width: 560px) { .cmp-header, .cmp-body { grid-template-columns: 1fr; } .cmp-col.trad { border-right: none; border-bottom: 1px solid var(--border); } .cmp-col-head.trad { border-right: none; border-bottom: 1px solid var(--border); } .comparison-wrapper { border-radius: 16px; } } /* ===== FINAL CTA ===== */ .final-cta { padding: 140px 28px; text-align: center; } .final-inner { max-width: 800px; margin: 0 auto; } .final-title { font-family: var(--font-display); font-size: clamp(2.2rem, 6vw, 4.2rem); font-weight: 900; line-height: 1.15; margin-bottom: 24px; } .final-title span { background: linear-gradient(135deg, var(--amber), #f97316); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .final-sub { color: var(--text-2); font-size: 1.15rem; line-height: 1.7; margin-bottom: 48px; max-width: 560px; margin-left: auto; margin-right: auto; } /* ===== MODAL ===== */ .modal-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s; } .modal-overlay.active { opacity: 1; visibility: visible; } .modal { background: linear-gradient(145deg, rgba(13, 13, 30, 0.97), rgba(8, 8, 24, 0.99)); border: 1px solid rgba(124, 58, 237, 0.3); border-radius: var(--radius-2xl); padding: 48px; max-width: 460px; width: 90%; transform: translateY(24px) scale(0.96); transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 32px 100px rgba(107, 33, 168, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04); } .modal-overlay.active .modal { transform: translateY(0) scale(1); } .modal-close { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border: none; background: rgba(255, 255, 255, 0.08); border-radius: 50%; color: var(--text-2); font-size: 18px; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; } .modal-close:hover { background: rgba(255, 255, 255, 0.15); color: var(--text-1); } .modal-icon { width: 68px; height: 68px; background: linear-gradient(135deg, rgba(124, 58, 237, 0.25), rgba(59, 130, 246, 0.2)); border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 24px; box-shadow: 0 0 30px rgba(124, 58, 237, 0.3); } .modal-title { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; text-align: center; margin-bottom: 10px; } .modal-sub { color: var(--text-2); text-align: center; margin-bottom: 30px; font-size: 0.95rem; line-height: 1.6; } .form-group { margin-bottom: 20px; } .form-input { width: 100%; padding: 15px 18px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--radius-md); color: var(--text-1); font-size: 1rem; font-family: var(--font-body); transition: all 0.2s; outline: none; } .form-input:focus { border-color: var(--purple); background: rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.15); } .form-input::placeholder { color: rgba(255, 255, 255, 0.35); } .btn-submit { width: 100%; padding: 15px; border: none; border-radius: var(--radius-md); cursor: pointer; background: var(--grad-primary); color: #fff; font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; box-shadow: 0 4px 24px rgba(124, 58, 237, 0.4); transition: all 0.25s; } .btn-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 36px rgba(124, 58, 237, 0.55); } .btn-submit:disabled { opacity: 0.6; cursor: not-allowed; } .form-note { color: rgba(255, 255, 255, 0.4); font-size: 0.8rem; text-align: center; margin-top: 16px; } .form-error { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: 8px; padding: 10px 14px; color: #f87171; font-size: 0.85rem; margin-bottom: 14px; display: none; } .form-error.visible { display: block; } .form-success { text-align: center; padding: 16px 0; } .success-icon { width: 76px; height: 76px; background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(6, 182, 212, 0.2)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 36px; margin: 0 auto 20px; animation: success-pulse 2s ease-in-out infinite; } @keyframes success-pulse { 0%, 100% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); } 50% { box-shadow: 0 0 40px rgba(16, 185, 129, 0.5); } } .success-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--green); margin-bottom: 10px; } .success-msg { color: var(--text-2); line-height: 1.65; } /* ===== FOOTER ===== */ footer { padding: 44px 28px; border-top: 1px solid var(--border); } .foot-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; } .foot-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; } .foot-logo-img { position: relative; width: 32px; height: 32px; flex-shrink: 0; isolation: isolate; } .foot-logo-img .logo-ring { width: 32px; height: 32px; } .foot-logo-name { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.94); } .foot-tagline { font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan); } .foot-copy { color: var(--text-3); font-size: 0.8rem; } /* ===== SCROLL REVEAL ===== */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } /* ===== SCROLL INDICATOR ===== */ .scroll-hint { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-3); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; animation: bounce-y 2.2s ease-in-out infinite; } .scroll-mouse { width: 22px; height: 36px; border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 11px; position: relative; } .scroll-mouse::before { content: ''; position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 3px; height: 7px; background: rgba(255, 255, 255, 0.4); border-radius: 2px; animation: scroll-dot 2.2s ease-in-out infinite; } @keyframes bounce-y { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } } @keyframes scroll-dot { 0%, 100% { opacity: 1; top: 7px; } 50% { opacity: 0.3; top: 18px; } } /* ===== MOBILE NAV MENU ===== */ .nav-menu-btn { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-1); cursor: pointer; transition: background 0.2s, border-color 0.2s; } .nav-menu-btn:hover { background: var(--surface-2); border-color: var(--border-2); } .nav-menu-btn svg { width: 22px; height: 22px; transition: transform 0.2s; } .nav-menu-btn[aria-expanded="true"] .nav-menu-top { transform: translateY(6px) rotate(45deg); } .nav-menu-btn[aria-expanded="true"] .nav-menu-mid { opacity: 0; } .nav-menu-btn[aria-expanded="true"] .nav-menu-bot { transform: translateY(-6px) rotate(-45deg); } .nav-menu-line { transform-origin: center; transition: transform 0.25s ease, opacity 0.2s; } .nav-menu-overlay { position: fixed; inset: 0; z-index: 199; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 0; background: rgba(5, 5, 20, 0.92); backdrop-filter: blur(24px) saturate(150%); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; } .nav-menu-overlay::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(99, 102, 241, 0.06) 0%, transparent 30%, transparent 70%, rgba(124, 58, 237, 0.04) 100%); pointer-events: none; } .nav-menu-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; } /* Mobile menu: sheet + scroll (shown when hamburger menu is open) */ .nav-menu-sheet { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 0; flex: 1; max-height: 100%; width: 100%; background: linear-gradient(180deg, rgba(12, 12, 32, 0.98) 0%, rgba(5, 5, 20, 0.99) 100%); border-bottom: 1px solid var(--border); box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.45); } @media (max-width: 900px) { .nav-menu-overlay.active { padding: max(12px, env(safe-area-inset-top, 0px)) 14px max(14px, env(safe-area-inset-bottom, 0px)); justify-content: center; align-items: center; } .nav-menu-sheet { flex: 0 1 auto; max-height: min(90dvh, 880px); max-width: 440px; border-radius: var(--radius-xl); border: 1px solid var(--border-2); border-bottom: 1px solid var(--border-2); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55); overflow: hidden; } } .nav-menu-header { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 14px; border-bottom: 1px solid var(--border); background: rgba(8, 8, 24, 0.92); backdrop-filter: blur(12px); } .nav-menu-title { font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); } .nav-menu-close { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-1); color: var(--text-1); font-size: 1.5rem; line-height: 1; cursor: pointer; transition: background 0.2s, border-color 0.2s; } .nav-menu-close:hover { background: var(--surface-2); border-color: var(--border-2); } .nav-menu-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 12px 16px calc(24px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 4px; } .nav-menu-scroll .nav-link { font-size: 1.1rem; padding: 14px 18px; min-height: 48px; width: 100%; max-width: none; text-align: left; border-radius: var(--radius-md); color: var(--text-2); display: flex; align-items: center; animation: navMenuItemIn 0.3s ease backwards; } .nav-menu-scroll .nav-link:nth-child(1) { animation-delay: 0.02s; } .nav-menu-scroll .nav-link:nth-child(2) { animation-delay: 0.04s; } .nav-menu-scroll .nav-link:nth-child(3) { animation-delay: 0.06s; } .nav-menu-scroll .nav-link:nth-child(4) { animation-delay: 0.08s; } .nav-menu-scroll .nav-link:nth-child(5) { animation-delay: 0.1s; } .nav-menu-scroll .nav-link:nth-child(6) { animation-delay: 0.12s; } .nav-menu-scroll .nav-link:nth-child(7) { animation-delay: 0.14s; } .nav-menu-scroll .nav-link:nth-child(8) { animation-delay: 0.16s; } .nav-menu-scroll .nav-link:nth-child(9) { animation-delay: 0.18s; } .nav-menu-scroll .nav-link:nth-child(10) { animation-delay: 0.2s; } .nav-menu-scroll .nav-link:nth-child(11) { animation-delay: 0.22s; } .nav-menu-scroll .nav-link:nth-child(12) { animation-delay: 0.24s; } .nav-menu-scroll .btn-nav { animation: navMenuItemIn 0.3s ease 0.26s backwards; } @keyframes navMenuItemIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .nav-menu-scroll .nav-link:hover { color: var(--text-1); background: var(--surface-1); } .nav-menu-scroll .btn-nav { margin-top: 12px; padding: 14px 24px; min-height: 48px; font-size: 0.9rem; width: 100%; justify-content: center; } /* ===== RESPONSIVE ===== */ @media (max-width: 900px) { .logo-name { display: none !important; } .nav-desktop { display: none !important; } .nav-menu-btn { display: flex; } } @media (max-width: 768px) { /* Let hero content use full viewport width so typewriter can't expand past the screen */ .hero { padding: 120px 20px 80px; align-items: stretch; } .hero .container { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .hero-eyebrow { font-size: 0.72rem; padding: 7px 14px; text-align: center; } .hero-typewriter { font-size: clamp(0.7rem, 3.2vw, 0.95rem); gap: 8px; flex-direction: column; align-items: stretch; width: 100%; max-width: 100%; min-width: 0; align-self: stretch; } .tw-text-wrap { display: block; flex: none; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; /* 5 lines at line-height 1.45. Fixed box, no vertical jump */ height: 7.25em; max-height: 7.25em; line-height: 1.45; overflow: hidden; overflow-x: hidden; text-align: left; contain: layout; } .hero-typewriter .tw-text { margin: 0; white-space: normal; overflow-wrap: anywhere; word-break: break-word; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-height: 1.45; max-height: none; text-overflow: ellipsis; animation: none; border-right: none; } .orb-visual { width: 240px; height: 240px; } .orb-inner { width: 90px; height: 90px; } .jarvis-banner { padding: 28px; } .cmp-row { padding: 12px 16px; font-size: 0.82rem; } .cmp-col-head { padding: 16px; font-size: 0.82rem; } } @media (max-width: 480px) { .hero { padding: 110px 16px 60px; } .hero-eyebrow { font-size: 0.68rem; padding: 6px 12px; gap: 6px; } .hero-title { font-size: clamp(2.2rem, 12vw, 3.5rem); } .hero-title .white-line { font-size: 50%; } .hero-typewriter { font-size: 0.72rem; gap: 6px; } .tw-text-wrap { height: 7.25em; max-height: 7.25em; } .hero-sub { font-size: 0.9rem; margin-bottom: 36px; } .cta-row { flex-direction: column; width: 100%; } .btn { width: 100%; justify-content: center; } .header-inner { flex-wrap: wrap; gap: 12px; height: auto; padding: 12px 0; } .btn-nav { padding: 8px 14px; font-size: 0.75rem; } .jarvis-banner { padding: 20px; } .container { padding: 0 16px; } } @media (max-width: 360px) { .hero-typewriter { font-size: 0.65rem; } .hero-eyebrow { font-size: 0.62rem; letter-spacing: 0; } } /* ===== ANIMATED LOGO ===== */ /* Wrapper is exactly 48×48. Spacing (gap) keeps animation clear of text */ .logo-anim-wrap { position: relative; width: 48px; height: 48px; flex-shrink: 0; isolation: isolate; } /* Sonar rings: pulse within logo bounds only */ .logo-ring { position: absolute; inset: 0; margin: auto; /* centre inside wrapper */ width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(167, 139, 250, 0.22); pointer-events: none; transform-origin: center; } .lr1 { animation: logoSonarPulse 5.5s ease-out infinite; } .lr2 { animation: logoSonarPulse 5.5s ease-out 1.85s infinite; } .lr3 { animation: logoSonarPulse 5.5s ease-out 3.7s infinite; } /* SVG. Animation stays within bounds via subtle motion */ .logo-anim-svg { width: 48px; height: 48px; display: block; overflow: visible; position: relative; z-index: 1; filter: drop-shadow(0 0 6px rgba(124, 58, 237, 0.55)) drop-shadow(0 0 2px rgba(96, 165, 250, 0.25)); } /* Spiral. Rotation via SVG animateTransform (rotate angle cx cy) = no CSS drift */ #logo-gspace { /* No CSS transform; SVG animateTransform handles rotation with explicit center (0,0) */ } #logo-eye-group { animation: logoEyeHeartbeat 4s cubic-bezier(0.4, 0, 0.6, 1) infinite; } /* Sonar rings. Pulse within bounds, never exceed container */ @keyframes logoSonarPulse { 0% { transform: scale(0.88); opacity: 0.22; } 100% { transform: scale(0.98); opacity: 0; } } @keyframes logoEyeHeartbeat { 0%, 100% { filter: drop-shadow(0 0 2px rgba(167, 139, 250, 0.2)); opacity: 0.9; } 50% { filter: drop-shadow(0 0 5px rgba(167, 139, 250, 0.7)); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .logo-ring, #logo-eye-group { animation: none; } } /* ===== GRADIENT DIVIDER ===== */ .divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent); margin: 0; } /* ===== JARVIS SECTION ===== */ .jarvis-bg { background: linear-gradient(180deg, transparent 0%, rgba(16, 185, 129, 0.03) 40%, rgba(99, 102, 241, 0.04) 80%, transparent 100%); } .jarvis-headline { font-family: var(--font-display); font-size: clamp(1.9rem, 4.5vw, 3.3rem); font-weight: 800; line-height: 1.15; margin-bottom: 20px; } .jarvis-headline .accent { color: var(--green-l); } .jarvis-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; } @media (max-width: 960px) { .jarvis-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .jarvis-cards { grid-template-columns: 1fr; } } .jarvis-card { padding: 28px; border-radius: var(--radius-xl); background: var(--surface-1); border: 1px solid var(--border); transition: all 0.25s ease; position: relative; overflow: hidden; } .jarvis-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--grad-green); opacity: 0; transition: opacity 0.3s; } .jarvis-card:hover { background: rgba(16, 185, 129, 0.05); border-color: rgba(16, 185, 129, 0.25); transform: translateY(-5px); } .jarvis-card:hover::before { opacity: 1; } .jc-icon { font-size: 1.8rem; margin-bottom: 14px; display: block; } .jc-title { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; margin-bottom: 8px; } .jc-desc { font-size: 0.84rem; color: var(--text-2); line-height: 1.65; } .jarvis-banner { margin-top: 48px; padding: 48px; background: linear-gradient(135deg, rgba(16, 185, 129, 0.07) 0%, rgba(99, 102, 241, 0.06) 50%, rgba(6, 182, 212, 0.05) 100%); border: 1px solid rgba(16, 185, 129, 0.2); border-radius: var(--radius-2xl); display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } @media (max-width: 768px) { .jarvis-banner { grid-template-columns: 1fr; gap: 28px; } } .jb-quote { font-family: var(--font-display); font-size: clamp(1.3rem, 3vw, 2rem); font-weight: 700; line-height: 1.3; color: var(--text-1); } .jb-quote .hi { color: var(--green-l); } .jb-body p { color: var(--text-2); font-size: 0.95rem; line-height: 1.75; margin-bottom: 14px; } .jb-body strong { color: var(--text-1); } /* ===== CHANNELS SECTION ===== */ .channels-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; } @media (max-width: 960px) { .channels-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .channels-grid { grid-template-columns: 1fr; } } .ch-card { display: flex; align-items: flex-start; gap: 16px; padding: 24px; border-radius: var(--radius-xl); background: var(--surface-1); border: 1px solid var(--border); transition: all 0.25s ease; } .ch-card:hover { background: var(--surface-2); border-color: var(--border-purple); transform: translateY(-4px); } .ch-avatar { width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; } .ch-name { font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; margin-bottom: 5px; } .ch-desc { font-size: 0.82rem; color: var(--text-2); line-height: 1.6; } .ch-status { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: 4px; } .cs-live { background: rgba(16, 185, 129, 0.15); color: var(--green-l); border: 1px solid rgba(16, 185, 129, 0.3); } .cs-coming { background: rgba(245, 158, 11, 0.12); color: var(--amber); border: 1px solid rgba(245, 158, 11, 0.25); } .channels-cta { margin-top: 40px; padding: 36px 40px; background: var(--surface-1); border: 1px solid var(--border-purple); border-radius: var(--radius-2xl); text-align: center; } .channels-cta h4 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; margin-bottom: 10px; } .channels-cta p { color: var(--text-2); font-size: 0.92rem; max-width: 560px; margin: 0 auto; line-height: 1.65; } .channels-cta p strong { color: var(--purple-l); } /* ===== v7: Vitto canvas embed (vitto-engine IIFE) ===== */ /* Transparent canvas: no mood-colored plate behind the character */ .vitto-orb.vitto-orb--embed { background: transparent; border: none; box-shadow: none; animation: none; min-width: 300px; min-height: 300px; padding: 24px; --orb-ring: rgba(99, 102, 241, 0.28); } .vitto-orb.vitto-orb--embed::before, .vitto-orb.vitto-orb--embed::after { opacity: 0.45; border-color: var(--orb-ring); transition: border-color 0.35s ease, opacity 0.35s ease; } .vitto-embed-wrap { position: relative; z-index: 1; filter: drop-shadow(0 0 36px rgba(99, 102, 241, 0.45)); transition: filter 0.35s ease; } .vitto-live-canvas { display: block; max-width: 100%; height: auto; border-radius: 22px; cursor: crosshair; background: transparent; } /* Infrastructure & spaces (v7) */ .infra-bg { background: linear-gradient(180deg, rgba(6, 182, 212, 0.06) 0%, transparent 55%); } .infra-grid-v7 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; } @media (max-width: 900px) { .infra-grid-v7 { grid-template-columns: 1fr; } } .infra-card-v7 { padding: 28px 24px; border-radius: var(--radius-xl); background: var(--surface-1); border: 1px solid var(--border); transition: border-color 0.2s, transform 0.2s; } .infra-card-v7:hover { border-color: rgba(6, 182, 212, 0.35); transform: translateY(-3px); } .infra-card-v7 h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; margin-bottom: 12px; color: var(--text-1); } .infra-card-v7 p { font-size: 0.94rem; color: var(--text-2); line-height: 1.65; } .spaces-bg { background: linear-gradient(180deg, rgba(124, 58, 237, 0.07) 0%, rgba(59, 130, 246, 0.04) 50%, transparent 100%); } .spaces-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; margin-top: 48px; } @media (max-width: 900px) { .spaces-split { grid-template-columns: 1fr; } } .whistle-callout { margin-top: 36px; padding: 28px 32px; border-radius: var(--radius-2xl); border: 1px solid rgba(236, 72, 153, 0.25); background: rgba(236, 72, 153, 0.06); } .whistle-callout h3 { font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 12px; color: var(--text-1); } .whistle-callout p { color: var(--text-2); font-size: 0.95rem; line-height: 1.7; } .device-live-bg { background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 27, 75, 0.5) 100%); } .device-live-content { margin-top: 40px; } .device-live-copy { max-width: 720px; margin-bottom: 28px; } .device-shots-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; } @media (max-width: 900px) { .device-shots-row { grid-template-columns: 1fr; } } .device-shot-frame { border-radius: var(--radius-2xl); overflow: hidden; border: 1px solid var(--border-purple); background: var(--surface); box-shadow: var(--shadow-purple); } .device-shot-frame img { display: block; width: 100%; height: auto; vertical-align: middle; } .device-shot-caption { padding: 14px 18px; font-size: 0.82rem; color: var(--text-3); border-top: 1px solid var(--border); } /* v8: urgency + Space blueprint + IDE power */ .hero-urgency { max-width: 680px; margin: -32px auto 44px; padding: 18px 22px; border-radius: var(--radius-xl); background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(6, 182, 212, 0.08)); border: 1px solid rgba(124, 58, 237, 0.28); font-size: 0.95rem; color: var(--text-2); line-height: 1.65; text-align: center; } .hero-urgency strong { color: var(--amber); font-weight: 600; } .urgency-pill { display: inline-block; font-family: var(--font-display); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px; border-radius: 6px; margin-right: 10px; background: rgba(245, 158, 11, 0.2); border: 1px solid rgba(245, 158, 11, 0.45); color: var(--amber); vertical-align: middle; } .space-blueprint-bg { background: linear-gradient(180deg, rgba(88, 28, 135, 0.12) 0%, rgba(15, 23, 42, 0.4) 45%, transparent 100%); } .blueprint-lede { font-size: 1.15rem; color: var(--text-2); line-height: 1.8; max-width: 920px; margin: 0 auto 40px; text-align: center; } .blueprint-lede strong { color: var(--text-1); } .blueprint-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 8px; } @media (max-width: 900px) { .blueprint-grid { grid-template-columns: 1fr; } } .blueprint-card { padding: 28px 26px; border-radius: var(--radius-xl); background: var(--surface-1); border: 1px solid var(--border); transition: border-color 0.2s, transform 0.2s; } .blueprint-card:hover { border-color: rgba(167, 139, 250, 0.35); transform: translateY(-3px); } .blueprint-card h3 { font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; margin-bottom: 12px; color: var(--text-1); } .blueprint-card p { font-size: 0.94rem; color: var(--text-2); line-height: 1.72; } .blueprint-foot { margin-top: 40px; padding: 24px 28px; border-radius: var(--radius-2xl); border: 1px solid rgba(6, 182, 212, 0.25); background: rgba(6, 182, 212, 0.06); text-align: center; } .blueprint-foot p { color: var(--text-2); font-size: 0.98rem; line-height: 1.75; max-width: 800px; margin: 0 auto; } .blueprint-foot strong { color: var(--cyan); } .vscode-power-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin-top: 48px; } @media (max-width: 900px) { .vscode-power-grid { grid-template-columns: 1fr; } } .vscode-list { list-style: none; margin: 0; padding: 0; } .vscode-list li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 0.92rem; color: var(--text-2); line-height: 1.55; } .vscode-list li:last-child { border-bottom: none; } .vscode-list .vl-ico { flex-shrink: 0; font-size: 1.1rem; margin-top: 2px; } .final-cta .final-sub strong { color: var(--amber); } /* ===== v9: SECTION MAP. Floating mega-nav panel ===== */ /* "Sections" trigger in top nav */ .nav-map-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--radius-sm); background: var(--surface-1); border: 1px solid var(--border); color: var(--text-2); font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.2s; } .nav-map-trigger:hover, .nav-map-trigger[aria-expanded="true"] { background: var(--surface-2); border-color: var(--border-purple); color: var(--text-1); } .nav-map-trigger svg { width: 16px; height: 16px; opacity: 0.7; transition: transform 0.25s ease; } .nav-map-trigger[aria-expanded="true"] svg { transform: rotate(180deg); } /* The floating panel */ .section-map-panel { position: fixed; top: 76px; left: 50%; transform: translateX(-50%) translateY(-8px); width: min(96vw, 820px); z-index: 198; padding: 28px 32px 24px; background: rgba(10, 10, 30, 0.96); backdrop-filter: blur(32px) saturate(160%); border: 1px solid rgba(99, 102, 241, 0.22); border-radius: var(--radius-2xl); box-shadow: 0 32px 80px rgba(0, 0, 0, 0.65), 0 0 60px rgba(99, 102, 241, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; } .section-map-panel.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .section-map-panel::before { content: ''; position: absolute; top: -1px; left: 24px; right: 24px; height: 1px; background: var(--grad-header); opacity: 0.5; border-radius: 1px; } /* Three-column grid inside */ .smap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 20px; } @media (max-width: 640px) { .smap-grid { grid-template-columns: 1fr 1fr; } } .smap-group-label { grid-column: 1 / -1; font-family: var(--font-display); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); padding: 16px 0 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .smap-group-label:first-child { padding-top: 0; } .smap-link { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius-md); text-decoration: none; transition: all 0.15s; color: var(--text-2); } .smap-link:hover { background: rgba(99, 102, 241, 0.1); color: var(--text-1); } .smap-link:focus-visible { outline: 2px solid var(--purple-l); outline-offset: -2px; } .smap-ico { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; background: var(--surface-2); border: 1px solid var(--border); transition: border-color 0.15s; } .smap-link:hover .smap-ico { border-color: rgba(99, 102, 241, 0.35); } .smap-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .smap-name { font-size: 0.82rem; font-weight: 600; color: inherit; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .smap-hint { display: block; font-size: 0.7rem; color: var(--text-3); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Floating scroll-spy indicator (right edge, large screens only) */ .scroll-spy { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 120; display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .scroll-spy.visible { opacity: 1; pointer-events: auto; } .spy-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.08); cursor: pointer; transition: all 0.25s; position: relative; } .spy-dot:hover { background: rgba(167, 139, 250, 0.35); border-color: rgba(167, 139, 250, 0.5); transform: scale(1.25); } .spy-dot.active { background: var(--purple-l); border-color: var(--purple-l); box-shadow: 0 0 10px rgba(167, 139, 250, 0.5); width: 10px; height: 10px; } .spy-dot::before { content: attr(data-label); position: absolute; right: 18px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-family: var(--font-body); font-size: 0.68rem; font-weight: 500; color: var(--text-3); background: rgba(10, 10, 30, 0.9); padding: 3px 8px; border-radius: 4px; border: 1px solid var(--border); opacity: 0; pointer-events: none; transition: opacity 0.15s; } .spy-dot:hover::before { opacity: 1; } .spy-dot.active::before { color: var(--purple-l); } @media (max-width: 1200px) { .scroll-spy { display: none; } } @media (max-width: 900px) { .section-map-panel { display: none; } } /* ══════════════════════════════════════════════════════════════════════════ SUB-PAGE ADDITIONS (appended 2026-04-23, S377.1) Styles shared across /features/* pages. Kept at the bottom so any existing tokens above remain single-source-of-truth. ══════════════════════════════════════════════════════════════════════════ */ /* Feature-hub sub-nav tab bar (sits under the fixed header on /features/* pages). v15: always sticky, always single row. On wide screens it centers its chips. On narrow screens it becomes a horizontally-scrollable track with a right-edge fade to signal "more behind this fade". Sticky top uses --header-height (set by landing.js syncHeaderHeight) so the subnav always aligns with the real header bottom on any viewport. Fallback is 72px for the brief moment before JS runs. */ .feat-subnav { position: -webkit-sticky; position: sticky; top: var(--header-height, 72px); z-index: 50; background: rgba(10, 10, 20, 0.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding: 14px 0; } .feat-subnav-inner { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; } .feat-subnav-link { flex-shrink: 0; /* Don't shrink chips inside the scroll track */ } .feat-subnav-link { color: var(--text-2); text-decoration: none; font-size: 0.88rem; font-weight: 500; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.06); transition: all 0.2s ease; white-space: nowrap; } .feat-subnav-link:hover { color: var(--text-1); background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.14); } .feat-subnav-link.active { color: var(--text-1); background: rgba(124, 58, 237, 0.18); border-color: rgba(124, 58, 237, 0.35); } .feat-subnav-label { font-family: var(--font-display); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); margin-right: 10px; } /* Feature-page hero (smaller than homepage hero) */ .feat-page-hero { padding: 140px 0 60px; text-align: center; position: relative; z-index: 2; } .feat-page-hero .section-tag { margin-bottom: 20px; } .feat-page-hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0 auto 20px; max-width: 820px; background: linear-gradient(135deg, #fff, #c4b5fd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .feat-page-hero p { font-size: 1.1rem; line-height: 1.7; color: var(--text-2); max-width: 720px; margin: 0 auto; } /* Back-to-home breadcrumb */ .feat-crumb { display: inline-flex; align-items: center; gap: 8px; color: var(--text-3); text-decoration: none; font-size: 0.85rem; font-weight: 500; margin-bottom: 20px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.06); transition: all 0.2s ease; } .feat-crumb:hover { color: var(--text-1); border-color: rgba(255, 255, 255, 0.14); } /* Related-pages footer (on each sub-page) */ .related-pages { margin-top: 60px; padding: 40px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); } .related-pages h3 { font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); margin-bottom: 20px; text-align: center; } .related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; max-width: 900px; margin: 0 auto; } .related-card { display: block; padding: 22px 24px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px; text-decoration: none; transition: all 0.2s ease; } .related-card:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(124, 58, 237, 0.25); transform: translateY(-2px); } .related-card h4 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--text-1); margin-bottom: 6px; } .related-card p { font-size: 0.88rem; color: var(--text-2); line-height: 1.55; margin: 0; } /* Pillar-overview block on homepage (links out to sub-pages) */ .pillar-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 32px; } .pillar-card { display: flex; flex-direction: column; padding: 28px 26px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 16px; transition: all 0.25s ease; } .pillar-card:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(124, 58, 237, 0.28); transform: translateY(-3px); } .pillar-card-icon { font-size: 2rem; margin-bottom: 14px; } .pillar-card h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--text-1); margin-bottom: 10px; } .pillar-card p { font-size: 0.95rem; color: var(--text-2); line-height: 1.65; margin-bottom: 18px; flex: 1; } .pillar-card-link { color: var(--purple-l); text-decoration: none; font-weight: 600; font-size: 0.92rem; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s ease; } .pillar-card-link:hover { gap: 10px; } /* Narrow-screen subnav: horizontal scroll, no wrap, right-edge fade. Trigger a bit wider than the typical mobile breakpoint so tablet/landscape and narrow desktop windows get the scroll behavior before chips overflow. The .feat-subnav stays sticky at top: 64px (header shrinks on mobile). */ @media (max-width: 900px) { .feat-subnav { /* Sticky top uses --header-height from JS; no hardcoded override here. IMPORTANT: do NOT set overflow on this element — it would make .feat-subnav its own scroll container and break its own sticky. The ::after fade is absolute-positioned within the bounds already. */ padding: 12px 0; position: -webkit-sticky; position: sticky; } .feat-subnav::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 40px; pointer-events: none; background: linear-gradient( to right, rgba(10, 10, 20, 0) 0%, rgba(10, 10, 20, 0.85) 100% ); z-index: 1; } .feat-subnav-inner { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; /* Extra room past the last chip so users see "scroll still works here" */ padding-right: 48px; /* Smooth momentum scroll on iOS */ -webkit-overflow-scrolling: touch; /* Hide scrollbar visually; keep functional */ scrollbar-width: none; -ms-overflow-style: none; } .feat-subnav-inner::-webkit-scrollbar { display: none; } .feat-subnav-label { display: none; } .feat-page-hero { padding: 110px 0 40px; } } /* ══════════════════════════════════════════════════════════════════════════ VIEW TRANSITIONS · smooth cross-document navigation (Chrome/Edge). Browsers that don't support this just do normal navigation — safe fallback. ══════════════════════════════════════════════════════════════════════════ */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } /* ══════════════════════════════════════════════════════════════════════════ NAMED VIEW TRANSITIONS — smoothes cross-document navigation by morphing between same-named elements instead of fading the whole page. Works in Chromium (Chrome, Edge, Arc, Opera, Brave). Other browsers ignore these properties. Only applied to elements that exist on every page (persistent shell). Uniqueness requirement: each name must be unique per document. ══════════════════════════════════════════════════════════════════════════ */ header { view-transition-name: site-header; } header .logo { view-transition-name: site-logo; } header .nav-desktop { view-transition-name: site-nav; } footer { view-transition-name: site-footer; } footer .foot-logo { view-transition-name: site-foot-logo; } /* Feat-subnav exists on feature pages but not on homepage. When present on both old and new, it morphs. When present on only one side, it cross-fades per default view-transition behaviour. */ .feat-subnav { view-transition-name: feat-subnav; } /* ═══════════════════════════════════════════════════════════════════ v16 SDK demo — multi-view polish (Contacts, Pipeline, Settings) ═══════════════════════════════════════════════════════════════════ */ /* Sidebar items: make hover/active feel interactive */ .sdk-sb-item[role="button"] { cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .sdk-sb-item[role="button"]:hover:not(.active) { background: rgba(255, 255, 255, 0.04); color: var(--text-1); } .sdk-sb-item[role="button"]:focus-visible { outline: 2px solid rgba(167, 139, 250, 0.5); outline-offset: -2px; } /* Dynamic URL path in mock browser bar */ #sdkUrlPath { transition: opacity 0.18s ease; } /* Contacts table — avatar chip */ .sdk-avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; font-size: 0.6rem; font-weight: 700; color: #fff; margin-right: 10px; vertical-align: middle; letter-spacing: 0.02em; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); } /* Pipeline kanban */ .sdk-kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 4px 0 4px; } .sdk-kanban-col { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 180px; } .sdk-kanban-col-head { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); padding-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .sdk-kanban-col-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .sdk-kanban-col-count { margin-left: auto; color: var(--text-3); font-weight: 600; letter-spacing: 0; } .sdk-kanban-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 8px; padding: 10px 12px; cursor: grab; transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease; } .sdk-kanban-card:hover { transform: translateY(-1px); border-color: rgba(167, 139, 250, 0.35); background: rgba(167, 139, 250, 0.06); } .sdk-kanban-card-title { font-size: 0.78rem; font-weight: 600; color: var(--text-1); margin-bottom: 3px; } .sdk-kanban-card-sub { font-size: 0.68rem; color: var(--text-3); } .sdk-kanban-card-won { background: linear-gradient(135deg, rgba(52, 211, 153, 0.08), rgba(52, 211, 153, 0.02)); border-color: rgba(52, 211, 153, 0.35); } /* Settings form */ .sdk-settings-form { max-width: 560px; display: grid; gap: 16px; padding: 4px 2px; } .sdk-settings-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 14px; background: rgba(124, 58, 237, 0.05); border: 1px solid rgba(124, 58, 237, 0.15); border-radius: 10px; } .sdk-settings-toggle-title { color: var(--text-1); font-weight: 500; font-size: 0.82rem; } .sdk-settings-toggle-sub { color: var(--text-3); font-size: 0.68rem; margin-top: 3px; } .sdk-settings-toggle { width: 40px; height: 22px; background: rgba(255, 255, 255, 0.08); border-radius: 11px; position: relative; cursor: pointer; transition: background 0.18s ease; flex-shrink: 0; } .sdk-settings-toggle span { position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left 0.18s ease; } .sdk-settings-toggle.sdk-settings-toggle-on { background: linear-gradient(90deg, #7c3aed, #6366f1); } .sdk-settings-toggle.sdk-settings-toggle-on span { left: 20px; } /* Mobile: kanban stacks to single column */ @media (max-width: 720px) { .sdk-kanban { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════════ v16 SDK capability rail · Apple-style named pillars ═══════════════════════════════════════════════════════════════════ */ .sdk-capability-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1040px; margin: 36px auto 0; padding: 28px 26px; background: linear-gradient(135deg, rgba(124, 58, 237, 0.06), rgba(99, 102, 241, 0.03)); border: 1px solid rgba(124, 58, 237, 0.18); border-radius: 16px; text-align: left; } .sdk-cap { padding: 4px 10px 4px 14px; border-left: 2px solid rgba(167, 139, 250, 0.3); } .sdk-cap-name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; background: linear-gradient(135deg, #a78bfa, #60a5fa); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 0.01em; line-height: 1.15; margin-bottom: 10px; } .sdk-cap-claim { font-size: 0.88rem; color: var(--text-1); line-height: 1.5; font-weight: 500; margin-bottom: 10px; } .sdk-cap-spec { font-size: 0.7rem; color: var(--text-3); line-height: 1.55; letter-spacing: 0.01em; } .sdk-cap-spec em { color: var(--purple-l); font-style: normal; font-weight: 600; } .sdk-tagline { max-width: 820px; margin: 28px auto 0; font-size: 1rem; line-height: 1.7; color: var(--text-1); font-weight: 500; text-align: center; } @media (max-width: 960px) { .sdk-capability-rail { grid-template-columns: repeat(2, 1fr); gap: 18px; padding: 22px 18px; } } @media (max-width: 520px) { .sdk-capability-rail { grid-template-columns: 1fr; } .sdk-cap-name { font-size: 1rem; } .sdk-cap-claim { font-size: 0.82rem; } }