/* ============================================================ Banter — Design System v1 (shared by every screen) "Refined Light": cool-slate neutrals, ONE confident coral accent, hairline borders, layered soft shadows, 4px spacing rhythm. Light-first; dark via [data-theme="dark"] on (toggle stored in localStorage). ============================================================ */ :root { /* neutrals — cool slate, biased toward the accent */ --bg: #f5f6f9; --surface: #ffffff; --surface-2: #eff1f6; --surface-3: #e7eaf1; --border: #e6e8ef; --border-2: #d5d9e3; --text: #171922; --text-2: #565d6c; --text-3: #6e7482; /* WCAG AA on white at small sizes (was #878e9d ≈ 3.4:1) */ /* accent — Banter coral */ --accent: #ff5a4d; --accent-hover: #ef4a3d; --accent-press: #d93b30; --accent-soft: #ffece9; --accent-line: #ffc9c2; --accent-text: #d93b30; /* coral text that passes AA on soft-coral backgrounds */ --on-accent: #ffffff; /* semantic — state only, never decoration */ --ok: #15803d; --ok-soft: #e8f6ee; --warn: #b45309; --warn-soft: #fdf2e5; --bad: #c22a2a; --bad-soft: #fceaea; --info: #1d67c9; --info-soft: #e9f1fc; /* elevation + focus — Refined Light: layered, slightly deeper, crisper */ --sh-xs: 0 1px 1px rgba(20,25,40,.04); --sh-sm: 0 1px 2px rgba(20,25,40,.05), 0 2px 6px rgba(20,25,40,.06); --sh: 0 2px 5px rgba(20,25,40,.05), 0 6px 18px rgba(20,25,40,.09); --sh-lg: 0 16px 44px rgba(20,25,40,.18); --ring: 0 0 0 3px rgba(255,90,77,.32); /* type scale */ --fs-xs: .6875rem; --fs-sm: .78rem; --fs-base: .875rem; --fs-md: .9375rem; --fs-lg: 1.0625rem; --fs-xl: 1.25rem; --fs-2xl: 1.625rem; --fs-3xl: 2.125rem; /* spacing (4px base) */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; /* radius */ --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-xl: 18px; --r-full: 999px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color-scheme: light; } html[data-theme="dark"] { --bg: #0d0f14; --surface: #161922; --surface-2: #1e222d; --surface-3: #262b38; --border: #272c39; --border-2: #333a4a; --text: #e9ebf1; --text-2: #a6adbd; --text-3: #8b93a5; /* AA on dark surfaces (was #6d7688 ≈ 3.3:1) */ --accent: #ff6a5d; --accent-hover: #ff8175; --accent-press: #ef4a3d; --accent-soft: #2e1714; --accent-line: #4a231e; --accent-text: #ff8175; /* lighter coral text for dark soft-coral backgrounds */ --on-accent: #ffffff; --ok: #37c07d; --ok-soft: #12241c; --warn: #e0a75a; --warn-soft: #2a2115; --bad: #f0736f; --bad-soft: #2a1717; --info: #5aa2f0; --info-soft: #14202f; --sh-xs: 0 1px 1px rgba(0,0,0,.4); --sh-sm: 0 1px 2px rgba(0,0,0,.4); --sh: 0 2px 6px rgba(0,0,0,.4); --sh-lg: 0 14px 40px rgba(0,0,0,.55); --ring: 0 0 0 3px rgba(255,106,93,.45); color-scheme: dark; } /* dark-mode badge borders — the light-hue RGBA borders vanish on dark soft bgs */ html[data-theme="dark"] .b-ok { border-color: rgba(55,192,125,.32); } html[data-theme="dark"] .b-warn { border-color: rgba(224,167,90,.32); } html[data-theme="dark"] .b-bad { border-color: rgba(240,115,111,.32); } html[data-theme="dark"] .b-info { border-color: rgba(90,162,240,.32); } html[data-theme="dark"] .b-accent { border-color: var(--accent-line); } /* ── Banter brand lockup (headers) ──────────────────────── */ .brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; } .brand-mark { height: 26px; width: auto; display: block; flex-shrink: 0; } .brand-name { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.01em; color: var(--text); line-height: 1; } .brand-page { font-size: var(--fs-md); font-weight: 600; color: var(--text-3); line-height: 1; white-space: nowrap; } .brand-page::before { content: "·"; margin: 0 8px 0 6px; color: var(--border-2); font-weight: 400; } /* ── base ─────────────────────────────────────────────── */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: var(--fs-base); line-height: 1.5; -webkit-font-smoothing: antialiased; } button, input, select, textarea { font-family: inherit; } a { color: var(--accent); } /* ── top bar (white/neutral, Podium-style) ────────────── */ .topbar { display: flex; align-items: center; gap: var(--s2); background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 var(--s4); height: 56px; flex-shrink: 0; overflow-x: auto; /* never trap actions off-screen on phones */ scrollbar-width: none; } .topbar::-webkit-scrollbar { display: none; } .topbar .brand { font-size: var(--fs-md); font-weight: 800; letter-spacing: -.01em; white-space: nowrap; margin-right: var(--s3); color: var(--text); text-decoration: none; } .topbar .brand .dot-accent { color: var(--accent); } .topbar .nav-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); background: transparent; border: 0; border-radius: var(--r); padding: 8px 12px; cursor: pointer; text-decoration: none; transition: background .12s, color .12s; } .topbar .nav-btn:hover { background: var(--surface-2); color: var(--text); } .topbar .nav-btn.active { background: var(--accent-soft); color: var(--accent-text); } /* ── shared nav (nav.js) — same items/order/active on every page ── */ .banter-nav { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; } .banter-nav .nav-btn { display: inline-flex; align-items: center; white-space: nowrap; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); background: transparent; border: 0; border-radius: var(--r); padding: 8px 12px; cursor: pointer; text-decoration: none; transition: background .12s, color .12s; } .banter-nav .nav-btn:hover { background: var(--surface-2); color: var(--text); } .banter-nav .nav-btn.active { background: var(--accent-soft); color: var(--accent-text); } .banter-nav .nav-actions { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; } /* collapse to a single Menu button on phones */ .banter-nav .nav-menu-btn { display: none; } @media (max-width: 700px) { .banter-nav { position: relative; } .banter-nav .nav-btn[data-nav] { display: none; } .banter-nav .nav-menu-btn { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r); padding: 8px 12px; cursor: pointer; } .banter-nav.open .nav-btn[data-nav] { display: flex; width: 100%; } .banter-nav.open { position: absolute; top: 100%; right: 0; z-index: 90; flex-direction: column; align-items: stretch; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r); box-shadow: var(--sh-lg); padding: var(--s2); min-width: 180px; } } .topbar .nav-btn.primary { background: var(--accent); color: var(--on-accent); } .topbar .nav-btn.primary:hover { background: var(--accent-hover); } .topbar .spacer { flex: 1; min-width: var(--s2); } .topbar .whoami { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; line-height: 1.25; text-align: right; } .topbar .whoami b { color: var(--text-2); font-size: var(--fs-sm); } /* connection pill */ .conn { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); white-space: nowrap; } .conn .conn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); } .conn.on .conn-dot { background: var(--ok); } .conn.on { color: var(--ok); } /* ── buttons ──────────────────────────────────────────── */ .btn { font-weight: 600; font-size: var(--fs-base); border-radius: var(--r); padding: 9px 16px; cursor: pointer; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .12s, border-color .12s, box-shadow .12s, color .12s; text-decoration: none; } .btn:focus-visible { outline: none; box-shadow: var(--ring); } .btn:disabled { opacity: .55; cursor: not-allowed; } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-primary:hover:not(:disabled) { background: var(--accent-hover); } .btn-primary:active:not(:disabled) { background: var(--accent-press); } .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-2); } .btn-secondary:hover:not(:disabled) { background: var(--surface-2); } .btn-ghost { background: transparent; color: var(--text-2); } .btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text); } .btn-danger { background: var(--bad); color: #fff; } .btn-danger:hover:not(:disabled) { filter: brightness(.94); } .btn-ok { background: var(--ok); color: #fff; } .btn-sm { padding: 6px 11px; font-size: var(--fs-sm); border-radius: var(--r-sm); } .btn-muted { background: var(--text-3) !important; color: #fff !important; } /* ── inputs ───────────────────────────────────────────── */ .input, .select, .textarea { font-size: var(--fs-base); color: var(--text); background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r); padding: 9px 12px; width: 100%; } .input::placeholder, .textarea::placeholder { color: var(--text-3); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); } .field-label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); margin-bottom: 6px; } /* ── badges / status pills ────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .01em; padding: 3px 10px; border-radius: var(--r-full); white-space: nowrap; border: 1px solid transparent; } .b-neutral { border-color: var(--border); } .b-accent { border-color: var(--accent-line); } .b-ok { border-color: rgba(21,128,61,.18); } .b-warn { border-color: rgba(180,83,9,.18); } .b-bad { border-color: rgba(194,42,42,.18); } .b-info { border-color: rgba(29,103,201,.18); } .b-neutral { background: var(--surface-3); color: var(--text-2); } .b-accent { background: var(--accent-soft); color: var(--accent-text); } .b-ok { background: var(--ok-soft); color: var(--ok); } .b-warn { background: var(--warn-soft); color: var(--warn); } .b-bad { background: var(--bad-soft); color: var(--bad); } .b-info { background: var(--info-soft); color: var(--info); } /* ── cards / panels ───────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-sm); } /* hover-lift only on cards that are actually interactive (links/buttons) — a hover affordance on a static card quietly erodes trust in the real ones. */ .card.interactive, a.card { transition: box-shadow .15s ease, transform .15s ease; } .card.interactive:hover, a.card:hover { box-shadow: var(--sh); transform: translateY(-1px); } .card-pad { padding: var(--s5); } /* KPI tile */ .kpi { text-align: left; } .kpi .kpi-n { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; } .kpi .kpi-l { font-size: var(--fs-sm); color: var(--text-2); font-weight: 600; margin-top: 6px; } .kpi .kpi-s { font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; } .kpi.alert { border-color: var(--warn); background: var(--warn-soft); } .kpi.alert .kpi-n { color: var(--warn); } /* section label */ .sec-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); } /* ── tables ───────────────────────────────────────────── */ .tbl-wrap { overflow-x: auto; } table.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-base); } .tbl th { text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; } .tbl td { padding: 11px 12px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: top; } .tbl tbody tr:last-child td { border-bottom: 0; } .tbl tbody tr:hover { background: var(--surface-2); } /* ── modal ────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(13,15,20,.55); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: var(--s4); } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-lg); width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; padding: var(--s6); } .modal h3 { margin: 0 0 var(--s2); font-size: var(--fs-lg); font-weight: 700; } /* ── segmented tabs (pill group) ──────────────────────── */ .seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-full); padding: 3px; gap: 2px; } .seg > * { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); background: transparent; border: 0; padding: 6px 14px; border-radius: var(--r-full); cursor: pointer; } .seg > .on { background: var(--surface); color: var(--text); box-shadow: var(--sh-sm); } /* ── theme toggle button ──────────────────────────────── */ .theme-toggle { border: 1px solid var(--border-2); background: var(--surface); color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; padding: 7px 10px; border-radius: var(--r-full); cursor: pointer; white-space: nowrap; } .theme-toggle:hover { background: var(--surface-2); } /* ── scrollbars (subtle, webkit) ──────────────────────── */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background-color: var(--text-3); } ::-webkit-scrollbar-track { background: transparent; } /* ── helpers ──────────────────────────────────────────── */ .hidden { display: none !important; } .muted { color: var(--text-3); } .tnum { font-variant-numeric: tabular-nums; }