Spaces:
Running
Running
| /* Reachy Web — Space landing page (Tailwind v4 source, builds to ../style.css) */ | |
| @import "tailwindcss"; | |
| @source "../../index.html"; | |
| /* Fonts (self-hosted, variable weight) */ | |
| @font-face { font-family: 'Space Grotesk'; src: url("/reachy_web/static/fonts/SpaceGrotesk.ttf") format('truetype'); font-weight: 100 900; font-display: swap; } | |
| @font-face { font-family: 'Manrope'; src: url("/reachy_web/static/fonts/Manrope.ttf") format('truetype'); font-weight: 100 900; font-display: swap; } | |
| /* Tokens — dark default. Themes (data-theme) and palettes (data-palette) swap | |
| these variables; every Tailwind color utility below follows along. */ | |
| :root { | |
| color-scheme: dark; | |
| accent-color: var(--acc); | |
| --bg: #0b0e14; | |
| --card: #151923; | |
| --soft: #0f1320; | |
| --line: #1e2533; | |
| --txt: #e8eaed; | |
| --mut: #8a909a; | |
| --acc: #3b82f6; | |
| --ok: #27c281; | |
| } | |
| [data-theme=light] { color-scheme: light; --bg: #eef1f7; --card: #fff; --soft: #f1f4f9; --line: #d9dfea; --txt: #1b2330; --mut: #5b6675; --acc: #2563eb; --ok: #16a34a; } | |
| /* Palettes (from PiWRT) */ | |
| :root[data-palette=ocean] { --bg: #0a141c; --card: #11202e; --soft: #1a3a48; --line: #1f3245; --txt: #e1ecf4; --mut: #85a1b5; --acc: #22d3ee; } | |
| :root[data-palette=ocean][data-theme=light] { --bg: #f0f7fa; --card: #fff; --soft: #cfeaf1; --line: #dde9f0; --txt: #0f1b26; --mut: #5a7387; --acc: #0891b2; } | |
| :root[data-palette=violet] { --bg: #15101f; --card: #1f1a2e; --soft: #2a2342; --line: #2e2942; --txt: #f1edf8; --mut: #a19bb5; --acc: #a78bfa; } | |
| :root[data-palette=violet][data-theme=light] { --bg: #f7f4fb; --card: #fff; --soft: #efe9fa; --line: #e6e0ef; --txt: #1f1b2c; --mut: #6b6480; --acc: #7c3aed; } | |
| :root[data-palette=sunset] { --bg: #1c100a; --card: #2a180f; --soft: #3d2412; --line: #3d2415; --txt: #f5e6d8; --mut: #b59880; --acc: #fb923c; } | |
| :root[data-palette=sunset][data-theme=light] { --bg: #fff7f0; --card: #fff; --soft: #fce7d6; --line: #f5e6d8; --txt: #2c1810; --mut: #7a5a45; --acc: #ea580c; } | |
| :root[data-palette=forest] { --bg: #0e140f; --card: #172218; --soft: #1a3422; --line: #1f2a1f; --txt: #e8f0e5; --mut: #8fa088; --acc: #4ade80; } | |
| :root[data-palette=forest][data-theme=light] { --bg: #f4f8f1; --card: #fff; --soft: #dcefde; --line: #dde5d6; --txt: #1a2614; --mut: #5f6e55; --acc: #16a34a; } | |
| :root[data-palette=rose] { --bg: #1a0b12; --card: #2a1320; --soft: #3d1a2d; --line: #3d1a2a; --txt: #fdf2f8; --mut: #c49aab; --acc: #fb7185; } | |
| :root[data-palette=rose][data-theme=light] { --bg: #fdf2f8; --card: #fff; --soft: #fbe0ea; --line: #f4d9e2; --txt: #1f0e15; --mut: #7a4757; --acc: #e11d48; } | |
| :root[data-palette=mint] { --bg: #06181a; --card: #0e2426; --soft: #133a35; --line: #1b3638; --txt: #e0f5ee; --mut: #7fa89a; --acc: #5eead4; } | |
| :root[data-palette=mint][data-theme=light] { --bg: #f0fbf6; --card: #fff; --soft: #ccf1e8; --line: #d5ede0; --txt: #0a2e20; --mut: #5c7c6e; --acc: #14b8a6; } | |
| :root[data-palette=amber] { --bg: #101114; --card: #1a1c20; --soft: #26292f; --line: #2e323a; --txt: #eceef2; --mut: #9aa0aa; --acc: #e9a23b; } | |
| :root[data-palette=amber][data-theme=light] { --bg: #fafafb; --card: #fff; --soft: #f1f2f4; --line: #e2e5ea; --txt: #17191d; --mut: #5f6672; --acc: #b9761a; } | |
| :root[data-palette=slate] { --bg: #0f172a; --card: #1e293b; --soft: #1e2b40; --line: #334155; --txt: #f1f5f9; --mut: #94a3b8; --acc: #94a3b8; } | |
| :root[data-palette=slate][data-theme=light] { --bg: #f8fafc; --card: #fff; --soft: #e2e8f0; --line: #e2e8f0; --txt: #0f172a; --mut: #64748b; --acc: #475569; } | |
| :root[data-palette=nordic] { --bg: #2e3440; --card: #3b4252; --soft: #3f4f65; --line: #4c566a; --txt: #eceff4; --mut: #a8b0bf; --acc: #88c0d0; } | |
| :root[data-palette=nordic][data-theme=light] { --bg: #eceff4; --card: #fff; --soft: #e5ecf3; --line: #d8dee9; --txt: #2e3440; --mut: #4c566a; --acc: #5e81ac; } | |
| :root[data-palette=one-dark] { --bg: #0e1015; --card: #1b1d22; --soft: #21304a; --line: #2a2d34; --txt: #abb2bf; --mut: #5c6370; --acc: #61afef; } | |
| :root[data-palette=one-dark][data-theme=light] { --bg: #fafafa; --card: #fff; --soft: #dbe7fb; --line: #e5e5e6; --txt: #383a42; --mut: #6b6f76; --acc: #4078f2; } | |
| :root[data-palette=midnight] { --bg: #000; --card: #0a0a0a; --soft: #1a1b3a; --line: #1a1a1a; --txt: #fafafa; --mut: #888; --acc: #818cf8; } | |
| :root[data-palette=midnight][data-theme=light] { --bg: #fff; --card: #f5f5f5; --soft: #e0e1fb; --line: #e5e5e5; --txt: #000; --mut: #666; --acc: #4f46e5; } | |
| :root[data-palette=matrix] { --bg: #000; --card: #0a140a; --soft: #0e1f0e; --line: #163a16; --txt: #4dff77; --mut: #2e9a4f; --acc: #00ff41; } | |
| :root[data-palette=matrix][data-theme=light] { --bg: #eefbf1; --card: #fff; --soft: #d6f7dd; --line: #c3eece; --txt: #08350f; --mut: #4a7d57; --acc: #0ba21e; } | |
| /* Map the tokens into Tailwind so bg-bg, text-txt, border-line, text-acc, | |
| bg-card, bg-soft, text-mut, bg-ok… exist as utilities and react to the | |
| palette/theme switches. */ | |
| @theme inline { | |
| --color-bg: var(--bg); | |
| --color-card: var(--card); | |
| --color-soft: var(--soft); | |
| --color-line: var(--line); | |
| --color-txt: var(--txt); | |
| --color-mut: var(--mut); | |
| --color-acc: var(--acc); | |
| --color-ok: var(--ok); | |
| --font-display: "Space Grotesk", sans-serif; | |
| --font-body: "Manrope", system-ui, -apple-system, sans-serif; | |
| } | |
| @layer base { | |
| html { scroll-behavior: smooth; } | |
| body { | |
| font-family: var(--font-body); | |
| background: radial-gradient(1200px 600px at 50% -10%, var(--soft), var(--bg)) fixed; | |
| color: var(--txt); | |
| line-height: 1.6; | |
| transition: background 0.25s, color 0.25s; | |
| } | |
| h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; } | |
| a { color: var(--acc); text-decoration: none; transition: color 0.2s; } | |
| a:hover { color: color-mix(in srgb, var(--acc) 70%, var(--txt)); } | |
| } | |
| /* Stateful / repeated components the JS toggles (.on, .hidden) or builds | |
| at runtime (changelog cards) — everything else is utilities in the HTML. */ | |
| @layer components { | |
| .card { | |
| background: var(--card); | |
| border: 1px solid var(--line); | |
| border-radius: 16px; | |
| padding: 26px; | |
| box-shadow: 0 8px 24px #00000040; | |
| transition: border-color 0.2s, transform 0.2s, background-color 0.25s; | |
| } | |
| [data-theme=light] .card { box-shadow: 0 6px 18px #141e3c14; } | |
| .btn { | |
| padding: 12px 24px; | |
| border-radius: 12px; | |
| font-weight: 700; | |
| font-size: 0.95rem; | |
| font-family: inherit; | |
| border: none; | |
| cursor: pointer; | |
| transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s; | |
| } | |
| .btn.primary { | |
| background: var(--acc); | |
| color: var(--bg); | |
| box-shadow: 0 4px 18px color-mix(in srgb, var(--acc) 35%, transparent); | |
| } | |
| .btn.primary:hover { transform: translateY(-2px); box-shadow: 0 8px 26px color-mix(in srgb, var(--acc) 45%, transparent); } | |
| .btn.ghost { background: var(--soft); border: 1px solid var(--line); color: var(--txt); } | |
| .btn.ghost:hover { border-color: var(--acc); } | |
| .chip { | |
| background: color-mix(in srgb, var(--acc) 12%, var(--card)); | |
| border: 1px solid color-mix(in srgb, var(--acc) 35%, var(--line)); | |
| padding: 6px 13px; | |
| border-radius: 9px; | |
| font-size: 0.83rem; | |
| font-weight: 600; | |
| color: color-mix(in srgb, var(--acc) 70%, var(--txt)); | |
| } | |
| .version-pill { | |
| background: var(--acc); | |
| color: var(--bg); | |
| padding: 2px 10px; | |
| border-radius: 100px; | |
| font-size: 0.75rem; | |
| font-weight: 700; | |
| } | |
| .pdot { | |
| width: 18px; height: 18px; | |
| border-radius: 50%; | |
| border: 2px solid transparent; | |
| cursor: pointer; padding: 0; | |
| transition: transform 0.15s, border-color 0.15s; | |
| } | |
| .pdot:hover { transform: scale(1.2); } | |
| .pdot.on { border-color: var(--txt); transform: scale(1.15); } | |
| .ios { | |
| appearance: none; border: none; position: relative; | |
| width: 38px; height: 22px; border-radius: 999px; | |
| background: var(--line); cursor: pointer; flex: none; padding: 0; | |
| transition: background-color 0.18s; | |
| } | |
| .ios:after { | |
| content: ""; position: absolute; top: 2px; left: 2px; | |
| width: 18px; height: 18px; border-radius: 50%; | |
| background: #fff; box-shadow: 0 1px 3px #00000059; | |
| transition: transform 0.18s; | |
| } | |
| .ios.on { background: var(--acc); } | |
| .ios.on:after { transform: translateX(16px); } | |
| .seg { | |
| display: inline-flex; gap: 4px; | |
| background: var(--soft); | |
| border: 1px solid var(--line); | |
| border-radius: 12px; padding: 4px; | |
| } | |
| .seg button { | |
| border: none; cursor: pointer; border-radius: 9px; | |
| background: transparent; color: var(--mut); | |
| font-family: inherit; font-weight: 600; font-size: 0.85rem; | |
| padding: 8px 16px; | |
| transition: background-color 0.18s, color 0.18s; | |
| } | |
| .seg button:hover:not(.on) { background: color-mix(in srgb, var(--acc) 14%, var(--card)); color: var(--txt); } | |
| .seg button.on { background: var(--acc); color: var(--bg); } | |
| .status-dot { | |
| display: inline-block; width: 9px; height: 9px; border-radius: 50%; | |
| background: var(--ok); margin-right: 7px; box-shadow: 0 0 8px var(--ok); | |
| } | |
| .code-block { | |
| background: color-mix(in srgb, var(--bg) 70%, black); | |
| border: 1px solid var(--line); | |
| border-radius: 12px; | |
| padding: 18px 20px; | |
| overflow-x: auto; | |
| } | |
| [data-theme=light] .code-block { background: #0f1320; } | |
| .code-block code { | |
| font-family: ui-monospace, 'SF Mono', Menlo, monospace; | |
| font-size: 0.82rem; | |
| color: #e8eaed; | |
| white-space: pre; | |
| } | |
| /* built by JS from changelog.json */ | |
| .changelog-card .version-badge { | |
| display: inline-block; | |
| background: var(--acc); color: var(--bg); | |
| padding: 3px 11px; border-radius: 7px; | |
| font-size: 0.82rem; font-weight: 700; margin-bottom: 6px; | |
| } | |
| .changelog-card .date { color: var(--mut); font-size: 0.83rem; display: block; margin-bottom: 10px; } | |
| .changelog-card ul { list-style: none; margin: 0; padding: 0; } | |
| .changelog-card li { color: var(--mut); font-size: 0.9rem; padding: 3px 0 3px 16px; position: relative; } | |
| .changelog-card li::before { content: '→'; position: absolute; left: 0; color: var(--acc); } | |
| } | |