Spaces:
Running
Running
| /* Reachy Conv — Space front page | |
| * | |
| * Cyberpunk theme that mirrors the dashboard (cyberpunk.css). | |
| * Design tokens are kept in lock-step with the dashboard so the | |
| * landing page and the in-app UI feel like the same product. | |
| */ | |
| :root { | |
| --bg: #07070d; | |
| --bg-1: #0a0a14; | |
| --bg-2: #11111d; | |
| --line: #1a1a2c; | |
| --line-2: #232340; | |
| --text: #d6d6f0; | |
| --muted: #6b6b8a; | |
| --cyan: #00fff5; | |
| --pink: #ff2e88; | |
| --green: #5cffb1; | |
| --yellow: #ffe14a; | |
| --red: #ff5566; | |
| --shadow-cyan: 0 0 12px rgba(0, 255, 245, 0.45), 0 0 32px rgba(0, 255, 245, 0.15); | |
| --shadow-pink: 0 0 12px rgba(255, 46, 136, 0.45), 0 0 32px rgba(255, 46, 136, 0.15); | |
| --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; | |
| } | |
| * { box-sizing: border-box; } | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| background: var(--bg); | |
| color: var(--text); | |
| font-family: var(--mono); | |
| font-size: 14px; | |
| line-height: 1.55; | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| body { | |
| background: | |
| radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 255, 245, 0.08), transparent 70%), | |
| radial-gradient(ellipse 60% 40% at 100% 100%, rgba(255, 46, 136, 0.08), transparent 70%), | |
| var(--bg); | |
| } | |
| a { color: var(--cyan); text-decoration: none; } | |
| a:hover { text-shadow: 0 0 6px var(--cyan); } | |
| /* ---- scanlines overlay (subtle; same recipe as dashboard) -------------- */ | |
| .scanlines { | |
| pointer-events: none; | |
| position: fixed; | |
| inset: 0; | |
| z-index: 9999; | |
| background: repeating-linear-gradient( | |
| to bottom, | |
| rgba(255, 255, 255, 0.02) 0px, | |
| rgba(255, 255, 255, 0.02) 1px, | |
| transparent 1px, | |
| transparent 3px | |
| ); | |
| mix-blend-mode: overlay; | |
| opacity: 0.5; | |
| } | |
| /* ---- ambient grid (subtle "terminal" backdrop) ------------------------- */ | |
| .grid-bg { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 0; | |
| pointer-events: none; | |
| background-image: | |
| linear-gradient(rgba(0, 255, 245, 0.04) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0, 255, 245, 0.04) 1px, transparent 1px); | |
| background-size: 48px 48px; | |
| mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%); | |
| -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%); | |
| } | |
| /* ---- container --------------------------------------------------------- */ | |
| .container { | |
| position: relative; | |
| max-width: 880px; | |
| margin: 0 auto; | |
| padding: 0 24px 56px; | |
| z-index: 1; | |
| } | |
| /* ---- topbar (same shape as the dashboard brand strip) ----------------- */ | |
| .topbar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 14px 18px; | |
| margin: 0 -24px 32px; | |
| border-bottom: 1px solid var(--line-2); | |
| background: rgba(10, 10, 20, 0.6); | |
| backdrop-filter: blur(6px); | |
| } | |
| .brand { display: flex; align-items: baseline; gap: 10px; } | |
| .brand__mark { | |
| color: var(--pink); | |
| text-shadow: var(--shadow-pink); | |
| font-weight: 700; | |
| font-size: 18px; | |
| } | |
| .brand__name { | |
| color: var(--cyan); | |
| letter-spacing: 0.15em; | |
| text-shadow: var(--shadow-cyan); | |
| font-weight: 700; | |
| } | |
| .brand__dot { color: var(--pink); margin: 0 4px; } | |
| .brand__ver { color: var(--muted); font-size: 11px; } | |
| .topbar__status { display: flex; align-items: center; gap: 12px; } | |
| .pip { | |
| display: inline-block; | |
| width: 8px; height: 8px; | |
| border-radius: 50%; | |
| background: var(--green); | |
| box-shadow: 0 0 8px var(--green); | |
| } | |
| .pip-label { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; } | |
| /* ---- hero -------------------------------------------------------------- */ | |
| .hero { margin-bottom: 32px; } | |
| .pill { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 4px 10px; | |
| border-radius: 2px; | |
| background: rgba(255, 46, 136, 0.08); | |
| color: var(--pink); | |
| font-size: 10px; | |
| letter-spacing: 0.2em; | |
| text-transform: uppercase; | |
| border: 1px solid rgba(255, 46, 136, 0.4); | |
| margin-bottom: 18px; | |
| } | |
| .hero h1 { | |
| margin: 0 0 12px; | |
| font-size: 44px; | |
| letter-spacing: 0.04em; | |
| color: var(--cyan); | |
| text-shadow: var(--shadow-cyan); | |
| font-weight: 700; | |
| line-height: 1.1; | |
| } | |
| .hero h1 .accent { color: var(--pink); text-shadow: var(--shadow-pink); } | |
| .subtitle { | |
| margin: 0; | |
| color: var(--text); | |
| line-height: 1.6; | |
| max-width: 680px; | |
| font-size: 14px; | |
| } | |
| .hero__cta { | |
| margin-top: 22px; | |
| display: flex; | |
| gap: 12px; | |
| flex-wrap: wrap; | |
| } | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-family: var(--mono); | |
| font-size: 12px; | |
| letter-spacing: 0.12em; | |
| text-transform: uppercase; | |
| padding: 9px 16px; | |
| border-radius: 2px; | |
| border: 1px solid var(--line-2); | |
| background: var(--bg-1); | |
| color: var(--text); | |
| transition: all 120ms ease-out; | |
| cursor: pointer; | |
| } | |
| .btn:hover { | |
| border-color: var(--cyan); | |
| color: var(--cyan); | |
| box-shadow: 0 0 8px rgba(0, 255, 245, 0.3); | |
| text-shadow: 0 0 4px rgba(0, 255, 245, 0.6); | |
| } | |
| .btn--primary { | |
| border-color: var(--pink); | |
| color: var(--pink); | |
| background: linear-gradient(180deg, rgba(255, 46, 136, 0.15), rgba(255, 46, 136, 0.05)); | |
| text-shadow: 0 0 4px rgba(255, 46, 136, 0.6); | |
| } | |
| .btn--primary:hover { | |
| border-color: var(--pink); | |
| color: var(--pink); | |
| box-shadow: var(--shadow-pink); | |
| } | |
| /* ---- card (mirrors dashboard's .card + corner accent) ----------------- */ | |
| .panel { | |
| background: var(--bg-1); | |
| border: 1px solid var(--line-2); | |
| border-radius: 4px; | |
| padding: 18px 20px 20px; | |
| margin-top: 18px; | |
| position: relative; | |
| } | |
| .panel::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; | |
| width: 14px; height: 1px; | |
| background: var(--cyan); | |
| box-shadow: 0 0 6px var(--cyan); | |
| } | |
| .panel-heading { margin-bottom: 12px; } | |
| .panel-heading .eyebrow { | |
| margin: 0; | |
| font-size: 10px; | |
| letter-spacing: 0.2em; | |
| text-transform: uppercase; | |
| color: var(--pink); | |
| text-shadow: 0 0 6px rgba(255, 46, 136, 0.5); | |
| } | |
| .panel-heading h2 { | |
| margin: 4px 0 0; | |
| font-size: 18px; | |
| color: var(--cyan); | |
| letter-spacing: 0.04em; | |
| font-weight: 700; | |
| } | |
| .muted { color: var(--muted); font-size: 12px; } | |
| /* ---- pipeline steps ---------------------------------------------------- */ | |
| ol.steps { | |
| margin: 6px 0 0; | |
| padding: 0; | |
| list-style: none; | |
| counter-reset: step; | |
| } | |
| ol.steps li { | |
| position: relative; | |
| padding: 12px 0 12px 48px; | |
| border-bottom: 1px solid var(--line); | |
| counter-increment: step; | |
| } | |
| ol.steps li:last-child { border-bottom: none; } | |
| ol.steps li::before { | |
| content: counter(step, decimal-leading-zero); | |
| position: absolute; | |
| left: 0; | |
| top: 12px; | |
| color: var(--pink); | |
| font-size: 12px; | |
| letter-spacing: 0.1em; | |
| text-shadow: 0 0 4px rgba(255, 46, 136, 0.5); | |
| font-weight: 700; | |
| width: 36px; | |
| } | |
| ol.steps li b { | |
| color: var(--cyan); | |
| letter-spacing: 0.04em; | |
| font-weight: 600; | |
| } | |
| /* ---- features / prerequisites lists ----------------------------------- */ | |
| ul.features { | |
| margin: 6px 0 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| ul.features li { | |
| position: relative; | |
| padding: 8px 0 8px 22px; | |
| border-bottom: 1px solid var(--line); | |
| line-height: 1.55; | |
| } | |
| ul.features li:last-child { border-bottom: none; } | |
| ul.features li::before { | |
| content: '▸'; | |
| position: absolute; | |
| left: 0; | |
| top: 8px; | |
| color: var(--green); | |
| text-shadow: 0 0 4px rgba(92, 255, 177, 0.5); | |
| font-size: 12px; | |
| } | |
| ul.features li b { | |
| color: var(--cyan); | |
| font-weight: 600; | |
| } | |
| /* ---- inline code / pre / kbd --------------------------------------- */ | |
| code { | |
| font-family: var(--mono); | |
| font-size: 12px; | |
| color: var(--green); | |
| background: var(--bg-2); | |
| border: 1px solid var(--line); | |
| padding: 1px 5px; | |
| border-radius: 2px; | |
| text-shadow: 0 0 3px rgba(92, 255, 177, 0.4); | |
| word-break: break-word; | |
| } | |
| kbd { | |
| display: inline-block; | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| color: var(--cyan); | |
| background: var(--bg-2); | |
| border: 1px solid var(--cyan); | |
| border-bottom-width: 2px; | |
| padding: 1px 6px; | |
| border-radius: 3px; | |
| letter-spacing: 0.04em; | |
| } | |
| pre { | |
| background: var(--bg); | |
| border: 1px solid var(--line-2); | |
| border-radius: 2px; | |
| padding: 12px 14px; | |
| overflow-x: auto; | |
| margin: 12px 0 0; | |
| } | |
| pre code { | |
| background: transparent; | |
| border: none; | |
| padding: 0; | |
| color: var(--text); | |
| text-shadow: none; | |
| font-size: 12px; | |
| line-height: 1.6; | |
| } | |
| pre code .c { color: var(--muted); } /* comment line # … */ | |
| pre code .k { color: var(--pink); } /* keyword pip / python */ | |
| pre code .s { color: var(--green); } /* string/url/arrow → … */ | |
| /* ---- callouts -------------------------------------------------------- */ | |
| .callout { | |
| display: flex; | |
| gap: 12px; | |
| margin: 12px 0 0; | |
| padding: 10px 12px; | |
| border-left: 2px solid var(--cyan); | |
| background: rgba(0, 255, 245, 0.04); | |
| border-radius: 0 2px 2px 0; | |
| font-size: 12px; | |
| line-height: 1.55; | |
| } | |
| .callout--info { border-left-color: var(--cyan); background: rgba(0, 255, 245, 0.05); } | |
| .callout--warn { border-left-color: var(--yellow); background: rgba(255, 225, 74, 0.05); } | |
| .callout--tip { border-left-color: var(--green); background: rgba(92, 255, 177, 0.05); } | |
| .callout--danger { border-left-color: var(--red); background: rgba(255, 85, 102, 0.05); } | |
| .callout__icon { | |
| flex: 0 0 16px; | |
| color: var(--cyan); | |
| font-weight: 700; | |
| text-shadow: 0 0 6px currentColor; | |
| } | |
| .callout--warn .callout__icon { color: var(--yellow); } | |
| .callout--tip .callout__icon { color: var(--green); } | |
| .callout--danger .callout__icon { color: var(--red); } | |
| .callout__body { flex: 1; min-width: 0; } | |
| .callout__body p { margin: 0 0 6px; } | |
| .callout__body p:last-child { margin-bottom: 0; } | |
| .callout__title { | |
| display: block; | |
| font-size: 10px; | |
| letter-spacing: 0.2em; | |
| text-transform: uppercase; | |
| color: var(--muted); | |
| margin-bottom: 4px; | |
| } | |
| /* ---- compare table (Default | Alternatives) ------------------------- */ | |
| .compare { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin: 8px 0 0; | |
| font-size: 12px; | |
| } | |
| .compare th, .compare td { | |
| text-align: left; | |
| padding: 8px 10px; | |
| border-bottom: 1px solid var(--line); | |
| vertical-align: top; | |
| } | |
| .compare th { | |
| font-size: 10px; | |
| letter-spacing: 0.2em; | |
| text-transform: uppercase; | |
| color: var(--muted); | |
| font-weight: 500; | |
| background: var(--bg-2); | |
| } | |
| .compare td:first-child { | |
| color: var(--cyan); | |
| font-weight: 600; | |
| width: 22%; | |
| } | |
| .compare td:nth-child(2) { | |
| color: var(--green); | |
| width: 38%; | |
| } | |
| .compare td:nth-child(3) { | |
| color: var(--text); | |
| width: 40%; | |
| } | |
| .compare tr:last-child td { border-bottom: none; } | |
| /* ---- 2-column grid for install / dashboard tabs --------------------- */ | |
| .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; } | |
| @media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } } | |
| /* Sub-card: a smaller panel nested inside a panel. No top/bottom margin | |
| * so it sits flush against siblings inside the .grid-2 column. */ | |
| .subcard { | |
| background: var(--bg-2); | |
| border: 1px solid var(--line); | |
| border-radius: 3px; | |
| padding: 12px 14px 14px; | |
| position: relative; | |
| } | |
| .subcard__title { | |
| font-size: 11px; | |
| letter-spacing: 0.18em; | |
| text-transform: uppercase; | |
| color: var(--cyan); | |
| margin: 0 0 6px; | |
| font-weight: 600; | |
| } | |
| .subcard__hint { | |
| color: var(--muted); | |
| font-size: 11px; | |
| margin: 0 0 8px; | |
| } | |
| /* ---- install path card ---------------------------------------------- */ | |
| .path { | |
| background: var(--bg-2); | |
| border: 1px solid var(--line); | |
| border-radius: 3px; | |
| padding: 12px 14px 14px; | |
| position: relative; | |
| } | |
| .path::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; | |
| width: 10px; height: 1px; | |
| background: var(--green); | |
| box-shadow: 0 0 4px var(--green); | |
| } | |
| .path--dev::before { background: var(--cyan); box-shadow: 0 0 4px var(--cyan); } | |
| .path__title { | |
| font-size: 12px; | |
| color: var(--green); | |
| letter-spacing: 0.05em; | |
| margin: 0 0 4px; | |
| font-weight: 600; | |
| } | |
| .path--dev .path__title { color: var(--cyan); } | |
| .path__body { color: var(--text); font-size: 12px; line-height: 1.55; margin: 0 0 8px; } | |
| /* ---- dashboard tabs list (compact 2-col grid) ----------------------- */ | |
| .tabs { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 10px; | |
| margin: 8px 0 0; | |
| } | |
| @media (max-width: 720px) { .tabs { grid-template-columns: 1fr; } } | |
| .tab { | |
| background: var(--bg-2); | |
| border: 1px solid var(--line); | |
| border-left: 2px solid var(--pink); | |
| padding: 8px 10px; | |
| border-radius: 0 2px 2px 0; | |
| } | |
| .tab__name { | |
| display: inline-block; | |
| font-size: 10px; | |
| letter-spacing: 0.2em; | |
| text-transform: uppercase; | |
| color: var(--pink); | |
| margin-bottom: 4px; | |
| text-shadow: 0 0 4px rgba(255, 46, 136, 0.4); | |
| } | |
| .tab__body { font-size: 12px; color: var(--text); line-height: 1.5; } | |
| /* ---- collapsible (used for long troubleshooting items) ------------- */ | |
| details.faq { | |
| border: 1px solid var(--line); | |
| border-radius: 2px; | |
| margin-top: 8px; | |
| background: var(--bg-2); | |
| } | |
| details.faq summary { | |
| cursor: pointer; | |
| padding: 10px 12px; | |
| font-size: 12px; | |
| letter-spacing: 0.04em; | |
| color: var(--cyan); | |
| list-style: none; | |
| position: relative; | |
| } | |
| details.faq summary::-webkit-details-marker { display: none; } | |
| details.faq summary::before { | |
| content: '+'; | |
| position: absolute; | |
| left: 0; | |
| top: 10px; | |
| color: var(--pink); | |
| font-weight: 700; | |
| width: 12px; | |
| text-align: center; | |
| text-shadow: 0 0 4px rgba(255, 46, 136, 0.5); | |
| } | |
| details.faq[open] summary::before { content: '−'; } | |
| details.faq summary::after { content: ''; } | |
| details.faq .faq__body { | |
| padding: 0 12px 12px 24px; | |
| font-size: 12px; | |
| line-height: 1.55; | |
| color: var(--text); | |
| border-top: 1px dashed var(--line); | |
| padding-top: 10px; | |
| margin-top: 2px; | |
| } | |
| details.faq .faq__body p { margin: 0 0 6px; } | |
| details.faq .faq__body p:last-child { margin-bottom: 0; } | |
| details.faq .faq__body code { font-size: 11px; } | |
| /* ---- section divider (between major areas) ------------------------- */ | |
| .divider { | |
| margin: 36px 0 0; | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| color: var(--muted); | |
| font-size: 10px; | |
| letter-spacing: 0.3em; | |
| text-transform: uppercase; | |
| } | |
| .divider::before, .divider::after { | |
| content: ''; | |
| flex: 1; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, var(--line-2), transparent); | |
| } | |
| /* ---- changelog entries ---------------------------------------------- */ | |
| .changelog { margin: 6px 0 0; } | |
| .changelog__item { | |
| position: relative; | |
| padding: 10px 0 10px 92px; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .changelog__item:last-child { border-bottom: none; } | |
| .changelog__ver { | |
| position: absolute; | |
| left: 0; | |
| top: 10px; | |
| color: var(--cyan); | |
| font-size: 11px; | |
| letter-spacing: 0.08em; | |
| font-weight: 600; | |
| width: 80px; | |
| text-shadow: 0 0 4px rgba(0, 255, 245, 0.4); | |
| } | |
| .changelog__ver--current { color: var(--green); text-shadow: 0 0 4px rgba(92, 255, 177, 0.5); } | |
| .changelog__ver--current::after { | |
| content: '· current'; | |
| margin-left: 6px; | |
| color: var(--green); | |
| font-size: 9px; | |
| letter-spacing: 0.2em; | |
| text-transform: uppercase; | |
| opacity: 0.85; | |
| } | |
| .changelog__body { font-size: 12px; line-height: 1.55; color: var(--text); } | |
| .changelog__body p { margin: 0 0 4px; } | |
| .changelog__body ul { margin: 4px 0 0; padding-left: 18px; } | |
| .changelog__body li { margin: 2px 0; } | |
| .changelog__body code { font-size: 11px; } | |
| /* ---- footer ----------------------------------------------------------- */ | |
| .foot { | |
| margin-top: 36px; | |
| padding-top: 18px; | |
| border-top: 1px solid var(--line-2); | |
| text-align: center; | |
| color: var(--muted); | |
| font-size: 12px; | |
| letter-spacing: 0.04em; | |
| } | |
| .foot a { | |
| color: var(--cyan); | |
| border-bottom: 1px dotted rgba(0, 255, 245, 0.4); | |
| padding-bottom: 1px; | |
| margin: 0 6px; | |
| } | |
| .foot a:hover { border-bottom-style: solid; } | |
| /* ---- responsive ------------------------------------------------------- */ | |
| @media (max-width: 720px) { | |
| .topbar { flex-direction: column; align-items: flex-start; gap: 8px; } | |
| .hero h1 { font-size: 32px; } | |
| .panel { padding: 14px 16px 16px; } | |
| .compare { font-size: 11px; } | |
| .compare td:first-child, .compare td:nth-child(2) { width: auto; } | |
| .changelog__item { padding-left: 0; } | |
| .changelog__ver { position: static; margin-bottom: 4px; display: block; } | |
| } | |