Spaces:
Running
Running
| /* Hello World — Reachy Mini DevKit Landing Page */ | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| :root { | |
| --bg-dark: #0a0a0f; | |
| --bg-card: #14141f; | |
| --bg-card-hover: #1c1c2e; | |
| --bg-surface: #111118; | |
| --accent: #7c5cfc; | |
| --accent-light: #a78bfa; | |
| --accent-glow: rgba(124, 92, 252, 0.25); | |
| --text: #e2e0ea; | |
| --text-muted: #9490a6; | |
| --text-dim: #6b6681; | |
| --purple: #a855f7; | |
| --blue: #3b82f6; | |
| --green: #22c55e; | |
| --orange: #f59e0b; | |
| --cyan: #06b6d4; | |
| --pink: #ec4899; | |
| --radius: 16px; | |
| --radius-sm: 10px; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; | |
| line-height: 1.6; | |
| color: var(--text); | |
| background: var(--bg-dark); | |
| min-height: 100vh; | |
| } | |
| .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } | |
| /* ── Nav ─────────────────────────────── */ | |
| .nav { | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| background: rgba(10, 10, 15, 0.85); | |
| backdrop-filter: blur(12px); | |
| border-bottom: 1px solid rgba(124, 92, 252, 0.1); | |
| padding: 0.75rem 1.5rem; | |
| } | |
| .nav-inner { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .nav-brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| font-weight: 700; | |
| font-size: 1.1rem; | |
| } | |
| .nav-icon { font-size: 1.4rem; } | |
| .nav-links { | |
| display: flex; | |
| gap: 1.5rem; | |
| } | |
| .nav-links a { | |
| color: var(--text-muted); | |
| text-decoration: none; | |
| font-size: 0.88rem; | |
| font-weight: 500; | |
| transition: color 0.2s; | |
| } | |
| .nav-links a:hover { color: var(--accent-light); } | |
| /* ── Hero (split layout) ────────────── */ | |
| .hero { | |
| position: relative; | |
| padding: 4rem 1.5rem 2rem; | |
| overflow: hidden; | |
| background: radial-gradient(ellipse at 30% 20%, rgba(124, 92, 252, 0.2) 0%, transparent 50%), | |
| radial-gradient(ellipse at 70% 80%, rgba(59, 130, 246, 0.08) 0%, transparent 50%), | |
| var(--bg-dark); | |
| } | |
| .hero-bg { | |
| position: absolute; | |
| inset: 0; | |
| background: repeating-linear-gradient( | |
| 0deg, transparent, transparent 60px, | |
| rgba(124, 92, 252, 0.03) 60px, rgba(124, 92, 252, 0.03) 61px | |
| ), | |
| repeating-linear-gradient( | |
| 90deg, transparent, transparent 60px, | |
| rgba(124, 92, 252, 0.03) 60px, rgba(124, 92, 252, 0.03) 61px | |
| ); | |
| } | |
| .hero-split { | |
| position: relative; | |
| z-index: 1; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| display: grid; | |
| grid-template-columns: 1fr 1.1fr; | |
| gap: 3rem; | |
| align-items: center; | |
| } | |
| .hero-badge { | |
| display: inline-block; | |
| background: rgba(124, 92, 252, 0.15); | |
| border: 1px solid rgba(124, 92, 252, 0.3); | |
| color: var(--accent-light); | |
| padding: 0.3rem 0.9rem; | |
| border-radius: 50px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| letter-spacing: 0.04em; | |
| margin-bottom: 1.25rem; | |
| text-transform: uppercase; | |
| } | |
| .hero h1 { | |
| font-size: 2.8rem; | |
| font-weight: 800; | |
| line-height: 1.15; | |
| margin-bottom: 1rem; | |
| color: #fff; | |
| } | |
| .hero-accent { | |
| background: linear-gradient(135deg, var(--accent-light) 0%, var(--cyan) 100%); | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .hero-tagline { | |
| font-size: 1.05rem; | |
| color: var(--text-muted); | |
| max-width: 520px; | |
| margin-bottom: 1.5rem; | |
| line-height: 1.7; | |
| } | |
| .hero-chips { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.5rem; | |
| margin-bottom: 1.25rem; | |
| } | |
| .chip { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.3rem; | |
| background: rgba(255, 255, 255, 0.06); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: 50px; | |
| padding: 0.3rem 0.75rem; | |
| font-size: 0.78rem; | |
| color: var(--text); | |
| white-space: nowrap; | |
| } | |
| .hero-tech { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.4rem; | |
| } | |
| .tech-tag { | |
| background: rgba(124, 92, 252, 0.12); | |
| border: 1px solid rgba(124, 92, 252, 0.25); | |
| color: var(--accent-light); | |
| padding: 0.2rem 0.6rem; | |
| border-radius: 4px; | |
| font-size: 0.72rem; | |
| font-weight: 600; | |
| font-family: "SF Mono", "Fira Code", "Consolas", monospace; | |
| } | |
| .hero-image { | |
| position: relative; | |
| } | |
| .hero-image img, | |
| .hero-image video { | |
| width: 100%; | |
| border-radius: var(--radius); | |
| border: 1px solid rgba(124, 92, 252, 0.2); | |
| box-shadow: | |
| 0 4px 30px rgba(124, 92, 252, 0.15), | |
| 0 0 80px rgba(124, 92, 252, 0.08); | |
| transition: transform 0.3s; | |
| } | |
| .hero-image img:hover, | |
| .hero-image video:hover { | |
| transform: scale(1.02); | |
| } | |
| /* ── Stats bar ───────────────────────── */ | |
| .stats-bar { | |
| background: var(--bg-surface); | |
| border-top: 1px solid rgba(124, 92, 252, 0.1); | |
| border-bottom: 1px solid rgba(124, 92, 252, 0.1); | |
| padding: 1.5rem 0; | |
| } | |
| .stats-bar .container { | |
| display: flex; | |
| justify-content: center; | |
| gap: 3rem; | |
| flex-wrap: wrap; | |
| } | |
| .stat { text-align: center; min-width: 70px; } | |
| .stat-number { | |
| display: block; | |
| font-size: 2rem; | |
| font-weight: 800; | |
| color: #fff; | |
| line-height: 1.2; | |
| } | |
| .stat-label { | |
| display: block; | |
| font-size: 0.7rem; | |
| color: var(--text-dim); | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| font-weight: 600; | |
| } | |
| /* ── Section headings ────────────────── */ | |
| .section-tag { | |
| font-size: 0.75rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| color: var(--accent-light); | |
| text-align: center; | |
| margin-bottom: 0.4rem; | |
| } | |
| .section-title { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| text-align: center; | |
| margin-bottom: 0.5rem; | |
| color: #fff; | |
| } | |
| .section-subtitle { | |
| text-align: center; | |
| color: var(--text-muted); | |
| font-size: 0.95rem; | |
| margin-bottom: 2.5rem; | |
| } | |
| /* ── Screenshots ─────────────────────── */ | |
| .screenshots { padding: 4rem 0; } | |
| .screenshot-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1.25rem; | |
| margin-top: 1.5rem; | |
| } | |
| .screenshot-card { | |
| position: relative; | |
| border-radius: var(--radius); | |
| overflow: hidden; | |
| border: 1px solid rgba(124, 92, 252, 0.15); | |
| transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; | |
| background: var(--bg-card); | |
| } | |
| .screenshot-card:hover { | |
| transform: translateY(-4px); | |
| border-color: rgba(124, 92, 252, 0.4); | |
| box-shadow: 0 8px 40px rgba(124, 92, 252, 0.12); | |
| } | |
| .screenshot-wide { grid-column: 1 / -1; } | |
| .screenshot-card img, | |
| .screenshot-card video { | |
| width: 100%; | |
| height: auto; | |
| display: block; | |
| } | |
| .screenshot-caption { | |
| padding: 1rem 1.25rem; | |
| background: linear-gradient(transparent, rgba(10, 10, 15, 0.95)); | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| } | |
| .screenshot-caption strong { | |
| display: block; | |
| font-size: 0.95rem; | |
| color: #fff; | |
| } | |
| .screenshot-caption span { | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| } | |
| /* ── Features ─────────────────────────── */ | |
| .features { padding: 4rem 0; } | |
| .feature-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 1rem; | |
| } | |
| .feature-card { | |
| background: var(--bg-card); | |
| border-radius: var(--radius); | |
| padding: 1.75rem; | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| transition: transform 0.2s, border-color 0.2s, background 0.2s; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-2px); | |
| background: var(--bg-card-hover); | |
| } | |
| .feature-card.accent-purple:hover { border-color: var(--purple); } | |
| .feature-card.accent-blue:hover { border-color: var(--blue); } | |
| .feature-card.accent-green:hover { border-color: var(--green); } | |
| .feature-card.accent-orange:hover { border-color: var(--orange); } | |
| .feature-card.accent-cyan:hover { border-color: var(--cyan); } | |
| .feature-card.accent-pink:hover { border-color: var(--pink); } | |
| .feature-icon-wrap { | |
| width: 48px; | |
| height: 48px; | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .accent-purple .feature-icon-wrap { background: rgba(168, 85, 247, 0.12); } | |
| .accent-blue .feature-icon-wrap { background: rgba(59, 130, 246, 0.12); } | |
| .accent-green .feature-icon-wrap { background: rgba(34, 197, 94, 0.12); } | |
| .accent-orange .feature-icon-wrap { background: rgba(245, 158, 11, 0.12); } | |
| .accent-cyan .feature-icon-wrap { background: rgba(6, 182, 212, 0.12); } | |
| .accent-pink .feature-icon-wrap { background: rgba(236, 72, 153, 0.12); } | |
| .feature-card h3 { | |
| font-size: 1.05rem; | |
| margin-bottom: 0.5rem; | |
| color: #fff; | |
| } | |
| .feature-card p { | |
| font-size: 0.88rem; | |
| color: var(--text-muted); | |
| line-height: 1.6; | |
| } | |
| .feature-card p strong { color: var(--text); } | |
| .feature-card p em { color: var(--accent-light); font-style: normal; } | |
| /* ── Tools ────────────────────────────── */ | |
| .tools-section { padding: 4rem 0; } | |
| .tools-grid { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| gap: 0.6rem; | |
| } | |
| .tool-chip { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.4rem; | |
| background: var(--bg-card); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: 50px; | |
| padding: 0.5rem 1rem; | |
| font-size: 0.85rem; | |
| color: var(--text); | |
| transition: border-color 0.2s, background 0.2s; | |
| } | |
| .tool-chip:hover { | |
| border-color: var(--accent); | |
| background: var(--bg-card-hover); | |
| } | |
| .tool-icon { font-size: 1rem; } | |
| /* ── Pipeline ─────────────────────────── */ | |
| .pipeline-section { padding: 4rem 0; } | |
| .pipeline-flow { | |
| display: flex; | |
| align-items: stretch; | |
| justify-content: center; | |
| gap: 0.75rem; | |
| flex-wrap: wrap; | |
| margin: 1.5rem 0; | |
| } | |
| .pipeline-stage { | |
| background: var(--bg-card); | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| border-radius: var(--radius-sm); | |
| padding: 1.25rem; | |
| min-width: 150px; | |
| flex: 1; | |
| max-width: 220px; | |
| text-align: center; | |
| } | |
| .stage-icon { | |
| font-size: 1.5rem; | |
| margin-bottom: 0.4rem; | |
| } | |
| .stage-header { | |
| font-size: 0.75rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| color: var(--accent-light); | |
| margin-bottom: 0.75rem; | |
| } | |
| .stage-body { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.35rem; | |
| } | |
| .provider-tag { | |
| font-size: 0.82rem; | |
| color: var(--text-muted); | |
| padding: 0.2rem 0; | |
| } | |
| .pipeline-arrow { | |
| display: flex; | |
| align-items: center; | |
| font-size: 1.5rem; | |
| color: var(--text-dim); | |
| font-weight: 300; | |
| } | |
| .pipeline-note { | |
| text-align: center; | |
| font-size: 0.85rem; | |
| color: var(--text-dim); | |
| } | |
| .pipeline-note strong { color: var(--accent-light); } | |
| /* ── WebSocket ────────────────────────── */ | |
| .ws-section { padding: 4rem 0; } | |
| .ws-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 1rem; | |
| } | |
| .ws-card { | |
| background: var(--bg-card); | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| border-radius: var(--radius-sm); | |
| padding: 1.25rem; | |
| text-align: center; | |
| } | |
| .ws-card code { | |
| display: block; | |
| font-size: 0.85rem; | |
| color: var(--accent-light); | |
| font-weight: 600; | |
| margin-bottom: 0.5rem; | |
| font-family: "SF Mono", "Fira Code", "Consolas", monospace; | |
| } | |
| .ws-card span { | |
| font-size: 0.8rem; | |
| color: var(--text-dim); | |
| line-height: 1.5; | |
| } | |
| /* ── Getting Started ──────────────────── */ | |
| .getting-started { padding: 4rem 0 5rem; } | |
| .steps-row { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 1.5rem; | |
| margin-top: 1rem; | |
| } | |
| .step { | |
| background: var(--bg-card); | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| border-radius: var(--radius); | |
| padding: 2rem; | |
| text-align: center; | |
| } | |
| .step-number { | |
| width: 44px; | |
| height: 44px; | |
| border-radius: 50%; | |
| background: var(--accent); | |
| color: #fff; | |
| font-size: 1.2rem; | |
| font-weight: 700; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 1rem; | |
| } | |
| .step h3 { | |
| font-size: 1.1rem; | |
| color: #fff; | |
| margin-bottom: 0.5rem; | |
| } | |
| .step code { | |
| display: inline-block; | |
| background: rgba(124, 92, 252, 0.1); | |
| color: var(--accent-light); | |
| padding: 0.3rem 0.75rem; | |
| border-radius: 6px; | |
| font-size: 0.85rem; | |
| font-family: "SF Mono", "Fira Code", "Consolas", monospace; | |
| margin-bottom: 0.5rem; | |
| } | |
| .step p { | |
| font-size: 0.85rem; | |
| color: var(--text-dim); | |
| } | |
| /* ── Footer ───────────────────────────── */ | |
| .footer { | |
| text-align: center; | |
| padding: 2.5rem 1.5rem; | |
| border-top: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .footer p { color: var(--text-dim); font-size: 0.85rem; } | |
| .footer strong { color: var(--text); } | |
| .footer a { color: var(--accent-light); text-decoration: none; } | |
| .footer a:hover { text-decoration: underline; } | |
| .footer-sub { margin-top: 0.5rem; font-size: 0.75rem; opacity: 0.6; } | |
| /* ── Responsive ───────────────────────── */ | |
| @media (max-width: 900px) { | |
| .hero-split { grid-template-columns: 1fr; gap: 2rem; } | |
| .hero h1 { font-size: 2.2rem; } | |
| .hero-image { order: -1; } | |
| .feature-grid { grid-template-columns: 1fr 1fr; } | |
| .ws-grid { grid-template-columns: repeat(2, 1fr); } | |
| .steps-row { grid-template-columns: 1fr; } | |
| .nav-links { display: none; } | |
| } | |
| @media (max-width: 600px) { | |
| .hero { padding: 2rem 1rem 1.5rem; } | |
| .hero h1 { font-size: 1.8rem; } | |
| .stats-bar .container { gap: 1.5rem; } | |
| .stat-number { font-size: 1.5rem; } | |
| .screenshot-grid { grid-template-columns: 1fr; } | |
| .screenshot-wide { grid-column: auto; } | |
| .feature-grid { grid-template-columns: 1fr; } | |
| .ws-grid { grid-template-columns: 1fr; } | |
| .pipeline-flow { flex-direction: column; align-items: center; } | |
| .pipeline-arrow { transform: rotate(90deg); } | |
| .pipeline-stage { max-width: 100%; } | |
| } | |