/* VitalCoach · 2026 design system Ported from claude.design mockup (uS8OyEj8JPY5XL8IpJz4ZQ) 2026-05-14. Opt-in via ``. Coexists with legacy vitalcoach-design.css. Lime-on-ink dark theme · Geist · 8pt grid. */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap'); /* ── TOKENS ─────────────────────────────────────────────────────────────── */ body.vc-2026 { --vc-brand: #D4FF3A; --vc-brand-on: #0B0B0B; --vc-bg: #0B0B0B; --vc-surface: #131312; --vc-surface-2: #1a1a19; --vc-line: rgba(255,255,255,.08); --vc-line-strong: rgba(255,255,255,.16); --vc-fg: #fafaf7; --vc-fg-soft: #d6d6d2; --vc-fg-mute: #908f88; --vc-fg-dim: #65645e; --vc-ok: #86efac; --vc-bad: #fca5a5; --vc-warn: #fbbf24; --vc-font: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif; --vc-mono: 'Geist Mono', ui-monospace, Menlo, monospace; --vc-serif: 'Instrument Serif', Georgia, serif; --vc-r-sm: 8px; --vc-r-md: 12px; --vc-r-lg: 16px; /* legacy aliases so existing pages auto-upgrade */ --bg: var(--vc-bg); --card: var(--vc-surface); --card2: var(--vc-surface-2); --sidebar: var(--vc-surface); --green: var(--vc-brand); --green-lt: #E5FF7A; --green-dim: rgba(212,255,58,.10); --green-ink: var(--vc-brand-on); --border: var(--vc-line); --border-green: rgba(212,255,58,.28); --txt: var(--vc-fg); --txt-md: var(--vc-fg-soft); --txt-dim: var(--vc-fg-mute); --txt-muted: var(--vc-fg-dim); --radius: var(--vc-r-md); --font: var(--vc-font); background: var(--vc-bg) !important; color: var(--vc-fg) !important; font-family: var(--vc-font) !important; -webkit-font-smoothing: antialiased; font-feature-settings: 'ss01','cv11'; } body.vc-2026 * { box-sizing: border-box; } /* ── COMPAT: lift existing classes into the new look ──────────────────── */ body.vc-2026 .topbar { background: rgba(11,11,11,0.82) !important; border-bottom: 1px solid var(--vc-line) !important; backdrop-filter: blur(8px); padding: 14px 24px !important; } body.vc-2026 .topbar-title { font-size: 20px !important; font-weight: 600 !important; letter-spacing: -0.015em !important; color: var(--vc-fg) !important; } body.vc-2026 .btn { border-radius: 8px !important; font-weight: 500 !important; font-size: 12.5px !important; padding: 7px 12px !important; font-family: inherit !important; border: 1px solid transparent !important; transition: background .12s, border-color .12s; } body.vc-2026 .btn-green { background: var(--vc-brand) !important; color: var(--vc-brand-on) !important; border-color: color-mix(in oklab, var(--vc-brand) 60%, #000) !important; font-weight: 600 !important; } body.vc-2026 .btn-green:hover { background: color-mix(in oklab, var(--vc-brand) 88%, #fff) !important; } body.vc-2026 .btn-ghost { background: rgba(255,255,255,.03) !important; color: var(--vc-fg) !important; border-color: var(--vc-line) !important; } body.vc-2026 .btn-ghost:hover { background: rgba(255,255,255,.06) !important; border-color: var(--vc-line-strong) !important; } /* legacy stat / panel / list compat */ body.vc-2026 .stat-card, body.vc-2026 .panel, body.vc-2026 .quick-card { background: var(--vc-surface) !important; border: 1px solid var(--vc-line) !important; border-radius: var(--vc-r-lg) !important; } body.vc-2026 .stat-val { font-size: 28px !important; font-weight: 700 !important; letter-spacing: -0.025em !important; line-height: 1 !important; color: var(--vc-fg) !important; } body.vc-2026 .stat-label { font-size: 11.5px !important; color: var(--vc-fg-mute) !important; font-weight: 500 !important; letter-spacing: 0.04em !important; } body.vc-2026 .stat-card.green-accent { border-color: rgba(212,255,58,.28) !important; } body.vc-2026 .stat-card.green-accent .stat-val { color: var(--vc-brand) !important; } body.vc-2026 .stat-link { color: var(--vc-brand) !important; } body.vc-2026 .stat-sub { color: var(--vc-fg-mute) !important; } body.vc-2026 .stat-sub .waived { color: var(--vc-brand) !important; } body.vc-2026 .panel-header { padding: 14px 16px !important; border-bottom: 1px solid var(--vc-line) !important; } body.vc-2026 .panel-title { font-size: 13.5px !important; font-weight: 600 !important; letter-spacing: -0.005em !important; color: var(--vc-fg) !important; } body.vc-2026 .panel-link { color: var(--vc-brand) !important; font-size: 12px !important; } body.vc-2026 .list-item { border-bottom: 1px solid var(--vc-line) !important; } body.vc-2026 .list-avatar { background: rgba(212,255,58,.10) !important; border: 1px solid rgba(212,255,58,.2) !important; color: var(--vc-brand) !important; } body.vc-2026 .list-name { color: var(--vc-fg) !important; } body.vc-2026 .list-meta { color: var(--vc-fg-mute) !important; } body.vc-2026 .badge { border-radius: 999px !important; font-size: 11px !important; } body.vc-2026 .badge-green { background: rgba(212,255,58,.10) !important; color: var(--vc-brand) !important; } body.vc-2026 .badge-orange { background: rgba(255,107,74,.12) !important; color: #FF6B4A !important; } body.vc-2026 .empty-state { color: var(--vc-fg-mute) !important; } body.vc-2026 .quick-icon { color: var(--vc-brand) !important; } body.vc-2026 .quick-label { color: var(--vc-fg) !important; } body.vc-2026 .quick-sub { color: var(--vc-fg-mute) !important; } body.vc-2026 .quick-card:hover { border-color: rgba(212,255,58,.28) !important; background: rgba(212,255,58,.04) !important; } body.vc-2026 .section-title { font-size: 10px !important; font-weight: 500 !important; font-family: var(--vc-mono) !important; color: var(--vc-fg-dim) !important; letter-spacing: 0.08em !important; } body.vc-2026 .trial-banner, body.vc-2026 .demo-banner { border-radius: var(--vc-r-lg) !important; } /* refined sidebar overrides */ body.vc-2026 .sidebar { background: var(--vc-surface) !important; border-right: 1px solid var(--vc-line) !important; width: 224px !important; } body.vc-2026 .main { margin-left: 224px !important; } @media (max-width: 900px) { body.vc-2026 .main { margin-left: 0 !important; } } body.vc-2026 .sidebar-header { padding: 14px 14px 14px !important; border-bottom: 1px solid var(--vc-line) !important; } body.vc-2026 .sidebar-logo { font-size: 14px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; color: var(--vc-fg) !important; } body.vc-2026 .sidebar-logo-icon { border-radius: 9px !important; width: 32px !important; height: 32px !important; } body.vc-2026 .nav-section { font-size: 10px !important; font-family: var(--vc-mono) !important; font-weight: 500 !important; letter-spacing: 0.08em !important; color: var(--vc-fg-dim) !important; padding: 12px 8px 4px !important; } body.vc-2026 .nav-item { font-size: 13px !important; font-weight: 500 !important; color: var(--vc-fg-soft) !important; border-radius: 7px !important; padding: 7px 9px !important; } body.vc-2026 .nav-item:hover { background: rgba(255,255,255,.04) !important; color: var(--vc-fg) !important; } body.vc-2026 .nav-item.active { background: rgba(212,255,58,.10) !important; color: var(--vc-fg) !important; border-color: transparent !important; position: relative !important; } body.vc-2026 .nav-item.active::before { content: ''; position: absolute; left: -3px; top: 7px; bottom: 7px; width: 3px; background: var(--vc-brand); border-radius: 0 3px 3px 0; } body.vc-2026 .nav-item.active .nav-badge { background: var(--vc-brand) !important; color: var(--vc-brand-on) !important; font-weight: 700 !important; } body.vc-2026 .sidebar-footer { border-top: 1px solid var(--vc-line) !important; } body.vc-2026 .user-name { color: var(--vc-fg) !important; font-weight: 500 !important; } body.vc-2026 .user-plan { color: var(--vc-fg-mute) !important; } /* ── NEW PRIMITIVES (mockup classes — opt-in) ───────────────────────────── */ .vc-app { display: flex; width: 100%; min-height: 100vh; background: var(--vc-bg); color: var(--vc-fg); font-family: var(--vc-font); } .vc-eyebrow { font-family: var(--vc-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--vc-fg-mute); } .vc-title { margin: 1px 0 0; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; color: var(--vc-fg); } /* Buttons */ .vc-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; font-weight: 500; font-size: 12.5px; white-space: nowrap; font-family: inherit; transition: background .12s, border-color .12s; text-decoration: none; } .vc-btn-primary { background: var(--vc-brand); color: var(--vc-brand-on); border-color: color-mix(in oklab, var(--vc-brand) 60%, #000); font-weight: 600; } .vc-btn-primary:hover { background: color-mix(in oklab, var(--vc-brand) 88%, #fff); } .vc-btn-ghost { background: rgba(255,255,255,.03); color: var(--vc-fg); border-color: var(--vc-line); } .vc-btn-ghost:hover { background: rgba(255,255,255,.06); border-color: var(--vc-line-strong); } .vc-btn-sm { padding: 5px 10px; font-size: 11.5px; } /* Cards */ .vc-card { background: var(--vc-surface); border: 1px solid var(--vc-line); border-radius: var(--vc-r-lg); overflow: hidden; } .vc-card-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--vc-line); gap: 12px; } .vc-card-h h3 { margin: 0; font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em; color: var(--vc-fg); } .vc-card-sub { font-size: 11.5px; color: var(--vc-fg-mute); margin-top: 1px; } .vc-card-b { padding: 14px 16px; } /* KPI row */ .vc-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; } .vc-kpi { background: var(--vc-surface); border: 1px solid var(--vc-line); border-radius: var(--vc-r-lg); padding: 14px 16px; min-height: 130px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; } .vc-kpi-l { font-size: 11.5px; color: var(--vc-fg-mute); } .vc-kpi-v { font-size: 28px; font-weight: 700; letter-spacing: -0.025em; line-height: 1; margin-top: 8px; color: var(--vc-fg); } .vc-kpi-d { font-family: var(--vc-mono); font-size: 11px; } .vc-kpi-ring { flex-direction: row; align-items: center; gap: 12px; } .vc-up { color: var(--vc-ok); } .vc-down { color: var(--vc-bad); } @media (max-width: 1100px) { .vc-kpi-row { grid-template-columns: repeat(2, 1fr); } } /* Dashboard grid */ .vc-dash-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; } .vc-dash-today { grid-column: span 8; grid-row: span 2; } .vc-dash-orbit { grid-column: span 4; grid-row: span 2; } .vc-dash-fc { grid-column: span 5; } .vc-dash-msg { grid-column: span 4; } .vc-dash-rev { grid-column: span 3; } @media (max-width: 1200px) { .vc-dash-today, .vc-dash-orbit { grid-column: span 12; grid-row: auto; } .vc-dash-fc { grid-column: span 12; } .vc-dash-msg { grid-column: span 7; } .vc-dash-rev { grid-column: span 5; } } @media (max-width: 900px) { .vc-dash-msg, .vc-dash-rev { grid-column: span 12; } } /* Sessions row */ .vc-sess-row { display: grid; grid-template-columns: 50px 32px 3px 28px 1fr auto 14px; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--vc-line); cursor: pointer; color: var(--vc-fg); } .vc-sess-row:hover { background: rgba(255,255,255,.02); } .vc-sess-row:last-child { border-bottom: 0; } /* Orbit items */ .vc-orbit-pill { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; background: linear-gradient(135deg, rgba(212,255,58,.08), rgba(255,255,255,.02)); border: 1px solid rgba(212,255,58,.2); font-size: 12.5px; font-weight: 500; cursor: pointer; color: var(--vc-fg); } .vc-orbit-dot { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--vc-brand), #6b8826); box-shadow: 0 0 8px var(--vc-brand); flex-shrink: 0; display: inline-block; } .vc-orbit-pill kbd { margin-left: auto; font-family: var(--vc-mono); font-size: 10px; padding: 1px 5px; background: rgba(255,255,255,.06); border-radius: 4px; color: var(--vc-fg-mute); } .vc-orbit-item { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 10px; border-radius: 9px; background: rgba(255,255,255,.02); border: 1px solid var(--vc-line); } .vc-orbit-icon { width: 28px; height: 28px; border-radius: 7px; background: var(--vc-brand); color: var(--vc-brand-on); display: grid; place-items: center; } /* Form-check mini-card */ .vc-fc-mini { display: flex; gap: 10px; padding: 10px; background: rgba(255,255,255,.02); border: 1px solid var(--vc-line); border-radius: 10px; cursor: pointer; } .vc-fc-mini:hover { background: rgba(255,255,255,.04); } .vc-fc-thumb { width: 60px; height: 44px; flex-shrink: 0; background: linear-gradient(135deg, #1a1a1a, #2a2a2a); border-radius: 7px; display: grid; place-items: center; position: relative; } .vc-fc-dur { position: absolute; bottom: 3px; right: 3px; font-size: 9px; padding: 1px 4px; background: rgba(0,0,0,.7); color: #fff; border-radius: 3px; font-family: var(--vc-mono); } /* Message mini */ .vc-msg-mini { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--vc-line); cursor: pointer; color: var(--vc-fg); } .vc-msg-mini:hover { background: rgba(255,255,255,.02); } .vc-msg-mini:last-child { border-bottom: 0; } .vc-unread { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--vc-brand); } /* Chips / tabs */ .vc-chip { background: rgba(255,255,255,.04); border: 1px solid var(--vc-line); padding: 4px 10px; border-radius: 999px; font-size: 11.5px; color: var(--vc-fg-soft); cursor: pointer; font-family: inherit; } .vc-chip:hover { background: rgba(255,255,255,.07); } .vc-chip.is-active { background: var(--vc-brand); color: var(--vc-brand-on); border-color: transparent; font-weight: 600; } .vc-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--vc-line); overflow-x: auto; } .vc-tab { background: transparent; border: 0; padding: 9px 12px; cursor: pointer; font-size: 12.5px; color: var(--vc-fg-mute); font-family: inherit; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; } .vc-tab:hover { color: var(--vc-fg); } .vc-tab.is-active { color: var(--vc-fg); border-bottom-color: var(--vc-brand); font-weight: 500; } /* Toggle switch */ .vc-switch { width: 32px; height: 18px; background: rgba(255,255,255,.08); border-radius: 999px; position: relative; cursor: pointer; display: inline-block; } .vc-switch > span { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--vc-fg-mute); transition: all .15s; } .vc-switch.is-on { background: var(--vc-brand); } .vc-switch.is-on > span { left: 16px; background: var(--vc-brand-on); } /* Tags */ .vc-tag { display: inline-flex; align-items: center; font-size: 10.5px; font-family: var(--vc-mono); padding: 2px 7px; border-radius: 4px; background: rgba(255,255,255,.06); color: var(--vc-fg-soft); font-weight: 500; letter-spacing: 0.02em; } .vc-tag-brand { background: var(--vc-brand); color: var(--vc-brand-on); font-weight: 700; } .vc-tag-ok { background: rgba(134,239,172,.14); color: var(--vc-ok); } .vc-tag-bad { background: rgba(252,165,165,.14); color: var(--vc-bad); } .vc-tag-warn { background: rgba(251,191,36,.14); color: var(--vc-warn); } .vc-tag-dim { background: transparent; color: var(--vc-fg-mute); border: 1px solid var(--vc-line); } /* Inputs */ .vc-input { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: rgba(255,255,255,.03); border: 1px solid var(--vc-line); border-radius: 8px; } .vc-input input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 12.5px; color: var(--vc-fg); font-family: inherit; } .vc-input input::placeholder { color: var(--vc-fg-mute); } .vc-input kbd { font-family: var(--vc-mono); font-size: 10px; padding: 1px 5px; background: rgba(255,255,255,.06); border-radius: 4px; color: var(--vc-fg-mute); } /* Top-search row */ .vc-top-search { display: flex; align-items: center; gap: 8px; width: min(380px, 100%); padding: 7px 10px; background: var(--vc-surface-2); border: 1px solid transparent; border-radius: 10px; color: var(--vc-fg-mute); } .vc-top-search input { flex: 1; border: 0; background: transparent; outline: 0; font-size: 12.5px; color: var(--vc-fg); font-family: inherit; } .vc-top-search input::placeholder { color: var(--vc-fg-mute); } /* Programs grid */ .vc-prog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .vc-prog-card { background: var(--vc-surface); border: 1px solid var(--vc-line); border-radius: var(--vc-r-lg); overflow: hidden; cursor: pointer; transition: transform .15s, border-color .15s; } .vc-prog-card:hover { transform: translateY(-2px); border-color: var(--vc-line-strong); } .vc-prog-cover { aspect-ratio: 16/9; position: relative; display: grid; place-items: center; } @media (max-width: 1100px) { .vc-prog-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .vc-prog-grid { grid-template-columns: 1fr; } } /* Pricing tiers */ .vc-tier-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .vc-tier { background: var(--vc-surface); border: 1px solid var(--vc-line); border-radius: var(--vc-r-lg); padding: 22px 20px; position: relative; } .vc-tier.is-current { border-color: var(--vc-brand); box-shadow: 0 0 0 3px rgba(212,255,58,.10); } .vc-tier.is-studio { background: linear-gradient(180deg, rgba(212,255,58,.06), var(--vc-surface)); } @media (max-width: 1100px) { .vc-tier-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .vc-tier-grid { grid-template-columns: 1fr; } } /* Add row */ .vc-add-row { width: 100%; padding: 12px; background: transparent; border: 1px dashed var(--vc-line); border-radius: 10px; color: var(--vc-fg-mute); cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; } .vc-add-row:hover { border-color: var(--vc-brand); color: var(--vc-brand); } /* Workout-builder layout */ .vc-wb-grid { display: grid; grid-template-columns: 300px 1fr 320px; gap: 14px; } .vc-wb-ex { background: rgba(255,255,255,.02); border: 1px solid var(--vc-line); border-radius: 10px; padding: 10px 12px; } @media (max-width: 1200px) { .vc-wb-grid { grid-template-columns: 280px 1fr; } .vc-wb-orbit { display: none; } } @media (max-width: 900px) { .vc-wb-grid { grid-template-columns: 1fr; } } /* Meal-builder layout */ .vc-mb-grid { display: grid; grid-template-columns: 280px 1fr; gap: 14px; } @media (max-width: 900px) { .vc-mb-grid { grid-template-columns: 1fr; } } .vc-day-picker { display: flex; gap: 5px; } .vc-day-pick { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 10px; border-radius: 8px; background: transparent; border: 1px solid var(--vc-line); cursor: pointer; font-family: inherit; color: var(--vc-fg); } .vc-day-pick.is-active { background: var(--vc-brand); color: var(--vc-brand-on); border-color: transparent; } /* Form-check review layout */ .vc-fc-grid { display: grid; grid-template-columns: 320px 1fr; gap: 14px; } @media (max-width: 1000px) { .vc-fc-grid { grid-template-columns: 1fr; } } .vc-fc-item { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--vc-line); cursor: pointer; } .vc-fc-item:hover { background: rgba(255,255,255,.02); } .vc-fc-item.is-sel { background: rgba(212,255,58,.06); border-left: 3px solid var(--vc-brand); padding-left: 11px; } /* Client-detail grid */ .vc-cd-grid { display: grid; grid-template-columns: 300px 1fr; gap: 16px; } @media (max-width: 1000px) { .vc-cd-grid { grid-template-columns: 1fr; } } .vc-cd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 1100px) { .vc-cd-stats { grid-template-columns: repeat(2, 1fr); } } .vc-cd-stat { padding: 14px; background: var(--vc-surface); border: 1px solid var(--vc-line); border-radius: var(--vc-r-lg); display: flex; align-items: center; gap: 12px; } .vc-block-grid { display: grid; grid-template-columns: repeat(7, 1fr); } .vc-block-day { padding: 14px 12px; border-right: 1px solid var(--vc-line); background: rgba(255,255,255,.01); min-height: 86px; } .vc-block-day:last-child { border-right: 0; } .vc-block-day.is-work { background: rgba(255,255,255,.03); } .vc-block-day.is-done { background: rgba(212,255,58,.04); } @media (max-width: 700px) { .vc-block-grid { grid-template-columns: repeat(3, 1fr); } .vc-block-day { border-bottom: 1px solid var(--vc-line); } } /* Sparkline helper */ .vc-spark { width: 100%; height: 28px; display: block; } /* Utilities */ .vc-mono { font-family: var(--vc-mono); } .vc-serif { font-family: var(--vc-serif); } .vc-mute { color: var(--vc-fg-mute); } .vc-dim { color: var(--vc-fg-dim); } /* ── FOCUS-VISIBLE (keyboard only — mouse clicks unaffected) ─────────────── */ /* High-contrast lime ring (3:1+ on the dark ink surface). :focus-visible so pointer activation stays ringless; element keeps its own border-radius. */ body.vc-2026 .btn-green:focus-visible, body.vc-2026 .btn-ghost:focus-visible, .vc-btn:focus-visible, .vc-btn-primary:focus-visible, .vc-btn-ghost:focus-visible, .vc-chip:focus-visible, .vc-tab:focus-visible, .vc-day-pick:focus-visible, .vc-add-row:focus-visible { outline: 2px solid var(--vc-brand, #D4FF3A); outline-offset: 2px; }