/* HobbyConnect Design System --------------------------------- Direction: "dusk-to-trailhead" — the app is about getting up early to meet strangers for a hike, a climb, a 6am run. The palette starts in a deep dusk plum (not the generic near-black-plus-neon look) and every accent is a warm sunrise gradient — coral into amber — which is the one signature color move used everywhere an action matters (FAB, primary buttons, active nav state, unread badges). Everything else stays quiet so that gradient reads as intentional, not decorative. Type: Cabinet Grotesk (display — rounded geometric, used sparingly for headings and the nav) paired with Inter (body — does the actual reading work). Both loaded via Fontshare/Google Fonts in each page's . This file layers on TOP of Bootstrap 5.3 (loaded first) — Bootstrap supplies grid/utility scaffolding, this file overrides its visual language almost entirely via CSS variables + targeted overrides. */ :root { /* ---- Dark theme (default) ---- */ --bg: #14121a; --surface: #1d1a24; --surface-2: #262230; --surface-3: #302b3b; --border: #362f42; --text: #f5f1ec; --text-muted: #a79fb3; --text-faint: #6f6780; --accent-1: #ff7a45; /* trailhead coral */ --accent-2: #ffb648; /* sunrise amber */ --accent-cool: #4cd9c0; /* mint — secondary/success */ --danger: #ff5c72; --gradient-sunrise: linear-gradient(135deg, var(--accent-1), var(--accent-2)); --gradient-sunrise-soft: linear-gradient(135deg, rgba(255, 122, 69, 0.16), rgba(255, 182, 72, 0.10)); --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; --radius-pill: 999px; --shadow-card: 0 8px 24px -12px rgba(0, 0, 0, 0.5); --shadow-raised: 0 12px 32px -8px rgba(255, 122, 69, 0.35); --font-display: "Cabinet Grotesk", "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; } [data-theme="light"] { --bg: #fbf8f4; --surface: #ffffff; --surface-2: #f4f0ea; --surface-3: #ece5db; --border: #e6ddd0; --text: #201c28; --text-muted: #6d6577; --text-faint: #a79fb3; --shadow-card: 0 8px 24px -14px rgba(32, 28, 40, 0.25); } * { box-sizing: border-box; } html, body { background: var(--bg); color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } body { min-height: 100vh; padding-bottom: 84px; /* space for the bottom nav */ } h1, h2, h3, .display { font-family: var(--font-display); letter-spacing: -0.01em; } a { color: inherit; text-decoration: none; } ::selection { background: var(--accent-1); color: #1d1208; } /* Respect reduced-motion preferences everywhere */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ============ App shell ============ */ .app-topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .app-topbar .brand { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; display: flex; align-items: center; gap: 8px; } .app-topbar .brand-mark { width: 28px; height: 28px; border-radius: 9px; background: var(--gradient-sunrise); display: inline-block; } .icon-btn { width: 40px; height: 40px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); position: relative; } .icon-btn .badge-dot { position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--gradient-sunrise); border: 2px solid var(--bg); } .app-content { max-width: 560px; margin: 0 auto; padding: 18px 16px 24px; } /* ============ Bottom navigation ============ */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-around; padding: 10px 8px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(16px); border-top: 1px solid var(--border); } .bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 0.68rem; color: var(--text-faint); font-weight: 600; padding: 4px 10px; border-radius: var(--radius-sm); } .bottom-nav a.active { color: var(--accent-1); } .bottom-nav a i { font-size: 1.25rem; } .bottom-nav .fab-slot { width: 56px; display: flex; justify-content: center; } .fab { width: 56px; height: 56px; border-radius: 50%; background: var(--gradient-sunrise); display: flex; align-items: center; justify-content: center; color: #1d1208; font-size: 1.5rem; margin-top: -34px; box-shadow: var(--shadow-raised); border: 4px solid var(--bg); animation: fab-pulse 3.5s ease-in-out infinite; } @keyframes fab-pulse { 0%, 100% { box-shadow: var(--shadow-raised); } 50% { box-shadow: 0 12px 32px -6px rgba(255, 122, 69, 0.55); } } /* ============ Cards ============ */ .card-surface { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .activity-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 16px; box-shadow: var(--shadow-card); } .activity-card .cover { height: 150px; background: var(--gradient-sunrise-soft), var(--surface-2); position: relative; } .activity-card .distance-pill { position: absolute; top: 12px; right: 12px; background: rgba(20, 18, 26, 0.65); backdrop-filter: blur(6px); color: #fff; font-size: 0.72rem; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill); } .activity-card .body { padding: 14px 16px 16px; } .activity-card .host-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-3); background-size: cover; background-position: center; flex-shrink: 0; } .avatar.sm { width: 24px; height: 24px; } .avatar.lg { width: 80px; height: 80px; border: 3px solid var(--bg); } .activity-card .title { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; margin: 0 0 4px; } .meta-row { display: flex; align-items: center; gap: 14px; font-size: 0.78rem; color: var(--text-muted); margin-bottom: 12px; } .meta-row span { display: flex; align-items: center; gap: 4px; } .stacked-avatars { display: flex; } .stacked-avatars .avatar { margin-left: -8px; border: 2px solid var(--surface); } .stacked-avatars .avatar:first-child { margin-left: 0; } /* ============ Buttons ============ */ .btn-sunrise { background: var(--gradient-sunrise); color: #1d1208; border: none; border-radius: var(--radius-pill); font-weight: 700; padding: 10px 20px; } .btn-sunrise:hover { color: #1d1208; filter: brightness(1.05); } .btn-ghost { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-pill); font-weight: 600; padding: 10px 20px; } .btn-icon-round { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--border); } /* ============ Chips ============ */ .chip-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 16px; scrollbar-width: none; } .chip-row::-webkit-scrollbar { display: none; } .chip { flex-shrink: 0; padding: 7px 14px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border); font-size: 0.82rem; font-weight: 600; color: var(--text-muted); cursor: pointer; } .chip.active { background: var(--gradient-sunrise); color: #1d1208; border-color: transparent; } /* ============ Forms ============ */ .form-control, .form-select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 11px 14px; } .form-control:focus, .form-select:focus { background: var(--surface-2); color: var(--text); border-color: var(--accent-1); box-shadow: 0 0 0 3px rgba(255, 122, 69, 0.18); } .form-control::placeholder { color: var(--text-faint); } label.form-label { font-size: 0.82rem; font-weight: 600; color: var(--text-muted); } /* Visible keyboard focus everywhere, not just form controls */ a:focus-visible, button:focus-visible, .chip:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; } /* ============ Skeleton loading ============ */ .skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: skeleton-shimmer 1.4s ease infinite; border-radius: var(--radius-sm); } @keyframes skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* ============ Empty states ============ */ .empty-state { text-align: center; padding: 56px 24px; color: var(--text-muted); } .empty-state .icon-wrap { width: 64px; height: 64px; border-radius: 50%; background: var(--gradient-sunrise-soft); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 1.6rem; color: var(--accent-1); } /* ============ Toast ============ */ .toast-stack { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 90; width: min(90vw, 380px); } .toast-sunrise { background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 16px; font-size: 0.85rem; box-shadow: var(--shadow-card); margin-bottom: 8px; } .toast-sunrise.error { border-color: var(--danger); } /* ============ Auth screens ============ */ .auth-shell { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 32px 24px; max-width: 420px; margin: 0 auto; } .auth-mark { width: 56px; height: 56px; border-radius: 18px; background: var(--gradient-sunrise); margin-bottom: 20px; } /* ============ Bottom sheet (create activity, etc.) ============ */ .sheet-backdrop { position: fixed; inset: 0; background: rgba(10, 8, 14, 0.6); z-index: 60; } .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; max-width: 560px; margin: 0 auto; background: var(--surface); border-radius: 24px 24px 0 0; border: 1px solid var(--border); border-bottom: none; max-height: 88vh; overflow-y: auto; padding: 8px 20px 28px; } .sheet .grabber { width: 40px; height: 4px; border-radius: var(--radius-pill); background: var(--surface-3); margin: 10px auto 16px; }