/* KYRIX — design system. Tokens per Design/DESIGN_GUIDE.md. Dark theme is default; light theme via [data-theme="light"] on . */ :root { --k-bg: #070C18; --k-bg-deep: #04070F; --k-surface: #0D1626; --k-surface-2: #131F33; --k-line: #1E2C46; --k-line-soft: #16223A; --k-text: #E8F0FB; --k-text-dim: #93A4C2; --k-text-mute: #56698A; --k-zebra: rgba(255, 255, 255, .02); --k-blue: #0E63F0; --k-cyan: #1AC0FC; --k-blue-deep: #0A368F; --k-green: #12CFA6; --k-purple: #7C6CF0; --k-amber: #F2A33C; --k-red: #F2456A; --k-grad: linear-gradient(135deg, #1A82FF, #0B4FD6); --font-display: "Space Grotesk", system-ui, sans-serif; --font-ui: "IBM Plex Sans", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --sidebar-w: 236px; --radius: 2px; } [data-theme="light"] { --k-bg: #EBEEF4; --k-bg-deep: #E1E6EF; --k-surface: #FFFFFF; --k-surface-2: #F5F7FB; --k-line: #DCE2EC; --k-line-soft: #E6EAF1; --k-text: #0C1424; --k-text-dim: #54637E; --k-text-mute: #8A97AC; --k-zebra: rgba(12, 20, 36, .025); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--k-bg); color: var(--k-text); font-family: var(--font-ui); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--k-cyan); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, .display { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .eyebrow { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .18em; font-size: 11px; color: var(--k-text-mute); } /* ---------- App shell ---------- */ .kx-app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; } .kx-sidebar { background: var(--k-bg-deep); border-right: 1px solid var(--k-line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .kx-brand { display: flex; align-items: center; gap: 10px; padding: 18px 20px; border-bottom: 1px solid var(--k-line-soft); } .kx-brand img { height: 26px; } .kx-brand .wordmark { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .18em; font-size: 16px; } .kx-nav { padding: 12px 10px; flex: 1; } .kx-nav-group { margin-bottom: 14px; } .kx-nav-group > .eyebrow { padding: 6px 12px; display: block; } .kx-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius); color: var(--k-text-dim); font-size: 14px; text-decoration: none; } .kx-nav a:hover { background: var(--k-surface-2); color: var(--k-text); } .kx-nav a.active { background: var(--k-surface-2); color: var(--k-text); box-shadow: inset 2px 0 0 var(--k-cyan); } .kx-nav .ico { width: 16px; text-align: center; opacity: .85; } .kx-main { display: flex; flex-direction: column; min-width: 0; } .kx-topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 14px; padding: 12px 22px; background: rgba(13, 22, 38, .85); backdrop-filter: blur(6px); border-bottom: 1px solid var(--k-line); } [data-theme="light"] .kx-topbar { background: rgba(255, 255, 255, .85); } .kx-topbar .spacer { flex: 1; } .kx-content { padding: 22px; max-width: 1320px; width: 100%; } /* ---------- Cards ---------- */ .kx-card { position: relative; background: var(--k-surface); border: 1px solid var(--k-line); border-radius: var(--radius); padding: 18px; } .kx-card::before { content: ""; position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-left: 2px solid var(--k-cyan); border-top: 2px solid var(--k-cyan); } .kx-card h2, .kx-card h3 { margin-top: 0; } .kx-grid { display: grid; gap: 16px; } /* Let grid items shrink below their content size so wide tables scroll inside their card instead of blowing out the page width on mobile. */ .kx-grid > * { min-width: 0; } .kx-kpis { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .kx-kpi .label { color: var(--k-text-mute); font-size: 12px; } .kx-kpi .value { font-family: var(--font-mono); font-size: 30px; font-weight: 600; margin-top: 6px; } /* ---------- Tables ---------- */ .kx-table { width: 100%; border-collapse: collapse; font-size: 14px; } .kx-table thead th { position: sticky; top: 0; text-align: left; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--k-text-mute); padding: 11px 14px; background: var(--k-surface-2); border-bottom: 1px solid var(--k-line); } .kx-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--k-line-soft); } .kx-table tbody tr:nth-child(odd) { background: var(--k-zebra); } .kx-table tbody tr:hover { background: var(--k-surface-2); } .kx-table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; } .kx-table .code { font-family: var(--font-mono); color: var(--k-text-dim); } /* ---------- Badges / chips ---------- */ .kx-chip { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius); border: 1px solid var(--k-line); color: var(--k-text-dim); } .kx-chip--high { color: var(--k-red); border-color: #F2456A55; } .kx-chip--medium { color: var(--k-amber); border-color: #F2A33C55; } .kx-chip--low { color: var(--k-green); border-color: #12CFA655; } .kx-chip--info { color: var(--k-cyan); border-color: #1AC0FC55; } .kx-chip.is-active { outline: 2px solid currentColor; outline-offset: 1px; background: #ffffff0d; } /* ---------- Buttons ---------- */ .btn { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; cursor: pointer; padding: 9px 14px; border-radius: var(--radius); border: 1px solid var(--k-line); background: transparent; color: var(--k-text); transition: box-shadow .15s, background .15s; } .btn:hover { box-shadow: 0 0 0 1px var(--k-cyan), 0 0 12px -4px var(--k-cyan); } .btn--primary { background: var(--k-grad); border-color: #2E7BFF; color: #fff; } .btn--ghost { background: transparent; } .btn--sm { padding: 6px 10px; font-size: 11px; } .btn:disabled { opacity: .55; cursor: default; box-shadow: none; } /* ---------- Forms ---------- */ .kx-field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; } .kx-field label { font-size: 12px; color: var(--k-text-dim); } .form-control { width: 100%; background: var(--k-surface-2); color: var(--k-text); border: 1px solid var(--k-line); border-radius: var(--radius); padding: 10px 12px; font-family: var(--font-ui); font-size: 14px; } .form-control:focus { outline: none; border-color: var(--k-blue); box-shadow: 0 0 0 1px var(--k-blue), 0 0 14px -6px var(--k-cyan); } .kx-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } /* ---------- Alerts / toasts ---------- */ .kx-alert { border: 1px solid var(--k-line); border-left-width: 3px; border-radius: var(--radius); padding: 10px 14px; font-size: 14px; margin: 10px 0; } .kx-alert--error { border-left-color: var(--k-red); color: var(--k-red); } .kx-alert--ok { border-left-color: var(--k-green); color: var(--k-green); } .kx-alert--warn { border-left-color: var(--k-amber); color: var(--k-amber); } .kx-disclaimer { border-left: 3px solid var(--k-amber); background: var(--k-surface); color: var(--k-text-dim); font-size: 12px; padding: 8px 12px; border-radius: var(--radius); margin-bottom: 16px; } /* ---------- States ---------- */ .kx-empty { text-align: center; color: var(--k-text-mute); padding: 48px 16px; } .kx-spinner { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--k-line); border-top-color: var(--k-cyan); animation: kx-spin .7s linear infinite; vertical-align: middle; } .htmx-request .kx-spinner { display: inline-block; } .htmx-request.kx-spinner { display: inline-block; } .kx-spinner--on { display: inline-block; } @keyframes kx-spin { to { transform: rotate(360deg); } } /* Ad-hoc check (/search): pending row shows only while its request is in flight */ .kx-table tr.kx-check-wait { display: none; } .kx-table tr.kx-check-wait.htmx-request { display: table-row; } .kx-table tr.kx-check-wait td { color: var(--k-text-dim); font-size: 13px; } .kx-table tr.kx-check-wait .kx-spinner { margin-right: 6px; } .kx-check-row.htmx-request { opacity: .55; } /* ---------- Action menu (dropdown) ---------- */ .kx-menu { display: inline-block; } .kx-menu > summary { list-style: none; cursor: pointer; user-select: none; display: inline-block; white-space: nowrap; } .kx-menu > summary::-webkit-details-marker { display: none; } /* Fixed coords (set in kyrix.js) keep the panel above scrollable table wrappers */ .kx-menu__list { position: fixed; z-index: 60; min-width: 170px; display: flex; flex-direction: column; gap: 4px; align-items: stretch; background: var(--k-surface); border: 1px solid var(--k-line); border-radius: var(--radius); padding: 6px; box-shadow: 0 14px 36px rgba(0, 0, 0, .4); } .kx-menu__list .btn { text-align: left; width: 100%; } .kx-menu__list .kx-chip { justify-content: flex-start; } /* ---------- Dialog ---------- */ .kx-dialog { border: 1px solid var(--k-line); border-radius: 14px; background: var(--k-surface); color: var(--k-text); padding: 22px; width: min(420px, calc(100vw - 32px)); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); } .kx-dialog::backdrop { background: rgba(0, 0, 0, .55); backdrop-filter: blur(2px); } .kx-pager { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 16px; } .kx-toggle { display: flex; border: 1px solid var(--k-line); border-radius: var(--radius); overflow: hidden; } .kx-toggle button { background: transparent; color: var(--k-text-mute); border: 0; padding: 6px 10px; font-family: var(--font-mono); font-size: 11px; cursor: pointer; } .kx-toggle button.active { background: var(--k-blue); color: #fff; } /* ---------- Multi-column page layouts (collapse on mobile) ---------- */ .kx-login { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 100vh; } .kx-dash-cols { grid-template-columns: 2fr 1fr; } .kx-even-cols { grid-template-columns: 1fr 1fr; } /* ---------- Mobile drawer scrim ---------- */ .kx-scrim { display: none; position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .5); } .kx-scrim.open { display: block; } /* ---------- Responsive (mobile first refinements) ---------- */ @media (max-width: 900px) { .kx-app { grid-template-columns: 1fr; } .kx-sidebar { position: fixed; left: 0; top: 0; z-index: 50; transform: translateX(-100%); transition: transform .2s; width: var(--sidebar-w); } .kx-sidebar.open { transform: translateX(0); } .kx-burger { display: inline-flex !important; } .kx-table-wrap { overflow-x: auto; } .kx-table-wrap .kx-table { min-width: 560px; } /* Topbar: wrap controls onto a second row instead of crushing the toggles */ .kx-topbar { flex-wrap: wrap; row-gap: 10px; } .kx-topbar .spacer { flex-basis: 100%; height: 0; } .kx-topbar > a.mono { display: none; } .kx-toggle { flex: 0 0 auto; } } @media (max-width: 760px) { .kx-dash-cols, .kx-even-cols, .kx-login { grid-template-columns: 1fr; } .kx-login > section { padding: 28px 22px !important; } .kx-login > section:first-child { border-right: 0; border-bottom: 1px solid var(--k-line); } } @media (max-width: 480px) { .kx-content { padding: 14px; } .kx-card { padding: 14px; } .kx-kpi .value { font-size: 24px; } } /* ---------- Tables → stacked label/value cards on phones ---------- */ @media (max-width: 700px) { .kx-table-wrap { overflow-x: visible; } .kx-table-wrap .kx-table { min-width: 0; } .kx-table thead { display: none; } .kx-table, .kx-table tbody, .kx-table tr, .kx-table td { display: block; width: auto; } .kx-table tbody tr { border-bottom: 1px solid var(--k-line); padding: 8px 0; } .kx-table tbody tr:nth-child(odd) { background: transparent; } .kx-table tbody tr:hover { background: transparent; } .kx-table tbody td { display: flex; align-items: baseline; gap: 14px; justify-content: space-between; text-align: right; padding: 5px 14px; border: 0; } .kx-table tbody td::before { content: attr(data-label); flex: 0 0 auto; text-align: left; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--k-text-mute); } /* First cell acts as the row's heading (full-width, no label) */ .kx-table tbody td:first-child { display: block; text-align: left; font-size: 15px; padding-bottom: 4px; } .kx-table tbody td:first-child::before { display: none; } .kx-table .num { text-align: right; } } .kx-burger { display: none; background: transparent; border: 1px solid var(--k-line); color: var(--k-text); border-radius: var(--radius); padding: 6px 10px; cursor: pointer; }