Spaces:
Running
Running
| :root { | |
| --bg0: #070a12; | |
| --bg1: #0b1024; | |
| --text: rgba(255, 255, 255, 0.92); | |
| --muted: rgba(255, 255, 255, 0.72); | |
| --muted2: rgba(255, 255, 255, 0.58); | |
| --card: rgba(255, 255, 255, 0.06); | |
| --card2: rgba(255, 255, 255, 0.08); | |
| --stroke: rgba(255, 255, 255, 0.12); | |
| --accent: #ff6a3d; | |
| --accent2: #43c8ff; | |
| --warm: #ffd36a; | |
| --radius: 18px; | |
| --shadow: 0 20px 60px rgba(0, 0, 0, 0.5); | |
| --shadow2: 0 10px 28px rgba(0, 0, 0, 0.35); | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| margin: 0; | |
| color: var(--text); | |
| font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; | |
| background: | |
| radial-gradient(900px 600px at 12% 12%, rgba(255, 106, 61, 0.22), transparent 60%), | |
| radial-gradient(900px 600px at 86% 16%, rgba(67, 200, 255, 0.18), transparent 55%), | |
| radial-gradient(900px 600px at 52% 104%, rgba(255, 211, 106, 0.10), transparent 58%), | |
| linear-gradient(180deg, var(--bg1) 0%, var(--bg0) 100%); | |
| } | |
| a { | |
| color: inherit; | |
| } | |
| ::selection { | |
| background: rgba(255, 106, 61, 0.28); | |
| } | |
| .wrap { | |
| max-width: 1120px; | |
| margin: 0 auto; | |
| padding: 36px 22px; | |
| } | |
| .mono { | |
| font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; | |
| } | |
| /* Hero */ | |
| .hero { | |
| position: relative; | |
| overflow: hidden; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.06); | |
| } | |
| .hero::before { | |
| content: ""; | |
| position: absolute; | |
| inset: 0; | |
| background: | |
| radial-gradient(800px 500px at 18% 10%, rgba(255, 106, 61, 0.16), transparent 60%), | |
| radial-gradient(800px 500px at 86% 15%, rgba(67, 200, 255, 0.12), transparent 55%); | |
| pointer-events: none; | |
| } | |
| .hero .wrap { | |
| position: relative; | |
| } | |
| .topline { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| flex-wrap: wrap; | |
| } | |
| .brand { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .logo { | |
| width: 34px; | |
| height: 34px; | |
| border-radius: 12px; | |
| display: grid; | |
| place-items: center; | |
| background: rgba(255, 255, 255, 0.07); | |
| border: 1px solid rgba(255, 255, 255, 0.12); | |
| box-shadow: 0 10px 18px rgba(0, 0, 0, 0.25); | |
| } | |
| .brand-name { | |
| font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, | |
| sans-serif; | |
| font-weight: 700; | |
| letter-spacing: -0.01em; | |
| } | |
| .pill { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 8px 12px; | |
| border-radius: 999px; | |
| border: 1px solid rgba(255, 255, 255, 0.14); | |
| background: rgba(0, 0, 0, 0.18); | |
| color: var(--muted); | |
| font-size: 13px; | |
| } | |
| .hero-grid { | |
| margin-top: 18px; | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 22px; | |
| align-items: center; | |
| } | |
| .eyebrow { | |
| margin: 0 0 10px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.14em; | |
| font-size: 12px; | |
| color: rgba(255, 255, 255, 0.62); | |
| } | |
| .hero-copy h1 { | |
| font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, | |
| sans-serif; | |
| margin: 0 0 12px; | |
| font-size: 52px; | |
| line-height: 1.02; | |
| letter-spacing: -0.03em; | |
| } | |
| .lede { | |
| margin: 0; | |
| font-size: 17px; | |
| line-height: 1.7; | |
| color: var(--muted); | |
| max-width: 60ch; | |
| } | |
| .hero-actions { | |
| margin-top: 18px; | |
| display: flex; | |
| gap: 10px; | |
| flex-wrap: wrap; | |
| } | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| padding: 10px 14px; | |
| border-radius: 14px; | |
| border: 1px solid rgba(255, 255, 255, 0.14); | |
| background: rgba(0, 0, 0, 0.18); | |
| text-decoration: none; | |
| font-weight: 700; | |
| font-size: 14px; | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25); | |
| transition: transform 140ms ease, border-color 140ms ease, background 140ms ease; | |
| } | |
| .btn:hover { | |
| transform: translateY(-1px); | |
| border-color: rgba(67, 200, 255, 0.45); | |
| background: rgba(67, 200, 255, 0.15); | |
| box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), 0 0 20px rgba(67, 200, 255, 0.15); | |
| } | |
| .btn:focus-visible { | |
| outline: 3px solid rgba(67, 200, 255, 0.35); | |
| outline-offset: 2px; | |
| } | |
| .btn.primary { | |
| border-color: rgba(255, 106, 61, 0.40); | |
| background: linear-gradient(90deg, rgba(255, 106, 61, 0.96), rgba(67, 200, 255, 0.72)); | |
| color: rgba(0, 0, 0, 0.86); | |
| } | |
| .btn.ghost { | |
| background: transparent; | |
| box-shadow: none; | |
| } | |
| .btn.ghost:hover { | |
| background: rgba(67, 200, 255, 0.15); | |
| box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), 0 0 20px rgba(67, 200, 255, 0.15); | |
| } | |
| .hero-badges { | |
| margin-top: 14px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .badges-row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| } | |
| .hero-badges span { | |
| font-size: 12px; | |
| color: var(--muted); | |
| padding: 8px 10px; | |
| border-radius: 6px; | |
| border: 1px solid rgba(255, 255, 255, 0.12); | |
| background: rgba(255, 255, 255, 0.04); | |
| } | |
| .glass-card { | |
| border-radius: 22px; | |
| padding: 14px; | |
| background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.06)); | |
| border: 1px solid rgba(255, 255, 255, 0.14); | |
| box-shadow: var(--shadow); | |
| } | |
| .media { | |
| border-radius: 18px; | |
| overflow: hidden; | |
| border: 1px solid rgba(255, 255, 255, 0.12); | |
| background: rgba(0, 0, 0, 0.25); | |
| } | |
| .media-inner { | |
| position: relative; | |
| } | |
| .hero-media { | |
| display: block; | |
| width: 100%; | |
| max-width: 600px; | |
| max-height: 420px; | |
| margin: 0 auto; | |
| height: auto; | |
| object-fit: contain; | |
| background: rgba(0, 0, 0, 0.4); | |
| } | |
| .media-overlay { | |
| position: absolute; | |
| inset: 0; | |
| display: grid; | |
| align-content: end; | |
| gap: 6px; | |
| padding: 16px; | |
| background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.75) 100%); | |
| } | |
| .overlay-title { | |
| font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, | |
| sans-serif; | |
| font-weight: 800; | |
| letter-spacing: -0.01em; | |
| } | |
| .overlay-sub { | |
| color: var(--muted); | |
| font-size: 13px; | |
| line-height: 1.4; | |
| } | |
| .caption { | |
| margin: 10px 2px 0; | |
| color: var(--muted2); | |
| font-size: 12px; | |
| line-height: 1.5; | |
| } | |
| /* Page Navigation */ | |
| .page-nav { | |
| display: flex; | |
| gap: 10px; | |
| justify-content: flex-start; | |
| align-items: center; | |
| padding: 0 0 18px; | |
| flex-wrap: wrap; | |
| } | |
| /* Sections */ | |
| .section { | |
| padding: 34px 0; | |
| } | |
| .section-header { | |
| margin-bottom: 16px; | |
| } | |
| .section-header h2 { | |
| font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, | |
| sans-serif; | |
| margin: 0 0 10px; | |
| font-size: 32px; | |
| letter-spacing: -0.02em; | |
| } | |
| .intro { | |
| margin: 0; | |
| color: var(--muted); | |
| line-height: 1.7; | |
| max-width: 70ch; | |
| } | |
| .feature-grid { | |
| display: grid; | |
| gap: 14px; | |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); | |
| } | |
| .feature-card { | |
| padding: 18px; | |
| border-radius: var(--radius); | |
| border: 1px solid rgba(255, 255, 255, 0.12); | |
| background: linear-gradient(180deg, var(--card2), var(--card)); | |
| box-shadow: var(--shadow2); | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 430px; | |
| } | |
| .feature-image { | |
| display: block; | |
| width: calc(100% - 10px); | |
| max-height: 220px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| height: auto; | |
| object-fit: contain; | |
| border-radius: 14px; | |
| border: 1px solid rgba(255, 255, 255, 0.12); | |
| background: rgba(0, 0, 0, 0.4); | |
| margin-bottom: 12px; | |
| box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35); | |
| flex-shrink: 0; | |
| } | |
| .icon { | |
| display: inline-grid; | |
| place-items: center; | |
| width: 42px; | |
| height: 42px; | |
| border-radius: 16px; | |
| margin-bottom: 10px; | |
| background: rgba(255, 106, 61, 0.14); | |
| border: 1px solid rgba(255, 106, 61, 0.22); | |
| } | |
| .feature-card h3 { | |
| margin: 0 0 6px; | |
| font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, | |
| sans-serif; | |
| letter-spacing: -0.01em; | |
| text-align: center; | |
| } | |
| .feature-card p { | |
| margin: 0; | |
| color: var(--muted); | |
| line-height: 1.6; | |
| text-align: center; | |
| } | |
| .expect { | |
| margin-top: 16px; | |
| display: grid; | |
| gap: 14px; | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| .expect-card { | |
| padding: 18px; | |
| border-radius: var(--radius); | |
| border: 1px solid rgba(255, 255, 255, 0.12); | |
| background: rgba(0, 0, 0, 0.14); | |
| box-shadow: var(--shadow2); | |
| } | |
| .expect-card.secondary { | |
| background: linear-gradient(180deg, rgba(67, 200, 255, 0.10), rgba(0, 0, 0, 0.14)); | |
| } | |
| .expect-card h3 { | |
| margin: 0 0 10px; | |
| font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, | |
| sans-serif; | |
| } | |
| .story-text { | |
| margin: 0; | |
| color: var(--muted); | |
| line-height: 1.7; | |
| } | |
| .list { | |
| list-style: none; | |
| padding: 0; | |
| margin: 10px 0 0; | |
| display: grid; | |
| gap: 10px; | |
| } | |
| .list.compact { | |
| gap: 8px; | |
| margin-top: 12px; | |
| } | |
| .list li { | |
| display: grid; | |
| grid-template-columns: 24px minmax(0, 1fr); | |
| gap: 10px; | |
| align-items: start; | |
| color: var(--muted); | |
| line-height: 1.6; | |
| } | |
| .list li > span[aria-hidden="true"] { | |
| width: 24px; | |
| height: 24px; | |
| display: grid; | |
| place-items: center; | |
| line-height: 1; | |
| font-size: 16px; | |
| margin-top: 2px; | |
| } | |
| .chips { | |
| margin-top: 12px; | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| .chip { | |
| font-size: 12px; | |
| color: var(--muted); | |
| padding: 8px 10px; | |
| border-radius: 999px; | |
| border: 1px solid rgba(255, 255, 255, 0.12); | |
| background: rgba(255, 255, 255, 0.04); | |
| } | |
| /* Web App */ | |
| .webapp-grid { | |
| margin-top: 12px; | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 18px; | |
| align-items: stretch; | |
| } | |
| .webapp-visual { | |
| position: sticky; | |
| top: 18px; | |
| } | |
| .webapp-copy { | |
| padding: 18px; | |
| border-radius: var(--radius); | |
| border: 1px solid rgba(255, 255, 255, 0.12); | |
| background: linear-gradient(180deg, var(--card2), var(--card)); | |
| box-shadow: var(--shadow2); | |
| height: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .webapp-copy h3 { | |
| margin: 0 0 12px; | |
| font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, | |
| sans-serif; | |
| } | |
| /* Quickstart */ | |
| .install-grid { | |
| margin-top: 12px; | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 18px; | |
| align-items: stretch; | |
| } | |
| .install-copy { | |
| padding: 18px; | |
| border-radius: var(--radius); | |
| border: 1px solid rgba(255, 255, 255, 0.12); | |
| background: linear-gradient(180deg, var(--card2), var(--card)); | |
| box-shadow: var(--shadow2); | |
| height: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .install-copy h3 { | |
| margin: 0 0 8px; | |
| font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, | |
| sans-serif; | |
| } | |
| .install-copy .intro { | |
| margin-top: 0; | |
| } | |
| .install-visual { | |
| position: sticky; | |
| top: 18px; | |
| } | |
| .optional { | |
| margin-top: 14px; | |
| } | |
| .optional-card { | |
| padding: 18px; | |
| border-radius: var(--radius); | |
| border: 1px solid rgba(255, 255, 255, 0.12); | |
| background: rgba(0, 0, 0, 0.14); | |
| box-shadow: var(--shadow2); | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .optional-card:hover { | |
| border-color: rgba(67, 200, 255, 0.25); | |
| background: rgba(0, 0, 0, 0.20); | |
| } | |
| .optional-card summary { | |
| list-style: none; | |
| position: relative; | |
| user-select: none; | |
| } | |
| .optional-card summary::-webkit-details-marker { | |
| display: none; | |
| } | |
| .optional-card summary::after { | |
| content: '▶'; | |
| position: absolute; | |
| right: 0; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| font-size: 14px; | |
| color: var(--accent2); | |
| transition: transform 0.2s ease; | |
| } | |
| .optional-card[open] summary::after { | |
| transform: translateY(-50%) rotate(90deg); | |
| } | |
| .optional-card summary h3 { | |
| margin: 0 0 8px; | |
| font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, | |
| sans-serif; | |
| } | |
| .optional-card h3 { | |
| margin: 0 0 8px; | |
| font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, | |
| sans-serif; | |
| } | |
| .optional-content { | |
| margin-top: 18px; | |
| padding-top: 18px; | |
| border-top: 1px solid rgba(255, 255, 255, 0.08); | |
| } | |
| .codeblock { | |
| margin-top: 10px; | |
| border-radius: 14px; | |
| border: 1px solid rgba(255, 255, 255, 0.12); | |
| background: rgba(0, 0, 0, 0.24); | |
| overflow: hidden; | |
| } | |
| .codeblock-title { | |
| padding: 10px 12px; | |
| font-size: 12px; | |
| font-weight: 800; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| color: rgba(255, 255, 255, 0.62); | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.10); | |
| background: rgba(255, 255, 255, 0.04); | |
| } | |
| .codeblock pre { | |
| margin: 0; | |
| padding: 12px; | |
| overflow-x: auto; | |
| } | |
| .codeblock code { | |
| font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; | |
| font-size: 13px; | |
| } | |
| .note { | |
| margin: 14px 0 0; | |
| color: var(--muted2); | |
| line-height: 1.6; | |
| } | |
| /* Footer */ | |
| .footer { | |
| padding: 22px 0 50px; | |
| color: var(--muted2); | |
| } | |
| .footer p { | |
| margin: 0; | |
| } | |
| .footer a { | |
| text-decoration: none; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.18); | |
| } | |
| .footer a:hover { | |
| border-bottom-color: rgba(255, 255, 255, 0.35); | |
| } | |
| @media (max-width: 920px) { | |
| .hero-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .hero-copy h1 { | |
| font-size: 44px; | |
| } | |
| .expect { | |
| grid-template-columns: 1fr; | |
| } | |
| .install-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .install-visual { | |
| position: static; | |
| } | |
| .webapp-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .webapp-visual { | |
| position: static; | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| html { | |
| scroll-behavior: auto; | |
| } | |
| .btn { | |
| transition: none; | |
| } | |
| } | |