/* ============================================================ Indigonix CX & Delivery Operations Platform Dark, dense, professional. Inspired by Linear/Notion/Hex. ============================================================ */ * { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg-0: #0b0e14; /* page background */ --bg-1: #11151d; /* sidebar / cards */ --bg-2: #161b25; /* raised surface */ --bg-3: #1d2330; /* hover / active */ --bg-4: #252c3b; /* input bg */ --line: #232a38; --line-2: #2c3445; --text-0: #e6ebf2; --text-1: #b6bfcd; --text-2: #8089a0; --text-3: #5b6478; --brand: #5b8def; /* Indigonix blue */ --brand-2: #6ea8ff; --brand-soft: rgba(91, 141, 239, 0.12); --brand-border: rgba(91, 141, 239, 0.35); --ok: #4ade80; --ok-soft: rgba(74, 222, 128, 0.12); --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, 0.14); --danger: #f87171; --danger-soft: rgba(248, 113, 113, 0.14); --info: #60a5fa; --info-soft: rgba(96, 165, 250, 0.12); --purple: #a78bfa; --purple-soft: rgba(167, 139, 250, 0.14); --pink: #f472b6; --pink-soft: rgba(244, 114, 182, 0.14); --radius: 8px; --radius-sm: 5px; --radius-lg: 12px; --shadow: 0 1px 0 rgba(255,255,255,0.03), 0 4px 12px rgba(0,0,0,0.3); --shadow-lg: 0 10px 30px rgba(0,0,0,0.4); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "SF Pro Display", Roboto, sans-serif; --mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; } /* Light theme — flips the whole app by overriding the token variables. Applied only when the user explicitly picks light via the sidebar toggle (default stays dark). */ :root[data-theme="light"] { --bg-0: #eef1f6; --bg-1: #ffffff; --bg-2: #f4f6fb; --bg-3: #e9edf4; --bg-4: #ffffff; --line: #dfe4ee; --line-2: #cdd5e2; --text-0: #10192b; --text-1: #39445a; --text-2: #64708a; --text-3: #9aa4b8; --brand-soft: rgba(28, 68, 176, 0.10); --brand-border: rgba(28, 68, 176, 0.30); --shadow: 0 1px 2px rgba(15,23,42,0.05), 0 4px 12px rgba(15,23,42,0.08); --shadow-lg: 0 10px 30px rgba(15,23,42,0.12); } /* Theme toggle (sun / moon) */ .theme-toggle { display: inline-flex; gap: 2px; padding: 3px; margin: 4px 0 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; } .theme-toggle button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 13px; padding: 6px 10px; border: none; border-radius: 999px; cursor: pointer; background: transparent; color: var(--text-2); transition: background .15s, color .15s; } .theme-toggle button.active { background: var(--brand); color: #fff; } .theme-toggle button:not(.active):hover { color: var(--text-0); } /* Compact icon-only variant — used at the bottom of the sidebar, above the language picker. No labels, just a sun/moon pair tucked into a small pill. */ .theme-toggle.theme-toggle-compact { margin: 0 auto 8px; padding: 3px; width: max-content; } .theme-toggle.theme-toggle-compact button { flex: none; width: 30px; height: 30px; padding: 0; border-radius: 50%; } .theme-toggle.theme-toggle-compact button svg { display: block; } .theme-toggle.theme-toggle-compact button.active { background: var(--brand); color: #fff; } .theme-toggle.theme-toggle-compact button:not(.active):hover { background: var(--bg-3); color: var(--text-0); } html, body { height: 100%; } body { background: var(--bg-0); color: var(--text-0); font-family: var(--font); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow: hidden; } #app { display: grid; grid-template-columns: 256px 1fr; height: 100vh; } /* ============= BOOT LOADER ============= The only markup in app.html's before JS builds the shell. It lives here, next to the theme variables, so it is painted in whichever palette the inline script just applied - the point of the loader is that the first frame already looks like this app, in this user's theme. */ .boot-splash { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--bg-0); } .boot-logo { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--brand); color: #fff; } .boot-name { font-size: 15px; font-weight: 600; color: var(--text-1); letter-spacing: .2px; } .boot-bar { width: 132px; height: 3px; border-radius: 2px; background: var(--bg-3); overflow: hidden; } .boot-bar span { display: block; width: 40%; height: 100%; border-radius: 2px; background: var(--brand); animation: boot-slide 1.1s ease-in-out infinite; } @keyframes boot-slide { from { transform: translateX(-100%); } to { transform: translateX(330%); } } /* A looping bar is decoration, not information: honour the OS setting. */ @media (prefers-reduced-motion: reduce) { .boot-bar span { animation: none; width: 100%; opacity: .55; } }