/* ============================================================ Bubbles Ops — design tokens + shell Mirrors handcrafted-ai/static/css/app.css: every color routes through a CSS variable so light/dark is a single data-theme flip on . Keep tokens in sync with the sales app. ============================================================ */ :root { --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --radius-sm: 10px; --radius: 16px; --radius-lg: 22px; --pill: 999px; --maxw: 640px; --header-h: 72px; /* taller than the sales app's 56px — fits the 2x Ops logo */ --ease: cubic-bezier(.4, 0, .2, 1); } /* ---- Dark theme (default) ---- */ :root, [data-theme="dark"] { --bg: #0d0d10; --surface: #16161a; --surface-2: #1e1e24; --elevated: #232329; --border: #2b2b33; --border-soft: #202027; --text: #f4f4f6; --text-dim: #a2a2ad; --text-faint: #6c6c77; --accent: #e0b058; --accent-press: #c99c47; --accent-soft: rgba(224, 176, 88, .16); --on-accent: #2b1e00; --shadow: 0 10px 34px rgba(0, 0, 0, .5); --shadow-sm: 0 2px 12px rgba(0, 0, 0, .4); color-scheme: dark; } /* ---- Light theme ---- */ [data-theme="light"] { --bg: #f6f6f4; --surface: #ffffff; --surface-2: #f1f1ef; --elevated: #ffffff; --border: #e6e6e2; --border-soft: #eeeeeb; --text: #18181b; --text-dim: #6b6b73; --text-faint: #9a9aa2; --accent: #c79333; --accent-press: #ab7d24; --accent-soft: rgba(199, 147, 51, .14); --on-accent: #ffffff; --shadow: 0 10px 34px rgba(0, 0, 0, .10); --shadow-sm: 0 2px 12px rgba(0, 0, 0, .07); color-scheme: light; } /* theme-based logo swap (same classes as the sales app) */ [data-theme="dark"] .logo-light { display: none; } [data-theme="light"] .logo-dark { display: none; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; } /* ---- Header (3-col: HCW wordmark / Ops logo / actions) ---- */ .header { height: var(--header-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--border-soft); background: var(--surface); position: sticky; top: 0; z-index: 10; } .header-left { display: flex; align-items: center; justify-self: start; } .header-center { display: flex; align-items: center; } .header-right { display: flex; align-items: center; gap: 12px; justify-self: end; } .hc-logo { height: 26px; width: auto; display: block; flex-shrink: 0; } .ops-logo { height: 52px; width: auto; display: block; } .icon-btn { background: none; border: none; color: var(--text-dim); font-size: 1.05rem; cursor: pointer; padding: 4px 6px; border-radius: var(--radius-sm); line-height: 1; } .icon-btn:hover { color: var(--text); background: var(--surface-2); } .who { color: var(--text-dim); font-size: .85rem; font-weight: 500; } .quiet { color: var(--text-faint); text-decoration: none; font-size: .85rem; } .quiet:hover { color: var(--text); } /* ---- Main / hero ---- */ main { flex: 1; display: flex; justify-content: center; padding: 40px 20px; } .hero { max-width: var(--maxw); width: 100%; } h1 { margin: 0 0 .4rem; font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; } .sub { color: var(--text-dim); line-height: 1.55; margin: 0 0 1rem; font-size: .92rem; } /* ---- Tool cards ---- */ .tools { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-direction: column; gap: 12px; } .tool { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow-sm); } .tool-name { font-weight: 700; font-size: .98rem; } .tool-status { color: var(--text-dim); font-size: .82rem; margin-top: 2px; } .tool-pill { font-size: .58rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: var(--pill); padding: .18rem .5rem; white-space: nowrap; } /* ---- Signed-out landing (login-page pattern from the sales app) ---- */ .login-page { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem 0; } .login-logo-img { width: 88px; height: 88px; border-radius: 50%; margin-bottom: 1.2rem; box-shadow: var(--shadow); } .login-wordmark { height: 58px; width: auto; margin-bottom: .4rem; } .login-tagline { font-size: .92rem; color: var(--text-dim); margin: .35rem 0 2.2rem; } .login-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 1.75rem; width: 100%; max-width: 360px; box-shadow: var(--shadow); } .login-card h2 { font-size: 1.2rem; font-weight: 800; margin: 0 0 .5rem; } .login-card p { color: var(--text-dim); font-size: .88rem; margin: 0 0 1.6rem; line-height: 1.55; } .btn-google { width: 100%; background: var(--text); color: var(--bg); font-size: .95rem; font-weight: 600; padding: .8rem; border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none; border: none; transition: opacity .15s; } .btn-google:hover { opacity: .9; } /* ---- Generic accent button ---- */ .btn { display: inline-block; background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; padding: .55rem 1.1rem; border-radius: var(--pill); } .btn:hover { background: var(--accent-press); } /* ---- Footer ---- */ .foot { color: var(--text-faint); font-size: .78rem; text-align: center; padding: 16px; border-top: 1px solid var(--border-soft); } /* ---- App shell: left sidebar (signed-in pages) ---- */ /* Flat tool list for now — grouping labels/dropdowns arrive when there are enough tools that categories earn themselves (Ben, 2026-07-13). */ .shell { display: flex; flex: 1; min-height: 0; } .sidebar { width: 220px; flex-shrink: 0; border-right: 1px solid var(--border-soft); background: var(--surface); padding: 18px 10px; display: flex; flex-direction: column; gap: 4px; } .side-label { font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); padding: 0 10px 6px; } .side-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text-dim); text-decoration: none; font-size: .9rem; font-weight: 600; } .side-item:hover { background: var(--surface-2); color: var(--text); } .side-item.active { background: var(--accent-soft); color: var(--accent); } .side-item.disabled { opacity: .45; cursor: default; } .side-item .soon { margin-left: auto; font-size: .55rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--border); border-radius: var(--pill); padding: .12rem .4rem; color: var(--text-faint); } .shell > main { flex: 1; min-width: 0; } @media (max-width: 800px) { .sidebar { display: none; } } /* ---- CS tool tab bar (Queue / Rules / Lanes) ---- */ .cs-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-soft); } .cs-tab { padding: 8px 16px; text-decoration: none; color: var(--text-dim); font-size: .88rem; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; } .cs-tab:hover { color: var(--text); } .cs-tab.active { color: var(--accent); border-bottom-color: var(--accent); }