/* ═══════════════════════════════════════════════════════════ QMSpace shared theme Mirrors index.html's design tokens. Supports light/dark via [data-theme="light"] on . Default is dark. ═══════════════════════════════════════════════════════════ */ /* ── DESIGN TOKENS — DARK (default) ────────────────────────── */ :root { --bg: #06070b; --bg-elevated: rgba(255,255,255,.05); --bg-card: rgba(255,255,255,.03); --bg-input: rgba(255,255,255,.04); --bg-hover: rgba(255,255,255,.07); --text: #eef0f6; --text-mid: rgba(238,240,246,.6); --text-dim: rgba(238,240,246,.4); --border: rgba(255,255,255,.07); --border-hover: rgba(255,255,255,.14); --border-strong: rgba(255,255,255,.22); --green: #22c55e; --green-dim: rgba(34,197,94,.15); --green-faint: rgba(34,197,94,.06); --green-text: #4ade80; --red: #ef4444; --red-dim: rgba(239,68,68,.12); --red-text: #fca5a5; --yellow: #eab308; --yellow-dim: rgba(234,179,8,.12); --yellow-text: #facc15; --blue: #3b82f6; --blue-dim: rgba(59,130,246,.12); --blue-text: #60a5fa; --accent: #818cf8; --radius: 20px; --radius-sm: 12px; --radius-xs: 8px; --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; color-scheme: dark; } /* ── DESIGN TOKENS — LIGHT (override) ──────────────────────── */ [data-theme="light"] { --bg: #f6f7f9; --bg-elevated: #ffffff; --bg-card: #ffffff; --bg-input: #ffffff; --bg-hover: #f1f3f5; --text: #0b1220; --text-mid: rgba(11,18,32,.7); --text-dim: rgba(11,18,32,.5); --border: rgba(0,0,0,.08); --border-hover: rgba(0,0,0,.16); --border-strong: rgba(0,0,0,.28); --green-faint: rgba(34,197,94,.10); color-scheme: light; } /* ── RESET / BASE ──────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { background: var(--bg); } body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background 0.2s, color 0.2s; } ::selection { background: rgba(129,140,248,.3); color: var(--text); } p { margin: 0; } a { color: inherit; text-decoration: none; } /* ── NAV ───────────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 100; padding: 0 24px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); border-bottom: 1px solid var(--border); } .nav-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 64px; } .nav-logo { font-family: var(--font-body); font-weight: 800; font-size: 15px; color: var(--text); display: flex; align-items: center; gap: 10px; letter-spacing: -.3px; } .nav-logo-mark { width: 30px; height: 30px; border-radius: 6px; object-fit: contain; } .nav-context-tag { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--green-dim); color: var(--green-text); letter-spacing: .5px; text-transform: uppercase; } .nav-links { display: flex; align-items: center; gap: 6px; } .nav-link { padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--text-mid); border-radius: 8px; transition: all .2s; } .nav-link:hover { color: var(--text); background: var(--bg-hover); } .nav-link.active { color: var(--text); background: var(--bg-hover); font-weight: 600; } .nav-link.cta { background: var(--green); color: #fff; font-weight: 600; margin-left: 4px; } .nav-link.cta:hover { background: #16a34a; color: #fff; } .nav-link.ghost { border: 1px solid var(--border); color: var(--text-mid); } .nav-link.ghost:hover { border-color: var(--border-hover); color: var(--text); background: transparent; } /* Account pill — shows business name on signed-in pages */ .nav-account { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border: 1px solid var(--border); border-radius: 99px; font-size: 13px; color: var(--text); background: var(--bg-card); transition: all .2s; margin-left: 6px; text-decoration: none; } .nav-account:hover { border-color: var(--border-hover); background: var(--bg-hover); color: var(--text); } .nav-account-letter { width: 24px; height: 24px; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 12px; font-weight: 700; flex-shrink: 0; } .nav-account-name { font-weight: 500; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 720px) { .nav-account .nav-account-name { display: none; } .nav-account { padding: 4px; } } /* Theme toggle */ .theme-toggle { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); color: var(--text-mid); border-radius: 10px; cursor: pointer; transition: all .2s; flex-shrink: 0; } .theme-toggle:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border-hover); } .theme-toggle svg { width: 16px; height: 16px; } .theme-toggle .sun { display: none; } .theme-toggle .moon { display: block; } [data-theme="light"] .theme-toggle .sun { display: block; } [data-theme="light"] .theme-toggle .moon { display: none; } /* ── PAGE SHELL ────────────────────────────────────────────── */ .shell { max-width: 1100px; margin: 32px auto; padding: 0 24px; } .shell-narrow { max-width: 680px; margin: 32px auto; padding: 0 24px; } /* ── HEADINGS ──────────────────────────────────────────────── */ .h-display { font-family: var(--font-display); font-weight: 700; letter-spacing: -.5px; color: var(--text); } .section-label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 14px; } /* ── CARDS ─────────────────────────────────────────────────── */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; } .card-sm { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; } .metric-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; } .metric-card .label { font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; } .metric-card .value { font-family: var(--font-body); font-size: 24px; font-weight: 700; letter-spacing: -.5px; color: var(--text); line-height: 1.1; } .metric-card .sub { font-size: 11px; color: var(--text-dim); margin-top: 4px; } /* ── BUTTONS ───────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; font-family: var(--font-body); font-size: 13px; font-weight: 600; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: all .25s; background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); white-space: nowrap; } .btn:hover { background: var(--bg-hover); border-color: var(--border-hover); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn-primary { background: var(--green); color: #fff; border-color: transparent; } .btn-primary:hover { background: #16a34a; color: #fff; border-color: transparent; box-shadow: 0 4px 16px rgba(34,197,94,.25); } .btn-ghost { background: transparent; } .btn-sm { padding: 7px 12px; font-size: 12px; } .btn-lg { padding: 14px 28px; font-size: 14px; } .btn-icon { width: 36px; height: 36px; padding: 0; } /* ── FIELDS ────────────────────────────────────────────────── */ .field { margin-bottom: 18px; } .field-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-mid); margin-bottom: 8px; letter-spacing: .2px; } .field-help { font-size: 11px; color: var(--text-dim); margin-top: 6px; } .field-input, input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], select, textarea { width: 100%; padding: 12px 14px; font-family: var(--font-body); font-size: 14px; color: var(--text); background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); outline: none; transition: all .2s; } input::placeholder, textarea::placeholder { color: var(--text-dim); } input:focus, select:focus, textarea:focus, .field-input:focus { border-color: rgba(34,197,94,.4); box-shadow: 0 0 0 3px rgba(34,197,94,.08); background: var(--bg-hover); } textarea { resize: vertical; min-height: 88px; font-family: inherit; } select { appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } /* ── BADGES ────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 99px; letter-spacing: .3px; white-space: nowrap; } .badge-success { background: var(--green-dim); color: var(--green-text); } .badge-warning { background: var(--yellow-dim); color: var(--yellow-text); } .badge-danger { background: var(--red-dim); color: var(--red-text); } .badge-info { background: var(--blue-dim); color: var(--blue-text); } .badge-muted { background: var(--bg-elevated); color: var(--text-dim); border: 1px solid var(--border); } .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .dot-success { background: var(--green); box-shadow: 0 0 6px rgba(34,197,94,.6); } .dot-warning { background: var(--yellow); box-shadow: 0 0 6px rgba(234,179,8,.6); } .dot-danger { background: var(--red); box-shadow: 0 0 6px rgba(239,68,68,.6); } .dot-info { background: var(--blue); box-shadow: 0 0 6px rgba(59,130,246,.6); } .dot-muted { background: var(--text-dim); } /* ── ROWS ──────────────────────────────────────────────────── */ .row-list > .row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--border); gap: 12px; } .row-list > .row:last-child { border-bottom: none; } .row-list > .row:first-child { padding-top: 4px; } /* ── STEP PROGRESS (4-step wizard) ─────────────────────────── */ .step-progress { display: flex; align-items: center; gap: 0; margin-bottom: 28px; padding: 0 4px; } .step-dot { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; border: 2px solid var(--border); color: var(--text-dim); background: var(--bg); transition: all .4s cubic-bezier(.22,1,.36,1); flex-shrink: 0; position: relative; } .step-dot.active { border-color: var(--green); color: var(--green); box-shadow: 0 0 18px rgba(34,197,94,.2); } .step-dot.done { border-color: var(--green); background: var(--green); color: #fff; } .step-dot.done::after { content: '\2713'; position: absolute; font-size: 14px; font-weight: 800; } .step-dot.done span { opacity: 0; } .step-line { flex: 1; height: 2px; background: var(--border); transition: background .4s; } .step-line.done { background: var(--green); } /* ── PROGRESS BAR ──────────────────────────────────────────── */ .progress-bar { height: 6px; background: var(--bg-elevated); border-radius: 99px; overflow: hidden; } .progress-fill { height: 100%; border-radius: 99px; transition: width 0.5s cubic-bezier(.22,1,.36,1); background: var(--green); } .progress-fill.warning { background: var(--yellow); } .progress-fill.danger { background: var(--red); } .progress-fill.info { background: var(--blue); } /* ── SNIPPET / CODE ────────────────────────────────────────── */ .snippet-box { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; font-family: var(--font-mono); font-size: 13px; color: var(--text); word-break: break-all; } /* ── UTIL ──────────────────────────────────────────────────── */ .flex { display: flex; } .flex-center { display: flex; align-items: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-col { display: flex; flex-direction: column; } .gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; } .text-mid { color: var(--text-mid); } .text-dim { color: var(--text-dim); } .text-green { color: var(--green-text); } .text-red { color: var(--red-text); } .text-yellow { color: var(--yellow-text); } .text-blue { color: var(--blue-text); } .font-mono { font-family: var(--font-mono); } .w-full { width: 100%; } /* ── RESPONSIVE NAV (mobile) ───────────────────────────────── */ @media (max-width: 640px) { .nav-links .nav-link.cta-mobile-hide { display: none; } .nav { padding: 0 16px; } }