Spaces:
Running
Running
| /* ============================================ | |
| REACHY MINI MINDER — LANDING PAGE | |
| Matches the app's Dark Mode Health Companion palette | |
| ============================================ */ | |
| :root { | |
| /* Core Palette (synced with globals.css) */ | |
| --color-background: #2c2c2c; | |
| --color-text-primary: #e4e4e4; | |
| --color-text-secondary: #b0b0b0; | |
| --color-text-muted: #808080; | |
| --color-accent-cyan: #a8dadc; | |
| --color-accent-pink: #ffc1cc; | |
| --color-cta: #b39cd0; | |
| --color-success: #7dd3a8; | |
| --color-surface-elevated: #363636; | |
| --color-surface-overlay: #404040; | |
| --color-surface-subtle: #242424; | |
| /* Typography */ | |
| --font-heading: "Atkinson Hyperlegible", system-ui, sans-serif; | |
| --font-body: "Poppins", system-ui, -apple-system, sans-serif; | |
| /* Spacing & Radii */ | |
| --radius-md: 8px; | |
| --radius-lg: 12px; | |
| --radius-xl: 16px; | |
| --radius-full: 9999px; | |
| /* Shadows */ | |
| --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3); | |
| --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4); | |
| } | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| min-height: 100vh; | |
| font-family: var(--font-body); | |
| background: var(--color-background); | |
| color: var(--color-text-secondary); | |
| line-height: 1.6; | |
| } | |
| .container { | |
| position: relative; | |
| max-width: 720px; | |
| margin: 48px auto; | |
| padding: 0 24px 40px; | |
| } | |
| /* ── Hero Panel ──────────────────────────── */ | |
| .hero-panel { | |
| background: linear-gradient(135deg, | |
| rgba(54, 54, 54, 0.8) 0%, | |
| rgba(36, 36, 36, 0.9) 100% | |
| ); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: var(--radius-xl); | |
| padding: 40px 32px; | |
| box-shadow: var(--shadow-lg); | |
| backdrop-filter: blur(20px); | |
| position: relative; | |
| overflow: hidden; | |
| margin-bottom: 4px; | |
| } | |
| .hero-panel::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); | |
| } | |
| .hero-content { | |
| display: flex; | |
| align-items: center; | |
| gap: 40px; | |
| } | |
| .hero-text { | |
| flex: 0 0 calc(50% - 20px); | |
| max-width: calc(50% - 20px); | |
| } | |
| .hero-text h1 { | |
| font-family: var(--font-heading); | |
| margin: 12px 0 14px; | |
| font-size: 42px; | |
| font-weight: 700; | |
| color: var(--color-accent-cyan); | |
| letter-spacing: -0.5px; | |
| line-height: 1.15; | |
| } | |
| .subtitle { | |
| color: var(--color-text-secondary); | |
| line-height: 1.7; | |
| font-size: 15px; | |
| font-weight: 300; | |
| margin-bottom: 20px; | |
| } | |
| .hero-actions { | |
| display: flex; | |
| gap: 12px; | |
| flex-wrap: wrap; | |
| } | |
| .btn-primary, .btn-secondary { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 10px 20px; | |
| border-radius: var(--radius-md); | |
| font-family: var(--font-body); | |
| font-size: 14px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| text-decoration: none; | |
| transition: all 0.2s ease; | |
| border: none; | |
| } | |
| .btn-icon { | |
| width: 16px; | |
| height: 16px; | |
| } | |
| .btn-primary { | |
| background: var(--color-cta); | |
| color: var(--color-surface-subtle); | |
| } | |
| .btn-primary:hover { | |
| background: #c9b5de; | |
| transform: translateY(-1px); | |
| } | |
| .btn-secondary { | |
| background: transparent; | |
| color: var(--color-accent-cyan); | |
| border: 1px solid rgba(168, 218, 220, 0.3); | |
| } | |
| .btn-secondary:hover { | |
| background: rgba(168, 218, 220, 0.1); | |
| transform: translateY(-1px); | |
| } | |
| /* ── Hero Video ──────────────────────────── */ | |
| .hero-video { | |
| flex: 0 0 calc(50% - 20px); | |
| max-width: calc(50% - 20px); | |
| } | |
| .hero-demo { | |
| border-radius: var(--radius-lg); | |
| } | |
| .hero-video-caption { | |
| margin-top: 8px; | |
| font-size: 12px; | |
| color: var(--color-text-secondary); | |
| text-align: center; | |
| font-weight: 300; | |
| opacity: 0.7; | |
| } | |
| .pill { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 6px 14px; | |
| border-radius: var(--radius-full); | |
| background: rgba(179, 156, 208, 0.15); | |
| color: var(--color-cta); | |
| font-size: 12px; | |
| font-weight: 500; | |
| letter-spacing: 0.3px; | |
| border: 1px solid rgba(179, 156, 208, 0.3); | |
| } | |
| .pill-icon { | |
| width: 14px; | |
| height: 14px; | |
| } | |
| /* ── Panels ───────────────────────────────── */ | |
| .panel { | |
| background: linear-gradient(135deg, | |
| rgba(54, 54, 54, 0.8) 0%, | |
| rgba(36, 36, 36, 0.9) 100% | |
| ); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: var(--radius-xl); | |
| padding: 24px; | |
| box-shadow: var(--shadow-md); | |
| backdrop-filter: blur(20px); | |
| margin-top: 20px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| /* Subtle top highlight (bento card style) */ | |
| .panel::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 1px; | |
| background: linear-gradient(90deg, | |
| transparent, | |
| rgba(255, 255, 255, 0.1), | |
| transparent | |
| ); | |
| } | |
| .panel-heading { | |
| margin-bottom: 16px; | |
| } | |
| .panel-heading h2 { | |
| font-family: var(--font-heading); | |
| font-size: 22px; | |
| font-weight: 700; | |
| color: var(--color-text-primary); | |
| margin: 2px 0; | |
| } | |
| .eyebrow { | |
| text-transform: uppercase; | |
| font-size: 11px; | |
| font-weight: 500; | |
| letter-spacing: 0.6px; | |
| color: var(--color-cta); | |
| margin-bottom: 2px; | |
| } | |
| /* ── Feature Grid ────────────────────────── */ | |
| .feature-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 14px; | |
| } | |
| .feature-card { | |
| background: rgba(255, 255, 255, 0.03); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: var(--radius-lg); | |
| padding: 18px; | |
| transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .feature-card:hover .feature-icon.cyan { border-color: rgba(168, 218, 220, 0.4); } | |
| .feature-card:hover .feature-icon.pink { border-color: rgba(255, 193, 204, 0.4); } | |
| .feature-card:hover .feature-icon.purple { border-color: rgba(179, 156, 208, 0.4); } | |
| .feature-card h3 { | |
| font-family: var(--font-heading); | |
| font-size: 14px; | |
| font-weight: 700; | |
| color: var(--color-text-primary); | |
| margin-bottom: 4px; | |
| } | |
| .feature-card p { | |
| font-size: 12px; | |
| color: var(--color-text-secondary); | |
| line-height: 1.5; | |
| font-weight: 300; | |
| } | |
| /* ── Feature Icons (Lucide SVGs) ─────────── */ | |
| .feature-icon { | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 10px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 10px; | |
| border: 1px solid transparent; | |
| transition: border-color 0.2s ease; | |
| } | |
| .feature-icon i { | |
| width: 18px; | |
| height: 18px; | |
| } | |
| .feature-icon.cyan { | |
| background: rgba(168, 218, 220, 0.15); | |
| color: var(--color-accent-cyan); | |
| } | |
| .feature-icon.pink { | |
| background: rgba(255, 193, 204, 0.15); | |
| color: var(--color-accent-pink); | |
| } | |
| .feature-icon.purple { | |
| background: rgba(179, 156, 208, 0.15); | |
| color: var(--color-cta); | |
| } | |
| /* ── Architecture Grid ────────────────────── */ | |
| .arch-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 14px; | |
| } | |
| .arch-card { | |
| background: rgba(255, 255, 255, 0.03); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: var(--radius-lg); | |
| padding: 18px; | |
| transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; | |
| } | |
| .arch-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .arch-label { | |
| text-transform: uppercase; | |
| font-size: 10px; | |
| font-weight: 500; | |
| letter-spacing: 0.6px; | |
| color: var(--color-cta); | |
| margin-top: 10px; | |
| margin-bottom: 4px; | |
| } | |
| .arch-value { | |
| font-family: var(--font-heading); | |
| font-size: 16px; | |
| font-weight: 700; | |
| color: var(--color-text-primary); | |
| margin-bottom: 4px; | |
| } | |
| .arch-detail { | |
| font-size: 12px; | |
| color: var(--color-text-secondary); | |
| line-height: 1.5; | |
| font-weight: 300; | |
| } | |
| /* ── Tabs ─────────────────────────────────── */ | |
| .tabs { | |
| display: flex; | |
| gap: 4px; | |
| overflow-x: auto; | |
| padding-bottom: 2px; | |
| margin-bottom: 16px; | |
| border-bottom: 1px solid var(--color-surface-overlay); | |
| scrollbar-width: none; | |
| } | |
| .tabs::-webkit-scrollbar { display: none; } | |
| .tab { | |
| flex-shrink: 0; | |
| padding: 8px 14px; | |
| border: none; | |
| background: transparent; | |
| color: var(--color-text-muted); | |
| font-family: var(--font-body); | |
| font-size: 13px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| border-bottom: 2px solid transparent; | |
| transition: color 0.2s, border-color 0.2s; | |
| white-space: nowrap; | |
| } | |
| .tab:hover { color: var(--color-text-primary); } | |
| .tab.active { | |
| color: var(--color-accent-cyan); | |
| border-bottom-color: var(--color-accent-cyan); | |
| } | |
| /* ── Tab Content / Markdown Body ──────────── */ | |
| .tab-content { | |
| min-height: 120px; | |
| max-height: 520px; | |
| overflow-y: auto; | |
| scrollbar-width: thin; | |
| scrollbar-color: rgba(168, 218, 220, 0.2) transparent; | |
| } | |
| .tab-loading, .tab-error { | |
| padding: 32px 0; | |
| text-align: center; | |
| color: var(--color-text-muted); | |
| font-size: 13px; | |
| } | |
| .tab-error { color: #e57373; } | |
| .md-body { | |
| font-size: 14px; | |
| line-height: 1.7; | |
| color: var(--color-text-secondary); | |
| } | |
| .md-body h1, .md-body h2, .md-body h3, .md-body h4 { | |
| font-family: var(--font-heading); | |
| color: var(--color-text-primary); | |
| margin-top: 20px; | |
| margin-bottom: 8px; | |
| font-weight: 700; | |
| } | |
| .md-body h1 { font-size: 22px; border-bottom: 1px solid var(--color-surface-overlay); padding-bottom: 8px; } | |
| .md-body h2 { font-size: 18px; } | |
| .md-body h3 { font-size: 15px; } | |
| .md-body p { margin: 8px 0; } | |
| .md-body a { color: var(--color-accent-cyan); text-decoration: none; } | |
| .md-body a:hover { text-decoration: underline; } | |
| .md-body ul, .md-body ol { padding-left: 20px; margin: 8px 0; } | |
| .md-body li { margin: 4px 0; } | |
| .md-body strong { color: var(--color-text-primary); } | |
| .md-body code { | |
| font-family: "JetBrains Mono", "Fira Code", "SF Mono", monospace; | |
| font-size: 12px; | |
| background: rgba(0, 0, 0, 0.3); | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| color: var(--color-accent-cyan); | |
| } | |
| .md-body pre { | |
| background: var(--color-surface-subtle); | |
| border: 1px solid var(--color-surface-overlay); | |
| border-radius: var(--radius-md); | |
| padding: 12px 14px; | |
| overflow-x: auto; | |
| margin: 12px 0; | |
| } | |
| .md-body pre code { | |
| background: none; | |
| padding: 0; | |
| border-radius: 0; | |
| } | |
| .md-body table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin: 12px 0; | |
| font-size: 13px; | |
| } | |
| .md-body th, .md-body td { | |
| text-align: left; | |
| padding: 8px 10px; | |
| border: 1px solid var(--color-surface-overlay); | |
| } | |
| .md-body th { | |
| background: var(--color-surface-elevated); | |
| color: var(--color-text-primary); | |
| font-weight: 600; | |
| } | |
| .md-body blockquote { | |
| margin: 12px 0; | |
| padding: 8px 16px; | |
| border-left: 3px solid var(--color-cta); | |
| background: rgba(179, 156, 208, 0.08); | |
| border-radius: 0 var(--radius-md) var(--radius-md) 0; | |
| } | |
| .md-body hr { | |
| border: none; | |
| border-top: 1px solid var(--color-surface-overlay); | |
| margin: 20px 0; | |
| } | |
| /* ── Code blocks ──────────────────────────── */ | |
| pre { | |
| background: var(--color-surface-subtle); | |
| border: 1px solid var(--color-surface-overlay); | |
| border-radius: var(--radius-md); | |
| padding: 14px 16px; | |
| overflow-x: auto; | |
| margin: 12px 0 0; | |
| } | |
| code { | |
| font-family: "JetBrains Mono", "Fira Code", "SF Mono", monospace; | |
| font-size: 13px; | |
| color: var(--color-accent-cyan); | |
| } | |
| /* ── Links ────────────────────────────────── */ | |
| .link { | |
| color: var(--color-accent-cyan); | |
| text-decoration: none; | |
| border-bottom: 1px solid rgba(168, 218, 220, 0.3); | |
| transition: border-color 0.2s ease; | |
| } | |
| .link:hover { | |
| border-color: var(--color-accent-cyan); | |
| } | |
| /* ── Footer ───────────────────────────────── */ | |
| .footer { | |
| margin-top: 32px; | |
| padding-top: 24px; | |
| border-top: 1px solid var(--color-surface-overlay); | |
| text-align: center; | |
| font-size: 13px; | |
| color: var(--color-text-muted); | |
| } | |
| .footer p { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 6px; | |
| } | |
| .footer a { | |
| color: var(--color-accent-cyan); | |
| text-decoration: none; | |
| } | |
| .footer-heart { | |
| width: 14px; | |
| height: 14px; | |
| color: var(--color-accent-pink); | |
| } | |
| /* ── Entry Animations ────────────────────── */ | |
| .panel { | |
| animation: slideUp 0.6s ease-out backwards; | |
| } | |
| .panel:nth-child(2) { animation-delay: 0.1s; } | |
| .panel:nth-child(3) { animation-delay: 0.2s; } | |
| .panel:nth-child(4) { animation-delay: 0.3s; } | |
| .panel:nth-child(5) { animation-delay: 0.4s; } | |
| @keyframes slideUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* ── Accessibility ───────────────────────── */ | |
| *:focus-visible { | |
| outline: 2px solid var(--color-accent-cyan); | |
| outline-offset: 2px; | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| *, *::before, *::after { | |
| animation-duration: 0.01ms ; | |
| transition-duration: 0.01ms ; | |
| } | |
| } | |
| /* ── Video Demo Cards ────────────────────── */ | |
| .demo-grid { | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: 16px; | |
| } | |
| .demo-card { | |
| background: rgba(255, 255, 255, 0.03); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; | |
| } | |
| .demo-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-lg); | |
| border-color: rgba(168, 218, 220, 0.25); | |
| } | |
| .demo-placeholder { | |
| position: relative; | |
| aspect-ratio: 16 / 9; | |
| background: linear-gradient(135deg, | |
| var(--color-surface-subtle) 0%, | |
| rgba(54, 54, 54, 0.6) 100% | |
| ); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| overflow: hidden; | |
| } | |
| /* Subtle grid / scan-line pattern */ | |
| .demo-placeholder::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background-image: | |
| linear-gradient(rgba(168,218,220,0.03) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(168,218,220,0.03) 1px, transparent 1px); | |
| background-size: 24px 24px; | |
| } | |
| .demo-play { | |
| width: 56px; height: 56px; | |
| border-radius: 50%; | |
| background: rgba(179, 156, 208, 0.2); | |
| border: 2px solid rgba(179, 156, 208, 0.4); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.2s ease; | |
| z-index: 1; | |
| cursor: pointer; | |
| } | |
| .demo-card:hover .demo-play { | |
| background: rgba(179, 156, 208, 0.35); | |
| transform: scale(1.08); | |
| } | |
| .demo-play-icon { | |
| width: 22px; height: 22px; | |
| color: var(--color-cta); | |
| margin-left: 2px; | |
| } | |
| .demo-duration { | |
| position: absolute; | |
| bottom: 10px; right: 12px; | |
| background: rgba(0, 0, 0, 0.6); | |
| color: var(--color-text-primary); | |
| font-size: 11px; | |
| font-weight: 500; | |
| padding: 2px 8px; | |
| border-radius: 4px; | |
| z-index: 1; | |
| } | |
| .demo-badge { | |
| position: absolute; | |
| top: 10px; right: 12px; | |
| background: rgba(179, 156, 208, 0.25); | |
| border: 1px solid rgba(179, 156, 208, 0.5); | |
| color: var(--color-cta); | |
| font-family: var(--font-heading); | |
| font-size: 10px; | |
| font-weight: 700; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| padding: 3px 10px; | |
| border-radius: 20px; | |
| z-index: 1; | |
| } | |
| .demo-info { | |
| padding: 16px 18px; | |
| } | |
| .demo-info h3 { | |
| font-family: var(--font-heading); | |
| font-size: 14px; | |
| font-weight: 700; | |
| color: var(--color-text-primary); | |
| margin-bottom: 4px; | |
| } | |
| .demo-info p { | |
| font-size: 12px; | |
| color: var(--color-text-secondary); | |
| line-height: 1.5; | |
| font-weight: 300; | |
| } | |
| /* ── Responsive ──────────────────────────── */ | |
| /* Large screens: wider container, 3-col grids */ | |
| @media (min-width: 1080px) { | |
| .container { max-width: 1080px; } | |
| .feature-grid { grid-template-columns: repeat(3, 1fr); } | |
| .arch-grid { grid-template-columns: repeat(4, 1fr); } | |
| .demo-grid { grid-template-columns: repeat(3, 1fr); } | |
| .hero-text h1 { font-size: 48px; } | |
| } | |
| /* Medium screens */ | |
| @media (min-width: 760px) and (max-width: 1079px) { | |
| .container { max-width: 920px; } | |
| .feature-grid { grid-template-columns: repeat(3, 1fr); } | |
| .demo-grid { grid-template-columns: repeat(3, 1fr); } | |
| } | |
| /* Small screens */ | |
| @media (max-width: 640px) { | |
| .hero-content { flex-direction: column; text-align: center; } | |
| .hero-text { flex: 0 0 100%; max-width: 100%; } | |
| .hero-video { flex: 0 0 100%; max-width: 100%; } | |
| .hero-actions { justify-content: center; } | |
| .hero-text h1 { font-size: 32px; } | |
| .hero-panel { padding: 28px 20px; } | |
| .feature-grid { grid-template-columns: 1fr; } | |
| .arch-grid { grid-template-columns: 1fr; } | |
| .demo-grid { grid-template-columns: 1fr; } | |
| } |